From 05e8ea5e40182258ad3f96833dc929e8f938246e Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sat, 6 Jun 2026 18:25:20 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E8=BE=93=E5=85=A5=E6=A0=8F?=
 =?UTF-8?q?=E7=8E=B0=E4=BB=A3=E5=8C=96=E9=87=8D=E8=AE=BE=E8=AE=A1=20+=20?=
 =?UTF-8?q?=E9=85=8D=E5=A5=97=E9=AB=98=E5=BA=A6/=E9=85=8D=E8=89=B2?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 输入栏由体育场形改为圆角矩形，输入区与按钮行分离
- +/发送按钮移至底部行（左下/右下），缩小尺寸、圆角 hover、同心圆角对齐
- 发送按钮去光晕：浅色黑底白三角、深色白底黑三角，仅留浅阴影
- logo 旁思考模式按钮去除扩散光晕，focus 仅留描边环
- 对话区预留高度基准 80→90 适配更高输入栏，欢迎语 padding 同步加大
- /菜单命令名配色：经典 accent 橙、浅/深色保留 state-info 蓝
- /菜单及深色 + 菜单 hover 统一为侧边栏同款 --theme-tab-active（修复深色全黑）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 static/src/app/computed.ts                    |  2 +-
 static/src/components/input/InputComposer.vue | 22 +++---
 .../styles/components/chat/_chat-area.scss    |  4 +-
 .../styles/components/input/_composer.scss    | 77 +++++++++++--------
 .../styles/components/overlays/_overlays.scss | 54 +++++++------
 .../styles/components/panels/_left-panel.scss | 10 +--
 6 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/static/src/app/computed.ts b/static/src/app/computed.ts
