UI界面模拟shadcn admin效果

frontend/src/views/StudyHome.vue

@@ -4,6 +4,7 @@
     <div class="home-header">
       <div class="header-content">
         <h1 class="welcome-title">项目概览</h1>
+        <p class="page-subtitle">当前项目运行状态与关键指标</p>
         <p class="study-info">
           <span class="study-name">{{ study.currentStudy.name }}</span>
           <span class="study-divider">/</span>
@@ -11,7 +12,7 @@
         </p>
       </div>
       <div class="header-meta">
-        <el-tag effect="plain" class="role-tag">我的角色: {{ auth.user?.role }}</el-tag>
+        <el-tag effect="plain" class="role-tag">角色: {{ auth.user?.role }}</el-tag>
       </div>
     </div>
 
@@ -83,7 +84,7 @@
   </div>
   
   <div v-else class="empty-state-container">
-    <el-empty description="请先在顶部选择一个当前项目" />
+    <StateEmpty description="请先在顶部选择一个当前项目" />
   </div>
 </template>
 
@@ -95,6 +96,7 @@ import { fetchFinanceSummary, fetchOverdueAesCount, fetchOverdueQueriesCount, fe
 import KpiCard from "../components/KpiCard.vue";
 import QuickActions from "../components/QuickActions.vue";
 import { List, Warning, QuestionFilled, Money } from "@element-plus/icons-vue";
+import StateEmpty from "../components/StateEmpty.vue";
 
 const auth = useAuthStore();
 const study = useStudyStore();
@@ -181,23 +183,29 @@ watch(
 .home-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
-  padding-bottom: 8px;
+  align-items: center;
+  padding-bottom: 4px;
 }
 
 .welcome-title {
-  font-size: 28px;
-  font-weight: 700;
+  font-size: 26px;
+  font-weight: 600;
   color: var(--ctms-text-main);
   margin: 0;
 }
 
+.page-subtitle {
+  font-size: 13px;
+  color: var(--ctms-text-secondary);
+  margin: 6px 0 0;
+}
+
 .study-info {
-  margin: 8px 0 0;
+  margin: 6px 0 0;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 15px;
+  font-size: 13px;
   color: var(--ctms-text-secondary);
 }
 
@@ -206,22 +214,21 @@ watch(
 }
 
 .role-tag {
-  background-color: #fff;
-  border-color: var(--ctms-primary-hover);
-  color: var(--ctms-primary);
+  background-color: #ffffff;
+  border-color: var(--ctms-border-color);
+  color: var(--ctms-text-regular);
   font-weight: 500;
 }
 
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 20px;
+  gap: 16px;
 }
 
 .home-alert {
-  border: none;
-  border-left: 4px solid;
-  border-radius: 4px;
+  border: 1px solid var(--ctms-border-color);
+  border-radius: var(--ctms-radius);
 }
 
 .quick-nav-section {