优化表格页面布局样式，统一表格容器与分页、操作栏结构，调整相关 .vue 页面表格结构以适配新样式。\n\n- 优化 src/static/common.less 的表格、分页、操作栏样式结构\n- 调整 src/views/api/Hitokoto.vue、Music.vue、PhotoWall.vue、SourceImage.vue、Article.vue、SystemConfig.vue、SystemRole.vue、SystemUser.vue 的表格结构，统一使用 .table-container 类\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/static/common.less

@@ -63,9 +63,9 @@ html, body, #app, .layout {
 }
 
 /* ===== 主内容区 ===== */
-.layout-main {
+.el-main.layout-main {
-  padding: 0 !important;
+  --el-main-padding: 0;
-  display: flex !important;
+  display: flex;
   flex-direction: column;
   background: var(--el-fill-color);
 
@@ -85,11 +85,10 @@ html, body, #app, .layout {
   }
   > .layout-copy {
     text-align: center;
-    padding: 8px 0 12px;
+    padding-bottom: 12px;
     color: var(--el-text-color-placeholder);
     font-size: var(--el-font-size-extra-small);
   }
-}
 
   /* ===== 页面布局（用于带分页的表格页面）===== */
   .page-wrapper {
@@ -98,16 +97,7 @@ html, body, #app, .layout {
     height: 100%;
   }
 
