diff --git a/prototype/design.md b/prototype/design.md new file mode 100644 index 0000000..c466cbf --- /dev/null +++ b/prototype/design.md @@ -0,0 +1,63 @@ +# 物品数据库工具 - 设计风格指南 + +## 设计理念 + +### 核心设计原则 +- **专业商务风格**：采用现代简约的设计语言，体现工具的专业性和可靠性 +- **功能优先**：界面设计以实用性为核心，确保每个元素都有明确的功能目的 +- **清晰易读**：使用高对比度的文字和背景，确保在不同设备上都能清晰阅读 +- **直观操作**：通过合理的布局和视觉引导，让用户能够快速理解和使用各项功能 + +### 色彩方案 +- **主色调**：深蓝灰 (#2C3E50) - 传达专业性和信任感 +- **辅助色**：柔和蓝 (#3498DB) - 用于按钮和链接，体现科技感 +- **强调色**：温暖橙 (#E67E22) - 用于重要操作和状态提示 +- **中性色**：浅灰 (#ECF0F1) - 用于背景和分隔区域 +- **文字色**：深灰 (#34495E) - 确保良好的可读性 + +### 字体系统 +- **标题字体**：Noto Serif SC - 用于页面标题和重要标题，体现权威感 +- **正文字体**：Noto Sans SC - 用于正文内容和界面文字，确保清晰易读 +- **代码字体**：JetBrains Mono - 用于CSV预览和数据展示，保持等宽特性 + +### 布局原则 +- **网格系统**：采用12列网格布局，确保内容在不同屏幕尺寸下的合理分布 +- **间距规范**：使用8px基础间距系统，保持视觉节奏的一致性 +- **卡片设计**：使用圆角卡片来组织内容，提供清晰的视觉层次 +- **留白运用**：充分利用留白来减少视觉噪音，突出重要信息 + +## 视觉效果 + +### 使用的核心库 +- **Anime.js**：用于页面切换和元素动画，提供流畅的交互体验 +- **ECharts.js**：用于历史价格趋势图和统计图表的数据可视化 +- **Splide.js**：用于图片轮播和物品展示的滑动效果 +- **Matter.js**：用于拖拽排序时的物理效果，增强操作反馈 +- **Pixi.js**：用于背景装饰效果和视觉特效 + +### 动画效果 +- **页面切换**：使用淡入淡出和轻微的位移动画，保持流畅的导航体验 +- **卡片交互**：悬停时轻微上浮和阴影加深，点击时轻微缩放反馈 +- **数据加载**：使用骨架屏和进度指示器，提供良好的等待体验 +- **操作反馈**：成功操作使用绿色提示，错误使用红色提示，持续2秒 + +### 背景设计 +- **主背景**：使用纯色背景 (#FAFBFC)，保持内容的清晰度 +- **装饰元素**：在页面边角使用几何图形装饰，增加视觉趣味 +- **渐变应用**：仅在按钮和重要元素上使用轻微渐变，避免过度装饰 + +### 图标系统 +- **功能图标**：使用线性图标风格，保持一致的视觉语言 +- **状态图标**：使用填充式图标来表示不同的状态和操作结果 +- **尺寸规范**：功能图标使用24px，状态图标使用16px，保持一致性 + +### 响应式设计 +- **桌面端** (1200px+)：三列布局，充分利用屏幕空间展示更多信息 +- **平板端** (768px-1199px)：两列布局，保持核心功能的可用性 +- **移动端** (< 768px)：单列布局，优化触摸操作和滚动体验 + +### 交互状态 +- **默认状态**：清晰的边框和适当的内边距 +- **悬停状态**：轻微的颜色变化和阴影加深，提供视觉反馈 +- **激活状态**：颜色加深和轻微内阴影，表示正在交互 +- **禁用状态**：降低透明度和灰度处理，明确不可用状态 \ No newline at end of file diff --git a/prototype/export.html b/prototype/export.html new file mode 100644 index 0000000..76de467 --- /dev/null +++ b/prototype/export.html @@ -0,0 +1,747 @@ + + + + + + 导出配置 - 物品数据库管理工具 + + + + + + + + + + + +
+ +
+

