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.
4.7 KiB
4.7 KiB
物品数据库工具 - 项目文件结构大纲
文件结构概述
/mnt/okcomputer/output/
├── index.html # 主页面 - 物品管理界面
├── export.html # 导出配置页面
├── history.html # 历史记录页面
├── main.js # 主要JavaScript逻辑
├── resources/ # 资源文件夹
│ ├── hero-bg.jpg # 主页背景图片
│ ├── database-icon.png # 数据库图标
│ ├── export-icon.png # 导出图标
│ └── chart-icon.png # 图表图标
└── data/ # 数据文件夹
├── items.json # 物品数据库
├── history.json # 历史记录数据
└── export-config.json # 导出配置数据
页面功能详细说明
1. index.html - 物品管理主页面
主要功能：
- 物品添加表单（名称、图片URL、描述）
- 物品列表展示（网格布局，支持搜索和筛选）
- 物品编辑和删除功能
- 快速统计信息显示
页面结构：
- 顶部导航栏：包含页面切换和功能按钮
- 英雄区域：简洁的标题和工具介绍
- 主要内容区域：左侧添加表单，右侧物品网格
- 底部状态栏：显示当前操作状态和统计信息
交互组件：
- 物品添加表单：实时验证和反馈
- 物品卡片：悬停效果和点击交互
- 搜索和筛选：实时过滤物品列表
- 批量操作：支持多选和批量删除
2. export.html - 导出配置页面
主要功能：
- 物品选择界面（左侧可用物品，右侧选中物品）
- 价格和备注设置（支持批量设置）
- CSV格式预览
- 导出文件生成和下载
页面结构：
- 导航栏：返回主页和切换页面
- 配置区域：双列布局的物品选择器
- 设置面板：价格、备注的批量设置
- 预览区域：实时CSV内容预览
- 操作按钮：导出CSV、下载图片包
交互组件：
- 拖拽排序：支持物品顺序调整
- 批量设置：一键应用到多个物品
- 实时预览：CSV格式实时更新
- 文件下载：CSV和图片压缩包
3. history.html - 历史记录页面
主要功能：
- 历史价格记录展示
- 成交记录管理
- 价格趋势图表
- 记录添加和编辑
页面结构：
- 导航栏：页面切换和功能选择
- 筛选面板：按物品、日期、活动筛选
- 图表区域：价格趋势和统计图表
- 记录列表：详细的历史记录表格
- 操作面板：添加新记录和编辑功能
交互组件：
- 图表交互：ECharts图表的缩放和筛选
- 记录管理：添加、编辑、删除历史记录
- 数据筛选：多条件组合筛选
- 导出功能：历史数据导出为CSV
JavaScript功能模块
main.js 主要功能模块
-
数据管理模块
- 物品数据的CRUD操作
- 本地存储管理
- 数据导入导出
-
UI交互模块
- 页面切换动画
- 表单验证和提交
- 列表渲染和更新
-
导出功能模块
- CSV格式生成
- 图片URL收集
- 文件下载处理
-
图表可视化模块
- ECharts图表初始化
- 数据转换和绑定
- 交互事件处理
-
工具函数模块
- 日期格式化
- 数据验证
- 文件操作
数据结构设计
items.json 物品数据结构
{
"items": [
{
"id": "unique-id",
"name": "物品名称",
"imageUrl": "图片URL",
"description": "物品描述",
"createdAt": "创建时间",
"updatedAt": "更新时间",
"category": "分类",
"tags": ["标签1", "标签2"]
}
]
}
history.json 历史记录数据结构
{
"history": [
{
"id": "record-id",
"itemId": "物品ID",
"type": "price|sale",
"price": 价格,
"date": "日期",
"event": "活动名称",
"notes": "备注"
}
]
}
export-config.json 导出配置结构
{
"config": {
"selectedItems": ["物品ID列表"],
"prices": {"物品ID": 价格},
"notes": {"物品ID": "备注"},
"exportSettings": {
"includeImages": true,
"csvFormat": "standard"
}
}
}
技术栈和库依赖
核心库使用
- Anime.js：页面切换动画和元素交互效果
- ECharts.js：历史价格趋势图表和统计图表
- Splide.js：物品图片轮播和展示
- Matter.js：拖拽排序的物理效果
- Pixi.js：背景装饰效果和视觉特效
样式框架
- Tailwind CSS：响应式布局和组件样式
- 自定义CSS：特殊效果和主题样式
数据处理
- 原生JavaScript：数据处理逻辑
- LocalStorage API：数据持久化存储
- File API：文件导入导出功能