UI界面模拟shadcn admin效果

frontend/src/views/admin/ProjectDetail.vue

@@ -1,33 +1,38 @@
 <template>
-  <div class="page">
-    <el-card class="mb-12">
-      <div class="header">
-        <div>
-          <h3>项目详情</h3>
-          <p class="sub" v-if="project">项目：{{ project.code }} - {{ project.name }}</p>
-        </div>
-        <div class="actions">
-          <el-button type="primary" @click="enterProject" :disabled="!project">进入项目</el-button>
-          <el-button @click="goMembers" :disabled="!project">项目成员配置</el-button>
-          <el-button @click="goSites" :disabled="!project">中心管理</el-button>
-        </div>
+  <div class="ctms-page">
+    <div class="ctms-page-header">
+      <div>
+        <h1 class="ctms-page-title">项目详情</h1>
       </div>
-    </el-card>
+      <div class="ctms-page-actions">
+        <el-button type="primary" @click="enterProject" :disabled="!project">进入项目</el-button>
+        <el-button @click="goMembers" :disabled="!project">项目成员配置</el-button>
+        <el-button @click="goSites" :disabled="!project">中心管理</el-button>
+      </div>
+    </div>
 
-    <el-card class="mb-12">
-      <h4 class="section-title">项目基本信息</h4>
-      <el-descriptions v-if="project" :column="2" border>
+    <el-card class="ctms-section-card">
+      <template #header>
+        <div>
+          <div class="ctms-section-title">项目基本信息</div>
+        </div>
+      </template>
+      <el-descriptions v-if="project" :column="2" border class="detail-descriptions">
         <el-descriptions-item label="项目编号">{{ project.code }}</el-descriptions-item>
         <el-descriptions-item label="项目名称">{{ project.name }}</el-descriptions-item>
         <el-descriptions-item label="申办方">{{ project.sponsor || "—" }}</el-descriptions-item>
         <el-descriptions-item label="状态">{{ statusLabel(project.status) }}</el-descriptions-item>
         <el-descriptions-item label="创建时间">{{ displayDateTime(project.created_at) }}</el-descriptions-item>
       </el-descriptions>
-      <el-skeleton v-else :rows="4" animated />
+      <StateLoading v-else :rows="4" />
     </el-card>
 
-    <el-card>
-      <h4 class="section-title">项目通用文件</h4>
+    <el-card class="ctms-section-card">
+      <template #header>
+        <div>
+          <div class="ctms-section-title">项目通用文件</div>
+        </div>
+      </template>
       <AttachmentList
         v-if="project"
         :study-id="project.id"
@@ -35,7 +40,7 @@
         :entity-id="project.id"
         :show-uploader="true"
       />
-      <el-skeleton v-else :rows="3" animated />
+      <StateLoading v-else :rows="3" />
     </el-card>
   </div>
 </template>
@@ -47,6 +52,7 @@ import { ElMessage } from "element-plus";
 import { fetchStudyDetail } from "../../api/studies";
 import type { Study } from "../../types/api";
 import AttachmentList from "../../components/attachments/AttachmentList.vue";
+import StateLoading from "../../components/StateLoading.vue";
 import { useStudyStore } from "../../store/study";
 import { displayDateTime } from "../../utils/display";
 
@@ -94,26 +100,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.page {
-  padding: 16px;
-}
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.actions {
-  display: flex;
-  gap: 8px;
-}
-.sub {
-  color: #666;
-  margin-top: 4px;
-}
-.section-title {
-  margin-bottom: 12px;
-}
-.mb-12 {
-  margin-bottom: 12px;
+.detail-descriptions :deep(.el-descriptions__label) {
+  color: var(--ctms-text-secondary);
 }
 </style>