导出配置中心

+

选择要导出的物品，设置起拍价格和备注信息，预览CSV格式

+
+ + +
+ +
+
+

+ + + + 选择物品 +

+ + +
+ +
+ + +
+ +
+
+
+ + +
+
+

+ + + + 导出配置 +

+ + +
+

批量设置

+
+
+ + +
+
+ + +
+
+ +
+ + +
+

已选中物品 (0)

+
+ +
+
+ + + +
+
+ + +
+
+

+ + + + CSV预览 +

+ + +
+

导出选项

+
+ + +
+
+ + +
+

内容预览

+
+ +
+
+ + +
+ + +
+
+
+
+
+ + +
+
+
+ +
+
+

+
+
+
+ + + + \ No newline at end of file diff --git a/prototype/history.html b/prototype/history.html new file mode 100644 index 0000000..cc26149 --- /dev/null +++ b/prototype/history.html @@ -0,0 +1,873 @@ + + + + + + 历史记录 - 物品数据库管理工具 + + + + + + + + + + + +
+ +
+

历史记录分析

+

查看物品价格趋势、成交记录和统计分析

+
+ + +
+
+
+
+

总记录数

+

0

+
+
+ + + +
+
+
+
+
+
+

价格记录

+

0

+
+
+ + + +
+
+
+
+
+
+

成交记录

+

0

+
+
+ + + +
+
+
+
+
+
+

平均成交价

+

¥0

+
+
+ + + +
+
+
+
+ + +
+ +
+
+
+

+ + + + 价格趋势分析 +

+
+
7天
+
30天
+
90天
+
1年
+
+
+ + +
+ + +
+ + +
+
+ + +
+

+ + + + 统计分析 +

+
+
+
+ + +
+
+

+ + + + 添加记录 +

+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+
+

+ + + + 历史记录 +

+ +
+ + +
+ + +
+ + +
+ +
+
+
+
+
+ + +
+
+
+ +
+
+

+
+
+
+ + + + \ No newline at end of file diff --git a/prototype/index.html b/prototype/index.html new file mode 100644 index 0000000..abecfaf --- /dev/null +++ b/prototype/index.html @@ -0,0 +1,346 @@ + + + + + + 物品数据库管理工具 + + + + + + + + + + + + +
+ +
+

智能物品管理系统

+

专业的物品数据库管理工具，支持图片记录、CSV导出和历史价格追踪

+
+ + +
+
+
+
+ + + +
+
+

总物品数

+

0

+
+
+
+
+
+
+ + + +
+
+

本月新增

+

0

+
+
+
+
+
+
+ + + +
+
+

历史记录

+

0

+
+
+
+
+
+
+ + + +
+
+

图片总数

+

0

+
+
+
+
+ + +
+ +
+
+

+ + + + 添加新物品 +

+
+
+ + +
+
+ + +

请粘贴您的图床图片链接

+
+
+ + +
+
+ + +
+ +
+
+ + +
+

快速操作

+
+ + + +
+
+
+ + +
+
+
+

物品列表

