From f1c381824967cae73dae125ab911164dcee85a72 Mon Sep 17 00:00:00 2001
From: DLmaster361 <DLmaster_361@163.com>
Date: Tue, 2 Sep 2025 23:13:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=95=B4=E6=97=A0=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=8A=B6=E6=80=81=E7=9A=84=E6=98=BE=E7=A4=BA=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ScriptTable.vue |   2 +-
 frontend/src/views/Plans.vue            | 119 ++++++++++++++++++-----
 frontend/src/views/Queue.vue            | 120 ++++++++++++++++++-----
 frontend/src/views/Scheduler.vue        |   4 +-
 frontend/src/views/Scripts.vue          | 122 ++++++++++++++++++++----
 5 files changed, 298 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/ScriptTable.vue b/frontend/src/components/ScriptTable.vue
index 799b593..3f2b6fd 100644
--- a/frontend/src/components/ScriptTable.vue
+++ b/frontend/src/components/ScriptTable.vue
@@ -268,7 +268,7 @@
           <!-- 空状态 -->
           <div v-else class="empty-users">
             <div class="empty-content">
-              <img src="@/assets/NoData.png" alt="暂无用户" class="empty-image" />
+              <img src="@/assets/NoData.png" alt="无数据" class="empty-image" />
             </div>
           </div>
         </a-card>
diff --git a/frontend/src/views/Plans.vue b/frontend/src/views/Plans.vue
index 5bae8d8..6723038 100644
--- a/frontend/src/views/Plans.vue
+++ b/frontend/src/views/Plans.vue
@@ -17,7 +17,6 @@
             type="primary"
             size="large"
             @click="handleAddPlan"
-            v-if="planList.length > 0 || currentPlanData"
           >
             <template #icon>
               <PlusOutlined />
@@ -52,23 +51,15 @@
 
     <!-- 空状态 -->
     <div v-if="!planList.length || !currentPlanData" class="empty-state">
-      <a-empty
-        image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
-        :image-style="{ height: '120px' }"
-        description="当前没有计划"
-      >
-        <template #description>
-          <span class="empty-description">
-            您还没有创建任何计划，点击下方按钮来创建您的第一个计划
-          </span>
-        </template>
-        <a-button type="primary" size="large" @click="handleAddPlan">
-          <template #icon>
-            <PlusOutlined />
-          </template>
-          新建计划
-        </a-button>
-      </a-empty>
+      <div class="empty-content">
+        <div class="empty-image-container">
+          <img src="@/assets/NoData.png" alt="暂无数据" class="empty-image" />
+        </div>
+        <div class="empty-text-content">
+          <h3 class="empty-title">暂无计划</h3>
+          <p class="empty-description">您还没有创建任何计划</p>
+        </div>
+      </div>
     </div>
 
     <!-- 计划内容 -->
