kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto-save 2026-05-12 18:29 (+1, ~1)

Browse Source
This commit is contained in:
kang
2026-05-12 18:29:59 +08:00
parent a4a9cddc08
commit aa5ad08b9b
2 changed files with 449 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web/app/page.tsx
View File

@@ -13,6 +13,7 @@ import {
type NodeData,
} from "@/components/nodes"
import { ThemeToggle } from "@/components/theme-toggle"
import { Dashboard } from "@/components/dashboard"
import { addManualFrame, analyzeJob, createJob, getJob, uploadJob, type Job } from "@/lib/api"
import { FrameLightbox } from "@/components/lightbox"
@@ -225,54 +226,47 @@ export default function Home() {
return (
<>
<div className="canvas-bg" />
<main className="relative h-screen w-screen overflow-hidden">
{/* 顶部栏 */}
<header className="absolute top-4 left-6 right-6 z-20 flex items-center justify-between pointer-events-none">
<div className="pointer-events-auto">
<div className="text-[10px] uppercase tracking-[0.3em] text-[var(--text-faint)]">SKG · AI Material Pipeline</div>
<h1 className="font-serif text-[26px] leading-none mt-1 text-[var(--text-strong)]">
TK 二创工作台
<span className="text-[var(--text-faint)] ml-3 text-[14px] font-sans tracking-tight">/ Node Workflow</span>
</h1>
</div>
<div className="pointer-events-auto flex items-center gap-2">
{job && (
<div className="glass-node flex items-center gap-2 px-3 h-9" style={{ borderRadius: 12 }}>
<span className="text-[10px] uppercase tracking-widest text-[var(--text-faint)]">JOB</span>
<span className="text-[11.5px] font-mono text-[var(--text-strong)]">{job.id.slice(0, 8)}</span>
<span className="text-[10.5px] text-[var(--text-faint)]">·</span>
<span className="text-[11.5px] text-[var(--text-soft)]">{job.message || job.status}</span>
</div>
)}
<ThemeToggle />
</div>
<main className="relative h-screen w-screen overflow-hidden flex flex-col">
{/* 右上工具 */}
<header className="absolute top-3 right-6 z-30 flex items-center gap-2 pointer-events-auto">
{job && (
<div className="glass-node flex items-center gap-2 px-3 h-9" style={{ borderRadius: 12 }}>
<span className="text-[10px] uppercase tracking-widest text-[var(--text-faint)]">JOB</span>
<span className="text-[11.5px] font-mono text-[var(--text-strong)]">{job.id.slice(0, 8)}</span>
<span className="text-[10.5px] text-[var(--text-faint)]">·</span>
<span className="text-[11.5px] text-[var(--text-soft)]">{job.message || job.status}</span>
</div>
)}
<ThemeToggle />
</header>
{/* 画布 */}
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
nodeTypes={NODE_TYPES}
colorMode={resolvedTheme === "light" ? "light" : "dark"}
fitView
fitViewOptions={{ padding: 0.12 }}
minZoom={0.4}
maxZoom={1.5}
proOptions={{ hideAttribution: true }}
>
<Background variant={BackgroundVariant.Dots} gap={28} size={1.4} />
<Controls position="bottom-left" />
<MiniMap position="bottom-right" pannable zoomable nodeStrokeWidth={2} />
</ReactFlow>
{/* 上区：看板（60vh）— 10 列映射底部节点 */}
<section className="relative z-10 flex-shrink-0 border-b border-white/5" style={{ height: "60vh" }}>
<Dashboard data={nodeData} />
</section>
{/* 底部说明 */}
<footer className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 text-[10.5px] font-mono text-[var(--text-faint)] pointer-events-none">
MVP 第一冲刺：步骤 1-6 已通 · 7-10 占位 · 拖拽节点 · 滚轮缩放
</footer>
{/* 下区：紧凑 DAG 节点流图 */}
<section className="relative flex-1 min-h-0">
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
nodeTypes={NODE_TYPES}
colorMode={resolvedTheme === "light" ? "light" : "dark"}
fitView
fitViewOptions={{ padding: 0.12 }}
minZoom={0.2}
maxZoom={1.5}
proOptions={{ hideAttribution: true }}
>
<Background variant={BackgroundVariant.Dots} gap={28} size={1.4} />
<Controls position="bottom-left" />
<MiniMap position="bottom-right" pannable zoomable nodeStrokeWidth={2} />
</ReactFlow>
</section>
<Toaster theme="system" position="top-right" />
<Toaster theme="system" position="bottom-center" />
{/* Lightbox 看大图 */}
{job && (