UI界面模拟shadcn admin效果

frontend/src/components/AeForm.vue

@@ -1,6 +1,6 @@
 <template>
-  <el-dialog :title="isEdit ? '编辑 AE' : '新增 AE'" v-model="visible" width="600px" @close="onClose">
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+  <el-dialog :title="isEdit ? '编辑 AE' : '新增 AE'" v-model="visible" width="600px" @close="onClose" class="ctms-dialog">
+    <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="ctms-form--dense form-body">
       <el-form-item label="受试者" prop="subject_id">
         <SubjectSelect v-model="form.subject_id" :study-id="study.currentStudy?.id || null" placeholder="可留空" />
       </el-form-item>
@@ -26,8 +26,10 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="onClose">取消</el-button>
-      <el-button type="primary" :loading="submitting" @click="onSubmit">提交</el-button>
+      <div class="footer-right">
+        <el-button @click="onClose">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="onSubmit">提交</el-button>
+      </div>
     </template>
   </el-dialog>
 </template>
@@ -146,3 +148,21 @@ const onSubmit = async () => {
   });
 };
 </script>
+
+<style scoped>
+.form-body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+:deep(.el-dialog__body) {
+  padding-top: 12px;
+}
+
+:deep(.el-dialog__footer) {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>