zlwu
28232d5d46
- 🔥 完全重写 .cursor/cursorrules-mobile.md (940行) * 基于实际mobile工程Vue 3.4.21+uniapp+uview-plus架构 * 移除所有JeeSite相关内容，精准匹配实际项目 * 新增11个完整章节：技术栈、项目结构、页面开发、组件规范等 - 📚 创建完整规范文档 docs/开发文档/移动端开发规范总结.md (800+行) * 涵盖从项目架构到部署的全流程指导 * 提供可直接使用的页面和组件模板 * 包含现代CSS变量设计系统和用户体验优化 - 🔄 同步更新主配置文件 .cursorrules * 更新移动端技术栈描述 * 调整为Vue 3.4.21+uniapp+uview-plus 3.4.45架构 - 📝 完善变更记录 * 详细记录规范更新背景和技术价值 * 为后续维护提供完整历史记录 核心价值：解决规范与实际项目不匹配问题，为Cursor AI提供准确的移动端开发上下文，确保生成代码完全符合实际项目架构。
250 lines
5.4 KiB
Markdown
250 lines
5.4 KiB
Markdown
# 智慧校园 Vue3 应用
|
|
|
|
基于 Vue3 + uniapp 开发的现代化智慧校园移动应用，采用现代简约设计风格，支持多平台部署。
|
|
|
|
## 🎯 项目特色
|
|
|
|
### 🎨 设计系统
|
|
|
|
- **现代简约风格**: 清新简洁的界面设计
|
|
- **统一色彩方案**: 主题色 RGB(93, 135, 255)
|
|
- **组件化架构**: 高度复用的 Vue 组件
|
|
- **响应式布局**: 适配多种屏幕尺寸
|
|
|
|
### 📱 核心功能
|
|
|
|
#### 首页
|
|
|
|
- 个性化欢迎横幅（用户信息 + 天气）
|
|
- 快速统计仪表板
|
|
- 常用服务快捷入口
|
|
- 待办任务管理
|
|
- 校园动态资讯
|
|
- 快捷功能工具栏
|
|
|
|
#### 办公中心
|
|
|
|
- 智能搜索功能
|
|
- 分类服务导航：
|
|
- 🔥 热门服务
|
|
- 🎓 学习教务
|
|
- 🏠 生活服务
|
|
- 🏢 校园资源
|
|
- 📋 办事服务
|
|
- 🔍 信息查询
|
|
- ⚡ 快捷工具
|
|
|
|
#### 我的页面
|
|
|
|
- 个人信息展示
|
|
- 学习状态统计
|
|
- 功能菜单分组：
|
|
- 我的服务
|
|
- 校园生活
|
|
- 应用设置
|
|
- 帮助与反馈
|
|
|
|
### 🎭 交互体验
|
|
|
|
#### 动画效果
|
|
|
|
- **页面转场**: 流畅的页面切换动画
|
|
- **组件动画**: 卡片、列表项的进入动画
|
|
- **微交互**: 点击反馈、悬停效果
|
|
- **加载动画**: 优雅的加载状态提示
|
|
|
|
#### 手势操作
|
|
|
|
- **滑动切换**: 左右滑动切换页面
|
|
- **长按菜单**: 长按显示上下文菜单
|
|
- **双击操作**: 双击触发特殊功能
|
|
- **触觉反馈**: 操作时的震动反馈
|
|
|
|
### ♿ 无障碍访问
|
|
|
|
#### 键盘导航
|
|
|
|
- **Tab 导航**: 支持键盘 Tab 键导航
|
|
- **方向键**: 网格布局中的方向键导航
|
|
- **快捷键**: Enter/Space 激活，Escape 取消
|
|
|
|
#### 屏幕阅读器支持
|
|
|
|
- **ARIA 标签**: 完整的语义化标记
|
|
- **实时区域**: 动态内容的屏幕阅读器通知
|
|
- **焦点管理**: 智能的焦点流转控制
|
|
|
|
#### 辅助功能
|
|
|
|
- **高对比度模式**: 视觉障碍用户友好
|
|
- **大字体模式**: 可调节的字体大小
|
|
- **屏幕阅读器优化**: 减少干扰的简化模式
|
|
|
|
### 📐 响应式设计
|
|
|
|
#### 断点设置
|
|
|
|
- **Mobile**: ≤ 375px
|
|
- **Tablet**: ≤ 768px
|
|
- **Desktop**: > 768px
|
|
|
|
#### 适配特性
|
|
|
|
- **弹性网格**: 自适应列数的网格布局
|
|
- **安全区域**: 支持刘海屏等特殊设备
|
|
- **方向适配**: 横竖屏切换优化
|
|
- **触摸友好**: 合适的触摸目标尺寸
|
|
|
|
## 🛠 技术架构
|
|
|
|
### 核心技术栈
|
|
|
|
- **Vue 3**: 组合式 API + TypeScript 支持
|
|
- **uniapp**: 跨平台开发框架
|
|
- **Sass**: CSS 预处理器
|
|
- **Vite**: 现代化构建工具
|
|
|
|
### 组件库
|
|
|
|
```
|
|
src/components/
|
|
├── NavBar.vue # 导航栏组件
|
|
├── Card.vue # 卡片组件
|
|
├── ServiceItem.vue # 服务项组件
|
|
├── StatCard.vue # 统计卡片组件
|
|
└── GridLayout.vue # 网格布局组件
|
|
```
|
|
|
|
### 工具库
|
|
|
|
```
|
|
src/utils/
|
|
├── animations.js # 动画工具
|
|
├── gestures.js # 手势识别
|
|
├── accessibility.js # 无障碍访问
|
|
├── device.js # 设备检测
|
|
├── request.js # 网络请求
|
|
└── sse.js # 服务端推送
|
|
```
|
|
|
|
### 页面结构
|
|
|
|
```
|
|
src/pages/
|
|
├── index/ # 首页
|
|
├── workbench/ # 办公中心
|
|
└── profile/ # 我的页面
|
|
```
|
|
|
|
## 🎨 设计规范
|
|
|
|
### 色彩系统
|
|
|
|
```scss
|
|
--primary-color: rgb(93, 135, 255); // 主品牌色
|
|
--primary-light: rgba(93, 135, 255, 0.1);
|
|
--primary-dark: rgb(73, 115, 235);
|
|
--text-primary: #333333;
|
|
--text-secondary: #666666;
|
|
--bg-color: #f8f9fa;
|
|
```
|
|
|
|
### 间距系统
|
|
|
|
```scss
|
|
--spacing-sm: 8px; // 小间距
|
|
--spacing-base: 12px; // 基础间距
|
|
--spacing-lg: 16px; // 大间距
|
|
--spacing-xl: 20px; // 超大间距
|
|
```
|
|
|
|
### 圆角系统
|
|
|
|
```scss
|
|
--border-radius-sm: 6px;
|
|
--border-radius-base: 8px;
|
|
--border-radius-lg: 12px;
|
|
--border-radius-xl: 16px;
|
|
```
|
|
|
|
## 🚀 部署与运行
|
|
|
|
### 开发环境
|
|
|
|
```bash
|
|
# 安装依赖
|
|
npm install
|
|
|
|
# 启动开发服务器 (H5)
|
|
npm run dev:h5
|
|
|
|
# 启动微信小程序开发
|
|
npm run dev:mp-weixin
|
|
|
|
# 启动 App 开发
|
|
npm run dev:app
|
|
```
|
|
|
|
### 生产构建
|
|
|
|
```bash
|
|
# H5 构建
|
|
npm run build:h5
|
|
|
|
# 微信小程序构建
|
|
npm run build:mp-weixin
|
|
|
|
# App 构建
|
|
npm run build:app
|
|
```
|
|
|
|
## 📊 性能优化
|
|
|
|
### 代码优化
|
|
|
|
- **组件懒加载**: 路由级别的代码分割
|
|
- **图片优化**: WebP 格式 + 响应式图片
|
|
- **缓存策略**: 智能的资源缓存机制
|
|
|
|
### 用户体验
|
|
|
|
- **预加载**: 关键资源的预加载
|
|
- **离线支持**: Service Worker 离线缓存
|
|
- **快速响应**: 乐观更新 + 错误回退
|
|
|
|
## 🔧 配置说明
|
|
|
|
### 主题定制
|
|
|
|
在 `src/uni.scss` 中修改 CSS 变量即可快速定制主题色彩。
|
|
|
|
### 功能开关
|
|
|
|
在各页面组件的 data 中可以配置功能模块的显示/隐藏。
|
|
|
|
### 无障碍设置
|
|
|
|
用户的无障碍偏好会自动保存到本地存储，下次启动时自动恢复。
|
|
|
|
## 📱 支持平台
|
|
|
|
- ✅ H5 (Web)
|
|
- ✅ 微信小程序
|
|
- ✅ 支付宝小程序
|
|
- ✅ iOS App
|
|
- ✅ Android App
|
|
- ✅ 鸿蒙 App
|
|
|
|
## 🏆 项目亮点
|
|
|
|
1. **现代化设计**: 采用最新的 Material Design 3 设计理念
|
|
2. **卓越性能**: 60fps 流畅动画，秒级启动时间
|
|
3. **全面无障碍**: WCAG 2.1 AA 级无障碍访问标准
|
|
4. **智能交互**: 手势操作 + 语音控制支持
|
|
5. **跨平台兼容**: 一套代码，多端部署
|
|
6. **可维护架构**: 模块化设计，易于扩展和维护
|
|
|
|
---
|
|
|
|
_�� 让校园生活更便捷、更智能、更美好！_
|