Suzhou-SafetyToolsWarning-WX/QUICKSTART.md

# 快速开始指南

## 🎯 项目已完成的工作

### ✅ 已完成
1. **项目结构搭建**
   - 清理了所有 TDesign 示例页面
   - 创建了核心功能页面结构
   - 配置了底部导航栏（TabBar）

2. **核心页面开发**
   - ✅ 首页（工作台）- 设备统计、预警提醒、快捷入口
   - ✅ 设备列表 - 搜索、筛选、状态标识
   - ✅ 设备详情 - 完整信息展示、编辑、删除
   - ✅ 添加/编辑设备 - 表单录入、日期选择
   - ✅ 统计分析 - 数据统计（图表待开发）
   - ✅ 预警中心 - 预警列表、时间筛选
   - ✅ 预警设置 - 预警天数设置
   - ✅ 个人中心 - 用户信息、功能入口

3. **工具函数**
   - ✅ `utils/deviceUtils.js` - 设备数据处理、日期计算、预警判断
   - ✅ `utils/mockData.js` - 模拟数据生成

4. **UI组件**
   - ✅ 全局注册 TDesign 常用组件
   - ✅ 统一的样式风格
   - ✅ 响应式布局

## 🚀 如何运行项目

### 步骤 1：打开项目
1. 启动**微信开发者工具**
2. 选择"导入项目"
3. 选择项目目录：`/Users/syruan/WeChatProjects/miniprogram-1`
4. AppID 使用：`wx9d08fb2788d95136`（或使用测试号）

### 步骤 2：构建 npm
1. 在微信开发者工具中，点击菜单栏：**工具 -> 构建 npm**
2. 等待构建完成（会生成 `miniprogram_npm` 目录）

### 步骤 3：编译运行
1. 点击工具栏的"编译"按钮
2. 在模拟器中查看效果
3. 或点击"预览"在真机上测试

## 📱 功能演示

### 首页（工作台）
- 查看设备总数、预警数、到期数
- 查看最新的预警提醒（前3条）
- 使用快捷入口：
  - 点击"设备台账"进入设备列表
  - 点击"添加设备"添加新设备
  - 点击"统计分析"查看统计数据
  - 点击"扫码查询"扫描设备二维码（功能待完善）

### 设备台账
- 使用搜索框搜索设备（支持名称、编号、型号）
- 点击顶部标签筛选状态（全部、正常、预警、已到期）
- 点击右侧筛选图标进行高级筛选（设备类型、使用单位）
- 点击设备卡片查看详情
- 点击右下角"+"按钮添加新设备

### 设备详情
- 查看设备完整信息
- 点击"编辑设备"修改信息
- 点击"删除设备"删除设备（会弹出确认对话框）

### 添加/编辑设备
- 填写设备基本信息（名称、编号、规格型号等）
- 选择使用单位
- 选择检验日期
- 填写备注信息（可选）
- 点击"添加"或"保存"提交

### 统计分析
- 查看设备总数和预警率
- 查看设备类型统计列表
- 图表功能待开发（可集成 echarts-for-weixin）

### 预警中心
- 切换标签查看不同时间范围的预警（全部、7天内、15天内、已到期）
- 点击预警项查看设备详情

### 预警设置
- 设置提前预警天数（7天、15天、30天、60天、90天）

### 个人中心
- 查看用户信息
- 访问预警设置
- 查看关于我们

## 🔧 当前使用的模拟数据

项目目前使用 `utils/mockData.js` 中的模拟数据，包含：
- 10 台设备的完整信息
- 不同状态的设备（正常、预警、已到期）
- 最近操作记录
- 设备类型和使用单位列表

**数据特点**：
- 设备 ID 1（绝缘手套）：即将到期（预警状态）
- 设备 ID 3（安全带）：已到期
- 其他设备：正常或预警状态

## ⚠️ 已知问题

### 1. TabBar 图标缺失
**现象**：底部导航栏只显示文字，没有图标

**原因**：图标文件未创建

