dify-proxy-fontend/apps/web-antd/src/views/ppt/index.vue

<script lang="ts" setup>
import type { PPTTempItem } from '@vben/common-ui';

import { onMounted, reactive, ref } from 'vue';

import { PptHistoryView, PptListView, PptWorkView } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { getWorkflowInfo, getWorkflowList, sendWorkflow } from '#/api';

let temp = reactive<PPTTempItem>({
  id: 'ee3889b6-50fa-463e-b956-3b93447727fc',
  name: '从可研申报书生成科技项目PPT',
});
interface ResultItem {
  key: number;
  role: 'ai' | 'user';
  content: string;
  footer?: any;
}

const hitsory = ref([]);
const loading = ref(true);
const itemMessage = ref<ResultItem[]>([]);

const getLogs = async (appid: string) => {
  loading.value = true;
  const res = await getWorkflowList({
    appid,
    limit: 5,
    page: 1,
  });
  hitsory.value = res;
  loading.value = false;
};

async function handleClick(item: PPTTempItem) {
  temp = item;
  const res = await getWorkflowInfo({
    appid: temp.appId,
    workflowRunId: item.workflowRunId,
  });
  itemMessage.value = [];
  if (res.inputs) {
    itemMessage.value.push({
      key: itemMessage.value.length + 1,
      role: 'user',
      content: res.inputs.declarationDoc,
    });
  }
  if (res.outputs) {
    itemMessage.value.push({
      key: itemMessage.value.length + 1,
      role: 'ai',
      content: res.outputs.result,
    });
  }
}

async function handleClickMode(item: PPTTempItem) {
  message.success(`已选取${item.name}为模板`);
  temp = item;
}

onMounted(() => {
  getLogs(temp.id);
});
</script>

<template>
  <div class="pr-5" style="height: calc(100vh - 80px)">
    <div class="flex h-full flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-1/6">
        <PptHistoryView
          :loading="loading"
          :items="hitsory"
          title="运行历史"
          @click="handleClick"
        />
        <PptListView title="选择模板" @click="handleClickMode" />
      </div>
      <div class="h-full w-full lg:w-5/6">
        <PptWorkView
          :item="temp"
          :run-workflow="sendWorkflow"
          :item-message="itemMessage"
        />
      </div>
    </div>
  </div>
</template>