功能描述

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

使用说明 (SKILL.md)

Project Portal 后台管理系统 - Skill 文件

Name: backend admin develop skill
Author: 258468639

项目概述

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

数据库设计

核心数据表

users：用户表（存储用户基本信息）
roles：角色表（存储角色和权限）
role_menus：角色菜单关联表
menus：菜单表（存储系统菜单）
projects：项目表（存储项目信息）
project_members：项目成员表
news：动态表（存储项目动态）
categories：分类表
settings：设置表
operation_logs：操作日志表
login_logs：登录日志表

API 接口规范

通用规范

基础 URL：/api
认证方式：Bearer Token（Header: Authorization）
响应格式：JSON
状态码：200（成功）、400（请求错误）、401（未认证）、403（无权限）、404（不存在）、500（服务器错误）

主要接口分组

动态管理：/api/news/*
分类管理：/api/categories/*
项目管理：/api/projects/*
用户管理：/api/users/*
角色管理：/api/roles/*
菜单管理：/api/menus/*
系统设置：/api/settings/*
日志管理：/api/logs/*
文件上传：/api/upload/*
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 注入：使用参数化查询

扩展建议

存储扩展：支持阿里云 OSS、腾讯云 COS 等云存储
消息通知：集成邮件、短信通知功能
工作流：添加审批流程
数据分析：增加数据报表和统计功能
移动端：开发移动端适配或小程序
性能优化：
- 图片压缩和 CDN 加速
- 数据库索引优化
- 缓存机制（Redis）
- 前端性能优化（代码分割、懒加载）

安全使用建议

This is a documentation-only skill for building a backend admin system and is internally consistent. It does not request credentials or install code by itself, so installing the skill is low-risk from a supply-chain perspective. Before you use the design or run any code derived from it, review and fix the security recommendations: do NOT store passwords with raw SHA256 (use bcrypt/argon2 with salt), avoid storing long-lived tokens in localStorage (prefer httpOnly secure cookies or short-lived tokens with refresh), enforce server-side validation and anti-virus scanning for uploads, scope and rotate S3 credentials (use least-privilege IAM roles where possible), enable HTTPS/CORS/rate-limiting, and validate/limit file types/sizes. Also confirm that no tool or script you run later will ask you to paste S3_ACCESS_KEY / S3_SECRET_KEY or other secrets into an untrusted UI. If you want more assurance, request the actual implementation code for a security review before deploying to production.

功能分析

Type: OpenClaw Skill Name: backend-admin-dev-skill Version: 1.0.0 The skill bundle consists of metadata and a comprehensive project overview (SKILL.md) for a 'Project Portal' management system. The documentation describes standard administrative features, technical stacks (Vue 3, Flask), and database schemas without any evidence of malicious intent, prompt injection, or suspicious execution patterns.

能力评估

✓ Purpose & Capability

The name/description (backend admin development) matches the SKILL.md content: a design/implementation guide for RBAC, projects, image upload, S3 integration, etc. The skill is instruction-only and requests no binaries or credentials in the registry metadata, which is consistent with a documentation/specification artifact.

ℹ Instruction Scope

The SKILL.md is purely descriptive and does not instruct an agent to read local files, environment variables, or external endpoints at runtime. However, it recommends implementation choices that are security-relevant (e.g., using SHA256 for password storage and storing auth tokens in localStorage). Those are implementation guidance issues (insecure practices) rather than scope creep, but they should be corrected in any real implementation.

✓ Install Mechanism

No install spec and no code files are present, so nothing will be written to disk or executed by installing the skill. This is the lowest-risk install profile and it aligns with the skill being a documentation/spec file.

ℹ Credentials

The registry metadata declares no required env vars or credentials, but the SKILL.md documents deployment environment variables (S3_ENDPOINT, S3_ACCESS_KEY, S3_SECRET_KEY, S3_BUCKET, DATABASE_PATH, etc.). That is expected for a deployment guide, but those S3 credentials are sensitive — the skill itself does not request them, so be cautious about any later step or tool that asks you to supply keys.

✓ Persistence & Privilege

always is false, no install, and the skill doesn't request persistent agent privileges or modify other skills. Autonomous invocation is allowed (the platform default) but does not increase risk here because the skill contains only static documentation.

版本历史

v1.0.0

Initial release of backend-admin-dev-skill. - Introduces Project Portal, a project management backend system based on Vue 3 + Flask. - Implements RBAC permissions, multi-project management, user/role/menu management. - Integrates image upload management, rich text editing, and S3-compatible storage (with independent Flask S3 server). - Provides dynamic content (news) and category management, system settings, and logs. - Offers Docker deployment examples and API grouping; security and naming best practices documented.

元数据

Slug backend-admin-dev-skill

版本 1.0.0

许可证 MIT-0

累计安装 0

当前安装数 0

历史版本数 1

常见问题

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... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 126 次。

如何安装 backend admin develop skill？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install backend-admin-dev-skill」即可一键安装，无需额外配置。

backend admin develop skill 是免费的吗？

是的，backend admin develop skill 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

backend admin develop skill 支持哪些平台？

backend admin develop skill 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 backend admin develop skill？

由 zengkang（@258468639）开发并维护，当前版本 v1.0.0。

backend admin develop skill