lingji-work-fe/src/views/Agent/Index/index.vue

<template>
  <div class="agent-wrap">
    <a-input
      style="float: right; width: 300px"
      v-model="query.title"
      @blur="getData()"
      placeholder="搜索智能体"
      size="medium"
      allow-clear
    >
      <template #prefix>
        <icon-search />
      </template>
    </a-input>
    <div v-for="(item, index) in list" :key="index">
      <span class="span-title">{{ item.name }}</span>
      <a-row class="grid-demo" :gutter="24" v-if="item.agent_products.length > 0">
        <a-col :span="3" v-for="(product, k) in item.agent_products">
          <div class="card-container" @click="goDetail(product?.type, product?.id)">
            <div class="card-image-container">
              <img class="card-image" :src="product?.icon_url" />
            </div>
            <div class="card-content">
              <div class="card-title">{{ product?.name }}</div>
              <div class="card-description">{{ product?.description }}</div>
            </div>
            <div class="card-footer">
              <div
                :class="['tag', { red: product?.type === 1, blue: product?.type === 2 }]"
              >
                <div
                  :class="[
                    'tag-text',
                    { red: product?.type === 1, blue: product?.type === 2 },
                  ]"
                >
                  {{ product?.type == 1 ? '对话式' : '工作流' }}
                </div>
              </div>
              <div class="usage-info">
                <span class="usage-count">{{ product?.views }}</span>
                <span class="usage-label">次使用</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>

      <NoData v-else />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { getAgentList } from '@/api/all/agent';

const router = useRouter();

const list = ref([]);
const getData = async () => {
  const { code, data } = await getAgentList(query);
  list.value = data;
};

const query = reactive({
  title: '',
});
const goDetail = (type: number, id: number) => {

  if (type === 1) {
    router.push({
      path: '/agent/chat',
      query: { id: id },
    });
  } else if (type === 2) {
    router.push({
      path: '/agent/workFlow',
      query: { id: id },
    });
  }
};

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

<style scoped lang="scss">
@import './style.scss';
</style>