From 509b0d41c63903737d1df053e6e3cdcd0adebe87 Mon Sep 17 00:00:00 2001
From: chiyi <cyi.cc@outlook.com>
Date: Tue, 27 Oct 2026 16:20:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(canvas):=20=E7=94=BB=E5=B8=83=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E7=B2=BE=E4=BF=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

笔记改白色卡片，连接点仅悬停/选中显示，连线改灰色虚线，
节点边框与阴影更轻，输入框去灰渐变与光晕，顶栏按钮改描边款。

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../src/components/canvas/CanvasNodeView.vue  | 30 +++++++++++--------
 .../src/components/canvas/CanvasStage.vue     | 15 ++++------
 frontend/src/views/CanvasView.vue             | 28 ++++++++---------
 3 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/canvas/CanvasNodeView.vue b/frontend/src/components/canvas/CanvasNodeView.vue
index 26ee0d4..0d335d5 100644
--- a/frontend/src/components/canvas/CanvasNodeView.vue
+++ b/frontend/src/components/canvas/CanvasNodeView.vue
@@ -223,14 +223,14 @@ defineExpose({ startEdit, commitNote })
 <style scoped>
 .cv-node {
   position: absolute;
-  border-radius: 14px;
-  border: 1px solid var(--glass-border);
+  border-radius: 16px;
+  border: 1px solid rgb(24 24 27 / 0.08);
   contain: layout style;
   user-select: none;
   touch-action: none;
   cursor: grab;
   background: var(--surface-solid);
-  box-shadow: var(--glass-shadow);
+  box-shadow: 0 1px 2px rgb(24 24 27 / 0.05), 0 8px 24px -8px rgb(24 24 27 / 0.12);
   transition: box-shadow 0.15s ease, border-color 0.15s ease;
 }
 .cv-node__clip {
@@ -240,8 +240,8 @@ defineExpose({ startEdit, commitNote })
   overflow: hidden;
 }
 .cv-node.is-selected {
-  border-color: rgb(24 24 27 / 0.7);
-  box-shadow: var(--glass-shadow-lg), 0 0 0 3px rgb(24 24 27 / 0.25), 0 10px 30px var(--accent-glow);
+  border-color: #18181b;
+  box-shadow: 0 0 0 2px #18181b, 0 14px 34px -10px rgb(24 24 27 / 0.3);
 }
 .cv-node:active {
   cursor: grabbing;
@@ -286,10 +286,10 @@ defineExpose({ startEdit, commitNote })
   overflow: hidden;
 }
 