@@ -805,17 +796,95 @@ const filterOption = (input: string, option: any) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 400px;
-  background: var(--ant-color-bg-container);
-  border-radius: 12px;
-  border: 1px solid var(--ant-color-border-secondary);
+  min-height: 500px;
+  padding: 60px 20px;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.02), rgba(24, 144, 255, 0.01));
+  border-radius: 16px;
+  margin: 20px 0;
+}
+
+.empty-content {
+  text-align: center;
+  max-width: 480px;
+  animation: fadeInUp 0.8s ease-out;
+}
+
+.empty-image-container {
+  position: relative;
+  margin-bottom: 32px;
+  display: inline-block;
+}
+
+.empty-image-container::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  right: -20px;
+  bottom: -20px;
+  background: radial-gradient(circle, rgba(24, 144, 255, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+  animation: pulse 3s ease-in-out infinite;
+}
+
+.empty-image {
+  max-width: 200px;
+  height: auto;
+  opacity: 0.9;
+  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.empty-image:hover {
+  transform: translateY(-4px);
+  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.15));
+}
+
+.empty-text-content {
+  margin-top: 16px;
+}
+
+.empty-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin: 0 0 12px 0;
+  background: linear-gradient(135deg, var(--ant-color-text), var(--ant-color-text-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .empty-description {
-  color: var(--ant-color-text-secondary);
   font-size: 16px;
-  margin-bottom: 16px;
-  display: block;
+  color: var(--ant-color-text-secondary);
+  line-height: 1.6;
+  margin: 0;
+  opacity: 0.8;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
 }
 
 /* 计划内容 */
diff --git a/frontend/src/views/Queue.vue b/frontend/src/views/Queue.vue
index f93ffa7..95139c5 100644
--- a/frontend/src/views/Queue.vue
+++ b/frontend/src/views/Queue.vue
@@ -17,7 +17,6 @@
             type="primary"
             size="large"
             @click="handleAddQueue"
-            v-if="queueList.length > 0 || currentQueueData"
           >
             <template #icon>
               <PlusOutlined />
@@ -52,23 +51,15 @@
 
     <!-- 空状态 -->
     <div v-if="!queueList.length || !currentQueueData" class="empty-state">
-      <a-empty
-        image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
-        :image-style="{ height: '120px' }"
-        description="当前没有队列"
-      >
-        <template #description>
-          <span class="empty-description">
-            您还没有创建任何调度队列，点击下方按钮来创建您的第一个队列
-          </span>
-        </template>
-        <a-button type="primary" size="large" @click="handleAddQueue">
-          <template #icon>
-            <PlusOutlined />
-          </template>
-          新建队列
-        </a-button>
-      </a-empty>
+      <div class="empty-content">
+        <div class="empty-image-container">
+          <img src="@/assets/NoData.png" alt="暂无数据" class="empty-image" />
+        </div>
+        <div class="empty-text-content">
+          <h3 class="empty-title">暂无队列</h3>
+          <p class="empty-description">您还没有创建任何队列</p>
+        </div>
+      </div>
     </div>
 
     <!-- 队列内容 -->
@@ -717,22 +708,101 @@ onMounted(async () => {
   flex-shrink: 0;
 }
 
+
 /* 空状态 */
 .empty-state {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 400px;
-  background: var(--ant-color-bg-container);
-  border-radius: 12px;
-  border: 1px solid var(--ant-color-border-secondary);
+  min-height: 500px;
+  padding: 60px 20px;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.02), rgba(24, 144, 255, 0.01));
+  border-radius: 16px;
+  margin: 20px 0;
+}
+
+.empty-content {
+  text-align: center;
+  max-width: 480px;
+  animation: fadeInUp 0.8s ease-out;
+}
+
+.empty-image-container {
+  position: relative;
+  margin-bottom: 32px;
+  display: inline-block;
+}
+
+.empty-image-container::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  right: -20px;
+  bottom: -20px;
+  background: radial-gradient(circle, rgba(24, 144, 255, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+  animation: pulse 3s ease-in-out infinite;
+}
+
+.empty-image {
+  max-width: 200px;
+  height: auto;
+  opacity: 0.9;
+  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.empty-image:hover {
+  transform: translateY(-4px);
+  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.15));
+}
+
+.empty-text-content {
+  margin-top: 16px;
+}
+
+.empty-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin: 0 0 12px 0;
+  background: linear-gradient(135deg, var(--ant-color-text), var(--ant-color-text-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }
 
 .empty-description {
-  color: var(--ant-color-text-secondary);
   font-size: 16px;
-  margin-bottom: 16px;
-  display: block;
+  color: var(--ant-color-text-secondary);
+  line-height: 1.6;
+  margin: 0;
+  opacity: 0.8;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
 }
 
 /* 队列内容 */
diff --git a/frontend/src/views/Scheduler.vue b/frontend/src/views/Scheduler.vue
index e8e8d34..c9dddeb 100644
--- a/frontend/src/views/Scheduler.vue
+++ b/frontend/src/views/Scheduler.vue
@@ -38,7 +38,9 @@
           <!-- 任务执行区域 -->
           <div class="execution-area">
             <div v-if="currentTab.runningTasks.length === 0" class="empty-state">
-              <a-empty description="暂无执行中的任务" />
+              <div class="empty-content">
+                <img src="@/assets/NoData.png" alt="无数据" class="empty-image" />
+              </div>
             </div>
 
             <div v-else class="task-panels">
diff --git a/frontend/src/views/Scripts.vue b/frontend/src/views/Scripts.vue
index 2f94796..31c1448 100644
--- a/frontend/src/views/Scripts.vue
+++ b/frontend/src/views/Scripts.vue
@@ -27,23 +27,15 @@
 
   <!-- 空状态 -->
   <div v-if="scripts.length === 0" class="empty-state">
-    <a-empty
-      image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
-      :image-style="{ height: '120px' }"
-      description="当前没有脚本"
-    >
-      <template #description>
-        <span class="empty-description">
-          您还没有创建任何脚本，点击下方的“新建脚本”按钮来创建您的第一个脚本。
-        </span>
-      </template>
-      <a-button type="primary" size="large" @click="handleAddScript">
-        <template #icon>
-          <PlusOutlined />
-        </template>
-        新建脚本
-      </a-button>
-    </a-empty>
+    <div class="empty-content">
+      <div class="empty-image-container">
+        <img src="@/assets/NoData.png" alt="暂无数据" class="empty-image" />
+      </div>
+      <div class="empty-text-content">
+        <h3 class="empty-title">暂无脚本</h3>
+        <p class="empty-description">您还没有创建任何脚本</p>
+      </div>
+    </div>
   </div>
 
   <ScriptTable
@@ -654,6 +646,102 @@ const handleToggleUserStatus = async (user: User) => {
   background-clip: text;
 }
 
+/* 空状态样式 */
+.empty-state {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 500px;
+  padding: 60px 20px;
+  background: linear-gradient(135deg, rgba(24, 144, 255, 0.02), rgba(24, 144, 255, 0.01));
+  border-radius: 16px;
+  margin: 20px 0;
+}
+
+.empty-content {
+  text-align: center;
+  max-width: 480px;
+  animation: fadeInUp 0.8s ease-out;
+}
+
+.empty-image-container {
+  position: relative;
+  margin-bottom: 32px;
+  display: inline-block;
+}
+
+.empty-image-container::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  right: -20px;
+  bottom: -20px;
+  background: radial-gradient(circle, rgba(24, 144, 255, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+  animation: pulse 3s ease-in-out infinite;
+}
+
+.empty-image {
+  max-width: 200px;
+  height: auto;
+  opacity: 0.9;
+  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.empty-image:hover {
+  transform: translateY(-4px);
+  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.15));
+}
+
+.empty-text-content {
+  margin-top: 16px;
+}
+
+.empty-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin: 0 0 12px 0;
+  background: linear-gradient(135deg, var(--ant-color-text), var(--ant-color-text-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.empty-description {
+  font-size: 16px;
+  color: var(--ant-color-text-secondary);
+  line-height: 1.6;
+  margin: 0;
+  opacity: 0.8;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
 /* 脚本类型选择弹窗样式 */
 .type-select-modal :deep(.ant-modal-content) {
   border-radius: 16px;