cfc/zxyj-web/AGENTS.md

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

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

NOTES

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