name: 管理端前端说明

description: 管理端前端开发skill说明

管理端前端说明

0. 自动触发说明

0.1 触发条件

0.1.1 操作触发

文件浏览时: 当浏览管理端前端相关目录时自动调用
- 打开 public/admin/ 目录时触发
- 打开前端组件目录时触发
- 浏览前端代码文件时触发
文件操作时: 当对管理端前端文件进行操作时自动调用
- 创建新前端文件时触发
- 修改前端组件时触发
- 删除前端文件时触发
目录操作时: 当对管理端前端目录进行操作时自动调用
- 创建新前端目录时触发
- 重命名前端目录时触发
- 删除前端目录时触发

0.1.2 内容触发

关键词触发: 当文件内容包含以下关键词时自动调用
- 管理端关键词: 管理端、后台、admin、后台管理
- 前端关键词: 前端、Vue、组件、页面、路由
- 功能关键词: 登录、权限、菜单、dashboard、统计
代码触发: 当查看特定类型前端代码时自动调用
- Vue 组件代码 (*.vue)
- 前端路由代码 (router)
- 前端状态管理代码 (store)
- 前端 API 调用代码 (api)

0.1.3 命令触发

终端命令触发: 当执行以下命令时自动调用
- npm run dev (启动开发服务器)
- npm run build (构建前端项目)
- npm run lint (代码检查)
- vue 相关命令

0.2 适用场景

0.2.1 核心场景

管理端开发: 开发管理端前端功能时
组件开发: 创建或修改管理端组件时
页面开发: 开发管理端页面时
功能集成: 集成新功能到管理端时

0.2.2 辅助场景

前端调试: 调试管理端前端问题时
性能优化: 优化管理端前端性能时
样式调整: 调整管理端界面样式时
权限配置: 配置管理端权限时

0.3 触发机制

0.3.1 调用时机

实时触发: 前端文件操作时立即触发
延迟触发: 复杂前端构建时延迟1秒触发
批量触发: 批量前端文件操作时合并触发

0.3.2 调用频率

文件浏览: 最多每10秒触发一次
文件操作: 最多每5秒触发一次
命令执行: 最多每3秒触发一次

0.3.3 调用优先级

优先级等级: 中优先级 (3/5)
竞争处理: 当多个技能同时触发时
- 最高优先级: 系统核心技能
- 高优先级: 代码结构技能
- 中等优先级: 管理端前端技能、文档规范技能
- 低优先级: 辅助工具技能
触发限制: 仅在管理端前端相关操作时被触发，不影响其他技能的正常使用

0.4 触发后行为

0.4.1 自动分析

结构分析: 分析管理端前端目录结构
组件分析: 分析前端组件依赖关系
路由分析: 分析前端路由配置
性能分析: 分析前端性能瓶颈

0.4.2 自动展示

目录结构: 展示管理端前端目录结构
组件说明: 展示核心组件功能说明
技术栈: 展示管理端前端技术栈
开发规范: 展示前端开发规范

0.4.3 自动建议

开发建议: 提供管理端前端开发建议
优化建议: 提供前端性能优化建议
规范建议: 提供代码规范遵循建议
安全建议: 提供前端安全防护建议

1. 管理端前端架构

1.1 整体架构

单页应用: 基于 Vue 2.x 的单页应用
前后端分离: 与后端通过 RESTful API 交互
模块化设计: 功能模块化，易于扩展
响应式布局: 适配不同屏幕尺寸

1.2 技术栈

核心框架: Vue 2.x
UI 组件库: Element UI
状态管理: Vuex
路由管理: Vue Router
HTTP 客户端: Axios
构建工具: Webpack
包管理器: npm/yarn
代码规范: ESLint + Prettier

1.3 目录结构

1.3.1 核心目录

public/admin/
├── index.html           # 入口 HTML 文件
├── static/              # 静态资源
│   ├── css/             # 样式文件
│   ├── js/              # JavaScript 文件
│   └── img/             # 图片资源
├── favicon.ico          # 网站图标
└── manifest.json        # PWA 配置文件

1.3.2 源代码目录 (src)

src/
├── api/                 # API 接口定义
├── assets/              # 静态资源
├── components/          # 公共组件
├── layout/              # 布局组件
├── pages/               # 页面组件
├── router/              # 路由配置
├── store/               # 状态管理
├── utils/               # 工具函数
├── directive/           # 自定义指令
├── filters/             # 自定义过滤器
├── mixins/              # 混合器
├── App.vue              # 根组件
└── main.js              # 入口文件

2. 核心模块

2.1 登录认证模块

功能: 用户登录、权限验证、会话管理
关键组件: Login.vue、Auth.vue
核心功能:
- 用户名密码登录
- 验证码验证
- 记住密码
- 登录状态管理
- 权限令牌管理

2.2 菜单导航模块

功能: 管理端菜单展示、权限控制、路由导航
关键组件: Sidebar.vue、Topbar.vue
核心功能:
- 动态菜单生成
- 菜单权限控制
- 面包屑导航
- 标签页管理
- 菜单折叠/展开

