From cfdf08d05fab0c93736f977e61cce02b3ca19f06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=88=B1=E7=AC=91=E7=9A=84=E6=AF=9B=E6=AF=9B=E8=99=AB?=
 <315515767@qq.com>
Date: Fri, 14 Aug 2026 12:01:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(canvas):=20=E5=89=8D=E7=AB=AF=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E4=B8=8E=E6=B8=A0=E9=81=93=E5=85=BC=E5=AE=B9=20-=20?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=B7=A5=E4=BD=9C=E5=8C=BA=E3=80=81=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E4=B8=AD=E5=BF=83=E7=AD=89=E5=A4=9A=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=E6=99=BA=E8=83=BD=E4=BD=93=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E4=B8=8E=E8=8A=82=E7=82=B9=E7=94=9F=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: sikongyue <3155157671@qq.com>
Original-PR: https://github.com/ddcat-ai/open-ai-canvas/pull/217
---
 backend/internal/handler/custom_proxy.go      |    7 +-
 backend/internal/service/resource.go          |    2 +-
 web/src/components/auth/require-feature.tsx   |   12 +-
 .../canvas/canvas-assistant-panel.tsx         |    2 +-
 .../canvas/canvas-local-agent-panel.tsx       |    6 +-
 .../canvas/canvas-node-prompt-panel.tsx       |    6 +-
 .../canvas/canvas-project-asset-modal.tsx     |    2 +-
 .../canvas/canvas-project-sidebar.tsx         |   20 +-
 .../components/canvas/canvas-script-node.tsx  |    7 +-
 web/src/components/layout/app-top-nav.tsx     |  177 +-
 web/src/components/layout/workspace-page.tsx  |   12 +-
 .../layout/workspace-sidebar-footer.tsx       |   23 +-
 .../components/layout/workspace-top-bar.tsx   |   36 +
 .../lib/canvas/canvas-project-generation.ts   |   13 +-
 .../pages/admin/components/admin-shell.tsx    |   10 +-
 web/src/pages/assets/index.tsx                |  376 ++-
 .../pages/canvas/canvas-project-top-bar.tsx   |    2 +-
 web/src/pages/canvas/index.tsx                |    9 +-
 web/src/pages/create/index.tsx                |  364 +-
 web/src/pages/home/index.tsx                  |  195 +-
 web/src/pages/projects/detail.tsx             |   10 +-
 web/src/pages/projects/detail/assets.tsx      |    6 +-
 web/src/pages/projects/detail/canvases.tsx    |    2 +-
 web/src/pages/projects/detail/chapters.tsx    |   14 +-
 web/src/pages/projects/index.tsx              |  329 +-
 web/src/pages/settings/index.tsx              |   68 +-
 web/src/pages/skills/index.tsx                |    4 +-
 web/src/pages/skills/skill-detail-drawer.tsx  |    2 +-
 web/src/pages/tasks/index.tsx                 |  374 ++-
 web/src/pages/tasks/task-grid-card.tsx        |   67 +
 web/src/pages/tasks/task-group-header.tsx     |   43 +
 web/src/pages/tasks/task-list-row.tsx         |  128 +
 web/src/pages/tasks/task-shared.tsx           |   90 +
 web/src/pages/tasks/task-stat-pills.tsx       |   36 +
 web/src/pages/wallet/index.tsx                |   65 +-
 web/src/services/api/image.ts                 |   45 +-
 web/src/styles/globals.css                    | 2947 +++++++++++++++--
 37 files changed, 4599 insertions(+), 912 deletions(-)
 create mode 100644 web/src/components/layout/workspace-top-bar.tsx
 create mode 100644 web/src/pages/tasks/task-grid-card.tsx
 create mode 100644 web/src/pages/tasks/task-group-header.tsx
 create mode 100644 web/src/pages/tasks/task-list-row.tsx
 create mode 100644 web/src/pages/tasks/task-shared.tsx
 create mode 100644 web/src/pages/tasks/task-stat-pills.tsx

diff --git a/backend/internal/handler/custom_proxy.go b/backend/internal/handler/custom_proxy.go
index 3dcfe6221..115876316 100644
--- a/backend/internal/handler/custom_proxy.go
+++ b/backend/internal/handler/custom_proxy.go
@@ -4,6 +4,7 @@ import (
 	"bytes"
 	"encoding/json"
 	"errors"
+	"fmt"
 	"io"
 	"mime"
 	"net/http"
@@ -170,7 +171,11 @@ func writeCustomRelayError(c *gin.Context, resp *http.Response, apiKey string, m
 		c.Data(resp.StatusCode, "application/json; charset=utf-8", body)
 		return
 	}
-	fail(c, resp.StatusCode, errors.New("自定义渠道上游请求失败"))
+	snippet := strings.TrimSpace(string(body))
+	if len(snippet) > 200 {
+		snippet = snippet[:200] + "..."
+	}
+	fail(c, resp.StatusCode, fmt.Errorf("自定义渠道上游请求失败（%s）%s", resp.Status, snippet))
 }
 
 func copyCustomRelayStream(c *gin.Context, source io.Reader, apiKey string, maxBytes int64) {
diff --git a/backend/internal/service/resource.go b/backend/internal/service/resource.go
index a770c63e9..9f782abf6 100644
--- a/backend/internal/service/resource.go
+++ b/backend/internal/service/resource.go
@@ -143,7 +143,7 @@ func (s *Service) publicResourceBaseURL() (*url.URL, error) {
 	}
 	raw := firstNonEmpty(setting.PublicBaseURL, os.Getenv("CANVAS_PUBLIC_BASE_URL"))
 	if raw == "" {
-		return nil, BadAuthRequest("服务器本地存储尚未配置服务器访问地址")
+		return nil, BadAuthRequest("服务器本地存储尚未配置服务器访问地址，请设置 CANVAS_PUBLIC_BASE_URL 或在存储设置中配置公网访问地址（或改用 OSS 存储）")
 	}
 	return validatePublicResourceBaseURL(raw)
 }
diff --git a/web/src/components/auth/require-feature.tsx b/web/src/components/auth/require-feature.tsx
index 9537b04d0..58d93166a 100644
--- a/web/src/components/auth/require-feature.tsx
+++ b/web/src/components/auth/require-feature.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, type ReactNode } from "react";
 import { Button } from "antd";
-import { useLocation, useNavigate } from "react-router";
+import { useNavigate } from "react-router";
 
 import { WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceErrorState, WorkspaceLoadingState, WorkspaceState } from "@/components/layout/workspace-state";
@@ -15,16 +15,18 @@ const featureNames: Record<FeatureKey, string> = {
     creditsEnabled: "积分中心",
 };
 
+let featureAvailabilityCheckedOnce = false;
+
 export function RequireFeature({ feature, children }: { feature: FeatureKey; children: ReactNode }) {
-    const location = useLocation();
     const navigate = useNavigate();
     const features = useUserStore((state) => state.features);
-    const [checking, setChecking] = useState(true);
+    const [checking, setChecking] = useState(() => !useUserStore.getState().features[feature]);
     const [error, setError] = useState("");
 
     useEffect(() => {
+        if (featureAvailabilityCheckedOnce) return;
+        featureAvailabilityCheckedOnce = true;
         let cancelled = false;
-        setChecking(true);
         setError("");
         refreshFeatureAvailability()
             .catch((reason) => {
@@ -36,7 +38,7 @@ export function RequireFeature({ feature, children }: { feature: FeatureKey; chi
         return () => {
             cancelled = true;
         };
-    }, [location.pathname]);
+    }, []);
 
     if (checking) return <WorkspacePage><WorkspaceLoadingState label="正在确认功能状态" detail={featureNames[feature]} rows={3} /></WorkspacePage>;
     if (error) return <WorkspacePage><WorkspaceErrorState title="无法确认功能状态" description={error} actionLabel="返回创作台" onRetry={() => navigate("/create", { replace: true })} /></WorkspacePage>;
diff --git a/web/src/components/canvas/canvas-assistant-panel.tsx b/web/src/components/canvas/canvas-assistant-panel.tsx
index 7a16c8ba8..11530fa7e 100644
--- a/web/src/components/canvas/canvas-assistant-panel.tsx
+++ b/web/src/components/canvas/canvas-assistant-panel.tsx
@@ -750,7 +750,7 @@ export function CanvasAssistantPanel({ nodes, selectedNodeIds, snapshot, project
                             {agentBusy ? <AgentWorkingMessage theme={theme} /> : null}
                         </>
                     ) : (
-                        <AgentChatEmptyState theme={theme} nodeCount={contextSummary.nodeCount} onSelect={setPrompt} />
+                        <AgentChatEmptyState theme={theme} nodeCount={contextSummary.nodeCount} onSelect={(text) => { setPrompt(text); void sendMessage(text, messages); }} />
                     )}
                 </div>
             )}
diff --git a/web/src/components/canvas/canvas-local-agent-panel.tsx b/web/src/components/canvas/canvas-local-agent-panel.tsx
index 18fc8521d..84e36b1da 100644
--- a/web/src/components/canvas/canvas-local-agent-panel.tsx
+++ b/web/src/components/canvas/canvas-local-agent-panel.tsx
@@ -172,8 +172,8 @@ export const CanvasLocalAgentPanel = memo(function CanvasLocalAgentPanel({ snaps
         return () => clearTimeout(timer);
     }, [connected, endpoint, snapshot, token]);
 
-    const sendPrompt = async () => {
-        const text = prompt.trim();
+    const sendPrompt = async (overrideText?: string) => {
+        const text = (overrideText ?? prompt).trim();
         const files = attachments;
         const requestPrompt = promptWithAttachments(text, files);
         if (!connected || !requestPrompt || sending || waiting) return;
@@ -545,7 +545,7 @@ export const CanvasLocalAgentPanel = memo(function CanvasLocalAgentPanel({ snaps
             ) : (
                 <>
                     <div ref={listRef} className="thin-scrollbar min-h-0 flex-1 space-y-4 overflow-y-auto p-4">
-                        {!messages.length && !pendingTool && !waiting ? <AgentChatEmptyState theme={theme} nodeCount={snapshot.nodes.length} onSelect={(prompt) => setAgentState({ prompt })} /> : null}
+                        {!messages.length && !pendingTool && !waiting ? <AgentChatEmptyState theme={theme} nodeCount={snapshot.nodes.length} onSelect={(text) => { setAgentState({ prompt: text }); void sendPrompt(text); }} /> : null}
                         {messages.map((item) => (
                             <AgentChatMessage key={item.id} item={agentMessageToChatMessage(item)} theme={theme} user={user} />
                         ))}
diff --git a/web/src/components/canvas/canvas-node-prompt-panel.tsx b/web/src/components/canvas/canvas-node-prompt-panel.tsx
index 4803d31b3..e158542fc 100644
--- a/web/src/components/canvas/canvas-node-prompt-panel.tsx
+++ b/web/src/components/canvas/canvas-node-prompt-panel.tsx
@@ -3,7 +3,8 @@ import { ArrowUp, AtSign, Boxes, ChevronDown, FileText, ImageIcon, ImagePlus, Ma
 import { Button, Image as AntImage, Modal, Tooltip } from "antd";
 
 import { ModelPicker } from "@/components/model-picker";
-import { configuredModelMatchesCapability, defaultConfig, modelOptionName, resolveModelChannel, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { defaultConfig, modelOptionName, resolveModelChannel, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { resolveCanvasGenerationModel } from "@/lib/canvas/canvas-project-generation";
 import { CreditSymbol, requestCreditCost } from "@/constant/credits";
 import { canvasThemes } from "@/lib/canvas-theme";
 import { normalizeVideoDuration, normalizeVideoResolution } from "@/lib/video-generation-options";
@@ -475,8 +476,7 @@ function defaultMode(type: CanvasNodeData["type"]): CanvasNodeGenerationMode {
 function buildNodeConfig(globalConfig: AiConfig, node: CanvasNodeData, mode: CanvasNodeGenerationMode): AiConfig {
     const defaultModel = mode === "image" ? globalConfig.imageModel : mode === "video" ? globalConfig.videoModel : mode === "audio" ? globalConfig.audioModel : globalConfig.textModel;
     const fallbackModel = mode === "image" ? defaultConfig.imageModel : mode === "video" ? defaultConfig.videoModel : mode === "audio" ? defaultConfig.audioModel : defaultConfig.textModel;
-    const storedModel = node.metadata?.model;
-    const model = storedModel && configuredModelMatchesCapability(globalConfig, storedModel, mode) ? storedModel : defaultModel && configuredModelMatchesCapability(globalConfig, defaultModel, mode) ? defaultModel : fallbackModel;
+    const model = resolveCanvasGenerationModel(globalConfig, node.metadata?.model, mode) || resolveCanvasGenerationModel(globalConfig, defaultModel, mode) || fallbackModel;
     return {
         ...globalConfig,
         model,
diff --git a/web/src/components/canvas/canvas-project-asset-modal.tsx b/web/src/components/canvas/canvas-project-asset-modal.tsx
index e3e38b8ae..9302c196c 100644
--- a/web/src/components/canvas/canvas-project-asset-modal.tsx
+++ b/web/src/components/canvas/canvas-project-asset-modal.tsx
@@ -51,7 +51,7 @@ export function CanvasProjectAssetModal({ open, detail, initialCategory = "all",
         <div className="flex h-[min(620px,calc(100vh-80px))] min-h-[440px] flex-col overflow-hidden">
             <header className="flex h-12 shrink-0 items-center justify-between border-b border-border py-0 pl-4 pr-12"><h2 className="text-sm font-semibold">引用项目角色与资产</h2><span className="text-[var(--fs-label)] text-foreground/42">已选 {selectedIds.size} 项</span></header>
             <div className="grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)] sm:grid-cols-[150px_minmax(0,1fr)] sm:grid-rows-1">
-                <nav className="thin-scrollbar flex min-w-0 gap-1 overflow-x-auto border-b border-border p-2 sm:block sm:overflow-y-auto sm:border-b-0 sm:border-r" aria-label="项目资产分类">{categories.map((item) => <button key={item} type="button" onClick={() => setCategory(item)} className={`flex h-11 min-w-[104px] shrink-0 items-center justify-between rounded-md px-2 text-xs sm:w-full sm:min-w-0 ${category === item ? "bg-foreground/[.08] font-medium" : "text-foreground/55 hover:bg-foreground/[.04]"}`}><span>{categoryLabels[item] || "其他"}</span><span className="min-w-5 rounded bg-foreground/[.05] px-1 text-center text-[var(--fs-tiny)] tabular-nums">{item === "all" ? items.length : items.filter((asset) => asset.category === item).length}</span></button>)}</nav>
+                <nav className="thin-scrollbar flex min-w-0 gap-1 overflow-x-auto border-b border-border p-2 sm:block sm:overflow-y-auto sm:border-b-0 sm:border-r" aria-label="项目资产分类">{categories.map((item) => <button key={item} type="button" onClick={() => setCategory(item)} className={`flex h-11 min-w-[104px] shrink-0 items-center justify-between rounded-md px-2 text-xs sm:w-full sm:min-w-0 ${category === item ? "bg-surface-active font-medium" : "text-foreground/55 hover:bg-surface-hover"}`}><span>{categoryLabels[item] || "其他"}</span><span className="min-w-5 rounded bg-foreground/[.05] px-1 text-center text-[var(--fs-tiny)] tabular-nums">{item === "all" ? items.length : items.filter((asset) => asset.category === item).length}</span></button>)}</nav>
                 <div className="thin-scrollbar min-h-0 overflow-y-auto p-3">{visible.length ? <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4">{visible.map((item) => <ProjectAssetCard key={item.id} item={item} selected={selectedIds.has(item.id)} onToggle={() => toggle(item.id)} />)}</div> : <WorkspaceState icon="assets" compact className="h-full" title="此分类没有可引用资产" description={detail ? "先在项目角色与资产中完成角色确认或素材关联。" : "当前为自由画布，下方展示本地素材库；也可先上传素材后再引用。"} />}</div>
             </div>
             <footer className="flex h-12 shrink-0 items-center justify-between border-t border-border px-3"><span className="text-[var(--fs-tiny)] text-foreground/42">角色引用会在生成时解析当前角色版本</span><div className="flex gap-2"><Button size="small" onClick={onClose}>取消</Button><Button size="small" type="primary" disabled={!selectedIds.size} loading={inserting} onClick={() => void insert()}>引入 {selectedIds.size || ""} 项</Button></div></footer>
diff --git a/web/src/components/canvas/canvas-project-sidebar.tsx b/web/src/components/canvas/canvas-project-sidebar.tsx
index b7d73f590..4ad72af7b 100644
--- a/web/src/components/canvas/canvas-project-sidebar.tsx
+++ b/web/src/components/canvas/canvas-project-sidebar.tsx
@@ -103,10 +103,10 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
     if (collapsed) {
         return (
             <aside className="relative z-[var(--z-panel)] hidden w-11 shrink-0 flex-col items-center border-r border-border bg-background/94 py-2 backdrop-blur-xl lg:flex">
-                <button type="button" className="grid size-7 place-items-center rounded-md text-foreground/55 hover:bg-foreground/[.06]" title="展开项目侧栏" aria-label="展开项目侧栏" onClick={() => setCollapsed(false)}>
+                <button type="button" className="grid size-7 place-items-center rounded-md text-foreground/55 hover:bg-surface-hover" title="展开项目侧栏" aria-label="展开项目侧栏" onClick={() => setCollapsed(false)}>
                     <ChevronRight className="size-4" />
                 </button>
-                <Link to={`/projects/${projectId}/canvases`} className="mt-2 grid size-7 place-items-center rounded-md text-foreground/55 hover:bg-foreground/[.06]" title="返回项目画布列表">
+                <Link to={`/projects/${projectId}/canvases`} className="mt-2 grid size-7 place-items-center rounded-md text-foreground/55 hover:bg-surface-hover" title="返回项目画布列表">
                     <FolderKanban className="size-4" />
                 </Link>
             </aside>
@@ -120,7 +120,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                     <FolderKanban className="size-3.5 shrink-0" />
                     <span className="truncate">{projectDetail?.project.name || "项目空间"}</span>
                 </Link>
-                <button type="button" className="grid size-7 shrink-0 place-items-center rounded-md text-foreground/45 hover:bg-foreground/[.06]" title="收起项目侧栏" aria-label="收起项目侧栏" onClick={() => setCollapsed(true)}>
+                <button type="button" className="grid size-7 shrink-0 place-items-center rounded-md text-foreground/45 hover:bg-surface-hover" title="收起项目侧栏" aria-label="收起项目侧栏" onClick={() => setCollapsed(true)}>
                     <ChevronLeft className="size-4" />
                 </button>
             </header>
@@ -131,7 +131,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                         <Palette className="size-3.5" />
                         项目画风
                     </span>
-                    <Link to={`/projects/${projectId}/settings`} className="grid size-6 place-items-center rounded text-foreground/35 hover:bg-foreground/[.06] hover:text-foreground" title="编辑项目画风" aria-label="编辑项目画风">
+                    <Link to={`/projects/${projectId}/settings`} className="grid size-6 place-items-center rounded text-foreground/35 hover:bg-surface-hover hover:text-foreground" title="编辑项目画风" aria-label="编辑项目画风">
                         <Settings2 className="size-3.5" />
                     </Link>
                 </div>
@@ -139,7 +139,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                     type="button"
                     disabled={!style}
                     onClick={onLocateStyle}
-                    className="group flex h-11 w-full items-center gap-2 rounded-md px-1.5 text-left hover:bg-foreground/[.045] disabled:cursor-default disabled:hover:bg-transparent"
+                    className="group flex h-11 w-full items-center gap-2 rounded-md px-1.5 text-left hover:bg-surface-hover disabled:cursor-default disabled:hover:bg-transparent"
                     title={style ? "定位画布中的项目画风节点" : "项目尚未设置画风"}
                 >
                     {style ? (
@@ -164,7 +164,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                         剧情章节 <span className="tabular-nums text-foreground/32">{orderedUnits.length.toLocaleString("zh-CN")}</span>
                     </span>
                     {selectedId ? (
-                        <button type="button" onClick={revealSelectedChapter} className="grid size-6 place-items-center rounded text-foreground/35 hover:bg-foreground/[.06] hover:text-foreground" title="回到当前章节" aria-label="回到当前章节">
+                        <button type="button" onClick={revealSelectedChapter} className="grid size-6 place-items-center rounded text-foreground/35 hover:bg-surface-hover hover:text-foreground" title="回到当前章节" aria-label="回到当前章节">
                             <Crosshair className="size-3.5" />
                         </button>
                     ) : null}
@@ -183,7 +183,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                             aria-label="搜索项目章节"
                         />
                         {query ? (
-                            <button type="button" onClick={() => setQuery("")} className="grid size-5 shrink-0 place-items-center rounded text-foreground/32 hover:bg-foreground/[.06] hover:text-foreground" aria-label="清空章节搜索">
+                            <button type="button" onClick={() => setQuery("")} className="grid size-5 shrink-0 place-items-center rounded text-foreground/32 hover:bg-surface-hover hover:text-foreground" aria-label="清空章节搜索">
                                 <X className="size-3" />
                             </button>
                         ) : null}
@@ -208,7 +208,7 @@ export function CanvasProjectSidebar({ projectId, detail, onAddChapter, onLocate
                                                 event.dataTransfer.setData(CANVAS_PROJECT_CHAPTER_DND_TYPE, JSON.stringify(payload));
                                                 event.dataTransfer.effectAllowed = "copy";
                                             }}
-                                            className={`group flex h-9 cursor-grab items-center gap-1 rounded-md px-1 text-xs active:cursor-grabbing ${active ? "bg-foreground/[.08]" : "hover:bg-foreground/[.045]"}`}
+                                            className={`group flex h-9 cursor-grab items-center gap-1 rounded-md px-1 text-xs active:cursor-grabbing ${active ? "bg-surface-active" : "hover:bg-surface-hover"}`}
                                         >
                                             <GripVertical className="size-3.5 shrink-0 text-foreground/22" />
                                             <button
@@ -295,7 +295,7 @@ function ChapterPreview({
                     <div className="text-[var(--fs-tiny)] tabular-nums text-foreground/38">第 {chapterNumber.toLocaleString("zh-CN")} 章</div>
                     <h2 className="mt-0.5 truncate text-sm font-semibold">{unit.title}</h2>
                 </div>
-                <button type="button" onClick={onClose} className="grid size-6 shrink-0 place-items-center rounded text-foreground/38 hover:bg-foreground/[.06] hover:text-foreground" aria-label="关闭章节预览">
+                <button type="button" onClick={onClose} className="grid size-6 shrink-0 place-items-center rounded text-foreground/38 hover:bg-surface-hover hover:text-foreground" aria-label="关闭章节预览">
                     <X className="size-3.5" />
                 </button>
             </header>
@@ -312,7 +312,7 @@ function ChapterPreview({
                 >
                     {adding ? <LoaderCircle className="size-3.5 animate-spin" /> : <Plus className="size-3.5" />}添加到画布
                 </button>
-                <Link to={`/projects/${projectId}/chapters/${unit.id}`} className="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-foreground/62 hover:bg-foreground/[.06] hover:text-foreground">
+                <Link to={`/projects/${projectId}/chapters/${unit.id}`} className="inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-xs text-foreground/62 hover:bg-surface-hover hover:text-foreground">
                     打开编辑器
                     <ArrowUpRight className="size-3.5" />
                 </Link>
diff --git a/web/src/components/canvas/canvas-script-node.tsx b/web/src/components/canvas/canvas-script-node.tsx
index 5d06f541e..121f312c3 100644
--- a/web/src/components/canvas/canvas-script-node.tsx
+++ b/web/src/components/canvas/canvas-script-node.tsx
@@ -115,6 +115,7 @@ export function CanvasScriptNodeContent({ node, batch, pipeline, scale, mentionR
         ? `${node.metadata.taskStage || "正在创建任务"}${typeof node.metadata.taskProgress === "number" ? ` · ${node.metadata.taskProgress}%` : ""}`
         : node.metadata?.status === "error" ? generationErrorMessage(node.metadata.errorDetails) : "";
     const [batchDetailsOpen, setBatchDetailsOpen] = useState(false);
+    const [moreMenuOpen, setMoreMenuOpen] = useState(false);
     const pipelineDisabled = !rows.length || node.metadata?.status === "loading" || hasActiveBatchItems;
     const missingImages = Math.max(0, pipeline.images.total - pipeline.images.created);
     const missingVideos = Math.max(0, pipeline.videos.total - pipeline.videos.created);
@@ -164,9 +165,9 @@ export function CanvasScriptNodeContent({ node, batch, pipeline, scale, mentionR
                 <span className="min-w-0 flex-1 truncate text-sm font-semibold" title={node.title || "分镜脚本"}>{node.title || "分镜脚本"}</span>
                 {batchSummary ? <span className="min-w-0 max-w-[42%] truncate text-[var(--fs-label)] font-medium" title={batchSummary} style={{ color: batch?.status === "partial_failed" ? theme.accent.danger : theme.node.muted }}>{batchSummary}</span> : taskFeedback ? <span className="min-w-0 max-w-[38%] truncate text-[var(--fs-label)] font-medium" title={taskFeedback} style={{ color: node.metadata?.status === "error" ? theme.accent.danger : theme.node.muted }}>{taskFeedback}</span> : null}
                 <span className="text-[var(--fs-caption)] font-semibold tabular-nums" style={{ color: theme.node.muted }}>{rows.length} 镜 · {totalDuration}s</span>
-                <Tooltip title="全屏编辑"><button type="button" className="grid size-7 place-items-center rounded outline-none transition hover:bg-black/5 focus-visible:ring-2 dark:hover:bg-white/10" style={{ "--tw-ring-color": theme.node.muted } as CSSProperties} onMouseDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); onOpen(); }} aria-label="全屏编辑"><Expand className="size-3.5" /></button></Tooltip>
-                <Dropdown menu={{ items: moreMenuItems }} trigger={["click"]} placement="bottomRight">
-                    <button type="button" className="grid size-7 place-items-center rounded outline-none transition hover:bg-black/5 focus-visible:ring-2 dark:hover:bg-white/10" style={{ "--tw-ring-color": theme.node.muted } as CSSProperties} onMouseDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()} aria-label="更多操作"><MoreHorizontal className="size-3.5" /></button>
+                <Tooltip title="全屏编辑"><button type="button" className="grid size-7 place-items-center rounded outline-none transition hover:bg-black/5 focus-visible:ring-2 dark:hover:bg-white/10" style={{ "--tw-ring-color": theme.node.muted } as CSSProperties} onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); onOpen(); }} aria-label="全屏编辑"><Expand className="size-3.5" /></button></Tooltip>
+                <Dropdown open={moreMenuOpen} onOpenChange={setMoreMenuOpen} menu={{ items: moreMenuItems, onClick: () => setMoreMenuOpen(false) }} trigger={["click"]} placement="bottomRight">
+                    <button type="button" className="grid size-7 place-items-center rounded outline-none transition hover:bg-black/5 focus-visible:ring-2 dark:hover:bg-white/10" style={{ "--tw-ring-color": theme.node.muted } as CSSProperties} onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()} onClick={(event) => { event.stopPropagation(); setMoreMenuOpen(true); }} aria-label="更多操作"><MoreHorizontal className="size-3.5" /></button>
                 </Dropdown>
             </div>
             {batch ? <Modal title="批次详情" open={batchDetailsOpen} onCancel={() => setBatchDetailsOpen(false)} footer={null} width={560} centered destroyOnHidden>
diff --git a/web/src/components/layout/app-top-nav.tsx b/web/src/components/layout/app-top-nav.tsx
index 15f086465..d3f773687 100644
--- a/web/src/components/layout/app-top-nav.tsx
+++ b/web/src/components/layout/app-top-nav.tsx
@@ -1,9 +1,10 @@
-import { Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import { Fragment, useEffect, useRef, useState, type ReactNode } from "react";
+import { Home, Infinity as InfinityIcon } from "lucide-react";
+import { Fragment, useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { Link, useLocation, useNavigate } from "react-router";
 
 import { ModelSetupGuide } from "@/components/layout/model-setup-guide";
 import { WorkspaceSidebarFooter } from "@/components/layout/workspace-sidebar-footer";
+import { WorkspaceTopBar } from "@/components/layout/workspace-top-bar";
 import { navigationTools, type NavigationToolSlug } from "@/constant/navigation-tools";
 import { cn } from "@/lib/utils";
 import { refreshFeatureAvailability } from "@/lib/user-session";
@@ -16,12 +17,14 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
     const user = useUserStore((state) => state.user);
     const features = useUserStore((state) => state.features);
     const [mobileSidebarExpanded, setMobileSidebarExpanded] = useState(false);
+    const [desktopSidebarCollapsed, setDesktopSidebarCollapsed] = useState(false);
     const scrollRef = useRef<HTMLElement>(null);
     const [scrollState, setScrollState] = useState({
         hasTopFade: false,
         hasBottomFade: false,
     });
     const hideChrome = pathname.startsWith("/admin") || /^\/canvas\/[^/]+/.test(pathname);
+    const showGlobalTopBar = !hideChrome;
     const spatialWorkbench = isSpatialWorkbenchPath(pathname);
     const creationWorkspace = pathname === "/create";
     const slug = pathname.split("/").filter(Boolean)[0];
@@ -33,6 +36,39 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
             if (tool.slug === "wallet") return features.creditsEnabled;
             return true;
         });
+    const topRailNavTools = visibleNavigationTools.filter((tool) => tool.section === "创作空间" || tool.slug === "skills");
+    const bottomRailNavTools = visibleNavigationTools.filter((tool) => tool.slug === "wallet");
+
+    const toggleSidebar = () => {
+        if (window.innerWidth < 1024) {
+            setMobileSidebarExpanded((current) => !current);
+            return;
+        }
+        setDesktopSidebarCollapsed((current) => !current);
+    };
+
+    const handleNavClick = () => {
+        if (window.innerWidth < 1024) setMobileSidebarExpanded(false);
+    };
+
+    const renderSidebarLink = (tool: (typeof navigationTools)[number]) => {
+        const Icon = tool.icon;
+        const active = tool.slug === activeToolSlug;
+        return (
+            <Link
+                key={tool.slug}
+                to={`/${tool.slug}`}
+                title={tool.label}
+                onClick={handleNavClick}
+                className={cn(
+                    "app-workspace-nav-link app-workspace-rail-tile grid size-10 place-items-center rounded-md text-[var(--fs-tiny)] transition-colors",
+                    active ? "is-active font-medium" : "",
+                )}
+            >
+                <Icon className="size-5 shrink-0" />
+            </Link>
+        );
+    };
 
     const handleScroll = () => {
         const element = scrollRef.current;
@@ -72,84 +108,89 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
 
     return (
         <>
-            <div className={cn("app-workspace-shell flex h-dvh min-h-0 w-full overflow-hidden", spatialWorkbench && "is-spatial", creationWorkspace && "is-creation-workspace")}>
+            <div className={cn("app-workspace-shell flex h-dvh min-h-0 w-full flex-col overflow-hidden", spatialWorkbench && "is-spatial", creationWorkspace && "is-creation-workspace")} data-sidebar-collapsed={desktopSidebarCollapsed || undefined}>
                 {!hideChrome && mobileSidebarExpanded ? <button type="button" className="app-workspace-sidebar-scrim lg:hidden" aria-label="收起侧栏" onClick={() => setMobileSidebarExpanded(false)} /> : null}
+                {showGlobalTopBar ? <WorkspaceTopBar sidebarOpen={window.innerWidth < 1024 ? mobileSidebarExpanded : !desktopSidebarCollapsed} onToggleSidebar={toggleSidebar} /> : null}
+                <div className="app-workspace-main-row flex min-h-0 min-w-0 flex-1 overflow-hidden">
                 {!hideChrome ? (
-                    <aside className={cn("app-workspace-sidebar flex shrink-0 flex-col overflow-hidden transition-all duration-200", mobileSidebarExpanded ? "is-mobile-expanded w-[196px]" : "w-0 lg:w-[88px] lg:shrink-0")}>
-                        <div
-                            className={cn(
-                                "flex h-14 shrink-0 items-center border-b border-border/55 text-foreground",
-                                mobileSidebarExpanded ? "gap-2 px-3" : "justify-center",
-                                "lg:justify-center lg:px-0",
-                            )}
-                        >
-                            <Link to="/" className={cn("min-w-0 items-center gap-2", mobileSidebarExpanded || spatialWorkbench ? "flex" : "hidden", "lg:flex")} title="影策">
-                                <span className="app-workspace-brand-mark grid size-7 shrink-0 place-items-center rounded-md bg-foreground text-background"><InfinityIcon className="size-4" /></span>
-                                {spatialWorkbench ? <span className="min-w-0"><span className="block truncate text-[var(--fs-body)] font-semibold">影策</span><span className="block truncate text-[var(--fs-micro)] text-foreground/36">AI 叙事工作台</span></span> : <span className="truncate text-[var(--fs-body)] font-semibold">影策</span>}
-                            </Link>
+                    <aside className={cn("app-workspace-sidebar flex shrink-0 flex-col overflow-hidden transition-all duration-200", mobileSidebarExpanded ? "is-mobile-expanded w-[196px]" : "w-0 lg:w-[var(--workspace-sidebar-width)] lg:shrink-0")} style={{ "--workspace-sidebar-width": desktopSidebarCollapsed ? "0px" : "64px" } as CSSProperties}>
+                        {/* 桌面：64px 电影胶片条式轨道 */}
+                        <div className="app-workspace-rail hidden min-h-0 flex-col overflow-y-auto lg:flex">
+                            <div className="app-workspace-rail-header flex h-16 shrink-0 items-center justify-center">
+                                <Link to="/home" className="grid size-10 shrink-0 place-items-center rounded-md text-foreground/55 transition-colors hover:bg-surface-hover hover:text-foreground" title="工作台首页">
+                                    <Home className="size-4" />
+                                </Link>
+                            </div>
+                            <div className="app-workspace-rail-middle flex min-h-0 w-full flex-1 flex-col items-center justify-start overflow-y-auto px-3 pt-3">
+                                <nav className="flex w-full flex-col items-center gap-2">
+                                    {topRailNavTools.map((tool) => renderSidebarLink(tool))}
+                                </nav>
+                                <nav className="mt-4 flex w-full flex-col items-center gap-2 pb-3">
+                                    {bottomRailNavTools.map((tool) => renderSidebarLink(tool))}
+                                </nav>
+                            </div>
+                            <div className="app-workspace-rail-footer shrink-0 px-2 pb-4 pt-3">
+                                <WorkspaceSidebarFooter
+                                    showAnnouncement={false}
+                                    expandedClassName="hidden"
+                                    collapsedClassName="flex h-10 w-10 items-center justify-center rounded-md"
+                                    accountClassName="justify-center rounded-md"
+                                />
+                            </div>
                         </div>
 
-                        <nav
-                            ref={scrollRef}
-                            onScroll={handleScroll}
-                            className={cn(
-                                "app-workspace-sidebar-scroll-area flex min-h-0 flex-1 flex-col px-2 py-3",
-                                scrollState.hasTopFade && "has-top-fade",
-                                scrollState.hasBottomFade && "has-bottom-fade",
-                            )}
-                        >
-                            {visibleNavigationTools.map((tool, index) => {
-                                const Icon = tool.icon;
-                                const active = tool.slug === activeToolSlug;
-                                const showSection = index === 0 || tool.section !== visibleNavigationTools[index - 1]?.section;
-                                return (
-                                    <Fragment key={tool.slug}>
-                                        {showSection ? <div className={cn("mb-2 px-2 text-[var(--fs-tiny)] font-medium text-foreground/34", index > 0 && "mt-4", mobileSidebarExpanded ? "block" : "hidden", "lg:hidden")}>{tool.section}</div> : null}
-                                        <Link
-                                            to={`/${tool.slug}`}
-                                            title={tool.label}
-                                            onClick={() => {
-                                                if (window.innerWidth < 1024) setMobileSidebarExpanded(false);
-                                            }}
-                                            className={cn(
-                                                "app-workspace-nav-link relative mb-1 flex shrink-0 items-center rounded-md text-[var(--fs-body)] transition-colors",
-                                                spatialWorkbench ? "h-11" : "h-9",
-                                                mobileSidebarExpanded ? "gap-3 px-2.5" : "justify-center px-0",
-                                                "lg:justify-center lg:px-0",
-                                                active ? "is-active font-medium" : "text-foreground/55 hover:bg-foreground/[0.045] hover:text-foreground/85",
-                                            )}
-                                        >
-                                            <Icon className="size-4 shrink-0" />
-                                            <span className={cn("truncate", mobileSidebarExpanded ? "inline" : "hidden", "lg:inline")}>{tool.label}</span>
-                                        </Link>
-                                    </Fragment>
-                                );
-                            })}
-                        </nav>
-                        <div className="shrink-0 border-t border-border/55 p-2">
-                            <WorkspaceSidebarFooter
-                                collapsedClassName={cn(
-                                    mobileSidebarExpanded ? "justify-start gap-2 px-2" : "justify-center gap-0 px-0",
-                                    "lg:justify-center lg:gap-0 lg:px-0",
+                        {/* 移动端：抽屉完整导航 */}
+                        <div className="app-workspace-mobile-nav flex min-h-0 flex-1 flex-col overflow-hidden lg:hidden">
+                            <div className="flex h-14 shrink-0 items-center gap-2 border-b border-border/55 px-3">
+                                <Link to="/" className="flex min-w-0 items-center gap-2" title="影策">
+                                    <span className="app-workspace-brand-mark grid size-7 shrink-0 place-items-center rounded-md bg-foreground text-background"><InfinityIcon className="size-4" /></span>
+                                    <span className="truncate text-[var(--fs-body)] font-semibold">影策</span>
+                                </Link>
+                            </div>
+                            <nav
+                                ref={scrollRef}
+                                onScroll={handleScroll}
+                                className={cn(
+                                    "app-workspace-sidebar-scroll-area flex min-h-0 flex-1 flex-col px-2 py-3",
+                                    scrollState.hasTopFade && "has-top-fade",
+                                    scrollState.hasBottomFade && "has-bottom-fade",
                                 )}
-                                expandedClassName={cn(mobileSidebarExpanded ? "flex" : "hidden", "lg:hidden")}
-                                accountClassName={cn(
-                                    mobileSidebarExpanded ? "flex-row gap-2 px-2" : "flex-col gap-0.5 px-0 py-1",
-                                    "lg:flex-col lg:gap-0.5 lg:px-0 lg:py-1",
-                                )}
-                            />
+                            >
+                                {visibleNavigationTools.map((tool, index) => {
+                                    const Icon = tool.icon;
+                                    const active = tool.slug === activeToolSlug;
+                                    const showSection = index === 0 || tool.section !== visibleNavigationTools[index - 1]?.section;
+                                    return (
+                                        <Fragment key={tool.slug}>
+                                            {showSection ? <div className="mb-2 px-2 text-[var(--fs-tiny)] font-medium text-foreground/34">{tool.section}</div> : null}
+                                            <Link
+                                                to={`/${tool.slug}`}
+                                                title={tool.label}
+                                                onClick={handleNavClick}
+                                                className={cn("app-workspace-nav-link relative mb-1 flex h-11 shrink-0 items-center gap-3 rounded-md px-2.5 text-[var(--fs-body)] transition-colors", active ? "is-active font-medium" : "text-foreground/55 hover:bg-surface-hover hover:text-foreground/85")}
+                                            >
+                                                <Icon className="size-4 shrink-0" />
+                                                <span className="truncate">{tool.label}</span>
+                                            </Link>
+                                        </Fragment>
+                                    );
+                                })}
+                            </nav>
+                            <div className="shrink-0 border-t border-border/55 p-2">
+                                <WorkspaceSidebarFooter
+                                    expandedClassName="flex"
+                                    collapsedClassName="hidden"
+                                    accountClassName="flex-row gap-2 px-2"
+                                />
+                            </div>
                         </div>
                     </aside>
                 ) : null}
 
                 <div className="app-workspace-stage relative min-h-0 min-w-0 flex-1 overflow-hidden">
-                    {!hideChrome ? (
-                        <button type="button" className="app-workspace-sidebar-toggle absolute left-2 top-2 z-30 grid size-8 place-items-center rounded-md border border-border/60 bg-background/75 text-foreground/80 backdrop-blur transition hover:bg-foreground/[0.06] lg:hidden" aria-label={mobileSidebarExpanded ? "收起侧栏" : "展开侧栏"} onClick={() => setMobileSidebarExpanded((current) => !current)}>
-                            {mobileSidebarExpanded ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
-                        </button>
-                    ) : null}
                     {children}
                 </div>
+                </div>
             </div>
             <ModelSetupGuide hidden={pathname === "/login" || pathname === "/register" || pathname.startsWith("/admin")} />
         </>
diff --git a/web/src/components/layout/workspace-page.tsx b/web/src/components/layout/workspace-page.tsx
index 5f5219cfc..5fd3c278d 100644
--- a/web/src/components/layout/workspace-page.tsx
+++ b/web/src/components/layout/workspace-page.tsx
@@ -2,7 +2,6 @@ import { Button, Pagination } from "antd";
 import { RotateCcw } from "lucide-react";
 import type { ReactNode } from "react";
 
-import { WorkspaceSignalIcon, type WorkspaceSignalIconVariant } from "@/components/ui/aceternity/workspace-signal-icon";
 import { cn } from "@/lib/utils";
 
 export function WorkspacePage({ children, className, grid = false, fluid = false }: { children: ReactNode; className?: string; grid?: boolean; fluid?: boolean }) {
@@ -13,14 +12,13 @@ export function WorkspacePage({ children, className, grid = false, fluid = false
     );
 }
 
-export function PageHeader({ title, description, meta, actions, icon }: { title: string; description?: string; meta?: ReactNode; actions?: ReactNode; icon?: WorkspaceSignalIconVariant }) {
+export function PageHeader({ title, description, meta, actions }: { title: string; description?: string; meta?: ReactNode; actions?: ReactNode }) {
     return (
-        <header className="app-page-header flex min-h-14 flex-col gap-3 border-b border-border/80 pb-4 sm:flex-row sm:items-center sm:justify-between">
+        <header className="app-page-header flex min-h-14 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div className="flex min-w-0 items-center gap-3">
-                {icon ? <WorkspaceSignalIcon variant={icon} /> : null}
                 <div className="min-w-0">
-                    <div className="flex min-w-0 flex-wrap items-baseline gap-2.5">
-                        <h1 className="truncate text-[var(--fs-title)] font-semibold leading-7">{title}</h1>
+                    <div className="flex min-w-0 flex-wrap items-center gap-2.5">
+                        <h1 className="app-page-header-title truncate font-semibold leading-7">{title}</h1>
                         {meta}
                     </div>
                     {description ? <p className="mt-1 text-xs leading-5 text-foreground/58">{description}</p> : null}
@@ -44,7 +42,7 @@ export function ListToolbar({ children, trailing, active, onReset, className }:
 }
 
 export function TableSurface({ children, className }: { children: ReactNode; className?: string }) {
-    return <div className={cn("app-table-surface mt-4 min-w-0 overflow-hidden rounded-lg border border-border bg-background", className)}>{children}</div>;
+    return <div className={cn("app-table-surface mt-4 min-w-0 overflow-hidden rounded-lg border border-border bg-surface", className)}>{children}</div>;
 }
 
 export function CollectionGrid({ children, className }: { children: ReactNode; className?: string }) {
diff --git a/web/src/components/layout/workspace-sidebar-footer.tsx b/web/src/components/layout/workspace-sidebar-footer.tsx
index 16ed0c4f2..aa1a5443d 100644
--- a/web/src/components/layout/workspace-sidebar-footer.tsx
+++ b/web/src/components/layout/workspace-sidebar-footer.tsx
@@ -1,5 +1,5 @@
 import { App, Popover, Switch } from "antd";
-import { ChevronRight, LogIn, LogOut, Moon, ShieldCheck, Sun, UserRound } from "lucide-react";
+import { ChevronRight, CircleUserRound, LogIn, LogOut, Moon, ShieldCheck, Sun } from "lucide-react";
 import { useEffect, useState, type ReactNode } from "react";
 import { Link, useNavigate } from "react-router";
 
@@ -17,9 +17,10 @@ type WorkspaceSidebarFooterProps = {
     expandedClassName: string;
     collapsedClassName: string;
     accountClassName: string;
+    showAnnouncement?: boolean;
 };
 
-export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName, accountClassName }: WorkspaceSidebarFooterProps) {
+export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName, accountClassName, showAnnouncement = true }: WorkspaceSidebarFooterProps) {
     const theme = useThemeStore((state) => state.theme);
     const setTheme = useThemeStore((state) => state.setTheme);
     const user = useUserStore((state) => state.user);
@@ -49,10 +50,10 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
 
     return (
         <div>
-            {user ? (
+            {user && showAnnouncement ? (
                 <SystemAnnouncementCenter
                     userId={user.id}
-                    className={cn("relative mb-1 flex h-9 w-full items-center rounded-md text-xs text-foreground/55 transition-colors hover:bg-foreground/[.05] hover:text-foreground", collapsedClassName)}
+                    className={cn("relative mb-1 flex h-9 w-full items-center rounded-md text-xs text-foreground/55 transition-colors hover:bg-surface-hover hover:text-foreground", collapsedClassName)}
                     showLabel
                     labelClassName={expandedClassName}
                     staticMotion
@@ -81,7 +82,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                             ) : null}
 
                             <div className="border-y border-border/65 py-2">
-                                <AppChangelogButton className="flex h-8 w-full items-center gap-2 rounded px-2 text-[var(--fs-label)] text-foreground/58 hover:bg-foreground/[.055] hover:text-foreground [&_svg]:size-3.5" showLabel showVersion versionClassName="ml-auto text-[var(--fs-micro)] tabular-nums text-foreground/32" />
+                                <AppChangelogButton className="flex h-8 w-full items-center gap-2 rounded px-2 text-[var(--fs-label)] text-foreground/58 hover:bg-surface-hover hover:text-foreground [&_svg]:size-3.5" showLabel showVersion versionClassName="ml-auto text-[var(--fs-micro)] tabular-nums text-foreground/32" />
                             </div>
 
                             <div className="flex h-10 items-center px-2">
@@ -89,11 +90,11 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                                 <span className="ml-2 flex-1 text-xs text-foreground/65">深色模式</span>
                                 <Switch size="small" checked={theme === "dark"} onChange={(checked) => setTheme(checked ? "dark" : "light")} aria-label="深色模式" />
                             </div>
-                            <button type="button" className="flex h-9 w-full items-center gap-2 rounded px-2 text-xs text-foreground/55 hover:bg-foreground/[.055] hover:text-foreground" onClick={() => void handleLogout()}><LogOut className="size-3.5" />退出登录</button>
+                            <button type="button" className="flex h-9 w-full items-center gap-2 rounded px-2 text-xs text-foreground/55 hover:bg-surface-hover hover:text-foreground" onClick={() => void handleLogout()}><LogOut className="size-3.5" />退出登录</button>
                         </div>
                     )}
                 >
-                    <button type="button" className={cn("flex min-h-10 w-full min-w-0 items-center overflow-hidden rounded-md text-left transition-colors hover:bg-foreground/[.045]", accountClassName)} title={creditsEnabled ? `${user.displayName || user.username} · ${balance} 积分` : user.displayName || user.username}>
+                    <button type="button" className={cn("flex min-h-10 w-full min-w-0 items-center overflow-hidden rounded-md text-left transition-colors hover:bg-surface-hover", accountClassName)} title={creditsEnabled ? `${user.displayName || user.username} · ${balance} 积分` : user.displayName || user.username}>
                         <UserAvatar user={user} className="size-7" />
                         <span className={cn("min-w-0 flex-1 flex-col", expandedClassName)}>
                             <span className="truncate text-xs font-medium">{user.displayName || user.username}</span>
@@ -103,7 +104,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                     </button>
                 </Popover>
             ) : (
-                <Link to="/login" className={cn("flex h-10 items-center rounded-md text-xs text-foreground/65 hover:bg-foreground/[.05] hover:text-foreground", collapsedClassName)} title="登录">
+                <Link to="/login" className={cn("flex h-10 items-center rounded-md text-xs text-foreground/65 hover:bg-surface-hover hover:text-foreground", collapsedClassName)} title="登录">
                     <LogIn className="size-4 shrink-0" /><span className={expandedClassName}>登录</span>
                 </Link>
             )}
@@ -112,7 +113,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
 }
 
 function MenuLink({ to, icon, label, onNavigate }: { to: string; icon: ReactNode; label: string; onNavigate: () => void }) {
-    return <Link to={to} onClick={onNavigate} className="flex h-9 items-center gap-2.5 rounded px-2 text-xs text-foreground/62 hover:bg-foreground/[.055] hover:text-foreground [&_svg]:size-3.5 [&_svg]:shrink-0">{icon}<span className="flex-1">{label}</span><ChevronRight className="!size-3 text-foreground/25" /></Link>;
+    return <Link to={to} onClick={onNavigate} className="flex h-9 items-center gap-2.5 rounded px-2 text-xs text-foreground/62 hover:bg-surface-hover hover:text-foreground [&_svg]:size-3.5 [&_svg]:shrink-0">{icon}<span className="flex-1">{label}</span><ChevronRight className="!size-3 text-foreground/25" /></Link>;
 }
 
 function UserAvatar({ user, className }: { user: LocalUser; className: string }) {
@@ -123,11 +124,11 @@ function UserAvatar({ user, className }: { user: LocalUser; className: string })
 
     return (
         <span className={`relative grid shrink-0 place-items-center ${className}`}>
-            <span className="grid size-full place-items-center overflow-hidden rounded-full bg-muted text-foreground/55">
+            <span className="grid size-full place-items-center overflow-hidden rounded-md bg-transparent text-foreground/55">
                 {avatarUrl && !failed ? (
                     <img src={avatarUrl} alt="" referrerPolicy="no-referrer" className="size-full object-cover" onError={() => setFailed(true)} />
                 ) : (
-                    <UserRound className="size-[52%]" aria-hidden />
+                    <CircleUserRound className="app-workspace-account-icon" aria-hidden />
                 )}
             </span>
             <IdentityProviderBadge user={user} compact className="absolute -bottom-1 -right-1" />
diff --git a/web/src/components/layout/workspace-top-bar.tsx b/web/src/components/layout/workspace-top-bar.tsx
new file mode 100644
index 000000000..fa9b120ea
--- /dev/null
+++ b/web/src/components/layout/workspace-top-bar.tsx
@@ -0,0 +1,36 @@
+import { Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen, Settings2 } from "lucide-react";
+import { Link } from "react-router";
+
+import { SystemAnnouncementCenter } from "@/components/layout/system-announcement-center";
+import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler";
+import { useThemeStore } from "@/stores/use-theme-store";
+import { useUserStore } from "@/stores/use-user-store";
+
+export function WorkspaceTopBar({ sidebarOpen, onToggleSidebar }: { sidebarOpen: boolean; onToggleSidebar: () => void }) {
+    const theme = useThemeStore((state) => state.theme);
+    const setTheme = useThemeStore((state) => state.setTheme);
+    const user = useUserStore((state) => state.user);
+
+    return (
+        <header className="app-workspace-topbar flex shrink-0 items-center justify-between gap-3 border-b px-4 sm:px-5">
+            <div className="flex min-w-0 items-center gap-2">
+                <button type="button" className="app-workspace-topbar-icon-button" aria-label={sidebarOpen ? "收起侧栏" : "展开侧栏"} onClick={onToggleSidebar}>
+                    {sidebarOpen ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
+                </button>
+                <Link to="/" className="app-workspace-brand-link inline-flex min-w-0 items-center gap-2 text-foreground" title="影策工作台">
+                    <span className="app-workspace-brand-mark grid size-7 shrink-0 place-items-center rounded-md bg-foreground text-background">
+                        <InfinityIcon className="size-4" />
+                    </span>
+                    <span className="app-workspace-brand-wordmark truncate text-[var(--fs-body)] font-semibold">影策</span>
+                </Link>
+            </div>
+            <div className="flex shrink-0 items-center gap-1">
+                {user ? <SystemAnnouncementCenter userId={user.id} className="app-workspace-topbar-icon-button" /> : null}
+                <AnimatedThemeToggler className="app-workspace-topbar-icon-button" theme={theme} onThemeChange={setTheme} aria-label="切换主题" />
+                <Link to="/settings" className="app-workspace-topbar-icon-button" aria-label="设置" title="设置">
+                    <Settings2 className="size-4" />
+                </Link>
+            </div>
+        </header>
+    );
+}
diff --git a/web/src/lib/canvas/canvas-project-generation.ts b/web/src/lib/canvas/canvas-project-generation.ts
index 899eb138a..c80de7c38 100644
--- a/web/src/lib/canvas/canvas-project-generation.ts
+++ b/web/src/lib/canvas/canvas-project-generation.ts
@@ -1,6 +1,6 @@
 import { type GenerationTask } from "@/services/api/task-center";
 import { backendProviderConfig, runBackendGenerationTask } from "@/services/api/generation-task";
-import { configuredModelMatchesCapability, defaultConfig, resolveModelRequestConfig, type AiConfig } from "@/stores/use-config-store";
+import { defaultConfig, modelMatchesCapability, modelOptionName, normalizeModelOptionValue, resolveModelRequestConfig, type AiConfig } from "@/stores/use-config-store";
 import { resolveImageUrl, uploadImage } from "@/services/image-storage";
 import { resolveMediaUrl } from "@/services/file-storage";
 import { resourceIdFromStorageKey } from "@/services/api/resources";
@@ -287,8 +287,8 @@ export function getGenerationCount(count: string) {
 export function buildGenerationConfig(config: AiConfig, node: CanvasNodeData | undefined, mode: CanvasNodeGenerationMode): AiConfig {
     const defaultModel = mode === "image" ? config.imageModel : mode === "video" ? config.videoModel : mode === "audio" ? config.audioModel : config.textModel;
     const fallbackModel = mode === "image" ? defaultConfig.imageModel : mode === "video" ? defaultConfig.videoModel : mode === "audio" ? defaultConfig.audioModel : defaultConfig.textModel;
-    const storedModel = node?.metadata?.model;
-    const model = storedModel && configuredModelMatchesCapability(config, storedModel, mode) ? storedModel : defaultModel && configuredModelMatchesCapability(config, defaultModel, mode) ? defaultModel : fallbackModel;
+    const storedModel = resolveCanvasGenerationModel(config, node?.metadata?.model, mode);
+    const model = storedModel || resolveCanvasGenerationModel(config, defaultModel, mode) || fallbackModel;
     const imageProfile = mode === "image" ? modelCapabilityConfigFor(config, model).image! : undefined;
     const normalizedImage = imageProfile ? normalizeImageValue(imageProfile, { quality: node?.metadata?.quality || config.quality || defaultConfig.quality, size: node?.metadata?.size || config.size || defaultConfig.size, transparentBackground: node?.metadata?.transparentBackground || config.transparentBackground, count: String(node?.metadata?.count || config.canvasImageCount || config.count || defaultConfig.count) }) : undefined;
     return {
@@ -309,6 +309,13 @@ export function buildGenerationConfig(config: AiConfig, node: CanvasNodeData | u
     };
 }
 
+export function resolveCanvasGenerationModel(config: AiConfig, model: string | undefined, mode: CanvasNodeGenerationMode): string {
+    if (!model) return "";
+    const normalized = normalizeModelOptionValue(model, config.channels);
+    if (!normalized) return "";
+    return modelMatchesCapability(modelOptionName(normalized), mode) ? normalized : "";
+}
+
 export function supportsVideoReferenceAudio(config: AiConfig) {
     const interfaceType = resolveModelRequestConfig(config, config.model).interfaceType;
     return interfaceType === "newapi-channel-1" || interfaceType === "newapi-channel-2" || isSeedanceVideoConfig(config);
diff --git a/web/src/pages/admin/components/admin-shell.tsx b/web/src/pages/admin/components/admin-shell.tsx
index b4ffdd93a..5d1da56ec 100644
--- a/web/src/pages/admin/components/admin-shell.tsx
+++ b/web/src/pages/admin/components/admin-shell.tsx
@@ -79,10 +79,10 @@ export function AdminShell() {
                 <AdminNavigation collapsed={collapsed} />
                 <div className="shrink-0 border-t border-border/70 p-2">
                     <Tooltip title={collapsed ? "更新日志" : undefined} placement="right">
-                        <AppChangelogButton className={cn("flex h-8 w-full items-center rounded text-[var(--fs-label)] text-foreground/52 transition-colors hover:bg-foreground/[.055] hover:text-foreground", collapsed ? "justify-center px-0" : "gap-2 px-2")} showVersion={!collapsed} />
+                        <AppChangelogButton className={cn("flex h-8 w-full items-center rounded text-[var(--fs-label)] text-foreground/52 transition-colors hover:bg-surface-hover hover:text-foreground", collapsed ? "justify-center px-0" : "gap-2 px-2")} showVersion={!collapsed} />
                     </Tooltip>
                     <Tooltip title={collapsed ? "返回创作台" : undefined} placement="right">
-                        <NavLink to="/canvas" className={cn("flex h-8 items-center rounded text-[var(--fs-label)] text-foreground/52 transition-colors hover:bg-foreground/[.055] hover:text-foreground", collapsed ? "justify-center px-0" : "gap-2 px-2")}>
+                        <NavLink to="/canvas" className={cn("flex h-8 items-center rounded text-[var(--fs-label)] text-foreground/52 transition-colors hover:bg-surface-hover hover:text-foreground", collapsed ? "justify-center px-0" : "gap-2 px-2")}>
                             <Home className="size-3.5" />
                             {!collapsed ? <span>返回创作台</span> : null}
                         </NavLink>
@@ -127,11 +127,11 @@ function MobileAdminNavigation() {
     return (
         <nav className="app-workspace-navigation hide-scrollbar flex shrink-0 gap-1 overflow-x-auto border-b border-border/70 px-3 py-2 lg:hidden" aria-label="管理后台分区">
             {adminNavigation.flatMap((group) => group.items).map((item) => (
-                <NavLink key={item.path} to={item.path} end={item.path === "/admin"} className={({ isActive }) => cn("app-workspace-nav-link flex h-8 shrink-0 items-center gap-1.5 rounded-md px-2.5 text-xs transition-colors", isActive ? "is-active font-medium" : "text-foreground/60 hover:bg-foreground/[.05] hover:text-foreground")}>
+                <NavLink key={item.path} to={item.path} end={item.path === "/admin"} className={({ isActive }) => cn("app-workspace-nav-link flex h-8 shrink-0 items-center gap-1.5 rounded-md px-2.5 text-xs transition-colors", isActive ? "is-active font-medium" : "text-foreground/60 hover:bg-surface-hover hover:text-foreground")}>
                     {item.icon}<span>{item.label}</span>
                 </NavLink>
             ))}
-            <AppChangelogButton className="grid size-8 shrink-0 place-items-center rounded-md text-foreground/55 transition-colors hover:bg-foreground/[.05] hover:text-foreground [&_svg]:size-4" />
+            <AppChangelogButton className="grid size-8 shrink-0 place-items-center rounded-md text-foreground/55 transition-colors hover:bg-surface-hover hover:text-foreground [&_svg]:size-4" />
         </nav>
     );
 }
@@ -151,7 +151,7 @@ function AdminNavigation({ collapsed }: { collapsed: boolean }) {
                                     className={({ isActive }) => cn(
                                         "app-workspace-nav-link flex h-9 items-center rounded-md text-[var(--fs-body)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
                                         collapsed ? "justify-center px-0" : "gap-2.5 px-2.5",
-                                        isActive ? "is-active font-medium" : "text-foreground/62 hover:bg-foreground/[.05] hover:text-foreground",
+                                        isActive ? "is-active font-medium" : "text-foreground/62 hover:bg-surface-hover hover:text-foreground",
                                     )}
                                 >
                                     {item.icon}{!collapsed ? <span className="truncate">{item.label}</span> : null}
diff --git a/web/src/pages/assets/index.tsx b/web/src/pages/assets/index.tsx
index 1d8526400..f3d2c3d6e 100644
--- a/web/src/pages/assets/index.tsx
+++ b/web/src/pages/assets/index.tsx
@@ -1,6 +1,8 @@
-import { CheckCheck, Copy, Download, FileUp, MoreHorizontal, PencilLine, Plus, Search, Trash2, Upload } from "lucide-react";
+import { AudioLines, Box, CheckCheck, Clapperboard, Copy, Download, FileText, FileUp, Image as ImageIcon, Link2, MoreHorizontal, PencilLine, Play, Plus, Search, Trash2, Upload, type LucideIcon } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { App, Button, Drawer, Dropdown, Form, Input, Modal, Select, Space, Tag, Typography } from "antd";
+import type { MenuProps } from "antd";
+import { useNavigate } from "react-router";
 
 import { CollectionGrid, ListToolbar, PageHeader, PaginationBar, WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceState } from "@/components/layout/workspace-state";
@@ -52,8 +54,17 @@ const categoryOptions = [
     { label: "其他", value: "other" },
 ];
 
+const assetKindIcons: Record<LibraryAsset["kind"], LucideIcon> = {
+    text: FileText,
+    image: ImageIcon,
+    video: Clapperboard,
+    audio: AudioLines,
+    model: Box,
+};
+
 export default function AssetsPage() {
     const { message } = App.useApp();
+    const navigate = useNavigate();
     const copyText = useCopyText();
     const [form] = Form.useForm<AssetFormValues>();
     const coverInputRef = useRef<HTMLInputElement>(null);
@@ -259,23 +270,28 @@ export default function AssetsPage() {
 
     return (
         <>
-            <WorkspacePage grid className="library-page assets-library-page">
+            <WorkspacePage grid className="library-page assets-library-page canvas-library-page">
+            <div className="studio-band">
                 <PageHeader
-                    icon="assets"
                     title="素材库"
                     description="管理文本、图片、视频、音频和 3D 模型素材。"
-                    meta={<span className="text-xs text-foreground/45">{filteredAssets.length} 个素材</span>}
+                    meta={<span className="app-projects-header-meta assets-header-meta">{validAssets.length} 个素材</span>}
                     actions={(
                         <>
-                            <Button icon={<Download className="size-4" />} onClick={() => void exportAllAssets()}>导出全部</Button>
-                            <Dropdown trigger={["click"]} menu={{ items: [{ key: "package", icon: <FileUp className="size-4" />, label: "导入素材包", onClick: () => assetInputRef.current?.click() }, { key: "model", icon: <Upload className="size-4" />, label: "上传 3D 模型", onClick: () => modelInputRef.current?.click() }] }}><Button icon={<FileUp className="size-4" />}>导入</Button></Dropdown>
+                            <Button className="library-primary-action" type="primary" icon={<Plus className="size-3.5" />} onClick={openCreate}>新增素材</Button>
+                            <Button title="导出全部素材" aria-label="导出全部素材" icon={<Download className="size-4" />} onClick={() => void exportAllAssets()} />
+                            <Dropdown trigger={["click"]} menu={{ items: [{ key: "package", icon: <FileUp className="size-4" />, label: "导入素材包", onClick: () => assetInputRef.current?.click() }, { key: "model", icon: <Upload className="size-4" />, label: "上传 3D 模型", onClick: () => modelInputRef.current?.click() }] }}>
+                                <Button title="导入素材" aria-label="导入素材" icon={<FileUp className="size-4" />} />
+                            </Dropdown>
                         </>
                     )}
                 />
                 <ListToolbar className="library-toolbar" active={Boolean(keyword || kindFilter !== "all" || categoryFilter !== "all")} onReset={() => { setKeyword(""); setKindFilter("all"); setCategoryFilter("all"); setPage(1); }}>
                     <Input allowClear className="w-full sm:w-80" prefix={<Search className="size-4 text-foreground/40" />} value={keyword} placeholder="搜索标题、内容、标签或来源" onChange={(event) => { setPage(1); setKeyword(event.target.value); }} />
                 </ListToolbar>
+            </div>
 
+            <div className="canvas-library-frame assets-library-frame">
                 <div className="grid min-h-0 gap-4 lg:grid-cols-[176px_minmax(0,1fr)]">
                     <aside className="thin-scrollbar flex gap-2 overflow-x-auto border-b border-border/70 py-3 lg:sticky lg:top-0 lg:block lg:max-h-[calc(100vh-150px)] lg:overflow-y-auto lg:border-b-0 lg:border-r lg:pr-3">
                         <AssetFilterGroup title="素材类型" options={kindOptions} value={kindFilter} counts={kindCounts} onChange={(value) => { setKindFilter(value as AssetKind | "all"); setPage(1); }} />
@@ -283,30 +299,32 @@ export default function AssetsPage() {
                     </aside>
                     <section className="min-w-0">
                         {selectedAssets.length ? (
-                            <div className="mt-3 flex min-h-10 flex-wrap items-center gap-2 border-y border-border/75 py-2 text-xs">
-                                <strong className="mr-auto font-medium">已选择 {selectedAssets.length} 个素材</strong>
-                                <Button size="small" icon={<CheckCheck className="size-3.5" />} disabled={allFilteredSelected} onClick={() => setSelectedIds((current) => Array.from(new Set([...current, ...filteredAssetIds])))}>全选</Button>
-                                <Button size="small" onClick={() => setSelectedIds([])}>取消选择</Button>
-                                <Button size="small" icon={<Download className="size-3.5" />} onClick={() => void exportSelectedAssets()}>导出</Button>
-                                <Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={() => setBatchDeleteOpen(true)}>删除</Button>
-                            </div>
+                            <AssetsBatchBar count={selectedAssets.length} allSelected={allFilteredSelected} onSelectAll={() => setSelectedIds((current) => Array.from(new Set([...current, ...filteredAssetIds])))} onClear={() => setSelectedIds([])} onExport={() => void exportSelectedAssets()} onDelete={() => setBatchDeleteOpen(true)} />
                         ) : null}
-                        <CollectionGrid className="library-grid assets-library-grid">
-                            {canCreateAsset ? <button type="button" className="library-create-card" onClick={openCreate}>
-                                <span className="library-create-cover"><Plus className="size-8" /></span>
-                                <span className="library-create-title">新增素材</span>
-                                <span className="library-create-meta">文本、图片、音视频或模型</span>
-                            </button> : null}
-                            {visibleAssets.map((asset) => (
-                                <AssetCard key={asset.id} asset={asset} selected={selectedIds.includes(asset.id)} onSelect={(selected) => setSelectedIds((current) => selected ? [...new Set([...current, asset.id])] : current.filter((id) => id !== asset.id))} onOpen={() => setPreviewAsset(asset)} onEdit={() => openEdit(asset)} onCopy={copyAssetText} onDownload={downloadImage} onDelete={() => setDeletingAsset(asset)} />
-                            ))}
-                        </CollectionGrid>
-
-                        {!visibleAssets.length && (validAssets.length > 0 || !canCreateAsset) ? <WorkspaceState icon="assets" compact title={validAssets.length ? "没有匹配的素材" : "素材库还是空的"} description={validAssets.length ? "调整关键词或左侧分类后再试。" : "从画布保存结果，或导入已有素材包开始整理。"} action={!validAssets.length ? <Button type="primary" icon={<Plus className="size-4" />} onClick={openCreate}>新增素材</Button> : undefined} /> : null}
-
-                        <PaginationBar current={page} pageSize={pageSize} total={filteredAssets.length} pageSizeOptions={[20, 40, 80]} onChange={(nextPage, nextPageSize) => { setPage(nextPageSize !== pageSize ? 1 : nextPage); setPageSize(nextPageSize); }} />
+                        {validAssets.length === 0 ? (
+                            <AssetsEmptyState onNew={openCreate} onImport={() => assetInputRef.current?.click()} onGoCanvas={() => navigate("/canvas")} />
+                        ) : (
+                            <>
+                                {filteredAssets.length === 0 ? (
+                                    <WorkspaceState icon="assets" compact title="没有匹配的素材" description="调整关键词或左侧分类后再试。" />
+                                ) : (
+                                    <CollectionGrid className="library-grid assets-library-grid">
+                                        {canCreateAsset ? <button type="button" className="library-create-card" onClick={openCreate}>
+                                            <span className="library-create-cover"><Plus className="size-8" /></span>
+                                            <span className="library-create-title">新增素材</span>
+                                            <span className="library-create-meta">文本、图片、音视频或模型</span>
+                                        </button> : null}
+                                        {visibleAssets.map((asset) => (
+                                            <AssetCard key={asset.id} asset={asset} selected={selectedIds.includes(asset.id)} onSelect={(selected) => setSelectedIds((current) => selected ? [...new Set([...current, asset.id])] : current.filter((id) => id !== asset.id))} onOpen={() => setPreviewAsset(asset)} onEdit={() => openEdit(asset)} onCopy={copyAssetText} onDownload={downloadImage} onDelete={() => setDeletingAsset(asset)} />
+                                        ))}
+                                    </CollectionGrid>
+                                )}
+                                <PaginationBar current={page} pageSize={pageSize} total={filteredAssets.length} pageSizeOptions={[20, 40, 80]} onChange={(nextPage, nextPageSize) => { setPage(nextPageSize !== pageSize ? 1 : nextPage); setPageSize(nextPageSize); }} />
+                            </>
+                        )}
                     </section>
                 </div>
+            </div>
             </WorkspacePage>
 
             <Modal className="library-modal" title={editingAsset ? "编辑素材" : "新增素材"} open={isAssetOpen} width={980} onCancel={() => setIsAssetOpen(false)} onOk={() => void saveAsset()} okText="保存" cancelText="取消" destroyOnHidden>
@@ -435,32 +453,16 @@ export default function AssetsPage() {
 
 function AssetCard({ asset, selected, onSelect, onOpen, onEdit, onCopy, onDownload, onDelete }: { asset: LibraryAsset; selected: boolean; onSelect: (selected: boolean) => void; onOpen: () => void; onEdit: () => void; onCopy: (asset: LibraryAsset) => void; onDownload: (asset: LibraryAsset) => void; onDelete: () => void }) {
     const summary = assetSummary(asset);
+    const menuItems: MenuProps["items"] = [
+        ...(asset.kind === "text" || asset.kind === "image" ? [{ key: "edit", icon: <PencilLine className="size-3.5" />, label: "编辑", onClick: onEdit }] : []),
+        ...(asset.kind === "text" ? [{ key: "copy", icon: <Copy className="size-3.5" />, label: "复制文本", onClick: () => void onCopy(asset) }] : []),
+        ...(asset.kind === "image" || asset.kind === "video" || asset.kind === "audio" || asset.kind === "model" ? [{ key: "download", icon: <Download className="size-3.5" />, label: "下载", onClick: () => onDownload(asset) }] : []),
+        { type: "divider" as const },
+        { key: "delete", danger: true, icon: <Trash2 className="size-3.5" />, label: "删除", onClick: onDelete },
+    ];
     return (
         <AssetLibraryCard selected={selected}>
-            <AssetLibraryCardMedia className="relative overflow-hidden bg-foreground/[.045]">
-                <button type="button" className="block w-full text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--workspace-accent)]" onClick={onOpen} aria-label={`查看素材：${asset.title}`}>
-                    <AssetMediaPreview asset={asset} alt={asset.title} className="aspect-[4/3] w-full bg-black object-cover" fallback={<div className="flex aspect-[4/3] items-center justify-center bg-foreground/[.035] p-4 text-center text-xs leading-5 text-foreground/55">{asset.kind === "text" ? asset.data.content : "暂无封面"}</div>} />
-                </button>
-                <input type="checkbox" checked={selected} onClick={(event) => event.stopPropagation()} onChange={(event) => onSelect(event.target.checked)} className={`absolute left-2 top-2 size-4 accent-[var(--workspace-accent)] drop-shadow-md transition-opacity ${selected ? "opacity-100" : "opacity-100 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100"}`} aria-label={`选择 ${asset.title}`} />
-                <Dropdown
-                    trigger={["click"]}
-                    menu={{ items: [
-                        ...(asset.kind !== "video" && asset.kind !== "audio" && asset.kind !== "model" ? [{ key: "edit", icon: <PencilLine className="size-3.5" />, label: "编辑", onClick: onEdit }] : []),
-                        ...(asset.kind === "text" ? [{ key: "copy", icon: <Copy className="size-3.5" />, label: "复制文本", onClick: () => void onCopy(asset) }] : []),
-                        ...(asset.kind === "image" || asset.kind === "video" || asset.kind === "audio" || asset.kind === "model" ? [{ key: "download", icon: <Download className="size-3.5" />, label: "下载", onClick: () => onDownload(asset) }] : []),
-                        { type: "divider" as const },
-                        { key: "delete", danger: true, icon: <Trash2 className="size-3.5" />, label: "删除", onClick: onDelete },
-                    ] }}
-                >
-                    <button type="button" className="absolute right-2 top-2 grid size-8 place-items-center rounded-[var(--r-sm)] border border-white/20 bg-black/55 text-white/85 opacity-100 shadow-sm backdrop-blur transition-[opacity,background-color] hover:bg-black/75 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100" aria-label="更多素材操作" title="更多操作">
-                        <MoreHorizontal className="size-4" />
-                    </button>
-                </Dropdown>
-                <div className="pointer-events-none absolute inset-x-2 bottom-2 flex items-center gap-1">
-                    <span className="rounded-[var(--r-xs)] bg-black/60 px-1.5 py-0.5 text-[var(--fs-tiny)] font-medium text-white/90 backdrop-blur">{assetKindLabel(asset.kind)}</span>
-                    <span className="rounded-[var(--r-xs)] bg-black/60 px-1.5 py-0.5 text-[var(--fs-tiny)] text-white/75 backdrop-blur">{assetCategoryLabel(asset.category)}</span>
-                </div>
-            </AssetLibraryCardMedia>
+            <AssetCover asset={asset} selected={selected} onSelect={onSelect} onOpen={onOpen} menuItems={menuItems} />
             <button type="button" className="block w-full px-2.5 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--workspace-accent)]" onClick={onOpen}>
                 <div className="flex min-w-0 items-center justify-between gap-2">
                     <h2 className="truncate text-[var(--fs-body)] font-semibold text-foreground" title={asset.title}>{asset.title}</h2>
@@ -477,87 +479,227 @@ function AssetCard({ asset, selected, onSelect, onOpen, onEdit, onCopy, onDownlo
     );
 }
 
+function AssetCover({ asset, selected, onSelect, onOpen, menuItems }: { asset: LibraryAsset; selected: boolean; onSelect: (selected: boolean) => void; onOpen: () => void; menuItems: MenuProps["items"] }) {
+    const KindIcon = assetKindIcons[asset.kind];
+    const clock = asset.kind === "video" || asset.kind === "audio" ? formatAssetClock(asset.data.durationMs) : null;
+    const showPlay = asset.kind === "video";
+    const isLight = asset.kind === "audio" || asset.kind === "text" || asset.kind === "model";
+    return (
+        <AssetLibraryCardMedia className={isLight ? "assets-cover is-light" : "assets-cover"}>
+            <button type="button" className="assets-cover-link" onClick={onOpen} aria-label={`查看素材：${asset.title}`}>
+                {asset.kind === "audio" ? (
+                    <AudioWaveCover asset={asset} />
+                ) : asset.kind === "text" ? (
+                    <TextCover asset={asset} />
+                ) : asset.kind === "model" ? (
+                    <ModelCover asset={asset} />
+                ) : (
+                    <AssetMediaPreview asset={asset} alt={asset.title} className="assets-cover-media" fallback={<div className="assets-cover-fallback"><KindIcon className="size-7" /></div>} />
+                )}
+                <span className="assets-cover-vignette" aria-hidden="true" />
+                {showPlay ? <span className="assets-cover-play"><Play className="size-4" /></span> : null}
+            </button>
+            <span className="assets-cover-badges">
+                <span className="assets-cover-badge is-kind"><KindIcon />{assetKindLabel(asset.kind)}</span>
+                <span className="assets-cover-badge is-category">{assetCategoryLabel(asset.category)}</span>
+            </span>
+            {clock ? <span className="assets-cover-clock">{clock}</span> : null}
+            <input type="checkbox" checked={selected} onClick={(event) => event.stopPropagation()} onChange={(event) => onSelect(event.target.checked)} className="assets-select-check" aria-label={`选择 ${asset.title}`} />
+            <Dropdown
+                trigger={["click"]}
+                menu={{ items: menuItems }}
+            >
+                <button type="button" className="assets-cover-more" aria-label="更多素材操作" title="更多操作">
+                    <MoreHorizontal className="size-4" />
+                </button>
+            </Dropdown>
+        </AssetLibraryCardMedia>
+    );
+}
+
+function AudioWaveCover({ asset }: { asset: LibraryAsset & { kind: "audio" } }) {
+    const bars = audioWaveBars(asset.id);
+    return (
+        <div className="assets-cover-wave" aria-hidden="true">
+            {bars.map((height, index) => <span key={index} style={{ height: `${height}%` }} />)}
+            <AudioLines className="assets-cover-wave-glyph" />
+        </div>
+    );
+}
+
+function TextCover({ asset }: { asset: LibraryAsset & { kind: "text" } }) {
+    return (
+        <div className="assets-cover-text">
+            <p>{asset.data.content || "空白文本素材"}</p>
+        </div>
+    );
+}
+
+function ModelCover({ asset }: { asset: LibraryAsset & { kind: "model" } }) {
+    return (
+        <div className="assets-cover-model">
+            <Box />
+            <span>{asset.data.fileName}</span>
+        </div>
+    );
+}
+
+function AssetsBatchBar({ count, allSelected, onSelectAll, onClear, onExport, onDelete }: { count: number; allSelected: boolean; onSelectAll: () => void; onClear: () => void; onExport: () => void; onDelete: () => void }) {
+    return (
+        <div className="assets-batch-bar" role="toolbar" aria-label="批量操作">
+            <span className="assets-batch-count">已选择 <strong>{count}</strong> 个素材</span>
+            <div className="assets-batch-actions">
+                <Button size="small" icon={<CheckCheck className="size-3.5" />} disabled={allSelected} onClick={onSelectAll}>全选</Button>
+                <Button size="small" onClick={onClear}>取消选择</Button>
+                <Button size="small" icon={<Download className="size-3.5" />} onClick={onExport}>导出</Button>
+                <Button size="small" danger icon={<Trash2 className="size-3.5" />} onClick={onDelete}>删除</Button>
+            </div>
+        </div>
+    );
+}
+
+const assetsEmptyBannerFrames = [
+    { src: "/short-drama-styles/retro-hong-kong.jpg", caption: "ASSET.01 · 天台重逢" },
+    { src: "/short-drama-styles/cyberpunk-neon.jpg", caption: "ASSET.02 · 雨夜霓虹" },
+    { src: "/short-drama-styles/suspense-noir.jpg", caption: "ASSET.03 · 暗巷追逐" },
+];
+
+function AssetsEmptyState({ onNew, onImport, onGoCanvas }: { onNew: () => void; onImport: () => void; onGoCanvas: () => void }) {
+    return (
+        <div className="assets-empty">
+            <div className="assets-empty-banner" aria-hidden="true">
+                {assetsEmptyBannerFrames.map((frame, index) => (
+                    <figure key={frame.caption} className={`assets-empty-banner-frame ${index === 1 ? "is-main" : index === 0 ? "is-back" : "is-front"}`}>
+                        <img src={frame.src} alt="" loading="lazy" decoding="async" />
+                        <span>{frame.caption}</span>
+                    </figure>
+                ))}
+                <span className="assets-empty-banner-caption"><span>影策素材库</span>把每次创作的结果，留档成可复用的资产</span>
+            </div>
+            <div className="assets-empty-cards">
+                <button type="button" className="assets-empty-card" onClick={onNew}>
+                    <span className="assets-empty-card-icon"><Plus /></span>
+                    <strong>新建素材</strong>
+                    <span>录入提示词、说明文案，或上传图片资产。</span>
+                </button>
+                <button type="button" className="assets-empty-card" onClick={onImport}>
+                    <span className="assets-empty-card-icon"><FileUp /></span>
+                    <strong>导入素材包</strong>
+                    <span>从素材压缩包一键恢复旧资产，继续创作。</span>
+                </button>
+                <button type="button" className="assets-empty-card" onClick={onGoCanvas}>
+                    <span className="assets-empty-card-icon"><Clapperboard /></span>
+                    <strong>去画布保存</strong>
+                    <span>把画布上满意的镜头与画面留档进素材库。</span>
+                </button>
+            </div>
+        </div>
+    );
+}
+
 function AssetFilterGroup({ title, options, value, counts, onChange, className = "" }: { title: string; options: Array<{ label: string; value: string }>; value: string; counts: Map<string, number>; onChange: (value: string) => void; className?: string }) {
     return (
         <div className={className}>
             <div className="mb-1.5 px-1 text-[var(--fs-tiny)] font-semibold uppercase tracking-[0.08em] text-foreground/38">{title}</div>
-            <div className="flex gap-1 lg:block">
-                {options.map((option) => (
-                    <button key={option.value} type="button" className={`flex h-8 shrink-0 items-center justify-between gap-3 rounded px-2 text-xs transition-colors lg:mb-0.5 lg:w-full ${value === option.value ? "bg-foreground/[.08] font-medium text-foreground" : "text-foreground/56 hover:bg-foreground/[.04] hover:text-foreground"}`} onClick={() => onChange(option.value)}>
-                        <span>{option.label}</span><span className="rounded bg-foreground/[.06] px-1.5 py-0.5 text-[var(--fs-tiny)] tabular-nums text-foreground/45">{counts.get(option.value) || 0}</span>
-                    </button>
-                ))}
+            <div className="flex gap-1.5 lg:block lg:space-y-0.5">
+                {options.map((option) => {
+                    const active = value === option.value;
+                    return (
+                        <button key={option.value} type="button" aria-pressed={active} className={`assets-filter-item ${active ? "is-active" : ""}`} onClick={() => onChange(option.value)}>
+                            <span className="assets-filter-item-label">{option.label}</span>
+                            <span className="assets-filter-count">{counts.get(option.value) || 0}</span>
+                        </button>
+                    );
+                })}
             </div>
         </div>
     );
 }
 
 function AssetDrawer({ asset, onClose, onCopy, onDownload }: { asset: LibraryAsset | null; onClose: () => void; onCopy: (asset: LibraryAsset) => void; onDownload: (asset: LibraryAsset) => void }) {
+    const facts = asset ? assetArchiveFacts(asset) : [];
+    const KindIcon = asset ? assetKindIcons[asset.kind] : Clapperboard;
     return (
-        <Drawer className="library-drawer" title="素材详情" open={Boolean(asset)} size="large" onClose={onClose}>
+        <Drawer className="library-drawer" title="素材档案" open={Boolean(asset)} size="large" onClose={onClose}>
             {asset ? (
-                <div className="space-y-5">
-                    <AssetMediaPreview asset={asset} alt={asset.title} className="max-h-[420px] w-full rounded-lg bg-black object-contain" fallback={<div className="rounded-lg border border-stone-200 bg-stone-50 p-5 text-sm leading-6 text-stone-600 dark:border-stone-800 dark:bg-stone-900 dark:text-stone-300">{asset.kind === "text" ? asset.data.content : "暂无封面"}</div>} />
-                    <div>
-                        <Typography.Title level={4} className="!mb-2">
-                            {asset.title}
-                        </Typography.Title>
-                        <Space size={[4, 4]} wrap>
-                            <Tag>{assetKindLabel(asset.kind)}</Tag>
-                            <Tag>{assetCategoryLabel(asset.category)}</Tag>
-                            <StorageTag asset={asset} />
-                            {(asset.tags || []).map((tag) => (
-                                <Tag key={tag}>{tag}</Tag>
-                            ))}
-                        </Space>
+                <div className="space-y-4">
+                    <div className="asset-archive-header">
+                        <span className="asset-archive-header-icon"><KindIcon /></span>
+                        <div className="min-w-0">
+                            <h2 className="asset-archive-title">{asset.title}</h2>
+                            <p className="asset-archive-subtitle">{assetCategoryLabel(asset.category)} · {formatAssetDateTime(asset.createdAt)} 创建</p>
+                        </div>
                     </div>
-                    <div className="asset-drawer-content rounded-lg border border-stone-200 p-4 dark:border-stone-800">
-                        <Typography.Text type="secondary" className="block text-xs">
-                            内容
-                        </Typography.Text>
+                    <div className="asset-archive-preview">
                         {asset.kind === "text" ? (
-                            <Typography.Paragraph className="mt-2 whitespace-pre-wrap">{asset.data.content}</Typography.Paragraph>
-                        ) : asset.kind === "video" ? (
-                            <video src={asset.data.url} controls className="mt-2 aspect-video w-full rounded-lg bg-black" />
+                            <div className="asset-archive-preview-note">{asset.data.content}</div>
                         ) : asset.kind === "audio" ? (
-                            <audio src={asset.data.url} controls className="mt-2 w-full" />
+                            <div className="asset-archive-audio"><audio src={asset.data.url} controls /></div>
                         ) : asset.kind === "model" ? (
-                            <Typography.Text className="mt-2 block">{asset.data.fileName} · {formatBytes(asset.data.bytes)} · {asset.data.mimeType}</Typography.Text>
+                            <div className="asset-archive-preview-model"><Box /><span>{asset.data.fileName} · {formatBytes(asset.data.bytes)}</span></div>
+                        ) : asset.kind === "video" ? (
+                            <video src={asset.data.url} controls className="asset-archive-preview-media" />
                         ) : (
-                            <Typography.Text className="mt-2 block">
-                                {asset.data.width}x{asset.data.height} · {formatBytes(asset.data.bytes)} · {asset.data.mimeType}
-                            </Typography.Text>
+                            <img src={asset.coverUrl || asset.data.dataUrl} alt={asset.title} loading="lazy" decoding="async" className="asset-archive-preview-media" />
                         )}
-                        {asset.kind === "image" || asset.kind === "video" || asset.kind === "audio" || asset.kind === "model" ? (
-                            <Typography.Text type="secondary" className="mt-2 block text-xs">
-                                存储位置：{resourceStorageTitle(asset.data.storageKey)}
-                            </Typography.Text>
-                        ) : null}
                     </div>
+                    <div className="flex flex-wrap gap-1.5">
+                        {(asset.tags || []).map((tag) => (
+                            <Tag key={tag} className="m-0">{tag}</Tag>
+                        ))}
+                        <StorageTag asset={asset} />
+                    </div>
+                    <div className="asset-archive-facts">
+                        {facts.map((fact) => (
+                            <div key={fact.label} className="asset-archive-fact">
+                                <span className="asset-archive-fact-label">{fact.label}</span>
+                                <span className="asset-archive-fact-value" title={fact.value}>{fact.value}</span>
+                            </div>
+                        ))}
+                    </div>
+                    <div className="asset-archive-link"><Link2 /><span>所属项目</span><strong>{assetProjectLabel(asset)}</strong></div>
                     {asset.note ? (
-                        <div>
-                            <Typography.Text type="secondary">备注</Typography.Text>
-                            <Typography.Paragraph className="mt-1">{asset.note}</Typography.Paragraph>
+                        <div className="asset-archive-section">
+                            <span className="asset-archive-section-title">备注</span>
+                            <p className="asset-archive-section-body">{asset.note}</p>
                         </div>
                     ) : null}
-                    <Space>
+                    <div className="asset-archive-actions">
                         {asset.kind === "text" ? (
-                            <Button type="primary" icon={<Copy className="size-4" />} onClick={() => onCopy(asset)}>
-                                复制文本
-                            </Button>
+                            <Button type="primary" icon={<Copy className="size-4" />} onClick={() => onCopy(asset)}>复制文本</Button>
                         ) : null}
                         {asset.kind === "image" || asset.kind === "video" || asset.kind === "audio" || asset.kind === "model" ? (
-                            <Button type="primary" icon={<Download className="size-4" />} onClick={() => onDownload(asset)}>
-                                {asset.kind === "video" ? "下载视频" : asset.kind === "audio" ? "下载音频" : asset.kind === "model" ? "下载模型" : "下载图片"}
-                            </Button>
+                            <Button type="primary" icon={<Download className="size-4" />} onClick={() => onDownload(asset)}>{assetDownloadLabel(asset)}</Button>
                         ) : null}
-                    </Space>
+                    </div>
                 </div>
             ) : null}
         </Drawer>
     );
 }
 
+function assetArchiveFacts(asset: LibraryAsset) {
+    const facts: Array<{ label: string; value: string }> = [
+        { label: "类型", value: assetKindLabel(asset.kind) },
+        { label: "分类", value: assetCategoryLabel(asset.category) },
+    ];
+    if (asset.kind === "image" || asset.kind === "video") {
+        facts.push({ label: "尺寸", value: `${asset.data.width}x${asset.data.height}` });
+    }
+    if (asset.kind === "video" || asset.kind === "audio") {
+        facts.push({ label: "时长", value: formatAssetClock(asset.data.durationMs) || "未知" });
+    }
+    if (asset.kind !== "text") {
+        facts.push({ label: "大小", value: formatBytes(asset.data.bytes) });
+        facts.push({ label: "格式", value: asset.data.mimeType });
+        facts.push({ label: "存储", value: resourceStorageLabel(asset.data.storageKey) });
+    }
+    facts.push({ label: "来源", value: asset.source || "未标注" });
+    facts.push({ label: "创建", value: formatAssetDateTime(asset.createdAt) });
+    facts.push({ label: "更新", value: formatAssetDateTime(asset.updatedAt) });
+    return facts;
+}
+
 function assetSummary(asset: LibraryAsset) {
     if (asset.kind === "text") return asset.data.content;
     if (asset.kind === "audio") return `${formatAssetDuration(asset.data.durationMs)} · ${formatBytes(asset.data.bytes)} · ${asset.data.mimeType}`;
@@ -594,12 +736,46 @@ function assetKindLabel(kind: AssetKind) {
     return kind === "image" ? "图片" : kind === "video" ? "视频" : kind === "audio" ? "音频" : kind === "model" ? "3D 模型" : "文本";
 }
 
+function assetDownloadLabel(asset: LibraryAsset) {
+    if (asset.kind === "video") return "下载视频";
+    if (asset.kind === "audio") return "下载音频";
+    if (asset.kind === "model") return "下载模型";
+    return "下载图片";
+}
+
 function formatAssetDuration(durationMs?: number) {
     if (!durationMs) return "时长未知";
     return `${Math.round(durationMs / 100) / 10} 秒`;
 }
 
+function formatAssetClock(durationMs?: number) {
+    if (!durationMs || durationMs < 1000) return null;
+    const total = Math.round(durationMs / 1000);
+    const minutes = Math.floor(total / 60);
+    const seconds = total % 60;
+    return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+
 function formatAssetTime(value: string) {
     const date = new Date(value);
     return Number.isNaN(date.getTime()) ? "-" : date.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
 }
+
+function formatAssetDateTime(value: string) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return "-";
+    return date.toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" });
+}
+
+function audioWaveBars(seed: string) {
+    let hash = 0;
+    for (const char of seed) hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+    const bars: number[] = [];
+    for (let index = 0; index < 26; index += 1) {
+        hash = (hash * 9301 + 49297) % 233280;
+        const random = hash / 233280;
+        const envelope = 0.35 + 0.65 * Math.abs(Math.sin(index * 0.55 + 1.2));
+        bars.push(Math.round((0.18 + 0.82 * random * envelope) * 100));
+    }
+    return bars;
+}
diff --git a/web/src/pages/canvas/canvas-project-top-bar.tsx b/web/src/pages/canvas/canvas-project-top-bar.tsx
index f8c629b4f..ac0decb8a 100644
--- a/web/src/pages/canvas/canvas-project-top-bar.tsx
+++ b/web/src/pages/canvas/canvas-project-top-bar.tsx
@@ -107,7 +107,7 @@ export function CanvasTopBar({
 
     return (
         <>
-            <div className="pointer-events-none absolute left-0 right-0 top-0 z-[var(--z-toolbar)] flex h-[var(--canvas-topbar-h)] items-center justify-between px-[var(--canvas-inset-x)]">
+            <div className="canvas-topbar pointer-events-none absolute left-0 right-0 top-0 z-[var(--z-toolbar)] flex h-[var(--canvas-topbar-h)] items-center justify-between px-4 sm:px-5">
                 <div className="pointer-events-auto flex min-w-0 items-center gap-3">
                     <Dropdown
                         trigger={["click"]}
diff --git a/web/src/pages/canvas/index.tsx b/web/src/pages/canvas/index.tsx
index aed458f46..1c793bb74 100644
--- a/web/src/pages/canvas/index.tsx
+++ b/web/src/pages/canvas/index.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { useQuery } from "@tanstack/react-query";
 import { App, Button, Dropdown, Modal, Select } from "antd";
-import { ArrowDownAZ, Clock3, Download, FileUp, ListFilter, MoreHorizontal, Search, SlidersHorizontal, Trash2, X } from "lucide-react";
+import { ArrowDownAZ, Clock3, Download, FileUp, ListFilter, MoreHorizontal, Plus, Search, SlidersHorizontal, Trash2, X } from "lucide-react";
 
 import { CollectionGrid, PageHeader, PaginationBar, WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceLoadingState, WorkspaceState } from "@/components/layout/workspace-state";
@@ -163,12 +163,14 @@ export default function CanvasPage() {
 
     return (
         <WorkspacePage grid className="canvas-library-page">
+            <div className="studio-band">
                 <PageHeader
-                    icon="canvas"
                     title="画布"
                     description="把镜头、素材和想法留在同一张画布里。"
+                    meta={<span className="app-projects-header-meta">{projects.length} 个</span>}
                     actions={(
                         <>
+                        <Button className="library-primary-action !h-9 !px-3.5" type="primary" disabled={!hydrated} icon={<Plus className="size-3.5" />} onClick={createAndEnter}>新建画布</Button>
                         {projects.length ? (
                                     <Dropdown menu={{ items: [{ key: "delete-all", danger: true, icon: <Trash2 className="size-3.5" />, label: "删除全部画布", onClick: () => setDeleteIds(projects.map((project) => project.id)) }] }} trigger={["click"]}>
                                 <Button className="!h-9 !w-9 !p-0" aria-label="更多画布操作" title="更多操作" icon={<MoreHorizontal className="size-4" />} />
@@ -196,7 +198,9 @@ export default function CanvasPage() {
                     </div>
                     <span className="canvas-library-count"><strong>{String(filteredProjects.length).padStart(2, "0")}</strong><span>/ {String(projects.length).padStart(2, "0")} 画布</span></span>
                 </section>
+            </div>
 
+            <div className="canvas-library-frame">
                 {selectedIds.length ? (
                     <div className="app-canvas-selection-toolbar mt-2 flex min-h-10 flex-wrap items-center gap-2 rounded-md border px-3 py-1.5 text-xs">
                         <strong className="mr-auto font-medium">已选 {selectedIds.length} 个画布</strong>
@@ -221,6 +225,7 @@ export default function CanvasPage() {
                 )}
 
                 <PaginationBar current={page} pageSize={pageSize} total={filteredProjects.length} pageSizeOptions={[12, 24, 48]} onChange={(nextPage, nextPageSize) => { setPage(nextPageSize !== pageSize ? 1 : nextPage); setPageSize(nextPageSize); }} />
+            </div>
 
                 <input ref={inputRef} type="file" accept="application/zip,.zip" className="hidden" onChange={(event) => void importCanvas(event.target.files?.[0])} />
                 <Modal title="加入项目" open={associationOpen} okText="保存关联" cancelText="取消" okButtonProps={{ disabled: !associationProjectId, loading: projectQuery.isFetching }} onCancel={() => setAssociationOpen(false)} onOk={() => void associateSelected()}>
diff --git a/web/src/pages/create/index.tsx b/web/src/pages/create/index.tsx
index c275f86d0..3260accd7 100644
--- a/web/src/pages/create/index.tsx
+++ b/web/src/pages/create/index.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type ReactNode, type RefObject } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type ReactNode, type RefObject } from "react";
 import localforage from "localforage";
 import { App, Drawer, Modal, Popover, Spin, Tooltip } from "antd";
-import { ArrowUp, Check, ChevronDown, Clock3, Download, FileText, Film, FolderOpen, History, Image as ImageIcon, LoaderCircle, Maximize2, MessageSquareText, Music2, Plus, RefreshCw, Search, SlidersHorizontal, Sparkles, Square, Upload, X } from "lucide-react";
+import { ArrowDown, ArrowUp, Check, ChevronDown, Clapperboard, Clock3, Download, FileText, Film, FolderOpen, History, Image as ImageIcon, LoaderCircle, Maximize2, MessageSquareText, Music2, Plus, RefreshCw, Search, SlidersHorizontal, Sparkles, Square, Upload, X } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import { Link } from "react-router";
 
@@ -48,6 +48,7 @@ type CreationConversation = { id: string; title: string; updatedAt: string; mess
 
 const STORAGE_KEY = "creation-conversations-v1";
 const modeLabels: Record<CreationMode, string> = { text: "文本", image: "图片", video: "视频" };
+const shotScriptLabels: Record<CreationMode, string> = { text: "创作思路", image: "画面指令", video: "镜头脚本" };
 const ratioOptions = [
     { value: "1:1", label: "方形" },
     { value: "16:9", label: "横屏" },
@@ -68,6 +69,7 @@ const qualityOptions = [
 const resolutionOptions = VIDEO_RESOLUTION_OPTIONS.map((value) => ({ value: String(value), label: videoResolutionLabel(value) }));
 const countOptions = ["1", "2", "3", "4"];
 const conversationTimeFormatter = new Intl.DateTimeFormat("zh-CN", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit", hour12: false });
+const messageTimeFormatter = new Intl.DateTimeFormat("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false });
 
 function newConversation(): CreationConversation {
     return { id: createClientId(), title: "新创作", updatedAt: new Date().toISOString(), messages: [] };
@@ -77,8 +79,24 @@ function newMessage(role: CreationMessage["role"], content: string, extra: Parti
     return { id: createClientId(), role, content, createdAt: new Date().toISOString(), ...extra };
 }
 
+type CreationShot = { user?: CreationMessage; result?: CreationMessage };
+
 type CreationImageResult = NonNullable<BackendGenerationResult["images"]>[number];
 
+function shotsFromMessages(messages: CreationMessage[]): CreationShot[] {
+    const shots: CreationShot[] = [];
+    for (const message of messages) {
+        if (message.role === "user") {
+            shots.push({ user: message });
+        } else if (shots.length) {
+            shots[shots.length - 1].result = message;
+        } else {
+            shots.push({ result: message });
+        }
+    }
+    return shots;
+}
+
 async function persistCreationImageResult(image: CreationImageResult): Promise<UploadedImage> {
     if (!image.storageKey) return uploadImage(image.dataUrl);
     const url = await resolveImageUrl(image.storageKey, image.dataUrl);
@@ -121,10 +139,13 @@ export default function CreatePage() {
     const [videoQuality, setVideoQuality] = useState(config.vquality || "720");
     const [count, setCount] = useState(String(Math.max(1, Math.min(4, Number(config.count) || 1))));
     const [busy, setBusy] = useState(false);
+    const [selectedShotIndex, setSelectedShotIndex] = useState(-1);
+    const [composingNextShot, setComposingNextShot] = useState(false);
     const [historyOpen, setHistoryOpen] = useState(false);
     const [libraryOpen, setLibraryOpen] = useState(false);
     const abortRef = useRef<AbortController | null>(null);
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const composerFocusRef = useRef<HTMLTextAreaElement>(null);
     const threadScrollRef = useRef<HTMLElement>(null);
     const followLatestMessageRef = useRef(true);
     const taskSyncWarningRef = useRef(false);
@@ -142,6 +163,8 @@ export default function CreatePage() {
     const isEmpty = !activeConversation?.messages.length;
     const pendingMediaKey = useMemo(() => pendingCreationMediaKey(conversations), [conversations]);
     const pendingTaskIds = useMemo(() => pendingCreationTaskIds(conversations), [conversations]);
+    const shots = useMemo(() => shotsFromMessages(activeConversation?.messages || []), [activeConversation]);
+    const visibleShotIndex = shots.length ? selectedShotIndex >= 0 && selectedShotIndex < shots.length ? selectedShotIndex : shots.length - 1 : -1;
 
     useEffect(() => {
         if (mode !== "image") return;
@@ -364,6 +387,8 @@ export default function CreatePage() {
         setPrompt("");
         setAttachments([]);
         setDraftReferences([]);
+        setSelectedShotIndex(-1);
+        setComposingNextShot(false);
         setBusy(true);
         const controller = new AbortController();
         abortRef.current = controller;
@@ -454,6 +479,8 @@ export default function CreatePage() {
         setPrompt("");
         setAttachments([]);
         setDraftReferences([]);
+        setSelectedShotIndex(-1);
+        setComposingNextShot(false);
         setHistoryOpen(false);
     };
 
@@ -463,6 +490,8 @@ export default function CreatePage() {
         setPrompt("");
         setAttachments([]);
         setDraftReferences([]);
+        setSelectedShotIndex(-1);
+        setComposingNextShot(false);
         setHistoryOpen(false);
     };
 
@@ -487,6 +516,8 @@ export default function CreatePage() {
         if (!previous?.content || busy) return;
         followLatestMessageRef.current = true;
         restoreMessageDraft(previous);
+        setSelectedShotIndex(-1);
+        setComposingNextShot(false);
         const removedIds = new Set([item.id, previous.id]);
         updateActive((conversation) => {
             const messages = conversation.messages.filter((message) => !removedIds.has(message.id));
@@ -514,6 +545,16 @@ export default function CreatePage() {
         followLatestMessageRef.current = container.scrollHeight - container.scrollTop - container.clientHeight <= 160;
     };
 
+    const nextShotNumber = shots.length + 1;
+
+    const beginComposeNextShot = () => {
+        setComposingNextShot(true);
+        setSelectedShotIndex(-1);
+        window.requestAnimationFrame(() => composerFocusRef.current?.focus());
+    };
+
+    const cancelComposeNextShot = () => setComposingNextShot(false);
+
     const composerProps = {
         mode,
         prompt,
@@ -541,28 +582,63 @@ export default function CreatePage() {
         setVideoQuality,
         count,
         setCount,
+        composerFocusRef,
+        placeholderOverride: composingNextShot ? `SC.${String(nextShotNumber).padStart(2, "0")} · 写下这一镜的镜头、画面或故事` : undefined,
         onSubmit: submit,
         onStop: () => abortRef.current?.abort(),
     };
 
+    const visibleShot = shots[visibleShotIndex];
+    const visibleShotResultIndex = visibleShot?.result ? activeConversation.messages.indexOf(visibleShot.result) : -1;
+
     return <>
         <div className="creation-home relative flex h-full min-h-0 flex-col overflow-hidden">
-            <div className="creation-top-actions">
-                {!isEmpty ? <Tooltip title="新建创作"><button type="button" aria-label="新建创作" className="creation-top-action" onClick={startNewConversation}><Plus /></button></Tooltip> : null}
-                <Tooltip title="历史对话"><button type="button" aria-label="查看历史对话" aria-expanded={historyOpen} className="creation-top-action" onClick={() => setHistoryOpen(true)}><History /></button></Tooltip>
-            </div>
-            <main ref={threadScrollRef} onScroll={handleThreadScroll} className="creation-scrollbar flex h-full min-h-0 flex-col overflow-y-scroll overscroll-contain">
-                {isEmpty ? <section className="creation-empty-workspace">
-                    <CreationEmptyArt />
-                    <CreationIntro mode={mode} />
-                    <div className="creation-empty-composer"><CreationComposer {...composerProps} variant="empty" /></div>
-                </section> : <>
-                    <section className="creation-thread-stage"><div className="creation-results">{activeConversation.messages.map((item, index) => <CreationMessageView key={item.id} item={item} modelName={item.model ? modelDisplayName(config, item.model) : ""} onRetryFailure={() => retryFailedMessage(item, index)} onCreateVariant={() => createVariant(item, index)} />)}</div></section>
-                    <section className="creation-thread-composer">
-                        <CreationComposer {...composerProps} variant="thread" />
-                    </section>
-                </>}
+            {isEmpty ? <>
+                <div className="creation-top-actions">
+                    <Tooltip title="历史对话"><button type="button" aria-label="查看历史对话" aria-expanded={historyOpen} className="creation-top-action" onClick={() => setHistoryOpen(true)}><History /></button></Tooltip>
+                </div>
+                <main ref={threadScrollRef} onScroll={handleThreadScroll} className="creation-empty-workspace creation-scrollbar">
+                <CreationEmptyBanner />
+                <div className="creation-chat-intro">
+                    <span className="creation-intro-signal" aria-hidden="true" />
+                    <p>影策 · AI 影视创作工作台</p>
+                    <h1>把脑海里的画面，<span className="creation-intro-emphasis"><span className="is-pink">交给影策</span><span className="is-blue">拍出来</span></span></h1>
+                </div>
+                <div className="creation-empty-composer">
+                    <CreationComposer {...composerProps} variant="empty" />
+                </div>
+                <CreationEmptySuggest
+                    onStartPrompt={(nextMode, prompt) => { selectMode(nextMode); setPrompt(prompt); window.requestAnimationFrame(() => composerFocusRef.current?.focus()); }}
+                    onOpenLibrary={() => { selectMode("image"); setLibraryOpen(true); }}
+                />
             </main>
+            </> : <div className="storyboard-workbench">
+                <StoryboardToolbar
+                    shots={shots}
+                    activeIndex={visibleShotIndex}
+                    composing={composingNextShot}
+                    onSelect={(index) => { setSelectedShotIndex(index); setComposingNextShot(false); }}
+                    onBeginCompose={beginComposeNextShot}
+                    onCancelCompose={cancelComposeNextShot}
+                    onNewConversation={startNewConversation}
+                    onOpenHistory={() => setHistoryOpen(true)}
+                />
+                <main ref={threadScrollRef} onScroll={handleThreadScroll} className="storyboard-workbench-stage creation-scrollbar">
+                    <div className="storyboard-workbench-stage-inner">
+                        {composingNextShot ? <StoryboardNextShotCard shotNumber={nextShotNumber} onCancel={cancelComposeNextShot} /> : visibleShot ? <StoryboardShotCard
+                            shot={visibleShot}
+                            shotNumber={visibleShotIndex + 1}
+                            modelName={visibleShot.result?.model ? modelDisplayName(config, visibleShot.result.model) : ""}
+                            busy={busy}
+                            onRetryFailure={() => { if (visibleShotResultIndex >= 0 && visibleShot.result) retryFailedMessage(visibleShot.result, visibleShotResultIndex); }}
+                            onCreateVariant={() => { if (visibleShotResultIndex >= 0 && visibleShot.result) createVariant(visibleShot.result, visibleShotResultIndex); }}
+                        /> : null}
+                    </div>
+                </main>
+                <section className="storyboard-workbench-composer">
+                    <CreationComposer {...composerProps} variant="thread" />
+                </section>
+            </div>}
         </div>
         <CreationHistoryDrawer open={historyOpen} conversations={historyConversations} activeId={activeConversation.id} onClose={() => setHistoryOpen(false)} onSelect={selectConversation} />
         <CreationAssetLibraryModal open={libraryOpen} assets={assets} mode={mode} selectedIds={new Set(attachments.filter((item) => item.id.startsWith("asset:")).map((item) => item.id.slice(6)))} onClose={() => setLibraryOpen(false)} onConfirm={handleLibrarySelect} onUpload={uploadLibraryAssets} />
@@ -683,22 +759,6 @@ function CreationHistoryDrawer({ open, conversations, activeId, onClose, onSelec
     </Drawer>;
 }
 
-function CreationMessageView({ item, modelName, onRetryFailure, onCreateVariant }: { item: CreationMessage; modelName: string; onRetryFailure: () => void; onCreateVariant: () => void }) {
-    if (item.role === "user") return <CreationUserMessage item={item} />;
-    const mode = item.mode || "text";
-    const stateLabel = item.status === "pending" ? "生成中" : item.status === "cancelled" ? "已停止" : "";
-    return <article className="creation-assistant-message"><div className="creation-message-heading"><span className="creation-message-mark"><Sparkles /></span><span>{modeLabels[mode]}</span>{modelName ? <span className="creation-message-model">{modelName}</span> : null}{stateLabel ? <span className={`creation-message-state is-${item.status}`}>{stateLabel}</span> : null}</div>{mode === "text" ? <div className="creation-message-content">{item.content ? <ReactMarkdown>{item.content}</ReactMarkdown> : <span>正在生成…</span>}</div> : <MediaResult item={item} onRetryFailure={onRetryFailure} onCreateVariant={onCreateVariant} />}{item.error ? <div className="creation-message-error"><span>{generationErrorMessage(item.error)}</span><button type="button" onClick={onRetryFailure}><RefreshCw />重新生成</button></div> : null}</article>;
-}
-
-function CreationUserMessage({ item }: { item: CreationMessage }) {
-    const [previewUrl, setPreviewUrl] = useState("");
-    const [previewType, setPreviewType] = useState<"image" | "video">("image");
-    return <div className="creation-user-message"><div>{displayCreationPrompt(item.content, item.references || [])}</div>{item.references?.length ? <CreationMessageReferences references={item.references} /> : null}{item.attachments?.length ? <div className="creation-user-message-attachments">{item.attachments.map((attachment) => {
-        const url = attachment.previewUrl || ("dataUrl" in attachment ? attachment.dataUrl : attachment.url) || "";
-        return <button key={attachment.id} type="button" onClick={() => { const video = isVideoAttachment(attachment); setPreviewType(video ? "video" : "image"); setPreviewUrl(video ? attachment.url : url); }} aria-label={`预览 ${attachment.name}`} disabled={!url}>{isVideoAttachment(attachment) ? <video src={attachment.url} poster={url !== attachment.url ? url : undefined} muted playsInline preload="metadata" /> : <img src={url} alt={attachment.name} width={44} height={44} loading="lazy" />}<span aria-hidden="true"><Maximize2 /></span></button>;
-    })}</div> : null}<CreationMediaPreviewModal url={previewUrl} type={previewType} onClose={() => setPreviewUrl("")} /></div>;
-}
-
 function CreationMessageReferences({ references }: { references: CreationReference[] }) {
     return <div className="creation-user-message-references" aria-label="本次引用">{references.map((reference) => {
         const Icon = reference.kind === "skill" ? Sparkles : reference.kind === "image" ? ImageIcon : reference.kind === "video" ? Film : reference.kind === "audio" ? Music2 : FileText;
@@ -706,17 +766,6 @@ function CreationMessageReferences({ references }: { references: CreationReferen
     })}</div>;
 }
 
-function MediaResult({ item, onRetryFailure, onCreateVariant }: { item: CreationMessage; onRetryFailure: () => void; onCreateVariant: () => void }) {
-    const [previewUrl, setPreviewUrl] = useState("");
-    const [previewType, setPreviewType] = useState<"image" | "video">("image");
-    const resultUrls = item.resultUrls;
-    const openPreview = (url: string, type: "image" | "video") => { setPreviewType(type); setPreviewUrl(url); };
-    if (item.status === "pending") return <div className="creation-media-pending"><Spin size="small" />正在生成{item.mode === "video" ? "视频" : "图片"}…</div>;
-    if ((item.status === "error" || item.status === "cancelled") && !resultUrls?.length) return null;
-    if (!resultUrls?.length) return <div className="creation-media-empty">没有返回可预览结果 <button type="button" onClick={onRetryFailure}>重试</button></div>;
-    return <div className="creation-media-result">{item.mode === "video" ? <button type="button" className="creation-video-result" onClick={() => openPreview(resultUrls[0], "video")} aria-label="预览生成视频"><video muted preload="metadata" className="size-full object-cover" src={resultUrls[0]} /><span><Maximize2 />预览视频</span></button> : <div className="creation-image-result-grid">{resultUrls.map((url) => <button key={url} type="button" className="creation-image-result" onClick={() => openPreview(url, "image")} aria-label="预览生成图片"><img src={url} alt="生成结果" /><span><Maximize2 /></span></button>)}</div>}<div className="creation-media-actions"><span>{item.mode === "video" ? "视频结果" : `${resultUrls.length} 张图片`}</span><button type="button" onClick={onCreateVariant}><RefreshCw />生成变体</button><Link to="/canvas">添加到画布</Link>{resultUrls.map((url, index) => <a key={`${url}-download`} href={url} download>{resultUrls.length > 1 ? `下载 ${index + 1}` : <><Download />下载</>}</a>)}</div><CreationMediaPreviewModal url={previewUrl} type={previewType} onClose={() => setPreviewUrl("")} /></div>;
-}
-
 function CreationMediaPreviewModal({ url, type, onClose }: { url: string; type: "image" | "video"; onClose: () => void }) {
     return <Modal open={Boolean(url)} title={null} footer={null} centered destroyOnHidden width={type === "video" ? "min(1160px, calc(100vw - 32px))" : "min(980px, calc(100vw - 32px))"} onCancel={onClose} className="creation-media-preview-modal" styles={{ body: { padding: 0 } }}>{url ? type === "video" ? <video controls autoPlay className="creation-media-preview-video" src={url} /> : <img className="creation-media-preview-image" src={url} alt="媒体预览" /> : null}</Modal>;
 }
@@ -749,6 +798,8 @@ type ComposerProps = {
     setVideoQuality: (value: string) => void;
     count: string;
     setCount: (value: string) => void;
+    composerFocusRef: RefObject<HTMLTextAreaElement | null>;
+    placeholderOverride?: string;
     onSubmit: () => void;
     onStop: () => void;
 };
@@ -771,7 +822,7 @@ function CreationComposer(props: ComposerProps) {
             <input ref={props.fileInputRef} type="file" hidden accept={props.mode === "video" ? "image/*,video/*" : "image/*"} multiple onChange={props.onFileChange} />
             <Tooltip title={!referencesSupported ? "当前模型不支持参考媒体" : "从素材库选择参考内容"}><button type="button" className="creation-chat-reference is-paper" onClick={props.onOpenLibrary} disabled={props.busy || !referencesSupported} aria-label="打开素材库选择参考内容"><Plus /><span>参考内容</span></button></Tooltip>
             <div className="creation-chat-editor">
-                <CanvasResourceMentionTextarea value={props.prompt} references={props.references} mentionMenuWidth={400} sendOnEnter={false} onChange={props.setPrompt} onSubmit={props.onSubmit} containerClassName="creation-chat-mention-container" className="creation-chat-mention-editor creation-scrollbar" style={{ color: "var(--creation-text)" }} placeholder={props.variant === "empty" ? emptyPlaceholder : placeholder} aria-label="创作提示词，可使用 @ 引用当前参考内容或技能" spellCheck disabled={props.busy} />
+                <CanvasResourceMentionTextarea ref={props.composerFocusRef} value={props.prompt} references={props.references} mentionMenuWidth={400} sendOnEnter={false} onChange={props.setPrompt} onSubmit={props.onSubmit} containerClassName="creation-chat-mention-container" className="creation-chat-mention-editor creation-scrollbar" style={{ color: "var(--creation-text)" }} placeholder={props.placeholderOverride || (props.variant === "empty" ? emptyPlaceholder : placeholder)} aria-label="创作提示词，可使用 @ 引用当前参考内容或技能" spellCheck disabled={props.busy} />
                 {props.attachments.length ? <div className="creation-chat-attachment-strip">{props.attachments.map((item) => {
                     const isVideo = isVideoAttachment(item);
                     const url = isVideo ? item.url : item.previewUrl;
@@ -857,48 +908,211 @@ function DurationMenu({ profile, seconds, onChange }: { profile: VideoCapability
     </Popover>;
 }
 
-const creationEmptyArtLibrary = [
-    "black-white-noir.jpg", "chinese-2d.jpg", "clay-stop-motion.jpg", "comic-pop.jpg", "cyberpunk-neon.jpg", "fantasy-3d.jpg",
-    "future-tech.jpg", "ink-narrative.jpg", "nature-healing.jpg", "period-live-action.jpg", "real-life.jpg", "retro-hong-kong.jpg",
-    "space-opera.jpg", "storybook-fantasy.jpg", "surreal-dream.jpg", "suspense-noir.jpg", "three-d-cartoon.jpg", "urban-live-action.jpg",
-].map((file) => `/short-drama-styles/${file}`);
+const creationEmptyBannerFrames = [
+    { src: "/short-drama-styles/cyberpunk-neon.jpg", caption: "SC.01 · 雨夜霓虹" },
+    { src: "/short-drama-styles/suspense-noir.jpg", caption: "SC.02 · 暗巷追逐" },
+    { src: "/short-drama-styles/retro-hong-kong.jpg", caption: "SC.03 · 天台重逢" },
+];
 
-function CreationEmptyArt() {
-    const frames = useMemo(() => shuffleCreationArt(creationEmptyArtLibrary), []);
-    const [activeIndex, setActiveIndex] = useState(0);
-
-    useEffect(() => {
-        const timer = window.setInterval(() => setActiveIndex((current) => (current + 1) % frames.length), 4200);
-        return () => window.clearInterval(timer);
-    }, [frames.length]);
-
-    const imageAt = (offset: number) => frames[(activeIndex + offset) % frames.length];
-    return <div className="creation-empty-art" aria-label="随机轮播的创作风格参考图">
-        <div className="creation-empty-art-frame is-back"><img key={imageAt(0)} src={imageAt(0)} alt="" /></div>
-        <div className="creation-empty-art-frame is-main"><img key={imageAt(1)} src={imageAt(1)} alt="" /><span>你的下一帧，从这里开始</span></div>
-        <div className="creation-empty-art-frame is-front"><img key={imageAt(2)} src={imageAt(2)} alt="" /></div>
-        <div className="creation-empty-art-caption"><span>{String(activeIndex + 1).padStart(2, "0")}</span><span>镜头 · 氛围 · 故事</span></div>
+function CreationEmptyBanner() {
+    return <div className="creation-empty-art" aria-hidden="true">
+        {creationEmptyBannerFrames.map((frame, index) => <figure key={frame.caption} className={`creation-empty-art-frame ${index === 1 ? "is-main" : index === 0 ? "is-back" : "is-front"}`}>
+            <img src={frame.src} alt="" />
+            <span>{frame.caption}</span>
+        </figure>)}
+        <span className="creation-empty-art-caption"><span>影策</span>把每一帧，交给镜头导演</span>
     </div>;
 }
 
-function shuffleCreationArt(items: string[]) {
-    const shuffled = [...items];
-    for (let index = shuffled.length - 1; index > 0; index -= 1) {
-        const target = Math.floor(Math.random() * (index + 1));
-        [shuffled[index], shuffled[target]] = [shuffled[target], shuffled[index]];
-    }
-    return shuffled;
+const creationEmptySuggestions: Array<{ mode: CreationMode; icon: typeof Clapperboard; title: string; hint: string; prompt: string; openLibrary?: boolean }> = [
+    { mode: "video", icon: Clapperboard, title: "生成第一个镜头", hint: "描述画面、镜头运动与光线", prompt: "雨夜天台，镜头缓缓推近霓虹灯牌下的主角，她回眸看向镜头，强对比电影感布光" },
+    { mode: "image", icon: ImageIcon, title: "从参考图开始", hint: "上传风格图，生成同风格画面", prompt: "", openLibrary: true },
+    { mode: "text", icon: FileText, title: "续写故事", hint: "和 AI 讨论剧情、角色与对白", prompt: "帮我续写一个短剧故事，先聊聊剧情走向：" },
+    { mode: "video", icon: Sparkles, title: "引用技能增强", hint: "@技能 调用分镜、配音等专业能力", prompt: "调用分镜技能，帮我规划这个镜头的拍摄方案：" },
+];
+
+function CreationEmptySuggest({ onStartPrompt, onOpenLibrary }: { onStartPrompt: (mode: CreationMode, prompt: string) => void; onOpenLibrary: () => void }) {
+    return <div className="creation-empty-suggest">
+        {creationEmptySuggestions.map((item) => {
+            const Icon = item.icon;
+            return <button key={item.title} type="button" className="suggest-card" onClick={() => { if (item.openLibrary) onOpenLibrary(); else onStartPrompt(item.mode, item.prompt); }}>
+                <span className={`suggest-icon is-${item.mode}`}><Icon size={15} strokeWidth={2} /></span>
+                <span className="suggest-copy"><strong>{item.title}</strong><span>{item.hint}</span></span>
+            </button>;
+        })}
+    </div>;
 }
 
-function CreationIntro({ mode }: { mode: CreationMode }) {
-    const copy = mode === "video" ? ["让", "想象", "，先在镜头里发生", "影策 · AI 叙事创作"] : mode === "image" ? ["让", "画面", "，从一个想法开始", "影策 · 视觉创作"] : ["把", "故事", "，写在第一句话里", "影策 · 叙事创作"];
-    return <header className="creation-chat-intro" aria-live="polite"><span className="creation-intro-signal" aria-hidden="true" /><h1>{copy[0]}<span className="creation-intro-emphasis"><span className="is-pink">{copy[1].slice(0, 1)}</span><span className="is-blue">{copy[1].slice(1)}</span></span>{copy[2]}</h1><p>{copy[3]}</p></header>;
+type CreationThinking = { title: string; hint: string; steps: string[] };
+
+function thinkingFor(mode: CreationMode): CreationThinking {
+    if (mode === "image") return { title: "正在为你画这一镜", hint: "影策正在理解你的构图意图，并把画面交给模型出图。", steps: ["理解构图", "定调画风", "生成画面"] };
+    if (mode === "text") return { title: "正在为你写这段", hint: "影策正在梳理你的创作脉络，组织语言与结构。", steps: ["梳理脉络", "组织语言", "输出段落"] };
+    return { title: "正在为你拍这一镜", hint: "影策正在拆解你的镜头脚本，设计运镜与光线，并交给模型渲染成片。", steps: ["拆解镜头", "设计运镜", "定调布光", "渲染成片"] };
+}
+
+function directorNoteFor(mode: CreationMode, settings: CreationSettings): string {
+    if (mode === "video") return `已按 ${settings.seconds}s · ${videoResolutionLabel(settings.videoQuality)} · ${settings.ratio} 渲染这一镜，等待你的下一句指令。`;
+    if (mode === "image") return `已按 ${settings.ratio} 出图 ${settings.count} 张，等待你的下一句指令。`;
+    return "";
+}
+
+function StoryboardToolbar({ shots, activeIndex, composing, onSelect, onBeginCompose, onCancelCompose, onNewConversation, onOpenHistory }: { shots: CreationShot[]; activeIndex: number; composing: boolean; onSelect: (index: number) => void; onBeginCompose: () => void; onCancelCompose: () => void; onNewConversation: () => void; onOpenHistory: () => void }) {
+    const [railOpen, setRailOpen] = useState(false);
+    const nextShotNumber = shots.length + 1;
+    const closeRail = () => setRailOpen(false);
+    const statusOf = (shot: CreationShot) => shot.result?.status || "queued";
+    const shotTitle = (shot: CreationShot) => shot.user ? displayCreationPrompt(shot.user.content, shot.user.references || []).trim() || "未命名镜头" : "镜头";
+    return <header className="storyboard-workbench-bar" aria-label="镜头工具条">
+        <div className="storyboard-workbench-rail">
+            <Tooltip title="镜头时间线"><button type="button" className={`storyboard-workbench-rail-button${railOpen ? " is-open" : ""}${composing ? " is-draft" : ""}`} aria-expanded={railOpen} aria-label="镜头时间线" onClick={() => setRailOpen((value) => !value)}><Film /><span className="storyboard-workbench-rail-badge">{composing ? nextShotNumber : shots.length}</span></button></Tooltip>
+            {railOpen ? <div className="storyboard-workbench-rail-pop" role="listbox" aria-label="镜头列表">
+                <div className="storyboard-workbench-rail-pop-head"><span className="storyboard-workbench-rail-pop-title"><Clapperboard />镜头时间线<small>{composing ? `下一镜 SC.${String(nextShotNumber).padStart(2, "0")}` : `${shots.length} 个镜头`}</small></span><button type="button" className="storyboard-workbench-rail-pop-close" aria-label="关闭镜头列表" onClick={closeRail}><X /></button></div>
+                <ul className="creation-scrollbar">
+                    {shots.map((shot, index) => {
+                        const status = statusOf(shot);
+                        const title = shotTitle(shot);
+                        const thumbUrl = shot.result?.resultUrls?.[0];
+                        const thumbIsVideo = shot.result?.mode === "video";
+                        return <li key={shot.user?.id || shot.result?.id || index}>
+                            <button type="button" className={`storyboard-workbench-rail-row${index === activeIndex && !composing ? " is-active" : ""}`} onClick={() => { onSelect(index); closeRail(); }}>
+                                <span className="storyboard-workbench-rail-thumb">{thumbUrl ? (thumbIsVideo ? <video muted preload="metadata" src={thumbUrl} /> : <img src={thumbUrl} alt="" />) : <span className="storyboard-workbench-rail-thumb-ph"><Clapperboard /><em>SC.{String(index + 1).padStart(2, "0")}</em></span>}</span>
+                                <span className="storyboard-workbench-rail-info">
+                                    <span className="storyboard-workbench-rail-head"><span className="storyboard-workbench-rail-row-shot">SC.{String(index + 1).padStart(2, "0")}</span><span className={`storyboard-workbench-rail-row-state is-${status}`}>{status === "pending" ? "生成中" : status === "error" ? "失败" : status === "done" ? "完成" : "待生成"}</span>{shot.result?.createdAt ? <time dateTime={shot.result.createdAt}>{formatMessageTime(shot.result.createdAt)}</time> : null}</span>
+                                    <span className="storyboard-workbench-rail-row-title">{title}</span>
+                                </span>
+                            </button>
+                        </li>;
+                    })}
+                    {composing ? <li><button type="button" className="storyboard-workbench-rail-row is-draft" onClick={() => { onCancelCompose(); closeRail(); }}><span className="storyboard-workbench-rail-thumb"><span className="storyboard-workbench-rail-thumb-ph"><Clapperboard /><em>SC.{String(nextShotNumber).padStart(2, "0")}</em></span></span><span className="storyboard-workbench-rail-info"><span className="storyboard-workbench-rail-head"><span className="storyboard-workbench-rail-row-shot">SC.{String(nextShotNumber).padStart(2, "0")}</span><span className="storyboard-workbench-rail-row-state">待撰写</span></span><span className="storyboard-workbench-rail-row-title">等待你的脚本</span></span></button></li> : null}
+                </ul>
+                <button type="button" className="storyboard-workbench-rail-pop-add" onClick={() => { closeRail(); onBeginCompose(); }}><Plus />新增镜头</button>
+            </div> : null}
+        </div>
+        <div className="storyboard-workbench-bar-actions">
+            <Tooltip title={composing ? "收起下一镜" : "新增镜头"}><button type="button" aria-label={composing ? "收起下一镜" : "新增镜头"} className="storyboard-workbench-bar-action" onClick={composing ? onCancelCompose : onBeginCompose}>{composing ? <X /> : <Clapperboard />}</button></Tooltip>
+            <Tooltip title="新建创作"><button type="button" aria-label="新建创作" className="storyboard-workbench-bar-action" onClick={onNewConversation}><Plus /></button></Tooltip>
+            <Tooltip title="历史对话"><button type="button" aria-label="查看历史对话" className="storyboard-workbench-bar-action" onClick={onOpenHistory}><History /></button></Tooltip>
+        </div>
+    </header>;
+}
+
+function StoryboardShotCard({ shot, shotNumber, modelName, busy, onRetryFailure, onCreateVariant }: { shot: CreationShot; shotNumber: number; modelName: string; busy: boolean; onRetryFailure: () => void; onCreateVariant: () => void }) {
+    const user = shot.user;
+    const result = shot.result;
+    const status = result?.status || "queued";
+    const mode = result?.mode || user?.mode || "video";
+    const briefVisible = Boolean(user?.content.trim() || user?.references?.length || user?.attachments?.length);
+    return <article className={`storyboard-workbench-card is-${status}`}>
+        <header className="storyboard-workbench-card-head">
+            <div className="storyboard-workbench-card-heading">
+                <span className="storyboard-workbench-card-shot"><span className="storyboard-workbench-card-shot-index">SC.{String(shotNumber).padStart(2, "0")}</span>镜头 {shotNumber}</span>
+                <span className="storyboard-workbench-card-mode">{mode === "video" ? <Film /> : mode === "image" ? <ImageIcon /> : <MessageSquareText />}{modeLabels[mode]}</span>
+                {modelName ? <span className="storyboard-workbench-card-model">{modelName}</span> : null}
+                {status === "pending" ? <span className="storyboard-workbench-card-state is-pending"><LoaderCircle className="animate-spin" />生成中</span> : status === "error" ? <span className="storyboard-workbench-card-state is-error">生成失败</span> : status === "done" ? <span className="storyboard-workbench-card-state is-done"><Check />已完成</span> : <span className="storyboard-workbench-card-state">待生成</span>}
+            </div>
+            <div className="storyboard-workbench-card-actions">
+                {status === "error" ? <button type="button" onClick={onRetryFailure} disabled={busy}><RefreshCw />重新生成</button> : null}
+                {status === "done" && result?.resultUrls?.length ? <button type="button" onClick={onCreateVariant} disabled={busy}><RefreshCw />生成变体</button> : null}
+                {status === "done" && result?.resultUrls?.length ? <Link to="/canvas">添加到画布</Link> : null}
+                {result?.resultUrls?.map((url, index) => <a key={`${url}-download`} href={url} download>{result.resultUrls!.length > 1 ? `下载 ${index + 1}` : <><Download />下载</>}</a>)}
+            </div>
+        </header>
+        <div className="storyboard-workbench-card-body">
+            <div className="storyboard-workbench-thread" aria-label={`镜头 ${shotNumber} 的对话过程`}>
+                {briefVisible && user ? <div className="storyboard-workbench-turn is-user">
+                    <div className="storyboard-workbench-turn-copy">
+                        <div className="storyboard-workbench-turn-meta"><span className="storyboard-workbench-turn-role">{shotScriptLabels[mode]}</span>{user.createdAt ? <time className="storyboard-workbench-turn-time" dateTime={user.createdAt}>{formatMessageTime(user.createdAt)}</time> : null}</div>
+                        <div className="storyboard-workbench-turn-bubble">
+                            <p className="storyboard-workbench-turn-text">{displayCreationPrompt(user.content, user.references || [])}</p>
+                            {user.references?.length ? <CreationMessageReferences references={user.references} /> : null}
+                            {user.attachments?.length ? <StoryboardBriefAttachments attachments={user.attachments} /> : null}
+                        </div>
+                    </div>
+                </div> : null}
+                {briefVisible && user ? <div className="storyboard-workbench-handoff" aria-hidden="true"><span className="storyboard-workbench-handoff-rail" /><span className="storyboard-workbench-handoff-badge"><ArrowDown />交给影策 AI</span><span className="storyboard-workbench-handoff-rail" /></div> : null}
+                <div className="storyboard-workbench-turn is-ai">
+                    <span className="storyboard-workbench-ai-avatar"><Clapperboard /></span>
+                    <div className="storyboard-workbench-turn-copy">
+                        <div className="storyboard-workbench-turn-meta"><span className="storyboard-workbench-turn-role is-ai"><Sparkles />影策 AI</span>{modelName ? <span className="storyboard-workbench-turn-model">{modelName}</span> : null}{result?.createdAt ? <time className="storyboard-workbench-turn-time" dateTime={result.createdAt}>{formatMessageTime(result.createdAt)}</time> : null}</div>
+                        <div className="storyboard-workbench-turn-bubble">
+                            <StoryboardShotResult result={result} onRetryFailure={onRetryFailure} onCreateVariant={onCreateVariant} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </article>;
+}
+
+function StoryboardNextShotCard({ shotNumber, onCancel }: { shotNumber: number; onCancel: () => void }) {
+    return <article className="storyboard-workbench-card is-next">
+        <header className="storyboard-workbench-card-head">
+            <div className="storyboard-workbench-card-heading">
+                <span className="storyboard-workbench-card-shot"><span className="storyboard-workbench-card-shot-index">SC.{String(shotNumber).padStart(2, "0")}</span>下一镜 {shotNumber}</span>
+                <span className="storyboard-workbench-card-state is-draft"><Clapperboard />待撰写</span>
+            </div>
+            <div className="storyboard-workbench-card-actions">
+                <button type="button" onClick={onCancel}><X />取消撰写</button>
+            </div>
+        </header>
+        <div className="storyboard-workbench-card-body">
+            <div className="storyboard-workbench-next-panel">
+                <span className="storyboard-workbench-next-panel-icon"><Clapperboard /></span>
+                <div className="storyboard-workbench-next-panel-copy">
+                    <strong>SC.{String(shotNumber).padStart(2, "0")} 等待你的脚本</strong>
+                    <span>在下方写下这一镜的镜头、画面或故事。影策会拆解脚本、设计运镜并渲染成片，这一镜会作为 SC.{String(shotNumber).padStart(2, "0")} 自动加入镜头轨道。</span>
+                </div>
+            </div>
+        </div>
+    </article>;
+}
+
+function StoryboardBriefAttachments({ attachments }: { attachments: CreationAttachment[] }) {    const [previewUrl, setPreviewUrl] = useState("");
+    const [previewType, setPreviewType] = useState<"image" | "video">("image");
+    return <><div className="creation-user-message-attachments storyboard-workbench-brief-attachments">{attachments.map((attachment) => {
+        const isVideo = isVideoAttachment(attachment);
+        const url = attachment.previewUrl || ("dataUrl" in attachment ? attachment.dataUrl : attachment.url) || "";
+        return <button key={attachment.id} type="button" onClick={() => { setPreviewType(isVideo ? "video" : "image"); setPreviewUrl(isVideo ? attachment.url : url); }} aria-label={`预览 ${attachment.name}`} disabled={!url}>{isVideo ? <video src={attachment.url} poster={url !== attachment.url ? url : undefined} muted playsInline preload="metadata" /> : <img src={url} alt={attachment.name} width={44} height={44} loading="lazy" />}<span aria-hidden="true"><Maximize2 /></span></button>;
+    })}</div><CreationMediaPreviewModal url={previewUrl} type={previewType} onClose={() => setPreviewUrl("")} /></>;
+}
+
+function StoryboardShotResult({ result, onRetryFailure, onCreateVariant }: { result?: CreationMessage; onRetryFailure: () => void; onCreateVariant: () => void }) {
+    const [previewUrl, setPreviewUrl] = useState("");
+    const [previewType, setPreviewType] = useState<"image" | "video">("image");
+    const openPreview = (url: string, type: "image" | "video") => { setPreviewType(type); setPreviewUrl(url); };
+    if (!result) return <div className="storyboard-workbench-empty"><Film />这一镜还没开始——在下方写出你的脚本，我来接手。</div>;
+    const mode = result.mode || "video";
+    const status = result.status || "queued";
+    const resultUrls = result.resultUrls || [];
+    if (status === "pending" || status === "queued") {
+        const thinking = thinkingFor(mode);
+        return <div className="storyboard-workbench-pending"><div className="storyboard-workbench-thinking">
+            <span className="storyboard-workbench-thinking-copy"><strong>{thinking.title}</strong><span>{thinking.hint}</span></span>
+            <span className="storyboard-workbench-pipeline" aria-hidden="true">{thinking.steps.map((step, index) => <em key={step} style={{ "--step": index } as CSSProperties}><i>{String(index + 1).padStart(2, "0")}</i>{step}</em>)}</span>
+        </div></div>;
+    }
+    if (status === "error") return <div className="storyboard-workbench-error"><span>{generationErrorMessage(result.error || "")}</span><button type="button" onClick={onRetryFailure}><RefreshCw />重新生成</button></div>;
+    if (mode === "text") return <div className="creation-message-content storyboard-workbench-text">{result.content ? <ReactMarkdown>{result.content}</ReactMarkdown> : <span>正在生成…</span>}</div>;
+    if (!resultUrls.length) return <div className="storyboard-workbench-empty"><Film />没有返回可预览结果 <button type="button" onClick={onRetryFailure}>重试</button></div>;
+    const note = result.settings ? directorNoteFor(mode, result.settings) : "";
+    return <>
+        {mode === "video" ? <button type="button" className="creation-video-result" onClick={() => openPreview(resultUrls[0], "video")} aria-label="预览生成视频"><video muted preload="metadata" className="size-full object-cover" src={resultUrls[0]} /><span><Maximize2 />预览视频</span></button> : <div className="creation-image-result-grid">{resultUrls.map((url) => <button key={url} type="button" className="creation-image-result" onClick={() => openPreview(url, "image")} aria-label="预览生成图片"><img src={url} alt="生成结果" /><span><Maximize2 /></span></button>)}</div>}
+        {note ? <p className="storyboard-workbench-director-note"><span>导演手记</span>{note}</p> : null}
+        <div className="storyboard-workbench-media-meta"><span>{mode === "video" ? "视频结果" : `${resultUrls.length} 张图片`}</span><button type="button" onClick={onCreateVariant}><RefreshCw />生成变体</button><Link to="/canvas">添加到画布</Link>{resultUrls.map((url, index) => <a key={`${url}-download`} href={url} download>{resultUrls.length > 1 ? `下载 ${index + 1}` : <><Download />下载</>}</a>)}</div>
+        <CreationMediaPreviewModal url={previewUrl} type={previewType} onClose={() => setPreviewUrl("")} />
+    </>;
 }
 
 function videoResolutionLabel(value: string | number) {
     return Number(String(value).replace(/p$/i, "")) === 2160 ? "4K" : `${String(value).replace(/p$/i, "")}P`;
 }
 
+function formatMessageTime(value: string) {
+    const timestamp = new Date(value).getTime();
+    return Number.isFinite(timestamp) ? conversationTimeFormatter.format(timestamp) : "";
+}
+
 function conversationPreviewMessage(conversation: CreationConversation) {
     let fallback: CreationMessage | undefined;
     for (let index = conversation.messages.length - 1; index >= 0; index -= 1) {
diff --git a/web/src/pages/home/index.tsx b/web/src/pages/home/index.tsx
index 51dd31b33..54253724b 100644
--- a/web/src/pages/home/index.tsx
+++ b/web/src/pages/home/index.tsx
@@ -1,13 +1,13 @@
-import { useMemo, type CSSProperties, type ReactNode } from "react";
+import { useMemo, type ReactNode } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { App, Button } from "antd";
-import { ArrowRight, BookOpenText, Bot, CheckCircle2, CircleAlert, Clapperboard, Clock3, FolderKanban, Images, LayoutGrid, ListChecks, Plus, Sparkles } from "lucide-react";
+import { ArrowRight, Bot, Clapperboard, FolderKanban, Images, LayoutGrid, ListChecks, Plus, Sparkles } from "lucide-react";
 import { Link, useNavigate } from "react-router";
 
 import { CanvasProjectCard } from "@/components/canvas/canvas-project-card";
 import { WorkspaceErrorState, WorkspaceLoadingState } from "@/components/layout/workspace-state";
 import { WorkspaceSignalIcon } from "@/components/ui/aceternity/workspace-signal-icon";
-import { projectAttentionCount, projectContinueTarget, projectDetailStage, projectNextActions, projectSummaryCompletion } from "@/lib/project-workbench";
+import { projectDetailStage, projectSummaryCompletion } from "@/lib/project-workbench";
 import { getProject, listProjects, type ProjectSummary } from "@/services/api/projects";
 import { createCanvasProjectWithRemoteSync } from "@/services/user-data-sync";
 import { useCanvasStore } from "@/stores/canvas/use-canvas-store";
@@ -59,17 +59,15 @@ export default function IndexPage() {
     const loadingUserWorkspace = !userHydrated || (Boolean(user && shortDramaEnabled) && domainProjectsQuery.isLoading);
     return (
         <main className="app-user-content app-workspace-canvas app-workspace-scroll h-full overflow-y-auto text-foreground">
-            <div className="app-home-workbench mx-auto w-full max-w-[1440px] px-4 pb-12 pt-5 sm:px-6 lg:px-8">
+            <div className="app-home-workbench w-full px-4 pb-12 pt-5 sm:px-6 lg:px-8">
                 {loadingUserWorkspace ? (
-                    <WorkspaceLoadingState className="mt-3 max-w-[980px]" label="正在恢复工作台" detail="读取项目、章节和最近画布" rows={5} />
+                    <WorkspaceLoadingState className="mt-3" label="正在恢复工作台" detail="读取项目、章节和最近画布" rows={5} />
                 ) : user && shortDramaEnabled && domainProjectsQuery.isError ? (
                     <WorkspaceErrorState title="项目工作台加载失败" description={domainProjectsQuery.error instanceof Error ? domainProjectsQuery.error.message : "暂时无法读取项目列表。"} onRetry={() => void domainProjectsQuery.refetch()} />
                 ) : shortDramaEnabled && activeProject ? (
                     <ReturningWorkspace
                         summary={activeProject}
                         detail={activeProjectQuery.data}
-                        detailLoading={activeProjectQuery.isLoading}
-                        detailError={activeProjectQuery.isError}
                         recentProjects={domainProjects.slice(0, 5)}
                         recentIndependentCanvases={recentIndependentCanvases}
                         onCreateIndependentCanvas={createIndependentCanvas}
@@ -88,91 +86,45 @@ export default function IndexPage() {
     );
 }
 
-function ReturningWorkspace({ summary, detail, detailLoading, detailError, recentProjects, recentIndependentCanvases, onCreateIndependentCanvas }: {
+function ReturningWorkspace({ summary, detail, recentProjects, recentIndependentCanvases, onCreateIndependentCanvas }: {
     summary: ProjectSummary;
     detail?: Awaited<ReturnType<typeof getProject>>;
-    detailLoading: boolean;
-    detailError: boolean;
     recentProjects: ProjectSummary[];
     recentIndependentCanvases: ReturnType<typeof useCanvasStore.getState>["projects"];
     onCreateIndependentCanvas: () => void;
 }) {
-    const taskCenterEnabled = useUserStore((state) => state.features.taskCenterEnabled);
     const stage = detail ? projectDetailStage(detail) : { label: "进行中", detail: "读取项目进度" };
-    const continueTarget = detail ? projectContinueTarget(detail) : { href: `/projects/${summary.project.id}/overview`, title: summary.project.name, context: "打开项目概览", updatedAt: summary.project.updatedAt };
-    const nextActions = detail ? projectNextActions(detail, 4).filter((action) => taskCenterEnabled || !action.href.startsWith("/tasks")).slice(0, 3) : [];
     const completion = projectSummaryCompletion(summary);
-    const attentionCount = detail ? projectAttentionCount(detail) : 0;
     return (
         <>
-            <header className="app-home-header flex flex-col gap-4 border-b border-border/80 pb-5 sm:flex-row sm:items-center sm:justify-between">
-                <div className="flex min-w-0 items-center gap-3">
-                    <WorkspaceSignalIcon variant="home" />
-                    <div className="min-w-0">
-                        <h1 className="text-[var(--fs-title)] font-semibold leading-7">继续创作</h1>
-                        <p className="mt-1 text-xs leading-5 text-foreground/55">回到最近工作，或先处理阻塞制作的事项。</p>
-                    </div>
-                </div>
-                <div className="flex flex-wrap items-center gap-2">
-                    <Button icon={<LayoutGrid className="size-3.5" />} onClick={onCreateIndependentCanvas}>打开画布</Button>
-                    <Link className="inline-flex h-9 items-center gap-2 rounded-md bg-foreground px-3.5 text-sm font-medium text-background transition-opacity hover:opacity-85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/25" to="/projects?create=1"><Plus className="size-3.5" />创建项目</Link>
-                </div>
-            </header>
-
-            <section className="app-home-metrics grid grid-cols-2 gap-3 py-5 xl:grid-cols-4" aria-label="项目状态概览">
-                <WorkspaceMetric icon={<BookOpenText />} label="剧情章节" value={summary.unitCount} detail={`${summary.completedUnitCount} 章已完成`} />
-                <WorkspaceMetric icon={<LayoutGrid />} label="项目画布" value={summary.canvasCount} detail="已关联制作空间" />
-                <WorkspaceMetric icon={<Images />} label="项目资产" value={summary.assetCount} detail="角色、场景与媒体" />
-                <WorkspaceMetric icon={<CircleAlert />} label="需要处理" value={attentionCount} detail={attentionCount ? "建议优先处理" : "当前流程顺畅"} attention={attentionCount > 0} />
-            </section>
-
-            <section className="app-home-focus-panel grid overflow-hidden rounded-lg border border-border/80 lg:grid-cols-[minmax(260px,.8fr)_minmax(320px,1fr)_minmax(280px,.72fr)]">
-                <div className="min-w-0 p-5 sm:p-6 lg:p-7">
-                    <div className="flex flex-wrap items-center gap-2 text-xs text-foreground/50">
-                        <span className="font-medium text-[var(--workspace-accent)]">{stage.label}</span>
-                        <span aria-hidden>·</span>
-                        <span>{stage.detail}</span>
-                    </div>
-                    <h2 className="mt-3 truncate text-2xl font-semibold sm:text-3xl">{summary.project.name}</h2>
-                    <div className="mt-4 flex flex-wrap items-center gap-x-5 gap-y-2 text-xs text-foreground/52">
-                        <span>{summary.completedUnitCount}/{summary.unitCount} 章已完成</span>
-                        <span>{summary.canvasCount} 张项目画布</span>
-                        <span>{summary.assetCount} 项资产</span>
-                        <span>更新于 {formatRelativeTime(summary.project.updatedAt)}</span>
-                    </div>
-                    <div className="mt-4 h-1.5 w-full max-w-[620px] overflow-hidden rounded-full bg-foreground/[.08]" aria-label={`章节完成度 ${completion}%`}>
-                        <div className="h-full rounded-full bg-[var(--workspace-accent)] transition-[width]" style={{ width: `${completion}%` }} />
-                    </div>
-                    <Link to={continueTarget.href} className="mt-6 inline-flex min-h-10 max-w-full items-center gap-3 rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-opacity hover:opacity-85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/25">
-                        <span className="min-w-0 truncate">{continueTarget.context} · {continueTarget.title}</span>
-                        <ArrowRight className="size-4 shrink-0" />
-                    </Link>
-                </div>
-
-                <SpatialChapterStack detail={detail} loading={detailLoading} projectId={summary.project.id} />
-
-                <div className="border-t border-border/75 p-5 sm:p-6 lg:border-l lg:border-t-0 lg:p-7">
-                    <div className="flex items-center justify-between gap-3">
-                        <h2 className="text-sm font-semibold">下一步</h2>
-                        <Link to={`/projects/${summary.project.id}/overview`} className="text-xs text-foreground/48 hover:text-foreground">查看项目</Link>
-                    </div>
-                    {detailLoading ? <div className="mt-4 text-xs text-foreground/45">正在整理项目待办...</div> : null}
-                    {detailError ? <div className="mt-4 text-xs leading-5 text-foreground/48">项目详情暂时无法读取。可先打开项目概览或自由画布继续工作。</div> : null}
-                    {!detailLoading && nextActions.length ? (
-                        <div className="mt-3 divide-y divide-border/70">
-                            {nextActions.map((action) => <WorkbenchActionLink key={action.id} action={action} />)}
+            <div className="studio-band">
+                <header className="app-page-header flex min-h-14 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div className="flex min-w-0 items-center gap-3">
+                        <div className="min-w-0">
+                            <h1 className="text-[var(--fs-title)] font-semibold leading-7">继续创作</h1>
+                            <p className="mt-1 text-xs leading-5 text-foreground/55">回到最近工作，或先处理阻塞制作的事项。</p>
                         </div>
-                    ) : null}
-                </div>
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                        <Button icon={<LayoutGrid className="size-3.5" />} onClick={onCreateIndependentCanvas}>打开画布</Button>
+                        <Link className="inline-flex h-9 items-center gap-2 rounded-md bg-foreground px-3.5 text-sm font-medium text-background transition-opacity hover:opacity-85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/25" to="/projects?create=1"><Plus className="size-3.5" />创建项目</Link>
+                    </div>
+                </header>
+            </div>
+
+            <section className="app-home-quick-create grid gap-3 py-6 sm:grid-cols-3" aria-label="快捷创建">
+                <QuickCreateCard icon={<FolderKanban className="size-5" />} title="创建短剧项目" description="从空白、小说或文本开始建立章节流程。" action="创建" href="/projects?create=1" />
+                <QuickCreateCard icon={<LayoutGrid className="size-5" />} title="打开自由画布" description="适合快速试图、提示词实验和自由创作。" action="打开" onClick={onCreateIndependentCanvas} />
+                <QuickCreateCard icon={<Images className="size-5" />} title="进入素材库" description="整理角色、场景、画风和媒体资产。" action="进入" href="/assets" />
             </section>
 
-            <section className="grid gap-8 py-7 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,.8fr)]">
+            <section className="grid gap-8 py-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,.8fr)]">
                 <div className="min-w-0">
                     <div className="mb-3 flex items-center justify-between gap-4">
                         <div><h2 className="text-base font-semibold">最近项目</h2><p className="mt-1 text-xs text-foreground/45">按最近更新时间排列</p></div>
                         <Link to="/projects" className="inline-flex items-center gap-1.5 text-xs text-foreground/50 hover:text-foreground">查看全部<ArrowRight className="size-3.5" /></Link>
                     </div>
-                    <div className="overflow-hidden rounded-lg border border-border/80 bg-background/65">
+                    <div className="app-home-timeline overflow-hidden rounded-lg border border-border/80 bg-background/65">
                         {recentProjects.map((project, index) => <RecentProjectRow key={project.project.id} summary={project} divided={index > 0} />)}
                     </div>
                 </div>
@@ -193,6 +145,25 @@ function ReturningWorkspace({ summary, detail, detailLoading, detailError, recen
                     )}
                 </div>
             </section>
+
+            <section className="app-home-template-rail border-t border-border/80 py-7" aria-label="工作流入口">
+                <div className="mb-4 flex items-end justify-between gap-4">
+                    <div><h2 className="text-base font-semibold">从工作流开始</h2><p className="mt-1 text-xs leading-5 text-foreground/48">整理故事 → 确认设定 → 制作镜头 → 检查结果。</p></div>
+                    <span className="hidden text-[var(--fs-label)] text-foreground/38 sm:block">{stage.label} · {completion}%</span>
+                </div>
+                <div className="app-workflow-grid grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+                    {workflow.map((item, index) => (
+                        <div key={item.title} className="app-workflow-card relative min-w-0 p-4">
+                            <div className="flex items-center justify-between">
+                                <span className="grid size-6 place-items-center rounded-md bg-foreground/[.06] text-[var(--fs-label)] font-semibold tabular-nums text-[var(--workspace-accent)]">0{index + 1}</span>
+                                {index < workflow.length - 1 ? <ArrowRight className="size-3.5 text-foreground/25" aria-hidden="true" /> : null}
+                            </div>
+                            <h3 className="mt-2 text-sm font-semibold">{item.title}</h3>
+                            <p className="mt-1 text-xs leading-5 text-foreground/48">{item.description}</p>
+                        </div>
+                    ))}
+                </div>
+            </section>
         </>
     );
 }
@@ -219,10 +190,13 @@ function FirstProjectWorkspace({ authenticated, canvasHydrated, recentIndependen
 
             <section className="border-b border-border/80 py-7">
                 <div className="mb-5"><h2 className="text-lg font-semibold">从故事到结果</h2><p className="mt-1 text-xs leading-5 text-foreground/48">每一步都保留输入、版本和生成记录，可以随时返回调整。</p></div>
-                <div className="app-workflow-rail grid border-t border-border/75 sm:grid-cols-2 xl:grid-cols-4">
+                <div className="app-workflow-grid grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
                     {workflow.map((item, index) => (
-                        <div key={item.title} className={`app-workflow-step min-w-0 border-b border-border/75 py-4 sm:px-4 xl:border-b-0 xl:border-r ${index % 2 === 0 ? "sm:pl-0" : "sm:border-l"} ${index === workflow.length - 1 ? "xl:border-r-0" : ""}`}>
-                            <span className="text-[var(--fs-label)] font-semibold tabular-nums text-[var(--workspace-accent)]">0{index + 1}</span>
+                        <div key={item.title} className="app-workflow-card relative min-w-0 p-4">
+                            <div className="flex items-center justify-between">
+                                <span className="grid size-6 place-items-center rounded-md bg-foreground/[.06] text-[var(--fs-label)] font-semibold tabular-nums text-[var(--workspace-accent)]">0{index + 1}</span>
+                                {index < workflow.length - 1 ? <ArrowRight className="size-3.5 text-foreground/25" aria-hidden="true" /> : null}
+                            </div>
                             <h3 className="mt-2 text-sm font-semibold">{item.title}</h3>
                             <p className="mt-1 text-xs leading-5 text-foreground/48">{item.description}</p>
                         </div>
@@ -251,74 +225,33 @@ function FirstProjectWorkspace({ authenticated, canvasHydrated, recentIndependen
             {recentIndependentCanvases.length ? (
                 <section className="border-t border-border/80 pt-6">
                     <div className="mb-4 flex items-center justify-between"><h2 className="text-base font-semibold">继续自由画布</h2><Link to="/canvas" className="text-xs text-foreground/50 hover:text-foreground">查看全部</Link></div>
-                    <div className="grid max-w-[940px] gap-4 sm:grid-cols-2 lg:grid-cols-3">{recentIndependentCanvases.map((project) => <CanvasProjectCard key={project.id} project={project} variant="recent" />)}</div>
+                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">{recentIndependentCanvases.map((project) => <CanvasProjectCard key={project.id} project={project} variant="recent" />)}</div>
                 </section>
             ) : null}
         </>
     );
 }
 
-function WorkspaceMetric({ icon, label, value, detail, attention = false }: { icon: ReactNode; label: string; value: number; detail: string; attention?: boolean }) {
-    return (
-        <article className="app-home-metric min-w-0 rounded-lg border p-4">
-            <div className="flex items-start justify-between gap-3">
-                <span className={attention ? "text-foreground/75" : "text-[var(--workspace-accent)]"}>{icon}</span>
-                <span className={`size-1.5 rounded-full ${attention ? "bg-foreground/75" : "bg-[var(--workspace-accent)]"}`} />
-            </div>
-            <div className="mt-5 text-[var(--fs-label)] text-foreground/45">{label}</div>
-            <div className="mt-1 text-2xl font-semibold tabular-nums">{value}</div>
-            <div className="mt-1 truncate text-[var(--fs-tiny)] text-foreground/38">{detail}</div>
-        </article>
-    );
-}
-
-function SpatialChapterStack({ detail, loading, projectId }: { detail?: Awaited<ReturnType<typeof getProject>>; loading: boolean; projectId: string }) {
-    const units = detail?.units.slice().sort((left, right) => left.position - right.position).slice(0, 6) || [];
-    const activeUnitId = units.find((unit) => unit.status !== "completed")?.id || units.at(-1)?.id;
-    return (
-        <div className="spatial-chapter-panel min-w-0 border-t border-border/75 p-5 sm:p-6 lg:border-l lg:border-t-0 lg:p-7">
-            <div className="flex items-center justify-between gap-3">
-                <div><div className="text-[var(--fs-tiny)] font-medium text-foreground/38">制作层级</div><h2 className="mt-1 text-sm font-semibold">章节轨道</h2></div>
-                <span className="text-[var(--fs-tiny)] tabular-nums text-foreground/35">{units.length ? `${units.length} 章` : "待建立"}</span>
-            </div>
-            <div className="spatial-chapter-deck mt-4" aria-label="项目章节制作层级">
-                {loading ? Array.from({ length: 4 }, (_, index) => <span key={index} className="spatial-chapter-card is-loading" style={{ "--deck-x": `${index * 12}px`, "--deck-y": `${index * 28}px`, "--deck-z": `${-index * 18}px`, zIndex: 8 - index } as CSSProperties} />) : null}
-                {!loading && units.length ? units.map((unit, index) => (
-                    <Link
-                        key={unit.id}
-                        to={`/projects/${projectId}/chapters/${unit.id}`}
-                        className={`spatial-chapter-card ${unit.id === activeUnitId ? "is-active" : ""}`}
-                        style={{ "--deck-x": `${index * 12}px`, "--deck-y": `${index * 28}px`, "--deck-z": `${-index * 18}px`, zIndex: 8 - index } as CSSProperties}
-                    >
-                        <span className="text-[var(--fs-micro)] font-semibold tabular-nums opacity-55">{String(unit.position + 1).padStart(2, "0")}</span>
-                        <span className="mt-2 block truncate text-xs font-semibold">{unit.title}</span>
-                        <span className="mt-1 block text-[var(--fs-micro)] opacity-50">{unit.status === "completed" ? "已完成" : unit.id === activeUnitId ? "当前制作" : "等待推进"}</span>
-                    </Link>
-                )) : null}
-                {!loading && !units.length ? <div className="grid min-h-52 place-items-center text-center text-xs leading-5 text-foreground/42">创建剧情章节后<br />这里会形成制作层级</div> : null}
-            </div>
-        </div>
-    );
-}
-
-function WorkbenchActionLink({ action }: { action: ReturnType<typeof projectNextActions>[number] }) {
-    const Icon = action.tone === "danger" ? CircleAlert : action.tone === "attention" ? Clock3 : CheckCircle2;
-    return (
-        <Link to={action.href} className="group grid grid-cols-[20px_minmax(0,1fr)_auto] gap-2 py-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground/20">
-            <Icon className={`mt-0.5 size-4 ${action.tone === "danger" ? "text-foreground/80" : action.tone === "attention" ? "text-foreground/60" : "text-foreground/35"}`} />
-            <span className="min-w-0"><span className="block text-xs font-medium">{action.title}</span><span className="mt-1 line-clamp-2 block text-[var(--fs-label)] leading-4 text-foreground/45">{action.description}</span></span>
-            <span className="self-center text-[var(--fs-label)] font-medium text-foreground/45 transition-colors group-hover:text-foreground">{action.actionLabel}</span>
-        </Link>
+function QuickCreateCard({ icon, title, description, action, href, onClick }: { icon: ReactNode; title: string; description: string; action: string; href?: string; onClick?: () => void }) {
+    const content = (
+        <>
+            <span className="grid size-10 shrink-0 place-items-center rounded-md border border-border/70 bg-foreground/[.04] text-[var(--workspace-accent)]">{icon}</span>
+            <span className="mt-4 block text-sm font-semibold">{title}</span>
+            <span className="mt-1 block text-xs leading-5 text-foreground/48">{description}</span>
+            <span className="mt-4 inline-flex items-center gap-1 text-xs font-medium text-foreground/55 transition-colors group-hover:text-foreground">{action}<ArrowRight className="size-3.5" /></span>
+        </>
     );
+    const className = "app-home-quick-create-card group flex min-h-[148px] flex-col items-start rounded-lg border border-border/80 bg-card p-4 text-left transition hover:-translate-y-0.5 hover:border-foreground/20 hover:shadow-[var(--card-elevation-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+    return href ? <Link to={href} className={className}>{content}</Link> : <button type="button" className={className} onClick={onClick}>{content}</button>;
 }
 
 function RecentProjectRow({ summary, divided }: { summary: ProjectSummary; divided: boolean }) {
     const completion = projectSummaryCompletion(summary);
     return (
-        <Link to={`/projects/${summary.project.id}/overview`} className={`group grid min-h-[68px] grid-cols-[minmax(0,1fr)_80px_20px] items-center gap-3 px-3 py-2.5 hover:bg-foreground/[.025] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/20 sm:grid-cols-[minmax(0,1fr)_100px_120px_20px] ${divided ? "border-t border-border/65" : ""}`}>
+        <Link to={`/projects/${summary.project.id}/overview`} className={`group grid min-h-[68px] grid-cols-[minmax(0,1fr)_80px_20px] items-center gap-3 px-3 py-2.5 hover:bg-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-foreground/20 sm:grid-cols-[minmax(0,1fr)_100px_120px_20px] ${divided ? "border-t border-border/65" : ""}`}>
             <span className="min-w-0"><span className="block truncate text-sm font-medium">{summary.project.name}</span><span className="mt-1 block truncate text-[var(--fs-label)] text-foreground/42">{summary.unitCount} 章 · {summary.canvasCount} 张项目画布 · {summary.assetCount} 项资产</span></span>
             <span className="hidden text-[var(--fs-label)] text-foreground/45 sm:block">更新于<br />{formatRelativeTime(summary.project.updatedAt)}</span>
-            <span className="min-w-0"><span className="flex items-center justify-between text-[var(--fs-tiny)] text-foreground/42"><span>章节</span><span>{completion}%</span></span><span className="mt-1.5 block h-1 overflow-hidden rounded-full bg-foreground/[.08]"><span className="block h-full rounded-full bg-foreground/65" style={{ width: `${completion}%` }} /></span></span>
+            <span className="min-w-0"><span className="flex items-center justify-between text-[var(--fs-tiny)] text-foreground/42"><span>章节</span><span>{completion}%</span></span><span className="mt-1.5 block h-1 overflow-hidden rounded-full bg-surface-active"><span className="block h-full rounded-full bg-foreground/65" style={{ width: `${completion}%` }} /></span></span>
             <ArrowRight className="size-4 text-foreground/25 transition-transform group-hover:translate-x-0.5 group-hover:text-foreground/60" />
         </Link>
     );
diff --git a/web/src/pages/projects/detail.tsx b/web/src/pages/projects/detail.tsx
index 14e535dd6..90384fdca 100644
--- a/web/src/pages/projects/detail.tsx
+++ b/web/src/pages/projects/detail.tsx
@@ -7,7 +7,6 @@ import { createCanvasProjectWithRemoteSync } from "@/services/user-data-sync";
 import { getProject, linkCanvasUnit } from "@/services/api/projects";
 import { WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceErrorState, WorkspaceLoadingState } from "@/components/layout/workspace-state";
-import { WorkspaceSignalIcon } from "@/components/ui/aceternity/workspace-signal-icon";
 import { upsertProjectChapterStoryboard } from "@/lib/canvas/project-chapter-storyboard";
 
 import ProjectAssetsView from "./detail/assets";
@@ -72,11 +71,10 @@ export default function ProjectDetailPage() {
     return (
         <WorkspacePage className="project-workbench-page !overflow-hidden" fluid>
             <div className="flex h-full min-h-0 flex-col">
-                <header className="project-workbench-header shrink-0 border-b border-border/65 bg-background/80 px-3 py-2 backdrop-blur-md sm:px-4 lg:px-5 lg:py-0">
+                <header className="project-workbench-header shrink-0 border-b border-border/65 bg-workspace-glass px-3 py-2 backdrop-blur-md sm:px-4 lg:px-5 lg:py-0">
                     <div className="flex min-w-0 flex-wrap items-center gap-x-3 lg:min-h-16 lg:flex-nowrap">
                         <div className="flex min-w-0 flex-1 items-center gap-2.5 lg:w-[250px] lg:flex-none xl:w-[290px]">
-                            <button type="button" onClick={() => navigate("/projects")} className="grid size-9 shrink-0 place-items-center rounded-md text-foreground/42 transition-colors hover:bg-foreground/[.055] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="返回项目" title="返回项目"><ArrowLeft className="size-4" /></button>
-                            <WorkspaceSignalIcon variant="projects" size="sm" />
+                            <button type="button" onClick={() => navigate("/projects")} className="grid size-9 shrink-0 place-items-center rounded-md text-foreground/42 transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label="返回项目" title="返回项目"><ArrowLeft className="size-4" /></button>
                             <div className="flex min-w-0 items-center gap-2">
                                 <h1 className="min-w-0 truncate text-[var(--fs-body)] font-semibold text-foreground/90">{detail.data.project.name}</h1>
                                 <span className={`size-1.5 shrink-0 rounded-full ${detail.data.project.status === "archived" ? "bg-foreground/30" : "bg-[var(--workspace-accent)]"}`} />
@@ -84,7 +82,7 @@ export default function ProjectDetailPage() {
                             </div>
                         </div>
                         <nav className="thin-scrollbar order-last mt-1 flex h-11 w-full min-w-0 items-center gap-0.5 overflow-x-auto lg:order-none lg:mt-0 lg:h-16 lg:flex-1 lg:border-l lg:border-border/55 lg:pl-3" aria-label="项目导航">
-                            {views.map((item) => { const Icon = item.icon; const active = item.key === activeView; const href = item.key === "chapters" ? chapterHref : `/projects/${projectId}/${item.key}`; return <Link key={item.key} to={href} className={`relative flex h-11 shrink-0 items-center gap-2 rounded-md px-2.5 text-[var(--fs-body)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:px-3 ${active ? "bg-[var(--workspace-accent-soft)] font-medium text-foreground lg:after:absolute lg:after:inset-x-3 lg:after:bottom-0 lg:after:h-0.5 lg:after:rounded-full lg:after:bg-[var(--workspace-accent)]" : "text-foreground/52 hover:bg-foreground/[.045] hover:text-foreground"}`} aria-current={active ? "page" : undefined}><Icon className={`size-4 shrink-0 ${active ? "text-[var(--workspace-accent)]" : "text-foreground/45"}`} /><span className="sm:hidden">{item.shortLabel}</span><span className="hidden sm:inline">{item.label}</span></Link>; })}
+                            {views.map((item) => { const Icon = item.icon; const active = item.key === activeView; const href = item.key === "chapters" ? chapterHref : `/projects/${projectId}/${item.key}`; return <Link key={item.key} to={href} className={`relative flex h-11 shrink-0 items-center gap-2 rounded-md px-2.5 text-[var(--fs-body)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring sm:px-3 ${active ? "bg-[var(--workspace-accent-soft)] font-medium text-foreground lg:after:absolute lg:after:inset-x-3 lg:after:bottom-0 lg:after:h-0.5 lg:after:rounded-full lg:after:bg-[var(--workspace-accent)]" : "text-foreground/52 hover:bg-surface-hover hover:text-foreground"}`} aria-current={active ? "page" : undefined}><Icon className={`size-4 shrink-0 ${active ? "text-[var(--workspace-accent)]" : "text-foreground/45"}`} /><span className="sm:hidden">{item.shortLabel}</span><span className="hidden sm:inline">{item.label}</span></Link>; })}
                         </nav>
                         <Tooltip title={activeView === "chapters" && detail.data.units.length ? "新建当前章节画布" : "新建项目画布"}><Button size="small" className="!h-9 !shrink-0 !px-2 sm:!px-3" icon={<Plus className="size-4" />} onClick={createCanvas} aria-label={activeView === "chapters" && detail.data.units.length ? "新建当前章节画布" : "新建项目画布"}><span className="hidden sm:inline">新建画布</span></Button></Tooltip>
                     </div>
@@ -92,7 +90,7 @@ export default function ProjectDetailPage() {
                 {detail.data.project.status === "archived" ? <Alert type="warning" showIcon banner message="项目已归档，恢复后才能创建画布和生成任务" className="!border-x-0 !border-t-0" /> : null}
                 <main className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
                     <div className={activeView === "chapters" ? "min-h-0 flex-1" : "thin-scrollbar min-h-0 flex-1 overflow-y-auto px-3 py-5 sm:px-5 lg:px-8 lg:py-7"}>
-                        <div className={activeView === "overview" ? "mx-auto w-full max-w-[1200px]" : activeView === "chapters" ? "h-full w-full" : "w-full"}>
+                        <div className={activeView === "overview" ? "w-full" : activeView === "chapters" ? "h-full w-full" : "w-full"}>
                             {activeView === "overview" ? <ProjectOverviewView detail={detail.data} refreshProject={refreshProject} onCreateCanvas={createCanvas} /> : null}
                             {activeView === "chapters" ? <ProjectChaptersView detail={detail.data} refreshProject={refreshProject} onCreateCanvas={createCanvas} /> : null}
                             {activeView === "canvases" ? <ProjectCanvasesView detail={detail.data} refreshProject={refreshProject} onCreateCanvas={createCanvas} /> : null}
diff --git a/web/src/pages/projects/detail/assets.tsx b/web/src/pages/projects/detail/assets.tsx
index e9d5ca0b3..71fdaba25 100644
--- a/web/src/pages/projects/detail/assets.tsx
+++ b/web/src/pages/projects/detail/assets.tsx
@@ -6,7 +6,6 @@ import { Box, Check, ChevronDown, Download, FileText, Image as ImageIcon, Link2,
 import { WorkspaceState } from "@/components/layout/workspace-state";
 import { AssetMediaPreview } from "@/components/asset-media-preview";
 import { AssetLibraryCard, AssetLibraryCardMedia } from "@/components/assets/asset-library-card";
-import { WorkspaceSignalIcon } from "@/components/ui/aceternity/workspace-signal-icon";
 import { resolveProjectCanvasStyle } from "@/components/canvas/canvas-style-picker-modal";
 import { resourceFileUrl, resourceIdFromStorageKey } from "@/services/api/resources";
 import {
@@ -168,7 +167,6 @@ export default function ProjectAssetsView({ detail, refreshProject }: ProjectDet
         <div>
             <header className="flex min-h-[72px] flex-col gap-4 border-b border-border/70 pb-4 sm:flex-row sm:items-center sm:justify-between">
                 <div className="flex min-w-0 items-center gap-3">
-                    <WorkspaceSignalIcon variant="assets" size="sm" />
                     <div className="min-w-0">
                         <div className="flex min-w-0 flex-wrap items-center gap-2.5">
                             <h2 className="text-[var(--fs-heading-lg)] font-semibold leading-6">角色与资产</h2>
@@ -187,7 +185,7 @@ export default function ProjectAssetsView({ detail, refreshProject }: ProjectDet
                 </div>
             </header>
             <div className="mt-3 grid gap-3 lg:grid-cols-[156px_minmax(0,1fr)]">
-                <nav className="space-y-0.5 border-r border-border/70 pr-2" aria-label="资产分类">{categoryCounts.map((item) => <button key={item.value} type="button" onClick={() => setCategory(item.value)} className={`flex h-11 w-full items-center justify-between rounded-md px-2 text-left text-xs ${category === item.value ? "bg-foreground/[.08] font-medium" : "text-foreground/55 hover:bg-foreground/[.04]"}`}><span>{item.value === "all" ? "全部资产" : categoryLabels[item.value]}</span><span className="min-w-5 rounded bg-foreground/[.05] px-1 text-center text-[var(--fs-tiny)] tabular-nums">{item.count}</span></button>)}</nav>
+                <nav className="space-y-0.5 border-r border-border/70 pr-2" aria-label="资产分类">{categoryCounts.map((item) => <button key={item.value} type="button" onClick={() => setCategory(item.value)} className={`flex h-11 w-full items-center justify-between rounded-md px-2 text-left text-xs ${category === item.value ? "bg-surface-active font-medium" : "text-foreground/55 hover:bg-surface-hover"}`}><span>{item.value === "all" ? "全部资产" : categoryLabels[item.value]}</span><span className="min-w-5 rounded bg-foreground/[.05] px-1 text-center text-[var(--fs-tiny)] tabular-nums">{item.count}</span></button>)}</nav>
                 <div className="min-w-0">
                     {(category === "all" || category === "character") && pendingCandidates.length ? (
                         <section className="mb-4" aria-label="待确认角色">
@@ -242,7 +240,7 @@ function CharacterEditorModal({ open, editing, form, loading, onClose, onSave }:
 type CharacterFormKey = (typeof characterFields)[number][0];
 
 function MediaAssetCard({ asset, personalAsset, onOpen, onCategoryChange, onVersion, onRemove, loading }: { asset: ProjectAsset; personalAsset?: Asset; onOpen: () => void; onCategoryChange: (category: string) => void; onVersion: () => void; onRemove: () => void; loading: boolean }) {
-    return <AssetLibraryCard className="project-asset-library-card"><AssetLibraryCardMedia className="relative aspect-[4/3] overflow-hidden bg-foreground/[.05]"><button type="button" className="project-asset-media-button" onClick={onOpen} aria-label={`查看资产：${asset.title}`}><AssetMediaPreview asset={personalAsset} alt={asset.title} className="h-full w-full bg-black object-cover" fallback={<div className="grid h-full place-items-center text-foreground/25"><MediaIcon kind={asset.mediaType} /></div>} /><div className="absolute inset-x-2 top-2 flex items-center justify-between"><StatusPill status={asset.status} /><span className="rounded bg-black/50 px-1.5 py-0.5 text-[var(--fs-micro)] text-white">{mediaLabel(asset.mediaType)}</span></div></button></AssetLibraryCardMedia><div className="p-2.5"><button type="button" className="project-asset-title-button" onClick={onOpen}><span className="min-w-0 truncate text-xs font-medium">{asset.title}</span><span className="shrink-0 text-[var(--fs-micro)] text-foreground/38">{formatTime(asset.updatedAt)}</span></button><div className="mt-1 flex items-center gap-1.5 text-[var(--fs-tiny)] text-foreground/42"><Dropdown trigger={["click"]} menu={{ selectedKeys: [asset.category], items: Object.entries(categoryLabels).filter(([value]) => value !== "character").map(([value, label]) => ({ key: value, label })), onClick: ({ key }) => onCategoryChange(key) }}><button type="button" disabled={loading} className="inline-flex h-6 items-center gap-1 rounded px-1.5 text-[var(--fs-tiny)] text-foreground/50 hover:bg-foreground/[.055]"><span>{categoryLabel(asset.category)}</span><ChevronDown className="size-3" /></button></Dropdown><span>·</span><span>v{Math.max(1, asset.versionCount)}</span><Link2 className="ml-auto size-3.5 shrink-0 text-[var(--workspace-accent)]" /></div><div className="mt-2 flex items-center justify-between gap-2 border-t border-border/60 pt-1.5"><span className="text-[var(--fs-micro)] text-foreground/38">{mediaLabel(asset.mediaType)}</span><div className="flex items-center"><Button type="text" size="small" icon={<RefreshCw className="size-3.5" />} loading={loading} onClick={onVersion} /><Popconfirm title="移出项目资产？" okText="移出" cancelText="取消" onConfirm={onRemove}><Button type="text" danger size="small" icon={<Trash2 className="size-3.5" />} loading={loading} /></Popconfirm></div></div></div></AssetLibraryCard>;
+    return <AssetLibraryCard className="project-asset-library-card"><AssetLibraryCardMedia className="relative aspect-[4/3] overflow-hidden bg-foreground/[.05]"><button type="button" className="project-asset-media-button" onClick={onOpen} aria-label={`查看资产：${asset.title}`}><AssetMediaPreview asset={personalAsset} alt={asset.title} className="h-full w-full bg-black object-cover" fallback={<div className="grid h-full place-items-center text-foreground/25"><MediaIcon kind={asset.mediaType} /></div>} /><div className="absolute inset-x-2 top-2 flex items-center justify-between"><StatusPill status={asset.status} /><span className="rounded bg-black/50 px-1.5 py-0.5 text-[var(--fs-micro)] text-white">{mediaLabel(asset.mediaType)}</span></div></button></AssetLibraryCardMedia><div className="p-2.5"><button type="button" className="project-asset-title-button" onClick={onOpen}><span className="min-w-0 truncate text-xs font-medium">{asset.title}</span><span className="shrink-0 text-[var(--fs-micro)] text-foreground/38">{formatTime(asset.updatedAt)}</span></button><div className="mt-1 flex items-center gap-1.5 text-[var(--fs-tiny)] text-foreground/42"><Dropdown trigger={["click"]} menu={{ selectedKeys: [asset.category], items: Object.entries(categoryLabels).filter(([value]) => value !== "character").map(([value, label]) => ({ key: value, label })), onClick: ({ key }) => onCategoryChange(key) }}><button type="button" disabled={loading} className="inline-flex h-6 items-center gap-1 rounded px-1.5 text-[var(--fs-tiny)] text-foreground/50 hover:bg-surface-hover"><span>{categoryLabel(asset.category)}</span><ChevronDown className="size-3" /></button></Dropdown><span>·</span><span>v{Math.max(1, asset.versionCount)}</span><Link2 className="ml-auto size-3.5 shrink-0 text-[var(--workspace-accent)]" /></div><div className="mt-2 flex items-center justify-between gap-2 border-t border-border/60 pt-1.5"><span className="text-[var(--fs-micro)] text-foreground/38">{mediaLabel(asset.mediaType)}</span><div className="flex items-center"><Button type="text" size="small" icon={<RefreshCw className="size-3.5" />} loading={loading} onClick={onVersion} /><Popconfirm title="移出项目资产？" okText="移出" cancelText="取消" onConfirm={onRemove}><Button type="text" danger size="small" icon={<Trash2 className="size-3.5" />} loading={loading} /></Popconfirm></div></div></div></AssetLibraryCard>;
 }
 
 function ProjectAssetPreviewModal({ asset, personalAsset, onClose, onDownload, onReplaceImage }: { asset: ProjectAsset | null; personalAsset?: Asset; onClose: () => void; onDownload: () => void; onReplaceImage: () => void }) {
diff --git a/web/src/pages/projects/detail/canvases.tsx b/web/src/pages/projects/detail/canvases.tsx
index 0e56f45a9..bcdea8cf8 100644
--- a/web/src/pages/projects/detail/canvases.tsx
+++ b/web/src/pages/projects/detail/canvases.tsx
@@ -61,7 +61,7 @@ export default function ProjectCanvasesView({ detail, refreshProject }: ProjectD
                                         <div className="flex items-center justify-between"><span className="text-[var(--fs-tiny)] font-medium text-foreground/48">关联章节</span><span className="text-[var(--fs-micro)] tabular-nums text-foreground/38">{linkedUnits.length} 个</span></div>
                                         <div className="mt-1.5 flex min-h-6 max-h-12 flex-wrap gap-1 overflow-y-auto">
                                             {linkedUnits.length ? linkedUnits.map((unit) => (
-                                                <span key={unit!.id} className="inline-flex h-5 max-w-full items-center gap-1 rounded bg-[var(--workspace-accent-soft)] pl-1.5 pr-0.5 text-[var(--fs-micro)] text-[var(--workspace-accent)]"><span className="truncate">{String(unit!.position + 1).padStart(2, "0")} · {unit!.title}</span><Tooltip title="解除章节关联"><button type="button" className="grid size-4 shrink-0 place-items-center rounded hover:bg-foreground/[.07]" aria-label={`解除${unit!.title}关联`} onClick={() => unlinkUnitMutation.mutate({ canvasId: canvas.id, unitId: unit!.id })}><X className="size-3" /></button></Tooltip></span>
+                                                <span key={unit!.id} className="inline-flex h-5 max-w-full items-center gap-1 rounded bg-[var(--workspace-accent-soft)] pl-1.5 pr-0.5 text-[var(--fs-micro)] text-[var(--workspace-accent)]"><span className="truncate">{String(unit!.position + 1).padStart(2, "0")} · {unit!.title}</span><Tooltip title="解除章节关联"><button type="button" className="grid size-4 shrink-0 place-items-center rounded hover:bg-surface-hover" aria-label={`解除${unit!.title}关联`} onClick={() => unlinkUnitMutation.mutate({ canvasId: canvas.id, unitId: unit!.id })}><X className="size-3" /></button></Tooltip></span>
                                             )) : <span className="py-0.5 text-[var(--fs-tiny)] text-foreground/38">尚未关联章节</span>}
                                         </div>
                                         <div className="mt-1.5 flex items-center gap-1.5">
diff --git a/web/src/pages/projects/detail/chapters.tsx b/web/src/pages/projects/detail/chapters.tsx
index 170fd7605..637e8bbbe 100644
--- a/web/src/pages/projects/detail/chapters.tsx
+++ b/web/src/pages/projects/detail/chapters.tsx
@@ -377,7 +377,7 @@ export default function ProjectChaptersView({ detail, refreshProject, onCreateCa
                     <label className="flex h-8 items-center gap-1.5 rounded-md border border-border/75 bg-background/55 px-2 focus-within:border-[var(--workspace-accent)] focus-within:ring-2 focus-within:ring-[var(--workspace-accent-soft)]">
                         <Search className="size-3.5 shrink-0 text-foreground/32" />
                         <input value={searchQuery} onChange={(event) => setSearchQuery(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter" && visibleUnits[0]) selectChapter(visibleUnits[0].id); }} className="min-w-0 flex-1 bg-transparent text-xs outline-none placeholder:text-foreground/28" placeholder="搜索标题或章节序号" aria-label="搜索章节" />
-                        {searchQuery ? <button type="button" onClick={() => setSearchQuery("")} className="grid size-5 shrink-0 place-items-center rounded text-foreground/32 hover:bg-foreground/[.06]" aria-label="清空章节搜索"><X className="size-3" /></button> : null}
+                        {searchQuery ? <button type="button" onClick={() => setSearchQuery("")} className="grid size-5 shrink-0 place-items-center rounded text-foreground/32 hover:bg-surface-hover" aria-label="清空章节搜索"><X className="size-3" /></button> : null}
                     </label>
                     {deferredSearchQuery ? <div className="mt-1 px-0.5 text-[var(--fs-micro)] tabular-nums text-foreground/35">找到 {visibleUnits.length.toLocaleString("zh-CN")} 章 · 搜索时使用“移动到”调整顺序</div> : null}
                 </div>
@@ -390,14 +390,14 @@ export default function ProjectChaptersView({ detail, refreshProject, onCreateCa
                                 const chapterNumber = chapterNumberById.get(unit.id) || virtualItem.index + 1;
                                 return (
                                     <div key={unit.id} className="absolute left-0 top-0 w-full" style={{ height: virtualItem.size, transform: `translateY(${virtualItem.start}px)` }}>
-                                        <div draggable={!dirty && !reorderMutation.isPending && !deferredSearchQuery} onDragStart={(event) => { setDraggedId(unit.id); event.dataTransfer.effectAllowed = "move"; }} onDragOver={(event) => { if (deferredSearchQuery) return; event.preventDefault(); event.dataTransfer.dropEffect = "move"; }} onDrop={() => moveChapter(unit.id)} onDragEnd={() => setDraggedId("")} className={`group flex h-[50px] items-start rounded-md transition-colors duration-100 ${unit.id === selectedUnit?.id ? "bg-foreground/[.08]" : "hover:bg-foreground/[.04]"} ${draggedId === unit.id ? "opacity-45" : ""}`}>
+                                        <div draggable={!dirty && !reorderMutation.isPending && !deferredSearchQuery} onDragStart={(event) => { setDraggedId(unit.id); event.dataTransfer.effectAllowed = "move"; }} onDragOver={(event) => { if (deferredSearchQuery) return; event.preventDefault(); event.dataTransfer.dropEffect = "move"; }} onDrop={() => moveChapter(unit.id)} onDragEnd={() => setDraggedId("")} className={`group flex h-[50px] items-start rounded-md transition-colors duration-100 ${unit.id === selectedUnit?.id ? "bg-surface-active" : "hover:bg-surface-hover"} ${draggedId === unit.id ? "opacity-45" : ""}`}>
                                             <button type="button" disabled={Boolean(deferredSearchQuery)} className="mt-2 grid size-6 shrink-0 cursor-grab place-items-center text-foreground/25 active:cursor-grabbing disabled:cursor-default disabled:opacity-35" aria-label={`拖动第 ${chapterNumber} 章排序`}><GripVertical className="size-3.5" /></button>
                                             <button type="button" onClick={() => selectChapter(unit.id)} className="flex min-w-0 flex-1 items-start gap-2 px-0 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--workspace-accent)]">
                                                 <span className={`w-8 shrink-0 pt-0.5 text-[var(--fs-tiny)] tabular-nums ${unit.id === selectedUnit?.id ? "font-semibold text-[var(--workspace-accent)]" : "text-foreground/35"}`}>{String(chapterNumber).padStart(Math.max(2, String(orderedUnits.length).length), "0")}</span>
                                                 <span className="min-w-0 flex-1"><span className={`block truncate text-[var(--fs-body)] ${unit.id === selectedUnit?.id ? "font-medium text-foreground" : "text-foreground/65"}`}>{unit.title}</span><span className="mt-0.5 flex items-center gap-1 text-[var(--fs-tiny)] text-foreground/38"><span>{statusLabel(unit.status)}</span>{chapterCanvasCount(unit.id) ? <><span>·</span><span>{chapterCanvasCount(unit.id)} 画布</span></> : null}</span></span>
                                             </button>
                                             <Dropdown trigger={["click"]} placement="bottomRight" menu={{ items: [{ key: "move", icon: <MoveVertical className="size-3.5" />, label: "移动到…" }], onClick: () => { setMoveTargetId(unit.id); setMovePosition(chapterNumber); } }}>
-                                                <button type="button" className="mt-2 grid size-6 shrink-0 place-items-center rounded text-foreground/28 opacity-0 hover:bg-foreground/[.06] hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100" aria-label={`${unit.title}更多操作`}><MoreHorizontal className="size-3.5" /></button>
+                                                <button type="button" className="mt-2 grid size-6 shrink-0 place-items-center rounded text-foreground/28 opacity-0 hover:bg-surface-hover hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100" aria-label={`${unit.title}更多操作`}><MoreHorizontal className="size-3.5" /></button>
                                             </Dropdown>
                                             <Popconfirm title="删除此章节？" description="章节内容及关联制作记录将被删除，已关联的画布不会删除。" okText="删除" cancelText="取消" okButtonProps={{ danger: true, loading: deleteMutation.isPending }} onConfirm={() => deleteMutation.mutate(unit.id)}>
                                                 <button type="button" className="mr-1 mt-2 grid size-6 shrink-0 place-items-center rounded text-foreground/28 opacity-0 hover:bg-red-500/10 hover:text-red-500 group-hover:opacity-100 focus-visible:opacity-100" aria-label={`删除${unit.title}`}><Trash2 className="size-3.5" /></button>
@@ -469,7 +469,7 @@ function EditorToolbar({ editor }: { editor: Editor | null }) {
             <EditorTool editor={editor} label="重做" icon={<Redo2 className="size-3.5" />} onClick={() => editor?.chain().focus().redo().run()} />
             <ToolbarDivider />
             <Dropdown trigger={["click"]} menu={{ selectedKeys: [blockLabel], items: ["正文", "标题 1", "标题 2", "标题 3"].map((key) => ({ key, label: key })), onClick: ({ key }) => key === "正文" ? editor?.chain().focus().setParagraph().run() : editor?.chain().focus().toggleHeading({ level: Number(key.slice(-1)) as 1 | 2 | 3 }).run() }}>
-                <button type="button" className="flex h-7 items-center gap-1 rounded px-2 text-xs text-foreground/60 hover:bg-foreground/[.06]" aria-label="段落格式">{blockLabel}<ChevronDown className="size-3" /></button>
+                <button type="button" className="flex h-7 items-center gap-1 rounded px-2 text-xs text-foreground/60 hover:bg-surface-hover" aria-label="段落格式">{blockLabel}<ChevronDown className="size-3" /></button>
             </Dropdown>
             <EditorTool editor={editor} label="粗体" icon={<Bold className="size-3.5" />} onClick={() => editor?.chain().focus().toggleBold().run()} active={Boolean(editor?.isActive("bold"))} />
             <EditorTool editor={editor} label="斜体" icon={<Italic className="size-3.5" />} onClick={() => editor?.chain().focus().toggleItalic().run()} active={Boolean(editor?.isActive("italic"))} />
@@ -477,21 +477,21 @@ function EditorToolbar({ editor }: { editor: Editor | null }) {
             <EditorTool editor={editor} label="删除线" icon={<Strikethrough className="size-3.5" />} onClick={() => editor?.chain().focus().toggleStrike().run()} active={Boolean(editor?.isActive("strike"))} />
             <ToolbarDivider />
             <Dropdown trigger={["click"]} menu={{ selectedKeys: [alignment], items: [{ key: "left", icon: <AlignLeft className="size-3.5" />, label: "左对齐" }, { key: "center", icon: <AlignCenter className="size-3.5" />, label: "居中" }, { key: "right", icon: <AlignRight className="size-3.5" />, label: "右对齐" }, { key: "justify", icon: <AlignJustify className="size-3.5" />, label: "两端对齐" }], onClick: ({ key }) => editor?.chain().focus().setTextAlign(key).run() }}>
-                <button type="button" className="grid size-7 place-items-center rounded text-foreground/60 hover:bg-foreground/[.06]" aria-label="文字对齐">{alignmentIcon}</button>
+                <button type="button" className="grid size-7 place-items-center rounded text-foreground/60 hover:bg-surface-hover" aria-label="文字对齐">{alignmentIcon}</button>
             </Dropdown>
             <EditorTool editor={editor} label="项目符号" icon={<List className="size-3.5" />} onClick={() => editor?.chain().focus().toggleBulletList().run()} active={Boolean(editor?.isActive("bulletList"))} />
             <EditorTool editor={editor} label="编号列表" icon={<ListOrdered className="size-3.5" />} onClick={() => editor?.chain().focus().toggleOrderedList().run()} active={Boolean(editor?.isActive("orderedList"))} />
             <EditorTool editor={editor} label="引用" icon={<Quote className="size-3.5" />} onClick={() => editor?.chain().focus().toggleBlockquote().run()} active={Boolean(editor?.isActive("blockquote"))} />
             <EditorTool editor={editor} label="链接" icon={<Link2 className="size-3.5" />} onClick={setLink} active={Boolean(editor?.isActive("link"))} />
             <Dropdown trigger={["click"]} placement="bottomRight" menu={{ items: [{ key: "color", icon: <span className="text-[var(--fs-label)] font-bold text-amber-600">A</span>, label: "文字颜色" }, { key: "highlight", icon: <Highlighter className="size-3.5" />, label: "高亮颜色" }, { type: "divider" }, { key: "code", icon: <Code2 className="size-3.5" />, label: "行内代码" }, { key: "rule", icon: <Minus className="size-3.5" />, label: "分隔线" }, { key: "clear", icon: <Eraser className="size-3.5" />, label: "清除格式" }], onClick: ({ key }) => { if (key === "color") setColor(); else if (key === "highlight") setHighlight(); else if (key === "code") editor?.chain().focus().toggleCode().run(); else if (key === "rule") editor?.chain().focus().setHorizontalRule().run(); else if (key === "clear") editor?.chain().focus().clearNodes().unsetAllMarks().run(); } }}>
-                <button type="button" className="grid size-7 place-items-center rounded text-foreground/60 hover:bg-foreground/[.06]" aria-label="更多格式"><MoreHorizontal className="size-4" /></button>
+                <button type="button" className="grid size-7 place-items-center rounded text-foreground/60 hover:bg-surface-hover" aria-label="更多格式"><MoreHorizontal className="size-4" /></button>
             </Dropdown>
         </div>
     );
 }
 
 function EditorTool({ editor, label, icon, active = false, onClick }: { editor: Editor | null; label: string; icon: ReactNode; active?: boolean; onClick: () => void }) {
-    return <Tooltip title={label}><button type="button" aria-label={label} className={`grid size-7 shrink-0 place-items-center rounded ${active ? "bg-foreground/[.08] text-[var(--workspace-accent)]" : "text-foreground/55 hover:bg-foreground/[.06] hover:text-foreground"}`} disabled={!editor} onClick={onClick}>{icon}</button></Tooltip>;
+    return <Tooltip title={label}><button type="button" aria-label={label} className={`grid size-7 shrink-0 place-items-center rounded ${active ? "bg-surface-active text-[var(--workspace-accent)]" : "text-foreground/55 hover:bg-surface-hover hover:text-foreground"}`} disabled={!editor} onClick={onClick}>{icon}</button></Tooltip>;
 }
 
 function ToolbarDivider() {
diff --git a/web/src/pages/projects/index.tsx b/web/src/pages/projects/index.tsx
index c3c5d7a64..478258d79 100644
--- a/web/src/pages/projects/index.tsx
+++ b/web/src/pages/projects/index.tsx
@@ -1,15 +1,19 @@
-import { useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { App, Button, Form, Input, Modal, Select } from "antd";
-import { ArrowRight, BookOpenText, FolderKanban, Images, LayoutGrid, Plus, Search } from "lucide-react";
+import { ArrowRight, BookOpenText, FileText, FolderKanban, Images, LayoutGrid, Palette, Plus, Search, Sparkles, Trash2 } from "lucide-react";
 import { Link, useNavigate, useSearchParams } from "react-router";
 
 import { CollectionGrid, ListToolbar, PageHeader, WorkspacePage } from "@/components/layout/workspace-page";
 import { WorkspaceErrorState, WorkspaceLoadingState, WorkspaceState } from "@/components/layout/workspace-state";
-import { resolveCanvasStylePreset } from "@/components/canvas/canvas-style-picker-modal";
-import { parseStyleProfile } from "@/lib/canvas/style-profile";
+import { CanvasStylePickerModal, resolveCanvasStylePreset, resolveProjectCanvasStyle, type CanvasStylePreset } from "@/components/canvas/canvas-style-picker-modal";
+import { ModelPicker } from "@/components/model-picker";
+import { createStyleProfileSnapshot, parseStyleProfile, serializeStyleProfile } from "@/lib/canvas/style-profile";
 import { projectSummaryCompletion, projectSummaryStage } from "@/lib/project-workbench";
-import { createProject, listProjects, type ProjectSummary } from "@/services/api/projects";
+import { settingsPath } from "@/lib/settings-navigation";
+import { requestImageQuestion } from "@/services/api/image";
+import { createProject, deleteProject, importProjectUnits, listProjects, type ProjectSummary } from "@/services/api/projects";
+import { modelDisplayName, useEffectiveConfig } from "@/stores/use-config-store";
 
 import { sourceTypeLabel } from "./detail/shared";
 
@@ -18,11 +22,29 @@ type ProjectForm = { name: string; aspectRatio: string; sourceType: string };
 export default function ProjectsPage() {
     const navigate = useNavigate();
     const queryClient = useQueryClient();
-    const { message } = App.useApp();
+    const { message, modal } = App.useApp();
+    const effectiveConfig = useEffectiveConfig();
+    const [createForm] = Form.useForm<ProjectForm>();
     const [searchParams, setSearchParams] = useSearchParams();
     const [keyword, setKeyword] = useState("");
     const [status, setStatus] = useState<"all" | "active" | "archived">("all");
     const [sort, setSort] = useState<"updated" | "progress" | "name">("updated");
+    const [storyDraft, setStoryDraft] = useState("");
+    const [createSource, setCreateSource] = useState<"blank" | "novel" | "text">("blank");
+    const [selectedStyle, setSelectedStyle] = useState<CanvasStylePreset | null>(null);
+    const [stylePickerOpen, setStylePickerOpen] = useState(false);
+    const [generateModel, setGenerateModel] = useState("");
+    const [generateChapterCount, setGenerateChapterCount] = useState("5");
+    const [generateStructure, setGenerateStructure] = useState("单线推进");
+    const [generateChapterLength, setGenerateChapterLength] = useState("中");
+    const [generateWordCount, setGenerateWordCount] = useState("800");
+    const [generatePerspective, setGeneratePerspective] = useState("第三人称");
+    const [generateTone, setGenerateTone] = useState("平稳叙事");
+    const [generateCharacterScale, setGenerateCharacterScale] = useState("3-4 个");
+    const [generating, setGenerating] = useState(false);
+    const [generationStatus, setGenerationStatus] = useState("");
+    const [generationPreview, setGenerationPreview] = useState("");
+    const generationAbortRef = useRef<AbortController | null>(null);
     const createOpen = searchParams.get("create") === "1";
     const setCreateOpen = (open: boolean) => {
         const next = new URLSearchParams(searchParams);
@@ -30,6 +52,75 @@ export default function ProjectsPage() {
         else next.delete("create");
         setSearchParams(next, { replace: true });
     };
+    const openCreate = (source: "blank" | "novel" | "text") => {
+        setCreateSource(source);
+        setCreateOpen(true);
+    };
+    useEffect(() => {
+        if (!createOpen) return;
+        createForm.setFieldsValue({
+            name: storyDraft.trim().slice(0, 24) || "",
+            sourceType: createSource,
+            aspectRatio: "9:16",
+        });
+    }, [createForm, createOpen, createSource, storyDraft]);
+
+    const generateStory = async () => {
+        const story = storyDraft.trim();
+        if (!story || generating) return;
+        const textModel = generateModel || effectiveConfig.textModel;
+        if (!textModel || !effectiveConfig.textModels.includes(textModel)) {
+            if (!textModel) {
+                modal.warning({
+                    title: "需要先选择文本模型",
+                    content: "请在上方“AI 模型”中选择一个已配置的文本模型，或先到设置中完成模型渠道配置。",
+                    okText: "去设置",
+                    cancelText: "取消",
+                    onOk: () => navigate(settingsPath("models")),
+                });
+            } else {
+                message.error(`模型 ${textModel} 未在文本模型列表中，请重新选择`);
+            }
+            return;
+        }
+        setGenerating(true);
+        setGenerationStatus("正在创建项目…");
+        setGenerationPreview("");
+        const controller = new AbortController();
+        generationAbortRef.current = controller;
+        try {
+            const project = await createUniqueProjectName(story, selectedStyle);
+            setGenerationStatus("AI 正在生成故事大纲与章节…");
+            const answer = await requestImageQuestion(
+                { ...effectiveConfig, model: textModel, imageModel: textModel, videoModel: textModel, textModel },
+                [
+                    { role: "system", content: `你是短剧编剧。根据用户的一句话故事，生成一部短剧的标题、一句话简介和 ${generateChapterCount} 个章节。生成要求：叙事采用${generateStructure}结构，每章约 ${generateWordCount} 字，使用${generatePerspective}视角，整体基调${generateTone}，主要角色约 ${generateCharacterScale}，章节篇幅${generateChapterLength}。只输出一个 JSON 对象，不要输出 markdown 代码块或其他文字。JSON 结构：{"title":"剧名","synopsis":"一句话简介","chapters":[{"title":"章节标题","content":"本章情节"}]}` },
+                    { role: "user", content: story },
+                ],
+                (text) => {
+                    setGenerationPreview(text);
+                },
+                { signal: controller.signal },
+            );
+            const parsed = parseGeneratedStory(answer);
+            if (!parsed.chapters.length) throw new Error("AI 没有返回有效的章节内容，请重试");
+            setGenerationStatus(`正在导入 ${parsed.chapters.length} 个章节…`);
+            await importProjectUnits(project.project.id, parsed.chapters.map((chapter: { title: string; content: string }) => ({ kind: "chapter", title: chapter.title, sourceText: chapter.content })));
+            await queryClient.invalidateQueries({ queryKey: ["projects"] });
+            navigate(`/projects/${project.project.id}/overview`);
+        } catch (error) {
+            if (controller.signal.aborted) {
+                message.info("已停止生成");
+            } else {
+                message.error(error instanceof Error ? error.message : "AI 生成失败，请重试");
+            }
+        } finally {
+            generationAbortRef.current = null;
+            setGenerating(false);
+            setGenerationStatus("");
+            setGenerationPreview("");
+        }
+    };
     const query = useQuery({ queryKey: ["projects"], queryFn: listProjects });
     const mutation = useMutation({
         mutationFn: createProject,
@@ -40,6 +131,24 @@ export default function ProjectsPage() {
         },
         onError: (error) => message.error(error instanceof Error ? error.message : "项目创建失败"),
     });
+    const deleteMutation = useMutation({
+        mutationFn: deleteProject,
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ["projects"] });
+            message.success("项目已删除");
+        },
+        onError: (error) => message.error(error instanceof Error ? error.message : "项目删除失败"),
+    });
+    const confirmDeleteProject = (projectId: string, name: string) => {
+        modal.confirm({
+            title: "删除项目",
+            content: `确定删除「${name}」吗？项目内的章节、画布与资产将一并删除，此操作不可撤销。`,
+            okText: "删除",
+            okButtonProps: { danger: true, loading: deleteMutation.isPending },
+            cancelText: "取消",
+            onOk: () => deleteMutation.mutate(projectId),
+        });
+    };
     const rows = useMemo(() => {
         const normalizedKeyword = keyword.trim().toLowerCase();
         return [...(query.data?.projects || [])]
@@ -51,17 +160,66 @@ export default function ProjectsPage() {
                 return right.project.updatedAt.localeCompare(left.project.updatedAt);
             });
     }, [keyword, query.data, sort, status]);
-    const canCreateProject = !keyword.trim() && status === "all";
-
     return (
         <WorkspacePage className="library-page" grid>
-            <PageHeader
-                icon="projects"
-                title="短剧创作"
-                description="按时间浏览故事项目，继续最近的章节、画布与镜头。"
-                meta={<span className="text-xs text-foreground/45">{rows.length} 个</span>}
-                actions={null}
-            />
+            <div className="studio-band">
+                <PageHeader
+                    title="短剧创作"
+                    description="从故事出发，推进章节、画布与镜头。"
+                    meta={<span className="app-projects-header-meta">{rows.length} 个</span>}
+                    actions={null}
+                />
+            </div>
+            <section className="app-story-create-panel mt-4" aria-label="开始一部新短剧">
+                <div className="app-story-create-head">
+                    <div className="app-story-create-title">
+                        <span className="app-story-create-mark"><Sparkles className="size-4" /></span>
+                        <div>
+                            <h2>开始一部新短剧</h2>
+                            <p>写下一句话故事，或选择一个创建方式。</p>
+                        </div>
+                    </div>
+                    <div className="app-story-create-actions">
+                        <button type="button" className="app-story-create-shortcut" onClick={() => openCreate("blank")}><FolderKanban className="size-4" />空白项目</button>
+                        <button type="button" className="app-story-create-shortcut" onClick={() => openCreate("novel")}><FileText className="size-4" />导入小说</button>
+                        <button type="button" className="app-story-create-shortcut" onClick={() => setStylePickerOpen(true)}><Palette className="size-4" />{selectedStyle ? "更换画风" : "选画风"}</button>
+                        <ModelPicker
+                            config={effectiveConfig}
+                            value={generateModel || effectiveConfig.textModel}
+                            onChange={setGenerateModel}
+                            capability="text"
+                            variant="creation"
+                            placeholder="选择文本模型"
+                            showSelectedPrice={false}
+                        />
+                        <Button type="default" icon={<Sparkles className="size-3.5" />} disabled={!storyDraft.trim() || generating} loading={generating} onClick={() => void generateStory()}>AI 生成章节</Button>
+                        <Button type="primary" icon={<Plus className="size-3.5" />} onClick={() => openCreate(createSource)}>开始创作</Button>
+                    </div>
+                </div>
+                <div className="app-story-create-main">
+                    <Input.TextArea
+                        className="app-story-create-input"
+                        value={storyDraft}
+                        onChange={(event) => setStoryDraft(event.target.value)}
+                        placeholder="例如：一个失忆的快递员，每天收到十年前寄出的信件……"
+                        autoSize={{ minRows: 1, maxRows: 3 }}
+                        aria-label="一句话故事"
+                    />
+                    {selectedStyle ? <button type="button" className="app-story-create-style-chip" onClick={() => setStylePickerOpen(true)} title={selectedStyle.title}>
+                        <img src={selectedStyle.imageUrl} alt="" />
+                        <span>{selectedStyle.title}</span>
+                    </button> : null}
+                </div>
+                <div className="app-story-create-controls">
+                    <label><span>章节数量</span><Select size="small" className="min-w-28" value={generateChapterCount} onChange={setGenerateChapterCount} options={[{ label: "3 章", value: "3" }, { label: "5 章", value: "5" }, { label: "8 章", value: "8" }, { label: "10 章", value: "10" }]} /></label>
+                    <label><span>叙事结构</span><Select size="small" className="min-w-32" value={generateStructure} onChange={setGenerateStructure} options={[{ label: "单线推进", value: "单线推进" }, { label: "双线并行", value: "双线并行" }, { label: "群像多线", value: "群像多线" }, { label: "反转嵌套", value: "反转嵌套" }]} /></label>
+                    <label><span>章节篇幅</span><Select size="small" className="min-w-28" value={generateChapterLength} onChange={setGenerateChapterLength} options={[{ label: "精炼", value: "短" }, { label: "均衡", value: "中" }, { label: "丰满", value: "长" }]} /></label>
+                    <label><span>单章字数</span><Select size="small" className="min-w-28" value={generateWordCount} onChange={setGenerateWordCount} options={[{ label: "500 字", value: "500" }, { label: "800 字", value: "800" }, { label: "1200 字", value: "1200" }, { label: "2000 字", value: "2000" }]} /></label>
+                    <label><span>叙述视角</span><Select size="small" className="min-w-28" value={generatePerspective} onChange={setGeneratePerspective} options={[{ label: "第三人称", value: "第三人称" }, { label: "第一人称", value: "第一人称" }, { label: "多视角", value: "多视角" }]} /></label>
+                    <label><span>故事基调</span><Select size="small" className="min-w-32" value={generateTone} onChange={setGenerateTone} options={[{ label: "平稳叙事", value: "平稳叙事" }, { label: "轻松喜剧", value: "轻松喜剧" }, { label: "紧张悬疑", value: "紧张悬疑" }, { label: "热血成长", value: "热血成长" }, { label: "甜宠治愈", value: "甜宠治愈" }]} /></label>
+                    <label><span>角色规模</span><Select size="small" className="min-w-28" value={generateCharacterScale} onChange={setGenerateCharacterScale} options={[{ label: "2 个", value: "2 个" }, { label: "3-4 个", value: "3-4 个" }, { label: "5-6 个", value: "5-6 个" }]} /></label>
+                </div>
+            </section>
             <ListToolbar className="library-toolbar" active={Boolean(keyword || status !== "all" || sort !== "updated")} onReset={() => { setKeyword(""); setStatus("all"); setSort("updated"); }}>
                 <Input allowClear className="app-list-search" prefix={<Search className="size-4 text-foreground/40" />} value={keyword} placeholder="搜索项目、简介或画风" onChange={(event) => setKeyword(event.target.value)} />
                 <Select className="w-32" value={status} onChange={setStatus} options={[{ label: "全部状态", value: "all" }, { label: "进行中", value: "active" }, { label: "已归档", value: "archived" }]} />
@@ -70,14 +228,9 @@ export default function ProjectsPage() {
 
             {query.isError ? <WorkspaceErrorState description={query.error instanceof Error ? query.error.message : "项目列表加载失败"} onRetry={() => void query.refetch()} /> : null}
             {query.isLoading ? <WorkspaceLoadingState label="正在整理项目" detail="读取章节、画布与资产进度" /> : null}
-            {!query.isLoading && !query.isError && (rows.length || canCreateProject) ? (
+            {!query.isLoading && !query.isError && rows.length ? (
                 <CollectionGrid className="library-grid project-library-grid">
-                    {canCreateProject ? <button type="button" className="library-create-card" onClick={() => setCreateOpen(true)}>
-                        <span className="library-create-cover"><Plus className="size-8" /></span>
-                        <span className="library-create-title">创建短剧项目</span>
-                        <span className="library-create-meta">从故事、小说或空白开始</span>
-                    </button> : null}
-                    {rows.map((row) => <ProjectRow key={row.project.id} row={row} />)}
+                    {rows.map((row) => <ProjectRow key={row.project.id} row={row} onDelete={() => confirmDeleteProject(row.project.id, row.project.name)} />)}
                 </CollectionGrid>
             ) : null}
             {!query.isLoading && !rows.length && !query.isError && (keyword || status !== "all") ? (
@@ -90,27 +243,151 @@ export default function ProjectsPage() {
             ) : null}
 
             <Modal className="library-modal" title="创建短剧项目" open={createOpen} footer={null} destroyOnHidden onCancel={() => setCreateOpen(false)} width={560} styles={{ body: { paddingTop: 12 } }}>
-                <Form<ProjectForm> layout="vertical" initialValues={{ aspectRatio: "9:16", sourceType: "blank" }} onFinish={(values) => mutation.mutate({ ...values, type: "short-drama" })}>
+                <Form<ProjectForm> form={createForm} layout="vertical" initialValues={{ aspectRatio: "9:16", sourceType: "blank" }} onFinish={(values) => mutation.mutate({ ...values, type: "short-drama", ...(selectedStyle ? { stylePresetId: selectedStyle.id, styleProfileJson: serializeStyleProfile(selectedStyle.profile || createStyleProfileSnapshot(selectedStyle)) } : {}) })}>
+                    <div className="mb-4 grid grid-cols-3 gap-2">
+                        <button type="button" className={createSource === "blank" ? "app-story-source is-active" : "app-story-source"} onClick={() => { setCreateSource("blank"); createForm.setFieldValue("sourceType", "blank"); }}><FolderKanban className="size-4" /><span>空白开始</span></button>
+                        <button type="button" className={createSource === "novel" ? "app-story-source is-active" : "app-story-source"} onClick={() => { setCreateSource("novel"); createForm.setFieldValue("sourceType", "novel"); }}><FileText className="size-4" /><span>导入小说</span></button>
+                        <button type="button" className={createSource === "text" ? "app-story-source is-active" : "app-story-source"} onClick={() => { setCreateSource("text"); createForm.setFieldValue("sourceType", "text"); }}><BookOpenText className="size-4" /><span>粘贴文本</span></button>
+                    </div>
                     <Form.Item name="name" label="项目名称" rules={[{ required: true, whitespace: true, message: "请输入项目名称" }]}><Input autoFocus placeholder="例如：长安夜行" /></Form.Item>
                     <div className="grid grid-cols-2 gap-3">
                         <Form.Item name="aspectRatio" label="默认画幅"><Select options={[{ label: "9:16 竖屏", value: "9:16" }, { label: "16:9 横屏", value: "16:9" }, { label: "1:1 方形", value: "1:1" }]} /></Form.Item>
                         <Form.Item name="sourceType" label="内容来源"><Select options={[{ label: "空白开始", value: "blank" }, { label: "导入小说", value: "novel" }, { label: "粘贴文本", value: "text" }]} /></Form.Item>
                     </div>
+                    <Form.Item label="项目画风"><button type="button" className="app-story-modal-style" onClick={() => setStylePickerOpen(true)}>{selectedStyle ? <><img src={selectedStyle.imageUrl} alt="" /><span>{selectedStyle.title}</span><em>更换</em></> : <><Palette className="size-4" /><span>选择项目画风（可选）</span></>}</button></Form.Item>
                     <p className="-mt-1 mb-5 text-xs leading-5 text-foreground/48">创建后先进入项目概览。章节、画风和参考资产可以逐步补充。</p>
                     <div className="flex justify-end gap-2"><Button onClick={() => setCreateOpen(false)}>取消</Button><Button type="primary" htmlType="submit" loading={mutation.isPending}>创建项目</Button></div>
                 </Form>
             </Modal>
+            <CanvasStylePickerModal
+                open={stylePickerOpen}
+                value={selectedStyle?.id}
+                onClose={() => setStylePickerOpen(false)}
+                onSelect={(preset) => { setSelectedStyle(preset); setStylePickerOpen(false); }}
+            />
+            <Modal className="library-modal" title="AI 生成章节" open={generating} footer={null} closable={false} maskClosable={false} keyboard={false} width={760}>
+                <div className="app-story-generating">
+                    <div className="app-story-generating-head">
+                        <span className="app-story-generating-mark"><Sparkles className="size-4" /></span>
+                        <div className="min-w-0">
+                            <p>AI 正在创作</p>
+                            <span className="block text-[var(--fs-tiny)] text-foreground/45">正在生成剧名、简介与章节</span>
+                        </div>
+                        {generateModel || effectiveConfig.textModel ? <span className="app-story-generating-model">{modelDisplayName(effectiveConfig, generateModel || effectiveConfig.textModel)}</span> : null}
+                    </div>
+                    <div className="app-story-generating-progress" aria-hidden="true" />
+                    <div className="app-story-generating-grid">
+                        <div className="app-story-generating-story">
+                            <span className="app-story-generating-caption">故事起点</span>
+                            <p>{storyDraft.trim() || "等待故事输入"}</p>
+                            <span className="app-story-generating-meta">{generateChapterCount} 章 · 每章约 {generateWordCount} 字 · {generateStructure} · {generatePerspective}</span>
+                            {selectedStyle ? <span className="app-story-generating-style"><img src={selectedStyle.imageUrl} alt="" /><span>{selectedStyle.title}</span></span> : null}
+                        </div>
+                        <ol className="app-story-generating-steps">
+                            {generationSteps.map((step) => {
+                                const state = generationStatus.startsWith(step.label) ? "is-active" : generationStepDone(step.label, generationStatus) ? "is-done" : "";
+                                return <li key={step.label} className={state}><span className="app-story-generating-step-dot" /><span>{step.label}</span><em>{state === "is-active" ? "进行中" : state === "is-done" ? "完成" : "等待"}</em></li>;
+                            })}
+                        </ol>
+                    </div>
+                    <div className="app-story-generating-preview">
+                        <div className="app-story-generating-preview-head"><span>实时草稿</span><span className="app-story-generating-live" /><em>{generationPreview ? "正在输出" : "等待模型输出"}</em></div>
+                        <pre>{generationPreview}</pre>
+                    </div>
+                    <div className="app-story-generating-actions"><Button onClick={() => generationAbortRef.current?.abort()}>停止</Button></div>
+                </div>
+            </Modal>
         </WorkspacePage>
     );
 }
 
-function ProjectRow({ row }: { row: ProjectSummary }) {
+function parseGeneratedStory(answer: string) {
+    const cleaned = answer
+        .replace(/```json/gi, "")
+        .replace(/```/g, "")
+        .trim();
+    const match = cleaned.match(/\{[\s\S]*\}/);
+    const payload = match ? JSON.parse(match[0]) : {};
+    const title = String(payload.title || "").trim();
+    const synopsis = String(payload.synopsis || "").trim();
+    const chapters = Array.isArray(payload.chapters)
+        ? payload.chapters
+            .map((chapter: unknown) => {
+                const item = typeof chapter === "object" && chapter ? chapter as Record<string, unknown> : {};
+                return { title: String(item.title || "").trim(), content: String(item.content || "").trim() };
+            })
+            .filter((chapter: { title: string; content: string }) => chapter.title && chapter.content)
+        : [];
+    return { title: title || storyTitleFromAnswer(answer), synopsis, chapters };
+}
+
+async function createUniqueProjectName(story: string, selectedStyle: CanvasStylePreset | null) {
+    const base = story.trim().slice(0, 24);
+    const buildInput = (name: string) => ({
+        name,
+        type: "short-drama" as const,
+        aspectRatio: "9:16",
+        sourceType: "blank",
+        description: story.trim(),
+        ...(selectedStyle ? { stylePresetId: selectedStyle.id, styleProfileJson: serializeStyleProfile(selectedStyle.profile || createStyleProfileSnapshot(selectedStyle)) } : {}),
+    });
+    let attempt = 0;
+    for (;;) {
+        try {
+            return await createProject(buildInput(attempt === 0 ? base : `${base}（${attempt + 1}）`));
+        } catch (error) {
+            const message = error instanceof Error ? error.message : "";
+            const uniqueConflict = message.includes("UNIQUE") || message.includes("projects.user_id") || message.includes("projects.name");
+            if (!uniqueConflict || attempt >= 5) throw error;
+            attempt += 1;
+        }
+    }
+}
+
+function storyTitleFromAnswer(answer: string) {
+    const line = answer.split(/\r?\n/).find((item) => item.trim());
+    return line ? line.trim().slice(0, 24) : "AI 生成短剧";
+}
+
+const generationSteps = [
+    { label: "正在创建项目" },
+    { label: "AI 正在生成故事大纲与章节" },
+    { label: "正在导入章节" },
+];
+
+function generationStepDone(label: string, status: string) {
+    if (label === "正在创建项目") return status.startsWith("AI 正在生成") || status.startsWith("正在导入");
+    if (label === "AI 正在生成故事大纲与章节") return status.startsWith("正在导入");
+    return false;
+}
+
+function ProjectRow({ row, onDelete }: { row: ProjectSummary; onDelete: () => void }) {
     const completion = projectSummaryCompletion(row);
     const stage = projectSummaryStage(row);
-    const styleTitle = parseStyleProfile(row.project.styleProfileJson)?.title || resolveCanvasStylePreset(row.project.stylePresetId)?.title || (row.project.stylePresetId ? "自定义画风" : "未设置画风");
+    const projectStyle = resolveProjectCanvasStyle(row.project.stylePresetId, row.project.styleProfileJson);
+    const styleTitle = projectStyle?.title || parseStyleProfile(row.project.styleProfileJson)?.title || resolveCanvasStylePreset(row.project.stylePresetId)?.title || (row.project.stylePresetId ? "自定义画风" : "未设置画风");
+    const coverUrl = projectStyle?.imageUrl;
     return (
         <Link to={`/projects/${row.project.id}/overview`} className="library-card project-library-card group">
-            <span className="project-library-cover"><span className="project-library-cover-icon"><FolderKanban className="size-7" /></span><span className="project-library-cover-ratio">{row.project.aspectRatio}</span><span className="project-library-cover-stage">{stage.label}</span></span>
+            <span className="project-library-cover">
+                {coverUrl ? <img className="project-library-cover-art" src={coverUrl} alt="" /> : <span className="project-library-cover-icon"><FolderKanban className="size-7" /></span>}
+                <span className="project-library-cover-scrim" />
+                <span className="project-library-cover-ratio">{row.project.aspectRatio}</span>
+                <span className="project-library-cover-stage">{stage.label}</span>
+                <button
+                    type="button"
+                    className="project-library-cover-delete"
+                    title="删除项目"
+                    aria-label={`删除项目 ${row.project.name}`}
+                    onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onDelete();
+                    }}
+                >
+                    <Trash2 className="size-3.5" />
+                </button>
+            </span>
             <span className="project-library-body">
                 <span className="project-library-heading"><strong title={row.project.name}>{row.project.name}</strong>{row.project.status === "archived" ? <em>已归档</em> : null}<ArrowRight className="project-library-arrow size-4" /></span>
                 <span className="project-library-subtitle">{styleTitle} · {sourceTypeLabel(row.project.sourceType)}</span>
diff --git a/web/src/pages/settings/index.tsx b/web/src/pages/settings/index.tsx
index 95c068c50..812d747be 100644
--- a/web/src/pages/settings/index.tsx
+++ b/web/src/pages/settings/index.tsx
@@ -1,11 +1,10 @@
 import { App, Button, Form, Input, InputNumber, Popconfirm, Segmented, Select, Tag, Tooltip } from "antd";
-import { ArrowLeft, Boxes, ChevronDown, ChevronUp, CircleCheck, Cloud, Info, MessageSquareText, Plus, RadioTower, RefreshCw, SlidersHorizontal, Trash2 } from "lucide-react";
+import { ArrowLeft, Boxes, ChevronDown, ChevronUp, CircleCheck, Cloud, MessageSquareText, Plus, RadioTower, RefreshCw, SlidersHorizontal, Trash2 } from "lucide-react";
 import { useEffect, useState, type ReactNode } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 
 import { UserOSSSettingsForm } from "@/components/layout/user-oss-settings-form";
 import { WorkspaceState } from "@/components/layout/workspace-state";
-import { WorkspaceSignalIcon } from "@/components/ui/aceternity/workspace-signal-icon";
 import { ChannelHeadersEditor, validateChannelHeaders } from "@/components/channel-headers-editor";
 import { refreshSystemChannels } from "@/lib/user-session";
 import { fetchChannelModels, type ChannelModelCatalogItem } from "@/services/api/image";
@@ -249,30 +248,26 @@ export default function SettingsPage() {
     };
 
     return (
-        <main className="app-workspace-page flex h-full min-h-0 flex-col text-foreground">
-            <header className="flex min-h-16 shrink-0 items-center justify-between gap-4 border-b border-border/70 px-4 py-3 sm:px-5">
-                <div className="flex min-w-0 items-center gap-3">
+        <main className="settings-page app-workspace-page flex h-full min-h-0 flex-col text-foreground">
+            <header className="settings-topbar shrink-0">
+                <div className="flex min-w-0 items-center gap-2.5">
                     {shouldPromptContinue ? (
                         <button type="button" className="app-workspace-icon-button shrink-0" onClick={() => navigate(-1)} aria-label="返回创作页面" title="返回创作页面"><ArrowLeft className="size-4" /></button>
                     ) : null}
-                    <WorkspaceSignalIcon variant="settings" />
-                    <div className="min-w-0">
-                        <h1 className="truncate text-base font-semibold">配置与用户偏好</h1>
-                        <p className="mt-0.5 truncate text-xs text-foreground/50">模型连接、生成默认值与个人媒体存储</p>
-                    </div>
+                    <h1 className="truncate text-sm font-semibold">设置</h1>
                 </div>
-                {shouldPromptContinue ? <Button type="primary" onClick={finishConfig}>保存并返回创作</Button> : null}
+                {shouldPromptContinue ? <Button type="primary" size="small" onClick={finishConfig}>保存并返回</Button> : null}
             </header>
-            <div className="flex min-h-0 flex-1 flex-col md:flex-row">
-                <aside className="w-full shrink-0 border-b border-border/70 bg-transparent p-2 md:w-[224px] md:border-b-0 md:border-r md:p-3">
-                    <nav className="thin-scrollbar flex gap-1 overflow-x-auto md:block md:space-y-1" aria-label="配置分类">
+            <div className="settings-library-frame flex min-h-0 flex-1 flex-col md:flex-row">
+                <aside className="settings-nav-panel w-full shrink-0 md:w-[200px]">
+                    <nav className="thin-scrollbar flex gap-1 overflow-x-auto p-2 md:block md:space-y-1 md:p-2.5" aria-label="配置分类">
                         {configSections.map((item) => {
                             const selected = item.key === activeTab;
                             return (
                                 <button
                                     key={item.key}
                                     type="button"
-                                    className={`flex h-9 shrink-0 items-center gap-2 rounded-md px-3 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:h-auto md:w-full md:items-start md:gap-3 md:py-2.5 ${selected ? "bg-[var(--workspace-accent-soft)] text-foreground" : "text-foreground/58 hover:bg-muted/55 hover:text-foreground"}`}
+                                    className={`settings-nav-item flex h-9 shrink-0 items-center gap-2 rounded-md px-3 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:h-auto md:w-full md:items-start md:gap-3 md:py-2.5 ${selected ? "is-active" : "text-foreground/58 hover:bg-muted/55 hover:text-foreground"}`}
                                     onClick={() => selectSection(item.key)}
                                     aria-current={selected ? "page" : undefined}
                                 >
@@ -284,9 +279,9 @@ export default function SettingsPage() {
                     </nav>
                 </aside>
 
-                <section className="flex min-h-0 min-w-0 flex-1 flex-col bg-transparent">
+                <section className="settings-content flex min-h-0 min-w-0 flex-1 flex-col">
                     <div className="app-workspace-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 md:px-6 md:py-5">
-                        <div className={activeTab === "prompts" ? "h-full w-full" : "mx-auto w-full max-w-none"}>
+                        <div className={`settings-surface-card ${activeTab === "prompts" ? "h-full w-full" : "mx-auto w-full max-w-none"}`}>
                     {([
                     {
                         key: "channels",
@@ -294,15 +289,10 @@ export default function SettingsPage() {
                         children: (
                             <SettingsPane>
                                 <Form layout="vertical" requiredMark={false}>
-                                    <div className="mb-4 flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
-                                        <div className="min-w-0 flex-1">
-                                            <div className="flex w-fit max-w-full flex-wrap items-center gap-1.5 text-xs text-foreground/65">
-                                                <Info className="size-3.5 shrink-0" />
-                                                <span>渠道只保存连接类型；拉取模型后，请在每个模型下配置能力与请求协议。</span>
-                                                <Button type="link" size="small" className="h-auto p-0 text-xs font-semibold" onClick={() => selectSection("models")}>
-                                                    打开模型选择
-                                                </Button>
-                                            </div>
+                                    <div className="settings-pane-header">
+                                        <div className="min-w-0">
+                                            <h2>自定义渠道</h2>
+                                            <p>渠道只保存连接类型；拉取模型后，请在“模型与能力”中配置协议。<Button type="link" size="small" className="h-auto p-0 text-xs font-semibold" onClick={() => selectSection("models")}>打开模型选择</Button></p>
                                         </div>
                                         <div className="flex w-full gap-2 sm:w-auto sm:shrink-0">
                                             <Button
@@ -320,7 +310,7 @@ export default function SettingsPage() {
                                         </div>
                                     </div>
                                     {userChannels.length ? (
-                                        <div className="space-y-2">
+                                        <div className="settings-channel-list space-y-2">
                                             {userChannels.map((channel) => (
                                                 <section key={channel.id} aria-labelledby={`channel-${channel.id}-title`} className="rounded-md border border-border bg-background p-2.5 sm:p-3">
                                                     <div className="mb-2.5 flex flex-wrap items-start justify-between gap-2.5">
@@ -371,6 +361,7 @@ export default function SettingsPage() {
                                                     </div>
                                                     <div id={`channel-${channel.id}-details`} hidden={collapsedChannelIds.has(channel.id)}>
                                                     <div className="grid gap-x-3 gap-y-2 lg:grid-cols-12">
+                                                        <div className="settings-field-group-label lg:col-span-12">连接信息</div>
                                                         <Form.Item label="渠道名称" htmlFor={`channel-${channel.id}-name`} className="mb-0 lg:col-span-3">
                                                             <Input
                                                                 id={`channel-${channel.id}-name`}
@@ -418,6 +409,7 @@ export default function SettingsPage() {
                                                                 onBlur={(event) => updateChannel(channel.id, { secretKey: event.target.value.trim() })}
                                                             />
                                                         </Form.Item>
+                                                        <div className="settings-field-group-label lg:col-span-12">模型与能力</div>
                                                         <Form.Item label="模型列表" htmlFor={`channel-${channel.id}-models`} className="mb-0 lg:col-span-7">
                                                             <Select
                                                                 id={`channel-${channel.id}-models`}
@@ -458,7 +450,15 @@ export default function SettingsPage() {
                         label: "模型",
                         children: (
                             <SettingsPane>
-                                <ModelDefaultGrid config={config} onChange={(key, model) => updateConfig(key, model)} />
+                                <div className="settings-pane-header">
+                                    <div className="min-w-0">
+                                        <h2>模型选择</h2>
+                                        <p>按领域选择默认模型；模型能力与请求协议在渠道“模型与能力”中配置。</p>
+                                    </div>
+                                </div>
+                                <div className="settings-section-card">
+                                    <ModelDefaultGrid config={config} onChange={(key, model) => updateConfig(key, model)} />
+                                </div>
                             </SettingsPane>
                         ),
                     },
@@ -467,6 +467,13 @@ export default function SettingsPage() {
                         label: "生成偏好",
                         children: (
                             <SettingsPane>
+                                <div className="settings-pane-header">
+                                    <div className="min-w-0">
+                                        <h2>生成偏好</h2>
+                                        <p>画布、视频与音频默认值，节点内仍可单独覆盖。</p>
+                                    </div>
+                                </div>
+                                <div className="settings-section-card">
                                 <Form layout="vertical" requiredMark={false}>
                                     <section className="border-b border-border pb-6">
                                         <div className="mb-4"><h3 className="text-sm font-semibold">画布生成</h3><p className="mt-1 text-xs text-foreground/55">设置新建生成任务时使用的初始值，节点内仍可单独覆盖。</p></div>
@@ -514,6 +521,7 @@ export default function SettingsPage() {
                                         </div>
                                     </section>
                                 </Form>
+                                </div>
                             </SettingsPane>
                         ),
                     },
@@ -532,7 +540,9 @@ export default function SettingsPage() {
                         ),
                         children: (
                             <SettingsPane>
-                                <UserOSSSettingsForm />
+                                <div className="settings-section-card">
+                                    <UserOSSSettingsForm />
+                                </div>
                             </SettingsPane>
                         ),
                     },
diff --git a/web/src/pages/skills/index.tsx b/web/src/pages/skills/index.tsx
index b157ea897..0cc7594d4 100644
--- a/web/src/pages/skills/index.tsx
+++ b/web/src/pages/skills/index.tsx
@@ -163,7 +163,9 @@ export default function SkillsPage() {
     return (
         <>
             <WorkspacePage className="library-page skills-library-page" grid>
-                <PageHeader icon="skills" title="技能库" description="把常用的提示词、角色设定和创作方法收进自己的工具架。" meta={<span className="text-xs text-foreground/45">{total} 个技能</span>} actions={null} />
+                <div className="studio-band">
+                    <PageHeader title="技能库" description="把常用的提示词、角色设定和创作方法收进自己的工具架。" meta={<span className="text-xs text-foreground/45">{total} 个技能</span>} actions={null} />
+                </div>
 
                 <div className="mt-1 flex flex-col border-b border-border/75 xl:flex-row xl:items-end xl:justify-between">
                     <nav className="thin-scrollbar -mb-px flex min-w-0 overflow-x-auto" aria-label="技能库范围" role="tablist">
diff --git a/web/src/pages/skills/skill-detail-drawer.tsx b/web/src/pages/skills/skill-detail-drawer.tsx
index cad2933c4..826cbac0b 100644
--- a/web/src/pages/skills/skill-detail-drawer.tsx
+++ b/web/src/pages/skills/skill-detail-drawer.tsx
@@ -26,7 +26,7 @@ export function SkillDetailDrawer({ skill, loading, mutating, categories, onClos
                     <section aria-labelledby="skill-instruction-title">
                         <div className="mb-2 flex items-center justify-between gap-3">
                             <h2 id="skill-instruction-title" className="text-sm font-semibold">技能指令</h2>
-                            {skill.markdown_url ? <Tooltip title="打开 Markdown 原文"><a className="inline-flex size-8 items-center justify-center rounded-md text-foreground/55 hover:bg-foreground/[.06] hover:text-foreground" href={skill.markdown_url} target="_blank" rel="noreferrer" aria-label="打开 Markdown 原文"><ExternalLink className="size-4" /></a></Tooltip> : null}
+                            {skill.markdown_url ? <Tooltip title="打开 Markdown 原文"><a className="inline-flex size-8 items-center justify-center rounded-md text-foreground/55 hover:bg-surface-hover hover:text-foreground" href={skill.markdown_url} target="_blank" rel="noreferrer" aria-label="打开 Markdown 原文"><ExternalLink className="size-4" /></a></Tooltip> : null}
                         </div>
                         {loading ? <Skeleton active paragraph={{ rows: 14 }} /> : <pre className="thin-scrollbar max-h-[52vh] overflow-auto whitespace-pre-wrap break-words rounded-md border border-border/70 bg-foreground/[.025] p-4 font-mono text-xs leading-6 text-foreground/78">{skill.instruction || "暂无技能指令"}</pre>}
                     </section>
diff --git a/web/src/pages/tasks/index.tsx b/web/src/pages/tasks/index.tsx
index cb0f927ac..3042831d0 100644
--- a/web/src/pages/tasks/index.tsx
+++ b/web/src/pages/tasks/index.tsx
@@ -1,5 +1,5 @@
-import { App, Button, Drawer, Form, Input, Modal, Segmented, Select, Tooltip, Typography } from "antd";
-import { Coins, Eye, FileText, FolderKanban, Image as ImageIcon, Play, Plus, RefreshCw, RotateCcw, Search, Video, X } from "lucide-react";
+import { App, Button, Drawer, Form, Input, Modal, Segmented, Select, Switch, Tooltip, Typography } from "antd";
+import { LayoutGrid, List, Plus, RefreshCw, Search } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useSearchParams } from "react-router";
 
@@ -9,16 +9,42 @@ import { CONTENT_MODERATION_ERROR_CODE, generationErrorMessage, isContentModerat
 import { formatTaskKind, operationOptions, statusLabel } from "@/lib/generation-task-display";
 import { modelCapabilityConfigFor } from "@/lib/model-capabilities";
 
-import { cancelGenerationTask, createAgentSession, createGenerationTask, listGenerationTasks, listTaskLogs, queryFailedVideoProviderTask, queryGenerationTask, retryGenerationTask, type CreateTaskInput, type GenerationTask, type TaskLog, type TaskStatus } from "@/services/api/task-center";
+import { cancelGenerationTask, createAgentSession, createGenerationTask, listGenerationTasks, listTaskLogs, queryFailedVideoProviderTask, queryGenerationTask, retryGenerationTask, type CreateTaskInput, type GenerationTask, type TaskLog } from "@/services/api/task-center";
 import { syncGenerationTaskToCanvasStore } from "@/lib/canvas/canvas-generation-task-sync";
 import { useCanvasStore } from "@/stores/canvas/use-canvas-store";
-import { modelDisplayName, resolveModelRequestConfig, useConfigStore, useEffectiveConfig, type AiConfig } from "@/stores/use-config-store";
+import { resolveModelRequestConfig, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store";
 import { useUserStore } from "@/stores/use-user-store";
-import { formatCredits } from "@/constant/credits";
 import { listProjects, type ProjectSummary } from "@/services/api/projects";
+import { TaskGridCard } from "./task-grid-card";
+import { TaskGroupHeader, type TaskGroup } from "./task-group-header";
+import { TaskListRow } from "./task-list-row";
+import { formatModelName, getTaskCanvasContext, isTaskFailed, providerCancelStatusLabel, taskMediaKind } from "./task-shared";
+import { TaskStatPills, type TaskStatusFilter } from "./task-stat-pills";
 
-type TaskStatusFilter = "all" | "failed" | "active" | "succeeded";
 type TaskKindFilter = "all" | "text" | "image" | "video";
+type TaskViewMode = "list" | "grid";
+
+function preferenceKeys() {
+    const userId = useUserStore.getState().user?.id ?? "anon";
+    return { view: `task-center-view.${userId}`, group: `task-center-group.${userId}` };
+}
+
+function readTaskPreference(key: string, fallback: string): string {
+    try {
+        return window.localStorage.getItem(key) ?? fallback;
+    } catch (error) {
+        console.warn("读取任务中心偏好失败", error);
+        return fallback;
+    }
+}
+
+function writeTaskPreference(key: string, value: string): void {
+    try {
+        window.localStorage.setItem(key, value);
+    } catch (error) {
+        console.warn("保存任务中心偏好失败", error);
+    }
+}
 
 function taskStatusFilter(value: string | null): TaskStatusFilter {
     return value === "failed" || value === "active" || value === "succeeded" ? value : "all";
@@ -33,7 +59,7 @@ export default function TasksPage() {
     const shortDramaEnabled = useUserStore((state) => state.features.shortDramaEnabled);
     const creditsEnabled = useUserStore((state) => state.features.creditsEnabled);
     const [form] = Form.useForm<CreateTaskInput & { operation: string }>();
-    const [tasks, setTasks] = useState<GenerationTask[]>([]);
+    const { view: viewPreferenceKey, group: groupPreferenceKey } = preferenceKeys();
     const [domainProjects, setDomainProjects] = useState<ProjectSummary[]>([]);
     const [loading, setLoading] = useState(false);
     const [actingId, setActingId] = useState("");
@@ -51,14 +77,17 @@ export default function TasksPage() {
     const [modelFilter, setModelFilter] = useState("all");
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(20);
+    const [viewMode, setViewMode] = useState<TaskViewMode>(() => (readTaskPreference(viewPreferenceKey, "list") === "grid" ? "grid" : "list"));
+    const [groupEnabled, setGroupEnabled] = useState<boolean>(() => readTaskPreference(groupPreferenceKey, "0") === "1");
+    const [retryingGroup, setRetryingGroup] = useState("");
     const [detailTask, setDetailTask] = useState<GenerationTask | null>(null);
     const [detailLoading, setDetailLoading] = useState(false);
     const [taskLogs, setTaskLogs] = useState<TaskLog[]>([]);
     const [logsLoading, setLogsLoading] = useState(false);
     const [mediaPreview, setMediaPreview] = useState<{ url: string; kind: "image" | "video"; title: string } | null>(null);
+    const [tasks, setTasks] = useState<GenerationTask[]>([]);
     const syncedCanvasTaskIdsRef = useRef(new Set<string>());
     const tasksRef = useRef<GenerationTask[]>([]);
-
     const canvasById = useMemo(() => new Map(projects.map((project) => [project.id, project])), [projects]);
     const domainProjectNameById = useMemo(() => new Map(domainProjects.map((item) => [item.project.id, item.project.name])), [domainProjects]);
     const projectOptions = useMemo(() => projects.map((project) => {
@@ -81,6 +110,78 @@ export default function TasksPage() {
         return !query || `${task.prompt} ${task.model || ""} ${formatTaskKind(task)} ${context.canvasName} ${context.projectName}`.toLowerCase().includes(query);
     }), [canvasById, domainProjectNameById, effectiveConfig, keyword, kindFilter, modelFilter, projectFilter, statusFilter, tasks]);
     const visibleTasks = useMemo(() => filteredTasks.slice((page - 1) * pageSize, page * pageSize), [filteredTasks, page, pageSize]);
+    const taskStats = useMemo(() => {
+        let today = 0;
+        let active = 0;
+        let succeeded = 0;
+        let failed = 0;
+        const now = new Date();
+        for (const task of tasks) {
+            if (task.createdAt) {
+                const created = new Date(task.createdAt);
+                if (!Number.isNaN(created.getTime()) && created.getFullYear() === now.getFullYear() && created.getMonth() === now.getMonth() && created.getDate() === now.getDate()) today += 1;
+            }
+            if (task.status === "queued" || task.status === "running") active += 1;
+            else if (task.status === "succeeded") succeeded += 1;
+            else if (task.status === "failed" || task.status === "cancelled") failed += 1;
+        }
+        return { today, active, succeeded, failed };
+    }, [tasks]);
+    const groupingActive = viewMode === "list" && groupEnabled;
+    const visibleTaskGroups = useMemo(
+        () => (groupingActive ? groupTasksByCanvas(filteredTasks, canvasById, domainProjectNameById) : []),
+        [canvasById, domainProjectNameById, filteredTasks, groupingActive],
+    );
+
+    const changeViewMode = (mode: TaskViewMode) => {
+        setViewMode(mode);
+        writeTaskPreference(viewPreferenceKey, mode);
+    };
+
+    const changeGroupEnabled = (enabled: boolean) => {
+        setGroupEnabled(enabled);
+        writeTaskPreference(groupPreferenceKey, enabled ? "1" : "0");
+    };
+
+    const retryGroupTasks = async (key: string, items: GenerationTask[]) => {
+        const retryable = items.filter((task) => isTaskFailed(task) && task.errorCode !== CONTENT_MODERATION_ERROR_CODE && !isContentModerationError(task.error));
+        if (!retryable.length) return;
+        setRetryingGroup(key);
+        try {
+            for (const task of retryable) {
+                await runAction(task.id, "retry");
+            }
+        } finally {
+            setRetryingGroup("");
+        }
+    };
+
+    const renderTaskRow = (task: GenerationTask) => (
+        <TaskListRow
+            key={task.id}
+            task={task}
+            canvasById={canvasById}
+            projectNameById={domainProjectNameById}
+            effectiveConfig={effectiveConfig}
+            creditsEnabled={creditsEnabled}
+            actingId={actingId}
+            onOpen={() => void openTaskDetail(task)}
+            onRetry={() => void runAction(task.id, "retry")}
+            onCancel={() => void runAction(task.id, "cancel")}
+            onPreview={() => task.previewUrl && setMediaPreview({ url: task.previewUrl, kind: task.previewKind === "video" ? "video" : "image", title: task.prompt || formatTaskKind(task) })}
+        />
+    );
+
+    const renderTaskGridCard = (task: GenerationTask) => (
+        <TaskGridCard
+            key={task.id}
+            task={task}
+            actingId={actingId}
+            onOpen={() => void openTaskDetail(task)}
+            onRetry={() => void runAction(task.id, "retry")}
+            onCancel={() => void runAction(task.id, "cancel")}
+        />
+    );
 
     useEffect(() => {
         if (!shortDramaEnabled) {
@@ -284,40 +385,93 @@ export default function TasksPage() {
     return (
         <>
             <WorkspacePage grid className="library-page task-library-page">
-                <PageHeader
-                    icon="tasks"
-                    title="任务中心"
-                    meta={<span className="text-xs text-foreground/45">{filteredTasks.length} 个任务{loading ? " · 正在同步" : ""}</span>}
-                        actions={(
-                            <>
-                            <Button icon={<RefreshCw className={`size-3.5 ${loading ? "animate-spin" : ""}`} />} onClick={() => void loadTasks(true)}>刷新</Button>
-                            <Button className="library-primary-action" type="primary" icon={<Plus className="size-3.5" />} onClick={() => setCreateOpen(true)}>新建任务</Button>
-                            </>
-                        )}
-                />
-                <ListToolbar className="library-toolbar task-library-toolbar" active={Boolean(keyword || projectFilter !== "all" || kindFilter !== "all" || modelFilter !== "all" || statusFilter !== "all")} onReset={() => { setKeyword(""); setProjectFilter("all"); setKindFilter("all"); setModelFilter("all"); setStatusFilter("all"); setPage(1); }}>
-                    <Input id="task-search" name="taskSearch" allowClear className="app-list-search" prefix={<Search className="size-4 text-foreground/40" />} value={keyword} placeholder="搜索任务、模型或画布" onChange={(event) => { setKeyword(event.target.value); setPage(1); }} />
-                    <Select className="w-full sm:w-48" value={projectFilter} onChange={(value) => { setProjectFilter(value); setPage(1); }} options={[{ label: "全部画布", value: "all" }, ...projectOptions]} />
-                    <Select className="w-full sm:w-32" value={kindFilter} onChange={(value) => { setKindFilter(value as TaskKindFilter); setPage(1); }} options={[{ label: "全部类型", value: "all" }, { label: "文本", value: "text" }, { label: "图片", value: "image" }, { label: "视频", value: "video" }]} />
-                    <Select className="w-full sm:w-44" value={modelFilter} onChange={(value) => { setModelFilter(value); setPage(1); }} options={[{ label: "全部模型", value: "all" }, ...modelOptions.map((model) => ({ label: model, value: model }))]} />
-                    <Segmented
-                        size="small"
-                        value={statusFilter}
-                        onChange={(value) => { setStatusFilter(value as typeof statusFilter); setPage(1); }}
-                        options={[
-                            { label: "全部", value: "all" },
-                            { label: "待处理", value: "failed" },
-                            { label: "运行中", value: "active" },
-                            { label: "已完成", value: "succeeded" },
-                        ]}
+                <div className="studio-band">
+                    <PageHeader
+                        title="任务中心"
+                        description="跟踪生成任务的排队、进度与失败原因。"
+                        meta={<span className="app-projects-header-meta">{filteredTasks.length} 个任务{loading ? " · 同步中" : ""}</span>}
+                            actions={(
+                                <>
+                                <Button icon={<RefreshCw className={`size-3.5 ${loading ? "animate-spin" : ""}`} />} onClick={() => void loadTasks(true)}>刷新</Button>
+                                <Button className="library-primary-action" type="primary" icon={<Plus className="size-3.5" />} onClick={() => setCreateOpen(true)}>新建任务</Button>
+                                </>
+                            )}
                     />
-                </ListToolbar>
+                    <TaskStatPills stats={taskStats} statusFilter={statusFilter} onFilterChange={setStatusFilter} />
+                    <ListToolbar
+                        className="library-toolbar task-library-toolbar"
+                        active={Boolean(keyword || projectFilter !== "all" || kindFilter !== "all" || modelFilter !== "all" || statusFilter !== "all")}
+                        onReset={() => { setKeyword(""); setProjectFilter("all"); setKindFilter("all"); setModelFilter("all"); setStatusFilter("all"); setPage(1); }}
+                        trailing={(
+                            <div className="flex flex-wrap items-center gap-2.5">
+                                {viewMode === "list" ? (
+                                    <label className="inline-flex cursor-pointer items-center gap-2 text-xs text-foreground/55">
+                                        <Switch size="small" checked={groupEnabled} onChange={changeGroupEnabled} />
+                                        <span>按画布分组</span>
+                                    </label>
+                                ) : null}
+                                <div className="task-view-switch" role="group" aria-label="任务视图">
+                                    <Tooltip title="列表视图">
+                                        <Button type={viewMode === "list" ? "primary" : "text"} size="small" aria-label="列表视图" aria-pressed={viewMode === "list"} icon={<List className="size-3.5" />} onClick={() => changeViewMode("list")} />
+                                    </Tooltip>
+                                    <Tooltip title="网格视图">
+                                        <Button type={viewMode === "grid" ? "primary" : "text"} size="small" aria-label="网格视图" aria-pressed={viewMode === "grid"} icon={<LayoutGrid className="size-3.5" />} onClick={() => changeViewMode("grid")} />
+                                    </Tooltip>
+                                </div>
+                            </div>
+                        )}
+                    >
+                        <Input id="task-search" name="taskSearch" allowClear className="app-list-search" prefix={<Search className="size-4 text-foreground/40" />} value={keyword} placeholder="搜索任务、模型或画布" onChange={(event) => { setKeyword(event.target.value); setPage(1); }} />
+                        <Select className="w-full sm:w-48" value={projectFilter} onChange={(value) => { setProjectFilter(value); setPage(1); }} options={[{ label: "全部画布", value: "all" }, ...projectOptions]} />
+                        <Select className="w-full sm:w-32" value={kindFilter} onChange={(value) => { setKindFilter(value as TaskKindFilter); setPage(1); }} options={[{ label: "全部类型", value: "all" }, { label: "文本", value: "text" }, { label: "图片", value: "image" }, { label: "视频", value: "video" }]} />
+                        <Select className="w-full sm:w-44" value={modelFilter} onChange={(value) => { setModelFilter(value); setPage(1); }} options={[{ label: "全部模型", value: "all" }, ...modelOptions.map((model) => ({ label: model, value: model }))]} />
+                        <Segmented
+                            size="small"
+                            value={statusFilter}
+                            onChange={(value) => { setStatusFilter(value as typeof statusFilter); setPage(1); }}
+                            options={[
+                                { label: "全部", value: "all" },
+                                { label: "失败/取消", value: "failed" },
+                                { label: "运行中", value: "active" },
+                                { label: "已完成", value: "succeeded" },
+                            ]}
+                        />
+                    </ListToolbar>
+                </div>
 
-                {loading && !tasks.length ? <div className="library-loading-grid" aria-label="正在加载任务">{Array.from({ length: 8 }, (_, index) => <div key={index} className="library-skeleton" />)}</div> : null}
-                {!loading || tasks.length ? (
-                    visibleTasks.length ? <div className="task-record-list">{visibleTasks.map((task) => <TaskListRow key={task.id} task={task} canvasById={canvasById} projectNameById={domainProjectNameById} effectiveConfig={effectiveConfig} creditsEnabled={creditsEnabled} actingId={actingId} onOpen={() => void openTaskDetail(task)} onRetry={() => void runAction(task.id, "retry")} onCancel={() => void runAction(task.id, "cancel")} onPreview={() => task.previewUrl && setMediaPreview({ url: task.previewUrl, kind: task.previewKind === "video" ? "video" : "image", title: task.prompt || formatTaskKind(task) })} />)}</div> : <WorkspaceState compact title={taskEmptyState(statusFilter).title} description={taskEmptyState(statusFilter).description} />
-                ) : null}
-                <PaginationBar current={page} pageSize={pageSize} total={filteredTasks.length} pageSizeOptions={[20, 50, 100]} onChange={(nextPage, nextPageSize) => { setPage(nextPageSize !== pageSize ? 1 : nextPage); setPageSize(nextPageSize); }} />
+                <div className="canvas-library-frame task-library-frame">
+                    {loading && !tasks.length ? <div className="library-loading-grid" aria-label="正在加载任务">{Array.from({ length: 8 }, (_, index) => <div key={index} className="library-skeleton" />)}</div> : null}
+                    {!loading || tasks.length ? (
+                        visibleTasks.length ? (
+                            viewMode === "grid" ? (
+                                <div className="task-grid-view">
+                                    {visibleTasks.map(renderTaskGridCard)}
+                                </div>
+                            ) : groupingActive ? (
+                                <div className="task-group-list">
+                                    {visibleTaskGroups.map((group) => (
+                                        <section key={group.key} className="task-group">
+                                            <TaskGroupHeader group={group} retrying={retryingGroup === group.key} onRetryFailed={() => void retryGroupTasks(group.key, group.tasks)} />
+                                            <div className="task-record-list">
+                                                {group.tasks.map(renderTaskRow)}
+                                            </div>
+                                        </section>
+                                    ))}
+                                </div>
+                            ) : (
+                                <div className="task-record-list">{visibleTasks.map(renderTaskRow)}</div>
+                            )
+                        ) : (
+                            <WorkspaceState
+                                compact
+                                title={taskEmptyState(statusFilter).title}
+                                description={taskEmptyState(statusFilter).description}
+                                action={<Button className="library-primary-action" type="primary" icon={<Plus className="size-3.5" />} onClick={() => setCreateOpen(true)}>新建任务</Button>}
+                            />
+                        )
+                    ) : null}
+                    {!groupingActive ? <PaginationBar current={page} pageSize={pageSize} total={filteredTasks.length} pageSizeOptions={[20, 50, 100]} onChange={(nextPage, nextPageSize) => { setPage(nextPageSize !== pageSize ? 1 : nextPage); setPageSize(nextPageSize); }} /> : null}
+                </div>
             </WorkspacePage>
             <Modal className="library-modal" title="新建异步生成任务" open={createOpen} onCancel={() => setCreateOpen(false)} onOk={submitTask} confirmLoading={creating} okText="创建任务">
                 <Form form={form} layout="vertical" initialValues={{ operation: "agent_session" }}>
@@ -385,7 +539,7 @@ function canQueryProviderTask(task: GenerationTask) {
 }
 
 function reconcileTaskSummaries(current: GenerationTask[], next: GenerationTask[]) {
-    if (current.length !== next.length) return next;
+    if (current.length === 0) return next;
     const currentById = new Map(current.map((task) => [task.id, task]));
     let changed = false;
     const reconciled = next.map((task) => {
@@ -412,44 +566,6 @@ function TaskResultMedia({ value, taskType }: { value?: string; taskType: string
     );
 }
 
-function TaskListRow({ task, canvasById, projectNameById, effectiveConfig, creditsEnabled, actingId, onOpen, onRetry, onCancel, onPreview }: {
-    task: GenerationTask;
-    canvasById: Map<string, { title: string; projectId?: string }>;
-    projectNameById: Map<string, string>;
-    effectiveConfig: AiConfig;
-    creditsEnabled: boolean;
-    actingId: string;
-    onOpen: () => void;
-    onRetry: () => void;
-    onCancel: () => void;
-    onPreview: () => void;
-}) {
-    const context = getTaskCanvasContext(task, canvasById, projectNameById);
-    const isActive = task.status === "queued" || task.status === "running";
-    const isFailed = task.status === "failed" || task.status === "cancelled";
-    return (
-        <article className={`task-record-row group${isFailed ? " is-attention" : ""}`}>
-            <TaskPreviewThumbnail task={task} onOpen={onPreview} />
-            <div className="task-record-main">
-                <div className="task-record-heading">
-                    <span className={`task-record-status ${isFailed ? "is-failed" : isActive ? "is-active" : "is-success"}`}><i className={statusDotClassName(task.status)} />{statusLabel[task.status]}</span>
-                    <button type="button" className="task-record-title" title={task.prompt} onClick={onOpen}>{task.prompt || "未命名任务"}</button>
-                </div>
-                <div className="task-record-meta"><span>{formatTaskKind(task)}</span><span aria-hidden="true">·</span><span>{formatModelName(effectiveConfig, task)}</span><span className="task-record-meta-canvas"><FolderKanban className="size-3" />{context.canvasName}{context.projectName ? ` · ${context.projectName}` : ""}</span></div>
-                {isActive ? <div className="task-record-progress"><span>{task.stage || "正在生成"}</span><span>{task.progress || 0}%</span><i><b style={{ width: `${task.progress || 0}%` }} /></i></div> : null}
-                {isFailed ? <p className="task-record-error" title={task.error ? generationErrorMessage(task.error) : undefined}>{taskAttentionReason(task)}</p> : null}
-            </div>
-            <div className="task-record-date"><TaskDate value={task.createdAt} /></div>
-            {creditsEnabled ? <TaskBilling billing={task.billing} /> : <span className="task-record-billing-empty" aria-hidden="true" />}
-            <div className="task-record-actions">
-                <Tooltip title="查看详情"><Button type="text" size="small" icon={<Eye className="size-3.5" />} aria-label="查看详情" onClick={onOpen} /></Tooltip>
-                {isFailed ? <Tooltip title="重试任务"><Button type="text" size="small" icon={<RotateCcw className="size-3.5" />} aria-label="重试任务" loading={actingId === task.id} disabled={task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error)} onClick={onRetry} /></Tooltip> : null}
-                {isActive ? <Tooltip title="取消任务"><Button type="text" size="small" danger icon={<X className="size-3.5" />} aria-label="取消任务" loading={actingId === task.id} onClick={onCancel} /></Tooltip> : null}
-            </div>
-        </article>
-    );
-}
-
 function resultMediaUrls(value?: string) {
     if (!value) return [];
     let parsed: unknown;
@@ -478,98 +594,28 @@ function isVideoResult(value: string, taskType: string) {
     return value.startsWith("data:video/") || /\.(mp4|webm|mov)(?:$|\?)/i.test(value) || taskType.includes("video");
 }
 
-function TaskPreviewThumbnail({ task, onOpen }: { task: GenerationTask; onOpen: () => void }) {
-    const isVideo = task.previewKind === "video";
-    const fallbackVideo = task.type.includes("video");
-    if (!task.previewUrl) {
-        const Icon = fallbackVideo ? Video : task.type.includes("image") ? ImageIcon : FileText;
-        return <span className="grid h-12 w-[68px] shrink-0 place-items-center rounded-md border border-border/70 bg-muted/35 text-foreground/28"><Icon className="size-4" /></span>;
+function groupTasksByCanvas(tasks: GenerationTask[], canvasById: Map<string, { title: string; projectId?: string }>, projectNameById: Map<string, string>): TaskGroup[] {
+    const groups: TaskGroup[] = [];
+    const byKey = new Map<string, TaskGroup>();
+    for (const task of tasks) {
+        const context = getTaskCanvasContext(task, canvasById, projectNameById);
+        const key = `${context.projectName}\u0000${context.canvasName}`;
+        let group = byKey.get(key);
+        if (!group) {
+            group = { key, title: context.canvasName, projectName: context.projectName, tasks: [] };
+            byKey.set(key, group);
+            groups.push(group);
+        }
+        group.tasks.push(task);
     }
-    return (
-        <button type="button" onClick={onOpen} className="group relative h-12 w-[68px] shrink-0 overflow-hidden rounded-md border border-border/80 bg-black focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label={isVideo ? "放大预览生成视频" : "放大预览生成图片"}>
-            {isVideo
-                ? <video src={task.previewUrl} width={68} height={48} muted playsInline preload="metadata" className="h-full w-full object-cover" />
-                : <img src={task.previewUrl} alt="" width={68} height={48} loading="lazy" className="h-full w-full object-cover" />}
-            <span className="absolute inset-0 grid place-items-center bg-black/0 text-white opacity-0 transition-[background-color,opacity] duration-150 group-hover:bg-black/30 group-hover:opacity-100 group-focus-visible:bg-black/30 group-focus-visible:opacity-100">
-                {isVideo ? <Play className="size-4 fill-current" /> : <Eye className="size-4" />}
-            </span>
-        </button>
-    );
-}
-
-function getTaskCanvasContext(task: GenerationTask, canvasById: Map<string, { title: string; projectId?: string }>, projectNameById: Map<string, string>) {
-    if (!task.projectId) return { canvasName: "未绑定画布", projectName: "" };
-    const canvas = canvasById.get(task.projectId);
-    if (canvas) return { canvasName: canvas.title || "未命名画布", projectName: canvas.projectId ? projectNameById.get(canvas.projectId) || "" : "" };
-    const projectName = projectNameById.get(task.projectId);
-    return projectName ? { canvasName: "项目级任务", projectName } : { canvasName: "画布已移除", projectName: "" };
-}
-
-function taskAttentionReason(task: GenerationTask) {
-    if (task.status === "cancelled") return providerCancelStatusLabel(task);
-    if (task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error)) return "内容审核未通过，请修改输入后新建任务";
-    if (task.error) return generationErrorMessage(task.error);
-    return task.stage || "生成失败，打开详情查看原因";
-}
-
-function providerCancelStatusLabel(task: GenerationTask) {
-    if (task.providerCancelStatus === "requested") return "已请求上游取消，正在等待确认";
-    if (task.providerCancelStatus === "confirmed") return "上游已确认取消，积分已退回";
-    if (task.providerCancelStatus === "uncertain") {
-        if (task.billing?.status === "settled") return "上游未能取消，费用已结算";
-        if (task.billing?.status === "refunded") return "上游取消结果未确认，积分已退回";
-        return task.providerCancelError || "上游无法确认取消，费用待核对";
-    }
-    return task.billing?.status === "refunded" ? "任务在调用上游前取消，积分已退回" : "任务已取消，可按原输入重新提交";
+    return groups;
 }
 
 function taskEmptyState(status: TaskStatusFilter) {
     if (status === "all") return { title: "还没有任务", description: "新提交的生成会在这里显示状态和实时进度。" };
     if (status === "active") return { title: "没有运行中的任务", description: "新提交的生成会在这里显示排队状态和实时进度。" };
     if (status === "succeeded") return { title: "还没有已完成任务", description: "生成成功后，结果预览和执行记录会保留在这里。" };
-    return { title: "目前没有需要处理的任务", description: "失败或取消的生成会出现在这里，并提供原因和可用操作。" };
-}
-
-function statusDotClassName(status: TaskStatus) {
-    if (status === "succeeded") return "task-record-dot bg-emerald-500";
-    if (status === "running") return "task-record-dot is-pulsing bg-amber-500";
-    if (status === "queued") return "task-record-dot bg-blue-500";
-    if (status === "failed") return "task-record-dot bg-red-500";
-    return "task-record-dot bg-foreground/30";
-}
-
-function taskMediaKind(task: GenerationTask): Exclude<TaskKindFilter, "all"> {
-    const value = `${task.type} ${task.operation || ""}`.toLowerCase();
-    if (value.includes("video") || value.includes("视频")) return "video";
-    if (value.includes("image") || value.includes("图片") || value.includes("画面")) return "image";
-    return "text";
-}
-
-function TaskDate({ value }: { value?: string }) {
-    if (!value) return <span className="text-xs text-foreground/38">-</span>;
-    const date = new Date(value);
-    if (Number.isNaN(date.getTime())) return <span className="text-xs text-foreground/38">-</span>;
-    const compact = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })}`;
-    return <time className="task-record-date-value" dateTime={date.toISOString()} title={date.toLocaleString()}>{compact}</time>;
-}
-
-function TaskBilling({ billing }: { billing?: GenerationTask["billing"] }) {
-    if (!billing) return <span className="task-record-billing-empty text-xs text-foreground/30">-</span>;
-    const amount = formatCredits(billing.amountMicrocredits);
-    const note = billing.status === "settled" ? "已结算" : billing.status === "refunded" ? "已退回" : billing.status === "uncertain" ? "待核对" : "预计";
-    return <div className={`task-record-billing ${billing.status === "uncertain" ? "is-uncertain" : ""}`} title={`积分${note}`}><Coins className="size-4" /><span><strong>{amount}</strong><small>{note}</small></span></div>;
-}
-
-function formatModelName(config: AiConfig, task: GenerationTask) {
-    const raw = (task.model || task.provider || "").trim();
-    const model = raw.includes("::") ? raw.split("::").pop()?.trim() || raw : raw;
-
-    if (!model) return "工作流";
-    if (model === "version-router") return "版本对比工作流";
-    if (model === "workflow-router") return "工作流路由";
-    if (model === "internal-agent") return "内置工作流";
-    if (model === "openai-compatible") return "OpenAI 兼容接口";
-    return modelDisplayName(config, raw);
+    return { title: "没有失败或取消的任务", description: "失败或取消的生成会出现在这里，并提供原因和可用操作。" };
 }
 
 function formatDate(value?: string) {
diff --git a/web/src/pages/tasks/task-grid-card.tsx b/web/src/pages/tasks/task-grid-card.tsx
new file mode 100644
index 000000000..b85f2f72f
--- /dev/null
+++ b/web/src/pages/tasks/task-grid-card.tsx
@@ -0,0 +1,67 @@
+import { Button, Tooltip } from "antd";
+import { Eye, FileText, Image as ImageIcon, RotateCcw, Video, X } from "lucide-react";
+
+import { CONTENT_MODERATION_ERROR_CODE, isContentModerationError } from "@/lib/generation-error";
+import { statusLabel } from "@/lib/generation-task-display";
+import type { GenerationTask } from "@/services/api/task-center";
+import { isTaskFailed, statusDotClassName, TaskDate } from "./task-shared";
+
+export function TaskGridCard({ task, actingId, onOpen, onRetry, onCancel }: { task: GenerationTask; actingId: string; onOpen: () => void; onRetry: () => void; onCancel: () => void }) {
+    const isActive = task.status === "queued" || task.status === "running";
+    const isFailed = isTaskFailed(task);
+    const isVideo = task.previewKind === "video";
+    const fallbackVideo = task.type.includes("video");
+    const Icon = fallbackVideo ? Video : task.type.includes("image") ? ImageIcon : FileText;
+    return (
+        <article className={`task-grid-card${isFailed ? " is-attention" : ""}`}>
+            <div className="task-grid-thumb">
+                {task.previewUrl ? (
+                    isVideo ? (
+                        <video src={task.previewUrl} muted playsInline preload="metadata" className="h-full w-full object-cover" />
+                    ) : (
+                        <img src={task.previewUrl} alt="" loading="lazy" className="h-full w-full object-cover" />
+                    )
+                ) : (
+                    <Icon />
+                )}
+                <div className="task-grid-overlay">
+                    <Tooltip title="查看详情">
+                        <Button type="text" size="small" icon={<Eye className="size-3.5" />} aria-label="查看详情" onClick={onOpen} />
+                    </Tooltip>
+                    {isFailed ? (
+                        <Tooltip title="重试任务">
+                            <Button
+                                type="text"
+                                size="small"
+                                icon={<RotateCcw className="size-3.5" />}
+                                aria-label="重试任务"
+                                loading={actingId === task.id}
+                                disabled={task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error)}
+                                onClick={onRetry}
+                            />
+                        </Tooltip>
+                    ) : null}
+                    {isActive ? (
+                        <Tooltip title="取消任务">
+                            <Button type="text" size="small" danger icon={<X className="size-3.5" />} aria-label="取消任务" loading={actingId === task.id} onClick={onCancel} />
+                        </Tooltip>
+                    ) : null}
+                </div>
+            </div>
+            <div className="task-grid-body">
+                <button type="button" className="task-grid-title" title={task.prompt} onClick={onOpen}>
+                    {task.prompt || "未命名任务"}
+                </button>
+                <div className="task-grid-meta">
+                    <span className={`task-grid-status ${isFailed ? "is-failed" : isActive ? "is-active" : task.status === "succeeded" ? "is-success" : ""}`}>
+                        <i className={statusDotClassName(task.status)} />
+                        {statusLabel[task.status]}
+                    </span>
+                    <span className="task-grid-date">
+                        <TaskDate value={task.createdAt} />
+                    </span>
+                </div>
+            </div>
+        </article>
+    );
+}
diff --git a/web/src/pages/tasks/task-group-header.tsx b/web/src/pages/tasks/task-group-header.tsx
new file mode 100644
index 000000000..39bd70f0e
--- /dev/null
+++ b/web/src/pages/tasks/task-group-header.tsx
@@ -0,0 +1,43 @@
+import { FolderKanban, RotateCcw } from "lucide-react";
+
+import { CONTENT_MODERATION_ERROR_CODE, isContentModerationError } from "@/lib/generation-error";
+import type { GenerationTask } from "@/services/api/task-center";
+import { isTaskFailed } from "./task-shared";
+
+export type TaskGroup = { key: string; title: string; projectName: string; tasks: GenerationTask[] };
+
+export function TaskGroupHeader({ group, retrying = false, onRetryFailed }: { group: TaskGroup; retrying?: boolean; onRetryFailed: () => void }) {
+    const succeeded = group.tasks.filter((task) => task.status === "succeeded").length;
+    const active = group.tasks.filter((task) => task.status === "queued" || task.status === "running").length;
+    const failed = group.tasks.filter((task) => isTaskFailed(task) && task.errorCode !== CONTENT_MODERATION_ERROR_CODE && !isContentModerationError(task.error)).length;
+    const title = group.projectName ? `${group.title} · ${group.projectName}` : group.title;
+    return (
+        <div className="task-group-head">
+            <span className="task-group-ic">
+                <FolderKanban />
+            </span>
+            <div className="min-w-0">
+                <div className="task-group-name">
+                    <span>{title}</span>
+                    <span className="task-group-count">
+                        共 {group.tasks.length} 项 · 完成 {succeeded}
+                    </span>
+                </div>
+                <span className="task-group-sub">
+                    {active ? <span>{active} 运行中</span> : null}
+                    {active && failed ? <span aria-hidden="true"> · </span> : null}
+                    {failed ? <b className="is-bad">{failed} 失败</b> : null}
+                    {(active || failed) && succeeded ? <span aria-hidden="true"> · </span> : null}
+                    {succeeded ? <span>{succeeded} 已完成</span> : null}
+                    {!active && !failed && !succeeded ? "暂无进行中的任务" : null}
+                </span>
+            </div>
+            {failed ? (
+                <button type="button" className="task-group-reset" disabled={retrying} onClick={onRetryFailed}>
+                    <RotateCcw className={retrying ? "animate-spin" : undefined} />
+                    {retrying ? "重试中..." : "重试失败任务"}
+                </button>
+            ) : null}
+        </div>
+    );
+}
diff --git a/web/src/pages/tasks/task-list-row.tsx b/web/src/pages/tasks/task-list-row.tsx
new file mode 100644
index 000000000..df52d7f5e
--- /dev/null
+++ b/web/src/pages/tasks/task-list-row.tsx
@@ -0,0 +1,128 @@
+import { Button, Tooltip } from "antd";
+import { Eye, FileText, FolderKanban, Image as ImageIcon, Play, RotateCcw, Video, X } from "lucide-react";
+
+import { CONTENT_MODERATION_ERROR_CODE, generationErrorMessage, isContentModerationError } from "@/lib/generation-error";
+import { formatTaskKind, statusLabel } from "@/lib/generation-task-display";
+import type { GenerationTask } from "@/services/api/task-center";
+import type { AiConfig } from "@/stores/use-config-store";
+import { formatModelName, getTaskCanvasContext, isTaskFailed, statusDotClassName, taskAttentionReason, TaskBilling, TaskDate } from "./task-shared";
+
+export function TaskListRow({
+    task,
+    canvasById,
+    projectNameById,
+    effectiveConfig,
+    creditsEnabled,
+    actingId,
+    onOpen,
+    onRetry,
+    onCancel,
+    onPreview,
+}: {
+    task: GenerationTask;
+    canvasById: Map<string, { title: string; projectId?: string }>;
+    projectNameById: Map<string, string>;
+    effectiveConfig: AiConfig;
+    creditsEnabled: boolean;
+    actingId: string;
+    onOpen: () => void;
+    onRetry: () => void;
+    onCancel: () => void;
+    onPreview: () => void;
+}) {
+    const context = getTaskCanvasContext(task, canvasById, projectNameById);
+    const isActive = task.status === "queued" || task.status === "running";
+    const isFailed = isTaskFailed(task);
+    return (
+        <article className={`task-record-row group${isFailed ? " is-attention" : ""}`}>
+            <TaskPreviewThumbnail task={task} onOpen={onPreview} />
+            <div className="task-record-main">
+                <div className="task-record-heading">
+                    <span className={`task-record-status ${isFailed ? "is-failed" : isActive ? "is-active" : "is-success"}`}>
+                        <i className={statusDotClassName(task.status)} />
+                        {statusLabel[task.status]}
+                    </span>
+                    <button type="button" className="task-record-title" title={task.prompt} onClick={onOpen}>
+                        {task.prompt || "未命名任务"}
+                    </button>
+                </div>
+                <div className="task-record-meta">
+                    <span>{formatTaskKind(task)}</span>
+                    <span aria-hidden="true">·</span>
+                    <span>{formatModelName(effectiveConfig, task)}</span>
+                    <span className="task-record-meta-canvas">
+                        <FolderKanban className="size-3" />
+                        {context.canvasName}
+                        {context.projectName ? ` · ${context.projectName}` : ""}
+                    </span>
+                </div>
+                {isActive ? (
+                    <div className="task-record-progress">
+                        <span>{task.stage || "正在生成"}</span>
+                        <span>{task.progress || 0}%</span>
+                        <i>
+                            <b style={{ width: `${task.progress || 0}%` }} />
+                        </i>
+                    </div>
+                ) : null}
+                {isFailed ? (
+                    <p className="task-record-error" title={task.error ? generationErrorMessage(task.error) : undefined}>
+                        {taskAttentionReason(task)}
+                    </p>
+                ) : null}
+            </div>
+            <div className="task-record-date">
+                <TaskDate value={task.createdAt} />
+            </div>
+            {creditsEnabled ? <TaskBilling billing={task.billing} /> : <span className="task-record-billing-empty" aria-hidden="true" />}
+            <div className="task-record-actions">
+                <Tooltip title="查看详情">
+                    <Button type="text" size="small" icon={<Eye className="size-3.5" />} aria-label="查看详情" onClick={onOpen} />
+                </Tooltip>
+                {isFailed ? (
+                    <Tooltip title="重试任务">
+                        <Button
+                            type="text"
+                            size="small"
+                            icon={<RotateCcw className="size-3.5" />}
+                            aria-label="重试任务"
+                            loading={actingId === task.id}
+                            disabled={task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error)}
+                            onClick={onRetry}
+                        />
+                    </Tooltip>
+                ) : null}
+                {isActive ? (
+                    <Tooltip title="取消任务">
+                        <Button type="text" size="small" danger icon={<X className="size-3.5" />} aria-label="取消任务" loading={actingId === task.id} onClick={onCancel} />
+                    </Tooltip>
+                ) : null}
+            </div>
+        </article>
+    );
+}
+
+function TaskPreviewThumbnail({ task, onOpen }: { task: GenerationTask; onOpen: () => void }) {
+    const isVideo = task.previewKind === "video";
+    const fallbackVideo = task.type.includes("video");
+    if (!task.previewUrl) {
+        const Icon = fallbackVideo ? Video : task.type.includes("image") ? ImageIcon : FileText;
+        return (
+            <span className="task-record-thumb">
+                <Icon className="size-4" />
+            </span>
+        );
+    }
+    return (
+        <button type="button" onClick={onOpen} className="task-record-thumb group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" aria-label={isVideo ? "放大预览生成视频" : "放大预览生成图片"}>
+            {isVideo ? (
+                <video src={task.previewUrl} width={68} height={48} muted playsInline preload="metadata" className="h-full w-full object-cover" />
+            ) : (
+                <img src={task.previewUrl} alt="" width={68} height={48} loading="lazy" className="h-full w-full object-cover" />
+            )}
+            <span className="absolute inset-0 grid place-items-center bg-black/0 text-white opacity-0 transition-[background-color,opacity] duration-150 group-hover:bg-black/30 group-hover:opacity-100 group-focus-visible:bg-black/30 group-focus-visible:opacity-100">
+                {isVideo ? <Play className="size-4 fill-current" /> : <Eye className="size-4" />}
+            </span>
+        </button>
+    );
+}
diff --git a/web/src/pages/tasks/task-shared.tsx b/web/src/pages/tasks/task-shared.tsx
new file mode 100644
index 000000000..de5a75553
--- /dev/null
+++ b/web/src/pages/tasks/task-shared.tsx
@@ -0,0 +1,90 @@
+import { Coins } from "lucide-react";
+
+import { formatCredits } from "@/constant/credits";
+import { CONTENT_MODERATION_ERROR_CODE, generationErrorMessage, isContentModerationError } from "@/lib/generation-error";
+import type { GenerationTask, TaskStatus } from "@/services/api/task-center";
+import { modelDisplayName, type AiConfig } from "@/stores/use-config-store";
+
+export function getTaskCanvasContext(task: GenerationTask, canvasById: Map<string, { title: string; projectId?: string }>, projectNameById: Map<string, string>) {
+    if (!task.projectId) return { canvasName: "未绑定画布", projectName: "" };
+    const canvas = canvasById.get(task.projectId);
+    if (canvas) return { canvasName: canvas.title || "未命名画布", projectName: canvas.projectId ? projectNameById.get(canvas.projectId) || "" : "" };
+    const projectName = projectNameById.get(task.projectId);
+    return projectName ? { canvasName: "项目级任务", projectName } : { canvasName: "画布已移除", projectName: "" };
+}
+
+export function isTaskFailed(task: GenerationTask) {
+    return task.status === "failed" || task.status === "cancelled";
+}
+
+export function taskAttentionReason(task: GenerationTask) {
+    if (task.status === "cancelled") return providerCancelStatusLabel(task);
+    if (task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error)) return "内容审核未通过，请修改输入后新建任务";
+    if (task.error) return generationErrorMessage(task.error);
+    return task.stage || "生成失败，打开详情查看原因";
+}
+
+export function providerCancelStatusLabel(task: GenerationTask) {
+    if (task.providerCancelStatus === "requested") return "已请求上游取消，正在等待确认";
+    if (task.providerCancelStatus === "confirmed") return "上游已确认取消，积分已退回";
+    if (task.providerCancelStatus === "uncertain") {
+        if (task.billing?.status === "settled") return "上游未能取消，费用已结算";
+        if (task.billing?.status === "refunded") return "上游取消结果未确认，积分已退回";
+        return task.providerCancelError || "上游无法确认取消，费用待核对";
+    }
+    return task.billing?.status === "refunded" ? "任务在调用上游前取消，积分已退回" : "任务已取消，可按原输入重新提交";
+}
+
+export function statusDotClassName(status: TaskStatus) {
+    if (status === "succeeded") return "task-record-dot is-success";
+    if (status === "running") return "task-record-dot is-active is-pulsing";
+    if (status === "queued") return "task-record-dot is-queued";
+    if (status === "failed") return "task-record-dot is-failed";
+    return "task-record-dot is-idle";
+}
+
+export function taskMediaKind(task: GenerationTask): "text" | "image" | "video" {
+    const value = `${task.type} ${task.operation || ""}`.toLowerCase();
+    if (value.includes("video") || value.includes("视频")) return "video";
+    if (value.includes("image") || value.includes("图片") || value.includes("画面")) return "image";
+    return "text";
+}
+
+export function TaskDate({ value }: { value?: string }) {
+    if (!value) return <span className="text-xs text-foreground/38">-</span>;
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return <span className="text-xs text-foreground/38">-</span>;
+    const compact = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })}`;
+    return (
+        <time className="task-record-date-value" dateTime={date.toISOString()} title={date.toLocaleString()}>
+            {compact}
+        </time>
+    );
+}
+
+export function TaskBilling({ billing }: { billing?: GenerationTask["billing"] }) {
+    if (!billing) return <span className="task-record-billing-empty text-xs text-foreground/30">-</span>;
+    const amount = formatCredits(billing.amountMicrocredits);
+    const note = billing.status === "settled" ? "已结算" : billing.status === "refunded" ? "已退回" : billing.status === "uncertain" ? "待核对" : "预计";
+    return (
+        <div className={`task-record-billing ${billing.status === "uncertain" ? "is-uncertain" : ""}`} title={`积分${note}`}>
+            <Coins className="size-4" />
+            <span>
+                <strong>{amount}</strong>
+                <small>{note}</small>
+            </span>
+        </div>
+    );
+}
+
+export function formatModelName(config: AiConfig, task: GenerationTask) {
+    const raw = (task.model || task.provider || "").trim();
+    const model = raw.includes("::") ? raw.split("::").pop()?.trim() || raw : raw;
+
+    if (!model) return "工作流";
+    if (model === "version-router") return "版本对比工作流";
+    if (model === "workflow-router") return "工作流路由";
+    if (model === "internal-agent") return "内置工作流";
+    if (model === "openai-compatible") return "OpenAI 兼容接口";
+    return modelDisplayName(config, raw);
+}
diff --git a/web/src/pages/tasks/task-stat-pills.tsx b/web/src/pages/tasks/task-stat-pills.tsx
new file mode 100644
index 000000000..8b335f7bb
--- /dev/null
+++ b/web/src/pages/tasks/task-stat-pills.tsx
@@ -0,0 +1,36 @@
+export type TaskStatusFilter = "all" | "failed" | "active" | "succeeded";
+
+export type TaskStats = { today: number; active: number; succeeded: number; failed: number };
+
+export function TaskStatPills({ stats, statusFilter, onFilterChange }: { stats: TaskStats; statusFilter: TaskStatusFilter; onFilterChange: (value: TaskStatusFilter) => void }) {
+    return (
+        <div className="task-stat-pills">
+            <span className="task-stat-pill">
+                <span className="task-stat-dot" />
+                今日生成<b>{stats.today}</b>
+            </span>
+            <button type="button" aria-pressed={statusFilter === "active"} className={`task-stat-pill is-clickable${statusFilter === "active" ? " is-active-filter" : ""}`} onClick={() => onFilterChange(statusFilter === "active" ? "all" : "active")}>
+                <span className="task-stat-dot is-run" />
+                运行中<b>{stats.active}</b>
+            </button>
+            <button
+                type="button"
+                aria-pressed={statusFilter === "succeeded"}
+                className={`task-stat-pill is-clickable${statusFilter === "succeeded" ? " is-active-filter" : ""}`}
+                onClick={() => onFilterChange(statusFilter === "succeeded" ? "all" : "succeeded")}
+            >
+                <span className="task-stat-dot is-ok" />
+                已完成<b>{stats.succeeded}</b>
+            </button>
+            <button
+                type="button"
+                aria-pressed={statusFilter === "failed"}
+                className={`task-stat-pill is-clickable is-fail${statusFilter === "failed" ? " is-active-filter" : ""}`}
+                onClick={() => onFilterChange(statusFilter === "failed" ? "all" : "failed")}
+            >
+                <span className="task-stat-dot is-bad" />
+                失败<b>{stats.failed}</b>
+            </button>
+        </div>
+    );
+}
diff --git a/web/src/pages/wallet/index.tsx b/web/src/pages/wallet/index.tsx
index d0b985ea0..01aa476dd 100644
--- a/web/src/pages/wallet/index.tsx
+++ b/web/src/pages/wallet/index.tsx
@@ -7,7 +7,6 @@ import { ArrowDownLeft, ArrowUpRight, CalendarCheck, Coins, RefreshCw, RotateCcw
 import { formatCredits } from "@/constant/credits";
 import { PaginationBar, TableSurface } from "@/components/layout/workspace-page";
 import { WorkspaceState } from "@/components/layout/workspace-state";
-import { WorkspaceSignalIcon } from "@/components/ui/aceternity/workspace-signal-icon";
 import { CometCard } from "@/components/ui/aceternity/comet-card";
 import { aceternityMotion } from "@/lib/aceternity-motion";
 import { checkinCredits, getWallet, redeemCredits, type CreditLedgerEntry, type WalletSummary } from "@/services/api/wallet";
@@ -119,38 +118,46 @@ export default function WalletPage() {
 
     return (
         <main className="app-user-content app-workspace-scroll library-page wallet-library-page relative h-full overflow-y-auto text-foreground">
-            <div className="relative mx-auto max-w-[1440px] px-4 py-6 sm:px-6 lg:px-8">
-                <motion.header initial={reducedMotion ? false : { opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: aceternityMotion.duration.panel, ease: aceternityMotion.easing.enter }} className="app-page-header flex flex-wrap items-start justify-between gap-4 pb-6">
-                    <div className="flex items-center gap-3">
-                        <WorkspaceSignalIcon variant="wallet" />
-                        <div>
-                            <h1 className="text-[var(--fs-title)] font-semibold leading-7">积分中心</h1>
-                            <p className="mt-1 text-xs leading-5 text-foreground/58">模型调用、冻结与退款都在同一条可追溯流水中。</p>
+            <div className="relative w-full px-4 py-6 sm:px-6 lg:px-8">
+                <div className="studio-band">
+                    <motion.header initial={reducedMotion ? false : { opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: aceternityMotion.duration.panel, ease: aceternityMotion.easing.enter }} className="app-page-header flex flex-wrap items-start justify-between gap-4">
+                        <div className="flex min-w-0 items-center gap-3">
+                            <div className="min-w-0">
+                                <h1 className="text-[var(--fs-heading-lg)] font-semibold leading-7">积分中心</h1>
+                                <p className="mt-1 text-xs leading-5 text-foreground/58">模型调用、冻结与退款都在同一条可追溯流水中。</p>
+                            </div>
                         </div>
-                    </div>
-                    <div className="flex flex-wrap gap-2">
-                        <Button icon={<CalendarCheck className="size-4" />} type={wallet?.policy.checkedInToday ? "default" : "primary"} loading={checkingIn} disabled={wallet?.policy.checkedInToday} onClick={() => void checkin()}>
-                            {wallet?.policy.checkedInToday ? "今日已签到" : `签到 +${formatCredits(wallet?.policy.checkinBonusMicrocredits || 0)}`}
-                        </Button>
-                        <Button icon={<RefreshCw className="size-4" />} loading={loading} onClick={() => void reload()}>
-                            刷新余额
-                        </Button>
-                    </div>
-                </motion.header>
+                        <div className="flex flex-wrap items-center gap-2">
+                            <span className="app-projects-header-meta wallet-credit-meta">
+                                <Coins className="size-3" />
+                                可用 {formatCredits(account?.availableMicrocredits || 0, 6)}
+                            </span>
+                            <Button className="library-primary-action" icon={<CalendarCheck className="size-4" />} type={wallet?.policy.checkedInToday ? "default" : "primary"} loading={checkingIn} disabled={wallet?.policy.checkedInToday} onClick={() => void checkin()}>
+                                {wallet?.policy.checkedInToday ? "今日已签到" : `签到 +${formatCredits(wallet?.policy.checkinBonusMicrocredits || 0)}`}
+                            </Button>
+                            <Button icon={<RefreshCw className="size-4" />} loading={loading} onClick={() => void reload()}>
+                                刷新余额
+                            </Button>
+                        </div>
+                    </motion.header>
+                </div>
 
                 <section className="library-feature-grid mt-6 grid gap-4 lg:grid-cols-[minmax(0,1.35fr)_minmax(340px,0.65fr)]">
                     <CometCard rotateDepth={2.2} translateDepth={2} glare={!reducedMotion} className="credit-balance-card overflow-hidden rounded-lg border">
-                        <div className="flex min-h-[210px] flex-col justify-between p-5 sm:p-6">
+                        <div className="wallet-balance-inner flex min-h-[210px] flex-col justify-between p-5 sm:p-6">
                             <div className="flex items-start justify-between gap-4">
                                 <div>
                                     <div className="flex items-center gap-2 text-xs font-medium opacity-60">
-                                        <Coins className="size-4 text-amber-500" />
+                                        <Coins className="size-4" />
                                         可用创作积分
                                     </div>
-                                    <div className="mt-4 text-5xl font-semibold tabular-nums">{formatCredits(account?.availableMicrocredits || 0, 6)}</div>
+                                    <div className="wallet-balance-number mt-4 flex items-baseline gap-2">
+                                        <span className="text-5xl font-semibold tabular-nums">{formatCredits(account?.availableMicrocredits || 0, 6)}</span>
+                                        <span className="text-sm opacity-55">积分</span>
+                                    </div>
                                     <div className="mt-2 text-xs opacity-45">最近更新 {formatTime(account?.updatedAt)}</div>
                                 </div>
-                                <span className="inline-flex items-center gap-1.5 rounded-full border border-current/10 px-2.5 py-1 text-[var(--fs-label)] font-medium opacity-70">
+                                <span className="inline-flex items-center gap-1.5 rounded-full border border-current/15 px-2.5 py-1 text-[var(--fs-label)] font-medium opacity-70">
                                     <ShieldCheck className="size-3.5" />
                                     账户正常
                                 </span>
@@ -164,7 +171,7 @@ export default function WalletPage() {
 
                     <motion.div initial={reducedMotion ? false : { opacity: 0, x: 12 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: aceternityMotion.duration.panel, ease: aceternityMotion.easing.enter }} className="wallet-redeem-panel app-workspace-surface flex flex-col rounded-lg border p-5 backdrop-blur-xl sm:p-6">
                         <div className="flex items-start gap-3">
-                            <span className="grid size-9 shrink-0 place-items-center rounded-xl border border-amber-400/25 bg-amber-400/10 text-amber-600 dark:text-amber-300">
+                            <span className="wallet-redeem-icon grid size-9 shrink-0 place-items-center rounded-xl border">
                                 <TicketCheck className="size-4" />
                             </span>
                             <div>
@@ -279,16 +286,16 @@ function LedgerTypeTag({ type }: { type: CreditLedgerEntry["type"] }) {
 
 function ledgerTypeMeta(type: CreditLedgerEntry["type"]) {
     const values = {
-        redeem: { label: "兑换充值", tagColor: "success", icon: <ArrowDownLeft className="size-4" />, iconClass: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-300" },
-        admin_grant: { label: "管理员充值", tagColor: "blue", icon: <ArrowDownLeft className="size-4" />, iconClass: "bg-sky-500/10 text-sky-600 dark:text-sky-300" },
+        redeem: { label: "兑换充值", tagColor: "default", icon: <ArrowDownLeft className="size-4" />, iconClass: "bg-foreground/8 text-foreground/70" },
+        admin_grant: { label: "管理员充值", tagColor: "default", icon: <ArrowDownLeft className="size-4" />, iconClass: "bg-foreground/8 text-foreground/70" },
         consume: { label: "模型消费", tagColor: "error", icon: <Sparkles className="size-4" />, iconClass: "bg-rose-500/10 text-rose-600 dark:text-rose-300" },
         reserve: { label: "积分冻结", tagColor: "warning", icon: <ArrowUpRight className="size-4" />, iconClass: "bg-amber-500/10 text-amber-600 dark:text-amber-300" },
         refund: { label: "消费退款", tagColor: "warning", icon: <RotateCcw className="size-4" />, iconClass: "bg-amber-500/10 text-amber-600 dark:text-amber-300" },
-        admin_adjustment: { label: "管理员调账", tagColor: "default", icon: <SlidersHorizontal className="size-4" />, iconClass: "bg-muted text-foreground/60" },
-        signup_bonus: { label: "注册奖励", tagColor: "gold", icon: <Sparkles className="size-4" />, iconClass: "bg-amber-500/10 text-amber-600 dark:text-amber-300" },
-        checkin_bonus: { label: "签到奖励", tagColor: "cyan", icon: <CalendarCheck className="size-4" />, iconClass: "bg-cyan-500/10 text-cyan-600 dark:text-cyan-300" },
+        admin_adjustment: { label: "管理员调账", tagColor: "default", icon: <SlidersHorizontal className="size-4" />, iconClass: "bg-foreground/8 text-foreground/70" },
+        signup_bonus: { label: "注册奖励", tagColor: "default", icon: <Sparkles className="size-4" />, iconClass: "bg-foreground/8 text-foreground/70" },
+        checkin_bonus: { label: "签到奖励", tagColor: "default", icon: <CalendarCheck className="size-4" />, iconClass: "bg-foreground/8 text-foreground/70" },
     } as const;
-    return values[type] || { label: "其他积分变动", tagColor: "default", icon: <ArrowUpRight className="size-4" />, iconClass: "bg-muted text-foreground/60" };
+    return values[type] || { label: "其他积分变动", tagColor: "default", icon: <ArrowUpRight className="size-4" />, iconClass: "bg-foreground/8 text-foreground/70" };
 }
 
 function ledgerTitle(entry: CreditLedgerEntry) {
diff --git a/web/src/services/api/image.ts b/web/src/services/api/image.ts
index 5b68becca..e8cc8e990 100644
--- a/web/src/services/api/image.ts
+++ b/web/src/services/api/image.ts
@@ -387,6 +387,11 @@ function toChatCompletionToolChoice(toolChoice: ToolChoice) {
     return typeof toolChoice === "object" ? { type: "function", function: { name: toolChoice.name } } : toolChoice;
 }
 
+function isToolChoiceCompatibilityError(error: unknown) {
+    const message = error instanceof Error ? error.message : "";
+    return /tool[_\s-]?choice|thinking\s+mode/i.test(message);
+}
+
 function parseChatCompletionPayload(payload: ChatCompletionPayload): ToolResponseResult {
     if (typeof payload.code === "number" && payload.code !== 0) throw new Error(payload.msg || "请求失败");
     if (payload.error?.message) throw new Error(payload.error.message);
@@ -997,7 +1002,7 @@ export async function requestImageQuestion(config: AiConfig, messages: AiTextMes
             if (answer === "没有返回内容") onDelta(answer);
             return answer;
         }
-        if (requestConfig.interfaceType === "chat-completion") {
+        if (requestConfig.interfaceType === "chat-completion" || !requestConfig.interfaceType) {
             const answer =
                 (
                     await requestStreamingChatCompletion(
@@ -1038,19 +1043,31 @@ export async function requestToolResponse(config: AiConfig, messages: ResponseIn
         if (requestConfig.apiFormat === "gemini") {
             return await requestGeminiStreamingResponse(requestConfig, toGeminiBody(requestConfig, messages, toGeminiToolOptions(tools, toolChoice)), onDelta, options);
         }
-        if (requestConfig.interfaceType === "chat-completion") {
-            return await requestStreamingChatCompletion(
-                requestConfig,
-                {
-                    model: requestConfig.model,
-                    messages: toChatCompletionMessages(withSystemMessage(requestConfig, messages)),
-                    tools,
-                    tool_choice: toChatCompletionToolChoice(toolChoice),
-                    parallel_tool_calls: false,
-                },
-                onDelta,
-                options,
-            );
+        if (requestConfig.interfaceType === "chat-completion" || !requestConfig.interfaceType) {
+            const chatPayload: Record<string, unknown> = {
+                model: requestConfig.model,
+                messages: toChatCompletionMessages(withSystemMessage(requestConfig, messages)),
+                tools,
+                tool_choice: toChatCompletionToolChoice(toolChoice),
+                parallel_tool_calls: false,
+            };
+            try {
+                return await requestStreamingChatCompletion(requestConfig, chatPayload, onDelta, options);
+            } catch (error) {
+                if (!isToolChoiceCompatibilityError(error)) throw error;
+
+                // 部分 OpenAI 兼容上游仅支持 auto，思考模式则可能要求完全省略该字段。
+                if (toolChoice !== "auto") {
+                    try {
+                        return await requestStreamingChatCompletion(requestConfig, { ...chatPayload, tool_choice: toChatCompletionToolChoice("auto") }, onDelta, options);
+                    } catch (autoError) {
+                        if (!isToolChoiceCompatibilityError(autoError)) throw autoError;
+                    }
+                }
+                const { tool_choice: _ignored, ...withoutToolChoice } = chatPayload;
+                void _ignored;
+                return await requestStreamingChatCompletion(requestConfig, withoutToolChoice, onDelta, options);
+            }
         }
         return await requestStreamingResponse(
             requestConfig,
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index bac5cebee..a4f722550 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -224,6 +224,13 @@
     --opa-subtle: 0.55;
     --opa-medium: 0.72;
     --opa-full: 1;
+
+    /* 毛玻璃参数：收敛浮层玻璃质感，避免组件散落字面 blur/saturate */
+    --glass-blur: 10px;
+    --glass-saturate: 112%;
+    --glass-alpha: 0.94;
+    --glass-alpha-strong: 0.97;
+    --glass-border-alpha: 0.78;
 }
 
 /* prefers-reduced-motion 降级（对应 #99 三级降级策略 L1）*/
@@ -339,6 +346,12 @@
     --color-status-error: var(--status-error);
     --color-status-loading: var(--status-loading);
     --color-status-warning: var(--status-warning);
+    --color-surface: var(--surface);
+    --color-surface-hover: var(--surface-hover);
+    --color-surface-active: var(--surface-active);
+    --color-surface-secondary: var(--bg-secondary);
+    --color-surface-tertiary: var(--bg-tertiary);
+    --color-workspace-glass: var(--workspace-glass-surface);
 
     /* 色彩 — Canvas 语义色 */
     --color-cn-text: var(--cn-text);
@@ -378,7 +391,7 @@
     --workspace-border-strong: rgba(17, 17, 17, 0.22);
     --workspace-grid-line: rgba(17, 17, 17, 0.045);
     --workspace-nav: var(--workspace-navigation);
-    --workspace-sidebar: var(--workspace-navigation);
+    --workspace-sidebar: var(--bg-secondary);
     --workspace-accent: #171717;
     --workspace-accent-soft: rgba(17, 17, 17, 0.07);
 
@@ -387,6 +400,13 @@
     --bg: var(--color-neutral-0);
     --fg: var(--color-neutral-950);
     --border-semantic: var(--color-neutral-200);
+    --bg-secondary: var(--color-neutral-50);
+    --bg-tertiary: var(--color-neutral-100);
+    --surface: var(--color-neutral-0);
+    --surface-hover: rgba(17, 17, 17, 0.05);
+    --surface-active: rgba(17, 17, 17, 0.09);
+    --workspace-glass-surface: color-mix(in srgb, var(--workspace-surface) calc(var(--glass-alpha) * 100%), transparent);
+    --workspace-glass-border: color-mix(in srgb, var(--workspace-border) calc(var(--glass-border-alpha) * 100%), transparent);
     --accent: var(--workspace-accent);
     --accent-soft: var(--workspace-accent-soft);
     --muted: var(--color-neutral-100);
@@ -501,7 +521,7 @@
     --workspace-border-strong: rgba(255, 255, 255, 0.16);
     --workspace-grid-line: rgba(255, 255, 255, 0.038);
     --workspace-nav: var(--workspace-navigation);
-    --workspace-sidebar: var(--workspace-navigation);
+    --workspace-sidebar: var(--bg-secondary);
     --workspace-accent: #f5f5f5;
     --workspace-accent-soft: rgba(255, 255, 255, 0.09);
     --chart-1: oklch(0.87 0 0);
@@ -522,6 +542,11 @@
     --bg: var(--color-neutral-950);
     --fg: var(--color-neutral-50);
     --border-semantic: var(--color-neutral-800);
+    --bg-secondary: #141414;
+    --bg-tertiary: #181818;
+    --surface: #1f1f1f;
+    --surface-hover: rgba(255, 255, 255, 0.07);
+    --surface-active: rgba(255, 255, 255, 0.12);
     --muted: var(--color-neutral-900);
 
     --cn-text: var(--color-neutral-50);
@@ -633,6 +658,15 @@
     --dock-precision-width: var(--space-12);
     --dock-z-popover: 30;                 /* dock 子面板在 toolbar 根 stacking context 内的层级（见 ADR-001）*/
 
+    /* 页面顶部栏（PageHeader / 工作台头部）*/
+    --page-topbar-h: 64px;
+    --page-topbar-px: var(--space-4);
+    --page-topbar-surface: var(--bg-secondary);
+    --page-topbar-border: var(--workspace-border);
+    --canvas-topbar-surface: var(--workspace-glass-surface);
+    --canvas-topbar-border: var(--workspace-glass-border);
+    --rail-icon-size: 20px;
+
     /* Canvas 创建菜单：固定行高保证图标、徽标和单行标签互不挤占 */
     --canvas-create-node-height: var(--space-12);
     --canvas-create-resource-height: var(--space-8);
@@ -830,7 +864,7 @@
         --workspace-border-strong: rgba(17, 17, 17, 0.2);
         --workspace-grid-line: rgba(17, 17, 17, 0.035);
         --workspace-nav: var(--workspace-navigation);
-        --workspace-sidebar: var(--workspace-navigation);
+        --workspace-sidebar: var(--bg-secondary);
         --workspace-accent: #171717;
         --workspace-accent-soft: rgba(17, 17, 17, 0.065);
         background-color: var(--workspace-canvas);
@@ -851,7 +885,7 @@
         --workspace-border-strong: rgba(255, 255, 255, 0.18);
         --workspace-grid-line: rgba(255, 255, 255, 0.026);
         --workspace-nav: var(--workspace-navigation);
-        --workspace-sidebar: var(--workspace-navigation);
+        --workspace-sidebar: var(--bg-secondary);
         --workspace-accent: #f5f5f5;
         --workspace-accent-soft: rgba(255, 255, 255, 0.08);
     }
@@ -875,7 +909,7 @@
         border: 0;
         border-right: 1px solid var(--workspace-border);
         border-radius: 0;
-        background: var(--workspace-navigation);
+        background: var(--workspace-sidebar);
         box-shadow: none;
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
@@ -1096,24 +1130,6 @@
         background: transparent;
     }
 
-    .app-spatial-workspace .app-home-header {
-        border-color: var(--workspace-border);
-    }
-
-    .app-spatial-workspace .app-home-metric {
-        border-color: var(--workspace-border);
-        background: var(--workspace-surface);
-        box-shadow:
-            0 16px 42px color-mix(in srgb, var(--workspace-canvas) 56%, transparent),
-            inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
-        backdrop-filter: blur(18px) saturate(115%);
-    }
-
-    .app-spatial-workspace .app-home-metric svg {
-        width: 17px;
-        height: 17px;
-    }
-
     .app-spatial-workspace .workspace-signal-icon path {
         stroke: var(--workspace-accent) !important;
     }
@@ -1130,7 +1146,6 @@
         background: #171717;
     }
 
-    .app-spatial-workspace .app-home-focus-panel,
     .app-spatial-workspace .project-overview-focus,
     .app-spatial-workspace .project-pipeline-surface {
         border-color: var(--workspace-border);
@@ -1140,84 +1155,10 @@
             inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
     }
 
-    .app-spatial-workspace .app-home-focus-panel {
-        min-height: 330px;
-    }
-
-    .app-spatial-workspace .spatial-chapter-panel,
     .app-spatial-workspace .project-overview-status {
         background: color-mix(in srgb, var(--workspace-surface) 82%, var(--workspace-accent) 3%);
     }
 
-    .spatial-chapter-deck {
-        position: relative;
-        min-height: 242px;
-        perspective: 900px;
-        perspective-origin: 50% 34%;
-        transform-style: preserve-3d;
-    }
-
-    .spatial-chapter-card {
-        position: absolute;
-        top: 0;
-        left: 3%;
-        display: block;
-        width: min(82%, 290px);
-        height: 92px;
-        overflow: hidden;
-        border: 1px solid var(--workspace-border-strong);
-        border-radius: 7px;
-        background: color-mix(in srgb, var(--workspace-surface-strong) 95%, white 5%);
-        padding: 13px 15px;
-        color: color-mix(in srgb, var(--foreground) 76%, transparent);
-        box-shadow:
-            0 18px 28px rgba(0, 0, 0, 0.24),
-            inset 0 1px 0 color-mix(in srgb, white 13%, transparent);
-        transform: translate3d(var(--deck-x), var(--deck-y), var(--deck-z)) rotateX(46deg) rotateZ(-7deg);
-        transform-origin: center top;
-        transition:
-            border-color var(--motion-state) var(--ease-aceternity),
-            background-color var(--motion-state) var(--ease-aceternity),
-            color var(--motion-state) var(--ease-aceternity),
-            transform var(--motion-state) var(--ease-aceternity);
-    }
-
-    .spatial-chapter-card:hover,
-    .spatial-chapter-card:focus-visible {
-        z-index: 20 !important;
-        border-color: color-mix(in srgb, var(--workspace-accent) 58%, var(--workspace-border));
-        color: var(--foreground);
-        outline: none;
-        transform: translate3d(calc(var(--deck-x) + 8px), calc(var(--deck-y) - 5px), 18px) rotateX(34deg) rotateZ(-5deg);
-    }
-
-    .spatial-chapter-card.is-active {
-        border-color: color-mix(in srgb, var(--workspace-accent) 74%, white 8%);
-        background: var(--workspace-accent);
-        color: color-mix(in srgb, var(--workspace-canvas) 90%, black);
-        box-shadow:
-            0 22px 50px color-mix(in srgb, var(--workspace-accent) 23%, transparent),
-            inset 0 1px 0 rgba(255, 255, 255, 0.28);
-    }
-
-    .spatial-chapter-card.is-loading {
-        border-color: var(--workspace-border);
-        background: color-mix(in srgb, var(--foreground) 4%, var(--workspace-surface-strong));
-    }
-
-    .app-spatial-workspace .app-workflow-rail {
-        border-color: var(--workspace-border);
-    }
-
-    .app-spatial-workspace .app-workflow-step {
-        border-color: var(--workspace-border);
-        transition: background-color var(--motion-instant) ease-out;
-    }
-
-    .app-spatial-workspace .app-workflow-step:hover {
-        background: var(--workspace-accent-soft);
-    }
-
     .app-spatial-workspace .project-workbench-header {
         border-color: var(--workspace-border);
         background: color-mix(in srgb, var(--workspace-nav) 92%, transparent);
@@ -1255,40 +1196,6 @@
             box-shadow: 22px 0 70px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
         }
 
-        .app-spatial-workspace .app-home-focus-panel {
-            min-height: 0;
-        }
-
-        .spatial-chapter-deck {
-            display: grid;
-            min-height: 0;
-            gap: 8px;
-            perspective: none;
-        }
-
-        .spatial-chapter-card {
-            position: relative;
-            left: auto;
-            top: auto;
-            width: 100%;
-            height: auto;
-            min-height: 68px;
-            transform: none;
-        }
-
-        .spatial-chapter-card:hover,
-        .spatial-chapter-card:focus-visible {
-            transform: translateX(3px);
-        }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        .spatial-chapter-card,
-        .spatial-chapter-card:hover,
-        .spatial-chapter-card:focus-visible {
-            transition: none;
-            transform: none;
-        }
     }
 
     .app-user-workspace {
@@ -1301,7 +1208,7 @@
 
     .app-workspace-sidebar {
         border-right: 1px solid var(--workspace-border);
-        background: var(--workspace-navigation);
+        background: var(--workspace-sidebar);
         transition: width var(--motion-state) var(--ease-aceternity);
     }
 
@@ -1319,8 +1226,174 @@
         background: var(--workspace-navigation);
     }
 
+    .app-page-header {
+        position: sticky;
+        top: 0;
+        z-index: var(--z-toolbar);
+        min-height: var(--page-topbar-h);
+        padding-top: 10px;
+        padding-bottom: 10px;
+        background: var(--page-topbar-surface);
+        border-bottom: 1px solid var(--page-topbar-border);
+        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    }
+
+    .app-page-header-title {
+        font-size: var(--fs-title);
+        letter-spacing: -0.01em;
+    }
+
+    .canvas-topbar {
+        background: var(--canvas-topbar-surface);
+        border-bottom: 1px solid var(--canvas-topbar-border);
+        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    }
+
+    .app-workspace-main-row {
+        display: flex;
+        min-height: 0;
+        min-width: 0;
+        flex: 1 1 auto;
+        overflow: hidden;
+    }
+
+    .app-workspace-topbar {
+        position: relative;
+        z-index: var(--z-toolbar);
+        height: var(--page-topbar-h);
+        background: var(--page-topbar-surface);
+        border-color: var(--page-topbar-border);
+        box-shadow: 0 10px 24px -20px color-mix(in srgb, var(--workspace-border) 85%, transparent);
+        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+    }
+
+    .app-workspace-topbar-icon-button {
+        display: inline-flex;
+        width: 36px;
+        height: 36px;
+        flex: 0 0 auto;
+        align-items: center;
+        justify-content: center;
+        border-radius: var(--r-md);
+        color: color-mix(in srgb, var(--foreground) 58%, transparent);
+        transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out;
+    }
+
+    .app-workspace-topbar-icon-button:hover {
+        background: var(--surface-hover);
+        color: var(--foreground);
+    }
+
+    .app-workspace-topbar-icon-button:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--workspace-accent) 46%, transparent);
+        outline-offset: -2px;
+    }
+
+    /* 品牌区：∞ 标 + 影策 字标，hover 加深强调 */
+    .app-workspace-brand-link {
+        border-radius: var(--r-md);
+    }
+
+    .app-workspace-brand-mark {
+        transition: box-shadow var(--motion-instant) ease-out;
+    }
+
+    .app-workspace-brand-wordmark {
+        color: color-mix(in srgb, var(--foreground) 78%, transparent);
+        letter-spacing: 0.01em;
+        transition: color var(--motion-instant) ease-out;
+    }
+
+    .app-workspace-brand-link:hover .app-workspace-brand-wordmark,
+    .app-workspace-brand-link:focus-visible .app-workspace-brand-wordmark {
+        color: var(--foreground);
+    }
+
+    .app-workspace-brand-link:hover .app-workspace-brand-mark {
+        box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 24%, transparent);
+    }
+
+    .app-workspace-brand-link:focus-visible {
+        outline: 2px solid color-mix(in srgb, var(--workspace-accent) 46%, transparent);
+        outline-offset: 3px;
+    }
+
+    .app-workspace-rail {
+        width: auto;
+        min-width: 0;
+        flex: 1 1 auto;
+    }
+
+    .app-workspace-rail-header,
+    .app-workspace-rail-footer {
+        flex: 0 0 auto;
+    }
+
+    .app-workspace-rail-middle {
+        flex: 1 1 auto;
+    }
+
+    .app-workspace-shell.is-spatial .app-workspace-rail .app-workspace-rail-tile {
+        width: 40px !important;
+        height: 40px !important;
+        border-radius: var(--r-md);
+        margin-bottom: 0 !important;
+    }
+
+    .app-workspace-rail nav {
+        padding: 0 !important;
+    }
+
+    .app-workspace-rail nav + nav {
+        margin-top: var(--space-4) !important;
+    }
+
+    .app-workspace-rail [title*="积分"] {
+        border-radius: var(--r-md) !important;
+    }
+
+    .app-workspace-rail .app-workspace-rail-tile svg,
+    .app-workspace-rail .app-workspace-account-icon {
+        width: var(--rail-icon-size);
+        height: var(--rail-icon-size);
+    }
+
+    /* 侧栏轨道：默认 / 悬停 / 激活三态成对定义 */
+    .app-workspace-rail .app-workspace-nav-link {
+        color: color-mix(in srgb, var(--foreground) 55%, transparent);
+        transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out;
+    }
+
+    .app-workspace-rail .app-workspace-nav-link:hover:not(.is-active) {
+        background: var(--surface-hover);
+        color: var(--foreground);
+    }
+
+    .app-workspace-rail .app-workspace-nav-link.is-active {
+        background: var(--workspace-accent-soft) !important;
+        color: var(--foreground) !important;
+        box-shadow: none !important;
+    }
+
+    .app-workspace-rail .app-workspace-nav-link.is-active::before {
+        display: block !important;
+        left: -8px;
+        width: 2px;
+        height: 18px;
+        background: var(--workspace-accent);
+    }
+
+    /* 底部账号区：40px 触点 + 头像 hover 反馈增强 */
+    .app-workspace-rail-footer button:hover > span:first-child {
+        box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 22%, transparent);
+    }
+
+    .app-workspace-rail-footer button:hover .app-workspace-account-icon {
+        color: var(--foreground);
+    }
+
     .app-workspace-nav-link.is-active {
-        background: color-mix(in srgb, var(--foreground) 6%, transparent);
+        background: var(--surface-hover);
         color: var(--foreground);
     }
 
@@ -1347,7 +1420,7 @@
     }
 
     .app-workspace-icon-button:hover {
-        background: color-mix(in srgb, var(--foreground) 6%, transparent);
+        background: var(--surface-hover);
         color: var(--foreground);
     }
 
@@ -1465,8 +1538,8 @@
         isolation: isolate;
         background: var(--creation-bg);
         color: var(--creation-text);
-        backdrop-filter: blur(18px) saturate(112%);
-        -webkit-backdrop-filter: blur(18px) saturate(112%);
+        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
     }
 
     .dark .creation-home {
@@ -1497,8 +1570,8 @@
         background: var(--creation-surface);
         color: var(--creation-muted);
         box-shadow: 0 8px 24px rgba(31, 37, 45, .06), inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
-        backdrop-filter: blur(18px) saturate(125%);
-        -webkit-backdrop-filter: blur(18px) saturate(125%);
+        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
         transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
     }
 
@@ -2997,7 +3070,7 @@
             background: var(--workspace-canvas);
         }
         .app-workspace-shell.is-spatial .app-workspace-sidebar {
-            width: 88px !important;
+            width: var(--workspace-sidebar-width, 88px) !important;
             border: 0;
             border-radius: 0;
             background: var(--workspace-canvas);
@@ -3039,6 +3112,10 @@
         .app-workspace-shell.is-spatial .app-workspace-nav-link.is-active { background: transparent; color: var(--foreground); box-shadow: none; }
         .app-workspace-shell.is-spatial .app-workspace-nav-link.is-active::before { display: none; }
         .app-workspace-shell.is-spatial .app-workspace-sidebar > div:last-child { border-top: 0; padding: 12px 10px 18px; }
+        .app-workspace-shell.is-spatial[data-sidebar-collapsed="true"] .app-workspace-nav-link > span,
+        .app-workspace-shell.is-spatial[data-sidebar-collapsed="true"] .app-workspace-sidebar > div:first-child a > span:not(.app-workspace-brand-mark) {
+            display: none !important;
+        }
     }
 
     @media (max-width: 800px) {
@@ -3420,10 +3497,262 @@
     .app-canvas-selection-toolbar { border-color: color-mix(in srgb, var(--workspace-accent) 25%, var(--workspace-border)); background: color-mix(in srgb, var(--workspace-accent) 7%, transparent); color: color-mix(in srgb, var(--workspace-accent) 48%, var(--foreground)); }
 
     /* 作品库式页面：与画布列表共享浏览节奏，内容优先于边框和工具栏。 */
-    .library-page .app-page-header { border-bottom: 0; padding-bottom: 4px; }
-    .library-page .app-page-header h1 { font-size: var(--fs-heading-lg); font-weight: 620; }
+    .library-page .app-page-header { border-bottom: 0; }
+    .library-page .app-page-header h1 { font-size: var(--fs-title); font-weight: 620; }
     .library-page .app-page-header p { max-width: 560px; }
+    .library-page .app-page-header {
+        background:
+            radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--workspace-accent) 7%, transparent), transparent 42%),
+            var(--surface-secondary);
+    }
+    .library-page .app-page-header h1 {
+        letter-spacing: -0.01em;
+    }
+    .app-projects-header-meta {
+        display: inline-flex;
+        align-items: center;
+        border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+        border-radius: var(--r-full);
+        background: color-mix(in srgb, var(--foreground) 4%, transparent);
+        padding: 3px 10px;
+        color: color-mix(in srgb, var(--foreground) 58%, transparent);
+        font-size: var(--fs-tiny);
+        font-weight: 560;
+        font-variant-numeric: tabular-nums;
+    }
+    /* 全站统一页头毛玻璃 band：素材库、画布库、任务中心、短剧创作、技能库、积分中心、首页 */
+    .studio-band {
+        position: relative;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
+        border-radius: var(--r-lg);
+        background:
+            radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--workspace-accent) 7%, transparent), transparent 38%),
+            color-mix(in srgb, var(--foreground) 1.5%, transparent);
+        box-shadow: var(--elevation-card), var(--elevation-hairline);
+        padding: 2px 2px 0;
+    }
 
+    .studio-band .app-page-header {
+        background: transparent;
+        border-bottom: 0;
+        padding-inline: 14px;
+    }
+
+    .canvas-library-page .studio-band .canvas-library-discovery {
+        border: 0;
+        border-top: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        margin-top: 0;
+    }
+
+    .canvas-library-page .canvas-library-frame {
+        display: flex;
+        min-height: 0;
+        flex-direction: column;
+        border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
+        border-radius: var(--r-lg);
+        background: color-mix(in srgb, var(--foreground) 1%, transparent);
+        padding: 14px;
+    }
+
+    .assets-library-page .assets-library-frame,
+    .task-library-page .task-library-frame {
+        min-height: 0;
+    }
+
+    .settings-library-frame {
+        overflow: hidden;
+        border-radius: 0;
+        border: 0;
+        background: transparent;
+        padding: 0;
+    }
+
+    /* 设置页方案 A：桌面偏好面板 */
+    .settings-page .settings-topbar {
+        display: flex;
+        min-height: 40px;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+        padding: 0 14px;
+        background: color-mix(in srgb, var(--foreground) 2%, transparent);
+    }
+
+    .settings-nav-panel {
+        border-right: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+        background: color-mix(in srgb, var(--foreground) 1.5%, transparent);
+    }
+
+    .settings-nav-item {
+        position: relative;
+    }
+
+    .settings-nav-item.is-active {
+        background: var(--workspace-accent-soft);
+        color: var(--foreground);
+    }
+
+    .settings-nav-item.is-active::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 8px;
+        bottom: 8px;
+        width: 3px;
+        border-radius: 0 3px 3px 0;
+        background: var(--workspace-accent);
+    }
+
+    .settings-surface-card {
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
+        border-radius: var(--r-lg);
+        background: color-mix(in srgb, var(--foreground) 1%, transparent);
+        padding: 16px;
+        box-shadow: var(--elevation-card), var(--elevation-hairline);
+    }
+
+    .settings-section-card {
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+        border-radius: var(--r-lg);
+        background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
+        padding: 16px;
+        box-shadow: var(--elevation-card), var(--elevation-hairline);
+    }
+
+    .settings-section-card + .settings-section-card {
+        margin-top: 12px;
+    }
+
+    .settings-page section[aria-labelledby^="channel-"] {
+        border-color: color-mix(in srgb, var(--foreground) 8%, transparent) !important;
+        border-radius: var(--r-lg);
+        background: color-mix(in srgb, var(--foreground) 2.5%, transparent);
+        box-shadow: var(--elevation-card), var(--elevation-hairline);
+        transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
+    }
+
+    .settings-page section[aria-labelledby^="channel-"]:hover {
+        border-color: color-mix(in srgb, var(--foreground) 16%, transparent) !important;
+        box-shadow: var(--elevation-card-hover), var(--elevation-hairline);
+    }
+
+    .settings-pane-header {
+        display: flex;
+        min-width: 0;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: 10px 14px;
+        margin-bottom: 14px;
+    }
+
+    .settings-pane-header h2 {
+        margin: 0;
+        font-size: var(--fs-body-lg);
+        font-weight: 620;
+        letter-spacing: 0;
+    }
+
+    .settings-pane-header p {
+        margin: 4px 0 0;
+        color: color-mix(in srgb, var(--foreground) 48%, transparent);
+        font-size: var(--fs-caption);
+        line-height: 1.6;
+    }
+
+    .settings-field-group-label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 4px 0 2px;
+        color: color-mix(in srgb, var(--foreground) 42%, transparent);
+        font-size: var(--fs-tiny);
+        font-weight: 560;
+        letter-spacing: 0.02em;
+    }
+
+    .settings-field-group-label::after {
+        content: "";
+        height: 1px;
+        flex: 1;
+        background: color-mix(in srgb, var(--foreground) 7%, transparent);
+    }
+
+    .settings-channel-list {
+        padding-top: 2px;
+    }
+
+    .settings-page :where(.ant-input, .ant-input-affix-wrapper, .ant-select-selector, .ant-input-number, .ant-picker) {
+        min-height: 34px;
+        border-radius: var(--r-md) !important;
+    }
+
+    .settings-page :where(.ant-input, .ant-input-affix-wrapper, .ant-select-selector) {
+        border-color: color-mix(in srgb, var(--foreground) 14%, transparent) !important;
+        background: color-mix(in srgb, var(--foreground) 2.5%, transparent) !important;
+        box-shadow: none !important;
+    }
+
+    .settings-page :where(.ant-input:hover, .ant-input-affix-wrapper:hover, .ant-select-selector:hover) {
+        border-color: color-mix(in srgb, var(--foreground) 24%, transparent) !important;
+    }
+
+    .settings-page :where(.ant-input:focus, .ant-input-affix-wrapper-focused, .ant-select-focused .ant-select-selector) {
+        border-color: color-mix(in srgb, var(--workspace-accent) 46%, transparent) !important;
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 10%, transparent) !important;
+    }
+
+    .settings-page .ant-btn {
+        border-radius: var(--r-md);
+    }
+
+    .settings-page .ant-form-item-explain-error,
+    .settings-page .ant-form-item-explain-warning {
+        border-radius: var(--r-sm);
+        padding: 4px 8px;
+        font-size: var(--fs-tiny);
+    }
+
+    .canvas-library-page .canvas-library-discovery {
+        border-radius: var(--r-lg);
+        background: color-mix(in srgb, var(--foreground) 2%, transparent);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 6%, transparent);
+        padding: 10px 12px;
+    }
+
+    .canvas-library-page .canvas-library-grid {
+        flex: 1;
+    }
+
+    .canvas-library-page .canvas-library-search {
+        border-radius: var(--r-md);
+        background: color-mix(in srgb, var(--foreground) 4%, transparent);
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 8%, transparent);
+    }
+
+    .canvas-library-page .canvas-library-search:focus-within {
+        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 46%, transparent);
+    }
+
+    .canvas-library-page .app-canvas-project-card.is-library {
+        border-radius: var(--r-lg);
+    }
+
+    .canvas-library-page .app-canvas-project-card.is-library:hover {
+        border-radius: var(--r-lg);
+    }
+
+    /* 任务行卡片外观与 hover 已并入下方 .task-record-row 唯一源规则（本类仅任务页使用）。 */
+    .library-page .app-page-header .workspace-signal-icon,
+    .library-page .app-page-header .workspace-signal-icon > svg { transition: transform 420ms var(--motion-ease-out); }
+    .library-page .app-page-header:hover .workspace-signal-icon { transform: rotate(-6deg) scale(1.04); }
     /* 页面头部按钮优化 - 去除重边框 */
     html:not(.dark) .library-page .app-page-header .ant-btn,
     html:not(.dark) .canvas-library-page .app-page-header .ant-btn {
@@ -3489,9 +3818,29 @@
     .project-library-grid .library-create-card:hover .library-create-cover svg, .project-library-grid .library-create-card:focus-visible .library-create-cover svg { transform: none; }
     .project-library-cover { position: relative; display: flex; aspect-ratio: 16 / 9; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--project-library-cover-surface) !important; }
     .library-card:hover .project-library-cover { background: var(--project-library-cover-surface) !important; }
+    .project-library-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--motion-ease-out), filter 420ms ease-out; }
+    .library-card:hover .project-library-cover-art, .library-card:focus-within .project-library-cover-art { transform: scale(1.035); filter: saturate(1.08); }
+    .project-library-cover-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.42) 100%); }
+    .project-library-cover-delete {
+        position: absolute;
+        z-index: 3;
+        right: 10px;
+        top: 10px;
+        display: grid;
+        width: 28px;
+        height: 28px;
+        place-items: center;
+        border: 1px solid rgba(255, 255, 255, 0.18);
+        border-radius: var(--r-md);
+        background: rgba(10, 10, 10, 0.55);
+        color: rgba(255, 255, 255, 0.82);
+        backdrop-filter: blur(8px);
+        transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms var(--motion-ease-out);
+    }
+    .project-library-cover-delete:hover { background: rgba(190, 30, 30, 0.82); color: #ffffff; transform: scale(1.06); }
     .project-library-cover-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--project-library-icon-surface); color: color-mix(in srgb, var(--foreground) 58%, transparent); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
     .project-library-cover-icon svg { width: 26px; height: 26px; }
-    .project-library-cover-ratio, .project-library-cover-stage { position: absolute; z-index: 1; bottom: 14px; border-radius: var(--r-full); background: color-mix(in srgb, var(--background) 62%, transparent); padding: 5px 10px; color: color-mix(in srgb, var(--foreground) 74%, transparent); font-size: var(--fs-tiny); backdrop-filter: blur(8px); }
+    .project-library-cover-ratio, .project-library-cover-stage { position: absolute; z-index: 2; bottom: 14px; border-radius: var(--r-full); background: color-mix(in srgb, var(--background) 62%, transparent); padding: 5px 10px; color: color-mix(in srgb, var(--foreground) 74%, transparent); font-size: var(--fs-tiny); backdrop-filter: blur(8px); }
     .project-library-cover-ratio { left: 14px; font-variant-numeric: tabular-nums; }
     .project-library-cover-stage { right: 14px; }
     .project-library-body { display: block; padding: 15px 14px 16px; }
@@ -3510,27 +3859,28 @@
     /* 任务列表：整屏几十条长 prompt 极易糊成一片，靠三件事拉开密度——
        行距（min-height + gap）、标题只给一行且宽度封顶、次要信息降到 42% 前景色。 */
     .task-record-list { display: grid; gap: 2px; margin-top: 10px; }
-    .task-record-row { position: relative; display: grid; min-width: 0; grid-template-columns: 84px minmax(0, 1fr) 120px 104px 104px; align-items: center; gap: 18px; min-height: 92px; border-radius: var(--r-lg); background: transparent; padding: 12px 14px; transition: background-color 180ms ease-out; }
-    .task-record-row::after { position: absolute; inset-inline: 14px; bottom: 0; height: 1px; background: color-mix(in srgb, var(--foreground) 6%, transparent); content: ""; }
-    .task-record-row:last-child::after { display: none; }
-    .task-record-row:hover, .task-record-row:focus-within { background: color-mix(in srgb, var(--foreground) 4%, transparent); }
-    .task-record-row:hover::after, .task-record-row:focus-within::after { opacity: 0; }
-    .task-record-row > .group { width: 84px; height: 60px; }
-    .task-record-row > span:not(.task-record-billing-empty) { width: 84px; height: 60px; border: 0; border-radius: var(--r-md); }
-    .task-record-row > .group img, .task-record-row > .group video { height: 60px; width: 84px; object-fit: cover; }
-    .task-record-row > .group > span:first-of-type { border-radius: var(--r-md); }
+    .task-record-row { position: relative; display: grid; min-width: 0; grid-template-columns: 84px minmax(0, 1fr) 120px 104px 104px; align-items: center; gap: 18px; min-height: 92px; margin-bottom: 6px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--foreground) 1.5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 5%, transparent); padding: 12px 14px; transition: background-color 180ms ease-out, box-shadow 180ms ease-out; }
+    .task-record-row:hover, .task-record-row:focus-within { background: color-mix(in srgb, var(--foreground) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent); }
     .task-record-main { min-width: 0; }
     .task-record-heading { display: flex; min-width: 0; align-items: baseline; gap: 10px; overflow: hidden; }
     /* 标题封顶 68ch：超宽屏下一行能塞 200+ 汉字，读者反而找不到落点。 */
     .task-record-title { display: block; min-width: 0; max-width: 68ch; flex: 0 1 auto; overflow: hidden; border: 0; background: transparent; padding: 0; color: color-mix(in srgb, var(--foreground) 92%, transparent); text-align: left; font-size: var(--fs-body); font-weight: 560; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
     .task-record-title:hover { color: var(--foreground); }
     .task-record-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; border-radius: var(--r-full); background: color-mix(in srgb, var(--foreground) 5%, transparent); padding: 3px 9px 3px 7px; color: color-mix(in srgb, var(--foreground) 52%, transparent); font-size: var(--fs-tiny); line-height: 1.4; white-space: nowrap; }
-    .task-record-dot { display: block; width: 5px; height: 5px; flex: 0 0 auto; border-radius: var(--r-full); }
-    .task-record-dot.is-pulsing { animation: task-record-dot-pulse 1.8s ease-in-out infinite; }
-    @keyframes task-record-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
-    @media (prefers-reduced-motion: reduce) { .task-record-dot.is-pulsing { animation: none; } }
+    .task-record-dot { position: relative; display: block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: var(--r-full); }
+    .task-record-dot.is-pulsing::after { position: absolute; inset: -4px; border-radius: var(--r-full); background: inherit; opacity: 0.45; content: ""; animation: task-record-dot-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
+    @keyframes task-record-dot-ping { 75%, 100% { transform: scale(2.1); opacity: 0; } }
+    @media (prefers-reduced-motion: reduce) { .task-record-dot.is-pulsing::after { animation: none; } }
     .task-record-status.is-failed { background: color-mix(in srgb, var(--palette-status-error) 12%, transparent); color: color-mix(in srgb, var(--palette-status-error) 74%, var(--foreground)); }
     .task-record-status.is-active { background: color-mix(in srgb, var(--palette-status-warning) 12%, transparent); color: color-mix(in srgb, var(--palette-status-warning) 74%, var(--foreground)); }
+    .task-record-status.is-success { background: color-mix(in srgb, var(--palette-status-success) 10%, transparent); color: color-mix(in srgb, var(--palette-status-success) 74%, var(--foreground)); }
+    .task-record-dot.is-success { background: var(--palette-status-success); }
+    .task-record-dot.is-active { background: var(--palette-status-warning); }
+    .task-record-dot.is-queued { background: var(--palette-status-loading); }
+    .task-record-dot.is-failed { background: var(--palette-status-error); }
+    .task-record-dot.is-idle { background: color-mix(in srgb, var(--foreground) 30%, transparent); }
+    .task-record-thumb { position: relative; display: grid; width: 84px; height: 60px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--foreground) 4%, transparent); color: color-mix(in srgb, var(--foreground) 28%, transparent); }
+    .task-record-thumb img, .task-record-thumb video { width: 100%; height: 100%; object-fit: cover; }
     .task-record-meta { display: flex; min-width: 0; align-items: center; gap: 8px; margin-top: 7px; overflow: hidden; color: color-mix(in srgb, var(--foreground) 40%, transparent); font-size: var(--fs-label); white-space: nowrap; }
     .task-record-meta-canvas { display: inline-flex; min-width: 0; align-items: center; gap: 4px; overflow: hidden; border-left: 1px solid color-mix(in srgb, var(--foreground) 11%, transparent); padding-left: 8px; text-overflow: ellipsis; }
     .task-record-meta-canvas svg { flex: 0 0 auto; opacity: .7; }
@@ -3555,6 +3905,73 @@
     .task-record-actions .ant-btn { width: 32px; height: 32px; padding: 0; border-radius: var(--r-md); }
     .task-record-row:hover .task-record-actions, .task-record-row:focus-within .task-record-actions { opacity: 1; transform: translateX(0); }
 
+    /* open-vetta 语言补充：渐变标题、统计胶囊、视图切换、分组视图、网格卡片。
+       全部走既有 token（--foreground / --workspace-accent / --palette-status-* / --r-*），不引入孤立字面值。 */
+    @supports ((-webkit-background-clip: text) or (background-clip: text)) {
+        .task-library-page .app-page-header-title {
+            background: linear-gradient(120deg, var(--foreground) 18%, color-mix(in srgb, var(--workspace-accent) 72%, var(--foreground)) 55%, var(--workspace-accent));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+    }
+    .task-stat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
+    .task-stat-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); border-radius: var(--r-full); background: color-mix(in srgb, var(--foreground) 3%, transparent); color: color-mix(in srgb, var(--foreground) 52%, transparent); font-size: var(--fs-label); line-height: 1; transition: border-color 160ms ease-out, color 160ms ease-out, background-color 160ms ease-out; }
+    .task-stat-pill b { color: var(--foreground); font-weight: 620; font-variant-numeric: tabular-nums; }
+    .task-stat-pill.is-clickable { cursor: pointer; }
+    .task-stat-pill.is-clickable:hover { border-color: color-mix(in srgb, var(--foreground) 18%, transparent); background: color-mix(in srgb, var(--foreground) 5%, transparent); color: var(--foreground); }
+    .task-stat-pill.is-fail { color: color-mix(in srgb, var(--palette-status-error) 80%, var(--foreground)); }
+    .task-stat-pill.is-fail b { color: color-mix(in srgb, var(--palette-status-error) 88%, var(--foreground)); }
+    .task-stat-pill.is-active-filter { border-color: color-mix(in srgb, var(--workspace-accent) 34%, transparent); background: color-mix(in srgb, var(--workspace-accent) 8%, transparent); color: var(--foreground); }
+    .task-stat-dot { display: block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: var(--r-full); background: currentColor; }
+    .task-stat-dot.is-run { color: var(--palette-status-warning); }
+    .task-stat-dot.is-ok { color: var(--palette-status-success); }
+    .task-stat-dot.is-bad { color: var(--palette-status-error); }
+    .task-view-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--r-md); background: color-mix(in srgb, var(--foreground) 5%, transparent); }
+    /* AntD 6 按钮样式经 CSS-in-JS 运行时注入（晚于本文件），hover 组合特异性达 .ant-btn:not(:disabled):not(.ant-btn-disabled):hover (0,4,0)，必须用 !important 才能稳定覆盖；限定在本组件作用域内，不污染全局。 */
+    .task-view-switch .ant-btn { border: 0 !important; box-shadow: none !important; background: transparent !important; color: color-mix(in srgb, var(--foreground) 48%, transparent) !important; }
+    .task-view-switch .ant-btn:hover { color: var(--foreground) !important; background: color-mix(in srgb, var(--foreground) 7%, transparent) !important; }
+    .task-view-switch .ant-btn.ant-btn-primary { background: color-mix(in srgb, var(--foreground) 10%, transparent) !important; color: var(--foreground) !important; }
+    .task-group { margin-bottom: 22px; }
+    .task-group:last-child { margin-bottom: 0; }
+    .task-group-head { display: flex; align-items: center; gap: 12px; padding: 0 2px 10px; }
+    .task-group-ic { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: var(--r-md); background: color-mix(in srgb, var(--workspace-accent) 12%, transparent); color: var(--workspace-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 22%, transparent); }
+    .task-group-ic svg { width: 17px; height: 17px; }
+    .task-group-name { display: flex; min-width: 0; align-items: center; gap: 9px; font-size: var(--fs-heading-lg); font-weight: 620; letter-spacing: -.01em; }
+    .task-group-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .task-group-count { flex: 0 0 auto; border-radius: var(--r-full); background: color-mix(in srgb, var(--foreground) 7%, transparent); padding: 3px 9px; color: color-mix(in srgb, var(--foreground) 50%, transparent); font-size: var(--fs-tiny); font-weight: 500; font-variant-numeric: tabular-nums; }
+    .task-group-sub { display: block; margin-top: 4px; color: color-mix(in srgb, var(--foreground) 40%, transparent); font-size: var(--fs-label); }
+    .task-group-sub b.is-bad { color: color-mix(in srgb, var(--palette-status-error) 80%, var(--foreground)); font-weight: 560; }
+    .task-group-reset { display: inline-flex; align-items: center; gap: 5px; height: 28px; margin-left: auto; flex: 0 0 auto; border: 0; border-radius: var(--r-full); background: color-mix(in srgb, var(--palette-status-error) 10%, transparent); padding: 0 11px; color: color-mix(in srgb, var(--palette-status-error) 82%, var(--foreground)); font-size: var(--fs-label); font-weight: 550; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out; }
+    .task-group-reset:hover { background: color-mix(in srgb, var(--palette-status-error) 18%, transparent); color: color-mix(in srgb, var(--palette-status-error) 92%, var(--foreground)); }
+    .task-group-reset svg { width: 13px; height: 13px; }
+    .task-grid-view { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; margin-top: 10px; }
+    .task-grid-card { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--foreground) 1.5%, transparent); box-shadow: var(--elevation-hairline); transition: border-color 200ms ease-out, background-color 200ms ease-out; }
+    .task-grid-card:hover, .task-grid-card:focus-within { border-color: color-mix(in srgb, var(--foreground) 13%, transparent); background: color-mix(in srgb, var(--foreground) 3.5%, transparent); }
+    .task-grid-card.is-attention { border-color: color-mix(in srgb, var(--palette-status-error) 22%, transparent); }
+    .task-grid-thumb { position: relative; display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--foreground) 4%, transparent); color: color-mix(in srgb, var(--foreground) 30%, transparent); }
+    .task-grid-thumb > svg { width: 26px; height: 26px; }
+    .task-grid-thumb img, .task-grid-thumb video { width: 100%; height: 100%; object-fit: cover; }
+    .task-grid-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: color-mix(in srgb, var(--background) 58%, transparent); opacity: 0; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: opacity 200ms ease-out; }
+    .task-grid-card:hover .task-grid-overlay, .task-grid-card:focus-within .task-grid-overlay { opacity: 1; }
+    .task-grid-overlay .ant-btn { width: 32px; height: 32px; border-radius: var(--r-md); background: color-mix(in srgb, var(--background) 78%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 14%, transparent); color: var(--foreground); }
+    .task-grid-overlay .ant-btn:hover { color: var(--foreground); background: var(--background); }
+    .task-grid-body { padding: 10px 12px 11px; }
+    .task-grid-title { display: block; width: 100%; min-width: 0; overflow: hidden; border: 0; background: transparent; padding: 0; color: color-mix(in srgb, var(--foreground) 90%, transparent); text-align: left; font-size: var(--fs-body); font-weight: 560; line-height: 1.45; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; }
+    .task-grid-title:hover { color: var(--foreground); }
+    .task-grid-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
+    .task-grid-status { display: inline-flex; min-width: 0; align-items: center; gap: 6px; color: color-mix(in srgb, var(--foreground) 48%, transparent); font-size: var(--fs-label); white-space: nowrap; }
+    .task-grid-status.is-failed { color: color-mix(in srgb, var(--palette-status-error) 80%, var(--foreground)); }
+    .task-grid-status.is-active { color: color-mix(in srgb, var(--palette-status-warning) 80%, var(--foreground)); }
+    .task-grid-status.is-success { color: color-mix(in srgb, var(--palette-status-success) 80%, var(--foreground)); }
+    .task-grid-date { flex: 0 0 auto; color: color-mix(in srgb, var(--foreground) 36%, transparent); font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
+    @media (max-width: 640px) {
+        .task-group-name { flex-wrap: wrap; }
+        .task-group-reset { margin-left: 0; }
+        .task-stat-pills { gap: 6px; }
+        .task-stat-pill { height: 28px; padding: 0 10px; }
+    }
+
     /* 项目概览：原本是「有边框的浅色盒子 + 一堆等重小字」，层级读不出来。
        改成：主区留白撑开、标题字阶拉高、右栏用背景色而非边框分隔、流水线行给足行高。 */
     .project-overview-focus { overflow: hidden; border-radius: var(--r-xl); background: var(--surface-card); box-shadow: var(--elevation-card), var(--elevation-hairline); }
@@ -3633,8 +4050,114 @@
         .project-pipeline-arrow { display: none; }
     }
 
+    /* 导演工作台：项目详情共享壳与五个子页面的统一质感层 */
+    .project-workbench-header {
+        position: relative;
+        box-shadow: 0 1px 0 color-mix(in srgb, var(--foreground) 5%, transparent), 0 10px 30px -24px color-mix(in srgb, var(--foreground) 16%, transparent);
+    }
+
+    .project-workbench-header::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        height: 2px;
+        background: linear-gradient(90deg, color-mix(in srgb, var(--workspace-accent) 72%, transparent), color-mix(in srgb, var(--workspace-accent) 24%, transparent) 48%, transparent 82%);
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    .project-workbench-header h1 {
+        letter-spacing: 0.01em;
+    }
+
+    .project-overview-focus {
+        position: relative;
+        background:
+            radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--workspace-accent) 6%, transparent), transparent 34%),
+            radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--palette-status-info, var(--workspace-accent)) 5%, transparent), transparent 30%),
+            var(--surface-card);
+    }
+
+    .project-overview-title {
+        letter-spacing: -0.02em;
+    }
+
+    .project-pipeline-row {
+        transition: background-color 180ms ease-out, transform 180ms var(--motion-ease-out);
+    }
+
+    .project-pipeline-row:hover {
+        transform: translateX(2px);
+    }
+
+    .project-pipeline-index {
+        border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+    }
+
+    /* 章节编辑器：稿纸式正文区 */
+    .project-chapter-editor-scroll {
+        background:
+            linear-gradient(180deg, color-mix(in srgb, var(--foreground) 1.6%, transparent), transparent 96px),
+            color-mix(in srgb, var(--foreground) 1.4%, transparent) !important;
+    }
+
+    .project-chapter-editor-wrap {
+        width: 100%;
+        max-width: none;
+        margin: 0 auto;
+        padding: 34px 40px 64px;
+    }
+
+    .project-chapter-editor-wrap .ProseMirror {
+        min-height: calc(100vh - 300px);
+        outline: 0;
+        color: color-mix(in srgb, var(--foreground) 88%, transparent);
+        font-size: 15px;
+        line-height: 1.9;
+    }
+
+    .project-chapter-editor-wrap .ProseMirror p {
+        margin: 0 0 1em;
+    }
+
+    .project-chapter-editor-wrap .ProseMirror h1,
+    .project-chapter-editor-wrap .ProseMirror h2,
+    .project-chapter-editor-wrap .ProseMirror h3 {
+        letter-spacing: 0;
+        line-height: 1.4;
+    }
+
+    /* 画布与资产网格：呼吸感与统一表面 */
+    .project-workbench-page .project-library-grid {
+        gap: 26px 20px;
+    }
+
+    .project-workbench-page .assets-library-grid {
+        gap: 22px 18px;
+    }
+
+    .project-workbench-page .asset-library-card,
+    .project-workbench-page .app-canvas-project-card.is-library {
+        border-radius: var(--r-lg);
+    }
+
+    /* 设置页分区收拢 */
+    .project-workbench-page section.border-b,
+    .project-workbench-page section.border-y {
+        border-color: color-mix(in srgb, var(--foreground) 9%, transparent) !important;
+    }
+
+    @media (max-width: 640px) {
+        .project-chapter-editor-wrap {
+            padding: 24px 20px 48px;
+        }
+    }
+
     /* 全局素材库需要等高；项目资产页按内容自然高度，角色设定再多也不拉伸媒体卡。 */
     .assets-library-page .assets-library-grid { align-items: stretch; }
+    .assets-library-page .assets-library-grid { gap: var(--space-5) var(--space-4); }
     .assets-library-page .assets-library-grid > .asset-library-card, .assets-library-page .assets-library-grid > .library-create-card { height: 100%; }
     .assets-library-page .assets-library-grid > .asset-library-card { display: flex; flex-direction: column; }
     .assets-library-page .assets-library-grid > .asset-library-card > button:last-child { flex: 1 1 auto; }
@@ -3717,7 +4240,6 @@
     .skill-card-owner-flag { flex: 1 1 auto; color: color-mix(in srgb, var(--foreground) 46%, transparent); font-size: var(--fs-caption); }
 
     .wallet-library-page .app-page-header { padding-bottom: 0; }
-    .wallet-library-page > div { max-width: 1520px; }
     .wallet-library-page .app-workspace-surface { border: 0; background: color-mix(in srgb, var(--workspace-surface-strong) 76%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 6%, transparent); }
     .wallet-library-page .credit-balance-card { border: 0; box-shadow: 0 24px 60px color-mix(in srgb, var(--foreground) 14%, transparent), inset 0 1px 0 rgba(255, 228, 145, 0.16); }
     .wallet-library-page .wallet-ledger-panel { margin-top: 28px; }
@@ -3762,8 +4284,7 @@
         .project-library-grid, .project-assets-grid, .assets-library-grid, .skill-library-grid, .library-loading-grid { grid-template-columns: 1fr; gap: 22px; }
         .library-create-title, .project-library-heading strong, .skill-library-card h3 { font-size: var(--fs-body); }
         .task-record-row { grid-template-columns: 60px minmax(0, 1fr) 64px 92px; align-items: start; gap: 12px; min-height: 0; padding: 12px 8px; }
-        .task-record-row > .group, .task-record-row > span:not(.task-record-billing-empty) { width: 60px; height: 44px; }
-        .task-record-row::after { inset-inline: 8px; }
+        .task-record-row > .task-record-thumb { width: 60px; height: 44px; }
         .task-record-heading { flex-wrap: wrap; gap: 6px 8px; }
         .task-record-title { max-width: none; flex: 1 1 100%; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
         .task-record-meta-canvas { border-left: 0; padding-left: 0; }
@@ -3835,31 +4356,6 @@
         white-space: nowrap;
     }
 
-    .task-table-surface {
-        border-radius: 6px;
-        box-shadow: none;
-    }
-
-    .task-table-surface .ant-table-thead > tr > th {
-        height: 38px;
-        padding: 8px 12px !important;
-        background: color-mix(in srgb, var(--foreground) 4%, var(--background)) !important;
-        color: color-mix(in srgb, var(--foreground) 52%, transparent) !important;
-        font-size: 11px;
-        font-weight: 500;
-    }
-
-    .task-table-surface .ant-table-tbody > tr > td {
-        height: 72px;
-        padding: 10px 12px !important;
-        background: var(--background);
-        transition: background-color var(--motion-instant) ease-out;
-    }
-
-    .task-table-surface .ant-table-tbody > tr:hover > td {
-        background: color-mix(in srgb, var(--foreground) 2.5%, var(--background)) !important;
-    }
-
     .task-media-preview-modal .ant-modal-body {
         display: grid;
         min-height: 240px;
@@ -3868,18 +4364,6 @@
         background: #000;
     }
 
-    @media (max-width: 767px) {
-        .task-table-surface .ant-table-content table {
-            width: 100% !important;
-            min-width: 100% !important;
-        }
-
-        .task-table-surface .ant-table-tbody > tr > td {
-            height: auto;
-            padding: 12px !important;
-        }
-    }
-
     .wallet-ledger-table .ant-table-cell:nth-last-child(-n + 2) {
         white-space: nowrap;
     }
@@ -4047,6 +4531,39 @@
         transform: translateY(-1px);
     }
 
+    .canvas-style-picker-modal .ant-modal-container {
+        box-shadow:
+            0 30px 80px -30px color-mix(in srgb, var(--foreground) 28%, transparent),
+            var(--elevation-card),
+            var(--elevation-hairline);
+    }
+
+    .style-center-card {
+        border-radius: var(--r-lg);
+        box-shadow: var(--elevation-card);
+    }
+
+    .style-center-card.is-active {
+        box-shadow: inset 0 0 0 1px var(--workspace-accent), 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 14%, transparent);
+    }
+
+    .style-center-card-cover {
+        position: relative;
+    }
+
+    .style-center-card-cover::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity var(--motion-dur-fast) ease-out;
+    }
+
+    .style-center-card:hover .style-center-card-cover::after,
+    .style-center-card:focus-within .style-center-card-cover::after { opacity: 1; }
+
     .style-center-card-cover {
         display: block;
         width: 100%;
@@ -4116,6 +4633,20 @@
         color: color-mix(in srgb, var(--foreground) 48%, transparent);
     }
 
+    .canvas-style-picker-modal .canvas-style-center-shell {
+        background:
+            radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--workspace-accent) 6%, transparent), transparent 30%),
+            var(--cn-spatial-elevated, var(--background));
+    }
+
+    .canvas-style-picker-modal .style-center-workspace {
+        border-top: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+    }
+
+    .canvas-style-picker-modal .style-center-sidebar {
+        background: color-mix(in srgb, var(--foreground) 2%, transparent);
+    }
+
     .style-center-nav-item:focus-visible,
     .style-center-category-item:focus-visible,
     .style-center-icon-action:focus-visible,
@@ -4937,8 +5468,8 @@
         box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22) !important;
         overflow: hidden;
         padding: 0 !important;
-        backdrop-filter: blur(22px) saturate(118%);
-        -webkit-backdrop-filter: blur(22px) saturate(118%);
+        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
     }
 
     .dark .canvas-composer-popover-surface {
@@ -7115,6 +7646,25 @@ html:not(.dark) .creation-history-drawer-root {
     color: color-mix(in srgb, var(--foreground) 76%, transparent) !important;
 }
 
+/* 图标 + 文字 Tag 对齐：AntD 6 的 icon 是 svg 直接子节点，需整体内联居中 */
+.ant-tag:has(> svg) {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    line-height: 1.5;
+}
+
+.ant-tag > svg {
+    display: inline-flex;
+    flex: 0 0 auto;
+}
+
+.ant-tag > .ant-tag-content {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+}
+
 body.app-spatial-overlays :where(.ant-dropdown-menu, .ant-select-dropdown, .ant-popover-inner, .ant-modal-content, .ant-drawer-content, .ant-message-notice-content, .ant-notification-notice) {
     background: var(--popover) !important;
     background-image: none !important;
@@ -7140,12 +7690,17 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
 }
 
 .app-workspace-shell.is-spatial .app-workspace-sidebar {
-    background: var(--workspace-navigation) !important;
+    background: var(--workspace-sidebar) !important;
     background-image: none !important;
     box-shadow: none !important;
     backdrop-filter: none !important;
 }
 
+/* 显式兜底：Tailwind 生成的 hover 背景在部分层叠顺序下未生效，这里保持语义 token 一致。 */
+.hover\:bg-surface-hover:hover {
+    background-color: var(--surface-hover);
+}
+
 /* 空态把视觉锚点放在输入框上方，保留足够留白让首个动作自然下沉。 */
 .creation-empty-workspace {
     justify-content: flex-start;
@@ -7319,6 +7874,544 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
 .library-modal :where(.ant-input:focus, .ant-input-affix-wrapper-focused, .ant-select-focused .ant-select-selector) { border-color: color-mix(in srgb, var(--workspace-accent) 46%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 10%, transparent) !important; }
 .library-modal .ant-btn-primary { border: 0; border-radius: var(--r-md); background: var(--btn-solid-bg); color: var(--btn-solid-fg); box-shadow: none; font-weight: 620; }
 .library-modal .ant-btn-default { border-color: color-mix(in srgb, var(--foreground) 15%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--foreground) 4%, transparent); }
+
+/* 短剧创作：AI 创建入口面板与创建弹窗来源/画风选择 */
+.app-story-create-panel {
+    position: relative;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: var(--r-lg);
+    background:
+        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--workspace-accent) 7%, transparent), transparent 36%),
+        radial-gradient(circle at 96% 100%, color-mix(in srgb, var(--workspace-accent) 5%, transparent), transparent 32%),
+        var(--surface-card);
+    box-shadow: var(--elevation-card), var(--elevation-hairline);
+}
+
+.app-story-create-panel::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: linear-gradient(180deg, var(--workspace-accent) 0%, color-mix(in srgb, var(--workspace-accent) 42%, transparent) 100%);
+    opacity: 0.72;
+}
+
+.app-story-create-head {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px 16px 14px 19px;
+    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+}
+
+.app-story-create-title {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 11px;
+}
+
+.app-story-create-mark {
+    display: grid;
+    width: 34px;
+    height: 34px;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: var(--r-md);
+    background: var(--workspace-accent-soft);
+    color: var(--workspace-accent);
+}
+
+.app-story-create-title h2 {
+    margin: 0;
+    font-size: var(--fs-body-lg);
+    font-weight: 620;
+}
+
+.app-story-create-title p {
+    margin: 3px 0 0;
+    color: color-mix(in srgb, var(--foreground) 46%, transparent);
+    font-size: var(--fs-caption);
+}
+
+.app-story-create-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+
+.app-story-create-shortcut {
+    display: inline-flex;
+    height: 34px;
+    align-items: center;
+    gap: 7px;
+    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+    border-radius: var(--r-md);
+    background: color-mix(in srgb, var(--foreground) 3%, transparent);
+    padding: 0 12px;
+    color: color-mix(in srgb, var(--foreground) 62%, transparent);
+    font-size: var(--fs-caption);
+    font-weight: 520;
+    transition: border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
+}
+
+.app-story-create-shortcut:hover {
+    border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+    color: var(--foreground);
+}
+
+.app-story-create-main {
+    display: flex;
+    min-width: 0;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 12px 16px 14px 19px;
+}
+
+.app-story-create-input {
+    min-width: 0;
+    flex: 1;
+}
+
+.app-story-create-input textarea {
+    resize: none !important;
+    border-color: transparent !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 2px 0 !important;
+    font-size: var(--fs-body) !important;
+    color: var(--foreground) !important;
+}
+
+.app-story-create-input textarea:focus {
+    border-color: transparent !important;
+    box-shadow: none !important;
+}
+
+.app-story-create-input textarea::placeholder {
+    color: color-mix(in srgb, var(--foreground) 38%, transparent) !important;
+}
+
+.app-story-create-style-chip {
+    display: inline-flex;
+    height: 34px;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 8px;
+    max-width: 220px;
+    border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
+    border-radius: var(--r-full);
+    background: color-mix(in srgb, var(--foreground) 4%, transparent);
+    padding: 0 11px 0 4px;
+    color: color-mix(in srgb, var(--foreground) 72%, transparent);
+    font-size: var(--fs-caption);
+    transition: border-color 180ms ease-out, color 180ms ease-out;
+}
+
+.app-story-create-style-chip:hover {
+    border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
+    color: var(--foreground);
+}
+
+.app-story-create-style-chip img {
+    width: 26px;
+    height: 26px;
+    flex: 0 0 auto;
+    border-radius: var(--r-full);
+    object-fit: cover;
+}
+
+.app-story-create-style-chip span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-story-create-controls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px 14px;
+    padding: 0 16px 14px 19px;
+}
+
+.app-story-create-controls label {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: color-mix(in srgb, var(--foreground) 42%, transparent);
+    font-size: var(--fs-tiny);
+}
+
+.app-story-create-controls .ant-select {
+    min-width: 96px;
+}
+
+.app-story-create-controls .ant-select-selector {
+    border-color: color-mix(in srgb, var(--foreground) 12%, transparent) !important;
+    border-radius: var(--r-md) !important;
+    background: color-mix(in srgb, var(--foreground) 3%, transparent) !important;
+    box-shadow: none !important;
+    color: var(--foreground) !important;
+}
+
+.app-story-generating-meta {
+    display: inline-flex;
+    margin-top: 6px;
+    border-radius: var(--r-xs);
+    background: color-mix(in srgb, var(--workspace-accent) 9%, transparent);
+    padding: 3px 7px;
+    color: var(--workspace-accent);
+    font-size: var(--fs-tiny);
+    font-weight: 520;
+}
+
+.app-story-source {
+    display: flex;
+    min-width: 0;
+    min-height: 58px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+    border-radius: var(--r-md);
+    background: color-mix(in srgb, var(--foreground) 3%, transparent);
+    color: color-mix(in srgb, var(--foreground) 52%, transparent);
+    font-size: var(--fs-caption);
+    transition: border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
+}
+
+.app-story-source:hover {
+    border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
+    color: var(--foreground);
+}
+
+.app-story-source.is-active {
+    border-color: color-mix(in srgb, var(--workspace-accent) 48%, transparent);
+    background: var(--workspace-accent-soft);
+    color: var(--workspace-accent);
+    font-weight: 560;
+}
+
+.app-story-modal-style {
+    display: flex;
+    width: 100%;
+    min-height: 42px;
+    align-items: center;
+    gap: 10px;
+    border: 1px dashed color-mix(in srgb, var(--foreground) 18%, transparent);
+    border-radius: var(--r-md);
+    background: color-mix(in srgb, var(--foreground) 2%, transparent);
+    padding: 5px 10px;
+    color: color-mix(in srgb, var(--foreground) 52%, transparent);
+    font-size: var(--fs-caption);
+    text-align: left;
+    transition: border-color 180ms ease-out, color 180ms ease-out;
+}
+
+.app-story-modal-style:hover {
+    border-color: color-mix(in srgb, var(--workspace-accent) 46%, transparent);
+    color: var(--foreground);
+}
+
+.app-story-modal-style img {
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+    border-radius: var(--r-sm);
+    object-fit: cover;
+}
+
+.app-story-modal-style span {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-story-modal-style em {
+    flex: 0 0 auto;
+    color: color-mix(in srgb, var(--workspace-accent) 70%, transparent);
+    font-size: var(--fs-tiny);
+    font-style: normal;
+}
+
+.app-story-generating {
+    display: flex;
+    min-height: 120px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 14px;
+}
+
+.app-story-generating-head {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 10px;
+}
+
+.app-story-generating-model {
+    margin-left: auto;
+    flex: 0 0 auto;
+    max-width: 220px;
+    overflow: hidden;
+    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+    border-radius: var(--r-full);
+    background: color-mix(in srgb, var(--foreground) 4%, transparent);
+    padding: 4px 10px;
+    color: color-mix(in srgb, var(--foreground) 58%, transparent);
+    font-size: var(--fs-tiny);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-story-generating-mark {
+    display: grid;
+    width: 34px;
+    height: 34px;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: var(--r-md);
+    background: var(--workspace-accent-soft);
+    color: var(--workspace-accent);
+}
+
+.app-story-generating-progress {
+    position: relative;
+    width: 100%;
+    height: 3px;
+    overflow: hidden;
+    border-radius: var(--r-full);
+    background: color-mix(in srgb, var(--foreground) 8%, transparent);
+}
+
+.app-story-generating-progress::after {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 38%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, color-mix(in srgb, var(--workspace-accent) 55%, transparent), var(--workspace-accent));
+    animation: story-generating-slide 1.4s var(--motion-ease-out) infinite;
+}
+
+.app-story-generating-grid {
+    display: grid;
+    width: 100%;
+    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.72fr);
+    gap: 12px;
+}
+
+.app-story-generating-story,
+.app-story-generating-steps,
+.app-story-generating-preview {
+    border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+    border-radius: var(--r-md);
+    background: color-mix(in srgb, var(--foreground) 2%, transparent);
+}
+
+.app-story-generating-story {
+    min-width: 0;
+    padding: 10px 12px;
+}
+
+.app-story-generating-caption {
+    display: block;
+    color: color-mix(in srgb, var(--foreground) 38%, transparent);
+    font-size: var(--fs-tiny);
+    font-weight: 560;
+}
+
+.app-story-generating-story p {
+    margin-top: 5px;
+    color: color-mix(in srgb, var(--foreground) 72%, transparent);
+    font-size: var(--fs-caption);
+    line-height: 1.6;
+    font-weight: 450;
+}
+
+.app-story-generating-style {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: center;
+    gap: 6px;
+    margin-top: 7px;
+    overflow: hidden;
+    color: color-mix(in srgb, var(--foreground) 48%, transparent);
+    font-size: var(--fs-tiny);
+}
+
+.app-story-generating-style img {
+    width: 20px;
+    height: 20px;
+    flex: 0 0 auto;
+    border-radius: var(--r-full);
+    object-fit: cover;
+}
+
+.app-story-generating-style span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.app-story-generating-steps {
+    min-width: 0;
+    margin: 0;
+    padding: 8px 10px;
+    list-style: none;
+}
+
+.app-story-generating-steps li {
+    display: flex;
+    min-height: 30px;
+    align-items: center;
+    gap: 8px;
+    color: color-mix(in srgb, var(--foreground) 42%, transparent);
+    font-size: var(--fs-caption);
+}
+
+.app-story-generating-steps li em {
+    margin-left: auto;
+    color: color-mix(in srgb, var(--foreground) 28%, transparent);
+    font-size: var(--fs-tiny);
+    font-style: normal;
+}
+
+.app-story-generating-steps li.is-done { color: color-mix(in srgb, var(--foreground) 62%, transparent); }
+.app-story-generating-steps li.is-done em { color: var(--palette-status-success, var(--green, #22c55e)); }
+.app-story-generating-steps li.is-active { color: var(--foreground); font-weight: 560; }
+.app-story-generating-steps li.is-active em { color: var(--workspace-accent); }
+
+.app-story-generating-step-dot {
+    width: 8px;
+    height: 8px;
+    flex: 0 0 auto;
+    border-radius: var(--r-full);
+    background: color-mix(in srgb, var(--foreground) 18%, transparent);
+}
+
+.app-story-generating-steps li.is-done .app-story-generating-step-dot { background: var(--palette-status-success, #22c55e); }
+.app-story-generating-steps li.is-active .app-story-generating-step-dot { background: var(--workspace-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--workspace-accent) 14%, transparent); }
+
+.app-story-generating-preview {
+    width: 100%;
+    overflow: hidden;
+}
+
+.app-story-generating-preview-head {
+    display: flex;
+    height: 34px;
+    align-items: center;
+    gap: 7px;
+    border-bottom: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
+    padding: 0 12px;
+    color: color-mix(in srgb, var(--foreground) 42%, transparent);
+    font-size: var(--fs-tiny);
+    font-weight: 560;
+}
+
+.app-story-generating-preview-head em {
+    margin-left: auto;
+    color: color-mix(in srgb, var(--foreground) 28%, transparent);
+    font-size: var(--fs-tiny);
+    font-style: normal;
+    font-weight: 450;
+}
+
+.app-story-generating-live {
+    width: 7px;
+    height: 7px;
+    border-radius: var(--r-full);
+    background: var(--workspace-accent);
+    animation: story-generating-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes story-generating-pulse {
+    0%, 100% { opacity: 0.35; }
+    50% { opacity: 1; }
+}
+
+.app-story-generating-preview pre {
+    max-height: 240px;
+    min-height: 96px;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+}
+
+@keyframes story-generating-slide {
+    0% { transform: translateX(-110%); }
+    100% { transform: translateX(320%); }
+}
+
+.app-story-generating p {
+    margin: 0;
+    color: var(--foreground);
+    font-size: var(--fs-body);
+    font-weight: 560;
+}
+
+.app-story-generating pre {
+    max-height: 220px;
+    min-height: 72px;
+    width: 100%;
+    overflow: auto;
+    margin: 0;
+    border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+    border-radius: var(--r-md);
+    background:
+        linear-gradient(180deg, color-mix(in srgb, var(--foreground) 3%, transparent), color-mix(in srgb, var(--foreground) 1.5%, transparent));
+    padding: 10px 12px;
+    color: color-mix(in srgb, var(--foreground) 56%, transparent);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 11px;
+    line-height: 1.6;
+    white-space: pre-wrap;
+}
+
+.app-story-generating-actions {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+@media (max-width: 640px) {
+    .app-story-generating-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 640px) {
+    .app-story-create-head {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .app-story-create-actions {
+        justify-content: flex-start;
+    }
+
+    .app-story-create-main {
+        flex-direction: column;
+    }
+
+    .app-story-create-style-chip {
+        max-width: 100%;
+    }
+}
 .library-confirm-modal .ant-modal-body { padding-top: 4px; padding-bottom: 12px; }
 
 .library-drawer .ant-drawer-content { overflow: hidden; border: 0 !important; background: var(--popover); box-shadow: var(--elevation-panel) !important; }
@@ -7342,3 +8435,1459 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
     .library-drawer .ant-drawer-header { padding: 18px 18px 13px; }
     .library-drawer .ant-drawer-body { padding: 18px; }
 }
+
+/* 工作台首页设计系统落地：颜色/字体/间距/形状统一走 token */
+.app-home-workbench {
+    --home-card-radius: var(--r-md);
+    --home-panel-radius: var(--r-lg);
+    --home-title-fs: var(--fs-title);
+    --home-section-fs: var(--fs-heading-lg);
+}
+
+.app-home-workbench h1,
+.app-home-workbench h2,
+.app-home-workbench h3 {
+    letter-spacing: 0;
+    text-wrap: balance;
+}
+
+.app-home-workbench h1 { font-size: var(--home-title-fs); }
+.app-home-workbench h2 { font-size: var(--home-section-fs); }
+.app-home-workbench h3 { font-size: var(--fs-heading); }
+
+.app-home-timeline {
+    border-radius: var(--home-panel-radius);
+    border-color: var(--workspace-border);
+    background: var(--workspace-surface-strong);
+    box-shadow: var(--elevation-card), var(--elevation-hairline);
+}
+
+.app-home-timeline {
+    border-color: var(--workspace-border);
+}
+
+/* 方案 1：模板工作台式深浅主题卡片 */
+html:not(.dark) .app-home-workbench {
+    --home-card-bg: #fafafa;
+    --home-card-border: rgba(17, 17, 17, 0.08);
+}
+
+.dark .app-home-workbench {
+    --home-card-bg: #1f1f1f;
+    --home-card-border: rgba(255, 255, 255, 0.1);
+}
+
+.app-home-quick-create-card {
+    background: var(--home-card-bg);
+    border-color: var(--home-card-border);
+    box-shadow: var(--elevation-card), var(--elevation-hairline);
+}
+
+.app-home-quick-create-card:hover {
+    border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
+}
+
+.app-workflow-card {
+    border-radius: var(--home-card-radius);
+    border-color: var(--home-card-border);
+    background: var(--home-card-bg);
+    box-shadow: var(--elevation-card), var(--elevation-hairline);
+    transition: transform 240ms var(--motion-ease-out), border-color 240ms ease-out, box-shadow 240ms var(--motion-ease-out);
+}
+
+.app-workflow-card:hover {
+    border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
+    box-shadow: var(--elevation-card-hover), var(--elevation-hairline);
+    transform: translateY(-4px);
+}
+
+.app-home-template-rail {
+    border-color: var(--workspace-border);
+}
+
+/* ===== 创作页 · 分镜工作台（方案 B · 分镜台） ===== */
+.creation-home .storyboard-workbench {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    flex-direction: column;
+}
+
+/* 分镜台 · 顶部工具条（镜头图标轨道 + 新建创作/历史对话同排） */
+.creation-home .storyboard-workbench-bar {
+    display: flex;
+    flex: 0 0 auto;
+    min-height: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 28px;
+}
+
+.creation-home .storyboard-workbench-rail {
+    position: relative;
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+}
+
+/* 单一「镜头时间线」图标按钮 */
+.creation-home .storyboard-workbench-rail-button {
+    position: relative;
+    display: grid;
+    width: 36px;
+    height: 36px;
+    place-items: center;
+    border: 1px solid var(--creation-border);
+    border-radius: 10px;
+    background: var(--creation-surface);
+    color: var(--creation-muted);
+    cursor: pointer;
+    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms var(--motion-ease-out);
+}
+.creation-home .storyboard-workbench-rail-button svg { width: 17px; height: 17px; }
+.creation-home .storyboard-workbench-rail-button:hover { border-color: var(--creation-border-strong); background: var(--creation-surface-hover); color: var(--creation-text); transform: translateY(-1px); }
+.creation-home .storyboard-workbench-rail-button:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 2px; }
+.creation-home .storyboard-workbench-rail-button.is-open { border-color: var(--creation-text); background: var(--creation-text); color: var(--creation-bg); }
+.creation-home .storyboard-workbench-rail-button.is-draft { border-style: dashed; border-color: var(--creation-border-strong); color: var(--creation-text); }
+
+.creation-home .storyboard-workbench-rail-badge {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    display: grid;
+    min-width: 16px;
+    height: 16px;
+    place-items: center;
+    border: 1px solid var(--creation-surface);
+    border-radius: 999px;
+    background: var(--creation-accent);
+    color: var(--creation-surface);
+    padding: 0 4px;
+    font-size: var(--fs-micro);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+}
+
+/* 展开镜头列表弹层 */
+.creation-home .storyboard-workbench-rail-pop {
+    position: absolute;
+    z-index: 40;
+    top: calc(100% + 8px);
+    left: 0;
+    width: min(400px, calc(100vw - 32px));
+    border: 1px solid var(--creation-border);
+    border-radius: 14px;
+    background: var(--creation-surface);
+    box-shadow: var(--elevation-card);
+    padding: 8px;
+}
+.creation-home .storyboard-workbench-rail-pop-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 4px 8px;
+    color: var(--creation-text);
+    font-size: var(--fs-caption);
+    font-weight: 560;
+}
+.creation-home .storyboard-workbench-rail-pop-title { display: inline-flex; align-items: center; gap: 6px; }
+.creation-home .storyboard-workbench-rail-pop-title svg { width: 15px; height: 15px; color: var(--creation-muted); }
+.creation-home .storyboard-workbench-rail-pop-head small { color: var(--creation-faint); font-size: var(--fs-micro); font-weight: 400; letter-spacing: .06em; margin-left: 4px; }
+.creation-home .storyboard-workbench-rail-pop-close {
+    display: grid;
+    width: 24px;
+    height: 24px;
+    place-items: center;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--creation-muted);
+    cursor: pointer;
+    transition: background-color 150ms ease, color 150ms ease;
+}
+.creation-home .storyboard-workbench-rail-pop-close svg { width: 14px; height: 14px; }
+.creation-home .storyboard-workbench-rail-pop-close:hover { background: var(--creation-surface-hover); color: var(--creation-text); }
+.creation-home .storyboard-workbench-rail-pop-close:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 1px; }
+.creation-home .storyboard-workbench-rail-pop ul { display: flex; flex-direction: column; gap: 3px; max-height: 300px; overflow-y: auto; padding: 0; margin: 0; list-style: none; }
+
+.creation-home .storyboard-workbench-rail-row {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 10px;
+    border: 0;
+    border-radius: 10px;
+    background: transparent;
+    color: var(--creation-text);
+    padding: 6px;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 150ms ease, border-color 150ms ease;
+}
+.creation-home .storyboard-workbench-rail-row:hover { background: var(--creation-surface-hover); }
+.creation-home .storyboard-workbench-rail-row:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: -2px; }
+.creation-home .storyboard-workbench-rail-row.is-active { background: var(--creation-surface-selected); }
+.creation-home .storyboard-workbench-rail-row.is-draft { border: 1px dashed var(--creation-border-strong); color: var(--creation-muted); }
+
+.creation-home .storyboard-workbench-rail-thumb {
+    display: grid;
+    width: 84px;
+    height: 48px;
+    flex: 0 0 auto;
+    place-items: center;
+    overflow: hidden;
+    border: 1px solid var(--creation-border);
+    border-radius: 8px;
+    background: var(--creation-surface-hover);
+}
+.creation-home .storyboard-workbench-rail-thumb img,
+.creation-home .storyboard-workbench-rail-thumb video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.creation-home .storyboard-workbench-rail-thumb-ph {
+    display: grid;
+    width: 100%;
+    height: 100%;
+    place-items: center;
+    gap: 2px;
+}
+.creation-home .storyboard-workbench-rail-thumb-ph svg { width: 16px; height: 16px; color: var(--creation-faint); }
+.creation-home .storyboard-workbench-rail-thumb-ph em { color: var(--creation-faint); font-size: var(--fs-micro); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
+
+.creation-home .storyboard-workbench-rail-info {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 3px;
+}
+.creation-home .storyboard-workbench-rail-head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.creation-home .storyboard-workbench-rail-row-shot { color: var(--creation-text); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; font-weight: 560; }
+.creation-home .storyboard-workbench-rail-row-state { border-radius: 999px; background: rgba(148, 163, 184, .18); color: var(--creation-muted); padding: 1px 7px; font-size: var(--fs-micro); letter-spacing: .04em; white-space: nowrap; }
+.creation-home .storyboard-workbench-rail-row-state.is-pending { background: rgba(148, 163, 184, .22); }
+.creation-home .storyboard-workbench-rail-row-state.is-error { background: color-mix(in srgb, #ef5350 14%, transparent); color: #ef5350; }
+.creation-home .storyboard-workbench-rail-row-state.is-done { background: rgba(148, 163, 184, .28); color: var(--creation-text); }
+.creation-home .storyboard-workbench-rail-row-title { overflow: hidden; color: var(--creation-text); font-size: var(--fs-body); text-overflow: ellipsis; white-space: nowrap; }
+.creation-home .storyboard-workbench-rail-row.is-draft .storyboard-workbench-rail-row-title { color: inherit; }
+.creation-home .storyboard-workbench-rail-row time { margin-left: auto; color: var(--creation-faint); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+.creation-home .storyboard-workbench-rail-pop-add {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    border: 1px dashed var(--creation-border);
+    border-radius: 8px;
+    background: transparent;
+    color: var(--creation-muted);
+    margin-top: 6px;
+    padding: 7px 8px;
+    font-size: var(--fs-caption);
+    cursor: pointer;
+    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
+}
+.creation-home .storyboard-workbench-rail-pop-add svg { width: 13px; height: 13px; }
+.creation-home .storyboard-workbench-rail-pop-add:hover { border-color: var(--creation-border-strong); background: var(--creation-surface-hover); color: var(--creation-text); }
+.creation-home .storyboard-workbench-rail-pop-add:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 2px; }
+
+.creation-home .storyboard-workbench-bar-actions {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 6px;
+}
+
+.creation-home .storyboard-workbench-bar-action {
+    display: grid;
+    width: 36px;
+    height: 36px;
+    place-items: center;
+    border: 0;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, .06);
+    color: var(--creation-muted);
+    cursor: pointer;
+    transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--motion-ease-out);
+}
+.creation-home .storyboard-workbench-bar-action svg { width: 16px; height: 16px; }
+.creation-home .storyboard-workbench-bar-action:hover { background: rgba(255, 255, 255, .12); color: var(--creation-text); transform: translateY(-1px); }
+.creation-home .storyboard-workbench-bar-action:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 2px; }
+html:not(.dark) .creation-home .storyboard-workbench-bar-action { background: rgba(28, 32, 37, .055); }
+html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { background: rgba(28, 32, 37, .11); }
+
+/* 分镜卡舞台 */
+.creation-home .storyboard-workbench-stage {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 0 28px 18px;
+}
+
+.creation-home .storyboard-workbench-stage-inner {
+    width: min(920px, 100%);
+    margin: 0 auto;
+    animation: creation-composer-arrive var(--motion-dur-slow-calc) var(--motion-ease-out) both;
+}
+
+.creation-home .storyboard-workbench-card {
+    overflow: hidden;
+    border: 1px solid var(--creation-border);
+    border-radius: 18px;
+    background: var(--creation-surface);
+    box-shadow: var(--elevation-card), var(--elevation-hairline);
+}
+
+.creation-home .storyboard-workbench-card.is-error { border-color: color-mix(in srgb, #ef5350 42%, transparent); }
+
+.creation-home .storyboard-workbench-card-head {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px 14px;
+    border-bottom: 1px solid var(--creation-border);
+    padding: 14px 18px;
+}
+
+.creation-home .storyboard-workbench-card-heading {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+
+.creation-home .storyboard-workbench-card-shot {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    color: var(--creation-text);
+    font-size: var(--fs-body);
+    font-weight: 600;
+}
+
+.creation-home .storyboard-workbench-card-shot-index {
+    display: grid;
+    min-width: 26px;
+    height: 22px;
+    place-items: center;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--creation-text) 9%, transparent);
+    color: var(--creation-text);
+    font-size: var(--fs-tiny);
+    font-variant-numeric: tabular-nums;
+}
+
+.creation-home .storyboard-workbench-card-mode {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    border: 1px solid var(--creation-border);
+    border-radius: 999px;
+    background: var(--creation-surface-muted);
+    color: var(--creation-muted);
+    padding: 3px 9px;
+    font-size: var(--fs-tiny);
+    white-space: nowrap;
+}
+
+.creation-home .storyboard-workbench-card-mode svg { width: 12px; height: 12px; }
+.creation-home .storyboard-workbench-card-model { min-width: 0; overflow: hidden; color: var(--creation-muted); font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
+
+.creation-home .storyboard-workbench-card-state {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    border-radius: 999px;
+    color: var(--creation-muted);
+    padding: 3px 9px;
+    font-size: var(--fs-tiny);
+    white-space: nowrap;
+}
+
+.creation-home .storyboard-workbench-card-state svg { width: 12px; height: 12px; }
+.creation-home .storyboard-workbench-card-state.is-pending { background: color-mix(in srgb, var(--creation-accent) 12%, transparent); color: var(--creation-accent); }
+.creation-home .storyboard-workbench-card-state.is-error { background: color-mix(in srgb, #ef5350 12%, transparent); color: #ef5350; }
+.creation-home .storyboard-workbench-card-state.is-done { background: color-mix(in srgb, var(--creation-text) 8%, transparent); color: var(--creation-muted); }
+
+.creation-home .storyboard-workbench-card-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+}
+
+.creation-home .storyboard-workbench-card-actions button,
+.creation-home .storyboard-workbench-card-actions a {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    border: 1px solid var(--creation-border);
+    border-radius: 8px;
+    background: var(--creation-surface-muted);
+    color: var(--creation-muted);
+    padding: 6px 10px;
+    font-size: var(--fs-caption);
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
+}
+
+.creation-home .storyboard-workbench-card-actions button:hover,
+.creation-home .storyboard-workbench-card-actions a:hover { border-color: var(--creation-border-strong); background: var(--creation-surface-hover); color: var(--creation-text); }
+.creation-home .storyboard-workbench-card-actions button:disabled { cursor: not-allowed; opacity: .5; }
+.creation-home .storyboard-workbench-card-actions button:focus-visible,
+.creation-home .storyboard-workbench-card-actions a:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 2px; }
+.creation-home .storyboard-workbench-card-actions svg { width: 13px; height: 13px; }
+
+.creation-home .storyboard-workbench-card-body { padding: 18px; }
+
+/* 镜头脚本区 */
+.creation-home .storyboard-workbench-brief {
+    margin-bottom: 18px;
+    border: 1px solid var(--creation-border);
+    border-radius: 12px;
+    background: var(--creation-surface-muted);
+    padding: 13px 15px;
+}
+
+.creation-home .storyboard-workbench-brief-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 0 0 8px;
+    color: var(--creation-faint);
+    font-size: var(--fs-tiny);
+    font-weight: 560;
+    letter-spacing: .08em;
+}
+
+.creation-home .storyboard-workbench-brief-label svg { width: 12px; height: 12px; }
+.creation-home .storyboard-workbench-brief-text { margin: 0; color: var(--creation-text); font-size: var(--fs-body); line-height: 1.75; white-space: pre-wrap; }
+.creation-home .storyboard-workbench-brief .creation-user-message-references { margin-top: 10px; }
+.creation-home .storyboard-workbench-brief-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+
+/* 结果区 */
+.creation-home .storyboard-workbench-pending,
+.creation-home .storyboard-workbench-empty {
+    display: flex;
+    min-height: 120px;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    border: 1px dashed var(--creation-border);
+    border-radius: 12px;
+    background: var(--creation-surface-muted);
+    color: var(--creation-muted);
+    font-size: var(--fs-caption);
+}
+
+.creation-home .storyboard-workbench-pending svg { width: 16px; height: 16px; color: var(--creation-accent); }
+.creation-home .storyboard-workbench-empty svg { width: 16px; height: 16px; }
+.creation-home .storyboard-workbench-empty button {
+    border: 0;
+    background: transparent;
+    color: var(--creation-text);
+    font-size: var(--fs-caption);
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.creation-home .storyboard-workbench-error {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+    border: 1px solid color-mix(in srgb, #ef5350 38%, transparent);
+    border-radius: 12px;
+    background: color-mix(in srgb, #ef5350 7%, transparent);
+    padding: 13px 15px;
+    color: #ef8b8b;
+    font-size: var(--fs-caption);
+    line-height: 1.6;
+}
+
+.creation-home .storyboard-workbench-error button {
+    display: inline-flex;
+    height: 28px;
+    align-items: center;
+    gap: 5px;
+    border: 0;
+    border-radius: 6px;
+    background: color-mix(in srgb, #ef5350 14%, transparent);
+    color: #ef8b8b;
+    padding: 0 9px;
+    font-size: var(--fs-label);
+    cursor: pointer;
+}
+
+.creation-home .storyboard-workbench-error button:hover { background: color-mix(in srgb, #ef5350 24%, transparent); }
+.creation-home .storyboard-workbench-error svg { width: 13px; height: 13px; }
+.creation-home .storyboard-workbench-text { max-width: none; padding: 0; }
+
+.creation-home .storyboard-workbench-media-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+    margin-top: 12px;
+    color: var(--creation-faint);
+    font-size: var(--fs-label);
+}
+
+.creation-home .storyboard-workbench-media-meta > span { margin-right: 2px; }
+.creation-home .storyboard-workbench-media-meta button,
+.creation-home .storyboard-workbench-media-meta a {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    border: 0;
+    background: transparent;
+    color: var(--creation-muted);
+    font-size: var(--fs-label);
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.creation-home .storyboard-workbench-media-meta button:hover,
+.creation-home .storyboard-workbench-media-meta a:hover { color: var(--creation-text); }
+.creation-home .storyboard-workbench-media-meta svg { width: 13px; height: 13px; }
+
+/* 撰写区 */
+.creation-home .storyboard-workbench-composer {
+    flex: 0 0 auto;
+    padding: 8px 28px 22px;
+}
+
+.creation-home .storyboard-workbench-composer .creation-chat-composer {
+    width: min(920px, 100%);
+    margin: 0 auto;
+}
+
+@media (max-width: 800px) {
+    .creation-home .storyboard-workbench-bar { padding: 10px 14px; }
+    .creation-home .storyboard-workbench-rail-pop { width: min(340px, calc(100vw - 24px)); }
+    .creation-home .storyboard-workbench-stage { padding: 0 14px 14px; }
+    .creation-home .storyboard-workbench-composer { padding-right: 12px; padding-left: 12px; }
+    .creation-home .storyboard-workbench-card-head { padding: 12px 14px; }
+    .creation-home .storyboard-workbench-card-body { padding: 14px; }
+}
+
+/* 空态分镜台预览：轨道幽灵镜头位 + 空分镜卡 */
+.creation-home .storyboard-workbench .storyboard-workbench-shot.is-ghost {
+    border-style: dashed;
+    border-color: var(--creation-border);
+    background: transparent;
+    box-shadow: none;
+    cursor: default;
+    opacity: .62;
+    pointer-events: none;
+}
+
+.creation-home .storyboard-workbench .storyboard-workbench-shot.is-ghost .storyboard-workbench-shot-thumb {
+    background: color-mix(in srgb, var(--creation-text) 4%, transparent);
+}
+
+.creation-home .storyboard-workbench .storyboard-workbench-shot.is-ghost:hover {
+    border-color: var(--creation-border);
+    background: transparent;
+    transform: none;
+}
+
+.creation-home .storyboard-workbench .storyboard-workbench-card.is-empty {
+    border-style: solid;
+}
+
+.creation-home .storyboard-workbench-empty-hero {
+    padding: clamp(22px, 5vh, 48px) 8px clamp(18px, 3.5vh, 32px);
+    text-align: center;
+}
+
+.creation-home .storyboard-workbench-empty-kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--creation-faint);
+    font-size: var(--fs-label);
+    letter-spacing: .12em;
+}
+
+.creation-home .storyboard-workbench-empty-hero h1 {
+    margin: 12px 0 0;
+    color: var(--creation-text);
+    font-size: var(--fs-title);
+    font-weight: 620;
+    letter-spacing: 0;
+    line-height: 1.4;
+}
+
+.creation-home .storyboard-workbench-empty-hero p {
+    max-width: 52ch;
+    margin: 12px auto 0;
+    color: var(--creation-muted);
+    font-size: var(--fs-body);
+    line-height: 1.8;
+}
+
+.creation-home .storyboard-workbench-empty-steps {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-top: 20px;
+}
+
+.creation-home .storyboard-workbench-empty-steps span {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    border: 1px solid var(--creation-border);
+    border-radius: 999px;
+    background: var(--creation-surface-muted);
+    color: var(--creation-muted);
+    padding: 6px 13px;
+    font-size: var(--fs-caption);
+    white-space: nowrap;
+}
+
+.creation-home .storyboard-workbench-empty-steps em {
+    color: var(--creation-text);
+    font-size: var(--fs-micro);
+    font-style: normal;
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+    letter-spacing: .02em;
+}
+
+.creation-home .storyboard-workbench-empty-preview {
+    display: flex;
+    align-items: center;
+    gap: 13px;
+    border: 1px dashed var(--creation-border);
+    border-radius: 12px;
+    background: var(--creation-surface-muted);
+    padding: 15px 17px;
+}
+
+.creation-home .storyboard-workbench-empty-preview-icon {
+    display: grid;
+    width: 40px;
+    height: 40px;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--creation-text) 7%, transparent);
+    color: var(--creation-faint);
+}
+
+.creation-home .storyboard-workbench-empty-preview-icon svg { width: 17px; height: 17px; }
+
+.creation-home .storyboard-workbench-empty-preview-copy strong {
+    display: block;
+    color: var(--creation-text);
+    font-size: var(--fs-caption);
+    font-weight: 560;
+}
+
+.creation-home .storyboard-workbench-empty-preview-copy span {
+    display: block;
+    margin-top: 3px;
+    color: var(--creation-faint);
+    font-size: var(--fs-label);
+    line-height: 1.6;
+}
+
+@media (max-width: 800px) {
+    .creation-home .storyboard-workbench-empty-hero { padding-top: 24px; padding-bottom: 20px; }
+    .creation-home .storyboard-workbench-empty-preview { padding: 13px 14px; }
+    .creation-home .storyboard-workbench-empty-steps span { padding: 5px 10px; }
+}
+
+/* 对话时间线：你 → 影策 AI */
+.creation-home .storyboard-workbench-thread {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.creation-home .storyboard-workbench-turn {
+    display: flex;
+    min-width: 0;
+}
+
+.creation-home .storyboard-workbench-turn.is-user { justify-content: flex-end; }
+.creation-home .storyboard-workbench-turn.is-ai { align-items: flex-start; gap: 10px; }
+
+.creation-home .storyboard-workbench-turn-copy {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+}
+
+.creation-home .storyboard-workbench-turn.is-user .storyboard-workbench-turn-copy { max-width: min(78%, 560px); align-items: flex-end; }
+.creation-home .storyboard-workbench-turn.is-ai .storyboard-workbench-turn-copy { flex: 1 1 auto; }
+
+.creation-home .storyboard-workbench-turn-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 2px 6px;
+}
+
+.creation-home .storyboard-workbench-turn.is-user .storyboard-workbench-turn-meta { justify-content: flex-end; }
+
+.creation-home .storyboard-workbench-turn-role {
+    color: var(--creation-faint);
+    font-size: var(--fs-label);
+    font-weight: 600;
+    letter-spacing: .04em;
+}
+
+.creation-home .storyboard-workbench-turn-role.is-ai {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    color: var(--creation-text);
+}
+
+.creation-home .storyboard-workbench-turn-role.is-ai svg { width: 12px; height: 12px; color: var(--creation-accent); }
+.creation-home .storyboard-workbench-turn-model { color: var(--creation-faint); font-size: var(--fs-micro); }
+.creation-home .storyboard-workbench-turn-time { color: var(--creation-faint); font-size: var(--fs-micro); font-variant-numeric: tabular-nums; }
+
+/* 用户气泡 */
+.creation-home .storyboard-workbench-turn.is-user .storyboard-workbench-turn-bubble {
+    min-width: 0;
+    border: 1px solid var(--creation-border);
+    border-top-right-radius: 4px;
+    border-radius: 12px;
+    background: var(--creation-surface-muted);
+    padding: 11px 14px;
+}
+
+.creation-home .storyboard-workbench-turn-text { margin: 0; color: var(--creation-text); font-size: var(--fs-body); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* 移交标记 */
+.creation-home .storyboard-workbench-handoff {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 4px 0;
+}
+
+.creation-home .storyboard-workbench-handoff-rail { height: 1px; flex: 1 1 auto; background: var(--creation-border); }
+
+.creation-home .storyboard-workbench-handoff-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    color: var(--creation-faint);
+    font-size: var(--fs-micro);
+    letter-spacing: .08em;
+    white-space: nowrap;
+}
+
+.creation-home .storyboard-workbench-handoff-badge svg { width: 12px; height: 12px; }
+
+/* 影策 AI 头像 */
+.creation-home .storyboard-workbench-ai-avatar {
+    display: grid;
+    width: 30px;
+    height: 30px;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: 9px;
+    background: var(--creation-text);
+    color: var(--creation-bg);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--creation-text) 18%, transparent);
+}
+
+.creation-home .storyboard-workbench-ai-avatar svg { width: 15px; height: 15px; }
+.creation-home .storyboard-workbench-ai-avatar.is-large { width: 42px; height: 42px; border-radius: 12px; }
+.creation-home .storyboard-workbench-ai-avatar.is-large svg { width: 19px; height: 19px; }
+
+/* 生成中思考管线 */
+.creation-home .storyboard-workbench-pending {
+    display: flex;
+    min-height: 0;
+    align-items: stretch;
+    justify-content: flex-start;
+    border: 1px solid var(--creation-border);
+    border-radius: 12px;
+    background: var(--creation-surface-muted);
+}
+
+.creation-home .storyboard-workbench-thinking { display: flex; width: 100%; flex-direction: column; gap: 14px; padding: 14px 16px; }
+.creation-home .storyboard-workbench-thinking-copy { display: flex; flex-direction: column; gap: 4px; }
+.creation-home .storyboard-workbench-thinking-copy strong { color: var(--creation-text); font-size: var(--fs-body); font-weight: 600; }
+.creation-home .storyboard-workbench-thinking-copy span { color: var(--creation-muted); font-size: var(--fs-label); line-height: 1.7; }
+
+.creation-home .storyboard-workbench-pipeline { display: flex; flex-wrap: wrap; gap: 8px; }
+
+.creation-home .storyboard-workbench-pipeline em {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    border: 1px solid var(--creation-border);
+    border-radius: 999px;
+    background: var(--creation-surface);
+    color: var(--creation-faint);
+    padding: 5px 12px;
+    font-size: var(--fs-caption);
+    font-style: normal;
+    opacity: 0;
+    animation: creation-pipeline-step 480ms ease forwards;
+    animation-delay: calc(var(--step) * 520ms + 200ms);
+}
+
+.creation-home .storyboard-workbench-pipeline em i { color: var(--creation-text); font-size: var(--fs-micro); font-style: normal; font-variant-numeric: tabular-nums; font-weight: 600; }
+.creation-home .storyboard-workbench-pipeline em:last-child { border-color: color-mix(in srgb, var(--creation-accent) 40%, var(--creation-border)); color: var(--creation-text); }
+
+@keyframes creation-pipeline-step {
+    0% { opacity: 0; transform: translateY(4px); }
+    100% { opacity: 1; transform: translateY(0); }
+}
+
+/* 导演手记 */
+.creation-home .storyboard-workbench-director-note {
+    display: flex;
+    align-items: flex-start;
+    gap: 9px;
+    margin-top: 12px;
+    border: 1px solid var(--creation-border);
+    border-left: 3px solid var(--creation-text);
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--creation-text) 4%, transparent);
+    padding: 10px 13px;
+    color: var(--creation-muted);
+    font-size: var(--fs-label);
+    line-height: 1.7;
+}
+
+.creation-home .storyboard-workbench-director-note span { flex: 0 0 auto; color: var(--creation-text); font-weight: 600; }
+
+/* 空态影策开场 */
+.creation-home .storyboard-workbench-empty-opener {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 8px 2px 2px;
+}
+
+.creation-home .storyboard-workbench-empty-opener-copy { min-width: 0; }
+
+.creation-home .storyboard-workbench-empty-opener-name {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    color: var(--creation-faint);
+    font-size: var(--fs-label);
+    font-weight: 600;
+}
+
+.creation-home .storyboard-workbench-empty-opener-name svg { width: 12px; height: 12px; color: var(--creation-accent); }
+.creation-home .storyboard-workbench-empty-opener-copy h1 { margin: 9px 0 0; color: var(--creation-text); font-size: var(--fs-title); font-weight: 620; line-height: 1.4; }
+.creation-home .storyboard-workbench-empty-opener-copy p { max-width: 58ch; margin: 9px 0 0; color: var(--creation-muted); font-size: var(--fs-caption); line-height: 1.8; }
+
+.creation-home .storyboard-workbench-empty-starters { margin-top: 22px; }
+.creation-home .storyboard-workbench-empty-starters-label { display: block; margin-bottom: 10px; color: var(--creation-faint); font-size: var(--fs-label); }
+.creation-home .storyboard-workbench-empty-starters-list { display: grid; gap: 8px; }
+
+.creation-home .storyboard-workbench-empty-starters-list button {
+    display: flex;
+    align-items: flex-start;
+    gap: 9px;
+    border: 1px dashed var(--creation-border);
+    border-radius: 10px;
+    background: transparent;
+    color: var(--creation-muted);
+    padding: 9px 12px;
+    font-size: var(--fs-caption);
+    text-align: left;
+    line-height: 1.65;
+    cursor: pointer;
+    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
+}
+
+.creation-home .storyboard-workbench-empty-starters-list button:hover { border-color: var(--creation-border-strong); background: var(--creation-surface-hover); color: var(--creation-text); }
+.creation-home .storyboard-workbench-empty-starters-list button:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 2px; }
+.creation-home .storyboard-workbench-empty-starters-list button svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 3px; color: var(--creation-accent); }
+
+@media (max-width: 800px) {
+    .creation-home .storyboard-workbench-turn.is-user .storyboard-workbench-turn-copy { max-width: 88%; }
+    .creation-home .storyboard-workbench-pipeline { gap: 6px; }
+    .creation-home .storyboard-workbench-pipeline em { padding: 4px 10px; }
+    .creation-home .storyboard-workbench-empty-opener { gap: 11px; }
+}
+
+/* 空态：banner + 对话区（控态时展示，发送后切换分镜台） */
+.creation-home .creation-empty-workspace {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+.creation-empty-workspace .creation-chat-intro p { color: var(--creation-muted); }
+.creation-empty-workspace .creation-intro-emphasis .is-pink,
+.creation-empty-workspace .creation-intro-emphasis .is-blue {
+    color: var(--creation-accent);
+    text-shadow: 0 0 24px color-mix(in srgb, var(--creation-accent) 22%, transparent);
+}
+
+.creation-empty-workspace .creation-empty-composer {
+    width: min(820px, calc(100% - 28px));
+    margin: 0 auto;
+}
+
+@media (max-width: 800px) {
+    .creation-home .creation-empty-workspace { padding-top: 24px; }
+    .creation-empty-workspace .creation-empty-composer { width: 100%; }
+}
+
+/* 舞台：下一镜草稿引导卡 */
+.creation-home .storyboard-workbench-card.is-next {
+    border-style: dashed;
+    border-color: var(--creation-border-strong);
+    background: transparent;
+    box-shadow: none;
+}
+
+.creation-home .storyboard-workbench-next-panel {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    border: 1px dashed var(--creation-border);
+    border-radius: 12px;
+    background: var(--creation-surface-muted);
+    padding: 16px 18px;
+}
+
+.creation-home .storyboard-workbench-next-panel-icon {
+    display: grid;
+    width: 44px;
+    height: 44px;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--creation-text) 7%, transparent);
+    color: var(--creation-faint);
+}
+
+.creation-home .storyboard-workbench-next-panel-icon svg { width: 19px; height: 19px; }
+
+.creation-home .storyboard-workbench-next-panel-copy strong {
+    display: block;
+    color: var(--creation-text);
+    font-size: var(--fs-body);
+    font-weight: 600;
+    line-height: 1.5;
+}
+
+.creation-home .storyboard-workbench-next-panel-copy span {
+    display: block;
+    max-width: 58ch;
+    margin-top: 6px;
+    color: var(--creation-muted);
+    font-size: var(--fs-caption);
+    line-height: 1.8;
+}
+
+@media (max-width: 800px) {
+    .creation-home .storyboard-workbench-next-panel { padding: 13px 14px; }
+    .creation-home .storyboard-workbench-next-panel-icon { width: 38px; height: 38px; }
+}
+
+.creation-home .creation-empty-suggest {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    width: min(820px, calc(100% - 28px));
+    margin: 22px auto 0;
+}
+
+.creation-home .creation-empty-suggest .suggest-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 11px;
+    padding: 12px 14px;
+    border: 1px solid var(--creation-border);
+    border-radius: 12px;
+    background: var(--creation-surface);
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--motion-dur-fast) var(--motion-ease-out), border-color var(--motion-dur-fast) var(--motion-ease-out), transform var(--motion-dur-fast) var(--motion-ease-out);
+}
+
+.creation-home .creation-empty-suggest .suggest-card:hover {
+    transform: translateY(-2px);
+    border-color: color-mix(in srgb, var(--creation-accent) 30%, var(--creation-border));
+    background: var(--creation-surface-hover);
+}
+
+.creation-home .creation-empty-suggest .suggest-card:focus-visible {
+    outline: 2px solid var(--creation-accent);
+    outline-offset: 2px;
+}
+
+.creation-home .creation-empty-suggest .suggest-icon {
+    display: grid;
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+    place-items: center;
+    border-radius: 9px;
+    background: color-mix(in srgb, var(--creation-text) 7%, transparent);
+    color: var(--creation-accent);
+}
+
+.creation-home .creation-empty-suggest .suggest-icon svg { width: 15px; height: 15px; stroke-width: 2; }
+
+.creation-home .creation-empty-suggest .suggest-copy strong {
+    display: block;
+    color: var(--creation-text);
+    font-size: var(--fs-body);
+    font-weight: 600;
+    line-height: 1.45;
+    margin-bottom: 2px;
+}
+
+.creation-home .creation-empty-suggest .suggest-copy span {
+    display: block;
+    color: var(--creation-muted);
+    font-size: var(--fs-label);
+    line-height: 1.55;
+}
+
+@media (max-width: 800px) {
+    .creation-home .creation-empty-suggest { grid-template-columns: 1fr; }
+}
+
+/* 空态布局收敛：banner 与下方对话列同宽，整组垂直居中；用首/末子项 auto margin 居中，
+   内容超高时自动 margin 归零、回到顶部对齐，避免 justify-content:center 在滚动容器里的裁切问题。 */
+.creation-empty-workspace > .creation-empty-art {
+    width: min(820px, calc(100% - 28px));
+    height: 200px;
+    margin: auto auto 20px;
+}
+
+.creation-empty-workspace .creation-empty-art-frame.is-back { top: 18px; height: 146px; }
+.creation-empty-workspace .creation-empty-art-frame.is-main { top: 0; height: 182px; }
+.creation-empty-workspace .creation-empty-art-frame.is-front { top: 24px; height: 146px; }
+
+.creation-empty-workspace .creation-chat-intro { margin-top: 24px; margin-bottom: 18px; }
+
+.creation-empty-workspace > .creation-empty-suggest { margin: 26px auto auto; }
+
+@media (max-width: 800px) {
+    .creation-empty-workspace > .creation-empty-art { height: 168px; margin-bottom: 16px; }
+    .creation-empty-workspace .creation-empty-art-frame.is-back { top: 14px; height: 122px; }
+    .creation-empty-workspace .creation-empty-art-frame.is-main { top: 0; height: 152px; }
+    .creation-empty-workspace .creation-empty-art-frame.is-front { top: 18px; height: 122px; }
+    .creation-empty-workspace .creation-chat-intro { margin-top: 18px; margin-bottom: 14px; }
+    .creation-empty-workspace > .creation-empty-suggest { margin-top: 20px; }
+}
+
+/* ===== 素材库 · 重构（影策影视资产） =====
+   与画布库共用 studio-band 毛玻璃页头与 frame 外壳；类型化封面、accent 反白筛选、
+   批量操作条、banner+欢迎卡空态、资产档案抽屉。全局保持黑白单色。 */
+.assets-library-page .assets-header-meta { gap: 6px; }
+.assets-library-page .assets-header-meta::before {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--r-full);
+    background: var(--workspace-accent);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 16%, transparent);
+    content: "";
+}
+/* 页头主按钮：压过 light 主题下 app-page-header 按钮的白色背景覆盖。 */
+.assets-library-page.canvas-library-page .app-page-header .library-primary-action {
+    border: 0 !important;
+    background: var(--btn-solid-bg) !important;
+    color: var(--btn-solid-fg) !important;
+    box-shadow: none !important;
+}
+.assets-library-page.canvas-library-page .app-page-header .library-primary-action:not(:disabled):hover {
+    border-color: transparent !important;
+    background: var(--btn-solid-bg) !important;
+    color: var(--btn-solid-fg) !important;
+    opacity: .86;
+    transform: translateY(-1px);
+}
+
+/* 筛选胶囊：激活态 accent 反白 + 计数徽章反白 */
+.assets-filter-item {
+    display: flex;
+    height: 32px;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    width: auto;
+    flex: 0 0 auto;
+    padding: 0 10px;
+    border-radius: var(--r-md);
+    color: color-mix(in srgb, var(--foreground) 56%, transparent);
+    font-size: var(--fs-label);
+    transition: background-color 160ms ease-out, color 160ms ease-out;
+}
+.assets-filter-item:hover { background: color-mix(in srgb, var(--foreground) 6%, transparent); color: var(--foreground); }
+.assets-filter-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
+.assets-filter-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.assets-filter-count {
+    display: inline-grid;
+    min-width: 19px;
+    height: 18px;
+    place-items: center;
+    padding: 0 5px;
+    border-radius: var(--r-full);
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+    color: color-mix(in srgb, var(--foreground) 45%, transparent);
+    font-size: var(--fs-micro);
+    font-variant-numeric: tabular-nums;
+    transition: background-color 160ms ease-out, color 160ms ease-out;
+}
+.assets-filter-item.is-active { background: var(--workspace-accent); color: var(--btn-solid-fg); font-weight: 560; }
+.assets-filter-item.is-active:hover { background: var(--workspace-accent); color: var(--btn-solid-fg); }
+.assets-filter-item.is-active .assets-filter-count { background: color-mix(in srgb, var(--btn-solid-fg) 18%, transparent); color: var(--btn-solid-fg); }
+@media (min-width: 1024px) {
+    .assets-filter-item { width: 100%; flex: none; }
+}
+
+/* 类型化封面：容器继承 4/3 比例，内部 button 撑满 */
+.assets-cover { position: relative; overflow: hidden; }
+.assets-cover-link { position: relative; display: block; width: 100%; height: 100%; padding: 0; cursor: pointer; text-align: left; }
+.assets-cover-link:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
+.assets-cover-media { width: 100%; height: 100%; object-fit: cover; }
+.assets-cover-fallback { display: grid; width: 100%; height: 100%; place-items: center; background: color-mix(in srgb, var(--foreground) 4%, transparent); color: color-mix(in srgb, var(--foreground) 42%, transparent); }
+.assets-cover-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, transparent 32%, transparent 58%, rgba(0, 0, 0, .32) 100%); }
+.assets-cover-badges { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; align-items: center; gap: 5px; pointer-events: none; }
+.assets-cover-badge {
+    display: inline-flex;
+    height: 20px;
+    align-items: center;
+    gap: 4px;
+    padding: 0 7px;
+    border-radius: 6px;
+    font-size: var(--fs-micro);
+    font-weight: 560;
+    letter-spacing: .02em;
+    line-height: 1;
+    backdrop-filter: blur(6px);
+}
+.assets-cover-badge svg { width: 11px; height: 11px; }
+.assets-cover-badge.is-kind { background: var(--workspace-accent); color: var(--btn-solid-fg); }
+.assets-cover-badge.is-category { border: 1px solid rgba(255, 255, 255, .2); background: rgba(10, 10, 10, .5); color: rgba(255, 255, 255, .86); }
+.assets-cover-clock {
+    position: absolute;
+    left: 8px;
+    bottom: 8px;
+    z-index: 2;
+    height: 20px;
+    padding: 0 7px;
+    border-radius: 6px;
+    background: rgba(10, 10, 10, .6);
+    color: #fff;
+    font-size: var(--fs-micro);
+    font-weight: 560;
+    line-height: 20px;
+    letter-spacing: .02em;
+    backdrop-filter: blur(6px);
+    font-variant-numeric: tabular-nums;
+}
+.assets-cover-play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity 180ms ease-out; }
+.assets-cover-play::before { position: absolute; width: 42px; height: 42px; border: 1.5px solid rgba(255, 255, 255, .78); border-radius: var(--r-full); background: rgba(10, 10, 10, .36); content: ""; backdrop-filter: blur(6px); }
+.assets-cover-play svg { position: relative; width: 17px; height: 17px; margin-left: 2px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45)); }
+.assets-cover-link:hover .assets-cover-play, .assets-cover-link:focus-visible .assets-cover-play { opacity: 1; }
+
+/* 选中态：accent 勾选框（右下）+ accent 描边由 is-selected 提供 */
+.assets-select-check {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    z-index: 3;
+    width: 22px;
+    height: 22px;
+    margin: 0;
+    appearance: none;
+    -webkit-appearance: none;
+    border: 1.5px solid rgba(255, 255, 255, .72);
+    border-radius: 7px;
+    background: rgba(10, 10, 10, .42);
+    cursor: pointer;
+    backdrop-filter: blur(6px);
+    opacity: 0;
+    transition: opacity 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out, transform 180ms var(--motion-ease-out);
+}
+.assets-select-check::after {
+    position: absolute;
+    top: 2px;
+    left: 6px;
+    width: 6px;
+    height: 11px;
+    border: solid var(--btn-solid-fg);
+    border-width: 0 2px 2px 0;
+    content: "";
+    opacity: 0;
+    transform: rotate(45deg) scale(.6);
+    transition: opacity 120ms ease-out, transform 180ms var(--motion-ease-out);
+}
+.assets-select-check:checked { border-color: var(--workspace-accent); background: var(--workspace-accent); }
+.assets-select-check:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
+.assets-select-check:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.asset-library-card:hover .assets-select-check, .asset-library-card:focus-within .assets-select-check { opacity: 1; }
+.assets-select-check:checked { opacity: 1; }
+.assets-cover-more {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 3;
+    display: grid;
+    width: 28px;
+    height: 28px;
+    place-items: center;
+    border: 1px solid rgba(255, 255, 255, .18);
+    border-radius: var(--r-md);
+    background: rgba(10, 10, 10, .5);
+    color: rgba(255, 255, 255, .85);
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+    opacity: 0;
+    transition: opacity 180ms ease-out, background-color 180ms ease-out, transform 180ms var(--motion-ease-out);
+}
+.assets-cover-more:hover { background: rgba(10, 10, 10, .78); color: #fff; transform: scale(1.05); }
+.assets-cover-more:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.asset-library-card:hover .assets-cover-more, .asset-library-card:focus-within .assets-cover-more { opacity: 1; }
+
+/* 音频：频谱条占位；文本：内容摘要底纹；模型：线框图标 */
+.assets-cover-wave { position: relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; gap: 3px; padding: 0 14%; background: color-mix(in srgb, var(--foreground) 4%, transparent); }
+.assets-cover-wave > span { display: block; width: 3px; min-height: 5px; flex: 0 1 3px; border-radius: var(--r-full); background: color-mix(in srgb, var(--workspace-accent) 46%, transparent); }
+.assets-cover-wave-glyph { position: absolute; top: 50%; right: 9%; width: 30px; height: 30px; transform: translateY(-50%); color: color-mix(in srgb, var(--workspace-accent) 36%, var(--foreground)); opacity: .68; }
+.assets-cover-text { width: 100%; height: 100%; padding: 16px 18px; overflow: hidden; background: color-mix(in srgb, var(--foreground) 4%, transparent); }
+.assets-cover-text p {
+    display: -webkit-box;
+    margin: 0;
+    overflow: hidden;
+    color: color-mix(in srgb, var(--foreground) 58%, transparent);
+    font-size: var(--fs-label);
+    line-height: 1.7;
+    white-space: pre-wrap;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+}
+.assets-cover-model { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: color-mix(in srgb, var(--foreground) 4%, transparent); color: color-mix(in srgb, var(--foreground) 46%, transparent); }
+.assets-cover-model > svg { width: 34px; height: 34px; stroke-width: 1.1; }
+.assets-cover-model > span { max-width: 76%; overflow: hidden; font-size: var(--fs-micro); text-overflow: ellipsis; white-space: nowrap; }
+
+/* 批量操作条：浮现动画，黑白表面 */
+.assets-batch-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin: 2px 0 0;
+    padding: 8px 12px;
+    border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
+    border-radius: var(--r-lg);
+    background: color-mix(in srgb, var(--foreground) 3%, transparent);
+    box-shadow: var(--elevation-hairline);
+    animation: assets-batch-in 240ms var(--motion-ease-out) both;
+}
+@keyframes assets-batch-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
+@media (prefers-reduced-motion: reduce) { .assets-batch-bar { animation: none; } }
+.assets-batch-count { display: inline-flex; align-items: baseline; gap: 6px; margin-right: auto; color: color-mix(in srgb, var(--foreground) 56%, transparent); font-size: var(--fs-label); }
+.assets-batch-count strong { color: var(--foreground); font-size: var(--fs-body); font-weight: 620; font-variant-numeric: tabular-nums; }
+.assets-batch-actions { display: inline-flex; align-items: center; gap: 4px; }
+.assets-batch-actions .ant-btn { border: 0; border-radius: var(--r-md); background: transparent; color: color-mix(in srgb, var(--foreground) 56%, transparent); box-shadow: none; }
+.assets-batch-actions .ant-btn:hover { background: color-mix(in srgb, var(--foreground) 7%, transparent); color: var(--foreground); }
+
+/* 空态：banner 剧照 + 三张欢迎卡 */
+.assets-empty { display: flex; width: 100%; flex-direction: column; align-items: center; padding: 5vh 0 8vh; }
+.assets-empty-banner { position: relative; width: min(720px, calc(100% - 24px)); height: 180px; }
+.assets-empty-banner-frame { position: absolute; overflow: hidden; border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent); border-radius: var(--r-lg); box-shadow: var(--elevation-card); }
+.assets-empty-banner-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45) contrast(.94) saturate(.7); }
+.assets-empty-banner-frame.is-back { top: 16px; left: 2%; width: 24%; height: 132px; transform: rotate(-6deg); opacity: .45; }
+.assets-empty-banner-frame.is-main { z-index: 2; top: 0; left: 20%; width: 60%; height: 168px; transform: rotate(1deg); }
+.assets-empty-banner-frame.is-front { top: 20px; right: 2%; width: 24%; height: 132px; transform: rotate(6deg); opacity: .5; }
+.assets-empty-banner-frame.is-main::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--foreground) 55%, transparent)); content: ""; }
+.assets-empty-banner-frame span { position: absolute; right: 12px; bottom: 10px; z-index: 1; color: #fff; font-size: var(--fs-micro); letter-spacing: .08em; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
+.assets-empty-banner-caption { position: absolute; right: 19%; bottom: 2px; color: color-mix(in srgb, var(--foreground) 44%, transparent); font-size: var(--fs-micro); letter-spacing: .1em; }
+.assets-empty-banner-caption span { color: var(--workspace-accent); font-weight: 620; font-variant-numeric: tabular-nums; }
+.assets-empty-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(680px, calc(100% - 24px)); margin-top: 34px; }
+.assets-empty-card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 16px 18px;
+    border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+    border-radius: var(--r-lg);
+    background: var(--surface-card);
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+    transition: transform 260ms var(--motion-ease-out), border-color 200ms ease-out, background-color 200ms ease-out, box-shadow 200ms ease-out;
+}
+.assets-empty-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--workspace-accent) 32%, transparent); background: var(--surface-card-hover); box-shadow: var(--elevation-card-hover), var(--elevation-hairline); }
+.assets-empty-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.assets-empty-card-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--workspace-accent) 10%, transparent); color: var(--workspace-accent); }
+.assets-empty-card-icon svg { width: 17px; height: 17px; stroke-width: 1.8; }
+.assets-empty-card strong { color: var(--foreground); font-size: var(--fs-body); font-weight: 620; }
+.assets-empty-card > span:last-child { color: color-mix(in srgb, var(--foreground) 48%, transparent); font-size: var(--fs-label); line-height: 1.55; }
+
+/* 资产档案抽屉 */
+.asset-archive-header { display: flex; align-items: flex-start; gap: 14px; }
+.asset-archive-header-icon { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--workspace-accent) 10%, transparent); color: var(--workspace-accent); }
+.asset-archive-header-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
+.asset-archive-title { color: var(--foreground); font-size: var(--fs-heading-lg); font-weight: 620; line-height: 1.3; }
+.asset-archive-subtitle { margin-top: 4px; color: color-mix(in srgb, var(--foreground) 46%, transparent); font-size: var(--fs-label); }
+.asset-archive-preview { overflow: hidden; border-radius: var(--r-xl); background: #050505; box-shadow: var(--elevation-hairline); }
+.asset-archive-preview-media { display: block; width: 100%; max-height: 400px; object-fit: contain; background: #050505; }
+.asset-archive-preview-note { max-height: 400px; overflow: auto; padding: 26px 24px; color: color-mix(in srgb, var(--foreground) 72%, transparent); font-size: var(--fs-body); line-height: 1.75; white-space: pre-wrap; }
+.asset-archive-preview-model { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px; background: color-mix(in srgb, var(--foreground) 3%, transparent); color: color-mix(in srgb, var(--foreground) 42%, transparent); }
+.asset-archive-preview-model > svg { width: 44px; height: 44px; color: color-mix(in srgb, var(--workspace-accent) 55%, var(--foreground)); stroke-width: 1; }
+.asset-archive-audio { padding: 22px 18px; background: color-mix(in srgb, var(--foreground) 3%, transparent); }
+.asset-archive-audio audio { width: 100%; }
+.asset-archive-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); border-radius: var(--r-lg); background: color-mix(in srgb, var(--foreground) 9%, transparent); }
+.asset-archive-fact { min-width: 0; padding: 11px 14px; background: var(--surface-card); }
+.asset-archive-fact-label { display: block; color: color-mix(in srgb, var(--foreground) 38%, transparent); font-size: var(--fs-tiny); letter-spacing: .04em; }
+.asset-archive-fact-value { display: block; margin-top: 3px; overflow: hidden; color: color-mix(in srgb, var(--foreground) 78%, transparent); font-size: var(--fs-label); font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
+.asset-archive-link { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); border-radius: var(--r-lg); background: var(--surface-card); color: color-mix(in srgb, var(--foreground) 72%, transparent); font-size: var(--fs-label); }
+.asset-archive-link svg { width: 15px; height: 15px; color: color-mix(in srgb, var(--workspace-accent) 60%, var(--foreground)); }
+.asset-archive-link strong { margin-left: auto; color: var(--foreground); font-weight: 560; }
+.asset-archive-section { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent); border-radius: var(--r-lg); background: var(--surface-card); }
+.asset-archive-section-title { display: block; margin-bottom: 8px; color: color-mix(in srgb, var(--foreground) 40%, transparent); font-size: var(--fs-tiny); font-weight: 560; letter-spacing: .05em; }
+.asset-archive-section-body { margin: 0; color: color-mix(in srgb, var(--foreground) 74%, transparent); font-size: var(--fs-label); line-height: 1.7; white-space: pre-wrap; }
+.asset-archive-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.library-drawer .ant-btn-primary { border: 0; background: var(--btn-solid-bg); color: var(--btn-solid-fg); box-shadow: none; font-weight: 620; }
+.library-drawer .ant-btn-primary:not(:disabled):hover { background: var(--btn-solid-bg); color: var(--btn-solid-fg); opacity: .86; }
+
+@media (max-width: 680px) {
+    .assets-empty-cards { grid-template-columns: 1fr; }
+    .assets-empty-banner { height: 150px; }
+    .assets-cover-play { opacity: 1; }
+}
+@media (max-width: 639px) {
+    .assets-select-check, .assets-cover-more { opacity: 1; }
+}
+
+/* ===== 素材页布局与线条修正 ===== */
+
+/* 1. 欢迎卡与 banner 同列宽，边缘对齐 */
+.assets-empty-cards { width: min(720px, calc(100% - 24px)); }
+
+/* 2. 批量操作条：sticky + 毛玻璃，滚动长列表时始终可见 */
+.assets-batch-bar {
+    position: sticky;
+    top: 12px;
+    z-index: 20;
+    background: color-mix(in srgb, var(--surface-card) 82%, transparent);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+/* 3. 素材网格降为 4 列，窄屏断点同步收敛 */
+.assets-library-page .assets-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+@media (max-width: 1600px) and (min-width: 1101px) { .assets-library-page .assets-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 1100px) and (min-width: 900px) { .assets-library-page .assets-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 899px) and (min-width: 640px) { .assets-library-page .assets-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+
+/* 4. 封面浮层统一：窄屏隐藏分类徽章；浅底封面（文本/音频/模型）改用自适应玻璃浮层 */
+@media (max-width: 1100px) { .assets-cover-badge.is-category { display: none; } }
+.assets-cover.is-light .assets-cover-badge.is-category {
+    border-color: color-mix(in srgb, var(--foreground) 14%, transparent);
+    background: color-mix(in srgb, var(--foreground) 7%, transparent);
+    color: color-mix(in srgb, var(--foreground) 72%, transparent);
+    backdrop-filter: blur(6px);
+}
+.assets-cover.is-light .assets-cover-clock {
+    border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+    color: color-mix(in srgb, var(--foreground) 62%, transparent);
+    line-height: 18px;
+}
+.assets-cover.is-light .assets-cover-more {
+    border-color: color-mix(in srgb, var(--foreground) 12%, transparent);
+    background: color-mix(in srgb, var(--surface-card) 82%, transparent);
+    color: color-mix(in srgb, var(--foreground) 60%, transparent);
+}
+.assets-cover.is-light .assets-cover-more:hover { background: color-mix(in srgb, var(--foreground) 9%, transparent); color: var(--foreground); }
+.assets-cover.is-light .assets-cover-play::before { border-color: color-mix(in srgb, var(--foreground) 30%, transparent); background: color-mix(in srgb, var(--surface-card) 78%, transparent); }
+
+/* 5. 媒体区与信息区之间补 hairline，卡片内部节奏分隔 */
+.assets-library-page .asset-library-card > .library-card-media { border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent); }
+
+/* ===== 积分中心页重构 ===== */
+
+/* 1. 页头 · 统一 studio band（全局 .studio-band 提供） */
+.wallet-library-page .wallet-credit-meta { gap: 6px; }
+.wallet-library-page .wallet-credit-meta svg { color: currentColor; }
+
+/* 2. 余额卡 · 去金箔化，黑白电影质感 */
+.wallet-library-page .credit-balance-card {
+    border: 1px solid color-mix(in srgb, #f5f5f5 14%, transparent);
+    background: #0d0d0d;
+    color: #f5f5f5;
+    box-shadow: 0 28px 70px color-mix(in srgb, #000 45%, transparent), inset 0 1px 0 color-mix(in srgb, #f5f5f5 9%, transparent);
+}
+.wallet-library-page .credit-balance-card::before {
+    background-image:
+        linear-gradient(to right, color-mix(in srgb, #f5f5f5 5%, transparent) 1px, transparent 1px),
+        linear-gradient(to bottom, color-mix(in srgb, #f5f5f5 5%, transparent) 1px, transparent 1px);
+    background-size: 28px 28px;
+}
+.wallet-library-page .credit-balance-card::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    width: 24px;
+    background-image: radial-gradient(circle, color-mix(in srgb, #f5f5f5 17%, transparent) 1.4px, transparent 2.2px);
+    background-size: 24px 22px;
+    background-position: 0 12px;
+    content: "";
+    pointer-events: none;
+}
+.wallet-library-page .wallet-balance-inner { padding-left: 36px; }
+.wallet-library-page .wallet-balance-number { letter-spacing: -0.01em; }
+
+/* 3. 兑换面板 · 去琥珀图标块 */
+.wallet-library-page .wallet-redeem-icon {
+    border-color: color-mix(in srgb, var(--foreground) 14%, transparent);
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+    color: color-mix(in srgb, var(--foreground) 72%, transparent);
+}
+
+/* 4. 流水表 · 表头收敛 + 行 hover 节奏 */
+.wallet-library-page .wallet-ledger-table .ant-table-thead > tr > th {
+    height: 38px;
+    padding: 8px 12px !important;
+    background: color-mix(in srgb, var(--foreground) 4%, var(--background)) !important;
+    color: color-mix(in srgb, var(--foreground) 52%, transparent) !important;
+    font-size: 11px;
+    font-weight: 500;
+}
+.wallet-library-page .wallet-ledger-table .ant-table-tbody > tr > td {
+    padding: 10px 12px !important;
+    transition: background-color var(--motion-instant) ease-out;
+}
+.wallet-library-page .wallet-ledger-table .ant-table-tbody > tr:hover > td {
+    background: color-mix(in srgb, var(--foreground) 2.5%, var(--background)) !important;
+}
+
+/* 5. 响应式 */
+@media (max-width: 720px) {
+    .wallet-library-page .wallet-balance-inner { padding-left: 30px; }
+}