diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 8a98a56..e5c10ef 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -8,6 +8,7 @@
仪表盘
- $router.push('/finance')">
+
+
- 财务管理
-
- $router.push('/bank-card')">
-
- 银行卡管理
-
+ 财务管理
+
+ $router.push('/finance/account')">
+
+ 账号管理
+
+
+ $router.push('/finance/bank-card')">
+
+ 银行卡管理
+
+
@@ -37,7 +45,12 @@
蜂快 · 运营商平台
- {{ currentPageTitle }}
+
+ {{ route.meta.parentTitle }}
+
+
+ {{ currentPageTitle }}
+
@@ -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';
- selectedKeys.value = [key];
+ const pathParts = path.split('/');
+ 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
};
}
};
diff --git a/src/router/index.js b/src/router/index.js
index 1ed109e..26c8e16 100644
--- a/src/router/index.js
+++ b/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
}
]
},
diff --git a/src/views/Finance.vue b/src/views/Finance.vue
index 74b0346..8efe6f5 100644
--- a/src/views/Finance.vue
+++ b/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;
}