From 0eaa8ba4508faad999fe17a0d08b2008b79b112f Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Tue, 28 Jul 2026 12:49:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(quickdock):=20=E6=96=B0=E5=A2=9E=E5=BF=AB?=
 =?UTF-8?q?=E6=8D=B7=E7=AA=97=E5=8F=A3=E8=87=AA=E5=8A=A8=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E4=B8=8E=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 个人空间·外观与显示新增「快捷窗口自动展开」开关（默认开）；
  关闭后新内容到达不再自动展开，只能通过右侧悬浮按钮手动展开；
  设置切换立即生效
- 展开/收起悬浮按钮无内容时也常显；线条色对齐左侧对话记录侧边栏
  （--claude-text），移除 hover 与展开态变色
- 修复展开动画方向：empty 态保留上下 padding，消除 padding-top
  过渡带来的垂直分量，展开恢复为纯横向从右到左
---
 docs/float_window_design.md                   |  5 +++-
 modules/personalization_manager.py            |  7 +++++
 static/src/App.vue                            |  6 ++---
 .../components/chat/quickdock/QuickDock.vue   | 27 +++++++++++++++----
 .../components/chat/quickdock/quickdock.css   | 21 ++++++---------
 .../personalization/PersonalizationDrawer.vue | 22 +++++++++++++++
 static/src/stores/personalization.ts          |  3 +++
 7 files changed, 69 insertions(+), 22 deletions(-)

diff --git a/docs/float_window_design.md b/docs/float_window_design.md
index 8ece51e8..1f33018b 100644
--- a/docs/float_window_design.md
+++ b/docs/float_window_design.md
@@ -8,7 +8,8 @@
 
 1. **命名**：该功能正式名称为「**快捷窗口**」（quick dock / quick window）。
 2. **布局：占位而非悬浮**：快捷窗口**不是** `position: fixed` 悬浮，而是在**对话区域右侧空白区域占位显示**的一列，常驻时会**把对话区域向左挤压**（与 git/终端 right-panels 同为 `chat-container` 的 flex 兄弟节点，位于 `</main>` 之后、right-panels 之前）。有内容时才显示该列。
-3. **设置项**：个人空间（PersonalizationDrawer）新增「**隐藏快捷窗口**」开关，**默认关闭**（即默认显示）。字段 `hide_quick_dock: boolean` 存 personalization form。
+3. **设置项**：个人空间（PersonalizationDrawer）新增「**隐藏快捷窗口**」开关，**默认关闭**（即默认显示）。字段 `hide_quick_dock: boolean` 存 personalization form。（注：2026-07-28 核查该字段前端未消费，仅后端存在。）
+3.1 **设置项**（2026-07-28）：「外观与显示」新增「**快捷窗口自动展开**」开关，**默认是**（有内容时自动展开）；切换为否后只能通过右侧悬浮按钮手动展开。字段 `quick_dock_auto_expand: boolean`（默认 true）存 personalization form。行为语义：QuickDock.vue `watch(hasContent, ..., {immediate:true})` 按模式校正 `userCollapsed = !autoExpand`——手动模式下内容集合变化（出现/清空）后保持收起等手动点击，用户手动展开后只要内容不完全清空就保持展开；`watch(autoExpand)` 让设置切换立即生效（切否收起 / 切是有内容即展开）。
 4. 详情面板（子智能体/后台指令）保持 fixed 悬浮，从快捷窗口列左侧滑出；文件预览侧边栏在快捷窗口列右侧（git/终端面板左侧）占位/滑出。
 5. 移动端（isMobileViewport）第一版先隐藏。
 
@@ -103,6 +104,8 @@
 4. `overflow` 裁剪窗口阴影 → 滚动容器 `padding + 负 margin` 扩大滚动盒。
 5. 菜单 fixed 定位不随栈滚动 → 栈滚动时主动关闭菜单。
 6. 两个 ⋯ 菜单 + Esc 多层浮层：菜单互斥；Esc 按 菜单 → 详情面板 → 预览栏 顺序逐个关（用 `e.preventDefault()` + `e.defaultPrevented` 串联）。
+7. **占位列展开/收起过渡中 `padding` 必须保持上下值一致**（2026-07-28 踩坑）：`.quick-dock--empty` 若 `padding: 0`，展开时 `padding-top 0→44px` 参与过渡会让内容垂直下移 44px，叠加 `translateX(24px)→0` 形成「从右上角斜向出现」观感；收起态写 `padding: 44px 0 20px`（仅水平 padding 归零）后动画才是纯横向从右到左。
+8. 展开/收起悬浮按钮（`.qd-toggle`，App.vue 零宽锚点）**无内容时也常显**（2026-07-28 用户要求）：`v-if="!isMobileViewport"` 不含 `qdHasContent`；配套 `watch(hasContent)` 任一方向变化都重置 `userCollapsed`（否则「无内容点收起 → 新内容到达」路径 dock 不自动展开）。按钮线条色与左侧对话记录侧边栏导航图标一致用 `var(--claude-text)`，**恒定不变**——无 hover 变色，展开态也不变色（is-active 样式已移除）。
 
 ## 6. 正式接入任务清单（2026-07-21 已全部完成）
 
