nojava/Jog

Files

T

nojava 4488c24601 feat: 导航体验优化 — 控制台入口提升 + AppLayout 返回前台链接

BlogLayout 导航菜单新增"控制台"按钮（登录后可见，普通用户→控制台，管理员→管理后台），
移除下拉菜单中冗余的控制台项。AppLayout 侧边栏新增"返回首页"和"AI 助手"入口。
路由调整：根路径指向 AI 助手，/blog 指向博客首页。

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

2026-05-24 21:23:09 +08:00

6.0 KiB

Raw Blame History

导航体验优化需求文档

1. 背景

当前项目存在以下导航体验问题：

1.1 问题清单

编号	问题描述	影响范围
P1	用户登录后默认进入控制台（`/app/dashboard`），控制台页面（AppLayout）缺少返回首页和 AI 助手的导航入口，用户进入控制台后无法方便地返回前台页面	AppLayout
P2	在首页（`/blog`）和 AI 助手页面（`/`），"控制台"入口隐藏在用户头像下拉菜单中，用户需点击头像 → 下拉菜单 → 控制台才能进入，操作路径过深	BlogLayout
P3	控制台按钮在页面中无独立可见入口，登录用户不易发现控制台功能	BlogLayout

1.2 当前导航结构

BlogLayout（前台公共页面）
├── Logo（链接到 / → AI 助手）
├── 导航菜单
│   ├── 博客（/blog）
│   └── AI 助手（/）
└── 右侧用户区
    └── 已登录：头像下拉菜单
        ├── 控制台（/app/dashboard）  ← 隐藏太深
        ├── 管理后台（/admin，仅管理员）
        └── 退出登录

AppLayout（登录用户控制台）
├── 侧边栏
│   ├── 控制台（/app/dashboard）
│   ├── 我的文章（/app/articles）
│   └── 写文章（/app/editor）
└── 主内容区
    └── 无返回前台链接  ← 缺失

1.3 登录后跳转逻辑

角色	登录后跳转
普通用户（USER）	`/app/dashboard`（控制台）
管理员（ADMIN）	`/admin`（管理后台）

2. 需求目标

优化全局导航体验，让用户在"前台页面（首页、AI 助手）"与"控制台"之间便捷切换。

3. 功能需求

3.1 BlogLayout — 新增控制台导航按钮

位置：顶部导航菜单中，"AI 助手"菜单项之后。

可见性：仅用户登录后可见。

行为：点击后根据用户角色跳转至不同页面：

角色	跳转目标
普通用户（USER）	`/app/dashboard`（用户控制台）
管理员（ADMIN）	`/admin`（管理后台）

说明：管理员的管理后台本质上就是其"控制台"，管理员无需访问普通用户的控制台页面。

当前代码位置：jog-frontend/src/layouts/BlogLayout.vue 第 6-13 行 <el-menu> 区域。

改动要点：

当前：
<el-menu-item index="blog">博客</el-menu-item>
<el-menu-item index="ai-assistant">AI 助手</el-menu-item>

改为：
<el-menu-item index="blog">博客</el-menu-item>
<el-menu-item index="ai-assistant">AI 助手</el-menu-item>
<el-menu-item
  v-if="userStore.isLoggedIn"
  index="dashboard"
  @click="$router.push(userStore.isAdmin ? '/admin' : '/app/dashboard')"
>控制台</el-menu-item>

注意：el-menu-item 上同时使用 index 和 @click 时需确认 Element Plus 的路由行为。如 index 被用于 router 模式，建议直接使用 @click 跳转或配置正确的 index 路径。

3.2 BlogLayout — 用户下拉菜单调整

说明：由于控制台入口已提升至导航菜单中作为可见按钮，用户头像下拉菜单中的"控制台"项可移除（导航菜单已有入口，避免冗余），也可保留作为辅助入口。

若保留：下拉菜单中的"控制台"项应与导航按钮行为一致，根据角色跳转：

<el-dropdown-item @click="$router.push(userStore.isAdmin ? '/admin' : '/app/dashboard')">
  控制台
</el-dropdown-item>

若移除：下拉菜单仅保留"管理后台"（仅管理员可见）和"退出登录"。

建议：移除下拉菜单中的"控制台"项。导航菜单已有醒目的控制台入口，下拉菜单无需重复，减少用户认知负担。

3.3 AppLayout — 新增返回前台链接

位置：侧边栏顶部或主内容区顶部。

方案：在侧边栏顶部增加"返回首页"和"AI 助手"两个链接按钮，或增加一个顶部导航条。

推荐方案：在 AppLayout.vue 的侧边栏菜单顶部添加返回前台的导航项。

当前代码位置：jog-frontend/src/layouts/AppLayout.vue 第 5-17 行侧边栏区域。