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 { 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>

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 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',
);