2.3 仪表盘模块

功能: 系统概览、数据统计、关键指标展示
关键组件: Dashboard.vue、Statistics.vue
核心功能:
- 销售数据统计
- 订单数据统计
- 用户数据统计
- 商品数据统计
- 系统状态监控

2.4 用户管理模块

功能: 管理员账号管理、权限分配、角色管理
关键组件: UserList.vue、RoleList.vue、PermissionList.vue
核心功能:
- 用户增删改查
- 角色管理
- 权限分配
- 密码重置
- 登录日志查看

2.5 系统设置模块

功能: 系统配置、参数设置、数据备份
关键组件: SystemConfig.vue、Backup.vue
核心功能:
- 系统基本设置
- 支付配置
- 邮件配置
- 短信配置
- 数据备份/恢复

3. 技术特点

3.1 组件化开发

可复用组件: 封装常用 UI 组件
组件通信: Props/Events、Vuex、EventBus
组件生命周期: 合理使用生命周期钩子
组件命名规范: 遵循 PascalCase 命名

3.2 状态管理

Vuex 模块化: 按功能模块划分 store
状态持久化: 使用 localStorage/sessionStorage
异步操作: 使用 Actions 处理异步请求
getters: 派生状态计算

3.3 路由管理

动态路由: 根据权限生成路由
路由守卫: 全局/局部路由守卫
路由懒加载: 提高首屏加载速度
嵌套路由: 实现复杂页面结构

3.4 API 调用

Axios 封装: 统一 API 调用方式
请求拦截器: 添加认证令牌
响应拦截器: 统一错误处理
API 模块化: 按功能模块划分 API

4. 开发规范

4.1 代码规范

Vue 风格指南: 遵循 Vue 官方风格指南
ESLint 规则: 严格遵循 ESLint 规则
代码缩进: 4空格缩进
命名规范:
- 组件名: PascalCase
- 方法/变量: camelCase
- 常量: 全大写
- 文件名: kebab-case 或 PascalCase

4.2 目录规范

4.3 命名规范

组件命名: 使用语义化的组件名称
路由命名: 与页面组件名称对应
store 命名: 与功能模块名称对应
API 命名: 与后端接口名称对应

4.4 注释规范

组件注释: 组件功能、props、events 说明
方法注释: 方法功能、参数、返回值说明
复杂逻辑注释: 关键逻辑步骤说明
TODO 注释: 待完成功能标记

5. 性能优化

5.1 加载优化

路由懒加载: 按需加载页面组件
组件懒加载: 按需加载大型组件
图片优化: 图片压缩、懒加载
资源压缩: JS/CSS 压缩
CDN 加速: 静态资源使用 CDN

5.2 渲染优化

虚拟列表: 长列表使用虚拟滚动
计算属性缓存: 使用 computed 缓存计算结果
避免频繁更新: 使用 v-once、v-memo
合理使用 key: 列表渲染时使用唯一 key
减少 DOM 操作: 批量更新 DOM

5.3 网络优化

API 请求合并: 合并相同请求
请求缓存: 缓存重复请求结果
防抖节流: 优化频繁触发的事件
WebSocket: 实时数据使用 WebSocket
HTTP/2: 启用 HTTP/2 协议

5.4 构建优化

Tree Shaking: 移除未使用的代码
代码分割: 按路由分割代码
预加载: 预加载关键资源
环境变量: 区分开发/生产环境

6. 安全防护

6.1 XSS 防护

输入验证: 验证用户输入
输出编码: 对输出进行 HTML 编码
CSP: 配置内容安全策略
Vue 自动转义: 利用 Vue 的 HTML 转义功能

6.2 CSRF 防护

Token 验证: 使用 CSRF Token
同源策略: 遵循浏览器同源策略
请求头验证: 验证请求来源

6.3 权限控制

前端权限验证: 路由权限控制
后端权限验证: 接口权限验证
按钮级别权限: 细粒度权限控制
敏感操作验证: 重要操作二次确认

6.4 数据安全

敏感数据加密: 加密存储敏感信息
本地存储安全: 合理使用 localStorage
API 接口安全: HTTPS、接口签名

7. 最佳实践

7.1 开发流程

需求分析: 明确功能需求
设计阶段: 设计页面结构和组件
编码实现: 遵循开发规范编码
测试验证: 功能测试和性能测试
代码审查: 代码质量检查
部署上线: 构建和部署

7.2 组件开发

单一职责: 组件功能单一
可配置性: 组件参数可配置
文档完善: 组件使用文档
测试覆盖: 组件单元测试

7.3 页面开发

布局规范: 遵循统一布局规范
响应式设计: 适配不同屏幕尺寸
用户体验: 优化交互体验
性能考虑: 页面加载和渲染性能

7.4 调试技巧

Vue DevTools: 使用 Vue 开发工具
控制台调试: 合理使用 console 方法
网络调试: 分析 API 请求和响应
性能分析: 使用浏览器性能分析工具

