From 33f702b3a7930e2d08544e76a5c2fd92df1f4338 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=BF=99=E4=B9=88=E9=9A=BE=E6=BC=94?=
 <jiangchengshi@gmail.com>
Date: Fri, 31 May 2024 13:20:52 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=9B=B4=E6=96=B0=E3=80=91XnCardList?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E8=BF=BD=E5=8A=A0=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/XnCardList/index.vue       | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/snowy-admin-web/src/components/XnCardList/index.vue b/snowy-admin-web/src/components/XnCardList/index.vue
index e4227c54..44844c5e 100644
--- a/snowy-admin-web/src/components/XnCardList/index.vue
+++ b/snowy-admin-web/src/components/XnCardList/index.vue
@@ -1,22 +1,29 @@
 <template>
 	<a-list :grid="grid" :data-source="props.dataSource" :pagination="pagination" :loading="loading">
 		<template #renderItem="{ item, index }">
-			<a-list-item :key="index">
+			<a-list-item :key="index" class="xn-card-list-item">
 				<a-badge-ribbon :text="item.badge.text" :color="item.badge.color ? item.badge.color : ''">
 					<a-card class="xn-card">
 						<template #title>
 							<a-tag color="orange">{{ item.title }}</a-tag>
 						</template>
 						<template #actions>
-							<template v-for="{ key, label, icon, color } in props.actions" :key="key">
-								<a-tooltip :title="label">
-									<component :is="icon" @click="doAction(key, item)" :style="{ color: color }" />
+							<template v-for="{ key, label, button, icon, color } in props.actions" :key="key">
+								<a-button v-if="button" type="link" size="small" @click.stop="doAction(key, item)">
+									<template #icon>
+										<component :is="icon" :style="{ color: color }" />
+									</template>
+									<span :style="{ color: color }">{{ label }}</span>
+								</a-button>
+								<a-tooltip v-else :title="label">
+									<component :is="icon" @click.stop="doAction(key, item)" :style="{ color: color }" />
 								</a-tooltip>
 							</template>
+							<slot name="custom-action-component" :record="item.record" />
 						</template>
 						<a-card-meta class="xn-card-meta">
 							<template #avatar>
-								<a-avatar shape="square" :size="64" :src="item.img" />
+								<a-avatar shape="square" :size="60" :src="item.img" />
 							</template>
 							<template #title>
 								<span class="xn-card-meta-title">{{ item.subTitle }}</span>
@@ -44,7 +51,7 @@
 		grid: {
 			type: Object,
 			default: () => {
-				return { gutter: 20, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 3, xxxl: 4 }
+				return { gutter: 20, xs: 1, sm: 1, md: 2, lg: 2, xl: 3, xxl: 4, xxxl: 4 }
 			}
 		},
 		// 数据源
@@ -94,6 +101,7 @@
 	.xn-card {
 		background: linear-gradient(141.6deg, var(--primary-1) 0%, rgba(255, 255, 255, 0) 70%);
 		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 10px;
 
 		.xn-card-meta {
 			display: flex;
@@ -105,3 +113,8 @@
 		}
 	}
 </style>
+<style lang="less">
+	.xn-card-list-item {
+		padding: initial !important;
+	}
+</style>