refactor(Queue, Scripts): 修改脚本页面的空状态

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">

frontend/src/views/Scripts.vue

@@ -24,18 +24,39 @@
       </a-button>
     </a-space>
   </div>
-    <!-- 如果没有脚本，显示占位符 -->
+  <!--    &lt;!&ndash; 如果没有脚本，显示占位符 &ndash;&gt;-->
-    <div v-if="scripts.length === 0" class="placeholder-container">
+  <!--    <div v-if="scripts.length === 0" class="placeholder-container">-->
-    <div class="placeholder-content">
+  <!--    <div class="placeholder-content">-->
-      <h2>当前没有脚本</h2>
+  <!--      <h2>当前没有脚本</h2>-->
-      <p>您还没有创建任何脚本，点击下方的“新建脚本”按钮来创建您的第一个脚本。</p>
+  <!--      <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;