refactor(agent): 重构智能对话页面布局和样式
- 重新设计了页面布局，分为左、右两个主要区域 - 左侧区域增加了聊天机器人信息展示，包括头像、名称、描述等 - 右侧区域保留聊天窗口，并增加了顶部栏 -优化了响应式布局，使页面在不同屏幕尺寸下都能良好显示 - 调整了颜色、字体等样式，提升了页面视觉效果
This commit is contained in:
林志军
@ -1,7 +1,7 @@
|
||||
import Http from '@/api';
|
||||
// 获取聊天智能体
|
||||
export const getChatAgent = (id: number) => {
|
||||
console.log('param.id',id);
|
||||
console.log('param.id', id);
|
||||
return Http.get(`/v1/agent/getChatAgent/${id}`);
|
||||
};
|
||||
|
||||
@ -32,11 +32,23 @@ export const delAgentMessage = (params: any) => {
|
||||
return Http.post(`/v1/agent/delAgentMessage`, params);
|
||||
};
|
||||
// 删除工作流历史记录
|
||||
export const delWorkflowHistoryApi = (id:number) => {
|
||||
export const delWorkflowHistoryApi = (id: number) => {
|
||||
return Http.post(`/v1/agent/delWorkflowHistory/${id}`);
|
||||
};
|
||||
|
||||
//获取异步执行工作流任务
|
||||
export const getSyncWorkflowTaskApi = (params:any) => {
|
||||
return Http.get(`/v1/agent/getSyncWorkflowTask`,params);
|
||||
export const getSyncWorkflowTaskApi = (params: any) => {
|
||||
return Http.get(`/v1/agent/getSyncWorkflowTask`, params);
|
||||
};
|
||||
//置顶
|
||||
export const topWorkflowHistoryApi = (id: number) => {
|
||||
return Http.post(`/v1/agent/topWorkflowHistory/${id}`);
|
||||
};
|
||||
//取消指定
|
||||
export const cancelTopWorkflowHistoryApi = (id: number) => {
|
||||
return Http.post(`/v1/agent/cancelTopWorkflowHistory/${id}`);
|
||||
};
|
||||
|
||||
export const getWorkflowHistoryListApi = (param: any) => {
|
||||
return Http.get(`/v1/agent/getWorkflowHistoryList`, param);
|
||||
};
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
<div class="agent-wrap relative h-full">
|
||||
<a-input
|
||||
v-model="query.name"
|
||||
@blur="getData()"
|
||||
@press-enter="getData()"
|
||||
placeholder="搜索智能体"
|
||||
size="large"
|
||||
allow-clear
|
||||
class="absolute right-0 top-0 !w-400px"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
<icon-search @click="getData()" />
|
||||
</template>
|
||||
</a-input>
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
|
||||
@ -40,29 +40,35 @@
|
||||
<div class="item-body">
|
||||
<div class="text" @click="getHistoryInfo(item)">
|
||||
{{ item.title }}
|
||||
<!-- <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>-->
|
||||
<a-trigger position="bottom" :auto-fit-position="false" :unmount-on-close="true">
|
||||
<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 @click="(event) => handleTop(item.id, item.sort, event)" class="text">
|
||||
{{ item.sort > 1 ? '取消置顶' : '置顶' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="dropdown-item">-->
|
||||
<!-- <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
|
||||
<!-- <div @click="editTitle(item)" 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>
|
||||
@ -92,13 +98,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal style="width: 500px" v-model:visible="editHistoryVisible">
|
||||
<template #title> Title</template>
|
||||
<div></div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import DynamicForm from './components/DynamicForm.vue';
|
||||
import { executeWorkFlow, getWorkFlowInfo, delWorkflowHistoryApi, getSyncWorkflowTaskApi } from '@/api/all/agent';
|
||||
import {
|
||||
executeWorkFlow,
|
||||
getWorkFlowInfo,
|
||||
delWorkflowHistoryApi,
|
||||
getSyncWorkflowTaskApi,
|
||||
topWorkflowHistoryApi,
|
||||
getWorkflowHistoryListApi,
|
||||
cancelTopWorkflowHistoryApi,
|
||||
} from '@/api/all/agent';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { marked } from 'marked';
|
||||
import DOMPurify from 'dompurify';
|
||||
@ -107,6 +126,8 @@ import menuUnfold from '@/assets/svg/menu-unfold.svg';
|
||||
import { formatNumberShow } from '@/utils/tools';
|
||||
// import { WORKEXECUTE_STATUS } from '../AgentConstants.ts';
|
||||
|
||||
const editHistoryVisible = ref(false);
|
||||
|
||||
const formFields = ref({});
|
||||
const history = ref([]);
|
||||
// 是否折叠状态
|
||||
@ -161,11 +182,56 @@ const renderedMarkdown = computed(() => {
|
||||
const deleteHistory = async (id, index) => {
|
||||
const { code } = await delWorkflowHistoryApi(id);
|
||||
if (code === 200) {
|
||||
//
|
||||
history.value.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
const historyForm = reactive({
|
||||
id: 0,
|
||||
title: '',
|
||||
});
|
||||
|
||||
const editTitle = async (item) => {
|
||||
historyForm.id = item.id;
|
||||
historyForm.title = item.title;
|
||||
editHistoryVisible.value = true;
|
||||
};
|
||||
|
||||
const handleTop = async (id, sort, event) => {
|
||||
if (sort > 0) {
|
||||
canceltopHistory(id);
|
||||
} else {
|
||||
topHistory(id);
|
||||
}
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
//置顶
|
||||
const topHistory = async (id, sort) => {
|
||||
const { code, message } = await topWorkflowHistoryApi(id);
|
||||
if (code === 200) {
|
||||
AMessage.success(message);
|
||||
getWorkflowHistoryList();
|
||||
}
|
||||
};
|
||||
//取消置顶
|
||||
const canceltopHistory = async (id, sort) => {
|
||||
const { code, message } = await cancelTopWorkflowHistoryApi(id);
|
||||
if (code === 200) {
|
||||
AMessage.success(message);
|
||||
getWorkflowHistoryList();
|
||||
}
|
||||
};
|
||||
|
||||
const getWorkflowHistoryList = async () => {
|
||||
const { code, data } = await getWorkflowHistoryListApi({
|
||||
workflow_id: cozeInfo.workflow_id,
|
||||
});
|
||||
if (code === 200) {
|
||||
history.value = data.list;
|
||||
}
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async (formData) => {
|
||||
try {
|
||||
@ -200,6 +266,9 @@ const getSyncWorkflowTask = async () => {
|
||||
if (data.execute_status === 'Success' || data.execute_status === 'Fail') {
|
||||
workFlowRes.output = data.output;
|
||||
clearTimeout();
|
||||
if (!isEmpty(data.history)) {
|
||||
addHistoryItem(data.history);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
Reference in New Issue
Block a user