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

<template>
  <div>
    <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">
      <div class="left-wap mr-24px" v-if="isCollapsed == false">
        <div class="w-full w-100% mb-15px h-160px rounded-8px bg-#E6E6E8" 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">
            <div class="item-body">
              <div class="text" @click="getHistoryInfo(item)">
                {{ item.title }}
                <!--                <a-trigger position="top" auto-fit-position :unmount-on-close="false">-->
                <!--                  <SvgIcon size="12" name="svg-more" class="color-#6D4CFE" style="float: right" />-->
                <!--                  <template #content>-->
                <!--                    <div class="">-->
                <!--                      <div class="history-item-dropdown">-->
                <!--                        <div class="dropdown-item header-item">-->
                <!--                          <SvgIcon size="12" name="svg-pin" class="icon color-#6D4CFE" />-->
                <!--                          <div class="text">置顶</div>-->
                <!--                        </div>-->
                <!--                        <div class="dropdown-item">-->
                <!--                          <SvgIcon size="12" name="svg-edit" class="icon color-#6D4CFE" />-->
                <!--                          <div class="text">重命名</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">
          <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, delWorkflowHistoryApi, getSyncWorkflowTaskApi } 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 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: '',
  execute_id: '',
});

// 渲染 Markdown 的计算属性
const renderedMarkdown = computed(() => {
  if (workFlowRes?.output) {
    const rawHtml = marked.parse(workFlowRes.output || '');
    return DOMPurify.sanitize(rawHtml); // 防止 XSS 攻击
  }
  return '';
});

const deleteHistory = async (id, index) => {
  const { code } = await delWorkflowHistoryApi(id);
  if (code === 200) {
    //
    history.value.splice(index, 1);
  }
};

// 提交表单
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) {
      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();
      }
    }
  } 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>