103 lines
3.2 KiB
Vue
103 lines
3.2 KiB
Vue
<template>
|
|
<div class="agent-wrap relative h-full">
|
|
<a-input
|
|
v-model="query.name"
|
|
@press-enter="getData()"
|
|
placeholder="搜索智能体"
|
|
size="large"
|
|
allow-clear
|
|
class="absolute right-0 top--10px !w-400px"
|
|
>
|
|
<template #prefix>
|
|
<icon-search @click="getData()" />
|
|
</template>
|
|
</a-input>
|
|
<div v-for="(item, index) in list" :key="index">
|
|
<p class="span-title w-fit mb-16px">{{ item.name }}</p>
|
|
<a-row class="grid-demo" :gutter="[20, 16]" v-if="item.agent_products.length > 0">
|
|
<a-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>
|
|
</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';
|
|
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>
|