From e3ce969cc55de21a2f757f0886e3e0ddf34bed62 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 4 Nov 2026 23:27:26 +0800
Subject: [PATCH] fix: conversation rename

---
 .../global/markdown-editor/md-editor.scss     |  4 +-
 .../items/table/ProgressTableItem.vue         | 20 +-----
 .../items/table/TableCheckbox.vue             | 24 +-------
 .../items/table/TableRadio.vue                | 24 +-------
 .../simple-debug}/history-popover/index.vue   | 17 ++----
 .../components/header/simple-debug/index.vue  |  4 +-
 .../left-sidebar/account-menu/index.vue       |  8 +--
 .../left-sidebar/conversation-list/index.vue  | 61 ++++++++++++++++---
 .../HistoryConversationDrawer.vue             |  1 +
 ui/src/styles/element-plus.scss               | 11 ++--
 10 files changed, 75 insertions(+), 99 deletions(-)
 rename ui/src/conversation-panel/components/{ => header/simple-debug}/history-popover/index.vue (90%)

diff --git a/ui/src/components/global/markdown-editor/md-editor.scss b/ui/src/components/global/markdown-editor/md-editor.scss
index 399706b976c..60a473579bb 100644
--- a/ui/src/components/global/markdown-editor/md-editor.scss
+++ b/ui/src/components/global/markdown-editor/md-editor.scss
@@ -7,7 +7,7 @@
   --md-scrollbar-thumb-hover-color: var(--el-scrollbar-hover-bg-color, var(--el-text-color-secondary));
   border-radius: var(--el-border-radius-base);
   font-weight: 400;
-  line-height: 22px;
+  line-height: var(--mk-line-height-base);
   font-family: var(--mk-font-family) !important;
   height: 130px;
 
