fix:移动和pc自适应菜单

src/layouts/base-layout/index.vue

@@ -103,25 +103,25 @@ setupMixMenuContext();
     :sider-visible="siderVisible"
     :sider-width="siderWidth"
     :sider-collapsed-width="siderCollapsedWidth"
-    :footer-visible="themeStore.footer.visible"
-    :footer-height="themeStore.footer.height"
-    :fixed-footer="themeStore.footer.fixed"
-    :right-footer="themeStore.footer.right"
+    :footer-visible="appStore.isMobile && themeStore.footer.visible"
+  :footer-height="themeStore.footer.height"
+  :fixed-footer="themeStore.footer.fixed"
+  :right-footer="themeStore.footer.right"
   >
-    <template #header>
-      <GlobalHeader v-bind="headerProps" />
-    </template>
-    <template #tab>
-      <GlobalTab />
-    </template>
-    <template #sider>
-      <GlobalSider />
-    </template>
-    <GlobalContent />
-    <ThemeDrawer />
-    <template #footer>
-      <GlobalFooter />
-    </template>
+  <template #header>
+    <GlobalHeader v-bind="headerProps" />
+  </template>
+  <template #tab>
+    <GlobalTab />
+  </template>
+  <template #sider>
+    <GlobalSider />
+  </template>
+  <GlobalContent />
+  <ThemeDrawer />
+  <template #footer>
+    <GlobalFooter v-if="appStore.isMobile" />  <!-- 修改这里 -->
+  </template>
   </AdminLayout>
 </template>
 

src/layouts/modules/global-footer/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import {ProfileOutlined,UserOutlined,HomeOutlined} from "@ant-design/icons-vue";
+import {useRouterPush} from "@/hooks/common";
+
+const { routerPushByKey } = useRouterPush();
 defineOptions({
   name: 'GlobalFooter'
 });
@@ -6,10 +10,34 @@ defineOptions({
 
 <template>
   <DarkModeContainer class="h-full flex-center">
-    <a href="#" target="_blank" rel="noopener noreferrer">
-      Copyright © 2024 WANFi
-    </a>
+    <div class="flex-item">
+      <ButtonIcon class="text-icon-large" @click="routerPushByKey('home')">
+        <HomeOutlined />
+      </ButtonIcon>
+    </div>
+    <div class="flex-item">
+      <ButtonIcon>
+        <ProfileOutlined class="text-icon-large" @click="routerPushByKey('billing_billservice')"/>
+      </ButtonIcon>
+    </div>
+    <div class="flex-item">
+      <ButtonIcon  class="text-icon-large" @click="routerPushByKey('user-info/usercard')">
+        <UserOutlined />
+      </ButtonIcon>
+    </div>
   </DarkModeContainer>
 </template>
 
-<style scoped></style>
+<style scoped>
+.flex-center {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.flex-item {
+  flex-basis: 33.33%; /* 每个子元素占据三分之一的宽度 */
+  display: flex;
+  justify-content: center; /* 在各自的空间内居中 */
+}
+</style>

src/layouts/modules/global-header/index.vue

@@ -52,10 +52,16 @@ const headerMenus = computed(() => {
   <DarkModeContainer class="h-full flex-y-center shadow-header">
     <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
     <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
-    <div v-else class="h-full flex-y-center flex-1-hidden">
+
+    <!-- 只在非移动端显示菜单按钮 -->
+    <div v-if="!appStore.isMobile" class="h-full flex-y-center flex-1-hidden">
       <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
-      <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
+      <GlobalBreadcrumb class="ml-12px" />
     </div>
+
+    <!-- 在移动端时使用这个来保持布局 -->
+    <div v-else class="flex-1"></div>
+
     <div class="h-full flex-y-center justify-end">
       <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
       <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />