Skill: 258468639/backend-admin-dev-skill (version 1.0.0)

# Project Portal 后台管理系统 - Skill 文件 ## 项目概述 Project Portal 是一个基于 Vue 3 + Flask 的项目动态管理系统，具备完整的 RBAC 权限管理、多项目管理、图片上传管理和 S3 存储集成等功能。 ## 核心功能模块 ### 1. RBAC 权限管理系统 #### 1.1 角色管理 (Role Management) - **功能点**： - 创建/编辑/删除角色 - 角色权限分配（支持细粒度权限控制） - 权限包含：动态管理、分类管理、用户管理、角色管理、菜单管理、系统设置、系统日志 - **前端实现**：`frontend/src/views/admin/RoleList.vue` - **后端 API**：`/api/roles` - **数据库表**：`roles`（角色表）、`role_menus`（角色菜单关联表） #### 1.2 用户管理 (User Management) - **功能点**： - 用户 CRUD 操作 - 角色分配 - 密码重置 - 用户状态管理（启用/禁用） - 用户搜索和筛选 - **前端实现**：`frontend/src/views/admin/UserList.vue` - **后端 API**：`/api/users` - **数据库表**：`users`（用户表） #### 1.3 菜单管理 (Menu Management) - **功能点**： - 菜单 CRUD 操作 - 菜单权限分配（支持树形结构） - 菜单排序 - 支持多级菜单 - **前端实现**：`frontend/src/views/admin/MenuList.vue`、`frontend/src/views/admin/MenuAuthModal.vue` - **数据库表**：`menus`（菜单表） ### 2. 多项目管理系统 #### 2.1 项目管理 (Project Management) - **功能点**： - 项目 CRUD 操作 - 项目基本信息管理（名称、编码、描述、封面） - 项目状态管理（进行中/已结束） - 项目负责人分配 - 项目起止日期管理 - 项目看板功能（支持 iframe 嵌入外部看板） - 项目搜索和筛选 - **前端实现**：`frontend/src/views/admin/ProjectList.vue`、`frontend/src/views/admin/ProjectForm.vue` - **后端 API**：`/api/projects` - **数据库表**：`projects`（项目表） #### 2.2 项目成员管理 (Project Members) - **功能点**： - 项目成员分配 - 成员角色权限管理（项目经理/开发人员/测试人员/普通成员） - 成员添加/移除 - **前端实现**：内嵌在 ProjectForm.vue 中 - **数据库表**：`project_members`（项目成员表） ### 3. 图片上传管理系统 #### 3.1 图片选择器 (Image Selector) - **功能点**： - 图片库浏览（支持网格和列表两种视图） - 目录树导航（支持多级目录） - 图片搜索功能 - 图片上传（支持拖拽上传） - 图片选择（支持单选） - 自动刷新和加载 - **前端实现**：`frontend/src/components/ImageSelector.vue` - **组件**：`frontend/src/components/DirectoryTreeNode.vue`（目录树节点） - **后端 API**：`/api/s3/images` #### 3.2 富文本编辑器集成 - **功能点**： - 基于 wangEditor 的富文本编辑器 - 自定义图片插入按钮 - 附件上传功能（支持 PDF、Word、Excel） - 实时预览功能 - **前端实现**：`frontend/src/views/admin/NewsForm.vue` ### 4. S3 存储系统集成 #### 4.1 S3 存储服务 - **架构**：独立的 Flask 服务（端口 5050） - **功能点**： - 文件上传和下载 - 存储桶管理（创建、删除、重命名） - 目录管理（创建、删除） - 文件预览和下载 - Web 管理界面 - S3 兼容 API（支持 AWS SDK） - **实现文件**：`backend/s3/s3_server.py` - **认证模块**：`backend/s3/auth.py` - **认证配置**：`backend/s3/auth.json` #### 4.2 文件上传 API - **上传接口**：`/api/upload/image` - **功能点**： - 支持图片和附件上传 - 文件大小限制（最大 20MB） - 支持多种格式（图片、PDF、Word、Excel） - 超时处理（30 秒） - 错误处理机制 #### 4.3 文件代理服务 - **代理接口**：`/api/s3-image/{object_key}` - **功能**：直接代理访问 S3 存储中的文件 ### 5. 动态内容管理 #### 5.1 项目动态管理 (News Management) - **功能点**： - 动态 CRUD 操作 - 富文本内容编辑 - 封面图片设置 - 分类管理 - 置顶/热门标记 - 发布时间设置 - 所属项目管理 - 预览功能 - **前端实现**：`frontend/src/views/admin/NewsList.vue`、`frontend/src/views/admin/NewsForm.vue` - **后端 API**：`/api/news` - **数据库表**：`news`（动态表） #### 5.2 分类管理 (Category Management) - **功能点**： - 分类 CRUD 操作 - 分类使用统计 - **前端实现**：`frontend/src/views/admin/CategoryList.vue` - **数据库表**：`categories`（分类表） ### 6. 系统管理 #### 6.1 系统设置 (Settings) - **功能点**： - 网站基本信息设置（标题、描述、关键词） - 联系信息设置（邮箱、电话） - Logo 上传和设置 - **前端实现**：`frontend/src/views/admin/Settings.vue` - **数据库表**：`settings`（设置表） #### 6.2 系统日志 (Logs) - **功能点**： - 操作日志查询 - 登录日志查询 - 日志详情查看 - **前端实现**：`frontend/src/views/admin/LogList.vue` - **数据库表**：`operation_logs`（操作日志表）、`login_logs`（登录日志表） ### 7. 认证与授权 #### 7.1 登录认证 - **实现方式**： - Token-based 认证（Bearer Token） - 本地存储 Token（localStorage） - 路由守卫保护后台页面 - **前端实现**：`frontend/src/views/Login.vue` - **路由守卫**：`frontend/src/router/index.js` #### 7.2 权限控制 - **实现方式**： - 基于角色的访问控制（RBAC） - 菜单级权限控制 - 操作权限校验 - **权限数据**：存储在 `roles` 表的 `permissions` 字段 ## 技术架构 ### 前端技术栈 - **框架**：Vue 3 + Vite - **UI 组件库**：Arco Design Vue - **路由管理**：Vue Router 4 - **富文本编辑器**：wangEditor - **轮播组件**：Swiper - **状态管理**：Composition API - **构建工具**：Vite ### 后端技术栈 - **框架**：Flask 3.0.0 - **数据库**：SQLite（开发）/ MySQL（生产建议） - **跨域支持**：Flask-CORS - **文件存储**：S3 兼容存储服务 - **认证方式**：Token-based 认证 ### S3 存储服务 - **服务类型**：独立的 Flask 应用 - **存储方式**：本地文件系统（目录结构模拟） - **认证方式**：用户名/密码认证 - **API 兼容性**：兼容 AWS S3 API - **管理界面**：完整的 Web UI ## 数据库设计 ### 核心数据表 1. **users**：用户表（存储用户基本信息） 2. **roles**：角色表（存储角色和权限） 3. **role_menus**：角色菜单关联表 4. **menus**：菜单表（存储系统菜单） 5. **projects**：项目表（存储项目信息） 6. **project_members**：项目成员表 7. **news**：动态表（存储项目动态） 8. **categories**：分类表 9. **settings**：设置表 10. **operation_logs**：操作日志表 11. **login_logs**：登录日志表 ## API 接口规范 ### 通用规范 - **基础 URL**：`/api` - **认证方式**：Bearer Token（Header: Authorization） - **响应格式**：JSON - **状态码**：200（成功）、400（请求错误）、401（未认证）、403（无权限）、404（不存在）、500（服务器错误） ### 主要接口分组 1. **动态管理**：`/api/news/*` 2. **分类管理**：`/api/categories/*` 3. **项目管理**：`/api/projects/*` 4. **用户管理**：`/api/users/*` 5. **角色管理**：`/api/roles/*` 6. **菜单管理**：`/api/menus/*` 7. **系统设置**：`/api/settings/*` 8. **日志管理**：`/api/logs/*` 9. **文件上传**：`/api/upload/*` 10. **S3 存储**：`/api/s3/*` ## 部署配置 ### Docker 部署 - **S3 服务**：独立容器（端口 5050） - **后端 API**：Flask 应用（端口 5002） - **前端**：Nginx 静态服务（端口 3000） - **数据卷**：s3_data、backend_data ### 环境变量 - **S3 配置**：S3_ENDPOINT、S3_ACCESS_KEY、S3_SECRET_KEY、S3_BUCKET - **数据库**：DATABASE_PATH - **前端 API**：VITE_API_BASE_URL ## 开发规范 ### 代码组织 - **前端**：按功能模块组织（views、components、composables） - **后端**：API 路由按功能分组 - **数据库**：表结构清晰，外键约束完整 ### 命名规范 - **文件**：CamelCase（Vue 组件）、kebab-case（普通 JS） - **API**：RESTful 风格 - **数据库**：小写 + 下划线分隔 ### 安全规范 - **密码加密**：SHA256 加密存储 - **认证**：Token-based 认证 - **文件上传**：类型和大小限制 - **SQL 注入**：使用参数化查询 ## 扩展建议 1. **存储扩展**：支持阿里云 OSS、腾讯云 COS 等云存储 2. **消息通知**：集成邮件、短信通知功能 3. **工作流**：添加审批流程 4. **数据分析**：增加数据报表和统计功能 5. **移动端**：开发移动端适配或小程序 6. **性能优化**： - 图片压缩和 CDN 加速 - 数据库索引优化 - 缓存机制（Redis） - 前端性能优化（代码分割、懒加载）


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)