mirrors/buildadmin
1
0
Fork 0
mirror of https://gitee.com/wonderful-code/buildadmin synced 2024-11-21 14:41:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat:新增 refs 状态商店，全局提供了引用（指向）一些对象（组件）的句柄

Browse Source
This commit is contained in:
妙码生花 2024-03-31 16:45:08 +08:00
parent cd5b49b656
commit a2315aed80
12 changed files with 70 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/layouts/backend/components/menus/menuHorizontal.vue
View File

@ -3,9 +3,9 @@
<div class="menu-horizontal-logo" v-if="config.layout.menuShowTopBar">
<Logo />
</div>
<el-scrollbar ref="horizontalMenusRef" class="horizontal-menus-scrollbar">
<el-menu class="menu-horizontal" mode="horizontal" :default-active="state.defaultActive" :key="state.menuKey">
<MenuTree :extends="{ position: 'horizontal', level: 1 }" :menus="menus" />
<el-scrollbar ref="layoutMenuScrollbarRef" class="horizontal-menus-scrollbar">
<el-menu ref="layoutMenuRef" class="menu-horizontal" mode="horizontal" :default-active="state.defaultActive">
<MenuTree :extends="{ position: 'horizontal', level: 1 }" :menus="navTabs.state.tabsViewRoutes" />
</el-menu>
</el-scrollbar>
<NavMenus />
@ -13,32 +13,23 @@
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import { nextTick, onMounted, reactive } from 'vue'
import Logo from '/@/layouts/backend/components/logo.vue'
import MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
import { useConfig } from '/@/stores/config'
import { useNavTabs } from '/@/stores/navTabs'
import type { ScrollbarInstance } from 'element-plus'
import NavMenus from '/@/layouts/backend/components/navMenus.vue'
import { uuid } from '/@/utils/random'
const horizontalMenusRef = ref<ScrollbarInstance>()
import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
const config = useConfig()
const navTabs = useNavTabs()
const route = useRoute()
const state = reactive({
menuKey: uuid(),
defaultActive: '',
})
const menus = computed(() => {
state.menuKey = uuid() // eslint-disable-line
return navTabs.state.tabsViewRoutes
})
// 激活当前路由的菜单
const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
state.defaultActive = currentRoute.path
@ -49,7 +40,7 @@ const verticalMenusScroll = () => {
nextTick(() => {
let activeMenu: HTMLElement | null = document.querySelector('.el-menu.menu-horizontal li.is-active')
if (!activeMenu) return false
horizontalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
layoutMenuScrollbarRef.value?.setScrollTop(activeMenu.offsetTop)
})
}

11
web/src/layouts/backend/components/menus/menuVertical.vue
View File

@ -1,11 +1,12 @@
<template>
<el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
<el-scrollbar ref="layoutMenuScrollbarRef" class="vertical-menus-scrollbar">
<el-menu
class="layouts-menu-vertical"
:collapse-transition="false"
:unique-opened="config.layout.menuUniqueOpened"
:default-active="state.defaultActive"
:collapse="config.layout.menuCollapse"
ref="layoutMenuRef"
>
<MenuTree :menus="navTabs.state.tabsViewRoutes" />
</el-menu>
@ -13,10 +14,10 @@
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import { computed, nextTick, onMounted, reactive } from 'vue'
import MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
import type { ScrollbarInstance } from 'element-plus'
import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
import { useConfig } from '/@/stores/config'
import { useNavTabs } from '/@/stores/navTabs'
@ -24,8 +25,6 @@ const config = useConfig()
const navTabs = useNavTabs()
const route = useRoute()
const verticalMenusRef = ref<ScrollbarInstance>()
const state = reactive({
defaultActive: '',
})
@ -52,7 +51,7 @@ const verticalMenusScroll = () => {
nextTick(() => {
let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical li.is-active')
if (!activeMenu) return false
verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
layoutMenuScrollbarRef.value?.setScrollTop(activeMenu.offsetTop)
})
}

