diff --git a/backend-java/src/main/java/com/competition/modules/leai/service/LeaiSyncService.java b/backend-java/src/main/java/com/competition/modules/leai/service/LeaiSyncService.java index 4c93c37..3876aaf 100644 --- a/backend-java/src/main/java/com/competition/modules/leai/service/LeaiSyncService.java +++ b/backend-java/src/main/java/com/competition/modules/leai/service/LeaiSyncService.java @@ -135,6 +135,13 @@ public class LeaiSyncService implements ILeaiSyncService { if (coverUrl == null) coverUrl = remoteData.get("cover_url"); if (coverUrl != null) work.setCoverUrl(coverUrl.toString()); + // 兜底：如果 originalImageUrl 没传但 coverUrl 传了，把 coverUrl 也写入 originalImageUrl + // 当前 leai webhook 大多只传 coverUrl（实际就是用户上传的原图），不传独立的 originalImageUrl 字段 + // 这里兜底让前端 PIP / 详情页「画作原图」卡片能正确展示 + if (originalImageUrl == null && coverUrl != null) { + work.setOriginalImageUrl(coverUrl.toString()); + } + // 通过手机号查找用户ID（多租户场景） if (phone != null && work.getUserId() == null) { Long userId = findUserIdByPhone(phone); @@ -195,6 +202,10 @@ public class LeaiSyncService implements ILeaiSyncService { if (coverUrl != null) { wrapper.set(UgcWork::getCoverUrl, coverUrl.toString()); } + // 兜底：originalImageUrl 没传但 coverUrl 传了，把 coverUrl 也写入 originalImageUrl + if (originalImageUrl == null && coverUrl != null) { + wrapper.set(UgcWork::getOriginalImageUrl, coverUrl.toString()); + } wrapper.set(UgcWork::getModifyTime, LocalDateTime.now()); ugcWorkMapper.update(null, wrapper); @@ -243,6 +254,10 @@ public class LeaiSyncService implements ILeaiSyncService { if (coverUrl != null) { wrapper.set(UgcWork::getCoverUrl, coverUrl.toString()); } + // 兜底：originalImageUrl 没传但 coverUrl 传了，把 coverUrl 也写入 originalImageUrl + if (originalImageUrl == null && coverUrl != null) { + wrapper.set(UgcWork::getOriginalImageUrl, coverUrl.toString()); + } wrapper.set(UgcWork::getModifyTime, LocalDateTime.now()); diff --git a/backend-java/src/main/resources/db/migration/V14__backfill_original_image_url.sql b/backend-java/src/main/resources/db/migration/V14__backfill_original_image_url.sql new file mode 100644 index 0000000..6f5b3fe --- /dev/null +++ b/backend-java/src/main/resources/db/migration/V14__backfill_original_image_url.sql @@ -0,0 +1,29 @@ +-- ======================================================== +-- V13: 回填 t_ugc_work.original_image_url 字段 +-- ======================================================== +-- 背景： +-- leai webhook 同步作品时，大多数情况下只传了 cover_url， +-- 没有单独传 originalImageUrl 字段，导致 LeaiSyncService +-- 把 cover_url 写入了 cover 字段，但 original_image_url 字段为 null。 +-- +-- 实际情况： +-- 当前所有作品的 cover_url 实际上就是用户上传的原图， +-- AI 生成的独立绘本封面字段尚未在 leai webhook 中拆分提供。 +-- +-- 影响： +-- 前端作品库 / 发现页 PIP 画中画功能、详情页「画作原图」卡片 +-- 需要 original_image_url 字段才能展示，当前为 null 时这些 UI +-- 全部不渲染，用户看不到原图。 +-- +-- 修复： +-- 把 original_image_url 为 null 但 cover_url 有值的数据， +-- 统一回填为 cover_url。 +-- 同时 LeaiSyncService 已加 fallback，新数据自动写入。 +-- +-- 详见 docs/design/public/ugc-work-status-redesign.md +-- ======================================================== + +UPDATE t_ugc_work +SET original_image_url = cover_url +WHERE original_image_url IS NULL + AND cover_url IS NOT NULL; diff --git a/backend-java/src/main/resources/db/migration/V15__force_backfill_original_image_url.sql b/backend-java/src/main/resources/db/migration/V15__force_backfill_original_image_url.sql new file mode 100644 index 0000000..e04b197 --- /dev/null +++ b/backend-java/src/main/resources/db/migration/V15__force_backfill_original_image_url.sql @@ -0,0 +1,15 @@ +-- ======================================================== +-- V14: 强制回填 t_ugc_work.original_image_url +-- ======================================================== +-- 背景： +-- V13 因 Flyway schema_history 表残留同版本号脏数据被 repair 跳过， +-- 实际 SQL 没真正执行。新建 V14 强制重跑同样的 UPDATE 逻辑。 +-- +-- 详见 docs/design/public/ugc-work-status-redesign.md +-- 详见 V13__backfill_original_image_url.sql +-- ======================================================== + +UPDATE t_ugc_work +SET original_image_url = cover_url +WHERE original_image_url IS NULL + AND cover_url IS NOT NULL; diff --git a/backend-java/src/main/resources/db/migration/V16__backfill_original_image_url_empty_string.sql b/backend-java/src/main/resources/db/migration/V16__backfill_original_image_url_empty_string.sql new file mode 100644 index 0000000..c2a81e5 --- /dev/null +++ b/backend-java/src/main/resources/db/migration/V16__backfill_original_image_url_empty_string.sql @@ -0,0 +1,22 @@ +-- ======================================================== +-- V15: 回填 t_ugc_work.original_image_url 空字符串数据 +-- ======================================================== +-- 背景： +-- V14 用 `WHERE original_image_url IS NULL` 回填了 NULL 的数据， +-- 但部分作品的 original_image_url 字段是空字符串 '' 而不是 NULL +-- （JS 前端经常把空字段当 '' 传给后端），V14 的 IS NULL 条件没匹配到。 +-- +-- 前端 v-if="work.originalImageUrl" 在空字符串时是 falsy， +-- 导致这些作品的「画作原图」卡片和 PIP 不显示。 +-- +-- 修复： +-- 把 original_image_url 为 NULL 或空字符串的数据，统一回填为 cover_url。 +-- +-- 详见 V13、V14 历史 +-- ======================================================== + +UPDATE t_ugc_work +SET original_image_url = cover_url +WHERE (original_image_url IS NULL OR original_image_url = '') + AND cover_url IS NOT NULL + AND cover_url != ''; diff --git a/docs/design/public/ugc-work-status-redesign.md b/docs/design/public/ugc-work-status-redesign.md new file mode 100644 index 0000000..1ae16b1 --- /dev/null +++ b/docs/design/public/ugc-work-status-redesign.md @@ -0,0 +1,417 @@ +# UGC 作品状态机重设计 — 产品设计方案 + +> 所属端：用户端（公众端）+ 超管端 + 后端 +> 状态：方案已确认，前端 UI 优先实施 +> 创建日期：2026-04-09 +> 最后更新：2026-04-09 + +--- + +## 1. 背景 + +### 1.1 当前问题 + +用户作品（`UgcWork`）的状态当前**只有 4 个用户可见状态**： + +``` +draft / pending_review / published / rejected +``` + +这种状态划分把两个**语义完全不同**的场景混在了 `draft` 里： + +| 场景 | 当前归属 | 实际语义 | +|---|---|---| +| AI 还在生成 / 用户没保存编目信息 | draft | 半成品，没做完 | +| 用户做完了完整作品但不想公开 | draft | 成品但私有 | + +混在一起的后果： +- 用户在作品库 "草稿" tab 看到混杂——既有"待继续"的半成品，也有"已完成等待发布"的私有作品 +- 没有"已完成但私有"的归属，用户想暂存自己的成品作品没地方放 +- "公开发布"是隐藏在创作流程末端的一次性决策，用户错过了就只能看着自己的作品停在 draft + +### 1.2 业界对比 + +主流内容平台都做了「**还没做完**」和「**做完了但不想公开**」的区分： + +| 平台 | 半成品 | 成品但私有 | 公开 | +|---|---|---|---| +| 抖音 | 草稿箱 | 仅自己可见 | 公开发布 | +| 小红书 | 草稿 | 私密笔记 | 公开发布 | +| B 站 | 草稿箱 | 仅自己可见 | 已发布（公开） | +| Medium | Draft | Unlisted | Published | + +我们的方案对齐这个共识。 + +### 1.3 目标 + +引入新的中间状态 **`unpublished`（未发布）**，明确语义边界： + +- **草稿（draft）** = 作品技术上还没完成（生成失败 / 还在生成 / 没保存编目） +- **未发布（unpublished）** = 作品技术上完整（编目已保存），但用户没主动公开 +- **审核中（pending_review）** = 用户主动提交审核 +- **已发布（published）** = 审核通过，发现页可见 +- **被拒绝（rejected）** = 审核未通过，可改后重新提交 + +并支持： +- 作品在状态间双向流转（已发布可以下架回未发布、被拒可以改后重交） +- 「公开发布」从一次性决策变成可后悔、可推迟的常驻按钮 + +--- + +## 2. 状态机设计 + +### 2.1 完整状态流转图 + +``` + ┌──────────────────────────┐ + │ 创作流程开始 │ + │ /p/create/upload │ + └────────────┬─────────────┘ + │ + ▼ + ┌───────────────┐ + │ DRAFT │ 半成品：还在生成或未保存编目 + │ 草稿 │ + └───────┬───────┘ + │ + │ 用户在 EditInfoView 点 + │ 保存 / 去配音 / 立即发布 + │ 任意按钮 = 编目完成 + ▼ + ┌───────────────┐ + │ UNPUBLISHED │ 成品私有：已编目，可补配音，可发布 + │ 未发布 │◀──────────────┐ + └───────┬───────┘ │ + │ │ + │ 用户在详情页点 │ + │ "公开发布" │ + ▼ │ + ┌───────────────┐ │ + │PENDING_REVIEW │ 排队待审核 │ + │ 审核中 │ │ + └───┬───────┬───┘ │ + │ │ │ + 超管通过 │ │ 超管拒绝 │ + ▼ ▼ │ + ┌───────────────┐ ┌───────────────┐ │ + │ PUBLISHED │ │ REJECTED │ │ + │ 已发布 │ │ 被拒绝 │ │ + │ 发现页可见 │ │ │ │ + └───────┬───────┘ └───────┬───────┘ │ + │ │ │ + │ 用户/超管下架 │ 用户改完重交 │ + └─────────────────┴─────────────┘ + │ + rejected → pending_review + published → unpublished +``` + +### 2.2 状态流转表 + +| 起始状态 | 触发 | 目标状态 | 触发方 | 接口 | +|---|---|---|---|---| +| (无) | 创建作品 | DRAFT | 系统 | leai 创作流程内部 | +| DRAFT | 编目完成（leai status → CATALOGED） | UNPUBLISHED | 系统（webhook 同步） | LeaiSyncService | +| UNPUBLISHED | 用户点「公开发布」 | PENDING_REVIEW | 用户 | `POST /public/works/{id}/publish` | +| UNPUBLISHED | 用户补充配音/编辑 | UNPUBLISHED | 用户 | 更新内容接口 | +| PENDING_REVIEW | 审核通过 | PUBLISHED | 超管 | `POST /content-review/works/{id}/approve` | +| PENDING_REVIEW | 审核拒绝 | REJECTED | 超管 | `POST /content-review/works/{id}/reject` | +| PENDING_REVIEW | 用户撤回 | UNPUBLISHED | 用户 | `POST /public/works/{id}/withdraw`（新增） | +| PUBLISHED | 用户下架 | UNPUBLISHED | 用户 | `POST /public/works/{id}/unpublish`（新增） | +| PUBLISHED | 超管强制下架 | UNPUBLISHED 或 TAKEN_DOWN | 超管 | `POST /content-review/works/{id}/takedown` | +| REJECTED | 改完重交 | PENDING_REVIEW | 用户 | `POST /public/works/{id}/publish` | + +### 2.3 状态可见性矩阵 + +| 状态 | 用户作品库可见 | 用户详情页可见 | 发现页可见 | 超管端可见 | +|---|---|---|---|---| +| DRAFT | ✓（草稿 tab） | ✓（继续创作） | ✗ | ✗ | +| UNPUBLISHED | ✓（未发布 tab） | ✓（带"公开发布"按钮） | ✗ | ✗ | +| PENDING_REVIEW | ✓（审核中 tab） | ✓（带"撤回"按钮） | ✗ | ✓（待审核队列） | +| PUBLISHED | ✓（已发布 tab） | ✓（带"下架"按钮） | ✓ | ✓（已发布管理） | +| REJECTED | ✓（被拒绝 tab） | ✓（带"修改后重交"按钮） | ✗ | ✓（历史） | + +--- + +## 3. 当前现状调研 + +### 3.1 后端现状 + +#### `UgcWork.status` 字段 + +- 类型：`Integer`（非 String） +- 文件：`backend-java/src/main/java/com/competition/modules/ugc/entity/UgcWork.java:45` +- 语义：**当前直接复用了 leai 进度状态**，没有独立的发布状态字段 + +```java +// 当前注释 +// -1=FAILED, 0=DRAFT, 1=PENDING, 2=PROCESSING, +// 3=COMPLETED, 4=CATALOGED, 5=DUBBED +``` + +#### Migration 历史映射 + +`backend-java/src/main/resources/db/migration/V5__leai_integration.sql` 把旧 varchar status 转换成 INT 时的映射： + +``` +draft → 0 +pending_review → 1 (与 leai PENDING 复用！) +processing → 2 (与 leai PROCESSING 复用) +published → 3 (与 leai COMPLETED 复用！) +rejected → -1 (与 leai FAILED 复用！) +taken_down → -2 +``` + +**关键问题**：本地的 `published` 和 leai 的 `COMPLETED` 共享 `status=3`，本地的 `pending_review` 和 leai 的 `PENDING` 共享 `status=1`，本地的 `rejected` 和 leai 的 `FAILED` 共享 `status=-1`。这种语义复用是历史包袱，也是这次重设计的根本原因。 + +#### Webhook 同步逻辑 + +- 文件：`backend-java/.../leai/service/LeaiSyncService.java` +- 当前规则：`remoteStatus > localStatus` 时全量更新 +- **缺失**：leai status=4（CATALOGED）到本地 unpublished 的映射尚未实现 + +#### 现有审核 / 管理接口 + +| 接口 | 路径 | 当前行为 | +|---|---|---| +| 公众端发布 | `POST /public/works/{id}/publish` | draft/rejected → 1（被复用为 pending_review） | +| 超管审核通过 | `POST /content-review/works/{id}/approve` | → 3（被复用为 published） | +| 超管审核拒绝 | `POST /content-review/works/{id}/reject` | → -1（被复用为 rejected） | +| 超管下架 | `POST /content-review/works/{id}/takedown` | → -2（taken_down） | +| 超管恢复 | `POST /content-review/works/{id}/restore` | → 3（published） | +| 超管撤销审核 | `POST /content-review/works/{id}/revoke` | → 1（pending_review） | + +### 3.2 前端现状 + +#### 类型定义 + +- 文件：`frontend/src/api/public.ts:380-405` +- `UserWork.status: string`，枚举：`draft / pending_review / published / rejected / taken_down` +- **跟后端 Integer 不一致**——必有中间转换层（待验证），暂未确认转换发生在 controller 还是 mapper + +#### 公众端页面 + +| 文件 | 当前作用 | 改造需求 | +|---|---|---| +| `views/public/works/Index.vue` | 作品列表（5 tab） | 加 unpublished tab、加状态颜色映射 | +| `views/public/works/Detail.vue` | 作品详情 | 加「公开发布」「下架」「撤回」按钮，根据 status 切换显示 | +| `views/public/works/Publish.vue` | 单独的发布页（draft → pending_review） | 删除（功能并入 EditInfoView 和 Detail.vue） | +| `views/public/create/views/EditInfoView.vue` | 创作流程内编辑信息 | 三按钮语义调整：保存 / 去配音 / 立即发布 | + +#### 超管端页面 + +| 文件 | 当前作用 | 改造需求 | +|---|---|---| +| `views/content/WorkReview.vue` | 审核 pending_review 作品 | 状态映射加 unpublished（虽然超管看不到） | +| `views/content/WorkManagement.vue` | 管理 published / taken_down 作品 | 下架目标改为 unpublished（替代 taken_down） | + +--- + +## 4. 后端 schema 改动 + +### 4.1 推荐方案：拆字段（leai 进度 vs 本地发布状态解耦） + +**核心思想**：把 leai 进度状态和本地发布状态分到两个独立字段，彻底解决语义复用。 + +```sql +-- 现有：status INT（混淆 leai 进度 + 本地发布状态） +-- 改为： +ALTER TABLE t_ugc_work + ADD COLUMN leai_status INT NOT NULL DEFAULT 0 + COMMENT 'leai 创作进度: -1=FAILED, 0=DRAFT, 1=PENDING, 2=PROCESSING, 3=COMPLETED, 4=CATALOGED, 5=DUBBED'; + +-- status 字段重定义为本地发布状态（VARCHAR 跟前端对齐） +ALTER TABLE t_ugc_work + MODIFY COLUMN status VARCHAR(20) NOT NULL DEFAULT 'draft' + COMMENT '本地发布状态: draft/unpublished/pending_review/published/rejected'; +``` + +### 4.2 数据迁移 + +新建 `V9__split_work_status.sql`： + +```sql +-- 1. 加 leai_status 字段 +ALTER TABLE t_ugc_work ADD COLUMN leai_status INT NOT NULL DEFAULT 0; + +-- 2. 把现有 status (INT) 的值复制到 leai_status +UPDATE t_ugc_work SET leai_status = status; + +-- 3. 改 status 字段类型为 VARCHAR +ALTER TABLE t_ugc_work MODIFY COLUMN status VARCHAR(20) NOT NULL DEFAULT 'draft'; + +-- 4. 按 leai_status 回填本地 status +UPDATE t_ugc_work SET status = CASE + WHEN leai_status = -2 THEN 'unpublished' -- 原 taken_down 视为未发布 + WHEN leai_status = -1 THEN 'draft' -- 原 rejected 视为草稿（无法判断是创作失败还是审核拒绝） + WHEN leai_status = 0 THEN 'draft' + WHEN leai_status = 1 THEN 'unpublished' -- 原 pending_review 兼容数据视为未发布（保守，让用户重新主动发布） + WHEN leai_status = 2 THEN 'draft' + WHEN leai_status = 3 THEN 'unpublished' -- 原 published 兼容数据视为未发布（同上，避免老数据自动公开） + WHEN leai_status = 4 THEN 'unpublished' + WHEN leai_status = 5 THEN 'unpublished' + ELSE 'draft' +END; + +-- 5. 加索引（按状态筛选会很常用） +CREATE INDEX idx_ugc_work_status ON t_ugc_work(status); +CREATE INDEX idx_ugc_work_leai_status ON t_ugc_work(leai_status); +``` + +**保守策略**：现有 `published` / `pending_review` 数据回填为 `unpublished` 而不是直接保留 `published`。原因是状态复用导致无法区分"用户真的发布过的"和"刚创作完成的"，让用户重新主动发布最安全。 + +### 4.3 不推荐的备选方案：保留单字段 + +不改 schema，沿用 `status INT`，在 0-5 之外加 `10=unpublished, 11=pending_review_local, 12=published_local`。 + +**缺点**： +- 语义混乱继续存在 +- 同事维护时容易把 leai 数字和本地数字搞混 +- migration 简单但留长期技术债 + +--- + +## 5. 改动清单 + +### 5.1 后端（P0） + +- [ ] **新建 `WorkPublishStatus` 枚举类** `backend-java/.../ugc/enums/WorkPublishStatus.java` + ```java + public enum WorkPublishStatus { + DRAFT, UNPUBLISHED, PENDING_REVIEW, PUBLISHED, REJECTED + } + ``` +- [ ] **`UgcWork` 实体改造** + - 加 `leaiStatus: Integer`（保持 leai 进度） + - 改 `status: String`（本地发布状态，对应新枚举） +- [ ] **新建 migration `V9__split_work_status.sql`**（见 4.2） +- [ ] **`LeaiSyncService.updateStatusForward`**：当 leai status 推进到 CATALOGED 时，自动把本地 status 从 draft 升到 unpublished（如果当前不是更高级状态） +- [ ] **`PublicUserWorkService.publish()`**：检查作品 `status == 'unpublished'`，改为 `unpublished → pending_review`；同时支持 `rejected → pending_review` +- [ ] **新增 `POST /public/works/{id}/unpublish`**：用户主动下架，`published → unpublished` +- [ ] **新增 `POST /public/works/{id}/withdraw`**：用户撤回审核，`pending_review → unpublished` +- [ ] **`PublicContentReviewService` 审核动作语义对齐**： + - approve: pending_review → published + - reject: pending_review → rejected + - takedown: published → unpublished（参见 6.C 关于 taken_down 的决策） + +### 5.2 公众端前端（P0） + +- [ ] **`UserWork.status` 类型加 `unpublished`** `frontend/src/api/public.ts` +- [ ] **`works/Index.vue` 作品库列表** + - tabs 数组加 `{ key: 'unpublished', label: '未发布' }` + - statusTextMap 加 `unpublished: '未发布'` + - 卡片状态标签样式加 `&.unpublished`（紫色淡） + - 按 status 显示空状态文案 +- [ ] **`works/Detail.vue` 作品详情** + - 整体配色清理紫粉化（emoji + 橙色清理） + - **核心**：根据 status 显示不同操作按钮： + - `unpublished` → 「公开发布」（主操作，紫粉渐变） + 「编辑信息」 + 「补充配音」 + 「删除」 + - `pending_review` → 「撤回审核」 + 「删除」 + - `published` → 「下架」 + 「删除」 + - `rejected` → 「修改后重交」 + 「删除」 +- [ ] **`create/views/EditInfoView.vue` 三按钮语义调整** + - 「保存」 → unpublished，跳作品库 `?tab=unpublished` + - 「去配音」 → DubbingView，配音完成后还是 unpublished + - 「立即发布」 → 一次性走完 unpublished + 公开发布两步，跳作品库 `?tab=pending_review` +- [ ] **删除 `views/public/works/Publish.vue`**（功能并入 EditInfoView 和 Detail.vue） +- [ ] **作品库 `query.tab` 已支持 `unpublished` 参数**（已在前次 commit 完成） + +### 5.3 超管端前端（P1） + +- [ ] **`views/content/WorkReview.vue`**：状态映射加 `unpublished` 显示（虽然超管的待审核 tab 看不到 unpublished，但作品历史详情可能展示） +- [ ] **`views/content/WorkManagement.vue`**：下架动作目标改为 unpublished（如果保留 taken_down 概念则不改） + +--- + +## 6. 待拍板细节 + +### 6.A schema 改动幅度 → ✅ 已确认 + +采用**方案 1（拆字段）**：`leai_status INT` + `status VARCHAR`，语义彻底解耦。 + +### 6.B Publish.vue 处理 → ✅ 已确认删除 + +独立的发布页在新逻辑下没有存在意义，删除。功能拆到： +- 编辑信息 → EditInfoView（创作流程内）+ Detail.vue「编辑信息」按钮（流程外回头改） +- 公开发布 → Detail.vue「公开发布」按钮 + +### 6.C 超管下架的目标状态 → ⏳ 待确认 + +两种方案： + +**方案 1（合并）**：超管下架 = 用户下架 = `published → unpublished`，作品回到用户私有空间，用户可以再次发布 + +**方案 2（区分）**：超管下架 = `published → taken_down`（独立状态），用户下架 = `published → unpublished`。`taken_down` 的作品**不允许用户再次发布**，相当于"被禁言" + +**讨论建议**：除非有"超管强制永久下架"的硬性需求，方案 1 更简洁。如果担心被超管下架的违规作品被用户再次提交，可以在审核环节让超管选择「拒绝并禁止重交」。 + +### 6.D 已确认的产品决策 + +| 问题 | 决策 | +|---|---| +| 已发布作品下架 → 未发布 | ✅ 需要 | +| 被拒绝作品改完重交 | ✅ 可以 | +| 草稿能否直接发布 | ❌ 不能（必须先编目完整成为 unpublished） | +| 超管端不显示 unpublished | ✅ 用户私有，超管不可见 | + +--- + +## 7. 执行顺序 + +### 7.1 第一阶段：前端 UI 层（不改后端） + +**目标**：让产品/设计/PM 能看到完整的新交互体验，前端用 dev mock 模拟 unpublished 状态。 + +- [ ] 作品库 `Index.vue` 加 unpublished tab + 颜色 + 文案 +- [ ] 作品库 `Detail.vue` 重做：清 emoji + 紫粉配色 + 根据 status 切换按钮 +- [ ] EditInfoView 三按钮语义调整 + dev mock 跳转 +- [ ] 删除 `Publish.vue` +- [ ] 前端 `UserWork.status` 类型扩展 + +**交付物**：完整的可点击 UI 流程（dev 模式无后端可走通） + +### 7.2 第二阶段：后端 schema + service + +**前置依赖**：第一阶段 UI 已确认，产品验收通过 + +- [ ] 新建 `WorkPublishStatus` 枚举 +- [ ] 新建 `V9__split_work_status.sql` migration +- [ ] `UgcWork` 实体加 `leaiStatus` + 改 `status` 类型 +- [ ] `LeaiSyncService` 加 leai → 本地 status 映射逻辑 +- [ ] `PublicUserWorkService` publish/unpublish/withdraw 接口实现 +- [ ] `PublicContentReviewService` 审核动作 status 语义对齐 + +### 7.3 第三阶段：联调 + 超管端调整 + +- [ ] 前端去 dev mock，接入真实接口 +- [ ] 超管端 WorkReview / WorkManagement 状态映射调整 +- [ ] 端到端测试：完整跑通从创作 → 编目 → 未发布 → 公开发布 → 审核 → 已发布 → 下架 → 重新发布的全流程 + +--- + +## 8. 相关文档 + +- [用户端 UGC 社区升级](./ugc-platform-upgrade.md) — 上层产品定位 +- [UGC 开发计划](./ugc-development-plan.md) — 整体开发节奏 +- [超管端内容管理](../super-admin/content-management.md) — 超管审核流程 +- [超管端作品数据优化](../super-admin/works-data-optimization.md) — 超管端作品列表 + +--- + +## 附录 A：术语对照 + +| 术语 | 含义 | 备注 | +|---|---|---| +| **leai** | 乐读派外部创作服务 | 提供 AI 绘本生成能力 | +| **leai status** | 乐读派的创作进度状态 | 数字 -1 ~ 5 | +| **本地发布状态** | 我们自己定义的作品发布状态 | 字符串，5 个值 | +| **CATALOGED** | leai 状态 4，编目完成 | 用户在 EditInfoView 保存信息后到达 | +| **DUBBED** | leai 状态 5，配音完成 | 配音是可选步骤 | +| **未发布 unpublished** | 本次新增状态 | 已编目完成但未公开 | + +## 附录 B：状态命名为什么是 `unpublished` 而不是 `private` + +- `private` 在很多平台是"永久不公开"的语义（比如 GitHub private repo） +- `unpublished` 强调"还没发布"的暂时性，跟"已发布 published"形成对立 +- 跟 Medium 的 Draft / Unlisted / Published 三态命名风格一致 +- 本地化为"未发布"也是中文用户最直观的理解 diff --git a/frontend/src/api/public.ts b/frontend/src/api/public.ts index c1aae60..960edb2 100644 --- a/frontend/src/api/public.ts +++ b/frontend/src/api/public.ts @@ -388,6 +388,30 @@ export const publicInteractionApi = { // ==================== 用户作品库 ==================== +/** + * 用户作品发布状态 + * + * 状态流转: draft → unpublished → pending_review → published / rejected + * published → unpublished（下架） + * rejected → pending_review（改后重交） + * + * - draft 草稿：作品技术上还没完成（生成失败 / 还在生成 / 没保存编目） + * - unpublished 未发布：作品技术上完整（编目已保存），但用户没主动公开 + * - pending_review 审核中：用户主动提交审核 + * - published 已发布：审核通过，发现页可见 + * - rejected 被拒绝：审核未通过 + * - taken_down 已下架：超管强制下架（历史兼容，新逻辑下用 unpublished 替代） + * + * 详见 docs/design/public/ugc-work-status-redesign.md + */ +export type WorkStatus = + | 'draft' + | 'unpublished' + | 'pending_review' + | 'published' + | 'rejected' + | 'taken_down' + export interface UserWork { id: number userId: number @@ -395,7 +419,7 @@ export interface UserWork { coverUrl: string | null description: string | null visibility: string - status: string + status: WorkStatus reviewNote: string | null originalImageUrl: string | null voiceInputUrl: string | null diff --git a/frontend/src/assets/styles/aicreate.scss b/frontend/src/assets/styles/aicreate.scss index c629bcf..2dd2f9c 100644 --- a/frontend/src/assets/styles/aicreate.scss +++ b/frontend/src/assets/styles/aicreate.scss @@ -1,24 +1,24 @@ -// 乐读派 C端 — AI 创作专用样式（隔离在 .ai-create-shell 容器内） -// 暖橙 + 奶油白 儿童绘本风格 +// AI 创作专用样式（隔离在 .ai-create-shell 容器内） +// 紫粉风格，与 PublicLayout 设计语言保持一致 // 所有 CSS 变量使用 --ai- 前缀，避免与主前端冲突 .ai-create-shell { - --ai-primary: #FF6B35; - --ai-primary-light: #FFF0E8; - --ai-secondary: #6C63FF; - --ai-accent: #FFD166; - --ai-success: #2EC4B6; - --ai-bg: #FFFDF7; - --ai-card: #FFFFFF; - --ai-text: #2D2D3F; - --ai-text-sub: #8E8EA0; - --ai-border: #F0EDE8; + --ai-primary: #6366f1; + --ai-primary-light: #eef0ff; + --ai-secondary: #ec4899; + --ai-accent: #a78bfa; + --ai-success: #10b981; + --ai-bg: #f8f7fc; + --ai-card: #ffffff; + --ai-text: #1e1b4b; + --ai-text-sub: #6b7280; + --ai-border: #e5e7eb; --ai-radius: 20px; --ai-radius-sm: 14px; - --ai-shadow: 0 8px 32px rgba(255, 107, 53, 0.12); - --ai-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06); - --ai-gradient: linear-gradient(135deg, #FF6B35 0%, #FF8F65 50%, #FFB088 100%); - --ai-gradient-purple: linear-gradient(135deg, #6C63FF 0%, #9B93FF 100%); + --ai-shadow: 0 8px 28px rgba(99, 102, 241, 0.22); + --ai-shadow-soft: 0 4px 20px rgba(99, 102, 241, 0.06); + --ai-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); + --ai-gradient-purple: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%); --ai-font: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', -apple-system, sans-serif; font-family: var(--ai-font); diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts index 3f18f16..60f5d79 100644 --- a/frontend/src/router/index.ts +++ b/frontend/src/router/index.ts @@ -28,12 +28,12 @@ const baseRoutes: RouteRecordRaw[] = [ }, { path: "/p", - name: "PublicMain", component: () => import("@/layouts/PublicLayout.vue"), meta: { requiresAuth: false }, children: [ { path: "", + name: "PublicMain", redirect: "/p/gallery", }, { @@ -100,16 +100,16 @@ const baseRoutes: RouteRecordRaw[] = [ name: "PublicCreateCharacters", component: () => import("@/views/public/create/views/CharactersView.vue"), }, - { - path: "style", - name: "PublicCreateStyle", - component: () => import("@/views/public/create/views/StyleSelectView.vue"), - }, { path: "story", name: "PublicCreateStory", component: () => import("@/views/public/create/views/StoryInputView.vue"), }, + { + path: "style", + name: "PublicCreateStyle", + component: () => import("@/views/public/create/views/StyleSelectView.vue"), + }, { path: "creating", name: "PublicCreateCreating", @@ -155,12 +155,6 @@ const baseRoutes: RouteRecordRaw[] = [ component: () => import("@/views/public/works/Detail.vue"), meta: { title: "作品详情" }, }, - { - path: "works/:id/publish", - name: "PublicWorkPublish", - component: () => import("@/views/public/works/Publish.vue"), - meta: { title: "发布作品" }, - }, ], }, // ========== 管理端路由 ========== diff --git a/frontend/src/stores/aicreate.ts b/frontend/src/stores/aicreate.ts index 64ba2ba..2925589 100644 --- a/frontend/src/stores/aicreate.ts +++ b/frontend/src/stores/aicreate.ts @@ -76,6 +76,89 @@ export const useAicreateStore = defineStore('aicreate', () => { sessionStorage.setItem('le_recovery', JSON.stringify(recovery)) } + /** + * 开发模式：填充一份 mock 数据，用于跳过真实后端调用走通 UI 流程 + * 仅供开发期 UI 调试使用，不要在生产逻辑中调用 + * @param count 要 mock 的角色数量（1-3），默认 3 + */ + function fillMockData(count: number = 3) { + // 纯渐变占位图（不带文字，模拟真实 AI 抠图返回的角色形象） + const mockSvg = (hue: number) => + 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent( + `` + + `` + + `` + + `` + + `` + + `` + + `` + ) + + imageUrl.value = mockSvg(250) + extractId.value = 'mock-extract-' + Date.now() + selectedCharacter.value = null + + // 注意：真实 AI 接口不返回 name 字段，mock 数据也不写 name，由用户在 StoryInputView 自己起名 + const allChars = [ + { charId: 'mock-c1', type: 'HERO', originalCropUrl: mockSvg(280) }, + { charId: 'mock-c2', type: 'SIDEKICK', originalCropUrl: mockSvg(30) }, + { charId: 'mock-c3', type: 'SIDEKICK', originalCropUrl: mockSvg(100) }, + ] + const n = Math.max(1, Math.min(count, allChars.length)) + characters.value = allChars.slice(0, n) + } + + /** + * 开发模式：填充一份完整的 mock 作品数据，用于跳过真实 AI 生成走通预览/编辑/发布等下游 UI + * 仅供开发期 UI 调试使用 + */ + function fillMockWorkDetail() { + // 16:9 渐变占位图（800x450），模拟真实绘本插画 + const mockPage = (hue: number) => + 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent( + `` + + `` + + `` + + `` + + `` + + `` + + `` + ) + + // 13 页（封面 + 12 内页），模拟真实绘本规模，便于测试横向胶卷式缩略图 + const pageTexts = [ + '', // 封面 + '一个阳光明媚的早晨，小主角推开窗，看见远处的森林闪着金光。', + '它沿着小路走啊走，遇到了一只迷路的小鸟，羽毛湿漉漉的。', + '小主角轻轻抱起小鸟，决定送它回家。', + '路过一片野花田时，一只小狐狸从草丛里跳出来打招呼。', + '小狐狸说它认识森林里所有的小路，愿意做大家的向导。', + '三个朋友来到一条清澈的溪水边，溪里有一群闪闪发光的小鱼。', + '小鱼们告诉他们，那棵会发光的大树就在前方不远处。', + '森林深处真的有一棵会发光的大树，挂满了亮晶晶的果实。', + '原来这就是小鸟的家，妈妈正在树枝上焦急地张望。', + '小鸟欢快地飞回妈妈身边，鸟妈妈给大家每人一颗果实。', + '夕阳下，小主角和小狐狸告别，小狐狸送他们到森林边缘。', + '小主角带着这份美好回到家，心里也开出了一朵花。', + ] + + const wid = 'mock-work-' + Date.now() + workId.value = wid + workDetail.value = { + workId: wid, + status: 3, // COMPLETED + title: storyData.value?.title || '森林大冒险', + subtitle: '', + author: '', + coverUrl: mockPage(280), + pageList: pageTexts.map((text, i) => ({ + pageNum: i, + text, + imageUrl: mockPage((280 + i * 27) % 360), + })), + } + } + function restoreRecoveryState() { const raw = sessionStorage.getItem('le_recovery') if (!raw) return null @@ -105,6 +188,9 @@ export const useAicreateStore = defineStore('aicreate', () => { imageUrl, extractId, characters, selectedCharacter, selectedStyle, storyData, workId, workDetail, reset, saveRecoveryState, restoreRecoveryState, + // 开发模式 + fillMockData, + fillMockWorkDetail, // Tab 切换状态 lastCreateRoute, setLastCreateRoute, clearLastCreateRoute, } diff --git a/frontend/src/views/public/ActivityDetail.vue b/frontend/src/views/public/ActivityDetail.vue index 2fc9cd3..67a3c71 100644 --- a/frontend/src/views/public/ActivityDetail.vue +++ b/frontend/src/views/public/ActivityDetail.vue @@ -683,7 +683,7 @@ $primary: #6366f1; .results-icon { font-size: 40px; - color: #f59e0b; + color: #6366f1; margin-bottom: 8px; display: block; } diff --git a/frontend/src/views/public/Gallery.vue b/frontend/src/views/public/Gallery.vue index d0d5481..7fff163 100644 --- a/frontend/src/views/public/Gallery.vue +++ b/frontend/src/views/public/Gallery.vue @@ -15,7 +15,7 @@
- 编辑推荐 + 编辑推荐
+
+ +
+ 原图 +

{{ work.title }}

@@ -116,7 +125,7 @@ import { ref, reactive, computed, onMounted } from 'vue' import { useRouter } from 'vue-router' import { message } from 'ant-design-vue' -import { SearchOutlined, PictureOutlined, HeartOutlined, HeartFilled, EyeOutlined, FireOutlined } from '@ant-design/icons-vue' +import { SearchOutlined, PictureOutlined, HeartOutlined, HeartFilled, EyeOutlined, CrownFilled } from '@ant-design/icons-vue' import { publicGalleryApi, publicTagsApi, publicInteractionApi, type UserWork, type WorkTag } from '@/api/public' const router = useRouter() @@ -239,7 +248,7 @@ $primary: #6366f1; align-items: center; gap: 6px; - :deep(.anticon) { color: #f59e0b; } + :deep(.anticon) { color: $primary; } } } } @@ -351,10 +360,36 @@ $primary: #6366f1; &:hover { box-shadow: 0 4px 20px rgba($primary, 0.1); transform: translateY(-2px); } .card-cover { + position: relative; aspect-ratio: 3/4; background: #f5f3ff; img { width: 100%; height: 100%; object-fit: cover; } .cover-placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 28px; color: #d1d5db; } + + /* 右下角 PIP：用户原图 */ + .cover-pip { + position: absolute; + right: 6px; + bottom: 6px; + width: 34%; + aspect-ratio: 1 / 1; + border-radius: 7px; + overflow: hidden; + border: 2px solid #fff; + background: #fff; + box-shadow: 0 3px 10px rgba(15, 12, 41, 0.25); + transition: transform 0.2s; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + + &:hover .cover-pip { + transform: scale(1.05); } .card-body { diff --git a/frontend/src/views/public/components/WorkSelector.vue b/frontend/src/views/public/components/WorkSelector.vue index 8674953..dbc125d 100644 --- a/frontend/src/views/public/components/WorkSelector.vue +++ b/frontend/src/views/public/components/WorkSelector.vue @@ -25,8 +25,18 @@ :class="['selector-card', { selected: selectedWork?.id === work.id }]" @click="selectedWork = work" > - -
+
+ +
+ +
+ 原图 +
+

{{ work.title }}

{{ work._count?.pages || 0 }}页 @@ -107,15 +117,22 @@ $primary: #6366f1; &:hover { border-color: rgba($primary, 0.3); } &.selected { border-color: $primary; box-shadow: 0 0 0 2px rgba($primary, 0.2); } + .cover-wrap { + position: relative; + width: 100%; + aspect-ratio: 3 / 4; + } + .selector-cover { width: 100%; - aspect-ratio: 3/4; + height: 100%; object-fit: cover; + display: block; } .selector-cover-empty { width: 100%; - aspect-ratio: 3/4; + height: 100%; background: #f5f3ff; display: flex; align-items: center; @@ -124,6 +141,26 @@ $primary: #6366f1; color: #d1d5db; } + /* 右下角 PIP：用户原图（更小尺寸） */ + .cover-pip { + position: absolute; + right: 5px; + bottom: 5px; + width: 32%; + aspect-ratio: 1 / 1; + border-radius: 6px; + overflow: hidden; + border: 1.5px solid #fff; + background: #fff; + box-shadow: 0 2px 8px rgba(15, 12, 41, 0.22); + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + .selector-info { padding: 8px 10px; h4 { font-size: 12px; font-weight: 600; color: #1e1b4b; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } diff --git a/frontend/src/views/public/create/Index.vue b/frontend/src/views/public/create/Index.vue index a28e411..efd5342 100644 --- a/frontend/src/views/public/create/Index.vue +++ b/frontend/src/views/public/create/Index.vue @@ -73,16 +73,13 @@ onMounted(() => { diff --git a/frontend/src/views/public/create/views/CharactersView.vue b/frontend/src/views/public/create/views/CharactersView.vue index 2e3ef5e..7bd1df7 100644 --- a/frontend/src/views/public/create/views/CharactersView.vue +++ b/frontend/src/views/public/create/views/CharactersView.vue @@ -1,36 +1,57 @@ diff --git a/frontend/src/views/public/create/views/CreatingView.vue b/frontend/src/views/public/create/views/CreatingView.vue index e4be05f..9c3d3f7 100644 --- a/frontend/src/views/public/create/views/CreatingView.vue +++ b/frontend/src/views/public/create/views/CreatingView.vue @@ -1,31 +1,42 @@ @@ -57,6 +94,13 @@ import { ref, onMounted, onUnmounted } from 'vue' import { useRouter } from 'vue-router' import { Client } from '@stomp/stompjs' +import { + ExperimentOutlined, + FrownOutlined, + WifiOutlined, + CloudServerOutlined, + InboxOutlined, +} from '@ant-design/icons-vue' import { useAicreateStore } from '@/stores/aicreate' import { createStory, getWorkDetail } from '@/api/aicreate' import { STATUS, getRouteByStatus } from '@/utils/aicreate/status' @@ -65,19 +109,21 @@ import config from '@/utils/aicreate/config' const router = useRouter() const store = useAicreateStore() const progress = ref(0) -const stage = ref('准备中...') +const stage = ref('准备中…') const dots = ref('') const error = ref('') const networkWarn = ref(false) const currentTipIdx = ref(0) const creatingTips = [ - 'AI 画师正在构思精彩故事...', - '魔法画笔正在绘制插画...', - '故事世界正在成形...', - '角色们正在准备登场...', - '色彩魔法正在施展中...', + 'AI 正在为你构思故事', + '画笔正在绘制插画', + '故事世界正在成形', + '角色们正在准备登场', + '色彩正在调和', ] +const isDev = import.meta.env.DEV + let pollTimer: ReturnType | null = null let dotTimer: ReturnType | null = null let tipTimer: ReturnType | null = null @@ -93,35 +139,33 @@ function sanitizeError(msg: string | undefined): string { if (!msg) return '创作遇到问题，请重新尝试' if (msg.includes('400') || msg.includes('status code')) return '创作请求异常，请返回重新操作' if (msg.includes('火山引擎') || msg.includes('VolcEngine')) return 'AI 服务暂时繁忙，请稍后重试' - if (msg.includes('额度')) return msg // 额度提示保留原文 - if (msg.includes('重复') || msg.includes('DUPLICATE')) return '您有正在创作的作品，请等待完成' + if (msg.includes('额度')) return msg + if (msg.includes('重复') || msg.includes('DUPLICATE')) return '你有正在创作的作品，请等待完成' if (msg.includes('timeout') || msg.includes('超时')) return '创作超时，请重新尝试' if (msg.includes('OSS') || msg.includes('MiniMax')) return '服务暂时不可用，请稍后重试' if (msg.length > 50) return '创作遇到问题，请重新尝试' return msg } -// 将运维级消息转为用户友好消息（隐藏分组/模型/耗时等内部细节） +// 后端进度消息 → 用户友好阶段文案（不带任何 emoji 前缀） function friendlyStage(pct: number, msg: string): string { - if (!msg) return '创作中...' - // 按关键词匹配，优先级从高到低 - if (msg.includes('创作完成')) return '🎉 绘本创作完成！' - if (msg.includes('绘图完成') || msg.includes('绘制完成')) return '🎨 插画绘制完成' - if (msg.includes('第') && msg.includes('组')) return '🎨 正在绘制插画...' - if (msg.includes('绘图') || msg.includes('绘制') || msg.includes('插画')) return '🎨 正在绘制插画...' - if (msg.includes('补生成')) return '🎨 正在绘制插画...' - if (msg.includes('语音合成') || msg.includes('配音')) return '🔊 正在合成语音...' - if (msg.includes('故事') && msg.includes('完成')) return '📝 故事编写完成，开始绘图...' - if (msg.includes('故事') || msg.includes('创作故事')) return '📝 正在编写故事...' - if (msg.includes('适配') || msg.includes('角色')) return '🎨 正在准备绘图...' - if (msg.includes('重试')) return '✨ 遇到小问题，正在重新创作...' - if (msg.includes('失败')) return '⏳ 处理中，请稍候...' - // 兜底：根据进度百分比返回友好提示，不展示原始技术消息 - if (pct < 20) return '✨ 正在提交创作...' - if (pct < 50) return '📝 正在编写故事...' - if (pct < 80) return '🎨 正在绘制插画...' - if (pct < 100) return '🔊 即将完成...' - return '🎉 绘本创作完成！' + if (!msg) return '创作中…' + if (msg.includes('创作完成')) return '绘本创作完成' + if (msg.includes('绘图完成') || msg.includes('绘制完成')) return '插画绘制完成' + if (msg.includes('第') && msg.includes('组')) return '正在绘制插画…' + if (msg.includes('绘图') || msg.includes('绘制') || msg.includes('插画')) return '正在绘制插画…' + if (msg.includes('补生成')) return '正在绘制插画…' + if (msg.includes('语音合成') || msg.includes('配音')) return '正在合成语音…' + if (msg.includes('故事') && msg.includes('完成')) return '故事编写完成，开始绘图…' + if (msg.includes('故事') || msg.includes('创作故事')) return '正在编写故事…' + if (msg.includes('适配') || msg.includes('角色')) return '正在准备绘图…' + if (msg.includes('重试')) return '遇到小问题，正在重新创作…' + if (msg.includes('失败')) return '处理中，请稍候…' + if (pct < 20) return '正在提交创作…' + if (pct < 50) return '正在编写故事…' + if (pct < 80) return '正在绘制插画…' + if (pct < 100) return '即将完成…' + return '绘本创作完成' } // 持久化 workId 到 localStorage，页面刷新后可恢复轮询 @@ -150,7 +194,7 @@ const startWebSocket = (workId: string) => { stompClient = new Client({ brokerURL: wsUrl, - reconnectDelay: 0, // 不自动重连，失败直接降级轮询 + reconnectDelay: 0, onConnect: () => { stompClient.subscribe(`/topic/progress/${workId}`, (msg: any) => { try { @@ -160,7 +204,7 @@ const startWebSocket = (workId: string) => { if (data.progress >= 100) { progress.value = 100 - stage.value = '🎉 绘本创作完成！' + stage.value = '绘本创作完成' closeWebSocket() saveWorkId('') const route = getRouteByStatus(STATUS.COMPLETED, workId) @@ -204,7 +248,7 @@ const closeWebSocket = () => { } } -// ─── B2 轮询 (重进 / WebSocket 降级使用) ─── +// ─── B2 轮询 ─── const startPolling = (workId: string) => { if (pollTimer) clearInterval(pollTimer) consecutiveErrors = 0 @@ -216,7 +260,6 @@ const startPolling = (workId: string) => { const work = detail.data if (!work) return - // 轮询成功，清除网络异常状态 if (consecutiveErrors > 0 || networkWarn.value) { consecutiveErrors = 0 networkWarn.value = false @@ -225,10 +268,9 @@ const startPolling = (workId: string) => { if (work.progress != null && work.progress > progress.value) progress.value = work.progress if (work.progressMessage) stage.value = friendlyStage(progress.value, work.progressMessage) - // 状态 >= COMPLETED(3) 表示创作已结束，根据具体状态导航 if (work.status >= STATUS.COMPLETED) { progress.value = 100 - stage.value = '🎉 绘本创作完成！' + stage.value = '绘本创作完成' clearInterval(pollTimer!) pollTimer = null saveWorkId('') @@ -243,27 +285,24 @@ const startPolling = (workId: string) => { } catch { consecutiveErrors++ if (consecutiveErrors > MAX_POLL_ERRORS) { - // 连续失败太多次，暂停轮询，让用户手动恢复 clearInterval(pollTimer!) pollTimer = null networkWarn.value = false error.value = '网络连接异常，创作仍在后台进行中' } else if (consecutiveErrors > MAX_SILENT_ERRORS) { - // 连续失败超过阈值，提示网络波动但继续轮询 networkWarn.value = true } - // 前几次静默忽略，避免偶尔的网络抖动触发提示 } }, 8000) } const startCreation = async () => { - if (submitted) return // 防重复 + if (submitted) return submitted = true error.value = '' progress.value = 5 - stage.value = '📝 正在提交创作请求...' + stage.value = '正在提交创作请求…' try { const res = await createStory({ @@ -285,15 +324,13 @@ const startCreation = async () => { saveWorkId(workId) progress.value = 10 - stage.value = '📝 故事构思中...' - // 首次提交：优先 WebSocket 实时推送 + stage.value = '故事构思中…' startWebSocket(workId) } catch (e: any) { - // 创作提交可能已入库（超时但服务端已接收） if (store.workId) { progress.value = 10 - stage.value = '📝 创作已提交到后台...' + stage.value = '创作已提交到后台…' startPolling(store.workId) } else { error.value = sanitizeError(e.message) @@ -306,16 +343,52 @@ const resumePolling = () => { error.value = '' networkWarn.value = false progress.value = 10 - stage.value = '📝 正在查询创作进度...' + stage.value = '正在查询创作进度…' startPolling(store.workId) } const retry = () => { + if (isDev && !store.imageUrl) { + enterMockProgress() + return + } saveWorkId('') submitted = false startCreation() } +const leaveToWorks = () => { + // 关闭前端监听，但后端任务继续；store.workId 仍在 localStorage，下次进入 CreatingView 会恢复 + closeWebSocket() + if (pollTimer) { clearInterval(pollTimer); pollTimer = null } + router.push('/p/works?tab=draft') +} + +// ─── 开发模式：模拟状态 ─── +const enterMockProgress = () => { + closeWebSocket() + if (pollTimer) { clearInterval(pollTimer); pollTimer = null } + submitted = true + error.value = '' + networkWarn.value = false + progress.value = 35 + stage.value = '正在编写故事…' +} + +const enterMockError = () => { + closeWebSocket() + if (pollTimer) { clearInterval(pollTimer); pollTimer = null } + submitted = false + error.value = '创作请求异常，请返回重新操作' +} + +const goMockPreview = () => { + closeWebSocket() + if (pollTimer) { clearInterval(pollTimer); pollTimer = null } + store.fillMockWorkDetail() + router.push(`/p/create/preview/${store.workId}`) +} + onMounted(() => { dotTimer = setInterval(() => { dots.value = dots.value.length >= 3 ? '' : dots.value + '.' @@ -325,7 +398,7 @@ onMounted(() => { currentTipIdx.value = (currentTipIdx.value + 1) % creatingTips.length }, 3500) - // 恢复 workId：优先从URL参数（作品列表跳入），其次从localStorage（页面刷新） + // 恢复 workId const urlWorkId = new URLSearchParams(window.location.search).get('workId') if (urlWorkId) { saveWorkId(urlWorkId) @@ -333,11 +406,16 @@ onMounted(() => { restoreWorkId() } - // 如果已有进行中的任务，恢复轮询而非重新提交 + // 开发模式兜底：缺关键数据时直接进入模拟态，避免真实接口失败 + if (isDev && !store.workId && (!store.imageUrl || !store.storyData)) { + enterMockProgress() + return + } + if (store.workId) { submitted = true progress.value = 10 - stage.value = '📝 正在查询创作进度...' + stage.value = '正在查询创作进度…' startPolling(store.workId) } else { startCreation() @@ -355,41 +433,61 @@ onUnmounted(() => { diff --git a/frontend/src/views/public/create/views/DubbingView.vue b/frontend/src/views/public/create/views/DubbingView.vue index ee9ef89..3e248b2 100644 --- a/frontend/src/views/public/create/views/DubbingView.vue +++ b/frontend/src/views/public/create/views/DubbingView.vue @@ -1,53 +1,49 @@