**解决方案**：
- **临时方案**：当前已配置为纯文字 TabBar，可以正常使用
- **完整方案**：准备图标文件（81px * 81px，PNG格式），放入 `assets/icons/` 目录，然后在 `app.json` 中配置图标路径

所需图标：
```
assets/icons/
├── home.png              # 首页图标（未选中）
├── home-active.png       # 首页图标（选中）
├── device.png            # 设备图标（未选中）
├── device-active.png     # 设备图标（选中）
├── chart.png             # 统计图标（未选中）
├── chart-active.png      # 统计图标（选中）
├── warning.png           # 预警图标（未选中）
├── warning-active.png    # 预警图标（选中）
├── user.png              # 我的图标（未选中）
└── user-active.png       # 我的图标（选中）
```

### 2. 数据不持久化
**现象**：刷新页面后数据恢复到初始状态

**原因**：使用模拟数据，未实现数据持久化

**解决方案**：参考 `PROJECT_GUIDE.md` 中的"数据管理"章节，选择以下方案之一：
- 微信云开发（推荐）
- 本地存储（wx.setStorageSync）
- 后端 API

### 3. 部分功能待开发
以下功能显示"功能开发中"提示：
- 扫码查询（需要生成设备二维码）
- 统计图表（需要集成 echarts-for-weixin）
- 数据导出
- 单位管理
- 帮助中心
- 消息推送

## 📝 下一步开发建议

### 优先级 1：数据持久化
```javascript
// 方案一：使用本地存储（最简单）
// 在 utils/storage.js 中封装存储方法
function saveDevices(devices) {
  wx.setStorageSync('devices', devices);
}

function getDevices() {
  return wx.getStorageSync('devices') || [];
}

// 方案二：使用微信云开发（推荐）
// 1. 在微信开发者工具中开通云开发
// 2. 创建数据库集合 'devices'
// 3. 使用云数据库 API 进行 CRUD 操作
```

### 优先级 2：用户登录
```javascript
// 使用微信登录
wx.login({
  success: res => {
    // 发送 res.code 到后端换取 openId, sessionKey, unionId
  }
});

// 获取用户信息
wx.getUserProfile({
  desc: '用于完善用户资料',
  success: res => {
    console.log(res.userInfo);
  }
});
```

### 优先级 3：消息推送
```javascript
// 订阅消息
wx.requestSubscribeMessage({
  tmplIds: ['模板ID'],
  success: res => {
    // 订阅成功，可以发送模板消息
  }
});
```

### 优先级 4：统计图表
```bash
# 安装 echarts-for-weixin
npm install echarts-for-weixin --save

# 在页面中引入
import * as echarts from 'echarts-for-weixin';
```

## 🎨 自定义配置

### 修改主题色
编辑 `app.wxss`，修改以下变量：
```css
--td-brand-color: #0052D9;  /* 主题色 */
--td-warning-color: #FF6B00; /* 预警色 */
--td-error-color: #E34D59;   /* 错误色 */
```

### 修改预警天数阈值
编辑 `utils/deviceUtils.js`，修改 `getDeviceStatus` 函数的默认参数：
```javascript
function getDeviceStatus(daysLeft, warningDays = 30) {
  // warningDays 默认为 30 天，可以修改为其他值
}
```

### 添加新的设备类型
编辑 `utils/mockData.js`，在 `getDeviceTypes` 函数中添加：
```javascript
function getDeviceTypes() {
  return ['全部', '安全帽', '安全带', '新设备类型', ...];
}
```

## 📞 技术支持

如遇到问题，请检查：
1. 微信开发者工具版本是否最新
2. 是否已执行"构建 npm"
3. 基础库版本是否符合要求（>= 3.0.0）
4. 查看控制台是否有错误信息

## 📚 相关文档

- [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)
- [TDesign 小程序组件库](https://tdesign.tencent.com/miniprogram/overview)
- [微信云开发文档](https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html)

---

**祝开发顺利！** 🎉