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.vuefrontend/src/views/admin/MenuAuthModal.vue
  • 数据库表menus(菜单表)

2. 多项目管理系统

2.1 项目管理 (Project Management)

  • 功能点
    • 项目 CRUD 操作
    • 项目基本信息管理(名称、编码、描述、封面)
    • 项目状态管理(进行中/已结束)
    • 项目负责人分配
    • 项目起止日期管理
    • 项目看板功能(支持 iframe 嵌入外部看板)
    • 项目搜索和筛选
  • 前端实现frontend/src/views/admin/ProjectList.vuefrontend/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.vuefrontend/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)
    • 前端性能优化(代码分割、懒加载)