宅房
7bd197f4ac
完成内容: - 5个完整的UI页面（登录、评分列表、评分详情、多场地列表、修改评分） - 完整的Mock数据展示 - 完整的业务逻辑实现 - 文档体系建立（2000+行文档） 文档包含: - 项目概述.md - 页面功能说明.md - API接口设计.md (17个接口) - 数据结构设计.md (17个接口定义) - 功能模块划分.md - 后端实现对比报告.md - 数据可行性分析报告.md (95分评估) - 保护Mock版本的实施方案.md (4层保护机制) - API对接完成度检查报告.md 此版本为Mock原型版本，所有UI功能完整，数据为硬编码Mock数据。
207 lines
5.5 KiB
Markdown
207 lines
5.5 KiB
Markdown
# 武术评分系统 - 项目概述
|
||
|
||
## 项目基本信息
|
||
|
||
- **项目名称**: 武术评分系统 (martial-admin-mini)
|
||
- **项目类型**: UniApp 跨端小程序
|
||
- **技术框架**: Vue.js 2.x + UniApp
|
||
- **支持平台**: 微信小程序 + H5
|
||
- **版本**: v1.0.0
|
||
|
||
## 项目简介
|
||
|
||
武术评分系统是一个专为武术比赛评委打分设计的移动端应用。系统支持多角色权限管理，区分普通评委和裁判长两种角色，提供精确的评分功能（精度到0.001分）。
|
||
|
||
## 核心功能
|
||
|
||
### 1. 用户角色
|
||
|
||
- **普通评委 (pub)**: 对选手进行评分
|
||
- **裁判长 (admin)**: 查看所有场地和项目，修改评分
|
||
|
||
### 2. 主要功能模块
|
||
|
||
1. **登录认证**: 通过比赛编码和邀请码登录
|
||
2. **评分管理**: 精确评分（5.0-10.0分，精度0.001）
|
||
3. **场地管理**: 支持多场地切换（5个场地）
|
||
4. **项目管理**: 支持多项目切换（8个项目类型）
|
||
5. **扣分项管理**: 支持多选扣分项
|
||
6. **评分修改**: 裁判长可修改总分
|
||
|
||
## 技术架构
|
||
|
||
### 技术栈
|
||
|
||
| 技术 | 版本/说明 |
|
||
|------|----------|
|
||
| 框架 | UniApp |
|
||
| 前端框架 | Vue.js 2.x |
|
||
| 样式 | CSS3 + SCSS |
|
||
| UI组件 | UniApp原生组件 |
|
||
| 状态管理 | getApp().globalData |
|
||
| 路由 | UniApp内置路由 |
|
||
|
||
### 项目特点
|
||
|
||
1. **跨平台**: 一套代码，同时支持微信小程序和H5
|
||
2. **无三方依赖**: 完全使用UniApp原生API和组件
|
||
3. **自定义导航栏**: 所有页面使用自定义导航栏设计
|
||
4. **响应式设计**: 使用rpx单位适配不同屏幕
|
||
5. **精确控制**: 评分精度达0.001分
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
martial-admin-mini/
|
||
├── pages/ # 页面文件
|
||
│ ├── login/ # 登录页
|
||
│ ├── score-list/ # 评分列表页（普通评委）
|
||
│ ├── score-detail/ # 评分详情页
|
||
│ ├── score-list-multi/ # 多场地列表页（裁判长）
|
||
│ └── modify-score/ # 修改评分页（裁判长）
|
||
├── common/ # 公共资源
|
||
│ └── common.css # 全局样式
|
||
├── static/ # 静态资源
|
||
├── doc/ # 项目文档
|
||
├── image/ # 设计图
|
||
├── pages.json # 页面配置
|
||
├── manifest.json # 应用配置
|
||
├── App.vue # 根组件
|
||
├── main.js # 入口文件
|
||
└── uni.scss # 全局样式变量
|
||
```
|
||
|
||
## 页面流程
|
||
|
||
```
|
||
┌─────────────────┐
|
||
│ 登录页面 │ (login.vue)
|
||
│ 输入比赛编码 │
|
||
│ 输入邀请码 │
|
||
└────────┬────────┘
|
||
│
|
||
验证邀请码
|
||
│
|
||
┌────┴────┐
|
||
│ │
|
||
pub admin
|
||
│ │
|
||
▼ ▼
|
||
┌────────┐ ┌────────────────┐
|
||
│评分列表│ │多场地列表页 │
|
||
│(普通评委)│ │(裁判长) │
|
||
└───┬────┘ └────┬───────────┘
|
||
│ │
|
||
▼ ▼
|
||
┌────────┐ ┌──────────┐
|
||
│评分详情│ │修改评分 │
|
||
│页面 │ │页面 │
|
||
└────────┘ └──────────┘
|
||
```
|
||
|
||
## 色彩系统
|
||
|
||
| 颜色类型 | 色值 | 说明 |
|
||
|---------|------|------|
|
||
| 主色调 | #1B7C5E | 深绿色（导航栏、按钮） |
|
||
| 次要色 | #2A9D7E | 浅绿色（渐变） |
|
||
| 强调色 | #FF4D6A | 红色（提示、警告） |
|
||
| 文字主色 | #333333 | 深灰色 |
|
||
| 文字次色 | #666666 | 中灰色 |
|
||
| 占位符 | #CCCCCC | 浅灰色 |
|
||
| 页面背景 | #F5F5F5 | 浅灰色背景 |
|
||
|
||
## 当前开发状态
|
||
|
||
### 已完成功能
|
||
|
||
- ✅ 登录权限验证
|
||
- ✅ 角色区分（pub/admin）
|
||
- ✅ 评分界面（精度0.001）
|
||
- ✅ 扣分项多选
|
||
- ✅ 场地切换（5个场地）
|
||
- ✅ 项目切换（8个项目）
|
||
- ✅ 评分修改功能
|
||
- ✅ 自定义导航栏
|
||
- ✅ 响应式布局
|
||
|
||
### 待开发功能
|
||
|
||
- ❌ 后端API对接
|
||
- ❌ 真实数据存储
|
||
- ❌ 用户身份持久化
|
||
- ❌ 实时数据同步
|
||
- ❌ 离线支持
|
||
- ❌ 数据统计和导出
|
||
|
||
## 运行说明
|
||
|
||
### 使用 HBuilderX（推荐）
|
||
|
||
1. 打开 HBuilderX
|
||
2. 文件 → 打开目录 → 选择项目根目录
|
||
3. 右键点击项目名称 → 运行 → 运行到浏览器 → Chrome
|
||
4. 首次编译需要1-2分钟
|
||
|
||
### 使用命令行
|
||
|
||
```bash
|
||
# H5开发
|
||
npm run dev:h5
|
||
|
||
# 微信小程序开发
|
||
npm run dev:mp-weixin
|
||
|
||
# 构建H5生产环境
|
||
npm run build:h5
|
||
|
||
# 构建微信小程序
|
||
npm run build:mp-weixin
|
||
```
|
||
|
||
## 部署说明
|
||
|
||
### H5部署
|
||
|
||
1. 运行 `npm run build:h5`
|
||
2. 将 `dist/build/h5` 目录部署到服务器
|
||
3. 配置nginx静态资源服务
|
||
|
||
### 微信小程序部署
|
||
|
||
1. 运行 `npm run build:mp-weixin`
|
||
2. 使用微信开发者工具打开 `dist/build/mp-weixin` 目录
|
||
3. 配置 `manifest.json` 中的 `appid`
|
||
4. 上传审核
|
||
|
||
## 后续扩展建议
|
||
|
||
### 短期优化（1-2周）
|
||
|
||
1. 对接后端API
|
||
2. 实现JWT认证
|
||
3. 添加loading状态
|
||
4. 完善错误处理
|
||
|
||
### 中期功能（1-2月）
|
||
|
||
1. WebSocket实时同步
|
||
2. 评分历史记录
|
||
3. 数据统计分析
|
||
4. 导出Excel报表
|
||
5. 离线缓存支持
|
||
|
||
### 长期架构（2-3月）
|
||
|
||
1. 引入Vuex/Pinia状态管理
|
||
2. 组件化拆分
|
||
3. 单元测试覆盖
|
||
4. CI/CD自动化部署
|
||
5. 性能优化
|
||
|
||
## 联系方式
|
||
|
||
- 项目仓库: [项目地址]
|
||
- 技术文档: [文档地址]
|
||
- 问题反馈: [Issues地址]
|