feat(agent): 新增智能体应用功能
- 添加智能体列表页面和相关API - 实现聊天功能，包括历史对话和当前对话 - 新增工作流功能，包括表单提交和结果展示- 优化路由配置，增加智能体相关路由 - 添加全局常量和枚举，用于智能体类型区分
This commit is contained in:
林志军
@ -6,15 +6,15 @@ export const getChatAgent = (id: number) => {
|
||||
|
||||
// 获取历史聊天
|
||||
export const getHistoryChat = (params: any) => {
|
||||
return Http.get(`/v1/agent/getConversations`, { params });
|
||||
return Http.get(`/v1/agent/getConversations`, params);
|
||||
};
|
||||
// 获取智能体分类
|
||||
export const getCategoriesMenus = () => {
|
||||
return Http.get(`/v1/agent/getCategoriesMenus`);
|
||||
};
|
||||
|
||||
export const getAgentList = () => {
|
||||
return Http.get(`/v1/agent/getAgentList`);
|
||||
export const getAgentList = (params: any) => {
|
||||
return Http.get(`/v1/agent/getAgentList`, params);
|
||||
};
|
||||
|
||||
// 获取工作流详情
|
||||
@ -26,3 +26,7 @@ export const getWorkFlowInfo = (id: number) => {
|
||||
export const executeWorkFlow = (params: any) => {
|
||||
return Http.post(`/v1/agent/executeWorkFlow`, params);
|
||||
};
|
||||
|
||||
export const delAgentMessage = (params: any) => {
|
||||
return Http.post(`/v1/agent/delAgentMessage`, params);
|
||||
};
|
||||
|
||||
BIN
src/assets/svg/img.png
Normal file
BIN
src/assets/svg/img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -14,9 +14,16 @@ import './core';
|
||||
import 'uno.css';
|
||||
import './mock';
|
||||
// import '@/styles/vars.css'; // 优先加载
|
||||
import { loadDynamicMenus } from './router/routes/modules/agentDynamic';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(store);
|
||||
app.use(router);
|
||||
app.component('NoData', NoData);
|
||||
app.mount('#app');
|
||||
|
||||
router.isReady().then(async () => {
|
||||
await loadDynamicMenus(router); // 传入 router 实例
|
||||
|
||||
console.log(router,'router')
|
||||
app.mount('#app');
|
||||
});
|
||||
|
||||
46
src/router/routes/modules/agentDynamic.ts
Normal file
46
src/router/routes/modules/agentDynamic.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import { getCategoriesMenus } from '@/api/all/agent';
|
||||
import type { AppRouteRecordRaw } from '../types';
|
||||
import { MENU_GROUP_IDS } from '@/router/constants';
|
||||
import IconRepository from '@/assets/svg/icon-repository.svg';
|
||||
import { IconBookmark } from '@arco-design/web-vue/es/icon';
|
||||
|
||||
export const loadDynamicMenus = async (routerInstance) => {
|
||||
try {
|
||||
const { code, data } = await getCategoriesMenus();
|
||||
|
||||
let router = [
|
||||
{
|
||||
path: '/repository233',
|
||||
name: 'Repository',
|
||||
redirect: 'repository/brandMaterials',
|
||||
meta: {
|
||||
locale: '品牌资产管理',
|
||||
icon: IconRepository,
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
id: MENU_GROUP_IDS.PROPERTY_ID,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'brandMaterials',
|
||||
name: 'RepositoryBrandMaterials',
|
||||
meta: {
|
||||
locale: '品牌信息',
|
||||
requiresAuth: true,
|
||||
requireLogin: true,
|
||||
roles: ['*'],
|
||||
},
|
||||
component: () => import('@/views/property-marketing/brands/brand-materials/index.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
// 添加子路由到名为 Agent 的父路由下
|
||||
router.forEach(route => {
|
||||
routerInstance.addRoute('Agent', route);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to load dynamic menus:', error);
|
||||
}
|
||||
};
|
||||
@ -1,27 +1,39 @@
|
||||
<template>
|
||||
<a-layout-sider width="250" style="background: #fff">
|
||||
<div>
|
||||
<div class="logo">
|
||||
<img :src="cozeInfo?.icon_url" style="width: 100%; height: 70%" />
|
||||
<img :src="cozeInfo?.icon_url" class="agent-img" />
|
||||
</div>
|
||||
|
||||
<a-menu mode="inline" theme="light">
|
||||
<a-menu-item key="1">
|
||||
<span>{{ cozeInfo.title }}</span>
|
||||
<span class="menu-title">{{ cozeInfo.title }}</span>
|
||||
<span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
|
||||
<span style="float: right">{{ cozeInfo.views }}次使用</span>
|
||||
<p>{{ cozeInfo.description }}</p>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="2">历史对话</a-menu-item>
|
||||
<a-menu-item key="3">梳理这次舆情的时间线和关键节点</a-menu-item>
|
||||
<a-menu-item key="4">提取事件发展的五阶段脉络</a-menu-item>
|
||||
<a-menu-item key="5">提炼不同群体的主要观点和态度立场</a-menu-item>
|
||||
<a-menu-item key="6">分类汇总正面、中立、负面声音要点</a-menu-item>
|
||||
<a-menu-item key="7">分析文本中的情绪类型及占比</a-menu-item>
|
||||
<a-menu-item key="8">识别负面情绪集中的评论内容</a-menu-item>
|
||||
|
||||
<div v-for="(item, index) in conversations" :key="index">
|
||||
<a-dropdown-button>
|
||||
<span> {{ item.content }} </span>
|
||||
<template #content>
|
||||
<a-doption>重命名</a-doption>
|
||||
<a-popconfirm
|
||||
content="确认删除对话吗？删除后，聊天记录将不可恢复。"
|
||||
@ok="delMessage(item.chat_id, item.conversation_id)"
|
||||
type="error"
|
||||
>
|
||||
<a-button>删除</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</a-dropdown-button>
|
||||
</div>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
|
||||
|
||||
const props = defineProps({
|
||||
cozeInfo: {
|
||||
@ -33,14 +45,29 @@ const props = defineProps({
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
const getHistoryChat = async () => {
|
||||
const { code, data } = await getHistoryChat({ botId: props.botId });
|
||||
|
||||
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(() => {
|
||||
getHistoryChat();
|
||||
getHistoryChatData(props.botId);
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -48,4 +75,19 @@ onMounted(() => {
|
||||
.logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 18px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.agent-img {
|
||||
width: 100%;
|
||||
height: 230px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,15 @@
|
||||
<template>
|
||||
<div class="chat-wrap">
|
||||
<span class="span-back"> <icon-left /> 返回空间 </span>
|
||||
<span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
|
||||
<div class="chat-contain">
|
||||
<a-layout>
|
||||
<HistoryChat :cozeInfo="cozeInfo" :botId="cozeWebSDKConfig?.config?.bot_id" />
|
||||
<a-layout-sider width="15%" style="background: #fff">
|
||||
<HistoryChat
|
||||
v-if="cozeWebSDKConfig?.config?.bot_id"
|
||||
:cozeInfo="cozeInfo"
|
||||
:botId="cozeWebSDKConfig?.config?.bot_id"
|
||||
/>
|
||||
</a-layout-sider>
|
||||
<a-layout>
|
||||
<a-layout-content style="padding: 24px; background: #fff; min-height: 280px">
|
||||
<a-card :bordered="false">
|
||||
@ -20,8 +26,9 @@
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { getChatAgent } from '@/api/all/agent';
|
||||
import HistoryChat from './components/HistoryChat.vue';
|
||||
import ChatBox from './components/ChatBox.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
|
||||
// 存储认证令牌
|
||||
const authToken = ref('pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg');
|
||||
|
||||
@ -40,6 +47,12 @@ const refreshToken = async () => {
|
||||
authToken.value = await fetchToken();
|
||||
};
|
||||
|
||||
const goChatIndex = async () => {
|
||||
router.push({
|
||||
path: '/agent/index',
|
||||
});
|
||||
};
|
||||
|
||||
// 动态加载脚本函数
|
||||
const loadScript = (src) =>
|
||||
new Promise((resolve, reject) => {
|
||||
@ -51,7 +64,7 @@ const loadScript = (src) =>
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id;
|
||||
const id = route.query.id;
|
||||
const query = reactive({
|
||||
id: id,
|
||||
});
|
||||
@ -78,10 +91,10 @@ const initChat = async () => {
|
||||
}
|
||||
Object.assign(cozeWebSDKConfig, data.cozeConfig);
|
||||
Object.assign(cozeInfo, data.info);
|
||||
console.log(cozeWebSDKConfig?.config?.bot_id, 'cozeWebSDKConfig?.config?.bot_id');
|
||||
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.10/libs/cn/index.js');
|
||||
let config = data.cozeConfig;
|
||||
config.ui.chatBot.el = document.getElementById('coze-chat-container');
|
||||
config.ui.width = '900px';
|
||||
config.ui = editUi(data);
|
||||
config.auth.onRefreshToken = function () {
|
||||
return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
|
||||
};
|
||||
@ -89,9 +102,28 @@ const initChat = async () => {
|
||||
showChatPage();
|
||||
};
|
||||
|
||||
const editUi = (config) => {
|
||||
let uiConfig = {
|
||||
chatBot: {
|
||||
el: document.getElementById('coze-chat-container'),
|
||||
width: '70%',
|
||||
height: '100%',
|
||||
title: config?.info?.title,
|
||||
isNeedFunctionCallMessage: true,
|
||||
},
|
||||
base: {
|
||||
icon: '',
|
||||
zIndex: 1000,
|
||||
},
|
||||
header: {
|
||||
isShow: true,
|
||||
isNeedClose: false,
|
||||
},
|
||||
};
|
||||
return uiConfig;
|
||||
};
|
||||
|
||||
const showChatPage = () => {
|
||||
// 显示聊天页面
|
||||
console.log(cozeWebSDK, 'chatClient');
|
||||
cozeWebSDK.showChatBot();
|
||||
};
|
||||
|
||||
|
||||
@ -1,33 +1,53 @@
|
||||
<template>
|
||||
<div class="agent-wrap">
|
||||
<a-input
|
||||
style="float: right; width: 300px"
|
||||
v-model="query.title"
|
||||
@blur="getData()"
|
||||
placeholder="搜索智能体"
|
||||
size="medium"
|
||||
allow-clear
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<span class="span-title">{{ item.name }}</span>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="6" v-if="item.agent_products.length > 0" v-for="(product, k) in item.agent_products">
|
||||
<a-card @click="goDetail(product?.agent_system?.type, product?.id)">
|
||||
<template #actions>
|
||||
<span class="icon-hover"> {{ product?.views }}次调用 </span>
|
||||
</template>
|
||||
<template #cover>
|
||||
<div>
|
||||
<img
|
||||
:style="{ width: '100%', transform: 'translateY(-20px)' }"
|
||||
alt="dessert"
|
||||
:src="product?.agent_system?.icon_url"
|
||||
/>
|
||||
<a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
|
||||
<a-col :span="3" v-for="(product, k) in item.agent_products">
|
||||
|
||||
<div class="card-container" @click="goDetail(product?.agent_system?.type, product?.id)">
|
||||
<div class="card-image-container">
|
||||
<img class="card-image" :src="product?.agent_system?.icon_url" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-title">{{ product?.title }}</div>
|
||||
<div class="card-description">{{ product?.agent_system?.description }}</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div
|
||||
:class="['tag', { red: product?.agent_system?.type === 1, blue: product?.agent_system?.type === 2 }]"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'tag-text',
|
||||
{ red: product?.agent_system?.type === 1, blue: product?.agent_system?.type === 2 },
|
||||
]"
|
||||
>
|
||||
{{ product?.agent_system?.type == 1 ? '对话式' : '工作流' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-info">
|
||||
<span class="usage-count">{{ product?.views }}</span>
|
||||
<span class="usage-label">次使用</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<a-card-meta :title="product?.agent_system?.title" :description="product?.agent_system?.description">
|
||||
<template #avatar>
|
||||
<div :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }">
|
||||
<a-typography-text>{{ product?.agent_system?.type == 1 ? '对话式' : '工作流' }}</a-typography-text>
|
||||
</div>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<NoData v-else />
|
||||
</a-row>
|
||||
|
||||
<NoData v-else />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -40,10 +60,13 @@ const router = useRouter();
|
||||
|
||||
const list = ref([]);
|
||||
const getData = async () => {
|
||||
const { code, data } = await getAgentList();
|
||||
const { code, data } = await getAgentList(query);
|
||||
list.value = data;
|
||||
};
|
||||
|
||||
const query = reactive({
|
||||
title: '',
|
||||
});
|
||||
const goDetail = (type: number, id: number) => {
|
||||
if (type === 1) {
|
||||
router.push({
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
.agent-wrap {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
.ant-card-cover img {
|
||||
@ -17,4 +16,154 @@
|
||||
word-wrap: break-word;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
background: var(--BG-White, white);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
outline: 1px solid var(--BG-300, #e6e6e8);
|
||||
outline-offset: -1px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-image-container {
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
height: 120px;
|
||||
background: #ffe9e7; /* 可以替换成变量 */
|
||||
overflow: hidden;
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 16px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
align-self: stretch;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
|
||||
&.red {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: var(--Functional-Blue-6, #3366ff);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tag-icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 11.5px;
|
||||
height: 10.75px;
|
||||
left: 0.25px;
|
||||
top: 0.63px;
|
||||
background: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
font-size: 12px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word;
|
||||
|
||||
&.red {
|
||||
color: var(--Functional-Red-6, #f64b31);
|
||||
}
|
||||
|
||||
&.blue {
|
||||
color: var(--Functional-Blue-6, #3366ff);
|
||||
}
|
||||
}
|
||||
|
||||
.usage-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: HarmonyOS Sans SC, Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
:deep(.arco-input-wrapper) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
height: 35px;
|
||||
width: 400px;
|
||||
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
}
|
||||
|
||||
&.arco-textarea-wrapper {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-button type="primary" @click="handleSubmit">提交执行</a-button>
|
||||
<a-button type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -35,6 +35,10 @@ const props = defineProps({
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['submit']);
|
||||
const formRef = ref(null);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<a-layout-sider width="250" style="background: #fff">
|
||||
<div class="logo">
|
||||
<img :src="cozeInfo?.icon_url" style="width: 100%; height: 70%; border-radius: 6px" />
|
||||
<img :src="cozeInfo?.icon_url" class="agent-img" />
|
||||
</div>
|
||||
<a-menu mode="inline" theme="light">
|
||||
<a-menu-item key="1">
|
||||
@ -10,12 +10,7 @@
|
||||
<span style="float: right">{{ cozeInfo.views }}次使用</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="2">历史对话</a-menu-item>
|
||||
<a-menu-item key="3">梳理这次舆情的时间线和关键节点</a-menu-item>
|
||||
<a-menu-item key="4">提取事件发展的五阶段脉络</a-menu-item>
|
||||
<a-menu-item key="5">提炼不同群体的主要观点和态度立场</a-menu-item>
|
||||
<a-menu-item key="6">分类汇总正面、中立、负面声音要点</a-menu-item>
|
||||
<a-menu-item key="7">分析文本中的情绪类型及占比</a-menu-item>
|
||||
<a-menu-item key="8">识别负面情绪集中的评论内容</a-menu-item>
|
||||
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
</template>
|
||||
@ -49,4 +44,10 @@ onMounted(() => {
|
||||
.logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.agent-img {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<a-form-item
|
||||
:label="field.label"
|
||||
:rules="field.required ? [{ required: true, message: `${field.label}不能为空` }] : []"
|
||||
>
|
||||
<!-- 输入框 -->
|
||||
<a-input
|
||||
v-if="field.type === 'input'"
|
||||
:value="field.value"
|
||||
@input="updateValue($event.target.value)"
|
||||
:placeholder="field.placeholder"
|
||||
/>
|
||||
|
||||
<!-- 下拉选择 -->
|
||||
<a-select
|
||||
v-else-if="field.type === 'select'"
|
||||
:value="field.value"
|
||||
@change="updateValue"
|
||||
:placeholder="field.placeholder"
|
||||
:options="field.options"
|
||||
/>
|
||||
|
||||
<!-- 其他字段类型... -->
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
field: Object // 直接传递整个字段对象
|
||||
});
|
||||
|
||||
// 更新值的方法
|
||||
const updateValue = (value) => {
|
||||
// 直接修改父组件传递的字段对象的 value 属性
|
||||
props.field.value = value;
|
||||
};
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<a-form-item :label="label">
|
||||
<a-input v-model:value="localValue" :placeholder="placeholder" />
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请输入',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const localValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<a-form-item :label="field.label" :rules="[{ required: field.required, message: '请选择内容' }]">
|
||||
<a-select v-model:value="value" :placeholder="field.placeholder">
|
||||
<a-select-option v-for="option in field.options" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
field: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
|
||||
const value = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
});
|
||||
</script>
|
||||
@ -1,27 +1,21 @@
|
||||
<template>
|
||||
<div class="chat-wrap">
|
||||
<span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
|
||||
|
||||
<div class="chat-contain">
|
||||
<a-layout>
|
||||
<a-layout-header>
|
||||
<div>
|
||||
<span > <icon-left /> 返回空间 </span>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
<a-layout>
|
||||
<a-layout-sider width="20%">
|
||||
<HistoryChat :cozeInfo="cozeInfo" />
|
||||
</a-layout-sider>
|
||||
<a-layout-sider class="layout-sider" width="17%">
|
||||
<DynamicForm :formFields="formFields" :formData="formData" @submit="handleSubmit" />
|
||||
<DynamicForm :formFields="formFields" :formData="formData" :loading="loading" @submit="handleSubmit" />
|
||||
</a-layout-sider>
|
||||
<a-layout-content ref="contentRef" class="content-container">
|
||||
<a-spin :loading="loading" tip="生成中">
|
||||
<div>
|
||||
<span class="work-res-span">
|
||||
{{ workFlowRes.output }}
|
||||
</span>
|
||||
<a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
|
||||
<div class="work-res">
|
||||
<span > {{ workFlowRes?.output }}</span>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
@ -33,8 +27,8 @@
|
||||
import { ref, reactive } from 'vue';
|
||||
import HistoryChat from './components/historyChat.vue';
|
||||
import { executeWorkFlow, getWorkFlowInfo } from '@/api/all/agent';
|
||||
import { useRoute } from 'vue-router';
|
||||
import DynamicForm from './components/DynamicForm.vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const formFields = ref([]);
|
||||
|
||||
@ -46,7 +40,12 @@ const id = route.query.id;
|
||||
const query = reactive({
|
||||
id: id,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const goChatIndex = async () => {
|
||||
router.push({
|
||||
path: '/agent/index',
|
||||
});
|
||||
};
|
||||
const loading = ref(false);
|
||||
|
||||
const cozeInfo = reactive({
|
||||
@ -64,6 +63,8 @@ const workFlowRes = reactive({});
|
||||
// 提交表单
|
||||
const handleSubmit = async (formData) => {
|
||||
console.log(formData, 'formData');
|
||||
|
||||
try {
|
||||
const param = { form_data: formData, workflow_id: cozeInfo.workflow_id };
|
||||
loading.value = true;
|
||||
const { code, data } = await executeWorkFlow(param);
|
||||
@ -71,6 +72,10 @@ const handleSubmit = async (formData) => {
|
||||
Object.assign(workFlowRes, data.data);
|
||||
loading.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error, 'error');
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -34,8 +34,24 @@
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.layout-sider{
|
||||
.layout-sider {
|
||||
border-radius: 6px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
.spin-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.work-res {
|
||||
line-height: 26px;
|
||||
font-size: 15px;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user