= [
+ { key: "all", label: "全部" },
+ { key: "inflight", label: "生成中" },
+ { key: "succeeded", label: "已完成" },
+ { key: "failed", label: "失败" }
+];
+
+const GROUP_LABEL: Record<"today" | "yesterday" | "earlier", string> = {
+ today: "今天",
+ yesterday: "昨天",
+ earlier: "更早"
+};
+
+function chinaDay(iso: string | null) {
+ if (!iso) return "";
+ return new Intl.DateTimeFormat("en-CA", { timeZone: "Asia/Shanghai", year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date(iso));
+}
+
+function dayBucket(iso: string | null): "today" | "yesterday" | "earlier" {
+ const day = chinaDay(iso);
+ if (!day) return "earlier";
+ const today = chinaDay(new Date().toISOString());
+ if (day === today) return "today";
+ const yesterday = chinaDay(new Date(Date.now() - 86400000).toISOString());
+ return day === yesterday ? "yesterday" : "earlier";
+}
+
+function matchesFeedFilter(task: FreeVideoTask, filter: FeedFilter) {
+ if (filter === "all") return true;
+ if (filter === "inflight") return isInFlight(task.status);
+ if (filter === "succeeded") return task.status === "succeeded";
+ return task.status === "failed" || task.status === "cancelled";
+}
+
function loadProgress(): Record {
try {
return JSON.parse(sessionStorage.getItem(PROGRESS_KEY) || "{}") as Record;
@@ -97,12 +134,21 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
const [submitting, setSubmitting] = useState(false);
const promptRef = useRef(null);
+ useEffect(() => {
+ const draft = sessionStorage.getItem(REMIX_PROMPT_KEY);
+ if (!draft) return;
+ sessionStorage.removeItem(REMIX_PROMPT_KEY);
+ window.setTimeout(() => promptRef.current?.setContent(draft, []), 0);
+ notify("info", "已填入复刻提示词，可改完再生成");
+ }, [notify]);
+
// —— 弹窗 ——
const [detailId, setDetailId] = useState(null);
const [libraryOpen, setLibraryOpen] = useState(false);
const [platformOpen, setPlatformOpen] = useState(false);
const [libraryTargetRole, setLibraryTargetRole] = useState<"first_frame" | "last_frame" | null>(null);
const [deleteTarget, setDeleteTarget] = useState(null);
+ const [feedFilter, setFeedFilter] = useState("all");
// —— 轮询/进度 ——
const pollTimersRef = useRef(new Map());
@@ -522,6 +568,26 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
setRefs([]);
}, []);
+ const filterCounts = useMemo(() => ({
+ all: tasks.length,
+ inflight: tasks.filter((t) => isInFlight(t.status)).length,
+ succeeded: tasks.filter((t) => t.status === "succeeded").length,
+ failed: tasks.filter((t) => t.status === "failed" || t.status === "cancelled").length
+ }), [tasks]);
+
+ const feedGroups = useMemo(() => {
+ const visible = tasks.filter((t) => matchesFeedFilter(t, feedFilter));
+ const groups: Array<{ key: "today" | "yesterday" | "earlier"; items: FreeVideoTask[] }> = [
+ { key: "today", items: [] },
+ { key: "yesterday", items: [] },
+ { key: "earlier", items: [] }
+ ];
+ visible.forEach((task) => {
+ groups.find((g) => g.key === dayBucket(task.created_at))?.items.push(task);
+ });
+ return groups.filter((g) => g.items.length > 0);
+ }, [tasks, feedFilter]);
+
// 详情弹窗的上一条/下一条(只在已完成的任务间切换)
const doneTasks = tasks.filter((t) => t.status === "succeeded" && t.video_url);
const detailTask = detailId ? tasks.find((t) => t.id === detailId) || null : null;
@@ -554,6 +620,22 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }
+ {tasks.length > 0 && (
+
+ {FEED_FILTERS.map((item) => (
+
+ ))}
+
+ )}
+
{loading ? (
- ) : (
- 在下方输入提示词，或从素材库引用参考素材
- {tasks.map((task) => (
- setDetailId(task.id)}
- onRetry={() => handleRetry(task)}
- onToggleFavorite={() => handleFavorite(task)}
- onDelete={() => setDeleteTarget(task)}
- onDownload={() => void handleDownload(task)}
- />
- ))}
+ ) : feedGroups.length === 0 ? (
+
+
+ ))
)}
{hasMore &&
diff --git a/core/frontend/src/routes/index.ts b/core/frontend/src/routes/index.ts
index c72f9de..7ff59f2 100644
--- a/core/frontend/src/routes/index.ts
+++ b/core/frontend/src/routes/index.ts
@@ -11,4 +11,5 @@ export { TeamPage } from "./team";
export { MessagesPage } from "./messages";
export { AssetFactoryPage, ImageWorkbenchPage, ModelPhotoDemoPage } from "./ai-tools";
export { FreeCreatePage } from "./free-create";
+export { VideoRemixPage } from "./video-remix";
export { SettingsPage } from "./settings";
diff --git a/core/frontend/src/routes/pipeline.tsx b/core/frontend/src/routes/pipeline.tsx
index c9d4307..940476d 100644
--- a/core/frontend/src/routes/pipeline.tsx
+++ b/core/frontend/src/routes/pipeline.tsx
@@ -34,7 +34,7 @@ import {
import { isLocalLife } from "../product-business";
// 真实资产缩略图注入:与全站一致用 --mock-media-url(.placeholder.has-mock-media 负责 cover 裁切 + 8px 圆角)
-const mediaStyle = (url: string): CSSProperties => ({ ["--mock-media-url"]: `url(${url})` } as CSSProperties);
+const mediaStyle = (url: string): CSSProperties => ({ ["--mock-media-url"]: `url("${url.replace(/"/g, "")}")` } as CSSProperties);
// 基础资产组 kind → 中文区块名(期3:视频项目资产趴「人物」→「角色」,可引用模特库的可复用形象)
const KIND_LABEL: Record
+
+ ) : (
+ feedGroups.map((group) => (
+ {hasMore ? "当前已加载的记录里没有，下滑可继续查找" : "换一个状态筛选，或继续在下方生成新视频"}
+ {GROUP_LABEL[group.key]}
+ {group.items.length}
+
+
+ {group.items.map((task) => (
+ setDetailId(task.id)}
+ onRetry={() => handleRetry(task)}
+ onToggleFavorite={() => handleFavorite(task)}
+ onDelete={() => setDeleteTarget(task)}
+ onDownload={() => void handleDownload(task)}
+ />
+ ))}
+
+ 下滑加载更多
}
+
+
+
+
+
+
+
+
+
+ 视频复刻
+
+ 上传参考视频，拆解镜头、动作、运镜和节奏，生成可编辑提示词
+ [ /remix ]
+
+
+
+
+
+
+
+ 上传参考视频
+ // 视频提炼 +建议使用主体清晰、镜头完整的电商短视频。拆解稿会落在右侧，先逐镜改完再去生成。
+
+
+
+ 参考视频
+ MP4 / MOV · 最长 3 分钟 · 200MB
+
+
+
+
+
+ {digestModels.length > 0 ? (
+
+
+
+
+
+ ) : null}
+ {estimatedPoints > 0 ? `视频解析预计消耗 ${estimatedPoints} 积分` : "视频解析按一次文本模型计费"}
+
+ {digestModels.map((model) => (
+
+ { setModelId(model.id); setModelMenuOpen(false); }}
+ onKeyDown={(event) => {
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ setModelId(model.id);
+ setModelMenuOpen(false);
+ }
+ }}
+ >
+ {publicModelDisplayName(model)}
+
+
+ ))}
+