LingoPod管理后台是一个基于React + TypeScript开发的Web管理系统,采用Material-UI组件库构建现代化的用户界面。系统主要用于管理音频处理任务、用户账户和系统配置。
- 用户管理
- 用户账户管理(CRUD操作)
- 基于角色的权限控制(管理员/普通用户)
- 用户状态管理(启用/禁用)
- 个人信息设置
- 任务管理
- 音频处理任务创建与监控
- 实时任务状态和进度追踪
- 音频和字幕文件管理
- 支持公开/私有任务设置
- 任务重试和删除操作
- 系统设置
- 系统参数配置
- 配置项实时更新
- 支持配置重置
- 前端技术栈
- 核心框架: React 18
- 开发语言: TypeScript 5.x
- UI组件库: Material-UI v5 (MUI)
- 状态管理: React Hooks
- 路由管理: React Router 6
- 网络请求: Axios
- 日期处理: Day.js
- 构建工具: Vite 5.x
- 项目特点
- 组件化开发
- 类型安全
- 响应式设计
- 实时数据更新
- 权限控制
- 错误处理
- 用户友好的界面
- 布局结构
管理后台
├── 顶部导航栏
│ ├── 系统标题
│ └── 退出登录
├── 侧边栏导航
│ ├── 仪表盘
│ ├── 用户管理(管理员可见)
│ ├── 任务管理
│ ├── 个人信息
│ └── 系统设置(管理员可见)
└── 主内容区
- 目录结构
src/
├── components/ # 组件目录
│ ├── Layout/ # 布局组件
│ └── common/ # 通用组件
├── pages/ # 页面目录
│ ├── Login/ # 登录页面
│ ├── Register/ # 注册页面
│ ├── Dashboard/ # 仪表盘
│ ├── Users/ # 用户管理
│ ├── Tasks/ # 任务管理
│ ├── Profile/ # 个人信息
│ └── Settings/ # 系统设置
├── services/ # API服务
├── hooks/ # 自定义Hooks
├── types/ # TypeScript类型定义
└── utils/ # 工具函数
- 用户名密码登录
- 记住登录状态（Token管理）
- 登录失败限制（429错误处理）
- 注册功能
- 退出登录
- 获取用户信息
- 修改个人昵称
- 修改邮箱地址
- 修改登录密码
- 查看上次登录时间
- 头像上传
- 个人偏好设置
- 用户列表(支持多条件筛选、分页)
- 用户名搜索
- 状态筛选
- 分页显示
- 用户状态管理(启用/禁用)
- 用户删除功能
- 权限控制（仅管理员可访问）
- 用户详情页面
- 导入/导出功能
- 任务列表(支持分页查询)
- 显示任务状态
- 显示任务进度
- 显示任务URL和标题
- 显示音频和字幕文件链接
- 显示创建时间
- 任务筛选
- 状态筛选
- 公开性筛选
- URL搜索
- 标题搜索
- 时间范围筛选
- 任务创建
- 支持URL输入
- 可设置公开/私有状态
- 任务编辑
- 修改标题
- 修改公开性
- 任务文件管理
- 支持音频文件(.mp3)下载
- 支持字幕文件(.srt)下载
- 任务操作
- 支持删除任务
- 支持重试失败任务
- 支持任务状态自动更新
- 复制功能
- 支持复制任务ID
- 支持复制任务URL
- 系统参数配置
- 支持查看所有配置项
- 支持修改配置值
- 支持修改配置类型
- 支持修改配置描述
- 支持重置为默认值
- 实时编辑状态显示
- 日志查看（待实现）
- 资源使用统计（待实现）
- 显示欢迎信息
- 显示用户基本信息
- 用户名/昵称
- 邮箱地址
- 上次登录时间
- 安装依赖:
npm install- 启动开发服务器:
npm run dev- 构建生产版本:
npm run build- 构建项目生成dist目录
- 配置nginx代理
- 设置环境变量
- 启动服务
- Fork项目
- 创建特性分支
- 提交代码
- 发起Pull Request
- 遵循TypeScript类型定义
- 做好错误处理
- 注重代码性能
- 保持文档更新