# 物品数据库工具 - 项目文件结构大纲

## 文件结构概述

```
/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 主要功能模块
1. **数据管理模块**
   - 物品数据的CRUD操作
   - 本地存储管理
   - 数据导入导出

2. **UI交互模块**
   - 页面切换动画
   - 表单验证和提交
   - 列表渲染和更新

3. **导出功能模块**
   - CSV格式生成
   - 图片URL收集
   - 文件下载处理

4. **图表可视化模块**
   - ECharts图表初始化
   - 数据转换和绑定
   - 交互事件处理

5. **工具函数模块**
   - 日期格式化
   - 数据验证
   - 文件操作

## 数据结构设计

### items.json 物品数据结构
```json
{
  "items": [
    {
      "id": "unique-id",
      "name": "物品名称",
      "imageUrl": "图片URL",
      "description": "物品描述",
      "createdAt": "创建时间",
      "updatedAt": "更新时间",
      "category": "分类",
      "tags": ["标签1", "标签2"]
    }
  ]
}
```

### history.json 历史记录数据结构
```json
{
  "history": [
    {
      "id": "record-id",
      "itemId": "物品ID",
      "type": "price|sale",
      "price": 价格,
      "date": "日期",
      "event": "活动名称",
      "notes": "备注"
    }
  ]
}
```

### export-config.json 导出配置结构
```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**：文件导入导出功能