# zxyj-web

Vue.js 2 Web管理端，Element UI组件库，用于后台管理。

## WHERE TO LOOK

| Task | Location | Notes |
|------|----------|-------|
| 页面组件 | `src/views/` | 管理界面页面组件 |
| API调用 | `src/api/` | 后端API接口封装 |
| 路由配置 | `src/router/` | Vue Router配置 |
| 工具函数 | `src/utils/` | 通用工具函数 |
| 状态管理 | `src/store/` | Vuex状态管理 |
| 公共组件 | `src/components/` | 可复用UI组件 |

## STRUCTURE

```
src/
├── views/           # 页面视图组件
│   ├── dashboard/   # 仪表板
│   ├── task/        # 任务管理
│   ├── reward/      # 奖励管理
│   ├── user/        # 用户管理
│   └── system/      # 系统设置
├── api/             # API接口
├── router/          # 路由配置
├── store/           # Vuex状态
├── utils/           # 工具函数
└── components/      # 公共组件
```

## CONVENTIONS

- **Vue 2:** 使用 Composition API (setup语法)
- **UI框架:** Element UI组件库
- **状态管理:** Vuex进行全局状态管理
- **路由:** Vue Router，路由守卫处理权限
- **API封装:** 使用axios，统一错误处理和拦截器
- **权限控制:** 基于角色(admin/teacher)的菜单权限

## ANTI-PATTERNS

- **DO NOT** 在组件中直接调用axios，使用api目录的封装
- **DO NOT** 硬编码API地址，使用环境变量配置
- **DO NOT** 在前端处理敏感业务逻辑
- **NEVER** 跳过权限检查直接访问受保护路由
- **NEVER** 在前端存储管理员凭证

## UNIQUE FEATURES

- 管理员仪表板: 数据统计和系统概览
- 任务审核界面: 批量审核任务功能
- 用户角色管理: 管理员/指导师权限分配
- 街道统计: 家庭和指导师的街道分布统计

## COMMANDS

```bash
npm install          # 安装依赖
npm run serve        # 开发模式 (localhost:8082)
npm run build        # 生产构建
```

## NOTES

- 开发端口: 8082 (避免与后端8080冲突)
- 后端地址: 配置在环境变量中
- 权限系统: 基于JWT token和角色权限
- Element UI: 使用最新稳定版本，注意兼容性