admin/xyzw_web_helper

Fork 0

Files

kirin 90094ccd5a 1.0

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

13 KiB

Raw Blame History

Token选择器视觉优化 v3.9.7

问题描述

用户反馈：Token选择器的样式太普通了，希望让它更清晰明显，在导航栏中更有辨识度。

问题表现

修复前

Token选择器：
- 样式普通，与其他导航元素无明显区别
- 没有视觉重点
- 不够突出

问题：用户难以快速定位Token选择器，视觉层次不清晰。

解决方案

核心改进

添加包装容器：用渐变背景和边框突出显示
添加标签：显示"当前账号"文字提示
品牌色主题：使用主题绿色（#18a058）作为主色调
阴影效果：添加渐变阴影增强立体感
悬停动效：鼠标悬停时微动画和阴影增强
深色主题适配：完美支持深色模式

代码修改

src/components/AppNavbar.vue

修改1：模板结构

<!-- 修改前 -->
<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：包装容器样式

// 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：标签样式

.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：选择器样式优化

.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：响应式适配

// 平板端 (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`

品牌色

--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 组件内部样式：

:deep(.n-base-selection) {
  // 修改选择器背景和边框
}

:deep(.n-base-selection-label) {
  // 修改选中值的文字样式
}

:deep(.n-base-selection-placeholder) {
  // 修改占位符样式
}

:deep(.n-base-suffix) {
  // 修改箭头图标颜色
}

CSS变量使用

color: var(--primary-color, #18a058);
background: var(--bg-primary, #ffffff);
color: var(--text-primary, #2d3748);

优势：

支持主题切换
提供回退值
统一管理

渐变技巧

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：浅色主题

浏览器浅色模式
查看Token选择器
期望：
- 浅绿色渐变背景 ✅
- 绿色边框和阴影 ✅
- 白色选择器背景 ✅
- 绿色标签和图标 ✅

测试2：深色主题

切换到深色模式
查看Token选择器
期望：
- 深绿色渐变背景 ✅
- 发光绿色边框和阴影 ✅
- 半透明黑色选择器背景 ✅
- 绿色标签和图标 ✅

测试3：悬停交互

鼠标悬停到Token选择器
期望：
- 容器上移1px ✅
- 阴影增强 ✅
- 边框颜色加深 ✅
- 过渡流畅 ✅

测试4：响应式

调整浏览器宽度
期望：
- 1024px以下：padding和字号缩小 ✅
- 768px以下：进一步缩小 ✅
- 样式保持协调 ✅

版本信息

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

更新日志

v3.9.7 (2025-10-12)

🎨 优化：Token选择器添加渐变背景和品牌色边框
✨ 新增：显示"当前账号"标签
🎯 优化：增强悬停动效和阴影效果
🌓 优化：深色模式发光效果
📱 优化：响应式适配所有屏幕尺寸
🎨 改进：使用品牌绿色提升视觉辨识度

13 KiB Raw Blame History Unescape Escape

Token选择器视觉优化 v3.9.7

问题描述

问题表现

修复前

解决方案

核心改进

代码修改

src/components/AppNavbar.vue

修改1：模板结构

修改2：包装容器样式

修改3：标签样式

修改4：选择器样式优化

修改5：响应式适配

视觉效果

桌面端

浅色主题

深色主题

悬停效果

颜色系统

主题色使用

品牌色

用户体验改进

修复前

修复后

优势对比

设计原则

1. 视觉层次

2. 品牌色应用

3. 空间设计

4. 动效设计

技术细节

Naive UI穿透样式

CSS变量使用

渐变技巧

响应式适配

断点策略

移动端优化

性能影响

渲染性能

内存占用

测试验证

视觉测试

测试1：浅色主题

测试2：深色主题

测试3：悬停交互

测试4：响应式

版本信息

更新日志

v3.9.7 (2025-10-12)

相关问题

Q1: 为什么使用渐变背景？

Q2: 品牌色会不会太突出？

Q3: 悬停动效会影响性能吗？

Q4: 移动端会不会太小？

相关文档

13 KiB

Raw Blame History