feat:套餐与充值界面修改

src/views/recharge/rechargeservice/index.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } 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';
+
+const { t } = useI18n();
+
+// 使用数组 ref 来存储选中的菜单项
+const selectedKeys = ref<(string | number)[]>(['balance']);
+
+// 菜单项配置
+const items: MenuProps['items'] = [
+  {
+    key: 'balance',
+    label: t('page.recharge.balanceRecharge'),
+    title: t('page.recharge.balanceRecharge')
+  },
+  {
+    key: 'package',
+    label: t('page.recharge.packageSubscription'),
+    title: t('page.recharge.packageSubscription')
+  }
+];
+
+// 处理菜单项点击
+const handleClick: MenuProps['onClick'] = e => {
+  selectedKeys.value = [e.key];
+};
+</script>
+
+<template>
+  <div class="recharge-container">
+    <!-- 顶部菜单 -->
+    <AMenu
+      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="String(selectedKeys[0]) === 'balance' ? BalanceRecharge : PackageSubscription" />
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.recharge-container {
+  min-height: 100vh;
+  background-color: #f5f5f7;
+  padding: 16px;
+}
+
+.recharge-menu {
+  background-color: #fff;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.recharge-content {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+/* 过渡动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 响应式布局 */
+@media screen and (max-width: 768px) {
+  .recharge-container {
+    padding: 8px;
+  }
+
+  .recharge-content {
+    padding: 12px;
+  }
+}
+</style>