# ImageFind 高保真 UI 原型

这是一个独立的 Vite + React 原型，用来验证 ImageFind 的信息架构、视觉比例、响应式布局和关键交互。它不连接 NAS、数据库或真实媒体源；封面与业务数据均为本地合成演示内容。

## 运行

```bash
cd ui-prototype
npm install
npm run dev
```

构建与自动化检查：

```bash
npm run build
npm run audit
```

## 页面

页面使用 Hash 路由，可直接访问：

- `#/home`：首页与单列/双列切换
- `#/search`：多模态搜索、筛选与片段结果
- `#/library`：资料库与媒体来源
- `#/collections`：合集、章节和视频目录
- `#/uploads`：上传、WebDAV 转存与入库状态
- `#/tags`：分类、标签和 AI 建议
- `#/people`：人物识别结果
- `#/profile`：概览、收藏、喜欢、记录与个人资料
- `#/settings`：AI、网络、存储、备份与账户设置
- `#/player/v1`：播放器、缓冲进度、时间点和合集目录

在地址中加入 `?prototype=1` 可显示原型控制器，例如 `/?prototype=1#/home`。控制器可以切换正常、加载、空、错误状态以及浅色、深色、跟随系统主题。正式浏览和自动截图默认隐藏该控制器。

## 交互范围

- 桌面侧栏、移动底栏和“更多”底部面板可完成全站导航。
- 中央上传入口支持上传选项、演示进度以及“关闭并在后台继续”。
- 搜索结果可跳转播放器的命中片段。
- 播放器支持播放/暂停、快进/快退、倍速、缓冲状态、时间点与合集目录。
- 移动端按 320–720px 适配，主要触控目标不小于 44px，并处理安全区与底栏遮挡。

## 演示数据说明

原型中的片名、人物、合集、上传任务、模型状态与存储数据全部为合成示例，仅用于表现界面密度和状态，不代表真实用户内容或产品运行结果。封面由 CSS 离线绘制，不依赖远程图片。