立项配置页初步优化

frontend/src/views/documents/DocumentDetail.vue

@@ -1,43 +1,44 @@
 <template>
-  <div class="ctms-page">
-    <div class="ctms-page-header">
-      <div>
-        <h1 class="ctms-page-title">
-          {{ detail.title || TEXT.modules.fileVersionManagement.title }}
-        </h1>
-        <p class="ctms-page-subtitle">
-          <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>
-        </p>
-      </div>
-      <div class="ctms-page-actions">
-        <el-button @click="goBack">
-          <el-icon class="el-icon--left"><ArrowLeft /></el-icon>
-          {{ TEXT.common.actions.back }}
-        </el-button>
-      </div>
-    </div>
+  <div class="page">
+    <div class="unified-shell">
+      <section class="unified-section" v-loading="loading">
+        <div class="unified-section-header">
+          <div>
+            <div class="ctms-section-title">
+              {{ detail.title || TEXT.modules.fileVersionManagement.title }}
+            </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="ctms-section-actions">
+            <el-button @click="goBack">
+              <el-icon class="el-icon--left"><ArrowLeft /></el-icon>
+              {{ TEXT.common.actions.back }}
+            </el-button>
+          </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>
 
-    <el-card class="ctms-section-card" v-loading="loading">
-      <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>
-    </el-card>
-
-    <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="ctms-tabs">
+      <section class="unified-section">
+        <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>
@@ -48,7 +49,7 @@
             </el-button>
           </div>
         </div>
-        <el-card class="ctms-table-card">
+        <el-card class="ctms-table-card unified-shell">
           <el-table :data="detail.version_timeline" v-loading="versionLoading" class="ctms-table">
             <el-table-column prop="version_no" :label="TEXT.modules.fileVersionManagement.fields.versionNo" width="120">
                <template #default="{ row }">
@@ -106,7 +107,7 @@
             </el-button>
           </div>
         </div>
-        <el-card class="ctms-table-card">
+        <el-card class="ctms-table-card unified-shell">
           <el-table :data="distributions" v-loading="distributionLoading" class="ctms-table">
             <el-table-column :label="TEXT.modules.fileVersionManagement.fields.targetType" width="120">
               <template #default="{ row }">
@@ -127,7 +128,9 @@
         </el-card>
       </el-tab-pane>
 
-    </el-tabs>
+        </el-tabs>
+      </section>
+    </div>
 
     <el-dialog v-model="uploadVisible" :title="TEXT.modules.fileVersionManagement.dialog.uploadTitle" width="520px" destroy-on-close class="ctms-dialog">
       <el-form ref="uploadFormRef" :model="uploadForm" :rules="uploadRules" label-width="110px" class="ctms-form">
