logo
0
2
WeChat Login

映记 - 后台管理系统 (Admin Portal)

本项目映记后台管理端代码仓库。基于 Vue 3 + TypeScript + Vite + Element Plus 开发,为管理员提供用户管理、内容审核、日志查询及数据统计等功能。

🛠️ 技术栈 (Tech Stack)

✨ 功能模块 (Features)

目前已完成以下核心模块的开发与对接:

  • 🔐 认证与授权 (Authentication)

    管理员登录采用双Token机制实现无感刷新,支持记住我功能。个人中心可查看账户信息、修改密码(邮箱验证码校验)。

  • 📊 数据统计 (Statistics)

    展示今日新增用户量和发帖量,提供近七日用户增长和帖子发布趋势折线图,以及用户地区分布饼图和帖子浏览量Top 10排行榜。

  • 👥 用户管理 (User Management)

    支持多条件实时搜索(昵称、邮箱、注册时间),展示用户详细信息包括帖子数、粉丝数、获赞数等统计数据,提供用户删除功能。

  • 📝 内容审核 (Content Audit)

    核心审核功能包括:按状态Tab分类查看(全部/待审核/已通过/已拒绝)、实时搜索筛选、单个帖子详情预览及审核操作(通过/拒绝/撤回)、查看审核历史记录。支持批量操作(批量通过/拒绝并填写统一原因)和AI智能审核(单个或批量),AI会提供审核建议供管理员选择性采纳。

  • 📋 操作日志 (Operation Logs)

    自动记录管理员的关键操作(用户删除、帖子审核等),支持按操作人、关键词、对象ID、状态、时间范围等多条件筛选,提供实时搜索和Excel批量导出功能。

🚀 快速开始 (Quick Start)

1. 环境准备

确保您的本地环境已安装:

  • Node.js: >= 18.0.0
  • pnpm: >= 8.1.0 (推荐) 或 npm

2. 安装依赖

# 进入项目目录
cd 管理端

# 安装依赖
pnpm install

3. 启动项目

本项目支持 Mock 模式(前端独立开发)和 API 对接模式(连接本地/远程后端)。

方式 A:Mock 模式 (默认)

无需启动后端服务,使用本地 Mock 数据。

pnpm run dev

方式 B:API 对接模式 (生产/联调)

连接真实后端接口。默认连接远程服务器,也可修改 .env.pro 连接本地。

启动命令:

pnpm run dev:pro

启动成功后访问: http://localhost:4000 (默认端口)

4. 构建生产环境

pnpm run build:pro

📂 目录结构 (Directory Structure)

src/
├── api/                    # 后端接口定义 (Axios)
│   ├── content/            # 内容审核模块 (帖子审核、AI审核)
│   ├── log/                # 日志管理模块
│   ├── login/              # 登录认证模块
│   ├── profile/            # 个人中心模块
│   ├── stats/              # 数据统计接口
│   └── user/               # 用户管理模块
├── assets/                 # 静态资源 (图片/图标)
├── axios/                  # Axios封装 (拦截器、配置)
├── components/             # 全局通用组件
├── layout/                 # 页面布局 (侧边栏、顶栏)
├── router/                 # 路由配置
├── store/                  # Pinia 状态管理
├── utils/                  # 工具函数 (日期格式化、权限等)
└── views/                  # 页面视图
    ├── Authorization/      # 用户管理
    │   └── User/           # 用户列表、详情
    ├── Content/            # 内容审核
    │   └── Audit.vue       # 审核列表、详情、批量操作
    ├── Log/                # 日志管理
    │   └── AdminLog.vue    # 操作日志列表、导出
    ├── Login/              # 登录页面
    │   ├── Login.vue       # 登录表单
    │   └── components/     # 登录、注册、找回密码组件
    ├── Personal/           # 个人中心
    │   ├── PersonalCenter.vue    # 个人信息
    │   └── ChangePassword/       # 修改密码
    └── Statistics/         # 数据统计
        ├── Index.vue       # 统计仪表盘
        ├── echarts-data.ts # 图表配置
        └── components/     # PanelGroup等组件

mock/                       # Mock 数据 (开发模式)
├── content/                # 内容审核 Mock
├── log/                    # 日志 Mock
├── user/                   # 用户 Mock
└── ...

🎯 项目亮点 (Highlights)

  • 双Token认证机制: Access Token + Refresh Token实现无感刷新,提升用户体验
  • AI辅助审核: 集成AI内容审核API,支持批量智能审核并提供可选择的建议
  • 实时搜索: 所有列表页面支持防抖实时搜索,提升操作效率
  • 批量操作: 内容审核支持批量通过/拒绝,根据不同Tab智能显示可用操作
  • 操作日志: 自动记录管理员行为,支持Excel导出便于审计追溯
  • 响应式设计: 基于Element Plus组件库,界面简洁美观适配多种屏幕

⚠️ 注意事项 (Notes)

  1. 环境变量: .env.pro 中的 VITE_API_URL 需配置为后端服务地址
  2. 权限控制: 所有API请求自动携带JWT Token,未登录或Token过期会自动跳转登录页

About

No description, topics, or website provided.
3.48 MiB
0 forks2 stars2 branches0 TagREADMEMIT license
Language
Vue55.2%
TypeScript42.8%
JavaScript1.4%
HTML0.4%
Others0.2%