From dcb25dfe895e45352da79f1e6d98282bfcac2670 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Wed, 10 Jun 2026 19:18:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A0=86=E5=8F=A0=E5=9D=97=E6=B7=B1?=
 =?UTF-8?q?=E8=89=B2hover=E4=B8=8D=E5=8F=AF=E8=A7=81=20&=20=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E5=9D=97=E9=AB=98=E5=BA=A6=E5=81=8F=E5=B7=AE=20&=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=9A=90=E8=97=8F=E8=BE=B9=E7=BA=BF=E5=BC=80?=
 =?UTF-8?q?=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 深色模式 hover 修复：用 !important 覆盖 _overlays 中的 surface-panel 规则，使用 --hover-bg(6%白) 对齐对话列表 hover
- 底部块高度修正：shellHeight = targetShell + 2 补偿 border-box 下内容区裁剪
- 深色模式运行横条改为白色(var(--text-primary))
- 新增隐藏边线开关：后端 PersonalForm 持久化 stacked_hide_borders，前端条件渲染开关(仅堆叠模式可见)
---
 modules/personalization_manager.py            |  7 +++
 static/src/components/chat/StackedBlocks.vue  | 14 +++--
 .../personalization/PersonalizationDrawer.vue | 59 +++++++++++++++++++
 static/src/stores/personalization.ts          |  3 +
 .../styles/components/chat/_chat-area.scss    | 15 +++++
 5 files changed, 94 insertions(+), 4 deletions(-)

