Chever John
2bf49537f8
Updates the development server port from 5173 to 3003. The documentation and configuration files incorrectly specified port 5173 for the development server. This caused confusion and prevented users from accessing the application at the correct address. The port is updated in `DEPLOYMENT.md`, `README.md`, `USER_GUIDE.md` and `vite.config.ts` to ensure consistency and proper access to the development server on port 3003.
297 lines
No EOL
8.3 KiB
Markdown
297 lines
No EOL
8.3 KiB
Markdown
# 用户使用指南
|
||
|
||
欢迎使用 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. **访问应用**
|
||
- 打开浏览器访问 `http://localhost:3003`
|
||
- 应用会自动加载示例数据
|
||
|
||
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 采购清单管理系统吧！
|
||
|
||
如果在使用过程中遇到任何问题，请参考故障排除部分或查看相关文档。
|
||
|
||
**祝你使用愉快！** 🚀 |