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

refactor(agent): 重构智能对话页面布局和样式

Browse Source 
- 重新设计了页面布局，分为左、右两个主要区域
- 左侧区域增加了聊天机器人信息展示，包括头像、名称、描述等
- 右侧区域保留聊天窗口，并增加了顶部栏
-优化了响应式布局，使页面在不同屏幕尺寸下都能良好显示
- 调整了颜色、字体等样式，提升了页面视觉效果
This commit is contained in:
林志军
2025-07-31 14:36:45 +08:00
parent 15d15a44c6
commit 7e7a4f363b
8 changed files with 109 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
<div class="workflow-container">
<div class="left-wap mr-24px" v-if="isCollapsed == false">
<div class="w-full w-100% mb-15px bg-#F0EDFF h-160px rounded-8px">
<img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class= "w-full h-full object-contain" />
<img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class="w-full h-full object-contain" />
</div>
<div class="content mb-15px">
<div class="title-body">
@ -40,8 +40,29 @@
<div class="item-body">
<div class="text" @click="getHistoryInfo(item)">
{{ item.title }}
<SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />
<!-- <a-trigger position="top" auto-fit-position :unmount-on-close="false">-->
<!-- <SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />-->
<!-- <template #content>-->
<!-- <div class="">-->
<!-- <div class="history-item-dropdown">-->
<!-- <div class="dropdown-item header-item">-->
<!-- <SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />-->
<!-- <div class="text">置顶</div>-->
<!-- </div>-->
<!-- <div class="dropdown-item">-->
<!-- <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
<!-- <div class="text">重命名</div>-->
<!-- </div>-->
<!-- <div class="dropdown-item">-->
<!-- <SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />-->
<!-- <a-popconfirm content="你确认删除该历史对话吗" @ok="deleteHistory(item.id,index)" type="error">-->
<!-- <div class="text delete">删除</div>-->
<!-- </a-popconfirm>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </template>-->
<!-- </a-trigger>-->
</div>
</div>
</div>
@ -77,13 +98,13 @@
<script setup>
import { ref, reactive } from 'vue';
import DynamicForm from './components/DynamicForm.vue';
import { executeWorkFlow, getWorkFlowInfo } from '@/api/all/agent';
import { executeWorkFlow, getWorkFlowInfo, delWorkflowHistoryApi } from '@/api/all/agent';
import { useRoute, useRouter } from 'vue-router';
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 { formatNumberShow } from "@/utils/tools"
import { formatNumberShow } from '@/utils/tools';
const formFields = ref({});
const history = ref([]);
@ -135,6 +156,14 @@ const renderedMarkdown = computed(() => {
return '';
});
const deleteHistory = async (id, index ) => {
const { code } = await delWorkflowHistoryApi(id);
if (code === 200) {
//
history.value.splice(index, 1);
}
};
// 提交表单
const handleSubmit = async (formData) => {
try {
@ -155,7 +184,6 @@ const handleSubmit = async (formData) => {
const addHistoryItem = (item) => {
history.value.unshift(item);
};
const getHistoryInfo = (item) => {

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

@ -6,6 +6,7 @@
font-weight: 400;
line-height: 22px;
}
.back-wap {
width: 100%;
justify-content: flex-start;
@ -136,6 +137,7 @@
align-items: center;
gap: 10px;
display: flex;
.text {
align-self: stretch;
color: var(--Text-2, #3C4043);
@ -173,6 +175,7 @@
align-items: flex-start;
display: flex;
padding: 10px;
.section {
align-self: stretch;
height: 40px;
@ -197,7 +200,6 @@
justify-content: flex-start;
align-items: flex-start;
display: flex;
.item-body {
align-self: stretch;
height: 40px;
@ -207,7 +209,6 @@
align-items: center;
gap: 10px;
display: inline-flex;
.text {
flex: 1 1 0;
color: var(--Text-1, #211F24);
@ -217,7 +218,9 @@
line-height: 22px;
word-wrap: break-word;
}
}
}
}
}
@ -287,10 +290,7 @@
.res {
flex: 1 1 0;
align-self: stretch;
padding-left: 32px;
padding-right: 32px;
padding-top: 20px;
padding-bottom: 20px;
padding: 32px;
flex-direction: column;
justify-content: center;
align-items: center;
@ -300,3 +300,55 @@
}
}
}
.history-item-dropdown {
width: 125px;
padding-top: 8px;
padding-bottom: 4px;
left: 0px;
top: 0px;
position: absolute;
background: var(--BG-White, white);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
border-radius: 4px;
outline: 1px solid var(--Border-1, #D7D7D9);
display: inline-flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 2px;
.dropdown-item {
align-self: stretch;
height: 36px;
padding-left: 12px;
padding-right: 12px;
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
&.header-item {
background: var(--BG-200, #F2F3F5);
}
.icon {
float: right;
}
.text {
flex: 1 1 0;
height: 22px;
color: var(--Text-1, #211F24);
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
line-height: 22px;
word-wrap: break-word;
&.delete {
color: var(--Functional-Red-6, #F64B31);
}
}
}
}