2025-08-21 11:07:54 +08:00
|
|
|
|
# 用户使用指南
|
|
|
|
|
|
|
|
|
|
|
|
欢迎使用 Dream-Machine 采购清单管理系统！本指南将帮助你快速上手并充分利用系统的所有功能。
|
|
|
|
|
|
|
|
|
|
|
|
## 📋 目录
|
|
|
|
|
|
|
|
|
|
|
|
1. [快速开始](#快速开始)
|
|
|
|
|
|
2. [界面介绍](#界面介绍)
|
|
|
|
|
|
3. [核心功能](#核心功能)
|
|
|
|
|
|
4. [高级功能](#高级功能)
|
|
|
|
|
|
5. [数据管理](#数据管理)
|
|
|
|
|
|
6. [故障排除](#故障排除)
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 快速开始
|
|
|
|
|
|
|
|
|
|
|
|
### 第一次使用
|
|
|
|
|
|
|
|
|
|
|
|
1. **启动应用**
|
|
|
|
|
|
```bash
|
|
|
|
|
|
# 推荐方式 - 使用快速启动脚本
|
|
|
|
|
|
./start.sh # Linux/macOS
|
|
|
|
|
|
start.bat # Windows
|
|
|
|
|
|
|
|
|
|
|
|
# 或使用 Makefile
|
|
|
|
|
|
make dev
|
|
|
|
|
|
|
|
|
|
|
|
# 或使用 npm
|
|
|
|
|
|
npm install && npm run dev
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
2. **访问应用**
|
2025-08-21 14:56:53 +08:00
|
|
|
|
- 打开浏览器访问 `http://localhost:3003`
|
2025-08-21 11:07:54 +08:00
|
|
|
|
- 应用会自动加载示例数据
|
|
|
|
|
|
|
|
|
|
|
|
3. **开始使用**
|
|
|
|
|
|
- 浏览现有的采购项目
|
|
|
|
|
|
- 尝试添加新的采购项目
|
|
|
|
|
|
- 体验筛选和排序功能
|
|
|
|
|
|
|
|
|
|
|
|
## 🖥 界面介绍
|
|
|
|
|
|
|
|
|
|
|
|
### 主界面布局
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
┌─────────────────────────────────────────────────┐
|
|
|
|
|
|
│ 页面标题 │
|
|
|
|
|
|
│ Dream-Machine 采购清单 │
|
|
|
|
|
|
├─────────────────────────────────────────────────┤
|
|
|
|
|
|
│ 数据管理按钮 │ 添加项目 │ 打印 │ 励志图片 │
|
|
|
|
|
|
├─────────────────────────────────────────────────┤
|
|
|
|
|
|
│ 筛选和排序面板 │
|
|
|
|
|
|
├─────────────────────────────────────────────────┤
|
|
|
|
|
|
│ 采购清单表格 │
|
|
|
|
|
|
│ ✓ 已购买项目 (绿色背景) │
|
|
|
|
|
|
│ ○ 待购买项目 (白色背景) │
|
|
|
|
|
|
├─────────────────────────────────────────────────┤
|
|
|
|
|
|
│ 预算统计卡片区域 │
|
|
|
|
|
|
│ 总预算 │ 已购买 │ 待购买 │
|
|
|
|
|
|
└─────────────────────────────────────────────────┘
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 界面元素说明
|
|
|
|
|
|
|
|
|
|
|
|
- **🎯 重要程度颜色编码**:
|
|
|
|
|
|
- 🔴 **必须的必** (深红色粗体): 最高优先级
|
|
|
|
|
|
- 🔴 **必须** (红色): 高优先级
|
|
|
|
|
|
- 🟡 **可买** (黄色): 中等优先级
|
|
|
|
|
|
- 🟢 **不急** (绿色): 低优先级
|
|
|
|
|
|
|
|
|
|
|
|
- **📊 状态显示**:
|
|
|
|
|
|
- ✅ 绿色背景: 已购买项目
|
|
|
|
|
|
- ⭕ 白色背景: 待购买项目
|
|
|
|
|
|
|
|
|
|
|
|
## ✨ 核心功能
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 添加新项目
|
|
|
|
|
|
|
|
|
|
|
|
1. 点击 **"添加项目"** 按钮
|
|
|
|
|
|
2. 填写项目信息：
|
|
|
|
|
|
- **产品代码**: 设备型号 (如: UCG-FIBER)
|
|
|
|
|
|
- **产品名称**: 设备名称 (如: Ubiquiti Cloud Gateway Ultra)
|
|
|
|
|
|
- **价格**: 人民币价格
|
|
|
|
|
|
- **原价**: 原始价格和币种
|
|
|
|
|
|
- **重要程度**: 选择优先级
|
|
|
|
|
|
- **平台**: 购买平台
|
|
|
|
|
|
- **备注**: 附加说明
|
|
|
|
|
|
- **分类**: 设备分类
|
|
|
|
|
|
- **站点**: 购买地区
|
|
|
|
|
|
- **批次**: 批次编号
|
|
|
|
|
|
- **重量**: 设备重量(kg)
|
|
|
|
|
|
- **购买链接**: 产品链接
|
|
|
|
|
|
|
|
|
|
|
|
3. 点击 **"添加"** 保存
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 编辑项目
|
|
|
|
|
|
|
|
|
|
|
|
1. 在表格中找到要编辑的项目
|
|
|
|
|
|
2. 点击该行的 **"编辑"** 按钮 (铅笔图标)
|
|
|
|
|
|
3. 修改需要的信息
|
|
|
|
|
|
4. 点击 **"保存"** 确认修改
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 标记购买状态
|
|
|
|
|
|
|
|
|
|
|
|
- 点击项目行前的 **圆圈图标** 切换购买状态
|
|
|
|
|
|
- 已购买项目会显示绿色背景和 ✅ 图标
|
|
|
|
|
|
- 待购买项目显示白色背景和 ⭕ 图标
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 删除项目
|
|
|
|
|
|
|
|
|
|
|
|
1. 找到要删除的项目
|
|
|
|
|
|
2. 点击 **"删除"** 按钮 (垃圾桶图标)
|
|
|
|
|
|
3. 确认删除操作
|
|
|
|
|
|
|
|
|
|
|
|
## 🔍 高级功能
|
|
|
|
|
|
|
|
|
|
|
|
### 筛选和排序
|
|
|
|
|
|
|
|
|
|
|
|
#### 筛选选项
|
|
|
|
|
|
- **分类筛选**: 按设备分类筛选 (路由器、交换机、配件等)
|
|
|
|
|
|
- **状态筛选**: 按购买状态筛选 (全部/已购买/待购买)
|
|
|
|
|
|
- **重要程度筛选**: 按优先级筛选
|
|
|
|
|
|
- **批次筛选**: 按批次编号筛选
|
|
|
|
|
|
|
|
|
|
|
|
#### 排序选项
|
|
|
|
|
|
- **产品名称**: 按字母顺序
|
|
|
|
|
|
- **价格**: 按价格高低
|
|
|
|
|
|
- **重量**: 按重量轻重
|
|
|
|
|
|
- **重要程度**: 按优先级排序
|
|
|
|
|
|
- **分类**: 按分类排序
|
|
|
|
|
|
- **批次**: 按批次排序
|
|
|
|
|
|
|
|
|
|
|
|
#### 筛选记忆功能
|
|
|
|
|
|
- 系统会自动保存你的筛选和排序偏好
|
|
|
|
|
|
- 下次打开应用时会恢复上次的设置
|
|
|
|
|
|
|
|
|
|
|
|
### 批量编辑
|
|
|
|
|
|
|
|
|
|
|
|
1. 在表格中选择多个项目 (勾选复选框)
|
|
|
|
|
|
2. 点击 **"批量编辑"** 按钮
|
|
|
|
|
|
3. 选择要修改的字段 (通常是批次)
|
|
|
|
|
|
4. 输入新值
|
|
|
|
|
|
5. 点击 **"更新选中项目"** 应用更改
|
|
|
|
|
|
|
|
|
|
|
|
### 打印功能
|
|
|
|
|
|
|
|
|
|
|
|
1. 点击 **"打印清单"** 按钮
|
|
|
|
|
|
2. 系统会生成专业的打印版本:
|
|
|
|
|
|
- 包含公司 Logo
|
|
|
|
|
|
- 显示筛选后的项目
|
|
|
|
|
|
- 包含预算统计
|
|
|
|
|
|
- 无水印设计
|
|
|
|
|
|
3. 使用浏览器打印功能输出
|
|
|
|
|
|
|
|
|
|
|
|
## 📊 数据管理
|
|
|
|
|
|
|
|
|
|
|
|
### 导出数据
|
|
|
|
|
|
|
|
|
|
|
|
#### JSON 格式导出
|
|
|
|
|
|
1. 点击 **"数据管理"** 按钮
|
|
|
|
|
|
2. 选择 **"导出为 JSON"**
|
|
|
|
|
|
3. 下载格式: `购买清单_YYMMDDHHMMSS.json`
|
|
|
|
|
|
|
|
|
|
|
|
#### Excel 格式导出
|
|
|
|
|
|
1. 点击 **"数据管理"** 按钮
|
|
|
|
|
|
2. 选择 **"导出为 EXCEL"**
|
|
|
|
|
|
3. 下载格式: `购买清单_YYMMDDHHMMSS.xlsx`
|
|
|
|
|
|
|
|
|
|
|
|
### 导入数据
|
|
|
|
|
|
|
|
|
|
|
|
#### 支持格式
|
|
|
|
|
|
- **JSON**: 系统原生格式，完整数据支持
|
|
|
|
|
|
- **Excel**: 支持标准表格格式，自动转换
|
|
|
|
|
|
|
|
|
|
|
|
#### 导入模式
|
|
|
|
|
|
- **替换模式**: 清空现有数据，导入新数据
|
|
|
|
|
|
- **追加模式**: 保留现有数据，添加新数据
|
|
|
|
|
|
|
|
|
|
|
|
#### 导入步骤
|
|
|
|
|
|
1. 点击 **"数据管理"** 按钮
|
|
|
|
|
|
2. 选择 **"导入 JSON"** 或 **"导入 EXCEL"**
|
|
|
|
|
|
3. 选择导入模式
|
|
|
|
|
|
4. 选择文件并上传
|
|
|
|
|
|
5. 系统会验证数据格式并导入
|
|
|
|
|
|
|
|
|
|
|
|
### 模板下载
|
|
|
|
|
|
|
|
|
|
|
|
1. 点击 **"数据管理"** 按钮
|
|
|
|
|
|
2. 选择 **"下载Excel模板"**
|
|
|
|
|
|
3. 使用模板填写数据后导入
|
|
|
|
|
|
|
|
|
|
|
|
### 清空数据
|
|
|
|
|
|
|
|
|
|
|
|
1. 点击 **"数据管理"** 按钮
|
|
|
|
|
|
2. 选择 **"清空所有数据"**
|
|
|
|
|
|
3. 确认操作 (此操作不可撤销)
|
|
|
|
|
|
|
|
|
|
|
|
## 💡 实用技巧
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 快速添加类似项目
|
|
|
|
|
|
- 编辑现有项目时，可以复制其信息
|
|
|
|
|
|
- 创建新项目时参考相似配置
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 批次管理
|
|
|
|
|
|
- 使用批次功能对采购项目分组
|
|
|
|
|
|
- 便于按阶段管理采购计划
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 重量计算
|
|
|
|
|
|
- 精确输入设备重量，支持小数点后3位
|
|
|
|
|
|
- 表格底部显示总重量，便于物流计算
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 价格管理
|
|
|
|
|
|
- 支持 SGD、USD 自动转换为 RMB
|
|
|
|
|
|
- 在原价字段记录原始币种信息
|
|
|
|
|
|
|
|
|
|
|
|
### 5. 链接管理
|
|
|
|
|
|
- 在购买链接字段保存产品页面URL
|
|
|
|
|
|
- 点击链接图标直接跳转购买页面
|
|
|
|
|
|
|
|
|
|
|
|
## 🔧 故障排除
|
|
|
|
|
|
|
|
|
|
|
|
### 常见问题
|
|
|
|
|
|
|
|
|
|
|
|
#### 1. 数据丢失
|
|
|
|
|
|
**症状**: 刷新页面后数据消失
|
|
|
|
|
|
**解决**:
|
|
|
|
|
|
- 数据保存在浏览器本地存储中
|
|
|
|
|
|
- 清理浏览器数据可能导致丢失
|
|
|
|
|
|
- 建议定期导出备份数据
|
|
|
|
|
|
|
|
|
|
|
|
#### 2. 导入失败
|
|
|
|
|
|
**症状**: Excel 或 JSON 导入时报错
|
|
|
|
|
|
**解决**:
|
|
|
|
|
|
- 检查文件格式是否正确
|
|
|
|
|
|
- 下载最新模板重新填写
|
|
|
|
|
|
- 确保必填字段不为空
|
|
|
|
|
|
|
|
|
|
|
|
#### 3. 筛选不生效
|
|
|
|
|
|
**症状**: 筛选条件设置后无效果
|
|
|
|
|
|
**解决**:
|
|
|
|
|
|
- 刷新页面重试
|
|
|
|
|
|
- 清除筛选条件后重新设置
|
|
|
|
|
|
- 检查数据中是否存在对应的值
|
|
|
|
|
|
|
|
|
|
|
|
#### 4. 打印格式异常
|
|
|
|
|
|
**症状**: 打印预览显示不正常
|
|
|
|
|
|
**解决**:
|
|
|
|
|
|
- 使用 Chrome 浏览器打印
|
|
|
|
|
|
- 设置为 A4 纸张
|
|
|
|
|
|
- 选择 "更多设置" → "适合页面"
|
|
|
|
|
|
|
|
|
|
|
|
### 性能优化
|
|
|
|
|
|
|
|
|
|
|
|
#### 大数据量处理
|
|
|
|
|
|
- 项目数量超过 100 时，考虑分批次管理
|
|
|
|
|
|
- 定期清理不需要的历史数据
|
|
|
|
|
|
- 使用筛选功能减少显示数量
|
|
|
|
|
|
|
|
|
|
|
|
#### 浏览器兼容性
|
|
|
|
|
|
- 推荐使用 Chrome 90+ 或 Firefox 88+
|
|
|
|
|
|
- 避免使用 IE 浏览器
|
|
|
|
|
|
- 移动端推荐使用原生浏览器
|
|
|
|
|
|
|
|
|
|
|
|
## 📞 技术支持
|
|
|
|
|
|
|
|
|
|
|
|
### 获取帮助
|
|
|
|
|
|
|
|
|
|
|
|
1. **查看文档**:
|
|
|
|
|
|
- [README.md](README.md) - 项目说明
|
|
|
|
|
|
- [DEPLOYMENT.md](DEPLOYMENT.md) - 部署指南
|
|
|
|
|
|
- [CHANGELOG.md](CHANGELOG.md) - 更新日志
|
|
|
|
|
|
|
|
|
|
|
|
2. **调试信息**:
|
|
|
|
|
|
- 按 F12 打开开发者工具
|
|
|
|
|
|
- 查看控制台错误信息
|
|
|
|
|
|
- 检查网络请求状态
|
|
|
|
|
|
|
|
|
|
|
|
3. **数据备份**:
|
|
|
|
|
|
- 定期导出 JSON 格式备份
|
|
|
|
|
|
- 重要数据建议多地备份
|
|
|
|
|
|
- 升级前务必备份数据
|
|
|
|
|
|
|
|
|
|
|
|
### 版本信息
|
|
|
|
|
|
|
|
|
|
|
|
- **当前版本**: 1.0.0
|
|
|
|
|
|
- **发布日期**: 2025-01-20
|
|
|
|
|
|
- **支持浏览器**: Chrome 90+, Firefox 88+, Safari 14+
|
|
|
|
|
|
- **Node.js 要求**: v18.0.0+
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🎉 开始使用
|
|
|
|
|
|
|
|
|
|
|
|
现在你已经了解了所有功能，开始体验 Dream-Machine 采购清单管理系统吧！
|
|
|
|
|
|
|
|
|
|
|
|
如果在使用过程中遇到任何问题，请参考故障排除部分或查看相关文档。
|
|
|
|
|
|
|
|
|
|
|
|
**祝你使用愉快！** 🚀
|
