feat(web): 优化首页真实案例展示与静态视觉

[sonofmagic]

改动

首页旧图无法清楚展示工具的实际产出。本次将 Hero 改为标题和操作区在上、真实案例展示带在下，使用零售首页、商品详情、规格弹层和 Varo AgentChat 的实际运行截图。手机端 Hero 仅显示零售主图，项目区域逐张呈现完整案例。

• 新增独立的 showcase 素材 collection，Hero 与项目区通过首页数据组合复用同一套素材；项目元数据和详情页的 primary、secondary 独立维护。
• 图片按实际比例显示，保留原色，提供响应式 WebP/AVIF、尺寸和双语说明，仅首屏主图高优先级加载。
• 增加显式截图、生成及视觉验收命令，提交原始截图、源版本与哈希记录；正常构建不依赖其他本机仓库或开发者工具。
• 包含前序静态视觉修复：移除 shader 和假产品界面，统一主题、排版与 reduced-motion 行为。

素材与范围

现有 Vue/Tailwind 零售移植模板的规格弹层存在样式缺失，使用同仓库中由 weapp-vite 构建的 TDesign 原生参考案例。weapp-tailwindcss 区域明确注明参考性质，不能将截图视为 Tailwind 移植版实现的证明。Varo 使用实际 AgentChat 示例，仍标记为规划中。

已合入 main 历史并解决冲突，保留兼容的 CI 和指标同步流程。按已确认范围，最终页面采用当前分支的三项目方案：不采用 #5 的另一版首页及 weapp-sqlite 项目，Varo 保持规划中和原有占位元数据。因此相对 main 的 diff 会撤回这些并行产品改动。已有三个项目的详情页素材、路由、部署方式和 analytics 契约保持本方案原有行为。

指标同步对规划中项目使用已有占位数据，避免未发布包的 404 阻断每周同步；已发布项目仍执行严格的新鲜度检查。

验证

以下命令按顺序运行：

• rtk pnpm --filter @weapp.dev/web check：0 errors、0 warnings，1 项既有 execCommand 弃用提示。
• rtk pnpm --filter @weapp.dev/web test：5 个文件、19 项测试通过（含首页数据组合和指标时间戳稳定性测试）。
• rtk pnpm --filter @weapp.dev/web build：14 个页面，19 项必需产物及全部内部链接验证通过；Varo 指标按规划中状态使用占位数据。
• rtk pnpm --filter @weapp.dev/web test:e2e：50 项通过，2 项线上统计测试默认跳过。
• rtk pnpm --filter @weapp.dev/web media:verify-showcase：28 组页面、尺寸和主题检查通过。
• rtk pnpm check：完整 lint、stylelint、类型检查及单测通过。
• rtk pnpm --filter @weapp.dev/web exec tsx scripts/generate-metrics.ts --require-fresh：通过，两个已发布项目刷新成功，Varo 未请求占位包。

覆盖中英文首页、详情页、Pricing、320–1440px、浅深主题、图片解码和比例、链接与 SEO、键盘和导航、analytics、无障碍、无 JavaScript、reduced-motion 及 reveal 超时。原始截图和最终页面已人工复核。

详细来源、重新生成步骤和验收记录：首页真实案例素材。前后对比截图已保留在本机验收目录，文件路径见记录。

结构改进

• 首页容器缩为 32 行，章节、项目展示行、首页 CSS 和双语文案分别维护。
• 首页选品与项目目录分开，生成器只写素材文件；共享 schema 校验引用与文件边界，TypeScript 类型直接从 schema 推导。
• 保持页面与交互表现；完整截图尺寸一致，图片外布局和文字逐像素一致。补充主题变量保留和响应式图片候选切换的回归检查。
• 文件职责和并行修改约定见 首页代码边界。

远端检查

重构提交 1cd5fbb 的 GitHub CI 和 Cloudflare Workers 构建均已成功。PR 状态为 CLEAN、可合并。

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1cd5fbb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[cloudflare-workers-and-pages]

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	weapp-dev	1cd5fbb	Commit Preview URL Branch Preview URL	Sep 07 2026, 05:05 AM