Flora Studio 官网

Astro 静态网站。页面主体使用 Astro / HTML，只有作品展示区使用 React island（Embla 轮播与按需加载的 React Lightbox）。

开发与检查

使用 Node 24.16.0（见 .nvmrc）和 pnpm 12.5.1（见 packageManager）。启用 Corepack 后运行：

pnpm install --frozen-lockfile
pnpm dev
pnpm typecheck
pnpm lint
pnpm build
pnpm test
pnpm preview

pnpm test 检查 hydration、锚点切换和构建产物，需先运行 pnpm build。public/ 是受版本控制的静态资源，dist/ 是忽略的部署产物。

内容与交互

• src/data/works.ts 保存作品文案、段落强调和平台链接；图片位于 src/images/works/<作品ID>/，以文件名自然排序，图标位于 src/images/work-icons/。
• 图片在构建时由 Astro 优化。缩略图目标高度 200px、大图 1000px，保留宽高比例，不放大原图。
• 五个作品均进入静态 HTML，无 JS 时可阅读、横向浏览截图或直接打开图片。React 在作品区接近视口时加载，随后增强为单作品切换。
• #work-<作品ID> 支持直接访问和浏览器历史；#works、#members、#service 保持可用。
• 主题使用 daisyUI winter / night，继续读取 localStorage.night。浏览器基线为 Safari 16.4+、Chrome 111+、Firefox 128+。

依赖决策

迁移基线为 Astro 7、React 19、Tailwind 4、daisyUI 5。TypeScript 固定 6.0.3：当前 Astro check 支持 5/6，typescript-eslint 要求 <6.1，因此暂不采用 TypeScript 7。ESLint 使用 10 和 Astro / TypeScript 配置，不保留不兼容的旧 React lint 插件。依赖安装脚本仅允许配置中明确列出的包。

部署

站点地址为 https://florastudio.app，GA 标识为 G-204S9ZJ7Q6。./deploy.sh 会安装、检查、构建、测试，再将 dist/ 强制推送至原部署仓库 maliut/deploy-florastudio 的 master 分支。只在准备发布时手动运行；本次迁移不执行发布。

交互回归清单

在 pnpm preview 下检查：首次滚动到作品区；加载前点击导航作品；直接打开作品 hash；前进/后退；连续切换；拖拽/圆点选择；点击不同截图打开灯箱；灯箱翻页同步、Esc/背景关闭和焦点恢复。确认灯箱首次打开前没有下载对应 JS 分块。

在桌面和 375px 手机视口检查浅色/深色主题、刷新保持、菜单与二维码的点击/键盘关闭、图片完整和无页面横向溢出；禁用 JS 时检查全部作品仍可阅读。生产页面不得出现 hydration 警告。