255 lines
6.9 KiB
Plaintext
255 lines
6.9 KiB
Plaintext
<template>
|
||
<view class="layout-root">
|
||
<!-- 主侧边栏 -->
|
||
<AdminAside
|
||
:collapsed="isCollapsed"
|
||
:menuList="menuList"
|
||
:activeMenuId="activeMenuId"
|
||
@toggle="toggleCollapse"
|
||
@menu-click="onMenuClick"
|
||
:asideWidth='ASIDE_W'
|
||
/>
|
||
|
||
<!-- 二级侧边栏：固定在内容区左侧（独立层级） -->
|
||
<AdminSubSider
|
||
v-if="activeGroups.length > 0"
|
||
:activeMenuTitle="activeMenuTitle"
|
||
:groups="activeGroups"
|
||
:activeSubId="activeSubId"
|
||
:activeMenuId="activeMenuId || 'home'"
|
||
:asideWidth="ASIDE_W"
|
||
:siderWidth="SUB_W"
|
||
@sub-click="onSubClick"
|
||
/>
|
||
|
||
<!-- 右侧内容区（Header + Tags + 内容展示区 + Footer） -->
|
||
<view
|
||
class="main"
|
||
:style="{ marginLeft: mainLeft }"
|
||
>
|
||
<AdminHeader
|
||
:breadcrumb="breadcrumb"
|
||
:hasNotification="hasNotification"
|
||
@search="onSearch"
|
||
@refresh="onRefresh"
|
||
@notify="onNotify"
|
||
/>
|
||
|
||
<AdminTagsView
|
||
:tabs="tabs"
|
||
:activeTabId="activeTabId"
|
||
@tab-click="onTabClick"
|
||
@tab-close="onTabClose"
|
||
/>
|
||
|
||
<!-- 展示区：只渲染 slot 内容（你的页面内容都在这里展示） -->
|
||
<scroll-view class="content" scroll-y="true">
|
||
<view class="content-inner">
|
||
<slot></slot>
|
||
</view>
|
||
<AdminFooter />
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref, computed } from 'vue'
|
||
import AdminAside from './components/AdminAside.uvue'
|
||
import AdminSubSider from './components/AdminSubSider.uvue'
|
||
import AdminHeader from './components/AdminHeader.uvue'
|
||
import AdminTagsView from './components/AdminTagsView.uvue'
|
||
import AdminFooter from './components/AdminFooter.uvue'
|
||
|
||
import { menuList as menuConst } from './utils/menu.uts'
|
||
import { findActiveByCurrentPage, getCurrentRoutePath } from './utils/nav.uts'
|
||
import { makeTabFromPath, upsertTab, removeTab } from './utils/tabs.uts'
|
||
import type { MenuItem, TabItem , MenuChild } from './types.uts'
|
||
|
||
// 你页面传进来的 currentPage：可能是顶级 id，也可能是子页面 id（user-list）
|
||
const props = defineProps<{ currentPage: string }>()
|
||
|
||
const menuList = ref<MenuItem[]>(menuConst)
|
||
|
||
const isCollapsed = ref(false)
|
||
const hasNotification = ref(true)
|
||
|
||
// active states
|
||
const activeMenuId = ref('home')
|
||
const activeSubId = ref('')
|
||
|
||
// 二级侧边栏
|
||
const ASIDE_W = 96
|
||
const SUB_W = 200 // 你想更像 CRMEB，就把这改小：160~180 都行
|
||
|
||
const mainLeft = computed(() => {
|
||
return (activeGroups.value.length > 0 ? (ASIDE_W + SUB_W) : ASIDE_W) + 'px'
|
||
})
|
||
|
||
// tabs
|
||
const tabs = ref<TabItem[]>([
|
||
{ id: 'home', title: '首页', path: '/pages/mall/admin/homePage/index' }
|
||
])
|
||
const activeTabId = ref('home')
|
||
|
||
// 每次 layout 渲染时，同步高亮（靠 currentPage）
|
||
const syncActiveByCurrentPage = () => {
|
||
const r = findActiveByCurrentPage(menuList.value, props.currentPage)
|
||
activeMenuId.value = r.activeMenuId
|
||
activeSubId.value = r.activeSubId
|
||
}
|
||
|
||
// 同步 tabs（靠当前 route）
|
||
const syncTabsByRoute = () => {
|
||
const path = getCurrentRoutePath()
|
||
if (!path) return
|
||
|
||
const tab = makeTabFromPath(menuList.value, path)
|
||
tabs.value = upsertTab(tabs.value, tab)
|
||
activeTabId.value = tab.id
|
||
}
|
||
|
||
// 初始化同步（setup 执行一次）
|
||
syncActiveByCurrentPage()
|
||
syncTabsByRoute()
|
||
|
||
// computed
|
||
const activeMenu = computed(() => menuList.value.find(m => m.id === activeMenuId.value))
|
||
const activeMenuTitle = computed(() => activeMenu.value?.title || '商城后台')
|
||
const activeGroups = computed(() => {
|
||
const m = menuList.value.find(it => it.id === activeMenuId.value)
|
||
return m?.groups ?? [] // ✅ 永远是数组
|
||
})
|
||
|
||
|
||
const breadcrumb = computed(() => {
|
||
let subTitle = ''
|
||
const groups = activeGroups.value
|
||
for (const g of groups) {
|
||
const cs = g.children ?? []
|
||
const hit = cs.find(c => c.id === activeSubId.value)
|
||
if (hit) { subTitle = hit.title; break }
|
||
}
|
||
return subTitle ? `${activeMenuTitle.value} / ${subTitle}` : `${activeMenuTitle.value}`
|
||
})
|
||
|
||
|
||
// handlers
|
||
const toggleCollapse = () => {
|
||
isCollapsed.value = !isCollapsed.value
|
||
}
|
||
|
||
// 递归取第一个 leaf（你要求的“递归默认打开第一个页面”）
|
||
const firstLeafOfMenu = (m: MenuItem): MenuChild | null => {
|
||
if (!m.groups || m.groups.length === 0) return null
|
||
const g0 = m.groups[0]
|
||
if (!g0.children || g0.children.length === 0) return null
|
||
|
||
const c0: any = g0.children[0] as any
|
||
// 兼容未来 children 还能再嵌套
|
||
if (c0.children && (c0.children as MenuChild[]).length > 0) {
|
||
const walk = (list: MenuChild[]): MenuChild | null => {
|
||
if (!list || list.length === 0) return null
|
||
const n: any = list[0] as any
|
||
if (n.children && (n.children as MenuChild[]).length > 0) return walk(n.children as MenuChild[])
|
||
return list[0]
|
||
}
|
||
return walk(c0.children as MenuChild[])
|
||
}
|
||
return g0.children[0]
|
||
}
|
||
|
||
let navigating = false
|
||
|
||
const go = async (url?: string | null) => {
|
||
if (!url || url.length === 0) return
|
||
if (navigating) return
|
||
navigating = true
|
||
try {
|
||
await uni.navigateTo({ url })
|
||
} catch (e) {
|
||
// 可选：忽略取消类报错，避免控制台刷屏
|
||
} finally {
|
||
setTimeout(() => { navigating = false }, 80)
|
||
}
|
||
}
|
||
|
||
|
||
const onMenuClick = (menuId: string) => {
|
||
const m = menuList.value.find(x => x.id === menuId)
|
||
if (!m) return
|
||
|
||
activeMenuId.value = m.id
|
||
|
||
const leaf = firstLeafOfMenu(m)
|
||
activeSubId.value = leaf ? leaf.id : ''
|
||
|
||
// ✅ 优先 leaf.path，其次才考虑 m.path
|
||
go(leaf?.path ?? m.path ?? '')
|
||
}
|
||
|
||
const firstLeafInChildren = (list?: MenuChild[] | null): MenuChild | null => {
|
||
const arr = list ?? []
|
||
if (arr.length === 0) return null
|
||
const n = arr[0]
|
||
const deep = n.children ?? []
|
||
return deep.length > 0 ? firstLeafInChildren(deep) : n
|
||
}
|
||
|
||
const onSubClick = (c: MenuChild) => {
|
||
activeSubId.value = c.id
|
||
if (c.path && c.path.length > 0) {
|
||
go(c.path)
|
||
} else {
|
||
const leaf = firstLeafInChildren(c.children)
|
||
go(leaf?.path ?? '')
|
||
}
|
||
}
|
||
|
||
|
||
const onTabClick = (tab: TabItem) => {
|
||
activeTabId.value = tab.id
|
||
go(tab.path)
|
||
}
|
||
|
||
const onTabClose = (tabId: string) => {
|
||
// 关闭当前 tab：删除后回到最后一个 tab
|
||
const wasActive = activeTabId.value === tabId
|
||
tabs.value = removeTab(tabs.value, tabId)
|
||
if (wasActive) {
|
||
const last = tabs.value[tabs.value.length - 1]
|
||
if (last) {
|
||
activeTabId.value = last.id
|
||
go(last.path)
|
||
}
|
||
}
|
||
}
|
||
|
||
const onSearch = () => uni.showToast({ title: '搜索', icon: 'none' })
|
||
const onRefresh = () => uni.showToast({ title: '刷新', icon: 'none' })
|
||
const onNotify = () => uni.showToast({ title: '通知', icon: 'none' })
|
||
</script>
|
||
|
||
<style>
|
||
.layout-root{
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background:#f3f4f6;
|
||
}
|
||
|
||
/* 右侧主区域：左边距由 template 动态控制（96 或 336） */
|
||
.main{
|
||
min-height: 100vh;
|
||
display:flex;
|
||
flex-direction: rowe;
|
||
}
|
||
|
||
/* 展示区 */
|
||
.content{
|
||
height: calc(100vh - 56px - 44px);
|
||
}
|
||
.content-inner{
|
||
padding:5px;
|
||
}
|
||
</style>
|