大量修改UI

core/frontend/src/routes/free-create.tsx

@@ -2,7 +2,7 @@
 // 任务流(滚动加载)+ 底部输入条(全能参考/首尾帧 + @mention)+ 渐进轮询(10/30/60s 打后端
 // poll 端点,web 进程内查火山,不依赖 worker)+ 平滑进度动画(sessionStorage 续)+ 全屏播放器。
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Images, Users } from "lucide-react";
+import { ArrowLeft, Clapperboard, Images, Users } from "lucide-react";
 import { api, ApiError } from "../api";
 import type { FreeVideoRef, FreeVideoTask, ModelConfig } from "../types";
 import {
@@ -49,10 +49,11 @@ function pollDelay(count: number): number {
 let refKeySeq = 0;
 const nextRefKey = () => `ref-${Date.now()}-${refKeySeq++}`;
 
-export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled }: {
+export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled, onBack }: {
   modelConfigs: ModelConfig[];
   onNotify: (type: "success" | "error" | "info", text: string) => void;
   onTaskSettled: () => void;
+  onBack?: () => void;
 }) {
   // App 每次渲染会重建 onNotify 箭头函数;用 ref 稳定身份,否则依赖它的 effect(首屏拉取/轮询)
   // 会随 App 任意 setState(如 30s 未读轮询)反复重跑 → 任务流无谓全量刷新(实测踩坑)。
@@ -78,11 +79,12 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled }: {
 
   // —— 任务流 ——
   const [tasks, setTasks] = useState<FreeVideoTask[]>([]);
-  const [total, setTotal] = useState(0);
+  const [, setTotal] = useState(0);
   const [hasMore, setHasMore] = useState(false);
   const [loading, setLoading] = useState(true);
   const loadingMoreRef = useRef(false);
   const sentinelRef = useRef<HTMLDivElement>(null);
+  const stageRef = useRef<HTMLDivElement>(null);
 
   // —— 输入条 ——
   const [mode, setMode] = useState<FreeMode>("universal");
@@ -191,9 +193,10 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled }: {
     };
   }, [schedulePoll, notify]);
 
-  // 滚动加载更多(旧任务)
+  // 滚动加载更多(旧任务)· 滚动容器是中间作品区,不是整页
   useEffect(() => {
     const sentinel = sentinelRef.current;
+    const root = stageRef.current;
     if (!sentinel || !hasMore) return;
     const observer = new IntersectionObserver((entries) => {
       if (!entries[0].isIntersecting || loadingMoreRef.current) return;
@@ -209,7 +212,7 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled }: {
         })
         .catch(() => undefined)
         .finally(() => { loadingMoreRef.current = false; });
-    }, { rootMargin: "200px" });
+    }, { root, rootMargin: "200px" });
     observer.observe(sentinel);
     return () => observer.disconnect();
   }, [hasMore]);
@@ -526,31 +529,38 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled }: {
 
   return (
     <div className="fc-page">
-      <div className="page-head">
-        <div>
-          <h1>自由创作</h1>
-          <div className="sub">
-            <span className="mono">// {total} 个视频</span> · AI 视频生成 · 全能参考 / 首尾帧
+      <header className="fc-head">
+        <div className="fc-title-row">
+          {onBack ? (
+            <button type="button" className="fc-back" aria-label="返回上一入口页面" onClick={onBack}>
+              <ArrowLeft />
+            </button>
+          ) : null}
+          <div>
+            <h1>自由生成</h1>
+            <p>使用提示词和参考素材，自由控制视频画面与参数</p>
           </div>
         </div>
-        <div className="actions">
-          <button type="button" className="btn" onClick={() => openPlatformLibrary()}>
-            <Images size={14} /> 引用平台素材
+        <div className="fc-material">
+          <button type="button" className="fc-ghost" onClick={() => openLibrary()}>
+            <Users />
+            <span>人物素材库</span>
           </button>
-          <button type="button" className="btn" onClick={() => openLibrary()}>
-            <Users size={14} /> 人物素材库
+          <button type="button" className="fc-ghost" onClick={() => openPlatformLibrary()}>
+            <Images />
+            <span>引用平台素材</span>
           </button>
         </div>
-      </div>
+      </header>
 
-      <div className="fc-feed-wrap">
+      <div className="fc-stage" ref={stageRef}>
         {loading ? (
           <SystemLoading title="正在加载作品" description="正在同步最新数据，请稍候。" icon="film" />
         ) : tasks.length === 0 ? (
-          <div className="empty-state show fc-empty">
-            <span className="ic-empty"><Users size={22} strokeWidth={1.5} /></span>
-            <h3>还没有作品</h3>
-            <p>// 在下方输入提示词,生成你的第一条视频</p>
+          <div className="fc-empty">
+            <div className="fc-empty-icon"><Clapperboard /></div>
+            <strong>准备生成新视频</strong>
+            <p>在下方输入提示词，或从素材库引用参考素材</p>
           </div>
         ) : (
           <div className="fc-feed">
@@ -568,7 +578,7 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled }: {
             ))}
           </div>
         )}
-        {hasMore && <div ref={sentinelRef} className="fc-sentinel mono">// 下滑加载更多</div>}
+        {hasMore && <div ref={sentinelRef} className="fc-sentinel">下滑加载更多</div>}
       </div>
 
       <FreeInputBar
@@ -625,7 +635,7 @@ export function FreeCreatePage({ modelConfigs, onNotify, onTaskSettled }: {
       <ConfirmModal
         open={deleteTarget !== null}
         title="删除视频"
-        detail={`确定删除这条视频吗?删除后可在资产库垃圾桶找回素材,任务记录不可恢复。`}
+        detail={`确定删除这条视频吗?删除后可在垃圾桶找回素材,任务记录不可恢复。`}
         confirmText="确认删除"
         onCancel={() => setDeleteTarget(null)}
         onConfirm={() => void confirmDelete()}