# uvfront **Repository Path**: simpleyy_admin/uvfront ## Basic Information - **Project Name**: uvfront - **Description**: 一个基于 Vue 3 + TypeScript + Element Plus 的现代化音视频文件管理系统，提供完整的媒体文件上传、管理、播放和分析功能。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2025-07-21 - **Last Updated**: 2025-07-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 音视频管理系统 一个基于 Vue 3 + TypeScript + Element Plus 的现代化音视频文件管理系统，提供完整的媒体文件上传、管理、播放和分析功能。 ## ✨ 特性 - 🎬 **媒体管理** - 支持视频和音频文件的上传、预览、编辑和删除 - 🔐 **用户认证** - 完整的登录/注册系统，支持角色权限管理 - 📊 **数据分析** - 丰富的统计图表和数据分析功能 - 🎵 **在线播放** - 内置媒体播放器，支持多种格式 - 📁 **分类管理** - 灵活的分类系统，便于文件组织 - ⚙️ **系统设置** - 可配置的系统参数和用户偏好 - 📱 **响应式设计** - 适配各种屏幕尺寸的现代化界面 - 🚀 **模块化架构** - 清晰的代码结构，易于维护和扩展 ## 🛠️ 技术栈 ### 前端框架 - **Vue 3** - 渐进式 JavaScript 框架 - **TypeScript** - 类型安全的 JavaScript 超集 - **Vite** - 快速的前端构建工具 ### UI 组件库 - **Element Plus** - 基于 Vue 3 的组件库 - **Element Plus Icons** - 图标库 ### 状态管理 - **Pinia** - Vue 3 官方推荐的状态管理库 ### 路由管理 - **Vue Router 4** - Vue.js 官方路由管理器 ### 其他依赖 - **Axios** - HTTP 客户端 - **Day.js** - 轻量级日期处理库 - **ECharts** - 数据可视化图表库 - **Video.js** - HTML5 视频播放器 ## 📦 项目结构 ``` uv-media-manager/ ├── public/ # 静态资源 ├── src/ │ ├── api/ # API 接口 │ │ └── modules/ # 模块化 API │ │ ├── auth.ts # 认证相关 API │ │ ├── media.ts # 媒体文件 API │ │ ├── category.ts # 分类管理 API │ │ └── statistics.ts # 统计数据 API │ ├── components/ # 公共组件 │ │ ├── MediaEditDialog.vue │ │ └── UploadDialog.vue │ ├── router/ # 路由配置 │ │ ├── index.ts # 路由定义 │ │ └── guards.ts # 路由守卫 │ ├── stores/ # 状态管理 │ │ ├── index.ts # Store 入口 │ │ └── modules/ # 模块化 Store │ │ ├── auth.ts # 认证状态 │ │ ├── media.ts # 媒体文件状态 │ │ ├── upload.ts # 上传状态 │ │ └── settings.ts # 设置状态 │ ├── types/ # TypeScript 类型定义 │ │ ├── index.ts # 通用类型 │ │ └── auth.ts # 认证相关类型 │ ├── views/ # 页面组件 │ │ ├── auth/ # 认证相关页面 │ │ │ └── Login.vue # 登录页面 │ │ ├── Analytics.vue # 数据分析 │ │ ├── Categories.vue # 分类管理 │ │ ├── Dashboard.vue # 仪表盘 │ │ ├── Layout.vue # 主布局 │ │ ├── MediaLibrary.vue # 媒体库 │ │ ├── Player.vue # 播放器 │ │ ├── Settings.vue # 系统设置 │ │ └── Upload.vue # 上传管理 │ ├── App.vue # 根组件 │ └── main.ts # 应用入口 ├── index.html # HTML 模板 ├── package.json # 项目配置 ├── tsconfig.json # TypeScript 配置 ├── vite.config.ts # Vite 配置 └── README.md # 项目文档 ``` ![登录](images/登录.png) ![仪表盘](images/仪表盘.png) ![媒体库](images/媒体库.png) ![系统设置](images/系统设置.png) ## 🚀 快速开始 ### 环境要求 - Node.js >= 16.0.0 - npm >= 7.0.0 或 yarn >= 1.22.0 ### 安装依赖 ```bash # 使用 npm npm install # 或使用 yarn yarn install ``` ### 开发环境 ```bash # 启动开发服务器 npm run dev # 或 yarn dev ``` 访问 [http://localhost:3000](http://localhost:3000) 查看应用。 ### 构建生产版本 ```bash # 构建生产版本 npm run build # 或 yarn build ``` ### 预览生产版本 ```bash # 预览构建结果 npm run preview # 或 yarn preview ``` ## 👤 演示账号 系统提供了两个演示账号供测试使用： ### 管理员账号 - **用户名**: `admin` - **密码**: `password` - **权限**: 完整的系统管理权限 ### 普通用户账号 - **用户名**: `user` - **密码**: `password` - **权限**: 基本的媒体文件管理权限 ## 📋 功能模块 ### 1. 用户认证 - ✅ 用户登录/注册 - ✅ 角色权限管理（管理员/普通用户） - ✅ 自动登录状态保持 - ✅ 路由权限控制 ### 2. 仪表盘 - ✅ 系统概览统计 - ✅ 快速操作入口 - ✅ 最近活动时间线 ### 3. 媒体库 - ✅ 文件列表展示（列表/网格视图） - ✅ 搜索和筛选功能 - ✅ 文件预览和播放 - ✅ 文件信息编辑 - ✅ 批量操作支持 ### 4. 上传管理 - ✅ 拖拽上传支持 - ✅ 多文件并发上传 - ✅ 上传进度跟踪 - ✅ 文件格式验证 - ✅ 上传队列管理 ### 5. 分类管理 - ✅ 分类创建/编辑/删除 - ✅ 分类统计信息 - ✅ 分类关联文件管理 ### 6. 数据分析 - ✅ 统计数据展示 - ✅ 图表可视化 - ✅ 热门内容排行 - ✅ 数据导出功能 ### 7. 媒体播放器 - ✅ 视频/音频播放支持 - ✅ 播放控制功能 - ✅ 媒体信息展示 - ✅ 相关推荐列表 ### 8. 系统设置 - ✅ 基本系统配置 - ✅ 存储设置管理 - ✅ 播放器参数配置 - ✅ 安全策略设置 - ✅ 通知系统配置 ## 🔧 配置说明 ### 环境变量 项目支持通过环境变量进行配置： ```bash # API 基础地址 VITE_API_BASE_URL=http://localhost:3001/api # 上传文件大小限制（MB） VITE_MAX_FILE_SIZE=500 # 支持的文件格式 VITE_ALLOWED_FORMATS=mp4,avi,mov,mp3,wav,flac ``` ### Vite 配置 主要配置项在 `vite.config.ts` 中： ```typescript export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') } }, server: { port: 3000, open: true } }) ``` ## 🎨 界面特色 - **现代化设计** - 采用 Element Plus 设计语言 - **渐变色彩** - 丰富的渐变色统计卡片 - **响应式布局** - 适配桌面和移动设备 - **动画效果** - 流畅的交互动画 - **暗色主题** - 专业的侧边栏设计 ## 🔌 API 接口 项目采用模块化的 API 设计，当前使用模拟数据，可轻松替换为真实后端接口： ### 认证接口 - `POST /auth/login` - 用户登录 - `POST /auth/register` - 用户注册 - `POST /auth/logout` - 用户登出 - `GET /auth/profile` - 获取用户信息 ### 媒体文件接口 - `GET /media` - 获取媒体文件列表 - `GET /media/:id` - 获取单个媒体文件 - `PUT /media/:id` - 更新媒体文件 - `DELETE /media/:id` - 删除媒体文件 ### 分类接口 - `GET /categories` - 获取分类列表 - `POST /categories` - 创建分类 - `PUT /categories/:id` - 更新分类 - `DELETE /categories/:id` - 删除分类 ### 统计接口 - `GET /statistics` - 获取统计数据 - `GET /statistics/realtime` - 获取实时统计 ## 🚧 开发指南 ### 添加新功能 1. **创建类型定义** - 在 `src/types/` 中定义相关类型 2. **创建 API 模块** - 在 `src/api/modules/` 中添加 API 接口 3. **创建状态管理** - 在 `src/stores/modules/` 中添加状态管理 4. **创建页面组件** - 在 `src/views/` 中创建页面 5. **配置路由** - 在 `src/router/index.ts` 中添加路由 ### 代码规范 - 使用 TypeScript 进行类型检查 - 遵循 Vue 3 Composition API 规范 - 使用 ESLint 进行代码检查 - 组件命名采用 PascalCase - 文件命名采用 kebab-case ### 状态管理 项目使用 Pinia 进行状态管理，按功能模块划分： ```typescript // 使用示例 import { useAuthStore, useMediaStore } from '@/stores' const authStore = useAuthStore() const mediaStore = useMediaStore() // 调用 action await authStore.login(loginForm) await mediaStore.getMediaFiles() ``` ## 🤝 贡献指南 1. Fork 本仓库 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 开启 Pull Request ## 📄 许可证 本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。 ## 🙏 致谢 - [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架 - [Element Plus](https://element-plus.org/) - Vue 3 组件库 - [Vite](https://vitejs.dev/) - 下一代前端构建工具 - [TypeScript](https://www.typescriptlang.org/) - JavaScript 的超集 ## 📞 联系方式 如有问题或建议，请通过以下方式联系： - 提交 [Issue](https://github.com/ukiot/uv-media-manager/issues) - 发送邮件至 ukiot1000@163.com --- ⭐ 如果这个项目对你有帮助，请给它一个星标！