+
+ + +
+
+ + +
+ +
+ + + +
+
+
+
+ + +
+
+
+ +
+
+

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/prototype/interaction.md b/prototype/interaction.md new file mode 100644 index 0000000..e52bc09 --- /dev/null +++ b/prototype/interaction.md @@ -0,0 +1,46 @@ +# 物品数据库和构建清单工具 - 交互设计 + +## 核心交互功能 + +### 1. 物品管理系统 +- **物品添加界面**：用户可以输入物品名称，粘贴图片URL，添加描述信息 +- **物品列表展示**：网格布局显示所有物品，包含缩略图、名称、创建日期 +- **物品编辑功能**：点击物品卡片可编辑名称、图片URL、描述信息 +- **物品删除功能**：支持单个删除和批量删除操作 + +### 2. 导出配置系统 +- **物品选择界面**：左侧显示所有可用物品，右侧显示已选择的导出物品列表 +- **拖拽排序功能**：用户可以通过拖拽调整导出物品的顺序 +- **批量设置功能**：可以为选中的多个物品批量设置起拍价和备注 +- **导出预览功能**：实时显示将要导出的CSV内容预览 + +### 3. 历史记录管理 +- **价格历史追踪**：记录每个物品的历史价格变化，包含日期和活动名称 +- **成交记录管理**：记录每次拍卖的成交价、日期和相关活动 +- **数据可视化**：使用图表展示价格趋势和成交统计 +- **记录添加界面**：可以手动添加历史价格和成交记录 + +### 4. 数据导入导出 +- **CSV导出功能**：按照指定格式导出物品清单，支持自定义文件名 +- **图片打包下载**：收集所有选中物品的图片URL，生成压缩包下载 +- **数据备份功能**：支持将整个数据库导出为JSON文件进行备份 +- **数据导入功能**：可以从JSON文件恢复数据 + +## 用户交互流程 + +### 主要操作流程 +1. **添加物品** → 用户输入物品信息 → 保存到数据库 +2. **配置导出** → 选择物品 → 设置价格备注 → 预览 → 导出CSV +3. **查看历史** → 选择物品 → 查看价格和成交历史 → 添加新记录 +4. **数据管理** → 备份数据 → 导入数据 → 清理无用记录 + +### 界面布局设计 +- **顶部导航栏**：物品管理、导出配置、历史记录、数据管理 +- **主工作区域**：根据当前功能显示对应的操作界面 +- **侧边信息栏**：显示统计信息、快速操作按钮 +- **底部状态栏**：显示当前操作状态和提示信息 + +## 响应式设计考虑 +- **桌面端**：充分利用屏幕空间，支持多列布局和复杂交互 +- **平板端**：适配中等屏幕，保持核心功能可用性 +- **移动端**：简化界面，重点突出常用功能，优化触摸操作 \ No newline at end of file diff --git a/prototype/main.js b/prototype/main.js new file mode 100644 index 0000000..310665f --- /dev/null +++ b/prototype/main.js @@ -0,0 +1,457 @@ +// 物品数据库管理工具 - 主要JavaScript逻辑 + +class ItemDatabase { + constructor() { + this.items = this.loadItems(); + this.history = this.loadHistory(); + this.init(); + } + + // 初始化应用 + init() { + this.setupEventListeners(); + this.renderItems(); + this.updateStats(); + this.initAnimations(); + this.loadSampleData(); + } + + // 设置事件监听器 + setupEventListeners() { + // 表单提交 + document.getElementById('add-item-form').addEventListener('submit', (e) => { + e.preventDefault(); + this.addItem(); + }); + + // 搜索和筛选 + document.getElementById('search-input').addEventListener('input', (e) => { + this.filterItems(); + }); + + document.getElementById('filter-select').addEventListener('change', (e) => { + this.filterItems(); + }); + + // 数据导入导出 + document.getElementById('export-data-btn').addEventListener('click', () => { + this.exportData(); + }); + + document.getElementById('import-data-btn').addEventListener('click', () => { + document.getElementById('import-file-input').click(); + }); + + document.getElementById('import-file-input').addEventListener('change', (e) => { + this.importData(e.target.files[0]); + }); + + // 编辑模态框 + document.getElementById('edit-form').addEventListener('submit', (e) => { + e.preventDefault(); + this.updateItem(); + }); + + document.getElementById('cancel-edit').addEventListener('click', () => { + this.closeEditModal(); + }); + + // 点击模态框外部关闭 + document.getElementById('edit-modal').addEventListener('click', (e) => { + if (e.target.id === 'edit-modal') { + this.closeEditModal(); + } + }); + } + + // 加载示例数据 + loadSampleData() { + if (this.items.length === 0) { + const sampleItems = [ + { + id: this.generateId(), + name: "明代青花瓷瓶", + imageUrl: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", + description: "明代宣德年间的青花瓷瓶，品相完好，具有极高的收藏价值", + tags: ["古董", "瓷器", "明代"], + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString() + }, + { + id: this.generateId(), + name: "清代玉雕摆件", + imageUrl: "https://images.unsplash.com/photo-1605883705077-8d3d848f8a9d?w=400&h=300&fit=crop", + description: "清代乾隆时期的玉雕摆件，雕工精细，玉质温润", + tags: ["古董", "玉器", "清代"], + createdAt: new Date(Date.now() - 86400000).toISOString(), + updatedAt: new Date(Date.now() - 86400000).toISOString() + }, + { + id: this.generateId(), + name: "宋代书法作品", + imageUrl: "https://images.unsplash.com/photo-1581833971358-2c8b550f87b3?w=400&h=300&fit=crop", + description: "宋代书法名家作品，纸本墨迹，保存完好", + tags: ["艺术品", "书法", "宋代"], + createdAt: new Date(Date.now() - 172800000).toISOString(), + updatedAt: new Date(Date.now() - 172800000).toISOString() + }, + { + id: this.generateId(), + name: "唐代金银器", + imageUrl: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop", + description: "唐代金银器，工艺精湛，具有重要历史价值", + tags: ["古董", "金银器", "唐代"], + createdAt: new Date(Date.now() - 259200000).toISOString(), + updatedAt: new Date(Date.now() - 259200000).toISOString() + }, + { + id: this.generateId(), + name: "现代艺术画作", + imageUrl: "https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?w=400&h=300&fit=crop", + description: "当代知名艺术家作品，抽象风格，色彩丰富", + tags: ["艺术品", "现代艺术", "画作"], + createdAt: new Date(Date.now() - 345600000).toISOString(), + updatedAt: new Date(Date.now() - 345600000).toISOString() + }, + { + id: this.generateId(), + name: "古代青铜器", + imageUrl: "https://images.unsplash.com/photo-1605883705077-8d3d848f8a9d?w=400&h=300&fit=crop", + description: "商周时期青铜器，纹饰精美，保存完好", + tags: ["古董", "青铜器", "商周"], + createdAt: new Date(Date.now() - 432000000).toISOString(), + updatedAt: new Date(Date.now() - 432000000).toISOString() + } + ]; + + this.items = sampleItems; + this.saveItems(); + this.renderItems(); + this.updateStats(); + } + } + + // 生成唯一ID + generateId() { + return Date.now().toString(36) + Math.random().toString(36).substr(2); + } + + // 添加物品 + addItem() { + const name = document.getElementById('item-name').value.trim(); + const imageUrl = document.getElementById('item-image').value.trim(); + const description = document.getElementById('item-description').value.trim(); + const tags = document.getElementById('item-tags').value.trim(); + + if (!name || !imageUrl) { + this.showNotification('请填写必填项', 'error'); + return; + } + + const newItem = { + id: this.generateId(), + name, + imageUrl, + description, + tags: tags ? tags.split(',').map(tag => tag.trim()).filter(tag => tag) : [], + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString() + }; + + this.items.unshift(newItem); + this.saveItems(); + this.renderItems(); + this.updateStats(); + + // 清空表单 + document.getElementById('add-item-form').reset(); + + this.showNotification('物品添加成功', 'success'); + } + + // 编辑物品 + editItem(itemId) { + const item = this.items.find(i => i.id === itemId); + if (!item) return; + + document.getElementById('edit-item-id').value = item.id; + document.getElementById('edit-item-name').value = item.name; + document.getElementById('edit-item-image').value = item.imageUrl; + document.getElementById('edit-item-description').value = item.description || ''; + document.getElementById('edit-item-tags').value = item.tags ? item.tags.join(', ') : ''; + + document.getElementById('edit-modal').classList.remove('hidden'); + document.getElementById('edit-modal').classList.add('flex'); + } + + // 更新物品 + updateItem() { + const itemId = document.getElementById('edit-item-id').value; + const item = this.items.find(i => i.id === itemId); + if (!item) return; + + item.name = document.getElementById('edit-item-name').value.trim(); + item.imageUrl = document.getElementById('edit-item-image').value.trim(); + item.description = document.getElementById('edit-item-description').value.trim(); + const tags = document.getElementById('edit-item-tags').value.trim(); + item.tags = tags ? tags.split(',').map(tag => tag.trim()).filter(tag => tag) : []; + item.updatedAt = new Date().toISOString(); + + this.saveItems(); + this.renderItems(); + this.closeEditModal(); + this.showNotification('物品更新成功', 'success'); + } + + // 关闭编辑模态框 + closeEditModal() { + document.getElementById('edit-modal').classList.add('hidden'); + document.getElementById('edit-modal').classList.remove('flex'); + } + + // 删除物品 + deleteItem(itemId) { + if (confirm('确定要删除这个物品吗？')) { + this.items = this.items.filter(item => item.id !== itemId); + this.saveItems(); + this.renderItems(); + this.updateStats(); + this.showNotification('物品删除成功', 'success'); + } + } + + // 渲染物品列表 + renderItems() { + const grid = document.getElementById('items-grid'); + const emptyState = document.getElementById('empty-state'); + + if (this.items.length === 0) { + grid.innerHTML = ''; + emptyState.classList.remove('hidden'); + return; + } + + emptyState.classList.add('hidden'); + + const filteredItems = this.getFilteredItems(); + + grid.innerHTML = filteredItems.map(item => ` +
+
+ ${item.name} +
+ + +
+
+
+

