diff --git a/frontend/src/components/AeForm.vue b/frontend/src/components/AeForm.vue
index fe55852e..310dd98e 100644
--- a/frontend/src/components/AeForm.vue
+++ b/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>
diff --git a/frontend/src/components/DataQueryForm.vue b/frontend/src/components/DataQueryForm.vue
index 520c01b1..3ee02b83 100644
--- a/frontend/src/components/DataQueryForm.vue
+++ b/frontend/src/components/DataQueryForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-dialog :title="isEdit ? '编辑数据问题' : '新建数据问题'" v-model="visible" width="600px" @close="onClose">
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+  <el-dialog :title="isEdit ? '编辑数据问题' : '新建数据问题'" 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="title">
         <el-input v-model="form.title" />
       </el-form-item>
@@ -33,8 +33,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>
@@ -142,3 +144,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>
diff --git a/frontend/src/components/IssueForm.vue b/frontend/src/components/IssueForm.vue
index 6ca1ab92..ad620ab4 100644
--- a/frontend/src/components/IssueForm.vue
+++ b/frontend/src/components/IssueForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-dialog :title="isEdit ? '编辑问题' : '新增问题'" v-model="visible" width="600px" @close="onClose">
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+  <el-dialog :title="isEdit ? '编辑问题' : '新增问题'" 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="title">
         <el-input v-model="form.title" />
       </el-form-item>
@@ -25,8 +25,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>
@@ -148,3 +150,21 @@ const levelLabel = (l: string) =>
     CRITICAL: "关键",
   }[l] || l);
 </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>