diff --git a/modules/personalization_manager.py b/modules/personalization_manager.py
index 8339186..9161c7a 100644
--- a/modules/personalization_manager.py
+++ b/modules/personalization_manager.py
@@ -95,6 +95,7 @@ DEFAULT_PERSONALIZATION_CONFIG: Dict[str, Any] = {
     "silent_tool_disable": True,  # 禁用工具时不向模型插入提示（默认开启）
     "enhanced_tool_display": True,  # 增强工具显示
     "compact_message_display": "full",  # 简略消息显示：full-完整原始内容 / brief-一行概要
+    "stacked_hide_borders": False,  # 堆叠块隐藏边线
     "show_git_status_bar": True,  # 是否显示输入栏上方 Git 状态栏
     "versioning_restore_mode": "overwrite",  # 版本回溯模式固定为 overwrite
     "agents_md_auto_inject": False,  # AGENTS.md 自动注入开关
@@ -434,6 +435,12 @@ def sanitize_personalization_payload(
     else:
         base["compact_message_display"] = "full"
 
+    # 堆叠块隐藏边线
+    if "stacked_hide_borders" in data:
+        base["stacked_hide_borders"] = bool(data.get("stacked_hide_borders"))
+    else:
+        base["stacked_hide_borders"] = bool(base.get("stacked_hide_borders", False))
+
     # Git 状态栏显示开关
     if "show_git_status_bar" in data:
         base["show_git_status_bar"] = bool(data.get("show_git_status_bar"))
diff --git a/static/src/components/chat/StackedBlocks.vue b/static/src/components/chat/StackedBlocks.vue
index 8d04f29..ef30334 100644
--- a/static/src/components/chat/StackedBlocks.vue
+++ b/static/src/components/chat/StackedBlocks.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="stacked-shell"
-    :class="{ 'stacked-shell--single': isSingle, 'stacked-shell--not-ready': !ready }"
+    :class="{ 'stacked-shell--single': isSingle, 'stacked-shell--not-ready': !ready, 'stacked-shell--no-borders': hideBorders }"
     ref="shell"
     :style="{
       height: `${shellHeight}px`,
@@ -182,6 +182,8 @@ const shouldUseEnhancedDisplay = computed(() => {
   return personalizationStore.form.enhanced_tool_display;
 });
 
+const hideBorders = computed(() => personalizationStore.form.stacked_hide_borders);
+
 const renderToolResult = (action: any) => {
   return renderEnhancedToolResult(
     action,
@@ -319,8 +321,8 @@ const measureAndCompute = () => {
     const fullContent = innerC ? Math.min(Math.ceil(innerC.offsetHeight), COLLAPSE_MAX_HEIGHT) : 0;
     nextContentHeights[key] = fullContent;
     const expanded = isExpandedById(key);
-    // .stacked-item 之间 1px 分隔（最后一个无 border-bottom）
-    const borderH = idx === children.length - 1 ? 0 : 1;
+    // 分隔线：隐藏边线模式下统一为 0，否则最后一块无 border-bottom
+    const borderH = hideBorders.value ? 0 : (idx === children.length - 1 ? 0 : 1);
     heights.push(headerH + (expanded ? fullContent : 0) + borderH);
   });
 
@@ -334,7 +336,9 @@ const measureAndCompute = () => {
   moreHeight.value = moreVisible.value ? moreBaseHeight() : 0;
   const targetShell =
     moreHeight.value + (showAll.value || !moreVisible.value ? totalHeight : windowHeight);
-  shellHeight.value = targetShell;
+  // shellHeight 需 +2 补偿 border-box（上下 border 各 1px），
+  // 确保内容区 ≥ viewport 高度，避免 overflow:hidden 裁切最后一块
+  shellHeight.value = targetShell + 2;
   innerOffset.value = showAll.value || !moreVisible.value ? 0 : -hiddenHeight;
   viewportHeight.value = Math.max(0, targetShell - moreHeight.value);
 };
@@ -417,6 +421,8 @@ watch(
   () => (props.expandedBlocks ? props.expandedBlocks.size : 0),
   () => scheduleMeasure()
 );
+
+watch(hideBorders, () => scheduleMeasure());
 </script>
 
 <style scoped>
diff --git a/static/src/components/personalization/PersonalizationDrawer.vue b/static/src/components/personalization/PersonalizationDrawer.vue
index a52fa61..98416a5 100644
--- a/static/src/components/personalization/PersonalizationDrawer.vue
+++ b/static/src/components/personalization/PersonalizationDrawer.vue
@@ -323,6 +323,30 @@
                           </ul>
                         </div>
                       </div>
+                      <label
+                        v-if="currentBlockDisplayMode === 'stacked'"
+                        class="settings-toggle-row"
+                      >
+                        <span class="settings-row-copy">
+                          <span class="settings-row-title">隐藏块间边线</span>
+                          <span class="settings-row-desc"
+                            >去掉堆叠块之间的分割线，更简洁</span
+                          >
+                        </span>
+                        <input
+                          type="checkbox"
+                          :checked="stackedHideBorders"
+                          @change="handleStackedHideBordersChange($event)"
+                        />
+                        <span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg
+                        ></span>
+                      </label>
                       <div class="settings-select-row">
                         <span class="settings-row-copy">
                           <span class="settings-row-title">智能体交流风格</span>
@@ -716,6 +740,30 @@
                           </div>
                         </div>
                       </div>
+                      <label
+                        v-if="currentBlockDisplayMode === 'stacked'"
+                        class="settings-toggle-row"
+                      >
+                        <span class="settings-row-copy">
+                          <span class="settings-row-title">隐藏块间边线</span>
+                          <span class="settings-row-desc"
+                            >去掉堆叠块之间的分割线，更简洁</span
+                          >
+                        </span>
+                        <input
+                          type="checkbox"
+                          :checked="stackedHideBorders"
+                          @change="handleStackedHideBordersChange($event)"
+                        />
+                        <span class="fancy-check" aria-hidden="true"
+                          ><svg viewBox="0 0 64 64">
+                            <path
+                              d="M 0 16 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 16 L 32 48 L 64 16 V 8 A 8 8 90 0 0 56 0 H 8 A 8 8 90 0 0 0 8 V 56 A 8 8 90 0 0 8 64 H 56 A 8 8 90 0 0 64 56 V 16"
+                              pathLength="575.0541381835938"
+                              class="fancy-path"
+                            ></path></svg
+                        ></span>
+                      </label>
                       <div class="settings-select-row">
                         <span class="settings-row-copy"
                           ><span class="settings-row-title">简略消息显示</span
@@ -1989,6 +2037,8 @@ const conversationContinuityLabel = computed(() => {
 
 const currentBlockDisplayMode = computed(() => experiments.value.blockDisplayMode);
 
+const stackedHideBorders = computed(() => form.value.stacked_hide_borders);
+
 const blockDisplayLabel = computed(() => {
   return (
     blockDisplayOptions.find((option) => option.value === currentBlockDisplayMode.value)?.label ||
@@ -2445,6 +2495,15 @@ const handleBlockDisplayModeChange = (mode: 'traditional' | 'stacked' | 'minimal
   personalization.setBlockDisplayMode(mode);
 };
 
+const handleStackedHideBordersChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  personalization.updateField({
+    key: 'stacked_hide_borders',
+    value: target.checked
+  });
+  personalization.save();
+};
+
 const compactMessageDisplayOptions = [
   {
     id: 'full',
diff --git a/static/src/stores/personalization.ts b/static/src/stores/personalization.ts
index 8a98274..8eaf857 100644
--- a/static/src/stores/personalization.ts
+++ b/static/src/stores/personalization.ts
@@ -26,6 +26,7 @@ interface PersonalForm {
   enhanced_tool_display: boolean;
   compact_message_display: CompactMessageDisplay;
   show_git_status_bar: boolean;
+  stacked_hide_borders: boolean;
   enhanced_tool_display_categories: string[];
   enabled_skills: string[];
   self_identify: string;
@@ -123,6 +124,7 @@ const defaultForm = (): PersonalForm => ({
   enhanced_tool_display: true,
   compact_message_display: 'full',
   show_git_status_bar: true,
+  stacked_hide_borders: false,
   enhanced_tool_display_categories: [],
   enabled_skills: [],
   self_identify: '',
@@ -310,6 +312,7 @@ export const usePersonalizationStore = defineStore('personalization', {
         enhanced_tool_display: data.enhanced_tool_display !== false,
         compact_message_display: data.compact_message_display === 'brief' ? 'brief' : 'full',
         show_git_status_bar: data.show_git_status_bar !== false,
+        stacked_hide_borders: !!data.stacked_hide_borders,
         enhanced_tool_display_categories: Array.isArray(data.enhanced_tool_display_categories)
           ? data.enhanced_tool_display_categories.filter((item: unknown) => typeof item === 'string')
           : [],
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index b6070c7..b90d4a2 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -692,6 +692,11 @@
   background: var(--claude-highlight);
 }
 
+/* 深色模式下块 hover 对齐对话列表 hover 颜色 */
+body[data-theme='dark'] .collapsible-header:hover {
+  background: var(--hover-bg) !important;
+}
+
 .arrow {
   width: 16px;
   min-width: 16px;
@@ -821,6 +826,11 @@
   border-bottom: none;
 }
 
+/* 隐藏边线模式 */
+.stacked-shell--no-borders .stacked-item {
+  border-bottom: none;
+}
+
 .stacked-block {
   margin: 0;
   border: none;
@@ -934,6 +944,11 @@ body[data-theme='dark'] .more-icon {
   pointer-events: none;
 }
 
+/* 深色模式下 progress-indicator 使用白色 */
+body[data-theme='dark'] .progress-indicator {
+  background: var(--text-primary);
+}
+
 .collapsible-block.processing .progress-indicator {
   opacity: 1;
 }