dev-templates/coder-common-thin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(component): 优化CoiEmpty空状态组件主题色适配

Browse Source 
- 移除硬编码的紫色，使用CSS变量 var(--primary-color) 跟随系统主题
- 优化装饰性背景元素使用 color-mix 实现动态主题色透明效果
- 移除 coi-empty__action-btn 硬编码样式类，使用 NButton 原生主题色
- 确保空状态组件在主题切换时能正确适配颜色
- 统一深色模式下的主题色显示效果
This commit is contained in:
Leo 2025-07-09 11:45:05 +08:00
parent 1b3b14aa36
commit 042823ab8e
1 changed files with 6 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/common/CoiEmpty.vue
View File

@ -32,7 +32,6 @@
:type="actionType"
:size="actionButtonSize"
round
class="coi-empty__action-btn"
@click="handleAction"
>
<template #icon>
@ -203,7 +202,7 @@ function handleAction() {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 10%, transparent) 0%, color-mix(in srgb, var(--primary-color) 5%, transparent) 100%);
opacity: 0.8;
animation: pulse 3s ease-in-out infinite;
}
@ -211,7 +210,7 @@ function handleAction() {
.coi-empty__icon {
position: relative;
z-index: 1;
color: #8b5cf6;
color: var(--primary-color);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
animation: float 4s ease-in-out infinite;
}
@ -242,44 +241,11 @@ function handleAction() {
animation: slideInUp 0.6s ease-out 0.6s both;
}
.coi-empty__action-btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
border: none;
}
.coi-empty__action-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.coi-empty__action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.coi-empty__action-btn:hover::before {
left: 100%;
}
.coi-empty__action-icon {
margin-right: 4px;
transition: transform 0.3s ease;
}
.coi-empty__action-btn:hover .coi-empty__action-icon {
transform: scale(1.1);
}
/* 装饰性背景元素 */
.coi-empty__decorations {
position: absolute;
@ -294,7 +260,7 @@ function handleAction() {
.decoration-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 5%, transparent) 0%, color-mix(in srgb, var(--primary-color) 3%, transparent) 100%);
opacity: 0.6;
animation: float 6s ease-in-out infinite;
}
@ -416,11 +382,6 @@ function handleAction() {
font-size: 15px;
}
.coi-empty--large .coi-empty__action-btn {
padding: 14px 28px;
font-size: 14px;
}
/* 动画定义 */
@keyframes fadeInUp {
from {
@ -484,12 +445,12 @@ function handleAction() {
}
.coi-empty__icon-bg {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, color-mix(in srgb, var(--primary-color) 10%, transparent) 100%);
opacity: 0.6;
}
.coi-empty__icon {
color: #a78bfa;
color: var(--primary-color);
}
.coi-empty__title {
@ -501,17 +462,10 @@ function handleAction() {
}
.decoration-circle {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 8%, transparent) 0%, color-mix(in srgb, var(--primary-color) 5%, transparent) 100%);
opacity: 0.4;
}
.coi-empty__action-btn {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.coi-empty__action-btn:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
}
/* 响应式设计 */
@ -547,12 +501,5 @@ function handleAction() {
animation: none !important;
}
.coi-empty__action-btn {
transition: none !important;
}
.coi-empty__action-btn:hover {
transform: none !important;
}
}
</style>