c0ba7ac0ff
This commit introduces the initial prototype for an item database and build list tool. It establishes the foundational structure and core features of the application. Key components included: - **Documentation:** Initial design, interaction, and project structure documents (`design.md`, `interaction.md`, `outline.md`). - **Core Pages:** - `index.html`: Item management with CRUD operations. - `export.html`: CSV export configuration with drag-and-drop sorting. - `history.html`: Price history visualization with ECharts. - **Logic:** `main.js` and page-specific scripts handle client-side logic, including data management with `localStorage`, UI interactions, and animations. - **Features:** Implements core functionalities such as item creation, editing, deletion, data backup/restore, and sample data loading.
2.4 KiB
2.4 KiB
物品数据库和构建清单工具 - 交互设计
核心交互功能
1. 物品管理系统
- 物品添加界面：用户可以输入物品名称，粘贴图片URL，添加描述信息
- 物品列表展示：网格布局显示所有物品，包含缩略图、名称、创建日期
- 物品编辑功能：点击物品卡片可编辑名称、图片URL、描述信息
- 物品删除功能：支持单个删除和批量删除操作
2. 导出配置系统
- 物品选择界面：左侧显示所有可用物品，右侧显示已选择的导出物品列表
- 拖拽排序功能：用户可以通过拖拽调整导出物品的顺序
- 批量设置功能：可以为选中的多个物品批量设置起拍价和备注
- 导出预览功能：实时显示将要导出的CSV内容预览
3. 历史记录管理
- 价格历史追踪：记录每个物品的历史价格变化，包含日期和活动名称
- 成交记录管理：记录每次拍卖的成交价、日期和相关活动
- 数据可视化：使用图表展示价格趋势和成交统计
- 记录添加界面：可以手动添加历史价格和成交记录
4. 数据导入导出
- CSV导出功能：按照指定格式导出物品清单，支持自定义文件名
- 图片打包下载：收集所有选中物品的图片URL，生成压缩包下载
- 数据备份功能：支持将整个数据库导出为JSON文件进行备份
- 数据导入功能：可以从JSON文件恢复数据
用户交互流程
主要操作流程
- 添加物品 → 用户输入物品信息 → 保存到数据库
- 配置导出 → 选择物品 → 设置价格备注 → 预览 → 导出CSV
- 查看历史 → 选择物品 → 查看价格和成交历史 → 添加新记录
- 数据管理 → 备份数据 → 导入数据 → 清理无用记录
界面布局设计
- 顶部导航栏：物品管理、导出配置、历史记录、数据管理
- 主工作区域：根据当前功能显示对应的操作界面
- 侧边信息栏：显示统计信息、快速操作按钮
- 底部状态栏：显示当前操作状态和提示信息
响应式设计考虑
- 桌面端：充分利用屏幕空间，支持多列布局和复杂交互
- 平板端：适配中等屏幕，保持核心功能可用性
- 移动端：简化界面，重点突出常用功能，优化触摸操作