From 834b4f1d48263bacb8332ad99f12524d66091293 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Mon, 8 Jun 2026 11:03:34 +0800
Subject: [PATCH] feat(documents): refresh detail pages and attachment cards

---
 backend/app/schemas/document_version.py       |    3 +
 backend/app/services/document_service.py      |   11 +-
 .../components/attachments/AttachmentList.vue |   93 +-
 frontend/src/types/documents.ts               |    6 +
 .../views/documents/DocumentDetail.test.ts    |   47 +
 .../src/views/documents/DocumentDetail.vue    | 1287 ++++++++++-------
 .../src/views/documents/DocumentList.test.ts  |   20 +
 frontend/src/views/documents/DocumentList.vue |  126 +-
 frontend/src/views/drug/ShipmentDetail.vue    |  536 +++++--
 frontend/src/views/fees/ContractFeeDetail.vue |  663 ++++++---
 .../materials/MaterialEquipmentDetail.vue     |  509 ++++++-
 11 files changed, 2372 insertions(+), 929 deletions(-)

diff --git a/backend/app/schemas/document_version.py b/backend/app/schemas/document_version.py
index 6e54c528..7528e996 100644
--- a/backend/app/schemas/document_version.py
+++ b/backend/app/schemas/document_version.py
@@ -5,6 +5,8 @@ from typing import Optional
 
 from pydantic import BaseModel, ConfigDict
 
+from app.schemas.user import UserDisplay
+
 
 class DocumentVersionStatus(str, enum.Enum):
     DRAFT = "DRAFT"
@@ -39,6 +41,7 @@ class DocumentVersionRead(BaseModel):
     mime_type: Optional[str] = None
     change_summary: Optional[str] = None
     created_by: Optional[uuid.UUID] = None
+    created_by_user: Optional[UserDisplay] = None
     submitted_at: Optional[datetime] = None
     approved_at: Optional[datetime] = None
     withdrawn_at: Optional[datetime] = None
diff --git a/backend/app/services/document_service.py b/backend/app/services/document_service.py
index b6cdf5e1..4d8c71ca 100644
--- a/backend/app/services/document_service.py
+++ b/backend/app/services/document_service.py
@@ -77,6 +77,13 @@ def _version_snapshot(version: DocumentVersion) -> dict:
     }
 
 
+def _version_read(version: DocumentVersion, users_by_id: dict[uuid.UUID, object] | None = None) -> DocumentVersionRead:
+    creator = users_by_id.get(version.created_by) if users_by_id and version.created_by else None
+    return DocumentVersionRead.model_validate(version).model_copy(
+        update={"created_by_user": UserDisplay.model_validate(creator) if creator else None}
+    )
+
+
 async def _ensure_study_access(db: AsyncSession, trial_id: uuid.UUID, current_user, action: str):
     study = await study_crud.get(db, trial_id)
     if not study:
@@ -242,6 +249,8 @@ async def get_document_detail(
         owner_obj = await user_crud.get_by_id(db, doc.owner_id)
         if owner_obj:
             owner = UserDisplay.model_validate(owner_obj)
+    creator_ids = {v.created_by for v in versions if v.created_by}
+    version_creators = await user_crud.get_users_by_ids(db, creator_ids)
     return DocumentDetail(
         id=doc.id,
         trial_id=doc.trial_id,
@@ -257,7 +266,7 @@ async def get_document_detail(
         created_at=doc.created_at,
         updated_at=doc.updated_at,
         owner=owner,
-        version_timeline=[DocumentVersionRead.model_validate(v) for v in versions],
+        version_timeline=[_version_read(v, version_creators) for v in versions],
         distribution_stats=distribution_stats,
     )
 
diff --git a/frontend/src/components/attachments/AttachmentList.vue b/frontend/src/components/attachments/AttachmentList.vue
index aeeedacf..46f6ca42 100644
--- a/frontend/src/components/attachments/AttachmentList.vue
+++ b/frontend/src/components/attachments/AttachmentList.vue
@@ -55,19 +55,28 @@
         </el-table-column>
       </el-table>
     </template>
-    <div v-else class="upload-grid">
-      <div v-for="group in uploadGroups" :key="group.key" class="attachment-upload-card">
-        <div v-if="showUploadCardLabels" class="upload-card-label">{{ group.label }}</div>
+    <div v-else class="upload-grid" :class="{ 'upload-grid--three': uploadCardColumns === 3 }">
+      <div v-for="group in uploadGroups" :key="group.key" class="attachment-upload-item">
         <el-upload
+          class="attachment-card-upload"
           :show-file-list="false"
           multiple
           :disabled="!canUploadGroup(group) || isUploading(group.key)"
           :auto-upload="false"
           :on-change="(file: any) => queuePendingUpload(group.key, file)"
         >
-          <div class="upload-trigger" :class="{ 'is-disabled': !canUploadGroup(group) }">
-            <el-icon class="upload-icon"><Document /></el-icon>
-            <span class="upload-text">点击上传文件</span>
+          <div
+            class="attachment-upload-card"
+            :class="{
+              'is-disabled': !canUploadGroup(group),
+              'attachment-upload-card--centered': centerUploadCardContent,
+            }"
+          >
+            <div v-if="showUploadCardLabels" class="upload-card-label">{{ group.label }}</div>
+            <div class="upload-trigger">
+              <el-icon class="upload-icon"><UploadFilled /></el-icon>
+              <span class="upload-text">{{ group.uploadText || "点击上传文件" }}</span>
+            </div>
           </div>
         </el-upload>
         <div v-if="pendingMap[group.key]?.length" class="pending-list">
@@ -112,7 +121,7 @@
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { Document } from "@element-plus/icons-vue";
+import { UploadFilled } from "@element-plus/icons-vue";
 import { fetchAttachments, deleteAttachment, uploadAttachment } from "../../api/attachments";
 import { formatFileSize } from "./attachmentUtils";
 import { useAuthStore } from "../../store/auth";
@@ -126,12 +135,14 @@ import { TEXT } from "../../locales";
 type AttachmentEntityGroup = {
   entityType: string;
   label: string;
+  uploadText?: string;
 };
 
 type UploadGroup = {
   key: string;
   label: string;
   entityType: string;
+  uploadText?: string;
 };
 
 type PendingUploadStatus = "pending" | "uploading" | "failed";
@@ -153,6 +164,9 @@ const props = defineProps<{
   mode?: "table" | "upload";
   maxSizeMb?: number;
   refreshKey?: number;
+  hideUploadCardLabels?: boolean;
+  centerUploadCardContent?: boolean;
+  uploadCardColumns?: 2 | 3;
 }>();
 
 const attachments = ref<any[]>([]);
@@ -178,11 +192,13 @@ const uploadGroups = computed<UploadGroup[]>(() => {
       key: group.entityType,
       label: group.label,
       entityType: group.entityType,
+      uploadText: group.uploadText,
     }));
   }
   return [{ key: props.entityType, label: headerTitle.value, entityType: props.entityType }];
 });
