feat(Plans): 添加计划加载状态和空状态样式

- 在 Plans.vue 中添加 loading 相关逻辑，用于显示加载状态
- 实现空状态样式，优化无计划数据时的界面显示
- 调整模板结构，增加 loading-box 和空状态的 HTML 结构
- 优化 CSS 样式，为 loading 状态和空状态添加相应样式

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 {
+.loading-box {
-  color: #4096ff;
+  min-height: 400px;
-  border-radius: 50%;
+  display: flex;
-  padding: 2px 6px 2px 6px;
+  justify-content: center;
-  margin-left: 2px;
+  align-items: center;
-  font-size: 20px;
-  vertical-align: -3px;
 }
 </style>