update

src/layouts/AdminLayout.vue

@@ -8,6 +8,7 @@
       </div>
       <a-menu
         v-model:selectedKeys="selectedKeys"
+        v-model:openKeys="openKeys"
         theme="dark"
         mode="inline"
         style="background: #1a1a1a;"
@@ -16,14 +17,21 @@
           <template #icon><dashboard-outlined /></template>
           <span>仪表盘</span>
         </a-menu-item>
-        <a-menu-item key="finance" @click="() => $router.push('/finance')">
+        
+        <a-sub-menu key="finance">
           <template #icon><dollar-outlined /></template>
-          <span>财务管理</span>
+          <template #title>财务管理</template>
-        </a-menu-item>
+          
-        <a-menu-item key="bank-card" @click="() => $router.push('/bank-card')">
+          <a-menu-item key="finance-account" @click="() => $router.push('/finance/account')">
-          <template #icon><credit-card-outlined /></template>
+            <template #icon><wallet-outlined /></template>
-          <span>银行卡管理</span>
+            <span>账号管理</span>
-        </a-menu-item>
+          </a-menu-item>
+          
+          <a-menu-item key="finance-bank-card" @click="() => $router.push('/finance/bank-card')">
+            <template #icon><credit-card-outlined /></template>
+            <span>银行卡管理</span>
+          </a-menu-item>
+        </a-sub-menu>
       </a-menu>
     </a-layout-sider>
     
@@ -37,7 +45,12 @@
               <home-outlined />
             </a-breadcrumb-item>
             <a-breadcrumb-item>蜂快 · 运营商平台</a-breadcrumb-item>
-            <a-breadcrumb-item>{{ currentPageTitle }}</a-breadcrumb-item>
+            <a-breadcrumb-item v-if="route.meta.parentTitle">
+              {{ route.meta.parentTitle }}
+            </a-breadcrumb-item>
+            <a-breadcrumb-item>
+              {{ currentPageTitle }}
+            </a-breadcrumb-item>
           </a-breadcrumb>
         </div>
         
@@ -81,7 +94,8 @@ import {
   DashboardOutlined,
   HomeOutlined,
   DollarOutlined,
-  CreditCardOutlined
+  CreditCardOutlined,
+  WalletOutlined
 } from '@ant-design/icons-vue';
 
 export default {
@@ -90,7 +104,8 @@ export default {
     DashboardOutlined,
     HomeOutlined,
     DollarOutlined,
-    CreditCardOutlined
+    CreditCardOutlined,
+    WalletOutlined
   },
   setup() {
     const store = useStore();
@@ -104,6 +119,7 @@ export default {
     
     const userInfo = computed(() => store.getters.userInfo);
     const selectedKeys = ref([]);
+    const openKeys = ref(['finance']);
     
     // 获取当前页面标题
     const currentPageTitle = computed(() => {
@@ -112,8 +128,16 @@ export default {
     
     // 根据当前路由设置选中的菜单项
     watch(() => route.path, (path) => {
-      const key = path.split('/')[1] || 'dashboard';
+      const pathParts = path.split('/');
-      selectedKeys.value = [key];
+      if (pathParts.length >= 3 && pathParts[1] === 'finance') {
+        // 如果是财务管理的子路由
+        selectedKeys.value = [`finance-${pathParts[2]}`];
+        openKeys.value = ['finance'];
+      } else {
+        // 如果是顶级路由
+        const key = pathParts[1] || 'dashboard';
+        selectedKeys.value = [key];
+      }
     }, { immediate: true });
     
     // 检查是否已登录
@@ -131,9 +155,11 @@ export default {
     return {
       collapsed,
       selectedKeys,
+      openKeys,
       userInfo,
       handleLogout,
-      currentPageTitle
+      currentPageTitle,
+      route
     };
   }
 };

src/router/index.js

@@ -1,5 +1,15 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import { h } from 'vue';
 import AdminLayout from '../layouts/AdminLayout.vue';
+import { defineComponent } from 'vue';
+
+// 创建一个空的RouterView组件作为父级路由的容器
+const RouterView = defineComponent({
+  name: 'RouterView',
+  setup() {
+    return () => h('router-view');
+  }
+});
 
 const routes = [
   {
@@ -15,15 +25,27 @@ const routes = [
       },
       {
         path: 'finance',
-        name: 'Finance',
+        redirect: '/finance/account',
+        meta: { title: '财务管理', icon: 'money' },
+      },
+      {
+        path: 'finance/account',
+        name: 'FinanceAccount',
         component: () => import('../views/Finance.vue'),
-        meta: { title: '财务管理', icon: 'money' }
+        meta: { title: '账号管理', parentTitle: '财务管理', icon: 'wallet' }
+      },
+      {
+        path: 'finance/bank-card',
+        name: 'FinanceBankCard',
+        component: () => import('../views/BankCard.vue'),
+        meta: { title: '银行卡管理', parentTitle: '财务管理', icon: 'credit-card' }
       },
       {
         path: 'bank-card',
         name: 'BankCard',
         component: () => import('../views/BankCard.vue'),
-        meta: { title: '银行卡管理', icon: 'credit-card' }
+        meta: { title: '银行卡管理', icon: 'credit-card' },
+        hidden: true
       }
     ]
   },

src/views/Finance.vue

@@ -298,7 +298,7 @@ export default {
 
     // 跳转到银行卡管理页面
     const goToBankCardPage = () => {
-      router.push('/bank-card');
+      router.push('/finance/bank-card');
       if (withdrawalModalVisible.value) {
         withdrawalModalVisible.value = false;
       }