@@ -98,7 +98,7 @@
     p {
       padding: 0 !important;
       margin: 0 !important;
-      line-height: 22px !important;
+      line-height: var(--mk-line-height-base) !important;
     }
 
     sup[data-title] {
diff --git a/ui/src/components/mk-dynamics-form/items/table/ProgressTableItem.vue b/ui/src/components/mk-dynamics-form/items/table/ProgressTableItem.vue
index ca89f562c61..6b3873f0e2b 100644
--- a/ui/src/components/mk-dynamics-form/items/table/ProgressTableItem.vue
+++ b/ui/src/components/mk-dynamics-form/items/table/ProgressTableItem.vue
@@ -40,28 +40,14 @@ const viewCards = computed(() => {
 <template>
   <div class="progress-table-item">
     <el-popover placement="top-start" :title="row[textField]" :width="200" trigger="hover" :persistent="false">
-      <template #reference> <el-progress v-bind="$attrs" :percentage="row[valueField]"></el-progress></template>
+      <template #reference><el-progress v-bind="$attrs" :percentage="row[valueField]"></el-progress></template>
       <div>
         <el-row v-for="(item, index) in viewCards" :key="index">
           <el-col :span="6">{{ item.title }}</el-col>
-          <el-col :span="18"> <span class="value" :innerHTML="getCardValue(item)"> </span></el-col>
+          <el-col :span="18"><span class="value" :innerHTML="getCardValue(item)"></span></el-col>
         </el-row>
       </div>
     </el-popover>
   </div>
 </template>
-<style lang="scss" scoped>
-@mixin valueScss() {
-  color: var(--el-text-color-primary);
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 22px;
-  height: 22px;
-}
-.progress-table-item {
-  .value {
-    float: right;
-    @include valueScss;
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/mk-dynamics-form/items/table/TableCheckbox.vue b/ui/src/components/mk-dynamics-form/items/table/TableCheckbox.vue
index bf675f5de21..6d65a332f0e 100644
--- a/ui/src/components/mk-dynamics-form/items/table/TableCheckbox.vue
+++ b/ui/src/components/mk-dynamics-form/items/table/TableCheckbox.vue
@@ -166,26 +166,4 @@ const activeText = computed(() => {
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.table-checkbox {
-  .header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 16px;
-    .title {
-      color: var(--el-text-color-primary);
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 22px;
-    }
-  }
-  .msg {
-    margin-top: 12px;
-    color: rgba(100, 106, 115, 1);
-    .active {
-      margin-left: 3px;
-      color: var(--el-color-primary);
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/mk-dynamics-form/items/table/TableRadio.vue b/ui/src/components/mk-dynamics-form/items/table/TableRadio.vue
index 762d97c7af0..90d1e73809d 100644
--- a/ui/src/components/mk-dynamics-form/items/table/TableRadio.vue
+++ b/ui/src/components/mk-dynamics-form/items/table/TableRadio.vue
@@ -156,26 +156,4 @@ const activeText = computed(() => {
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.table-radio {
-  .header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 16px;
-    .title {
-      color: var(--el-text-color-primary);
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 22px;
-    }
-  }
-  .msg {
-    margin-top: 12px;
-    color: rgba(100, 106, 115, 1);
-    .active {
-      margin-left: 3px;
-      color: var(--el-color-primary);
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/ui/src/conversation-panel/components/history-popover/index.vue b/ui/src/conversation-panel/components/header/simple-debug/history-popover/index.vue
similarity index 90%
rename from ui/src/conversation-panel/components/history-popover/index.vue
rename to ui/src/conversation-panel/components/header/simple-debug/history-popover/index.vue
index 75673b337a6..1cd4f882f9f 100644
--- a/ui/src/conversation-panel/components/history-popover/index.vue
+++ b/ui/src/conversation-panel/components/header/simple-debug/history-popover/index.vue
@@ -12,6 +12,8 @@ defineOptions({ name: 'HistoryPopover' })
 const conversationList = useConversationListStore()
 const visible = ref(false)
 const clearing = ref(false)
+// 菜单挂在历史浮层内、滚动区外，避免裁切并保留外层点击判断。
+const historyMenuTarget = ref<HTMLDivElement>()
 
 // 每次打开重新加载第一页，滚动到底部时续载。
 const handleShow = () => conversationList.loadConversations()
@@ -55,15 +57,7 @@ function handleClearConversations() {
 </script>
 
 <template>
-  <el-popover
-    v-model:visible="visible"
-    trigger="click"
-    placement="bottom-end"
-    :width="280"
-    popper-class="p-2!"
-    :popper-style="{ '--el-bg-color-overlay': 'var(--mk-N100)' }"
-    @show="handleShow"
-  >
+  <el-popover v-model:visible="visible" trigger="click" placement="bottom-end" :width="280" popper-class="p-2! bg-N100!" @show="handleShow">
     <template #reference>
       <span class="inline-flex">
         <MkTooltip content="历史对话">
@@ -106,14 +100,14 @@ function handleClearConversations() {
             </span>
           </template>
           <template #action>
-            <MkDropdown trigger="click" persistent :teleported="false">
+            <MkDropdown trigger="click" persistent :append-to="historyMenuTarget">
               <!-- 打开历史对话操作菜单 -->
               <el-button text><MkIcon name="icon_more_outlined" /></el-button>
               <template #dropdown>
                 <MkDropdownMenu>
                   <RenameConversation :conversation="conversation" />
                   <!-- 删除历史对话 -->
-                  <MkDropdownItem @click="handleDeleteConversation(conversation)">
+                  <MkDropdownItem divided @click="handleDeleteConversation(conversation)">
                     <template #icon><MkIcon name="icon_delete-trash_outlined" /></template>
                     <span>删除</span>
                   </MkDropdownItem>
@@ -124,5 +118,6 @@ function handleClearConversations() {
         </MkListItem>
       </div>
     </el-scrollbar>
+    <div ref="historyMenuTarget" />
   </el-popover>
 </template>
diff --git a/ui/src/conversation-panel/components/header/simple-debug/index.vue b/ui/src/conversation-panel/components/header/simple-debug/index.vue
index 4dd98dbb544..78b567d5817 100644
--- a/ui/src/conversation-panel/components/header/simple-debug/index.vue
+++ b/ui/src/conversation-panel/components/header/simple-debug/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useConversationListStore } from '../../../left-sidebar/conversation-list/index'
-import HistoryPopover from '../../history-popover/index.vue'
+import HistoryPopover from './history-popover/index.vue'
 
 // 左栏放外部设置表单，开合沿用会话列表 store 的侧栏状态。
 const { appInfo, leftSideOpen, toggleLeftSide, newConversation } = useConversationListStore()
@@ -25,7 +25,7 @@ const { appInfo, leftSideOpen, toggleLeftSide, newConversation } = useConversati
     </MkTooltip>
     <!-- 历史记录 -->
     <span class="ml-1">
-      <HistoryPopover></HistoryPopover>
+      <HistoryPopover />
     </span>
   </header>
 </template>
diff --git a/ui/src/conversation-panel/left-sidebar/account-menu/index.vue b/ui/src/conversation-panel/left-sidebar/account-menu/index.vue
index 278dae3eaa0..d7bd16927b7 100644
--- a/ui/src/conversation-panel/left-sidebar/account-menu/index.vue
+++ b/ui/src/conversation-panel/left-sidebar/account-menu/index.vue
@@ -48,16 +48,12 @@ const goLogin = () => {
 <template>
   <MkDropdown v-if="account" class="w-full" trigger="click" placement="top-start" @visible-change="menuVisible = $event">
     <!-- 展开账户菜单 -->
-    <button
-      type="button"
-      class="flex-align-center w-full cursor-pointer gap-2 rounded-md py-1 px-2 hover:bg-N900/10"
-      :class="{ 'bg-N900/10': menuVisible }"
-    >
+    <div class="flex-align-center w-full cursor-pointer gap-2 rounded-md py-1 px-2 hover:bg-N900/10" :class="{ 'bg-N900/10': menuVisible }">
       <el-avatar :size="32" class="bg-primary-gradient!">
         <img src="@/assets/mk_icon_user_gradient.svg" alt="" style="width: 54%" />
       </el-avatar>
       <span class="truncate" :title="displayName">{{ displayName }}</span>
-    </button>
+    </div>
     <template #dropdown>
       <div class="w-60">
         <div class="p-3">
diff --git a/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue b/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue
index b73bf20c848..5484ea6d46e 100644
--- a/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue
+++ b/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import { MsgConfirm } from '@/utils/message'
+import RenameConversation from '../../components/rename/index.vue'
 import { relativeTimeFormat } from '@/utils/time'
 import type { Conversation } from '../../core/types'
 import { useConversationListStore } from './index'
@@ -6,10 +9,35 @@ import AccountMenu from '../account-menu/index.vue'
 
 defineOptions({ name: 'ConversationList' })
 
-const { appInfo, conversations, currentChatId, selectConversation, newConversation, deleteChat, toggleLeftSide } = useConversationListStore()
+const { appInfo, conversations, currentChatId, selectConversation, newConversation, deleteChat, toggleLeftSide, hasMore, loadMore } =
+  useConversationListStore()
 
 // 历史时间优先使用更新时间，缺少时间的记录不显示占位文案。
 const conversationTime = (conversation: Conversation) => relativeTimeFormat(conversation.update_time || conversation.create_time)
+// 会话维护沿用调试历史记录的确认与请求流程。
+const clearing = ref(false)
+
+function handleDeleteConversation(conversation: Conversation) {
+  MsgConfirm('确认删除该对话？', '删除后无法恢复。')
+    .then(() => deleteChat(conversation.id))
+    .catch(() => {})
+}
+
+// 先加载全部分页，再切到新对话并逐条删除；失败时保留未删除记录。
+function handleClearConversations() {
+  if (clearing.value) return
+  MsgConfirm('确认清空全部历史对话？', '清空后无法恢复。', { confirmButtonText: '清空' })
+    .then(async () => {
+      clearing.value = true
+      while (hasMore.value) await loadMore()
+      newConversation()
+      for (const { id } of [...conversations.value]) await deleteChat(id)
+    })
+    .catch(() => {})
+    .finally(() => {
+      clearing.value = false
+    })
+}
 </script>
 
 <template>
@@ -38,10 +66,12 @@ const conversationTime = (conversation: Conversation) => relativeTimeFormat(conv
     <div class="flex-between pl-2 mt-4">
       <h6 class="text-N600">历史对话</h6>
 
-      <!-- // TODO: 全部清空对话 -->
-      <el-button text>
-        <MkIcon name="icon_delete-trash_outlined" />
-      </el-button>
+      <MkTooltip content="清空">
+        <!-- 批量清空历史对话 -->
+        <el-button text :loading="clearing" :disabled="!conversations.length" @click="handleClearConversations">
+          <MkIcon name="icon_delete-trash_outlined" />
+        </el-button>
+      </MkTooltip>
     </div>
 
     <!-- 历史列表独立滚动，应用信息和新建入口保持固定。 -->
@@ -63,11 +93,22 @@ const conversationTime = (conversation: Conversation) => relativeTimeFormat(conv
                 {{ conversationTime(conversation) }}
               </span>
             </template>
-            <template #action-dropdown>
-              <MkDropdownItem divided @click="deleteChat(conversation.id)">
-                <template #icon><MkIcon name="icon_info_outlined" /></template>
-                <span>删除</span>
-              </MkDropdownItem>
+            <template #action>
+              <MkDropdown trigger="click" persistent>
+                <!-- 打开历史对话操作菜单 -->
+                <el-button text><MkIcon name="icon_more_outlined" /></el-button>
+                <template #dropdown>
+                  <MkDropdownMenu>
+                    <!-- 重命名 -->
+                    <RenameConversation :conversation="conversation" />
+                    <!-- 删除历史对话 -->
+                    <MkDropdownItem divided @click="handleDeleteConversation(conversation)">
+                      <template #icon><MkIcon name="icon_delete-trash_outlined" /></template>
+                      <span>删除</span>
+                    </MkDropdownItem>
+                  </MkDropdownMenu>
+                </template>
+              </MkDropdown>
             </template>
           </MkListItem>
         </template>
diff --git a/ui/src/conversation-panel/left-sidebar/portal-conversation-list/HistoryConversationDrawer.vue b/ui/src/conversation-panel/left-sidebar/portal-conversation-list/HistoryConversationDrawer.vue
index 0dcce137dd0..e4dd97b49a4 100644
--- a/ui/src/conversation-panel/left-sidebar/portal-conversation-list/HistoryConversationDrawer.vue
+++ b/ui/src/conversation-panel/left-sidebar/portal-conversation-list/HistoryConversationDrawer.vue
@@ -89,6 +89,7 @@ const handleDeleteConversation = (conversation: PortalConversationSummary) => {
               <el-button text><MkIcon name="icon_more_outlined" /></el-button>
               <template #dropdown>
                 <MkDropdownMenu>
+                  <!-- 重命名 -->
                   <RenameConversation
                     :conversation="conversation"
                     :application-id="selectedApplicationId"
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 8a9b0876996..cfe33d6aa1b 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -376,7 +376,7 @@
   margin: 0;
   height: unset;
   &__label {
-    line-height: 22px;
+    line-height: var(--mk-line-height-base);
     font-weight: 400;
   }
   &__inner {
@@ -577,6 +577,7 @@
 /* dropdown */
 .el-dropdown {
   color: currentColor;
+  line-height: var(--mk-line-height-base);
 }
 
 .el-dropdown-menu {
@@ -628,7 +629,7 @@
     color: var(--el-text-color-primary);
   }
   &__content {
-    line-height: 22px;
+    line-height: var(--mk-line-height-base);
   }
 }
 
@@ -911,7 +912,7 @@
   }
   &__wrapper {
     padding: 4px 12px;
-    line-height: 22px;
+    line-height: var(--mk-line-height-base);
     &.is-disabled {
       background-color: var(--mk-N200);
       .el-select__caret {
@@ -1310,7 +1311,7 @@
       font-weight: 400;
     }
     height: auto;
-    line-height: 22px;
+    line-height: var(--mk-line-height-base);
     align-items: inherit;
   }
 
@@ -1421,7 +1422,7 @@
   --el-upload-dragger-padding-horizontal: 40px;
   --el-upload-dragger-padding-vertical: 32px;
   &__text {
-    line-height: 22px;
+    line-height: var(--mk-line-height-base);
     color: var(--el-text-color-primary) !important;
     em:hover {
       color: var(--el-color-primary-light-5);