feat: 全局布局组件升级到3.3.5

src/App.vue

@@ -12,7 +12,7 @@ import useI18n from '@/hooks/useI18n';
 const { t, currentLocale } = useI18n();
 const appStore = useAppStore();
 
-dayjs.extend(advancedFormat)
+dayjs.extend(advancedFormat);
 dayjs.locale('zh-cn'); // 默认中文
 usePrimaryColor(); // 载入用户自定义主题色
 
@@ -52,10 +52,11 @@ console.info(
   </ConfigProvider>
 </template>
 
-<style>
+<style lang="css">
 #app {
   height: 100%;
 }
+
 body .ant-pro-basicLayout {
   display: flex;
   flex-direction: column;
@@ -63,10 +64,6 @@ body .ant-pro-basicLayout {
   min-height: 100vh;
 }
 
-.ant-pro-sider {
-  z-index: 20;
-}
-
 .slide-left-enter-active,
 .slide-left-leave-active,
 .slide-right-enter-active,

src/layouts/BasicLayout.vue

@@ -4,7 +4,7 @@ import {
   WaterMark,
   getMenuData,
   clearMenuItem,
-  MenuDataItem,
+  type MenuDataItem,
 } from 'antdv-pro-layout';
 import RightContent from './components/RightContent.vue';
 import Tabs from './components/Tabs.vue';
@@ -225,10 +225,8 @@ onUnmounted(() => {
       v-model:openKeys="layoutState.openKeys"
       :menu-data="menuData"
       :breadcrumb="{ routes: breadcrumb } as any" 
-      disable-content-margin
       v-bind="proConfig"
       :iconfont-url="scriptUrl" 
-      :sider-width="208"
       :locale="(fnLocale as any)"
     >
       <!--插槽-菜单头-->
@@ -265,7 +263,7 @@ onUnmounted(() => {
       <template #headerContentRender></template>
 
       <!--插槽-顶部右侧-->
-      <template #rightContentRender>
+      <template #headerContentRightRender>
         <RightContent />
       </template>
 
@@ -360,7 +358,7 @@ onUnmounted(() => {
   z-index: 16;
   margin: 0px;
   width: auto;
-  margin-top: 52px;
+  margin-top: 32px;
   &-fixed {
     position: fixed;
     bottom: 0;

src/layouts/components/RightContent.vue

@@ -65,12 +65,13 @@ function fnChangeLocale(e: any) {
 
 <template>
   <a-space :size="12" align="center">
-    <a-button type="text" @click="fnClickAlarm">
+    <a-button type="text" style="color: inherit" @click="fnClickAlarm">
       <template #icon>
         <a-badge
           :count="useAlarmStore().activeAlarmTotal"
           :overflow-count="99"
           status="warning"
+          style="color: inherit"
         >
           <BellOutlined />
         </a-badge>
@@ -79,7 +80,7 @@ function fnChangeLocale(e: any) {
 
     <a-tooltip placement="bottom" v-if="false">
       <template #title>{{ t('loayouts.rightContent.lock') }}</template>
-      <a-button type="text" @click="fnClickLock">
+      <a-button type="text" style="color: inherit" @click="fnClickLock">
         <template #icon>
           <LockOutlined />
         </template>
@@ -88,7 +89,7 @@ function fnChangeLocale(e: any) {
 
     <a-tooltip placement="bottom">
       <template #title>{{ t('loayouts.rightContent.helpDoc') }}</template>
-      <a-button type="text" @click="fnClickHelpDoc()">
+      <a-button type="text" style="color: inherit" @click="fnClickHelpDoc()">
         <template #icon>
           <QuestionCircleOutlined />
         </template>
@@ -97,7 +98,7 @@ function fnChangeLocale(e: any) {
 
     <a-tooltip placement="bottom">
       <template #title>{{ t('loayouts.rightContent.fullscreen') }}</template>
-      <a-button type="text" @click="toggle">
+      <a-button type="text" style="color: inherit" @click="toggle">
         <template #icon>
           <FullscreenExitOutlined v-if="isFullscreen" />
           <FullscreenOutlined v-else />

src/store/modules/layout.ts

@@ -10,10 +10,10 @@ type LayoutStore = {
   proConfig: {
     /**导航布局 */
     layout: 'side' | 'top' | 'mix';
-    /**导航菜单主题色 */
+    /**全局主题色，需要导入样式文件 */
-    navTheme: 'dark' | 'light';
+    theme: 'dark' | 'light';
-    /**顶部导航主题，仅导航布局为mix时生效 */
+    /**菜单导航主题色 */
-    headerTheme: 'dark' | 'light';
+    menuTheme: 'dark' | 'light';
     /**固定顶部栏 */
     fixedHeader: boolean;
     /**固定菜单栏 */
@@ -41,8 +41,8 @@ const proConfigLocal: LayoutStore['proConfig'] = localGetJSON(
   CACHE_LOCAL_PROCONFIG
 ) || {
   layout: 'mix',
-  headerTheme: 'light',
+  theme: 'light',
-  navTheme: 'light',
+  menuTheme: 'light',
   fixSiderbar: true,
   fixedHeader: true,
   splitMenus: true,
@@ -53,8 +53,8 @@ const useLayoutStore = defineStore('layout', {
     visible: false,
     proConfig: {
       layout: proConfigLocal.layout,
-      navTheme: proConfigLocal.navTheme,
+      theme: proConfigLocal.theme,
-      headerTheme: proConfigLocal.headerTheme,
+      menuTheme: proConfigLocal.menuTheme,
       fixedHeader: Boolean(proConfigLocal.fixedHeader),
       fixSiderbar: Boolean(proConfigLocal.fixSiderbar),
       splitMenus: Boolean(proConfigLocal.splitMenus),
@@ -77,10 +77,6 @@ const useLayoutStore = defineStore('layout', {
     /**修改布局设置 */
     changeConf(key: string, value: boolean | string | number | undefined) {
       if (Reflect.has(this.proConfig, key)) {
-        // 同时修改mix混合菜单的导航主题
-        if (key === 'navTheme') {
-          Reflect.set(this.proConfig, 'headerTheme', value);
-        }
         Reflect.set(this.proConfig, key, value);
         localSetJSON(CACHE_LOCAL_PROCONFIG, this.proConfig);
       }

src/views/account/components/style-layout.vue

@@ -72,9 +72,9 @@ function fnColorChange(e: Event) {
         <a-switch
           :checked-children="t('common.switch.open')"
           :un-checked-children="t('common.switch.shut')"
-          :checked="proConfig.navTheme === 'dark'"
+          :checked="proConfig.menuTheme === 'dark'"
           @change="
-            (checked:any) => changeConf('navTheme', checked ? 'dark' : 'light')
+            (checked:any) => changeConf('menuTheme', checked ? 'dark' : 'light')
           "
         ></a-switch>
       </template>

src/views/index.vue

@@ -342,7 +342,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <PageContainer :breadcrumb="false">
+  <PageContainer :breadcrumb="{}">
     <div>
       <a-drawer :visible="visible" @close="closeDrawer" :width="700">
         <a-descriptions bordered :column="1" :label-style="{ width: '160px' }">

src/views/register.vue

@@ -208,11 +208,7 @@ onMounted(() => {
       </a-form>
     </div>
 
-    <GlobalFooter
+    <GlobalFooter class="footer" :links="[]" :copyright="appStore.copyright" />
-      class="footer"
-      :links="false"
-      :copyright="appStore.copyright"
-    />
   </div>
 </template>