1.9 KiB
1.9 KiB
ImageFind 高保真 UI 原型
这是一个独立的 Vite + React 原型，用来验证 ImageFind 的信息架构、视觉比例、响应式布局和关键交互。它不连接 NAS、数据库或真实媒体源；封面与业务数据均为本地合成演示内容。
运行
cd ui-prototype
npm install
npm run dev
构建与自动化检查：
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 离线绘制，不依赖远程图片。