feat(prototype): add initial prototype for item database tool
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.
This commit is contained in:
46
prototype/interaction.md
Normal file
46
prototype/interaction.md
Normal file
@@ -0,0 +1,46 @@
|
||||
# 物品数据库和构建清单工具 - 交互设计
|
||||
|
||||
## 核心交互功能
|
||||
|
||||
### 1. 物品管理系统
|
||||
- **物品添加界面**:用户可以输入物品名称,粘贴图片URL,添加描述信息
|
||||
- **物品列表展示**:网格布局显示所有物品,包含缩略图、名称、创建日期
|
||||
- **物品编辑功能**:点击物品卡片可编辑名称、图片URL、描述信息
|
||||
- **物品删除功能**:支持单个删除和批量删除操作
|
||||
|
||||
### 2. 导出配置系统
|
||||
- **物品选择界面**:左侧显示所有可用物品,右侧显示已选择的导出物品列表
|
||||
- **拖拽排序功能**:用户可以通过拖拽调整导出物品的顺序
|
||||
- **批量设置功能**:可以为选中的多个物品批量设置起拍价和备注
|
||||
- **导出预览功能**:实时显示将要导出的CSV内容预览
|
||||
|
||||
### 3. 历史记录管理
|
||||
- **价格历史追踪**:记录每个物品的历史价格变化,包含日期和活动名称
|
||||
- **成交记录管理**:记录每次拍卖的成交价、日期和相关活动
|
||||
- **数据可视化**:使用图表展示价格趋势和成交统计
|
||||
- **记录添加界面**:可以手动添加历史价格和成交记录
|
||||
|
||||
### 4. 数据导入导出
|
||||
- **CSV导出功能**:按照指定格式导出物品清单,支持自定义文件名
|
||||
- **图片打包下载**:收集所有选中物品的图片URL,生成压缩包下载
|
||||
- **数据备份功能**:支持将整个数据库导出为JSON文件进行备份
|
||||
- **数据导入功能**:可以从JSON文件恢复数据
|
||||
|
||||
## 用户交互流程
|
||||
|
||||
### 主要操作流程
|
||||
1. **添加物品** → 用户输入物品信息 → 保存到数据库
|
||||
2. **配置导出** → 选择物品 → 设置价格备注 → 预览 → 导出CSV
|
||||
3. **查看历史** → 选择物品 → 查看价格和成交历史 → 添加新记录
|
||||
4. **数据管理** → 备份数据 → 导入数据 → 清理无用记录
|
||||
|
||||
### 界面布局设计
|
||||
- **顶部导航栏**:物品管理、导出配置、历史记录、数据管理
|
||||
- **主工作区域**:根据当前功能显示对应的操作界面
|
||||
- **侧边信息栏**:显示统计信息、快速操作按钮
|
||||
- **底部状态栏**:显示当前操作状态和提示信息
|
||||
|
||||
## 响应式设计考虑
|
||||
- **桌面端**:充分利用屏幕空间,支持多列布局和复杂交互
|
||||
- **平板端**:适配中等屏幕,保持核心功能可用性
|
||||
- **移动端**:简化界面,重点突出常用功能,优化触摸操作
|
||||
Reference in New Issue
Block a user