UI界面模拟shadcn admin效果

frontend/src/views/AeDetail.vue

@@ -1,53 +1,66 @@
 <template>
-  <div class="page" v-if="ae">
-    <el-card class="mb-12">
-      <div class="header">
-        <div>
-          <h3>AE（不良事件）</h3>
-          <p>{{ ae.term }}</p>
-        </div>
-        <div class="action-buttons">
-          <template v-for="action in availableActions" :key="action.key">
-            <PermissionAction action="ae.close">
-              <el-button
-                size="small"
-                :type="action.danger ? 'danger' : 'primary'"
-                @click="onAction(action)"
-              >
-                {{ action.label }}
-              </el-button>
-            </PermissionAction>
-          </template>
-        </div>
+  <div class="ctms-page" v-if="ae">
+    <div class="ctms-page-header">
+      <div>
+        <h1 class="ctms-page-title">不良事件</h1>
       </div>
-      <el-descriptions :column="2" border>
+      <div class="ctms-page-actions">
+        <template v-for="action in availableActions" :key="action.key">
+          <PermissionAction action="ae.close">
+            <el-button
+              size="small"
+              :type="action.danger ? 'danger' : 'primary'"
+              :link="action.danger"
+              @click="onAction(action)"
+            >
+              {{ action.label }}
+            </el-button>
+          </PermissionAction>
+        </template>
+      </div>
+    </div>
+
+    <el-card class="ctms-section-card">
+      <template #header>
+        <div>
+          <div class="ctms-section-title">基本信息</div>
+        </div>
+      </template>
+      <el-descriptions :column="2" border class="detail-descriptions">
         <el-descriptions-item label="受试者">{{ subjectName(ae.subject_id) }}</el-descriptions-item>
         <el-descriptions-item label="严重性">{{ ae.seriousness }}</el-descriptions-item>
         <el-descriptions-item label="严重程度">{{ ae.severity }}</el-descriptions-item>
         <el-descriptions-item label="发生日期">{{ ae.onset_date }}</el-descriptions-item>
         <el-descriptions-item label="状态">
-          <el-tag :type="stateColor(aeState)">{{ stateLabel(aeState) }}</el-tag>
+          <el-tag :type="stateColor(aeState)" effect="plain">{{ stateLabel(aeState) }}</el-tag>
         </el-descriptions-item>
         <el-descriptions-item label="描述">{{ ae.description }}</el-descriptions-item>
       </el-descriptions>
     </el-card>
 
-    <el-tabs>
-      <el-tab-pane label="评论">
-        <CommentList :study-id="studyId" entity-type="aes" :entity-id="ae.id" :can-comment="true" />
-      </el-tab-pane>
-      <el-tab-pane label="附件">
-        <AttachmentList
-          :study-id="studyId"
-          entity-type="aes"
-          :entity-id="ae.id"
-          :show-uploader="true"
-        />
-      </el-tab-pane>
-    </el-tabs>
+    <el-card class="ctms-section-card">
+      <template #header>
+        <div>
+          <div class="ctms-section-title">协作记录</div>
+        </div>
+      </template>
+      <el-tabs class="detail-tabs">
+        <el-tab-pane label="评论">
+          <CommentList :study-id="studyId" entity-type="aes" :entity-id="ae.id" :can-comment="true" />
+        </el-tab-pane>
+        <el-tab-pane label="附件">
+          <AttachmentList
+            :study-id="studyId"
+            entity-type="aes"
+            :entity-id="ae.id"
+            :show-uploader="true"
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
   </div>
-  <div v-else class="page">
-    <el-skeleton rows="4" animated />
+  <div v-else class="ctms-page">
+    <StateLoading :rows="4" />
   </div>
 </template>
 
@@ -62,6 +75,7 @@ import { useAuthStore } from "../store/auth";
 import CommentList from "../components/CommentList.vue";
 import AttachmentList from "../components/attachments/AttachmentList.vue";
 import PermissionAction from "../components/PermissionAction.vue";
+import StateLoading from "../components/StateLoading.vue";
 import { usePermission } from "../utils/permission";
 import { aeMachine, getAvailableActions } from "../state-machine";
 import type { ActionConfig } from "../state-machine";
@@ -199,15 +213,11 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.page {
-  padding: 16px;
+.detail-descriptions :deep(.el-descriptions__label) {
+  color: var(--ctms-text-secondary);
 }
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.mb-12 {
-  margin-bottom: 12px;
+
+.detail-tabs {
+  margin-top: -8px;
 }
 </style>