2b315f19ab
- 新增 TaskTool 组件用于显示任务分配工具结果 - 为 BaseToolCall 添加通用 header slot 支持自定义标题 - 改进 TodoListTool 和 WebSearchTool 的显示样式 - 调整浮动侧边栏的 z-index 防止遮挡 - 优化 AgentChatComponent 的 header-right slot 支持响应式隐藏文本
1017 lines
22 KiB
Vue
1017 lines
22 KiB
Vue
<template>
|
||
<div class="agent-view">
|
||
<div class="agent-view-body">
|
||
<!-- 智能体选择弹窗 -->
|
||
<a-modal
|
||
v-model:open="chatUIStore.agentModalOpen"
|
||
title="选择智能体"
|
||
:width="800"
|
||
:footer="null"
|
||
:maskClosable="true"
|
||
class="agent-modal"
|
||
>
|
||
<div class="agent-modal-content">
|
||
<div class="agents-grid">
|
||
<div
|
||
v-for="agent in agents"
|
||
:key="agent.id"
|
||
class="agent-card"
|
||
:class="{ 'selected': agent.id === selectedAgentId }"
|
||
@click="selectAgentFromModal(agent.id)"
|
||
>
|
||
<div class="agent-card-header">
|
||
<div class="agent-card-title">
|
||
<span class="agent-card-name">{{ agent.name || 'Unknown' }}</span>
|
||
</div>
|
||
<StarFilled v-if="agent.id === defaultAgentId" class="default-icon" />
|
||
<StarOutlined v-else @click.prevent="setAsDefaultAgent(agent.id)" class="default-icon" />
|
||
</div>
|
||
|
||
<div class="agent-card-description">
|
||
{{ agent.description || '' }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-modal>
|
||
|
||
<!-- 中间内容区域 -->
|
||
<div class="content">
|
||
<AgentChatComponent
|
||
ref="chatComponentRef"
|
||
:single-mode="false"
|
||
@open-config="toggleConf"
|
||
@open-agent-modal="openAgentModal"
|
||
@close-config-sidebar="() => chatUIStore.isConfigSidebarOpen = false"
|
||
>
|
||
<template #header-right="{ isMediumContainer }">
|
||
<div type="button" class="agent-nav-btn" @click="toggleConf">
|
||
<Settings2 size="18" class="nav-btn-icon"/>
|
||
<span class="text" :class="{ 'hide-text': isMediumContainer }">配置</span>
|
||
</div>
|
||
<div v-if="selectedAgentId" ref="moreButtonRef" type="button" class="agent-nav-btn" @click="toggleMoreMenu">
|
||
<Ellipsis size="18" class="nav-btn-icon"/>
|
||
</div>
|
||
</template>
|
||
</AgentChatComponent>
|
||
</div>
|
||
|
||
<!-- 配置侧边栏 -->
|
||
<AgentConfigSidebar
|
||
:isOpen="chatUIStore.isConfigSidebarOpen"
|
||
@close="() => chatUIStore.isConfigSidebarOpen = false"
|
||
/>
|
||
|
||
<!-- 反馈模态框 -->
|
||
<FeedbackModalComponent ref="feedbackModal" :agent-id="selectedAgentId" />
|
||
|
||
<!-- 自定义更多菜单 -->
|
||
<Teleport to="body">
|
||
<Transition name="menu-fade">
|
||
<div
|
||
v-if="chatUIStore.moreMenuOpen"
|
||
ref="moreMenuRef"
|
||
class="more-popup-menu"
|
||
:style="{
|
||
left: chatUIStore.moreMenuPosition.x + 'px',
|
||
top: chatUIStore.moreMenuPosition.y + 'px'
|
||
}"
|
||
>
|
||
<div class="menu-item" @click="handleShareChat">
|
||
<ShareAltOutlined class="menu-icon" />
|
||
<span class="menu-text">分享对话</span>
|
||
</div>
|
||
<div class="menu-divider"></div>
|
||
<div class="menu-item" @click="handleFeedback">
|
||
<MessageOutlined class="menu-icon" />
|
||
<span class="menu-text">查看反馈</span>
|
||
</div>
|
||
<div class="menu-divider"></div>
|
||
<div class="menu-item" @click="handlePreview">
|
||
<EyeOutlined class="menu-icon" />
|
||
<span class="menu-text">预览页面</span>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</Teleport>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch } from 'vue';
|
||
import {
|
||
StarOutlined,
|
||
StarFilled,
|
||
MessageOutlined,
|
||
ShareAltOutlined,
|
||
EyeOutlined,
|
||
} from '@ant-design/icons-vue';
|
||
import { message } from 'ant-design-vue';
|
||
import { Settings2, Ellipsis } from 'lucide-vue-next';
|
||
import AgentChatComponent from '@/components/AgentChatComponent.vue';
|
||
import AgentConfigSidebar from '@/components/AgentConfigSidebar.vue';
|
||
import FeedbackModalComponent from '@/components/dashboard/FeedbackModalComponent.vue';
|
||
import { useUserStore } from '@/stores/user';
|
||
import { useAgentStore } from '@/stores/agent';
|
||
import { useChatUIStore } from '@/stores/chatUI';
|
||
import { ChatExporter } from '@/utils/chatExporter';
|
||
import { handleChatError } from '@/utils/errorHandler';
|
||
import { onClickOutside } from '@vueuse/core';
|
||
|
||
import { storeToRefs } from 'pinia';
|
||
|
||
// 组件引用
|
||
const feedbackModal = ref(null)
|
||
const chatComponentRef = ref(null)
|
||
|
||
// Stores
|
||
const userStore = useUserStore();
|
||
const agentStore = useAgentStore();
|
||
const chatUIStore = useChatUIStore();
|
||
|
||
// 从 agentStore 中获取响应式状态
|
||
const {
|
||
agents,
|
||
selectedAgentId,
|
||
defaultAgentId,
|
||
} = storeToRefs(agentStore);
|
||
|
||
// 设置为默认智能体
|
||
const setAsDefaultAgent = async (agentId) => {
|
||
if (!agentId || !userStore.isAdmin) return;
|
||
|
||
try {
|
||
await agentStore.setDefaultAgent(agentId);
|
||
message.success('已将当前智能体设为默认');
|
||
} catch (error) {
|
||
console.error('设置默认智能体错误:', error);
|
||
message.error(error.message || '设置默认智能体时发生错误');
|
||
}
|
||
};
|
||
|
||
|
||
|
||
|
||
|
||
// 这些方法现在由agentStore处理，无需在组件中定义
|
||
|
||
const loadAgentConfig = async () => {
|
||
try {
|
||
await agentStore.loadAgentConfig();
|
||
} catch (error) {
|
||
console.error('加载配置出错:', error);
|
||
message.error('加载配置失败');
|
||
}
|
||
};
|
||
|
||
|
||
// 选择智能体（使用store方法）
|
||
const selectAgent = (agentId) => {
|
||
agentStore.selectAgent(agentId);
|
||
// 加载该智能体的配置
|
||
loadAgentConfig();
|
||
};
|
||
|
||
// 打开智能体选择弹窗
|
||
const openAgentModal = () => {
|
||
chatUIStore.agentModalOpen = true;
|
||
};
|
||
|
||
// 从弹窗中选择智能体
|
||
const selectAgentFromModal = (agentId) => {
|
||
selectAgent(agentId);
|
||
chatUIStore.agentModalOpen = false;
|
||
};
|
||
|
||
|
||
const toggleConf = () => {
|
||
chatUIStore.isConfigSidebarOpen = !chatUIStore.isConfigSidebarOpen
|
||
}
|
||
|
||
// 更多菜单相关
|
||
const moreMenuRef = ref(null);
|
||
const moreButtonRef = ref(null);
|
||
|
||
const toggleMoreMenu = (event) => {
|
||
event.stopPropagation();
|
||
// 切换状态，而不是只打开
|
||
chatUIStore.moreMenuOpen = !chatUIStore.moreMenuOpen;
|
||
|
||
if (chatUIStore.moreMenuOpen) {
|
||
// 只在打开时计算位置
|
||
const rect = event.currentTarget.getBoundingClientRect();
|
||
chatUIStore.openMoreMenu(rect.right - 130, rect.bottom + 8);
|
||
}
|
||
};
|
||
|
||
const closeMoreMenu = () => {
|
||
chatUIStore.closeMoreMenu();
|
||
};
|
||
|
||
// 使用 VueUse 的 onClickOutside
|
||
onClickOutside(moreMenuRef, () => {
|
||
if (chatUIStore.moreMenuOpen) {
|
||
closeMoreMenu();
|
||
}
|
||
}, { ignore: [moreButtonRef] });
|
||
|
||
const handleShareChat = async () => {
|
||
closeMoreMenu();
|
||
|
||
try {
|
||
// 从聊天组件获取导出数据
|
||
const exportData = chatComponentRef.value?.getExportPayload?.();
|
||
|
||
console.log('[AgentView] Export data:', exportData);
|
||
|
||
if (!exportData) {
|
||
message.warning('当前没有可导出的对话内容');
|
||
return;
|
||
}
|
||
|
||
// 检查是否有实际的消息内容
|
||
const hasMessages = exportData.messages && exportData.messages.length > 0;
|
||
const hasOngoingMessages = exportData.onGoingMessages && exportData.onGoingMessages.length > 0;
|
||
|
||
if (!hasMessages && !hasOngoingMessages) {
|
||
console.warn('[AgentView] Export data has no messages:', {
|
||
messages: exportData.messages,
|
||
onGoingMessages: exportData.onGoingMessages
|
||
});
|
||
message.warning('当前对话暂无内容可导出，请先进行对话');
|
||
return;
|
||
}
|
||
|
||
const result = await ChatExporter.exportToHTML(exportData);
|
||
message.success(`对话已导出为HTML文件: ${result.filename}`);
|
||
} catch (error) {
|
||
console.error('[AgentView] Export error:', error);
|
||
if (error?.message?.includes('没有可导出的对话内容')) {
|
||
message.warning('当前对话暂无内容可导出，请先进行对话');
|
||
return;
|
||
}
|
||
handleChatError(error, 'export');
|
||
}
|
||
};
|
||
|
||
const handleFeedback = () => {
|
||
closeMoreMenu();
|
||
feedbackModal.value?.show();
|
||
};
|
||
|
||
const handlePreview = () => {
|
||
closeMoreMenu();
|
||
if (selectedAgentId.value) {
|
||
window.open(`/agent/${selectedAgentId.value}`, '_blank');
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.agent-view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.agent-view-body {
|
||
--gap-radius: 6px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
width: 100%;
|
||
flex: 1;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.no-agent-selected {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: var(--bg-content);
|
||
}
|
||
|
||
.no-agent-content {
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
|
||
svg {
|
||
margin-bottom: 16px;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
h3 {
|
||
margin-bottom: 16px;
|
||
color: var(--text-primary);
|
||
}
|
||
}
|
||
|
||
// .content {
|
||
// border-radius: var(--gap-radius);
|
||
// border: 1px solid var(--gray-300);
|
||
// }
|
||
}
|
||
|
||
.content {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
// 配置弹窗内容样式
|
||
.conf-content {
|
||
max-height: 70vh;
|
||
overflow-y: auto;
|
||
|
||
.agent-info {
|
||
padding: 0;
|
||
width: 100%;
|
||
overflow-y: visible;
|
||
max-height: none;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.agent-model {
|
||
width: 100%;
|
||
}
|
||
|
||
.config-modal-content {
|
||
user-select: text;
|
||
|
||
div[role="alert"] {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.description {
|
||
font-size: 12px;
|
||
color: var(--gray-700);
|
||
}
|
||
|
||
.form-actions {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
gap: 10px;
|
||
|
||
.form-actions-left,
|
||
.form-actions-right {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 添加新按钮的样式
|
||
.agent-action-buttons {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.action-button {
|
||
background-color: var(--gray-0);
|
||
border: 1px solid var(--main-20);
|
||
text-align: left;
|
||
height: auto;
|
||
padding: 8px 12px;
|
||
|
||
&:hover {
|
||
background-color: var(--main-20);
|
||
}
|
||
|
||
&.primary-action {
|
||
color: var(--main-color);
|
||
border-color: var(--main-color);
|
||
|
||
&:disabled {
|
||
color: var(--main-color);
|
||
background-color: var(--main-20);
|
||
cursor: not-allowed;
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.anticon {
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
.agent-option {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
.agent-option-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
|
||
p {
|
||
margin: 0;
|
||
}
|
||
|
||
.agent-option-description {
|
||
font-size: 12px;
|
||
color: var(--gray-700);
|
||
word-break: break-word;
|
||
white-space: pre-wrap;
|
||
}
|
||
}
|
||
}
|
||
// 工具选择器样式（与项目风格一致）
|
||
.tools-selector {
|
||
.tools-summary {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
// margin-bottom: 8px;
|
||
padding: 8px 12px;
|
||
background: var(--gray-50);
|
||
border-radius: 8px;
|
||
border: 1px solid var(--gray-200);
|
||
font-size: 14px;
|
||
color: var(--gray-700);
|
||
transition: border-color 0.2s ease;
|
||
|
||
.tools-summary-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.tools-count {
|
||
color: var(--gray-900);
|
||
}
|
||
}
|
||
|
||
.select-tools-btn {
|
||
background: var(--main-color);
|
||
border: none;
|
||
color: var(--gray-0);
|
||
border-radius: 6px;
|
||
padding: 4px 12px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
height: 28px;
|
||
transition: all 0.2s ease;
|
||
|
||
&:hover {
|
||
background: var(--main-color);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
&:active {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
}
|
||
|
||
.selected-tools-preview {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
padding: 8px 0;
|
||
background: none;
|
||
border: none;
|
||
min-height: 32px;
|
||
:deep(.ant-tag) {
|
||
margin: 0;
|
||
padding: 4px 10px;
|
||
border-radius: 6px;
|
||
background: var(--gray-100);
|
||
border: 1px solid var(--gray-300);
|
||
color: var(--gray-900);
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
.anticon-close {
|
||
color: var(--gray-600);
|
||
margin-left: 4px;
|
||
&:hover {
|
||
color: var(--gray-900);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 工具选择弹窗样式（与项目风格一致）
|
||
.tools-modal {
|
||
:deep(.ant-modal-content) {
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||
overflow: hidden;
|
||
}
|
||
:deep(.ant-modal-header) {
|
||
background: var(--gray-0);
|
||
border-bottom: 1px solid var(--gray-200);
|
||
padding: 16px 20px;
|
||
.ant-modal-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--gray-900);
|
||
}
|
||
}
|
||
:deep(.ant-modal-body) {
|
||
padding: 20px;
|
||
background: var(--gray-0);
|
||
}
|
||
.tools-modal-content {
|
||
.tools-search {
|
||
margin-bottom: 16px;
|
||
:deep(.ant-input) {
|
||
border-radius: 8px;
|
||
border: 1px solid var(--gray-300);
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
&:focus {
|
||
border-color: var(--main-color);
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
}
|
||
.tools-list {
|
||
max-height: 350px;
|
||
overflow-y: auto;
|
||
border: 1px solid var(--gray-200);
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
background: var(--gray-0);
|
||
.tool-item {
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid var(--gray-100);
|
||
cursor: pointer;
|
||
transition: background 0.2s, border 0.2s;
|
||
border-left: 3px solid transparent;
|
||
&:last-child { border-bottom: none; }
|
||
&:hover {
|
||
background: var(--gray-50);
|
||
}
|
||
&.selected {
|
||
background: var(--main-10);
|
||
border-left: 3px solid var(--main-color);
|
||
}
|
||
.tool-content {
|
||
.tool-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 6px;
|
||
.tool-name {
|
||
font-weight: 500;
|
||
color: var(--gray-900);
|
||
font-size: 14px;
|
||
}
|
||
.tool-indicator { display: none; }
|
||
}
|
||
.tool-description {
|
||
font-size: 13px;
|
||
color: var(--gray-700);
|
||
margin-bottom: 6px;
|
||
line-height: 1.5;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
.tools-modal-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0 0 0;
|
||
border-top: 1px solid var(--gray-200);
|
||
.selected-count {
|
||
font-size: 13px;
|
||
color: var(--gray-700);
|
||
background: none;
|
||
padding: 0;
|
||
border: none;
|
||
}
|
||
.modal-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
:deep(.ant-btn) {
|
||
border-radius: 8px;
|
||
font-weight: 500;
|
||
padding: 6px 18px;
|
||
height: 36px;
|
||
font-size: 14px;
|
||
&.ant-btn-default {
|
||
border: 1px solid var(--gray-300);
|
||
color: var(--gray-900);
|
||
background: var(--gray-0);
|
||
&:hover {
|
||
border-color: var(--main-color);
|
||
color: var(--main-color);
|
||
background: var(--main-10);
|
||
}
|
||
}
|
||
&.ant-btn-primary {
|
||
background: var(--main-color);
|
||
border: none;
|
||
color: var(--gray-0);
|
||
&:hover {
|
||
background: var(--main-color);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 多选卡片样式
|
||
.multi-select-cards {
|
||
.multi-select-label {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
font-size: 12px;
|
||
color: var(--gray-600);
|
||
height: 24px;
|
||
}
|
||
|
||
.options-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||
gap: 8px;
|
||
}
|
||
|
||
.option-card {
|
||
border: 1px solid var(--gray-300);
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
background: var(--gray-0);
|
||
user-select: none;
|
||
|
||
&:hover {
|
||
border-color: var(--main-color);
|
||
}
|
||
|
||
&.selected {
|
||
border-color: var(--main-color);
|
||
background: var(--main-10);
|
||
|
||
.option-indicator {
|
||
color: var(--main-color);
|
||
}
|
||
|
||
.option-text {
|
||
color: var(--main-color);
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
&.unselected {
|
||
.option-indicator {
|
||
color: var(--gray-400);
|
||
}
|
||
|
||
.option-text {
|
||
color: var(--gray-700);
|
||
}
|
||
}
|
||
|
||
.option-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.option-text {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.option-indicator {
|
||
flex-shrink: 0;
|
||
font-size: 16px;
|
||
transition: color 0.2s ease;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式适配
|
||
@media (max-width: 768px) {
|
||
.multi-select-cards {
|
||
.options-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.conf-content {
|
||
max-height: 60vh;
|
||
}
|
||
}
|
||
|
||
|
||
// 智能体选择器样式
|
||
.agent-selector {
|
||
border: 1px solid var(--gray-300);
|
||
border-radius: 8px;
|
||
padding: 8px 12px;
|
||
background: var(--gray-0);
|
||
transition: border-color 0.2s ease;
|
||
|
||
&:hover {
|
||
border-color: var(--main-color);
|
||
}
|
||
|
||
.selected-agent-display {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.agent-name {
|
||
font-size: 14px;
|
||
color: var(--gray-900);
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 智能体选择弹窗样式
|
||
.agent-modal {
|
||
:deep(.ant-modal-content) {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
:deep(.ant-modal-header) {
|
||
background: var(--gray-0);
|
||
border-bottom: 1px solid var(--gray-200);
|
||
padding: 16px 20px;
|
||
|
||
.ant-modal-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--gray-900);
|
||
}
|
||
}
|
||
|
||
:deep(.ant-modal-body) {
|
||
padding: 20px;
|
||
background: var(--gray-0);
|
||
}
|
||
|
||
.agent-modal-content {
|
||
.agents-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 12px;
|
||
max-height: 500px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.agent-card {
|
||
border: 1px solid var(--gray-200);
|
||
border-radius: 8px;
|
||
padding: 16px;
|
||
cursor: pointer;
|
||
transition: border-color 0.2s ease;
|
||
background: var(--gray-0);
|
||
|
||
&:hover {
|
||
border-color: var(--main-color);
|
||
}
|
||
|
||
.agent-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 12px;
|
||
|
||
.agent-card-title {
|
||
flex: 1;
|
||
|
||
.agent-card-name {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--gray-900);
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
.default-icon {
|
||
color: var(--color-warning-500);
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
margin-left: 8px;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
color: var(--color-warning-600);
|
||
}
|
||
}
|
||
}
|
||
|
||
.agent-card-description {
|
||
font-size: 14px;
|
||
color: var(--gray-700);
|
||
line-height: 1.5;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
|
||
&.selected {
|
||
border-color: var(--main-color);
|
||
background: var(--main-20);
|
||
// outline: 2px solid var(--main-color);
|
||
|
||
.agent-card-header .agent-card-title .agent-card-name {
|
||
color: var(--main-color);
|
||
}
|
||
|
||
.agent-card-description {
|
||
color: var(--gray-900);
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式适配智能体弹窗
|
||
@media (max-width: 768px) {
|
||
.agent-modal {
|
||
.agent-modal-content {
|
||
.agents-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 自定义更多菜单样式
|
||
.more-popup-menu {
|
||
position: fixed;
|
||
min-width: 130px;
|
||
background: var(--gray-0);
|
||
border-radius: 10px;
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
|
||
border: 1px solid var(--gray-100);
|
||
padding: 6px;
|
||
z-index: 9999;
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 6px 14px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||
font-size: 14px;
|
||
color: var(--gray-900);
|
||
position: relative;
|
||
user-select: none;
|
||
|
||
.menu-icon {
|
||
font-size: 16px;
|
||
color: var(--gray-600);
|
||
transition: color 0.15s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.menu-text {
|
||
font-weight: 400;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
&:hover {
|
||
background: var(--gray-50);
|
||
// color: var(--main-700);
|
||
|
||
// .menu-icon {
|
||
// color: var(--main-600);
|
||
// }
|
||
}
|
||
|
||
&:active {
|
||
background: var(--gray-100);
|
||
}
|
||
}
|
||
|
||
.menu-divider {
|
||
height: 1px;
|
||
background: var(--gray-100);
|
||
margin: 4px 8px;
|
||
}
|
||
}
|
||
|
||
|
||
// 菜单淡入淡出动画
|
||
.menu-fade-enter-active {
|
||
animation: menuSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
|
||
}
|
||
|
||
.menu-fade-leave-active {
|
||
animation: menuSlideOut 0.15s cubic-bezier(0.4, 0, 1, 1);
|
||
}
|
||
|
||
@keyframes menuSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-8px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes menuSlideOut {
|
||
from {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
to {
|
||
opacity: 0;
|
||
transform: translateY(-4px);
|
||
}
|
||
}
|
||
|
||
// 响应式优化
|
||
@media (max-width: 520px) {
|
||
.more-popup-menu {
|
||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
|
||
<style lang="less">
|
||
.toggle-conf {
|
||
cursor: pointer;
|
||
|
||
&.nav-btn {
|
||
height: 2.5rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 8px;
|
||
color: var(--gray-900);
|
||
cursor: pointer;
|
||
font-size: 15px;
|
||
width: auto;
|
||
padding: 0.5rem 1rem;
|
||
transition: background-color 0.3s;
|
||
overflow: hidden;
|
||
|
||
.text {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: var(--main-20);
|
||
}
|
||
|
||
.nav-btn-icon {
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// 针对 Ant Design Select 组件的深度样式修复
|
||
:deep(.ant-select-item-option-content) {
|
||
.agent-option-name {
|
||
color: var(--main-color);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.hide-text {
|
||
display: none;
|
||
}
|
||
</style>
|