# 智慧校园 UniApp 项目

基于 UniApp + Vue3 + uView-plus 的跨平台智慧校园应用。

## 技术栈

-   **框架**: UniApp + Vue3
-   **UI 组件库**: uView-plus
-   **代码规范**: ESLint
-   **样式**: SCSS
-   **不使用**: TypeScript

## 支持平台

-   微信小程序
-   H5
-   iOS App
-   Android App
-   其他小程序平台

## 项目结构

```
src/
├── pages/                  # 页面目录
│   ├── index/             # 首页
│   ├── workbench/         # 办公中心
│   └── profile/           # 我的
├── utils/                 # 工具函数
│   ├── request.js         # API请求工具
│   ├── sse.js            # SSE实时数据工具
│   └── device.js         # 设备兼容性工具
├── static/               # 静态资源
├── App.vue              # 应用入口
├── main.js              # 项目入口
├── pages.json           # 页面配置
└── uni.scss            # 全局样式
```

## 核心功能

### 1. 底部导航

-   首页：展示校园服务快捷入口
-   办公中心：办公应用和功能
-   我的：个人信息和设置

### 2. 数据管理

-   RESTful API 接口
-   智能缓存策略（支持过期时间）
-   SSE 实时数据推送（H5 环境使用原生 EventSource，小程序环境使用轮询）

### 3. 设备兼容性

-   低端设备检测和性能优化
-   网络环境自适应（2G/3G/4G/5G/WiFi）
-   刘海屏、折叠屏适配
-   安全区域处理

## 开发命令

```bash
# 安装依赖
npm install

# H5开发
npm run dev:h5

# 微信小程序开发
npm run dev:mp-weixin

# Android开发
npm run dev:app-android

# iOS开发
npm run dev:app-ios

# 代码检查
npm run lint

# 代码自动修复
npm run lint:fix
```

## 构建命令

```bash
# H5构建
npm run build:h5

# 微信小程序构建
npm run build:mp-weixin

# App构建
npm run build:app
```

## 开发规范

### 代码风格

-   使用 2 个空格缩进
-   使用单引号
-   不使用分号
-   组件名使用 PascalCase
-   文件名使用 kebab-case

### 目录规范

-   页面组件放在 `pages/` 目录
-   通用组件放在 `components/` 目录
-   工具函数放在 `utils/` 目录
-   静态资源放在 `static/` 目录

## API 使用示例

```javascript
import { api, storage } from '@/utils/request';

// 发起请求
const data = await api.getUserInfo();

// 设置缓存（30分钟过期）
storage.set('userInfo', data, 30 * 60);

// 获取缓存
const cachedData = storage.get('userInfo');
```

## SSE 实时数据示例

```javascript
import { messageManager } from '@/utils/sse';

// 连接实时消息
messageManager.connect('userId123');

// 订阅消息
messageManager.subscribe('notification', (data) => {
    console.log('收到通知:', data);
});

// 断开连接
messageManager.disconnect();
```

## 设备适配示例

```javascript
import { deviceUtils, adaptUtils } from '@/utils/device';

// 检测设备类型
const deviceType = deviceUtils.getDeviceType();

// 获取安全区域样式
const safeAreaStyle = adaptUtils.getSafeAreaStyle();

// 判断是否为低端设备
const isLowEnd = deviceUtils.isLowEndDevice();
```

## 注意事项

1. **图标资源**: 当前底部导航使用文字显示，实际开发时需要替换为对应的图标文件
2. **API 地址**: 请在 `utils/request.js` 中配置正确的后端 API 地址
3. **SSE 服务**: SSE 功能需要后端支持，在小程序环境会自动降级为轮询
4. **权限配置**: 使用定位、相机等原生功能时需要在 `manifest.json` 中配置相应权限

## 下一步开发

1. 根据设计原型完善页面 UI
2. 接入后端 API 接口
3. 添加具体业务功能模块
4. 配置推送、定位等原生能力
5. 添加图标资源文件
6. 完善错误处理和用户反馈