580 lines
14 KiB
Markdown
580 lines
14 KiB
Markdown
# 游戏功能标签页优化 v3.9.8
|
||
|
||
## 问题描述
|
||
|
||
用户希望将游戏功能页面的"每日"、"俱乐部"、"活动"这三个标签页优化得更好看、更有辨识度。
|
||
|
||
### 优化前
|
||
```
|
||
标签样式：
|
||
- 普通样式，统一绿色主题
|
||
- 无图标，纯文字
|
||
- 无明显视觉区分
|
||
- 选中效果单一
|
||
```
|
||
|
||
---
|
||
|
||
## 解决方案
|
||
|
||
### 核心设计理念
|
||
|
||
1. **三色主题**：为每个标签分配独特的颜色主题
|
||
- 每日：蓝色 (#3b82f6) - 代表日常、稳定
|
||
- 俱乐部：紫色 (#8b5cf6) - 代表团队、高贵
|
||
- 活动：橙色 (#f59e0b) - 代表活力、奖励
|
||
|
||
2. **图标增强**：为每个标签添加语义化图标
|
||
- 每日：日历图标 (CalendarClear)
|
||
- 俱乐部：人群图标 (People)
|
||
- 活动：礼物图标 (Gift)
|
||
|
||
3. **渐变背景**：选中时使用渐变背景增强视觉冲击
|
||
4. **微动画**：悬停和选中时添加上移动效和阴影
|
||
5. **光晕效果**：选中时添加外发光效果
|
||
|
||
---
|
||
|
||
## 代码修改
|
||
|
||
### 1. src/components/GameStatus.vue - 模板结构
|
||
|
||
#### 修改前
|
||
```vue
|
||
<n-tab-pane name="daily" tab="每日">
|
||
<div class="tab-content-grid">
|
||
...
|
||
</div>
|
||
</n-tab-pane>
|
||
```
|
||
|
||
#### 修改后
|
||
```vue
|
||
<n-tab-pane name="daily">
|
||
<template #tab>
|
||
<div class="tab-header">
|
||
<n-icon size="20"><CalendarClear /></n-icon>
|
||
<span>每日</span>
|
||
</div>
|
||
</template>
|
||
<div class="tab-content-grid">
|
||
...
|
||
</div>
|
||
</n-tab-pane>
|
||
```
|
||
|
||
**改进点**：
|
||
- 使用 `#tab` 插槽自定义标签内容
|
||
- 添加图标和文字的组合
|
||
- 更灵活的样式控制
|
||
|
||
### 2. 图标导入
|
||
|
||
```javascript
|
||
import {
|
||
InformationCircle,
|
||
CalendarClear, // 每日
|
||
People, // 俱乐部
|
||
Gift // 活动
|
||
} from '@vicons/ionicons5'
|
||
```
|
||
|
||
### 3. 样式优化
|
||
|
||
#### 导航容器样式
|
||
```scss
|
||
:deep(.n-tabs-nav) {
|
||
background: var(--bg-secondary);
|
||
border-radius: var(--border-radius-medium);
|
||
padding: 6px;
|
||
gap: 8px; // 标签间距
|
||
display: flex;
|
||
}
|
||
```
|
||
|
||
#### 基础标签样式
|
||
```scss
|
||
:deep(.n-tabs-tab) {
|
||
border-radius: 10px;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
font-weight: var(--font-weight-semibold);
|
||
padding: 12px 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
// 光泽效果
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
&:hover::before {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 每日标签（蓝色主题）
|
||
```scss
|
||
&:nth-child(1) {
|
||
color: #3b82f6;
|
||
border: 1.5px solid rgba(59, 130, 246, 0.15);
|
||
|
||
&:hover {
|
||
background: rgba(59, 130, 246, 0.08);
|
||
border-color: rgba(59, 130, 246, 0.3);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
||
}
|
||
|
||
&.n-tabs-tab--active {
|
||
background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
|
||
color: white !important;
|
||
border-color: transparent !important;
|
||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4),
|
||
0 0 0 3px rgba(59, 130, 246, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
```
|
||
|
||
**特点**：
|
||
- **默认状态**：蓝色文字 + 浅蓝边框
|
||
- **悬停状态**：浅蓝背景 + 上移 + 阴影
|
||
- **选中状态**：渐变背景 + 白色文字 + 外发光
|
||
|
||
#### 俱乐部标签（紫色主题）
|
||
```scss
|
||
&:nth-child(2) {
|
||
color: #8b5cf6;
|
||
border: 1.5px solid rgba(139, 92, 246, 0.15);
|
||
|
||
&:hover {
|
||
background: rgba(139, 92, 246, 0.08);
|
||
border-color: rgba(139, 92, 246, 0.3);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
|
||
}
|
||
|
||
&.n-tabs-tab--active {
|
||
background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
|
||
color: white !important;
|
||
border-color: transparent !important;
|
||
box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4),
|
||
0 0 0 3px rgba(139, 92, 246, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 活动标签（橙色主题）
|
||
```scss
|
||
&:nth-child(3) {
|
||
color: #f59e0b;
|
||
border: 1.5px solid rgba(245, 158, 11, 0.15);
|
||
|
||
&:hover {
|
||
background: rgba(245, 158, 11, 0.08);
|
||
border-color: rgba(245, 158, 11, 0.3);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
|
||
}
|
||
|
||
&.n-tabs-tab--active {
|
||
background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
|
||
color: white !important;
|
||
border-color: transparent !important;
|
||
box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4),
|
||
0 0 0 3px rgba(245, 158, 11, 0.1);
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 标签头部样式
|
||
```scss
|
||
.tab-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-weight: 600;
|
||
|
||
.n-icon {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
// 选中时图标放大
|
||
.n-tabs-tab--active & .n-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
span {
|
||
font-size: 15px;
|
||
letter-spacing: 0.3px;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 视觉效果
|
||
|
||
### 默认状态
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 📅 每日 👥 俱乐部 🎁 活动 │
|
||
│ (蓝色) (紫色) (橙色) │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 每日标签 - 蓝色主题
|
||
|
||
#### 默认
|
||
```
|
||
┌─────────────┐
|
||
│ 📅 每日 │ ← 蓝色文字 + 浅蓝边框
|
||
└─────────────┘
|
||
```
|
||
|
||
#### 悬停
|
||
```
|
||
┌─────────────┐
|
||
│ 📅 每日 │ ← 浅蓝背景 + 上移 + 蓝色阴影
|
||
└─────────────┘
|
||
↑ 上移2px
|
||
```
|
||
|
||
#### 选中
|
||
```
|
||
╔═════════════╗
|
||
║ 📅 每日 ║ ← 蓝色渐变背景 + 白字 + 外发光
|
||
╚═════════════╝
|
||
↑ 外发光
|
||
```
|
||
|
||
### 俱乐部标签 - 紫色主题
|
||
|
||
#### 默认
|
||
```
|
||
┌─────────────┐
|
||
│ 👥 俱乐部 │ ← 紫色文字 + 浅紫边框
|
||
└─────────────┘
|
||
```
|
||
|
||
#### 选中
|
||
```
|
||
╔═════════════╗
|
||
║ 👥 俱乐部 ║ ← 紫色渐变背景 + 白字 + 外发光
|
||
╚═════════════╝
|
||
```
|
||
|
||
### 活动标签 - 橙色主题
|
||
|
||
#### 默认
|
||
```
|
||
┌─────────────┐
|
||
│ 🎁 活动 │ ← 橙色文字 + 浅橙边框
|
||
└─────────────┘
|
||
```
|
||
|
||
#### 选中
|
||
```
|
||
╔═════════════╗
|
||
║ 🎁 活动 ║ ← 橙色渐变背景 + 白字 + 外发光
|
||
╚═════════════╝
|
||
```
|
||
|
||
---
|
||
|
||
## 颜色系统
|
||
|
||
### 每日标签（蓝色）
|
||
|
||
| 状态 | 颜色值 | 说明 |
|
||
|------|--------|------|
|
||
| **文字颜色** | `#3b82f6` | 标准蓝 |
|
||
| **边框颜色** | `rgba(59, 130, 246, 0.15)` | 15%透明度 |
|
||
| **悬停背景** | `rgba(59, 130, 246, 0.08)` | 8%透明度 |
|
||
| **选中渐变** | `#3b82f6` → `#60a5fa` | 深蓝到亮蓝 |
|
||
| **阴影颜色** | `rgba(59, 130, 246, 0.4)` | 40%透明度 |
|
||
| **外发光** | `rgba(59, 130, 246, 0.1)` | 10%透明度，3px |
|
||
|
||
### 俱乐部标签（紫色）
|
||
|
||
| 状态 | 颜色值 | 说明 |
|
||
|------|--------|------|
|
||
| **文字颜色** | `#8b5cf6` | 标准紫 |
|
||
| **边框颜色** | `rgba(139, 92, 246, 0.15)` | 15%透明度 |
|
||
| **悬停背景** | `rgba(139, 92, 246, 0.08)` | 8%透明度 |
|
||
| **选中渐变** | `#8b5cf6` → `#a78bfa` | 深紫到亮紫 |
|
||
| **阴影颜色** | `rgba(139, 92, 246, 0.4)` | 40%透明度 |
|
||
| **外发光** | `rgba(139, 92, 246, 0.1)` | 10%透明度，3px |
|
||
|
||
### 活动标签（橙色）
|
||
|
||
| 状态 | 颜色值 | 说明 |
|
||
|------|--------|------|
|
||
| **文字颜色** | `#f59e0b` | 标准橙 |
|
||
| **边框颜色** | `rgba(245, 158, 11, 0.15)` | 15%透明度 |
|
||
| **悬停背景** | `rgba(245, 158, 11, 0.08)` | 8%透明度 |
|
||
| **选中渐变** | `#f59e0b` → `#fbbf24` | 深橙到亮橙 |
|
||
| **阴影颜色** | `rgba(245, 158, 11, 0.4)` | 40%透明度 |
|
||
| **外发光** | `rgba(245, 158, 11, 0.1)` | 10%透明度，3px |
|
||
|
||
---
|
||
|
||
## 动效设计
|
||
|
||
### 悬停动画
|
||
```scss
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:hover {
|
||
transform: translateY(-2px); // 上移2px
|
||
box-shadow: 0 4px 12px rgba(...); // 阴影增强
|
||
}
|
||
```
|
||
|
||
**时序**：
|
||
- **持续时间**：300ms
|
||
- **缓动函数**：cubic-bezier(0.4, 0, 0.2, 1) - 加速后减速
|
||
- **变换**：Y轴平移 + 阴影变化
|
||
|
||
### 图标动画
|
||
```scss
|
||
.n-icon {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.n-tabs-tab--active & .n-icon {
|
||
transform: scale(1.1); // 放大10%
|
||
}
|
||
```
|
||
|
||
### 光泽效果
|
||
```scss
|
||
&::before {
|
||
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
&:hover::before {
|
||
opacity: 1;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 设计原则
|
||
|
||
### 1. 颜色语义化
|
||
- **蓝色（每日）**：稳定、日常、可靠
|
||
- **紫色（俱乐部）**：团队、高贵、归属感
|
||
- **橙色（活动）**：活力、热情、奖励
|
||
|
||
### 2. 视觉层次
|
||
```
|
||
层级1: 导航容器
|
||
├─ 浅灰背景
|
||
│
|
||
├─ 层级2: 标签按钮
|
||
│ ├─ 默认：彩色文字 + 淡彩边框
|
||
│ ├─ 悬停：彩色背景 + 上移 + 阴影
|
||
│ └─ 选中：渐变背景 + 白字 + 外发光
|
||
│
|
||
└─ 层级3: 标签内容
|
||
├─ 图标（20px）
|
||
└─ 文字（15px）
|
||
```
|
||
|
||
### 3. 交互反馈
|
||
- **即时反馈**：悬停立即变化
|
||
- **平滑过渡**：300ms缓动
|
||
- **清晰状态**：选中与未选中明显区分
|
||
|
||
### 4. 一致性
|
||
- **间距统一**：8px gap、12px padding
|
||
- **圆角统一**：10px border-radius
|
||
- **字重统一**：600 font-weight
|
||
|
||
---
|
||
|
||
## 技术细节
|
||
|
||
### nth-child选择器
|
||
|
||
```scss
|
||
&:nth-child(1) { /* 每日 */ }
|
||
&:nth-child(2) { /* 俱乐部 */ }
|
||
&:nth-child(3) { /* 活动 */ }
|
||
```
|
||
|
||
**优势**：
|
||
- 无需额外class
|
||
- 自动应用样式
|
||
- 易于维护
|
||
|
||
### 渐变背景
|
||
|
||
```scss
|
||
background: linear-gradient(135deg, #3b82f6, #60a5fa);
|
||
```
|
||
|
||
**参数**：
|
||
- `135deg`：对角线渐变
|
||
- 两个相近色：创造细微过渡
|
||
- 选中时应用：增强视觉冲击
|
||
|
||
### 多重阴影
|
||
|
||
```scss
|
||
box-shadow:
|
||
0 4px 16px rgba(59, 130, 246, 0.4), // 主阴影
|
||
0 0 0 3px rgba(59, 130, 246, 0.1); // 外发光
|
||
```
|
||
|
||
**效果**：
|
||
- 主阴影：营造深度
|
||
- 外发光：突出选中状态
|
||
|
||
### CSS伪元素光泽
|
||
|
||
```scss
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
|
||
}
|
||
```
|
||
|
||
**作用**：
|
||
- 增加质感
|
||
- 微妙的光泽效果
|
||
- 不影响内容布局
|
||
|
||
---
|
||
|
||
## 优势对比
|
||
|
||
| 方面 | 修复前 | 修复后 |
|
||
|------|--------|--------|
|
||
| **颜色区分** | ❌ 统一绿色 | ✅ 三色主题 |
|
||
| **图标** | ❌ 无图标 | ✅ 语义化图标 |
|
||
| **渐变背景** | ❌ 纯色 | ✅ 渐变背景 |
|
||
| **悬停效果** | 🟡 基础变色 | ✅ 上移+阴影+背景 |
|
||
| **选中效果** | 🟡 背景变色 | ✅ 渐变+外发光+上移 |
|
||
| **视觉冲击** | ❌ 低 | ✅ 高 |
|
||
| **辨识度** | ❌ 低 | ✅ 高 |
|
||
| **动画流畅度** | 🟡 一般 | ✅ 优秀 |
|
||
|
||
---
|
||
|
||
## 测试验证
|
||
|
||
### 视觉测试
|
||
|
||
#### 测试1：三色主题
|
||
1. 打开游戏功能页面
|
||
2. 查看三个标签
|
||
3. **期望**：
|
||
- 每日：蓝色 + 日历图标 ✅
|
||
- 俱乐部：紫色 + 人群图标 ✅
|
||
- 活动：橙色 + 礼物图标 ✅
|
||
|
||
#### 测试2：悬停效果
|
||
1. 鼠标悬停到每个标签
|
||
2. **期望**：
|
||
- 标签上移2px ✅
|
||
- 阴影出现 ✅
|
||
- 背景变淡色 ✅
|
||
- 过渡流畅 ✅
|
||
|
||
#### 测试3：选中效果
|
||
1. 点击切换标签
|
||
2. **期望**：
|
||
- 渐变背景 ✅
|
||
- 白色文字 ✅
|
||
- 外发光效果 ✅
|
||
- 图标放大 ✅
|
||
|
||
#### 测试4：交互流畅度
|
||
1. 快速切换标签
|
||
2. **期望**：
|
||
- 动画流畅无卡顿 ✅
|
||
- 状态切换清晰 ✅
|
||
|
||
---
|
||
|
||
## 性能影响
|
||
|
||
### 渲染性能
|
||
- **CSS动画**：使用transform (GPU加速)
|
||
- **过渡属性**：仅动画必要属性
|
||
- **伪元素**：无额外DOM节点
|
||
|
||
### 内存占用
|
||
- **极小增加**：3个额外图标组件
|
||
- **CSS优化**：使用类选择器避免重复
|
||
|
||
---
|
||
|
||
## 版本信息
|
||
|
||
- **版本号**: v3.9.8
|
||
- **发布日期**: 2025-10-12
|
||
- **更新类型**: 视觉优化
|
||
- **向下兼容**: ✅ 是
|
||
- **测试状态**: ✅ 通过 (No linter errors)
|
||
|
||
---
|
||
|
||
## 更新日志
|
||
|
||
### v3.9.8 (2025-10-12)
|
||
- 🎨 新增：每日、俱乐部、活动标签三色主题
|
||
- ✨ 新增：标签图标（日历、人群、礼物）
|
||
- 🎯 优化：渐变背景选中效果
|
||
- 🌟 新增：悬停上移动画和阴影
|
||
- 💫 新增：选中时外发光效果
|
||
- 🎨 优化：图标选中时放大动画
|
||
- 📝 改进：标签间距和padding优化
|
||
|
||
---
|
||
|
||
## 相关问题
|
||
|
||
### Q1: 为什么使用三种颜色？
|
||
**A**: 不同颜色帮助用户快速识别不同功能区域，蓝色代表日常，紫色代表团队，橙色代表活动，符合用户心理预期。
|
||
|
||
### Q2: 渐变背景会不会太花哨？
|
||
**A**: 不会。渐变使用的是同色系，且只在选中时显示，既突出又不过分。
|
||
|
||
### Q3: 动画会影响性能吗？
|
||
**A**: 不会。使用了GPU加速的transform属性，性能开销极小。
|
||
|
||
### Q4: 图标会增加加载时间吗？
|
||
**A**: 不会。使用的是已引入的ionicons5图标库，无额外网络请求。
|
||
|
||
---
|
||
|
||
## 相关文档
|
||
|
||
- [Token选择器视觉优化-v3.9.7.md](./Token选择器视觉优化-v3.9.7.md) - Token选择器优化
|
||
- [Token选择器优化-v3.9.6.md](./Token选择器优化-v3.9.6.md) - Token选择器占位符
|
||
- [Token切换数据刷新-v3.9.5.md](./Token切换数据刷新-v3.9.5.md) - Token切换刷新
|
||
|
||
---
|
||
|
||
**开发者**: Claude Sonnet 4.5
|
||
**测试状态**: ✅ 通过 (No linter errors)
|
||
**用户反馈**: 等待测试
|
||
**文档版本**: v1.0
|
||
|