# mutengapp_new
**Repository Path**: mrbytes/mutengapp_new
## Basic Information
- **Project Name**: mutengapp_new
- **Description**: 新版木藤影视APP
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-20
- **Last Updated**: 2026-09-28
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 木藤影视 (Muteng App)
AI 驱动的影视聚合应用，基于 **uni-app + Vue 3** 开发，支持 App 端嵌入 uni 小程序。聚合多源影视内容，提供搜索、播放、观看历史、收藏等核心功能。
提供 **两个前端工程**：
- `mutengapp_uniapp` — 竖屏手机版
- `mutengapp_uniapp_hd` — 横屏 Pad 版（16:9 全屏锁定）
## 功能特性
- **首页** — Banner 3D 轮播（`kong-swiper`）、分类导航（一级 Tab + 二级子分类 + 排序）、影视卡片网格（上图下文布局）
- **搜索** — 关键词搜索，片类型 Tab（全部/正片/短剧/影视解说）、数据源 Tab、热门推荐、搜索历史
- **观看历史** — 按时间分组（今天/昨天/近 7 天/近 30 天），进度条 + 已播放/总时长展示（`totalSeconds` / `playedSeconds`）
- **我的收藏** — 收藏查看页，卡片布局，支持取消收藏并跳转播放
- **个人中心** — 快捷功能栏（收藏/历史/缓存，收藏带角标）、"其他入口"小程序嵌入区、退出登录
- **播放器** — `yb-video` 组件播放（HLS/FLV），分集选择（Tab 分页 50 集/页）、剧情简介（`rich-text` 渲染 HTML）、动态导航栏标题、收藏
- **小程序宿主** — App 端通过 `uniMP` 插件安装 / 打开 wgt 小程序包
- **横屏 Pad 版** — 全页面 16:9 锁定、状态栏占位、左右分栏布局（左视频 + 右面板可滚动）
## 目录结构
```
muteng_app/
├── mutengapp_uniapp/ # uni-app 前端工程（竖屏手机版）
│ ├── pages.json # 路由 & TabBar 配置
│ ├── manifest.json # App 配置（UniMP / VideoPlayer）
│ ├── App.vue # 根组件 & 全局样式
│ ├── main.js # Vue 入口（VUE3 条件编译）
│ ├── utils/request.js # 统一请求封装（http.get / http.post）
│ ├── static/ # 静态资源（图片、图标、tab 图标）
│ └── pages/
│ ├── index/ # 首页
│ ├── search/ # 搜索页（navigateTo 二级页）
│ ├── history/ # 观看历史（tabBar）
│ ├── collect/ # 我的收藏
│ ├── mine/ # 个人中心（tabBar，小程序入口）
│ ├── player/ # 视频播放器（custom 导航）
│ └── auth/ # 登录 / 注册
│
├── mutengapp_uniapp_hd/ # uni-app 前端工程（横屏 Pad 版 16:9）
│ ├── pages.json # 路由 & TabBar 配置（全页 landscape）
│ ├── manifest.json # App 配置（横屏锁定 landscape-primary/secondary）
│ ├── App.vue # 根组件 & 全局样式（状态栏占位注入）
│ ├── main.js # Vue 入口（VUE3 条件编译）
│ ├── utils/request.js # 统一请求封装（http.get / http.post）
│ ├── components/sn-swiper/ # esc-swiper 轮播组件（3D 模式）
│ ├── uni_modules/
│ │ ├── yingbing-video/ # yb-video 播放器组件（HLS/FLV）
│ │ └── kong-swiper/ # kong-swiper 原生 swiper 封装（3D 缩放）
│ └── pages/
│ ├── index/ # 首页（kong-swiper Banner + 一级/二级 Tab + 影片网格）
│ ├── search/ # 搜索页
│ ├── history/ # 观看历史（tabBar）
│ ├── collect/ # 我的收藏
│ ├── mine/ # 个人中心（tabBar，小程序入口）
│ ├── player/ # 视频播放器（左右分栏：左视频 + 右分集/信息面板）
│ └── auth/ # 登录 / 注册
│
├── server_new/ # 后端服务（Node.js / LibreTV）
│ ├── index.mjs # 入口
│ ├── config.mjs # 配置
│ ├── routes/ # 路由（搜索、详情、代理、豆瓣、mp 等）
│ └── data/mp_list.json # 小程序列表静态数据
│
├── imgs/ # 页面截图（pad / phone）
├── demo/ # LibreTV 参考实现（不纳入版本管理）
├── AGENT.md # 项目规格说明（设计系统 / 存储 key / 接口）
└── LICENSE
```
## 技术栈
| 层级 | 技术选型 |
|------|----------|
| 前端框架 | uni-app (Vue 3, `createSSRApp`) |
| 构建工具 | HBuilderX / Vite |
| 样式方案 | CSS (scoped) + Rpx 响应式单位 |
| 视频播放 | 第三方组件 `yb-video`（支持 HLS/FLV） |
| 轮播组件 | `kong-swiper`（原生 swiper 封装，3D 缩放） |
| 小程序宿主 | `uni.requireNativePlugin('uniMP')`（仅 App 端） |
| 状态管理 | 本地 Storage（`uni.setStorageSync`） |
| 网络请求 | `utils/request.js` 封装 `http` |
| 后端 | Node.js + Express（`server_new`） |
## 本地存储 Key
| Key | 类型 | 说明 |
|-----|------|------|
| `histList` | 字符串数组 | 搜索历史（关键词名字） |
| `watchHistList` | 对象数组 | 观看历史（`id` / `title`（片名+集数）/ `poster` / `sub` / `sourceKey` / `time` / `totalSeconds` / `playedSeconds` / `progress`） |
| `collectList` | 字符串数组 | 收藏 id（`sourceCode_vodId`） |
| `collectDetails` | 对象 | 收藏详情（`key -> 影片对象`） |
> 搜索历史与观看历史使用**不同的 storage key**，避免互相覆盖。
## 快速开始
### 环境要求
- Node.js 18+
- HBuilderX 或 VS Code + uni-app 插件
### 前端
```bash
# 竖屏手机版
cd mutengapp_uniapp
npm run dev:h5 # H5 预览
npm run dev:app-plus # App 端
# 横屏 Pad 版
cd mutengapp_uniapp_hd
npm run dev:h5 # H5 预览
npm run dev:app-plus # App 端
```
### 后端
```bash
cd server_new
npm install
npm run dev # node --watch index.mjs
```
> 前端默认请求 `https://film.mutengyy.site`，本地调试可修改 `utils/request.js` 中的 `BASE_URL`。
### 构建发布
```bash
# 竖屏手机版
cd mutengapp_uniapp
npm run build:h5 # 构建 H5
npm run build:app # 构建 App
# 横屏 Pad 版
cd mutengapp_uniapp_hd
npm run build:h5 # 构建 H5
npm run build:app # 构建 App
```
## 设计系统
- 页面背景 `#f8fafc`，卡片 `#ffffff`
- 主色天蓝 `#0ea5e9`（不使用蓝紫色系）
- 主要文字 `#0f172a` / 次要 `#64748b` / 辅助 `#94a3b8`
- 评分/收藏金色 `#f59e0b`，危险操作红色 `#ef4444`
- 圆角：按钮/胶囊 `40rpx`，卡片 `16rpx`，图标容器 `18rpx`
详细规格见 [AGENT.md](./AGENT.md)。
## 小程序宿主（uniMP）
仅 App 端可用（`// #ifdef APP-PLUS`）。流程：
1. `loadMPList` 请求 `GET /mp` 获取小程序列表（`app_id / app_name / app_type / app_desc / app_icon / app_version / app_download_url`）
2. `checkInstalled(appId)` 通过 `mp.getUniMPVersion` 检测是否已安装
3. `openMP(item)`：已安装直接 `mp.openUniMP`；未安装先 `uni.downloadFile` 下载 wgt，再 `mp.installUniMP` 安装后打开
UI：item 上下布局（上 icon 下名字），未安装灰色、已安装原色；区域带 `min-height`，上方标题"其他入口"。
## API 集成
后端接口封装在 `utils/request.js`：
| 接口 | 方法 | 说明 |
|------|------|------|
| `/api/search` | GET | 搜索（`wd` 关键词，`source: aggregated`） |
| `/api/detail` | GET | 影片详情/分集（`id`, `source`） |
| `/mp` | GET/POST/DELETE | 小程序列表（静态 JSON 管理） |
## 页面截图
### 横屏版（Pad）
### 竖屏版（手机）
## 版本
v1.0.0
## TODO
- [ ] 播放历史数据本地→云端同步
- [ ] 收藏列表云端同步
- [ ] 搜索页支持语音输入
- [ ] 播放器支持倍速播放
- [ ] 多语言支持（i18n）
- [ ] 性能优化：首页列表虚拟滚动
- [ ] 完善单元测试