From 7e6d0d2d1e035a341dfcb85c4bd842032862acf7 Mon Sep 17 00:00:00 2001 From: Gary Fu Date: Mon, 25 Dec 2023 19:21:24 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0tab=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E4=BB=A5=E5=8F=8Atab=E7=BC=93=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common-tabs-view/index.vue | 61 +++++++++++++ .../common-tabs-view/tabs-view-item.vue | 28 ++++++ src/components/index.js | 2 + src/components/utils/index.js | 31 +++++++ src/route/ToolsRoutes.js | 6 +- src/stores/TabsViewStore.js | 85 +++++++++++++++++++ src/stores/index.js | 4 +- src/views/HomeView.vue | 15 +++- src/views/admin/Authority.vue | 6 +- src/views/admin/Menus.vue | 6 +- src/views/admin/Roles.vue | 6 +- src/views/admin/Users.vue | 6 +- 12 files changed, 244 insertions(+), 12 deletions(-) create mode 100644 src/components/common-tabs-view/index.vue create mode 100644 src/components/common-tabs-view/tabs-view-item.vue create mode 100644 src/stores/TabsViewStore.js diff --git a/src/components/common-tabs-view/index.vue b/src/components/common-tabs-view/index.vue new file mode 100644 index 0000000..20b627a --- /dev/null +++ b/src/components/common-tabs-view/index.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/src/components/common-tabs-view/tabs-view-item.vue b/src/components/common-tabs-view/tabs-view-item.vue new file mode 100644 index 0000000..2131ca9 --- /dev/null +++ b/src/components/common-tabs-view/tabs-view-item.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/components/index.js b/src/components/index.js index 3bb1d08..dcff11e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -2,6 +2,7 @@ import CommonIcon from '@/components/common-icon/index.vue' import CommonInput from '@/components/common-form-input/index.vue' import CommonMenu from '@/components/common-menu/index.vue' import CommonMenuItem from '@/components/common-menu-item/index.vue' +import CommonTabsView from '@/components/common-tabs-view/index.vue' /** * 自定义通用组件自动注册 @@ -15,5 +16,6 @@ export default { Vue.component('CommonInput', CommonInput) Vue.component('CommonMenu', CommonMenu) Vue.component('CommonMenuItem', CommonMenuItem) + Vue.component('CommonTabsView', CommonTabsView) } } diff --git a/src/components/utils/index.js b/src/components/utils/index.js index 69da4fd..ae1fb3f 100644 --- a/src/components/utils/index.js +++ b/src/components/utils/index.js @@ -1,3 +1,6 @@ +import { ref } from 'vue' +import { $i18nBundle } from '@/messages' + const calcWithIf = menuItem => { ['icon', 'labelKey', 'label', 'html'].forEach(key => { const keyIf = menuItem[`${key}If`] @@ -6,9 +9,37 @@ const calcWithIf = menuItem => { } }) } + +export const MENU_INFO_LIST = ref({}) + +export const useMenuInfo = path => { + const menuInfo = MENU_INFO_LIST.value[path] + console.info('================', MENU_INFO_LIST.value) + return menuInfo +} + +export const useMenuName = item => { + const menuInfo = useMenuInfo(item.path) + if (menuInfo) { + if (menuInfo.label) { + return menuInfo.label + } + if (menuInfo.labelKey) { + return $i18nBundle(menuInfo.labelKey) + } + } + if (item.meta && item.meta.labelKey) { + return $i18nBundle(item.meta.labelKey) + } + return item.name || 'No Name' +} + export const filterMenus = menus => menus.filter(menu => !menu.disabled) .map(menu => { calcWithIf(menu) + if (menu.index) { // 把菜单存储下来，后面需要使用名字 + MENU_INFO_LIST.value[menu.index] = menu + } if (menu.children && menu.children.length) { menu.children = filterMenus(menu.children) } diff --git a/src/route/ToolsRoutes.js b/src/route/ToolsRoutes.js index 6ec84e1..a14edf7 100644 --- a/src/route/ToolsRoutes.js +++ b/src/route/ToolsRoutes.js @@ -1,13 +1,13 @@ export default [{ - path: 'icons', + path: '/icons', name: 'icons', component: () => import('@/views/tools/Icons.vue') }, { - path: 'forms', + path: '/forms', name: 'forms', component: () => import('@/views/tools/Forms.vue') }, { - path: 'tables', + path: '/tables', name: 'tables', component: () => import('@/views/tools/Tables.vue') }] diff --git a/src/stores/TabsViewStore.js b/src/stores/TabsViewStore.js new file mode 100644 index 0000000..79f0258 --- /dev/null +++ b/src/stores/TabsViewStore.js @@ -0,0 +1,85 @@ +import { ref } from 'vue' +import { defineStore } from 'pinia' + +export const useTabsViewStore = defineStore('tabsView', () => { + const isTabMode = ref(true) + const isCachedTabMode = ref(true) + const historyTabs = ref([]) + const cachedTabs = ref([]) + + const clearHistoryTabs = () => { + if (historyTabs.value.length) { + const tab = historyTabs.value[0] + historyTabs.value = [tab] + cachedTabs.value = [] + if (isCachedTabMode.value && tab.name) { + cachedTabs.value = [tab.name] + } + } + } + + const findHistoryTab = (path) => { + const idx = historyTabs.value.findIndex(v => v.path === path) + if (idx > -1) { + return historyTabs.value[idx] + } + } + + const addHistoryTab = tab => { + // 添加tab + if (isTabMode.value) { + const idx = historyTabs.value.findIndex(v => v.path === tab.path) + if (idx < 0) { + historyTabs.value.push(Object.assign({}, tab)) // 可能是Proxy，需要解析出来 + if (isCachedTabMode.value && tab.name) { + cachedTabs.value.push(tab.name) + } + } + } + } + const removeHistoryTab = path => { + if (historyTabs.value.length > 1) { + const idx = historyTabs.value.findIndex(v => v.path === path) + if (idx > -1) { + removeCachedTab(historyTabs.value[idx]) + // 删除tab + historyTabs.value.splice(idx, 1) + } + return historyTabs.value[historyTabs.value.length - 1] + } + } + + const removeCachedTab = tab => { + if (tab) { + const idx = cachedTabs.value.findIndex(v => v === tab.name) + if (idx > -1) { + cachedTabs.value.splice(idx, 1) + } + } + } + + return { + isTabMode, + isCachedTabMode, + historyTabs, + cachedTabs, + changeTabMode () { + isTabMode.value = !isTabMode.value + if (!isTabMode.value) { + clearHistoryTabs() + } + }, + changeCachedTabMode () { + isCachedTabMode.value = !isCachedTabMode.value + if (!isCachedTabMode.value) { + cachedTabs.value = [] + } + }, + removeHistoryTab, + clearHistoryTabs, + findHistoryTab, + addHistoryTab + } +}, { + persist: true +}) diff --git a/src/stores/index.js b/src/stores/index.js index 9aafe25..7a9d9d9 100644 --- a/src/stores/index.js +++ b/src/stores/index.js @@ -1,10 +1,12 @@ import { defineStore, createPinia } from 'pinia' import piniaPluginPersistedState from 'pinia-plugin-persistedstate' import { useGlobalConfigStore } from '@/stores/GlobalConfigStore' +import { useTabsViewStore } from '@/stores/TabsViewStore' export const useStore = defineStore('store', () => { return { - globalConfig: useGlobalConfigStore() + globalConfig: useGlobalConfigStore(), + tabsView: useTabsViewStore() } }) diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 4aedc6f..5836a51 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -2,9 +2,11 @@ import LeftMenu from '@/layout/LeftMenu.vue' import TopNav from '@/layout/TopNav.vue' import { useGlobalConfigStore } from '@/stores/GlobalConfigStore' +import { useTabsViewStore } from '@/stores/TabsViewStore' import { GlobalLayoutMode } from '@/consts/GlobalConstants' import { computed } from 'vue' const globalConfigStore = useGlobalConfigStore() +const tabsViewStore = useTabsViewStore() const showLeftMenu = computed(() => { return globalConfigStore.layoutMode === GlobalLayoutMode.LEFT }) @@ -23,16 +25,21 @@ const showLeftMenu = computed(() => { + + + - + + + diff --git a/src/views/admin/Authority.vue b/src/views/admin/Authority.vue index fa73bff..00e67b3 100644 --- a/src/views/admin/Authority.vue +++ b/src/views/admin/Authority.vue @@ -1,5 +1,9 @@