lingji-work-fe/src/views/agent/work-flow/index.vue

<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>