refactor(Agent/Chat): 使用 cozeInfo 替代 botId 获取聊天记录
- 移除了 HistoryChat 组件中的 botId属性 - 使用 cozeInfo.bot_id 替代 botId 获取历史聊天数据
This commit is contained in:
林志军
92
src/views/agent/work-flow/components/DynamicForm.vue
Normal file
92
src/views/agent/work-flow/components/DynamicForm.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
<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 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 {
|
||||
padding: 24px;
|
||||
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-textarea-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
45
src/views/agent/work-flow/components/HistoryChat.vue
Normal file
45
src/views/agent/work-flow/components/HistoryChat.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<a-layout-sider width="250" style="background: #fff">
|
||||
<div class="logo">
|
||||
<img :src="cozeInfo?.icon_url" class="agent-img" />
|
||||
</div>
|
||||
<a-menu mode="inline" theme="light">
|
||||
<a-menu-item key="1">
|
||||
<span>{{ cozeInfo.name }}</span>
|
||||
<span style="color: #8492ff; font-size: 12px">{{ cozeInfo.type == 1 ? '智能体' : '对话式' }}</span>
|
||||
<span style="float: right">{{ cozeInfo.views }}次使用 </span>
|
||||
</a-menu-item>
|
||||
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
cozeInfo: {
|
||||
type: Object as () => any,
|
||||
default: () => ({}),
|
||||
},
|
||||
botId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.agent-img {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
100
src/views/agent/work-flow/index.vue
Normal file
100
src/views/agent/work-flow/index.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="chat-wrap">
|
||||
<span class="" @click="goChatIndex"> <icon-left /> 返回空间 </span>
|
||||
|
||||
<div class="chat-contain">
|
||||
<a-layout>
|
||||
<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" :loading="loading" @submit="handleSubmit" />
|
||||
</a-layout-sider>
|
||||
<a-layout-content ref="contentRef" class="content-container">
|
||||
<a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
|
||||
<div v-if="workFlowRes?.output != ''" class="work-res" v-html="renderedMarkdown"></div>
|
||||
<NoData v-else />
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import HistoryChat from './components/historyChat.vue';
|
||||
import DynamicForm from './components/DynamicForm.vue';
|
||||
import { executeWorkFlow, getWorkFlowInfo } from '@/api/all/agent';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { marked } from 'marked';
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
const formFields = ref([]);
|
||||
|
||||
// 表单数据对象（动态生成初始值）
|
||||
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: '',
|
||||
});
|
||||
const getData = async () => {
|
||||
const { code, data } = await getWorkFlowInfo(query.id);
|
||||
Object.assign(cozeInfo, data.info);
|
||||
formFields.value = data.form_config;
|
||||
};
|
||||
const workFlowRes = reactive({
|
||||
output: '',
|
||||
});
|
||||
|
||||
// 渲染 Markdown 的计算属性
|
||||
const renderedMarkdown = computed(() => {
|
||||
if (workFlowRes?.output) {
|
||||
const rawHtml = marked.parse(workFlowRes.output || '');
|
||||
return DOMPurify.sanitize(rawHtml); // 防止 XSS 攻击
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
// 提交表单
|
||||
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);
|
||||
if (code === 200) {
|
||||
Object.assign(workFlowRes, data.data);
|
||||
loading.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error, 'error');
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
57
src/views/agent/work-flow/style.scss
Normal file
57
src/views/agent/work-flow/style.scss
Normal file
@ -0,0 +1,57 @@
|
||||
.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;
|
||||
|
||||
.span-back {
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
line-height: 62px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
}
|
||||
|
||||
.span-back {
|
||||
color: var(--Text-2, #3C4043);
|
||||
font-size: 14px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
.content-container {
|
||||
width: 40%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.work-res-span {
|
||||
padding: 24px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.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