diff --git a/frontend/src/components/KpiCard.vue b/frontend/src/components/KpiCard.vue
index a4ee7b36..b1809d2a 100644
--- a/frontend/src/components/KpiCard.vue
+++ b/frontend/src/components/KpiCard.vue
@@ -37,14 +37,12 @@ defineProps<Props>();
 <style scoped>
 .kpi-card {
   border: 1px solid var(--ctms-border-color);
-  transition: all 0.3s ease;
+  transition: var(--ctms-transition);
   height: 100%;
 }
 
 .kpi-card:hover {
-  border-color: var(--ctms-primary-hover);
-  box-shadow: var(--ctms-shadow-md) !important;
-  transform: translateY(-2px);
+  border-color: var(--ctms-border-color-hover);
 }
 
 .kpi-header {
@@ -56,14 +54,13 @@ defineProps<Props>();
 
 .kpi-title {
   color: var(--ctms-text-secondary);
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .kpi-icon {
-  font-size: 18px;
-  color: var(--ctms-primary);
-  opacity: 0.6;
+  font-size: 16px;
+  color: var(--ctms-text-secondary);
 }
 
 .kpi-content {
@@ -78,8 +75,8 @@ defineProps<Props>();
 }
 
 .kpi-value {
-  font-size: 32px;
-  font-weight: 700;
+  font-size: 28px;
+  font-weight: 600;
   color: var(--ctms-text-main);
   line-height: 1.2;
 }
@@ -92,7 +89,7 @@ defineProps<Props>();
 
 .kpi-subtext {
   color: var(--ctms-text-secondary);
-  font-size: 13px;
+  font-size: 12px;
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px dashed var(--ctms-border-color);
diff --git a/frontend/src/components/Layout.vue b/frontend/src/components/Layout.vue
index 4aef8f7c..2597a9ca 100644
--- a/frontend/src/components/Layout.vue
+++ b/frontend/src/components/Layout.vue
@@ -1,6 +1,6 @@
 <template>
   <el-container class="layout-container">
-    <el-aside width="240px" class="layout-aside" v-if="isAdmin || study.currentStudy">
+    <el-aside :width="isCollapsed ? '72px' : '240px'" class="layout-aside" :class="{ collapsed: isCollapsed }" v-if="isAdmin || study.currentStudy">
       <div class="aside-logo">
         <div class="logo-icon"></div>
         <span class="logo-text">CTMS</span>
@@ -8,6 +8,8 @@
       <el-menu 
         router 
         :default-active="$route.path"
+        :collapse="isCollapsed"
+        :collapse-transition="true"
         class="aside-menu"
       >
         <el-menu-item v-if="!isAdmin" index="/workbench">
@@ -34,32 +36,32 @@
             <span>项目概览</span>
           </el-menu-item>
           <el-menu-item index="/study/milestones">
-            <el-icon><Timer /></el-icon>
+            <el-icon><Calendar /></el-icon>
             <span>伦理与启动</span>
           </el-menu-item>
           <el-menu-item index="/study/subjects">
-            <el-icon><UserFilled /></el-icon>
+            <el-icon><User /></el-icon>
             <span>受试者</span>
           </el-menu-item>
           <el-menu-item index="/study/aes">
-            <el-icon><Warning /></el-icon>
+            <el-icon><WarningFilled /></el-icon>
             <span>不良事件</span>
           </el-menu-item>
           <el-menu-item index="/study/issues">
-            <el-icon><InfoFilled /></el-icon>
+            <el-icon><Flag /></el-icon>
             <span>风险与问题</span>
           </el-menu-item>
           <el-menu-item index="/study/data-queries">
-            <el-icon><QuestionFilled /></el-icon>
+            <el-icon><ChatDotRound /></el-icon>
             <span>数据问题</span>
           </el-menu-item>
           <el-menu-item index="/study/verifications">
-            <el-icon><Checked /></el-icon>
+            <el-icon><CircleCheck /></el-icon>
             <span>数据核查</span>
           </el-menu-item>
           <el-sub-menu index="imp">
             <template #title>
-              <el-icon><Management /></el-icon>
+              <el-icon><Box /></el-icon>
               <span>药品管理</span>
             </template>
             <el-menu-item index="/study/imp/inventory">库存</el-menu-item>
@@ -68,15 +70,15 @@
             <el-menu-item index="/study/imp/transactions">交易台账</el-menu-item>
           </el-sub-menu>
           <el-menu-item index="/study/finance">
-            <el-icon><Money /></el-icon>
+            <el-icon><Coin /></el-icon>
             <span>费用治理</span>
           </el-menu-item>
           <el-menu-item index="/study/faq">
-            <el-icon><Collection /></el-icon>
+            <el-icon><Notebook /></el-icon>
             <span>知识库</span>
           </el-menu-item>
           <el-menu-item v-if="isAdmin || isPm" index="/study/audit-logs">
-            <el-icon><Memo /></el-icon>
+            <el-icon><Document /></el-icon>
             <span>审计日志</span>
           </el-menu-item>
         </template>
@@ -86,7 +88,14 @@
     <el-container class="main-container">
       <el-header class="layout-header">
         <div class="header-left">
-          <!-- 移除冗余的 study-tag，由 StudySelector 统一展示交互 -->
+          <el-button class="collapse-btn" @click="toggleCollapse" aria-label="收缩侧边栏">
+            <el-icon class="collapse-icon">
+              <svg viewBox="0 0 24 24" aria-hidden="true">
+                <rect x="4" y="5" width="16" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.8" />
+                <line x1="9.5" y1="5" x2="9.5" y2="19" stroke="currentColor" stroke-width="1.8" />
+              </svg>
+            </el-icon>
+          </el-button>
         </div>
         <div class="header-right">
           <StudySelector />
@@ -133,15 +142,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "../store/auth";
 import { useStudyStore } from "../store/study";
 import StudySelector from "./StudySelector.vue";
 import { 
-  Monitor, User, Suitcase, House, Timer, UserFilled, 
-  Warning, InfoFilled, QuestionFilled, Checked, Management, 
-  Money, Collection, Memo, ArrowDown, SwitchButton 
+  Monitor, User, Suitcase, House, Calendar, WarningFilled, Flag, ChatDotRound,
+  CircleCheck, Box, Coin, Notebook, Document, ArrowDown, SwitchButton
 } from "@element-plus/icons-vue";
 
 const auth = useAuthStore();
@@ -149,6 +157,12 @@ const study = useStudyStore();
 const router = useRouter();
 const isAdmin = computed(() => auth.user?.role === "ADMIN");
 const isPm = computed(() => auth.user?.role === "PM" || study.currentStudyRole === "PM");
+const isCollapsed = ref(localStorage.getItem("ctms_sidebar_collapsed") === "1");
+
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value;
+  localStorage.setItem("ctms_sidebar_collapsed", isCollapsed.value ? "1" : "0");
+};
 
 const onLogout = () => {
   auth.logout();
@@ -168,16 +182,37 @@ const onCommand = (cmd: string) => {
 <style scoped>
 .layout-container {
   height: 100vh;
-  background-color: #f6f8fb;
+  background-color: transparent;
 }
 
 .layout-aside {
-  background-color: #001529; /* 经典深色，保持专业感 */
+  background-color: #ffffff;
   display: flex;
   flex-direction: column;
-  box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
+  box-shadow: none;
   z-index: 10;
-  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  border-right: 1px solid var(--ctms-border-color);
+  transition: width 0.18s ease;
+  overflow: hidden;
+}
+
+.aside-menu {
+  transition: padding 0.18s ease;
+}
+
+.layout-aside.collapsed .logo-text {
+  opacity: 0;
+  transform: translateX(-4px);
+  pointer-events: none;
+}
+
+.layout-aside.collapsed .aside-logo {
+  justify-content: center;
+  padding: 0;
+}
+
+.layout-aside.collapsed .menu-divider {
+  display: none;
 }
 
 .aside-logo {
@@ -185,23 +220,25 @@ const onCommand = (cmd: string) => {
   display: flex;
   align-items: center;
   padding: 0 24px;
-  background-color: #001529;
+  background-color: transparent;
+  transition: padding 0.18s ease;
 }
 
 .logo-icon {
   width: 28px;
   height: 28px;
-  background: linear-gradient(135deg, var(--ctms-primary) 0%, #6366f1 100%);
-  border-radius: 8px;
+  background: var(--ctms-primary);
+  border-radius: 10px;
   margin-right: 12px;
-  box-shadow: 0 4px 8px rgba(47, 84, 235, 0.3);
+  box-shadow: 0 6px 14px rgba(63, 93, 117, 0.18);
 }
 
 .logo-text {
-  color: #fff;
-  font-size: 20px;
+  color: var(--ctms-text-main);
+  font-size: 18px;
   font-weight: 800;
   letter-spacing: 1px;
+  transition: opacity 0.18s ease, transform 0.18s ease;
 }
 
 .aside-menu {
@@ -216,7 +253,7 @@ const onCommand = (cmd: string) => {
   padding: 16px 24px 8px;
   font-size: 11px;
   font-weight: 600;
-  color: rgba(255, 255, 255, 0.35);
+  color: var(--ctms-text-secondary);
   text-transform: uppercase;
   letter-spacing: 1.5px;
 }
@@ -225,47 +262,47 @@ const onCommand = (cmd: string) => {
   height: 44px;
   line-height: 44px;
   margin: 4px 12px;
-  border-radius: var(--ctms-radius);
-  color: rgba(255, 255, 255, 0.7) !important;
+  border-radius: 12px;
+  color: var(--ctms-text-regular) !important;
   transition: var(--ctms-transition);
 }
 
 :deep(.el-menu-item:hover) {
-  color: #fff !important;
-  background-color: rgba(255, 255, 255, 0.05) !important;
+  color: var(--ctms-text-main) !important;
+  background-color: var(--ctms-bg-muted) !important;
 }
 
 :deep(.el-menu-item.is-active) {
-  color: #fff !important;
-  background-color: var(--ctms-primary) !important;
-  box-shadow: 0 4px 12px rgba(47, 84, 235, 0.2);
+  color: var(--ctms-primary) !important;
+  background-color: var(--ctms-primary-light) !important;
+  box-shadow: none;
 }
 
 :deep(.el-menu-item.is-active::before) {
   content: "";
   position: absolute;
-  left: -12px;
+  left: 8px;
   top: 12px;
   bottom: 12px;
-  width: 4px;
-  background-color: #fff;
-  border-radius: 0 4px 4px 0;
+  width: 3px;
+  background-color: var(--ctms-primary);
+  border-radius: 999px;
 }
 
 :deep(.el-sub-menu__title) {
-  color: rgba(255, 255, 255, 0.7) !important;
+  color: var(--ctms-text-regular) !important;
   margin: 4px 12px;
-  border-radius: var(--ctms-radius);
+  border-radius: 12px;
   height: 44px;
   line-height: 44px;
 }
 
 :deep(.el-sub-menu.is-active .el-sub-menu__title) {
-  color: #fff !important;
+  color: var(--ctms-text-main) !important;
 }
 
 :deep(.el-menu--inline) {
-  background-color: rgba(0, 0, 0, 0.2) !important;
+  background-color: transparent !important;
   margin: 0 !important;
 }
 
@@ -275,14 +312,15 @@ const onCommand = (cmd: string) => {
 }
 
 .layout-header {
-  background-color: #fff;
+  background-color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 24px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
+  box-shadow: none;
   height: 64px !important;
   z-index: 9;
+  border-bottom: 1px solid var(--ctms-border-color);
 }
 
 .header-right {
@@ -291,6 +329,21 @@ const onCommand = (cmd: string) => {
   gap: 20px;
 }
 
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.collapse-btn {
+  border: 1px solid var(--ctms-border-color);
+  color: var(--ctms-text-regular);
+}
+
+.collapse-icon {
+  font-size: 18px;
+}
+
+
 .user-profile {
   display: flex;
   align-items: center;
@@ -301,23 +354,23 @@ const onCommand = (cmd: string) => {
   display: flex;
   align-items: center;
   padding: 4px 12px;
-  border-radius: 14px;
-  background: #f8fafc;
-  border: 1px solid #eef2f6;
-  color: #334155;
+  border-radius: 999px;
+  background: #ffffff;
+  border: 1px solid var(--ctms-border-color);
+  color: var(--ctms-text-regular);
   transition: var(--ctms-transition);
   height: 40px;
 }
 
 .dropdown-trigger.compact:hover {
-  background: #f1f5f9;
-  border-color: #e2e8f0;
+  background: var(--ctms-bg-muted);
+  border-color: var(--ctms-border-color-hover);
 }
 
 .user-avatar-comp {
   color: var(--ctms-primary) !important;
   background-color: transparent !important;
-  border-radius: 8px !important;
+  border-radius: 10px !important;
   font-weight: 700;
   flex-shrink: 0;
   font-size: 14px;
@@ -339,7 +392,7 @@ const onCommand = (cmd: string) => {
 }
 
 .content-wrapper {
-  padding: 24px;
+  padding: 28px;
   min-height: calc(100vh - 64px);
 }
 
diff --git a/frontend/src/components/QuickActions.vue b/frontend/src/components/QuickActions.vue
index 56764776..c22ae172 100644
--- a/frontend/src/components/QuickActions.vue
+++ b/frontend/src/components/QuickActions.vue
@@ -11,7 +11,7 @@
         class="action-item"
         @click="go(item.path)"
       >
-        <div class="action-icon-wrapper" :style="{ backgroundColor: item.color + '20', color: item.color }">
+        <div class="action-icon-wrapper">
           <el-icon><component :is="item.icon" /></el-icon>
         </div>
         <span class="action-label">{{ item.label }}</span>
@@ -31,13 +31,13 @@ import {
 const router = useRouter();
 
 const actions = [
-  { label: "伦理与启动", path: "/study/milestones", icon: Timer, color: "#2f54eb" },
-  { label: "受试者", path: "/study/subjects", icon: UserFilled, color: "#722ed1" },
-  { label: "不良事件", path: "/study/aes", icon: Warning, color: "#faad14" },
-  { label: "数据问题", path: "/study/data-queries", icon: QuestionFilled, color: "#1890ff" },
-  { label: "药品库存", path: "/study/imp/inventory", icon: Management, color: "#52c41a" },
-  { label: "费用治理", path: "/study/finance", icon: Money, color: "#eb2f96" },
-  { label: "项目知识库", path: "/study/faq", icon: Collection, color: "#fa8c16" },
+  { label: "伦理与启动", path: "/study/milestones", icon: Timer },
+  { label: "受试者", path: "/study/subjects", icon: UserFilled },
+  { label: "不良事件", path: "/study/aes", icon: Warning },
+  { label: "数据问题", path: "/study/data-queries", icon: QuestionFilled },
+  { label: "药品库存", path: "/study/imp/inventory", icon: Management },
+  { label: "费用治理", path: "/study/finance", icon: Money },
+  { label: "项目知识库", path: "/study/faq", icon: Collection },
 ];
 
 const go = (path: string) => router.push(path);
@@ -48,7 +48,7 @@ const go = (path: string) => router.push(path);
   background-color: #fff;
   border-radius: var(--ctms-radius);
   padding: 24px;
-  box-shadow: var(--ctms-shadow-sm);
+  border: 1px solid var(--ctms-border-color);
 }
 
 .section-header {
@@ -59,12 +59,12 @@ const go = (path: string) => router.push(path);
 }
 
 .header-icon {
-  font-size: 18px;
-  color: var(--ctms-primary);
+  font-size: 16px;
+  color: var(--ctms-text-secondary);
 }
 
 .header-title {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: var(--ctms-text-main);
 }
@@ -79,31 +79,31 @@ const go = (path: string) => router.push(path);
   display: flex;
   align-items: center;
   padding: 12px 16px;
-  background-color: #fafafa;
+  background-color: #ffffff;
   border: 1px solid var(--ctms-border-color);
-  border-radius: 8px;
+  border-radius: 10px;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: var(--ctms-transition);
   position: relative;
   overflow: hidden;
 }
 
 .action-item:hover {
-  background-color: #fff;
-  border-color: var(--ctms-primary-hover);
-  box-shadow: var(--ctms-shadow-sm);
-  transform: translateY(-2px);
+  background-color: #ffffff;
+  border-color: var(--ctms-border-color-hover);
 }
 
 .action-icon-wrapper {
-  width: 36px;
-  height: 36px;
+  width: 34px;
+  height: 34px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
+  font-size: 18px;
   margin-right: 12px;
+  color: var(--ctms-text-secondary);
+  background-color: var(--ctms-bg-muted);
 }
 
 .action-label {
@@ -116,13 +116,11 @@ const go = (path: string) => router.push(path);
 .action-arrow {
   font-size: 14px;
   color: var(--ctms-text-disabled);
-  opacity: 0;
-  transition: all 0.3s ease;
-  transform: translateX(-10px);
+  opacity: 1;
+  transition: var(--ctms-transition);
 }
 
 .action-item:hover .action-arrow {
-  opacity: 1;
-  transform: translateX(0);
+  color: var(--ctms-text-secondary);
 }
 </style>
diff --git a/frontend/src/components/StateEmpty.vue b/frontend/src/components/StateEmpty.vue
new file mode 100644
index 00000000..b2637d00
--- /dev/null
+++ b/frontend/src/components/StateEmpty.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="state state-empty">
+    <el-icon class="state-icon"><Document /></el-icon>
+    <div class="state-title">{{ title }}</div>
+    <div v-if="description" class="state-desc">{{ description }}</div>
+    <div v-if="$slots.action" class="state-action">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Document } from "@element-plus/icons-vue";
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+  }>(),
+  {
+    title: "暂无数据",
+    description: "",
+  }
+);
+</script>
+
+<style scoped>
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 12px;
+  color: var(--ctms-text-secondary);
+  text-align: center;
+}
+
+.state-icon {
+  font-size: 36px;
+  color: var(--ctms-text-disabled);
+  margin-bottom: 10px;
+}
+
+.state-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ctms-text-regular);
+}
+
+.state-desc {
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+  margin-top: 6px;
+}
+
+.state-action {
+  margin-top: 12px;
+}
+</style>
diff --git a/frontend/src/components/StateError.vue b/frontend/src/components/StateError.vue
new file mode 100644
index 00000000..4acf3e9b
--- /dev/null
+++ b/frontend/src/components/StateError.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="state state-error">
+    <el-icon class="state-icon"><CircleCloseFilled /></el-icon>
+    <div class="state-title">{{ title }}</div>
+    <div v-if="description" class="state-desc">{{ description }}</div>
+    <div v-if="$slots.action" class="state-action">
+      <slot name="action" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CircleCloseFilled } from "@element-plus/icons-vue";
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+  }>(),
+  {
+    title: "加载失败",
+    description: "请稍后重试",
+  }
+);
+</script>
+
+<style scoped>
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 12px;
+  text-align: center;
+}
+
+.state-icon {
+  font-size: 36px;
+  color: var(--ctms-danger);
+  margin-bottom: 10px;
+}
+
+.state-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+}
+
+.state-desc {
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+  margin-top: 6px;
+}
+
+.state-action {
+  margin-top: 12px;
+}
+</style>
diff --git a/frontend/src/components/StateLoading.vue b/frontend/src/components/StateLoading.vue
new file mode 100644
index 00000000..ee2f00d3
--- /dev/null
+++ b/frontend/src/components/StateLoading.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="state state-loading">
+    <el-skeleton :rows="rows" animated />
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    rows?: number;
+  }>(),
+  {
+    rows: 4,
+  }
+);
+</script>
+
+<style scoped>
+.state-loading {
+  padding: 24px;
+  border: 1px solid var(--ctms-border-color);
+  border-radius: var(--ctms-radius);
+  background-color: #ffffff;
+}
+</style>
diff --git a/frontend/src/components/SubjectForm.vue b/frontend/src/components/SubjectForm.vue
index d89cddb9..dd2daa37 100644
--- a/frontend/src/components/SubjectForm.vue
+++ b/frontend/src/components/SubjectForm.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-dialog title="新增受试者" v-model="visible" width="520px" @close="onClose">
-    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+  <el-dialog title="新增受试者" v-model="visible" width="520px" @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="site_id">
         <el-select v-model="form.site_id" placeholder="请选择" filterable>
           <el-option v-for="s in sites" :key="s.id" :label="s.name || s.id" :value="s.id" />
