From efe2153446a511321a77c9f5093f685632b642f0 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Mon, 12 Oct 2026 14:57:30 +0800
Subject: [PATCH] =?UTF-8?q?feat(canvas):=20=E6=8F=90=E7=A4=BA=E8=AF=8D?=
 =?UTF-8?q?=E6=94=B9=E6=82=AC=E6=B5=AE=E5=BA=95=E9=83=A8=E9=BB=91=E8=89=B2?=
 =?UTF-8?q?=E6=B8=90=E5=8F=98=E9=81=AE=E7=BD=A9,=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=E4=B8=AD=E5=8D=A0=E4=BD=8D=E7=BE=8E=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/canvas/CanvasNodeView.vue  | 79 ++++++++++++++-----
 frontend/src/views/CanvasView.vue             | 71 ++++++++++-------
 2 files changed, 102 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/canvas/CanvasNodeView.vue b/frontend/src/components/canvas/CanvasNodeView.vue
index 9799ffa..2912869 100644
--- a/frontend/src/components/canvas/CanvasNodeView.vue
+++ b/frontend/src/components/canvas/CanvasNodeView.vue
@@ -207,7 +207,8 @@ defineExpose({ startEdit, commitNote })
     <div v-else class="cv-node__gen">
       <template v-if="node.status === 'running'">
         <span class="cv-node__spin" />
-        <span>生成中…</span>
+        <span class="cv-node__genlabel">生成中…</span>
+        <span class="cv-node__gensub">{{ node.model || 'AI' }}</span>
       </template>
       <template v-else>
         <span class="cv-node__x">✕</span>
@@ -272,17 +273,23 @@ defineExpose({ startEdit, commitNote })
   left: 0;
   right: 0;
   bottom: 0;
-  padding: 5px 9px;
+  padding: 26px 10px 8px;
   font-size: 11px;
   font-weight: 600;
   line-height: 1.35;
-  color: var(--fg);
-  background: var(--surface-solid);
-  border-top: 1px solid var(--ink-soft);
+  color: #fff;
+  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
+  background: linear-gradient(to top, rgb(0 0 0 / 0.62), transparent);
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  pointer-events: none;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  pointer-events: none;
+}
+.cv-node:hover .cv-node__cap,
+.cv-node.is-selected .cv-node__cap {
+  opacity: 1;
 }
 
 /* 笔记 = 淡黄色贴纸 */
@@ -318,14 +325,6 @@ html.dark .cv-node__note { color: rgb(255 255 255 / 0.88); }
 }
 
 .cv-node--gen {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
   border-style: dashed;
   color: var(--fg-2);
   font-size: 13px;
@@ -334,19 +333,63 @@ html.dark .cv-node__note { color: rgb(255 255 255 / 0.88); }
 .cv-node--gen.is-failed {
   border-color: #e5484d;
   color: #e5484d;
-  background: #ffe4e6;
+}
+/* 生成占位内容:居中排布 + 微光扫过 */
+.cv-node__gen {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background:
+    radial-gradient(130% 130% at 15% 0%, rgb(124 92 252 / 0.14), transparent 55%),
+    radial-gradient(130% 130% at 85% 100%, rgb(34 211 238 / 0.12), transparent 55%),
+    var(--surface);
+}
+.cv-node__gen::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.18) 50%, transparent 62%);
+  background-size: 260% 100%;
+  background-position: 260% 0;
+  animation: cv-gen-shine 2.4s linear infinite;
+  pointer-events: none;
+}
+.is-failed .cv-node__gen {
+  background:
+    radial-gradient(130% 130% at 15% 0%, rgb(229 72 77 / 0.1), transparent 55%),
+    var(--surface);
+}
+.is-failed .cv-node__gen::after {
+  display: none;
+}
+.cv-node__genlabel {
+  letter-spacing: 2px;
+}
+.cv-node__gensub {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--fg-faint);
 }
 .cv-node__spin {
-  width: 22px;
-  height: 22px;
+  width: 34px;
+  height: 34px;
   border-radius: 50%;
-  border: 3px solid var(--ink-soft);
+  border: 3px solid rgb(124 92 252 / 0.2);
   border-top-color: var(--m-orange);
+  border-right-color: var(--m-orange-2);
   animation: cv-spin 0.9s linear infinite;
+  filter: drop-shadow(0 0 10px var(--accent-glow));
 }
 @keyframes cv-spin {
   to { transform: rotate(360deg); }
 }
