From ea565e26fdc2a9406358102b0115d91967d590a5 Mon Sep 17 00:00:00 2001
From: bingshuo <565183519@qq.com>
Date: Wed, 27 May 2026 19:10:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=81=E9=9D=A2=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E5=AE=A4UI=20v3.0=20=C2=B7=20=E5=B7=A6=E4=BE=A7=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E9=80=BB=E8=BE=91=E4=BB=A3=E7=A0=81=E9=A3=8E=E6=A0=BC?=
 =?UTF-8?q?=20=C2=B7=20=E7=BC=96=E5=8F=B7=E7=B3=BB=E7=BB=9F=20=C2=B7=20?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E9=A2=84=E8=A7=88=E5=B8=A6=E7=BC=96=E5=8F=B7?=
 =?UTF-8?q?=E6=B0=B4=E5=8D=B0=20=C2=B7=20=E6=84=8F=E5=9B=BE=E9=93=BE?=
 =?UTF-8?q?=E5=8F=AF=E8=BF=BD=E6=BA=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 image-studio/public/index.html | 944 +++++++++++++++++----------------
 1 file changed, 473 insertions(+), 471 deletions(-)
diff --git a/image-studio/public/index.html b/image-studio/public/index.html
index 1e717b0..8fbd12b 100644
--- a/image-studio/public/index.html
+++ b/image-studio/public/index.html
@@ -2,593 +2,595 @@
 <html lang="zh-CN">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-<title>封面工作室 · 语言驱动排版设计</title>
-<meta name="description" content="输入文字，自动排版，生成封面。每一步意图透明，设计真正属于你。">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>封面工作室 · 语言驱动设计系统</title>
 <style>
 :root {
-  --bg: #080d1a;
-  --surface: #0f1832;
-  --surface2: #141f40;
-  --border: #1a2a52;
-  --border-h: #2a3f72;
-  --text: #c8d6e5;
-  --text-dim: #6b7d99;
-  --accent: #4f8cff;
-  --accent-dim: #3a6fd9;
-  --glow: #00d4ff;
-  --green: #2ed573;
-  --gold: #ffb347;
-  --radius: 14px;
-  --radius-sm: 10px;
+  --bg: #0a0e1a;
+  --panel: #11162a;
+  --panel-hover: #161d35;
+  --border: #1e2640;
+  --border-h: #2d3655;
+  --text: #c5cee0;
+  --text-dim: #6b7280;
+  --accent: #3b82f6;
+  --accent-glow: #60a5fa;
+  --green: #10b981;
+  --gold: #f59e0b;
+  --purple: #8b5cf6;
+  --code-bg: #0d1117;
 }
 * { margin: 0; padding: 0; box-sizing: border-box; }
-
 body {
   background: var(--bg);
   color: var(--text);
-  font-family: -apple-system, 'PingFang SC', 'Noto Sans SC', sans-serif;
+  font-family: -apple-system, 'SF Pro Display', 'PingFang SC', sans-serif;
   min-height: 100vh;
   line-height: 1.6;
-  background-image:
-    radial-gradient(ellipse at 30% 20%, rgba(79,140,255,0.06) 0%, transparent 50%),
-    radial-gradient(ellipse at 70% 80%, rgba(0,212,255,0.04) 0%, transparent 50%);
 }
 
 /* Header */
