perf(OwnerInfo): use arknights.config.tsx

Yue-plus · Aug 30, 2024 · 6abf654 · 6abf654
1 parent 6a1d21f
commit 6abf654
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 222 deletions.
diff --git a/arknights.config.tsx b/arknights.config.tsx
@@ -35,6 +35,14 @@ export default {
             TapTap: "https://www.taptap.cn/",
             GitHub: "https://github.com/Yue-plus/astro-arknights",
         },
+        ownerInfo: {
+            name: "Yue_plus",
+            slogan: "一切不如意终将远去，未来风景独好。",
+            footerLinks: [
+                {label: "GitHub", url: "https://github.com/Yue-plus"},
+                {label: "Bilibili", url: "https://space.bilibili.com/28606851"},
+            ]
+        }
     },
     pageTracker: {
         microInfo: "ARKNIGHTS",

diff --git a/package.json b/package.json
@@ -16,12 +16,12 @@
     "@nanostores/react": "^0.7.3",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.14.6",
+    "astro": "^4.15.1",
     "nanostores": "^0.11.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.77.8",
-    "swiper": "^11.1.10",
+    "swiper": "^11.1.11",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4"
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/_types/ArknightsConfig.ts b/src/_types/ArknightsConfig.ts
@@ -8,6 +8,12 @@ export type NavbarItem = {
     href: string
 }
 
+export type OwnerInfoFooterLink = {
+    label: string,
+    url: string,
+    portraitHidden?: boolean
+}
+
 export type ArknightsConfig = {
     title: string
     description: string
@@ -30,6 +36,11 @@ export type ArknightsConfig = {
             TapTap?: string
             GitHub?: string
         }
+        ownerInfo: {
+            name?: string
+            slogan?: string
+            footerLinks?: OwnerInfoFooterLink[]
+        }
     }
     pageTracker: {
         microInfo: string

diff --git a/src/components/OwnerInfo.tsx b/src/components/OwnerInfo.tsx
@@ -1,16 +1,18 @@
-import React from "react";
-import arknightsConfig from "../../arknights.config.tsx";
+import React from "react"
+import type {OwnerInfoFooterLink} from "../_types/ArknightsConfig.ts"
+import arknightsConfig from "../../arknights.config.tsx"
 import {
     IconArrow,
-    IconBiliBili, IconGitHub,
+    IconBiliBili,
+    IconGitHub,
     IconSkland,
     IconTapTap,
     IconWechat,
     IconWeibo,
-    LogoRhodesIsland
-} from "./SvgIcons";
-import {isOwnerInfoOpen} from "./store/rootLayoutStore.ts";
-import {useStore} from "@nanostores/react";
+    LogoRhodesIsland,
+} from "./SvgIcons"
+import {isOwnerInfoOpen} from "./store/rootLayoutStore.ts"
+import {useStore} from "@nanostores/react"
 
 
 function Divider({children, portraitHidden}: {
@@ -26,22 +28,44 @@ function Divider({children, portraitHidden}: {
 }
 
 function Welcome() {
+    const name = arknightsConfig?.navbar?.ownerInfo?.name
+        ? <div className="pb-5">
+            <img className="w-[12.5625rem] portrait:w-[21rem] h-auto ml-[1.5rem] portrait:ml-[5.5rem] block"
+                 src={import.meta.env.BASE_URL + "images/passport.png"}
+                 alt="通行证"/>
+            <div
+                className="text-[1rem] portrait:text-[1.75rem] mt-[-3.5rem] portrait:mt-[-5.75rem] ml-8 portrait:ml-[6.5rem]">
+                <div className="h-6 portrait:h-8 bg-[#232323] px-3 inline-flex items-center"
+                     style={{boxShadow: "0 .75rem .5rem rgba(0, 0, 0, .5)"}}>
+                    {arknightsConfig.navbar.ownerInfo.name}
+                </div>
+            </div>
+        </div>
+        : <img
+            className="w-[12.5625rem] portrait:w-[21rem] h-auto ml-[1.5rem] portrait:ml-[5.5rem] block"
+            src={import.meta.env.BASE_URL + "images/no_account_info.png"}
+            alt="无账号信息"/>
+
+    const slogan = arknightsConfig?.navbar?.ownerInfo?.slogan
+        ? <div
+            className="w-[10.75rem] portrait:w-[17.75rem] text-[1rem] portrait:text-[1.625rem] font-bold mt-8 ml-11 portrait:ml-[8.5rem] break-words hyphens-auto text-ellipsis">
+            {/* TODO: 换个字体 */}
+            {arknightsConfig.navbar.ownerInfo.slogan}
+        </div>
+        : <img className="w-[10.75rem] portrait:w-[17.75rem] h-auto ml-[2.875rem] portrait:ml-[8rem] block"
+               src={import.meta.env.BASE_URL + "images/stroke_text-rhodes_island.png"}
+               alt="Rhodes Island"/>
+
     return <>
         <Divider>WELCOME</Divider>
         <div className={"h-[24rem] portrait:h-[32rem] relative"}>
             <div className={"w-full absolute top-[2.375rem] portrait:top-[1rem]"}>
-                <img className={"w-[12.5625rem] portrait:w-[21rem] h-auto ml-[1.5rem] portrait:ml-[5.5rem] block"}
-                     src={import.meta.env.BASE_URL + "images/no_account_info.png"}
-                     alt="无账号信息"/>
-                <img className={"w-[10.75rem] portrait:w-[17.75rem] h-auto ml-[2.875rem] portrait:ml-[8rem] block"}
-                     src={import.meta.env.BASE_URL + "images/stroke_text-rhodes_island.png"}
-                     alt="Rhodes Island"/>
-                <div className={"text-[1.125rem] portrait:text-[1.875rem]"
-                    + " ml-[2.875rem] portrait:ml-[8rem] mt-[.25rem] font-bold"}>Please login.
-                </div>
-                <div className={"text-[1rem] portrait:text-[1.625rem]"
-                    + " ml-[2.875rem] portrait:ml-[8rem]"}>请先登入您的账号。
-                </div>
+                {name}
+                {slogan}
+                {/*
+                <div className="text-[1.125rem] portrait:text-[1.875rem] ml-[2.875rem] portrait:ml-[8rem] mt-[.25rem] font-bold">Please login.</div>
+                <div className="text-[1rem] portrait:text-[1.625rem] ml-[2.875rem] portrait:ml-[8rem]">请先登入您的账号。</div>
+                */}
             </div>
         </div>
     </>
@@ -89,17 +113,10 @@ function ToolBox() {
     </>
 }
 
-function BoxButton({label, url, portraitHidden}: {
-    label: string
-    url: string
-    portraitHidden?: boolean
-}) {
-    return <a href={url} className={"h-[1.5rem] portrait:h-[2.5rem]"
-        + " mt-[1rem] portrait:mt-[1.5rem] px-[1.25rem] portrait:px-[2rem]"
-        + " text-white hover:text-black bg-black hover:bg-white flex items-center justify-between"
-        + " transition duration-300 cursor-pointer portrait:text-[1.625rem]"
-        + (portraitHidden ? " portrait:hidden" : "")}>
-        <span style={{fontFamily: "SourceHanSans-Medium"}}>{label}</span>
+function FooterLink({label, url, portraitHidden}: OwnerInfoFooterLink) {
+    return <a href={url} className={(portraitHidden ? "portrait:hidden " : "")
+        + "h-[1.5rem] portrait:h-[2.5rem] mt-[1rem] portrait:mt-[1.5rem] px-[1.25rem] portrait:px-[2rem] text-white portrait:text-[1.625rem] hover:text-black bg-black hover:bg-white flex items-center justify-between transition duration-300 cursor-pointer"}>
+        <span className="font-benderBold">{label}</span>
         <IconArrow className="w-[.5rem] pointer-events-none"/>
     </a>
 }
@@ -139,9 +156,17 @@ export default function OwnerInfo(): React.JSX.Element {
             <div className={"w-full absolute left-0 bottom-0 portrait:static portrait:mb-[3.75rem]"}>
                 <div className={"relative portrait:static pl-[2.5rem] pr-[1.25rem]"
                     + " portrait:pl-[8rem] portrait:pr-[6.75rem]"}>
+                    {
+                        // TODO: 感觉有点和上面 <ToolBox/> 功能重复
+                        arknightsConfig?.navbar?.ownerInfo?.footerLinks?.map((item, index) =>
+                            <FooterLink key={index} {...item}/>) ?? null
+                    }
+
+                    {/*
                     <BoxButton label="客服中心" url="" portraitHidden/>
                     <BoxButton label="立即登入" url=""/>
                     <BoxButton label="前往注册" url=""/>
+                    */}
                 </div>
                 <CloseButton/>
             </div>

diff --git a/src/layouts/InfoLayout.astro b/src/layouts/InfoLayout.astro
@@ -79,7 +79,7 @@ const subNavigationItems = Astro.props.subNavigationItems
                 <slot name="tool-panel"/>
             </div>
     }
-
+    <!-- TODO: ↑↓ 两个合并为一个 ToolPanel 统一布局 -->
     <div class="flex justify-end mb-[9.5rem] portrait:mb-[5.75rem] fixed bottom-0 right-0 z-10">
         <a href={goBackHref ? goBackHref : base} target="_self"
            class="w-[14.875rem] h-[3.75rem] text-inherit no-underline hover:text-black hover:bg-white bg-[#5a5a5a] px-[2.5rem] flex items-center justify-between cursor-pointer transition-[color,background-color] duration-300">

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -10,6 +10,8 @@ import RootPageViews from "./_views/RootPageViews";
 <RootLayout lang={arknightsConfig.language} title={arknightsConfig.title} description={arknightsConfig.description}>
     <PageTracker client:load/>
     <main id="root-page-views" class="w-full h-full relative select-none">
+        {/* TODO: 使用 <ViewTransitions /> 优化，完全服务端渲染
+            https://docs.astro.build/zh-cn/guides/view-transitions/ */}
         <RootPageViews client:only="react"/>
     </main>
     <LineDecorator client:only="react"/>