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