Skip to content

fix: share chat #7570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wangdan-fit2cloud merged 1 commit into from
Oct 30, 2026
Merged

fix: share chat #7570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 16 additions & 10 deletions ui/src/conversation-panel/components/header/chat/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 15 additions & 9 deletions ui/src/conversation-panel/components/header/portal/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down
18 changes: 11 additions & 7 deletions ui/src/conversation-panel/left-sidebar/conversation-list/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
18 changes: 11 additions & 7 deletions ui/src/conversation-panel/left-sidebar/portal-conversation-list/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

<!-- 全部智能体 -->
Expand All @@ -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>

Expand Down
16 changes: 10 additions & 6 deletions ui/src/conversation-panel/main/portal-application-panel/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
88 changes: 49 additions & 39 deletions ui/src/conversation-panel/main/share-panel/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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[] = []
Expand Down Expand Up @@ -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>
6 changes: 6 additions & 0 deletions ui/src/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading