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

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue

@@ -1,11 +1,13 @@
 <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 CardList from '#/components/page/CardList.vue';
 
-import { computed, markRaw, onMounted, ref } from 'vue';
+import {computed, markRaw, onMounted, ref} from 'vue';
 
-import { EasyFlowFormModal } from '@easyflow/common-ui';
+import {EasyFlowFormModal} from '@easyflow/common-ui';
 
 import {
   CopyDocument,
@@ -17,27 +19,18 @@ import {
   Upload,
   VideoPlay,
 } from '@element-plus/icons-vue';
-import {
-  ElForm,
-  ElFormItem,
-  ElInput,
-  ElInputNumber,
-  ElMessage,
-  ElMessageBox,
-} from 'element-plus';
-import { tryit } from 'radash';
+import {tryit} from 'radash';
 
-import { api } from '#/api/request';
+import {api} from '#/api/request';
 import workflowIcon from '#/assets/ai/workflow/workflowIcon.png';
 // import workflowSvg from '#/assets/workflow.svg';
 import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
 import DesignIcon from '#/components/icons/DesignIcon.vue';
-import CardList from '#/components/page/CardList.vue';
 import PageData from '#/components/page/PageData.vue';
 import PageSide from '#/components/page/PageSide.vue';
-import { $t } from '#/locales';
-import { router } from '#/router';
-import { useDictStore } from '#/store';
+import {$t} from '#/locales';
+import {router} from '#/router';
+import {useDictStore} from '#/store';
 
 import WorkflowModal from './WorkflowModal.vue';
 
@@ -54,30 +47,29 @@ interface FieldDefinition {
   placeholder?: string;
 }
 
+const primaryAction: CardPrimaryAction = {
+  icon: DesignIcon,
+  text: $t('button.design'),
+  permission: '/api/v1/workflow/save',
+  onClick: (row: any) => {
+    toDesignPage(row);
+  },
+};
+
 const actions: ActionButton[] = [
   {
     icon: Edit,
     text: $t('button.edit'),
-    className: '',
     permission: '/api/v1/workflow/save',
+    placement: 'inline',
     onClick: (row: any) => {
       showDialog(row);
     },
   },
-  {
-    icon: DesignIcon,
-    text: $t('button.design'),
-    className: '',
-    permission: '/api/v1/workflow/save',
-    onClick: (row: any) => {
-      toDesignPage(row);
-    },
-  },
   {
     icon: VideoPlay,
     text: $t('button.run'),
-    className: '',
-    permission: '',
+    placement: 'inline',
     onClick: (row: any) => {
       router.push({
         name: 'RunPage',
@@ -90,8 +82,8 @@ const actions: ActionButton[] = [
   {
     icon: Tickets,
     text: $t('aiWorkflowExecRecord.moduleName'),
-    className: '',
     permission: '/api/v1/workflow/save',
+    placement: 'menu',
     onClick: (row: any) => {
       router.push({
         name: 'ExecRecord',
@@ -104,8 +96,7 @@ const actions: ActionButton[] = [
   {
     icon: Download,
     text: $t('button.export'),
-    className: '',
-    permission: '',
+    placement: 'menu',
     onClick: (row: any) => {
       exportJson(row);
     },
@@ -113,8 +104,7 @@ const actions: ActionButton[] = [
   {
     icon: CopyDocument,
     text: $t('button.copy'),
-    className: '',
-    permission: '',
+    placement: 'menu',
     onClick: (row: any) => {
       showDialog({
         title: `${row.title}Copy`,
@@ -125,8 +115,8 @@ const actions: ActionButton[] = [
   {
     icon: Delete,
     text: $t('button.delete'),
-    className: 'item-danger',
-    permission: '',
+    tone: 'danger',
+    placement: 'inline',
     onClick: (row: any) => {
       remove(row);
     },
@@ -402,6 +392,7 @@ function handleHeaderButtonClick(data: any) {
             <CardList
               :default-icon="workflowIcon"
               :data="pageList"
+              :primary-action="primaryAction"
               :actions="actions"
             />
           </template>