From fae6c51a093b0edf85cf5ba2442a05e4883b91d8 Mon Sep 17 00:00:00 2001
From: bingshuo <565183519@qq.com>
Date: Wed, 27 May 2026 19:12:25 +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=A4=20v3.1=20=C2=B7=20=E6=8E=A5=E9=80=9A=E7=9C=9F?=
=?UTF-8?q?=E5=AE=9EAPI=20=C2=B7=20=E8=AE=BE=E8=AE=A1ID=E7=BC=96=E5=8F=B7?=
=?UTF-8?q?=E7=B3=BB=E7=BB=9F=20=C2=B7=20=E4=BB=A3=E7=A0=81=E5=8C=BA?=
=?UTF-8?q?=E5=8A=A8=E6=80=81=E6=9B=B4=E6=96=B0=20=C2=B7=20=E6=B0=B4?=
=?UTF-8?q?=E5=8D=B0=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
image-studio/public/index.html | 727 +++++++++++----------------------
1 file changed, 245 insertions(+), 482 deletions(-)
diff --git a/image-studio/public/index.html b/image-studio/public/index.html
index 8fbd12b..cbfdf9d 100644
--- a/image-studio/public/index.html
+++ b/image-studio/public/index.html
@@ -8,7 +8,6 @@
:root {
--bg: #0a0e1a;
--panel: #11162a;
- --panel-hover: #161d35;
--border: #1e2640;
--border-h: #2d3655;
--text: #c5cee0;
@@ -19,448 +18,187 @@
--gold: #f59e0b;
--purple: #8b5cf6;
--code-bg: #0d1117;
+ --radius: 8px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
-body {
- background: var(--bg);
- color: var(--text);
- font-family: -apple-system, 'SF Pro Display', 'PingFang SC', sans-serif;
- min-height: 100vh;
- line-height: 1.6;
-}
+body { background: var(--bg); color: var(--text); font-family: -apple-system, 'SF Pro Display', 'PingFang SC', sans-serif; min-height: 100vh; line-height: 1.6; }
-/* Header */
header {
- text-align: center;
- padding: 40px 20px 30px;
+ text-align: center; padding: 36px 20px 24px;
border-bottom: 1px solid var(--border);
}
header h1 {
- font-size: 32px;
- font-weight: 700;
+ font-size: 30px; font-weight: 700;
background: linear-gradient(90deg, var(--accent), var(--accent-glow));
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- margin-bottom: 8px;
-}
-header p {
- font-size: 14px;
- color: var(--text-dim);
+ -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+ margin-bottom: 6px;
}
+header p { font-size: 13px; color: var(--text-dim); letter-spacing: 1px; }
-/* Main Layout */
-.main {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 0;
- height: calc(100vh - 140px);
-}
-@media (max-width: 900px) {
- .main { grid-template-columns: 1fr; height: auto; }
-}
+.main { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: calc(100vh - 120px); }
+@media (max-width: 900px) { .main { grid-template-columns: 1fr; height: auto; } }
-/* Left Panel - Design Logic */
-.left {
- background: var(--panel);
- border-right: 1px solid var(--border);
- display: flex;
- flex-direction: column;
-}
-.left-header {
- padding: 16px 20px;
- border-bottom: 1px solid var(--border);
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-.left-header .title {
- font-size: 13px;
- font-weight: 600;
- letter-spacing: 1px;
- color: var(--text-dim);
-}
-.left-header .status {
- font-size: 12px;
- color: var(--green);
- display: flex;
- align-items: center;
- gap: 6px;
-}
-.left-header .status::before {
- content: '';
- width: 6px;
- height: 6px;
- background: var(--green);
- border-radius: 50%;
- animation: pulse 2s infinite;
-}
-@keyframes pulse {
- 0%, 100% { opacity: 1; }
- 50% { opacity: 0.4; }
+/* Left Panel */
+.left { background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
+.left-hdr {
+ padding: 14px 18px; border-bottom: 1px solid var(--border);
+ display: flex; justify-content: space-between; align-items: center;
}
+.left-hdr .t { font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--text-dim); }
+.left-hdr .s { font-size: 11px; color: var(--green); display: flex; align-items: center; gap: 6px; }
+.left-hdr .s::before { content: ''; width: 5px; height: 5px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; }
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
-/* Code Editor Style */
-.code-area {
- flex: 1;
- overflow-y: auto;
- padding: 20px;
- font-family: 'SF Mono', 'Fira Code', monospace;
- font-size: 13px;
-}
+.code-area { flex: 1; overflow-y: auto; padding: 18px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12.5px; background: var(--code-bg); }
+.code-block { margin-bottom: 6px; }
+.c-num { color: #4a5568; display: inline-block; width: 32px; user-select: none; text-align: right; margin-right: 8px; }
+.c-cmt { color: #636e7b; }
+.c-kw { color: var(--purple); }
+.c-str { color: var(--green); }
+.c-fn { color: var(--accent); }
+.c-nr { color: var(--gold); }
+.c-hl { color: var(--accent-glow); }
-.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-panel { padding: 16px 18px; border-top: 1px solid var(--border); background: var(--panel); }
+.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
+.input-panel select, .input-panel input { padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; outline: none; width: 100%; }
+.input-panel select:focus, .input-panel input:focus { border-color: var(--accent); }
+.input-panel textarea { width: 100%; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 13px; line-height: 1.7; resize: vertical; min-height: 100px; outline: none; font-family: inherit; }
+.input-panel textarea:focus { border-color: var(--accent); }
-/* 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: 6px;
- color: var(--text);
- font-size: 13px;
- outline: none;
-}
-.input-row select:focus, .input-row input:focus {
- border-color: var(--accent);
-}
+.gen-btn { width: 100%; padding: 13px; background: var(--accent); color: white; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 10px; transition: all 0.2s; letter-spacing: 1px; }
+.gen-btn:hover { background: var(--accent-glow); }
+.gen-btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--accent); }
-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;
- min-height: 120px;
- outline: none;
- font-family: inherit;
-}
-textarea:focus { border-color: var(--accent); }
+/* Right Panel */
+.right { background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; position: relative; overflow-y: auto; }
-.gen-btn {
- width: 100%;
- padding: 14px;
- background: var(--accent);
- color: white;
- border: none;
- border-radius: 6px;
- font-size: 14px;
- font-weight: 600;
- cursor: pointer;
- margin-top: 12px;
- transition: all 0.2s;
-}
-.gen-btn:hover {
- background: var(--accent-glow);
- transform: translateY(-1px);
-}
-.gen-btn:disabled {
- opacity: 0.5;
- cursor: not-allowed;
-}
+.design-id-badge { position: absolute; top: 20px; left: 20px; background: var(--panel); padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--border); display: none; z-index: 2; }
+.design-id-badge .l { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
+.design-id-badge .v { font-size: 13px; font-weight: 600; color: var(--accent); font-family: 'SF Mono', monospace; }
-/* Right Panel - Preview */
-.right {
- background: var(--bg);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 40px;
- position: relative;
-}
+.empty-state { text-align: center; color: var(--text-dim); }
+.empty-state .icon { font-size: 56px; margin-bottom: 16px; opacity: 0.25; }
+.empty-state p { font-size: 14px; line-height: 2; }
-.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);
-}
+.loading { display: none; text-align: center; padding: 40px; }
+.loading.show { display: block; }
+.loading .dots span { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin: 0 3px; animation: bounce 1.4s infinite; }
+.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); } }
-.preview-img {
- max-width: 100%;
- max-height: 70vh;
- display: block;
-}
-
-/* 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);
+.preview-wrap { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.5); border: 1px solid var(--border); display: none; }
+.preview-wrap.show { display: block; }
+.preview-wrap img { max-width: 100%; max-height: 60vh; display: block; }
+.watermark {
+ position: absolute; bottom: 14px; right: 14px;
+ background: rgba(0,0,0,0.75); padding: 6px 14px;
+ border-radius: 20px; font-size: 11px; font-family: 'SF Mono', monospace;
+ color: var(--accent-glow); border: 1px solid rgba(59,130,246,0.4);
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;
-}
+.dl-bar { display: none; gap: 10px; margin-top: 20px; }
+.dl-bar.show { display: flex; }
+.dl-btn { padding: 11px 22px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 13px; transition: all 0.2s; cursor: pointer; }
+.dl-btn:hover { border-color: var(--accent); color: var(--accent); }
+.dl-btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
-/* 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;
-}
+.exec-log { display: none; width: 100%; max-width: 600px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
+.exec-log.show { display: block; }
+.exec-log .t { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 12px; }
+.exec-row { display: flex; gap: 10px; padding: 7px 0; font-size: 12px; border-bottom: 1px solid rgba(30,38,64,0.5); }
+.exec-row:last-child { border-bottom: none; }
+.exec-row .n { color: var(--text-dim); font-family: 'SF Mono', monospace; min-width: 24px; }
+.exec-row .act { color: var(--accent); min-width: 80px; font-weight: 500; }
+.exec-row .det { color: var(--text-dim); flex: 1; }
-/* 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;
- transition: all 0.2s;
-}
-.dl-btn:hover {
- border-color: var(--accent);
- color: var(--accent);
-}
-.dl-btn.primary {
- background: var(--accent);
- color: white;
- border-color: var(--accent);
-}
-
-/* Intent Chain Display */
-.intent-chain {
- position: absolute;
- bottom: 20px;
- left: 20px;
- right: 20px;
- background: var(--panel);
- border: 1px solid var(--border);
- border-radius: 8px;
- padding: 16px;
- display: none;
-}
-.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); }
-}
+.error-msg { display: none; padding: 12px; background: rgba(255,71,87,0.08); border: 1px solid rgba(255,71,87,0.2); border-radius: var(--radius); color: #ff6b7a; font-size: 12px; margin-top: 10px; }
+.error-msg.show { display: block; }
封面工作室
- 语言驱动设计系统 · 你的意图，系统只是执行者
+ 语言驱动设计系统 · 意图可追溯 · 设计属于你