fix：修改菜单布局

src/views/recharge/balancerecharge/index.vue

@@ -169,15 +169,15 @@ const handleAliPay = async () => {
         ¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
       </AButton>
       <!-- 测试：支付宝支付 -->
-      <AButton
-        type="primary"
-        size="large"
-        block
-        :disabled="!paymentAmount || paymentAmount <= 0"
-        @click="handleAliPay"
-      >
-        AliPay
-      </AButton>
+<!--      <AButton-->
+<!--        type="primary"-->
+<!--        size="large"-->
+<!--        block-->
+<!--        :disabled="!paymentAmount || paymentAmount <= 0"-->
+<!--        @click="handleAliPay"-->
+<!--      >-->
+<!--        AliPay-->
+<!--      </AButton>-->
     </div>
   </div>
 </template>

src/views/recharge/rechargeservice/index.vue

@@ -1,22 +1,39 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import type { MenuProps } from 'ant-design-vue';
-import BalanceRecharge from '@/views/recharge/balancerecharge/index.vue';
-import PackageSubscription from '@/views/recharge/package/index.vue';
-import {useRouter} from "vue-router";
-const router = useRouter();
-const handleBack = () => {
-  router.push('/billing/billservice');
-};
+import { useRouter } from "vue-router";
+
+// 使用异步组件加载
+const BalanceRecharge = defineAsyncComponent(() =>
+  import('@/views/recharge/balancerecharge/index.vue')
+);
+const PackageSubscription = defineAsyncComponent(() =>
+  import('@/views/recharge/package/index.vue')
+);
+
 defineOptions({
   name: 'recharge'
 });
 
 const { t } = useI18n();
+const router = useRouter();
+
+const handleBack = () => {
+  try {
+    router.push({
+      name: 'billing_billservice',
+      replace: true
+    });
+  } catch (error) {
+    console.error('Navigation error:', error);
+    // 如果导航失败，尝试使用路径
+    router.push('/billing/billservice');
+  }
+};
 
 // 使用数组 ref 来存储选中的菜单项
-const selectedKeys = ref<(string | number)[]>(['balance']);
+const selectedKeys = ref<string[]>(['balance']);
 
 // 菜单项配置
 const items: MenuProps['items'] = [
@@ -40,24 +57,31 @@ const handleClick: MenuProps['onClick'] = e => {
 
 <template>
   <div class="recharge-container">
-    <!-- 顶部菜单 -->
-    <AMenu
-      v-model:selectedKeys="selectedKeys"
-      mode="horizontal"
-      :items="items"
-      @click="handleClick"
-      class="recharge-menu"
-    />
-    <div class="text-lg font-bold mb-4 flex justify-between items-center">
-    <a-button @click="handleBack" >
-      {{ t('page.login.common.back') }}
-    </a-button>
-    </div>
-    <!-- 内容区域 -->
-    <div class="recharge-content">
-      <Transition name="fade" mode="out-in">
-        <component :is="String(selectedKeys[0]) === 'balance' ? BalanceRecharge : PackageSubscription" />
-      </Transition>
+    <div class="recharge-content-wrapper">
+      <!-- 返回按钮 -->
+      <div class="back-button-wrapper">
+        <a-button @click="handleBack">
+          {{ t('page.login.common.back') }}
+        </a-button>
+      </div>
+
+      <!-- 顶部菜单 -->
+      <a-menu
+        v-model:selectedKeys="selectedKeys"
+        mode="horizontal"
+        :items="items"
+        @click="handleClick"
+        class="recharge-menu"
+      />
+
+      <!-- 内容区域 -->
+      <div class="recharge-content">
+        <Transition name="fade" mode="out-in">
+          <component
+            :is="selectedKeys[0] === 'balance' ? BalanceRecharge : PackageSubscription"
+          />
+        </Transition>
+      </div>
     </div>
   </div>
 </template>
@@ -69,6 +93,15 @@ const handleClick: MenuProps['onClick'] = e => {
   padding: 16px;
 }
 
+.recharge-content-wrapper {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.back-button-wrapper {
+  margin-bottom: 16px;
+}
+
 .recharge-menu {
   background-color: #fff;
   border-radius: 8px;
@@ -79,6 +112,7 @@ const handleClick: MenuProps['onClick'] = e => {
   background-color: #fff;
   border-radius: 8px;
   padding: 16px;
+  min-height: 400px;
 }
 
 /* 过渡动画 */
@@ -101,5 +135,23 @@ const handleClick: MenuProps['onClick'] = e => {
   .recharge-content {
     padding: 12px;
   }
+
+  .recharge-menu {
+    margin-bottom: 12px;
+  }
+
+  :deep(.ant-menu-item) {
+    padding: 0 12px !important;
+  }
+}
+
+/* 确保在小屏幕上菜单项文字不会换行 */
+:deep(.ant-menu-item) {
+  white-space: nowrap;
+}
+
+/* 优化加载状态的显示 */
+:deep(.ant-spin-container) {
+  min-height: 200px;
 }
 </style>