feat: 完成短剧项目空间与结构化资产创作闭环 (#38)

* feat(canvas): 短剧项目空间 - 建立项目章节与画布关联 MVP

* feat(canvas): 短剧项目空间 - 完善项目资产、镜头与流程闭环

Refs #30

* fix(deploy): 本地部署 - 修复前端构建并忽略本地 PostgreSQL 配置

* feat(*): 短剧项目空间 - 完成项目、章节、资产、角色与画布创作闭环

Refs #30

---------

Co-authored-by: ddCat <ddcat666@88.com>

web/src/components/canvas/canvas-character-reference-node.tsx

@@ -0,0 +1,26 @@
+import { Image as ImageIcon, UserRound, Volume2 } from "lucide-react";
+import type { ReactNode } from "react";
+
+import type { CanvasNodeData } from "@/types/canvas";
+
+export function CanvasCharacterReferenceNodeContent({ node }: { node: CanvasNodeData }) {
+    const visualReady = node.metadata?.characterVisualStatus === "ready";
+    const voiceReady = node.metadata?.characterVoiceStatus === "ready";
+    return <div className="flex h-full w-full flex-col overflow-hidden bg-background">
+        <div className="relative min-h-0 flex-1 overflow-hidden bg-foreground/[.045]">
+            {node.metadata?.characterCoverUrl ? <img src={node.metadata.characterCoverUrl} alt={node.metadata?.characterName || node.title} className="h-full w-full object-contain p-2" draggable={false} /> : <div className="grid h-full place-items-center text-foreground/22"><UserRound className="size-12" /></div>}
+            <span className="absolute left-3 top-3 rounded bg-black/60 px-2 py-1 text-[10px] font-medium text-white">角色引用</span>
+        </div>
+        <div className="shrink-0 border-t border-border/70 px-3 py-2.5">
+            <div className="truncate text-sm font-semibold">{node.metadata?.characterName || node.title}</div>
+            <div className="mt-2 flex min-w-0 gap-1.5">
+                <State icon={<ImageIcon className="size-3" />} ready={visualReady} label={visualReady ? "形象就绪" : "形象待完善"} />
+                <State icon={<Volume2 className="size-3" />} ready={voiceReady} label={voiceReady ? node.metadata?.characterVoiceName || "声音已绑定" : "声音未绑定"} />
+            </div>
+        </div>
+    </div>;
+}
+
+function State({ icon, ready, label }: { icon: ReactNode; ready: boolean; label: string }) {
+    return <span className={`inline-flex min-w-0 items-center gap-1 rounded px-1.5 py-1 text-[10px] ${ready ? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" : "bg-foreground/[.055] text-foreground/45"}`}>{icon}<span className="truncate">{label}</span></span>;
+}