Merge pull request 'feature/linzhijun_扣子智能体_0710' (#24) from feature/linzhijun_扣子智能体_0710 into main
Reviewed-on: ai-team/lingji-work-fe#24
This commit is contained in:
11
src/views/agent/AgentConstants.ts
Normal file
11
src/views/agent/AgentConstants.ts
Normal file
@ -0,0 +1,11 @@
|
||||
export enum AGENT_TYPE {
|
||||
AGENT = 1, // 智能体
|
||||
WORKFLLOW = 2, // 工作流
|
||||
}
|
||||
|
||||
//工作流异步执行状态
|
||||
export enum WORKEXECUTE_STATUS {
|
||||
SUCCESS = 'Success', // 执行成功
|
||||
RUNNING = 'Running', // 执行中
|
||||
FAIL = 'Fail', // 执行失败
|
||||
}
|
||||
53
src/views/agent/chat/components/HistoryChat.vue
Normal file
53
src/views/agent/chat/components/HistoryChat.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="agent-card">
|
||||
<div class="header-section">
|
||||
<div class="image-container">
|
||||
<img :src="cozeInfo.icon_url" alt="" />
|
||||
</div>
|
||||
</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" />
|
||||
</div>
|
||||
<div class="text">对话式</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="usage-info">
|
||||
<a-space>
|
||||
<span class="count">{{ cozeInfo.views }}</span>
|
||||
</a-space>
|
||||
<a-space>
|
||||
<span class="label"> 次使用 </span>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description-section">
|
||||
<div class="description">
|
||||
{{ cozeInfo.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
import chatbotIcon from '@/assets/svg/chatbot.svg';
|
||||
|
||||
const props = defineProps({
|
||||
cozeInfo: {
|
||||
type: Object as () => any,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './history.scss';
|
||||
</style>
|
||||
241
src/views/agent/chat/components/history.scss
Normal file
241
src/views/agent/chat/components/history.scss
Normal file
@ -0,0 +1,241 @@
|
||||
|
||||
.agent-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--BG-100, #F7F8FA);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.header-section {
|
||||
align-self: stretch;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.image-container {
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 24px;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
align-self: stretch;
|
||||
padding: 10px 10px 0 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.title {
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 18px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
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 {
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
background: var(--Brand-1, #F0EDFF);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 10.74px;
|
||||
height: 10.50px;
|
||||
left: 0.63px;
|
||||
top: 0.75px;
|
||||
position: absolute;
|
||||
background: var(--Brand-6, #6D4CFE);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--Brand-6, #6D4CFE);
|
||||
font-size: 12px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.usage-info {
|
||||
padding: 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 {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.description {
|
||||
align-self: stretch;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.history-section {
|
||||
align-self: stretch;
|
||||
flex: 1 1 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.history-title {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.text {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.history-list {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.history-item {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.item-text {
|
||||
flex: 1 1 0;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
width: 8px;
|
||||
height: 240px;
|
||||
padding: 8px 1px;
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
|
||||
.indicator-bar {
|
||||
flex: 1 1 0;
|
||||
height: 80px;
|
||||
background: var(--BG-600, #939499);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
205
src/views/agent/chat/index.vue
Normal file
205
src/views/agent/chat/index.vue
Normal file
@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div class="px-4px h-full flex flex-col overflow-y-auto">
|
||||
<div class="back-wap cursor-pointer mb-17px mt--3px !w-fit" @click="goChatIndex">
|
||||
<icon-left size="16" class="color-#737478 mr-4px" />
|
||||
<span class="cs">返回空间</span>
|
||||
</div>
|
||||
<div class="workflow-container">
|
||||
<div class="left-wap mr-24px" v-if="isCollapsed == false">
|
||||
<div class="w-full w-100% mb-15px h-160px rounded-8px" v-image-main-color="cozeInfo.image_url">
|
||||
<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">
|
||||
<div class="text mr-4px">{{ cozeInfo?.name }}</div>
|
||||
<div class="tag-body">
|
||||
<div class="">
|
||||
<SvgIcon size="12" name="svg-chatbot" class="color-#6D4CFE" />
|
||||
</div>
|
||||
<div class="text">对话式</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="use-body flex items-center">
|
||||
<div class="num mr-2px">{{ formatNumberShow({ value: cozeInfo?.views, showExactValue: true }) }}</div>
|
||||
<div class="text">次使用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<div class="text">
|
||||
{{ cozeInfo?.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-wap">
|
||||
<div class="header">
|
||||
<div class="body">
|
||||
<div class="">
|
||||
<div class="toggle-btn cursor-pointer" @click="toggleCollapse">
|
||||
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
|
||||
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="coze-content" id="coze-chat-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { getChatAgent } from '@/api/all/agent';
|
||||
import { useRouter } from 'vue-router';
|
||||
import menuFold from '@/assets/svg/menu-fold.svg';
|
||||
import menuUnfold from '@/assets/svg/menu-unfold.svg';
|
||||
import { formatNumberShow } from '@/utils/tools';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 存储认证令牌
|
||||
const authToken = ref('');
|
||||
const isCollapsed = ref(false);
|
||||
|
||||
// 切换折叠状态
|
||||
const toggleCollapse = () => {
|
||||
isCollapsed.value = !isCollapsed.value;
|
||||
};
|
||||
|
||||
// 模拟从API获取token
|
||||
const fetchToken = async () => {
|
||||
// 实际开发中应替换为真实的 API 请求
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve('pat_' + Math.random().toString(36).substring(2, 15));
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
// 刷新token
|
||||
const refreshToken = async () => {
|
||||
authToken.value = await fetchToken();
|
||||
};
|
||||
|
||||
const goChatIndex = async () => {
|
||||
router.push({
|
||||
path: '/agent/index',
|
||||
});
|
||||
};
|
||||
|
||||
// 动态加载脚本函数
|
||||
const loadScript = (src) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = src;
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
const query = reactive({
|
||||
id: id,
|
||||
});
|
||||
|
||||
const cozeInfo = ref({
|
||||
title: '',
|
||||
description: '',
|
||||
image_url: '',
|
||||
bot_id: '',
|
||||
auth: {},
|
||||
});
|
||||
|
||||
let cozeWebSDK = null;
|
||||
const initChat = async () => {
|
||||
const { code, data } = await getChatAgent(query.id);
|
||||
if (code !== 200) {
|
||||
return false;
|
||||
}
|
||||
|
||||
Object.assign(cozeInfo.value, data.info);
|
||||
await loadScript('https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.17/libs/cn/index.js');
|
||||
let cozeConfig = await cozeWebSdkConfig(data.info.bot_id, data.info.name, data.info.auth, data.info.user_info);
|
||||
cozeWebSDK = cozeWebSDK = new CozeWebSDK.WebChatClient(cozeConfig);
|
||||
showChatPage();
|
||||
};
|
||||
|
||||
const cozeWebSdkConfig = (botId, name, auth, userInfo) => {
|
||||
auth.onRefreshToken = function () {
|
||||
return '';
|
||||
};
|
||||
let config = {
|
||||
config: {
|
||||
botId: botId,
|
||||
},
|
||||
ui: {
|
||||
chatBot: {
|
||||
el: document.getElementById('coze-chat-container'),
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
title: name,
|
||||
isNeedFunctionCallMessage: true,
|
||||
isNeedAudio: false,
|
||||
feedback: {
|
||||
isNeedFeedback: true,
|
||||
feedbackPanel: {
|
||||
title: '您对这个回答有什么看法？请告诉我们',
|
||||
placeholder: '请详细描述您的问题...',
|
||||
tags: [
|
||||
{
|
||||
label: '信息不正确',
|
||||
},
|
||||
{
|
||||
label: '涉及敏感信息',
|
||||
isNeedDetail: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
base: {
|
||||
icon: '',
|
||||
zIndex: 100,
|
||||
lang: 'zh-CN',
|
||||
},
|
||||
footer: {
|
||||
expressionText: '内容由AI生成，无法确保真实准确，仅供参考。',
|
||||
},
|
||||
header: {
|
||||
isShow: false,
|
||||
isNeedClose: false,
|
||||
},
|
||||
conversations: {
|
||||
isNeed: true,
|
||||
isNeedAddNewConversation: true,
|
||||
isNeedQuote: true,
|
||||
},
|
||||
},
|
||||
auth: auth,
|
||||
userInfo: userInfo,
|
||||
header: {
|
||||
isShow: false,
|
||||
isNeedClose: false,
|
||||
},
|
||||
};
|
||||
return config;
|
||||
};
|
||||
|
||||
const showChatPage = () => {
|
||||
cozeWebSDK.showChatBot();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChat();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
cozeWebSDK.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
286
src/views/agent/chat/style.scss
Normal file
286
src/views/agent/chat/style.scss
Normal file
@ -0,0 +1,286 @@
|
||||
.cs {
|
||||
color: #3C4043;
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.back-wap {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.workflow-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
.left-wap {
|
||||
width: 360px;
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
background: var(--BG-100, #F7F8FA);
|
||||
|
||||
// .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;
|
||||
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: $font-family-medium;
|
||||
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, #F0EDFF);
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
|
||||
.text {
|
||||
color: var(--Functional-Red-6, #6D4CFE);
|
||||
font-size: 12px;
|
||||
font-family: $font-family-medium;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.use-body {
|
||||
|
||||
.num {
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 16px;
|
||||
font-family: $font-family-manrope-medium;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: $font-family-regular;
|
||||
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: $font-family-regular;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.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;
|
||||
|
||||
}
|
||||
|
||||
.coze-content {
|
||||
align-self: stretch;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
display: inline-flex;
|
||||
:deep(.coze-chat-sdk) {
|
||||
border-radius: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
gap: 32px;
|
||||
display: inline-flex
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
102
src/views/agent/index/index.vue
Normal file
102
src/views/agent/index/index.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="agent-wrap relative h-full">
|
||||
<a-input
|
||||
v-model="query.name"
|
||||
@press-enter="getData()"
|
||||
placeholder="搜索智能体"
|
||||
size="large"
|
||||
allow-clear
|
||||
class="absolute right-0 top--10px !w-400px"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search @click="getData()" />
|
||||
</template>
|
||||
</a-input>
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<p class="span-title w-fit mb-16px">{{ item.name }}</p>
|
||||
<a-row class="grid-demo" :gutter="[20, 16]" v-if="item.agent_products.length > 0">
|
||||
<a-col :xs="24"
|
||||
:sm="12"
|
||||
:md="8"
|
||||
:lg="5"
|
||||
:xl="6"
|
||||
:xxl="4"
|
||||
v-for="(product, k) in item.agent_products" :key="k">
|
||||
<div class="card-container cursor-pointer !h-252px" @click="goDetail(product?.type, product?.id)">
|
||||
<div class="card-image h-120px w-100% bg-cover bg-center mb-8px" v-image-main-color="product.image_url">
|
||||
<img class="object-contain h-full w-100% " :src="product?.image_url"/>
|
||||
</div>
|
||||
|
||||
<div class="card-content w-full">
|
||||
<TextoverTips :context="product.name" class="card-title mb-4px !text-16px"/>
|
||||
<TextoverTips :context="product.description" class="card-description mb-8px color-#737478 text-14px lh-22px font-400" :line="2" />
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
<div
|
||||
:class="['status-tag', product.type === 1 ? 'blue-tag' : 'red-tag']"
|
||||
:style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #F0EDFF)' : 'var(--Functional-Red-1, #FFE9E7)' }"
|
||||
data-size="mini-20px"
|
||||
>
|
||||
<SvgIcon
|
||||
size="12"
|
||||
:class="product.type === 2 ? 'color-#F64B31' : 'color-#6D4CFE'"
|
||||
class="mr-4px"
|
||||
:name="product.type === 2 ? 'svg-workflow' : 'svg-chatbot'"
|
||||
alt="状态图标"
|
||||
/>
|
||||
<div class="status-text">{{ product.type === 1 ? '对话式' : '工作流' }}</div>
|
||||
</div>
|
||||
<div class="usage-info">
|
||||
<div class="usage-count mr-2px">{{ formatNumberShow({ value: product?.views, showExactValue: true }) }}</div>
|
||||
<div class="usage-label">次使用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<NoData v-else />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getAgentList } from '@/api/all/agent';
|
||||
import { formatNumberShow } from "@/utils/tools";
|
||||
import TextoverTips from "@/components/text-over-tips";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const list = ref([]);
|
||||
const getData = async () => {
|
||||
const { code, data } = await getAgentList(query);
|
||||
list.value = data;
|
||||
};
|
||||
|
||||
const query = reactive({
|
||||
name: '',
|
||||
});
|
||||
const goDetail = (type: number, id: number) => {
|
||||
if (type === 1) {
|
||||
router.push({
|
||||
path: '/agent/chat',
|
||||
query: { id: id },
|
||||
});
|
||||
} else if (type === 2) {
|
||||
router.push({
|
||||
path: '/agent/workFlow',
|
||||
query: { id: id },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
138
src/views/agent/index/style.scss
Normal file
138
src/views/agent/index/style.scss
Normal file
@ -0,0 +1,138 @@
|
||||
.agent-wrap {
|
||||
border-radius: 4px;
|
||||
|
||||
.ant-card-cover img {
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.grid-demo {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.span-title {
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 16px;
|
||||
font-family: $font-family-medium;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
.card-image {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
// overflow: hidden;
|
||||
|
||||
.card-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.card-title) {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-size: 16px;
|
||||
font-family: $font-family-medium;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
:deep(.card-description) {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 14px;
|
||||
font-family: $font-family-regular;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
:deep(.arco-input-wrapper) {
|
||||
|
||||
&.arco-textarea-wrapper {
|
||||
height: 60px;
|
||||
}
|
||||
.arco-input-prefix {
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.status-tag {
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
// gap: 4px;
|
||||
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
font-family: $font-family-medium;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.blue-tag {
|
||||
.status-text {
|
||||
color: var(--Functional-Blue-6, #6D4CFE);
|
||||
}
|
||||
}
|
||||
|
||||
.red-tag {
|
||||
.status-text {
|
||||
color: var(--Functional-Red-6, #F64B31);
|
||||
}
|
||||
}
|
||||
|
||||
.usage-info {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.usage-count,
|
||||
.usage-label {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: $font-family-regular;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
.usage-count {
|
||||
font-family: $font-family-manrope-regular;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
107
src/views/agent/work-flow/components/DynamicForm.vue
Normal file
107
src/views/agent/work-flow/components/DynamicForm.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<a-form :model="formData" ref="formRef" layout="vertical">
|
||||
<a-form-item
|
||||
v-for="(field, index) in formFields"
|
||||
:key="index"
|
||||
:label="field.props.label"
|
||||
:field="field.props.name"
|
||||
:rules="field.props.rules"
|
||||
:tooltip="field.props.tip"
|
||||
>
|
||||
<a-input
|
||||
allowClear
|
||||
v-if="field.type === 'input'"
|
||||
v-model="formData[field.props.name]"
|
||||
:placeholder="field?.props?.placeholder"
|
||||
/>
|
||||
<a-textarea
|
||||
v-if="field.type === 'textarea'"
|
||||
style="width: 500px; height: 200px"
|
||||
v-model="formData[field.props.name]"
|
||||
:placeholder="field?.props?.placeholder"
|
||||
/>
|
||||
<a-color-picker v-if="field.type === 'color_picker'"
|
||||
style="width: 500px; height: 200px"
|
||||
v-model="formData[field.props.name]" />
|
||||
<ImageUpload
|
||||
v-if="field.type == 'upload_image'"
|
||||
v-model="formData[field.props.name]"
|
||||
:limit="field.props.limit"
|
||||
></ImageUpload>
|
||||
<FileUpload
|
||||
v-if="field.type == 'upload_file'"
|
||||
v-model="formData[field.props.name]"
|
||||
:limit="field.props.limit"
|
||||
></FileUpload>
|
||||
<a-select
|
||||
v-else-if="field.type === 'select'"
|
||||
v-model="formData[field.props.name]"
|
||||
:placeholder="field.placeholder"
|
||||
>
|
||||
<a-option v-for="(option, optIndex) in field.props.options" :key="optIndex" :value="option.value">
|
||||
{{ option.label }}
|
||||
</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import ImageUpload from '@/components/upload/ImageUpload.vue';
|
||||
import FileUpload from '@/components/upload/FileUpload.vue';
|
||||
|
||||
const props = defineProps({
|
||||
formFields: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['submit']);
|
||||
const formRef = ref(null);
|
||||
const handleSubmit = async () => {
|
||||
const errors = await formRef.value.validate();
|
||||
if (errors) return;
|
||||
console.log(props.formFields, 'props.formFields');
|
||||
emit('submit', props.formData);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.form-container {
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-textarea-wrapper) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
height: 35px;
|
||||
width: 300px;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
src/views/agent/work-flow/components/HistoryChat.vue
Normal file
20
src/views/agent/work-flow/components/HistoryChat.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
import workflow from '@/assets/svg/svg-workflow.svg';
|
||||
|
||||
const props = defineProps({
|
||||
cozeInfo: {
|
||||
type: Object as () => any,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import './history.scss';
|
||||
</style>
|
||||
211
src/views/agent/work-flow/components/history.scss
Normal file
211
src/views/agent/work-flow/components/history.scss
Normal file
@ -0,0 +1,211 @@
|
||||
|
||||
.agent-card {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
background: var(--BG-100, #F7F8FA);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.header-section {
|
||||
align-self: stretch;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.image-container {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.title-group {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 10px 24px 0 24px;
|
||||
.title {
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 18px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
height: 20px;
|
||||
padding: 0 8px;
|
||||
background: var(--Functional-Red-1, #FFE9E7);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 10.74px;
|
||||
height: 10.50px;
|
||||
left: 0.63px;
|
||||
top: 0.75px;
|
||||
position: absolute;
|
||||
background: var(--Brand-6, #6D4CFE);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--Functional-Red-6, #F64B31);
|
||||
font-size: 12px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.usage-info {
|
||||
padding: 12px;
|
||||
margin-right: 12px;
|
||||
margin-top: 10px;
|
||||
.count {
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 16px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description-section {
|
||||
align-self: stretch;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-left: 24px;
|
||||
.description {
|
||||
align-self: stretch;
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.history-section {
|
||||
align-self: stretch;
|
||||
flex: 1 1 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.history-title {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.text {
|
||||
color: var(--Functional-Red-6, #F64B31);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.history-list {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.history-item {
|
||||
align-self: stretch;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.item-text {
|
||||
flex: 1 1 0;
|
||||
color: var(--Text-1, #211F24);
|
||||
font-size: 14px;
|
||||
font-family: 'Alibaba PuHuiTi', sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
width: 8px;
|
||||
height: 240px;
|
||||
padding: 8px 1px;
|
||||
position: absolute;
|
||||
left: 362px;
|
||||
top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
|
||||
.indicator-bar {
|
||||
flex: 1 1 0;
|
||||
height: 80px;
|
||||
background: var(--BG-600, #939499);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
310
src/views/agent/work-flow/index.vue
Normal file
310
src/views/agent/work-flow/index.vue
Normal file
@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class="h-full overflow-hidden flex flex-col">
|
||||
<div class="back-wap cursor-pointer mb-20px" @click="goChatIndex">
|
||||
<icon-left size="16" class="color-#737478 mr-4px" />
|
||||
<span class="cs">返回空间</span>
|
||||
</div>
|
||||
<div class="workflow-container flex-1">
|
||||
<div class="left-wap mr-24px" v-if="isCollapsed == false">
|
||||
<div class="w-full w-100% mb-15px h-160px rounded-8px" v-image-main-color="cozeInfo.image_url">
|
||||
<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">
|
||||
<div class="text mr-4px">{{ cozeInfo.name }}</div>
|
||||
<div data-尺寸="迷你-20px" data-颜色="red" class="tag-body">
|
||||
<div class="">
|
||||
<SvgIcon size="12" name="svg-workflow" class="color-#F64B31" />
|
||||
</div>
|
||||
<div class="text">工作流</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="use-body flex items-center">
|
||||
<div class="num mr-2px">{{ formatNumberShow({ value: cozeInfo?.views, showExactValue: true }) }}</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" v-for="(item, index) in history" :key="index">
|
||||
<div class="item-body">
|
||||
<div class="text ellipsis-title" @click="getHistoryInfo(item)">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="trigger-container">
|
||||
<a-trigger
|
||||
mouse-leave-delay="200"
|
||||
position="top"
|
||||
trigger="hover"
|
||||
:auto-fit-position="false"
|
||||
:unmount-on-close="true"
|
||||
>
|
||||
<SvgIcon size="12" name="svg-more" class="icon-more" />
|
||||
<template #content>
|
||||
<div class="">
|
||||
<div class="history-item-dropdown">
|
||||
<div class="dropdown-item">
|
||||
<SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />
|
||||
<div @click="(event) => handleTop(item.id, item.sort, event)" class="text">
|
||||
{{ item.sort > 0 ? '取消置顶' : '置顶' }}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-wap">
|
||||
<div class="header">
|
||||
<div class="body">
|
||||
<div class="">
|
||||
<div class="toggle-btn cursor-pointer" @click="toggleCollapse">
|
||||
<a-tooltip :content="isCollapsed ? '展开' : '折叠'">
|
||||
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content flex-1">
|
||||
<div class="form !h-full">
|
||||
<DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
|
||||
</div>
|
||||
<div class="res h-full">
|
||||
<a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
|
||||
<div
|
||||
class="markdown-container"
|
||||
v-if="workFlowRes.output != '' && loading === false"
|
||||
v-html="renderedMarkdown"
|
||||
></div>
|
||||
<NoData v-if="workFlowRes.output == '' && loading === false" />
|
||||
</div>
|
||||
</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,
|
||||
topWorkflowHistoryApi,
|
||||
getWorkflowHistoryListApi,
|
||||
cancelTopWorkflowHistoryApi,
|
||||
} 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 { WORKEXECUTE_STATUS } from '../AgentConstants.ts';
|
||||
|
||||
const editHistoryVisible = ref(false);
|
||||
|
||||
const formFields = ref({});
|
||||
const history = ref([]);
|
||||
// 是否折叠状态
|
||||
const isCollapsed = ref(false);
|
||||
|
||||
// 切换折叠状态
|
||||
const toggleCollapse = () => {
|
||||
isCollapsed.value = !isCollapsed.value;
|
||||
};
|
||||
// 表单数据对象（动态生成初始值）
|
||||
const formData = ref({});
|
||||
|
||||
const route = useRoute();
|
||||
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({
|
||||
name: '',
|
||||
description: '',
|
||||
icon_url: '',
|
||||
workflow_id: '',
|
||||
id: 0,
|
||||
});
|
||||
const getData = async () => {
|
||||
const { code, data } = await getWorkFlowInfo(query.id);
|
||||
console.log(data.info,'data.info')
|
||||
Object.assign(cozeInfo, data.info);
|
||||
formFields.value = data.form_config;
|
||||
history.value = data.history;
|
||||
};
|
||||
const workFlowRes = reactive({
|
||||
output: '',
|
||||
execute_id: '',
|
||||
});
|
||||
|
||||
// 渲染 Markdown 的计算属性
|
||||
const renderedMarkdown = computed(() => {
|
||||
if (workFlowRes?.output) {
|
||||
const rawHtml = marked.parse(workFlowRes.output || '');
|
||||
return DOMPurify.sanitize(rawHtml);
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
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 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 {
|
||||
const param = { form_data: formData, id: cozeInfo.id };
|
||||
console.log(param,'param')
|
||||
workFlowRes.output = '';
|
||||
loading.value = true;
|
||||
const { code, data } = await executeWorkFlow(param);
|
||||
if (code === 200) {
|
||||
workFlowRes.execute_id = data.execute_id;
|
||||
startTask();
|
||||
}
|
||||
} catch (error) {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const timerRef = ref(null);
|
||||
const startTask = () => {
|
||||
if (timerRef.value !== null) return;
|
||||
timerRef.value = setInterval(async () => {
|
||||
getSyncWorkflowTask();
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
const getSyncWorkflowTask = async () => {
|
||||
try {
|
||||
const { code, data } = await getSyncWorkflowTaskApi({
|
||||
execute_id: workFlowRes.execute_id,
|
||||
workflow_id: cozeInfo.workflow_id,
|
||||
});
|
||||
if (code === 200) {
|
||||
if (data.execute_status === 'Success' || data.execute_status === 'Fail') {
|
||||
workFlowRes.output = data.output;
|
||||
clearTimeout();
|
||||
if (!isEmpty(data.history)) {
|
||||
addHistoryItem(data.history);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
clearTimeout();
|
||||
}
|
||||
};
|
||||
|
||||
const clearTimeout = async () => {
|
||||
clearInterval(timerRef.value);
|
||||
timerRef.value = null;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const addHistoryItem = (item) => {
|
||||
history.value.unshift(item);
|
||||
};
|
||||
|
||||
const getHistoryInfo = (item) => {
|
||||
formData.value = item.param;
|
||||
workFlowRes.output = item.output;
|
||||
|
||||
console.log(formData.value, 'formData');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
379
src/views/agent/work-flow/style.scss
Normal file
379
src/views/agent/work-flow/style.scss
Normal file
@ -0,0 +1,379 @@
|
||||
.cs {
|
||||
color: #3C4043;
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.back-wap {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.workflow-container {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
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;
|
||||
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: $font-family-medium;
|
||||
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: $font-family-medium;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.use-body {
|
||||
|
||||
.num {
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 16px;
|
||||
font-family: $font-family-manrope-medium;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--Text-3, #737478);
|
||||
font-size: 12px;
|
||||
font-family: $font-family-regular;
|
||||
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: $font-family-regular;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
// padding: 10px;
|
||||
|
||||
.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: $font-family-regular;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
}
|
||||
|
||||
.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: $font-family-regular;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.ellipsis-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
.trigger-container {
|
||||
.icon-more {
|
||||
visibility: hidden;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: var(--BG-200, #E6E6E8);
|
||||
.trigger-container .icon-more {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 32px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
display: inline-flex;
|
||||
:deep(.markdown-container img) {
|
||||
max-width: 100% !important;
|
||||
max-height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user