perf: 样式调整

src/views/agent/index/index.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="agent-wrap">
+  <div class="agent-wrap relative">
     <a-input
-      style="float: right;"
       v-model="query.name"
       @blur="getData()"
       placeholder="搜索智能体"
-      size="medium"
+      size="large"
       allow-clear
+      class="absolute right-0 top-0 !w-400px"
     >
       <template #prefix>
         <icon-search />
       </template>
     </a-input>
     <div  v-for="(item, index) in list" :key="index">
-      <span class="span-title">{{ item.name }}</span>
+      <p class="span-title mb-16px">{{ item.name }}</p>
       <a-row class="grid-demo " :gutter="24" v-if="item.agent_products.length > 0">
         <a-col  :xs="24"
                 :sm="12"
@@ -22,17 +22,14 @@
                 :xl="6"
                 :xxl="4"
                 v-for="(product, k) in item.agent_products">
-          <div class="card-container" @click="goDetail(product?.type, product?.id)">
-            <div class="card-image-container">
+          <div class="card-container cursor-pointer" @click="goDetail(product?.type, product?.id)">
               <img
-                class="card-image"
+                class="card-image h-120px object-contain w-100% mb-8px bg-#F0EDFF"
                 :src="product?.icon_url"
-                style="width: 100%; height: 100%; object-fit: cover;"
               />
-            </div>
             <div class="card-content">
-              <div class="card-title">{{ product?.name }}</div>
-              <div class="card-description">{{ product?.description }}</div>
+              <div class="card-title mb-4px">{{ product?.name }}</div>
+              <div class="card-description mb-8px">{{ product?.description }}</div>
             </div>
 
             <div class="card-footer">
@@ -41,15 +38,17 @@
                 :style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #F0EDFF)' : 'var(--Functional-Red-1, #FFE9E7)' }"
                 data-size="mini-20px"
               >
-                <img
-                  class="status-icon"
-                  :src="product.type === 2 ? workflowIcon : chatbotIcon"
+                <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">{{ product.views }}</div>
+                <div class="usage-count mr-2px">{{ formatNumberShow({ value: product?.views, showExactValue: true }) }}</div>
                 <div class="usage-label">次使用</div>
               </div>
             </div>
@@ -65,8 +64,8 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { getAgentList } from '@/api/all/agent';
-import workflowIcon from '@/assets/svg/workflow.svg';
-import chatbotIcon from '@/assets/svg/chatbot.svg';
+import { formatNumberShow } from "@/utils/tools"
+
 const router = useRouter();
 
 const list = ref([]);