# 智慧校园 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. **可维护架构**: 模块化设计，易于扩展和维护

---

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