feat: 增加light和dark主题截图的循环切换

README.md

@@ -36,10 +36,10 @@ TINYPNG_API_KEY=<YOUR_API_KEY>
 ```bash
 # 1.将新增的图片（原始大小）拷贝到 public/assets/screenshots_raw 目录
 # 2.执行下面脚本，全量压缩图片
-npx dotenv -e .env.local npm run update-assets
+npm run update-assets
 
 # 增量压缩图片，仅 --since 日期之后新增的图片会被压缩
-npx dotenv -e .env.local npm run update-assets -- --since='2024-04-29T10:00:00'
+npm run update-assets -- --since='2024-04-29T10:00:00'
 ```
 
 > 脚本依赖 zx 工具，请先确保全局安装`npm install -g zx`

package.json

@@ -12,7 +12,7 @@
     "clean": "rimraf .next .swc out",
     "lint": "next lint",
     "format": "next lint --fix && prettier '**/*.{json,yaml}' --write --ignore-path .gitignore",
-    "update-assets": "zx ./scripts/update-assets.mjs",
+    "update-assets": "dotenv -e .env.local -- zx ./scripts/update-assets.mjs",
     "check-types": "tsc --noEmit --pretty",
     "prepare": "husky install"
   },
@@ -60,4 +60,4 @@
     "zx": "^8.0.2"
   },
   "license": "ISC"
-}
+}

src/feature/VerticalFeatureRow.tsx

@@ -7,7 +7,11 @@ import { pages } from '@/templates/pages';
 type IVerticalFeatureRowProps = {
   pageId?: keyof typeof pages;
   title?: string;
-  image?: string;
+  /**
+   * 支持自定义图片，当 pageId 缺省时生效，图片填写相对 public/assets/screenshots 的路径即可，例如 theme_light.png
+   * 如果传入两个链接，则分别对应 light 和 dark 主题
+   */
+  image?: string | [string, string];
   description?: string;
   reverse?: boolean;
 };
@@ -50,15 +54,40 @@ const VerticalFeatureRow = ({
 
       <div className="w-full p-6 sm:w-1/2">
         {pageId && (
-          <img
-            src={`${router.basePath}/assets/screenshots/${pageId}_light.png`}
-            alt={`${pages[pageId].title}截图`}
-            loading="lazy"
-          />
+          <div className="relative">
+            <img
+              src={`${router.basePath}/assets/screenshots/${pageId}_dark.png`}
+              alt={`${pages[pageId].title}截图`}
+              loading="lazy"
+              className="absolute"
+            />
+            <img
+              src={`${router.basePath}/assets/screenshots/${pageId}_light.png`}
+              alt={`${pages[pageId].title}截图`}
+              loading="lazy"
+              className="relative animate-toggle"
+            />
+          </div>
+        )}
+        {image && Array.isArray(image) && (
+          <div className="relative">
+            <img
+              src={`${router.basePath}/assets/screenshots/${image[1]}`}
+              alt={`${title}截图`}
+              loading="lazy"
+              className="absolute"
+            />
+            <img
+              src={`${router.basePath}/assets/screenshots/${image[0]}`}
+              alt={`${title}截图`}
+              loading="lazy"
+              className="relative animate-toggle"
+            />
+          </div>
         )}
-        {image && (
+        {image && typeof image === 'string' && (
           <img
-            src={`${router.basePath}/assets/screenshots/${image}.png`}
+            src={`${router.basePath}/assets/screenshots/${image}`}
             alt={`${title}截图`}
             loading="lazy"
           />

src/templates/VerticalFeatures.tsx

@@ -60,7 +60,7 @@ const VerticalFeatures = () => (
     <VerticalFeatureRow
       title="丰富的主题外观"
       description="支持浅色和深色外观，支持跟随系统外观，内置十多种 iOS 强调色，满足你的个性化需求！"
-      image="appearance"
+      image={['theme_light.png', 'theme_dark.png']}
       reverse
     />
   </Section>

tailwind.config.js

@@ -38,6 +38,15 @@ module.exports = {
           900: '#1a202c',
         },
       },
+      animation: {
+        toggle: 'toggle 6s infinite',
+      },
+      keyframes: {
+        toggle: {
+          '0%, 20%, 80%, 100%': { opacity: 100 },
+          '30%, 60%': { opacity: 0 },
+        },
+      },
       lineHeight: {
         hero: '4.5rem',
       },