lingji-work-fe/src/views/agent/index/index.vue

<template>
  <div class="agent-wrap relative h-full pl-16px">
    <Input
      v-model:value="query.name"
      @press-enter="getData()"
      placeholder="搜索智能体"
      size="large"
      allow-clear
      class="absolute right-0 top-4px !w-400px"
    >
      <template #prefix>
        <icon-search @click="getData()" />
      </template>
    </Input>
    <div v-for="(item, index) in list" :key="index">
      <p class="span-title w-fit mb-16px">{{ item.name }}</p>
      <Row class="grid-demo" :gutter="[20, 16]" v-if="item.agent_products.length > 0">
        <Col :xs="24" :sm="12" :md="8" :lg="5" :xl="6" :xxl="4" v-for="(product, k) in item.agent_products" :key="k">
          <div class="card-container cursor-pointer !h-252px" @click="goDetail(product?.type, product?.id)">
            <div class="card-image h-120px w-100% bg-cover bg-center mb-8px" v-image-main-color="product.image_url">
              <img class="object-contain h-full w-100%" :src="product?.image_url" />
            </div>

            <div class="card-content w-full">
              <TextOverTips :context="product.name" class="card-title mb-4px !text-16px" />
              <TextOverTips
                :context="product.description"
                class="card-description mb-8px color-#737478 text-14px lh-22px font-400"
                :line="2"
              />
            </div>

            <div class="card-footer">
              <div
                :class="['status-tag', product.type === 1 ? 'blue-tag' : 'red-tag']"
                :style="{
                  background:
                    product.type === 1 ? 'var(--Functional-Blue-1, #F0EDFF)' : 'var(--Functional-Red-1, #FFE9E7)',
                }"
                data-size="mini-20px"
              >
                <SvgIcon
                  size="12"
                  :class="product.type === 2 ? 'color-#F64B31' : 'color-#6D4CFE'"
                  class="mr-4px"
                  :name="product.type === 2 ? 'svg-workflow' : 'svg-chatbot'"
                  alt="状态图标"
                />
                <div class="status-text">{{ product.type === 1 ? '对话式' : '工作流' }}</div>
              </div>
              <div class="usage-info">
                <div class="usage-count mr-2px">
                  {{ formatNumberShow({ value: product?.views, showExactValue: true }) }}
                </div>
                <div class="usage-label">次使用</div>
              </div>
            </div>
          </div>
        </Col>
      </Row>

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

<script setup lang="ts">
import { Input, Row, Col } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { getAgentList } from '@/api/all/agent';
import { formatNumberShow } from '@/utils/tools';
import TextOverTips from '@/components/text-over-tips';

const router = useRouter();

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

const query = reactive({
  name: '',
});
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>