本项目为多媒体管理桌面应用. 项目基于 monorepo 管理, 使用 pnpm 作为包管理器.
| 包名 | 描述 |
|---|---|
| packages/core | 浏览器和 Node.js 端通用的核心代码, 包含类型定义、路径处理、媒体元数据、用户配置等 |
| packages/test | 测试工具包, 提供测试相关的工具函数 |
| packages/utils | 通用工具包, 提供通用工具函数 |
| packages/core-routes** | 实现通用 HTTP 接口, apps/cli, apps/electron, apps/ohos 都会复用这些接口 |
| 应用 | 描述 |
|---|---|
| apps/ui | 前端应用, 基于 React 19 + Tailwind CSS 4 + Shadcn UI + Vite 7 |
| apps/cli | 后端服务, 基于 Bun + Hono + Socket.IO |
| apps/electron | Electron 桌面应用, 将 ui 和 cli 打包成桌面应用 |
| apps/e2e | 端到端测试, 基于 WebdriverIO |
| apps/docker | Docker 镜像构建配置 |
| apps/ohos | 鸿蒙 HarmonyOS 应用 |
path.ts- 路径处理工具函数uri.ts- URI 处理工具函数url.ts- URL 处理工具函数mediaMetadata.ts- 媒体元数据类型和工具userConfig.ts- 用户配置管理errors.ts- 错误类型定义event-types.ts- 事件类型定义types/- 类型定义文件plan.ts- 计划类型RenameFilesPlan.ts- 重命名计划RecognizeMediaFilePlan.ts- 识别媒体文件计划GetEpisodesToolTypes.ts- 获取剧集工具类型
前端应用, 主要目录结构:
src/api/- API 调用层src/components/- UI 组件dialogs/- 对话框组件sidebar/- 侧边栏组件ui/- Shadcn UI 组件background-jobs/- 后台任务组件mcp/- MCP 相关组件
src/ai/- AI 助手相关代码src/actions/- 状态操作public/locales/- 多语言文件 (en, zh-CN, zh-HK, zh-TW)
技术栈:
- React 19
- Tailwind CSS 4
- Shadcn UI (Radix UI)
- Vite 7
- Zustand (状态管理)
- TanStack Query
- Socket.IO Client
- AI SDK (@ai-sdk/react, @assistant-ui/react)
Shadcn UI 的 cli 对 monorepo 的支持不友好, 无法通过 cli 安装组件.
请手动安装组件, 并在 apps/ui/src/components/ui/ 目录下创建对应的组件文件.
后端服务, 主要目录结构:
src/route/- HTTP API 路由ffmpeg/- FFmpeg 相关 API (转换、截图)mediaMetadata/- 媒体元数据 APIytdlp/- yt-dlp 相关 API (下载、提取数据)
src/tools/- 业务工具函数src/mcp/- MCP (Model Context Protocol) 服务器tools/- MCP 工具定义
src/utils/- 工具函数src/validations/- 验证逻辑src/events/- Socket.IO 事件处理src/i18n/- 国际化配置
技术栈:
- Bun (运行时)
- Hono (Web 框架)
- Socket.IO (实时通信)
- MCP SDK (@modelcontextprotocol/sdk)
- AI SDK (@ai-sdk/openai)
- Pino (日志)
Electron 桌面应用, 主要目录结构:
src/main/- 主进程代码src/preload/- 预加载脚本src/renderer/- 渲染进程入口build/- 构建资源 (图标等)
技术栈:
- Electron 39
- electron-vite
- electron-builder
基于 Convex 的后台 API 服务
端到端测试, 主要目录结构:
test/specs/- 测试用例test/pageobjects/- 页面对象test/componentobjects/- 组件对象test/lib/- 测试工具
技术栈:
- WebdriverIO 9
- Mocha
# 开发
pnpm dev # 同时启动 ui 和 cli 开发服务器
pnpm dev:ui # 启动 ui 开发服务器
pnpm dev:cli # 启动 cli 开发服务器
pnpm dev:electron # 启动 Electron 开发模式
# 构建
pnpm build # 构建 cli 和 ui
pnpm build:electron # 构建 Electron 应用
# 测试
pnpm test # 运行所有测试
pnpm test:core # 运行 core 测试
pnpm test:cli # 运行 cli 测试
pnpm test:ui # 运行 ui 测试
pnpm test:e2e # 运行 e2e 测试
# 类型检查
pnpm typecheck # 运行所有类型检查
# CI
pnpm ci # 构建 + 测试 + 类型检查为了提供最佳的 UX, 本应用假设后台操作总是会成功. 开发者应该:
- 先更新UI状态
- 执行后台操作(异步计算, API 调用, 等待回调等)
- 如果后台操作失败, 回滚UI状态, 并弹出合适的错误提示
本项目定义了如下开发阶段
功能探索 该阶段开发者对新功能没有完整的技术图景, 开发时专注于快速实现功能, 并交付测试. 不需要写单元测试, 不需要 typecheck. 功能交付 该阶段开发者对新功能有确定的需求, 开发时需要考虑代码质量, 并编写单元测试.
媒体文件夹(Media Folder) 保存了电视剧, 动画, 电影或音乐的本地文件夹 媒体库(Media Library) 保存了多个媒体文件夹的文件夹 识别多媒体文件夹(Recognize Media Folder): 该操作用于指定文件夹保存的是哪一部电视剧或电影的视频文件 识别季集视频文件(Recognize Episode Video File): 该操作用于指定电视剧每一集对应的本地视频文件 元数据(Media Metadata): 元数据, 保存了文件夹对应的电视剧或电影的信息,以及本地视频文件和季集的对应关系 视频文件和关联文件(Video File and Associated Files) 视频文件通常还对应着字幕文件, 音频文件, 封面文件和 NFO 文件等, 这类文件被称为关联文件
- HTTP API: 使用 Hono 框架提供 RESTful API
- Socket.IO: 使用 Socket.IO 进行实时双向通信
- MCP: 提供 Model Context Protocol 服务器, 支持 AI 工具调用
- 前端使用
@assistant-ui/react提供 AI 对话界面 - 后端使用
@ai-sdk/openai集成 OpenAI API - MCP 服务器提供工具调用能力
- FFmpeg: 视频转换、截图
- yt-dlp: 视频下载
- TMDB: 媒体信息搜索和获取
- NFO: 媒体元数据文件读写
- 前端使用
i18next+react-i18next - 后端使用
i18next+i18next-fs-backend - 支持语言: English, 简体中文, 繁体中文(香港), 繁体中文(台湾)
apps/ui/src/hooks/userConfig/ 该目录提供了基于 TanStack Query 的读取和写入应用配置的方法, 如 useConfig.ts
pps/ui/src/stores/uiMediaFolderStore.ts 基于 Zustand 的全局状态类. 接口 UIMediaFolder 用于表示前端的多媒体目录. 该store是前端项目的核心状态, 被Sidebar, Statusbar, TvShowPanel, MoviePanle 和 MoviePanel 等主要组件依赖.
apps/ui/src/hooks/mediaMetadata/ 基于 TanStack Query 的 MediaMetadata 读取和写入方法
apps/e2e 是端到端测试目录
其使用 webdriver.io 运行基于浏览器的端到端测试
本项目主要代码在 apps/e2e/test 目录下
- actions - 可复用的测试动作
- componentobjects - Component Object (简称CO), 用于表示应用界面的一个组件, 辅助开发者操作该组件的各个元素
- pageobject - 用于操作网页
- lib - 可复用的辅助函数
- specs - 端到端测试用例
手动测试
进入 apps/e2e 目录, 并执行
pnpm run wdio --spec ./test/specs/[test file].e2e.ts
自动化测试/AI Agent测试 在项目根目录执行
bun ci/run-e2e-test.ts --spec ./test/specs/[test file].e2e.ts
日志由 apps/cicd 写入 artifacts/cicd/<commandId>/,每个 spec 文件对应一个 task(如 SearchMovie.e2e.ts/main.log)。
浏览器网络请求日志在 artifacts/cicd/[commandId]/[testFileName]/network-log 目录.
网络请求日志通常非常庞大, 不适宜直接文件
请使用 query-network-log 工具查询
关键辅助测试函数
apps\e2e\test\lib\testbed.ts创建和清理测试环境apps\e2e\test\actions\import-folders.ts创建和导入测试媒体目录
模板
- 测试音乐和视频目录:
apps\e2e\common\music\MusicPanel.template.ts
API列表可查阅文件: docs/api/index.md.
DVD Download Video Dialog
- 当代码改动涉及
apps/ohos时, 需要阅读 HarmonyOS 开发 FAQ
当使用 superpowers skillset 驱动改动时, 在 "writing-plans" 阶段, 需要为本项目额外编写/更新一份设计文档.
文档模板: Design Template