-const showUploadCardLabels = computed(() => uploadGroups.value.length > 1);
+const showUploadCardLabels = computed(() => !props.hideUploadCardLabels && uploadGroups.value.length > 1);
+const uploadCardColumns = computed(() => props.uploadCardColumns || 2);
 
 const currentRolePermissions = computed(() => {
   const role = study.currentStudyRole || (study.currentStudy as any)?.role_in_study;
@@ -494,20 +510,64 @@ defineExpose({
   gap: 16px;
 }
 
+.upload-grid--three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.attachment-upload-item {
+  min-width: 0;
+}
+
+.attachment-card-upload,
+.attachment-card-upload :deep(.el-upload) {
+  display: block;
+  width: 100%;
+}
+
 .attachment-upload-card {
   min-height: 72px;
   padding: 14px 16px;
   border: 1px dashed #d0dced;
   border-radius: 8px;
   background: #ffffff;
-  transition: border-color 0.2s ease, background-color 0.2s ease;
+  cursor: pointer;
+  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
 }
 
-.attachment-upload-card:hover {
+.attachment-upload-card:hover,
+.attachment-upload-card:focus-within {
   border-color: var(--ctms-primary);
   background: #f8faff;
 }
 
+.attachment-upload-card.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.attachment-upload-card--centered {
+  min-height: 112px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.attachment-upload-card--centered .upload-card-label {
+  align-self: flex-start;
+  margin-bottom: 0;
+  text-align: left;
+}
+
+.attachment-upload-card--centered .upload-trigger {
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+}
+
 .upload-card-label {
   margin-bottom: 10px;
   color: #4a6283;
@@ -520,25 +580,22 @@ defineExpose({
   align-items: center;
   gap: 8px;
   min-height: 34px;
-  cursor: pointer;
-}
-
-.upload-trigger.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.62;
 }
 
 .upload-icon {
-  font-size: 18px;
+  font-size: 22px;
   line-height: 1;
+  color: #314a6b;
 }
 
 .upload-text {
   color: var(--ctms-text-secondary);
   font-size: 13px;
+  line-height: 1.4;
 }
 
-.upload-trigger:not(.is-disabled):hover .upload-text {
+.attachment-upload-card:not(.is-disabled):hover .upload-text,
+.attachment-upload-card:not(.is-disabled):hover .upload-icon {
   color: var(--ctms-primary);
 }
 
diff --git a/frontend/src/types/documents.ts b/frontend/src/types/documents.ts
index d8c6bb1f..286abd49 100644
--- a/frontend/src/types/documents.ts
+++ b/frontend/src/types/documents.ts
@@ -45,6 +45,12 @@ export interface DocumentVersion {
   mime_type?: string | null;
   change_summary?: string | null;
   created_by?: string | null;
+  created_by_user?: {
+    id: string;
+    email: string;
+    full_name: string;
+    avatar_url?: string | null;
+  } | null;
   submitted_at?: string | null;
   approved_at?: string | null;
   withdrawn_at?: string | null;
diff --git a/frontend/src/views/documents/DocumentDetail.test.ts b/frontend/src/views/documents/DocumentDetail.test.ts
index dff38b41..1b5131aa 100644
--- a/frontend/src/views/documents/DocumentDetail.test.ts
+++ b/frontend/src/views/documents/DocumentDetail.test.ts
@@ -50,6 +50,38 @@ describe("DocumentDetail permissions", () => {
     expect(source).toContain('can("project.members.list")');
     expect(source).toContain("if (!canReadMembers.value)");
   });
+
+  it("reuses attachment-style preview for document versions", () => {
+    const source = readSource();
+
+    expect(source).toContain("@click=\"previewVersion(row)\"");
+    expect(source).toContain("TEXT.common.labels.preview");
+    expect(source).toContain('return "image"');
+    expect(source).toContain('return "pdf"');
+    expect(source).toContain("TEXT.common.messages.previewNotSupported");
+    expect(source).toContain("URL.createObjectURL(blob)");
+    expect(source).toContain("URL.revokeObjectURL(previewObjectUrl.value)");
+  });
+
+  it("prefers backend creator display data instead of exposing creator ids", () => {
+    const source = readSource();
+
+    expect(source).toContain("displayCreator(row.created_by_user, row.created_by)");
+    expect(source).toContain("const displayCreator = (user?: UserInfo | null, userId?: string | null)");
+    expect(source).toContain("getUserDisplayName(user)");
+    expect(source).not.toContain("displayCreator(row.created_by)");
+    expect(source).not.toContain("return userMap.value[userId] || userId;");
+  });
+
+  it("uses the version record creation time for the updated-at column", () => {
+    const source = readSource();
+
+    expect(source).toContain("displayDateTime");
+    expect(source).toContain("splitDateTime(row.created_at).date");
+    expect(source).toContain("splitDateTime(row.created_at).time");
+    expect(source).toContain("const displayValue = displayDateTime(value)");
+    expect(source).not.toContain("splitDateTime(row.effective_at || row.created_at)");
+  });
 });
 
 describe("DocumentDetail breadcrumbs", () => {
@@ -76,4 +108,19 @@ describe("DocumentDetail editor overlays", () => {
     expect(source).not.toContain("<el-dialog append-to=\".layout-main .content-wrapper\" v-model=\"uploadVisible\"");
     expect(source).not.toContain("<el-dialog append-to=\".layout-main .content-wrapper\" v-model=\"distributeVisible\"");
   });
+
+  it("guards dirty drawer closes while allowing mask close", () => {
+    const source = readSource();
+
+    expect(source).toContain("useDrawerDirtyGuard");
+    expect(source).toContain("const editorDirtyGuard = useDrawerDirtyGuard(() => editorForm);");
+    expect(source).toContain("const uploadDirtyGuard = useDrawerDirtyGuard(() => ({");
+    expect(source).toContain("const distributeDirtyGuard = useDrawerDirtyGuard(() => distributeForm);");
+    expect(source).toContain(':before-close="editorDirtyGuard.beforeClose"');
+    expect(source).toContain(':before-close="uploadDirtyGuard.beforeClose"');
+    expect(source).toContain(':before-close="distributeDirtyGuard.beforeClose"');
+    expect(source).toContain("editorDirtyGuard.syncBaseline()");
+    expect(source).toContain("uploadDirtyGuard.syncBaseline()");
+    expect(source).toContain("distributeDirtyGuard.syncBaseline()");
+  });
 });
diff --git a/frontend/src/views/documents/DocumentDetail.vue b/frontend/src/views/documents/DocumentDetail.vue
index 1f774af3..7c36c525 100644
--- a/frontend/src/views/documents/DocumentDetail.vue
+++ b/frontend/src/views/documents/DocumentDetail.vue
@@ -1,177 +1,209 @@
 <template>
-  <div class="page ctms-page-shell page--flush">
-    <div class="unified-shell">
-      <section class="unified-section section--flush-x" v-loading="loading">
-        <div class="unified-section-header">
-          <div>
-            <div class="ctms-section-title">
-              {{ detail.title || TEXT.modules.fileVersionManagement.title }}
+  <div class="page">
+    <StateError v-if="errorMessage" :description="errorMessage">
+      <template #action>
+        <el-button type="primary" @click="loadDetail">{{ TEXT.common.actions.retry }}</el-button>
+      </template>
+    </StateError>
+
+    <StateLoading v-else-if="loading" :rows="6" />
+
+    <template v-else>
+      <!-- ==================== Hero ==================== -->
+      <div class="hero-banner">
+        <div class="hero-bg-pattern" />
+        <div class="hero-content">
+          <div class="hero-top">
+            <div class="hero-title-group">
+              <h2 class="hero-title">{{ detail.title || TEXT.modules.fileVersionManagement.title }}</h2>
+              <el-tag size="small" effect="plain" class="hero-tag">{{ displayText(detail.doc_type, TEXT.enums.documentType) }}</el-tag>
+              <el-tag v-if="isReadOnly" size="small" effect="plain" type="info" class="hero-tag">中心已停用</el-tag>
             </div>
-            <div class="doc-meta-row mt-1">
-              <el-tag size="small" effect="plain" type="info" class="mr-2">{{ displayText(detail.doc_type, TEXT.enums.documentType) }}</el-tag>
-              <el-tag size="small" effect="plain" type="warning" class="mr-2">{{ displaySite(detail.site_id) }}</el-tag>
-              <el-tag v-if="isReadOnly" size="small" effect="plain" type="info">中心已停用</el-tag>
-              <span class="text-secondary text-sm">
-                {{ TEXT.modules.fileVersionManagement.labels.currentEffective }}：
-                <span class="font-medium text-main">{{ detail.current_effective_version?.version_no || TEXT.common.fallback }}</span>
-              </span>
-            </div>
-          </div>
-          <div class="actions">
-            <el-button v-if="canUpdateDocument" type="primary" @click="openEdit" class="header-action-btn">
+            <el-button v-if="canUpdateDocument" type="primary" @click="openEdit" class="hero-edit-btn">
               <el-icon class="el-icon--left"><Edit /></el-icon>
               {{ TEXT.common.actions.edit }}
             </el-button>
           </div>
+          <div class="hero-stats">
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--type">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">{{ TEXT.modules.fileVersionManagement.fields.docType }}</span>
+                <span class="stat-value">{{ displayText(detail.doc_type, TEXT.enums.documentType) }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--site">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">{{ TEXT.modules.fileVersionManagement.fields.site }}</span>
+                <span class="stat-value">{{ displaySite(detail.site_id) }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--version">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">{{ TEXT.modules.fileVersionManagement.labels.currentEffective }}</span>
+                <span class="stat-value">{{ currentEffectiveVersion?.version_no || TEXT.common.fallback }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--date">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">版本日期</span>
+                <span class="stat-value">{{ formatDateOnly(currentEffectiveVersion?.effective_at || currentEffectiveVersion?.created_at || null) }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--update">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">{{ TEXT.modules.fileVersionManagement.columns.updatedAt }}</span>
+                <span class="stat-value">{{ formatDateOnly(detail.updated_at) }}</span>
+              </div>
+            </div>
+          </div>
         </div>
-        <el-descriptions :column="3" border class="ctms-descriptions">
-          <el-descriptions-item :label="TEXT.modules.fileVersionManagement.fields.docType">{{ displayText(detail.doc_type, TEXT.enums.documentType) }}</el-descriptions-item>
-          <el-descriptions-item :label="TEXT.modules.fileVersionManagement.fields.site">{{ displaySite(detail.site_id) }}</el-descriptions-item>
-          <el-descriptions-item :label="TEXT.modules.fileVersionManagement.labels.currentEffective">
-            {{ currentEffectiveVersion?.version_no || TEXT.common.fallback }}
-          </el-descriptions-item>
-          <el-descriptions-item label="版本日期">
-            {{ formatDateOnly(currentEffectiveVersion?.effective_at || currentEffectiveVersion?.created_at || null) }}
-          </el-descriptions-item>
-          <el-descriptions-item :label="TEXT.modules.fileVersionManagement.columns.updatedAt">{{ formatDate(detail.updated_at) }}</el-descriptions-item>
-        </el-descriptions>
-      </section>
+      </div>
 
-      <section class="unified-section section--flush-x section--flush-bottom">
-        <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="ctms-tabs">
-      <el-tab-pane :label="TEXT.modules.fileVersionManagement.tabs.versions" name="versions">
-        <div class="ctms-section-header">
-          <div class="ctms-section-title">&nbsp;</div>
-          <div class="ctms-section-actions">
-            <el-button type="primary" @click="openUpload" v-if="canUpdateDocument">
+      <!-- ==================== 版本与分发 Tabs ==================== -->
+      <div class="section-card">
+        <div class="tabs-header">
+          <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="ctms-tabs">
+            <el-tab-pane :label="TEXT.modules.fileVersionManagement.tabs.versions" name="versions">
+              <div class="table-card-inner">
+              <el-table :data="detail.version_timeline" v-loading="versionLoading" class="version-table" style="width: 100%" table-layout="fixed">
+                <el-table-column prop="version_no" :label="TEXT.modules.fileVersionManagement.fields.versionNo">
+                  <template #default="{ row }">
+                    <span class="cell-primary cell-nowrap">V{{ row.version_no }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="版本日期">
+                  <template #default="{ row }">
+                    <span class="cell-nowrap">{{ formatDateOnly(row.effective_at || row.created_at) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="change_summary" :label="TEXT.modules.fileVersionManagement.fields.changeSummary" show-overflow-tooltip>
+                  <template #default="{ row }">
+                    <span class="cell-nowrap">{{ row.change_summary || TEXT.common.fallback }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="TEXT.modules.fileVersionManagement.labels.createdBy" show-overflow-tooltip>
+                  <template #default="{ row }">
+                    <span class="cell-nowrap">{{ displayCreator(row.created_by_user, row.created_by) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="TEXT.modules.fileVersionManagement.fields.parentVersion">
+                  <template #default="{ row }">
+                    <span class="cell-muted cell-nowrap">{{ displayParentVersion(row.parent_version_id) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="TEXT.modules.fileVersionManagement.columns.effectiveAt">
+                  <template #default="{ row }">
+                    <span class="cell-muted datetime-stack">
+                      <span>{{ splitDateTime(row.created_at).date }}</span>
+                      <span class="datetime-stack__time">{{ splitDateTime(row.created_at).time }}</span>
+                    </span>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="TEXT.modules.fileVersionManagement.columns.actions" width="160" fixed="right">
+                  <template #default="{ row }">
+                    <div class="cell-actions">
+                      <el-button link type="primary" size="small" @click="previewVersion(row)" v-if="canReadDocument">
+                        {{ TEXT.common.labels.preview }}
+                      </el-button>
+                      <el-button link type="primary" size="small" @click="downloadVersion(row)" v-if="canReadDocument">
+                        {{ TEXT.modules.fileVersionManagement.actions.download }}
+                      </el-button>
+                      <el-button v-if="canDeleteDocument" link type="danger" size="small" @click="confirmDeleteVersion(row)">
+                        {{ TEXT.common.actions.delete }}
+                      </el-button>
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane :label="TEXT.modules.fileVersionManagement.tabs.distributions" name="distributions">
+            <div class="table-card-inner">
+              <el-table :data="distributions" v-loading="distributionLoading" class="version-table" style="width: 100%" table-layout="fixed">
+                <el-table-column :label="TEXT.modules.fileVersionManagement.fields.targetType">
+                  <template #default="{ row }">
+                    <el-tag effect="plain" type="info" class="table-tag">{{ displayEnum(TEXT.enums.distributionTargetType, row.target_type) }}</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="TEXT.modules.fileVersionManagement.fields.target" show-overflow-tooltip>
+                  <template #default="{ row }">
+                    <span class="cell-primary cell-nowrap">{{ displayTarget(row) }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="抄送时间">
+                  <template #default="{ row }">
+                    <span class="cell-muted cell-nowrap">{{ formatDate(row.created_at) }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+          <div class="tabs-actions">
+            <el-button v-if="activeTab === 'versions' && canUpdateDocument" type="primary" size="small" @click="openUpload" class="tab-action-btn">
               <el-icon class="el-icon--left"><Upload /></el-icon>
               {{ TEXT.modules.fileVersionManagement.actions.uploadVersion }}
             </el-button>
-          </div>
-        </div>
-        <div class="ctms-table-panel">
-          <el-table :data="detail.version_timeline" v-loading="versionLoading" class="ctms-table" table-layout="fixed">
-            <el-table-column prop="version_no" :label="TEXT.modules.fileVersionManagement.fields.versionNo" show-overflow-tooltip>
-               <template #default="{ row }">
-                 <span class="font-medium">V{{ row.version_no }}</span>
-               </template>
-            </el-table-column>
-            <el-table-column label="版本日期" show-overflow-tooltip>
-              <template #default="{ row }">
-                <span class="text-secondary">{{ formatDateOnly(row.effective_at || row.created_at) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="change_summary" :label="TEXT.modules.fileVersionManagement.fields.changeSummary" show-overflow-tooltip />
-            <el-table-column :label="TEXT.modules.fileVersionManagement.labels.createdBy" show-overflow-tooltip>
-              <template #default="{ row }">
-                <span>{{ displayCreator(row.created_by) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="TEXT.modules.fileVersionManagement.fields.parentVersion" show-overflow-tooltip>
-              <template #default="{ row }">
-                <span class="text-secondary">{{ displayParentVersion(row.parent_version_id) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="effective_at" :label="TEXT.modules.fileVersionManagement.columns.effectiveAt" show-overflow-tooltip>
-              <template #default="{ row }">
-                <span class="text-secondary">{{ formatDate(row.effective_at || row.created_at) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column :label="TEXT.modules.fileVersionManagement.columns.actions" width="140" align="center">
-              <template #default="{ row }">
-                <el-button link type="primary" size="small" @click="downloadVersion(row)" v-if="canReadDocument">
-                  {{ TEXT.modules.fileVersionManagement.actions.download }}
-                </el-button>
-                <el-button
-                  v-if="canDeleteDocument"
-                  link
-                  type="danger"
-                  size="small"
-                  @click="confirmDeleteVersion(row)"
-                >
-                  {{ TEXT.common.actions.delete }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </el-tab-pane>
-
-      <el-tab-pane :label="TEXT.modules.fileVersionManagement.tabs.distributions" name="distributions">
-        <div class="ctms-section-header">
-          <div class="ctms-section-title">&nbsp;</div>
-          <div class="ctms-section-actions">
-            <el-button type="primary" @click="openDistribute" v-if="canUpdateDocument">
+            <el-button v-if="activeTab === 'distributions' && canUpdateDocument" type="primary" size="small" @click="openDistribute" class="tab-action-btn">
               <el-icon class="el-icon--left"><Share /></el-icon>
               {{ TEXT.modules.fileVersionManagement.actions.distribute }}
             </el-button>
           </div>
         </div>
-        <div class="ctms-table-panel">
-          <el-table :data="distributions" v-loading="distributionLoading" class="ctms-table" table-layout="fixed">
-            <el-table-column :label="TEXT.modules.fileVersionManagement.fields.targetType">
-              <template #default="{ row }">
-                <el-tag effect="plain" type="info">{{ displayEnum(TEXT.enums.distributionTargetType, row.target_type) }}</el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column :label="TEXT.modules.fileVersionManagement.fields.target" show-overflow-tooltip>
-              <template #default="{ row }">
-                <span class="font-medium">{{ displayTarget(row) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="抄送时间" show-overflow-tooltip>
-              <template #default="{ row }">
-                <span class="text-secondary">{{ formatDate(row.created_at) }}</span>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </el-tab-pane>
+      </div>
+    </template>
 
-        </el-tabs>
-      </section>
-    </div>
-
-    <el-drawer
-      v-if="editorVisible"
-      v-model="editorVisible"
-      direction="rtl"
-      size="620px"
-      :close-on-click-modal="true"
-      :show-close="false"
-      destroy-on-close
-      class="document-editor-drawer"
-    >
-      <template #header>
-        <div class="editor-header">
-          <div class="editor-title">{{ TEXT.common.actions.edit }}</div>
+    <el-dialog v-if="previewVisible" append-to-body v-model="previewVisible" :title="previewTitle" width="720px" :close-on-click-modal="false">
+      <div v-if="previewError" class="preview-error">
+        {{ previewError }}
+      </div>
+      <template v-else>
+        <div v-loading="previewLoading" class="preview-body">
+          <img v-if="previewType === 'image' && previewUrl" :src="previewUrl" class="preview-media" />
+          <iframe v-else-if="previewType === 'pdf' && previewUrl" :src="previewUrl" class="preview-frame" />
         </div>
       </template>
-      <el-form ref="editorFormRef" :model="editorForm" :rules="editorRules" label-position="top" class="ctms-form">
-        <div class="form-group">
-          <div class="form-group-title">
-            <span class="group-dot group-dot-basic"></span>
-            {{ TEXT.common.labels.basicInfo }}
-          </div>
+    </el-dialog>
+
+    <!-- ==================== 编辑抽屉 ==================== -->
+    <el-drawer v-if="editorVisible" v-model="editorVisible" direction="rtl" size="620px" :close-on-click-modal="true" :before-close="editorDirtyGuard.beforeClose" :show-close="false" destroy-on-close class="editor-drawer">
+      <template #header>
+        <div class="editor-header"><div class="editor-title">{{ TEXT.common.actions.edit }}</div></div>
+      </template>
+      <el-form ref="editorFormRef" :model="editorForm" :rules="editorRules" label-position="top" class="detail-form">
+        <div class="form-section">
+          <div class="form-section-title"><span class="dot dot--blue" />{{ TEXT.common.labels.basicInfo }}</div>
           <el-form-item :label="TEXT.modules.fileVersionManagement.fields.title" prop="title">
             <el-input v-model="editorForm.title" />
           </el-form-item>
-          <el-row :gutter="16">
-            <el-col :span="12">
-              <el-form-item :label="TEXT.modules.fileVersionManagement.fields.scope" prop="scope_type">
-                <el-select v-model="editorForm.scope_type" class="full-width">
-                  <el-option v-for="item in scopeOptions" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item :label="TEXT.modules.fileVersionManagement.fields.docType" prop="doc_type">
-                <el-select v-model="editorForm.doc_type" class="full-width">
-                  <el-option v-for="item in docTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
+          <div class="field-grid field-grid--2">
+            <el-form-item :label="TEXT.modules.fileVersionManagement.fields.scope" prop="scope_type">
+              <el-select v-model="editorForm.scope_type" class="full-width">
+                <el-option v-for="item in scopeOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="TEXT.modules.fileVersionManagement.fields.docType" prop="doc_type">
+              <el-select v-model="editorForm.doc_type" class="full-width">
+                <el-option v-for="item in docTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </el-form-item>
+          </div>
           <el-form-item v-if="editorForm.scope_type === 'SITE'" :label="TEXT.modules.fileVersionManagement.fields.site" prop="site_id">
             <el-select v-model="editorForm.site_id" filterable class="full-width">
               <el-option v-for="item in siteOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
@@ -181,92 +213,96 @@
       </el-form>
       <template #footer>
         <div class="drawer-footer">
-          <el-button @click="editorVisible = false">{{ TEXT.common.actions.cancel }}</el-button>
-          <el-button type="primary" :loading="savingEditor" @click="submitEditor">{{ TEXT.common.actions.confirm }}</el-button>
+          <el-button @click="editorVisible = false" class="footer-btn">{{ TEXT.common.actions.cancel }}</el-button>
+          <el-button type="primary" :loading="savingEditor" @click="submitEditor" class="footer-btn footer-btn--primary">{{ TEXT.common.actions.confirm }}</el-button>
         </div>
       </template>
     </el-drawer>
 
-    <el-drawer
-      v-if="uploadVisible"
-      v-model="uploadVisible"
-      direction="rtl"
-      size="620px"
-      :close-on-click-modal="true"
-      :show-close="false"
-      destroy-on-close
-      class="upload-editor-drawer"
-    >
+    <!-- ==================== 上传版本抽屉 ==================== -->
+    <el-drawer v-if="uploadVisible" v-model="uploadVisible" direction="rtl" size="620px" :close-on-click-modal="true" :before-close="uploadDirtyGuard.beforeClose" :show-close="false" destroy-on-close class="upload-drawer">
       <template #header>
-        <div class="editor-header">
-          <div class="editor-title">{{ TEXT.modules.fileVersionManagement.dialog.uploadTitle }}</div>
+        <div class="upload-header">
+          <div class="upload-header-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+          </div>
+          <div class="upload-header-text">
+            <div class="upload-header-title">{{ TEXT.modules.fileVersionManagement.dialog.uploadTitle }}</div>
+            <div class="upload-header-subtitle">填写版本信息并选择文件</div>
+          </div>
         </div>
       </template>
-      <el-form ref="uploadFormRef" :model="uploadForm" :rules="uploadRules" label-position="top" class="ctms-form">
-        <div class="form-group">
-          <div class="form-group-title">
-            <span class="group-dot group-dot-basic"></span>
-            {{ TEXT.modules.fileVersionManagement.actions.uploadVersion }}
+      <el-form ref="uploadFormRef" :model="uploadForm" :rules="uploadRules" label-position="top" class="detail-form">
+        <div class="upload-form-card">
+          <div class="upload-form-card-title">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
+            版本信息
           </div>
-          <el-form-item :label="TEXT.modules.fileVersionManagement.fields.versionNo" prop="version_no">
-            <el-input v-model="uploadForm.version_no" :placeholder="TEXT.modules.fileVersionManagement.placeholders.versionNo" />
+          <div class="field-grid field-grid--2">
+            <el-form-item label="版本号" prop="version_no">
+              <el-input v-model="uploadForm.version_no" :placeholder="TEXT.modules.fileVersionManagement.placeholders.versionNo" />
+            </el-form-item>
+            <el-form-item label="版本日期" prop="version_date">
+              <el-date-picker v-model="uploadForm.version_date" type="date" value-format="YYYY-MM-DD" :placeholder="TEXT.common.placeholders.select" style="width: 100%" />
+            </el-form-item>
+          </div>
+          <el-form-item label="变更说明" prop="change_summary">
+            <el-input v-model="uploadForm.change_summary" type="textarea" :rows="3" :placeholder="TEXT.common.placeholders.input" />
           </el-form-item>
-          <el-form-item label="版本日期" prop="version_date">
-            <el-date-picker
-              v-model="uploadForm.version_date"
-              type="date"
-              value-format="YYYY-MM-DD"
-              :placeholder="TEXT.common.placeholders.select"
-              style="width: 100%"
-            />
-          </el-form-item>
-          <el-form-item :label="TEXT.modules.fileVersionManagement.fields.changeSummary">
-            <el-input v-model="uploadForm.change_summary" type="textarea" :rows="3" />
-          </el-form-item>
-          <el-form-item :label="TEXT.modules.fileVersionManagement.fields.parentVersion">
-            <el-select v-model="uploadForm.parent_version_id" clearable style="width: 100%">
-              <el-option
-                v-for="item in detail.version_timeline"
-                :key="item.id"
-                :label="item.version_no"
-                :value="item.id"
-              />
+          <el-form-item label="基于版本">
+            <el-select v-model="uploadForm.parent_version_id" clearable placeholder="可选，默认基于当前最新版本" style="width: 100%">
+              <el-option v-for="item in detail.version_timeline" :key="item.id" :label="`V${item.version_no}`" :value="item.id" />
             </el-select>
           </el-form-item>
-          <el-form-item :label="TEXT.modules.fileVersionManagement.fields.file">
-            <input type="file" @change="onFileChange" class="ctms-file-input" />
-          </el-form-item>
+        </div>
+
+        <div class="upload-form-card">
+          <div class="upload-form-card-title">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+            上传文件
+          </div>
+          <div class="upload-zone" :class="{ 'has-file': uploadFile }" @click="triggerFileInput">
+            <input type="file" ref="fileInputRef" @change="onFileChange" class="file-input-hidden" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.png,.jpg" />
+            <template v-if="!uploadFile">
+              <div class="upload-zone-icon">
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+              </div>
+              <span class="upload-zone-text">点击选择文件或将文件拖拽到此处</span>
+              <span class="upload-zone-hint">支持 PDF、Word、Excel、PPT、TXT、图片等格式</span>
+            </template>
+            <template v-else>
+              <div class="upload-file-preview">
+                <div class="upload-file-icon">
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                </div>
+                <div class="upload-file-info">
+                  <span class="upload-file-name">{{ uploadFile.name }}</span>
+                  <span class="upload-file-size">{{ (uploadFile.size / 1024).toFixed(1) }} KB</span>
+                </div>
+                <button type="button" class="upload-file-remove" @click.stop="removeFile">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                </button>
+              </div>
+            </template>
+          </div>
         </div>
       </el-form>
       <template #footer>
         <div class="drawer-footer">
-          <el-button @click="uploadVisible = false">{{ TEXT.common.actions.cancel }}</el-button>
-          <el-button type="primary" :loading="uploading" @click="submitUpload">{{ TEXT.common.actions.confirm }}</el-button>
+          <el-button @click="uploadVisible = false" class="footer-btn">{{ TEXT.common.actions.cancel }}</el-button>
+          <el-button type="primary" :loading="uploading" @click="submitUpload" class="footer-btn footer-btn--primary">{{ TEXT.common.actions.confirm }}</el-button>
         </div>
       </template>
     </el-drawer>
 
-    <el-drawer
-      v-if="distributeVisible"
-      v-model="distributeVisible"
-      direction="rtl"
-      size="620px"
-      :close-on-click-modal="true"
-      :show-close="false"
-      destroy-on-close
-      class="distribution-editor-drawer"
-    >
+    <!-- ==================== 分发抽屉 ==================== -->
+    <el-drawer v-if="distributeVisible" v-model="distributeVisible" direction="rtl" size="620px" :close-on-click-modal="true" :before-close="distributeDirtyGuard.beforeClose" :show-close="false" destroy-on-close class="editor-drawer">
       <template #header>
-        <div class="editor-header">
-          <div class="editor-title">{{ TEXT.modules.fileVersionManagement.dialog.distributeTitle }}</div>
-        </div>
+        <div class="editor-header"><div class="editor-title">{{ TEXT.modules.fileVersionManagement.dialog.distributeTitle }}</div></div>
       </template>
-      <el-form :model="distributeForm" label-position="top" class="ctms-form">
-        <div class="form-group">
-          <div class="form-group-title">
-            <span class="group-dot group-dot-basic"></span>
-            {{ TEXT.modules.fileVersionManagement.fields.targetList }}
-          </div>
+      <el-form :model="distributeForm" label-position="top" class="detail-form">
+        <div class="form-section">
+          <div class="form-section-title"><span class="dot dot--blue" />{{ TEXT.modules.fileVersionManagement.fields.targetList }}</div>
           <el-form-item :label="TEXT.modules.fileVersionManagement.fields.targetList">
             <div class="target-list w-full">
               <div class="target-toolbar">
@@ -278,26 +314,12 @@
               </div>
               <div class="target-row">
                 <template v-if="distributeForm.target_type === 'ROLE'">
-                  <el-select
-                    v-model="distributeForm.role_ids"
-                    multiple
-                    filterable
-                    clearable
-                    :placeholder="TEXT.common.placeholders.select"
-                    class="target-select"
-                  >
+                  <el-select v-model="distributeForm.role_ids" multiple filterable clearable :placeholder="TEXT.common.placeholders.select" class="target-select">
                     <el-option v-for="role in roleOptions" :key="role.value" :label="role.label" :value="role.value" />
                   </el-select>
                 </template>
                 <template v-else-if="distributeForm.target_type === 'USER'">
-                  <el-select
-                    v-model="distributeForm.user_ids"
-                    multiple
-                    filterable
-                    clearable
-                    :placeholder="TEXT.common.placeholders.select"
-                    class="target-select"
-                  >
+                  <el-select v-model="distributeForm.user_ids" multiple filterable clearable :placeholder="TEXT.common.placeholders.select" class="target-select">
                     <el-option v-for="member in memberOptions" :key="member.value" :label="member.label" :value="member.value" />
                   </el-select>
                 </template>
@@ -311,12 +333,11 @@
       </el-form>
       <template #footer>
         <div class="drawer-footer">
-          <el-button @click="distributeVisible = false">{{ TEXT.common.actions.cancel }}</el-button>
-          <el-button type="primary" :loading="distributing" @click="submitDistribute">{{ TEXT.common.actions.confirm }}</el-button>
+          <el-button @click="distributeVisible = false" class="footer-btn">{{ TEXT.common.actions.cancel }}</el-button>
+          <el-button type="primary" :loading="distributing" @click="submitDistribute" class="footer-btn footer-btn--primary">{{ TEXT.common.actions.confirm }}</el-button>
         </div>
       </template>
     </el-drawer>
-
   </div>
 </template>
 
@@ -324,7 +345,7 @@
 import { computed, onMounted, reactive, ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
-import { Edit, Upload, Download, Share } from "@element-plus/icons-vue";
+import { Edit, Upload, Share } from "@element-plus/icons-vue";
 import {
   createDistributions,
   deleteDocumentVersion,
@@ -343,9 +364,12 @@ import type { UserInfo } from "../../types/api";
 import { useAuthStore } from "../../store/auth";
 import { useStudyStore } from "../../store/study";
 import { TEXT } from "../../locales";
-import { displayEnum, displayText, getUserDisplayName } from "../../utils/display";
+import { displayDateTime, displayEnum, displayText, getUserDisplayName } from "../../utils/display";
+import { useDrawerDirtyGuard } from "../../utils/drawerDirtyGuard";
 import { useRoleTemplateMeta } from "../../composables/useRoleTemplateMeta";
 import { usePermission } from "../../utils/permission";
+import StateError from "../../components/StateError.vue";
+import StateLoading from "../../components/StateLoading.vue";
 
 const route = useRoute();
 const auth = useAuthStore();
@@ -355,6 +379,7 @@ const { can } = usePermission();
 const documentId = computed(() => route.params.id as string);
 
 const loading = ref(false);
+const errorMessage = ref("");
 const versionLoading = ref(false);
 const distributionLoading = ref(false);
 const detail = reactive<DocumentDetail>({
@@ -420,9 +445,11 @@ const userMap = computed(() => {
   return map;
 });
 
-const displayCreator = (userId?: string | null) => {
+const displayCreator = (user?: UserInfo | null, userId?: string | null) => {
+  const name = getUserDisplayName(user);
+  if (name) return name;
   if (!userId) return TEXT.common.fallback;
-  return userMap.value[userId] || userId;
+  return userMap.value[userId] || TEXT.common.fallback;
 };
 
 const displayParentVersion = (parentId?: string | null) => {
@@ -462,10 +489,12 @@ const editorForm = reactive({
   site_id: "",
   doc_type: "",
 });
+const editorDirtyGuard = useDrawerDirtyGuard(() => editorForm);
 
 const uploadVisible = ref(false);
 const uploading = ref(false);
 const uploadFormRef = ref<FormInstance>();
+const fileInputRef = ref<HTMLInputElement | null>(null);
 const uploadForm = reactive({
   version_no: "",
   version_date: "",
@@ -473,6 +502,19 @@ const uploadForm = reactive({
   parent_version_id: "",
 });
 const uploadFile = ref<File | null>(null);
+const uploadDirtyGuard = useDrawerDirtyGuard(() => ({
+  form: uploadForm,
+  file: uploadFile.value
+    ? {
+        name: uploadFile.value.name,
+        size: uploadFile.value.size,
+        lastModified: uploadFile.value.lastModified,
+      }
+    : null,
+}));
+
+const triggerFileInput = () => { fileInputRef.value?.click(); };
+const removeFile = () => { uploadFile.value = null; if (fileInputRef.value) fileInputRef.value.value = ""; };
 
 const distributeVisible = ref(false);
 const distributing = ref(false);
@@ -481,6 +523,14 @@ const distributeForm = reactive({
   role_ids: [] as string[],
   user_ids: [] as string[],
 });
+const distributeDirtyGuard = useDrawerDirtyGuard(() => distributeForm);
+const previewVisible = ref(false);
+const previewLoading = ref(false);
+const previewUrl = ref("");
+const previewObjectUrl = ref("");
+const previewType = ref<"image" | "pdf" | "other">("other");
+const previewTitle = ref<string>(TEXT.common.labels.preview);
+const previewError = ref("");
 
 const uploadRules: FormRules = {
   version_no: [
@@ -589,34 +639,24 @@ const loadUsers = async () => {
 const loadDetail = async () => {
   if (!documentId.value) return;
   loading.value = true;
+  errorMessage.value = "";
   try {
     const { data } = await fetchDocumentDetail(documentId.value);
     Object.assign(detail, data);
-    if (!users.value.length) {
-      await loadUsers();
-    }
-    if (!members.value.length) {
-      await loadMembers();
-    }
-    if (!sites.value.length) {
-      await loadSites();
-    }
+    if (!users.value.length) await loadUsers();
+    if (!members.value.length) await loadMembers();
+    if (!sites.value.length) await loadSites();
     syncBreadcrumbContext();
-    if (activeTab.value === "distributions") {
-      await loadDistributions();
-    }
+    if (activeTab.value === "distributions") await loadDistributions();
   } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.loadFailed);
+    errorMessage.value = e?.response?.data?.message || TEXT.common.messages.loadFailed;
   } finally {
     loading.value = false;
   }
 };
 
 const loadDistributions = async () => {
-  if (!distributionVersionId.value) {
-    distributions.value = [];
-    return;
-  }
+  if (!distributionVersionId.value) { distributions.value = []; return; }
   distributionLoading.value = true;
   try {
     const { data } = await listDistributions(distributionVersionId.value);
@@ -629,227 +669,185 @@ const loadDistributions = async () => {
 };
 
 const handleTabChange = async (name: string) => {
-  if (name === "distributions") {
-    await loadDistributions();
-  }
+  if (name === "distributions") await loadDistributions();
 };
 
 const openEdit = () => {
-  if (!canUpdateDocument.value) {
-    ElMessage.warning("权限不足");
-    return;
-  }
+  if (!canUpdateDocument.value) { ElMessage.warning("权限不足"); return; }
   Object.assign(editorForm, {
-    title: detail.title || "",
-    scope_type: detail.scope_type || "GLOBAL",
-    site_id: detail.site_id || "",
-    doc_type: detail.doc_type || "",
+    title: detail.title || "", scope_type: detail.scope_type || "GLOBAL",
+    site_id: detail.site_id || "", doc_type: detail.doc_type || "",
   });
   editorFormRef.value?.clearValidate();
+  editorDirtyGuard.syncBaseline();
   editorVisible.value = true;
 };
 
 const submitEditor = async () => {
-  if (!canUpdateDocument.value) {
-    ElMessage.warning("权限不足");
-    return;
-  }
+  if (!canUpdateDocument.value) { ElMessage.warning("权限不足"); return; }
   if (!editorFormRef.value) return;
   await editorFormRef.value.validate(async (valid) => {
     if (!valid || !documentId.value) return;
     savingEditor.value = true;
     try {
-      await updateDocument(documentId.value, {
-        title: editorForm.title.trim(),
-        scope_type: editorForm.scope_type,
-        site_id: editorForm.scope_type === "SITE" ? editorForm.site_id : null,
-        doc_type: editorForm.doc_type,
-      });
+      await updateDocument(documentId.value, { title: editorForm.title.trim(), scope_type: editorForm.scope_type, site_id: editorForm.scope_type === "SITE" ? editorForm.site_id : null, doc_type: editorForm.doc_type });
       editorVisible.value = false;
       await loadDetail();
       ElMessage.success(TEXT.common.messages.updateSuccess);
-    } catch (e: any) {
-      ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
-    } finally {
-      savingEditor.value = false;
-    }
+    } catch (e: any) { ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed); }
+    finally { savingEditor.value = false; }
   });
 };
 
 const openUpload = () => {
-  if (!canUpdateDocument.value) {
-    ElMessage.warning("权限不足");
-    return;
-  }
-  uploadForm.version_no = "";
-  uploadForm.version_date = "";
-  uploadForm.change_summary = "";
-  uploadForm.parent_version_id = "";
-  uploadFile.value = null;
+  if (!canUpdateDocument.value) { ElMessage.warning("权限不足"); return; }
+  uploadForm.version_no = ""; uploadForm.version_date = ""; uploadForm.change_summary = ""; uploadForm.parent_version_id = ""; uploadFile.value = null;
+  uploadDirtyGuard.syncBaseline();
   uploadVisible.value = true;
 };
 
 const onFileChange = (event: Event) => {
   const target = event.target as HTMLInputElement;
-  if (target.files && target.files[0]) {
-    uploadFile.value = target.files[0];
-  }
+  if (target.files && target.files[0]) uploadFile.value = target.files[0];
 };
 
 const submitUpload = async () => {
-  if (!canUpdateDocument.value) {
-    ElMessage.warning("权限不足");
-    return;
-  }
+  if (!canUpdateDocument.value) { ElMessage.warning("权限不足"); return; }
   if (!uploadFormRef.value) return;
   await uploadFormRef.value.validate(async (valid) => {
     if (!valid || !documentId.value || !uploadFile.value) {
-      if (!uploadFile.value) {
-        ElMessage.warning(TEXT.modules.fileVersionManagement.messages.missingFile);
-      }
+      if (!uploadFile.value) ElMessage.warning(TEXT.modules.fileVersionManagement.messages.missingFile);
       return;
     }
     uploading.value = true;
     try {
       const formData = new FormData();
       formData.append("version_no", uploadForm.version_no);
-      if (uploadForm.version_date) {
-        formData.append("version_date", uploadForm.version_date);
-      }
-      if (uploadForm.change_summary) {
-        formData.append("change_summary", uploadForm.change_summary);
-      }
-      if (uploadForm.parent_version_id) {
-        formData.append("parent_version_id", uploadForm.parent_version_id);
-      }
+      if (uploadForm.version_date) formData.append("version_date", uploadForm.version_date);
+      if (uploadForm.change_summary) formData.append("change_summary", uploadForm.change_summary);
+      if (uploadForm.parent_version_id) formData.append("parent_version_id", uploadForm.parent_version_id);
       formData.append("file", uploadFile.value);
       await uploadDocumentVersion(documentId.value, formData);
       uploadVisible.value = false;
       await loadDetail();
       ElMessage.success(TEXT.modules.fileVersionManagement.messages.uploadSuccess);
-    } catch (e: any) {
-      ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
-    } finally {
-      uploading.value = false;
-    }
+    } catch (e: any) { ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed); }
+    finally { uploading.value = false; }
   });
 };
 
 const getFilename = (header?: string | null) => {
   if (!header) return null;
-  const match = /filename\*=UTF-8''([^;]+)|filename="?([^\";]+)"?/i.exec(header);
+  const match = /filename\*=UTF-8''([^;]+)|filename="?([^";]+)"?/i.exec(header);
   if (!match) return null;
   return decodeURIComponent(match[1] || match[2] || "");
 };
 
+const getVersionFileName = (version: DocumentVersion) => {
+  const uri = version.file_uri || "";
+  const name = uri.split(/[\\/]/).filter(Boolean).pop() || "";
+  return name.toLowerCase();
+};
+
+const detectPreviewType = (version: DocumentVersion) => {
+  const mime = (version.mime_type || "").toLowerCase();
+  if (mime.startsWith("image/")) return "image";
+  if (mime === "application/pdf") return "pdf";
+  const name = getVersionFileName(version);
+  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".webp", ".svg"].some((ext) => name.endsWith(ext))) return "image";
+  if (name.endsWith(".pdf")) return "pdf";
+  return "other";
+};
+
+const clearPreviewObjectUrl = () => {
+  if (!previewObjectUrl.value) return;
+  URL.revokeObjectURL(previewObjectUrl.value);
+  previewObjectUrl.value = "";
+};
+
+const previewVersion = async (version: DocumentVersion) => {
+  if (!canReadDocument.value) { ElMessage.warning("权限不足"); return; }
+  clearPreviewObjectUrl();
+  previewType.value = detectPreviewType(version);
+  previewTitle.value = `${detail.title || TEXT.modules.fileVersionManagement.title} V${version.version_no}`;
+  previewUrl.value = "";
+  previewError.value = "";
+  previewVisible.value = true;
+  if (previewType.value === "other") {
+    previewError.value = TEXT.common.messages.previewNotSupported;
+    return;
+  }
+  previewLoading.value = true;
+  try {
+    const response = await downloadDocumentVersion(version.id);
+    const contentType = response.headers?.["content-type"] || version.mime_type || "application/octet-stream";
+    const blob = new Blob([response.data], { type: contentType });
+    previewObjectUrl.value = URL.createObjectURL(blob);
+    previewUrl.value = previewObjectUrl.value;
+  } catch (e: any) {
+    previewError.value = e?.response?.data?.message || TEXT.common.messages.previewNotSupported;
+  } finally {
+    previewLoading.value = false;
+  }
+};
+
 const downloadVersion = async (version: DocumentVersion) => {
   try {
     const response = await downloadDocumentVersion(version.id);
     const contentType = response.headers?.["content-type"] || "application/octet-stream";
-    const filename =
-      getFilename(response.headers?.["content-disposition"]) ||
-      `document-${version.version_no || version.id}.bin`;
+    const filename = getFilename(response.headers?.["content-disposition"]) || `document-${version.version_no || version.id}.bin`;
     const blob = new Blob([response.data], { type: contentType });
     const url = window.URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = filename;
-    document.body.appendChild(link);
-    link.click();
-    link.remove();
+    const link = document.createElement("a"); link.href = url; link.download = filename;
+    document.body.appendChild(link); link.click(); link.remove();
     window.URL.revokeObjectURL(url);
-  } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.downloadFailed);
-  }
+  } catch (e: any) { ElMessage.error(e?.response?.data?.message || TEXT.common.messages.downloadFailed); }
 };
 
 const confirmDeleteVersion = async (version: DocumentVersion) => {
   if (!version?.id) return;
-  if (!canDeleteDocument.value) {
-    ElMessage.warning("权限不足");
-    return;
-  }
+  if (!canDeleteDocument.value) { ElMessage.warning("权限不足"); return; }
   const ok = await ElMessageBox.confirm(TEXT.common.confirm.delete, TEXT.common.labels.tips).catch(() => null);
   if (!ok) return;
   try {
     await deleteDocumentVersion(version.id);
     ElMessage.success(TEXT.common.messages.deleteSuccess);
     await loadDetail();
-  } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
-  }
+  } catch (e: any) { ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed); }
 };
 
 const openDistribute = () => {
-  if (!canUpdateDocument.value) {
-    ElMessage.warning("权限不足");
-    return;
-  }
-  distributeForm.target_type = "ALL";
-  distributeForm.role_ids = [];
-  distributeForm.user_ids = [];
+  if (!canUpdateDocument.value) { ElMessage.warning("权限不足"); return; }
+  distributeForm.target_type = "ALL"; distributeForm.role_ids = []; distributeForm.user_ids = [];
+  distributeDirtyGuard.syncBaseline();
   distributeVisible.value = true;
-  if (!members.value.length) {
-    loadMembers();
-  }
+  if (!members.value.length) loadMembers();
 };
 
-const onTargetTypeChange = () => {
-  distributeForm.role_ids = [];
-  distributeForm.user_ids = [];
-};
+const onTargetTypeChange = () => { distributeForm.role_ids = []; distributeForm.user_ids = []; };
 
 const submitDistribute = async () => {
-  if (!canUpdateDocument.value) {
-    ElMessage.warning("权限不足");
-    return;
-  }
-  if (!distributionVersionId.value) {
-    ElMessage.warning(TEXT.modules.fileVersionManagement.messages.noEffective);
-    return;
-  }
+  if (!canUpdateDocument.value) { ElMessage.warning("权限不足"); return; }
+  if (!distributionVersionId.value) { ElMessage.warning(TEXT.modules.fileVersionManagement.messages.noEffective); return; }
   distributing.value = true;
   try {
     let targets: { target_type: string; target_id: string }[] = [];
-    if (distributeForm.target_type === "ALL") {
-      targets = memberOptions.value.map((m) => ({
-        target_type: "USER",
-        target_id: m.value,
-      }));
-    } else if (distributeForm.target_type === "ROLE") {
-      if (!distributeForm.role_ids.length) {
-        ElMessage.warning(TEXT.modules.fileVersionManagement.messages.missingTarget);
-        return;
-      }
-      targets = distributeForm.role_ids.map((role) => ({
-        target_type: "ROLE",
-        target_id: role,
-      }));
+    if (distributeForm.target_type === "ROLE") {
+      targets = distributeForm.role_ids.map((id) => ({ target_type: "ROLE", target_id: id }));
     } else if (distributeForm.target_type === "USER") {
-      if (!distributeForm.user_ids.length) {
-        ElMessage.warning(TEXT.modules.fileVersionManagement.messages.missingTarget);
-        return;
-      }
-      targets = distributeForm.user_ids.map((user) => ({
-        target_type: "USER",
-        target_id: user,
-      }));
+      targets = distributeForm.user_ids.map((id) => ({ target_type: "USER", target_id: id }));
     }
-    if (!targets.length) {
-      ElMessage.warning(TEXT.modules.fileVersionManagement.messages.missingTarget);
-      return;
-    }
-    await createDistributions(distributionVersionId.value, {
-      targets,
-    });
+    await createDistributions(distributionVersionId.value, targets);
     distributeVisible.value = false;
     await loadDistributions();
-    ElMessage.success(TEXT.modules.fileVersionManagement.messages.distributeSuccess);
-  } catch (e: any) {
-    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed);
-  } finally {
-    distributing.value = false;
-  }
+    ElMessage.success(TEXT.common.messages.saveSuccess);
+  } catch (e: any) { ElMessage.error(e?.response?.data?.message || TEXT.common.messages.saveFailed); }
+  finally { distributing.value = false; }
+};
+
+const formatDateOnly = (value?: string | null) => {
+  if (!value) return TEXT.common.fallback;
+  return value.split("T")[0] || value;
 };
 
 const formatDate = (value?: string | null) => {
@@ -857,192 +855,385 @@ const formatDate = (value?: string | null) => {
   return value.replace("T", " ").replace("Z", "").split(".")[0];
 };
 
-const formatDateOnly = (value?: string | null) => {
-  const formatted = formatDate(value);
-  if (formatted === TEXT.common.fallback) return formatted;
-  return formatted.split(" ")[0];
+const splitDateTime = (value?: string | null) => {
+  const displayValue = displayDateTime(value);
+  const [date, time] = displayValue.split(" ");
+  return { date, time: time || "" };
 };
 
-onMounted(async () => {
-  await loadRoleTemplates();
-  await loadDetail();
-  await loadDistributions();
+watch(previewVisible, (visible) => {
+  if (!visible) {
+    clearPreviewObjectUrl();
+    previewUrl.value = "";
+    previewError.value = "";
+    previewLoading.value = false;
+  }
 });
 
-watch(
-  () => documentId.value,
-  async (value, oldValue) => {
-    if (value && value !== oldValue) {
-      await loadDetail();
-      await loadDistributions();
-    }
-  }
-);
+onMounted(() => { loadDetail(); });
 </script>
 
 <style scoped>
+/* ==================== Base ==================== */
 .page {
   display: flex;
   flex-direction: column;
-  gap: 0;
-}
-
-.ctms-table-panel {
+  gap: 16px;
   padding: 0;
+  background: transparent;
 }
 
-.ctms-section-header {
-  margin-bottom: 0;
+/* ==================== Hero Banner ==================== */
+.hero-banner {
+  position: relative;
+  background: #fff7ee;
+  border: 1px solid rgba(180, 110, 50, 0.10);
+  border-radius: 8px;
+  padding: 28px 32px 24px;
+  overflow: hidden;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.7) inset,
+    0 1px 2px rgba(180, 110, 50, 0.04);
 }
 
-.ctms-table-panel :deep(.el-table__inner-wrapper::before) {
-  display: none;
+.hero-banner::before { display: none; }
+.hero-banner::after { display: none; }
+
+.hero-bg-pattern { display: none; }
+
+.hero-content { position: relative; z-index: 1; }
+
+.hero-top {
+  display: flex; justify-content: space-between; align-items: flex-start;
+  margin-bottom: 22px;
 }
 
-.doc-meta-row {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
+.hero-title-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+
+.hero-title {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 600;
+  color: #3d2410;
+  letter-spacing: 0.005em;
 }
 
-.text-secondary {
-  color: var(--ctms-text-secondary);
-}
-
-.text-main {
-  color: var(--ctms-text-main);
-}
-
-.font-medium {
+.hero-tag {
+  background: rgba(255, 255, 255, 0.55) !important;
+  color: rgba(80, 45, 20, 0.78) !important;
+  border: 1px solid rgba(180, 110, 50, 0.18) !important;
   font-weight: 500;
+  backdrop-filter: blur(8px);
 }
 
-.bg-primary-light {
-  background-color: var(--ctms-primary-light);
+.hero-edit-btn {
+  height: 34px; border-radius: 6px; padding: 0 18px; font-weight: 500;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(180, 110, 50, 0.18);
+  color: #3d2410;
+  backdrop-filter: blur(10px) saturate(140%);
+  -webkit-backdrop-filter: blur(10px) saturate(140%);
+  transition: all 0.2s ease;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 1px 2px rgba(180, 110, 50, 0.06);
 }
 
-.text-primary {
-  color: var(--ctms-primary);
+.hero-edit-btn:hover {
+  background: #ffffff;
+  border-color: rgba(180, 110, 50, 0.30);
+  color: #3d2410;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 4px 12px rgba(212, 130, 60, 0.14);
+}
+.hero-edit-btn:active { transform: scale(0.97); }
+
+.hero-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
+
+.hero-stat {
+  position: relative;
+  display: flex; align-items: center; gap: 14px;
+  padding: 14px 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.62) 100%);
+  border: 1px solid rgba(180, 110, 50, 0.10);
+  border-radius: 6px;
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  transition: all 0.25s ease;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 1px 2px rgba(180, 110, 50, 0.04);
 }
 
-.text-xs {
+.hero-stat:hover {
+  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.92) 100%);
+  border-color: rgba(180, 110, 50, 0.18);
+  transform: translateY(-1px);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 6px 16px rgba(212, 130, 60, 0.10);
+}
+
+.stat-icon-wrap {
+  display: flex; align-items: center; justify-content: center;
+  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
+  border: 1px solid rgba(180, 110, 50, 0.06);
+}
+
+
+.stat-icon-wrap--type   { background: rgba(212, 145, 80, 0.14);  color: #b06b30; }
+.stat-icon-wrap--site   { background: rgba(168, 158, 80, 0.16);  color: #8a7028; }
+.stat-icon-wrap--version{ background: rgba(196, 116, 92, 0.14);  color: #a85838; }
+.stat-icon-wrap--date   { background: rgba(220, 160, 90, 0.18);  color: #b87532; }
+.stat-icon-wrap--update { background: rgba(196, 100, 100, 0.14); color: #aa4444; }
+
+.stat-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+
+.stat-label {
+  font-size: 10.5px;
+  font-weight: 500;
+  color: rgba(80, 45, 20, 0.55);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.stat-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3d2410;
+  word-break: break-all;
+  letter-spacing: 0.005em;
+}
+
+/* ==================== Section Card ==================== */
+.section-card {
+  background: #ffffff; border-radius: 6px; overflow: hidden;
+  box-shadow: none;
+}
+
+.tabs-header {
+  position: relative;
+}
+
+.tabs-actions {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  display: flex;
+  gap: 8px;
+  z-index: 1;
+}
+
+
+
+.tab-action-btn { height: 28px; border-radius: 6px; font-size: 12px; font-weight: 500; padding: 0 10px; }
+
+.table-card-inner { padding: 0; }
+
+/* ==================== Tables ==================== */
+.version-table {
+  --el-table-border-color: transparent;
+  --el-table-row-hover-bg-color: #f8f9fb;
+}
+
+.version-table :deep(.el-table__inner-wrapper::before) { display: none; }
+
+.version-table :deep(th.el-table__cell) {
+  background: #f4f5f7; color: #2a2a2a;
+  font-size: 12px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.05em;
+  padding: 14px 14px;
+  border-bottom: 2px solid #e0e0e0 !important;
+}
+
+.version-table :deep(td.el-table__cell) {
+  padding: 12px 14px; color: #0a0a0a; font-size: 14px; font-weight: 500;
+}
+
+.version-table :deep(.el-table__body tr) { cursor: pointer; transition: background 0.1s ease; }
+
+.version-table :deep(.el-tag) { font-weight: 600; border: none; }
+
+/* ==================== Cell Helpers ==================== */
+.cell-nowrap { white-space: nowrap; }
+.cell-primary { font-weight: 600; color: #0a0a0a; }
+.cell-muted { color: #8a8a8a; }
+.datetime-stack {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
   font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+.datetime-stack__time {
+  color: #9a9a9a;
+  font-size: 11px;
 }
 
-.text-sm {
-  font-size: 13px;
+.cell-actions { display: flex; gap: 8px; white-space: nowrap; }
+.cell-actions :deep(.el-button) { font-size: 13px; padding: 0; height: auto; }
+.cell-actions :deep(.el-button + .el-button) { margin-left: 0; }
+
+.preview-body {
+  min-height: 120px;
 }
 
-.text-danger {
-  color: var(--ctms-danger);
-}
-
-.lh-sm {
-  line-height: 1.4;
-}
-
-.dashed-button {
-  border-style: dashed;
-}
-
-.editor-header {
-  display: flex;
-  align-items: center;
-}
-
-.editor-title {
-  color: var(--ctms-text-main);
-  font-size: 18px;
-  font-weight: 700;
-}
-
-.form-group {
-  padding: 16px 0;
-}
-
-.form-group-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-  color: var(--ctms-text-main);
-  font-size: 15px;
-  font-weight: 700;
-}
-
-.group-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.group-dot-basic {
-  background: var(--ctms-primary);
-}
-
-.drawer-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.target-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.target-type-preset {
-  width: 120px;
-}
-
-.target-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.target-select {
-  flex: 1;
-  min-width: 180px;
-}
-
-.target-all {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  min-width: 180px;
-}
-
-.flex {
-  display: flex;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.gap-2 {
-  gap: 8px;
-}
-
-.mr-2 {
-  margin-right: 8px;
-}
-
-.mt-1 {
-  margin-top: 4px;
-}
-
-.mx-2 {
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.w-full {
+.preview-frame {
   width: 100%;
+  height: 520px;
+  border: none;
+}
+
+.preview-media {
+  max-width: 100%;
+  max-height: 520px;
+  display: block;
+  margin: 0 auto;
+}
+
+.preview-error {
+  color: #8a8a8a;
+  font-size: 13px;
+  padding: 12px 0;
+  text-align: center;
+}
+
+/* ==================== Tabs Override ==================== */
+.ctms-tabs :deep(.el-tabs__header) {
+  margin: 0;
+  padding: 0 24px;
+  background: transparent;
+  border-bottom: 1px solid #e8e8e8;
+}
+.ctms-tabs :deep(.el-tabs__nav-wrap::after) { display: none; }
+.ctms-tabs :deep(.el-tabs__active-bar) {
+  background: #0a0a0a;
+  height: 2px;
+  bottom: -1px;
+}
+.ctms-tabs :deep(.el-tabs__item) {
+  font-size: 13px;
+  font-weight: 600;
+  color: #a3a3a3;
+  padding: 14px 20px;
+  transition: color 0.15s ease;
+}
+.ctms-tabs :deep(.el-tabs__item:hover) { color: #525252; }
+.ctms-tabs :deep(.el-tabs__item.is-active) { color: #0a0a0a; }
+.ctms-tabs :deep(.el-tabs__content) { padding: 0; }
+.ctms-tabs :deep(.el-tab-pane) { padding: 0; }
+
+/* ==================== Drawer Editor ==================== */
+:deep(.editor-drawer > .el-drawer__header) { margin-bottom: 0; padding: 20px 24px 8px; }
+:deep(.editor-drawer > .el-drawer__body) { padding: 0 24px 4px; }
+
+.editor-header { display: flex; flex-direction: column; }
+.editor-title { font-size: 18px; font-weight: 700; color: #0a0a0a; line-height: 1.2; letter-spacing: -0.01em; }
+
+.detail-form { padding: 0; }
+
+.form-section { padding-bottom: 6px; }
+.form-section + .form-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f0f0; }
+
+.form-section-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #0a0a0a; margin-bottom: 16px; }
+
+.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.dot--blue { background: #3b82f6; }
+
+.field-grid { display: grid; gap: 0 16px; }
+.field-grid--2 { grid-template-columns: 1fr 1fr; }
+
+.full-width { width: 100%; }
+
+.drawer-footer { display: flex; justify-content: flex-end; gap: 10px; }
+
+.footer-btn { height: 36px; border-radius: 8px; padding: 0 20px; font-size: 13px; font-weight: 500; }
+.footer-btn--primary { padding: 0 24px; }
+
+.detail-form :deep(.el-form-item) { margin-bottom: 14px; }
+.detail-form :deep(.el-form-item__label) { font-size: 12px; font-weight: 600; color: #525252; padding-bottom: 4px; }
+.detail-form :deep(.el-form-item__error) { font-size: 11px; }
+
+.file-input-hidden { display: none; }
+
+/* ==================== Upload Drawer ==================== */
+.upload-drawer :deep(.el-drawer__header) { margin-bottom: 0; padding: 20px 24px 12px; border-bottom: 1px solid #f0f0f0; }
+.upload-drawer :deep(.el-drawer__body) { padding: 16px 24px 4px; }
+
+.upload-header { display: flex; align-items: center; gap: 14px; }
+.upload-header-icon {
+  display: flex; align-items: center; justify-content: center;
+  width: 40px; height: 40px; border-radius: 10px;
+  background: #eff4ff; color: #2563eb;
+}
+.upload-header-text { display: flex; flex-direction: column; gap: 2px; }
+.upload-header-title { font-size: 18px; font-weight: 700; color: #0a0a0a; letter-spacing: -0.01em; }
+.upload-header-subtitle { font-size: 12px; color: #8a8a8a; }
+
+.upload-form-card {
+  background: #f8f9fb;
+  border: 1px solid #edf0f5;
+  border-radius: 10px;
+  padding: 18px 20px 8px;
+  margin-bottom: 14px;
+}
+.upload-form-card-title {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 13px; font-weight: 600; color: #0a0a0a;
+  margin-bottom: 14px;
+}
+.upload-form-card-title svg { color: #2563eb; flex-shrink: 0; }
+
+.upload-zone {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 8px; padding: 28px 20px;
+  border: 1.5px dashed #d4d4d4; border-radius: 10px;
+  background: #ffffff; cursor: pointer;
+  transition: all 0.15s ease;
+}
+.upload-zone:hover { border-color: #2563eb; background: #f0f6ff; }
+.upload-zone.has-file { border-style: solid; border-color: #d4d4d4; background: #f8f9fb; padding: 14px 20px; cursor: default; }
+.upload-zone.has-file:hover { border-color: #d4d4d4; background: #f8f9fb; }
+
+.upload-zone-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #f0f6ff; color: #2563eb; }
+.upload-zone:hover .upload-zone-icon { background: #e0eeff; }
+.upload-zone-text { font-size: 13px; font-weight: 600; color: #0a0a0a; }
+.upload-zone-hint { font-size: 11px; color: #a3a3a3; }
+
+.upload-file-preview { display: flex; align-items: center; gap: 12px; width: 100%; }
+.upload-file-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #eff4ff; color: #2563eb; flex-shrink: 0; }
+.upload-file-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
+.upload-file-name { font-size: 13px; font-weight: 600; color: #0a0a0a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.upload-file-size { font-size: 11px; color: #8a8a8a; }
+.upload-file-remove { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: #a3a3a3; cursor: pointer; flex-shrink: 0; }
+.upload-file-remove:hover { background: #fef2f2; color: #dc2626; }
+
+/* ==================== Distribution helpers ==================== */
+.target-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.target-type-preset { width: 120px; }
+.target-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.target-select { flex: 1; min-width: 180px; }
+.target-all { flex: 1; display: flex; align-items: center; min-width: 180px; }
+.w-full { width: 100%; }
+
+/* ==================== Responsive ==================== */
+@media (max-width: 1200px) {
+  .hero-stats { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (max-width: 960px) {
+  .hero-stats { grid-template-columns: repeat(2, 1fr); }
+}
+
+@media (max-width: 640px) {
+  .hero-banner { padding: 20px; }
+  .hero-stats { grid-template-columns: 1fr; }
+  .hero-top { flex-direction: column; gap: 12px; }
+  .hero-edit-btn { width: 100%; }
+  .field-grid--2 { grid-template-columns: 1fr; }
 }
 </style>
diff --git a/frontend/src/views/documents/DocumentList.test.ts b/frontend/src/views/documents/DocumentList.test.ts
index a78fc646..333221c5 100644
--- a/frontend/src/views/documents/DocumentList.test.ts
+++ b/frontend/src/views/documents/DocumentList.test.ts
@@ -28,4 +28,24 @@ describe("DocumentList permissions", () => {
     expect(source).not.toContain("<el-dialog");
     expect(source).not.toContain('append-to=".layout-main .content-wrapper"');
   });
+
+  it("guards dirty drawer closes while allowing mask close", () => {
+    const source = readSource();
+
+    expect(source).toContain("useDrawerDirtyGuard");
+    expect(source).toContain('const editorDirtyGuard = useDrawerDirtyGuard(() => editorForm);');
+    expect(source).toContain(':close-on-click-modal="true"');
+    expect(source).toContain(':before-close="editorDirtyGuard.beforeClose"');
+    expect(source).toContain("editorDirtyGuard.syncBaseline()");
+  });
+
+  it("uses the shared datetime formatter and splits updated-at into two lines", () => {
+    const source = readSource();
+
+    expect(source).toContain("displayDateTime");
+    expect(source).toContain("splitDateTime(row.updated_at).date");
+    expect(source).toContain("splitDateTime(row.updated_at).time");
+    expect(source).toContain("const displayValue = displayDateTime(value)");
+    expect(source).not.toContain('replace("T", " ").replace("Z", "")');
+  });
 });
diff --git a/frontend/src/views/documents/DocumentList.vue b/frontend/src/views/documents/DocumentList.vue
index 063851a2..abe5b69b 100644
--- a/frontend/src/views/documents/DocumentList.vue
+++ b/frontend/src/views/documents/DocumentList.vue
@@ -70,17 +70,22 @@
           </el-table-column>
           <el-table-column prop="updated_at" :label="TEXT.modules.fileVersionManagement.columns.updatedAt" show-overflow-tooltip>
             <template #default="{ row }">
-              <span class="text-secondary">{{ formatDate(row.updated_at) }}</span>
+              <span class="text-secondary datetime-stack">
+                <span>{{ splitDateTime(row.updated_at).date }}</span>
+                <span class="datetime-stack__time">{{ splitDateTime(row.updated_at).time }}</span>
+              </span>
             </template>
           </el-table-column>
-          <el-table-column v-if="canUpdate || canDelete" :label="TEXT.modules.fileVersionManagement.columns.actions" width="140" align="center">
+          <el-table-column v-if="canUpdate || canDelete" :label="TEXT.modules.fileVersionManagement.columns.actions" width="130" fixed="right">
             <template #default="{ row }">
-              <el-button v-if="canUpdate" link type="primary" :disabled="isInactiveSite(row.site_id)" @click.stop="openEdit(row)">
-                {{ TEXT.common.actions.edit }}
-              </el-button>
-              <el-button v-if="canDelete" link type="danger" :disabled="isInactiveSite(row.site_id)" @click.stop="confirmDelete(row)">
-                 {{ TEXT.common.actions.delete }}
-              </el-button>
+              <div class="cell-actions">
+                <el-button v-if="canUpdate" link type="primary" size="small" :disabled="isInactiveSite(row.site_id)" @click.stop="openEdit(row)">
+                  {{ TEXT.common.actions.edit }}
+                </el-button>
+                <el-button v-if="canDelete" link type="danger" size="small" :disabled="isInactiveSite(row.site_id)" @click.stop="confirmDelete(row)">
+                   {{ TEXT.common.actions.delete }}
+                </el-button>
+              </div>
             </template>
           </el-table-column>
           <template #empty>
@@ -96,6 +101,7 @@
       direction="rtl"
       size="620px"
       :close-on-click-modal="true"
+      :before-close="editorDirtyGuard.beforeClose"
       :show-close="false"
       destroy-on-close
       class="document-editor-drawer"
@@ -167,9 +173,10 @@ import { fetchSites } from "../../api/sites";
 import { useStudyStore } from "../../store/study";
 import { useAuthStore } from "../../store/auth";
 import { usePermission } from "../../utils/permission";
+import { useDrawerDirtyGuard } from "../../utils/drawerDirtyGuard";
 import type { DocumentSummary } from "../../types/documents";
 import type { Site } from "../../types/api";
-import { displayEnum, displayText } from "../../utils/display";
+import { displayDateTime, displayEnum, displayText } from "../../utils/display";
 import { TEXT } from "../../locales";
 
 const route = useRoute();
@@ -239,6 +246,7 @@ const editorForm = reactive({
   site_id: "",
   doc_type: "",
 });
+const editorDirtyGuard = useDrawerDirtyGuard(() => editorForm);
 
 const editorRules: FormRules = {
   doc_no: [{ required: true, message: TEXT.common.messages.required, trigger: "blur" }],
@@ -318,6 +326,7 @@ const openCreate = () => {
   }
   editingDocumentId.value = "";
   resetEditorForm();
+  editorDirtyGuard.syncBaseline();
   editorVisible.value = true;
 };
 
@@ -339,6 +348,7 @@ const openEdit = (row: DocumentSummary) => {
     doc_type: row.doc_type || "",
   });
   editorFormRef.value?.clearValidate();
+  editorDirtyGuard.syncBaseline();
   editorVisible.value = true;
 };
 
@@ -416,9 +426,10 @@ const confirmDelete = async (row: DocumentSummary) => {
   }
 };
 
-const formatDate = (value?: string | null) => {
-  if (!value) return TEXT.common.fallback;
-  return value.replace("T", " ").replace("Z", "").split(".")[0];
+const splitDateTime = (value?: string | null) => {
+  const displayValue = displayDateTime(value);
+  const [date, time] = displayValue.split(" ");
+  return { date, time: time || "" };
 };
 
 onMounted(() => {
@@ -461,10 +472,6 @@ watch(
   width: 132px;
 }
 
-.ctms-table :deep(.el-table__inner-wrapper::before) {
-  display: none;
-}
-
 .filter-spacer {
   flex: 1;
 }
@@ -524,6 +531,93 @@ watch(
   gap: 10px;
 }
 
+/* ==================== Table Styling (DrugShipments style) ==================== */
+.document-table-section {
+  background: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.04),
+    0 2px 8px rgba(0, 0, 0, 0.02);
+}
+
+.ctms-table {
+  --el-table-border-color: transparent;
+  --el-table-row-hover-bg-color: #f8f9fb;
+}
+
+.ctms-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
+}
+
+.ctms-table :deep(th.el-table__cell) {
+  background: #f4f5f7;
+  color: #2a2a2a;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 14px 14px;
+  border-bottom: 2px solid #e0e0e0 !important;
+}
+
+.ctms-table :deep(td.el-table__cell) {
+  padding: 12px 14px;
+  color: #0a0a0a;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.ctms-table :deep(.el-table__body tr) {
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.ctms-table :deep(.font-semibold) {
+  font-weight: 600;
+  color: #0a0a0a;
+}
+
+.ctms-table :deep(.text-secondary) {
+  color: #8a8a8a;
+}
+
+.ctms-table :deep(.datetime-stack) {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 1.25;
+  white-space: nowrap;
+}
+
+.ctms-table :deep(.datetime-stack__time) {
+  color: #9a9a9a;
+  font-size: 11px;
+}
+
+.ctms-table :deep(.el-tag) {
+  font-weight: 600;
+  border: none;
+}
+
+.ctms-table :deep(.cell-actions) {
+  display: flex;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.ctms-table :deep(.cell-actions .el-button) {
+  font-size: 13px;
+  padding: 0;
+  height: auto;
+}
+
+.ctms-table :deep(.cell-actions .el-button + .el-button) {
+  margin-left: 0;
+}
 </style>
 
 <style>
diff --git a/frontend/src/views/drug/ShipmentDetail.vue b/frontend/src/views/drug/ShipmentDetail.vue
index 096abbb5..26455645 100644
--- a/frontend/src/views/drug/ShipmentDetail.vue
+++ b/frontend/src/views/drug/ShipmentDetail.vue
@@ -1,60 +1,138 @@
 <template>
   <div class="page">
-    <div class="unified-shell">
-      <section v-loading="loading" class="unified-section">
-        <div class="unified-section-header">
-          <div>
-            <div class="ctms-section-title">{{ TEXT.modules.drugShipments.detailTitle }}</div>
-            <div class="detail-subtitle">{{ TEXT.modules.drugShipments.detailSubtitle }}</div>
-          </div>
-          <div class="actions">
-            <el-button v-if="canUpdateShipment" type="primary" :disabled="isReadOnly" @click="goEdit" class="header-action-btn">
+    <StateError v-if="errorMessage" :description="errorMessage">
+      <template #action>
+        <el-button type="primary" @click="load">{{ TEXT.common.actions.retry }}</el-button>
+      </template>
+    </StateError>
+
+    <StateLoading v-else-if="loading" :rows="6" />
+
+    <template v-else>
+      <!-- ==================== Hero ==================== -->
+      <div class="hero-banner">
+        <div class="hero-bg-pattern" />
+        <div class="hero-content">
+          <div class="hero-top">
+            <div class="hero-title-group">
+              <h2 class="hero-title">{{ TEXT.modules.drugShipments.detailTitle }}</h2>
+              <span :class="['hero-status-badge', `hero-status-badge--${statusType(detail.status)}`]">
+                {{ displayEnum(TEXT.enums.shipmentStatus, detail.status) }}
+              </span>
+            </div>
+            <el-button v-if="canUpdateShipment" type="primary" :disabled="isReadOnly" @click="goEdit" class="hero-edit-btn">
               <el-icon class="el-icon--left"><Edit /></el-icon>
               {{ TEXT.common.actions.edit }}
             </el-button>
           </div>
+          <div class="hero-stats">
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--site">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">{{ TEXT.common.fields.site }}</span>
+                <span class="stat-value">{{ detail.site_name || TEXT.common.fallback }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap" :class="detail.direction === 'SEND' ? 'stat-icon-wrap--send' : 'stat-icon-wrap--return'">
+                <svg v-if="detail.direction === 'SEND'" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
+                <svg v-else width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">{{ TEXT.common.fields.direction }}</span>
+                <span class="stat-value stat-value--direction">{{ displayEnum(TEXT.enums.shipmentDirection, detail.direction) }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--qty">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">{{ TEXT.common.fields.quantity }}</span>
+                <span class="stat-value">{{ detail.quantity ?? TEXT.common.fallback }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--batch">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">{{ TEXT.common.fields.batchNo }}</span>
+                <span class="stat-value stat-value--mono">{{ detail.batch_no || TEXT.common.fallback }}</span>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
 
-        <div class="section-title-row">
-          <span class="ctms-section-title">{{ TEXT.common.labels.basicInfo }}</span>
-          <el-tag :type="statusType(detail.status)" effect="plain" round>
-            {{ displayEnum(TEXT.enums.shipmentStatus, detail.status) }}
-          </el-tag>
+      <!-- ==================== 运输记录 ==================== -->
+      <div class="section-card">
+        <div class="section-card-header">
+          <div class="section-card-header-left">
+            <span class="accent-dot accent-dot--blue" />
+            <span class="section-card-title">{{ TEXT.modules.drugShipments.recordLabel }}</span>
+          </div>
+          <div v-if="detail.tracking_no" class="badge">{{ detail.tracking_no }}</div>
         </div>
-        <el-descriptions :column="2" border>
-          <el-descriptions-item :label="TEXT.common.fields.site">{{ detail.site_name || TEXT.common.fallback }}</el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.direction">
-            <el-tag :class="['type-tag', detail.direction === 'SEND' ? 'type-send' : 'type-return']" effect="light">
-              {{ displayEnum(TEXT.enums.shipmentDirection, detail.direction) }}
-            </el-tag>
-          </el-descriptions-item>
-        </el-descriptions>
-      </section>
+        <div class="section-divider" />
+        <div class="section-card-body">
+          <div class="stat-grid">
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.common.fields.trackingNo }}</span>
+              <span class="stat-tile-value stat-tile-value--mono">{{ detail.tracking_no || TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.common.fields.carrier }}</span>
+              <span class="stat-tile-value">{{ detail.carrier || TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.common.fields.shipDate }}</span>
+              <span class="stat-tile-value">{{ displayDate(detail.ship_date) }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.common.fields.receiveDate }}</span>
+              <span class="stat-tile-value">{{ displayDate(detail.receive_date) }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.common.fields.quantity }}</span>
+              <span class="stat-tile-value">{{ detail.quantity ?? TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.common.fields.batchNo }}</span>
+              <span class="stat-tile-value stat-tile-value--mono">{{ detail.batch_no || TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile stat-tile--span2">
+              <span class="stat-tile-label">{{ TEXT.common.fields.remark }}</span>
+              <span class="stat-tile-value stat-tile-value--muted">{{ detail.remark || TEXT.common.fallback }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <section class="unified-section">
-        <div class="ctms-section-title section-title-inline">{{ TEXT.modules.drugShipments.recordLabel }}</div>
-        <el-descriptions :column="2" border>
-          <el-descriptions-item :label="TEXT.common.fields.trackingNo">{{ detail.tracking_no || TEXT.common.fallback }}</el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.carrier">{{ detail.carrier || TEXT.common.fallback }}</el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.shipDate">{{ displayDate(detail.ship_date) }}</el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.receiveDate">{{ displayDate(detail.receive_date) }}</el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.quantity">{{ detail.quantity ?? TEXT.common.fallback }}</el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.batchNo">{{ detail.batch_no || TEXT.common.fallback }}</el-descriptions-item>
-          <el-descriptions-item :label="TEXT.common.fields.remark" :span="2">{{ detail.remark || TEXT.common.fallback }}</el-descriptions-item>
-        </el-descriptions>
-      </section>
+      <!-- ==================== 附件 ==================== -->
+      <div class="section-card">
+        <div class="section-card-header">
+          <div class="section-card-header-left">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#22c55e;flex-shrink:0"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+            <span class="section-card-title">{{ TEXT.common.labels.attachments }}</span>
+          </div>
+        </div>
+        <div class="section-divider" />
+        <div class="section-card-body">
+          <AttachmentList
+            v-if="shipmentId && studyId"
+            :study-id="studyId"
+            entity-type="drug_shipment"
+            :entity-id="shipmentId"
+            :readonly="isReadOnly"
+            :hide-uploader="true"
+          />
+        </div>
+      </div>
+    </template>
 
-      <section class="unified-section attachment-section">
-        <AttachmentList
-          v-if="shipmentId && studyId"
-          :study-id="studyId"
-          entity-type="drug_shipment"
-          :entity-id="shipmentId"
-          :readonly="isReadOnly"
-          :hide-uploader="true"
-        />
-      </section>
-    </div>
     <DrugShipmentEditorDrawer
       v-model="editorVisible"
       :shipment-id="shipmentId || ''"
@@ -76,6 +154,8 @@ import { fetchSites } from "../../api/sites";
 import { displayDate, displayEnum } from "../../utils/display";
 import AttachmentList from "../../components/attachments/AttachmentList.vue";
 import DrugShipmentEditorDrawer from "./DrugShipmentEditorDrawer.vue";
+import StateError from "../../components/StateError.vue";
+import StateLoading from "../../components/StateLoading.vue";
 import { isApiPermissionAllowed } from "../../utils/apiPermissionValue";
 import { isSystemAdmin } from "../../utils/roles";
 import { TEXT } from "../../locales";
@@ -84,6 +164,7 @@ const route = useRoute();
 const auth = useAuthStore();
 const study = useStudyStore();
 const loading = ref(false);
+const errorMessage = ref("");
 const editorVisible = ref(false);
 const shipmentId = computed(() => route.params.shipmentId as string | undefined);
 const studyId = computed(() => study.currentStudy?.id || "");
@@ -129,6 +210,7 @@ const loadSites = async () => {
 const load = async () => {
   if (!studyId.value || !shipmentId.value) return;
   loading.value = true;
+  errorMessage.value = "";
   try {
     const { data } = await getDrugShipment(studyId.value, shipmentId.value);
     Object.assign(detail, {
@@ -150,7 +232,7 @@ const load = async () => {
       pageTitle: detail.tracking_no || detail.batch_no || TEXT.modules.drugShipments.detailTitle,
     });
   } catch (e: any) {
-    ElMessage.error(e?.response?.data?.detail || e?.response?.data?.message || TEXT.common.messages.loadFailed);
+    errorMessage.value = e?.response?.data?.detail || e?.response?.data?.message || TEXT.common.messages.loadFailed;
   } finally {
     loading.value = false;
   }
@@ -174,16 +256,11 @@ const handleEditorSaved = () => {
 
 const statusType = (status: string) => {
   switch (status) {
-    case "PENDING":
-      return "info";
-    case "IN_TRANSIT":
-      return "primary";
-    case "SIGNED":
-      return "success";
-    case "EXCEPTION":
-      return "danger";
-    default:
-      return "info";
+    case "PENDING": return "info";
+    case "IN_TRANSIT": return "primary";
+    case "SIGNED": return "success";
+    case "EXCEPTION": return "danger";
+    default: return "info";
   }
 };
 
@@ -202,56 +279,347 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+/* ==================== Base ==================== */
 .page {
   display: flex;
   flex-direction: column;
-  gap: 0;
-}
-
-.detail-subtitle {
-  margin-top: 4px;
-  color: var(--ctms-text-secondary);
-  font-size: 13px;
-}
-
-.attachment-section {
+  gap: 16px;
   padding: 0;
+  background: transparent;
 }
 
-.actions {
+/* ==================== Hero Banner ==================== */
+.hero-banner {
+  position: relative;
+  background: #fff7ee;
+  border: 1px solid rgba(180, 110, 50, 0.10);
+  border-radius: 8px;
+  padding: 28px 32px 24px;
+  overflow: hidden;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.7) inset,
+    0 1px 2px rgba(180, 110, 50, 0.04);
+}
+
+.hero-bg-pattern { display: none; }
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-top {
   display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+}
+
+.hero-title-group {
+  display: flex;
+  align-items: center;
   gap: 12px;
 }
 
-.header-action-btn {
-  height: 36px;
-  border-radius: 8px;
-  padding: 0 16px;
+.hero-title {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 600;
+  color: #3d2410;
+  letter-spacing: 0.005em;
 }
 
-.section-title-row {
+.hero-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 12px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 20px;
+  letter-spacing: 0.02em;
+  backdrop-filter: blur(8px);
+}
+
+.hero-status-badge--info {
+  background: rgba(255, 255, 255, 0.55);
+  color: rgba(80, 45, 20, 0.55);
+  border: 1px solid rgba(180, 110, 50, 0.12);
+}
+
+.hero-status-badge--primary {
+  background: rgba(255, 255, 255, 0.55);
+  color: rgba(80, 45, 20, 0.78);
+  border: 1px solid rgba(180, 110, 50, 0.18);
+}
+
+.hero-status-badge--success {
+  background: rgba(255, 255, 255, 0.55);
+  color: rgba(80, 45, 20, 0.78);
+  border: 1px solid rgba(180, 110, 50, 0.18);
+}
+
+.hero-status-badge--danger {
+  background: rgba(255, 240, 240, 0.70);
+  color: rgba(160, 40, 40, 0.75);
+  border: 1px solid rgba(200, 80, 80, 0.18);
+}
+
+.hero-edit-btn {
+  height: 34px;
+  border-radius: 6px;
+  padding: 0 18px;
+  font-weight: 500;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(180, 110, 50, 0.18);
+  color: #3d2410;
+  backdrop-filter: blur(10px) saturate(140%);
+  -webkit-backdrop-filter: blur(10px) saturate(140%);
+  transition: all 0.2s ease;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 1px 2px rgba(180, 110, 50, 0.06);
+}
+
+.hero-edit-btn:hover {
+  background: #ffffff;
+  border-color: rgba(180, 110, 50, 0.30);
+  color: #3d2410;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 4px 12px rgba(212, 130, 60, 0.14);
+}
+
+.hero-edit-btn:active {
+  transform: scale(0.97);
+}
+
+.hero-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.hero-stat {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.62) 100%);
+  border: 1px solid rgba(180, 110, 50, 0.10);
+  border-radius: 6px;
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  transition: all 0.25s ease;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 1px 2px rgba(180, 110, 50, 0.04);
+}
+
+.hero-stat:hover {
+  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.92) 100%);
+  border-color: rgba(180, 110, 50, 0.18);
+  transform: translateY(-1px);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 6px 16px rgba(212, 130, 60, 0.10);
+}
+
+.stat-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  border: 1px solid rgba(180, 110, 50, 0.06);
+}
+
+.stat-icon-wrap--site { background: rgba(212, 145, 80, 0.14); color: #b06b30; }
+.stat-icon-wrap--send { background: rgba(220, 160, 90, 0.18); color: #b87532; }
+.stat-icon-wrap--return { background: rgba(168, 158, 80, 0.16); color: #8a7028; }
+.stat-icon-wrap--qty { background: rgba(196, 116, 92, 0.14); color: #a85838; }
+.stat-icon-wrap--batch { background: rgba(196, 100, 100, 0.14); color: #aa4444; }
+
+.stat-body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.stat-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: rgba(80, 45, 20, 0.50);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.stat-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3d2410;
+  word-break: break-all;
+}
+
+.stat-value--direction {
+  font-weight: 600;
+}
+
+.stat-value--mono {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  letter-spacing: 0.01em;
+}
+
+/* ==================== Section Cards ==================== */
+.section-card {
+  background: #ffffff;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: none;
+}
+
+.section-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 12px;
+  padding: 18px 24px 0;
 }
 
-.section-title-inline {
-  margin-bottom: 12px;
+.section-card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.type-tag {
+.section-card-title {
+  font-size: 14px;
   font-weight: 600;
-  border: none;
+  color: #0a0a0a;
+  letter-spacing: -0.01em;
 }
 
-.type-send {
-  background-color: #fff7ed !important;
-  color: #ea580c !important;
+.badge {
+  padding: 2px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #525252;
+  background: #f5f5f5;
+  border-radius: 4px;
+  letter-spacing: 0.01em;
 }
 
-.type-return {
-  background-color: #fefce8 !important;
-  color: #ca8a04 !important;
+.section-divider {
+  display: none;
+}
+
+.section-card-body {
+  padding: 20px 24px 24px;
+}
+
+/* ==================== Accent Dots ==================== */
+.accent-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.accent-dot--blue { background: #3b82f6; }
+.accent-dot--green { background: #22c55e; }
+
+/* ==================== Stat Grid ==================== */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+}
+
+.stat-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+  background: #fafbfc;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+}
+
+.stat-tile:hover {
+  background: #f5f6f8;
+  border-color: #e5e5e5;
+}
+
+.stat-tile--span2 {
+  grid-column: span 2;
+}
+
+.stat-tile-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: #8a8a8a;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.stat-tile-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0a0a0a;
+  word-break: break-all;
+}
+
+.stat-tile-value--mono {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 13px;
+}
+
+.stat-tile-value--muted {
+  font-weight: 500;
+  color: #525252;
+}
+
+/* ==================== Responsive ==================== */
+@media (max-width: 960px) {
+  .hero-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .stat-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .hero-banner {
+    padding: 20px;
+  }
+  .hero-stats {
+    grid-template-columns: 1fr;
+  }
+  .hero-top {
+    flex-direction: column;
+    gap: 12px;
+  }
+  .hero-edit-btn {
+    width: 100%;
+  }
+  .stat-grid {
+    grid-template-columns: 1fr;
+  }
+  .stat-tile--span2 {
+    grid-column: auto;
+  }
+  .section-card-header {
+    padding: 14px 16px 0;
+  }
+  .section-divider {
+    margin: 12px 16px 0;
+  }
+  .section-card-body {
+    padding: 16px;
+  }
 }
 </style>
diff --git a/frontend/src/views/fees/ContractFeeDetail.vue b/frontend/src/views/fees/ContractFeeDetail.vue
index be95fa0a..70cb5be6 100644
--- a/frontend/src/views/fees/ContractFeeDetail.vue
+++ b/frontend/src/views/fees/ContractFeeDetail.vue
@@ -9,111 +9,137 @@
     <StateLoading v-else-if="loading" :rows="6" />
 
     <template v-else>
-      <el-card class="detail-card unified-shell" shadow="never">
-        <template #header>
-          <div class="card-header actions-header">
-            <span class="header-title">{{ TEXT.modules.feeContracts.contractInfoTitle }}</span>
-            <div class="actions">
-              <el-button v-if="canWrite" type="primary" :disabled="isReadOnly" @click="goEdit" class="header-action-btn copy-btn">
-                <el-icon class="el-icon--left"><Edit /></el-icon>
-                {{ TEXT.common.actions.edit }}
-              </el-button>
-            </div>
+      <!-- ==================== 合同信息 ==================== -->
+      <div class="section-card">
+        <div class="section-card-header">
+          <div class="section-card-header-left">
+            <span class="accent-dot accent-dot--blue" />
+            <span class="section-card-title">{{ TEXT.modules.feeContracts.contractInfoTitle }}</span>
           </div>
-        </template>
-        <div class="info-grid">
-          <div class="info-item info-item--highlight">
-            <span class="info-label">{{ TEXT.modules.feeContracts.contractAmount }}</span>
-            <span class="info-value amount-value">{{ formatAmountWan(detail.contract_amount) }}<span class="amount-unit">万</span></span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">{{ TEXT.common.fields.site }}</span>
-            <span class="info-value">{{ centerName || TEXT.common.fallback }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">{{ TEXT.common.fields.contractNo }}</span>
-            <span class="info-value">{{ detail.contract_no || TEXT.common.fallback }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">{{ TEXT.common.fields.signedDate }}</span>
-            <span class="info-value">{{ displayDate(detail.signed_date) }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">{{ TEXT.modules.feeContracts.contractCases }}</span>
-            <span class="info-value">{{ detail.contract_cases ?? TEXT.common.fallback }}</span>
-          </div>
-          <div class="info-item">
-            <span class="info-label">{{ TEXT.modules.feeContracts.actualCases }}</span>
-            <span class="info-value">{{ detail.actual_cases ?? TEXT.common.fallback }}</span>
-          </div>
-          <div class="info-item info-item--full">
-            <span class="info-label">{{ TEXT.common.fields.remark }}</span>
-            <span class="info-value">{{ detail.remark || TEXT.common.fallback }}</span>
+          <div class="section-card-header-right">
+            <div v-if="detail.contract_no" class="contract-badge">{{ detail.contract_no }}</div>
+            <el-button v-if="canWrite" type="primary" :disabled="isReadOnly" @click="goEdit" class="header-edit-btn">
+              <el-icon class="el-icon--left"><Edit /></el-icon>
+              {{ TEXT.common.actions.edit }}
+            </el-button>
           </div>
         </div>
-      </el-card>
-
-      <el-card class="section-card unified-shell" shadow="never">
-        <template #header>
-          <div class="card-header">
-            <span class="header-title">{{ TEXT.modules.feeContracts.paymentTitle }}</span>
+        <div class="section-divider" />
+        <div class="section-card-body">
+          <div class="stat-grid">
+            <div class="stat-tile stat-tile--highlight">
+              <span class="stat-tile-label">{{ TEXT.modules.feeContracts.contractAmount }}</span>
+              <span class="stat-tile-value stat-tile-value--lg">{{ formatAmountWan(detail.contract_amount) }}<span class="stat-tile-unit">万</span></span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.common.fields.site }}</span>
+              <span class="stat-tile-value">{{ centerName || TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.common.fields.signedDate }}</span>
+              <span class="stat-tile-value">{{ displayDate(detail.signed_date) }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.modules.feeContracts.contractCases }}</span>
+              <span class="stat-tile-value">{{ detail.contract_cases ?? TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">{{ TEXT.modules.feeContracts.actualCases }}</span>
+              <span class="stat-tile-value">{{ detail.actual_cases ?? TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile stat-tile--span2">
+              <span class="stat-tile-label">{{ TEXT.common.fields.remark }}</span>
+              <span class="stat-tile-value stat-tile-value--muted">{{ detail.remark || TEXT.common.fallback }}</span>
+            </div>
           </div>
-        </template>
-        <el-table :data="detail.payments" style="width: 100%" :header-cell-style="{ background: '#f8f9fb' }" table-layout="fixed">
-          <el-table-column :label="TEXT.modules.feeContracts.paymentSeqColumn" min-width="180">
-            <template #default="scope">
-              <span class="seq-tag">{{ TEXT.modules.feeContracts.paymentSeq }}{{ scope.row.seq }}{{ TEXT.modules.feeContracts.paymentSeqUnit }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column :label="TEXT.common.fields.amount" align="left" header-align="left" min-width="180">
-            <template #default="scope">
-              <span class="amount-text">{{ formatAmountWan(scope.row.amount) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column :label="TEXT.modules.feeContracts.paidFlag" min-width="180">
-            <template #default="scope">
-              <div v-if="scope.row.is_paid" class="status-cell">
-                <el-tag type="success" size="small">{{ TEXT.modules.feeContracts.isPaid }}</el-tag>
-                <span class="status-date">{{ displayDate(scope.row.paid_date) }}</span>
-              </div>
-              <span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column :label="TEXT.modules.feeContracts.verifiedFlag" min-width="180">
-            <template #default="scope">
-              <div v-if="scope.row.is_verified" class="status-cell">
-                <el-tag type="info" size="small">{{ TEXT.modules.feeContracts.isVerified }}</el-tag>
-                <span class="status-date">{{ displayDate(scope.row.verified_date) }}</span>
-              </div>
-              <span v-else class="text-muted">{{ TEXT.common.fallback }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column :label="TEXT.common.fields.remark" min-width="180" show-overflow-tooltip>
-            <template #default="scope">{{ scope.row.remark || TEXT.common.fallback }}</template>
-          </el-table-column>
-          <template #empty>
-            <div class="table-empty">{{ TEXT.modules.feeContracts.paymentEmpty }}</div>
-          </template>
-        </el-table>
-      </el-card>
+        </div>
+      </div>
 
-      <el-card class="section-card unified-shell" shadow="never">
-        <template #header>
-          <div class="card-header">
-            <span class="header-title">{{ TEXT.modules.feeContracts.attachmentTitle }}</span>
+      <!-- ==================== 分期付款 Timeline ==================== -->
+      <div class="section-card">
+        <div class="section-card-header">
+          <div class="section-card-header-left">
+            <span class="accent-dot accent-dot--amber" />
+            <span class="section-card-title">{{ TEXT.modules.feeContracts.paymentTitle }}</span>
           </div>
-        </template>
-        <AttachmentList
-          v-if="contractId"
-          :study-id="studyId"
-          entity-type="contract_fee"
-          :entity-id="contractId"
-          :entity-groups="attachmentGroups"
-          :readonly="isReadOnly"
-          :hide-uploader="true"
-          :refresh-key="attachmentRefreshKey"
-        />
-      </el-card>
+          <el-tag v-if="detail.payments?.length" size="small" class="payment-count-tag" round>{{ detail.payments.length }} {{ TEXT.modules.feeContracts.paymentSeqUnit }}</el-tag>
+        </div>
+        <div class="section-divider" />
+        <div class="section-card-body section-card-body--no-padding">
+          <div v-if="!detail.payments?.length" class="empty-state">
+            <div class="empty-icon">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+            </div>
+            <span class="empty-text">{{ TEXT.modules.feeContracts.paymentEmpty }}</span>
+          </div>
+          <div v-else class="timeline">
+            <div v-for="(payment, index) in detail.payments" :key="index" class="tl-row">
+              <div class="tl-track">
+                <div :class="['tl-node', payment.is_paid ? 'tl-node--done' : 'tl-node--todo']">
+                  <svg v-if="payment.is_paid" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
+                  <span v-else class="tl-node-num">{{ (index as number) + 1 }}</span>
+                </div>
+                <div v-if="showPaymentLine(index)" class="tl-stem" />
+              </div>
+              <div :class="['tl-panel', payment.is_paid ? 'tl-panel--paid' : '']">
+                <div class="tl-panel-top">
+                  <div class="tl-panel-seq">
+                    {{ TEXT.modules.feeContracts.paymentSeq }}{{ (index as number) + 1 }}{{ TEXT.modules.feeContracts.paymentSeqUnit }}
+                  </div>
+                  <div class="tl-panel-amount">
+                    {{ formatAmountWan(payment.amount) }}<span class="amount-unit-sm">万</span>
+                  </div>
+                </div>
+                <div class="tl-panel-body">
+                  <div class="tl-meta-row">
+                    <div class="tl-meta">
+                      <span class="tl-meta-label">{{ TEXT.modules.feeContracts.paidFlag }}</span>
+                      <span :class="['tl-pill', payment.is_paid ? 'tl-pill--paid' : 'tl-pill--none']">
+                        {{ payment.is_paid ? TEXT.modules.feeContracts.isPaid : TEXT.common.fallback }}
+                      </span>
+                      <span v-if="payment.is_paid" class="tl-meta-date">{{ displayDate(payment.paid_date) }}</span>
+                    </div>
+                    <div class="tl-meta">
+                      <span class="tl-meta-label">{{ TEXT.modules.feeContracts.verifiedFlag }}</span>
+                      <span :class="['tl-pill', payment.is_verified ? 'tl-pill--verified' : 'tl-pill--none']">
+                        {{ payment.is_verified ? TEXT.modules.feeContracts.isVerified : TEXT.common.fallback }}
+                      </span>
+                      <span v-if="payment.is_verified" class="tl-meta-date">{{ displayDate(payment.verified_date) }}</span>
+                    </div>
+                  </div>
+                  <div v-if="payment.remark" class="tl-note">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+                    {{ payment.remark }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ==================== 附件区 ==================== -->
+      <div class="section-card">
+        <div class="section-card-header">
+          <div class="section-card-header-left">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#22c55e;flex-shrink:0"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+            <span class="section-card-title">{{ TEXT.modules.feeContracts.attachmentTitle }}</span>
+          </div>
+        </div>
+        <div class="section-divider" />
+        <div class="section-card-body">
+          <AttachmentList
+            v-if="contractId"
+            :study-id="studyId"
+            entity-type="contract_fee"
+            :entity-id="contractId"
+            :entity-groups="attachmentGroups"
+            :readonly="isReadOnly"
+            :hide-uploader="true"
+            :refresh-key="attachmentRefreshKey"
+          />
+        </div>
+      </div>
     </template>
 
     <ContractFeeEditorDrawer
@@ -227,6 +253,10 @@ const load = async () => {
   }
 };
 
+const showPaymentLine = (i: any): boolean => {
+  return Array.isArray(detail.payments) && Number(i) < detail.payments.length - 1;
+};
+
 const formatAmountWan = (value: any) => {
   const numberValue = Number(value);
   if (Number.isNaN(numberValue)) return TEXT.common.fallback;
@@ -257,157 +287,414 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+/* ==================== Base ==================== */
 .page {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 4px 0;
-}
-
-.actions {
-  display: flex;
-  gap: 12px;
-}
-
-.header-action-btn {
-  height: 34px;
-  border-radius: 8px;
-  padding: 0 16px;
-}
-
-.detail-card, .section-card {
-  border-radius: 14px;
-  border: 1px solid var(--unified-shell-divider, #eaf0f8);
-  overflow: hidden;
-}
-
-.section-card :deep(.el-card__body) {
   padding: 0;
+  background: transparent;
 }
 
-.card-header {
-  padding: 4px 0;
+/* ==================== Section Cards ==================== */
+.section-card {
+  background: #ffffff;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: none;
 }
 
-.actions-header {
+.section-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 18px 24px 0;
 }
 
-.header-title {
-  font-size: 15px;
-  font-weight: 700;
-  color: var(--unified-title-color, #0f2345);
-  border-left: 3px solid var(--el-color-primary);
-  padding-left: 10px;
+.section-card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.info-grid {
+.section-card-header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.section-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0a0a0a;
+  letter-spacing: -0.01em;
+}
+
+.section-divider {
+  display: none;
+}
+
+.section-card-body {
+  padding: 20px 24px 24px;
+}
+
+.section-card-body--no-padding {
+  padding: 0;
+}
+
+/* ==================== Accent Dots ==================== */
+.accent-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.accent-dot--blue { background: #3b82f6; }
+.accent-dot--amber { background: #f59e0b; }
+.accent-dot--green { background: #22c55e; }
+
+/* ==================== Contract Badge ==================== */
+.contract-badge {
+  padding: 2px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #525252;
+  background: #f5f5f5;
+  border-radius: 4px;
+  letter-spacing: 0.01em;
+}
+
+.header-edit-btn {
+  height: 32px;
+  border-radius: 8px;
+  padding: 0 14px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* ==================== Stat Tiles ==================== */
+.stat-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0;
-  padding: 20px 24px;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
 }
 
-.info-item {
+.stat-tile {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 14px 16px;
-  border-radius: 8px;
-  transition: background 0.15s ease;
+  gap: 4px;
+  padding: 12px 14px;
+  background: #fafbfc;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  transition: all 0.15s ease;
 }
 
-.info-item:hover {
-  background: #f8fafc;
+.stat-tile:hover {
+  background: #f5f6f8;
+  border-color: #e5e5e5;
 }
 
-.info-item--highlight {
-  background: linear-gradient(135deg, #f0f6ff 0%, #eef3fb 100%);
-  border-radius: 10px;
+.stat-tile--highlight {
+  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
+  border-color: #e0e8f8;
 }
 
-.info-item--highlight:hover {
-  background: linear-gradient(135deg, #e8f1ff 0%, #e6edfa 100%);
+.stat-tile--highlight:hover {
+  background: linear-gradient(135deg, #f0f6ff 0%, #e8f0ff 100%);
 }
 
-.info-item--full {
+.stat-tile--span2 {
   grid-column: 1 / -1;
 }
 
-.info-label {
-  font-size: 12px;
+.stat-tile-label {
+  font-size: 11px;
   font-weight: 500;
-  color: var(--unified-muted-color, #6f84a8);
-  letter-spacing: 0.02em;
+  color: #8a8a8a;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
 }
 
-.info-value {
+.stat-tile-value {
   font-size: 14px;
-  font-weight: 500;
-  color: var(--ctms-text-main);
+  font-weight: 600;
+  color: #0a0a0a;
   word-break: break-all;
-}
-
-.amount-value {
-  font-size: 22px;
-  font-weight: 700;
-  color: var(--ctms-primary);
   font-variant-numeric: tabular-nums;
 }
 
-.amount-unit {
-  font-size: 13px;
+.stat-tile-value--lg {
+  font-size: 22px;
+  font-weight: 700;
+  color: #2563eb;
+}
+
+.stat-tile-value--muted {
   font-weight: 500;
-  color: var(--unified-muted-color, #6f84a8);
+  color: #525252;
+}
+
+.stat-tile-unit {
+  font-size: 12px;
+  font-weight: 500;
+  color: #a3a3a3;
   margin-left: 2px;
 }
 
-.seq-tag {
-  color: var(--ctms-text-secondary);
-  font-size: 13px;
+/* ==================== Payment Count Tag ==================== */
+.payment-count-tag {
+  font-weight: 500;
+  border: 1px solid #e5e5e5;
+  color: #525252;
+  background: #fafafa;
 }
 
-.status-cell {
+/* ==================== Timeline ==================== */
+.timeline {
+  padding: 20px 24px 4px;
+}
+
+.tl-row {
+  display: flex;
+  gap: 16px;
+}
+
+.tl-track {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
+  align-items: center;
+  width: 28px;
+  flex-shrink: 0;
 }
 
-.status-date {
-  font-size: 12px;
-  color: var(--ctms-text-secondary);
-  font-family: var(--el-font-family);
-}
-
-.text-muted {
-  color: var(--ctms-text-placeholder, #94a3b8);
-  font-size: 13px;
-}
-
-.table-empty {
-  min-height: 120px;
+.tl-node {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #8a97ab;
-  font-size: 13px;
-  font-weight: 500;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  z-index: 1;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
 }
 
+.tl-node--done {
+  background: #3b82f6;
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
+}
+
+.tl-node--todo {
+  background: #ffffff;
+  color: #a3a3a3;
+  border: 1.5px solid #d4d4d4;
+}
+
+.tl-node-num {
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.tl-stem {
+  width: 1.5px;
+  flex: 1;
+  min-height: 16px;
+  background: #e5e5e5;
+}
+
+.tl-panel {
+  flex: 1;
+  padding: 14px 18px;
+  margin-bottom: 16px;
+  background: #ffffff;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
+}
+
+.tl-panel:hover {
+  border-color: #d4d4d4;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
+}
+
+.tl-panel--paid {
+  border-left: 2.5px solid #22c55e;
+}
+
+.tl-panel-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.tl-panel-seq {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0a0a0a;
+}
+
+.tl-panel-amount {
+  font-size: 18px;
+  font-weight: 700;
+  color: #2563eb;
+  font-variant-numeric: tabular-nums;
+}
+
+.tl-panel-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.tl-meta-row {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.tl-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.tl-meta-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #8a8a8a;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.tl-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 9px;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 20px;
+  line-height: 1.6;
+}
+
+.tl-pill--paid {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.tl-pill--verified {
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.tl-pill--none {
+  background: #f5f5f5;
+  color: #a3a3a3;
+}
+
+.tl-meta-date {
+  font-size: 11px;
+  color: #8a8a8a;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+.tl-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: 12px;
+  color: #737373;
+  background: #fafafa;
+  padding: 8px 12px;
+  border-radius: 6px;
+  line-height: 1.5;
+}
+
+.tl-note svg {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: #a3a3a3;
+}
+
+.amount-unit-sm {
+  font-size: 11px;
+  font-weight: 500;
+  color: #a3a3a3;
+  margin-left: 1px;
+}
+
+/* ==================== Empty State ==================== */
+.empty-state {
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: #f5f5f5;
+  color: #c4c4c4;
+}
+
+.empty-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: #a3a3a3;
+}
+
+/* ==================== Responsive ==================== */
 @media (max-width: 960px) {
-  .info-grid {
+  .stat-grid {
     grid-template-columns: repeat(2, 1fr);
-    padding: 16px;
   }
 }
 
 @media (max-width: 640px) {
-  .info-grid {
+  .page {
+    padding: 0;
+  }
+  .stat-grid {
     grid-template-columns: 1fr;
-    padding: 12px;
+  }
+  .stat-tile--span2 {
+    grid-column: auto;
+  }
+  .section-card-header {
+    padding: 14px 16px 0;
+  }
+  .section-divider {
+    margin: 12px 16px 0;
+  }
+  .section-card-body {
+    padding: 16px;
+  }
+  .timeline {
+    padding: 16px 16px 0;
+  }
+  .tl-panel {
+    padding: 12px 14px;
+    margin-bottom: 12px;
+  }
+  .tl-meta-row {
+    flex-direction: column;
+    gap: 8px;
   }
 }
 </style>
diff --git a/frontend/src/views/materials/MaterialEquipmentDetail.vue b/frontend/src/views/materials/MaterialEquipmentDetail.vue
index aa042651..ca16d4af 100644
--- a/frontend/src/views/materials/MaterialEquipmentDetail.vue
+++ b/frontend/src/views/materials/MaterialEquipmentDetail.vue
@@ -1,66 +1,161 @@
 <template>
   <div class="page">
-    <div v-if="study.currentStudy" class="unified-shell">
-      <section v-loading="loading" class="unified-section">
-        <div class="unified-section-header">
-          <div>
-            <div class="ctms-section-title">{{ TEXT.modules.materialEquipment.detailTitle }}</div>
-            <div class="detail-subtitle">{{ TEXT.modules.materialEquipment.detailSubtitle }}</div>
-          </div>
-          <div class="actions">
-            <el-button v-if="canUpdateEquipment" type="primary" @click="goEdit" class="header-action-btn">
+    <StateEmpty v-if="!study.currentStudy" :description="TEXT.common.empty.selectProject" />
+
+    <template v-else>
+      <StateError v-if="errorMessage" :description="errorMessage">
+        <template #action>
+          <el-button type="primary" @click="load">{{ TEXT.common.actions.retry }}</el-button>
+        </template>
+      </StateError>
+
+      <StateLoading v-else-if="loading" :rows="6" />
+
+      <template v-else>
+      <!-- ==================== Hero ==================== -->
+      <div class="hero-banner">
+        <div class="hero-bg-pattern" />
+        <div class="hero-content">
+          <div class="hero-top">
+            <div class="hero-title-group">
+              <h2 class="hero-title">{{ TEXT.modules.materialEquipment.detailTitle }}</h2>
+              <span :class="['hero-status-badge', detail.need_calibration ? 'hero-status-badge--warn' : 'hero-status-badge--info']">
+                {{ detail.need_calibration ? "需要校准" : "无需校准" }}
+              </span>
+            </div>
+            <el-button v-if="canUpdateEquipment" type="primary" @click="goEdit" class="hero-edit-btn">
               <el-icon class="el-icon--left"><Edit /></el-icon>
               {{ TEXT.common.actions.edit }}
             </el-button>
           </div>
+          <div class="hero-stats">
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--name">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">设备名称</span>
+                <span class="stat-value">{{ detail.name || TEXT.common.fallback }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--spec">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">规格型号</span>
+                <span class="stat-value">{{ detail.spec_model || TEXT.common.fallback }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--brand">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">品牌</span>
+                <span class="stat-value">{{ detail.brand || TEXT.common.fallback }}</span>
+              </div>
+            </div>
+            <div class="hero-stat">
+              <div class="stat-icon-wrap stat-icon-wrap--origin">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 7 8 11.7z"/></svg>
+              </div>
+              <div class="stat-body">
+                <span class="stat-label">产地</span>
+                <span class="stat-value">{{ detail.origin || TEXT.common.fallback }}</span>
+              </div>
+            </div>
+          </div>
         </div>
+      </div>
 
-        <div class="section-title-row">
-          <span class="ctms-section-title">{{ TEXT.common.labels.basicInfo }}</span>
-          <el-tag :type="detail.need_calibration ? 'warning' : 'info'" effect="plain" round>
-            {{ detail.need_calibration ? "需要校准" : "无需校准" }}
-          </el-tag>
+      <!-- ==================== 基本信息 ==================== -->
+      <div class="section-card">
+        <div class="section-card-header">
+          <div class="section-card-header-left">
+            <span class="accent-dot accent-dot--blue" />
+            <span class="section-card-title">{{ TEXT.common.labels.basicInfo }}</span>
+          </div>
         </div>
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="设备名称">{{ displayValue(detail.name) }}</el-descriptions-item>
-          <el-descriptions-item label="规格型号">{{ displayValue(detail.spec_model) }}</el-descriptions-item>
-          <el-descriptions-item label="单位">{{ displayValue(detail.unit) }}</el-descriptions-item>
-          <el-descriptions-item label="品牌">{{ displayValue(detail.brand) }}</el-descriptions-item>
-          <el-descriptions-item label="产地">{{ displayValue(detail.origin) }}</el-descriptions-item>
-        </el-descriptions>
-      </section>
+        <div class="section-divider" />
+        <div class="section-card-body">
+          <div class="stat-grid">
+            <div class="stat-tile">
+              <span class="stat-tile-label">设备名称</span>
+              <span class="stat-tile-value">{{ detail.name || TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">规格型号</span>
+              <span class="stat-tile-value stat-tile-value--mono">{{ detail.spec_model || TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">单位</span>
+              <span class="stat-tile-value">{{ detail.unit || TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">品牌</span>
+              <span class="stat-tile-value">{{ detail.brand || TEXT.common.fallback }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">产地</span>
+              <span class="stat-tile-value">{{ detail.origin || TEXT.common.fallback }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <section class="unified-section">
-        <div class="ctms-section-title section-title-inline">校准设置</div>
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="是否需要校准">
-            {{ detail.need_calibration ? TEXT.common.labels.yes : TEXT.common.labels.no }}
-          </el-descriptions-item>
-          <el-descriptions-item label="校准周期(天)">
-            {{ detail.need_calibration ? displayValue(detail.calibration_cycle_days) : TEXT.common.fallback }}
-          </el-descriptions-item>
-        </el-descriptions>
-      </section>
+      <!-- ==================== 校准设置 ==================== -->
+      <div class="section-card">
+        <div class="section-card-header">
+          <div class="section-card-header-left">
+            <span class="accent-dot accent-dot--amber" />
+            <span class="section-card-title">校准设置</span>
+          </div>
+        </div>
+        <div class="section-divider" />
+        <div class="section-card-body">
+          <div class="stat-grid">
+            <div class="stat-tile">
+              <span class="stat-tile-label">是否需要校准</span>
+              <span class="stat-tile-value">{{ detail.need_calibration ? "是" : "否" }}</span>
+            </div>
+            <div class="stat-tile">
+              <span class="stat-tile-label">校准周期</span>
+              <span class="stat-tile-value">{{ detail.need_calibration ? (detail.calibration_cycle_days ?? TEXT.common.fallback) + ' 天' : TEXT.common.fallback }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
 
-      <section class="unified-section">
-        <div class="ctms-section-title section-title-inline">{{ TEXT.common.labels.attachments }}</div>
-        <AttachmentList
-          v-if="equipmentId && studyId"
-          :study-id="studyId"
-          entity-type="material_equipment"
-          :entity-id="equipmentId"
-          :hide-uploader="true"
-          :refresh-key="attachmentRefreshKey"
-        />
-      </section>
-      <MaterialEquipmentEditorDrawer
-        v-model="editorVisible"
-        :equipment-id="equipmentId || ''"
-        :readonly="!canUpdateEquipment"
-        @saved="handleEditorSaved"
-      />
-    </div>
-    <StateEmpty v-else :description="TEXT.common.empty.selectProject" />
+      <!-- ==================== 附件 ==================== -->
+      <div class="section-card">
+        <div class="section-card-header">
+          <div class="section-card-header-left">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#22c55e;flex-shrink:0"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+            <span class="section-card-title">{{ TEXT.common.labels.attachments }}</span>
+          </div>
+        </div>
+        <div class="section-divider" />
+        <div class="section-card-body">
+          <AttachmentList
+            v-if="equipmentId && studyId"
+            :study-id="studyId"
+            entity-type="material_equipment"
+            :entity-id="equipmentId"
+            :hide-uploader="true"
+            :refresh-key="attachmentRefreshKey"
+          />
+        </div>
+      </div>
+      </template>
+    </template>
+
+    <MaterialEquipmentEditorDrawer
+      v-model="editorVisible"
+      :equipment-id="equipmentId || ''"
+      :readonly="!canUpdateEquipment"
+      @saved="handleEditorSaved"
+    />
   </div>
 </template>
 
@@ -71,8 +166,10 @@ import { ElMessage } from "element-plus";
 import { Edit } from "@element-plus/icons-vue";
 import { getMaterialEquipment } from "../../api/materialEquipments";
 import AttachmentList from "../../components/attachments/AttachmentList.vue";
-import StateEmpty from "../../components/StateEmpty.vue";
 import MaterialEquipmentEditorDrawer from "./MaterialEquipmentEditorDrawer.vue";
+import StateEmpty from "../../components/StateEmpty.vue";
+import StateError from "../../components/StateError.vue";
+import StateLoading from "../../components/StateLoading.vue";
 import { useAuthStore } from "../../store/auth";
 import { useStudyStore } from "../../store/study";
 import { isApiPermissionAllowed } from "../../utils/apiPermissionValue";
@@ -83,6 +180,7 @@ const route = useRoute();
 const auth = useAuthStore();
 const study = useStudyStore();
 const loading = ref(false);
+const errorMessage = ref("");
 const editorVisible = ref(false);
 const attachmentRefreshKey = ref(0);
 const equipmentId = computed(() => route.params.equipmentId as string | undefined);
@@ -100,11 +198,6 @@ const detail = reactive({
   calibration_cycle_days: null as number | null,
 });
 
-const displayValue = (value?: string | number | null) => {
-  if (value === null || value === undefined || value === "") return TEXT.common.fallback;
-  return value;
-};
-
 const goEdit = () => {
   if (!canUpdateEquipment.value) {
     ElMessage.warning("权限不足");
@@ -121,6 +214,7 @@ const handleEditorSaved = () => {
 const load = async () => {
   if (!studyId.value || !equipmentId.value) return;
   loading.value = true;
+  errorMessage.value = "";
   try {
     const { data } = await getMaterialEquipment(studyId.value, equipmentId.value);
     Object.assign(detail, {
@@ -137,7 +231,7 @@ const load = async () => {
       pageTitle: detail.name || TEXT.modules.materialEquipment.detailTitle,
     });
   } catch (e: any) {
-    ElMessage.error(e?.response?.data?.detail || e?.response?.data?.message || TEXT.common.messages.loadFailed);
+    errorMessage.value = e?.response?.data?.detail || e?.response?.data?.message || TEXT.common.messages.loadFailed;
   } finally {
     loading.value = false;
   }
@@ -154,37 +248,304 @@ onMounted(load);
 </script>
 
 <style scoped>
+/* ==================== Base ==================== */
 .page {
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 16px;
+  padding: 0;
+  background: transparent;
 }
 
-.detail-subtitle {
-  margin-top: 4px;
-  color: var(--ctms-text-secondary);
-  font-size: 13px;
+/* ==================== Hero Banner ==================== */
+.hero-banner {
+  position: relative;
+  background: #fff7ee;
+  border: 1px solid rgba(180, 110, 50, 0.10);
+  border-radius: 8px;
+  padding: 28px 32px 24px;
+  overflow: hidden;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.7) inset,
+    0 1px 2px rgba(180, 110, 50, 0.04);
 }
 
-.section-title-row {
+.hero-bg-pattern { display: none; }
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-top {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
+  align-items: flex-start;
+  margin-bottom: 20px;
 }
 
-.actions {
+.hero-title-group {
   display: flex;
+  align-items: center;
   gap: 12px;
 }
 
-.header-action-btn {
-  height: 36px;
-  border-radius: 8px;
-  padding: 0 16px;
+.hero-title {
+  margin: 0;
+  font-size: 19px;
+  font-weight: 600;
+  color: #3d2410;
+  letter-spacing: 0.005em;
 }
 
-.section-title-inline {
-  margin-bottom: 12px;
+.hero-status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 12px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 20px;
+  letter-spacing: 0.02em;
+  backdrop-filter: blur(8px);
+}
+
+.hero-status-badge--warn {
+  background: rgba(255, 255, 255, 0.55);
+  color: rgba(80, 45, 20, 0.78);
+  border: 1px solid rgba(180, 110, 50, 0.18);
+}
+
+.hero-status-badge--info {
+  background: rgba(255, 255, 255, 0.55);
+  color: rgba(80, 45, 20, 0.55);
+  border: 1px solid rgba(180, 110, 50, 0.12);
+}
+
+.hero-edit-btn {
+  height: 34px;
+  border-radius: 6px;
+  padding: 0 18px;
+  font-weight: 500;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(180, 110, 50, 0.18);
+  color: #3d2410;
+  backdrop-filter: blur(10px) saturate(140%);
+  -webkit-backdrop-filter: blur(10px) saturate(140%);
+  transition: all 0.2s ease;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 1px 2px rgba(180, 110, 50, 0.06);
+}
+
+.hero-edit-btn:hover {
+  background: #ffffff;
+  border-color: rgba(180, 110, 50, 0.30);
+  color: #3d2410;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 4px 12px rgba(212, 130, 60, 0.14);
+}
+
+.hero-edit-btn:active {
+  transform: scale(0.97);
+}
+
+.hero-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+}
+
+.hero-stat {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.62) 100%);
+  border: 1px solid rgba(180, 110, 50, 0.10);
+  border-radius: 6px;
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  transition: all 0.25s ease;
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 1px 2px rgba(180, 110, 50, 0.04);
+}
+
+.hero-stat:hover {
+  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.92) 100%);
+  border-color: rgba(180, 110, 50, 0.18);
+  transform: translateY(-1px);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 1) inset,
+    0 6px 16px rgba(212, 130, 60, 0.10);
+}
+
+.stat-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  flex-shrink: 0;
+  border: 1px solid rgba(180, 110, 50, 0.06);
+}
+
+.stat-icon-wrap--name { background: rgba(212, 145, 80, 0.14); color: #b06b30; }
+.stat-icon-wrap--spec { background: rgba(168, 158, 80, 0.16); color: #8a7028; }
+.stat-icon-wrap--brand { background: rgba(196, 116, 92, 0.14); color: #a85838; }
+.stat-icon-wrap--origin { background: rgba(220, 160, 90, 0.18); color: #b87532; }
+
+.stat-body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.stat-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: rgba(80, 45, 20, 0.50);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.stat-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #3d2410;
+  word-break: break-all;
+}
+
+/* ==================== Section Cards ==================== */
+.section-card {
+  background: #ffffff;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: none;
+}
+
+.section-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18px 24px 0;
+}
+
+.section-card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.section-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0a0a0a;
+  letter-spacing: -0.01em;
+}
+
+.section-divider {
+  display: none;
+}
+
+.section-card-body {
+  padding: 20px 24px 24px;
+}
+
+/* ==================== Accent Dots ==================== */
+.accent-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.accent-dot--blue { background: #3b82f6; }
+.accent-dot--amber { background: #f59e0b; }
+.accent-dot--green { background: #22c55e; }
+
+/* ==================== Stat Grid ==================== */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.stat-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+  background: #fafbfc;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  transition: all 0.15s ease;
+}
+
+.stat-tile:hover {
+  background: #f5f6f8;
+  border-color: #e5e5e5;
+}
+
+.stat-tile-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: #8a8a8a;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.stat-tile-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #0a0a0a;
+  word-break: break-all;
+}
+
+.stat-tile-value--mono {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 13px;
+}
+
+/* ==================== Responsive ==================== */
+@media (max-width: 960px) {
+  .hero-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .stat-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .hero-banner {
+    padding: 20px;
+  }
+  .hero-stats {
+    grid-template-columns: 1fr;
+  }
+  .hero-top {
+    flex-direction: column;
+    gap: 12px;
+  }
+  .hero-edit-btn {
+    width: 100%;
+  }
+  .stat-grid {
+    grid-template-columns: 1fr;
+  }
+  .section-card-header {
+    padding: 14px 16px 0;
+  }
+  .section-divider {
+    margin: 12px 16px 0;
+  }
+  .section-card-body {
+    padding: 16px;
+  }
 }
 </style>