From a40fa37bfd7267ccc0d7cdbc83507ead1e9ae031 Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Tue, 2 Sep 2025 12:45:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor(Queue,=20Scripts):=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E8=84=9A=E6=9C=AC=E9=A1=B5=E9=9D=A2=E7=9A=84=E7=A9=BA?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Queue.vue   |  1 -
 frontend/src/views/Scripts.vue | 76 ++++++++++++++++++++--------------
 2 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/frontend/src/views/Queue.vue b/frontend/src/views/Queue.vue
index 709cbc8..5566603 100644
--- a/frontend/src/views/Queue.vue
+++ b/frontend/src/views/Queue.vue
@@ -10,7 +10,6 @@
     <div class="queue-header">
       <div class="header-left">
         <h1 class="page-title">调度队列</h1>
-        <p class="page-description">管理您的自动化调度队列和任务配置</p>
       </div>
       <div class="header-actions">
         <a-space size="middle">
diff --git a/frontend/src/views/Scripts.vue b/frontend/src/views/Scripts.vue
index 9dc86e6..5a0a4f0 100644
--- a/frontend/src/views/Scripts.vue
+++ b/frontend/src/views/Scripts.vue
@@ -5,37 +5,58 @@
   </div>
 
   <!-- 主要内容 -->
-    <div class="scripts-header">
-      <div class="header-title">
-        <h1>脚本管理</h1>
-      </div>
-      <a-space size="middle">
-        <a-button type="primary" size="large" @click="handleAddScript" class="link">
-          <template #icon>
-            <PlusOutlined />
-          </template>
-          新建脚本
-        </a-button>
-        <a-button size="large" @click="handleRefresh" class="default">
-          <template #icon>
-            <ReloadOutlined />
-          </template>
-          刷新
-        </a-button>
-      </a-space>
+  <div class="scripts-header">
+    <div class="header-title">
+      <h1>脚本管理</h1>
     </div>
-    <!-- 如果没有脚本，显示占位符 -->
-    <div v-if="scripts.length === 0" class="placeholder-container">
-    <div class="placeholder-content">
-      <h2>当前没有脚本</h2>
-      <p>您还没有创建任何脚本，点击下方的“新建脚本”按钮来创建您的第一个脚本。</p>
+    <a-space size="middle">
+      <a-button type="primary" size="large" @click="handleAddScript" class="link">
+        <template #icon>
+          <PlusOutlined />
+        </template>
+        新建脚本
+      </a-button>
+      <a-button size="large" @click="handleRefresh" class="default">
+        <template #icon>
+          <ReloadOutlined />
+        </template>
+        刷新
+      </a-button>
+    </a-space>
+  </div>
+  <!--    &lt;!&ndash; 如果没有脚本，显示占位符 &ndash;&gt;-->
+  <!--    <div v-if="scripts.length === 0" class="placeholder-container">-->
+  <!--    <div class="placeholder-content">-->
+  <!--      <h2>当前没有脚本</h2>-->
+  <!--      <p>您还没有创建任何脚本，点击下方的“新建脚本”按钮来创建您的第一个脚本。</p>-->
+  <!--      <a-button type="primary" size="large" @click="handleAddScript">-->
+  <!--        <template #icon>-->
+  <!--          <PlusOutlined />-->
+  <!--        </template>-->
+  <!--        新建脚本-->
+  <!--      </a-button>-->
+  <!--    </div>-->
+  <!--  </div>-->
+
+  <!-- 空状态 -->
+  <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>
-    </div>
+    </a-empty>
   </div>
 
   <ScriptTable
@@ -700,7 +721,6 @@ const handleToggleUserStatus = async (user: User) => {
   overflow: hidden;
 }
 
-
 .type-radio-group :deep(.ant-radio-button-wrapper-checked) {
   border-color: var(--ant-color-primary);
   background: var(--ant-color-primary-bg);
@@ -799,7 +819,6 @@ const handleToggleUserStatus = async (user: User) => {
   overflow: hidden;
 }
 
-
 .mode-radio-group :deep(.ant-radio-button-wrapper-checked) {
   border-color: var(--ant-color-primary);
   background: var(--ant-color-primary-bg);
@@ -821,7 +840,6 @@ const handleToggleUserStatus = async (user: User) => {
   transition: all 0.3s ease;
 }
 
-
 /* 模板选择弹窗样式 */
 .template-select-modal :deep(.ant-modal-content) {
   border-radius: 20px;
@@ -870,7 +888,6 @@ const handleToggleUserStatus = async (user: User) => {
   background: var(--ant-color-bg-container);
 }
 
-
 .template-item.selected {
   border-color: var(--ant-color-primary);
   background: var(--ant-color-primary-bg);
@@ -992,7 +1009,6 @@ const handleToggleUserStatus = async (user: User) => {
       0 1px 3px rgba(0, 0, 0, 0.4);
   }
 
-
   .add-button {
     box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
   }
@@ -1160,7 +1176,6 @@ const handleToggleUserStatus = async (user: User) => {
   transition: all 0.2s ease;
 }
 
-
 .template-item.selected {
   border-color: var(--ant-color-primary);
   background: var(--ant-color-primary-bg);
@@ -1177,7 +1192,6 @@ const handleToggleUserStatus = async (user: User) => {
   position: relative;
 }
 
-
 .template-icon-wrapper::before {
   content: '';
   position: absolute;