${item.name}

+

${item.description || '暂无描述'}

+
+ ${item.tags ? item.tags.map(tag => ` + ${tag} + `).join('') : ''} +
+
+ 创建时间: ${new Date(item.createdAt).toLocaleDateString('zh-CN')} +
+
+
+ `).join(''); + + // 添加动画效果 + this.animateCards(); + } + + // 获取筛选后的物品 + getFilteredItems() { + const searchTerm = document.getElementById('search-input').value.toLowerCase(); + const filterTag = document.getElementById('filter-select').value; + + return this.items.filter(item => { + const matchesSearch = item.name.toLowerCase().includes(searchTerm) || + item.description.toLowerCase().includes(searchTerm); + const matchesFilter = !filterTag || (item.tags && item.tags.includes(filterTag)); + return matchesSearch && matchesFilter; + }); + } + + // 筛选物品 + filterItems() { + this.renderItems(); + } + + // 更新统计信息 + updateStats() { + const totalItems = this.items.length; + const currentMonth = new Date().getMonth(); + const currentYear = new Date().getFullYear(); + + const monthlyItems = this.items.filter(item => { + const itemDate = new Date(item.createdAt); + return itemDate.getMonth() === currentMonth && itemDate.getFullYear() === currentYear; + }).length; + + const historyRecords = this.history.length; + const totalImages = this.items.filter(item => item.imageUrl).length; + + document.getElementById('total-items').textContent = totalItems; + document.getElementById('monthly-items').textContent = monthlyItems; + document.getElementById('history-records').textContent = historyRecords; + document.getElementById('total-images').textContent = totalImages; + + // 添加数字动画 + this.animateNumbers(); + } + + // 导出数据 + exportData() { + const data = { + items: this.items, + history: this.history, + exportDate: new Date().toISOString() + }; + + const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `items-backup-${new Date().toISOString().split('T')[0]}.json`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + + this.showNotification('数据导出成功', 'success'); + } + + // 导入数据 + importData(file) { + if (!file) return; + + const reader = new FileReader(); + reader.onload = (e) => { + try { + const data = JSON.parse(e.target.result); + if (data.items && Array.isArray(data.items)) { + this.items = data.items; + this.saveItems(); + } + if (data.history && Array.isArray(data.history)) { + this.history = data.history; + this.saveHistory(); + } + this.renderItems(); + this.updateStats(); + this.showNotification('数据导入成功', 'success'); + } catch (error) { + this.showNotification('数据格式错误', 'error'); + } + }; + reader.readAsText(file); + } + + // 显示通知 + showNotification(message, type = 'info') { + const notification = document.getElementById('notification'); + const messageEl = document.getElementById('notification-message'); + const iconEl = document.getElementById('notification-icon'); + + // 设置图标 + const icons = { + success: '', + error: '', + info: '' + }; + + iconEl.innerHTML = icons[type] || icons.info; + messageEl.textContent = message; + + notification.classList.add('show'); + + setTimeout(() => { + notification.classList.remove('show'); + }, 3000); + } + + // 初始化动画 + initAnimations() { + // 页面加载动画 + const fadeElements = document.querySelectorAll('.fade-in'); + + const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.classList.add('visible'); + } + }); + }); + + fadeElements.forEach(el => observer.observe(el)); + + // 标题动画 + anime({ + targets: '.hero-title', + opacity: [0, 1], + translateY: [30, 0], + duration: 1000, + easing: 'easeOutExpo', + delay: 300 + }); + } + + // 卡片动画 + animateCards() { + anime({ + targets: '.item-card', + opacity: [0, 1], + translateY: [20, 0], + duration: 600, + easing: 'easeOutExpo', + delay: anime.stagger(100) + }); + } + + // 数字动画 + animateNumbers() { + anime({ + targets: '#total-items, #monthly-items, #history-records, #total-images', + scale: [1.2, 1], + duration: 300, + easing: 'easeOutBack' + }); + } + + // 数据持久化 + saveItems() { + localStorage.setItem('itemdb-items', JSON.stringify(this.items)); + } + + loadItems() { + const data = localStorage.getItem('itemdb-items'); + return data ? JSON.parse(data) : []; + } + + saveHistory() { + localStorage.setItem('itemdb-history', JSON.stringify(this.history)); + } + + loadHistory() { + const data = localStorage.getItem('itemdb-history'); + return data ? JSON.parse(data) : []; + } +} + +// 初始化应用 +const itemDB = new ItemDatabase(); \ No newline at end of file diff --git a/prototype/outline.md b/prototype/outline.md new file mode 100644 index 0000000..ef52a94 --- /dev/null +++ b/prototype/outline.md @@ -0,0 +1,179 @@ +# 物品数据库工具 - 项目文件结构大纲 + +## 文件结构概述 + +``` +/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**：文件导入导出功能 \ No newline at end of file diff --git a/prototype/resources/chart-icon.png b/prototype/resources/chart-icon.png new file mode 100644 index 0000000..44de620 Binary files /dev/null and b/prototype/resources/chart-icon.png differ diff --git a/prototype/resources/database-icon.png b/prototype/resources/database-icon.png new file mode 100644 index 0000000..43126e7 Binary files /dev/null and b/prototype/resources/database-icon.png differ diff --git a/prototype/resources/export-icon.png b/prototype/resources/export-icon.png new file mode 100644 index 0000000..6baa559 Binary files /dev/null and b/prototype/resources/export-icon.png differ diff --git a/prototype/resources/hero-bg.jpg b/prototype/resources/hero-bg.jpg new file mode 100644 index 0000000..c97e415 Binary files /dev/null and b/prototype/resources/hero-bg.jpg differ