account_tree0. 架构图

OP后台系统架构图

folder_special1. 项目结构设计

  • 📁op-admin-system/
    • 📁backend/# FastAPI 后端
      • 📁app/
        • 📁api/# API路由
        • 📁core/# 核心配置
        • 📁models/# SQLAlchemy模型
        • 📁schemas/# Pydantic schemas
        • 📁services/# 业务逻辑
      • 📁alembic/# 数据库迁移
      • 📄main.py
    • 📁frontend/# React 前端
      • 📁src/
        • 📁api/# API调用层
        • 📁components/# 公共组件
        • 📁pages/# 页面
        • 📁hooks/# 自定义hooks
        • 📁store/# 状态管理
      • 📄package.json

storage2. 数据库表设计 (扩展现有表)

2.1 用户封禁相关表

SQL DDL for Ban Records...

2.2 Meme审核相关表

SQL DDL for Meme Review...

2.3 Post权重管理

SQL DDL for Post Weighting...

2.4 客服支持相关表

SQL DDL for Support Sessions...

dns3. FastAPI后端核心实现

3.1 主要依赖 (requirements.txt)

fastapi==0.109.0
uvicorn[standard]==0.27.0
sqlalchemy==2.0.25
psycopg2-binary==2.9.9
pydantic==2.5.3
pydantic-settings==2.1.0
alembic==1.13.1
python-jose[cryptography]==3.3.0
passlib[bcrypt]==1.7.4
python-multipart==0.0.6
httpx==0.26.0
redis==5.0.1
python-socketio==5.11.0

3.2 核心服务设计

# services/openim_service.py
class OpenIMService:
    async def send_notification(self, user_id: int, message: str)
    async def send_ban_notification(self, user_id: int, reason: str, duration: str)
    async def get_chat_history(self, session_id: str)
    async def send_support_message(self, user_id: int, operator_id: int, message: str)

# services/user_service.py
class UserService:
    async def list_users(self, filters: dict, pagination: dict)
    async def get_user_detail(self, user_id: int)
    async def ban_user(self, user_id: int, ban_data: BanRequest, operator: User)
    async def unban_user(self, user_id: int, operator: User)
    async def search_users(self, query: str, fields: list)

# services/meme_service.py
class MemeService:
    async def list_pending_memes(self, pagination: dict)
    async def approve_meme(self, meme_id: int, operator: User)
    async def reject_meme(self, meme_id: int, reason: str, operator: User)

# services/support_service.py
class SupportService:
    async def get_pending_sessions(self)
    async def assign_session(self, session_id: int, operator_id: int)
    async def close_session(self, session_id: int)
    async def get_quick_replies(self, operator_id: int)
    async def send_message(self, session_id: int, message: str)

3.3 WebSocket实时通信

使用 python-socketio 实现客服实时聊天,关键点包括:

  • 客服端监听新消息事件。
  • 多个运营人员协作的会话锁定机制。
  • 消息已读/未读状态的实时同步。

web4. React前端核心实现

4.1 主要技术栈

{
  "dependencies": {
    "react": "^18.2.0",
    "react-router-dom": "^6.21.0",
    "antd": "^5.12.0",
    "@tanstack/react-query": "^5.17.0",
    "zustand": "^4.4.7",
    "axios": "^1.6.5",
    "socket.io-client": "^4.6.1",
    "dayjs": "^1.11.10"
  },
  "devDependencies": {
    "typescript": "^5.3.3",
    "@types/react": "^18.2.48",
    "vite": "^5.0.11"
  }
}

4.2 核心页面组件

  • 用户管理页面: 多字段搜索、表格展示、详情抽屉、Ban/Unban操作弹窗。
  • 用户详情页: 用户基本信息、封禁历史、Ban操作表单。
  • Meme审核页: Meme列表展示、Approve/Reject按钮、审核记录查询。
  • Post权重管理: Post列表展示、权重调整、创建Post(URL验证)。
  • 客服支持页: 待处理/已处理会话列表、实时聊天窗口、会话锁定、快捷回复。

4.3 关键功能实现

会话锁定机制

使用Redis实现分布式锁。当运营人员打开一个会话时,向Redis写入一个带超时时间的锁。其他运营人员尝试打开同一会话时,先检查锁是否存在,如存在则提示“会话正在由[XXX]处理中”。关闭会话或浏览器窗口时主动释放锁,超时则自动释放。

实时消息推送

前端通过Socket.IO客户端连接后端WebSocket服务。监听新消息事件,当有新客服会话或新消息时,实时更新待处理列表和消息计数器,并播放提示音。

sync_alt5. OpenIM集成方案

5.1 OpenIM API集成点

{
  "// 发送通知消息": "POST /msg/send_msg",
  "send_msg_payload": {
    "sendID": "admin_system",
    "recvID": "user_id",
    "content": { "text": "您已被封禁,原因:..." }
  },
  "// 获取聊天历史": "GET /msg/get_conversation",
  "// 发送客服消息": "POST /msg/send_msg"
}

5.2 认证集成

在OpenIM管理后台为OP系统创建一个专用的系统账号,生成对应的AccessToken。后端服务在启动时加载此Token,并实现一个定时任务或在API调用失败时触发的逻辑,用于刷新过期的Token。

security6. 安全与权限控制

6.1 管理员认证

6.2 操作审计

创建一个通用的装饰器或中间件,对所有敏感的写操作(如封禁用户、审核Meme)进行拦截,将操作人、时间、IP地址、请求参数等信息记录到 audit_logs 表中。提供一个审计日志查询和导出功能。

cloud_upload7. 部署建议

# docker-compose.yml
services:
  backend:
    build: ./backend
    ports: ["8000:8000"]
    environment:
      - DATABASE_URL=postgresql://user:pass@postgres:5432/db
      - OPENIM_API_URL=http://openim:10002
      - REDIS_URL=redis://redis:6379
      
  frontend:
    build: ./frontend
    ports: ["3000:80"] # 实际部署时用Nginx代理
      
  postgres:
    image: postgres:15
    volumes:
      - pgdata:/var/lib/postgresql/data
      
  redis:
    image: redis:7-alpine
volumes:
  pgdata:

low_priority8. 开发优先级

  1. 第一阶段:基础架构搭建

    项目初始化(FastAPI + React)、数据库表创建和迁移、管理员认证系统。

  2. 第二阶段:用户管理模块

    用户列表和搜索、用户详情、Ban/Unban功能、OpenIM通知集成。

  3. 第三阶段:内容审核模块

    Meme审核列表、审核操作和记录、Post权重管理。

  4. 第四阶段:客服支持模块

    会话管理、实时聊天(WebSocket)、快捷回复、会话锁定机制。

key9. 关键技术点

print arrow_upward