From af63dd6a10e33f29aada50816ee217c2690e9f9d Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 30 Oct 2026 10:36:26 +0800
Subject: [PATCH] fix: share chat

---
 .../components/header/chat/index.vue          | 26 +++---
 .../components/header/portal/index.vue        | 24 +++--
 .../left-sidebar/conversation-list/index.vue  | 18 ++--
 .../portal-conversation-list/index.vue        | 18 ++--
 .../main/portal-application-panel/index.vue   | 16 ++--
 .../main/share-panel/index.vue                | 88 +++++++++++--------
 ui/src/styles/app.scss                        |  6 ++
 7 files changed, 118 insertions(+), 78 deletions(-)

diff --git a/ui/src/conversation-panel/components/header/chat/index.vue b/ui/src/conversation-panel/components/header/chat/index.vue
index 148bb525064..3490d1b6c1a 100644
--- a/ui/src/conversation-panel/components/header/chat/index.vue
+++ b/ui/src/conversation-panel/components/header/chat/index.vue
@@ -21,26 +21,32 @@ const handleNewConversation = () => (props.newConversation ? props.newConversati
 </script>
 
 <template>
-  <header class="mk-conversation-chat-header flex-align-center p-4">
+  <header class="mk-conversation-chat-header flex-align-center gap-2 p-4">
     <!-- 左侧收起时才在顶部显示:展开左侧 + 新建对话(展开时它们在侧栏内) -->
     <template v-if="!list.leftSideOpen.value">
       <!-- 展开左侧 -->
-      <el-button text @click="list.toggleLeftSide()" class="-ml-1">
-        <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
-      </el-button>
+      <MkTooltip content="展开侧边栏">
+        <el-button text @click="list.toggleLeftSide()" class="-ml-1 mr-1">
+          <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
+        </el-button>
+      </MkTooltip>
     </template>
 
     <div class="flex-1 flex-align-center gap-2">
       <h4 class="truncate">{{ list.currentConversation.value?.abstract || '新建对话' }}</h4>
     </div>
     <!-- 新建对话 -->
-    <el-button text @click="handleNewConversation">
-      <MkIcon name="icon_new-chat_outlined" :size="18" class="text-N900!" />
-    </el-button>
+    <MkTooltip content="新建对话">
+      <el-button text @click="handleNewConversation">
+        <MkIcon name="icon_new-chat_outlined" :size="18" class="text-N900!" />
+      </el-button>
+    </MkTooltip>
     <!-- 进入分享模式，勾选要分享的对话 -->
-    <el-button v-if="shareable" text :disabled="!canShare" @click="emit('share')">
-      <MkIcon name="icon_share_outlined" :size="18" :class="canShare ? 'text-N900!' : 'text-N400!'" />
-    </el-button>
+    <MkTooltip v-if="shareable" content="分享">
+      <el-button text :disabled="!canShare" @click="emit('share')">
+        <MkIcon name="icon_share_outlined" :size="18" :class="canShare ? 'text-N900!' : 'text-N400!'" />
+      </el-button>
+    </MkTooltip>
     <slot />
   </header>
 </template>
diff --git a/ui/src/conversation-panel/components/header/portal/index.vue b/ui/src/conversation-panel/components/header/portal/index.vue
index 93df87f6115..a58766d4ddc 100644
--- a/ui/src/conversation-panel/components/header/portal/index.vue
+++ b/ui/src/conversation-panel/components/header/portal/index.vue
@@ -25,14 +25,18 @@ const handleNewConversation = () => (props.newConversation ? props.newConversati
     <!-- 左侧收起时才在顶部显示:展开左侧 + 新建对话(展开时它们在侧栏内) -->
     <template v-if="!list.leftSideOpen.value">
       <!-- 展开左侧 -->
-      <el-button text @click="list.toggleLeftSide()">
-        <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
-      </el-button>
+      <MkTooltip content="展开侧边栏">
+        <el-button text @click="list.toggleLeftSide()">
+          <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
+        </el-button>
+      </MkTooltip>
 
       <!-- 新建对话 -->
-      <el-button text @click="handleNewConversation">
-        <MkIcon name="icon_new-chat_outlined" :size="18" class="text-N900!" />
-      </el-button>
+      <MkTooltip content="新建对话">
+        <el-button text @click="handleNewConversation">
+          <MkIcon name="icon_new-chat_outlined" :size="18" class="text-N900!" />
+        </el-button>
+      </MkTooltip>
       <el-divider direction="vertical" class="ml-3! mr-4!" />
     </template>
 
@@ -46,9 +50,11 @@ const handleNewConversation = () => (props.newConversation ? props.newConversati
       </el-tag>
     </div>
     <!-- 进入分享模式，勾选要分享的对话 -->
-    <el-button v-if="shareable" text :disabled="!canShare" @click="emit('share')">
-      <MkIcon name="icon_share_outlined" :size="18" class="text-N900!" />
-    </el-button>
+    <MkTooltip v-if="shareable" content="分享">
+      <el-button text :disabled="!canShare" @click="emit('share')">
+        <MkIcon name="icon_share_outlined" :size="18" class="text-N900!" />
+      </el-button>
+    </MkTooltip>
     <slot />
   </header>
 </template>
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 59f8aebc668..ca97dd89485 100644
--- a/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue
+++ b/ui/src/conversation-panel/left-sidebar/conversation-list/index.vue
@@ -21,16 +21,20 @@ const conversationTime = (conversation: Conversation) => relativeTimeFormat(conv
         <h4 class="truncate" :title="appInfo?.name || 'AI 助手'">{{ appInfo?.name || 'AI 助手' }}</h4>
       </div>
       <!-- 收起左侧 -->
-      <el-button text @click="toggleLeftSide()" class="-mr-1">
-        <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
-      </el-button>
+      <MkTooltip content="收起侧边栏">
+        <el-button text @click="toggleLeftSide()" class="-mr-1">
+          <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
+        </el-button>
+      </MkTooltip>
     </div>
 
     <!-- 新建对话 -->
-    <MkListItem @click="newConversation()">
-      <MkIcon name="icon_new-chat_outlined" :size="18" class="mr-2" />
-      <span>新建对话</span>
-    </MkListItem>
+    <MkTooltip content="新建对话">
+      <MkListItem @click="newConversation()">
+        <MkIcon name="icon_new-chat_outlined" :size="18" class="mr-2" />
+        <span>新建对话</span>
+      </MkListItem>
+    </MkTooltip>
     <div class="flex-between pl-2 mt-4">
       <h6 class="text-N600">历史对话</h6>
 
diff --git a/ui/src/conversation-panel/left-sidebar/portal-conversation-list/index.vue b/ui/src/conversation-panel/left-sidebar/portal-conversation-list/index.vue
index f2965282f8a..10f96f6cdad 100644
--- a/ui/src/conversation-panel/left-sidebar/portal-conversation-list/index.vue
+++ b/ui/src/conversation-panel/left-sidebar/portal-conversation-list/index.vue
@@ -54,9 +54,11 @@ const handleDeleteConversation = (group: PortalApplicationGroup, conversation: C
         <h4 class="truncate">智能体门户</h4>
       </div>
       <!-- 收起左侧 -->
-      <el-button text @click="toggleLeftSide()">
-        <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
-      </el-button>
+      <MkTooltip content="收起侧边栏">
+        <el-button text @click="toggleLeftSide()">
+          <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
+        </el-button>
+      </MkTooltip>
     </div>
 
     <!-- 全部智能体 -->
@@ -65,10 +67,12 @@ const handleDeleteConversation = (group: PortalApplicationGroup, conversation: C
       <span>全部智能体</span>
     </MkListItem>
     <!-- 新建对话 -->
-    <MkListItem @click="portalList.newConversation()">
-      <MkIcon name="icon_new-chat_outlined" :size="18" class="mr-2" />
-      <span>新建对话</span>
-    </MkListItem>
+    <MkTooltip content="新建对话">
+      <MkListItem @click="portalList.newConversation()">
+        <MkIcon name="icon_new-chat_outlined" :size="18" class="mr-2" />
+        <span>新建对话</span>
+      </MkListItem>
+    </MkTooltip>
     <div class="flex-between pl-2 mt-4">
       <h6 class="text-N600 font-medium">历史对话</h6>
 
diff --git a/ui/src/conversation-panel/main/portal-application-panel/index.vue b/ui/src/conversation-panel/main/portal-application-panel/index.vue
index 4f7dccff56d..028b50a8597 100644
--- a/ui/src/conversation-panel/main/portal-application-panel/index.vue
+++ b/ui/src/conversation-panel/main/portal-application-panel/index.vue
@@ -26,13 +26,17 @@ onMounted(() => {
       <!-- 左侧收起时才在顶部显示:展开左侧 + 新建对话(展开时它们在侧栏内) -->
       <template v-if="!leftSideOpen">
         <!-- 展开左侧 -->
-        <el-button text @click="toggleLeftSide()">
-          <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
-        </el-button>
+        <MkTooltip content="展开侧边栏">
+          <el-button text @click="toggleLeftSide()">
+            <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
+          </el-button>
+        </MkTooltip>
         <!-- 新建对话 -->
-        <el-button text class="ml-0!" @click="newConversation()">
-          <MkIcon name="icon_new-chat_outlined" :size="18" class="text-N900!" />
-        </el-button>
+        <MkTooltip content="新建对话">
+          <el-button text class="ml-0!" @click="newConversation()">
+            <MkIcon name="icon_new-chat_outlined" :size="18" class="text-N900!" />
+          </el-button>
+        </MkTooltip>
         <el-divider direction="vertical" />
       </template>
       <h4 class="min-w-0 flex-1 truncate">全部智能体</h4>
diff --git a/ui/src/conversation-panel/main/share-panel/index.vue b/ui/src/conversation-panel/main/share-panel/index.vue
index 2ca2f8ceaaa..6056662229b 100644
--- a/ui/src/conversation-panel/main/share-panel/index.vue
+++ b/ui/src/conversation-panel/main/share-panel/index.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import ContentList from '../../components/content-list/index.vue'
 import ReverseInfiniteScroll from '../../core/reverse-infinite-scroll/index.vue'
+import { useConversationListStore } from '../../left-sidebar/conversation-list/index'
 import { useMessageListStore } from '../../components/message-list/index'
 import { useSharePanelStore } from './index'
 import type { ChatMessage } from '../../core/types'
@@ -17,6 +18,7 @@ interface ShareRound {
 
 const { messages, loading, hasMore, loadMore } = useMessageListStore()
 const share = useSharePanelStore()
+const list = useConversationListStore()
 
 const shareRounds = computed<ShareRound[]>(() => {
   const rounds: ShareRound[] = []
@@ -48,51 +50,59 @@ const handleShare = () => {
 <template>
   <!-- 分享主面板:勾选要分享的对话轮次 -->
   <main class="mk-conversation-main">
-    <header class="flex-align-center h-11 shrink-0 gap-3 border-b border-N300 px-3">
-      <!-- 全选当前已加载的对话 -->
-      <el-checkbox :model-value="isAllSelected" :indeterminate="isIndeterminate" :disabled="!shareRounds.length" @change="handleSelectAll">
-        全选
-      </el-checkbox>
-      <span class="min-w-0 flex-1 truncate text-N600">已选择 {{ selectedCount }} 条对话</span>
-      <!-- 退出分享模式 -->
-      <el-button plain @click="share.close()">取消</el-button>
-      <!-- 分享已选对话 -->
-      <el-button type="primary" class="ml-0!" :disabled="!selectedCount" :loading="share.sharing.value" @click="handleShare">分享</el-button>
-    </header>
+    <header class="mk-conversation-chat-header flex-align-center gap-3 p-4">
+      <!-- 左侧收起时才在顶部显示:展开左侧 + 新建对话(展开时它们在侧栏内) -->
+      <template v-if="!list.leftSideOpen.value">
+        <!-- 展开左侧 -->
+        <MkTooltip content="展开侧边栏">
+          <el-button text @click="list.toggleLeftSide()" class="-ml-1">
+            <MkIcon name="icon_sidebar_outlined" :size="18" class="text-N900!" />
+          </el-button>
+        </MkTooltip>
+      </template>
 
-    <ReverseInfiniteScroll class="p-4" :loading="loading" :has-more="hasMore" :count="shareRounds.length" :load-more="loadMore">
-      <!-- 点击整轮对话切换勾选 -->
-      <div
-        v-for="round in shareRounds"
-        :key="round.key"
-        class="share-round flex cursor-pointer gap-3 rounded-lg p-2"
-        :class="{ selected: share.isSelected(round.key) }"
-        @click="share.toggleRound(round.key)"
-      >
-        <el-checkbox :model-value="share.isSelected(round.key)" class="pointer-events-none shrink-0" />
-        <!-- 分享模式下内容只读，不响应内部交互 -->
-        <div class="pointer-events-none min-w-0 flex-1 select-none">
-          <ContentList v-for="message in round.messages" :key="message.id" :content-list="message.content" />
-        </div>
+      <div class="flex-1 flex-align-center gap-2">
+        <h4 class="truncate">{{ list.currentConversation.value?.abstract || '新建对话' }}</h4>
       </div>
+    </header>
+    <ReverseInfiniteScroll
+      content-class="mk-conversation-content p-4"
+      :loading="loading"
+      :has-more="hasMore"
+      :count="shareRounds.length"
+      :load-more="loadMore"
+    >
+      <template v-for="round in shareRounds" :key="round.key">
+        <!-- 点击整轮对话切换勾选 -->
+        <div class="group flex cursor-pointer gap-3" @click="share.toggleRound(round.key)">
+          <el-checkbox :model-value="share.isSelected(round.key)" class="pointer-events-none shrink-0" />
+          <!-- 分享模式下内容只读，不响应内部交互 -->
+          <div
+            class="px-4 py-3 rounder-xl pointer-events-none min-w-0 flex-1 select-none group-hover:bg-N900/8"
+            :class="{ 'bg-N900/8': share.isSelected(round.key) }"
+          >
+            <ContentList v-for="message in round.messages" :key="message.id" :content-list="message.content" />
+          </div>
+        </div>
+      </template>
 
       <template #empty>
         <MkEmpty description="暂无可分享的对话" class="mt-20" />
       </template>
     </ReverseInfiniteScroll>
+    <el-divider />
+    <footer class="mk-conversation-content p-4 flex-between">
+      <div class="flex-align-center gap-3">
+        <!-- 全选当前已加载的对话 -->
+        <el-checkbox :model-value="isAllSelected" :indeterminate="isIndeterminate" :disabled="!shareRounds.length" @change="handleSelectAll" />
+        <span class="text-N600">已选 {{ selectedCount }}/{{ selectedCount }}</span>
+      </div>
+      <div>
+        <!-- 退出分享模式 -->
+        <el-button plain @click="share.close()">取消</el-button>
+        <!-- 分享已选对话 -->
+        <el-button type="primary" :disabled="!selectedCount" :loading="share.sharing.value" @click="handleShare">分享</el-button>
+      </div>
+    </footer>
   </main>
 </template>
-
-<style scoped lang="scss">
-.share-round {
-  transition: background-color 150ms ease;
-
-  &:hover {
-    background: var(--mk-N100);
-  }
-
-  &.selected {
-    background: color-mix(in srgb, var(--mk-primary) 6%, transparent);
-  }
-}
-</style>
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 58f7c564686..67513dd6157 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -268,10 +268,16 @@ h6 {
   border-radius: 6px;
   padding: calc(var(--spacing) * 3);
   &,
+  &-lg,
   &-sm {
     background-color: white !important;
   }
 
+  &-lg {
+    border-radius: 12px;
+    padding: calc(var(--spacing) * 4);
+  }
+
   &-sm {
     border-radius: 12px;
     padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);