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

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

import { onMounted, ref } from 'vue';

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

import { getAppList, sendWorkflow } from '#/api';

const spiderList = ref<SpiderItem[]>([]);
const loading = ref(true);
const spider = ref<SpiderItem>();

const getFlowList = async () => {
  const res = await getAppList({});
  if (res) {
    spiderList.value = res;
    loading.value = false;
  }
};

function handleClick(item: SpiderItem) {
  spider.value = item;
}

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

<template>
  <div class="px-5">
    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-1/4">
        <SpiderListView
          :loading="loading"
          :items="spiderList"
          title="数据爬取工具"
          @click="handleClick"
        />
      </div>
      <div class="w-full lg:w-3/4">
        <SpiderWorkView
          :item="spider"
          :run-spider="sendWorkflow"
          title="目标网址："
        />
      </div>
    </div>
  </div>
</template>