Merge remote-tracking branch 'a/main'

# Conflicts: # src/_types/ArknightsConfig.ts # src/components/Init.tsx # src/pages/_views/03-World.tsx
Yue-plus · Sep 29, 2024 · f2c5415 · f2c5415
2 parents 96611f6 + 0d53ec8
commit f2c5415
Show file tree

Hide file tree

Showing 7 changed files with 263 additions and 270 deletions.
diff --git a/package.json b/package.json
@@ -14,15 +14,15 @@
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.1",
     "@nanostores/react": "^0.7.3",
-    "@types/react": "^18.3.8",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.15.8",
+    "astro": "^4.15.9",
     "nanostores": "^0.11.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sass": "^1.79.3",
+    "sass": "^1.79.4",
     "swiper": "^11.1.14",
-    "tailwindcss": "^3.4.12",
+    "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/_types/ArknightsConfig.ts b/src/_types/ArknightsConfig.ts
@@ -62,11 +62,11 @@ export type ArknightsConfig = {
         },
         WORLD: {
             items: {
-                title: string
-                subTitle: string
-                imageUrl: string
-                description: string
+                title: string,
+                subTitle: string,
+                imageUrl: string,
+                description: string,
             }[]
         }
     }
-}
+}
diff --git a/src/components/Init.tsx b/src/components/Init.tsx
@@ -45,7 +45,7 @@ export function Init() {
                         // console.log("资源加载成功:", resourceName);
                         setLoadedResources(prev => new Set(prev).add(resourceName));
                         incrementProgress();
-                        
+
                         if (resourceName.endsWith('/images/index-bg.jpg')) {
                             isInitialized.set(true);
                             stopObserving();
@@ -133,26 +133,26 @@ export function Init() {
             <div className={`absolute top-0 bottom-0 w-[0.05vw] bg-[#686767] transition-all duration-1000 ease-in-out ${
                 isFadingOut ? 'right-[-5vw]' : 'right-[5vw]'
             }`} />
-            
+
             <div className="flex flex-col items-center justify-center h-full w-full">
                 <div className="flex-grow" />
-                
+
                 <div className="flex items-center justify-center mb-[2vw]">
                     <TitleArknights
                         className={`w-[13vw] h-[17vw] max-w-full text-[rgb(164,164,164)]`}
                     />
                 </div>
-                
+
                 <div className="flex-grow" />
-                
+
                 <div className="w-full max-w-[90vw] px-[2vw] absolute" style={{ top: '75%' }}>
                     <div className={`flex items-start ${isPortrait ? 'flex-col' : ''}`}>
-                        <div 
+                        <div
                             className={`whitespace-nowrap ${
                                 isPortrait 
                                     ? 'fixed bottom-[1%] left-[1%] text-[10px]' ////idk,反正就是text-[1vw]
                                     : 'mr-[15vw] text-[1.2vw]'
-                            }`} 
+                            }`}
                             style={{ color: commonColor }}
                         >
                             <span>© YUE_PLUS</span>
@@ -162,14 +162,14 @@ export function Init() {
                                 <div className="absolute left-0 w-[0.3vw] h-[0.3vw]" style={{ backgroundColor: commonColor }}></div>
                                 <div className="absolute right-0 w-[0.3vw] h-[0.3vw]" style={{ backgroundColor: commonColor }}></div>
                                 <div className="absolute top-[0.1vw] left-0 right-0 h-[0.1vw]" style={{ backgroundColor: commonColor }}></div>
-                                <div 
-                                    className="absolute top-0 left-0 h-[0.3vw] transition-all duration-300 ease-linear" 
+                                <div
+                                    className="absolute top-0 left-0 h-[0.3vw] transition-all duration-300 ease-linear"
                                     style={{ width: `${progress}%`, backgroundColor: loadingColor }}
                                 />
                             </div>
                             <div className="flex justify-between items-center mt-[0.8vw]">
                                 <div className="flex items-center text-[0.8vw]" style={{ color: loadingColorText }}>
-                                    <IconDblArrow className="w-[0.8vw] h-[0.8vw] mr-[0.4vw]" />
+                                    <IconDblArrow className="w-[0.8vw] h-[0.8vw] mr-[0.4vw]"/>
                                     <span>{`LOADING - ${Math.round(progress)}%`}</span>
                                 </div>
                                 <div className={`flex items-center text-[0.8vw]`} style={{ color: commonColor }}>
@@ -184,8 +184,8 @@ export function Init() {
 
                 <div className="flex-grow" />
             </div>
-            
-            {/* <div 
+
+            {/* <div
                 ref={listRef}
                 className="absolute bottom-[2vw] left-[2vw] text-[0.8vw] text-white max-h-[20vh] overflow-y-auto opacity-50"
             >
@@ -202,4 +202,4 @@ export function Init() {
             </div> */}
         </div>
     );
-}
+}
diff --git a/src/layouts/RootLayout.astro b/src/layouts/RootLayout.astro
@@ -9,7 +9,6 @@ import {Menu} from "../components/header/NavMenu"
 import ToolBox from "../components/ToolBox"
 import OwnerInfo from "../components/OwnerInfo"
 import {SvgDefs} from "../components/SvgIcons"
-import {Init} from "../components/Init";
 
 interface Props {
     lang?: string
@@ -37,7 +36,6 @@ const {lang, title, description, subNavigationItems} = Astro.props
     <ResponsiveFontSize/>
 </head>
 <body class="w-full h-full text-white bg-black m-0 overflow-hidden">
-  <Init client:load />
   <div class="w-full h-full relative bg-layout bg-center bg-cover bg-no-repeat">
     <div class="relative w-full h-full m-auto max-w-[180rem]">
         <Header/>

diff --git a/src/pages/_views/03-World.tsx b/src/pages/_views/03-World.tsx
@@ -7,7 +7,7 @@ import PortraitBottomGradientMask from "../../components/PortraitBottomGradientM
 import config from "../../../arknights.config.tsx";
 import ParticleFactory from '../../components/ParticleFactory.tsx';
 
-const items = config.rootPage.WORLD.items;
+const items = config.rootPage.WORLD!.items
 
 // 将 AshParticles 的动画逻辑抽离到自定义 hook
 function useAshParticlesAnimation(count: number, canvasRef: React.RefObject<HTMLCanvasElement>) {
@@ -123,7 +123,7 @@ function List({ onItemSelect }: { onItemSelect: (index: number) => void }) {
       const rect = listRef.current.getBoundingClientRect();
       const x = e.clientX - rect.left;
       const y = e.clientY - rect.top;
-      
+
       const imgWidth = 1024;
       const imgHeight = 1024;
 
@@ -157,7 +157,7 @@ function List({ onItemSelect }: { onItemSelect: (index: number) => void }) {
   const handleMouseLeave = () => {
     setActiveImage(null);
     isFirstMove.current = true;
-  };    
+  };
 
   useEffect(() => {
     const animatePosition = () => {
@@ -196,11 +196,11 @@ function List({ onItemSelect }: { onItemSelect: (index: number) => void }) {
   };
 
   const memoizedItems = useMemo(() => items.map(({title, subTitle}: {title: string, subTitle: string}, index: number) => (
-    <MemoizedItem 
-      key={index} 
+    <MemoizedItem
+      key={index}
       delay={isFirstLoad.current ? initialDelay + index * itemAnimationDelay : index * itemAnimationDelay}
-      title={title} 
-      subTitle={subTitle} 
+      title={title}
+      subTitle={subTitle}
       onClick={() => handleItemClick(index)}
       isExiting={isExiting}
       exitingIndex={exitingIndex}
@@ -215,41 +215,39 @@ function List({ onItemSelect }: { onItemSelect: (index: number) => void }) {
   }, []);
 
   return (
-    <div className="flex">
-      <div 
-        ref={listRef}
-        className={`w-[39.875rem] absolute top-[20.3703703704%] left-[9rem] transition-all duration-500 ${isExiting ? '-translate-x-full opacity-0' : ''} z-10`}
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
-      >
-        {memoizedItems}
-        {activeImage && (
-          <img 
-            src={activeImage} 
-            alt="Active item"
-            className="absolute pointer-events-none transition-opacity duration-300 ease-out"
-            style={{
-              width: '1024px',
-              height: '1024px',
-              objectFit: 'cover',
-              left: `${imagePosition.x}px`,
-              top: `${imagePosition.y}px`,
-              opacity: 1,
-              zIndex: -1,
-              filter: 'blur(0.2px)',
-            }}
-          />
-        )}
-      </div>
+    <div
+      ref={listRef}
+      className={`w-[39.875rem] absolute top-[20.3703703704%] left-[9rem] transition-all duration-500 ${isExiting ? '-translate-x-full opacity-0' : ''} z-10`}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+    >
+      {memoizedItems}
+      {activeImage && (
+        <img
+          src={activeImage}
+          alt="Active item"
+          className="absolute pointer-events-none transition-opacity duration-300 ease-out"
+          style={{
+            width: '1024px',
+            height: '1024px',
+            objectFit: 'cover',
+            left: `${imagePosition.x}px`,
+            top: `${imagePosition.y}px`,
+            opacity: 1,
+            zIndex: -1,
+            filter: 'blur(0.2px)',
+          }}
+        />
+      )}
     </div>
   );
 }
 
-function Item({title, subTitle, delay, onClick, isExiting, exitingIndex, index}: { 
-  title: string; 
-  subTitle: string, 
-  delay: number, 
-  onClick: () => void, 
+function Item({title, subTitle, delay, onClick, isExiting, exitingIndex, index}: {
+  title: string;
+  subTitle: string,
+  delay: number,
+  onClick: () => void,
   isExiting: boolean,
   exitingIndex: number | null,
   index: number
@@ -273,7 +271,7 @@ function Item({title, subTitle, delay, onClick, isExiting, exitingIndex, index}:
   const exitDelay = isExiting ? (index - (exitingIndex ?? 0)) * 50 : 0;
 
   return (
-    <a 
+    <a
       ref={itemRef}
       href="#"
       className={`h-24 pb-3 leading-none flex items-end relative transition-all duration-300 ease-out cursor-pointer
@@ -297,7 +295,7 @@ function Item({title, subTitle, delay, onClick, isExiting, exitingIndex, index}:
       >
         {subTitle}
       </div>
-      <div 
+      <div
         className="text-[2.5rem] font-bold relative transition-[color,transform] duration-300"
         style={{
           textShadow: "0 0 1em #000,0 0 1em #000",
@@ -307,7 +305,7 @@ function Item({title, subTitle, delay, onClick, isExiting, exitingIndex, index}:
       >
         {title}
       </div>
-      <div 
+      <div
         className="text-[1.25rem] font-n15eBold ml-[1.5rem] relative transition-[color,transform] duration-300"
         style={{
           textShadow: "0 0 1em #000,0 0 1em #000",
@@ -321,8 +319,8 @@ function Item({title, subTitle, delay, onClick, isExiting, exitingIndex, index}:
   )
 }
 
-function Details({item, onBack, onPrevious, onNext}: { 
-  item: typeof items[0], 
+function Details({item, onBack, onPrevious, onNext}: {
+  item: typeof items[0],
   onBack: () => void,
   onPrevious: () => void,
   onNext: () => void
@@ -456,19 +454,19 @@ export default function World() {
   }, []);
 
   const handlePrevious = useCallback(() => {
-    setSelectedItemIndex((prevIndex) => 
+    setSelectedItemIndex((prevIndex) =>
       prevIndex === null ? null : (prevIndex - 1 + items.length) % items.length
     );
   }, []);
 
   const handleNext = useCallback(() => {
-    setSelectedItemIndex((prevIndex) => 
+    setSelectedItemIndex((prevIndex) =>
       prevIndex === null ? null : (prevIndex + 1) % items.length
     );
   }, []);
 
   return (
-    <div 
+    <div
       ref={world}
       className={`w-[100vw] max-w-[180rem] h-full absolute top-0 right-0 bottom-0 left-auto bg-[#272727] bg-2 bg-cover bg-[50%] transition-all duration-1000 ${active ? 'opacity-100 visible' : 'opacity-0 invisible'}`}
     >
@@ -479,8 +477,8 @@ export default function World() {
       {selectedItemIndex === null ? (
         <List onItemSelect={handleItemSelect} />
       ) : (
-        <Details 
-          item={items[selectedItemIndex]} 
+        <Details
+          item={items[selectedItemIndex]}
           onBack={handleBack}
           onPrevious={handlePrevious}
           onNext={handleNext}
@@ -490,7 +488,7 @@ export default function World() {
       {/* 粒子系统 */}
       {isWorldReady && (
         <div className="absolute right-0 top-1/2 transform -translate-y-1/2 z-[1]">
-          <ParticleFactory 
+          <ParticleFactory
             activeLabel="island"
             width={windowSize.width}
             height={windowSize.height}
@@ -505,4 +503,4 @@ export default function World() {
       <PortraitBottomGradientMask />
     </div>
   )
-}
+}
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -5,9 +5,11 @@ import LineDecorator from "../components/LineDecorator"
 import ScrollTip from "../components/ScrollTip"
 import arknightsConfig from "../../arknights.config"
 import RootPageViews from "./_views/RootPageViews";
+import {Init} from "../components/Init";
 ---
 
 <RootLayout lang={arknightsConfig.language} title={arknightsConfig.title} description={arknightsConfig.description}>
+    <Init client:load />
     <PageTracker client:load/>
     <main id="root-page-views" class="w-full h-full relative select-none">
         {/* TODO: 使用 <ViewTransitions /> 优化，完全服务端渲染