84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
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>
|