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

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

@ -7,7 +7,9 @@
</div>
<div class="info-section">
<div class="title-group">
<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,10 +126,23 @@
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 {
align-self: stretch;
overflow: hidden;
@ -135,7 +164,6 @@
}
.history-section {
align-self: stretch;
flex: 1 1 0;

58
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"
<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 : 4"
class="history-chat-col">
: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"
<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">
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;
}
}

1
src/views/agent/index/style.scss
View File

@ -124,7 +124,6 @@
gap: 4px;
.status-icon {
width: 12px;
height: 12px;
}

2
src/views/agent/work-flow/components/DynamicForm.vue
View File

@ -79,7 +79,7 @@ const handleSubmit = async () => {
padding: 24px;
border: 1px solid #d7d7d9; /* 添加灰色边框 */
background: var(--BG-White, white);
height: 70vh;
min-height: 70vh;
:deep(.arco-input-wrapper),
:deep(.arco-textarea-wrapper) {

34
src/views/agent/work-flow/components/HistoryChat.vue
View File

@ -7,13 +7,10 @@
</div>
<div class="info-section">
<div class="title-group">
<div class="title">{{cozeInfo.name}}</div>
<div class="title">{{ cozeInfo.name }}</div>
<div class="tag">
<div class="">
<img
class="status-icon"
:src="workflow"
/>
<img class="status-icon" :src="workflow" />
</div>
<div class="text">工作流</div>
</div>
@ -30,16 +27,14 @@
<div class="description-section">
<div class="description">
{{cozeInfo.description}}
{{ cozeInfo.description }}
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue';
import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
import workflow from '@/assets/svg/workflow.svg';
const props = defineProps({
@ -49,28 +44,7 @@ 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(() => {
});
onMounted(() => {});
</script>
<style scoped>

1
src/views/agent/work-flow/components/history.scss
View File

@ -93,6 +93,7 @@
.usage-info {
padding: 12px;
margin-right: 12px;
margin-top: 10px;
.count {
color: var(--Text-2, #3C4043);
font-size: 16px;

5
src/views/agent/work-flow/index.vue
View File

@ -10,7 +10,7 @@
:sm="isCollapsed ? 0 : 3"
:md="isCollapsed ? 0 : 4"
:lg="isCollapsed ? 0 : 6"
:xl="isCollapsed ? 0 : 7"
:xl="isCollapsed ? 0 : 8"
:xxl="isCollapsed ? 0 : 5"
>
<HistoryChat v-if="!isCollapsed" :cozeInfo="cozeInfo" />
@ -36,12 +36,11 @@
<!-- 主内容区域 -->
<a-col
class="right-box content-container"
style="height: 70vh"
:xs="isCollapsed ? 4 : 2"
:sm="isCollapsed ? 4 : 4"
:md="isCollapsed ? 6 : 6"
:lg="isCollapsed ? 8 : 8"
:xl="isCollapsed ? 10 : 10"
:xl="isCollapsed ? 10 : 9"
:xxl="isCollapsed ? 12 : 12"
>
<a-spin v-if="loading" class="spin-center" tip="生成中。。。" />

4
src/views/agent/work-flow/style.scss
View File

@ -27,6 +27,10 @@
.content-container {
width: 40%;
background-color: #fff;
min-height: 70vh; // 初始高度
overflow: auto; // 允许滚动
word-wrap: break-word;
white-space: pre-wrap;
}
.work-res-span {