backend admin develop skill

Develop and manage backend admin features including RBAC, multi-projects, image upload with S3 integration, dynamic content, system settings, and secure toke...

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）
   • 前端性能优化（代码分割、懒加载）