logo
0
2
WeChat Login
HuangQiye<2023095049@email.szu.edu.cn>
docs: 更新README文档,完善功能描述和项目亮点

映记 - 后台管理系统 (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过期会自动跳转登录页