index 2eaf3bf..2e3153a 100644
--- a/static/src/app/computed.ts
+++ b/static/src/app/computed.ts
@@ -139,7 +139,7 @@ export const computed = {
     return !this.isMobileViewport && this.chatDisplayMode === 'chat';
   },
   chatContainerStyle() {
-    const minHeight = 80;
+    const minHeight = 90;
     const raw = Number(this.composerReservedHeight || 0);
     const height = Number.isFinite(raw) ? Math.max(minHeight, Math.round(raw)) : minHeight;
     const growth = Math.max(0, height - minHeight);
diff --git a/static/src/components/input/InputComposer.vue b/static/src/components/input/InputComposer.vue
index 1e7ea8c..ca3d689 100644
--- a/static/src/components/input/InputComposer.vue
+++ b/static/src/components/input/InputComposer.vue
@@ -185,15 +185,6 @@
             </div>
           </div>
           <div class="input-row">
-            <button
-              type="button"
-              class="stadium-btn add-btn"
-              data-tutorial="quick-menu-open"
-              @click.stop="$emit('toggle-quick-menu')"
-              :disabled="!isConnected"
-            >
-              +
-            </button>
             <div class="stadium-input-rich">
               <EditorContent
                 :editor="editor"
@@ -203,6 +194,17 @@
                 @focusout="onInputBlur"
               />
             </div>
+          </div>
+          <div class="input-actions">
+            <button
+              type="button"
+              class="stadium-btn add-btn"
+              data-tutorial="quick-menu-open"
+              @click.stop="$emit('toggle-quick-menu')"
+              :disabled="!isConnected"
+            >
+              +
+            </button>
             <button
               type="button"
               class="stadium-btn send-btn"
@@ -1513,7 +1515,7 @@ const emitComposerHeight = () => {
   }
   const baseline = baselineComposerVisualHeight.value || visualHeight;
   const growth = Math.max(0, visualHeight - baseline);
-  const baseReservedHeight = 80;
+  const baseReservedHeight = 90;
   const reservedHeight = Math.ceil(baseReservedHeight + growth);
   emit('composer-height-change', {
     reservedHeight,
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index 0ff2e80..68527e2 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -1,7 +1,7 @@
 /* 聊天容器整体布局，保证聊天区可见并支持上下滚动 */
 .chat-container {
   --chat-surface-color: var(--surface-panel);
-  --composer-base-height: calc(80px + var(--app-bottom-inset));
+  --composer-base-height: calc(90px + var(--app-bottom-inset));
   --composer-reserved-height: var(--composer-base-height);
   --composer-growth-height: 0px;
   flex: 1;
@@ -175,7 +175,7 @@
 
 @media (max-width: 768px) {
   .chat-container {
-    --composer-base-height: calc(80px + var(--app-bottom-inset));
+    --composer-base-height: calc(90px + var(--app-bottom-inset));
     --composer-reserved-height: var(--composer-base-height);
   }
 
diff --git a/static/src/styles/components/input/_composer.scss b/static/src/styles/components/input/_composer.scss
index ec08a2d..2da2329 100644
--- a/static/src/styles/components/input/_composer.scss
+++ b/static/src/styles/components/input/_composer.scss
@@ -227,7 +227,7 @@
 
 .skill-slash-item:hover,
 .skill-slash-item--active {
-    background: var(--chip-bg);
+    background: var(--hover-bg);
     box-shadow: 0 1px 2px var(--shadow-color);
 }
 
@@ -246,7 +246,7 @@
 .skill-slash-item__name {
     flex: 0 0 auto;
     max-width: 210px;
-    color: var(--state-info);
+    color: var(--accent);
     font-size: 13px;
     font-weight: 600;
     white-space: nowrap;
@@ -314,6 +314,17 @@ body[data-theme='dark'] {
     }
 }
 
+body[data-theme='light'] {
+    .skill-slash-item__name {
+        color: var(--state-info);
+    }
+
+    .stadium-input-editor .skill-md-link,
+    .stadium-input-highlight .skill-md-link {
+        color: var(--state-info);
+    }
+}
+
 .permission-switcher {
     position: absolute;
     left: 20px;
@@ -540,12 +551,11 @@ body[data-theme='dark'] {
 }
 
 .stadium-shell {
-    --stadium-radius: 24px;
+    --stadium-radius: 18px;
     position: relative;
     z-index: 2;
     width: 100%;
-    min-height: calc(var(--stadium-radius) * 2.1);
-    padding: 12px 18px;
+    padding: 10px;
     border-radius: var(--stadium-radius);
     border: 1px solid var(--border-default);
     background: var(--surface-raised);
@@ -558,9 +568,6 @@ body[data-theme='dark'] {
 }
 
 .stadium-shell.is-multiline {
-    padding-top: 16px;
-    padding-bottom: 16px;
-    min-height: calc(var(--stadium-radius) * 2.7);
     border-color: var(--border-strong);
     box-shadow: none;
 }
@@ -586,16 +593,24 @@ body[data-theme='dark'] {
 
 .input-row {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 12px;
     width: 100%;
 }
 
+.input-actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
 .stadium-input-rich {
     position: relative;
     flex: 1 1 auto;
     min-width: 0;
     display: grid;
+    padding: 2px 0 0 8px;
 }
 
 .stadium-input-rich .stadium-input {
@@ -603,7 +618,7 @@ body[data-theme='dark'] {
 }
 
 .stadium-input-editor .skill-md-link {
-    color: var(--state-info);
+    color: var(--accent);
     font-weight: inherit;
     border-radius: 4px;
     padding: 0 1px;
@@ -713,19 +728,19 @@ body[data-theme='dark'] {
 }
 
 .stadium-btn {
-    flex: 0 0 36px;
-    width: 36px;
-    height: 36px;
+    flex: 0 0 28px;
+    width: 28px;
+    height: 28px;
     border: none;
-    border-radius: 50%;
+    border-radius: 7px;
     background: transparent;
     color: var(--claude-text);
-    font-size: 18px;
+    font-size: 16px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.2s ease, transform 0.2s ease, margin-top 0.2s ease;
+    transition: background 140ms ease, color 140ms ease;
 }
 
 .stadium-btn:disabled {
@@ -738,17 +753,16 @@ body[data-theme='dark'] {
 }
 
 .add-btn {
-    font-size: 22px;
+    font-size: 20px;
 }
 
 .stadium-btn.send-btn {
     background: var(--claude-accent);
     color: var(--on-accent);
-    box-shadow: 0 10px 20px var(--shadow-color);
+    box-shadow: none;
 }
 
 .stadium-btn.send-btn:hover:not(:disabled) {
-    transform: translateY(-1px);
     background: var(--claude-button-hover);
 }
 
@@ -765,15 +779,15 @@ body[data-theme='dark'] {
 .stadium-btn.send-btn .send-icon {
     width: 0;
     height: 0;
-    border-top: 6px solid transparent;
-    border-bottom: 6px solid transparent;
-    border-left: 10px solid var(--on-accent);
-    margin-left: 5px;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 9px solid var(--on-accent);
+    margin-left: 4px;
 }
 
 .stadium-btn.send-btn .stop-icon {
-    width: 12px;
-    height: 12px;
+    width: 11px;
+    height: 11px;
     border-radius: 2px;
     background-color: var(--on-accent);
     display: block;
@@ -787,11 +801,6 @@ body[data-theme='dark'] {
     background-color: color-mix(in srgb, var(--on-accent) 40%, transparent);
 }
 
-.stadium-shell.is-multiline .stadium-btn {
-    align-self: flex-end;
-    margin-top: 0;
-}
-
 .file-input-hidden {
     display: none;
 }
@@ -898,7 +907,7 @@ body[data-theme='dark'] {
     pointer-events: none;
     z-index: 1;
     gap: 10px;
-    padding-bottom: 140px;
+    padding-bottom: 160px;
 }
 
 .blank-hero-text {
@@ -919,8 +928,8 @@ body[data-theme='dark'] {
 
 .composer-container {
     position: relative;
-    height: var(--composer-base-height, calc(80px + var(--app-bottom-inset)));
-    flex: 0 0 var(--composer-base-height, calc(80px + var(--app-bottom-inset)));
+    height: var(--composer-base-height, calc(90px + var(--app-bottom-inset)));
+    flex: 0 0 var(--composer-base-height, calc(90px + var(--app-bottom-inset)));
     transition: transform 0.3s ease;
     z-index: 2;
 }
@@ -944,7 +953,7 @@ body[data-theme='dark'] {
         transform: translateY(calc(-32vh + var(--composer-growth-height, 0px)));
     }
     .blank-hero-overlay {
-        padding-bottom: 120px;
+        padding-bottom: 136px;
     }
 }
 
diff --git a/static/src/styles/components/overlays/_overlays.scss b/static/src/styles/components/overlays/_overlays.scss
index 0017ce5..fa1f1b6 100644
--- a/static/src/styles/components/overlays/_overlays.scss
+++ b/static/src/styles/components/overlays/_overlays.scss
@@ -2860,23 +2860,24 @@ body[data-theme='light'] {
     box-shadow: none;
   }
 
-  /* 按钮背景色 - 使用浅灰色 */
+  /* 发送按钮 - 黑底白三角，浅阴影做层次 */
   .stadium-btn.send-btn {
-    background: var(--surface-muted);
-    color: var(--text-primary);
-    box-shadow: 0 1px 2px var(--shadow-color);
+    background: var(--text-primary);
+    color: var(--surface-raised);
+    box-shadow: 0 1px 3px var(--shadow-color);
   }
 
   .stadium-btn.send-btn:hover:not(:disabled) {
-    background: var(--border-strong);
+    background: var(--text-primary);
+    box-shadow: 0 1px 3px var(--shadow-color);
   }
 
   .stadium-btn.send-btn .send-icon {
-    border-left-color: var(--text-primary);
+    border-left-color: var(--surface-raised);
   }
 
   .stadium-btn.send-btn .stop-icon {
-    background-color: var(--text-primary);
+    background-color: var(--surface-raised);
   }
 
   .menu-entry:hover:not(:disabled) {
@@ -2896,18 +2897,16 @@ body[data-theme='light'] {
   .mode-indicator {
     background: var(--surface-muted) !important;
     color: var(--text-primary);
-    box-shadow: 0 1px 2px var(--border-default);
+    box-shadow: none;
   }
 
   .mode-indicator:hover {
     background: var(--border-strong) !important;
-    box-shadow: 0 2px 4px var(--border-strong);
+    box-shadow: none;
   }
 
   .mode-indicator:focus-visible {
-    box-shadow:
-      0 0 0 2px var(--border-default),
-      0 2px 4px var(--border-strong);
+    box-shadow: 0 0 0 2px var(--border-default);
   }
 
   .mode-indicator .icon {
@@ -3038,23 +3037,24 @@ body[data-theme='dark'] {
     color: var(--text-tertiary);
   }
 
-  /* 按钮背景色 - 使用浅一些的灰色 */
+  /* 发送按钮 - 白底黑三角，浅阴影做层次 */
   .stadium-btn.send-btn {
-    background: var(--surface-muted);
-    color: var(--text-primary);
-    box-shadow: 0 2px 4px color-mix(in srgb, var(--text-primary) 30%, transparent);
+    background: var(--text-primary);
+    color: var(--surface-raised);
+    box-shadow: 0 1px 3px var(--shadow-color);
   }
 
   .stadium-btn.send-btn:hover:not(:disabled) {
-    background: var(--surface-muted);
+    background: var(--text-primary);
+    box-shadow: 0 1px 3px var(--shadow-color);
   }
 
   .stadium-btn.send-btn .send-icon {
-    border-left-color: var(--text-primary);
+    border-left-color: var(--surface-raised);
   }
 
   .stadium-btn.send-btn .stop-icon {
-    background-color: var(--text-primary);
+    background-color: var(--surface-raised);
   }
 
   /* 快捷菜单 - 改为灰黑色 */
@@ -3069,11 +3069,11 @@ body[data-theme='dark'] {
   }
 
   .menu-entry:hover:not(:disabled) {
-    background: var(--surface-muted);
+    background: var(--theme-tab-active);
   }
 
   .menu-entry.active {
-    background: var(--surface-muted);
+    background: var(--theme-tab-active);
   }
 
   /* 机器人图标保持白色 */
@@ -3085,18 +3085,16 @@ body[data-theme='dark'] {
   .mode-indicator {
     background: var(--badge-bg) !important;
     color: var(--text-primary);
-    box-shadow: 0 2px 4px color-mix(in srgb, var(--text-primary) 30%, transparent);
+    box-shadow: none;
   }
 
   .mode-indicator:hover {
     background: var(--surface-muted) !important;
-    box-shadow: 0 3px 6px var(--shadow-color);
+    box-shadow: none;
   }
 
   .mode-indicator:focus-visible {
-    box-shadow:
-      0 0 0 2px var(--border-card-strong),
-      0 3px 6px var(--shadow-color);
+    box-shadow: 0 0 0 2px var(--border-card-strong);
   }
 
   .mode-indicator .icon {
@@ -3362,11 +3360,11 @@ body[data-theme='dark'] {
   }
 
   .menu-entry:hover:not(:disabled) {
-    background: var(--surface-muted) !important;
+    background: var(--theme-tab-active) !important;
   }
 
   .menu-entry.active {
-    background: var(--surface-muted) !important;
+    background: var(--theme-tab-active) !important;
   }
 
   .menu-entry .entry-arrow {
diff --git a/static/src/styles/components/panels/_left-panel.scss b/static/src/styles/components/panels/_left-panel.scss
index f78e5ee..9d08dca 100644
--- a/static/src/styles/components/panels/_left-panel.scss
+++ b/static/src/styles/components/panels/_left-panel.scss
@@ -139,7 +139,6 @@
 .mode-indicator {
   --mode-indicator-color-1: var(--claude-accent);
   --mode-indicator-color-2: var(--claude-accent-strong);
-  --mode-indicator-shadow: rgba(189, 93, 58, 0.25);
   border: none;
   cursor: pointer;
   outline: none;
@@ -152,7 +151,7 @@
   justify-content: center;
   background: linear-gradient(135deg, var(--mode-indicator-color-1), var(--mode-indicator-color-2));
   color: var(--on-accent);
-  box-shadow: 0 8px 20px var(--mode-indicator-shadow);
+  box-shadow: none;
   transition:
     background 0.35s ease,
     box-shadow 0.35s ease,
@@ -164,27 +163,22 @@
 }
 
 .mode-indicator:focus-visible {
-  box-shadow:
-    0 0 0 2px color-mix(in srgb, var(--on-accent) 80%, transparent),
-    0 8px 20px var(--mode-indicator-shadow);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--on-accent) 80%, transparent);
 }
 
 .mode-indicator.fast {
   --mode-indicator-color-1: var(--accent-deep);
   --mode-indicator-color-2: var(--accent-deep-strong);
-  --mode-indicator-shadow: color-mix(in srgb, var(--accent-deep) 35%, transparent);
 }
 
 .mode-indicator.thinking {
   --mode-indicator-color-1: var(--claude-accent);
   --mode-indicator-color-2: var(--claude-accent-strong);
-  --mode-indicator-shadow: rgba(189, 93, 58, 0.3);
 }
 
 .mode-indicator.deep {
   --mode-indicator-color-1: var(--claude-deep);
   --mode-indicator-color-2: var(--claude-deep-strong);
-  --mode-indicator-shadow: rgba(208, 122, 20, 0.35);
 }
 
 .mode-indicator .icon {