+@keyframes cv-gen-shine {
+  to { background-position: -260% 0; }
+}
 .cv-node__err {
   font-size: 11px;
   line-height: 1.5;
diff --git a/frontend/src/views/CanvasView.vue b/frontend/src/views/CanvasView.vue
index 669b3c0..2c447d4 100644
--- a/frontend/src/views/CanvasView.vue
+++ b/frontend/src/views/CanvasView.vue
@@ -675,6 +675,7 @@ async function generate() {
     const node = reactive({
       id: newId('g'), type: 'gen', status: 'running',
       x: Math.round(x + i * (size.w + 48)), y: Math.round(y), w: size.w, h: size.h, z: 0,
+      model: model.value?.alias || model.value?.name || model.value?.id || 'AI',
     })
     doc.nodes.push(node)
     for (const s of sources) {
@@ -1249,13 +1250,13 @@ const saveLabel = computed(() => ({
 .cv-dock {
   position: absolute;
   left: 50%;
-  bottom: 14px;
+  bottom: 18px;
   transform: translateX(-50%);
-  width: min(720px, calc(100% - 28px));
+  width: min(760px, calc(100% - 28px));
   z-index: 8;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
 }
 .cv-ratios {
   display: flex;
@@ -1287,23 +1288,25 @@ const saveLabel = computed(() => ({
 .cv-composer {
   width: 100%;
   border: 1px solid var(--glass-border);
-  border-radius: 20px;
-  background: var(--surface);
-  -webkit-backdrop-filter: blur(18px);
-  backdrop-filter: blur(18px);
-  box-shadow: var(--glass-shadow-lg);
+  border-radius: 22px;
+  background:
+    linear-gradient(160deg, rgb(124 92 252 / 0.06), transparent 40%),
+    var(--surface);
+  -webkit-backdrop-filter: blur(22px) saturate(1.15);
+  backdrop-filter: blur(22px) saturate(1.15);
+  box-shadow: var(--glass-shadow-lg), 0 0 42px var(--accent-glow);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   overflow: visible; /* 下拉面板要从输入框上方弹出,不能被裁切 */
 }
 .cv-composer:focus-within {
-  border-color: rgb(124 92 252 / 0.6);
-  box-shadow: var(--glass-shadow-lg), 0 0 0 3px rgb(124 92 252 / 0.18);
+  border-color: rgb(124 92 252 / 0.55);
+  box-shadow: var(--glass-shadow-lg), 0 0 0 3px rgb(124 92 252 / 0.16), 0 0 42px var(--accent-glow);
 }
 .cv-composer__refs {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  padding: 10px 10px 0;
+  padding: 12px 14px 4px;
 }
 .cv-composer__refs:empty,
 .cv-composer__refs:not(:has(> *)) {
@@ -1311,12 +1314,13 @@ const saveLabel = computed(() => ({
 }
 .cv-refthumb {
   position: relative;
-  width: 52px;
-  height: 52px;
-  border-radius: 10px;
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
   overflow: hidden;
-  border: 1px solid var(--ink-soft);
+  border: 1px solid var(--glass-border);
   background: var(--surface-2);
+  box-shadow: var(--glass-shadow);
 }
 .cv-refthumb img {
   width: 100%;
@@ -1343,26 +1347,27 @@ const saveLabel = computed(() => ({
   background: #ef4444;
 }
 .cv-refadd {
-  width: 52px;
-  height: 52px;
-  border-radius: 10px;
-  border: 2px dashed rgb(124 92 252 / 0.45);
-  background: transparent;
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  border: 1.5px dashed rgb(124 92 252 / 0.5);
+  background: rgb(124 92 252 / 0.04);
   color: var(--m-orange);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 1px;
+  gap: 2px;
   font-size: 10px;
   font-weight: 700;
   cursor: pointer;
-  transition: border-color 0.15s ease, background 0.15s ease, transform 0.13s ease;
+  transition: border-color 0.15s ease, background 0.15s ease, transform 0.13s ease, box-shadow 0.15s ease;
 }
 .cv-refadd:hover {
   border-color: var(--m-orange);
-  background: rgb(124 92 252 / 0.08);
+  background: rgb(124 92 252 / 0.1);
   transform: translateY(-1px);
+  box-shadow: 0 6px 16px var(--accent-glow);
 }
 .cv-refadd__icon {
   font-size: 15px;
@@ -1375,25 +1380,29 @@ const saveLabel = computed(() => ({
 }
 .cv-composer__ta {
   width: 100%;
-  min-height: 56px;
-  padding: 10px 14px;
+  min-height: 62px;
+  padding: 12px 16px;
   border: none;
   background: transparent;
   color: var(--fg);
-  font-size: 13px;
-  line-height: 1.55;
+  font-size: 13.5px;
+  line-height: 1.6;
   resize: none;
   outline: none;
   display: block;
 }
+.cv-composer__ta::placeholder {
+  color: var(--fg-faint);
+}
 .cv-composer__bar {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-  padding: 8px 12px;
+  padding: 10px 14px;
   border-top: 1px solid var(--ink-soft);
-  border-radius: 0 0 19px 19px; /* composer 不再裁切,圆角由最底层行补齐 */
+  background: rgb(255 255 255 / 0.02);
+  border-radius: 0 0 21px 21px; /* composer 不再裁切,圆角由最底层行补齐 */
 }
 .cv-composer__bar .cv-dd--model {
   flex: 1;
@@ -1402,7 +1411,9 @@ const saveLabel = computed(() => ({
 }
 .cv-composer__bar .cv-gen {
   margin-left: auto;
-  padding: 7px 24px;
+  padding: 8px 26px;
+  border-radius: 12px;
+  letter-spacing: 1px;
 }
 .cv-gen {
   padding: 10px;