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.

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)：单列布局，优化触摸操作和滚动体验
+
+### 交互状态
+- **默认状态**：清晰的边框和适当的内边距
+- **悬停状态**：轻微的颜色变化和阴影加深，提供视觉反馈
+- **激活状态**：颜色加深和轻微内阴影，表示正在交互
+- **禁用状态**：降低透明度和灰度处理，明确不可用状态