From c7ea8a395c77accde9817e906209e49781c71bb6 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sat, 12 Sep 2026 12:40:07 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=B8=8B=E6=8B=89=E7=AE=AD=E5=A4=B4?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=94=B9=E4=B8=BA=20SVG=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=97=8B=E8=BD=AC=E5=81=8F=E5=BF=83=EF=BC=9B=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E7=A9=BA=E9=97=B4=E8=8F=9C=E5=8D=95=E5=B1=95=E5=BC=80=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=204=20=E4=B8=AA=E6=95=B4=E9=80=89=E9=A1=B9=E5=B9=B6?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=82=AC=E6=B5=AE=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/src/components/input/InputComposer.vue |  6 +-
 .../styles/settings-shared.css                | 59 +++++++++++++------
 .../styles/components/input/_composer.scss    | 15 ++---
 3 files changed, 52 insertions(+), 28 deletions(-)

diff --git a/static/src/components/input/InputComposer.vue b/static/src/components/input/InputComposer.vue
index ac457ffd..e8dcb117 100644
--- a/static/src/components/input/InputComposer.vue
+++ b/static/src/components/input/InputComposer.vue
@@ -345,7 +345,7 @@
                 aria-haspopup="true"
               >
                 <span>{{ agentTypeLabel }}</span>
-                <span class="agent-type-switcher__caret" :class="{ open: agentTypeMenuOpen }" aria-hidden="true">›</span>
+                <svg class="agent-type-switcher__caret" :class="{ open: agentTypeMenuOpen }" viewBox="0 0 10 10" aria-hidden="true"><path d="M2.75 3.75L5 6.25L7.25 3.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
               </button>
               <div v-if="agentTypeMenuOpen && !agentTypeLocked" class="agent-type-switcher__menu" @click.stop>
                 <button
@@ -372,7 +372,7 @@
                 :title="workModeLocked ? $t('input.workModeLockedTitle') : $t('input.workModeTitle')"
               >
                 <span>{{ workModeLabel }}</span>
-                <span class="agent-type-switcher__caret" :class="{ open: workModeMenuOpen }" aria-hidden="true">›</span>
+                <svg class="agent-type-switcher__caret" :class="{ open: workModeMenuOpen }" viewBox="0 0 10 10" aria-hidden="true"><path d="M2.75 3.75L5 6.25L7.25 3.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
               </button>
               <div v-if="workModeMenuOpen && !workModeLocked" class="agent-type-switcher__menu" @click.stop>
                 <button
@@ -531,7 +531,7 @@
               :class="{ 'permission-switcher__exec--warn': currentExecutionMode === 'direct' }"
               >{{ currentExecutionShortLabel }}</span
             >
-            <span class="permission-switcher__caret" :class="{ open: permissionMenuOpen }">›</span>
+            <svg class="permission-switcher__caret" :class="{ open: permissionMenuOpen }" viewBox="0 0 10 10" aria-hidden="true"><path d="M2.75 3.75L5 6.25L7.25 3.75" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
           </button>
           <div
             v-if="permissionMenuOpen"
diff --git a/static/src/components/personalization/styles/settings-shared.css b/static/src/components/personalization/styles/settings-shared.css
index bacb44d4..1998fa85 100644
--- a/static/src/components/personalization/styles/settings-shared.css
+++ b/static/src/components/personalization/styles/settings-shared.css
@@ -174,16 +174,10 @@ body[data-theme='dark'] .settings-redesign-card {
 
 .settings-redesign-tabs::-webkit-scrollbar,
 .settings-redesign-scroll::-webkit-scrollbar,
-.settings-floating-menu::-webkit-scrollbar,
 .role-editor-body::-webkit-scrollbar {
   display: none;
 }
 
-.settings-floating-menu {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
 .settings-page {
   min-height: 0;
 }
@@ -267,21 +261,12 @@ body[data-theme='dark'] .settings-redesign-card {
 .settings-select-button .select-chevron {
   width: 12px;
   height: 12px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  background-color: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.75 3.75L5 6.25L7.25 3.75' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.75 3.75L5 6.25L7.25 3.75' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
   transition: transform 0.15s ease;
 }
 
-.settings-select-button .select-chevron::before {
-  content: '';
-  width: 7px;
-  height: 7px;
-  border-right: 1.5px solid currentColor;
-  border-bottom: 1.5px solid currentColor;
-  transform: translateY(-1.5px) rotate(45deg);
-}
-
 .settings-select-wrap.open .settings-select-button .select-chevron {
   transform: rotate(180deg);
 }
@@ -303,6 +288,37 @@ body[data-theme='dark'] .settings-redesign-card {
   backdrop-filter: none;
   z-index: 2147483647;
   display: none;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+/* 可滚动时显示细滚动条：平时完全透明，悬停浮层时显现（视觉悬浮感） */
+.settings-floating-menu::-webkit-scrollbar {
+  width: 8px;
+}
+
+.settings-floating-menu::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.settings-floating-menu::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  background-clip: padding-box;
+}
+
+.settings-floating-menu:hover {
+  scrollbar-color: var(--text-muted) transparent;
+}
+
+.settings-floating-menu:hover::-webkit-scrollbar-thumb {
+  background-color: var(--text-muted);
+}
+
+/* 带描述行的选项固定 44px 高，浮层按 4 个整选项计算高度 */
+.settings-floating-menu:has(.settings-menu-option > span) {
+  max-height: calc(44px * 4 + 12px);
 }
 
 .settings-select-wrap.open .settings-floating-menu {
@@ -350,6 +366,12 @@ body[data-theme='dark'] .settings-floating-menu {
   cursor: pointer;
 }
 
+/* 含描述行的选项固定 44px：配合浮层 max-height 保证展开恰好 4 个整选项 */
+.settings-menu-option:has(> span) {
+  height: 44px;
+  min-height: 44px;
+}
+
 @media (hover: hover) {
   .settings-menu-option:hover {
     background: var(--settings-floating-menu-hover);
@@ -369,6 +391,7 @@ body[data-theme='dark'] .settings-floating-menu {
   font-size: 14px;
   font-weight: 550;
   letter-spacing: -0.01em;
+  line-height: 1.3;
   min-width: 0;
 }
 
diff --git a/static/src/styles/components/input/_composer.scss b/static/src/styles/components/input/_composer.scss
index 36ef9b99..bd09ae83 100644
--- a/static/src/styles/components/input/_composer.scss
+++ b/static/src/styles/components/input/_composer.scss
@@ -613,9 +613,10 @@ body[data-theme='light'] {
 }
 
 .permission-switcher__caret {
-  font-size: 14px;
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
   color: var(--text-secondary);
-  transform: rotate(90deg);
   transition: transform 0.18s ease;
 }
 
@@ -628,7 +629,7 @@ body[data-theme='light'] {
 }
 
 .permission-switcher__caret.open {
-  transform: rotate(270deg);
+  transform: rotate(180deg);
 }
 
 .permission-switcher__item {
@@ -1545,15 +1546,15 @@ body[data-theme='light'] {
 }
 
 .agent-type-switcher__caret {
-  font-size: 13px;
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
   color: var(--text-secondary);
-  transform: rotate(90deg);
   transition: transform 0.18s ease;
-  line-height: 1;
 }
 
 .agent-type-switcher__caret.open {
-  transform: rotate(270deg);
+  transform: rotate(180deg);
 }
 
 /* 菜单底色/边框/圆角与 + 菜单（.quick-menu）一致 */