优化登录页UI、新增占满布局类

frontend/src/components/FaqCategoryPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="panel">
+  <div class="panel unified-shell">
     <div class="header">
       <span>{{ TEXT.common.labels.category }}</span>
       <div v-if="canMaintain">
@@ -23,7 +23,7 @@
       </el-menu-item>
     </el-menu>
     <FaqCategoryForm v-model="showForm" :category="editing" :is-admin="isAdmin" @success="emit('refresh')" />
-  </el-card>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -94,18 +94,24 @@ const onDelete = async (cat: FaqCategory) => {
 
 <style scoped>
 .panel {
-  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: hidden;
 }
+
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 12px;
+  padding: 0 0 12px;
   border-bottom: 1px solid #ebeef5;
 }
+
 .menu {
   max-height: calc(100vh - 240px);
   overflow: auto;
+  border-right: 0;
 }
 .actions {
   margin-left: auto;

frontend/src/components/FaqList.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-table :data="items" v-loading="loading" style="width: 100%" @row-click="onRowClick">
+  <el-table :data="items" v-loading="loading" style="width: 100%" class="faq-table" @row-click="onRowClick">
     <el-table-column prop="question" :label="TEXT.common.fields.question" min-width="200">
       <template #default="scope">
         <el-link type="primary" :underline="false" class="question-link">
@@ -131,6 +131,10 @@ const remove = async (row: FaqItem) => {
 </script>
 
 <style scoped>
+.faq-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
+}
+
 .danger {
   color: #f56c6c;
 }

frontend/src/components/Layout.vue

@@ -195,8 +195,8 @@
         <div class="content-wrapper">
           <router-view v-slot="{ Component }">
             <transition name="fade-transform" mode="out-in">
-              <div class="ctms-route-shell">
-                <component :is="Component" />
+              <div :key="route.fullPath" class="ctms-route-shell">
+                <component :is="Component" :key="route.fullPath" />
               </div>
             </transition>
           </router-view>
@@ -435,6 +435,9 @@ const onCommand = (cmd: string) => {
 <style scoped>
 .layout-container {
   height: 100vh;
+  height: 100dvh;
+  min-height: 100vh;
+  min-height: 100dvh;
   background-color: transparent;
 }
 
@@ -703,6 +706,7 @@ const onCommand = (cmd: string) => {
 .content-wrapper {
   padding: 6px 8px;
   min-height: calc(100vh - 52px);
+  min-height: calc(100dvh - 52px);
   background: #f7f8fb;
 }
 

frontend/src/components/ModulePlaceholder.vue

@@ -1,19 +1,21 @@
 <template>
-  <div class="module-page">
-    <div class="module-header">
-      <div>
-        <h1 class="module-title">{{ title }}</h1>
-        <p v-if="subtitle" class="module-subtitle">{{ subtitle }}</p>
-      </div>
-      <slot name="actions" />
-    </div>
-    <div class="module-content">
-      <div class="module-list">
-        <div class="module-list-header">
-          <span class="list-title">{{ listTitle }}</span>
-          <span class="list-note">{{ TEXT.common.empty.listPlaceholder }}</span>
+  <div class="module-page ctms-page-shell page--flush">
+    <div class="unified-shell">
+      <div class="module-header unified-action-bar bar--flush">
+        <div>
+          <h1 class="module-title">{{ title }}</h1>
+          <p v-if="subtitle" class="module-subtitle">{{ subtitle }}</p>
+        </div>
+        <slot name="actions" />
+      </div>
+      <div class="module-content unified-section section--flush">
+        <div class="module-list">
+          <div class="module-list-header">
+            <span class="list-title">{{ listTitle }}</span>
+            <span class="list-note">{{ TEXT.common.empty.listPlaceholder }}</span>
+          </div>
+          <StateEmpty :title="emptyTitle" :description="emptyDescription" />
         </div>
-        <StateEmpty :title="emptyTitle" :description="emptyDescription" />
       </div>
     </div>
   </div>
@@ -44,13 +46,7 @@ withDefaults(
 .module-page {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-}
-
-.module-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
+  gap: 0;
 }
 
 .module-title {
@@ -68,9 +64,9 @@ withDefaults(
 
 .module-list {
   background-color: #fff;
-  border: 1px solid var(--ctms-border-color);
-  border-radius: var(--ctms-radius);
-  padding: 20px;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
 }
 
 .module-list-header {

frontend/src/components/attachments/AttachmentList.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card>
+  <div class="attachment-list-panel unified-shell">
     <div class="header">
       <span>{{ headerTitle }}</span>
       <AttachmentUploader
@@ -10,7 +10,7 @@
         @uploaded="load"
       />
     </div>
-    <el-table :data="attachments" v-loading="loading" style="width: 100%">
+    <el-table :data="attachments" v-loading="loading" style="width: 100%" class="attachment-table">
       <el-table-column prop="filename" :label="TEXT.common.labels.filename" min-width="200" />
       <el-table-column :label="TEXT.common.labels.size" width="120">
         <template #default="scope">{{ formatFileSize(scope.row.file_size ?? scope.row.size) }}</template>
@@ -43,7 +43,7 @@
         </template>
       </el-table-column>
     </el-table>
-  </el-card>
+  </div>
 
   <el-dialog append-to=".layout-main .content-wrapper" v-model="previewVisible" :title="previewTitle" width="720px" :close-on-click-modal="false">
     <div v-if="previewError" class="preview-error">
@@ -236,11 +236,23 @@ watch(previewVisible, (visible) => {
 </script>
 
 <style scoped>
+.attachment-list-panel {
+  background: #ffffff;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid #eaf0f8;
+}
+
+.attachment-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
 }
 
 .preview-frame {

frontend/src/components/fees/FeeAttachmentPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="fee-attachments">
-    <el-card v-for="group in groups" :key="group.key" class="group-card">
+    <div v-for="group in groups" :key="group.key" class="group-card unified-shell">
       <div class="group-header">
         <div>
           <div class="group-title">{{ group.label }}</div>
@@ -28,7 +28,7 @@
         <div v-if="(grouped[group.key] || []).length === 0" class="group-empty">
           <StateEmpty :description="group.emptyText" />
         </div>
-        <el-table v-else :data="grouped[group.key]" style="width: 100%">
+        <el-table v-else :data="grouped[group.key]" style="width: 100%" class="group-table">
           <el-table-column prop="filename" :label="TEXT.common.labels.filename" min-width="160" />
           <el-table-column :label="TEXT.common.labels.size" width="110">
             <template #default="scope">{{ formatFileSize(scope.row.size || scope.row.file_size) }}</template>
@@ -59,7 +59,7 @@
           </el-table-column>
         </el-table>
       </template>
-    </el-card>
+    </div>
   </div>
 
   <el-dialog append-to=".layout-main .content-wrapper" v-model="previewVisible" :title="previewTitle" width="720px" :close-on-click-modal="false">
@@ -315,14 +315,21 @@ watch(previewVisible, (visible) => {
   gap: 12px;
 }
 
-
+.group-card {
+  background: #ffffff;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: hidden;
+}
 
 .group-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 8px;
   gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid #eaf0f8;
 }
 
 .group-title {
@@ -338,7 +345,11 @@ watch(previewVisible, (visible) => {
 }
 
 .group-empty {
-  padding: 0;
+  padding: 12px 16px 0;
+}
+
+.group-table :deep(.el-table__inner-wrapper::before) {
+  display: none;
 }
 
 /* Compact Empty State Override */