From 042823ab8ee4fe07f6061e7b6f5816f53c0884ed Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Wed, 9 Jul 2025 11:45:05 +0800
Subject: [PATCH] =?UTF-8?q?style(component):=20=E4=BC=98=E5=8C=96CoiEmpty?=
 =?UTF-8?q?=E7=A9=BA=E7=8A=B6=E6=80=81=E7=BB=84=E4=BB=B6=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=89=B2=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除硬编码的紫色，使用CSS变量 var(--primary-color) 跟随系统主题
- 优化装饰性背景元素使用 color-mix 实现动态主题色透明效果
- 移除 coi-empty__action-btn 硬编码样式类，使用 NButton 原生主题色
- 确保空状态组件在主题切换时能正确适配颜色
- 统一深色模式下的主题色显示效果
---
 src/components/common/CoiEmpty.vue | 65 +++---------------------------
 1 file changed, 6 insertions(+), 59 deletions(-)

diff --git a/src/components/common/CoiEmpty.vue b/src/components/common/CoiEmpty.vue
index 543b682..33d208d 100644
--- a/src/components/common/CoiEmpty.vue
+++ b/src/components/common/CoiEmpty.vue
@@ -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>