From 7fe2ae2acc40a698f478e00a50f3809e02c9b3a9 Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Sat, 30 Aug 2025 15:04:32 +0800
Subject: [PATCH] =?UTF-8?q?refactor(views):=20=E4=BC=98=E5=8C=96=E7=A9=BA?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=B1=95=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Plans、Queue 和 Scripts 页面中添加统一的占位符样式
- 用 "placeholder" 替代 "empty state" 的概念，提升用户体验
- 增加新建按钮，方便用户快速创建计划、队列或脚本
- 优化文字描述，更加友好地引导用户进行操作
---
 frontend/src/components/ScriptTable.vue |  8 ++--
 frontend/src/views/Plans.vue            | 47 ++++++++++++++++++----
 frontend/src/views/Queue.vue            | 52 +++++++++++++++++++------
 frontend/src/views/Scripts.vue          | 40 ++++++++++++++++++-
 4 files changed, 122 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/ScriptTable.vue b/frontend/src/components/ScriptTable.vue
index 6f4fc54..ad5769c 100644
--- a/frontend/src/components/ScriptTable.vue
+++ b/frontend/src/components/ScriptTable.vue
@@ -263,10 +263,10 @@
 
           <!-- 空状态 -->
           <div v-else class="empty-users">
-            <a-empty :image="false" description="暂无用户" class="compact-empty">
-              <template #image>
-                <UserOutlined class="empty-icon" />
-              </template>
+            <a-empty
+              description="暂无用户"
+              class="compact-empty"
+            >
               <a-button type="primary" size="small" @click="handleAddUser(script)">
                 <template #icon>
                   <PlusOutlined />
diff --git a/frontend/src/views/Plans.vue b/frontend/src/views/Plans.vue
index d70cab1..18a3a4a 100644
--- a/frontend/src/views/Plans.vue
+++ b/frontend/src/views/Plans.vue
@@ -25,17 +25,22 @@
       </a-space>
     </div>
 
-    <!-- 计划内容区域 -->
-    <div v-if="!planList.length || !currentPlanData" class="empty-state">
-      <div class="empty-content empty-content-fancy" @click="handleAddPlan" style="cursor: pointer">
-        <div class="empty-icon">
-          <PlusOutlined />
-        </div>
-        <h2>你还没有创建过计划</h2>
-        <h1>点击此处来新建计划</h1>
+    <!-- 如果没有计划，显示占位符 -->
+    <div v-if="!planList.length || !currentPlanData" class="placeholder-container">
+      <div class="placeholder-content">
+        <h2>当前没有计划</h2>
+        <p>您还没有创建任何计划，点击下方按钮来创建您的第一个计划</p>
+        <a-button type="primary" size="large" @click="handleAddPlan">
+          <template #icon>
+            <PlusOutlined />
+          </template>
+          新建计划
+        </a-button>
       </div>
     </div>
 
+
+
     <div class="plan-content" v-else v-if="currentPlanData">
       <!-- 计划选择器 -->
       <div class="plan-selector">
@@ -895,6 +900,32 @@ onMounted(() => {
   align-items: center;
 }
 
+.placeholder-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+
+.placeholder-content {
+  text-align: center;
+  max-width: 500px;
+}
+
+.placeholder-content h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin-bottom: 16px;
+}
+
+.placeholder-content p {
+  font-size: 16px;
+  color: var(--ant-color-text-secondary);
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
+
 .empty-content-fancy h2 {
   font-size: 26px;
   font-weight: 700;
diff --git a/frontend/src/views/Queue.vue b/frontend/src/views/Queue.vue
index d8dd59e..46c7b52 100644
--- a/frontend/src/views/Queue.vue
+++ b/frontend/src/views/Queue.vue
@@ -25,21 +25,23 @@
       </a-space>
     </div>
 
-    <!-- 空状态 -->
-    <div v-if="!queueList.length || !currentQueueData" class="empty-state">
-      <div
-        class="empty-content empty-content-fancy"
-        @click="handleAddQueue"
-        style="cursor: pointer"
-      >
-        <div class="empty-icon">
-          <PlusOutlined />
-        </div>
-        <h2>你还没有创建过队列</h2>
-        <h1>点击此处来新建队列</h1>
+
+    <!-- 如果没有计划，显示占位符 -->
+    <!-- 如果没有队列，显示占位符 -->
+    <div v-if="!queueList.length || !currentQueueData" class="placeholder-container">
+      <div class="placeholder-content">
+        <h2>当前没有队列</h2>
+        <p>您还没有创建任何调度队列，点击下方按钮来创建您的第一个队列</p>
+        <a-button type="primary" size="large" @click="handleAddQueue">
+          <template #icon>
+            <PlusOutlined />
+          </template>
+          新建队列
+        </a-button>
       </div>
     </div>
 
+
     <!-- 队列内容 -->
     <div class="queue-main-content" v-else-if="currentQueueData">
       <!-- 队列选择器 -->
@@ -678,6 +680,32 @@ onMounted(async () => {
   align-items: center;
 }
 
+.placeholder-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+
+.placeholder-content {
+  text-align: center;
+  max-width: 500px;
+}
+
+.placeholder-content h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin-bottom: 16px;
+}
+
+.placeholder-content p {
+  font-size: 16px;
+  color: var(--ant-color-text-secondary);
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
+
 .float-button {
   width: 60px;
   height: 60px;
diff --git a/frontend/src/views/Scripts.vue b/frontend/src/views/Scripts.vue
index aae4883..53f5a02 100644
--- a/frontend/src/views/Scripts.vue
+++ b/frontend/src/views/Scripts.vue
@@ -19,6 +19,19 @@
         </a-button>
       </a-space>
     </div>
+  <!-- 如果没有脚本，显示占位符 -->
+  <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>
 
     <ScriptTable
       :scripts="scripts"
@@ -244,7 +257,7 @@ const handleMAAConfig = async (script: Script) => {
       // 记录连接
       activeConnections.value.set(script.id, websocketId)
       message.success(`已开始配置 ${script.name}`)
-      
+
       // 可选：设置自动断开连接的定时器（比如30分钟后）
       setTimeout(() => {
         if (activeConnections.value.has(script.id)) {
@@ -504,4 +517,29 @@ const handleToggleUserStatus = async (user: User) => {
     font-size: 16px;
   }
 }
+.placeholder-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400px;
+}
+
+.placeholder-content {
+  text-align: center;
+  max-width: 500px;
+}
+
+.placeholder-content h2 {
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--ant-color-text);
+  margin-bottom: 16px;
+}
+
+.placeholder-content p {
+  font-size: 16px;
+  color: var(--ant-color-text-secondary);
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
 </style>