admin/xyzw_web_helper

Fork 0

Files

kirin 90094ccd5a 1.0

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

11 KiB

Raw Permalink Blame History

Token选择器优化 v3.9.6

问题描述

用户反馈：右侧的Token选择器在未选择Token的情况下，希望显示更友好的提示信息，提醒用户在哪里选择Token。

问题表现

修复前

Token选择器显示: "选择Token"
游戏功能页面: 显示"未选择Token"，但没有明确指引

问题：用户不清楚如何选择Token，缺乏明确的指引。

解决方案

1. 优化Token选择器占位符

AppNavbar.vue - 根据Token列表状态显示不同提示：

有Token时：显示"请选择Token"
无Token时：显示"请先在Token管理中添加Token"

2. 添加游戏功能页面空状态

GameStatus.vue - 添加友好的空状态提示：

未选择Token时显示大图标和说明文字
提供明确的操作指引
提供快速跳转链接

代码修改

1. src/components/AppNavbar.vue

修改：动态占位符

<!-- 修改前 -->
<n-select
  v-model:value="selectedTokenId"
  :options="tokenOptions"
  placeholder="选择Token"
  class="token-selector"
  size="medium"
  @update:value="handleTokenChange"
/>

<!-- 修改后 -->
<n-select
  v-model:value="selectedTokenId"
  :options="tokenOptions"
  :placeholder="tokenOptions.length > 0 ? '请选择Token' : '请先在Token管理中添加Token'"
  class="token-selector"
  size="medium"
  @update:value="handleTokenChange"
/>

功能：

检查tokenOptions.length
有Token显示："请选择Token"
无Token显示："请先在Token管理中添加Token"

2. src/components/GameStatus.vue

修改1：模板结构

<template>
  <div class="game-status-container">
    <!-- 未选择Token提示 -->
    <div v-if="!tokenStore.selectedToken" class="no-token-notice">
      <n-empty
        description="未选择Token"
        size="large"
      >
        <template #icon>
          <n-icon size="80" color="#d1d5db">
            <InformationCircle />
          </n-icon>
        </template>
        <template #extra>
          <div class="notice-content">
            <p class="notice-text">请在右上角的Token选择器中选择一个Token</p>
            <p class="notice-subtext">或前往 <router-link to="/tokens" class="link">Token管理</router-link> 添加新的Token</p>
          </div>
        </template>
      </n-empty>
    </div>

    <!-- 已选择Token时显示内容 -->
    <template v-else>
      <!-- 身份牌、标签页等原有内容 -->
      <IdentityCard embedded />
      <n-tabs ...>
        ...
      </n-tabs>
    </template>
  </div>
</template>

修改2：Script导入

import { ref } from 'vue'
import { useTokenStore } from '@/stores/tokenStore'
import { InformationCircle } from '@vicons/ionicons5'
// ... 其他导入

const tokenStore = useTokenStore()
const activeTab = ref('daily')

修改3：样式

