zant-admin 1.0.4 → 2.0.1

package/src/components/MainPage.vue

@@ -1,838 +1,838 @@
-<template>
-  <div class="common-layout">
-    <a-layout v-if="formConfig.navigationMode == 'side'">
-      <!-- 侧边栏部分 -->
-      <a-layout-sider
-        v-model:collapsed="collapsed"
-        :trigger="null"
-        collapsible
-        :style="{
-          overflow: 'auto',
-          height: '100vh',
-          position: 'fixed',
-          left: 0,
-          top: 0,
-          bottom: 0,
-          background: formConfig.themeClass == 'light' ? '#fff' : '',
-        }"
-      >
-        <div class="logo">
-          <span v-if="!collapsed" :class="formConfig.themeClass == 'light' ? 'text-color-primary' : 'text-color-white '">
-            <div class="flex-row"><img src="@/assets/imgs/logo.png" alt="" width="30px" class="margin-right-10" />{{ config.projectName }}</div>
-          </span>
-          <span v-else :class="formConfig.themeClass == 'light' ? 'text-color-primary' : 'text-color-white '"><img src="@/assets/imgs/logo.png" alt="" width="30px" /></span>
-        </div>
-        <a-menu
-          v-model:openKeys="openmenuKey"
-          v-model:selectedKeys="selectmenuKey"
-          mode="inline"
-          :theme="formConfig.themeClass"
-          :inline-collapsed="collapsed"
-          :items="menuItems"
-          @click="menuclick"
-        ></a-menu>
-      </a-layout-sider>
-      <!-- 主体部分 -->
-      <a-layout :style="{ marginLeft: collapsed ? '80px' : '200px' }">
-        <a-layout-header
-          class="zc-layout-header"
-          :style="{
-            position: 'fixed',
-            zIndex: 1,
-            width: collapsed ? 'calc(100% - 80px)' : 'calc(100% - 200px)',
-          }"
-        >
-          <div class="flex-row">
-            <div class="flex-item text-align-left">
-              <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
-              <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
-              <a class="text-color-black" @click="reload">
-                <UndoOutlined :style="{ fontSize: '18px' }" />
-              </a>
-              <!-- 面包屑导航 -->
-              <a-breadcrumb class="breadcrumb" v-if="breadcrumbItems.length > 0">
-                <a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.key">
-                  {{ item.title }}
-                </a-breadcrumb-item>
-              </a-breadcrumb>
-            </div>
-            <div class="flex-item text-align-right padding-right-20">
-              <a-space :size="18">
-                <a-dropdown>
-                  <a class="text-color-black" @click.prevent>
-                    <div class="flex-row">
-                      <div class="flex-item">
-                        <a-avatar
-                          :size="35"
-                          :style="{
-                            backgroundColor: '#1677ff',
-                            verticalAlign: 'middle',
-                            margin: '0 0 5px 0',
-                          }"
-                        >
-                          {{ username?.charAt(0) }}
-                        </a-avatar>
-                      </div>
-
-                      <div class="flex-item margin-left-10 text-align-left">
-                        <div class="username">{{ username }}</div>
-                        <div class="userphone">{{ mobile }}</div>
-                      </div>
-                    </div>
-                  </a>
-                  <template #overlay>
-                    <a-menu @click="avatardropdownonClick">
-                      <a-menu-item key="1"> 个人中心 </a-menu-item>
-                      <a-menu-item key="2"> 退出 </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-                <a class="text-color-black" @click.prevent @click="toggleFullScreen">
-                  <a-tooltip :title="isFullScreen ? '退出全屏' : '进入全屏'">
-                    <FullscreenOutlined v-if="isFullScreen" />
-                    <FullscreenExitOutlined v-else />
-                  </a-tooltip>
-                </a>
-                <a-dropdown>
-                  <a class="text-color-black" @click.prevent>
-                    <GlobalOutlined />
-                  </a>
-                  <template #overlay>
-                    <a-menu @click="dropdownonLanguageClick">
-                      <a-menu-item key="zhCN">
-                        <span :class="config.dayjsLocale == 'zh-cn' ? 'text-color-primary' : ''">简体中文</span>
-                      </a-menu-item>
-                      <a-menu-item key="enUS">
-                        <span :class="config.dayjsLocale == 'en' ? 'text-color-primary' : ''">English</span>
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-                <a class="text-color-black" @click.prevent @click="showDrawer">
-                  <SettingOutlined />
-                </a>
-              </a-space>
-            </div>
-          </div>
-        </a-layout-header>
-        <!-- 选项卡组件 -->
-        <div :class="['zc-layout-content-tabs', { collapsed: collapsed }]">
-          <div class="flex-row">
-            <div class="zc-layout-content-tabs-left">
-              <div class="my-tabs-wrapper" @wheel.prevent="onWheelScroll" ref="scrollContainer">
-                <a-tabs v-model:activeKey="selectmenuKey[0]" hide-add type="editable-card" size="small" @edit="tagdelete" @tabClick="tagchange">
-                  <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable" class="tag"> </a-tab-pane>
-                </a-tabs>
-              </div>
-            </div>
-
-            <div class="zc-layout-content-tabs-right">
-              <a-dropdown>
-                <a class="text-color-black" @click.prevent>
-                  <MoreOutlined :style="{ color: 'black', fontSize: '18px' }" />
-                </a>
-                <template #overlay>
-                  <a-menu @click="dropdownonClick">
-                    <a-menu-item key="1"> <ArrowLeftOutlined /> 关闭左侧 </a-menu-item>
-                    <a-menu-item key="2"> <ArrowRightOutlined /> 关闭右侧 </a-menu-item>
-                    <a-menu-item key="3"> <CloseOutlined /> 关闭其它 </a-menu-item>
-                    <a-menu-item key="4"> <CloseCircleOutlined /> 全部关闭 </a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown>
-            </div>
-          </div>
-        </div>
-        <!-- 路由视图部分 -->
-        <a-layout-content :style="{ margin: '120px 8px 8px 8px' }">
-          <router-view v-slot="{ Component, route }">
-            <keep-alive v-if="route.meta.cache">
-              <component :is="Component" />
-            </keep-alive>
-            <component v-else :is="Component" />
-          </router-view>
-        </a-layout-content>
-      </a-layout>
-    </a-layout>
-    <!-- 顶部菜单布局 -->
-    <a-layout v-else>
-      <a-layout-header
-        class="zc-layout-header-top"
-        :style="{
-          position: 'fixed',
-          zIndex: 1,
-          width: '100%',
-          background: formConfig.themeClass == 'light' ? '#fff' : '#001529',
-        }"
-      >
-        <div class="flex-row">
-          <div class="flex-item-9">
-            <div class="flex-row">
-              <div class="flex-item-1" style="line-height: 32px; height: 32px; margin: 16px">
-                <a-flex>
-                  <img src="@/assets/imgs/logo.png" alt="" width="30px" class="margin-right-10" />
-                  <span :class="formConfig.themeClass == 'light' ? 'text-color-primary' : 'text-color-white '" style="font-size: 16px">{{ config.projectName }}</span>
-                </a-flex>
-              </div>
-              <div class="flex-item-9">
-                <a-menu v-model:selectedKeys="selectmenuKey" mode="horizontal" :theme="formConfig.themeClass" :items="menuItems" @click="menuclick"></a-menu>
-              </div>
-            </div>
-          </div>
-          <div class="flex-item-1 text-align-right padding-right-20">
-            <a-space :size="18">
-              <a-dropdown>
-                <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent>
-                  <div class="flex-row">
-                    <div class="flex-item">
-                      <a-avatar
-                        :size="35"
-                        :style="{
-                          backgroundColor: '#1677ff',
-                          verticalAlign: 'middle',
-                          margin: '0 0 5px 0',
-                        }"
-                      >
-                        {{ username?.charAt(0) }}
-                      </a-avatar>
-                    </div>
-
-                    <div class="flex-item margin-left-10 text-align-left">
-                      <div class="username" :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'">{{ username }}</div>
-                      <div class="userphone" :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'">{{ mobile }}</div>
-                    </div>
-                  </div>
-                </a>
-                <template #overlay>
-                  <a-menu @click="avatardropdownonClick">
-                    <a-menu-item key="1"> 个人中心 </a-menu-item>
-                    <a-menu-item key="2"> 退出 </a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown>
-              <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent @click="toggleFullScreen">
-                <a-tooltip :title="isFullScreen ? '退出全屏' : '进入全屏'">
-                  <FullscreenOutlined v-if="isFullScreen" />
-                  <FullscreenExitOutlined v-else />
-                </a-tooltip>
-              </a>
-              <a-dropdown>
-                <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent>
-                  <GlobalOutlined />
-                </a>
-                <template #overlay>
-                  <a-menu @click="dropdownonLanguageClick">
-                    <a-menu-item key="zhCN">
-                      <span :class="config.locale.locale == 'zh-cn' ? 'text-color-primary' : ''">简体中文</span>
-                    </a-menu-item>
-                    <a-menu-item key="enUS">
-                      <span :class="config.locale.locale == 'en' ? 'text-color-primary' : ''">English</span>
-                    </a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown>
-              <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent @click="showDrawer">
-                <SettingOutlined />
-              </a>
-            </a-space>
-          </div>
-        </div>
-      </a-layout-header>
-      <!-- 选项卡组件 -->
-      <div :class="['zc-layout-content-tabs', 'top-layout', { collapsed: collapsed }]">
-        <div class="flex-row">
-          <div class="zc-layout-content-tabs-left">
-            <div class="my-tabs-wrapper" @wheel.prevent="onWheelScroll" ref="scrollContainer">
-              <a-tabs v-model:activeKey="selectmenuKey[0]" hide-add type="editable-card" size="small" @edit="tagdelete" @tabClick="tagchange">
-                <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable" class="tag"> </a-tab-pane>
-              </a-tabs>
-            </div>
-          </div>
-
-          <div class="zc-layout-content-tabs-right">
-            <a-dropdown>
-              <a class="text-color-black" @click.prevent>
-                <MoreOutlined :style="{ color: 'black', fontSize: '18px' }" />
-              </a>
-              <template #overlay>
-                <a-menu @click="dropdownonClick">
-                  <a-menu-item key="1"> <ArrowLeftOutlined /> 关闭左侧 </a-menu-item>
-                  <a-menu-item key="2"> <ArrowRightOutlined /> 关闭右侧 </a-menu-item>
-                  <a-menu-item key="3"> <CloseOutlined /> 关闭其它 </a-menu-item>
-                  <a-menu-item key="4"> <CloseCircleOutlined /> 全部关闭 </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </div>
-        </div>
-      </div>
-      <!-- 面包屑导航 -->
-      <a-breadcrumb class="breadcrumb-top" v-if="breadcrumbItems.length > 0">
-        <a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.key">
-          {{ item.title }}
-        </a-breadcrumb-item>
-      </a-breadcrumb>
-      <!-- 路由视图部分 -->
-      <a-layout-content :style="{ margin: '120px 8px 8px 8px' }">
-        <router-view v-slot="{ Component, route }">
-          <keep-alive v-if="route.meta.cache">
-            <component :is="Component" />
-          </keep-alive>
-          <component v-else :is="Component" />
-        </router-view>
-      </a-layout-content>
-    </a-layout>
-    <!-- 抽屉组件 -->
-    <a-drawer title="配置" :closable="false" :open="open" @close="onClose">
-      <a-form name="config_form" :model="formConfig">
-        <div class="blockquote">主题</div>
-        <div class="padding-10">
-          <a-radio-group v-model:value="formConfig.themeClass" @change="themeClasschangeTheme">
-            <a-radio value="dark">黑</a-radio>
-            <a-radio value="light">白</a-radio>
-          </a-radio-group>
-        </div>
-        <div class="blockquote">导航模式</div>
-        <div class="padding-10">
-          <a-radio-group v-model:value="formConfig.navigationMode" @change="navigationModechangeTheme">
-            <a-radio value="side">侧边菜单布局</a-radio>
-            <a-radio value="top">顶部菜单布局</a-radio>
-          </a-radio-group>
-        </div>
-        <div class="blockquote">表格设置</div>
-        <div class="padding-10">
-          <a-row>
-            <a-col :span="12">表格边框</a-col>
-            <a-col :span="12">
-              <a-switch v-model:checked="formConfig.tableBordered" checked-children="边框开" un-checked-children="边框关" @change="tableBorderedchangeTheme" />
-            </a-col>
-          </a-row>
-        </div>
-      </a-form>
-    </a-drawer>
-  </div>
-</template>
-<script setup>
-import { ref, reactive, h, provide, getCurrentInstance, watch, onMounted } from 'vue'
-import { menuStore } from '@/stores/menu'
-import { configStore } from '@/stores/config'
-import { useUserStore } from '@/stores/user'
-import router from '@/router'
-import zhCN from 'ant-design-vue/es/locale/zh_CN'
-import enUS from 'ant-design-vue/es/locale/en_US'
-const user = useUserStore()
-const username = user.userInfo.name
-const mobile = user.userInfo.mobile
-// 菜单状态
-const menu = menuStore()
-const config = configStore()
-const collapsed = ref(false)
-const openmenuKey = ref(menu.openmenuKey)
-const selectmenuKey = ref(menu.selectmenuKey)
-const panes = ref(menu.tagmenus)
-// 定义一个布尔状态来跟踪是否处于全屏
-const isFullScreen = ref(false)
-const formConfig = reactive({
-  themeClass: config.themeClass,
-  tableBordered: config.tableBordered,
-  navigationMode: config.navigationMode,
-})
-const menuItems = ref([])
-const { proxy } = getCurrentInstance() // 获取当前实例
-// 菜单项生成
-const menuinit = () => {
-  const icons = proxy.$icons // 访问全局图标
-  const createMenuItem = menu => {
-    return menu.map(item => {
-      // 动态解析图标
-      const iconComponent = item.icon ? icons[item.icon] : null
-      const menuItem = {
-        key: item.id,
-        parentId: item.parentId,
-        icon: iconComponent ? () => h(iconComponent) : undefined, // 动态渲染图标
-        label: item.title,
-        title: item.title,
-        path: item.path,
-        type: item.type,
-        url: item.url,
-      }
-      if (item.children && item.children.length > 0) {
-        menuItem.children = createMenuItem(item.children)
-      }
-      return menuItem
-    })
-  }
-  menuItems.value = createMenuItem(menu.menus)
-}
-menuinit()
-// 菜单点击事件
-const menuclick = ({ item, key }) => {
-  const type = item.originItemValue.type
-  const url = item.url
-
-  if (type === 4 && url) {
-    // 外链：新窗口打开，不生成 tab
-    window.open(url, '_blank')
-    return
-  }
-  let current = panes.value.find(x => x.key === key)
-  if (!current) {
-    current = {
-      key,
-      parentId: item.parentId,
-      title: item.title,
-      path: item.path,
-      closable: true,
-      type,
-      url,
-    }
-    panes.value.push(current)
-  }
-  updateMenuPanes(current)
-}
-// 点击 Tag 切换选项卡
-const tagchange = key => {
-  const current = panes.value.find(x => x.key === key)
-  if (current) {
-    updateMenuPanes(current)
-  }
-}
-
-// 删除 Tag
-const tagdelete = (key, action) => {
-  if (action === 'add') {
-    //add();
-  } else {
-    if (key == selectmenuKey.value[0]) {
-      const index = panes.value.findIndex(item => item.key === key)
-      let nextPane = null
-      //如果有下一条
-      if (index + 1 < panes.value.length) {
-        // 有下一个
-        nextPane = panes.value[index + 1]
-      } else if (index - 1 >= 0) {
-        // 有上一个
-        nextPane = panes.value[index - 1]
-      }
-      if (nextPane) {
-        updateMenuPanes(nextPane)
-      }
-    }
-    panes.value = panes.value.filter(x => x.key !== key)
-    menu.tagmenus = panes.value
-  }
-}
-// 下拉菜单点击事件
-const dropdownonClick = ({ key }) => {
-  const index = panes.value.findIndex(item => item.key === selectmenuKey.value[0])
-  switch (key) {
-    case '1':
-      panes.value = panes.value.filter((item, i) => i >= index || item.key === 0)
-      menu.tagmenus = panes.value
-      break
-    case '2':
-      panes.value = panes.value.filter((item, i) => i <= index)
-      menu.tagmenus = panes.value
-      break
-    case '3':
-      panes.value = panes.value.filter(x => x.key === selectmenuKey.value[0] || x.key === 0)
-      menu.tagmenus = panes.value
-      break
-    case '4':
-      panes.value = panes.value.filter(x => x.key === 0)
-      menu.tagmenus = panes.value
-      // 切换到控制台
-      const consolePane = {
-        key: 'console',
-        parentId: 0,
-        title: '控制台',
-        path: '/console',
-        closable: false,
-        type: 1, // 普通路由
-        url: '',
-      }
-      updateMenuPanes(consolePane)
-      break
-    default:
-      break
-  }
-}
-const findAllByHref = (items, targetHref) => {
-  let result = []
-  items.forEach(item => {
-    if (item.path === targetHref) {
-      result.push(item)
-    }
-    if (item.children && item.children.length > 0) {
-      result = result.concat(findAllByHref(item.children, targetHref))
-    }
-  })
-  return result
-}
-//个人中心和退出
-const avatardropdownonClick = ({ key }) => {
-  switch (key) {
-    case '1':
-      const result = findAllByHref(menuItems.value, '/center')
-      let pane
-      if (result.length === 0) {
-        // 如果菜单项中没有个人中心，创建一个默认的个人中心菜单项
-        pane = {
-          key: 'center',
-          parentId: '0',
-          title: '个人中心',
-          path: '/center',
-          closable: true,
-          type: 2, // 普通菜单
-          url: '',
-        }
-      } else {
-        pane = {
-          key: result[0].key,
-          parentId: result[0].parentId,
-          title: result[0].title,
-          path: result[0].path,
-          closable: true,
-          type: result[0].type,
-          url: result[0].url,
-        }
-      }
-      const existingTab = panes.value.find(x => x.key === pane.key)
-      if (!existingTab) {
-        panes.value.push(pane)
-      }
-      updateMenuPanes(pane)
-      break
-    case '2':
-      user.$reset()
-      menu.$reset()
-      router.push('/login')
-      break
-    default:
-      break
-  }
-}
-
-function findParentKeys(menuArray, targetKey, parentKeys = []) {
-  for (const item of menuArray) {
-    // 如果找到目标项，返回当前收集的父级key
-    if (item.key === targetKey) {
-      return parentKeys
-    }
-
-    // 如果有子菜单，递归查找
-    if (item.children && item.children.length > 0) {
-      const result = findParentKeys(item.children, targetKey, [...parentKeys, item.key])
-      if (result) {
-        return result
-      }
-    }
-  }
-  return null
-}
-// 更新选中的选项卡和路由
-const updateMenuPanes = pane => {
-  selectmenuKey.value = [pane.key]
-  if (pane.key != 0) {
-    const parentKeys = findParentKeys(menuItems.value, pane.key)
-    // 设置展开的菜单key，包括所有上级key
-    openmenuKey.value = parentKeys ? [...parentKeys] : []
-  } else {
-    openmenuKey.value = [pane.parentId]
-  }
-  menu.setSelectmenuKey(selectmenuKey.value)
-  menu.setOpenmenuKey(openmenuKey.value)
-
-  if (pane.type === 3 && pane.url) {
-    // 内链：用 iframe 打开
-    router.push({
-      path: '/iframePage',
-      query: { url: encodeURIComponent(pane.url) },
-    })
-  } else {
-    // 普通菜单：走路由
-    router.push(pane.path)
-  }
-}
-//国际化
-const dropdownonLanguageClick = ({ key }) => {
-  if (key === 'zhCN') {
-    config.setLocale(zhCN)
-  } else {
-    config.setLocale(enUS)
-  }
-}
-// 抽屉状态
-const open = ref(false)
-const showDrawer = () => {
-  open.value = true
-}
-const onClose = () => {
-  open.value = false
-}
-// 主题切换
-const themeClasschangeTheme = e => {
-  config.themeClass = e.target.value
-}
-//导航模式
-const navigationModechangeTheme = e => {
-  config.navigationMode = e.target.value
-}
-
-// 定义全屏切换方法
-const toggleFullScreen = () => {
-  const element = document.documentElement
-  if (!isFullScreen.value) {
-    // 进入全屏模式
-    if (element.requestFullscreen) {
-      element.requestFullscreen()
-    } else if (element.mozRequestFullScreen) {
-      // Firefox
-      element.mozRequestFullScreen()
-    } else if (element.webkitRequestFullscreen) {
-      // Chrome, Safari and Opera
-      element.webkitRequestFullscreen()
-    } else if (element.msRequestFullscreen) {
-      // IE/Edge
-      element.msRequestFullscreen()
-    }
-  } else {
-    // 退出全屏模式
-    if (document.exitFullscreen) {
-      document.exitFullscreen()
-    } else if (document.mozCancelFullScreen) {
-      // Firefox
-      document.mozCancelFullScreen()
-    } else if (document.webkitExitFullscreen) {
-      // Chrome, Safari and Opera
-      document.webkitExitFullscreen()
-    } else if (document.msExitFullscreen) {
-      // IE/Edge
-      document.msExitFullscreen()
-    }
-  }
-  isFullScreen.value = !isFullScreen.value // 切换全屏状态
-}
-//表格边框切换
-const tableBorderedchangeTheme = checked => {
-  config.tableBordered = checked
-}
-const reload = () => {
-  window.location.reload()
-}
-const scrollContainer = ref(null)
-const onWheelScroll = e => {
-  if (scrollContainer.value) {
-    scrollContainer.value.scrollLeft += e.deltaY // 将垂直滚动转为水平滚动
-  }
-}
-// 生成面包屑导航项
-const breadcrumbItems = ref([])
-
-/**
- * 根据当前选中的菜单项生成面包屑导航
- */
-const generateBreadcrumbItems = () => {
-  breadcrumbItems.value = []
-
-  if (selectmenuKey.value.length === 0) return
-
-  const currentKey = selectmenuKey.value[0]
-  const findItemPath = (items, targetKey, path = []) => {
-    for (const item of items) {
-      if (item.key === targetKey) {
-        return [...path, item]
-      }
-      if (item.children && item.children.length > 0) {
-        const result = findItemPath(item.children, targetKey, [...path, item])
-        if (result) return result
-      }
-    }
-    return null
-  }
-
-  const itemPath = findItemPath(menuItems.value, currentKey)
-  if (itemPath) {
-    breadcrumbItems.value = itemPath.map(item => ({
-      key: item.key,
-      title: item.title,
-      path: item.path,
-      type: item.type,
-      url: item.url,
-    }))
-  }
-}
-
-// 监听选中菜单项变化，更新面包屑
-watch(
-  selectmenuKey,
-  () => {
-    generateBreadcrumbItems()
-  },
-  { immediate: true },
-)
-
-// 组件挂载时恢复路由状态
-onMounted(() => {
-  // 检查是否有持久化的选中菜单项
-  if (selectmenuKey.value && selectmenuKey.value.length > 0 && selectmenuKey.value[0] !== 0) {
-    const currentKey = selectmenuKey.value[0]
-
-    // 在tagmenus中查找对应的pane
-    const savedPane = panes.value.find(pane => pane.key === currentKey)
-
-    if (savedPane) {
-      // 如果找到了对应的pane，恢复路由状态
-      updateMenuPanes(savedPane)
-    } else {
-      // 如果没有找到对应的pane，检查当前路由是否与持久化状态匹配
-      const currentRoute = router.currentRoute.value
-      if (currentRoute.path === '/' || currentRoute.path === '/home') {
-        // 如果当前在首页，但持久化状态不是首页，尝试恢复
-        const menuItem = findMenuItemByKey(menuItems.value, currentKey)
-        if (menuItem) {
-          // 创建新的pane并跳转
-          const newPane = {
-            key: menuItem.key,
-            parentId: menuItem.parentId,
-            title: menuItem.title,
-            path: menuItem.path,
-            closable: true,
-            type: menuItem.type,
-            url: menuItem.url,
-          }
-          panes.value.push(newPane)
-          updateMenuPanes(newPane)
-        }
-      }
-    }
-  }
-})
-
-// 根据key在菜单项中查找对应项
-function findMenuItemByKey(items, targetKey) {
-  for (const item of items) {
-    if (item.key === targetKey) {
-      return item
-    }
-    if (item.children && item.children.length > 0) {
-      const result = findMenuItemByKey(item.children, targetKey)
-      if (result) return result
-    }
-  }
-  return null
-}
-
-// 提供方法
-provide('menuinit', menuinit)
-provide('menuclick', menuclick)
-</script>
-<style scoped>
-.trigger {
-  font-size: 18px;
-  line-height: 64px;
-  padding: 0 24px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-.trigger:hover {
-  color: #1890ff;
-}
-.logo {
-  text-align: center;
-  line-height: 32px;
-  height: 32px;
-  margin: 16px;
-  font-size: 16px;
-}
-.site-layout .site-layout-background {
-  background: #fff;
-}
-.zc-layout-header {
-  background: #fff !important;
-  padding: 0 !important;
-  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
-}
-.zc-layout-header-top {
-  padding: 0 !important;
-}
-.zc-layout-content-tabs {
-  align-items: center;
-  position: fixed;
-  top: 64px;
-  left: 200px;
-  right: 0;
-  z-index: 100;
-  background: #fff;
-  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
-  transition: left 0.3s ease;
-}
-
-.zc-layout-content-tabs.collapsed {
-  left: 80px;
-}
-
-.zc-layout-content-tabs.top-layout {
-  left: 0;
-}
-.zc-layout-content-tabs-left {
-  flex: 0.99;
-  width: 90%;
-}
-.zc-layout-content-tabs-right {
-  flex: 0.01;
-  text-align: right;
-  padding-right: 15px;
-}
-
-/* 使用深度选择器修改所有标签项的样式 */
-.my-tabs-wrapper :deep(.ant-tabs-tab) {
-  border-radius: 4px !important; /* 圆角 */
-  color: #999999 !important;
-  background-color: #f5f5f5 !important;
-  border: 0px !important;
-  margin-right: 4px;
-  margin: 8px;
-  padding: 5px 10px !important;
-}
-/* 修改激活标签的样式 */
-.my-tabs-wrapper :deep(.ant-tabs-tab-active .ant-tabs-tab-btn .ant-tabs-tab-remove) {
-  color: #1890ff !important;
-}
-.my-tabs-wrapper :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
-  color: #1890ff !important;
-}
-/* 标签悬停效果 */
-.my-tabs-wrapper :deep(.ant-tabs-tab:hover, .ant-tabs-tab-remove:hover) {
-  color: #1890ff !important;
-}
-.my-tabs-wrapper :deep(.ant-tabs-content-holder) {
-  display: none !important;
-}
-.my-tabs-wrapper :deep(.ant-tabs-nav) {
-  margin: 0px !important;
-  border-bottom: none !important; /* 移除底部分割线 */
-}
-.my-tabs-wrapper :deep(.ant-tabs-tab-remove) {
-  margin-left: 0px !important;
-}
-
-.breadcrumb {
-  display: inline-block;
-  margin-left: 16px;
-}
-.breadcrumb-top {
-  margin-top: 8px;
-  padding-left: 16px;
-}
-
-.username {
-  line-height: 1.2;
-  margin-bottom: 2px;
-}
-
-.userphone {
-  line-height: 1.2;
-  margin-bottom: 4px;
-}
-</style>
+<template>
+  <div class="common-layout">
+    <a-layout v-if="formConfig.navigationMode == 'side'">
+      <!-- 侧边栏部分 -->
+      <a-layout-sider
+        v-model:collapsed="collapsed"
+        :trigger="null"
+        collapsible
+        :style="{
+          overflow: 'auto',
+          height: '100vh',
+          position: 'fixed',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          background: formConfig.themeClass == 'light' ? '#fff' : '',
+        }"
+      >
+        <div class="logo">
+          <span v-if="!collapsed" :class="formConfig.themeClass == 'light' ? 'text-color-primary' : 'text-color-white '">
+            <div class="flex-row"><img src="@/assets/imgs/logo.png" alt="" width="30px" class="margin-right-10" />{{ config.projectName }}</div>
+          </span>
+          <span v-else :class="formConfig.themeClass == 'light' ? 'text-color-primary' : 'text-color-white '"><img src="@/assets/imgs/logo.png" alt="" width="30px" /></span>
+        </div>
+        <a-menu
+          v-model:openKeys="openmenuKey"
+          v-model:selectedKeys="selectmenuKey"
+          mode="inline"
+          :theme="formConfig.themeClass"
+          :inline-collapsed="collapsed"
+          :items="menuItems"
+          @click="menuclick"
+        ></a-menu>
+      </a-layout-sider>
+      <!-- 主体部分 -->
+      <a-layout :style="{ marginLeft: collapsed ? '80px' : '200px' }">
+        <a-layout-header
+          class="zc-layout-header"
+          :style="{
+            position: 'fixed',
+            zIndex: 1,
+            width: collapsed ? 'calc(100% - 80px)' : 'calc(100% - 200px)',
+          }"
+        >
+          <div class="flex-row">
+            <div class="flex-item text-align-left">
+              <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
+              <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
+              <a class="text-color-black" @click="reload">
+                <UndoOutlined :style="{ fontSize: '18px' }" />
+              </a>
+              <!-- 面包屑导航 -->
+              <a-breadcrumb class="breadcrumb" v-if="breadcrumbItems.length > 0">
+                <a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.key">
+                  {{ item.title }}
+                </a-breadcrumb-item>
+              </a-breadcrumb>
+            </div>
+            <div class="flex-item text-align-right padding-right-20">
+              <a-space :size="18">
+                <a-dropdown>
+                  <a class="text-color-black" @click.prevent>
+                    <div class="flex-row">
+                      <div class="flex-item">
+                        <a-avatar
+                          :size="35"
+                          :style="{
+                            backgroundColor: '#1677ff',
+                            verticalAlign: 'middle',
+                            margin: '0 0 5px 0',
+                          }"
+                        >
+                          {{ username?.charAt(0) }}
+                        </a-avatar>
+                      </div>
+
+                      <div class="flex-item margin-left-10 text-align-left">
+                        <div class="username">{{ username }}</div>
+                        <div class="userphone">{{ mobile }}</div>
+                      </div>
+                    </div>
+                  </a>
+                  <template #overlay>
+                    <a-menu @click="avatardropdownonClick">
+                      <a-menu-item key="1"> 个人中心 </a-menu-item>
+                      <a-menu-item key="2"> 退出 </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+                <a class="text-color-black" @click.prevent @click="toggleFullScreen">
+                  <a-tooltip :title="isFullScreen ? '退出全屏' : '进入全屏'">
+                    <FullscreenOutlined v-if="isFullScreen" />
+                    <FullscreenExitOutlined v-else />
+                  </a-tooltip>
+                </a>
+                <a-dropdown>
+                  <a class="text-color-black" @click.prevent>
+                    <GlobalOutlined />
+                  </a>
+                  <template #overlay>
+                    <a-menu @click="dropdownonLanguageClick">
+                      <a-menu-item key="zhCN">
+                        <span :class="config.dayjsLocale == 'zh-cn' ? 'text-color-primary' : ''">简体中文</span>
+                      </a-menu-item>
+                      <a-menu-item key="enUS">
+                        <span :class="config.dayjsLocale == 'en' ? 'text-color-primary' : ''">English</span>
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+                <a class="text-color-black" @click.prevent @click="showDrawer">
+                  <SettingOutlined />
+                </a>
+              </a-space>
+            </div>
+          </div>
+        </a-layout-header>
+        <!-- 选项卡组件 -->
+        <div :class="['zc-layout-content-tabs', { collapsed: collapsed }]">
+          <div class="flex-row">
+            <div class="zc-layout-content-tabs-left">
+              <div class="my-tabs-wrapper" @wheel.prevent="onWheelScroll" ref="scrollContainer">
+                <a-tabs v-model:activeKey="selectmenuKey[0]" hide-add type="editable-card" size="small" @edit="tagdelete" @tabClick="tagchange">
+                  <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable" class="tag"> </a-tab-pane>
+                </a-tabs>
+              </div>
+            </div>
+
+            <div class="zc-layout-content-tabs-right">
+              <a-dropdown>
+                <a class="text-color-black" @click.prevent>
+                  <MoreOutlined :style="{ color: 'black', fontSize: '18px' }" />
+                </a>
+                <template #overlay>
+                  <a-menu @click="dropdownonClick">
+                    <a-menu-item key="1"> <ArrowLeftOutlined /> 关闭左侧 </a-menu-item>
+                    <a-menu-item key="2"> <ArrowRightOutlined /> 关闭右侧 </a-menu-item>
+                    <a-menu-item key="3"> <CloseOutlined /> 关闭其它 </a-menu-item>
+                    <a-menu-item key="4"> <CloseCircleOutlined /> 全部关闭 </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+            </div>
+          </div>
+        </div>
+        <!-- 路由视图部分 -->
+        <a-layout-content :style="{ margin: '120px 8px 8px 8px' }">
+          <router-view v-slot="{ Component, route }">
+            <keep-alive v-if="route.meta.cache">
+              <component :is="Component" />
+            </keep-alive>
+            <component v-else :is="Component" />
+          </router-view>
+        </a-layout-content>
+      </a-layout>
+    </a-layout>
+    <!-- 顶部菜单布局 -->
+    <a-layout v-else>
+      <a-layout-header
+        class="zc-layout-header-top"
+        :style="{
+          position: 'fixed',
+          zIndex: 1,
+          width: '100%',
+          background: formConfig.themeClass == 'light' ? '#fff' : '#001529',
+        }"
+      >
+        <div class="flex-row">
+          <div class="flex-item-9">
+            <div class="flex-row">
+              <div class="flex-item-1" style="line-height: 32px; height: 32px; margin: 16px">
+                <a-flex>
+                  <img src="@/assets/imgs/logo.png" alt="" width="30px" class="margin-right-10" />
+                  <span :class="formConfig.themeClass == 'light' ? 'text-color-primary' : 'text-color-white '" style="font-size: 16px">{{ config.projectName }}</span>
+                </a-flex>
+              </div>
+              <div class="flex-item-9">
+                <a-menu v-model:selectedKeys="selectmenuKey" mode="horizontal" :theme="formConfig.themeClass" :items="menuItems" @click="menuclick"></a-menu>
+              </div>
+            </div>
+          </div>
+          <div class="flex-item-1 text-align-right padding-right-20">
+            <a-space :size="18">
+              <a-dropdown>
+                <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent>
+                  <div class="flex-row">
+                    <div class="flex-item">
+                      <a-avatar
+                        :size="35"
+                        :style="{
+                          backgroundColor: '#1677ff',
+                          verticalAlign: 'middle',
+                          margin: '0 0 5px 0',
+                        }"
+                      >
+                        {{ username?.charAt(0) }}
+                      </a-avatar>
+                    </div>
+
+                    <div class="flex-item margin-left-10 text-align-left">
+                      <div class="username" :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'">{{ username }}</div>
+                      <div class="userphone" :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'">{{ mobile }}</div>
+                    </div>
+                  </div>
+                </a>
+                <template #overlay>
+                  <a-menu @click="avatardropdownonClick">
+                    <a-menu-item key="1"> 个人中心 </a-menu-item>
+                    <a-menu-item key="2"> 退出 </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+              <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent @click="toggleFullScreen">
+                <a-tooltip :title="isFullScreen ? '退出全屏' : '进入全屏'">
+                  <FullscreenOutlined v-if="isFullScreen" />
+                  <FullscreenExitOutlined v-else />
+                </a-tooltip>
+              </a>
+              <a-dropdown>
+                <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent>
+                  <GlobalOutlined />
+                </a>
+                <template #overlay>
+                  <a-menu @click="dropdownonLanguageClick">
+                    <a-menu-item key="zhCN">
+                      <span :class="config.locale.locale == 'zh-cn' ? 'text-color-primary' : ''">简体中文</span>
+                    </a-menu-item>
+                    <a-menu-item key="enUS">
+                      <span :class="config.locale.locale == 'en' ? 'text-color-primary' : ''">English</span>
+                    </a-menu-item>
+                  </a-menu>
+                </template>
+              </a-dropdown>
+              <a :class="formConfig.themeClass == 'light' ? 'text-color-black' : 'text-color-white'" @click.prevent @click="showDrawer">
+                <SettingOutlined />
+              </a>
+            </a-space>
+          </div>
+        </div>
+      </a-layout-header>
+      <!-- 选项卡组件 -->
+      <div :class="['zc-layout-content-tabs', 'top-layout', { collapsed: collapsed }]">
+        <div class="flex-row">
+          <div class="zc-layout-content-tabs-left">
+            <div class="my-tabs-wrapper" @wheel.prevent="onWheelScroll" ref="scrollContainer">
+              <a-tabs v-model:activeKey="selectmenuKey[0]" hide-add type="editable-card" size="small" @edit="tagdelete" @tabClick="tagchange">
+                <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable" class="tag"> </a-tab-pane>
+              </a-tabs>
+            </div>
+          </div>
+
+          <div class="zc-layout-content-tabs-right">
+            <a-dropdown>
+              <a class="text-color-black" @click.prevent>
+                <MoreOutlined :style="{ color: 'black', fontSize: '18px' }" />
+              </a>
+              <template #overlay>
+                <a-menu @click="dropdownonClick">
+                  <a-menu-item key="1"> <ArrowLeftOutlined /> 关闭左侧 </a-menu-item>
+                  <a-menu-item key="2"> <ArrowRightOutlined /> 关闭右侧 </a-menu-item>
+                  <a-menu-item key="3"> <CloseOutlined /> 关闭其它 </a-menu-item>
+                  <a-menu-item key="4"> <CloseCircleOutlined /> 全部关闭 </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+        </div>
+      </div>
+      <!-- 面包屑导航 -->
+      <a-breadcrumb class="breadcrumb-top" v-if="breadcrumbItems.length > 0">
+        <a-breadcrumb-item v-for="item in breadcrumbItems" :key="item.key">
+          {{ item.title }}
+        </a-breadcrumb-item>
+      </a-breadcrumb>
+      <!-- 路由视图部分 -->
+      <a-layout-content :style="{ margin: '120px 8px 8px 8px' }">
+        <router-view v-slot="{ Component, route }">
+          <keep-alive v-if="route.meta.cache">
+            <component :is="Component" />
+          </keep-alive>
+          <component v-else :is="Component" />
+        </router-view>
+      </a-layout-content>
+    </a-layout>
+    <!-- 抽屉组件 -->
+    <a-drawer title="配置" :closable="false" :open="open" @close="onClose">
+      <a-form name="config_form" :model="formConfig">
+        <div class="blockquote">主题</div>
+        <div class="padding-10">
+          <a-radio-group v-model:value="formConfig.themeClass" @change="themeClasschangeTheme">
+            <a-radio value="dark">黑</a-radio>
+            <a-radio value="light">白</a-radio>
+          </a-radio-group>
+        </div>
+        <div class="blockquote">导航模式</div>
+        <div class="padding-10">
+          <a-radio-group v-model:value="formConfig.navigationMode" @change="navigationModechangeTheme">
+            <a-radio value="side">侧边菜单布局</a-radio>
+            <a-radio value="top">顶部菜单布局</a-radio>
+          </a-radio-group>
+        </div>
+        <div class="blockquote">表格设置</div>
+        <div class="padding-10">
+          <a-row>
+            <a-col :span="12">表格边框</a-col>
+            <a-col :span="12">
+              <a-switch v-model:checked="formConfig.tableBordered" checked-children="边框开" un-checked-children="边框关" @change="tableBorderedchangeTheme" />
+            </a-col>
+          </a-row>
+        </div>
+      </a-form>
+    </a-drawer>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, h, provide, getCurrentInstance, watch, onMounted } from 'vue'
+import { menuStore } from '@/stores/menu'
+import { configStore } from '@/stores/config'
+import { useUserStore } from '@/stores/user'
+import router from '@/router'
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
+import enUS from 'ant-design-vue/es/locale/en_US'
+const user = useUserStore()
+const username = user.userInfo.name
+const mobile = user.userInfo.mobile
+// 菜单状态
+const menu = menuStore()
+const config = configStore()
+const collapsed = ref(false)
+const openmenuKey = ref(menu.openmenuKey)
+const selectmenuKey = ref(menu.selectmenuKey)
+const panes = ref(menu.tagmenus)
+// 定义一个布尔状态来跟踪是否处于全屏
+const isFullScreen = ref(false)
+const formConfig = reactive({
+  themeClass: config.themeClass,
+  tableBordered: config.tableBordered,
+  navigationMode: config.navigationMode,
+})
+const menuItems = ref([])
+const { proxy } = getCurrentInstance() // 获取当前实例
+// 菜单项生成
+const menuinit = () => {
+  const icons = proxy.$icons // 访问全局图标
+  const createMenuItem = menu => {
+    return menu.map(item => {
+      // 动态解析图标
+      const iconComponent = item.icon ? icons[item.icon] : null
+      const menuItem = {
+        key: item.id,
+        parentId: item.parentId,
+        icon: iconComponent ? () => h(iconComponent) : undefined, // 动态渲染图标
+        label: item.title,
+        title: item.title,
+        path: item.path,
+        type: item.type,
+        url: item.url,
+      }
+      if (item.children && item.children.length > 0) {
+        menuItem.children = createMenuItem(item.children)
+      }
+      return menuItem
+    })
+  }
+  menuItems.value = createMenuItem(menu.menus)
+}
+menuinit()
+// 菜单点击事件
+const menuclick = ({ item, key }) => {
+  const type = item.originItemValue.type
+  const url = item.url
+
+  if (type === 4 && url) {
+    // 外链：新窗口打开，不生成 tab
+    window.open(url, '_blank')
+    return
+  }
+  let current = panes.value.find(x => x.key === key)
+  if (!current) {
+    current = {
+      key,
+      parentId: item.parentId,
+      title: item.title,
+      path: item.path,
+      closable: true,
+      type,
+      url,
+    }
+    panes.value.push(current)
+  }
+  updateMenuPanes(current)
+}
+// 点击 Tag 切换选项卡
+const tagchange = key => {
+  const current = panes.value.find(x => x.key === key)
+  if (current) {
+    updateMenuPanes(current)
+  }
+}
+
+// 删除 Tag
+const tagdelete = (key, action) => {
+  if (action === 'add') {
+    //add();
+  } else {
+    if (key == selectmenuKey.value[0]) {
+      const index = panes.value.findIndex(item => item.key === key)
+      let nextPane = null
+      //如果有下一条
+      if (index + 1 < panes.value.length) {
+        // 有下一个
+        nextPane = panes.value[index + 1]
+      } else if (index - 1 >= 0) {
+        // 有上一个
+        nextPane = panes.value[index - 1]
+      }
+      if (nextPane) {
+        updateMenuPanes(nextPane)
+      }
+    }
+    panes.value = panes.value.filter(x => x.key !== key)
+    menu.tagmenus = panes.value
+  }
+}
+// 下拉菜单点击事件
+const dropdownonClick = ({ key }) => {
+  const index = panes.value.findIndex(item => item.key === selectmenuKey.value[0])
+  switch (key) {
+    case '1':
+      panes.value = panes.value.filter((item, i) => i >= index || item.key === 0)
+      menu.tagmenus = panes.value
+      break
+    case '2':
+      panes.value = panes.value.filter((item, i) => i <= index)
+      menu.tagmenus = panes.value
+      break
+    case '3':
+      panes.value = panes.value.filter(x => x.key === selectmenuKey.value[0] || x.key === 0)
+      menu.tagmenus = panes.value
+      break
+    case '4':
+      panes.value = panes.value.filter(x => x.key === 0)
+      menu.tagmenus = panes.value
+      // 切换到控制台
+      const consolePane = {
+        key: 'console',
+        parentId: 0,
+        title: '控制台',
+        path: '/console',
+        closable: false,
+        type: 1, // 普通路由
+        url: '',
+      }
+      updateMenuPanes(consolePane)
+      break
+    default:
+      break
+  }
+}
+const findAllByHref = (items, targetHref) => {
+  let result = []
+  items.forEach(item => {
+    if (item.path === targetHref) {
+      result.push(item)
+    }
+    if (item.children && item.children.length > 0) {
+      result = result.concat(findAllByHref(item.children, targetHref))
+    }
+  })
+  return result
+}
+//个人中心和退出
+const avatardropdownonClick = ({ key }) => {
+  switch (key) {
+    case '1':
+      const result = findAllByHref(menuItems.value, '/center')
+      let pane
+      if (result.length === 0) {
+        // 如果菜单项中没有个人中心，创建一个默认的个人中心菜单项
+        pane = {
+          key: 'center',
+          parentId: '0',
+          title: '个人中心',
+          path: '/center',
+          closable: true,
+          type: 2, // 普通菜单
+          url: '',
+        }
+      } else {
+        pane = {
+          key: result[0].key,
+          parentId: result[0].parentId,
+          title: result[0].title,
+          path: result[0].path,
+          closable: true,
+          type: result[0].type,
+          url: result[0].url,
+        }
+      }
+      const existingTab = panes.value.find(x => x.key === pane.key)
+      if (!existingTab) {
+        panes.value.push(pane)
+      }
+      updateMenuPanes(pane)
+      break
+    case '2':
+      user.$reset()
+      menu.$reset()
+      router.push('/login')
+      break
+    default:
+      break
+  }
+}
+
+function findParentKeys(menuArray, targetKey, parentKeys = []) {
+  for (const item of menuArray) {
+    // 如果找到目标项，返回当前收集的父级key
+    if (item.key === targetKey) {
+      return parentKeys
+    }
+
+    // 如果有子菜单，递归查找
+    if (item.children && item.children.length > 0) {
+      const result = findParentKeys(item.children, targetKey, [...parentKeys, item.key])
+      if (result) {
+        return result
+      }
+    }
+  }
+  return null
+}
+// 更新选中的选项卡和路由
+const updateMenuPanes = pane => {
+  selectmenuKey.value = [pane.key]
+  if (pane.key != 0) {
+    const parentKeys = findParentKeys(menuItems.value, pane.key)
+    // 设置展开的菜单key，包括所有上级key
+    openmenuKey.value = parentKeys ? [...parentKeys] : []
+  } else {
+    openmenuKey.value = [pane.parentId]
+  }
+  menu.setSelectmenuKey(selectmenuKey.value)
+  menu.setOpenmenuKey(openmenuKey.value)
+
+  if (pane.type === 3 && pane.url) {
+    // 内链：用 iframe 打开
+    router.push({
+      path: '/iframePage',
+      query: { url: encodeURIComponent(pane.url) },
+    })
+  } else {
+    // 普通菜单：走路由
+    router.push(pane.path)
+  }
+}
+//国际化
+const dropdownonLanguageClick = ({ key }) => {
+  if (key === 'zhCN') {
+    config.setLocale(zhCN)
+  } else {
+    config.setLocale(enUS)
+  }
+}
+// 抽屉状态
+const open = ref(false)
+const showDrawer = () => {
+  open.value = true
+}
+const onClose = () => {
+  open.value = false
+}
+// 主题切换
+const themeClasschangeTheme = e => {
+  config.themeClass = e.target.value
+}
+//导航模式
+const navigationModechangeTheme = e => {
+  config.navigationMode = e.target.value
+}
+
+// 定义全屏切换方法
+const toggleFullScreen = () => {
+  const element = document.documentElement
+  if (!isFullScreen.value) {
+    // 进入全屏模式
+    if (element.requestFullscreen) {
+      element.requestFullscreen()
+    } else if (element.mozRequestFullScreen) {
+      // Firefox
+      element.mozRequestFullScreen()
+    } else if (element.webkitRequestFullscreen) {
+      // Chrome, Safari and Opera
+      element.webkitRequestFullscreen()
+    } else if (element.msRequestFullscreen) {
+      // IE/Edge
+      element.msRequestFullscreen()
+    }
+  } else {
+    // 退出全屏模式
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+    } else if (document.mozCancelFullScreen) {
+      // Firefox
+      document.mozCancelFullScreen()
+    } else if (document.webkitExitFullscreen) {
+      // Chrome, Safari and Opera
+      document.webkitExitFullscreen()
+    } else if (document.msExitFullscreen) {
+      // IE/Edge
+      document.msExitFullscreen()
+    }
+  }
+  isFullScreen.value = !isFullScreen.value // 切换全屏状态
+}
+//表格边框切换
+const tableBorderedchangeTheme = checked => {
+  config.tableBordered = checked
+}
+const reload = () => {
+  window.location.reload()
+}
+const scrollContainer = ref(null)
+const onWheelScroll = e => {
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollLeft += e.deltaY // 将垂直滚动转为水平滚动
+  }
+}
+// 生成面包屑导航项
+const breadcrumbItems = ref([])
+
+/**
+ * 根据当前选中的菜单项生成面包屑导航
+ */
+const generateBreadcrumbItems = () => {
+  breadcrumbItems.value = []
+
+  if (selectmenuKey.value.length === 0) return
+
+  const currentKey = selectmenuKey.value[0]
+  const findItemPath = (items, targetKey, path = []) => {
+    for (const item of items) {
+      if (item.key === targetKey) {
+        return [...path, item]
+      }
+      if (item.children && item.children.length > 0) {
+        const result = findItemPath(item.children, targetKey, [...path, item])
+        if (result) return result
+      }
+    }
+    return null
+  }
+
+  const itemPath = findItemPath(menuItems.value, currentKey)
+  if (itemPath) {
+    breadcrumbItems.value = itemPath.map(item => ({
+      key: item.key,
+      title: item.title,
+      path: item.path,
+      type: item.type,
+      url: item.url,
+    }))
+  }
+}
+
+// 监听选中菜单项变化，更新面包屑
+watch(
+  selectmenuKey,
+  () => {
+    generateBreadcrumbItems()
+  },
+  { immediate: true },
+)
+
+// 组件挂载时恢复路由状态
+onMounted(() => {
+  // 检查是否有持久化的选中菜单项
+  if (selectmenuKey.value && selectmenuKey.value.length > 0 && selectmenuKey.value[0] !== 0) {
+    const currentKey = selectmenuKey.value[0]
+
+    // 在tagmenus中查找对应的pane
+    const savedPane = panes.value.find(pane => pane.key === currentKey)
+
+    if (savedPane) {
+      // 如果找到了对应的pane，恢复路由状态
+      updateMenuPanes(savedPane)
+    } else {
+      // 如果没有找到对应的pane，检查当前路由是否与持久化状态匹配
+      const currentRoute = router.currentRoute.value
+      if (currentRoute.path === '/' || currentRoute.path === '/home') {
+        // 如果当前在首页，但持久化状态不是首页，尝试恢复
+        const menuItem = findMenuItemByKey(menuItems.value, currentKey)
+        if (menuItem) {
+          // 创建新的pane并跳转
+          const newPane = {
+            key: menuItem.key,
+            parentId: menuItem.parentId,
+            title: menuItem.title,
+            path: menuItem.path,
+            closable: true,
+            type: menuItem.type,
+            url: menuItem.url,
+          }
+          panes.value.push(newPane)
+          updateMenuPanes(newPane)
+        }
+      }
+    }
+  }
+})
+
+// 根据key在菜单项中查找对应项
+function findMenuItemByKey(items, targetKey) {
+  for (const item of items) {
+    if (item.key === targetKey) {
+      return item
+    }
+    if (item.children && item.children.length > 0) {
+      const result = findMenuItemByKey(item.children, targetKey)
+      if (result) return result
+    }
+  }
+  return null
+}
+
+// 提供方法
+provide('menuinit', menuinit)
+provide('menuclick', menuclick)
+</script>
+<style scoped>
+.trigger {
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 24px;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+.trigger:hover {
+  color: #1890ff;
+}
+.logo {
+  text-align: center;
+  line-height: 32px;
+  height: 32px;
+  margin: 16px;
+  font-size: 16px;
+}
+.site-layout .site-layout-background {
+  background: #fff;
+}
+.zc-layout-header {
+  background: #fff !important;
+  padding: 0 !important;
+  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+}
+.zc-layout-header-top {
+  padding: 0 !important;
+}
+.zc-layout-content-tabs {
+  align-items: center;
+  position: fixed;
+  top: 64px;
+  left: 200px;
+  right: 0;
+  z-index: 100;
+  background: #fff;
+  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+  transition: left 0.3s ease;
+}
+
+.zc-layout-content-tabs.collapsed {
+  left: 80px;
+}
+
+.zc-layout-content-tabs.top-layout {
+  left: 0;
+}
+.zc-layout-content-tabs-left {
+  flex: 0.99;
+  width: 90%;
+}
+.zc-layout-content-tabs-right {
+  flex: 0.01;
+  text-align: right;
+  padding-right: 15px;
+}
+
+/* 使用深度选择器修改所有标签项的样式 */
+.my-tabs-wrapper :deep(.ant-tabs-tab) {
+  border-radius: 4px !important; /* 圆角 */
+  color: #999999 !important;
+  background-color: #f5f5f5 !important;
+  border: 0px !important;
+  margin-right: 4px;
+  margin: 8px;
+  padding: 5px 10px !important;
+}
+/* 修改激活标签的样式 */
+.my-tabs-wrapper :deep(.ant-tabs-tab-active .ant-tabs-tab-btn .ant-tabs-tab-remove) {
+  color: #1890ff !important;
+}
+.my-tabs-wrapper :deep(.ant-tabs-tab-active .ant-tabs-tab-remove) {
+  color: #1890ff !important;
+}
+/* 标签悬停效果 */
+.my-tabs-wrapper :deep(.ant-tabs-tab:hover, .ant-tabs-tab-remove:hover) {
+  color: #1890ff !important;
+}
+.my-tabs-wrapper :deep(.ant-tabs-content-holder) {
+  display: none !important;
+}
+.my-tabs-wrapper :deep(.ant-tabs-nav) {
+  margin: 0px !important;
+  border-bottom: none !important; /* 移除底部分割线 */
+}
+.my-tabs-wrapper :deep(.ant-tabs-tab-remove) {
+  margin-left: 0px !important;
+}
+
+.breadcrumb {
+  display: inline-block;
+  margin-left: 16px;
+}
+.breadcrumb-top {
+  margin-top: 8px;
+  padding-left: 16px;
+}
+
+.username {
+  line-height: 1.2;
+  margin-bottom: 2px;
+}
+
+.userphone {
+  line-height: 1.2;
+  margin-bottom: 4px;
+}
+</style>