样式优化

src/static/common.less

@@ -1,15 +1,23 @@
-html,body,#app,.layout {
+html, body, #app, .layout {
   margin: 0;
   padding: 0;
   height: 100%;
 }
-.layout-header{
+
+/* ===== 顶部导航栏 ===== */
+.layout-header {
   color: #fff;
-  background-color: #515a6e;
+  background: linear-gradient(90deg, #1d2b45 0%, #2c3e60 100%);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
   position: relative;
+
   div.main-title {
     display: inline-block;
-    font-size: 22px;
+    font-size: 20px;
+    font-weight: var(--el-font-weight-primary);
+    letter-spacing: 1px;
     line-height: 60px;
   }
   .nav-btns-right {
@@ -20,45 +28,165 @@ html,body,#app,.layout {
     transform: translateY(-50%);
   }
 }
+
+/* ===== 侧边栏 ===== */
+.el-aside {
+  background: var(--el-fill-color-light);
+  border-right: 1px solid var(--el-border-color-light);
+
+  .el-menu {
+    border-right: none;
+    background: transparent;
+  }
+  .el-menu-item {
+    border-radius: var(--el-border-radius-base);
+    margin: 2px 8px;
+    width: calc(100% - 16px);
+
+    &.is-active {
+      background-color: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+      font-weight: var(--el-font-weight-primary);
+    }
+    &:hover {
+      background-color: var(--el-fill-color);
+    }
+  }
+  .el-sub-menu__title:hover {
+    background-color: var(--el-fill-color);
+  }
+}
+
+/* ===== 主内容区 ===== */
 .layout-main {
-  padding: 10px !important;
+  padding: 0 !important;
   display: flex !important;
   flex-direction: column;
-  > .layout-tabs{
+  background: var(--el-fill-color);
-    margin: 15px 15px 0 15px;
+
+  > .layout-tabs {
+    margin: 12px 16px 0;
   }
-  > .layout-content{
+  > .layout-content {
-    margin: 0 15px 15px 15px;
+    margin: 12px 16px;
     overflow: auto;
-    background: #fff;
+    background: var(--el-bg-color);
-    border: 1px solid #e1e1e1;
+    border-radius: 10px;
-    padding: 10px;
+    border: 1px solid var(--el-border-color-lighter);
+    padding: 20px;
     flex-grow: 1;
     flex-basis: 0;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   }
-  > .layout-copy{
+  > .layout-copy {
     text-align: center;
-    padding: 10px 0;
+    padding: 8px 0 12px;
-    color: #9ea7b4;
+    color: var(--el-text-color-placeholder);
+    font-size: var(--el-font-size-extra-small);
   }
 }
+
+/* ===== 表格美化 ===== */
 .table-container {
   position: relative;
-}
+
-.btn-container {
+  .el-table {
-  margin-bottom: 10px;
+    border-radius: var(--el-border-radius-base);
-  .search-btn {
+    overflow: hidden;
-    float: right;
+    border: 1px solid var(--el-border-color-lighter);
+
+    &::before {
+      display: none;
+    }
+    th.el-table__cell {
+      background: var(--el-fill-color-light);
+      color: var(--el-text-color-regular);
+      font-weight: var(--el-font-weight-primary);
+      font-size: var(--el-font-size-small);
+      border-bottom: 1px solid var(--el-border-color-lighter);
+    }
+    td.el-table__cell {
+      border-bottom: 1px solid var(--el-fill-color);
+      color: var(--el-text-color-primary);
+      font-size: var(--el-font-size-small);
+    }
+    .el-table__row:hover > td {
+      background: var(--el-color-primary-light-9) !important;
+    }
+    .el-table__row--striped > td {
+      background: var(--el-fill-color-lighter);
+    }
+    .el-button.is-link {
+      font-size: 16px;
+      padding: 4px 6px;
+    }
   }
 }
-.page-container {
+
-  padding: 10px;
+/* ===== 操作栏 ===== */
-  text-align: center;
+.btn-container {
+  margin-bottom: 14px;
+  display: flex;
+  align-items: center;
+
+  .search-btn {
+    margin-left: auto;
+    display: flex;
+    gap: 8px;
+  }
 }
+
+/* ===== 分页 ===== */
+.page-container {
+  padding: 16px 0 4px;
+  display: flex;
+  justify-content: center;
+}
+
+/* ===== 表单弹窗 ===== */
+.el-dialog {
+  border-radius: 12px;
+  overflow: hidden;
+
+  .el-dialog__header {
+    background: var(--el-fill-color-light);
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    padding: 16px 20px;
+    margin: 0;
+
+    .el-dialog__title {
+      font-size: var(--el-font-size-base);
+      font-weight: var(--el-font-weight-primary);
+      color: var(--el-text-color-primary);
+    }
+  }
+  .el-dialog__body {
+    padding: 24px 24px 8px;
+  }
+  .el-dialog__footer {
+    border-top: 1px solid var(--el-border-color-lighter);
+    padding: 12px 20px;
+    background: var(--el-fill-color-lighter);
+  }
+}
+
+/* ===== 搜索表单 ===== */
+.el-form--inline {
+  margin-bottom: 14px;
+
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+.search-panel {
+  margin-bottom: 14px;
+}
+
+/* ===== 其他工具类 ===== */
 .carsouel-img {
   position: relative;
-  left: 50%;transform:
+  left: 50%;
-  translateX(-50%);
+  transform: translateX(-50%);
   height: 500px;
   width: auto;
 }

src/views/system/Article.vue

@@ -57,6 +57,7 @@
       <el-tree :props="treeProps" :load="loadTreeData" lazy highlight-current @node-click="articlePreview" />
     </el-col>
     <el-col :span="20">
+      <div class="table-container">
       <el-table :data="articleData" v-loading="loading" stripe @selection-change="dataSelect">
         <el-table-column type="selection" width="55" />
         <el-table-column prop="title" label="标题" />
@@ -100,6 +101,7 @@
           @current-change="pageChange">
         </el-pagination>
       </div>
+      </div>
     </el-col>
   </el-row>
   <el-drawer