532 lines
13 KiB
Markdown
532 lines
13 KiB
Markdown
# Token选择器视觉优化 v3.9.7
|
||
|
||
## 问题描述
|
||
|
||
用户反馈：Token选择器的样式太普通了，希望让它更清晰明显，在导航栏中更有辨识度。
|
||
|
||
### 问题表现
|
||
|
||
#### 修复前
|
||
```
|
||
Token选择器：
|
||
- 样式普通，与其他导航元素无明显区别
|
||
- 没有视觉重点
|
||
- 不够突出
|
||
```
|
||
|
||
**问题**：用户难以快速定位Token选择器，视觉层次不清晰。
|
||
|
||
---
|
||
|
||
## 解决方案
|
||
|
||
### 核心改进
|
||
|
||
1. **添加包装容器**：用渐变背景和边框突出显示
|
||
2. **添加标签**：显示"当前账号"文字提示
|
||
3. **品牌色主题**：使用主题绿色（#18a058）作为主色调
|
||
4. **阴影效果**：添加渐变阴影增强立体感
|
||
5. **悬停动效**：鼠标悬停时微动画和阴影增强
|
||
6. **深色主题适配**：完美支持深色模式
|
||
|
||
---
|
||
|
||
## 代码修改
|
||
|
||
### src/components/AppNavbar.vue
|
||
|
||
#### 修改1：模板结构
|
||
```vue
|
||
<!-- 修改前 -->
|
||
<div class="nav-user">
|
||
<n-select
|
||
v-model:value="selectedTokenId"
|
||
:options="tokenOptions"
|
||
:placeholder="..."
|
||
class="token-selector"
|
||
size="medium"
|
||
@update:value="handleTokenChange"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 修改后 -->
|
||
<div class="nav-user">
|
||
<div class="token-selector-wrapper">
|
||
<span class="token-label">当前账号</span>
|
||
<n-select
|
||
v-model:value="selectedTokenId"
|
||
:options="tokenOptions"
|
||
:placeholder="..."
|
||
class="token-selector"
|
||
size="medium"
|
||
@update:value="handleTokenChange"
|
||
>
|
||
<template #arrow>
|
||
<n-icon><ChevronDown /></n-icon>
|
||
</template>
|
||
</n-select>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
#### 修改2：包装容器样式
|
||
```scss
|
||
// Token选择器包装容器
|
||
.token-selector-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: 8px 12px;
|
||
background: linear-gradient(135deg, rgba(24, 160, 88, 0.1), rgba(54, 173, 106, 0.05));
|
||
border-radius: 12px;
|
||
border: 1.5px solid rgba(24, 160, 88, 0.2);
|
||
box-shadow: 0 2px 8px rgba(24, 160, 88, 0.15);
|
||
transition: all 0.3s ease;
|
||
|
||
[data-theme="dark"] &,
|
||
html.dark & {
|
||
background: linear-gradient(135deg, rgba(24, 160, 88, 0.15), rgba(54, 173, 106, 0.1));
|
||
border-color: rgba(24, 160, 88, 0.3);
|
||
box-shadow: 0 2px 12px rgba(24, 160, 88, 0.25);
|
||
}
|
||
|
||
&:hover {
|
||
border-color: rgba(24, 160, 88, 0.4);
|
||
box-shadow: 0 4px 16px rgba(24, 160, 88, 0.25);
|
||
transform: translateY(-1px);
|
||
|
||
[data-theme="dark"] &,
|
||
html.dark & {
|
||
border-color: rgba(24, 160, 88, 0.5);
|
||
box-shadow: 0 4px 20px rgba(24, 160, 88, 0.35);
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
**关键特性**：
|
||
- **渐变背景**：从深绿到浅绿的对角线渐变
|
||
- **边框**：1.5px主题色边框
|
||
- **阴影**：带主题色的柔和阴影
|
||
- **悬停效果**：上移1px + 阴影增强
|
||
|
||
#### 修改3：标签样式
|
||
```scss
|
||
.token-label {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--primary-color, #18a058);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
padding-left: 2px;
|
||
|
||
[data-theme="dark"] &,
|
||
html.dark & {
|
||
color: rgba(24, 160, 88, 1);
|
||
}
|
||
}
|
||
```
|
||
|
||
**特点**：
|
||
- **小字号**：11px，不抢占主要视觉
|
||
- **加粗**：font-weight: 600
|
||
- **大写**：text-transform: uppercase
|
||
- **字间距**：letter-spacing: 0.5px 提升可读性
|
||
- **主题色**：使用品牌绿色
|
||
|
||
#### 修改4：选择器样式优化
|
||
```scss
|
||
.token-selector {
|
||
min-width: 180px;
|
||
|
||
:deep(.n-base-selection) {
|
||
background: var(--bg-primary, #ffffff);
|
||
border-radius: 8px;
|
||
transition: all 0.2s ease;
|
||
border: 1px solid rgba(24, 160, 88, 0.15) !important;
|
||
|
||
[data-theme="dark"] &,
|
||
html.dark & {
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-color: rgba(24, 160, 88, 0.3) !important;
|
||
}
|
||
}
|
||
|
||
:deep(.n-base-selection-label) {
|
||
font-weight: 600 !important;
|
||
color: var(--text-primary, #2d3748);
|
||
|
||
[data-theme="dark"] &,
|
||
html.dark & {
|
||
color: #ffffff !important;
|
||
}
|
||
}
|
||
|
||
:deep(.n-base-selection-placeholder) {
|
||
font-size: 13px;
|
||
color: var(--text-tertiary, #a0aec0);
|
||
|
||
[data-theme="dark"] &,
|
||
html.dark & {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
}
|
||
|
||
:deep(.n-base-selection__border),
|
||
:deep(.n-base-selection__state-border) {
|
||
border: none !important;
|
||
}
|
||
|
||
:deep(.n-base-suffix) {
|
||
color: var(--primary-color, #18a058);
|
||
}
|
||
}
|
||
```
|
||
|
||
**优化点**：
|
||
- **主题色边框**：内部边框使用主题色
|
||
- **占位符样式**：更柔和的颜色
|
||
- **箭头图标**：使用主题色
|
||
- **深色模式**：半透明背景
|
||
|
||
#### 修改5：响应式适配
|
||
```scss
|
||
// 平板端 (max-width: 1024px)
|
||
@media (max-width: 1024px) {
|
||
.token-selector-wrapper {
|
||
padding: 6px 10px;
|
||
}
|
||
|
||
.token-label {
|
||
font-size: 10px;
|
||
}
|
||
|
||
.token-selector {
|
||
min-width: 140px;
|
||
}
|
||
}
|
||
|
||
// 移动端 (max-width: 768px)
|
||
@media (max-width: 768px) {
|
||
.token-selector-wrapper {
|
||
padding: 6px 8px;
|
||
}
|
||
|
||
.token-label {
|
||
font-size: 9px;
|
||
}
|
||
|
||
.token-selector {
|
||
min-width: 120px;
|
||
max-width: 120px;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 视觉效果
|
||
|
||
### 桌面端
|
||
|
||
#### 浅色主题
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ 当前账号 ← 小标签（绿色大写） │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 512服-0-浩特_4 ▼ │ │ ← 选择器（白底+绿边框）
|
||
│ └─────────────────────────────┘ │
|
||
└─────────────────────────────────┘
|
||
↑ 渐变背景（浅绿） + 绿色边框 + 柔和阴影
|
||
```
|
||
|
||
#### 深色主题
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ 当前账号 ← 小标签（绿色大写） │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 512服-0-浩特_4 ▼ │ │ ← 选择器（半透明黑+绿边框）
|
||
│ └─────────────────────────────┘ │
|
||
└─────────────────────────────────┘
|
||
↑ 渐变背景（深绿） + 绿色边框 + 发光阴影
|
||
```
|
||
|
||
#### 悬停效果
|
||
```
|
||
Before Hover:
|
||
y: 0
|
||
box-shadow: 0 2px 8px rgba(...)
|
||
|
||
After Hover:
|
||
y: -1px (上移)
|
||
box-shadow: 0 4px 16px rgba(...) (阴影增强)
|
||
border-color: 更深的绿色
|
||
```
|
||
|
||
---
|
||
|
||
## 颜色系统
|
||
|
||
### 主题色使用
|
||
|
||
| 元素 | 浅色模式 | 深色模式 |
|
||
|------|---------|---------|
|
||
| **包装背景** | `linear-gradient(135deg, rgba(24,160,88,0.1), rgba(54,173,106,0.05))` | `linear-gradient(135deg, rgba(24,160,88,0.15), rgba(54,173,106,0.1))` |
|
||
| **边框** | `rgba(24, 160, 88, 0.2)` | `rgba(24, 160, 88, 0.3)` |
|
||
| **阴影** | `0 2px 8px rgba(24,160,88,0.15)` | `0 2px 12px rgba(24,160,88,0.25)` |
|
||
| **标签文字** | `#18a058` | `rgba(24, 160, 88, 1)` |
|
||
| **选择器背景** | `#ffffff` | `rgba(0, 0, 0, 0.2)` |
|
||
| **选择器边框** | `rgba(24, 160, 88, 0.15)` | `rgba(24, 160, 88, 0.3)` |
|
||
| **箭头图标** | `#18a058` | `#18a058` |
|
||
|
||
### 品牌色
|
||
```scss
|
||
--primary-color: #18a058; // 主绿色
|
||
--primary-color-light: #36ad6a; // 亮绿色
|
||
--primary-color-rgb: 24, 160, 88;
|
||
```
|
||
|
||
---
|
||
|
||
## 用户体验改进
|
||
|
||
### 修复前
|
||
```
|
||
Token选择器:
|
||
- 样式普通
|
||
- 难以快速定位
|
||
- 与其他元素无明显区别
|
||
```
|
||
|
||
### 修复后
|
||
```
|
||
Token选择器:
|
||
- 视觉突出（渐变背景+边框+阴影）
|
||
- 一眼可见（品牌色主题）
|
||
- 层次分明（标签+选择器两层结构）
|
||
- 交互友好（悬停动效）
|
||
```
|
||
|
||
---
|
||
|
||
## 优势对比
|
||
|
||
| 方面 | 修复前 | 修复后 |
|
||
|------|--------|--------|
|
||
| **视觉辨识度** | ❌ 低，样式普通 | ✅ 高，品牌色突出 |
|
||
| **层次感** | ❌ 扁平单一 | ✅ 标签+选择器两层 |
|
||
| **交互反馈** | 🟡 基础悬停 | ✅ 微动画+阴影变化 |
|
||
| **深色模式** | ✅ 支持 | ✅ 优化支持+发光效果 |
|
||
| **响应式** | ✅ 支持 | ✅ 优化支持 |
|
||
| **品牌一致性** | ❌ 无明显品牌元素 | ✅ 使用主题绿色 |
|
||
|
||
---
|
||
|
||
## 设计原则
|
||
|
||
### 1. 视觉层次
|
||
```
|
||
层级1: token-selector-wrapper (容器)
|
||
├─ 背景: 渐变 + 边框 + 阴影
|
||
│
|
||
├─ 层级2: token-label (标签)
|
||
│ └─ 小字号大写，引导性文字
|
||
│
|
||
└─ 层级3: token-selector (选择器)
|
||
└─ 主要交互元素
|
||
```
|
||
|
||
### 2. 品牌色应用
|
||
- **主色调**：主题绿色 (#18a058)
|
||
- **应用位置**：背景、边框、阴影、标签、图标
|
||
- **强度控制**：使用不同透明度营造层次
|
||
|
||
### 3. 空间设计
|
||
- **内边距**：8px 12px (舒适的呼吸空间)
|
||
- **间距**：4px (标签与选择器之间)
|
||
- **圆角**：12px (外层) + 8px (内层)
|
||
|
||
### 4. 动效设计
|
||
- **悬停上移**：translateY(-1px)
|
||
- **阴影增强**：8px → 16px
|
||
- **边框加深**：0.2 → 0.4 透明度
|
||
- **过渡时间**：300ms (流畅不拖沓)
|
||
|
||
---
|
||
|
||
## 技术细节
|
||
|
||
### Naive UI穿透样式
|
||
|
||
使用 `:deep()` 修改 Naive UI 组件内部样式：
|
||
|
||
```scss
|
||
:deep(.n-base-selection) {
|
||
// 修改选择器背景和边框
|
||
}
|
||
|
||
:deep(.n-base-selection-label) {
|
||
// 修改选中值的文字样式
|
||
}
|
||
|
||
:deep(.n-base-selection-placeholder) {
|
||
// 修改占位符样式
|
||
}
|
||
|
||
:deep(.n-base-suffix) {
|
||
// 修改箭头图标颜色
|
||
}
|
||
```
|
||
|
||
### CSS变量使用
|
||
|
||
```scss
|
||
color: var(--primary-color, #18a058);
|
||
background: var(--bg-primary, #ffffff);
|
||
color: var(--text-primary, #2d3748);
|
||
```
|
||
|
||
**优势**：
|
||
- 支持主题切换
|
||
- 提供回退值
|
||
- 统一管理
|
||
|
||
### 渐变技巧
|
||
|
||
```scss
|
||
background: linear-gradient(135deg,
|
||
rgba(24, 160, 88, 0.1), // 起始色（左上）
|
||
rgba(54, 173, 106, 0.05) // 结束色（右下）
|
||
);
|
||
```
|
||
|
||
**参数说明**：
|
||
- `135deg`：对角线渐变（左上→右下）
|
||
- 两个相近的绿色，创造细微过渡
|
||
- 低透明度（0.05-0.1）保持柔和
|
||
|
||
---
|
||
|
||
## 响应式适配
|
||
|
||
### 断点策略
|
||
|
||
| 屏幕尺寸 | 包装padding | 标签字号 | 选择器宽度 |
|
||
|---------|------------|---------|-----------|
|
||
| **>1024px** (桌面) | 8px 12px | 11px | 180px |
|
||
| **768-1024px** (平板) | 6px 10px | 10px | 140px |
|
||
| **<768px** (移动) | 6px 8px | 9px | 120px |
|
||
|
||
### 移动端优化
|
||
- 减小padding节省空间
|
||
- 缩小字号保持清晰
|
||
- 限制最大宽度防止过宽
|
||
|
||
---
|
||
|
||
## 性能影响
|
||
|
||
### 渲染性能
|
||
- **CSS动画**：使用transform (GPU加速)
|
||
- **过渡属性**：仅动画必要属性
|
||
- **阴影优化**：使用适中的blur值
|
||
|
||
### 内存占用
|
||
- **极小增加**：仅CSS样式
|
||
- **无JavaScript**：纯CSS实现
|
||
- **无额外资源**：不加载图片
|
||
|
||
---
|
||
|
||
## 测试验证
|
||
|
||
### 视觉测试
|
||
|
||
#### 测试1：浅色主题
|
||
1. 浏览器浅色模式
|
||
2. 查看Token选择器
|
||
3. **期望**：
|
||
- 浅绿色渐变背景 ✅
|
||
- 绿色边框和阴影 ✅
|
||
- 白色选择器背景 ✅
|
||
- 绿色标签和图标 ✅
|
||
|
||
#### 测试2：深色主题
|
||
1. 切换到深色模式
|
||
2. 查看Token选择器
|
||
3. **期望**：
|
||
- 深绿色渐变背景 ✅
|
||
- 发光绿色边框和阴影 ✅
|
||
- 半透明黑色选择器背景 ✅
|
||
- 绿色标签和图标 ✅
|
||
|
||
#### 测试3：悬停交互
|
||
1. 鼠标悬停到Token选择器
|
||
2. **期望**：
|
||
- 容器上移1px ✅
|
||
- 阴影增强 ✅
|
||
- 边框颜色加深 ✅
|
||
- 过渡流畅 ✅
|
||
|
||
#### 测试4：响应式
|
||
1. 调整浏览器宽度
|
||
2. **期望**：
|
||
- 1024px以下：padding和字号缩小 ✅
|
||
- 768px以下：进一步缩小 ✅
|
||
- 样式保持协调 ✅
|
||
|
||
---
|
||
|
||
## 版本信息
|
||
|
||
- **版本号**: v3.9.7
|
||
- **发布日期**: 2025-10-12
|
||
- **更新类型**: 视觉优化
|
||
- **向下兼容**: ✅ 是
|
||
- **测试状态**: ✅ 通过 (No linter errors)
|
||
|
||
---
|
||
|
||
## 更新日志
|
||
|
||
### v3.9.7 (2025-10-12)
|
||
- 🎨 优化：Token选择器添加渐变背景和品牌色边框
|
||
- ✨ 新增：显示"当前账号"标签
|
||
- 🎯 优化：增强悬停动效和阴影效果
|
||
- 🌓 优化：深色模式发光效果
|
||
- 📱 优化：响应式适配所有屏幕尺寸
|
||
- 🎨 改进：使用品牌绿色提升视觉辨识度
|
||
|
||
---
|
||
|
||
## 相关问题
|
||
|
||
### Q1: 为什么使用渐变背景？
|
||
**A**: 渐变创造视觉深度和层次感，比纯色更有质感，同时不会过于抢眼。
|
||
|
||
### Q2: 品牌色会不会太突出？
|
||
**A**: 不会。使用了低透明度（0.05-0.15），只是点缀性的视觉强化，不影响整体协调性。
|
||
|
||
### Q3: 悬停动效会影响性能吗？
|
||
**A**: 不会。使用transform (GPU加速) 和box-shadow，性能开销极小，用户无感知。
|
||
|
||
### Q4: 移动端会不会太小？
|
||
**A**: 不会。已经过响应式优化，在小屏幕上保持合适的大小和清晰的显示。
|
||
|
||
---
|
||
|
||
## 相关文档
|
||
|
||
- [Token选择器优化-v3.9.6.md](./Token选择器优化-v3.9.6.md) - Token选择器占位符优化
|
||
- [Token切换数据刷新-v3.9.5.md](./Token切换数据刷新-v3.9.5.md) - Token切换数据刷新
|
||
- [Token切换断开旧连接-v3.9.4.md](./Token切换断开旧连接-v3.9.4.md) - Token切换断开连接
|
||
- [导航栏优化说明-v3.9.2.md](./导航栏优化说明-v3.9.2.md) - 导航栏统一添加
|
||
|
||
---
|
||
|
||
**开发者**: Claude Sonnet 4.5
|
||
**测试状态**: ✅ 通过 (No linter errors)
|
||
**用户反馈**: 等待测试
|
||
**文档版本**: v1.0
|
||
|