-/* ===== 表格美化 ===== */
   .table-container {
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-  margin-bottom: 12px;
-  display: flex;
-  flex-direction: column;
-
-  .el-table {
     // CSS 变量覆盖：表头背景/文字色、行悬停色、边框色、正文色
     --el-table-header-bg-color: var(--el-fill-color-light);
     --el-table-header-text-color: var(--el-text-color-regular);
@@ -119,7 +109,9 @@ html, body, #app, .layout {
     flex: 1;
     border-radius: var(--el-border-radius-base);
     overflow: hidden;
-    border: 1px solid var(--el-border-color-lighter);
+    border-left: 1px solid var(--el-border-color-lighter);
+    border-right: 1px solid var(--el-border-color-lighter);
+    border-top: 1px solid var(--el-border-color-lighter);
 
     &::before {
       display: none;
@@ -141,8 +133,12 @@ html, body, #app, .layout {
       padding: 4px 6px;
     }
   }
+  /* ===== 分页 ===== */
+  .page-container {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
   }
-
   /* ===== 操作栏 ===== */
   .btn-container {
     margin-bottom: 14px;
@@ -151,15 +147,8 @@ html, body, #app, .layout {
 
     .search-btn {
       margin-left: auto;
-    display: flex;
     }
   }
-
-/* ===== 分页 ===== */
-.page-container {
-  padding: 16px 0 4px;
-  display: flex;
-  justify-content: center;
 }
 
 /* ===== 表单弹窗 ===== */

src/views/api/Hitokoto.vue

@@ -26,8 +26,7 @@
       <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
-  <div class="table-container">
+  <el-table class="table-container" :data="hitokotoData" v-loading="loading" stripe @selection-change="dataSelect">
-    <el-table :data="hitokotoData" v-loading="loading" stripe @selection-change="dataSelect">
     <el-table-column type="selection" width="55" />
     <el-table-column prop="type" label="类型" width="180">
       <template #default="scope">
@@ -44,7 +43,6 @@
       </template>
     </el-table-column>
   </el-table>
-  </div>
   <div class="page-container">
     <el-pagination background 
       :page-sizes="store.state.pageSizeOpts"

src/views/api/Music.vue

@@ -30,8 +30,7 @@
       <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
-  <div class="table-container">
+  <el-table class="table-container" :data="musicData" v-loading="loading" stripe @selection-change="dataSelect">
-    <el-table :data="musicData" v-loading="loading" stripe @selection-change="dataSelect">
     <el-table-column type="selection" width="55" />
     <el-table-column prop="name" label="名称" show-overflow-tooltip role=""/>
     <el-table-column prop="ext" label="类型" width="80" />
@@ -79,7 +78,6 @@
       </template>
     </el-table-column>
   </el-table>
-  </div>
   <div class="page-container">
     <el-pagination background 
       :page-sizes="store.state.pageSizeOpts"

src/views/api/PhotoWall.vue

@@ -50,8 +50,7 @@
     </div>
   </div>
    
-  <div class="table-container">
+  <el-table class="table-container" :data="photowallData" v-loading="loading" stripe @selection-change="dataSelect">
-    <el-table :data="photowallData" v-loading="loading" stripe @selection-change="dataSelect">
     <el-table-column type="selection" width="55" />
     <el-table-column prop="name" label="文件名" />
     <el-table-column prop="md5" label="md5" width="300" />
@@ -64,7 +63,6 @@
       </template>
     </el-table-column>
   </el-table>
-  </div>
   <div class="page-container">
     <el-pagination background 
       :page-sizes="store.state.pageSizeOpts"

src/views/api/SourceImage.vue

@@ -20,8 +20,7 @@
     </el-upload>
     <el-button type="danger" @click="deleteAll" style="vertical-align: bottom">批量删除</el-button>
   </div>
-  <div class="table-container">
+  <el-table class="table-container" :data="sourceImageData" v-loading="loading" stripe @selection-change="dataSelect">
-    <el-table :data="sourceImageData" v-loading="loading" stripe @selection-change="dataSelect">
     <el-table-column type="selection" width="55" />
     <el-table-column prop="hash" label="md5" width="300" />
     <el-table-column prop="size" label="文件大小" >
@@ -47,7 +46,6 @@
       </template>
     </el-table-column>
   </el-table>
-  </div>
   <div class="page-container">
     <el-pagination background 
       :page-sizes="store.state.pageSizeOpts"

src/views/system/Article.vue

@@ -57,8 +57,7 @@
       <el-tree :props="treeProps" :load="loadTreeData" lazy highlight-current @node-click="articlePreview" />
     </el-col>
     <el-col :span="20" style="height: 100%; display: flex; flex-direction: column;">
-      <div class="table-container" style="margin-bottom: 0;">
+      <el-table class="table-container" :data="articleData" v-loading="loading" stripe @selection-change="dataSelect" height="100%">
-      <el-table :data="articleData" v-loading="loading" stripe @selection-change="dataSelect" height="100%">
         <el-table-column type="selection" width="55" />
         <el-table-column prop="title" label="标题" />
         <el-table-column prop="path" label="路径" >
@@ -101,7 +100,6 @@
           @current-change="pageChange">
         </el-pagination>
       </div>
-      </div>
     </el-col>
   </el-row>
   <el-drawer

src/views/system/SystemConfig.vue

@@ -12,8 +12,7 @@
       <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
-  <div class="table-container">
+  <el-table class="table-container" :data="systemConfigData" v-loading="loading" stripe>
-    <el-table :data="systemConfigData" v-loading="loading" stripe>
     <el-table-column type="expand">
       <template #default="scope">
         <pre style="margin:0 10px;">{{ JSON.stringify(scope.row.value, null, ' ') }}</pre>
@@ -43,7 +42,6 @@
       </template>
     </el-table-column>
   </el-table>
-  </div>
   <el-dialog v-model="addModal" :title="modalTitle" >
     <system-config-add ref="addForm" :formData="formData" />
     <template #footer>

src/views/system/SystemRole.vue

@@ -12,8 +12,7 @@
         <el-button @click="reset" icon="RefreshLeft">重置</el-button>
       </div>
     </div>
-    <div class="table-container">
+    <el-table class="table-container" :data="systemRoleData" v-loading="loading" stripe>
-      <el-table :data="systemRoleData" v-loading="loading" stripe>
       <el-table-column prop="name" label="角色名称" />
       <el-table-column prop="methods" label="允许的请求类型" >
         <template #default="scope">
@@ -37,7 +36,6 @@
         </template>
       </el-table-column>
     </el-table>
-    </div>
     <div class="page-container">
       <el-pagination background 
         :page-sizes="store.state.pageSizeOpts"

src/views/system/SystemUser.vue

@@ -12,8 +12,7 @@
       <el-button @click="reset" icon="RefreshLeft">重置</el-button>
     </div>
   </div>
-  <div class="table-container">
+  <el-table class="table-container" :data="systemUserData" v-loading="loading" stripe>
-    <el-table :data="systemUserData" v-loading="loading" stripe>
     <el-table-column prop="username" label="用户名" />
     <el-table-column prop="realname" label="昵称" />
     <el-table-column prop="createdAt" label="创建时间" >
@@ -33,7 +32,6 @@
       </template>
     </el-table-column>
   </el-table>
-  </div>
   <div class="page-container">
     <el-pagination background
       :page-sizes="store.state.pageSizeOpts"