@@ -14,9 +14,13 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-checkbox v-model="keepCreating" class="mr-8">提交后继续新建</el-checkbox>
-      <el-button @click="onClose">取消</el-button>
-      <el-button type="primary" :loading="submitting" @click="onSubmit">提交</el-button>
+      <div class="footer-left">
+        <el-checkbox v-model="keepCreating">提交后继续新建</el-checkbox>
+      </div>
+      <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>
@@ -100,3 +104,25 @@ const onSubmit = async () => {
 
 resetForm();
 </script>
+
+<style scoped>
+.form-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+:deep(.el-dialog__body) {
+  padding-top: 12px;
+}
+
+:deep(.el-dialog__footer) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-left {
+  color: var(--ctms-text-secondary);
+}
+</style>
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index f0b35559..86393601 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -1,32 +1,35 @@
 /**
  * CTMS 全局样式系统
- * 基于 8px 网格系统与医疗专业色板
+ * 参考 shadcn-admin 的轻量、中性、分层风格
  */
 
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");
+
 :root {
-  /* 品牌色 - 医疗蓝 */
-  --ctms-primary: #2f54eb;
-  --ctms-primary-hover: #597ef7;
-  --ctms-primary-active: #1d39c4;
-  --ctms-primary-light: #f0f5ff;
+  /* 品牌色 - 低饱和蓝灰 */
+  --ctms-primary: #3f5d75;
+  --ctms-primary-hover: #365067;
+  --ctms-primary-active: #2b4356;
+  --ctms-primary-light: #e6edf2;
 
   /* 语义色 */
-  --ctms-success: #52c41a;
-  --ctms-warning: #faad14;
-  --ctms-danger: #ff4d4f;
-  --ctms-info: #8c8c8c;
+  --ctms-success: #3f8f6b;
+  --ctms-warning: #c58b2a;
+  --ctms-danger: #c24b4b;
+  --ctms-info: #64748b;
 
   /* 文字颜色 - 高层级到低层级 */
-  --ctms-text-main: #262626;
-  --ctms-text-regular: #595959;
-  --ctms-text-secondary: #8c8c8c;
-  --ctms-text-disabled: #bfbfbf;
+  --ctms-text-main: #0f172a;
+  --ctms-text-regular: #334155;
+  --ctms-text-secondary: #64748b;
+  --ctms-text-disabled: #94a3b8;
 
   /* 中性色 & 背景 */
-  --ctms-bg-base: #f0f2f5;
+  --ctms-bg-base: #f9fafb;
   --ctms-bg-card: #ffffff;
-  --ctms-border-color: #f0f0f0;
-  --ctms-border-color-hover: #d9d9d9;
+  --ctms-bg-muted: #f3f4f6;
+  --ctms-border-color: #e5e7eb;
+  --ctms-border-color-hover: #cbd5e1;
 
   /* 间距 - 8px 网格 */
   --ctms-spacing-xs: 4px;
@@ -35,19 +38,31 @@
   --ctms-spacing-lg: 24px;
   --ctms-spacing-xl: 32px;
 
-  /* 圆角 & 阴影 - 升级为更多层级 */
-  --ctms-radius-sm: 4px;
-  --ctms-radius: 8px;
+  /* 圆角 & 阴影 */
+  --ctms-radius-sm: 6px;
+  --ctms-radius: 10px;
   --ctms-radius-lg: 12px;
   --ctms-radius-round: 50%;
   
-  --ctms-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
-  --ctms-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
-  --ctms-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
-  --ctms-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
+  --ctms-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
+  --ctms-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
+  --ctms-shadow-md: 0 12px 26px rgba(15, 23, 42, 0.08);
+  --ctms-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.1);
   
   /* 动画 */
-  --ctms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  --ctms-transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Element Plus 主色适配 */
+  --el-color-primary: var(--ctms-primary);
+  --el-color-primary-light-3: #9bb1c2;
+  --el-color-primary-light-5: #c0cdd7;
+  --el-color-primary-light-7: #dde5ec;
+  --el-color-primary-light-8: #eef2f6;
+  --el-color-primary-dark-2: #2b4356;
+  --el-border-radius-base: var(--ctms-radius);
+  --el-border-color: var(--ctms-border-color);
+  --el-text-color-primary: var(--ctms-text-main);
+  --el-text-color-regular: var(--ctms-text-regular);
 }
 
 /* 现代滚动条 */
