




请从 0 开始开发一个完整的桌面软件,直接创建项目代码,不要只给方案。
软件名称:
Video Dispatch
软件定位:
这是一个桌面端“已授权视频管理与下载工具”,用于管理和下载“我自己上传或已获授权”的视频内容。
注意:
- 不实现未授权抓取
- 不绕过平台限制
- 不提供破解、逆向登录、规避验证等能力
- 下载能力必须设计成“授权内容”前提下的可扩展接口
技术栈:
- Electron
- React
- TypeScript
- Vite
- 推荐使用 Zustand 做状态管理
- 样式方案任选一种,但要完整统一,优先保证桌面端 UI 质量
开发目标:
请直接做出一个可运行的 MVP,包含完整的桌面端 UI、基础状态管理、mock 下载流程、任务队列、视频列表、详情面板、设置页,并保留后续接入真实授权下载接口的扩展点。
一、软件必须具备的页面
1. 视频库
2. 下载任务
3. 设置
二、主界面布局要求
请实现一个桌面宽屏三栏式管理界面,整体风格专业、克制、偏媒体工具,不要做成普通后台模板。
布局结构:
- 左侧导航栏
- Logo / 产品名
- 视频库
- 下载任务
- 设置
- 主内容区顶部
- 添加下载任务区
- 搜索框
- 状态筛选
- 批量下载按钮
- 导出 CSV 按钮
- 主内容区中部
- 统计卡片
- 视频列表
- 右侧详情面板
- 当前选中视频的详细信息
- 授权状态
- 来源链接
- 操作按钮
- 底部或下方
- 任务队列
三、必须实现的核心功能
1. 添加下载任务
页面顶部必须有一个清晰的“添加下载任务”区域,支持两种方式:
单条输入:
- 一个长网址输入框
- placeholder:请输入视频网址
- 一个主按钮:添加下载
- 支持回车提交
- 输入为空时提示“请输入视频网址”
- 输入无效时提示“请输入有效的视频链接”
批量导入:
- 一个“批量导入”按钮
- 点击后打开弹窗、抽屉或面板
- 支持一次粘贴多行网址
- 每行一个链接
- 自动去除空行
- 自动 trim 空格
- 自动去重
- 已存在链接不重复添加
- 添加完成后提示:
- 成功添加 X 条
- 重复跳过 X 条
- 无效链接 X 条
2. 视频列表
每条视频至少显示:
- 封面
- 标题
- 作者
- 视频 ID
- 录入时间
- 授权状态
- 下载状态
视频列表要求:
- 支持搜索
- 支持筛选
- 支持选中态
- 点击后右侧详情联动更新
- 支持批量选择
- 支持批量下载
3. 右侧详情面板
展示当前选中视频的详细信息:
- 封面大图
- 标题
- 作者
- 视频 ID
- 来源链接
- 时长
- 录入时间
- 最近更新时间
- 授权状态说明
详情区操作按钮:
- 开始下载
- 刷新元数据
- 复制链接
未授权状态要求:
- 下载按钮禁用
- 提示“仅支持已授权内容”
4. 下载任务队列
必须有任务队列视图,展示:
- 任务标题
- 所属视频
- 当前状态
- 进度条
- 错误信息
- 开始时间
- 完成时间
- 重试按钮
- 取消按钮(如果当前状态允许)
任务状态至少包括:
- idle
- queued
- running
- success
- failed
要求:
- 单条添加后立即进入队列
- 批量导入后每条都进入队列
- 统计卡片实时更新
- 任务列表实时更新
- 失败任务支持重试
5. 搜索与筛选
顶部必须有搜索与筛选区:
- 搜索标题、作者、视频 ID、来源链接
- 下载状态筛选
- 授权状态筛选
要求:
- 输入后实时过滤
- 筛选条件改变后立即更新列表
6. 统计卡片
页面中部需要有统计信息卡片,至少包括:
- 全部
- 待下载
- 下载中
- 已完成
要求:
- 数字根据当前任务状态实时更新
- 卡片风格统一,视觉清晰
7. 设置页
设置页至少包含:
- 下载目录选择
- Cookie 策略占位
- 默认浏览器策略占位
- Provider 选择占位
- 主题或界面偏好占位
说明:
当前阶段可以先做设置结构和本地状态保存,不要求真实打通全部底层逻辑。
四、视觉与 UI 要求
整体风格:
- 专业、克制、偏内容管理工具
- 不要普通 admin 模板感
- 不要默认紫色
- 不要纯白大平面
配色方向:
- 米白
- 炭灰
- 深墨绿
- 灰绿色 / 灰蓝作为辅助色
视觉要求:
- 输入框、按钮、卡片、详情面板、任务列表风格统一
- 使用留白、圆角、边框、阴影建立层次
- 信息密度高,但不能乱
- 界面适合桌面端长期使用
- 视觉参考接近成熟的媒体资产管理工具
必须有这些状态界面:
- 空状态
- 有数据状态
- 加载中状态
- 下载中状态
- 下载失败状态
- 未授权状态
- 批量导入状态
- 成功提示状态
五、数据与架构要求
请从一开始就做好基本分层,不要把所有代码塞进一个文件。
建议结构:
- electron/main
- electron/preload
- src/pages
- src/components
- src/features
- src/store
- src/providers
- src/services
- src/theme
- src/utils
状态管理要求:
- 使用 Zustand
- 把视频列表、任务队列、设置分开管理
- actions 命名清晰
- 不要把核心状态散落在页面组件中
Provider 要求:
请设计一个下载 provider 抽象层:
- validateAccess()
- queueDownload()
- getTaskStatus()
- cancelTask()
当前先实现一个 MockDownloadProvider:
- 模拟下载流程
- 状态自动流转:queued -> running -> success / failed
- UI 可以看到进度和失败情况
服务层要求:
- 链接校验逻辑独立
- 导出 CSV 独立
- 通知提示独立
- 元数据刷新逻辑独立
六、实现要求
请直接从空项目开始生成完整工程,至少包含:
- package.json
- Electron 启动配置
- React 入口
- 主页面
- 左侧导航
- 添加下载任务区
- 视频列表
- 详情面板
- 任务队列
- 设置页
- 状态管理
- mock 数据
- mock 下载 provider
- 基础样式
- README
不要只输出静态页面。
必须保证:
- 页面可交互
- 添加链接后任务和列表会变
- 批量导入有效
- 搜索筛选有效
- 下载任务状态会变化
- 右侧详情联动有效
七、编码规范
- 使用 TypeScript
- 尽量避免 any
- 组件名使用 PascalCase
- hooks 使用 useXxx 命名
- 类型单独放 types 文件
- mock 数据单独放 mock 文件
- 命名清晰
- 注释简洁
- 保持可维护性
八、工作方式要求
请不要只给设计说明,请直接开始写代码。
按这个顺序推进:
1. 先创建项目骨架和启动配置
2. 再完成主布局和导航
3. 再实现“添加下载任务”区域
4. 再实现视频列表和详情联动
5. 再实现任务队列和 mock 下载流程
6. 再实现搜索、筛选、批量导入
7. 再补设置页和导出能力占位
8. 最后完善样式和交互状态
每完成一个阶段,请简短说明:
- 创建了哪些文件
- 实现了什么功能
- 下一步要做什么
九、最终交付要求
最后必须明确告诉我:
- 完整目录结构
- 关键文件代码
- 启动命令
- 目前哪些功能是真实可用的
- 哪些部分是 mock / placeholder
- 下一步最值得继续做的 3 件事
夜雨聆风