-/* 笔记 = 淡黄色贴纸 */
+/* 笔记 = 白色卡片 */
 .cv-node--note {
-  background: #fdf6c9;
-  border-color: rgb(180 140 20 / 0.35);
+  background: #fff;
+  border-color: rgb(24 24 27 / 0.1);
   cursor: text;
 }
 html.dark .cv-node--note {
@@ -305,7 +305,7 @@ html.dark .cv-node--note {
   padding: 12px 14px;
   font-size: 32px;
   line-height: 1.35;
-  color: #111;
+  color: #27272a;
   outline: none;
   white-space: pre-wrap;
   word-break: break-word;
@@ -390,7 +390,7 @@ html.dark .cv-node--note {
   max-height: 5em;
   overflow: auto;
   overflow-wrap: anywhere;
-  text-align: center;
+  text-align: left;
   user-select: text;
 }
 
@@ -404,15 +404,21 @@ html.dark .cv-node--note {
   cursor: pointer;
   z-index: 3;
   touch-action: manipulation;
+  opacity: 0;
+  transition: opacity 0.15s ease;
 }
+.cv-node:hover .cv-port,
+.cv-node.is-selected .cv-port,
+.cv-port.is-active,
+.cv-port:focus-visible { opacity: 1; }
 .cv-port::after {
   content: '';
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #fff;
-  border: 3px solid var(--m-orange);
-  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35), 0 0 0 2px rgb(255 255 255 / 0.8);
+  border: 2px solid #18181b;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
   transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 .cv-port:hover::after, .cv-port:focus-visible::after, .cv-port.is-active::after {
diff --git a/frontend/src/components/canvas/CanvasStage.vue b/frontend/src/components/canvas/CanvasStage.vue
index 3099979..75a7a03 100644
--- a/frontend/src/components/canvas/CanvasStage.vue
+++ b/frontend/src/components/canvas/CanvasStage.vue
@@ -781,8 +781,8 @@ defineExpose({
   background-color: var(--app-bg);
   background-image: radial-gradient(
     circle,
-    color-mix(in srgb, var(--fg) 16%, transparent) 1.4px,
-    transparent 1.4px
+    color-mix(in srgb, var(--fg) 12%, transparent) 1.3px,
+    transparent 1.3px
   );
 }
 .cv-stage.is-panning {
@@ -808,21 +808,18 @@ defineExpose({
 /* 常规连线:蓝色虚线;选中时改紫色实线加粗 */
 .cv-edge {
   fill: none;
-  stroke: rgb(95 108 248 / 0.85);
-  stroke-width: 2.4;
-  stroke-dasharray: 10 6;
-  filter: drop-shadow(0 0 5px rgb(24 24 27 / 0.3));
+  stroke: rgb(113 113 122 / 0.75);
+  stroke-width: 2;
+  stroke-dasharray: 8 6;
 }
 .cv-edge--hot {
   stroke: var(--m-orange);
-  stroke-width: 2.8;
-  filter: drop-shadow(0 0 7px var(--accent-glow));
+  stroke-width: 2.6;
 }
 .cv-edge--sel {
   stroke: var(--m-orange);
   stroke-width: 3.5;
   stroke-dasharray: none;
-  filter: drop-shadow(0 0 8px var(--accent-glow));
 }
 .cv-edge-hit {
   fill: none;
diff --git a/frontend/src/views/CanvasView.vue b/frontend/src/views/CanvasView.vue
index 8a1f155..37b203a 100644
--- a/frontend/src/views/CanvasView.vue
+++ b/frontend/src/views/CanvasView.vue
@@ -1136,14 +1136,14 @@ const saveLabel = computed(() => ({
   box-shadow: 0 4px 14px rgb(229 72 77 / 0.25);
 }
 .cv-btn--accent {
-  background: linear-gradient(120deg, rgb(24 24 27 / 0.16), rgb(168 85 247 / 0.14));
-  border-color: rgb(24 24 27 / 0.42);
-  color: var(--m-orange);
+  background: #fff;
+  border-color: rgb(24 24 27 / 0.28);
+  color: #18181b;
 }
 .cv-btn--accent:hover:not(:disabled) {
-  background: linear-gradient(120deg, rgb(24 24 27 / 0.26), rgb(168 85 247 / 0.22));
-  border-color: rgb(24 24 27 / 0.62);
-  box-shadow: 0 4px 16px var(--accent-glow);
+  background: rgb(24 24 27 / 0.05);
+  border-color: #18181b;
+  box-shadow: 0 4px 14px rgb(24 24 27 / 0.12);
 }
 .cv-select,
 .cv-input {
@@ -1178,8 +1178,8 @@ const saveLabel = computed(() => ({
   justify-content: space-between;
   gap: 12px;
   padding: 9px 14px;
-  border-bottom: 1px solid var(--ink-soft);
-  background: var(--surface);
+  border-bottom: 1px solid rgb(24 24 27 / 0.07);
+  background: rgb(255 255 255 / 0.92);
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   flex-wrap: wrap;
@@ -1329,20 +1329,16 @@ const saveLabel = computed(() => ({
 /* 生成输入框:参考图缩略图在上,文本框居中,控制条在下 */
 .cv-composer {
   width: 100%;
-  border: 1px solid var(--glass-border);
+  border: 1px solid rgb(24 24 27 / 0.1);
   border-radius: 22px;
-  background:
-    linear-gradient(160deg, rgb(24 24 27 / 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);
+  background: #fff;
+  box-shadow: 0 2px 4px rgb(24 24 27 / 0.04), 0 18px 48px -12px rgb(24 24 27 / 0.2);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   overflow: visible; /* 下拉面板要从输入框上方弹出,不能被裁切 */
 }
 .cv-composer:focus-within {
   border-color: rgb(24 24 27 / 0.55);
-  box-shadow: var(--glass-shadow-lg), 0 0 0 3px rgb(24 24 27 / 0.16), 0 0 42px var(--accent-glow);
+  box-shadow: 0 0 0 3px rgb(24 24 27 / 0.08), 0 18px 48px -12px rgb(24 24 27 / 0.24);
 }
 .cv-composer__refs {
   display: flex;