@@ -671,6 +674,19 @@ watch(
 </script>
 
 <style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.doc-meta-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 .text-secondary {
   color: var(--ctms-text-secondary);
 }

frontend/src/views/documents/DocumentList.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="ctms-page">
-
-    <el-card shadow="never" class="main-content-card">
-      <div class="filter-container">
+  <div class="page">
+    <el-card shadow="never" class="main-content-card unified-shell">
+      <div class="filter-container unified-action-bar">
         <el-form :inline="true" :model="filters" class="filter-form">
           <el-form-item label="" class="filter-item-form">
             <el-select v-model="filters.scope_type" :placeholder="TEXT.modules.fileVersionManagement.filters.scope" clearable class="filter-select-comp">
@@ -29,60 +28,62 @@
           </el-button>
         </el-form>
       </div>
-      <el-table
-        :data="sortedItems"
-        v-loading="loading"
-        @row-click="handleRowClick"
-        :row-class-name="documentRowClass"
-        class="ctms-table"
-      >
-        <el-table-column prop="title" :label="TEXT.modules.fileVersionManagement.columns.title" min-width="200">
-          <template #default="{ row }">
-            <span class="font-semibold">{{ row.title }}</span>
+      <section class="unified-section">
+        <el-table
+          :data="sortedItems"
+          v-loading="loading"
+          @row-click="handleRowClick"
+          :row-class-name="documentRowClass"
+          class="ctms-table"
+        >
+          <el-table-column prop="title" :label="TEXT.modules.fileVersionManagement.columns.title" min-width="200">
+            <template #default="{ row }">
+              <span class="font-semibold">{{ row.title }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.modules.fileVersionManagement.columns.scope" width="120">
+            <template #default="{ row }">
+              <el-tag
+                effect="plain"
+                :type="row.scope_type === 'SITE' ? 'warning' : 'success'"
+              >
+                {{ displayEnum(TEXT.enums.scopeType, row.scope_type) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.modules.fileVersionManagement.columns.site" min-width="160">
+            <template #default="{ row }">
+              <span>{{ displaySite(row.site_id) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.modules.fileVersionManagement.columns.docType" width="140">
+            <template #default="{ row }">
+              <el-tag effect="plain" type="info">{{ displayText(row.doc_type, TEXT.enums.documentType) }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.modules.fileVersionManagement.columns.currentVersion" width="140">
+            <template #default="{ row }">
+              <span v-if="row.current_effective_version">{{ row.current_effective_version.version_no }}</span>
+              <span v-else class="text-secondary">-</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="updated_at" :label="TEXT.modules.fileVersionManagement.columns.updatedAt" width="180">
+            <template #default="{ row }">
+              <span class="text-secondary">{{ formatDate(row.updated_at) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="TEXT.modules.fileVersionManagement.columns.actions" width="100" align="center">
+            <template #default="{ row }">
+              <el-button v-if="isAdmin" link type="danger" :disabled="isInactiveSite(row.site_id)" @click.stop="confirmDelete(row)">
+                 {{ TEXT.common.actions.delete }}
+              </el-button>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <el-empty :description="TEXT.modules.fileVersionManagement.emptyDescription" />
           </template>
-        </el-table-column>
-        <el-table-column :label="TEXT.modules.fileVersionManagement.columns.scope" width="120">
-          <template #default="{ row }">
-            <el-tag
-              effect="plain"
-              :type="row.scope_type === 'SITE' ? 'warning' : 'success'"
-            >
-              {{ displayEnum(TEXT.enums.scopeType, row.scope_type) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column :label="TEXT.modules.fileVersionManagement.columns.site" min-width="160">
-          <template #default="{ row }">
-            <span>{{ displaySite(row.site_id) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column :label="TEXT.modules.fileVersionManagement.columns.docType" width="140">
-          <template #default="{ row }">
-            <el-tag effect="plain" type="info">{{ displayText(row.doc_type, TEXT.enums.documentType) }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column :label="TEXT.modules.fileVersionManagement.columns.currentVersion" width="140">
-          <template #default="{ row }">
-            <span v-if="row.current_effective_version">{{ row.current_effective_version.version_no }}</span>
-            <span v-else class="text-secondary">-</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="updated_at" :label="TEXT.modules.fileVersionManagement.columns.updatedAt" width="180">
-          <template #default="{ row }">
-            <span class="text-secondary">{{ formatDate(row.updated_at) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column :label="TEXT.modules.fileVersionManagement.columns.actions" width="100" align="center">
-          <template #default="{ row }">
-            <el-button v-if="isAdmin" link type="danger" :disabled="isInactiveSite(row.site_id)" @click.stop="confirmDelete(row)">
-               {{ TEXT.common.actions.delete }}
-            </el-button>
-          </template>
-        </el-table-column>
-        <template #empty>
-          <el-empty :description="TEXT.modules.fileVersionManagement.emptyDescription" />
-        </template>
-      </el-table>
+        </el-table>
+      </section>
     </el-card>
 
     <el-dialog v-model="createVisible" :title="TEXT.modules.fileVersionManagement.dialog.createTitle" width="520px" destroy-on-close class="ctms-dialog">
@@ -339,17 +340,18 @@ watch(
 </script>
 
 <style scoped>
-.ctms-page {
+.page {
   display: flex;
   flex-direction: column;
+  gap: 0;
 }
 
 .main-content-card :deep(.el-card__body) {
-  padding: 20px;
+  padding: 0;
 }
 
 .filter-container {
-  margin-bottom: 20px;
+  margin-bottom: 0;
 }
 
 .filter-form {
@@ -365,7 +367,7 @@ watch(
 }
 
 .filter-select-comp {
-  width: 140px;
+  width: 132px;
 }
 
 .filter-spacer {
@@ -373,9 +375,9 @@ watch(
 }
 
 .header-action-btn {
-  height: 36px;
-  padding: 0 20px;
-  border-radius: 8px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 10px;
 }
 
 </style>