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

<template>
  <div>
    <span class="back-wap" @click="goChatIndex"> <icon-left /> 返回空间 </span>
    <div class="workflow-container">
      <div class="left-wap" v-if="isCollapsed == false">
        <div class="header">
          <div class="image-body">
            <img :src="cozeInfo.image_url" />
          </div>
        </div>
        <div class="content">
          <div class="title-body">
            <div class="text">{{ cozeInfo.name }}</div>
            <div data-尺寸="迷你-20px" data-颜色="red" class="tag-body">
              <div class="">
                <img class="status-icon" :src="workflow" />
              </div>
              <div class="text">工作流</div>
            </div>
          </div>
          <div class="use-body">
            <div class="num">{{ cozeInfo.views }}</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">
            <div class="item-body">
              <div class="text" @click="getHistoryInfo(item)">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-wap">
        <div class="header">
          <div class="body">
            <div class="">
              <div class="toggle-btn" @click="toggleCollapse">
                <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
                  <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
                </a-tooltip>
              </div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="form">
            <DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
          </div>
          <div class="res">
            <a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
            <div v-if="workFlowRes.output != '' && loading === false" v-html="renderedMarkdown"></div>
            <NoData v-if="workFlowRes.output == '' && loading === false" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from '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';
import workflow from '@/assets/svg/workflow.svg';

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: '',
});
const getData = async () => {
  const { code, data } = await getWorkFlowInfo(query.id);
  Object.assign(cozeInfo, data.info);
  formFields.value = data.form_config;
  history.value = data.history;
};
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 };
    workFlowRes.output = '';
    loading.value = true;
    const { code, data } = await executeWorkFlow(param);
    if (code === 200) {
      Object.assign(workFlowRes, data.data);
      loading.value = false;
      console.log(data.history_item, 'data.history_item');
      addHistoryItem(data.history_item);
    }
  } catch (error) {
    loading.value = false;
  }
};

const addHistoryItem = (item) => {
  history.value.unshift(item);

};

const getHistoryInfo = (item) => {
  formData.value = item.param;
  workFlowRes.output = item.result.output;

  console.log(formData.value, 'formData');
};

onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
@import './style.scss';
</style>