UI界面模拟shadcn admin效果

frontend/src/views/workbench/components/PersonalTodo.vue

@@ -51,7 +51,7 @@
         </transition-group>
       </div>
       <div v-else class="empty-state">
-        <el-empty description="暂无待办事项，记录一些备忘吧" :image-size="60" />
+        <StateEmpty description="暂无待办事项，记录一些备忘吧" />
       </div>
     </div>
   </el-card>
@@ -60,6 +60,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { Notebook, EditPen, Plus, Delete } from "@element-plus/icons-vue";
+import StateEmpty from "../../../components/StateEmpty.vue";
 
 const props = defineProps<{ storageKey: string | undefined }>();
 

frontend/src/views/workbench/components/SectionCard.vue

@@ -10,36 +10,33 @@
     </template>
     
     <div class="section-body">
-      <el-skeleton :loading="loading" animated :rows="3">
-        <template #default>
-          <div v-if="items && items.length" class="list-container">
-            <div 
-              v-for="item in items.slice(0, 5)" 
-              :key="item.title + item.path" 
-              class="list-item" 
-              @click="go(item.path)"
+      <StateLoading v-if="loading" :rows="3" />
+      <div v-else-if="items && items.length" class="list-container">
+        <div 
+          v-for="item in items.slice(0, 5)" 
+          :key="item.title + item.path" 
+          class="list-item" 
+          @click="go(item.path)"
+        >
+          <div class="item-main">
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-subtitle">{{ item.subtitle }}</div>
+          </div>
+          <div class="item-meta">
+            <el-tag 
+              size="small" 
+              :type="item.overdue ? 'danger' : 'info'" 
+              :effect="item.overdue ? 'dark' : 'light'"
+              class="status-tag"
             >
-              <div class="item-main">
-                <div class="item-title">{{ item.title }}</div>
-                <div class="item-subtitle">{{ item.subtitle }}</div>
-              </div>
-              <div class="item-meta">
-                <el-tag 
-                  size="small" 
-                  :type="item.overdue ? 'danger' : 'info'" 
-                  :effect="item.overdue ? 'dark' : 'light'"
-                  class="status-tag"
-                >
-                  {{ item.status || "待处理" }}
-                </el-tag>
-              </div>
-            </div>
+              {{ item.status || "待处理" }}
+            </el-tag>
           </div>
-          <div v-else class="empty-state">
-            <el-empty :description="emptyText" :image-size="60" />
-          </div>
-        </template>
-      </el-skeleton>
+        </div>
+      </div>
+      <div v-else class="empty-state">
+        <StateEmpty :description="emptyText || '暂无数据'" />
+      </div>
     </div>
   </el-card>
 </template>
@@ -47,6 +44,8 @@
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 import { ArrowRight } from "@element-plus/icons-vue";
+import StateEmpty from "../../../components/StateEmpty.vue";
+import StateLoading from "../../../components/StateLoading.vue";
 
 defineProps<{
   title: string;
@@ -147,11 +146,6 @@ const go = (path: string) => {
 }
 
 .empty-state {
-  padding: 40px 0;
-}
-
-:deep(.el-empty__description) {
-  margin-top: 8px;
-  color: var(--ctms-text-disabled);
+  padding: 8px 0;
 }
 </style>