Initialize AutoLibrary website with Gitea deployment

docs/design-notes.md

@@ -0,0 +1,16 @@
+# 页面设计与交互约定
+
+保留 AutoLibrary 的书本标识、绿色强调色、图书馆文案与真实软件截图。首页用紧凑功能带、横向标签与通栏截图、编号资源清单形成不同的信息层次，避免每节重复大标题与卡片网格。
+
+参考 [Paco Coursey](https://paco.me/) 的克制排版与目录组织，以及 [Zed](https://zed.dev/) 对真实产品界面的呈现；不引入其品牌元素或外部素材。
+
+- `ThemeToggle.vue` 以太阳/月亮图标切换当前主题，状态由 `stores/theme.ts` 统一维护并持久保存。首次访问仍跟随系统；图标旋转、淡入和缩放遵守减少动态效果偏好。
+- 顶部主题与登录按钮统一为 32px 高；键盘焦点保留清晰轮廓。
+- 功能与画廊板块标题共用 `home-section-title`：桌面端 22px、手机端 20px，字重、行高和标题下方间距一致。标题旁不添加辅助说明或装饰圆点。
+- `ProductGallery.vue` 管理截图与目录内容；`useGallery.ts` 管理自动播放。画廊至少 20% 可见且页面处于前台时，每 6 秒切换；鼠标悬停和控件获得焦点不暂停，手动选择后重新计时。提供播放/暂停、上一张/下一张和左右方向键操作；用户主动暂停后，手动选择不会重新开启播放。系统要求减少动态效果时默认停止自动播放。
+- 画廊样式放在 `styles/home.css`，桌面端标签位于通栏截图上方，手机端改为两列。保留当前标签底部的播放进度条，界面不展示切换间隔文案。第一张截图跟随网站深浅主题，其余保留原始实机截图。
+- 验证码始终使用明亮背景、接近原生的 150×50 比例，不反色或滤镜处理；输入框有明确标签，点击图片可刷新。
+- 首页与下载页的平台标识共用 `PlatformLogo.vue`。`DownloadSource.vue` 使用原生 `details/summary` 展开 Gitea、云盘资源；桌面悬停展开，也支持点击、键盘和 Escape，手机端点击后在页面内展开。同一时刻只展开一个入口，云盘提取码位于资源链接上方。
+- 主按钮悬停与键盘焦点使用独立的背景和文字颜色变量，不整体叠加亮度滤镜，以维持深浅主题下的清晰对比。
+
+维护时运行 `npm --prefix frontend run build` 完成类型、代码风格与生产构建检查。另在浏览器检查双主题、手机宽度、自动轮播与验证码显示，无需新增测试用例。