ClawHub

backend admin develop skill

Prompts

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

Install

openclaw skills install backend-admin-dev-skill

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