lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle story script nodes to dark theme

Browse Source 
Align the story script generator table and script text node with the
reference product: dark cards with subtle white borders, muted header
row, dark status pills, white primary button and dark textarea card,
replacing the previous light table chrome.
This commit is contained in:
134 2026-09-18 22:57:07 +08:00
parent 8a1876e016
commit 94b3ac9cb3
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/canvas/LiblibVideoCanvasReplica.tsx
View File

@ -20129,22 +20129,22 @@ function PresetScriptCanvasNode({
{scriptRole === "generator" ? (
<div
className={cn(
"h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/12 bg-white text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
"h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/10 bg-[#262626] text-white shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
selected && "outline outline-2 outline-[#8b96ff]"
)}
>
<div className="flex h-12 items-center justify-between border-[#e5e7eb] border-b px-4">
<span className="font-semibold text-[15px]">故事脚本</span>
<div className="flex h-12 items-center justify-between border-b border-white/8 px-4">
<span className="font-semibold text-[15px] text-white/92">故事脚本</span>
<span
className={cn(
"rounded-full px-3 py-1 text-[12px]",
isGenerating
? "bg-[#eef0ff] text-[#5161ff]"
? "bg-[#2b3358] text-[#93a4ff]"
: isGenerationFailed
? "bg-[#fff1f1] text-[#d64545]"
? "bg-[#4a2426] text-[#ff8f8f]"
: isGenerated
? "bg-[#edf8ef] text-[#268648]"
: "bg-[#eef0ff] text-[#5161ff]"
? "bg-[#1f3a2a] text-[#7fd8a0]"
: "bg-[#2b3358] text-[#93a4ff]"
)}
>
{statusLabel}
@ -20152,13 +20152,13 @@ function PresetScriptCanvasNode({
</div>
<div className="h-[calc(100%-104px)] overflow-auto">
<div className="min-w-[1160px]">
<div className="grid grid-cols-[56px_56px_minmax(260px,1.8fr)_72px_minmax(160px,1fr)_minmax(150px,1fr)_minmax(140px,0.9fr)_minmax(140px,0.9fr)_minmax(220px,1.4fr)] border-[#eef0f3] border-b bg-[#f7f8fa] text-[12px] text-[#697080]">
<div className="grid grid-cols-[56px_56px_minmax(260px,1.8fr)_72px_minmax(160px,1fr)_minmax(150px,1fr)_minmax(140px,0.9fr)_minmax(140px,0.9fr)_minmax(220px,1.4fr)] border-b border-white/8 bg-[#2d2d2d] text-[12px] text-white/45">
{["镜号", "时长", "画面描述", "景别", "光影氛围", "对白·旁白", "音效", "运镜", "最终提示词"].map((item) => (
<div className="border-[#eef0f3] border-r px-3 py-2 last:border-r-0" key={item}>{item}</div>
<div className="border-r border-white/6 px-3 py-2 last:border-r-0" key={item}>{item}</div>
))}
</div>
{rows.map((row) => (
<div className="grid grid-cols-[56px_56px_minmax(260px,1.8fr)_72px_minmax(160px,1fr)_minmax(150px,1fr)_minmax(140px,0.9fr)_minmax(140px,0.9fr)_minmax(220px,1.4fr)] border-[#eef0f3] border-b text-[12px]" key={row.id}>
<div className="grid grid-cols-[56px_56px_minmax(260px,1.8fr)_72px_minmax(160px,1fr)_minmax(150px,1fr)_minmax(140px,0.9fr)_minmax(140px,0.9fr)_minmax(220px,1.4fr)] border-b border-white/6 text-[12px] text-white/80" key={row.id}>
{[
row.shot,
row.duration,
@ -20170,7 +20170,7 @@ function PresetScriptCanvasNode({
row.cameraMovement,
row.imagePrompt,
].map((cell, cellIndex) => (
<div className="border-[#eef0f3] border-r px-3 py-3 leading-5 last:border-r-0" key={`${row.id}-${cellIndex}`}>{cell}</div>
<div className="border-r border-white/6 px-3 py-3 leading-5 last:border-r-0" key={`${row.id}-${cellIndex}`}>{cell}</div>
))}
</div>
))}
@ -20179,7 +20179,7 @@ function PresetScriptCanvasNode({
<div className="m-4 flex h-10 gap-2">
{isGenerated ? (
<button
className="h-10 flex-1 rounded-[10px] bg-[#111] text-[13px] font-semibold text-white transition hover:bg-[#262626]"
className="h-10 flex-1 rounded-[10px] border border-white/14 bg-white/8 text-[13px] font-semibold text-white/85 transition hover:bg-white/12"
onClick={(event) => {
event.stopPropagation();
onOpenWorkflow();
@ -20192,7 +20192,7 @@ function PresetScriptCanvasNode({
) : null}
<button
className={cn(
"h-10 rounded-[10px] bg-[#111] text-[13px] font-semibold text-white disabled:cursor-wait disabled:bg-[#555]",
"h-10 rounded-[10px] bg-white text-[13px] font-semibold text-[#171717] transition hover:bg-white/90 disabled:cursor-wait disabled:bg-white/40 disabled:text-black/50",
isGenerated ? "w-[150px]" : "w-full"
)}
disabled={isGenerating}
@ -20210,18 +20210,18 @@ function PresetScriptCanvasNode({
) : (
<div
className={cn(
"h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/12 bg-[#f4f5f7] text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
"h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/10 bg-[#262626] text-white shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
selected && "outline outline-2 outline-[#8b96ff]"
)}
>
<div className="flex h-11 items-center justify-between border-[#dfe2e8] border-b px-4 text-[13px] text-[#697080]">
<div className="flex h-11 items-center justify-between border-b border-white/8 px-4 text-[13px] text-white/45">
<span>输入内容</span>
<button className="rounded-[8px] px-2 py-1 text-[#4f5cff] hover:bg-black/5" onClick={()=>textInputRef.current?.focus()} type="button">
<button className="rounded-[8px] px-2 py-1 text-[#93a4ff] hover:bg-white/8" onClick={()=>textInputRef.current?.focus()} type="button">
编辑
</button>
</div>
<textarea ref={textInputRef}
className="h-[calc(100%-44px)] w-full resize-none bg-transparent px-5 py-4 text-[14px] leading-7 outline-none placeholder:text-black/38"
className="h-[calc(100%-44px)] w-full resize-none bg-transparent px-5 py-4 text-[14px] leading-7 text-white/88 outline-none placeholder:text-white/30"
onChange={(event) => onTextResourceChange(event.target.value)}
onPointerDown={(event) => event.stopPropagation()}
onWheel={(event) => event.stopPropagation()}