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提供准确的移动端开发上下文，确保生成代码完全符合实际项目架构。
5.4 KiB
5.4 KiB
智慧校园 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/ # 我的页面
🎨 设计规范
色彩系统
--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;
间距系统
--spacing-sm: 8px; // 小间距
--spacing-base: 12px; // 基础间距
--spacing-lg: 16px; // 大间距
--spacing-xl: 20px; // 超大间距
圆角系统
--border-radius-sm: 6px;
--border-radius-base: 8px;
--border-radius-lg: 12px;
--border-radius-xl: 16px;
🚀 部署与运行
开发环境
# 安装依赖
npm install
# 启动开发服务器 (H5)
npm run dev:h5
# 启动微信小程序开发
npm run dev:mp-weixin
# 启动 App 开发
npm run dev:app
生产构建
# 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
🏆 项目亮点
- 现代化设计: 采用最新的 Material Design 3 设计理念
- 卓越性能: 60fps 流畅动画，秒级启动时间
- 全面无障碍: WCAG 2.1 AA 级无障碍访问标准
- 智能交互: 手势操作 + 语音控制支持
- 跨平台兼容: 一套代码，多端部署
- 可维护架构: 模块化设计，易于扩展和维护
�� 让校园生活更便捷、更智能、更美好！