From fdf64f71f4a8cbf25f5450374df1852fb99d7b04 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Mon, 26 Feb 2024 06:40:32 +0800
Subject: [PATCH 1/2] feat(components): enhance the custom strength of the
 'TableHeaderOperation' component

---
 .../advanced/table-header-operation.vue       | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/advanced/table-header-operation.vue b/src/components/advanced/table-header-operation.vue
index e76af078..f773e8f0 100644
--- a/src/components/advanced/table-header-operation.vue
+++ b/src/components/advanced/table-header-operation.vue
@@ -6,6 +6,7 @@ defineOptions({
 });
 
 interface Props {
+  itemAlign?: 'stretch' | 'baseline' | 'start' | 'end' | 'center' | 'flex-end' | 'flex-start';
   disabledDelete?: boolean;
   loading?: boolean;
 }
@@ -38,24 +39,27 @@ function refresh() {
 </script>
 
 <template>
-  <NSpace wrap justify="end" class="<sm:w-200px">
-    <NButton size="small" ghost type="primary" @click="add">
-      <template #icon>
-        <icon-ic-round-plus class="text-icon" />
-      </template>
-      {{ $t('common.add') }}
-    </NButton>
-    <NPopconfirm @positive-click="batchDelete">
-      <template #trigger>
-        <NButton size="small" ghost type="error" :disabled="disabledDelete">
-          <template #icon>
-            <icon-ic-round-delete class="text-icon" />
-          </template>
-          {{ $t('common.batchDelete') }}
-        </NButton>
-      </template>
-      {{ $t('common.confirmDelete') }}
-    </NPopconfirm>
+  <NSpace :align="itemAlign" wrap justify="end" class="<sm:w-200px">
+    <slot name="prefix"></slot>
+    <slot name="default">
+      <NButton size="small" ghost type="primary" @click="add">
+        <template #icon>
+          <icon-ic-round-plus class="text-icon" />
+        </template>
+        {{ $t('common.add') }}
+      </NButton>
+      <NPopconfirm @positive-click="batchDelete">
+        <template #trigger>
+          <NButton size="small" ghost type="error" :disabled="disabledDelete">
+            <template #icon>
+              <icon-ic-round-delete class="text-icon" />
+            </template>
+            {{ $t('common.batchDelete') }}
+          </NButton>
+        </template>
+        {{ $t('common.confirmDelete') }}
+      </NPopconfirm>
+    </slot>
     <NButton size="small" @click="refresh">
       <template #icon>
         <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
@@ -63,6 +67,7 @@ function refresh() {
       {{ $t('common.refresh') }}
     </NButton>
     <TableColumnSetting v-model:columns="columns" />
+    <slot name="suffix"></slot>
   </NSpace>
 </template>
 

From ccc2b674db34dc02cce9831dc821e282ec1db41d Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Mon, 26 Feb 2024 10:40:44 +0800
Subject: [PATCH 2/2] fix(components): supplement the `NaiveUI` type

---
 src/components/advanced/table-header-operation.vue | 2 +-
 src/typings/naive-ui.d.ts                          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/advanced/table-header-operation.vue b/src/components/advanced/table-header-operation.vue
index f773e8f0..f27554fe 100644
--- a/src/components/advanced/table-header-operation.vue
+++ b/src/components/advanced/table-header-operation.vue
@@ -6,7 +6,7 @@ defineOptions({
 });
 
 interface Props {
-  itemAlign?: 'stretch' | 'baseline' | 'start' | 'end' | 'center' | 'flex-end' | 'flex-start';
+  itemAlign?: NaiveUI.Align;
   disabledDelete?: boolean;
   loading?: boolean;
 }
diff --git a/src/typings/naive-ui.d.ts b/src/typings/naive-ui.d.ts
index 1c6a2908..a3301ae9 100644
--- a/src/typings/naive-ui.d.ts
+++ b/src/typings/naive-ui.d.ts
@@ -1,3 +1,4 @@
 declare namespace NaiveUI {
   type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning';
+  type Align = 'stretch' | 'baseline' | 'start' | 'end' | 'center' | 'flex-end' | 'flex-start';
 }