vue-vben-admin/apps/web-antd/src/views/spider/index.vue

<script lang="ts" setup>
import { ref } from 'vue';

import { SpiderListView, SpiderWorkView } from '@vben/common-ui';

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

import {
  getSpiderStatus,
  getWorkflowInfo,
  getWorkflowList,
  runSpider,
  sendWorkflow,
  stopSpider,
} from '#/api';
// sendWorkflow
interface TempItem {
  id: string;
  name: string;
  url: string;
}

interface ResultItem {
  key: number;
  role: 'ai' | 'user';
  content: string;
  footer?: any;
}
interface WordFlowItem {
  id: string;
  workflowRunId: string;
  taskId: string;
  userId: string;
  appId: string;
}

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

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

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

async function handleClickMode(item: TempItem) {
  notification.success({
    message: `${item.name}`,
    description: '已选取',
    duration: 3,
  });
  temp.value = item;
  getLogs(item.id);
}

// onMounted(() => {
//   getLogs(spiderList.value[0].id);
// });
</script>

<template>
  <div class="layout">
    <div class="lg:w-1/5">
      <SpiderListView
        title="选择模板"
        :items="hitsory"
        :loading="loading"
        @click-mode="handleClickMode"
        @click="handleClick"
      />
    </div>
    <SpiderWorkView
      title="目标网址："
      :item="temp"
      :run-spider="runSpider"
      :stop-spider="stopSpider"
      :get-spider-status="getSpiderStatus"
      :send-workflow="sendWorkflow"
      :item-message="itemMessage"
    />
  </div>
</template>

<style scoped lang="less">
.layout {
  width: 100%;
  min-width: 1400px;
  height: 100%;
  display: flex;
  background: hsl(216deg 21.74% 95.49%);
  font-family: AlibabaPuHuiTi, v-deep(var(--ant-font-family)), sans-serif;
  border-radius: v-deep(var(--ant-border-radius));
}
</style>