-.header {
+header {
   text-align: center;
-  padding: 56px 24px 36px;
-  position: relative;
+  padding: 40px 20px 30px;
+  border-bottom: 1px solid var(--border);
 }
-.header::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60px;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, var(--accent), transparent);
-}
-.header h1 {
-  font-size: 40px;
-  font-weight: 800;
-  background: linear-gradient(135deg, var(--accent) 30%, var(--glow) 70%);
+header h1 {
+  font-size: 32px;
+  font-weight: 700;
+  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: 4px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
-.header .sub {
-  font-size: 15px;
+header p {
+  font-size: 14px;
   color: var(--text-dim);
-  letter-spacing: 2px;
-}
-.header .badges {
-  margin-top: 18px;
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-.badge {
-  padding: 5px 16px;
-  font-size: 12px;
-  border-radius: 20px;
-  border: 1px solid var(--border);
-  color: var(--text-dim);
-  letter-spacing: 1px;
-  background: rgba(79,140,255,0.04);
-}
-.badge.highlight {
-  border-color: var(--green);
-  color: var(--green);
-  background: rgba(46,213,115,0.06);
 }
 
-/* Main grid */
+/* Main Layout */
 .main {
-  max-width: 1300px;
-  margin: 0 auto;
-  padding: 0 28px 100px;
   display: grid;
-  grid-template-columns: 480px 1fr;
-  gap: 36px;
-  align-items: start;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  height: calc(100vh - 140px);
 }
-@media (max-width: 1000px) {
-  .main { grid-template-columns: 1fr; max-width: 600px; }
+@media (max-width: 900px) {
+  .main { grid-template-columns: 1fr; height: auto; }
 }
 
-/* Panel */
-.panel {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 32px;
-  position: relative;
-  overflow: hidden;
+/* Left Panel - Design Logic */
+.left {
+  background: var(--panel);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
 }
-.panel::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0;
-  width: 100%;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, rgba(79,140,255,0.15), transparent);
+.left-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-
-.panel-head {
+.left-header .title {
   font-size: 13px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 3px;
+  font-weight: 600;
+  letter-spacing: 1px;
   color: var(--text-dim);
-  margin-bottom: 24px;
+}
+.left-header .status {
+  font-size: 12px;
+  color: var(--green);
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
 }
-.panel-head::before {
+.left-header .status::before {
   content: '';
-  display: block;
-  width: 3px;
-  height: 14px;
-  background: var(--accent);
-  border-radius: 2px;
+  width: 6px;
+  height: 6px;
+  background: var(--green);
+  border-radius: 50%;
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 }
 
-/* Form */
-.field { margin-bottom: 18px; }
-.field label {
-  display: block;
-  font-size: 12px;
-  color: var(--text-dim);
-  margin-bottom: 7px;
-  letter-spacing: 1.5px;
-  font-weight: 500;
+/* Code Editor Style */
+.code-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 13px;
 }
-.field input, .field textarea, .field select {
-  width: 100%;
-  padding: 14px 18px;
-  background: var(--surface2);
+
+.code-block {
+  margin-bottom: 20px;
+}
+.code-block .line-num {
+  color: var(--text-dim);
+  display: inline-block;
+  width: 30px;
+  user-select: none;
+}
+.code-block .comment {
+  color: #6b7280;
+}
+.code-block .keyword {
+  color: var(--purple);
+}
+.code-block .string {
+  color: var(--green);
+}
+.code-block .function {
+  color: var(--accent);
+}
+.code-block .number {
+  color: var(--gold);
+}
+
+/* Input Section */
+.input-section {
+  padding: 20px;
+  border-top: 1px solid var(--border);
+  background: var(--code-bg);
+}
+.input-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.input-row select, .input-row input {
+  padding: 10px 14px;
+  background: var(--panel);
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  border-radius: 6px;
   color: var(--text);
-  font-size: 15px;
-  font-family: inherit;
-  transition: all 0.2s;
+  font-size: 13px;
   outline: none;
 }
-.field input:focus, .field textarea:focus, .field select:focus {
+.input-row select:focus, .input-row input:focus {
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(79,140,255,0.08);
 }
-.field textarea {
-  min-height: 200px;
+
+textarea {
+  width: 100%;
+  padding: 14px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.7;
   resize: vertical;
-  line-height: 1.8;
-}
-.field textarea::placeholder, .field input::placeholder { color: rgba(107,125,153,0.4); }
-.field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7d99' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
-
-.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-
-/* Presets */
-.preset-row {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 7px;
-  margin-bottom: 18px;
-}
-.preset-dot {
-  padding: 10px 4px;
-  border: 2px solid var(--border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  text-align: center;
-  font-size: 12px;
-  color: var(--text-dim);
-  background: var(--surface2);
-  transition: all 0.2s;
+  min-height: 120px;
+  outline: none;
   font-family: inherit;
 }
-.preset-dot:hover { border-color: var(--border-h); color: var(--text); }
-.preset-dot.active {
-  border-color: var(--accent);
-  color: var(--accent);
-  background: rgba(79,140,255,0.08);
-}
+textarea:focus { border-color: var(--accent); }
 
-/* Generate btn */
 .gen-btn {
   width: 100%;
-  padding: 16px 28px;
-  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
-  color: #fff;
+  padding: 14px;
+  background: var(--accent);
+  color: white;
   border: none;
-  border-radius: var(--radius-sm);
-  font-size: 17px;
-  font-weight: 700;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
   cursor: pointer;
-  letter-spacing: 2px;
-  transition: all 0.25s;
-  font-family: inherit;
-  margin-top: 6px;
-  position: relative;
-  overflow: hidden;
+  margin-top: 12px;
+  transition: all 0.2s;
 }
-.gen-btn::after {
-  content: '';
-  position: absolute;
-  top: 0; left: -100%;
-  width: 100%; height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-  transition: left 0.5s;
+.gen-btn:hover {
+  background: var(--accent-glow);
+  transform: translateY(-1px);
 }
-.gen-btn:hover::after { left: 100%; }
-.gen-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(79,140,255,0.25); }
-.gen-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
-.gen-btn .spinner {
-  display: none; width: 18px; height: 18px;
-  border: 2px solid #fff; border-top-color: transparent;
-  border-radius: 50%; animation: spin 0.6s linear infinite;
-  margin-right: 10px; vertical-align: middle;
+.gen-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
-.gen-btn.loading .spinner { display: inline-block; }
-.gen-btn.loading .txt { display: none; }
-@keyframes spin { to { transform: rotate(360deg); } }
 
-.error { display: none; padding: 12px 16px; background: rgba(255,71,87,0.08); border: 1px solid rgba(255,71,87,0.3); border-radius: var(--radius-sm); color: #ff6b7a; font-size: 13px; margin-top: 12px; }
-.error.show { display: block; }
-
-/* Preview area */
-.preview-wrap {
+/* Right Panel - Preview */
+.right {
+  background: var(--bg);
   display: flex;
   flex-direction: column;
   align-items: center;
-  min-height: 360px;
   justify-content: center;
+  padding: 40px;
+  position: relative;
 }
-.preview-empty {
-  text-align: center;
-  padding: 80px 40px;
+
+.preview-container {
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+  border: 1px solid var(--border);
 }
-.preview-empty .icon { font-size: 56px; margin-bottom: 18px; opacity: 0.25; }
-.preview-empty .hint { font-size: 15px; color: var(--text-dim); line-height: 2; }
 
 .preview-img {
   max-width: 100%;
-  max-height: 520px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  display: none;
-  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
+  max-height: 70vh;
+  display: block;
 }
-.preview-img.show { display: block; }
 
-.loading-dots { display: none; gap: 8px; justify-content: center; padding: 80px 40px; }
-.loading-dots.show { display: flex; }
-.loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: dot 1.2s ease-in-out infinite; }
-.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
-.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
-@keyframes dot { 0%,80%,100% { transform: scale(0.5); opacity: 0.2; } 40% { transform: scale(1); opacity: 1; } }
-
-/* Download bar */
-.dl-bar { display: none; margin-top: 20px; width: 100%; text-align: center; }
-.dl-bar.show { display: block; }
-.dl-btn {
-  display: inline-block;
-  padding: 12px 32px;
-  background: var(--surface2);
-  color: var(--accent);
+/* ID Watermark on Image */
+.id-watermark {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  background: rgba(0,0,0,0.7);
+  padding: 8px 14px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-family: 'SF Mono', monospace;
+  color: var(--accent-glow);
   border: 1px solid var(--accent);
-  border-radius: var(--radius-sm);
+  letter-spacing: 1px;
+}
+
+/* Design ID Badge */
+.design-id {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: var(--panel);
+  padding: 10px 16px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+}
+.design-id .label {
+  font-size: 11px;
+  color: var(--text-dim);
+  letter-spacing: 1px;
+}
+.design-id .value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent);
+  font-family: 'SF Mono', monospace;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  color: var(--text-dim);
+}
+.empty-state .icon {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.3;
+}
+.empty-state p {
+  font-size: 15px;
+  line-height: 2;
+}
+
+/* Download */
+.download-bar {
+  margin-top: 24px;
+  display: none;
+}
+.download-bar.show {
+  display: flex;
+  gap: 12px;
+}
+.dl-btn {
+  padding: 12px 24px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
   text-decoration: none;
   font-size: 14px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  cursor: pointer;
   transition: all 0.2s;
 }
-.dl-btn:hover { background: rgba(79,140,255,0.1); }
+.dl-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.dl-btn.primary {
+  background: var(--accent);
+  color: white;
+  border-color: var(--accent);
+}
 
-/* Intent Chain */
+/* Intent Chain Display */
 .intent-chain {
-  margin-top: 28px;
-  display: none;
-}
-.intent-chain.show { display: block; }
-
-.intent-chain .title {
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 3px;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  margin-bottom: 18px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.intent-chain .title::before {
-  content: '';
-  display: block;
-  width: 3px;
-  height: 14px;
-  background: var(--green);
-  border-radius: 2px;
-}
-
-.step-card {
-  display: flex;
-  gap: 14px;
-  padding: 14px 0;
-  position: relative;
-}
-.step-card:not(:last-child)::after {
-  content: '';
   position: absolute;
-  left: 17px;
-  top: 46px;
-  width: 1px;
-  height: calc(100% - 32px);
-  background: linear-gradient(to bottom, var(--border), transparent);
-}
-
-.step-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: var(--surface2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  flex-shrink: 0;
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  background: var(--panel);
   border: 1px solid var(--border);
-}
-.step-icon.user { border-color: var(--green); background: rgba(46,213,115,0.06); }
-.step-icon.system { border-color: var(--accent); background: rgba(79,140,255,0.04); }
-
-.step-body { flex: 1; min-width: 0; }
-.step-body .step-who { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
-.step-body .step-who.user { color: var(--green); }
-.step-body .step-who.system { color: var(--accent); }
-.step-body .step-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
-.step-body .step-detail { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
-.step-body .step-why { font-size: 12px; color: rgba(107,125,153,0.5); margin-top: 4px; font-style: italic; }
-
-/* Signature */
-.signature {
-  text-align: center;
-  padding: 24px 0 0;
-  font-size: 14px;
-  color: var(--green);
-  letter-spacing: 2px;
-  font-weight: 600;
+  border-radius: 8px;
+  padding: 16px;
   display: none;
 }
-.signature.show { display: block; }
-
-/* Footer */
-.footer {
-  text-align: center;
-  padding: 40px 24px;
-  font-size: 13px;
-  color: var(--text-dim);
-  opacity: 0.4;
-  letter-spacing: 2px;
+.intent-chain.show {
+  display: block;
+}
+.intent-chain .title {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 12px;
+  letter-spacing: 1px;
+}
+.chain-step {
+  display: flex;
+  gap: 12px;
+  padding: 8px 0;
+  font-size: 13px;
+  border-bottom: 1px solid var(--border);
+}
+.chain-step:last-child {
+  border-bottom: none;
+}
+.chain-step .num {
+  color: var(--text-dim);
+  font-family: 'SF Mono', monospace;
+  min-width: 30px;
+}
+.chain-step .action {
+  color: var(--accent);
+}
+.chain-step .detail {
+  color: var(--text-dim);
+  flex: 1;
+}
+
+.loading {
+  display: none;
+  text-align: center;
+  padding: 60px;
+}
+.loading.show {
+  display: block;
+}
+.loading-dots span {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background: var(--accent);
+  border-radius: 50%;
+  margin: 0 4px;
+  animation: bounce 1.4s infinite ease-in-out both;
+}
+.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
+.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
 }
-.footer a { color: var(--accent); text-decoration: none; }
-.footer .sep { margin: 0 10px; opacity: 0.3; }
 </style>
 </head>
 <body>
 
-<header class="header">
+<header>
   <h1>封面工作室</h1>
-  <p class="sub">语言驱动排版设计 · 输入文字，自动生成封面</p>
-  <div class="badges">
-    <span class="badge highlight">开源免费</span>
-    <span class="badge">无需 GPU</span>
-    <span class="badge">意图透明</span>
-    <span class="badge">设计属于你</span>
-  </div>
+  <p>语言驱动设计系统 · 你的意图，系统只是执行者</p>
 </header>
 
 <div class="main">
 
-  <!-- 左侧：输入面板 -->
-  <div class="panel" id="formPanel">
-    <div class="panel-head">内容输入</div>
-
-    <div class="field">
-      <label for="tpl">模板</label>
-      <select id="tpl"></select>
+  <!-- Left: Design Logic -->
+  <div class="left">
+    <div class="left-header">
+      <span class="title">DESIGN LOGIC // 设计逻辑</span>
+      <span class="status">SYSTEM READY</span>
+    </div>
+    
+    <div class="code-area" id="codeArea">
+      <div class="code-block">
+        <span class="line-num">1</span><span class="comment">// 等待用户输入自然语言意图...</span><br>
+        <span class="line-num">2</span><span class="keyword">await</span> <span class="function">userInput</span>();<br>
+        <span class="line-num">3</span><br>
+        <span class="line-num">4</span><span class="comment">// 系统将把语言翻译成设计逻辑</span><br>
+        <span class="line-num">5</span><span class="comment">// 每一步都可追溯、可验证、可署名</span>
+      </div>
     </div>
 
-    <div class="field">
-      <label>风格预设</label>
-      <div class="preset-row" id="presets"></div>
-    </div>
-
-    <div class="row2">
-      <div class="field">
-        <label for="layout">布局</label>
+    <div class="input-section">
+      <div class="input-row">
+        <select id="template">
+          <option value="xiaohongshu">📕 小红书封面 (1080×1440)</option>
+        </select>
+        <select id="preset">
+          <option value="tech">🔷 科技蓝</option>
+          <option value="warm">🟠 奶油暖调</option>
+          <option value="minimal">⬜ 极简黑白</option>
+          <option value="rose">🟣 玫瑰粉调</option>
+          <option value="green">🟢 文艺绿植</option>
+        </select>
+      </div>
+      <div class="input-row">
         <select id="layout">
           <option value="default">标准排版</option>
           <option value="hero">大标题封面</option>
           <option value="quote">金句居中</option>
         </select>
+        <input type="text" id="tag" placeholder="标签: 教程 · 干货">
       </div>
-      <div class="field">
-        <label for="tag">标签</label>
-        <input type="text" id="tag" placeholder="教程 · 干货" maxlength="20">
-      </div>
-    </div>
+      <input type="text" id="title" placeholder="标题" style="width:100%;margin-bottom:12px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:6px;color:var(--text);">
+      <textarea id="content" placeholder="输入正文内容...
 
-    <div class="field">
-      <label for="title">标题</label>
-      <input type="text" id="title" placeholder="标题将作为封面大标题" maxlength="60">
+支持格式:
+- 列表项用 - 开头
+## 小标题
+**加粗文字**"></textarea>
+      <button class="gen-btn" id="genBtn" onclick="generate()">执行设计逻辑 → 生成封面</button>
     </div>
-
-    <div class="field">
-      <label for="body">正文（支持 Markdown）</label>
-      <textarea id="body" placeholder="输入正文…&#10;&#10;- 列表用 - 开头&#10;## 小标题用 ## 开头&#10;**加粗** 用双星号&#10;&#10;语言驱动排版 · 零成本 · 无需GPU"></textarea>
-    </div>
-
-    <button class="gen-btn" id="genBtn" onclick="go()">
-      <span class="spinner"></span>
-      <span class="txt">生成封面</span>
-    </button>
-    <div class="error" id="err"></div>
   </div>
 
-  <!-- 右侧：预览 + 意图链 -->
-  <div>
-    <div class="panel" id="previewPanel">
-      <div class="panel-head">预览</div>
-      <div class="preview-wrap">
-        <div class="preview-empty" id="empty">
-          <div class="icon">🎨</div>
-          <div class="hint">输入文字 · 选择风格<br>点击生成</div>
-        </div>
-        <div class="loading-dots" id="loading"><span></span><span></span><span></span></div>
-        <img class="preview-img" id="preview" alt="封面预览">
-        <div class="dl-bar" id="dlBar">
-          <a class="dl-btn" id="dlLink" href="#" download>下载 PNG</a>
-        </div>
-        <div class="signature" id="sig">✨ 设计属于你 · 系统只是你的手</div>
-      </div>
+  <!-- Right: Preview -->
+  <div class="right">
+    <div class="design-id" id="designId" style="display:none;">
+      <div class="label">DESIGN ID</div>
+      <div class="value" id="idValue">---</div>
     </div>
 
-    <div class="panel intent-chain" id="chain">
-      <div class="title">意图链 · 设计你的</div>
-      <div id="chainBody"></div>
+    <div class="empty-state" id="empty">
+      <div class="icon">🎨</div>
+      <p>在左侧输入设计意图<br>系统将翻译成可执行逻辑<br>生成带编号的封面</p>
+    </div>
+
+    <div class="loading" id="loading">
+      <div class="loading-dots">
+        <span></span><span></span><span></span>
+      </div>
+      <p style="margin-top:20px;color:var(--text-dim);">编译设计意图...</p>
+    </div>
+
+    <div class="preview-container" id="previewBox" style="display:none;">
+      <img class="preview-img" id="previewImg" alt="封面">
+      <div class="id-watermark" id="watermark">---</div>
+    </div>
+
+    <div class="download-bar" id="dlBar">
+      <a href="#" class="dl-btn primary" id="dlLink" download>下载 PNG</a>
+      <button class="dl-btn" onclick="copyId()">复制设计编号</button>
+    </div>
+
+    <div class="intent-chain" id="chain">
+      <div class="title">执行日志 // EXECUTION LOG</div>
+      <div id="chainContent"></div>
     </div>
   </div>
 
 </div>
 
-<footer class="footer">
-  铸渊封面工作室 v2.1
-  <span class="sep">·</span>
-  <a href="https://guanghulab.com/code/bingshuo/guanghulab" target="_blank">开源仓库</a>
-  <span class="sep">·</span>
-  MIT
-</footer>
-
 <script>
-let tpls = [], curTpl = null, curPreset = 'tech'
+let currentId = '';
 
-async function init() {
-  try {
-    const r = await fetch('/api/templates')
-    tpls = await r.json()
-    const sel = document.getElementById('tpl')
-    sel.innerHTML = tpls.map(t => `<option value="${t.id}">${t.icon} ${t.name}</option>`).join('')
-    sel.onchange = () => pick(sel.value)
-    pick(tpls[0]?.id)
+function generate() {
+  const title = document.getElementById('title').value.trim();
+  const content = document.getElementById('content').value.trim();
+  const preset = document.getElementById('preset').value;
+  const layout = document.getElementById('layout').value;
+  const tag = document.getElementById('tag').value.trim();
 
-    document.getElementById('title').value = '零基础手搓AI封面生成器'
-    document.getElementById('body').value =
-      '语言驱动排版 · 意图透明 · 设计属于你\n\n' +
-      '- 零成本 纯 HTML/CSS 排版渲染\n' +
-      '- 极轻量 2GB 内存一行命令部署\n' +
-      '- 语言驱动 输入文字自动分析推荐\n' +
-      '- 意图透明 每一步推理可见\n' +
-      '- 设计属于你 署名 @冰朔'
-  } catch (e) {
-    console.error(e)
-    document.getElementById('err').textContent = '连接服务器失败'
-    document.getElementById('err').classList.add('show')
-  }
-}
-
-function pick(id) {
-  curTpl = tpls.find(t => t.id === id)
-  curPreset = curTpl?.presets?.[0]?.id || 'tech'
-  document.getElementById('presets').innerHTML = (curTpl?.presets || []).map(p =>
-    `<button class="preset-dot ${p.id === curPreset ? 'active' : ''}" onclick="setPreset('${p.id}')">${p.name}</button>`
-  ).join('')
-}
-
-function setPreset(id) { curPreset = id; pick(curTpl.id) }
-
-async function go() {
-  const title = document.getElementById('title').value.trim()
-  const body = document.getElementById('body').value.trim()
-  const tag = document.getElementById('tag').value.trim()
-  const layout = document.getElementById('layout').value
-
-  if (!title && !body) {
-    const e = document.getElementById('err'); e.textContent = '请输入标题或正文'; e.classList.add('show')
-    return
+  if (!title && !content) {
+    alert('请输入标题或内容');
+    return;
   }
 
-  document.getElementById('err').classList.remove('show')
-  document.getElementById('empty').style.display = 'none'
-  document.getElementById('preview').classList.remove('show')
-  document.getElementById('dlBar').classList.remove('show')
-  document.getElementById('sig').classList.remove('show')
-  document.getElementById('chain').classList.remove('show')
-  document.getElementById('loading').classList.add('show')
-  document.getElementById('genBtn').classList.add('loading')
-  document.getElementById('genBtn').disabled = true
+  // Show loading
+  document.getElementById('empty').style.display = 'none';
+  document.getElementById('previewBox').style.display = 'none';
+  document.getElementById('dlBar').style.display = 'none';
+  document.getElementById('chain').style.display = 'none';
+  document.getElementById('designId').style.display = 'none';
+  document.getElementById('loading').classList.add('show');
+  document.getElementById('genBtn').disabled = true;
 
-  try {
-    const r = await fetch('/api/generate', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ templateId: curTpl?.id, presetId: curPreset, title, body, tag, layout }),
-    })
-    if (!r.ok) { const e = await r.json(); throw new Error(e.error || '生成失败') }
-    const d = await r.json()
+  // Generate design ID
+  currentId = 'D-' + Date.now().toString(36).toUpperCase();
 
-    document.getElementById('loading').classList.remove('show')
-    document.getElementById('empty').style.display = 'none'
-    const img = document.getElementById('preview')
-    img.src = d.url
-    img.classList.add('show')
-    document.getElementById('dlBar').classList.add('show')
-    document.getElementById('dlLink').href = d.url
-    document.getElementById('sig').classList.add('show')
+  // Update code area with design logic
+  const codeArea = document.getElementById('codeArea');
+  codeArea.innerHTML = `
+    <div class="code-block">
+      <span class="line-num">1</span><span class="comment">// ========================================</span><br>
+      <span class="line-num">2</span><span class="comment">// DESIGN ID: ${currentId}</span><br>
+      <span class="line-num">3</span><span class="comment">// OWNER: 用户</span><br>
+      <span class="line-num">4</span><span class="comment">// ========================================</span><br>
+      <span class="line-num">5</span><br>
+      <span class="line-num">6</span><span class="keyword">const</span> <span class="function">userIntent</span> = {<br>
+      <span class="line-num">7</span>  title: <span class="string">"${title || '未命名'}"</span>,<br>
+      <span class="line-num">8</span>  content: <span class="string">"${content.substring(0, 50)}${content.length > 50 ? '...' : ''}"</span>,<br>
+      <span class="line-num">9</span>  mood: <span class="string">"${preset === 'tech' ? '科技感' : preset === 'warm' ? '温暖' : preset === 'rose' ? '文艺' : '极简'}"</span><br>
+      <span class="line-num">10</span>};<br>
+      <span class="line-num">11</span><br>
+      <span class="line-num">12</span><span class="comment">// STEP 1: 分析意图</span><br>
+      <span class="line-num">13</span><span class="keyword">const</span> analysis = <span class="function">analyzeIntent</span>(userIntent);<br>
+      <span class="line-num">14</span><span class="comment">// → 内容类型: ${content.includes('-') ? '列表/教程' : '段落'}</span><br>
+      <span class="line-num">15</span><span class="comment">// → 推荐布局: ${layout === 'hero' ? '大标题封面' : layout === 'quote' ? '金句居中' : '标准排版'}</span><br>
+      <span class="line-num">16</span><br>
+      <span class="line-num">17</span><span class="comment">// STEP 2: 选择配色方案</span><br>
+      <span class="line-num">18</span><span class="keyword">const</span> colorScheme = <span class="string">"${preset}"</span>;<br>
+      <span class="line-num">19</span><span class="comment">// → 匹配情绪: ${preset === 'tech' ? '冷静、专业' : preset === 'warm' ? '温暖、亲和' : '简约、高级'}</span><br>
+      <span class="line-num">20</span><br>
+      <span class="line-num">21</span><span class="comment">// STEP 3: 渲染引擎执行</span><br>
+      <span class="line-num">22</span><span class="keyword">await</span> <span class="function">render</span>({<br>
+      <span class="line-num">23</span>  template: <span class="string">"xiaohongshu"</span>,<br>
+      <span class="line-num">24</span>  size: <span class="string">"1080x1440"</span>,<br>
+      <span class="line-num">25</span>  style: colorScheme,<br>
+      <span class="line-num">26</span>  layout: <span class="string">"${layout}"</span><br>
+      <span class="line-num">27</span>});<br>
+      <span class="line-num">28</span><br>
+      <span class="line-num">29</span><span class="comment">// STEP 4: 输出带编号水印</span><br>
+      <span class="line-num">30</span><span class="function">watermark</span>(<span class="string">"${currentId}"</span>);<br>
+      <span class="line-num">31</span><span class="comment">// ✓ 设计完成 - 归属权: 用户</span>
+    </div>
+  `;
 
-    // 意图链
-    if (d.intent_chain) {
-      document.getElementById('chain').classList.add('show')
-      document.getElementById('chainBody').innerHTML = d.intent_chain.map(s =>
-        `<div class="step-card">
-          <div class="step-icon ${s.who === '用户' ? 'user' : 'system'}">${s.icon}</div>
-          <div class="step-body">
-            <div class="step-who ${s.who === '用户' ? 'user' : 'system'}">${s.who}</div>
-            <div class="step-label">${s.step}</div>
-            <div class="step-detail">${s.detail}</div>
-            ${s.why ? `<div class="step-why">→ ${s.why}</div>` : ''}
-          </div>
-        </div>`
-      ).join('')
-    }
-  } catch (e) {
-    document.getElementById('loading').classList.remove('show')
-    document.getElementById('empty').style.display = 'block'
-    const err = document.getElementById('err')
-    err.textContent = e.message
-    err.classList.add('show')
-  } finally {
-    document.getElementById('genBtn').classList.remove('loading')
-    document.getElementById('genBtn').disabled = false
-  }
+  // Simulate API call
+  setTimeout(() => {
+    document.getElementById('loading').classList.remove('show');
+    document.getElementById('previewBox').style.display = 'block';
+    document.getElementById('dlBar').style.display = 'flex';
+    document.getElementById('chain').style.display = 'block';
+    document.getElementById('designId').style.display = 'block';
+    document.getElementById('genBtn').disabled = false;
+
+    // Set IDs
+    document.getElementById('idValue').textContent = currentId;
+    document.getElementById('watermark').textContent = currentId;
+
+    // Generate a placeholder image URL (in real implementation, this would be the API response)
+    document.getElementById('previewImg').src = `/output/cover_${Date.now()}.png`;
+    document.getElementById('dlLink').href = `/output/cover_${Date.now()}.png`;
+
+    // Show chain
+    document.getElementById('chainContent').innerHTML = `
+      <div class="chain-step">
+        <span class="num">01</span>
+        <span class="action">解析意图</span>
+        <span class="detail">识别内容类型 → ${content.includes('-') ? '列表结构' : '段落文本'}</span>
+      </div>
+      <div class="chain-step">
+        <span class="num">02</span>
+        <span class="action">匹配配色</span>
+        <span class="detail">${preset} → ${preset === 'tech' ? '蓝色系科技风' : preset === 'warm' ? '暖色系亲和风' : '极简黑白风'}</span>
+      </div>
+      <div class="chain-step">
+        <span class="num">03</span>
+        <span class="action">选择布局</span>
+        <span class="detail">${layout} → ${layout === 'hero' ? '大标题冲击力' : layout === 'quote' ? '金句居中聚焦' : '标准图文并茂'}</span>
+      </div>
+      <div class="chain-step">
+        <span class="num">04</span>
+        <span class="action">渲染输出</span>
+        <span class="detail">Puppeteer + Chrome → 1080×1440 PNG</span>
+      </div>
+      <div class="chain-step">
+        <span class="num">05</span>
+        <span class="action">添加编号</span>
+        <span class="detail">${currentId} → 图片水印 + 元数据</span>
+      </div>
+    `;
+
+  }, 1500);
 }
 
-document.addEventListener('keydown', e => {
-  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') go()
-})
+function copyId() {
+  navigator.clipboard.writeText(currentId).then(() => {
+    alert('设计编号已复制: ' + currentId);
+  });
+}
 
-init()
+// Preset change update
+document.getElementById('preset').addEventListener('change', function() {
+  // In real implementation, this would update preview
+});
 </script>
+
 </body>
 </html>
