renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(agent): 优化客服和工作流界面布局和样式

Browse Source 
- 调整了客服和工作流界面的栅格布局，优化了不同屏幕大小下的显示效果- 改进了历史聊天记录的展示方式，增加了 tooltip 和自适应布局
- 统一了聊天窗口的样式，增加了反馈功能- 优化了工作流内容区域的样式，使其更加适应长内容展示
This commit is contained in:
林志军
2025-07-29 16:00:24 +08:00
parent 7d66dfd076
commit be3843585a
10 changed files with 94 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/agent/chat/components/HistoryChat.vue
View File

@ -7,7 +7,9 @@
</div>
<div class="info-section">
<div class="title-group">
<div class="title">{{ cozeInfo.name }}</div>
<a-tooltip :content="cozeInfo.name">
<div class="title">{{ cozeInfo.name }}</div>
</a-tooltip>
<div class="tag">
<div>
<img class="status-icon" :src="chatbotIcon" />
@ -34,7 +36,6 @@
<script lang="ts" setup>
import { defineProps } from 'vue';
import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
import chatbotIcon from '@/assets/svg/chatbot.svg';
const props = defineProps({
@ -44,26 +45,6 @@ const props = defineProps({
},
});
const delMessage = async (chatId, conversationId) => {
const { code, data } = await delAgentMessage({ chat_id: chatId, conversation_id: conversationId });
if (code === 200) {
console.log(data, 'data');
}
};
const conversations = ref([]);
const getHistoryChatData = async (botId) => {
const { code, data } = await getHistoryChat({ bot_id: botId });
if (code === 200) {
conversations.value = data.list;
}
};
const truncateText = (text: string, maxLength = 30) => {
if (text.length <= maxLength) return text;
return text.slice(0, maxLength) + '...';
};
onMounted(() => {});
</script>

36
src/views/agent/chat/components/history.scss
View File

@ -37,7 +37,7 @@
.info-section {
align-self: stretch;
padding: 10px 0 0 10px;
padding: 10px 10px 0 12px;
display: flex;
justify-content: space-between;
align-items: flex-start;
@ -55,6 +55,19 @@
font-weight: 400;
line-height: 26px;
padding: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 150px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.title {
font-size: 16px;
padding: 8px;
max-width: 100px;
}
}
.tag {
@ -92,16 +105,19 @@
}
}
}
.usage-info {
padding: 12px;
margin-right: 12px;
display: flex;
align-items: center;
gap: 8px;
.count {
color: var(--Text-2, #3C4043);
font-size: 16px;
font-family: 'Alibaba PuHuiTi', sans-serif;
font-weight: 400;
line-height: 24px;
white-space: nowrap;
}
.label {
@ -110,8 +126,21 @@
font-family: 'Alibaba PuHuiTi', sans-serif;
font-weight: 400;
line-height: 20px;
white-space: nowrap;
}
@media (max-width: 768px) {
flex-direction: column;
align-items: flex-start;
gap: 4px;
.count {
font-size: 14px;
}
.label {
font-size: 10px;
}
}
}
}
.description-section {
@ -135,7 +164,6 @@
}
.history-section {
align-self: stretch;
flex: 1 1 0;

66
src/views/agent/chat/index.vue
View File

@ -2,36 +2,38 @@
<div class="chat-wrap">
<span @click="goChatIndex"> <icon-left /> 返回空间 </span>
<div class="chat-contain">
<!-- 使用 arco-design 栅格布局 -->
<a-row :gutter="24" class="chat-grid">
<!-- 左侧 HistoryChat -->
<a-col :xs="isCollapsed ? 0 : 24"
:sm="isCollapsed ? 0 : 12"
:md="isCollapsed ? 0 : 8"
:lg="isCollapsed ? 0 : 6"
:xl="isCollapsed ? 0 : 7"
:xxl="isCollapsed ? 0 : 4"
class="history-chat-col">
<a-col
:xs="isCollapsed ? 0 : 3"
:sm="isCollapsed ? 0 : 4"
:md="isCollapsed ? 0 : 5"
:lg="isCollapsed ? 0 : 6"
:xl="isCollapsed ? 0 : 7"
:xxl="isCollapsed ? 0 : 7"
class="history-chat-col"
>
<HistoryChat v-if="cozeInfo?.bot_id && !isCollapsed" :cozeInfo="cozeInfo" />
</a-col>
<!-- 右侧聊天内容 -->
<a-col :xs="24"
:sm="isCollapsed ? 24 : 12"
:md="isCollapsed ? 24 : 16"
:lg="isCollapsed ? 24 : 18"
:xl="isCollapsed ? 24 : 16"
:xxl="isCollapsed ? 24 : 16"
class="chat-content-col">
<a-col
:xs="24"
:sm="isCollapsed ? 24 : 13"
:md="isCollapsed ? 24 : 14"
:lg="isCollapsed ? 24 : 15"
:xl="isCollapsed ? 24 : 16"
:xxl="isCollapsed ? 24 : 16"
class="chat-content-col"
>
<a-card :bordered="false">
<div class="chat-content-col" style="min-height: fit-content;">
<div class="chat-content-col" style="min-height: fit-content">
<div class="toggle-btn" @click="toggleCollapse">
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
</a-tooltip>
</div>
<div id="coze-chat-container" ></div>
<div id="coze-chat-container"></div>
</div>
</a-card>
</a-col>
@ -107,7 +109,7 @@ const cozeInfo = reactive({
let cozeWebSDK = null;
const initChat = async () => {
const { code, data } = await getChatAgent(query.id);
if (code != 200) {
if (code !== 200) {
return false;
}
@ -129,15 +131,31 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
ui: {
chatBot: {
el: document.getElementById('coze-chat-container'),
width: '95%',
width: '100%',
height: '100%',
title: name,
isNeedFunctionCallMessage: true,
feedback: {
isNeedFeedback: true,
feedbackPanel: {
title: '您对这个回答有什么看法？请告诉我们',
placeholder: '请详细描述您的问题...',
tags: [
{
label: '信息不正确',
},
{
label: '涉及敏感信息',
isNeedDetail: true,
},
],
},
},
},
base: {
icon: '',
zIndex: 1000,
lang:'zh-CN'
lang: 'zh-CN',
},
footer: {
expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
@ -147,9 +165,9 @@ const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
},
conversations: {
isNeed: true,
isNeedAddNewConversationBoolean: true,
isNeedQuoteBoolean: true,
}
isNeedAddNewConversation: true,
isNeedQuote: true,
},
},
auth: auth,
userInfo: userInfo,

4
src/views/agent/chat/style.scss
View File

@ -40,5 +40,9 @@
}
}
.toggle-btn{
margin-top: 10px;
margin-bottom: 10px;
}
}