# 武术评分系统 - 项目概述

## 项目基本信息

- **项目名称**: 武术评分系统 (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地址]