yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: 优化 TableToolbar

pull/97/head
puhui999 2025-05-09 15:47:36 +08:00
parent 98676e1dc9
commit 2cbf17398b
2 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
apps/web-antd/src/components/table-toolbar/table-toolbar.vue
View File

@ -5,9 +5,9 @@ import type { VxeToolbarInstance } from '#/adapter/vxe-table';
import { ref } from 'vue'; import { ref } from 'vue';
import { useContentMaximize, useRefresh } from '@vben/hooks'; 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'; import { VxeToolbar } from '#/adapter/vxe-table';
@ -21,7 +21,8 @@ const props = defineProps<{
const emits = defineEmits(['update:hiddenSearch']); const emits = defineEmits(['update:hiddenSearch']);
const toolbarRef = ref<VxeToolbarInstance>(); const toolbarRef = ref<VxeToolbarInstance>();
const { toggleMaximizeAndTabbarHidden } = useContentMaximize(); const { toggleMaximizeAndTabbarHidden, contentIsMaximize } =
useContentMaximize();
const { refresh } = useRefresh(); const { refresh } = useRefresh();
/** 隐藏搜索栏 */ /** 隐藏搜索栏 */
@ -38,20 +39,41 @@ defineExpose({
<VxeToolbar ref="toolbarRef" custom> <VxeToolbar ref="toolbarRef" custom>
<template #toolPrefix> <template #toolPrefix>
<slot></slot> <slot></slot>
<!-- TODO @puhui999：貌似 icon 没和 vxe 对上。可以考虑用 /Users/yunai/Java/yudao-ui-admin-vben-v5/packages/icons/src/iconify --> <Tooltip placement="bottom">
<Button class="ml-2 font-[8px]" shape="circle" @click="onHiddenSearchBar"> <template #title>
<Search :size="15" /> <div class="max-w-[200px]">搜索</div>
</Button> </template>
<Button class="ml-2 font-[8px]" shape="circle" @click="refresh"> <Button
<RefreshCw :size="15" /> class="ml-2 font-[8px]"
</Button> shape="circle"
<Button @click="onHiddenSearchBar"
class="ml-2 font-[8px]" >
shape="circle" <Search :size="15" />
@click="toggleMaximizeAndTabbarHidden" </Button>
> </Tooltip>
<Fullscreen :size="15" /> <Tooltip placement="bottom">
</Button> <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> </template>
</VxeToolbar> </VxeToolbar>
</template> </template>

8
packages/icons/src/iconify/index.ts
View File

@ -12,12 +12,16 @@ export const MdiGoogle = createIconifyIcon('mdi:google');
export const MdiQqchat = createIconifyIcon('mdi:qqchat'); export const MdiQqchat = createIconifyIcon('mdi:qqchat');
export const AntdDingTalk = createIconifyIcon('ant-design:dingtalk');
export const MdiCheckboxMarkedCircleOutline = createIconifyIcon( export const MdiCheckboxMarkedCircleOutline = createIconifyIcon(
'mdi:checkbox-marked-circle-outline', '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( export const AntdProfileOutlined = createIconifyIcon(
'ant-design:profile-outlined', 'ant-design:profile-outlined',
); );