From 18202045bf8672a78a8488628063c11d32a753c5 Mon Sep 17 00:00:00 2001
From: AoXuan <aoxuan233@gmail.com>
Date: Wed, 6 Aug 2025 15:30:07 +0800
Subject: [PATCH] =?UTF-8?q?feat(Plans):=20=E6=B7=BB=E5=8A=A0=E8=AE=A1?=
 =?UTF-8?q?=E5=88=92=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81=E5=92=8C=E7=A9=BA?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Plans.vue 中添加 loading 相关逻辑，用于显示加载状态
- 实现空状态样式，优化无计划数据时的界面显示
- 调整模板结构，增加 loading-box 和空状态的 HTML 结构
- 优化 CSS 样式，为 loading 状态和空状态添加相应样式
---
 frontend/src/views/Plans.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/Plans.vue b/frontend/src/views/Plans.vue
index 479d757..4ea0485 100644
--- a/frontend/src/views/Plans.vue
+++ b/frontend/src/views/Plans.vue
@@ -1,6 +1,9 @@
 <template>
+  <div v-if="loading" class="loading-box">
+    <a-spin tip="加载中，请稍候..." size="large" />
+  </div>
   <!-- 有计划时显示 -->
-  <div class="plans-content">
+  <div v-else class="plans-content">
     <!-- 计划头部 -->
     <div class="plans-header">
       <div class="header-title">
@@ -149,6 +152,8 @@ const currentPlanData = ref<Record<string, any> | null>(null)
 const currentPlanName = ref<string>('')
 const currentMode = ref<'ALL' | 'Weekly'>('ALL')
 
+const loading = ref(true)
+
 // 表格列配置（全局和周计划模式都使用相同的表格结构）
 const dynamicTableColumns = computed(() => {
   return tableColumns.value
@@ -570,6 +575,8 @@ const initPlans = async () => {
     console.error('初始化计划失败:', error)
     // 显示空状态
     currentPlanData.value = null
+  } finally {
+    loading.value = false
   }
 }
 
@@ -615,7 +622,9 @@ const savePlanData = async () => {
 
 // 刷新计划列表
 const handleRefresh = async () => {
+  loading.value = true
   await initPlans()
+  loading.value = false
   // message.success('刷新成功')
 }
 
@@ -628,8 +637,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-
-
 /* 空状态样式 */
 .empty-state {
   flex: 1;
@@ -707,7 +714,6 @@ onMounted(() => {
   border-bottom: 1px solid var(--ant-color-border-secondary);
 }
 
-
 /* 计划内容 */
 .plan-content {
   flex: 1;
@@ -882,12 +888,10 @@ onMounted(() => {
   display: inline-block;
 }
 
-.plus-btn {
-  color: #4096ff;
-  border-radius: 50%;
-  padding: 2px 6px 2px 6px;
-  margin-left: 2px;
-  font-size: 20px;
-  vertical-align: -3px;
+.loading-box {
+  min-height: 400px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-</style>
\ No newline at end of file
+</style>