all-project/mobile/PROJECT_OVERVIEW.md

智慧校园 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

🏆 项目亮点

1. 现代化设计: 采用最新的 Material Design 3 设计理念
2. 卓越性能: 60fps 流畅动画，秒级启动时间
3. 全面无障碍: WCAG 2.1 AA 级无障碍访问标准
4. 智能交互: 手势操作 + 语音控制支持
5. 跨平台兼容: 一套代码，多端部署
6. 可维护架构: 模块化设计，易于扩展和维护

---

�� 让校园生活更便捷、更智能、更美好！