8. 常见问题

8.1 登录问题

令牌过期: 处理令牌过期逻辑
权限不足: 权限验证失败处理
登录状态保持: 持久化登录状态

8.2 路由问题

404 页面: 配置 404 路由
路由重定向: 合理配置路由重定向
路由权限: 动态路由权限控制

8.3 性能问题

首屏加载慢: 优化首屏加载速度
页面卡顿: 优化页面渲染性能
内存泄漏: 避免内存泄漏

8.4 兼容性问题

浏览器兼容: 支持主流浏览器
分辨率兼容: 适配不同分辨率
设备兼容: 适配不同设备

9. 部署与发布

9.1 构建流程

开发环境: npm run dev
测试环境: npm run build:test
生产环境: npm run build:prod

9.2 部署方式

静态部署: 部署到静态文件服务器
容器部署: 使用 Docker 容器部署
CDN 加速: 静态资源使用 CDN

9.3 发布流程

代码提交: 提交代码到版本控制系统
构建测试: 构建并测试
部署上线: 部署到生产环境
监控运行: 监控系统运行状态

10. 开发工具推荐

10.1 IDE 推荐

VS Code: 轻量级编辑器，丰富的插件
WebStorm: 专业的前端 IDE
Sublime Text: 快速的代码编辑器

10.2 插件推荐

Vetur: Vue 开发插件
ESLint: 代码检查插件
Prettier: 代码格式化插件
GitLens: Git 增强插件
Debugger for Chrome: 浏览器调试插件

10.3 工具推荐

Postman: API 测试工具
Charles: 网络调试工具
Figma/Sketch: UI 设计工具
Zeplin: 设计协作工具
Lighthouse: 性能分析工具

11. 参考资源

11.1 官方文档

11.2 学习资源

11.3 社区资源

12. 版本管理

12.1 版本控制

Git: 使用 Git 进行版本控制
分支管理: 主分支、开发分支、功能分支
提交规范: 语义化提交信息

12.2 版本发布

语义化版本: 遵循 SemVer 规范
发布日志: 记录版本变更内容
回滚方案: 版本回滚策略

13. 团队协作

13.1 协作流程

需求评审: 团队评审需求
任务分配: 合理分配开发任务
代码审查: 代码质量检查
测试协作: 开发与测试协作

13.2 规范约定

代码规范: 统一代码风格
命名规范: 统一命名规则
文档规范: 统一文档格式
提交规范: 统一提交信息格式

13.3 工具协作

项目管理: 使用项目管理工具
代码托管: 使用代码托管平台
CI/CD: 持续集成/持续部署
文档协作: 团队文档协作工具

14 其他资源

开发流程文档 /references/development_flow.md
代码规范文档 /references/code_style.md
项目部署文档 /references/deploy.md
目录结构文档 /references/directory_structure.md
接口请求流程文档 /references/api_flow.md
系统配置文档 /references/system_config.md

SKILL.md 14 KB History Raw

description: 管理端前端开发skill说明

管理端前端说明

0. 自动触发说明

0.1 触发条件

0.1.1 操作触发

0.1.2 内容触发

0.1.3 命令触发

0.2 适用场景

0.2.1 核心场景

0.2.2 辅助场景

0.3 触发机制

0.3.1 调用时机

0.3.2 调用频率

0.3.3 调用优先级

0.4 触发后行为

0.4.1 自动分析

0.4.2 自动展示

0.4.3 自动建议

1. 管理端前端架构

1.1 整体架构

1.2 技术栈

1.3 目录结构

1.3.1 核心目录

1.3.2 源代码目录 (src)

2. 核心模块

2.1 登录认证模块

2.2 菜单导航模块

2.3 仪表盘模块

2.4 用户管理模块

2.5 系统设置模块

3. 技术特点

3.1 组件化开发

3.2 状态管理

3.3 路由管理

3.4 API 调用

4. 开发规范

4.1 代码规范

4.2 目录规范

4.3 命名规范

4.4 注释规范

5. 性能优化

5.1 加载优化

5.2 渲染优化

5.3 网络优化

5.4 构建优化

6. 安全防护

6.1 XSS 防护

6.2 CSRF 防护

6.3 权限控制

6.4 数据安全

7. 最佳实践

7.1 开发流程

7.2 组件开发

7.3 页面开发

7.4 调试技巧

8. 常见问题

8.1 登录问题

8.2 路由问题

8.3 性能问题

8.4 兼容性问题

9. 部署与发布

9.1 构建流程

9.2 部署方式

9.3 发布流程

10. 开发工具推荐

10.1 IDE 推荐

10.2 插件推荐

10.3 工具推荐

11. 参考资源

11.1 官方文档

11.2 学习资源

11.3 社区资源

12. 版本管理

12.1 版本控制

12.2 版本发布

13. 团队协作

13.1 协作流程

13.2 规范约定

13.3 工具协作

SKILL.md 14 KB

History Raw