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-row class="grid-layout">
        <!-- 左侧历史聊天 -->
        <a-col :xs="isCollapsed ? 0 : 3"
               :sm="isCollapsed ? 0 : 3"
               :md="isCollapsed ? 0 : 4"
               :lg="isCollapsed ? 0 : 6"
               :xl="isCollapsed ? 0 : 4"
               :xxl="isCollapsed ? 0 : 5" class="history-chat">
          <HistoryChat v-if="!isCollapsed" :cozeInfo="cozeInfo" />

        </a-col>
        <div class="toggle-btn" @click="toggleCollapse">
          <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
            <img class="status-icon" :src="isCollapsed ? menuFold : menuUnfold" />
          </a-tooltip>
        </div>
        <!-- 动态表单 -->
        <a-col  :xs="isCollapsed ? 3 : 3"
                :sm="isCollapsed ? 3 : 3"
                :md="isCollapsed ? 4 : 4"
                :lg="isCollapsed ? 6 : 6"
                :xl="isCollapsed ? 4 : 4"
                :xxl="isCollapsed ? 5 : 5" class="dynamic-form">
          <DynamicForm
            :formFields="formFields.form"
            :formData="formData"
            :loading="loading"
            @submit="handleSubmit"
          />
        </a-col>

        <!-- 主内容区域 -->
        <a-col  :xs="isCollapsed ? 4 : 2"
                :sm="isCollapsed ? 4 : 4"
                :md="isCollapsed ? 6 : 6"
                :lg="isCollapsed ? 8 : 8"
                :xl="isCollapsed ? 10 : 10"
                :xxl="isCollapsed ? 12 : 12" 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-col>
      </a-row>
    </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';
import menuFold from '@/assets/svg/menu-fold.svg';
import menuUnfold from '@/assets/svg/menu-unfold.svg';

const formFields = 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: '',
});
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) => {
  try {
    const param = { form_data: formData, workflow_id: cozeInfo.workflow_id, bot_id: formFields.value.bot_id };
    console.log(param, 'param');
    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>