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 17:46:10 +08:00
parent be3843585a
commit f96b96e11f
3 changed files with 384 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,18 +76,13 @@ const handleSubmit = async () => {
<style scoped lang="scss">
.form-container {
padding: 24px;
border: 1px solid #d7d7d9; /* 添加灰色边框 */
background: var(--BG-White, white);
min-height: 70vh;
:deep(.arco-input-wrapper),
:deep(.arco-textarea-wrapper) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
height: 35px;
width: 400px;
width: 300px;
&:focus-within,
&.arco-input-focus {

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

@ -1,53 +1,79 @@
<template>
<div class="chat-wrap">
<span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
<div class="chat-contain">
<a-row class="grid-layout">
<!-- 左侧历史聊天 -->
<a-col
:xs="isCollapsed ? 0 : 3"
:sm="isCollapsed ? 0 : 3"
:md="isCollapsed ? 0 : 4"
:lg="isCollapsed ? 0 : 6"
:xl="isCollapsed ? 0 : 8"
:xxl="isCollapsed ? 0 : 5"
>
<HistoryChat v-if="!isCollapsed" :cozeInfo="cozeInfo" />
</a-col>
<div>
<span class="back-wap" @click="goChatIndex"> <icon-left /> 返回空间 </span>
<div class="workflow-container">
<div class="left-wap" v-if="isCollapsed == false">
<div class="header">
<div class="image-body">
<img :src="cozeInfo.image_url" />
</div>
</div>
<div class="content">
<div class="title-body">
<div class="text">{{ cozeInfo.name }}</div>
<div data-尺寸="迷你-20px" data-颜色="red" class="tag-body">
<div class="">
<img class="status-icon" :src="workflow" />
</div>
<div class="text">工作流</div>
</div>
</div>
<div class="use-body">
<div class="num">{{ cozeInfo.views }}</div>
<div class="text">次使用</div>
</div>
</div>
<div class="description">
<div class="text">
{{ cozeInfo.description }}
</div>
</div>
<div class="out-line">
<div class="out-line-div"></div>
</div>
<div class="history">
<div class="section">
<div class="text">历史对话</div>
</div>
<div class="history-item">
<div class="item-body">
<div class="text">博主的粉丝数量与增长趋势</div>
</div>
<div class="item-body">
<div class="text">博主的粉丝数量与增长趋势</div>
</div>
<div class="item-body">
<div class="text">博主的粉丝数量与增长趋势</div>
</div>
<div class="item-body">
<div class="text">博主的粉丝数量与增长趋势</div>
</div>
</div>
</div>
</div>
<div class="right-wap">
<div class="header">
<div class="body">
<div class="">
<div class="toggle-btn" @click="toggleCollapse">
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
</a-tooltip>
</div>
<!-- 动态表单 -->
<a-col
:xs="isCollapsed ? 3 : 3"
:sm="isCollapsed ? 3 : 3"
:md="isCollapsed ? 4 : 4"
:lg="isCollapsed ? 6 : 6"
:xl="isCollapsed ? 6 : 6"
:xxl="isCollapsed ? 5 : 5"
class="dynamic-form"
>
</div>
</div>
</div>
<div class="content">
<div class="form">
<DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
</a-col>
<!-- 主内容区域 -->
<a-col
class="right-box content-container"
:xs="isCollapsed ? 4 : 2"
:sm="isCollapsed ? 4 : 4"
:md="isCollapsed ? 6 : 6"
:lg="isCollapsed ? 8 : 8"
:xl="isCollapsed ? 10 : 9"
:xxl="isCollapsed ? 12 : 12"
>
</div>
<div class="res">
<a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
<div v-if="workFlowRes?.output != ''" class="work-res" v-html="renderedMarkdown"></div>
<NoData v-if="loading == false && workFlowRes?.output == ''" />
</a-col>
</a-row>
<div v-if="workFlowRes.output != '' && loading === false" v-html="renderedMarkdown"></div>
<NoData v-if="workFlowRes.output == '' && loading === false" />
</div>
</div>
</div>
</div>
</div>
</template>
@ -62,6 +88,7 @@ import { marked } from 'marked';
import DOMPurify from 'dompurify';
import menuFold from '@/assets/svg/menu-fold.svg';
import menuUnfold from '@/assets/svg/menu-unfold.svg';
import workflow from '@/assets/svg/workflow.svg';
const formFields = ref({});
// 是否折叠状态

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

@ -1,62 +1,314 @@
.chat-wrap {
.chat-contain {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 24px;
.back-wap {
width: 100%;
height: 100%;
margin-bottom: 20px;
padding-left: 24px;
padding-right: 24px;
justify-content: flex-start;
align-items: center;
gap: 4px;
display: inline-flex;
}
.span-back {
.workflow-container {
width: 100%;
height: 100%;
padding-left: 24px;
padding-right: 24px;
justify-content: flex-start;
align-items: center;
gap: 24px;
display: inline-flex;
.left-wap {
width: 360px;
align-self: stretch;
background: var(--BG-100, #F7F8FA);
overflow: hidden;
border-radius: 8px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: inline-flex;
.header {
align-self: stretch;
height: 160px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
display: flex;
.image-body {
align-self: stretch;
flex: 1 1 0;
position: relative;
background: #FFEDED;
overflow: hidden;
border-radius: 8px;
img {
width: 408.90px;
height: 218px;
left: -24.45px;
top: -29px;
position: absolute
}
}
}
.content {
align-self: stretch;
padding-top: 15px;
padding-bottom: 15px;
justify-content: space-between;
align-items: flex-start;
display: inline-flex;
.title-body {
justify-content: flex-start;
align-items: center;
gap: 4px;
display: flex;
.text {
justify-content: center;
display: flex;
flex-direction: column;
color: var(--Text-1, #211F24);
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 26px;
word-wrap: break-word;
}
.tag-body {
height: 20px;
padding-left: 8px;
padding-right: 8px;
background: var(--Functional-Red-1, #FFE9E7);
overflow: hidden;
border-radius: 2px;
justify-content: flex-start;
align-items: center;
gap: 4px;
display: flex;
.text {
color: var(--Functional-Red-6, #F64B31);
font-size: 12px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 20px;
word-wrap: break-word
}
}
}
.use-body {
width: 79px;
height: 24px;
position: relative;
.num {
left: 20px;
top: 0px;
position: absolute;
color: var(--Text-2, #3C4043);
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 24px;
word-wrap: break-word
}
.text {
left: 43px;
top: 3px;
position: absolute;
color: var(--Text-3, #737478);
font-size: 12px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 20px;
word-wrap: break-word;
}
}
}
.description {
align-self: stretch;
overflow: hidden;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 10px;
display: flex;
.text {
align-self: stretch;
color: var(--Text-2, #3C4043);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 62px;
word-wrap: break-word
line-height: 22px;
word-wrap: break-word;
}
}
.span-back {
color: var(--Text-2, #3C4043);
.out-line {
align-self: stretch;
height: 40px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10px;
display: flex;
.out-line-div {
align-self: stretch;
height: 0px;
outline: 1px var(--Border-2, #E6E6E8) solid;
outline-offset: -0.50px;
}
}
.history {
align-self: stretch;
flex: 1 1 0;
position: relative;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
.section {
align-self: stretch;
height: 40px;
justify-content: flex-start;
align-items: center;
gap: 10px;
display: inline-flex;
.text {
color: var(--Text-3, #737478);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 22px;
word-wrap: break-word
}
.content-container {
width: 40%;
background-color: #fff;
min-height: 70vh; // 初始高度
overflow: auto; // 允许滚动
word-wrap: break-word;
white-space: pre-wrap;
}
.work-res-span {
padding: 24px;
line-height: 34px;
}
.layout-sider {
border-radius: 6px;
margin-left: 20px;
}
.spin-center {
.history-item {
align-self: stretch;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: flex;
.item-body {
align-self: stretch;
height: 40px;
padding: 8px;
border-radius: 8px;
justify-content: flex-start;
align-items: center;
gap: 10px;
display: inline-flex;
.text {
flex: 1 1 0;
color: var(--Text-1, #211F24);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 22px;
word-wrap: break-word;
}
}
}
}
}
.right-wap {
flex: 1 1 0;
align-self: stretch;
background: var(--BG-White, white);
overflow: hidden;
border-radius: 8px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: inline-flex;
.header {
align-self: stretch;
padding-left: 20px;
padding-right: 20px;
padding-top: 28px;
padding-bottom: 28px;
justify-content: flex-start;
align-items: center;
gap: 10px;
display: inline-flex;
.body {
width: 20px;
height: 20px;
position: relative;
overflow: hidden;
.fold {
width: 15px;
height: 12.50px;
left: 17.50px;
top: 16.25px;
position: absolute;
transform: rotate(-180deg);
transform-origin: top left;
background: var(--Text-3, #737478)
}
}
}
.content {
align-self: stretch;
border-top: 1px var(--Border-1, #D7D7D9) solid;
justify-content: space-between;
align-items: flex-start;
display: inline-flex;
.form {
width: 400px;
height: 796px;
padding: 20px;
position: relative;
border-right: 1px var(--Border-1, #D7D7D9) solid;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 32px;
display: inline-flex;
}
.res {
flex: 1 1 0;
align-self: stretch;
padding-left: 32px;
padding-right: 32px;
padding-top: 20px;
padding-bottom: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
gap: 32px;
display: inline-flex
}
}
.work-res {
line-height: 26px;
font-size: 15px;
padding: 20px;
}
}