11
web/src/layouts/backend/components/menus/menuVerticalChildren.vue
View File

@ -1,11 +1,12 @@
<template>
<el-scrollbar ref="verticalMenusRef" class="children-vertical-menus-scrollbar">
<el-scrollbar ref="layoutMenuScrollbarRef" class="children-vertical-menus-scrollbar">
<el-menu
class="layouts-menu-vertical-children"
:collapse-transition="false"
:unique-opened="config.layout.menuUniqueOpened"
:default-active="state.defaultActive"
:collapse="config.layout.menuCollapse"
ref="layoutMenuRef"
>
<MenuTree v-if="state.routeChildren.length > 0" :menus="state.routeChildren" />
</el-menu>
@ -13,11 +14,11 @@
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import { computed, nextTick, onMounted, reactive } from 'vue'
import MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import type { ScrollbarInstance } from 'element-plus'
import { useConfig } from '/@/stores/config'
import { useNavTabs } from '/@/stores/navTabs'
import { currentRouteTopActivity } from '/@/layouts/backend/components/menus/helper'
@ -26,8 +27,6 @@ const config = useConfig()
const navTabs = useNavTabs()
const route = useRoute()
const verticalMenusRef = ref<ScrollbarInstance>()
const state: {
defaultActive: string
routeChildren: RouteRecordRaw[]
@ -73,7 +72,7 @@ const verticalMenusScroll = () => {
nextTick(() => {
let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical-children li.is-active')
if (!activeMenu) return false
verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
layoutMenuScrollbarRef.value?.setScrollTop(activeMenu.offsetTop)
})
}

3
web/src/layouts/backend/components/navBar/classic.vue
View File

@ -3,7 +3,7 @@
<div v-if="config.layout.shrink && config.layout.menuCollapse" class="unfold">
<Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')" size="18" />
</div>
<NavTabs v-if="!config.layout.shrink" />
<NavTabs v-if="!config.layout.shrink" ref="layoutNavTabsRef" />
<NavMenus />
</div>
</template>
@ -11,6 +11,7 @@
<script setup lang="ts">
import { useConfig } from '/@/stores/config'
import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
import { layoutNavTabsRef } from '/@/stores/refs'
import NavMenus from '../navMenus.vue'
import { showShade } from '/@/utils/pageShade'

3
web/src/layouts/backend/components/navBar/default.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="nav-bar">
<NavTabs />
<NavTabs ref="layoutNavTabsRef" />
<NavMenus />
</div>
</template>
@ -9,6 +9,7 @@
import { useConfig } from '/@/stores/config'
import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
import NavMenus from '../navMenus.vue'
import { layoutNavTabsRef } from '/@/stores/refs'
const config = useConfig()
</script>

21
web/src/layouts/backend/components/navBar/double.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="layouts-menu-horizontal-double">
<el-scrollbar ref="horizontalMenusRef" class="double-menus-scrollbar">
<el-menu class="menu-horizontal" mode="horizontal" :default-active="state.defaultActive" :key="state.menuKey">
<MenuTree :extends="{ position: 'horizontal', level: 1 }" :menus="menus" />
<el-scrollbar ref="layoutMenuScrollbarRef" class="double-menus-scrollbar">
<el-menu ref="layoutMenuRef" class="menu-horizontal" mode="horizontal" :default-active="state.defaultActive">
<MenuTree :extends="{ position: 'horizontal', level: 1 }" :menus="navTabs.state.tabsViewRoutes" />
</el-menu>
</el-scrollbar>
<NavMenus />
@ -10,32 +10,23 @@
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import { nextTick, onMounted, reactive } from 'vue'
import { useRoute, onBeforeRouteUpdate, type RouteLocationNormalizedLoaded } from 'vue-router'
import { currentRouteTopActivity } from '/@/layouts/backend/components/menus/helper'
import MenuTree from '/@/layouts/backend/components/menus/menuTree.vue'
import { layoutMenuRef, layoutMenuScrollbarRef } from '/@/stores/refs'
import NavMenus from '/@/layouts/backend/components/navMenus.vue'
import type { ScrollbarInstance } from 'element-plus'
import { useNavTabs } from '/@/stores/navTabs'
import { useConfig } from '/@/stores/config'
import { uuid } from '/@/utils/random'
const horizontalMenusRef = ref<ScrollbarInstance>()
const config = useConfig()
const navTabs = useNavTabs()
const route = useRoute()
const state = reactive({
menuKey: uuid(),
defaultActive: '',
})
const menus = computed(() => {
state.menuKey = uuid() // eslint-disable-line
return navTabs.state.tabsViewRoutes
})
// 激活当前路由的菜单
const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
let routeChildren = currentRouteTopActivity(currentRoute.path, navTabs.state.tabsViewRoutes)
@ -47,7 +38,7 @@ const verticalMenusScroll = () => {
nextTick(() => {
let activeMenu: HTMLElement | null = document.querySelector('.el-menu.menu-horizontal li.is-active')
if (!activeMenu) return false
horizontalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
layoutMenuScrollbarRef.value?.setScrollTop(activeMenu.offsetTop)
})
}

10
web/src/layouts/backend/router-view/main.vue
View File

@ -1,6 +1,6 @@
<template>
<el-main class="layout-main">
<el-scrollbar class="layout-main-scrollbar" :style="layoutMainScrollbarStyle()" ref="mainScrollbarRef">
<el-scrollbar class="layout-main-scrollbar" :style="layoutMainScrollbarStyle" ref="layoutMainScrollbarRef">
<router-view v-slot="{ Component }">
<transition :name="config.layout.mainAnimation" mode="out-in">
<keep-alive :include="state.keepAliveComponentNameList">
@ -13,13 +13,12 @@
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, onBeforeMount, onUnmounted, nextTick, provide } from 'vue'
import { reactive, onMounted, watch, onBeforeMount, onUnmounted, nextTick } from 'vue'
import { useRoute, type RouteLocationNormalized } from 'vue-router'
import { mainHeight as layoutMainScrollbarStyle } from '/@/utils/layout'
import useCurrentInstance from '/@/utils/useCurrentInstance'
import { useConfig } from '/@/stores/config'
import { useNavTabs } from '/@/stores/navTabs'
import type { ScrollbarInstance } from 'element-plus'
import { layoutMainScrollbarRef, layoutMainScrollbarStyle } from '/@/stores/refs'
defineOptions({
name: 'layout/main',
@ -30,7 +29,6 @@ const { proxy } = useCurrentInstance()
const route = useRoute()
const config = useConfig()
const navTabs = useNavTabs()
const mainScrollbarRef = ref<ScrollbarInstance>()
const state: {
componentKey: string
@ -85,8 +83,6 @@ watch(
}
}
)
provide('mainScrollbarRef', mainScrollbarRef)
</script>
<style scoped lang="scss">

3
web/src/layouts/frontend/components/header.vue
View File

@ -10,7 +10,7 @@
<Icon name="fa fa-indent" color="var(--el-color-primary)" size="20" />
</div>
<el-scrollbar class="hidden-sm-and-down">
<el-scrollbar ref="layoutMenuScrollbarRef" class="hidden-sm-and-down">
<Menu class="frontend-header-menu" :ellipsis="false" mode="horizontal" />
</el-scrollbar>
</el-col>
@ -44,6 +44,7 @@ import { useSiteConfig } from '/@/stores/siteConfig'
import { useMemberCenter } from '/@/stores/memberCenter'
import { initialize } from '/@/api/frontend/index'
import Menu from '/@/layouts/frontend/components/menu.vue'
import { layoutMenuScrollbarRef } from '/@/stores/refs'
const route = useRoute()
const router = useRouter()

3
web/src/layouts/frontend/components/menu.vue
View File

@ -1,5 +1,5 @@
<template>
<el-menu :default-active="state.activeMenu" @select="onSelect">
<el-menu ref="layoutMenuRef" :default-active="state.activeMenu" @select="onSelect">
<el-menu-item @click="router.push({ name: '/' })" v-blur index="index">
<Icon v-if="props.showIcon" name="fa fa-home" color="var(--el-text-color-primary)" />
<template #title>{{ $t('Home') }}</template>
@ -80,6 +80,7 @@ import toggleDark from '/@/utils/useDark'
import DarkSwitch from '/@/layouts/common/components/darkSwitch.vue'
import { useRoute, useRouter } from 'vue-router'
import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
import { layoutMenuRef } from '/@/stores/refs'
const route = useRoute()
const router = useRouter()

10
web/src/layouts/frontend/container/default.vue
View File

@ -1,7 +1,7 @@
<template>
<el-container class="is-vertical">
<Header />
<el-scrollbar :style="layoutMainScrollbarStyle()" ref="mainScrollbarRef">
<el-scrollbar :style="layoutMainScrollbarStyle" ref="layoutMainScrollbarRef">
<el-row class="frontend-footer-brother" justify="center">
<el-col class="user-layouts" :span="16" :xs="24">
<Aside class="hidden-sm-and-down" />
@ -14,17 +14,11 @@
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
import Header from '/@/layouts/frontend/components/header.vue'
import Aside from '/@/layouts/frontend/components/aside.vue'
import Main from '/@/layouts/frontend/components/main.vue'
import Footer from '/@/layouts/frontend/components/footer.vue'
import { mainHeight as layoutMainScrollbarStyle } from '/@/utils/layout'
import type { ScrollbarInstance } from 'element-plus'
const mainScrollbarRef = ref<ScrollbarInstance>()
provide('mainScrollbarRef', mainScrollbarRef)
import { layoutMainScrollbarRef, layoutMainScrollbarStyle } from '/@/stores/refs'
</script>
<style scoped lang="scss">

4
web/src/layouts/frontend/container/disable.vue
View File

@ -1,7 +1,7 @@
<template>
<el-container class="is-vertical">
<Header />
<el-scrollbar :style="layoutMainScrollbarStyle()" ref="mainScrollbarRef">
<el-scrollbar :style="layoutMainScrollbarStyle" ref="layoutMainScrollbarRef">
<el-row class="frontend-footer-brother" justify="center">
<el-col class="user-layouts" :span="16" :xs="24">
<el-alert :center="true" :title="$t('Member center disabled')" type="error" />
@ -15,7 +15,7 @@
<script setup lang="ts">
import Header from '/@/layouts/frontend/components/header.vue'
import Footer from '/@/layouts/frontend/components/footer.vue'
import { mainHeight as layoutMainScrollbarStyle } from '/@/utils/layout'
import { layoutMainScrollbarRef, layoutMainScrollbarStyle } from '/@/stores/refs'
</script>
<style scoped lang="scss">

33
web/src/stores/refs.ts Normal file
View File

@ -0,0 +1,33 @@
/**
* references
* 全局提供：引用（指向）一些对象（组件）的句柄
*/
import { ref, computed, CSSProperties } from 'vue'
import { mainHeight } from '/@/utils/layout'
import type { ScrollbarInstance } from 'element-plus'
import NavTabs from '/@/layouts/backend/components/navBar/tabs.vue'
/**
* 后台顶栏(tabs)组件ref（仅默认和经典布局）
*/
export const layoutNavTabsRef = ref<InstanceType<typeof NavTabs>>()
/**
* 前后台布局的主体的滚动条组件ref
*/
export const layoutMainScrollbarRef = ref<ScrollbarInstance>()
/**
* 前后台布局的主体滚动条的额外样式，包括高度
*/
export const layoutMainScrollbarStyle = computed<CSSProperties>(() => mainHeight())
/**
* 前后台布局的菜单组件ref
*/
export const layoutMenuRef = ref<ScrollbarInstance>()
/**
* 前后台布局的菜单栏滚动条组件ref
*/
export const layoutMenuScrollbarRef = ref<ScrollbarInstance>()