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

- 移除硬编码的紫色,使用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

View File

@ -32,7 +32,6 @@
:type="actionType" :type="actionType"
:size="actionButtonSize" :size="actionButtonSize"
round round
class="coi-empty__action-btn"
@click="handleAction" @click="handleAction"
> >
<template #icon> <template #icon>
@ -203,7 +202,7 @@ function handleAction() {
width: 120px; width: 120px;
height: 120px; height: 120px;
border-radius: 50%; 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; opacity: 0.8;
animation: pulse 3s ease-in-out infinite; animation: pulse 3s ease-in-out infinite;
} }
@ -211,7 +210,7 @@ function handleAction() {
.coi-empty__icon { .coi-empty__icon {
position: relative; position: relative;
z-index: 1; z-index: 1;
color: #8b5cf6; color: var(--primary-color);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
animation: float 4s ease-in-out infinite; animation: float 4s ease-in-out infinite;
} }
@ -242,44 +241,11 @@ function handleAction() {
animation: slideInUp 0.6s ease-out 0.6s both; 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 { .coi-empty__action-icon {
margin-right: 4px; margin-right: 4px;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.coi-empty__action-btn:hover .coi-empty__action-icon {
transform: scale(1.1);
}
/* 装饰性背景元素 */ /* 装饰性背景元素 */
.coi-empty__decorations { .coi-empty__decorations {
position: absolute; position: absolute;
@ -294,7 +260,7 @@ function handleAction() {
.decoration-circle { .decoration-circle {
position: absolute; position: absolute;
border-radius: 50%; 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; opacity: 0.6;
animation: float 6s ease-in-out infinite; animation: float 6s ease-in-out infinite;
} }
@ -416,11 +382,6 @@ function handleAction() {
font-size: 15px; font-size: 15px;
} }
.coi-empty--large .coi-empty__action-btn {
padding: 14px 28px;
font-size: 14px;
}
/* 动画定义 */ /* 动画定义 */
@keyframes fadeInUp { @keyframes fadeInUp {
from { from {
@ -484,12 +445,12 @@ function handleAction() {
} }
.coi-empty__icon-bg { .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; opacity: 0.6;
} }
.coi-empty__icon { .coi-empty__icon {
color: #a78bfa; color: var(--primary-color);
} }
.coi-empty__title { .coi-empty__title {
@ -501,17 +462,10 @@ function handleAction() {
} }
.decoration-circle { .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; 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; animation: none !important;
} }
.coi-empty__action-btn {
transition: none !important;
}
.coi-empty__action-btn:hover {
transform: none !important;
}
} }
</style> </style>