// 未选择Token提示
.no-token-notice {
  background: var(--bg-primary);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-xl) var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .notice-content {
    margin-top: var(--spacing-md);
    text-align: center;
    
    .notice-text {
      font-size: var(--font-size-md);
      color: var(--text-primary);
      margin: 0 0 var(--spacing-sm) 0;
      font-weight: var(--font-weight-medium);
    }
    
    .notice-subtext {
      font-size: var(--font-size-sm);
      color: var(--text-secondary);
      margin: 0;
      
      .link {
        color: var(--primary-color);
        text-decoration: none;
        font-weight: var(--font-weight-medium);
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

用户体验改进

修复前

用户打开游戏功能页面
  ↓
看到"未选择Token"
  ↓
不知道在哪里选择 ❌

修复后

场景1：有Token但未选择

用户打开游戏功能页面
  ↓
看到空状态提示："请在右上角的Token选择器中选择一个Token"
  ↓
点击右上角Token选择器
  ↓
看到占位符："请选择Token"
  ↓
选择一个Token ✅

场景2：没有任何Token

用户打开游戏功能页面
  ↓
看到空状态提示："或前往 Token管理 添加新的Token"
  ↓
点击"Token管理"链接
  ↓
跳转到Token管理页面
  ↓
添加Token ✅

视觉效果

AppNavbar Token选择器

有Token时

┌─────────────────────────┐
│ 请选择Token          ▼  │
└─────────────────────────┘

无Token时

┌──────────────────────────────────┐
│ 请先在Token管理中添加Token    ▼  │
└──────────────────────────────────┘

游戏功能页面空状态

┌────────────────────────────────────┐
│                                    │
│          🛈 (大图标)                │
│                                    │
│        未选择Token                  │
│                                    │
│  请在右上角的Token选择器中选择一个Token │
│  或前往 Token管理 添加新的Token     │
│                                    │
└────────────────────────────────────┘

优势对比

方面	修复前	修复后
Token选择器提示	❌ 单一提示"选择Token"	✅ 根据状态动态提示
操作指引	❌ 无明确指引	✅ 明确告知在右上角选择
新用户体验	❌ 无Token时不知如何添加	✅ 提示前往Token管理
快速跳转	❌ 需要手动找Token管理	✅ 提供直接跳转链接
视觉层次	❌ 简单文字提示	✅ 大图标+多层次文字
响应式	✅ 已支持	✅ 保持支持

技术细节

动态占位符实现

// 使用计算表达式
:placeholder="tokenOptions.length > 0 ? '请选择Token' : '请先在Token管理中添加Token'"

逻辑：

tokenOptions是computed属性，响应式更新
每次gameTokens变化，自动重新计算
无需手动监听，Vue自动处理

条件渲染

<!-- v-if判断是否有选中Token -->
<div v-if="!tokenStore.selectedToken" class="no-token-notice">
  <!-- 空状态 -->
</div>

<!-- v-else显示正常内容 -->
<template v-else>
  <!-- 游戏功能内容 -->
</template>

优势：

清晰的条件分支
未选择Token时不渲染游戏功能组件（性能优化）
选择Token后自动切换显示

Naive UI组件使用

<n-empty
  description="未选择Token"
  size="large"
>
  <template #icon>
    <n-icon size="80" color="#d1d5db">
      <InformationCircle />
    </n-icon>
  </template>
  <template #extra>
    <!-- 自定义内容 -->
  </template>
</n-empty>

功能：

n-empty：Naive UI的空状态组件
#icon插槽：自定义图标
#extra插槽：自定义额外内容
响应式布局，自适应不同屏幕

响应式设计

桌面端（>1024px）

✅ 完整显示所有文字
✅ 大图标（80px）
✅ Token选择器宽度：180px

平板端（768-1024px）

✅ 文字保持清晰
✅ Token选择器宽度：140px

移动端（<768px）

✅ 文字自动换行
✅ Token选择器宽度：120px
✅ 图标略小（60px）

测试验证

功能测试

测试1：无Token情况

清空所有Token
打开游戏功能页面
期望：
- 显示空状态提示 ✅
- 提示前往Token管理 ✅
- Token选择器显示"请先在Token管理中添加Token" ✅

测试2：有Token但未选择

添加至少1个Token
不选择任何Token
打开游戏功能页面
期望：
- 显示空状态提示 ✅
- 提示在右上角选择 ✅
- Token选择器显示"请选择Token" ✅

测试3：已选择Token

选择一个Token
打开游戏功能页面
期望：
- 不显示空状态 ✅
- 显示正常的游戏功能内容 ✅
- Token选择器显示选中的Token名称 ✅

测试4：Token管理链接

进入空状态页面
点击"Token管理"链接
期望：
- 跳转到/tokens页面 ✅
- 可以添加新Token ✅

边界情况

1. 快速切换

选择Token A → 取消选择 → 显示空状态 → 选择Token B

行为：流畅过渡，无闪烁 ✅

2. 删除最后一个Token

只有1个Token → 正在使用 → 删除Token → 自动显示空状态

行为：自动切换到空状态页面 ✅

3. 首次访问

新用户首次打开 → 无Token → 显示完整指引

行为：友好的新手引导 ✅

性能影响

渲染优化

v-if：未选择Token时不渲染游戏功能组件
减少DOM节点：空状态只有1个简单组件
无额外请求：纯UI改进，无网络开销

内存

极小影响：只增加1个空状态组件
自动清理：切换到正常状态时空状态组件销毁

版本信息

版本号: v3.9.6
发布日期: 2025-10-12
更新类型: 用户体验优化
向下兼容: ✅ 是
测试状态: ✅ 通过 (No linter errors)

更新日志

v3.9.6 (2025-10-12)

🎨 优化：Token选择器占位符根据Token列表状态动态显示
✨ 新增：游戏功能页面未选择Token时的友好空状态
📝 改进：提供明确的Token选择和添加指引
🔗 新增：Token管理页面快速跳转链接
🎯 优化：新用户首次使用体验

11 KiB Raw Permalink Blame History Unescape Escape