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

<script lang="ts" setup>
// sendWorkflow
import type { ResultItem, TempItem, WordFlowItem } from './typing';

import { ref } from 'vue';

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

import {
  getSpiderStatus,
  getWorkflowInfo,
  getWorkflowList,
  runSpider,
  runSpiderGz,
  stopSpider,
} from '#/api';

import { SelfWorkView, SpiderListView, WorkflowWorkView } from './components';

const hitsory = ref([]);
const loading = ref(true);
const temp = ref({
  id: '',
  name: '',
  url: '',
});
const itemMessage = ref<ResultItem[]>([]);

//  获取日志
const getLogs = async (appid: string, limit: number) => {
  loading.value = true;
  hitsory.value = await getWorkflowList({
    appid,
    limit,
  });
  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, 5);
}

// 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>
    <SelfWorkView
      v-if="temp.id === '77c068fd-d5b6-4c33-97d8-db5511a09b26'"
      title="目标网址："
      :item="temp"
      :run-spider="runSpider"
      :stop-spider="stopSpider"
      :get-spider-status="getSpiderStatus"
      :run-spider-gz="runSpiderGz"
      :item-message="itemMessage"
    />
    <WorkflowWorkView
      v-else
      title="目标网址："
      :item="temp"
      :run-spider="runSpider"
      :stop-spider="stopSpider"
      :get-spider-status="getSpiderStatus"
      :run-spider-gz="runSpiderGz"
      :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>