@@ -72,8 +87,8 @@
 /* 全局重置 */
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  background-color: var(--ctms-bg-base);
+  font-family: "Manrope", "Segoe UI", sans-serif;
+  background: var(--ctms-bg-base);
   color: var(--ctms-text-main);
   -webkit-font-smoothing: antialiased;
 }
@@ -83,8 +98,8 @@ body {
 /* 按钮美化 */
 .el-button {
   border-radius: var(--ctms-radius);
-  font-weight: 500;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  font-weight: 600;
+  transition: var(--ctms-transition);
 }
 
 .el-button--primary {
@@ -97,11 +112,50 @@ body {
   border-color: var(--ctms-primary-hover);
 }
 
+.el-button--default {
+  background-color: #fff;
+  border-color: var(--ctms-border-color);
+  color: var(--ctms-text-regular);
+}
+
+.el-button--default:hover {
+  border-color: var(--ctms-border-color-hover);
+  color: var(--ctms-text-main);
+}
+
+.el-button--danger.is-plain {
+  color: var(--ctms-danger);
+  border-color: rgba(194, 75, 75, 0.4);
+  background-color: rgba(194, 75, 75, 0.04);
+}
+
+.el-button--default,
+.el-button--primary,
+.el-button--danger,
+.el-button--success,
+.el-button--warning {
+  height: 34px;
+  padding: 0 14px;
+  font-size: 13px;
+}
+
+.el-button--small {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+
+.el-button--large {
+  height: 40px;
+  padding: 0 18px;
+  font-size: 14px;
+}
+
 /* 卡片美化 */
 .el-card {
-  border: none;
-  box-shadow: var(--ctms-shadow-sm) !important;
-  border-radius: var(--ctms-radius);
+  border: 1px solid var(--ctms-border-color);
+  box-shadow: none !important;
+  border-radius: var(--ctms-radius-lg);
   margin-bottom: var(--ctms-spacing-md);
 }
 
@@ -122,18 +176,18 @@ body {
 }
 
 .el-table th.el-table__cell {
-  background-color: #fafafa;
+  background-color: #f6f7f9;
   color: var(--ctms-text-main);
   font-weight: 600;
-  height: 48px;
+  height: 44px;
 }
 
 .el-table td.el-table__cell {
-  padding: 12px 0; /* 增加行高 */
+  padding: 10px 0;
 }
 
 .el-table--enable-row-hover .el-table__row:hover > td.el-table__cell {
-  background-color: var(--ctms-primary-light);
+  background-color: #f2f5f8;
 }
 
 /* 表单美化 */
@@ -146,40 +200,162 @@ body {
   border-radius: var(--ctms-radius);
 }
 
+.el-input__wrapper {
+  border-radius: var(--ctms-radius);
+  background-color: #ffffff;
+  min-height: 34px;
+}
+
+.el-select .el-input__wrapper {
+  background-color: #ffffff;
+}
+
+.el-input--small .el-input__wrapper,
+.el-select--small .el-input__wrapper {
+  min-height: 30px;
+}
+
+.el-input--large .el-input__wrapper,
+.el-select--large .el-input__wrapper {
+  min-height: 40px;
+}
+
+.el-form-item {
+  margin-bottom: 16px;
+}
+
+.ctms-form--dense .el-form-item {
+  margin-bottom: 12px;
+}
+
+.el-form-item__error {
+  color: #b45309;
+  font-size: 12px;
+}
+
 /* 标签美化 */
 .el-tag {
-  border-radius: 2px;
+  border-radius: 999px;
   border: none;
 }
 
 .el-tag--info { background-color: #f5f5f5; color: var(--ctms-text-secondary); }
-.el-tag--success { background-color: #f6ffed; color: var(--ctms-success); border: 1px solid #b7eb8f; }
-.el-tag--warning { background-color: #fffbe6; color: var(--ctms-warning); border: 1px solid #ffe58f; }
-.el-tag--danger { background-color: #fff1f0; color: var(--ctms-danger); border: 1px solid #ffa39e; }
+.el-tag--success { background-color: rgba(63, 143, 107, 0.12); color: var(--ctms-success); border: 1px solid rgba(63, 143, 107, 0.2); }
+.el-tag--warning { background-color: rgba(197, 139, 42, 0.12); color: var(--ctms-warning); border: 1px solid rgba(197, 139, 42, 0.2); }
+.el-tag--danger { background-color: rgba(194, 75, 75, 0.12); color: var(--ctms-danger); border: 1px solid rgba(194, 75, 75, 0.2); }
 
-/* 列表整合工具栏 (Table Toolbar) */
-.ctms-table-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  gap: 16px;
-  flex-wrap: wrap;
+.el-alert {
+  border: 1px solid var(--ctms-border-color);
+  background-color: #ffffff;
 }
 
-.ctms-filter-group {
+.el-alert__title {
+  font-size: 13px;
+  color: var(--ctms-text-regular);
+}
+
+.el-alert--warning .el-alert__icon {
+  color: var(--ctms-warning);
+}
+
+.el-alert--success .el-alert__icon {
+  color: var(--ctms-success);
+}
+
+.el-alert--error .el-alert__icon {
+  color: var(--ctms-danger);
+}
+
+.el-button.is-disabled,
+.el-input.is-disabled .el-input__wrapper,
+.el-select.is-disabled .el-input__wrapper {
+  opacity: 0.6;
+}
+
+.el-empty__description {
+  color: var(--ctms-text-secondary);
+}
+
+.el-skeleton__item {
+  background: linear-gradient(90deg, #f2f3f5 25%, #eceef1 37%, #f2f3f5 63%);
+}
+
+/* 页面结构与筛选区域 */
+.ctms-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ctms-spacing-lg);
+}
+
+.ctms-page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 16px;
+}
+
+.ctms-page-title {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
+  margin: 0;
+}
+
+
+.ctms-page-actions {
   display: flex;
-  gap: 12px;
   align-items: center;
+  gap: 12px;
+}
+
+.ctms-filter-card {
+  margin-bottom: 0;
+}
+
+.ctms-filter-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 20px;
   flex-wrap: wrap;
 }
 
 .ctms-filter-item {
-  width: 160px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 160px;
 }
 
-.ctms-action-group {
-  display: flex;
-  gap: 12px;
-  align-items: center;
+.ctms-filter-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ctms-text-regular);
+}
+
+.ctms-filter-spacer {
+  flex: 1;
+}
+
+.ctms-table-card {
+  margin-bottom: 0;
+}
+
+.ctms-table .el-table__row {
+  cursor: pointer;
+}
+
+.ctms-pagination {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ctms-section-card {
+  border: 1px solid var(--ctms-border-color);
+}
+
+.ctms-section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ctms-text-main);
 }
diff --git a/frontend/src/views/AeDetail.vue b/frontend/src/views/AeDetail.vue
index 822510cf..8aacdbf6 100644
--- a/frontend/src/views/AeDetail.vue
+++ b/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>
diff --git a/frontend/src/views/Aes.vue b/frontend/src/views/Aes.vue
index 58f7d325..129ef62c 100644
--- a/frontend/src/views/Aes.vue
+++ b/frontend/src/views/Aes.vue
@@ -1,21 +1,38 @@
 <template>
-  <div class="page">
-    <el-card class="mb-12">
-      <div class="filters">
-        <el-select v-model="filters.status" placeholder="状态" clearable @change="loadAes">
-          <el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
-        </el-select>
-        <el-select v-model="filters.seriousness" placeholder="严重性" clearable @change="loadAes">
-          <el-option v-for="s in seriousnessOptions" :key="s" :label="seriousnessLabel(s)" :value="s" />
-        </el-select>
-        <el-switch v-model="filters.overdue" active-text="仅逾期" @change="loadAes" />
-        <div class="spacer" />
+  <div class="ctms-page">
+    <div class="ctms-page-header">
+      <div>
+        <h1 class="ctms-page-title">不良事件</h1>
+      </div>
+      <div class="ctms-page-actions">
         <el-button type="primary" v-if="canCreate" @click="showForm = true">新建不良事件</el-button>
       </div>
+    </div>
+
+    <el-card class="ctms-filter-card">
+      <div class="ctms-filter-row">
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">状态</span>
+          <el-select v-model="filters.status" placeholder="全部" clearable @change="loadAes">
+            <el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
+          </el-select>
+        </div>
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">严重性</span>
+          <el-select v-model="filters.seriousness" placeholder="全部" clearable @change="loadAes">
+            <el-option v-for="s in seriousnessOptions" :key="s" :label="seriousnessLabel(s)" :value="s" />
+          </el-select>
+        </div>
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">仅逾期</span>
+          <el-switch v-model="filters.overdue" @change="loadAes" />
+        </div>
+        <div class="ctms-filter-spacer" />
+      </div>
     </el-card>
 
-    <el-card>
-      <el-table :data="aes" v-loading="loading" style="width: 100%" @row-click="goDetail">
+    <el-card class="ctms-table-card">
+      <el-table :data="aes" v-loading="loading" class="ctms-table" style="width: 100%" @row-click="goDetail">
         <el-table-column prop="term" label="事件" />
         <el-table-column label="受试者" width="200">
           <template #default="scope">
@@ -34,12 +51,13 @@
             <el-tag :type="scope.row.is_overdue ? 'danger' : 'info'">{{ statusLabel(scope.row.status) }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="140">
+        <el-table-column label="操作" width="120" align="right">
           <template #default="scope">
             <el-button
               v-if="showClose(scope.row)"
               type="danger"
               size="small"
+              link
               @click.stop="onClose(scope.row)"
             >
               关闭 AE
@@ -48,7 +66,7 @@
         </el-table-column>
       </el-table>
       <el-pagination
-        class="pagination"
+        class="ctms-pagination"
         layout="prev, pager, next"
         :page-size="pageSize"
         :current-page="page"
@@ -244,22 +262,4 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.page {
-  padding: 16px;
-}
-.filters {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.spacer {
-  flex: 1;
-}
-.pagination {
-  margin-top: 12px;
-  text-align: right;
-}
-.mb-12 {
-  margin-bottom: 12px;
-}
 </style>
diff --git a/frontend/src/views/DataQueries.vue b/frontend/src/views/DataQueries.vue
index 3de2c5d1..ba4ad230 100644
--- a/frontend/src/views/DataQueries.vue
+++ b/frontend/src/views/DataQueries.vue
@@ -1,19 +1,36 @@
 <template>
-  <div class="page">
-    <el-card class="mb-12">
-      <div class="filters">
-        <el-select v-model="filters.status" placeholder="状态" clearable @change="loadQueries">
-          <el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
-        </el-select>
-        <el-switch v-model="filters.overdue" active-text="仅逾期" @change="loadQueries" />
-        <el-input v-model="filters.assigned_to" placeholder="负责人" style="width: 180px" @change="loadQueries" />
-        <div class="spacer" />
+  <div class="ctms-page">
+    <div class="ctms-page-header">
+      <div>
+        <h1 class="ctms-page-title">数据问题</h1>
+      </div>
+      <div class="ctms-page-actions">
         <el-button type="primary" v-if="canEdit" @click="showForm = true">新建数据问题</el-button>
       </div>
+    </div>
+
+    <el-card class="ctms-filter-card">
+      <div class="ctms-filter-row">
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">状态</span>
+          <el-select v-model="filters.status" placeholder="全部" clearable @change="loadQueries">
+            <el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
+          </el-select>
+        </div>
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">负责人</span>
+          <el-input v-model="filters.assigned_to" placeholder="输入邮箱或姓名" @change="loadQueries" />
+        </div>
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">仅逾期</span>
+          <el-switch v-model="filters.overdue" @change="loadQueries" />
+        </div>
+        <div class="ctms-filter-spacer" />
+      </div>
     </el-card>
 
-    <el-card>
-      <el-table :data="queries" v-loading="loading" style="width: 100%" @row-click="goDetail">
+    <el-card class="ctms-table-card">
+      <el-table :data="queries" v-loading="loading" class="ctms-table" style="width: 100%" @row-click="goDetail">
         <el-table-column prop="title" label="标题" />
         <el-table-column label="受试者">
           <template #default="scope">
@@ -36,7 +53,7 @@
             <el-tag :type="scope.row.is_overdue ? 'danger' : 'info'">{{ statusLabel(scope.row.status) }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="140">
+        <el-table-column label="操作" width="120" align="right">
           <template #default="scope">
             <el-button
               v-if="showResolve(scope.row)"
@@ -50,7 +67,7 @@
         </el-table-column>
       </el-table>
       <el-pagination
-        class="pagination"
+        class="ctms-pagination"
         layout="prev, pager, next"
         :page-size="pageSize"
         :current-page="page"
@@ -264,22 +281,4 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.page {
-  padding: 16px;
-}
-.filters {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.spacer {
-  flex: 1;
-}
-.pagination {
-  margin-top: 12px;
-  text-align: right;
-}
-.mb-12 {
-  margin-bottom: 12px;
-}
 </style>
diff --git a/frontend/src/views/DataQueryDetail.vue b/frontend/src/views/DataQueryDetail.vue
index 1e116300..b609f803 100644
--- a/frontend/src/views/DataQueryDetail.vue
+++ b/frontend/src/views/DataQueryDetail.vue
@@ -1,14 +1,21 @@
 <template>
-  <div class="page" v-if="query">
-    <el-card class="mb-12">
-      <div class="header">
-        <div>
-          <h3>数据问题详情</h3>
-          <p>{{ query.title }}</p>
-        </div>
+  <div class="ctms-page" v-if="query">
+    <div class="ctms-page-header">
+      <div>
+        <h1 class="ctms-page-title">数据问题</h1>
+      </div>
+      <div class="ctms-page-actions">
         <el-button v-if="canEdit" type="primary" size="small" @click="nextStatus">流转状态</el-button>
       </div>
-      <el-descriptions :column="2" border>
+    </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="受试者">
           {{ subjectMap[query.subject_id] || query.subject_id || "-" }}
         </el-descriptions-item>
@@ -16,28 +23,35 @@
         <el-descriptions-item label="优先级">{{ query.priority }}</el-descriptions-item>
         <el-descriptions-item label="截止日期">{{ query.due_date }}</el-descriptions-item>
         <el-descriptions-item label="状态">
-          <el-tag :type="query.is_overdue ? 'danger' : 'info'">{{ query.status }}</el-tag>
+          <el-tag :type="query.is_overdue ? 'danger' : 'info'" effect="plain">{{ query.status }}</el-tag>
         </el-descriptions-item>
         <el-descriptions-item label="描述">{{ query.description }}</el-descriptions-item>
       </el-descriptions>
     </el-card>
 
-    <el-tabs>
-      <el-tab-pane label="评论">
-        <CommentList :study-id="studyId" entity-type="data-queries" :entity-id="query.id" :can-comment="true" />
-      </el-tab-pane>
-      <el-tab-pane label="附件">
-        <AttachmentList
-          :study-id="studyId"
-          entity-type="data-queries"
-          :entity-id="query.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="data-queries" :entity-id="query.id" :can-comment="true" />
+        </el-tab-pane>
+        <el-tab-pane label="附件">
+          <AttachmentList
+            :study-id="studyId"
+            entity-type="data-queries"
+            :entity-id="query.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>
 
@@ -52,6 +66,7 @@ import { useAuthStore } from "../store/auth";
 import CommentList from "../components/CommentList.vue";
 import AttachmentList from "../components/attachments/AttachmentList.vue";
 import { usePermission } from "../utils/permission";
+import StateLoading from "../components/StateLoading.vue";
 
 const route = useRoute();
 const study = useStudyStore();
@@ -122,15 +137,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>
diff --git a/frontend/src/views/IssueDetail.vue b/frontend/src/views/IssueDetail.vue
index 301c4374..3c5a9640 100644
--- a/frontend/src/views/IssueDetail.vue
+++ b/frontend/src/views/IssueDetail.vue
@@ -1,16 +1,23 @@
 <template>
-  <div class="page" v-if="issue">
-    <el-card class="mb-12">
-      <div class="header">
-        <div>
-          <h3>风险与问题</h3>
-          <p>{{ issue.title }}</p>
-        </div>
+  <div class="ctms-page" v-if="issue">
+    <div class="ctms-page-header">
+      <div>
+        <h1 class="ctms-page-title">风险与问题</h1>
+      </div>
+      <div class="ctms-page-actions">
         <PermissionAction action="issue.close">
-          <el-button type="danger" size="small" @click="closeIssue">关闭</el-button>
+          <el-button type="danger" size="small" link @click="closeIssue">关闭</el-button>
         </PermissionAction>
       </div>
-      <el-descriptions :column="2" border>
+    </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="类别">{{ issue.category }}</el-descriptions-item>
         <el-descriptions-item label="等级">{{ issue.level }}</el-descriptions-item>
         <el-descriptions-item label="截止日期">{{ issue.due_date }}</el-descriptions-item>
@@ -19,22 +26,29 @@
       </el-descriptions>
     </el-card>
 
-    <el-tabs>
-      <el-tab-pane label="评论">
-        <CommentList :study-id="studyId" entity-type="issues" :entity-id="issue.id" :can-comment="true" />
-      </el-tab-pane>
-      <el-tab-pane label="附件">
-        <AttachmentList
-          :study-id="studyId"
-          entity-type="issues"
-          :entity-id="issue.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="issues" :entity-id="issue.id" :can-comment="true" />
+        </el-tab-pane>
+        <el-tab-pane label="附件">
+          <AttachmentList
+            :study-id="studyId"
+            entity-type="issues"
+            :entity-id="issue.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>
 
@@ -49,6 +63,7 @@ import PermissionAction from "../components/PermissionAction.vue";
 import { usePermission } from "../utils/permission";
 import CommentList from "../components/CommentList.vue";
 import AttachmentList from "../components/attachments/AttachmentList.vue";
+import StateLoading from "../components/StateLoading.vue";
 
 const route = useRoute();
 const study = useStudyStore();
@@ -97,15 +112,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>
diff --git a/frontend/src/views/Issues.vue b/frontend/src/views/Issues.vue
index d9d4bd15..f6c0fd22 100644
--- a/frontend/src/views/Issues.vue
+++ b/frontend/src/views/Issues.vue
@@ -1,24 +1,44 @@
 <template>
-  <div class="page">
-    <el-card class="mb-12">
-      <div class="filters">
-        <el-select v-model="filters.status" placeholder="状态" clearable @change="loadIssues">
-          <el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
-        </el-select>
-        <el-select v-model="filters.level" placeholder="等级" clearable @change="loadIssues">
-          <el-option v-for="l in levels" :key="l" :label="levelLabel(l)" :value="l" />
-        </el-select>
-        <el-select v-model="filters.category" placeholder="类别" clearable @change="loadIssues">
-          <el-option v-for="c in categories" :key="c" :label="categoryLabel(c)" :value="c" />
-        </el-select>
-        <el-switch v-model="filters.overdue" active-text="仅逾期" @change="loadIssues" />
-        <div class="spacer" />
+  <div class="ctms-page">
+    <div class="ctms-page-header">
+      <div>
+        <h1 class="ctms-page-title">风险与问题</h1>
+      </div>
+      <div class="ctms-page-actions">
         <el-button type="primary" v-if="canCreate" @click="showForm = true">新建风险/问题</el-button>
       </div>
+    </div>
+
+    <el-card class="ctms-filter-card">
+      <div class="ctms-filter-row">
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">状态</span>
+          <el-select v-model="filters.status" placeholder="全部" clearable @change="loadIssues">
+            <el-option v-for="s in statuses" :key="s" :label="statusLabel(s)" :value="s" />
+          </el-select>
+        </div>
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">等级</span>
+          <el-select v-model="filters.level" placeholder="全部" clearable @change="loadIssues">
+            <el-option v-for="l in levels" :key="l" :label="levelLabel(l)" :value="l" />
+          </el-select>
+        </div>
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">类别</span>
+          <el-select v-model="filters.category" placeholder="全部" clearable @change="loadIssues">
+            <el-option v-for="c in categories" :key="c" :label="categoryLabel(c)" :value="c" />
+          </el-select>
+        </div>
+        <div class="ctms-filter-item">
+          <span class="ctms-filter-label">仅逾期</span>
+          <el-switch v-model="filters.overdue" @change="loadIssues" />
+        </div>
+        <div class="ctms-filter-spacer" />
+      </div>
     </el-card>
 
-    <el-card>
-      <el-table :data="issues" v-loading="loading" style="width: 100%" @row-click="goDetail">
+    <el-card class="ctms-table-card">
+      <el-table :data="issues" v-loading="loading" class="ctms-table" style="width: 100%" @row-click="goDetail">
         <el-table-column prop="title" label="标题" />
         <el-table-column prop="level" label="等级" width="120">
           <template #default="scope">
@@ -38,7 +58,7 @@
         </el-table-column>
       </el-table>
       <el-pagination
-        class="pagination"
+        class="ctms-pagination"
         layout="prev, pager, next"
         :page-size="pageSize"
         :current-page="page"
@@ -159,22 +179,4 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.page {
-  padding: 16px;
-}
-.filters {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.spacer {
-  flex: 1;
-}
-.pagination {
-  margin-top: 12px;
-  text-align: right;
-}
-.mb-12 {
-  margin-bottom: 12px;
-}
 </style>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 649cf9ea..66244480 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -1,12 +1,5 @@
 <template>
   <div class="login-container">
-    <!-- 动态背景元素 -->
-    <div class="bg-animate">
-      <div class="circle circle-1"></div>
-      <div class="circle circle-2"></div>
-      <div class="circle circle-3"></div>
-    </div>
-    
     <div class="login-content">
       <div class="login-brand">
         <h1 class="brand-title">CTMS</h1>
@@ -145,62 +138,11 @@ const onSubmit = async () => {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  background-color: #f8fafc;
+  background-color: var(--ctms-bg-base);
   position: relative;
   overflow: hidden;
 }
 
-/* 动态背景 */
-.bg-animate {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-}
-
-.circle {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  z-index: 0;
-  opacity: 0.4;
-  animation: move 20s infinite alternate;
-}
-
-.circle-1 {
-  width: 500px;
-  height: 500px;
-  background: #3b82f6;
-  top: -100px;
-  left: -100px;
-}
-
-.circle-2 {
-  width: 400px;
-  height: 400px;
-  background: #10b981;
-  bottom: -50px;
-  right: -50px;
-  animation-delay: -5s;
-}
-
-.circle-3 {
-  width: 300px;
-  height: 300px;
-  background: #6366f1;
-  top: 40%;
-  left: 30%;
-  animation-delay: -10s;
-}
-
-@keyframes move {
-  from { transform: translate(0, 0) scale(1); }
-  to { transform: translate(50px, 100px) scale(1.1); }
-}
-
 .login-content {
   width: 420px;
   z-index: 1;
@@ -214,17 +156,15 @@ const onSubmit = async () => {
 
 .brand-title {
   font-size: 48px;
-  font-weight: 800;
-  background: linear-gradient(135deg, var(--ctms-primary) 0%, #6366f1 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  font-weight: 700;
+  color: var(--ctms-text-main);
   letter-spacing: -1px;
   margin: 0;
 }
 
 .brand-subtitle {
   font-size: 14px;
-  color: #64748b;
+  color: var(--ctms-text-secondary);
   margin-top: 8px;
   letter-spacing: 2px;
   text-transform: uppercase;
@@ -232,11 +172,10 @@ const onSubmit = async () => {
 }
 
 .login-card {
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(20px);
-  border-radius: 20px;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--ctms-border-color);
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: none;
   padding: 12px;
 }
 
@@ -248,34 +187,34 @@ const onSubmit = async () => {
 .form-title {
   font-size: 24px;
   font-weight: 700;
-  color: #1e293b;
+  color: var(--ctms-text-main);
   margin: 0;
 }
 
 .form-desc {
   font-size: 14px;
-  color: #94a3b8;
+  color: var(--ctms-text-secondary);
   margin-top: 8px;
 }
 
 .elegant-form :deep(.el-form-item__label) {
   font-size: 13px;
   font-weight: 600;
-  color: #475569;
+  color: var(--ctms-text-regular);
   padding-bottom: 8px;
 }
 
 .elegant-form :deep(.el-input__wrapper) {
-  background-color: #f8fafc;
-  box-shadow: 0 0 0 1px #e2e8f0 inset;
+  background-color: #ffffff;
+  box-shadow: 0 0 0 1px var(--ctms-border-color) inset;
   padding: 8px 12px;
   border-radius: 10px;
   transition: var(--ctms-transition);
 }
 
 .elegant-form :deep(.el-input__wrapper.is-focus) {
-  box-shadow: 0 0 0 1px var(--ctms-primary) inset, 0 0 0 4px rgba(47, 84, 235, 0.1) !important;
-  background-color: #fff;
+  box-shadow: 0 0 0 1px var(--ctms-primary) inset !important;
+  background-color: #ffffff;
 }
 
 .form-options {
@@ -298,22 +237,21 @@ const onSubmit = async () => {
   font-size: 16px;
   font-weight: 600;
   border-radius: 12px;
-  background: linear-gradient(135deg, var(--ctms-primary) 0%, #4f46e5 100%);
+  background: var(--ctms-primary);
   border: none;
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+  box-shadow: none;
   transition: var(--ctms-transition);
 }
 
 .submit-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
+  transform: translateY(-1px);
 }
 
 .register-prompt {
   margin-top: 24px;
   text-align: center;
   font-size: 14px;
-  color: #64748b;
+  color: var(--ctms-text-secondary);
 }
 
 .register-prompt a {
@@ -330,6 +268,6 @@ const onSubmit = async () => {
 
 .login-footer p {
   font-size: 12px;
-  color: #94a3b8;
+  color: var(--ctms-text-disabled);
 }
 </style>
diff --git a/frontend/src/views/MilestoneDetail.vue b/frontend/src/views/MilestoneDetail.vue
index 068c5231..53ecacdd 100644
--- a/frontend/src/views/MilestoneDetail.vue
+++ b/frontend/src/views/MilestoneDetail.vue
@@ -1,13 +1,18 @@
 <template>
-  <div class="page" v-if="milestone">
-    <el-card class="mb-12">
-      <div class="header">
-        <div>
-          <h3>节点详情</h3>
-          <p class="subtitle">{{ milestone.name }}</p>
-        </div>
+  <div class="ctms-page" v-if="milestone">
+    <div class="ctms-page-header">
+      <div>
+        <h1 class="ctms-page-title">节点详情</h1>
       </div>
-      <el-descriptions :column="2" border>
+    </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="名称">{{ milestone.name || "—" }}</el-descriptions-item>
         <el-descriptions-item label="类型">{{ typeLabel(milestone.type) }}</el-descriptions-item>
         <el-descriptions-item label="中心">{{ siteName(milestone) }}</el-descriptions-item>
@@ -15,38 +20,45 @@
         <el-descriptions-item label="计划日期">{{ displayDate(milestone.planned_date) }}</el-descriptions-item>
         <el-descriptions-item label="实际日期">{{ displayDate(milestone.actual_date) }}</el-descriptions-item>
         <el-descriptions-item label="当前状态">
-          <el-tag :type="statusColor(milestone.status)">{{ statusLabel(milestone.status) }}</el-tag>
+          <el-tag :type="statusColor(milestone.status)" effect="plain">{{ statusLabel(milestone.status) }}</el-tag>
         </el-descriptions-item>
         <el-descriptions-item label="备注" :span="2">{{ milestone.notes || "—" }}</el-descriptions-item>
       </el-descriptions>
     </el-card>
 
-    <el-tabs>
-      <el-tab-pane label="评论">
-        <CommentList
-          v-if="milestone.id"
-          :study-id="studyId"
-          entity-type="milestones"
-          :entity-id="milestone.id"
-          :can-comment="true"
-        />
-      </el-tab-pane>
-      <el-tab-pane label="附件">
-        <div class="tip">
-          <div>用于上传与本节点相关的证明文件，如伦理批件、会议纪要等，仅用于证明该节点的完成情况。</div>
-          <div class="sub-tip">项目通用文件请在【项目详情】查看，中心级文件请在【中心管理】查看。</div>
+    <el-card class="ctms-section-card">
+      <template #header>
+        <div>
+          <div class="ctms-section-title">协作记录</div>
         </div>
-        <AttachmentList
-          v-if="milestone.id"
-          :study-id="studyId"
-          entity-type="ethics_node"
-          :entity-id="milestone.id"
-        />
-      </el-tab-pane>
-    </el-tabs>
+      </template>
+      <el-tabs class="detail-tabs">
+        <el-tab-pane label="评论">
+          <CommentList
+            v-if="milestone.id"
+            :study-id="studyId"
+            entity-type="milestones"
+            :entity-id="milestone.id"
+            :can-comment="true"
+          />
+        </el-tab-pane>
+        <el-tab-pane label="附件">
+          <div class="tip">
+            <div>用于上传与本节点相关的证明文件，如伦理批件、会议纪要等，仅用于证明该节点的完成情况。</div>
+            <div class="sub-tip">项目通用文件请在【项目详情】查看，中心级文件请在【中心管理】查看。</div>
+          </div>
+          <AttachmentList
+            v-if="milestone.id"
+            :study-id="studyId"
+            entity-type="ethics_node"
+            :entity-id="milestone.id"
+          />
+        </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>
 
@@ -61,6 +73,7 @@ import { useStudyStore } from "../store/study";
 import { useAuthStore } from "../store/auth";
 import CommentList from "../components/CommentList.vue";
 import AttachmentList from "../components/attachments/AttachmentList.vue";
+import StateLoading from "../components/StateLoading.vue";
 import {
   getMilestoneStatusColor,
   getMilestoneStatusLabel,
@@ -143,28 +156,22 @@ 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;
-}
-.subtitle {
-  margin: 4px 0 0;
-  color: #666;
-}
-.mb-12 {
-  margin-bottom: 12px;
+
+.detail-tabs {
+  margin-top: -8px;
 }
+
 .tip {
   margin-bottom: 8px;
-  color: #666;
+  color: var(--ctms-text-regular);
   line-height: 1.4;
 }
+
 .sub-tip {
-  color: #888;
+  color: var(--ctms-text-secondary);
   font-size: 12px;
 }
 </style>
diff --git a/frontend/src/views/StudyHome.vue b/frontend/src/views/StudyHome.vue
index e4e4523d..a27b161f 100644
--- a/frontend/src/views/StudyHome.vue
+++ b/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 {
diff --git a/frontend/src/views/SubjectDetail.vue b/frontend/src/views/SubjectDetail.vue
index 0924c306..884cbd83 100644
--- a/frontend/src/views/SubjectDetail.vue
+++ b/frontend/src/views/SubjectDetail.vue
@@ -8,11 +8,12 @@
           <div class="brand-info">
             <h1 class="subject-no">{{ subject.subject_no }}</h1>
             <p class="site-info">{{ siteName(subject.site_id) }}</p>
+            <p class="meta-info">受试者详情与状态管理</p>
           </div>
         </div>
         <div class="subject-status">
           <span class="status-label">当前状态</span>
-          <el-tag :type="stateColor(subject.status)" effect="dark" class="status-tag">
+          <el-tag :type="stateColor(subject.status)" effect="plain" class="status-tag">
             {{ stateLabel(subject.status) }}
           </el-tag>
         </div>
@@ -22,8 +23,9 @@
         <template v-for="action in availableActions" :key="action.key">
           <PermissionAction :action="permissionMap[action.key]">
             <el-button
-              :type="action.danger ? 'danger' : 'primary'"
-              :plain="!action.primary"
+              :type="action.danger ? 'danger' : (action.primary ? 'primary' : 'default')"
+              :plain="!action.primary && !action.danger"
+              :link="action.danger"
               size="default"
               class="action-btn"
               @click="onAction(action)"
@@ -42,6 +44,7 @@
           <el-icon><Calendar /></el-icon>
           <span>访视记录</span>
         </div>
+        <div class="section-desc">按访视节点维护受试者随访数据</div>
       </div>
       <div class="section-body">
         <VisitTable :visits="visits" :subject-id="subject.id" :can-edit="canVisitEdit" :on-refresh="loadVisits" />
@@ -50,7 +53,7 @@
   </div>
   
   <div v-else class="loading-state">
-    <el-skeleton :rows="5" animated />
+    <StateLoading :rows="5" />
   </div>
 </template>
 
@@ -67,6 +70,7 @@ import { useAuthStore } from "../store/auth";
 import PermissionAction from "../components/PermissionAction.vue";
 import { usePermission } from "../utils/permission";
 import VisitTable from "../components/VisitTable.vue";
+import StateLoading from "../components/StateLoading.vue";
 import { getAvailableActions, subjectMachine } from "../state-machine";
 import type { ActionConfig } from "../state-machine";
 import { statusDict, getDictLabel, getDictColor } from "../dictionaries";
@@ -214,7 +218,7 @@ onMounted(async () => {
   background-color: #fff;
   border-radius: var(--ctms-radius);
   padding: 24px;
-  box-shadow: var(--ctms-shadow-sm);
+  border: 1px solid var(--ctms-border-color);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
@@ -232,31 +236,37 @@ onMounted(async () => {
 }
 
 .brand-avatar {
-  width: 56px;
-  height: 56px;
-  background-color: var(--ctms-primary-light);
-  color: var(--ctms-primary);
-  border-radius: 12px;
+  width: 48px;
+  height: 48px;
+  background-color: #f1f5f9;
+  color: var(--ctms-text-main);
+  border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 24px;
-  font-weight: 700;
+  font-size: 20px;
+  font-weight: 600;
 }
 
 .subject-no {
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 600;
   color: var(--ctms-text-main);
   margin: 0;
 }
 
 .site-info {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--ctms-text-secondary);
   margin-top: 4px;
 }
 
+.meta-info {
+  font-size: 12px;
+  color: var(--ctms-text-disabled);
+  margin-top: 4px;
+}
+
 .subject-status {
   display: flex;
   flex-direction: column;
@@ -264,7 +274,7 @@ onMounted(async () => {
 }
 
 .status-label {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--ctms-text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.5px;
@@ -287,7 +297,7 @@ onMounted(async () => {
 .info-section {
   background-color: #fff;
   border-radius: var(--ctms-radius);
-  box-shadow: var(--ctms-shadow-sm);
+  border: 1px solid var(--ctms-border-color);
   overflow: hidden;
 }
 
@@ -303,7 +313,13 @@ onMounted(async () => {
   gap: 8px;
   font-weight: 600;
   color: var(--ctms-text-main);
-  font-size: 16px;
+  font-size: 15px;
+}
+
+.section-desc {
+  font-size: 12px;
+  color: var(--ctms-text-secondary);
+  margin-top: 6px;
 }
 
 .section-body {
@@ -314,5 +330,6 @@ onMounted(async () => {
   padding: 40px;
   background-color: #fff;
   border-radius: var(--ctms-radius);
+  border: 1px solid var(--ctms-border-color);
 }
 </style>
diff --git a/frontend/src/views/Subjects.vue b/frontend/src/views/Subjects.vue
index 0078f397..c3588473 100644
--- a/frontend/src/views/Subjects.vue
+++ b/frontend/src/views/Subjects.vue
@@ -68,17 +68,14 @@
         </el-table-column>
         <el-table-column prop="screening_date" label="筛选日期" width="140" />
         <el-table-column prop="enrollment_date" label="入组日期" width="140" />
-        <el-table-column label="操作" width="100" fixed="right">
+        <el-table-column label="操作" width="100" fixed="right" align="right">
           <template #default>
             <el-button link type="primary">详细资料</el-button>
           </template>
         </el-table-column>
         
         <template #empty>
-          <div class="empty-state">
-            <el-icon class="empty-icon"><Document /></el-icon>
-            <p>暂无符合条件的受试者</p>
-          </div>
+          <StateEmpty description="暂无符合条件的受试者" />
         </template>
       </el-table>
       
@@ -102,12 +99,13 @@
 import { computed, onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
-import { Plus, Document } from "@element-plus/icons-vue";
+import { Plus } from "@element-plus/icons-vue";
 import { fetchSubjects } from "../api/subjects";
 import { fetchSites } from "../api/sites";
 import { useStudyStore } from "../store/study";
 import { useAuthStore } from "../store/auth";
 import SubjectForm from "../components/SubjectForm.vue";
+import StateEmpty from "../components/StateEmpty.vue";
 
 const study = useStudyStore();
 const auth = useAuthStore();
@@ -228,18 +226,18 @@ const siteName = (id: string) => siteMap.value[id] || id || "-";
 .page-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-end;
 }
 
 .page-title {
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 600;
   color: var(--ctms-text-main);
   margin: 0;
 }
 
 .page-subtitle {
-  font-size: 14px;
+  font-size: 13px;
   color: var(--ctms-text-secondary);
   margin-top: 4px;
 }
@@ -252,11 +250,12 @@ const siteName = (id: string) => siteMap.value[id] || id || "-";
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  gap: 24px;
 }
 
 .filter-items {
   display: flex;
-  gap: 24px;
+  gap: 20px;
 }
 
 .filter-item {
@@ -266,8 +265,8 @@ const siteName = (id: string) => siteMap.value[id] || id || "-";
 }
 
 .filter-label {
-  font-size: 13px;
-  font-weight: 500;
+  font-size: 12px;
+  font-weight: 600;
   color: var(--ctms-text-regular);
 }
 
@@ -281,25 +280,15 @@ const siteName = (id: string) => siteMap.value[id] || id || "-";
 
 .subject-no {
   font-weight: 600;
-  color: var(--ctms-primary);
+  color: var(--ctms-text-main);
 }
 
 .pagination-container {
-  margin-top: 24px;
+  margin-top: 20px;
   display: flex;
   justify-content: flex-end;
 }
 
-.empty-state {
-  padding: 40px 0;
-  color: var(--ctms-text-disabled);
-}
-
-.empty-icon {
-  font-size: 48px;
-  margin-bottom: 12px;
-}
-
 :deep(.el-table__row) {
   cursor: pointer;
 }
diff --git a/frontend/src/views/admin/ProjectDetail.vue b/frontend/src/views/admin/ProjectDetail.vue
index 42fdf617..7f3ec528 100644
--- a/frontend/src/views/admin/ProjectDetail.vue
+++ b/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>
diff --git a/frontend/src/views/workbench/components/PersonalTodo.vue b/frontend/src/views/workbench/components/PersonalTodo.vue
index e2c18d00..a4485293 100644
--- a/frontend/src/views/workbench/components/PersonalTodo.vue
+++ b/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 }>();
 
diff --git a/frontend/src/views/workbench/components/SectionCard.vue b/frontend/src/views/workbench/components/SectionCard.vue
index 9f1b5091..26f16ee1 100644
--- a/frontend/src/views/workbench/components/SectionCard.vue
+++ b/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>