55f2e020b5
* Add dark/light theme toggle feature * update: refine dark/light theme and related components * 调整语义化主题变量，优化暗/亮模式切换效果 * Revert "调整语义化主题变量，优化暗/亮模式切换效果" This reverts commit 85d9373297686fdbacb252a880b2847d20a39641. * 深色模式适配：减少 !important，迁移 CSS 变量，优化布局 * style: 替换硬编码颜色值为CSS变量以支持主题切换 将多处硬编码的颜色值（如#fff、#f0f0f0等）替换为CSS变量（如--gray-0、--gray-150等），统一管理颜色样式，便于主题切换和样式维护。主要修改包括背景色、边框色、文字色等视觉元素，同时移除不再需要的深色模式适配代码。 * style: 使用CSS变量替换硬编码颜色值 * refactor(theme): 重构主题系统，统一使用CSS变量并优化暗色模式实现 - 移除冗余的theme.js配置文件，将主题配置集中到theme store - 使用ant-design-vue的darkAlgorithm实现暗色模式 - 在多个组件中替换硬编码颜色值为CSS变量 - 优化用户信息组件，整合文档中心和主题切换功能 - 更新基础CSS样式，完善颜色系统和滚动条样式 * reset: 恢复被覆盖的修改（96d257a7ace38c94e2b113d56472d211d1141087） * feat(theme): 实现深色主题支持并重构样式系统 重构颜色变量系统，添加深色主题支持 移除硬编码颜色值，统一使用CSS变量 优化图表组件以响应主题切换 清理无用样式代码，提升可维护性 * docs: 更新开发规范文档 * style: 调整边框和背景颜色样式 --------- Co-authored-by: Wenjie Zhang <xerrors@163.com>
132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<template>
|
|
<div class="agent-single-view">
|
|
<!-- 智能体聊天界面 -->
|
|
<AgentChatComponent ref="chatComponentRef" :agent-id="agentId" :single-mode="true">
|
|
<template #header-right>
|
|
<div type="button" class="agent-nav-btn" @click="handleShareChat">
|
|
<Share2 size="18" class="nav-btn-icon" />
|
|
<span class="text">分享</span>
|
|
</div>
|
|
<UserInfoComponent />
|
|
</template>
|
|
</AgentChatComponent>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { message } from 'ant-design-vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { Share2 } from 'lucide-vue-next';
|
|
import AgentChatComponent from '@/components/AgentChatComponent.vue';
|
|
import UserInfoComponent from '@/components/UserInfoComponent.vue';
|
|
import { ChatExporter } from '@/utils/chatExporter';
|
|
import { handleChatError } from '@/utils/errorHandler';
|
|
|
|
const route = useRoute();
|
|
const agentId = computed(() => route.params.agent_id);
|
|
const chatComponentRef = ref(null);
|
|
|
|
const handleShareChat = async () => {
|
|
try {
|
|
const exportData = chatComponentRef.value?.getExportPayload?.();
|
|
|
|
if (!exportData) {
|
|
message.warning('当前没有可导出的对话内容');
|
|
return;
|
|
}
|
|
|
|
const hasMessages = Boolean(exportData.messages?.length);
|
|
const hasOngoingMessages = Boolean(exportData.onGoingMessages?.length);
|
|
|
|
if (!hasMessages && !hasOngoingMessages) {
|
|
message.warning('当前对话暂无内容可导出，请先进行对话');
|
|
return;
|
|
}
|
|
|
|
const result = await ChatExporter.exportToHTML(exportData);
|
|
message.success(`对话已导出为HTML文件: ${result.filename}`);
|
|
} catch (error) {
|
|
if (error?.message?.includes('没有可导出的对话内容')) {
|
|
message.warning('当前对话暂无内容可导出，请先进行对话');
|
|
return;
|
|
}
|
|
handleChatError(error, 'export');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.agent-single-view {
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.user-info-wrapper {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
// 侧边栏样式
|
|
.sidebar {
|
|
// position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 240px;
|
|
background-color: var(--gray-50);
|
|
transition: all 0.3s ease;
|
|
z-index: 20;
|
|
display: flex;
|
|
|
|
&.collapsed {
|
|
width: 60px;
|
|
}
|
|
|
|
.sidebar-content {
|
|
flex: 1;
|
|
padding: 20px 10px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.user-icon {
|
|
cursor: pointer;
|
|
margin-bottom: 20px;
|
|
padding-left: 4px 8px;
|
|
|
|
img {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
|
|
.toggle-button {
|
|
position: absolute;
|
|
right: -15px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: var(--gray-0);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|