start

xui/wxapp/PROJECT_GUIDE.md

@@ -0,0 +1,95 @@
+# 值班助手小程序 - 使用说明
+
+## 项目介绍
+值班助手是一个基于微信小程序的值班管理应用，使用 TDesign 组件库构建。
+
+## 技术栈
+- 微信小程序原生框架
+- TDesign 微信小程序组件库
+
+## 安装步骤
+
+### 1. 安装依赖
+```bash
+npm install
+```
+
+### 2. 在微信开发者工具中配置
+1. 打开微信开发者工具
+2. 导入项目（选择本项目目录）
+3. 在工具栏点击 `工具` -> `构建 npm`
+4. 构建成功后，勾选 `将 JS 编译成 ES5`
+
+### 3. 添加底部导航图标
+需要在 `images` 目录下添加以下图标文件（PNG格式）：
+- `home.png` - 首页图标（未选中）
+- `home-active.png` - 首页图标（选中）
+- `mine.png` - 我的图标（未选中）
+- `mine-active.png` - 我的图标（选中）
+
+### 4. 添加默认头像
+在 `images` 目录下添加 `default-avatar.png` 作为默认头像图片
+
+## 项目结构
+
+```
+attendant-wechat/
+├── app.js                 # 小程序主入口
+├── app.json              # 小程序全局配置
+├── app.wxss              # 小程序全局样式
+├── sitemap.json          # 站点地图配置
+├── package.json          # 项目依赖配置
+├── project.config.json   # 项目配置文件
+├── pages/                # 页面目录
+│   ├── index/           # 首页
+│   │   ├── index.wxml   # 页面结构
+│   │   ├── index.wxss   # 页面样式
+│   │   ├── index.js     # 页面逻辑
+│   │   └── index.json   # 页面配置
+│   └── mine/            # 我的页面
+│       ├── mine.wxml    # 页面结构
+│       ├── mine.wxss    # 页面样式
+│       ├── mine.js      # 页面逻辑
+│       └── mine.json    # 页面配置
+└── images/              # 图片资源目录
+    ├── home.png         # 首页图标
+    ├── home-active.png  # 首页图标（选中）
+    ├── mine.png         # 我的图标
+    ├── mine-active.png  # 我的图标（选中）
+    └── default-avatar.png # 默认头像
+```
+
+## 页面说明
+
+### 首页 (pages/index)
+- 欢迎卡片：显示应用名称和欢迎语
+- 快捷功能：今日值班、值班表、值班记录
+- 统计信息：显示值班相关统计数据
+
+### 我的 (pages/mine)
+- 用户信息卡片：显示用户头像和昵称
+- 功能菜单：个人信息、我的值班、值班统计、设置、帮助与反馈、关于
+- 退出登录：退出当前账号
+
+## 使用的 TDesign 组件
+- `t-button`: 按钮组件
+- `t-cell`: 单元格组件
+- `t-cell-group`: 单元格组组件
+- `t-icon`: 图标组件
+- `t-avatar`: 头像组件
+- `t-card`: 卡片组件
+- `t-divider`: 分割线组件
+- `t-badge`: 徽标组件
+
+## 注意事项
+1. 确保微信开发者工具的基础库版本 >= 2.12.0
+2. 安装依赖后必须执行"构建 npm"操作
+3. 建议在真机上测试，部分功能可能与模拟器有差异
+4. 图标文件尺寸建议：未选中状态 81x81px，选中状态 81x81px
+
+## 下一步开发建议
+1. 实现用户登录功能
+2. 对接后端 API，获取真实的值班数据
+3. 添加数据缓存机制，提升用户体验
+4. 实现消息通知功能
+5. 添加数据导出功能