z9130
/
pansoft-plrl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add tabs demo

This commit is contained in:
vben 2024-07-20 09:36:10 +08:00
parent 1fbf69e6eb
commit 30d4057216
10 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/backend-mock/utils/mock-data.ts
View File

@ -114,7 +114,7 @@ const createDemosMenus = (role: 'admin' | 'super' | 'user') => {
},
name: 'Demos',
path: '/demos',
redirect: '/access',
redirect: '/demos/access',
children: [
{
name: 'Access',
@ -173,6 +173,6 @@ export const MOCK_MENUS = [
},
{
menus: [...dashboardMenus, ...createDemosMenus('user')],
username: 'user',
username: 'jack',
},
];

32
apps/web-antd/src/views/demos/features/tabs/index.vue
View File

@ -1,14 +1,16 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useTabs } from '@vben/hooks';
import { Button } from 'ant-design-vue';
import { Input as AInput, Button } from 'ant-design-vue';
defineOptions({ name: 'FeatureTabsDemo' });
const router = useRouter();
// const newTabTitle = ref('');
const newTabTitle = ref('');
const {
closeAllTabs,
closeCurrentTab,
@ -17,12 +19,19 @@ const {
closeRightTabs,
closeTabByKey,
refreshTab,
resetTabTitle,
setTabTitle,
} = useTabs();
function openTab() {
// 这里就是路由跳转，也可以用path
router.push({ name: 'VbenAbout' });
}
function reset() {
newTabTitle.value = '';
resetTabTitle();
}
</script>
<template>
@ -58,7 +67,7 @@ function openTab() {
<Button type="primary" @click="closeRightTabs()">
关闭右侧标签页
</Button>
<Button type="primary" @click="closeAllTabs()"> 打开所有标签页 </Button>
<Button type="primary" @click="closeAllTabs()"> 关闭所有标签页 </Button>
<Button type="primary" @click="closeOtherTabs()">
关闭其他标签页
</Button>
@ -71,16 +80,17 @@ function openTab() {
<div class="text-foreground/80 my-3">
该操作不会影响页面标题，仅修改Tab标题
</div>
<!-- <div class="flex flex-wrap items-center gap-3">
<Input
v-model="newTabTitle"
class="w-30"
placeholder="请输入新的标题"
<div class="flex flex-wrap items-center gap-3">
<AInput
v-model:value="newTabTitle"
class="w-40"
placeholder="请输入新标题"
/>
<Button type="primary" @click="closeCurrentTab()">
关闭当前标签页 {{ newTabTitle }}
<Button type="primary" @click="() => setTabTitle(newTabTitle)">
修改
</Button>
</div> -->
<Button @click="reset"> 重置 </Button>
</div>
</div>
</div>
</template>

1
internal/tailwind-config/package.json
View File

@ -49,7 +49,6 @@
"dependencies": {
"@iconify/json": "^2.2.229",
"@iconify/tailwind": "^1.1.1",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
"@tailwindcss/typography": "^0.5.13",
"autoprefixer": "^10.4.19",

2
internal/tailwind-config/src/index.ts
View File

@ -5,7 +5,6 @@ import path from 'node:path';
import { fs, getPackagesSync } from '@vben/node-utils';
import { addDynamicIconSelectors } from '@iconify/tailwind';
import formsPlugin from '@tailwindcss/forms';
import typographyPlugin from '@tailwindcss/typography';
import animate from 'tailwindcss-animate';
@ -123,7 +122,6 @@ export default {
darkMode: 'selector',
plugins: [
animate,
formsPlugin,
typographyPlugin,
addDynamicIconSelectors(),
enterAnimationPlugin,

11
packages/@core/forward/stores/src/modules/tabbar.ts
View File

@ -28,6 +28,10 @@ interface TabsState {
* @zh_CN 当前打开的标签页列表
*/
tabs: TabDefinition[];
/**
* @zh_CN 更新时间，用于一些更新场景，使用watch深度监听的话，会损耗性能
*/
updateTime?: number;
}
/**
@ -306,11 +310,17 @@ const useCoreTabbarStore = defineStore('core-tabbar', {
const findTab = this.tabs.find(
(item) => getTabPath(item) === getTabPath(tab),
);
if (findTab) {
findTab.meta.newTabTitle = title;
await this.updateCacheTab();
}
},
async setUpdateTime() {
this.updateTime = Date.now();
},
/**
* @zh_CN 设置标签页顺序
* @param oldIndex
@ -399,6 +409,7 @@ const useCoreTabbarStore = defineStore('core-tabbar', {
excludeCachedTabs: new Set(),
renderRouteView: true,
tabs: [],
updateTime: Date.now(),
}),
});

2
packages/@core/hooks/src/use-tabs.ts
View File

@ -52,10 +52,12 @@ export function useTabs() {
}
async function setTabTitle(title: string) {
coreTabbarStore.setUpdateTime();
await coreTabbarStore.setTabTitle(route, title);
}
async function resetTabTitle() {
coreTabbarStore.setUpdateTime();
await coreTabbarStore.resetTabTitle(route);
}

2
packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
View File

@ -49,7 +49,7 @@ const tabsView = computed((): TabConfig[] => {
: true,
icon: tab.meta.icon as string,
key: tab.fullPath || tab.path,
title: (tab.meta?.title || tab.name) as string,
title: (tab.meta?.newTabTitle || tab.meta?.title || tab.name) as string,
};
});
});

2
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@ -50,7 +50,7 @@ const tabsView = computed((): TabConfig[] => {
: true,
icon: tab.meta.icon as string,
key: tab.fullPath || tab.path,
title: (tab.meta?.title || tab.name) as string,
title: (tab.meta?.newTabTitle || tab.meta?.title || tab.name) as string,
};
});
});

13
packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
View File

@ -55,9 +55,16 @@ export function useTabbar() {
const { locale } = useI18n();
const currentTabs = ref<RouteLocationNormalizedGeneric[]>();
watch([() => coreTabbarStore.getTabs, () => locale.value], ([tabs, _]) => {
currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
});
watch(
[
() => coreTabbarStore.getTabs,
() => coreTabbarStore.updateTime,
() => locale.value,
],
([tabs]) => {
currentTabs.value = tabs.map((item) => wrapperTabLocale(item));
},
);
/**
* 初始化固定标签页

19
pnpm-lock.yaml
View File

@ -368,9 +368,6 @@ importers:
'@iconify/tailwind':
specifier: ^1.1.1
version: 1.1.1
'@tailwindcss/forms':
specifier: ^0.5.7
version: 0.5.7(tailwindcss@3.4.6(ts-node@10.9.2(@types/node@20.14.11)(typescript@5.5.3)))
'@tailwindcss/nesting':
specifier: 0.0.0-insiders.565cd3e
version: 0.0.0-insiders.565cd3e(postcss@8.4.39)
@ -3498,11 +3495,6 @@ packages:
'@swc/helpers@0.5.12':
resolution: {integrity: sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==}
'@tailwindcss/forms@0.5.7':
resolution: {integrity: sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==}
peerDependencies:
tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1'
'@tailwindcss/nesting@0.0.0-insiders.565cd3e':
resolution: {integrity: sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==}
peerDependencies:
@ -6511,10 +6503,6 @@ packages:
resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
engines: {node: '>=4'}
mini-svg-data-uri@1.4.4:
resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
hasBin: true
minimatch@10.0.1:
resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
engines: {node: 20 || >=22}
@ -11971,11 +11959,6 @@ snapshots:
dependencies:
tslib: 2.6.3
'@tailwindcss/forms@0.5.7(tailwindcss@3.4.6(ts-node@10.9.2(@types/node@20.14.11)(typescript@5.5.3)))':
dependencies:
mini-svg-data-uri: 1.4.4
tailwindcss: 3.4.6(ts-node@10.9.2(@types/node@20.14.11)(typescript@5.5.3))
'@tailwindcss/nesting@0.0.0-insiders.565cd3e(postcss@8.4.39)':
dependencies:
postcss: 8.4.39
@ -15417,8 +15400,6 @@ snapshots:
min-indent@1.0.1: {}
mini-svg-data-uri@1.4.4: {}
minimatch@10.0.1:
dependencies:
brace-expansion: 2.0.1