fengling-console/LAYOUT_FIX.md

风铃认证中心 - 布局和路由修复

修复的问题

1. 菜单点击不跳转 - 添加了 router.push({ name: index }) 到 handleMenuSelect
2. App.vue 缺少 router-view - 更新为包含 <router-view /> 和基础样式
3. 面包屑显示 - 优化为只在非 Dashboard 页面显示
4. 内容区域样式 - 添加 content-wrapper 包裹，优化布局

现在的布局结构

App.vue
└── <router-view />
    ├── Login.vue (路径: /login)
    ├── Callback.vue (路径: /auth/callback)
    └── Dashboard.vue (路径: / 及其子路由)
        ├── 侧边栏 (el-aside)
        └── 主内容区 (el-main)
            ├── 面包屑 (可选)
            └── <router-view /> (嵌套子路由)
                ├── Dashboard/Dashboard.vue
                ├── Users/UserList.vue
                ├── Users/RoleList.vue
                ├── Users/TenantList.vue
                ├── OAuth/ClientList.vue
                ├── Audit/AccessLog.vue
                └── Audit/AuditLog.vue

运行项目

启动后端

cd src/Fengling.AuthService
dotnet run

启动前端

cd src/Fengling.Console.Web
npm run dev

访问: http://localhost:5173

默认登录:

• 用户名: admin
• 密码: Admin@123

功能测试清单

• 登录页面正常显示
• 登录成功后跳转到仪表盘
• 侧边栏菜单正常显示
• 点击菜单项正确跳转
• 当前菜单项高亮显示
• 面包屑导航正确显示
• 各个管理页面正常加载
• 退出登录功能正常

页面路由

路径	名称	页面
/	Dashboard	仪表盘
/users	UserList	用户列表
/roles	RoleList	角色管理
/tenants	TenantList	租户管理
/oauth/clients	OAuthClients	OAuth 应用
/logs/access	AccessLog	访问日志
/logs/audit	AuditLog	审计日志