# 移动端动态路由使用指南

## 📋 概述

本指南介绍如何在uni-app中实现动态路由跳转，无需在`pages.json`中预先配置所有页面路由。

## 🎯 核心特性

### ✅ 主要优势
- **无需预配置**: 页面无需在`pages.json`中预先配置
- **动态跳转**: 支持运行时动态跳转到任意页面
- **智能处理**: 自动处理页面不存在的情况
- **模板生成**: 支持动态生成标准页面模板
- **权限控制**: 集成权限检查机制

### 🔧 技术实现
- **路由管理**: `RouterManager` 统一管理路由跳转
- **模板生成**: `PageGenerator` 生成标准页面模板
- **权限集成**: 与现有权限系统无缝集成
- **错误处理**: 完善的错误处理和用户提示

## 🚀 快速开始

### 1. 基本使用

```javascript
// 在页面中引入路由管理工具
import RouterManager from '@/utils/router';

// 简单跳转
RouterManager.navigateToService('学生信息');

// 带参数跳转
RouterManager.navigateToService('物业报修', {
    params: {
        type: 'urgent',
        category: 'electrical'
    }
});

// 带回调的跳转
RouterManager.navigateToService('场地预约', {
    onSuccess: () => {
        console.log('跳转成功');
    },
    onCreatePage: (serviceName, route) => {
        console.log(`需要创建页面: ${serviceName} -> ${route}`);
    }
});
```

### 2. 在首页中使用

```vue
<template>
    <ServiceItem
        title="学生信息"
        @click="handleServiceClick"
    >
        <template #icon>
            <u-icon name="account" size="24" />
        </template>
    </ServiceItem>
</template>

<script>
import RouterManager from '@/utils/router';

export default {
    methods: {
        handleServiceClick(service) {
            RouterManager.navigateToService(service.title, {
                onSuccess: () => {
                    console.log(`✅ 成功跳转到服务: ${service.title}`);
                },
                onCreatePage: (serviceName, route) => {
                    console.log(`📝 创建页面: ${serviceName} -> ${route}`);
                }
            });
        }
    }
}
</script>
```

## 📁 文件结构

```
mobile/src/utils/
├── router.js              # 路由管理工具
├── page-generator.js      # 页面模板生成器
└── permission.js          # 权限管理（现有）

mobile/src/pages/
├── index/
│   └── index.vue          # 首页（已更新）
├── student/               # 学工管理页面
├── logistics/             # 后勤管理页面
├── recruitment/           # 招生就业页面
├── hr/                    # 人事管理页面
├── finance/               # 财务管理页面
└── system/                # 系统管理页面
```

## 🔧 配置说明

### 1. 路由映射配置

在 `mobile/src/utils/router.js` 中配置服务路由映射：

```javascript
// 服务路由映射配置
const SERVICE_ROUTES = {
    // 学工管理
    'student:info': '/pages/student/info/index',
    'student:dorm': '/pages/student/dorm/index',
    'student:leave': '/pages/student/leave/index',
    // ... 更多路由
};

// 服务名称映射
const SERVICE_NAMES = {
    '学生信息': 'student:info',
    '宿舍管理': 'student:dorm',
    '学生请假': 'student:leave',
    // ... 更多映射
};
```

### 2. 权限配置

在 `mobile/src/utils/page-generator.js` 中配置权限标识：

```javascript
static getPermissionKey(serviceName) {
    const permissionMap = {
        '学生信息': 'student:info',
        '宿舍管理': 'student:dorm',
        '学生请假': 'student:leave',
        // ... 更多权限配置
    };
    
    return permissionMap[serviceName] || 'system:default';
}
```

## 📝 页面模板生成

### 1. 生成列表页面

```javascript
import PageGenerator from '@/utils/page-generator';

// 生成学生信息列表页面模板
const listTemplate = PageGenerator.generateListPage('学生信息', '/pages/student/info/index');
console.log(listTemplate);
```

### 2. 生成表单页面

```javascript
// 生成学生信息表单页面模板
const formTemplate = PageGenerator.generateFormPage('学生信息', '/pages/student/info/form');
console.log(formTemplate);
```

### 3. 自动创建页面

```javascript
// 在路由管理工具中集成页面创建功能
RouterManager.navigateToService('学生信息', {
    onCreatePage: async (serviceName, route) => {
        // 生成页面模板
        const listTemplate = PageGenerator.generateListPage(serviceName, route);
        const formTemplate = PageGenerator.generateFormPage(serviceName, route);
        
        // 这里可以调用API创建页面文件
        // 或者保存到本地文件系统
        console.log('生成的列表页面模板:', listTemplate);
        console.log('生成的表单页面模板:', formTemplate);
    }
});
```

## 🎨 页面模板特性

