56c1320e40
Implemented multiple layers of protection to prevent iOS Safari from zooming when users quickly tap the score adjustment buttons:
1. Enhanced touch event handling in modify-score.vue:
- Changed from touchend to touchstart for immediate response
- Added .stop.prevent modifiers to all touch events (touchstart, touchmove, touchend, touchcancel)
- Added noop() handlers to absorb unwanted events
- Replaced time-based debouncing with isProcessing flag using requestAnimationFrame
- Ensured all child elements have pointer-events: none
2. Comprehensive index.html protection:
- Added iOS-specific meta tags (apple-mobile-web-app-capable, format-detection)
- Enhanced CSS with touch-action: pan-y for scrolling while preventing zoom
- Implemented 7-layer JavaScript protection:
* Layer 1: Intercept rapid touchstart events with counter
* Layer 2: Block touchend events within 300ms
* Layer 3: Completely disable dblclick events
* Layer 4: Prevent gesture events (gesturestart/change/end)
* Layer 5: Use Pointer Events API for additional blocking
* Layer 6: Filter rapid click events
* Layer 7: Add capture-phase listeners to buttons
- All event listeners use { passive: false, capture: true } for maximum control
This multi-layered approach addresses the root cause: iOS Safari triggers zoom at the browser level before JavaScript can normally intercept it. By using capture phase and preventing events at multiple stages, we ensure the zoom behavior is blocked.
Generated with Claude Code
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
武术评分系统 - UniApp版本
这是一个基于UniApp开发的武术比赛评分系统，支持H5和小程序平台。
项目简介
本项目是一个完整的武术比赛评分管理系统，包含评委打分、裁判长修改评分、多场地管理等功能。
功能特点
- ✅ 支持H5和微信小程序双平台
- ✅ 评委登录与评分功能
- ✅ 裁判长评分修改功能
- ✅ 多场地、多项目切换
- ✅ 扣分项多选功能
- ✅ 精确到0.001分的评分控制
- ✅ 实时评分统计
页面结构
1. 登录页面 (pages/login/login.vue)
- 输入比赛编码
- 输入评委邀请码
- 验证登录
2. 评分列表页 (pages/score-list/score-list.vue)
- 显示比赛信息
- 查看选手列表
- 评委评分入口
- 显示我的评分和总分
3. 修改评分页 (pages/modify-score/modify-score.vue)
- 裁判长专用功能
- 查看所有评委评分
- 修改总分（±0.001分）
- 添加修改备注
4. 多场地评分列表页 (pages/score-list-multi/score-list-multi.vue)
- 场地切换功能
- 项目切换功能
- 裁判长可查看所有场地
- 普通评委仅看自己的场地
5. 评分详情页 (pages/score-detail/score-detail.vue)
- 评委打分界面
- 分数精确调整（±0.001分）
- 扣分项多选
- 添加评分备注
技术栈
- 框架: UniApp
- 前端: Vue.js 2.x
- 样式: CSS3 (支持rpx单位)
- 平台支持: H5、微信小程序
目录结构
martial-admin-mini/
├── common/ # 公共资源
│ └── common.css # 全局样式
├── pages/ # 页面目录
│ ├── login/ # 登录页面
│ ├── score-list/ # 评分列表页
│ ├── modify-score/ # 修改评分页
│ ├── score-list-multi/ # 多场地列表页
│ └── score-detail/ # 评分详情页
├── image/ # 设计图片
├── App.vue # 应用配置
├── manifest.json # 应用配置清单
├── pages.json # 页面配置
└── package.json # 项目依赖
快速开始（推荐方式）
使用HBuilderX运行（最简单）
-
下载并安装HBuilderX
- 官网下载：https://www.dcloud.io/hbuilderx.html
- 建议下载标准版或App开发版
-
打开项目
- 打开HBuilderX
- 点击菜单：文件 -> 打开目录
- 选择本项目的根目录：
martial-admin-mini
-
运行到H5
- 在项目管理器中，右键点击项目根目录
- 选择：运行 -> 运行到浏览器 -> Chrome（或其他浏览器）
- 浏览器会自动打开并显示项目
-
运行到微信小程序
- 首先安装并打开微信开发者工具
- 在HBuilderX中，右键点击项目根目录
- 选择：运行 -> 运行到小程序模拟器 -> 微信开发者工具
- 首次运行会提示配置小程序工具路径，按提示配置即可
常见问题解决
问题1：HBuilderX提示"未安装依赖"或"缺少插件"
解决方案：
- 点击HBuilderX顶部菜单：工具 -> 插件安装
- 安装以下插件：
- uni-app编译器（必需）
- App真机运行（如需真机调试）
- 微信小程序支持（如需开发小程序）
问题2：运行时报错"Cannot find module"
解决方案：
# 在项目根目录执行
npm install
问题3：小程序无法运行
解决方案：
- 确保已安装微信开发者工具
- 在HBuilderX中配置微信开发者工具路径：
- 工具 -> 设置 -> 运行配置 -> 小程序运行配置
- 配置微信开发者工具的安装路径
- 在manifest.json中配置小程序appid（或使用测试号）
问题4：H5运行时样式异常
解决方案：
- 清除浏览器缓存后重新运行
- 或使用Ctrl+F5强制刷新
开发指南
环境要求
- HBuilderX 3.0+ (推荐)
- 或 Node.js 12+ + Vue CLI
- 微信开发者工具 (小程序开发需要)
方式一：使用HBuilderX（推荐）
- 使用HBuilderX打开项目根目录
- 点击运行 -> 运行到浏览器 (H5开发)
- 或点击运行 -> 运行到小程序模拟器 -> 微信开发者工具
方式二：使用命令行
安装依赖
npm install
运行项目
H5开发
npm run dev:h5
微信小程序开发
npm run dev:mp-weixin
构建H5
npm run build:h5
构建微信小程序
npm run build:mp-weixin
设计还原说明
本项目严格按照提供的5张设计图进行一比一还原：
-
颜色方案
- 主色调：绿色 (#1B7C5E - #2A9D7E 渐变)
- 强调色：红色 (#FF4D6A) - 用于提示信息
- 背景色：浅灰 (#F5F5F5)
-
字体大小
- 导航标题：36rpx
- 页面标题：40rpx
- 正文内容：26-32rpx
- 提示文字：22-24rpx
-
间距与圆角
- 卡片圆角：16rpx
- 按钮圆角：8-16rpx
- 标准间距：30rpx
- 内边距：20-40rpx
-
交互效果
- 按钮点击反馈
- 分数增减控制
- 多选框交互
- 页面跳转动画
功能说明
评分规则
- 分数范围：5.0 - 10.0 分
- 精度：0.001 分
- 评委评分保留3位小数
- 裁判长可修改总分 ±0.005 分
权限区分
- 普通评委：仅能查看和评分自己负责的场地和项目
- 裁判长：可查看所有场地和项目，可修改评分
扣分项
- 支持多选
- 每个项目可配置不同的扣分项
- 扣分项选择后自动计入总分
🚀 API对接状态
✅ 前端已完全准备就绪（100%）
本项目已完成API对接准备工作，可以立即开始后端对接：
- ✅ dataAdapter架构 - 支持Mock/API双模式无缝切换
- ✅ API接口定义 - 9个接口全部定义完成
- ✅ 网络请求封装 - 统一的错误处理和Token管理
- ✅ Mock数据完整 - 可独立演示所有功能
- ✅ 文档体系完善 - 21个文档，约25,000+行
📋 快速开始API对接
1. 配置后端地址（30秒）
编辑 config/env.config.js:
apiBaseURL: 'http://localhost:8080' // 修改为实际后端地址
2. 切换数据模式
// Mock模式（后端未就绪时）
dataMode: 'mock'
// API模式（后端就绪后）
dataMode: 'api'
3. 查看文档
- 快速上手: API对接快速启动指南.md - 5分钟快速上手
- 后端开发: 后端接口开发清单.md - 详细的开发规范
- 前端联调: 前端API对接指南.md - 前端联调指南
- 快速参考: 快速参考.md - 一页纸快速参考
⚠️ 后端待开发接口（5个）
| 接口 | 路径 | 优先级 | 工作量 |
|---|---|---|---|
| 登录验证 | POST /api/mini/login |
🔴 高 | 2天 |
| 普通评委选手列表 | GET /api/mini/athletes |
🔴 高 | 1天 |
| 裁判长选手列表 | GET /api/mini/athletes/admin |
🟡 中 | 1天 |
| 评分详情 | GET /api/mini/score/detail/{id} |
🟡 中 | 1天 |
| 修改评分 | PUT /api/mini/score/modify |
🟡 中 | 1天 |
预计总工作量: 6人天（约1周）
详细规范请查看：后端接口开发清单.md
📊 项目状态
前端开发: ████████████████████ 100% ✅
后端开发: ████████░░░░░░░░░░░░ 44% ⚠️
文档完成: ████████████████████ 100% ✅
查看实时状态：项目状态看板.md
注意事项
- ✅ 本项目已完成API对接准备，支持Mock/API双模式
- ✅ Mock模式下所有功能可独立演示
- ✅ API模式下需要后端实现5个专用接口
- ✅ 页面跳转已配置，可直接运行演示
- ✅ 适配了主流手机屏幕尺寸
许可证
MIT License
联系方式
如有问题或建议，请联系项目负责人。