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

+
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"
>
@@ -52,23 +51,15 @@
-
-
-
- 您还没有创建任何计划,点击下方按钮来创建您的第一个计划
-
-
-
-
-
-
- 新建计划
-
-
+
+
+

+
+
+
@@ -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"
>
@@ -52,23 +51,15 @@
-
-
-
- 您还没有创建任何调度队列,点击下方按钮来创建您的第一个队列
-
-
-
-
-
-
- 新建队列
-
-
+
+
+

+
+
+
@@ -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 @@
-
+
+

+
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 @@
-
-
-
- 您还没有创建任何脚本,点击下方的“新建脚本”按钮来创建您的第一个脚本。
-
-
-
-
-
-
- 新建脚本
-
-
+
+
+

+
+
+
{
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;