### 1. 列表页面模板
- ✅ **统一头部**: 渐变背景 + 标题 + 操作按钮
- ✅ **搜索功能**: 关键词搜索 + 重置功能
- ✅ **数据列表**: 支持分页 + 加载更多
- ✅ **操作按钮**: 编辑 + 删除（权限控制）
- ✅ **响应式设计**: 适配不同屏幕尺寸

### 2. 表单页面模板
- ✅ **表单验证**: 完整的输入验证规则
- ✅ **状态管理**: 新增/编辑状态自动切换
- ✅ **API集成**: 自动调用对应的后端接口
- ✅ **用户体验**: 加载状态 + 成功提示

## 🔒 权限控制

### 1. 按钮级权限

```vue
<u-button 
    v-if="hasPermi(['student:info:add'])"
    type="primary" 
    @click="handleAdd"
>
    新增
</u-button>
```

### 2. 页面级权限

```javascript
// 在页面加载时检查权限
onLoad() {
    if (!this.hasPermi(['student:info:list'])) {
        uni.showToast({
            title: '无访问权限',
            icon: 'none'
        });
        uni.navigateBack();
        return;
    }
    this.loadData();
}
```

## 🚨 错误处理

### 1. 页面不存在处理

```javascript
// 自动检测页面是否存在
RouterManager.navigateToService('学生信息', {
    fail: (error) => {
        // 显示创建页面对话框
        uni.showModal({
            title: '页面不存在',
            content: '学生信息页面尚未创建，是否创建该页面？',
            confirmText: '创建页面',
            cancelText: '取消',
            success: (res) => {
                if (res.confirm) {
                    // 生成页面模板
                    this.createPageTemplate('学生信息', '/pages/student/info/index');
                }
            }
        });
    }
});
```

### 2. 网络错误处理

```javascript
// 在页面模板中自动处理网络错误
async loadData() {
    try {
        const response = await api.get('/student/info/list', { params });
        // 处理成功响应
    } catch (error) {
        console.error('加载数据失败:', error);
        uni.showToast({
            title: '网络错误',
            icon: 'none'
        });
    }
}
```

## 📊 使用统计

### 支持的服务模块

| 模块 | 服务数量 | 状态 |
|------|----------|------|
| 学工管理 | 6个 | ✅ 已配置 |
| 后勤管理 | 6个 | ✅ 已配置 |
| 招生就业 | 3个 | ✅ 已配置 |
| 人事管理 | 3个 | ✅ 已配置 |
| 财务管理 | 3个 | ✅ 已配置 |
| 系统管理 | 6个 | ✅ 已配置 |

### 路由映射统计

- **总路由数**: 27个
- **已配置**: 27个
- **待实现**: 0个
- **覆盖率**: 100%

## 🔄 工作流程

### 1. 用户点击服务卡片
```
用户点击 → 检查权限 → 查找路由 → 执行跳转
```

### 2. 页面不存在处理
```
跳转失败 → 显示对话框 → 用户确认 → 生成模板 → 创建页面
```

### 3. 页面创建流程
```
生成模板 → 保存文件 → 更新路由 → 重新跳转
```

## 🧪 测试验证

### 1. 功能测试

```javascript
// 测试路由跳转
RouterManager.navigateToService('学生信息');

// 测试页面存在性检查
const exists = await RouterManager.checkPageExists('/pages/student/info/index');
console.log('页面是否存在:', exists);

// 测试模板生成
const template = PageGenerator.generateListPage('学生信息', '/pages/student/info/index');
console.log('生成的模板长度:', template.length);
```

### 2. 权限测试

```javascript
// 测试权限检查
const hasPermission = hasPermi(['student:info:list']);
console.log('是否有权限:', hasPermission);
```

## 📚 最佳实践

### 1. 路由命名规范
- 使用小写字母和连字符
- 按模块分组组织
- 保持路径简洁明了

### 2. 权限配置规范
- 使用统一的权限标识格式
- 按功能模块组织权限
- 保持权限粒度适中

### 3. 页面模板规范
- 使用统一的UI组件
- 保持代码结构一致
- 添加完整的错误处理

## 🔮 未来扩展

### 1. 计划功能
- [ ] 在线页面编辑器
- [ ] 模板市场
- [ ] 页面预览功能
- [ ] 批量页面生成

### 2. 技术优化
- [ ] 路由缓存机制
- [ ] 页面懒加载
- [ ] 性能监控
- [ ] 错误追踪

---

## 📞 联系方式

如有问题或建议，请联系开发团队或查看项目仓库的 Issues。

---

**📝 维护**: 移动端动态路由使用指南  
**🔄 更新**: 2025-01-26  
**📁 文件**: `docs/开发文档/移动端动态路由使用指南.md`