feat: 添加自动化 README 截图管线，支持明暗主题双图切换

- 新增 pnpm demo:update 命令：Playwright 无头浏览器截图，Canvas 转 WebP
- 新增 pnpm fixture:fetch 命令：从 Open-Meteo 拉取真实天气数据存为 fixture
- README 改用 <picture> 标签，根据 prefers-color-scheme 切换明暗截图
- 用户截图导出格式从 PNG 改为 WebP（Canvas toBlob），去除外部依赖
- 截图相关组件/页面通过 import.meta.env.DEV 门控，生产构建 tree-shake
- fixture 数据移出 public/，仅通过 dev server 中间件映射，不打进生产包

Author: Enter-tainer

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Playwright
+playwright-report/
+test-results/

README.md

@@ -1,6 +1,10 @@
 # Weather Dashboard / 天气面板
 
-![Dashboard Screenshot](./demo.webp)
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="./demo-dark.webp">
+  <source media="(prefers-color-scheme: light)" srcset="./demo-light.webp">
+  <img alt="Dashboard Screenshot" src="./demo-light.webp">
+</picture>
 
 A [Windy](https://www.windy.com/)-style weather dashboard built with React + Canvas. All data comes from [Open-Meteo](https://open-meteo.com/) (free, no API key needed).
 

demo-dark.webp

@@ -12,7 +12,9 @@
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",
-    "deploy": "vite build && wrangler deploy"
+    "deploy": "vite build && wrangler deploy",
+    "fixture:fetch": "tsx scripts/fetch-fixture.ts",
+    "demo:update": "tsx scripts/capture-screenshot.ts"
   },
   "dependencies": {
     "html-to-image": "^1.11.13",
@@ -37,6 +39,8 @@
     "globals": "^17.4.0",
     "jiti": "^2.7.0",
     "jsdom": "^29.1.1",
+    "playwright": "^1.57.0",
+    "tsx": "^4.19.0",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.59.4",
     "vite": "^8.0.1",