feat: add tabs demo

apps/backend-mock/utils/mock-data.ts

@@ -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',
   },
 ];

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

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

internal/tailwind-config/package.json

@@ -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",

internal/tailwind-config/src/index.ts

@@ -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,

packages/@core/forward/stores/src/modules/tabbar.ts

@@ -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(),
   }),
 });
 

packages/@core/hooks/src/use-tabs.ts

@@ -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);
   }
 

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

@@ -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,
     };
   });
 });

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

@@ -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,
     };
   });
 });

packages/effects/layouts/src/basic/tabbar/use-tabbar.ts

@@ -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));
+    },
+  );
 
   /**
    * 初始化固定标签页

pnpm-lock.yaml

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