diff --git a/modules/personalization_manager.py b/modules/personalization_manager.py
index 7f0dc517..2d621bcc 100644
--- a/modules/personalization_manager.py
+++ b/modules/personalization_manager.py
@@ -106,6 +106,7 @@ DEFAULT_PERSONALIZATION_CONFIG: Dict[str, Any] = {
     "new_chat_button_behavior": "route",  # 新建对话按钮行为：route-跳转空白新对话页 / blank-立即创建空对话
     "default_hide_workspace": False,  # 默认隐藏工作区
     "hide_quick_dock": False,  # 隐藏快捷窗口（对话区右侧的待办/子智能体/后台指令/文件窗口列）
+    "quick_dock_auto_expand": True,  # 快捷窗口自动展开：True-有内容时自动展开 / False-只能手动点击按钮展开
     "group_sidebar_by_workspace": False,  # 侧边栏按工作区/项目分组显示对话
     "sidebar_pinned_workspaces": [],  # 分组侧边栏中永久置顶的工作区ID列表
     "sidebar_workspace_order": [],  # 分组侧边栏中非置顶工作区的显示顺序
@@ -536,6 +537,12 @@ def sanitize_personalization_payload(
     else:
         base["hide_quick_dock"] = bool(base.get("hide_quick_dock", False))
 
+    # 快捷窗口自动展开
+    if "quick_dock_auto_expand" in data:
+        base["quick_dock_auto_expand"] = bool(data.get("quick_dock_auto_expand"))
+    else:
+        base["quick_dock_auto_expand"] = bool(base.get("quick_dock_auto_expand", True))
+
     # 侧边栏按工作区/项目分组显示对话
     if "group_sidebar_by_workspace" in data:
         base["group_sidebar_by_workspace"] = bool(data.get("group_sidebar_by_workspace"))
diff --git a/static/src/App.vue b/static/src/App.vue
index 04721855..594f3ae2 100644
--- a/static/src/App.vue
+++ b/static/src/App.vue
@@ -357,15 +357,15 @@
           :host-mode="versioningHostMode"
         />
         <!-- 快捷窗口展开/收起按钮：零宽锚点始终贴在 QuickDock 右缘，
-             按钮绝对定位悬浮在原处，不随面板挤压移动 -->
+             按钮绝对定位悬浮在原处，不随面板挤压移动；
+             无内容时也常显（不随 qdHasContent 隐藏），避免按钮时隐时现 -->
         <div
-          v-if="!isMobileViewport && qdHasContent"
+          v-if="!isMobileViewport"
           class="qd-toggle-anchor"
         >
           <button
             type="button"
             class="qd-toggle"
-            :class="{ 'is-active': qdExpanded }"
             :aria-label="qdExpanded ? '收起快捷窗口' : '展开快捷窗口'"
             :aria-pressed="qdExpanded"
             @click="qdUserCollapsed = !qdUserCollapsed"
diff --git a/static/src/components/chat/quickdock/QuickDock.vue b/static/src/components/chat/quickdock/QuickDock.vue
index 66e60f1d..e0ef2f4c 100644
--- a/static/src/components/chat/quickdock/QuickDock.vue
+++ b/static/src/components/chat/quickdock/QuickDock.vue
@@ -43,6 +43,7 @@ import { useSubAgentStore } from '@/stores/subAgent';
 import { useBackgroundCommandStore } from '@/stores/backgroundCommand';
 import { useConversationStore } from '@/stores/conversation';
 import { useUiStore } from '@/stores/ui';
+import { usePersonalizationStore } from '@/stores/personalization';
 import TodoWindow from './TodoWindow.vue';
 import RunnerWindow from './RunnerWindow.vue';
 import RunnerDetailPanel from './RunnerDetailPanel.vue';
@@ -61,6 +62,7 @@ const subAgentStore = useSubAgentStore();
 const bgStore = useBackgroundCommandStore();
 const conversationStore = useConversationStore();
 const uiStore = useUiStore();
+const personalizationStore = usePersonalizationStore();
 
 // hasContent / userCollapsed 提升到 store：App.vue 的展开收起按钮共用同一判定
 const { menu, hasContent, userCollapsed } = storeToRefs(quickDock);
@@ -73,11 +75,26 @@ watch(userCollapsed, (collapsed) => {
   }
 });
 
-// 内容清空后重置手动标记：下次有新内容时恢复自动展开
-watch(hasContent, (has) => {
-  if (!has) {
-    quickDock.userCollapsed = false;
-  }
+/** 快捷窗口自动展开设置（个人空间·外观与显示，默认是；为否则只能手动点击按钮展开） */
+const autoExpand = computed(() => personalizationStore.form.quick_dock_auto_expand !== false);
+
+// 内容集合变化（出现/清空）时按模式校正展开状态：
+// - 自动展开（默认）：重置手动标记，新内容到达自动展开
+//   （按钮常显后，无内容时也可能被点击置为收起；不重置会导致新内容到达不展开）
+// - 仅手动展开：保持/恢复收起态，等用户点击按钮；
+//   用户手动展开后只要内容不完全清空（hasContent 不再变化），dock 保持展开
+watch(
+  hasContent,
+  () => {
+    quickDock.userCollapsed = !autoExpand.value;
+  },
+  // immediate：挂载时即校正（手动模式下刷新恢复对话，已有内容不应自动展开）
+  { immediate: true }
+);
+
+// 设置切换立即生效：切到「否」收起等手动展开；切回「是」有内容即展开
+watch(autoExpand, (enabled) => {
+  quickDock.userCollapsed = !enabled;
 });
 
 const AGENT_TERMINAL = new Set(['completed', 'failed', 'timeout', 'terminated']);
diff --git a/static/src/components/chat/quickdock/quickdock.css b/static/src/components/chat/quickdock/quickdock.css
index ac5a64d7..803be7c6 100644
--- a/static/src/components/chat/quickdock/quickdock.css
+++ b/static/src/components/chat/quickdock/quickdock.css
@@ -32,10 +32,13 @@
     transform 0.3s var(--qd-ease-out);
 }
 
-/* 四个窗口都无内容时收起到 0 宽，不挤压对话区 */
+/* 四个窗口都无内容时收起到 0 宽，不挤压对话区。
+   上下 padding 保持与展开态一致（44/20）：若收起态 padding 归 0，
+   展开过渡中 padding-top 0→44px 会让内容垂直下移 44px，叠加 translateX
+   形成「从右上角斜向出现」的观感；保留后动画只剩纯水平分量（从右到左） */
 .quick-dock--empty {
   width: 0;
-  padding: 0;
+  padding: 44px 0 20px;
   opacity: 0;
   transform: translateX(24px);
 }
@@ -977,13 +980,14 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  color: var(--text-secondary);
+  /* 线条色与左侧对话记录侧边栏导航图标一致（--claude-text），恒定不变：
+     无 hover 变色，展开（is-active）状态也不变色 */
+  color: var(--claude-text);
   /* 底色与背后面板一致（收起=对话标题栏 / 展开=应用背景，两者同为 --surface-panel） */
   background: var(--surface-panel);
   border: none;
   border-radius: 8px;
   cursor: pointer;
-  transition: color 140ms ease;
 }
 
 .qd-toggle svg line {
@@ -991,12 +995,3 @@
   stroke-width: 1.8;
   stroke-linecap: round;
 }
-
-/* hover 只变图标颜色，不变底色 */
-.qd-toggle:hover {
-  color: var(--text-primary);
-}
-
-.qd-toggle.is-active {
-  color: var(--accent);
-}
diff --git a/static/src/components/personalization/PersonalizationDrawer.vue b/static/src/components/personalization/PersonalizationDrawer.vue
index 6c103570..73022ab3 100644
--- a/static/src/components/personalization/PersonalizationDrawer.vue
+++ b/static/src/components/personalization/PersonalizationDrawer.vue
@@ -757,6 +757,28 @@
                               class="fancy-path"
                             ></path></svg></span
                       ></label>
+                      <label 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="form.quick_dock_auto_expand"
+                          @change="
+                            personalization.updateField({
+                              key: 'quick_dock_auto_expand',
+                              value: $event.target.checked
+                            })
+                          " /><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
diff --git a/static/src/stores/personalization.ts b/static/src/stores/personalization.ts
index 11f4ea40..5366c0e1 100644
--- a/static/src/stores/personalization.ts
+++ b/static/src/stores/personalization.ts
@@ -31,6 +31,7 @@ interface PersonalForm {
   show_status_avatar: boolean;
   show_git_status_bar: boolean;
   auto_open_terminal_panel: boolean;
+  quick_dock_auto_expand: boolean;
   stacked_hide_borders: boolean;
   minimal_expand_height_limited: boolean;
   enhanced_tool_display_categories: string[];
@@ -192,6 +193,7 @@ const defaultForm = (): PersonalForm => ({
   show_status_avatar: true,
   show_git_status_bar: true,
   auto_open_terminal_panel: true,
+  quick_dock_auto_expand: true,
   stacked_hide_borders: loadCachedStackedHideBorders(),
   minimal_expand_height_limited: loadCachedMinimalExpandHeightLimited(),
   enhanced_tool_display_categories: [],
@@ -389,6 +391,7 @@ export const usePersonalizationStore = defineStore('personalization', {
         show_status_avatar: data.show_status_avatar !== false,
         show_git_status_bar: data.show_git_status_bar !== false,
         auto_open_terminal_panel: data.auto_open_terminal_panel !== false,
+        quick_dock_auto_expand: data.quick_dock_auto_expand !== false,
         stacked_hide_borders: !!data.stacked_hide_borders,
         minimal_expand_height_limited: data.minimal_expand_height_limited !== false,
         enhanced_tool_display_categories: Array.isArray(data.enhanced_tool_display_categories)