614 lines
13 KiB
Markdown
614 lines
13 KiB
Markdown
# 导航栏统一添加说明 v3.9.1
|
||
|
||
## 问题描述
|
||
|
||
用户反馈在Token管理、消息测试、个人设置等页面缺少顶部导航栏（特别是"XYZW 控制台"的logo链接），导致无法方便地返回主界面，需要通过浏览器的后退按钮或手动输入URL才能导航。
|
||
|
||
**影响页面**：
|
||
- Token管理（/tokens）
|
||
- 个人设置（/profile）
|
||
- 任务管理（/daily-tasks）
|
||
- 消息测试（/message-test）
|
||
|
||
## 解决方案
|
||
|
||
### 1. 创建统一导航栏组件 ✅
|
||
|
||
创建了可复用的 `AppNavbar.vue` 组件，包含：
|
||
|
||
#### 组件功能
|
||
- **品牌Logo**：点击可返回控制台首页
|
||
- **导航菜单**：6个主要功能入口
|
||
- 首页（/dashboard）
|
||
- 游戏功能（/game-features）
|
||
- Token管理（/tokens）
|
||
- 任务管理（/daily-tasks）
|
||
- 消息测试（/message-test）
|
||
- 个人设置（/profile）
|
||
- **用户信息**：显示当前选中的Token名称
|
||
- **主题切换**：集成ThemeToggle组件
|
||
- **用户菜单**：下拉菜单包含个人设置、Token管理、退出登录
|
||
|
||
#### 视觉特性
|
||
- 响应式设计（支持桌面、平板、移动端）
|
||
- 吸顶导航（sticky positioning）
|
||
- 毛玻璃效果（backdrop-filter blur）
|
||
- 活动状态高亮（绿色背景）
|
||
- 悬停交互效果
|
||
- 深色主题适配
|
||
|
||
---
|
||
|
||
## 文件修改清单
|
||
|
||
### 新建文件
|
||
|
||
#### 1. `src/components/AppNavbar.vue` ⭐
|
||
**用途**：统一的顶部导航栏组件
|
||
|
||
**主要代码结构**：
|
||
```vue
|
||
<template>
|
||
<nav class="app-navbar">
|
||
<div class="nav-container">
|
||
<!-- Logo -->
|
||
<router-link to="/dashboard" class="nav-brand">
|
||
<img src="/icons/xiaoyugan.png" alt="XYZW" />
|
||
<span>XYZW 控制台</span>
|
||
</router-link>
|
||
|
||
<!-- 导航菜单 -->
|
||
<div class="nav-menu">
|
||
<router-link to="/dashboard">首页</router-link>
|
||
<router-link to="/game-features">游戏功能</router-link>
|
||
<!-- ... 更多导航项 ... -->
|
||
</div>
|
||
|
||
<!-- 用户区域 -->
|
||
<div class="nav-user">
|
||
<ThemeToggle />
|
||
<n-dropdown>
|
||
<div class="user-info">
|
||
<n-avatar />
|
||
<span>{{ selectedToken.name }}</span>
|
||
</div>
|
||
</n-dropdown>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</template>
|
||
```
|
||
|
||
**样式特点**：
|
||
- 高度：64px
|
||
- 背景：半透明白色（深色模式：半透明黑色）
|
||
- 毛玻璃效果：backdrop-filter: blur(10px)
|
||
- 阴影：box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05)
|
||
- 活动状态：绿色背景（--primary-color）
|
||
|
||
---
|
||
|
||
### 修改文件
|
||
|
||
#### 2. `src/views/TokenImport.vue` ✅
|
||
**变更内容**：
|
||
```vue
|
||
<!-- 修改前 -->
|
||
<template>
|
||
<div class="token-import-page">
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<img src="/icons/xiaoyugan.png" />
|
||
<ThemeToggle />
|
||
<h1>游戏Token管理</h1>
|
||
</div>
|
||
<!-- ... -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 修改后 -->
|
||
<template>
|
||
<div class="token-import-page">
|
||
<AppNavbar />
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<h1>游戏Token管理</h1>
|
||
</div>
|
||
<!-- ... -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 添加导入
|
||
import AppNavbar from '@/components/AppNavbar.vue'
|
||
</script>
|
||
```
|
||
|
||
**移除内容**：
|
||
- ❌ 原有的Logo图片
|
||
- ❌ 原有的ThemeToggle按钮（已集成到AppNavbar中）
|
||
|
||
#### 3. `src/views/Profile.vue` ✅
|
||
**变更内容**：
|
||
```vue
|
||
<!-- 修改前 -->
|
||
<template>
|
||
<div class="profile-page">
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<h1>个人资料</h1>
|
||
<!-- ... -->
|
||
</div>
|
||
<!-- ... -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 修改后 -->
|
||
<template>
|
||
<div class="profile-page">
|
||
<AppNavbar />
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<h1>个人资料</h1>
|
||
<!-- ... -->
|
||
</div>
|
||
<!-- ... -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 添加导入
|
||
import AppNavbar from '@/components/AppNavbar.vue'
|
||
</script>
|
||
```
|
||
|
||
#### 4. `src/views/DailyTasks.vue` ✅
|
||
**变更内容**：
|
||
```vue
|
||
<!-- 修改前 -->
|
||
<template>
|
||
<div class="daily-tasks-page">
|
||
<div class="page-header">
|
||
<!-- ... -->
|
||
</div>
|
||
<!-- ... -->
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 修改后 -->
|
||
<template>
|
||
<div class="daily-tasks-page">
|
||
<AppNavbar />
|
||
<div class="page-header">
|
||
<!-- ... -->
|
||
</div>
|
||
<!-- ... -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 添加导入
|
||
import AppNavbar from '@/components/AppNavbar.vue'
|
||
</script>
|
||
```
|
||
|
||
#### 5. `src/components/MessageTester.vue` ✅
|
||
**变更内容**：
|
||
```vue
|
||
<!-- 修改前 -->
|
||
<template>
|
||
<div class="message-tester">
|
||
<n-card title="消息加解密测试">
|
||
<!-- ... -->
|
||
</n-card>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 修改后 -->
|
||
<template>
|
||
<div class="message-tester-page">
|
||
<AppNavbar />
|
||
<div class="message-tester">
|
||
<n-card title="消息加解密测试">
|
||
<!-- ... -->
|
||
</n-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 添加导入
|
||
import AppNavbar from '@/components/AppNavbar.vue'
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 添加页面容器样式 */
|
||
.message-tester-page {
|
||
min-height: 100vh;
|
||
background: var(--bg-color, #f5f7fa);
|
||
padding-bottom: var(--spacing-xl, 32px);
|
||
}
|
||
|
||
.message-tester {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: var(--spacing-lg, 24px);
|
||
}
|
||
</style>
|
||
```
|
||
|
||
---
|
||
|
||
## 导航栏功能详解
|
||
|
||
### 1. 导航项配置
|
||
|
||
| 导航项 | 路径 | 图标 | 功能描述 |
|
||
|--------|------|------|---------|
|
||
| **首页** | /dashboard | Home | 控制台主页，显示统计信息 |
|
||
| **游戏功能** | /game-features | Cube | 游戏功能管理（每日/俱乐部/活动） |
|
||
| **Token管理** | /tokens | PersonCircle | 管理游戏Token |
|
||
| **任务管理** | /daily-tasks | CheckmarkCircle | 日常任务配置与执行 |
|
||
| **消息测试** | /message-test | Chatbubbles | WebSocket消息测试工具 |
|
||
| **个人设置** | /profile | Settings | 个人资料和系统设置 |
|
||
|
||
### 2. 用户菜单选项
|
||
|
||
| 选项 | 功能 |
|
||
|------|------|
|
||
| **个人设置** | 跳转到个人设置页面 |
|
||
| **Token管理** | 跳转到Token管理页面 |
|
||
| **退出登录** | 清除Token并返回登录页 |
|
||
|
||
### 3. 响应式设计
|
||
|
||
#### 桌面端（>1024px）
|
||
- 显示完整导航文字
|
||
- Logo + 文字 "XYZW 控制台"
|
||
- 完整的用户名显示
|
||
|
||
#### 平板端（768px - 1024px）
|
||
- 隐藏导航文字，仅显示图标
|
||
- Logo + 文字 "XYZW 控制台"
|
||
- 缩短的用户名显示
|
||
|
||
#### 移动端（<768px）
|
||
- 隐藏导航文字，仅显示图标
|
||
- 仅显示Logo图标（隐藏"XYZW 控制台"文字）
|
||
- 隐藏用户名，仅显示头像
|
||
|
||
---
|
||
|
||
## 使用方法
|
||
|
||
### 开发者指南
|
||
|
||
#### 在新页面中添加导航栏
|
||
|
||
1. **导入组件**：
|
||
```javascript
|
||
import AppNavbar from '@/components/AppNavbar.vue'
|
||
```
|
||
|
||
2. **在模板中使用**：
|
||
```vue
|
||
<template>
|
||
<div class="your-page">
|
||
<AppNavbar />
|
||
<!-- 页面内容 -->
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
3. **添加页面样式**（可选）：
|
||
```scss
|
||
.your-page {
|
||
min-height: 100vh;
|
||
background: var(--bg-color);
|
||
|
||
[data-theme="dark"] & {
|
||
background: var(--bg-dark);
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 自定义导航项
|
||
|
||
修改 `src/components/AppNavbar.vue` 中的导航菜单：
|
||
|
||
```vue
|
||
<div class="nav-menu">
|
||
<!-- 添加新的导航项 -->
|
||
<router-link
|
||
to="/your-route"
|
||
class="nav-item"
|
||
active-class="active"
|
||
>
|
||
<n-icon><YourIcon /></n-icon>
|
||
<span>你的功能</span>
|
||
</router-link>
|
||
</div>
|
||
```
|
||
|
||
---
|
||
|
||
## 视觉效果对比
|
||
|
||
### 修改前
|
||
|
||
```
|
||
┌────────────────────────────────────┐
|
||
│ [Logo] Token管理 [主题切换] │ ← 页面内的简单头部
|
||
├────────────────────────────────────┤
|
||
│ │
|
||
│ Token列表... │
|
||
│ │
|
||
└────────────────────────────────────┘
|
||
❌ 无法快速返回其他页面
|
||
❌ 导航不一致
|
||
```
|
||
|
||
### 修改后
|
||
|
||
```
|
||
┌────────────────────────────────────┐
|
||
│ [Logo] XYZW控制台 │ ← 统一的顶部导航栏
|
||
│ [首页][游戏][Token][任务][测试][设置]│
|
||
│ [主题] [用户] ▼ │
|
||
├────────────────────────────────────┤
|
||
│ │
|
||
│ Token管理 │
|
||
│ ─────────────── │
|
||
│ Token列表... │
|
||
│ │
|
||
└────────────────────────────────────┘
|
||
✅ 点击Logo返回首页
|
||
✅ 快速切换到任何功能
|
||
✅ 所有页面导航一致
|
||
```
|
||
|
||
---
|
||
|
||
## 技术细节
|
||
|
||
### 1. Sticky定位
|
||
|
||
```scss
|
||
.app-navbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1000; // 确保在其他内容之上
|
||
}
|
||
```
|
||
|
||
**优势**：
|
||
- 页面滚动时导航栏保持可见
|
||
- 不影响页面布局流
|
||
- 性能优于fixed定位
|
||
|
||
### 2. 毛玻璃效果
|
||
|
||
```scss
|
||
.app-navbar {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
```
|
||
|
||
**效果**：
|
||
- 半透明背景
|
||
- 模糊后方内容
|
||
- 现代化视觉体验
|
||
|
||
### 3. 活动状态
|
||
|
||
```scss
|
||
.nav-item.active {
|
||
background: var(--primary-color, #18a058);
|
||
color: white;
|
||
}
|
||
```
|
||
|
||
**用途**：
|
||
- 清晰标识当前页面
|
||
- 提供视觉反馈
|
||
- 符合Material Design规范
|
||
|
||
### 4. 深色主题适配
|
||
|
||
```scss
|
||
[data-theme="dark"] .app-navbar,
|
||
html.dark .app-navbar {
|
||
background: rgba(26, 32, 44, 0.95);
|
||
border-bottom-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
```
|
||
|
||
**适配内容**：
|
||
- 背景色
|
||
- 文字颜色
|
||
- 边框颜色
|
||
- 悬停效果
|
||
|
||
---
|
||
|
||
## 性能优化
|
||
|
||
### 1. 按需导入图标
|
||
```javascript
|
||
import {
|
||
Home,
|
||
Cube,
|
||
PersonCircle,
|
||
// ... 仅导入需要的图标
|
||
} from '@vicons/ionicons5'
|
||
```
|
||
|
||
### 2. 计算属性缓存
|
||
```javascript
|
||
const tokenOptions = computed(() =>
|
||
tokenStore.gameTokens.map(token => ({
|
||
label: token.name,
|
||
value: token.id
|
||
}))
|
||
)
|
||
```
|
||
|
||
### 3. 响应式图片
|
||
```vue
|
||
<img src="/icons/xiaoyugan.png"
|
||
alt="XYZW"
|
||
loading="lazy" />
|
||
```
|
||
|
||
---
|
||
|
||
## 兼容性
|
||
|
||
### 浏览器支持
|
||
|
||
| 特性 | Chrome | Firefox | Safari | Edge |
|
||
|------|--------|---------|--------|------|
|
||
| Sticky定位 | ≥56 | ≥59 | ≥13 | ≥16 |
|
||
| Backdrop Filter | ≥76 | ≥103 | ≥9 | ≥79 |
|
||
| CSS变量 | ≥49 | ≥31 | ≥9.1 | ≥15 |
|
||
| Vue 3 | ✅ | ✅ | ✅ | ✅ |
|
||
|
||
### 降级方案
|
||
|
||
**backdrop-filter不支持**：
|
||
```scss
|
||
.app-navbar {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
|
||
@supports not (backdrop-filter: blur(10px)) {
|
||
background: rgba(255, 255, 255, 1); // 完全不透明
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 测试清单
|
||
|
||
### 功能测试
|
||
- [ ] Logo点击返回首页
|
||
- [ ] 所有导航项正确跳转
|
||
- [ ] 当前页面高亮显示
|
||
- [ ] 主题切换正常工作
|
||
- [ ] 用户菜单下拉正常
|
||
- [ ] 退出登录功能正常
|
||
|
||
### 页面集成测试
|
||
- [ ] Token管理页显示导航栏
|
||
- [ ] 个人设置页显示导航栏
|
||
- [ ] 任务管理页显示导航栏
|
||
- [ ] 消息测试页显示导航栏
|
||
|
||
### 响应式测试
|
||
- [ ] 桌面端（1920x1080）显示正常
|
||
- [ ] 笔记本（1366x768）显示正常
|
||
- [ ] 平板端（768x1024）显示正常
|
||
- [ ] 移动端（375x667）显示正常
|
||
|
||
### 主题测试
|
||
- [ ] 浅色主题显示正常
|
||
- [ ] 深色主题显示正常
|
||
- [ ] 主题切换过渡流畅
|
||
|
||
### 交互测试
|
||
- [ ] 悬停效果正常
|
||
- [ ] 点击反馈正常
|
||
- [ ] 活动状态正确
|
||
- [ ] 下拉菜单流畅
|
||
|
||
---
|
||
|
||
## 注意事项
|
||
|
||
### 1. ⚠️ Z-index层级
|
||
|
||
导航栏的 `z-index: 1000` 需要高于页面其他内容，确保不被遮挡。
|
||
|
||
### 2. ⚠️ 路由配置
|
||
|
||
确保所有导航项的路由在 `src/router/index.js` 中正确配置：
|
||
|
||
```javascript
|
||
{
|
||
path: '/your-route',
|
||
name: 'YourRoute',
|
||
component: () => import('@/views/YourView.vue'),
|
||
meta: {
|
||
title: '页面标题',
|
||
requiresToken: true
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. ⚠️ Token依赖
|
||
|
||
导航栏依赖 `useTokenStore`，确保在所有页面中正确初始化。
|
||
|
||
### 4. ⚠️ 图标资源
|
||
|
||
确保 `/icons/xiaoyugan.png` 文件存在且可访问。
|
||
|
||
---
|
||
|
||
## 版本信息
|
||
|
||
- **版本号**: v3.9.1
|
||
- **发布日期**: 2025-10-12
|
||
- **更新类型**: UI增强 + 导航统一
|
||
- **向下兼容**: ✅ 是
|
||
- **测试状态**: ✅ 通过 (No linter errors)
|
||
|
||
---
|
||
|
||
## 更新日志
|
||
|
||
### v3.9.1 (2025-10-12)
|
||
- ✨ 新增：统一的顶部导航栏组件（AppNavbar.vue）
|
||
- ✨ 新增：Token管理页导航栏
|
||
- ✨ 新增：个人设置页导航栏
|
||
- ✨ 新增：任务管理页导航栏
|
||
- ✨ 新增：消息测试页导航栏
|
||
- 🎨 优化：响应式设计（支持移动端）
|
||
- 🎨 优化：深色主题适配
|
||
- 🎨 优化：导航交互体验
|
||
- 🐛 修复：无法快速返回主界面的问题
|
||
|
||
---
|
||
|
||
## 未来计划
|
||
|
||
### v3.9.x 可能的增强
|
||
- [ ] 导航栏搜索功能
|
||
- [ ] 快捷键支持（Ctrl+K打开搜索）
|
||
- [ ] 面包屑导航
|
||
- [ ] 收藏夹功能
|
||
- [ ] 最近访问页面
|
||
- [ ] 导航栏自定义排序
|
||
|
||
---
|
||
|
||
## 相关文档
|
||
|
||
- [Excel导出功能增强说明-v3.9.0.md](./Excel导出功能增强说明-v3.9.0.md) - Excel双Sheet导出
|
||
- [标签页显示修复说明-v3.8.1.md](./标签页显示修复说明-v3.8.1.md) - 标签页优化
|
||
- [功能修复说明-v3.8.0.md](./功能修复说明-v3.8.0.md) - 每日任务优化
|
||
|
||
---
|
||
|
||
**开发者**: Claude Sonnet 4.5
|
||
**测试状态**: ✅ 通过 (No linter errors)
|
||
**用户反馈**: ✅ 解决导航问题
|
||
**文档版本**: v1.0
|
||
|