更新代码

2026-02-02 10:51:27 +08:00
parent cf679b34bf
commit 6801d3e8aa
38 changed files with 2234 additions and 293 deletions
--- a/Docs/DevLogs/Day14.md
+++ b/Docs/DevLogs/Day14.md
@@ -0,0 +1,402 @@
+# Day 14 - 模型升级 + 标题标签生成 + 前端修复
+
+**日期**：2026-01-30
+
+---
+
+## 🚀 Qwen3-TTS 模型升级 (0.6B → 1.7B)
+
+### 背景
+
+为提升声音克隆质量，将 Qwen3-TTS 模型从 0.6B-Base 升级到 1.7B-Base。
+
+### 变更内容
+
+| 项目 | 升级前 | 升级后 |
+|------|--------|--------|
+| 模型 | 0.6B-Base | **1.7B-Base** |
+| 大小 | 2.4GB | 6.8GB |
+| 质量 | 基础 | 更高质量 |
+
+### 代码修改
+
+**文件**: `models/Qwen3-TTS/qwen_tts_server.py`
+
+```python
+# 升级前
+MODEL_PATH = Path(__file__).parent / "checkpoints" / "0.6B-Base"
+
+# 升级后
+MODEL_PATH = Path(__file__).parent / "checkpoints" / "1.7B-Base"
+```
+
+### 模型下载
+
+```bash
+cd /home/rongye/ProgramFiles/ViGent2/models/Qwen3-TTS
+
+# 下载 1.7B-Base 模型 (6.8GB)
+modelscope download --model Qwen/Qwen3-TTS-12Hz-1.7B-Base --local_dir ./checkpoints/1.7B-Base
+```
+
+### 结果
+
+- ✅ 模型加载正常 (GPU0, bfloat16)
+- ✅ 声音克隆质量提升
+- ✅ 推理速度可接受
+
+---
+
+## 🎨 标题和字幕显示优化
+
+### 字幕组件优化 (`Subtitles.tsx`)
+
+**文件**: `remotion/src/components/Subtitles.tsx`
+
+优化内容：
+- 调整高亮颜色配置
+- 优化文字描边效果（多层阴影）
+- 调整字间距和行高
+
+```typescript
+export const Subtitles: React.FC<SubtitlesProps> = ({
+  captions,
+  highlightColor = '#FFFF00',  // 高亮颜色
+  normalColor = '#FFFFFF',      // 普通文字颜色
+  fontSize = 52,
+}) => {
+  // 样式优化
+  const style = {
+    textShadow: `
+      2px 2px 4px rgba(0,0,0,0.8),
+      -2px -2px 4px rgba(0,0,0,0.8),
+      ...
+    `,
+    letterSpacing: '2px',
+    lineHeight: 1.4,
+    maxWidth: '90%',
+  };
+};
+```
+
+### 标题组件优化 (`Title.tsx`)
+
+**文件**: `remotion/src/components/Title.tsx`
+
+优化内容：
+- 淡入淡出动画效果
+- 下滑入场动画
+- 可配置显示时长
+
+```typescript
+interface TitleProps {
+  title: string;
+  duration?: number;        // 标题显示时长（秒，默认3秒）
+  fadeOutStart?: number;    // 开始淡出的时间（秒，默认2秒）
+}
+
+// 动画效果
+// 淡入：0-0.5 秒
+// 淡出：2-3 秒
+// 下滑：0-0.5 秒，-20px → 0px
+```
+
+### 结果
+
+- ✅ 字幕显示更清晰
+- ✅ 标题动画更流畅
+
+---
+
+## 🤖 标题标签自动生成功能
+
+### 功能描述
+
+使用 AI（智谱 GLM-4-Flash）根据口播文案自动生成视频标题和标签。
+
+### 后端实现
+
+#### 1. GLM 服务 (`glm_service.py`)
+
+**文件**: `backend/app/services/glm_service.py`
+
+```python
+class GLMService:
+    """智谱 GLM AI 服务"""
+
+    async def generate_meta(self, text: str) -> dict:
+        """根据文案生成标题和标签"""
+
+        prompt = """根据以下口播文案，生成一个吸引人的短视频标题和3个相关标签。
+
+要求：
+1. 标题要简洁有力，能吸引观众点击，不超过10个字
+2. 标签要与内容相关，便于搜索和推荐，只要3个
+
+返回格式：{"title": "标题", "tags": ["标签1", "标签2", "标签3"]}
+"""
+        # 调用 GLM-4-Flash API
+        response = await self._call_api(prompt + text)
+        return self._parse_json(response)
+```
+
+**JSON 解析容错**：
+- 支持直接 JSON 解析
+- 支持提取 JSON 块
+- 支持 ```json 代码块提取
+
+#### 2. API 端点 (`ai.py`)
+
+**文件**: `backend/app/api/ai.py`
+
+```python
+from pydantic import BaseModel
+
+class GenerateMetaRequest(BaseModel):
+    text: str  # 口播文案
+
+class GenerateMetaResponse(BaseModel):
+    title: str        # 生成的标题
+    tags: list[str]   # 生成的标签列表
+
+@router.post("/generate-meta", response_model=GenerateMetaResponse)
+async def generate_meta(request: GenerateMetaRequest):
+    """AI 生成标题和标签"""
+    result = await glm_service.generate_meta(request.text)
+    return result
+```
+
+### 前端实现
+
+**文件**: `frontend/src/app/page.tsx`
+
+#### UI 按钮
+
+```tsx
+<button
+  onClick={handleGenerateMeta}
+  disabled={isGeneratingMeta || !text.trim()}
+  className="px-2 py-1 text-xs rounded transition-all whitespace-nowrap"
+>
+  {isGeneratingMeta ? "⏳ 生成中..." : "🤖 AI生成标题标签"}
+</button>
+```
+
+#### 处理逻辑
+
+```typescript
+const handleGenerateMeta = async () => {
+  if (!text.trim()) {
+    alert("请先输入口播文案");
+    return;
+  }
+
+  setIsGeneratingMeta(true);
+  try {
+    const { data } = await api.post('/api/ai/generate-meta', { text: text.trim() });
+
+    // 更新首页标题
+    setVideoTitle(data.title || "");
+
+    // 同步到发布页 localStorage
+    localStorage.setItem(`vigent_${storageKey}_publish_title`, data.title || "");
+    localStorage.setItem(`vigent_${storageKey}_publish_tags`, JSON.stringify(data.tags || []));
+  } catch (err: any) {
+    alert(`AI 生成失败: ${err.message}`);
+  } finally {
+    setIsGeneratingMeta(false);
+  }
+};
+```
+
+### 发布页集成
+
+**文件**: `frontend/src/app/publish/page.tsx`
+
+从 localStorage 恢复 AI 生成的标题和标签：
+
+```typescript
+// 恢复标题和标签
+const savedTitle = localStorage.getItem(`vigent_${storageKey}_publish_title`);
+const savedTags = localStorage.getItem(`vigent_${storageKey}_publish_tags`);
+
+if (savedTags) {
+  try {
+    const parsed = JSON.parse(savedTags);
+    if (Array.isArray(parsed)) {
+      setTags(parsed.join(', '));  // 数组转逗号分隔字符串
+    } else {
+      setTags(savedTags);
+    }
+  } catch {
+    setTags(savedTags);
+  }
+}
+```
+
+### 结果
+
+- ✅ AI 生成标题和标签功能正常
+- ✅ 数据自动同步到发布页
+- ✅ 支持 JSON 数组和字符串格式兼容
+
+---
+
+## 🐛 前端文本保存问题修复
+
+### 问题描述
+
+**现象**：页面刷新后，用户输入的文案、标题等数据丢失
+
+**原因**：
+1. 认证状态恢复失败时，`userId` 为 `null`
+2. 原代码判断 `!userId` 后用默认值覆盖 localStorage 数据
+3. 导致已保存的用户数据被清空
+
+### 解决方案
+
+**文件**: `frontend/src/app/page.tsx`
+
+#### 1. 添加恢复完成标志
+
+```typescript
+const [isRestored, setIsRestored] = useState(false);
+```
+
+#### 2. 等待认证完成后恢复数据
+
+```typescript
+useEffect(() => {
+  if (isAuthLoading) return;  // 等待认证完成
+
+  // 使用 userId 或 'guest' 作为 key
+  const key = userId || 'guest';
+
+  // 从 localStorage 恢复数据
+  const savedText = localStorage.getItem(`vigent_${key}_text`);
+  if (savedText) setText(savedText);
+
+  // ... 恢复其他数据
+
+  setIsRestored(true);  // 标记恢复完成
+}, [userId, isAuthLoading]);
+```
+
+#### 3. 恢复完成后才保存
+
+```typescript
+useEffect(() => {
+  if (isRestored) {
+    localStorage.setItem(`vigent_${storageKey}_text`, text);
+  }
+}, [text, storageKey, isRestored]);
+```
+
+### 用户隔离机制
+
+```typescript
+const storageKey = userId || 'guest';
+```
+
+| 用户状态 | storageKey | 说明 |
+|----------|------------|------|
+| 已登录 | `user_xxx` | 数据按用户隔离 |
+| 未登录/认证失败 | `guest` | 使用统一 key |
+
+### 数据恢复流程
+
+```
+1. 页面加载
+   ↓
+2. 检查 isAuthLoading
+   ├─ true: 等待认证完成
+   └─ false: 继续
+   ↓
+3. 确定 storageKey (userId || 'guest')
+   ↓
+4. 从 localStorage 读取数据
+   ├─ 有保存数据: 恢复到状态
+   └─ 无保存数据: 使用默认值
+   ↓
+5. 设置 isRestored = true
+   ↓
+6. 后续状态变化时保存到 localStorage
+```
+
+### 保存的数据项
+
+| Key | 说明 |
+|-----|------|
+| `vigent_${key}_text` | 口播文案 |
+| `vigent_${key}_title` | 视频标题 |
+| `vigent_${key}_subtitles` | 字幕开关 |
+| `vigent_${key}_ttsMode` | TTS 模式 |
+| `vigent_${key}_voice` | 选择的音色 |
+| `vigent_${key}_material` | 选择的素材 |
+| `vigent_${key}_publish_title` | 发布标题 |
+| `vigent_${key}_publish_tags` | 发布标签 |
+
+### 结果
+
+- ✅ 页面刷新后数据正常恢复
+- ✅ 认证失败时不会覆盖已保存数据
+- ✅ 多用户数据隔离正常
+
+---
+
+## 🐛 登录页刷新循环修复
+
+### 问题描述
+
+**现象**：登录页未登录时不断刷新，无法停留在表单页面。
+
+**原因**：
+1. `AuthProvider` 初始化时调用 `/api/auth/me`
+2. 未登录返回 401
+3. `axios` 全局拦截器遇到 401/403 重定向 `/login`
+4. 登录页本身也在 Provider 中，导致循环刷新
+
+### 解决方案
+
+**文件**: `frontend/src/lib/axios.ts`
+
+在拦截器中对公开路由跳过重定向，仅在受保护页面触发登录跳转：
+
+```typescript
+const PUBLIC_PATHS = new Set(['/login', '/register']);
+const isPublicPath = typeof window !== 'undefined' && PUBLIC_PATHS.has(window.location.pathname);
+
+if ((status === 401 || status === 403) && !isRedirecting && !isPublicPath) {
+  // ... 保持原有重定向逻辑
+}
+```
+
+### 结果
+
+- ✅ 登录页不再刷新，表单可正常输入
+- ✅ 受保护页面仍会在 401/403 时跳转登录页
+
+---
+
+## 📁 今日修改文件清单
+
+| 文件 | 变更类型 | 说明 |
+|------|----------|------|
+| `models/Qwen3-TTS/qwen_tts_server.py` | 修改 | 模型路径升级到 1.7B-Base |
+| `Docs/QWEN3_TTS_DEPLOY.md` | 修改 | 更新部署文档为 1.7B 版本 |
+| `remotion/src/components/Subtitles.tsx` | 修改 | 优化字幕显示效果 |
+| `remotion/src/components/Title.tsx` | 修改 | 优化标题动画效果 |
+| `backend/app/services/glm_service.py` | 新增 | GLM AI 服务 |
+| `backend/app/api/ai.py` | 新增 | AI 生成标题标签 API |
+| `backend/app/main.py` | 修改 | 注册 ai 路由 |
+| `frontend/src/app/page.tsx` | 修改 | AI 生成按钮 + localStorage 修复 |
+| `frontend/src/app/publish/page.tsx` | 修改 | 恢复 AI 生成的标签 |
+| `frontend/src/lib/axios.ts` | 修改 | 公开路由跳过 401/403 登录重定向 |
+
+---
+
+## 🔗 相关文档
+
+- [task_complete.md](../task_complete.md) - 任务总览
+- [Day13.md](./Day13.md) - 声音克隆功能集成 + 字幕功能
+- [QWEN3_TTS_DEPLOY.md](../QWEN3_TTS_DEPLOY.md) - Qwen3-TTS 1.7B 部署指南
--- a/Docs/DevLogs/Day15.md
+++ b/Docs/DevLogs/Day15.md
@@ -0,0 +1,347 @@
+# Day 15 - 手机号登录迁移 + 账户设置功能
+
+**日期**：2026-02-02
+
+---
+
+## 🔐 认证系统迁移：邮箱 → 手机号
+
+### 背景
+
+根据业务需求，将用户认证从邮箱登录迁移到手机号登录（11位中国手机号）。
+
+### 变更范围
+
+| 组件 | 变更内容 |
+|------|----------|
+| 数据库 Schema | `email` 字段替换为 `phone` |
+| 后端 API | 注册/登录/获取用户信息接口使用 `phone` |
+| 前端页面 | 登录/注册页面改为手机号输入框 |
+| 管理员配置 | `ADMIN_EMAIL` 改为 `ADMIN_PHONE` |
+
+---
+
+## 📦 后端修改
+
+### 1. 数据库 Schema (`schema.sql`)
+
+**文件**: `backend/database/schema.sql`
+
+```sql
+CREATE TABLE users (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    phone TEXT UNIQUE NOT NULL,  -- 原 email 改为 phone
+    password_hash TEXT NOT NULL,
+    username TEXT,
+    role TEXT DEFAULT 'pending' CHECK (role IN ('pending', 'user', 'admin')),
+    is_active BOOLEAN DEFAULT FALSE,
+    expires_at TIMESTAMP WITH TIME ZONE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+CREATE INDEX idx_users_phone ON users(phone);
+```
+
+### 2. 认证 API (`auth.py`)
+
+**文件**: `backend/app/api/auth.py`
+
+#### 请求模型更新
+
+```python
+class RegisterRequest(BaseModel):
+    phone: str
+    password: str
+    username: Optional[str] = None
+
+    @field_validator('phone')
+    @classmethod
+    def validate_phone(cls, v):
+        if not re.match(r'^\d{11}$', v):
+            raise ValueError('手机号必须是11位数字')
+        return v
+```
+
+#### 新增修改密码接口
+
+```python
+class ChangePasswordRequest(BaseModel):
+    old_password: str
+    new_password: str
+
+    @field_validator('new_password')
+    @classmethod
+    def validate_new_password(cls, v):
+        if len(v) < 6:
+            raise ValueError('新密码长度至少6位')
+        return v
+
+@router.post("/change-password")
+async def change_password(request: ChangePasswordRequest, req: Request, response: Response):
+    """修改密码，验证当前密码后更新"""
+    # 1. 验证当前密码
+    # 2. 更新密码 hash
+    # 3. 重新生成 session token
+    # 4. 返回新的 JWT Cookie
+```
+
+### 3. 配置更新
+
+**文件**: `backend/app/core/config.py`
+
+```python
+# 管理员配置
+ADMIN_PHONE: str = ""  # 原 ADMIN_EMAIL
+ADMIN_PASSWORD: str = ""
+```
+
+**文件**: `backend/.env`
+
+```bash
+ADMIN_PHONE=15549380526
+ADMIN_PASSWORD=lam1988324
+```
+
+### 4. 管理员初始化 (`main.py`)
+
+**文件**: `backend/app/main.py`
+
+```python
+@app.on_event("startup")
+async def init_admin():
+    admin_phone = settings.ADMIN_PHONE  # 原 ADMIN_EMAIL
+    # ... 使用 phone 字段创建管理员
+```
+
+### 5. 管理员 API (`admin.py`)
+
+**文件**: `backend/app/api/admin.py`
+
+```python
+class UserListItem(BaseModel):
+    id: str
+    phone: str  # 原 email
+    username: Optional[str]
+    role: str
+    is_active: bool
+    expires_at: Optional[str]
+    created_at: str
+```
+
+---
+
+## 🖥️ 前端修改
+
+### 1. 登录页面 (`login/page.tsx`)
+
+**文件**: `frontend/src/app/login/page.tsx`
+
+```tsx
+const [phone, setPhone] = useState('');
+
+// 验证手机号格式
+if (!/^\d{11}$/.test(phone)) {
+    setError('请输入正确的11位手机号');
+    return;
+}
+
+<input
+    type="tel"
+    value={phone}
+    onChange={(e) => setPhone(e.target.value.replace(/\D/g, '').slice(0, 11))}
+    maxLength={11}
+    placeholder="请输入11位手机号"
+/>
+```
+
+### 2. 注册页面 (`register/page.tsx`)
+
+同样使用手机号输入，增加 11 位数字验证。
+
+### 3. Auth 工具函数 (`auth.ts`)
+
+**文件**: `frontend/src/lib/auth.ts`
+
+```typescript
+export interface User {
+    id: string;
+    phone: string;  // 原 email
+    username: string | null;
+    role: string;
+    is_active: boolean;
+}
+
+export async function login(phone: string, password: string): Promise<AuthResponse> { ... }
+export async function register(phone: string, password: string, username?: string): Promise<AuthResponse> { ... }
+export async function changePassword(oldPassword: string, newPassword: string): Promise<AuthResponse> { ... }
+```
+
+### 4. 首页账户设置下拉菜单 (`page.tsx`)
+
+**文件**: `frontend/src/app/page.tsx`
+
+将原来的"退出"按钮改为账户设置下拉菜单：
+
+```tsx
+function AccountSettingsDropdown() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showPasswordModal, setShowPasswordModal] = useState(false);
+  // ...
+
+  return (
+    <div className="relative">
+      <button onClick={() => setIsOpen(!isOpen)}>
+        ⚙️ 账户
+      </button>
+
+      {/* 下拉菜单 */}
+      {isOpen && (
+        <div className="absolute right-0 mt-2 w-40 bg-gray-800 ...">
+          <button onClick={() => setShowPasswordModal(true)}>
+            🔐 修改密码
+          </button>
+          <button onClick={handleLogout} className="text-red-300">
+            🚪 退出登录
+          </button>
+        </div>
+      )}
+
+      {/* 修改密码弹窗 */}
+      {showPasswordModal && (
+        <div className="fixed inset-0 z-50 ...">
+          <form onSubmit={handleChangePassword}>
+            <input placeholder="当前密码" />
+            <input placeholder="新密码" />
+            <input placeholder="确认新密码" />
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+### 5. 管理员页面 (`admin/page.tsx`)
+
+**文件**: `frontend/src/app/admin/page.tsx`
+
+```tsx
+interface UserListItem {
+    id: string;
+    phone: string;  // 原 email
+    // ...
+}
+
+// 显示手机号而非邮箱
+<div className="text-gray-400 text-sm">{user.phone}</div>
+```
+
+---
+
+## 🗄️ 数据库迁移
+
+### 迁移脚本
+
+**文件**: `backend/database/migrate_to_phone.sql`
+
+```sql
+-- 删除旧表 (CASCADE 处理外键依赖)
+DROP TABLE IF EXISTS user_sessions CASCADE;
+DROP TABLE IF EXISTS social_accounts CASCADE;
+DROP TABLE IF EXISTS users CASCADE;
+
+-- 重新创建使用 phone 字段的表
+CREATE TABLE users (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    phone TEXT UNIQUE NOT NULL,
+    -- ...
+);
+
+-- 重新创建依赖表和索引
+CREATE TABLE user_sessions (...);
+CREATE TABLE social_accounts (...);
+CREATE INDEX idx_users_phone ON users(phone);
+```
+
+### 执行方式
+
+```bash
+# 方式一：Docker 命令
+docker exec -i supabase-db psql -U postgres < backend/database/migrate_to_phone.sql
+
+# 方式二：Supabase Studio SQL Editor
+# 打开 https://supabase.hbyrkj.top -> SQL Editor -> 粘贴执行
+```
+
+---
+
+## ✅ 部署步骤
+
+```bash
+# 1. 执行数据库迁移
+docker exec -i supabase-db psql -U postgres < backend/database/migrate_to_phone.sql
+
+# 2. 重新构建前端
+cd frontend && npm run build
+
+# 3. 重启服务
+pm2 restart vigent2-backend vigent2-frontend
+```
+
+---
+
+## 📁 今日修改文件清单
+
+| 文件 | 变更类型 | 说明 |
+|------|----------|------|
+| `backend/database/schema.sql` | 修改 | email → phone |
+| `backend/database/migrate_to_phone.sql` | 新增 | 数据库迁移脚本 |
+| `backend/app/api/auth.py` | 修改 | 手机号验证 + 修改密码 API |
+| `backend/app/api/admin.py` | 修改 | UserListItem.email → phone |
+| `backend/app/core/config.py` | 修改 | ADMIN_EMAIL → ADMIN_PHONE |
+| `backend/app/main.py` | 修改 | 管理员初始化使用 phone |
+| `backend/.env` | 修改 | ADMIN_PHONE=15549380526 |
+| `frontend/src/app/login/page.tsx` | 修改 | 手机号登录 + 11位验证 |
+| `frontend/src/app/register/page.tsx` | 修改 | 手机号注册 + 11位验证 |
+| `frontend/src/lib/auth.ts` | 修改 | phone 参数 + changePassword 函数 |
+| `frontend/src/app/page.tsx` | 修改 | AccountSettingsDropdown 组件 |
+| `frontend/src/app/admin/page.tsx` | 修改 | 用户列表显示手机号 |
+| `frontend/src/contexts/AuthContext.tsx` | 修改 | 存储完整用户信息含 expires_at |
+
+---
+
+## 🆕 后续完善 (Day 15 下午)
+
+### 账户有效期显示
+
+在账户下拉菜单中显示用户的有效期：
+
+| 显示情况 | 格式 |
+|----------|------|
+| 有设置 expires_at | `2026-03-15` |
+| NULL | `永久有效` |
+
+**相关修改**：
+- `backend/app/api/auth.py`: UserResponse 新增 `expires_at` 字段
+- `frontend/src/contexts/AuthContext.tsx`: 存储完整用户对象
+- `frontend/src/app/page.tsx`: 格式化并显示有效期
+
+### 点击外部关闭下拉菜单
+
+使用 `useRef` + `useEffect` 监听全局点击事件，点击菜单外部自动关闭。
+
+### 修改密码后强制重新登录
+
+密码修改成功后：
+1. 显示"密码修改成功，正在跳转登录页..."
+2. 1.5秒后调用登出 API
+3. 跳转到登录页面
+
+---
+
+## 🔗 相关文档
+
+- [task_complete.md](../task_complete.md) - 任务总览
+- [Day14.md](./Day14.md) - 模型升级 + AI 标题标签
+- [AUTH_DEPLOY.md](../AUTH_DEPLOY.md) - 认证系统部署指南