perf: 卡片入口视觉效果重做

easyflow-ui-admin/app/src/views/ai/documentCollection/DocumentCollection.vue

@@ -1,29 +1,22 @@
 <script setup lang="ts">
-import type { FormInstance } from 'element-plus';
+import type {FormInstance} from 'element-plus';
+import {ElForm, ElFormItem, ElInput, ElInputNumber, ElMessage, ElMessageBox,} from 'element-plus';
 
-import type { ActionButton } from '#/components/page/CardList.vue';
+import type {ActionButton, CardPrimaryAction,} from '#/components/page/CardList.vue';
+import CardPage from '#/components/page/CardList.vue';
 
-import { computed, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
+import {computed, onMounted, ref} from 'vue';
+import {useRouter} from 'vue-router';
 
-import { EasyFlowFormModal } from '@easyflow/common-ui';
-import { $t } from '@easyflow/locales';
+import {EasyFlowFormModal} from '@easyflow/common-ui';
+import {$t} from '@easyflow/locales';
 
-import { Delete, Edit, Notebook, Plus, Search } from '@element-plus/icons-vue';
-import {
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElInputNumber,
-  ElMessage,
-  ElMessageBox,
-} from 'element-plus';
-import { tryit } from 'radash';
+import {Delete, Edit, Notebook, Plus, Search} from '@element-plus/icons-vue';
+import {tryit} from 'radash';
 
-import { api } from '#/api/request';
+import {api} from '#/api/request';
 import defaultIcon from '#/assets/ai/knowledge/book.svg';
 import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
-import CardPage from '#/components/page/CardList.vue';
 import PageData from '#/components/page/PageData.vue';
 import PageSide from '#/components/page/PageSide.vue';
 import DocumentCollectionModal from '#/views/ai/documentCollection/DocumentCollectionModal.vue';
@@ -37,6 +30,17 @@ const collectionTypeLabelMap = {
 function resolveNavTitle(row: Record<string, any>) {
   return row?.title || row?.name || '';
 }
+
+function openKnowledgeDetail(row: { id: string; name?: string; title?: string }) {
+  router.push({
+    path: '/ai/documentCollection/document',
+    query: {
+      id: row.id,
+      pageKey: '/ai/documentCollection',
+      navTitle: resolveNavTitle(row),
+    },
+  });
+}
 interface FieldDefinition {
   // 字段名称
   prop: string;
@@ -49,38 +53,29 @@ interface FieldDefinition {
   // 占位符
   placeholder?: string;
 }
-// 操作按钮配置
+const primaryAction: CardPrimaryAction = {
+  icon: Notebook,
+  text: $t('documentCollection.actions.knowledge'),
+  permission: '/api/v1/documentCollection/save',
+  onClick(row) {
+    openKnowledgeDetail(row);
+  },
+};
+
 const actions: ActionButton[] = [
   {
     icon: Edit,
     text: $t('button.edit'),
-    className: '',
     permission: '/api/v1/documentCollection/save',
+    placement: 'inline',
     onClick(row) {
       aiKnowledgeModalRef.value.openDialog(row);
     },
   },
-  {
-    icon: Notebook,
-    text: $t('documentCollection.actions.knowledge'),
-    className: '',
-    permission: '/api/v1/documentCollection/save',
-    onClick(row) {
-      router.push({
-        path: '/ai/documentCollection/document',
-        query: {
-          id: row.id,
-          pageKey: '/ai/documentCollection',
-          navTitle: resolveNavTitle(row),
-        },
-      });
-    },
-  },
   {
     icon: Search,
     text: $t('documentCollection.actions.retrieve'),
-    className: '',
-    permission: '',
+    placement: 'inline',
     onClick(row) {
       router.push({
         path: '/ai/documentCollection/document',
@@ -96,8 +91,9 @@ const actions: ActionButton[] = [
   {
     text: $t('button.delete'),
     icon: Delete,
-    className: 'item-danger',
+    tone: 'danger',
     permission: '/api/v1/documentCollection/remove',
+    placement: 'inline',
     onClick(row) {
       handleDelete(row);
     },
@@ -314,10 +310,11 @@ function changeCategory(category: any) {
           <template #default="{ pageList }">
             <CardPage
               :default-icon="defaultIcon"
-              title-key="title"
-              avatar-key="icon"
-              description-key="description"
+              title-field="title"
+              icon-field="icon"
+              desc-field="description"
               :data="pageList"
+              :primary-action="primaryAction"
               :actions="actions"
               tag-field="collectionType"
               :tag-map="collectionTypeLabelMap"