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

style: align board with login visual system

Browse Source
This commit is contained in:
kang
2026-05-18 16:26:08 +08:00
parent 48d4002cbd
commit cdffc4ba08
3 changed files with 106 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/source-analysis.html
View File

File diff suppressed because one or more lines are too long

76
web/app/globals.css
View File

@@ -464,6 +464,82 @@ nextjs-portal {
min-width: 0;
transform: translateY(44px);
}
/* ============================================================
信息流工作台 · 登录页同源质感
============================================================ */
.skg-board-theme {
background:
radial-gradient(circle at 12% 2%, rgba(214, 179, 106, 0.13), transparent 31%),
radial-gradient(circle at 82% 8%, rgba(143, 176, 113, 0.1), transparent 26%),
linear-gradient(120deg, #050706 0%, #070b09 42%, #030303 100%);
}
.skg-board-theme::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
background-size: 64px 64px;
opacity: 0.44;
}
.skg-board-theme::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 42%, rgba(0, 0, 0, 0.4)),
linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 38%, rgba(0, 0, 0, 0.24));
}
.skg-board-ambient {
background:
radial-gradient(circle at 22% 18%, rgba(214, 179, 106, 0.16), transparent 26%),
radial-gradient(circle at 68% 10%, rgba(143, 176, 113, 0.11), transparent 28%),
radial-gradient(circle at 52% 100%, rgba(214, 179, 106, 0.08), transparent 36%);
}
.skg-board-topbar,
.skg-board-panel {
border-color: rgba(160, 182, 129, 0.14) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.026)),
rgba(6, 11, 8, 0.58) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 18px 54px rgba(0, 0, 0, 0.34);
backdrop-filter: blur(10px);
}
.skg-board-topbar {
background:
linear-gradient(100deg, rgba(214, 179, 106, 0.08), rgba(143, 176, 113, 0.035) 42%, rgba(255, 255, 255, 0.03)),
rgba(4, 8, 6, 0.62) !important;
}
.skg-board-theme input:focus,
.skg-board-theme textarea:focus,
.skg-board-theme select:focus {
border-color: rgba(214, 179, 106, 0.58) !important;
box-shadow: 0 0 0 2px rgba(214, 179, 106, 0.14);
}
.skg-board-theme input[type="checkbox"] {
accent-color: #d6b36a;
}
.skg-board-theme ::selection {
background: rgba(214, 179, 106, 0.28);
color: #fff;
}
.login-hero {
isolation: isolate;
color: #282828;

34
web/components/ad-recreation-board.tsx
View File

@@ -1477,10 +1477,10 @@ export function AdRecreationBoard({
}
return (
<section className="relative z-20 h-screen w-screen overflow-hidden bg-black text-white">
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_9%_0%,rgba(225,29,72,0.18),transparent_28%),radial-gradient(circle_at_60%_0%,rgba(14,165,233,0.08),transparent_26%)]" />
<div className="relative flex h-full flex-col px-4 py-4">
<header className="mb-3 flex items-center justify-between gap-4 rounded-lg border border-white/10 bg-white/[0.04] px-4 py-3">
<section className="skg-board-theme relative z-20 h-screen w-screen overflow-hidden bg-black text-white">
<div className="skg-board-ambient pointer-events-none absolute inset-0" />
<div className="relative z-10 flex h-full flex-col px-4 py-4">
<header className="skg-board-topbar mb-3 flex items-center justify-between gap-4 rounded-lg border border-white/10 bg-white/[0.04] px-4 py-3">
<div className="min-w-0">
<div className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/40">feed ad recreation worksheet</div>
<h1 className="mt-1 text-[22px] font-semibold leading-tight text-white">信息流广告复刻工作表</h1>
@@ -1510,12 +1510,12 @@ export function AdRecreationBoard({
onStartProduction={startProduction}
/>
<section className="flex min-h-0 flex-col rounded-lg border border-white/10 bg-white/[0.035] shadow-2xl">
<section className="skg-board-panel flex min-h-0 flex-col rounded-lg border border-white/10 bg-white/[0.035] shadow-2xl">
<header className="shrink-0 border-b border-white/10 p-3">
<div className="flex items-center justify-between gap-4">
<div className="min-w-0">
<div className="flex items-center gap-2">
<span className="inline-flex h-7 w-7 items-center justify-center rounded-md bg-rose-500/12 text-rose-100"><Mic className="h-3.5 w-3.5" /></span>
<span className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[#d6b36a]/18 bg-[#d6b36a]/10 text-[#f2d58a]"><Mic className="h-3.5 w-3.5" /></span>
<WorkflowStepBadge step={workflow.source} compact />
<h2 className="text-[15px] font-semibold leading-tight text-white">源视频解析与参考帧</h2>
</div>
@@ -1615,10 +1615,10 @@ function MaterialColumn({
onStartProduction: () => void
}) {
return (
<section className="flex min-h-0 flex-col gap-3 rounded-lg border border-white/10 bg-white/[0.035] p-3 shadow-2xl">
<section className="skg-board-panel flex min-h-0 flex-col gap-3 rounded-lg border border-white/10 bg-white/[0.035] p-3 shadow-2xl">
<header className="shrink-0 border-b border-white/10 pb-3">
<div className="mb-2 flex items-center gap-2">
<span className="inline-flex h-8 w-8 items-center justify-center rounded-md bg-rose-500/12 text-rose-100"><Plus className="h-4 w-4" /></span>
<span className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[#d6b36a]/18 bg-[#d6b36a]/10 text-[#f2d58a]"><Plus className="h-4 w-4" /></span>
<WorkflowStepBadge step={step} compact />
</div>
<h2 className="text-[15px] font-semibold leading-tight text-white">素材输入</h2>
@@ -1637,7 +1637,7 @@ function MaterialColumn({
type="button"
onClick={onStartProduction}
disabled={data.submitting || (!url.trim() && !job)}
className="inline-flex h-10 items-center justify-center rounded-md bg-rose-600 px-3 text-[13px] font-semibold text-white transition hover:bg-rose-500 disabled:cursor-not-allowed disabled:opacity-45"
className="inline-flex h-10 items-center justify-center rounded-md bg-[#f0ead8] px-3 text-[13px] font-semibold text-black shadow-[0_14px_28px_rgba(0,0,0,0.28)] transition hover:bg-[#fff7df] disabled:cursor-not-allowed disabled:opacity-45"
>
开始分析
</button>
@@ -4267,7 +4267,7 @@ function MaterialCard({
<button
type="button"
onClick={onClick}
className={`group w-full rounded-lg border p-3 text-left transition ${active ? "border-rose-400/70 bg-rose-500/10" : "border-white/10 bg-black/28 hover:border-white/24 hover:bg-white/[0.045]"}`}
className={`group w-full rounded-lg border p-3 text-left transition ${active ? "border-[#d6b36a]/55 bg-[#d6b36a]/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]" : "border-white/10 bg-black/28 hover:border-[#d6b36a]/28 hover:bg-white/[0.045]"}`}
>
<div className="flex items-start justify-between gap-2">
<div className="min-w-0">
@@ -4296,7 +4296,7 @@ function MaterialCard({
onDelete()
}
}}
className="mt-3 hidden h-8 items-center justify-center gap-1 rounded-md border border-white/10 text-[11px] text-white/50 transition hover:border-rose-300/40 hover:text-rose-200 group-hover:flex"
className="mt-3 hidden h-8 items-center justify-center gap-1 rounded-md border border-white/10 text-[11px] text-white/50 transition hover:border-[#d6b36a]/40 hover:text-[#f2d58a] group-hover:flex"
>
<Trash2 className="h-3.5 w-3.5" />
删除素材
@@ -4324,9 +4324,9 @@ const workflowStatusLabels: Record<WorkflowStepStatus, string> = {
}
function workflowStatusClass(status: WorkflowStepStatus) {
if (status === "ready") return "border-emerald-300/25 bg-emerald-400/10 text-emerald-100"
if (status === "running") return "border-cyan-300/25 bg-cyan-400/10 text-cyan-100"
if (status === "paused") return "border-amber-300/22 bg-amber-300/[0.08] text-amber-100/76"
if (status === "ready") return "border-[#8fb071]/32 bg-[#8fb071]/12 text-[#d7efbc]"
if (status === "running") return "border-[#d6b36a]/34 bg-[#d6b36a]/12 text-[#f5d98e]"
if (status === "paused") return "border-[#d6b36a]/25 bg-[#d6b36a]/08 text-[#e8c77a]/78"
if (status === "blocked") return "border-white/8 bg-white/[0.025] text-white/32"
return "border-white/10 bg-white/[0.035] text-white/45"
}
@@ -4340,10 +4340,10 @@ function workflowStatusIcon(status: WorkflowStepStatus) {
function WorkflowOrderBar({ steps }: { steps: WorkflowStep[] }) {
return (
<div className="mb-3 shrink-0 rounded-lg border border-white/10 bg-white/[0.035] p-2">
<div className="skg-board-panel mb-3 shrink-0 rounded-lg border border-white/10 bg-white/[0.035] p-2">
<div className="mb-1.5 flex items-center justify-between gap-3">
<div className="flex items-center gap-2 text-[11px] font-semibold text-white/66">
<PanelRight className="h-3.5 w-3.5 text-rose-200" />
<PanelRight className="h-3.5 w-3.5 text-[#f2d58a]" />
流程顺序
</div>
<div className="truncate text-[10.5px] text-white/36">编号按解锁条件判定，悬停每步可查看完整判断逻辑。</div>
@@ -4386,7 +4386,7 @@ function WorkflowStepBadge({ step, compact }: { step: WorkflowStep; compact?: bo
function SectionTitle({ icon, title }: { icon: ReactNode; title: string }) {
return (
<h3 className="flex items-center gap-2 text-[13px] font-semibold text-white">
<span className="text-rose-200">{icon}</span>
<span className="text-[#f2d58a]">{icon}</span>
{title}
</h3>
)