# vite-app

**Repository Path**: YYKACN/vite-app

## Basic Information

- **Project Name**: vite-app
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-25
- **Last Updated**: 2026-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# YYKA 运营咖 — AI 口播智能体

> 一站式 AI 短视频批量生产工具：从文案生成到多平台一键发布，覆盖口播视频制作全链路。

在线体验：[www.yyka.cn](https://www.yyka.cn) — 运营咖 AI 智能创作平台。

> 🛒 **源码售价：¥799 元（买断制）** — 含全部源码，提供本地部署指导，一次付费终身使用。
> - 📧 **邮箱**：yykacn@qq.com
- 💬 **微信/QQ**：188895970
- 🐛 **技术问题**：直接提 [GitHub Issue](https://github.com/mengdongshike/ai_video_tool/issues)
- 💼 **商务合作**：邮件标题注明「AI口播工坊 商业合作」

## 📖 项目介绍

YYKA 运营咖是一个面向新媒体运营人员的 **AI 口播视频智能生产平台**。通过集成大语言模型（LLM）、TTS 语音合成、数字人视频生成和视频合成编辑能力，将传统需要数小时的口播视频制作流程缩短到分钟级。

### 核心功能

| 功能模块 | 说明 |
|---------|------|
| **四步骤流程** | 文案 → 语音 → 数字人 → 剪辑合成，引导式逐步完成视频制作 |
| **一键自动模式** | 提交任务后全流程自动执行，支持批量项目队列 |
| **智能文案生成** | 基于 DeepSeek 等大模型，支持主题/风格/人设/品牌词定制 |
| **TTS 语音合成** | 多音色选择，支持音色克隆，支持情感/语速调节 |
| **数字人视频** | 参考视频驱动的数字人合成，支持视频素材库管理 |
| **字幕模板** | 可自定义字体、颜色、边框、阴影、位置的字幕样式 |
| **封面模板** | 标题/副标题分层设计，支持横竖布局、多种字体效果 |
| **BGM 合成** | 背景音乐混音，音量可调 |
| **视频播放器** | 内嵌播放器，支持字幕/封面实时预览，缩放控制 |
| **多平台发布** | 支持抖音、小红书、快手、视频号的账号登录和一键发布 |
| **音色管理** | 预设音色 + 克隆音色的增删改查，设置默认音色 |
| **系统设置** | AI 模型配置、API Key 管理、主题切换、平台账号管理 |

---

## 🚀 快速开始

### 环境要求

- **Node.js** >= 18
- **npm** >= 9 或 **pnpm** / **yarn**
- **后端服务**：需要运行配套的 Python 后端 API 服务（默认 `http://localhost:8000`）

### 安装与运行

```bash
# 1. 进入项目目录
cd vite-app

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev
```

开发服务器默认运行在 `http://localhost:5173`，API 请求通过 Vite proxy 自动转发到后端。

### 一键启动脚本（Windows）

| 脚本 | 说明 |
|------|------|
| `start.bat` | 启动开发服务器 |
| `build.bat` | 构建生产版本 |
| `preview.bat` | 预览生产构建 |
| `run.bat` | 快速运行入口 |

### 环境变量

项目通过 `.env.development` 和 `.env.production` 管理环境配置：

| 变量 | 说明 | 默认值 |
|------|------|--------|
| `VITE_API_BASE` | 后端 API 地址 | `/api` |
| `VITE_STATIC_PATH` | 静态文件路径 | 空（相对路径） |
| `VITE_APP_ID` | 应用标识 | `default` |

---

## 🛠 技术栈

| 类别 | 技术 | 版本 |
|------|------|------|
| 框架 | **React** | ^18.2.0 |
| 语言 | **TypeScript** | ^5.2.2 |
| UI 组件库 | **Ant Design** | ^6.4.4 |
| 图标 | **@ant-design/icons** | ^6.2.5 |
| 构建工具 | **Vite** | ^5.0 |
| React 插件 | **@vitejs/plugin-react** | ^4.2.1 |
| 代码规范 | **ESLint** + TypeScript ESLint | ^8.57 / ^7.2 |
| 日期处理 | **dayjs** | （Ant Design 依赖） |

### 技术特点

- **React 18**：支持 Concurrent Mode、自动批处理
- **TypeScript strict 模式**：全量类型覆盖，`noUnusedLocals` / `noUnusedParameters` 开启
- **Ant Design 6**：使用 App 组件包裹，支持 message/Modal 静态方法上下文
- **Vite**：秒级 HMR，`base: './'` 支持 Electron `file://` 协议加载
- **ESM 模块**：`"type": "module"`，纯 ESM 项目结构
- **API 客户端**：自建请求拦截器链，支持全局 loading、错误处理、超时控制

---

## 📁 项目结构

```
vite-app/
├── public/                    # 静态资源
├── src/
│   ├── api/                   # API 接口层
│   │   ├── client.ts          # 核心请求客户端（拦截器、fetch 封装）
│   │   ├── index.ts           # 业务 API 接口定义 & 类型
│   │   └── settings.ts        # 系统设置 API
│   ├── components/            # 通用组件
│   │   ├── AudioPlayer.tsx    # 音频播放器（支持 SRT 字幕同步）
│   │   ├── BrandWords.tsx     # 品牌词管理组件
│   │   ├── GlobalLoading.tsx  # 全局加载遮罩
│   │   ├── PreviewModal.tsx   # 预览弹窗
│   │   ├── TemplateList.tsx   # 模板列表（字幕/封面/BGM）
│   │   ├── VideoCompare.tsx   # 视频对比组件
│   │   └── VideoPlayer.tsx    # 视频播放器（字幕叠加、封面预览）
│   ├── pages/                 # 页面组件
│   │   ├── StepAuto.tsx       # 一键自动流程页
│   │   ├── StepCopy.tsx       # 步骤1：文案生成
│   │   ├── StepAudio.tsx      # 步骤2：TTS 语音合成 & 音色管理
│   │   ├── StepVideo.tsx      # 步骤3：数字人视频生成
│   │   ├── StepCompose.tsx    # 步骤4：视频剪辑合成
│   │   ├── StepPublish.tsx    # 步骤5：多平台发布
│   │   ├── SettingsPage.tsx   # 系统设置页
│   │   └── CoverEditor.tsx    # 封面编辑器（独立窗口）
│   ├── utils/                 # 工具函数
│   │   ├── fontLoader.ts      # 字体动态加载
│   │   └── themeManager.ts    # 主题管理器
│   ├── App.tsx                # 根组件（Context、路由、步骤编排）
│   ├── App.css                # 全局样式
│   ├── theme.css              # 主题变量
│   ├── config.ts              # 前端配置（环境变量聚合）
│   ├── main.tsx               # 应用入口
│   └── vite-env.d.ts         # Vite 环境类型声明
├── .env.development           # 开发环境变量
├── .env.production            # 生产环境变量
├── vite.config.ts             # Vite 配置
├── tsconfig.json              # TypeScript 配置
├── package.json               # 依赖与脚本
└── README.md                  # 本文件
```

---

## 📋 页面路由与组件说明

本项目采用**单页步骤式导航**，所有页面由 `App.tsx` 中的 `step` 状态控制，无需前端路由库。

### 页面（Pages）

| 页面 | 组件 | 功能描述 |
|------|------|----------|
| **一键自动** | `StepAuto` | 一次性配置全部参数，提交后台队列自动执行文案→音频→视频→合成→发布全流程 |
| **步骤1：文案** | `StepCopy` | AI 文案生成（主题/提取两种模式），支持风格、人设、语言、品牌词定制 |
| **步骤2：语音** | `StepAudio` | TTS 语音合成，多音色选择 + 音色克隆，情感/语速调节，音频试听 |
| **步骤3：数字人** | `StepVideo` | 数字人视频生成，参考视频管理（上传/删除），视频素材库 |
| **步骤4：剪辑** | `StepCompose` | 字幕模板选择、封面模板选择、BGM 合成，视频实时预览 |
| **步骤5：发布** | `StepPublish` | 多平台账号管理，视频发布（单条/批量），发布队列与状态跟踪 |
| **系统设置** | `SettingsPage` | 通用设置、AI 模型配置、平台 Cookie 管理、关于页 |
| **封面编辑器** | `CoverEditor` | 独立窗口模式打开，可视化封面设计 |

### 通用组件（Components）

| 组件 | 功能描述 |
|------|----------|
| `VideoPlayer` | 视频播放器——支持播放/暂停、进度拖拽、音量控制、缩放（0.5x-2x）、字幕实时叠加、封面模板效果预览 |
| `AudioPlayer` | 音频播放器——波形可视化、SRT 字幕解析与同步展示 |
| `TemplateList` | 模板选择器——支持字幕/封面/BGM 三类模板的 CRUD、预览、设为默认 |
| `BrandWords` | 品牌词管理——添加/删除品牌关键词，用于文案生成时的品牌植入 |
| `VideoCompare` | 视频对比——参考视频与生成视频左右对比 |
| `GlobalLoading` | 全局加载遮罩——支持进度百分比显示 |
| `PreviewModal` | 视频预览弹窗，全屏大图查看 |

### API 层（`src/api/`）

| 文件 | 功能描述 |
|------|----------|
| `client.ts` | 核心 HTTP 客户端——`request()` 函数、拦截器链、`ApiError` 类、`fileUrl()` 工具、全局 loading 状态管理 |
| `index.ts` | 业务 API 聚合——项目管理、文案/音频/视频/合成/发布各模块接口 + 完整 TypeScript 类型定义 |
| `settings.ts` | 系统设置 API——获取/保存设置 |

---

## 💻 开发指南

### 本地开发

```bash
npm run dev       # 启动开发服务器（热更新）
npm run build     # TypeScript 检查 + 生产构建
npm run preview   # 预览生产构建
npm run lint      # ESLint 代码检查
```

### 代码规范

- **TypeScript strict 模式**：所有类型必须明确，不允许隐式 `any`
- **ESLint**：基于 `@typescript-eslint`，Hooks 规则强制检查
- **组件结构**：每个页面/组件独立文件，通过 `useApp()` Context 获取共享状态
- **API 调用**：统一使用 `api.xxx.yyy()` 调用，不直接使用 `fetch`

### 状态管理

- **全局状态**：通过 React Context（`AppState`）共享项目 ID、当前步骤、各步骤产出物 URL
- **API Loading**：`client.ts` 内置请求计数器，组件可通过全局 loading 遮罩显示加载状态
- **主题**：`themeManager` 管理暗色/亮色主题切换，CSS 变量驱动

### 架构设计

```
main.tsx → AntApp 包裹 → App（Context Provider）
                              ├── Sidebar（项目列表）
                              ├── StepBar（步骤导航）
                              ├── Content（当前步骤页面）
                              │     ├── StepAuto / StepCopy / StepAudio / StepVideo / StepCompose / StepPublish
                              └── SettingsPage（抽屉）
```

- **无路由依赖**：步骤切换通过 `setStep(n)` 状态控制，简单直接
- **Context 驱动**：`useApp()` Hook 在所有子页面中共享步骤状态和操作方法
- **API 拦截器**：支持请求/响应拦截、全局错误处理、加载状态订阅
- **Electron 适配**：`base: './'` 相对路径、窗口控制 API 调用（最小化/最大化/关闭）

### 添加新步骤

1. 在 `src/pages/` 创建新步骤组件
2. 在 `App.tsx` 中 import 并在 Content 区添加条件渲染
3. 更新 `step-bar` 导航项和 `canNext` 逻辑
4. 如需新的 API 接口，在 `src/api/index.ts` 的 `api` 对象中添加

### 后端依赖

前端需要配合后端 API 服务运行，主要接口模块：

| 模块 | 前缀 | 说明 |
|------|------|------|
| 项目管理 | `/projects` | CRUD + 状态流转 |
| 文案生成 | `/copy` | AI 文案生成、文本提纯 |
| TTS 合成 | `/tts` | 语音合成、音色管理 |
| 音色管理 | `/voices` | 预设/克隆音色 |
| 视频管理 | `/videos` | 参考视频素材库 |
| 视频生成 | `/dh` | 数字人视频合成 |
| 模板管理 | `/templates` | 模板 CRUD |
| 字幕模板 | `/subtitle` | 字幕样式模板 + 字体列表 |
| 封面模板 | `/cover` | 封面模板 + 封面生成 |
| 视频合成 | `/compose` | 字幕合成/BGM/水印 |
| 发布管理 | `/publish` | 账号管理、视频发布、队列 |
| 自动任务 | `/auto` | 全流程自动任务队列 |
| 平台 Cookie | `/cookies` | Cookie 管理（发布鉴权） |

---

## 📄 商业化信息

### 应用定位

**YYKA 运营咖** 是一款面向短视频新媒体从业者的 **AI 生产力工具**，核心价值主张：

- **效率提升**：将单条口播视频制作时间从 2-4 小时压缩到 10-15 分钟
- **批量生产**：支持一键自动模式 + 任务队列，实现批量视频工业化生产
- **多平台覆盖**：一次制作，多平台（抖音/小红书/快手/视频号）一键分发
- **零门槛操作**：四步骤引导式流程，无需专业视频剪辑技能

### 目标用户

- 短视频 MCN 机构运营人员
- 个人 IP 博主 / 内容创作者
- 电商带货主播
- 企业新媒体营销团队

### 技术依赖与授权

- **AI 模型**：文案生成依赖 DeepSeek 等大语言模型 API（需自行申请 API Key）
- **TTS 引擎**：语音合成由后端服务提供（如 CosyVoice / GPT-SoVITS 等）
- **数字人生成**：视频合成由后端服务提供（如 MuseTalk / Wav2Lip 等）
- **Ant Design**：UI 组件库，MIT 协议开源
- **React / Vite / TypeScript**：基础框架，均为 MIT 协议开源

### 版本信息

| 项目 | 信息 |
|------|------|
| 项目名称 | YYKA 运营咖 |
| 当前版本 | 0.0.0（内测阶段） |
| 许可证 | 私有（闭源商业软件） |
| 开发团队 | Nous Research 生态 |

---

> ⚠️ **注意**：本前端项目需搭配私有后端 API 服务运行，后端代码未包含在本仓库中。请联系开发团队获取完整的部署方案和技术支持。