admin/xyzw_web_helper

Fork 0

Files

kirin 90094ccd5a 1.0

2025-10-17 20:56:50 +08:00

13 KiB

Raw Blame History

导航栏统一添加说明 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` ⭐

用途：统一的顶部导航栏组件

主要代码结构：

<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` ✅

变更内容：

<!-- 修改前 -->
<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` ✅

变更内容：

<!-- 修改前 -->
<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` ✅

变更内容：

<!-- 修改前 -->
<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` ✅

变更内容：

<!-- 修改前 -->
<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 控制台"文字）
隐藏用户名，仅显示头像

使用方法

开发者指南

在新页面中添加导航栏

导入组件：

import AppNavbar from '@/components/AppNavbar.vue'

在模板中使用：

<template>
  <div class="your-page">
    <AppNavbar />
    <!-- 页面内容 -->
  </div>
</template>

添加页面样式（可选）：

.your-page {
  min-height: 100vh;
  background: var(--bg-color);
  
  [data-theme="dark"] & {
    background: var(--bg-dark);
  }
}

自定义导航项

修改 src/components/AppNavbar.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定位

.app-navbar {
  position: sticky;
  top: 0;
  z-index: 1000; // 确保在其他内容之上
}

优势：

页面滚动时导航栏保持可见
不影响页面布局流
性能优于fixed定位

2. 毛玻璃效果

.app-navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

效果：

半透明背景
模糊后方内容
现代化视觉体验

3. 活动状态

.nav-item.active {
  background: var(--primary-color, #18a058);
  color: white;
}

用途：

清晰标识当前页面
提供视觉反馈
符合Material Design规范

4. 深色主题适配

[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. 按需导入图标

import {
  Home,
  Cube,
  PersonCircle,
  // ... 仅导入需要的图标
} from '@vicons/ionicons5'

2. 计算属性缓存

const tokenOptions = computed(() => 
  tokenStore.gameTokens.map(token => ({
    label: token.name,
    value: token.id
  }))
)

3. 响应式图片

<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不支持：

.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 中正确配置：

{
  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打开搜索）
面包屑导航
收藏夹功能
最近访问页面
导航栏自定义排序

13 KiB Raw Blame History Unescape Escape

导航栏统一添加说明 v3.9.1

问题描述

解决方案

1. 创建统一导航栏组件 ✅

组件功能

视觉特性

文件修改清单

新建文件

1. src/components/AppNavbar.vue ⭐

修改文件

2. src/views/TokenImport.vue ✅

3. src/views/Profile.vue ✅

4. src/views/DailyTasks.vue ✅

5. src/components/MessageTester.vue ✅

导航栏功能详解

1. 导航项配置

2. 用户菜单选项

3. 响应式设计

桌面端（>1024px）

平板端（768px - 1024px）

移动端（<768px）

使用方法

开发者指南

在新页面中添加导航栏

自定义导航项

视觉效果对比

修改前

修改后

技术细节

1. Sticky定位

2. 毛玻璃效果

3. 活动状态

4. 深色主题适配

性能优化

1. 按需导入图标

2. 计算属性缓存

3. 响应式图片

兼容性

浏览器支持

降级方案

测试清单

功能测试

页面集成测试

响应式测试

主题测试

交互测试

注意事项

1. ⚠️ Z-index层级

2. ⚠️ 路由配置

3. ⚠️ Token依赖

4. ⚠️ 图标资源

版本信息

更新日志

v3.9.1 (2025-10-12)

未来计划

v3.9.x 可能的增强

相关文档

13 KiB

Raw Blame History

1. `src/components/AppNavbar.vue` ⭐

2. `src/views/TokenImport.vue` ✅

3. `src/views/Profile.vue` ✅

4. `src/views/DailyTasks.vue` ✅

5. `src/components/MessageTester.vue` ✅