From 684d564ea1e6ad2e06af1870f73485fd88d055f3 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Fri, 9 May 2025 16:16:57 +0800
Subject: [PATCH] feat: add table toolbar comp

---
 .../src/components/table-toolbar/index.ts     |  1 +
 .../table-toolbar/table-toolbar.vue           | 60 +++++++++++++++++++
 2 files changed, 61 insertions(+)
 create mode 100644 apps/web-naive/src/components/table-toolbar/index.ts
 create mode 100644 apps/web-naive/src/components/table-toolbar/table-toolbar.vue

diff --git a/apps/web-naive/src/components/table-toolbar/index.ts b/apps/web-naive/src/components/table-toolbar/index.ts
new file mode 100644
index 00000000..720e3224
--- /dev/null
+++ b/apps/web-naive/src/components/table-toolbar/index.ts
@@ -0,0 +1 @@
+export { default as TableToolbar } from './table-toolbar.vue';
diff --git a/apps/web-naive/src/components/table-toolbar/table-toolbar.vue b/apps/web-naive/src/components/table-toolbar/table-toolbar.vue
new file mode 100644
index 00000000..eb453bdf
--- /dev/null
+++ b/apps/web-naive/src/components/table-toolbar/table-toolbar.vue
@@ -0,0 +1,60 @@
+<!-- add by puhui999：vxe table 工具栏二次封装，提供给 vxe 原生列表使用 -->
+<script setup lang="ts">
+import type { VxeToolbarInstance } from 'vxe-table';
+
+import { ref } from 'vue';
+
+import { useContentMaximize, useRefresh } from '@vben/hooks';
+import { Fullscreen, RefreshCw, Search } from '@vben/icons';
+
+import { NButton } from 'naive-ui';
+import { VxeToolbar } from 'vxe-table';
+
+/** 列表工具栏封装 */
+defineOptions({ name: 'TableToolbar' });
+
+const props = defineProps<{
+  hiddenSearch: boolean;
+}>();
+
+const emits = defineEmits(['update:hiddenSearch']);
+
+const toolbarRef = ref<VxeToolbarInstance>();
+const { toggleMaximizeAndTabbarHidden } = useContentMaximize();
+const { refresh } = useRefresh();
+
+/** 隐藏搜索栏 */
+function onHiddenSearchBar() {
+  emits('update:hiddenSearch', !props.hiddenSearch);
+}
+
+defineExpose({
+  getToolbarRef: () => toolbarRef.value,
+});
+</script>
+
+<template>
+  <VxeToolbar ref="toolbarRef" custom>
+    <template #toolPrefix>
+      <slot></slot>
+      <!-- TODO @puhui999：貌似 icon 没和 vxe 对上。可以考虑用 /Users/yunai/Java/yudao-ui-admin-vben-v5/packages/icons/src/iconify  -->
+      <NButton
+        class="ml-2 font-[8px]"
+        shape="circle"
+        @click="onHiddenSearchBar"
+      >
+        <Search :size="15" />
+      </NButton>
+      <NButton class="ml-2 font-[8px]" shape="circle" @click="refresh">
+        <RefreshCw :size="15" />
+      </NButton>
+      <NButton
+        class="ml-2 font-[8px]"
+        shape="circle"
+        @click="toggleMaximizeAndTabbarHidden"
+      >
+        <Fullscreen :size="15" />
+      </NButton>
+    </template>
+  </VxeToolbar>
+</template>