From 2cbf17398bb2f513957c1447f0d591a4e4ce7c58 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Fri, 9 May 2025 15:47:36 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20TableToolbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table-toolbar/table-toolbar.vue           | 56 +++++++++++++------
 packages/icons/src/iconify/index.ts           |  8 ++-
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/apps/web-antd/src/components/table-toolbar/table-toolbar.vue b/apps/web-antd/src/components/table-toolbar/table-toolbar.vue
index 7336d7f0..ae6e1c8b 100644
--- a/apps/web-antd/src/components/table-toolbar/table-toolbar.vue
+++ b/apps/web-antd/src/components/table-toolbar/table-toolbar.vue
@@ -5,9 +5,9 @@ import type { VxeToolbarInstance } from '#/adapter/vxe-table';
 import { ref } from 'vue';
 
 import { useContentMaximize, useRefresh } from '@vben/hooks';
-import { Fullscreen, RefreshCw, Search } from '@vben/icons';
+import { Expand, MsRefresh, Search, TMinimize } from '@vben/icons';
 
-import { Button } from 'ant-design-vue';
+import { Button, Tooltip } from 'ant-design-vue';
 
 import { VxeToolbar } from '#/adapter/vxe-table';
 
@@ -21,7 +21,8 @@ const props = defineProps<{
 const emits = defineEmits(['update:hiddenSearch']);
 
 const toolbarRef = ref<VxeToolbarInstance>();
-const { toggleMaximizeAndTabbarHidden } = useContentMaximize();
+const { toggleMaximizeAndTabbarHidden, contentIsMaximize } =
+  useContentMaximize();
 const { refresh } = useRefresh();
 
 /** 隐藏搜索栏 */
@@ -38,20 +39,41 @@ defineExpose({
   <VxeToolbar ref="toolbarRef" custom>
     <template #toolPrefix>
       <slot></slot>
-      <!-- TODO @puhui999：貌似 icon 没和 vxe 对上。可以考虑用 /Users/yunai/Java/yudao-ui-admin-vben-v5/packages/icons/src/iconify  -->
-      <Button class="ml-2 font-[8px]" shape="circle" @click="onHiddenSearchBar">
-        <Search :size="15" />
-      </Button>
-      <Button class="ml-2 font-[8px]" shape="circle" @click="refresh">
-        <RefreshCw :size="15" />
-      </Button>
-      <Button
-        class="ml-2 font-[8px]"
-        shape="circle"
-        @click="toggleMaximizeAndTabbarHidden"
-      >
-        <Fullscreen :size="15" />
-      </Button>
+      <Tooltip placement="bottom">
+        <template #title>
+          <div class="max-w-[200px]">搜索</div>
+        </template>
+        <Button
+          class="ml-2 font-[8px]"
+          shape="circle"
+          @click="onHiddenSearchBar"
+        >
+          <Search :size="15" />
+        </Button>
+      </Tooltip>
+      <Tooltip placement="bottom">
+        <template #title>
+          <div class="max-w-[200px]">刷新</div>
+        </template>
+        <Button class="ml-2 font-[8px]" shape="circle" @click="refresh">
+          <MsRefresh :size="15" />
+        </Button>
+      </Tooltip>
+      <Tooltip placement="bottom">
+        <template #title>
+          <div class="max-w-[200px]">
+            {{ contentIsMaximize ? '还原' : '全屏' }}
+          </div>
+        </template>
+        <Button
+          class="ml-2 font-[8px]"
+          shape="circle"
+          @click="toggleMaximizeAndTabbarHidden"
+        >
+          <Expand v-if="!contentIsMaximize" :size="15" />
+          <TMinimize v-else :size="15" />
+        </Button>
+      </Tooltip>
     </template>
   </VxeToolbar>
 </template>
diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts
index 872e4309..3342ec1a 100644
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -12,12 +12,16 @@ export const MdiGoogle = createIconifyIcon('mdi:google');
 
 export const MdiQqchat = createIconifyIcon('mdi:qqchat');
 
-export const AntdDingTalk = createIconifyIcon('ant-design:dingtalk');
-
 export const MdiCheckboxMarkedCircleOutline = createIconifyIcon(
   'mdi:checkbox-marked-circle-outline',
 );
 
+export const MsRefresh = createIconifyIcon('material-symbols:refresh-rounded');
+
+export const TMinimize = createIconifyIcon('tabler:arrows-minimize');
+
+export const AntdDingTalk = createIconifyIcon('ant-design:dingtalk');
+
 export const AntdProfileOutlined = createIconifyIcon(
   'ant-design:profile-outlined',
 );