# 物品数据库工具 - 设计风格指南

## 设计理念

### 核心设计原则
- **专业商务风格**：采用现代简约的设计语言，体现工具的专业性和可靠性
- **功能优先**：界面设计以实用性为核心，确保每个元素都有明确的功能目的
- **清晰易读**：使用高对比度的文字和背景，确保在不同设备上都能清晰阅读
- **直观操作**：通过合理的布局和视觉引导，让用户能够快速理解和使用各项功能

### 色彩方案
- **主色调**：深蓝灰 (#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)：单列布局，优化触摸操作和滚动体验

### 交互状态
- **默认状态**：清晰的边框和适当的内边距
- **悬停状态**：轻微的颜色变化和阴影加深，提供视觉反馈
- **激活状态**：颜色加深和轻微内阴影，表示正在交互
- **禁用状态**：降低透明度和灰度处理，明确不可用状态