zant-admin 1.0.0

package/src/components/MainPage.vue

@@ -0,0 +1,957 @@
+<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: '16px' }" />
+              </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>
+                    <a-avatar
+                      :size="35"
+                      :style="{
+                        backgroundColor: '#1677ff',
+                        verticalAlign: 'middle',
+                        margin: '0 0 5px 0',
+                      }"
+                    >
+                      {{ username }}
+                    </a-avatar>
+                  </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">
+                  <MoreOutlined />
+                </a>
+              </a-space>
+            </div>
+          </div>
+        </a-layout-header>
+        <!-- 选项卡组件 -->
+        <div class="zc-layout-content-tabs">
+          <div
+            class="zc-layout-content-tabs-left"
+            @wheel.prevent="onWheelScroll"
+            ref="scrollContainer"
+          >
+            <a-tag
+              v-for="pane in panes"
+              :key="pane.key"
+              :class="selectmenuKey[0] == pane.key ? 'tag-select' : 'tag'"
+              :closable="pane.closable"
+              :bordered="false"
+              @close="tagdelete(pane)"
+              @click="tagchange(pane)"
+            >
+              {{ pane.title }}
+            </a-tag>
+          </div>
+          <div class="zc-layout-content-tabs-right">
+            <a-dropdown class="zc-layout-content-tabs-right-dropdown">
+              <a class="ant-dropdown-link" @click.prevent>
+                <DownOutlined />
+              </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>
+        <!-- 路由视图部分 -->
+        <a-layout-content :style="{ margin: '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
+                >
+                  <a-avatar
+                    :size="35"
+                    :style="{
+                      backgroundColor: '#1677ff',
+                      verticalAlign: 'middle',
+                      margin: '0 0 5px 0',
+                    }"
+                  >
+                    {{ username }}
+                  </a-avatar>
+                </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"
+              >
+                <MoreOutlined />
+              </a>
+            </a-space>
+          </div>
+        </div>
+      </a-layout-header>
+      <!-- 选项卡组件 -->
+      <div class="zc-layout-content-tabs">
+        <div
+          class="zc-layout-content-tabs-left"
+          @wheel.prevent="onWheelScroll"
+          ref="scrollContainer"
+        >
+          <a-tag
+            v-for="pane in panes"
+            :key="pane.key"
+            :class="selectmenuKey[0] == pane.key ? 'tag-select' : 'tag'"
+            :closable="pane.closable"
+            :bordered="false"
+            @close="tagdelete(pane)"
+            @click="tagchange(pane)"
+          >
+            {{ pane.title }}
+          </a-tag>
+        </div>
+        <div class="zc-layout-content-tabs-right">
+          <a-dropdown class="zc-layout-content-tabs-right-dropdown">
+            <a class="ant-dropdown-link" @click.prevent>
+              <DownOutlined />
+            </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>
+           <!-- 面包屑导航 -->
+            <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: '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 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 = pane => {
+  const current = panes.value.find(x => x.key === pane.key)
+  if (current) {
+    updateMenuPanes(current)
+  }
+}
+// 删除 Tag
+const tagdelete = pane => {
+  if (pane.key == selectmenuKey.value[0]) {
+    console.log(JSON.stringify(panes.value))
+    const index = panes.value.findIndex(item => item.key === pane.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 !== pane.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 {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: 69px;
+}
+.tag {
+  background-color: #fff;
+  color: #999999;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 15px;
+}
+.tag-select {
+  background-color: #fff;
+  color: #1677ff;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0 15px;
+}
+.zc-layout-content-tabs-left {
+  flex: 0.95;
+  padding-left: 10px;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  /* 确保只有横向滑动 */
+  width: 100%;
+  /* 父容器宽度 */
+  -ms-overflow-style: none;
+  /* 适用于 IE 和 Edge */
+  scrollbar-width: none;
+  /* 适用于 Firefox */
+}
+.zc-layout-content-tabs-left::-webkit-scrollbar {
+  display: none;
+  /* 隐藏 Webkit 浏览器中的滚动条 */
+}
+.zc-layout-content-tabs-right {
+  flex: 0.05;
+  text-align: right;
+  padding-right: 10px;
+}
+.zc-layout-content-tabs-right-dropdown {
+  background-color: white;
+  padding: 8px 10px;
+  border-radius: 4px;
+}
+.breadcrumb {
+  display: inline-block;
+  margin-left: 16px;
+  vertical-align: middle;
+}
+.breadcrumb-top {
+  margin-top: 8px;
+  padding-left: 16px;
+}
+</style>