refactor: 界面重构美化

src/styles/base/_reset.scss

@@ -36,11 +36,32 @@ body {
     "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
     Arial, sans-serif;
   line-height: inherit;
+  background-color: var(--page-bg);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizelegibility;
 }
 
+/* 全局平滑滚动 */
+html {
+  scroll-behavior: smooth;
+}
+
+/* 滚动条现代化 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(0 0 0 / 12%);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
 img,
 svg {
   display: inline-block;

src/styles/base/_theme.scss

@@ -1,6 +1,5 @@
 /**
  * 主题变量定义
- * 只放 :root、html.dark、html.sidebar-color-blue 等定义真实颜色的 CSS 变量
  */
 
 // ============================================
@@ -15,8 +14,42 @@
   --menu-hover: #e6f4ff;
 
   // 侧边栏 Logo
-  --sidebar-logo-background: #f5f5f5;
-  --sidebar-logo-text-color: #303133;
+  --sidebar-logo-background: #fafafa;
+  --sidebar-logo-text-color: #383853;
+
+  // 页面背景与内容区
+  --page-bg: #fafbfc;
+  --content-bg: #ffffff;
+
+  // 边框
+  --border-color: #e2e8ee;
+  --card-border: rgb(0 0 0 / 8%);
+
+  // 卡片
+  --card-radius: calc(var(--custom-radius) + 4px);
+  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 6%), 0 1px 2px -1px rgb(0 0 0 / 4%);
+
+  // 全局圆角基准（可被 settings 动态覆盖）
+  --custom-radius: 8px;
+
+  // 页面布局间距
+  --page-padding: 20px;
+  --page-gap: 16px;
+
+  // 灰色阶
+  --gray-100: #f9fafb;
+  --gray-200: #f2f4f5;
+  --gray-300: #e6eaeb;
+  --gray-400: #dbdfe1;
+  --gray-500: #949eb7;
+  --gray-600: #7987a1;
+  --gray-700: #4d5875;
+  --gray-800: #383853;
+  --gray-900: #323251;
+
+  // 悬浮与激活
+  --hover-color: #edeff0;
+  --active-color: #f2f4f5;
 }
 
 // ============================================
@@ -44,7 +77,25 @@ html.dark {
   --sidebar-logo-background: rgb(0 0 0 / 20%);
   --sidebar-logo-text-color: #fff;
 
-  // Element Plus 表格选中行背景色
+  --page-bg: #070707;
+  --content-bg: #161618;
+  --border-color: rgb(255 255 255 / 10%);
+  --card-border: rgb(255 255 255 / 8%);
+  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 30%);
+
+  --gray-100: #110f0f;
+  --gray-200: #17171c;
+  --gray-300: #393946;
+  --gray-400: #505062;
+  --gray-500: #73738c;
+  --gray-600: #8f8fa3;
+  --gray-700: #ababba;
+  --gray-800: #c7c7d1;
+  --gray-900: #e3e3e8;
+
+  --hover-color: #252530;
+  --active-color: #202226;
+
   .el-table {
     --el-table-current-row-bg-color: var(--el-fill-color-light);
   }
@@ -54,7 +105,6 @@ html.dark {
 // 无障碍模式
 // ============================================
 
-// 色弱模式
 html.color-weak {
   filter: invert(80%);
 }

src/styles/base/_variables.scss

@@ -10,7 +10,7 @@
 $sidebar-width: 210px;
 $sidebar-width-collapsed: 54px;
 $navbar-height: 50px;
-$tags-view-height: 34px;
+$tags-view-height: 40px;
 
 // ============================================
 // CSS 变量映射（供组件和 SCSS 使用）

src/styles/layout/_layout.scss

@@ -3,11 +3,11 @@
  */
 
 .page-container {
-  padding: 16px;
+  padding: var(--page-padding);
 }
 
 .page-aside {
-  margin-bottom: 16px;
+  margin-bottom: var(--page-gap);
 
   @media (min-width: 992px) {
     margin-bottom: 0;
@@ -17,15 +17,18 @@
 .page-main {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: var(--page-gap);
 }
 
 .page-search {
-  margin-bottom: 16px;
+  margin-bottom: var(--page-gap);
 
-  /* 覆盖 el-card 内部 padding */
   .el-card__body {
-    padding: 12px 12px 0;
+    padding: 14px 16px 4px;
+  }
+
+  .el-form-item {
+    margin-bottom: 10px;
   }
 }
 
@@ -39,7 +42,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: var(--page-gap);
 
   &__left,
   &__right {

src/styles/vendors/_element-plus-override.scss

@@ -2,14 +2,46 @@
  * Element Plus 组件样式定制
  */
 
-$border: 1px solid var(--el-border-color-light);
+$border: 1px solid var(--border-color);
 
-/* el-dialog */
+/* 全局组件圆角基准 */
+:root {
+  --el-border-radius-base: 6px;
+  --el-border-radius-small: 4px;
+  --el-font-weight-primary: 400;
+}
+
+/* 卡片 — 边框模式 */
+.el-card {
+  border: 1px solid var(--card-border);
+  border-radius: var(--card-radius);
+  box-shadow: var(--card-shadow);
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow:
+      0 4px 12px 0 rgb(0 0 0 / 8%),
+      0 1px 3px 0 rgb(0 0 0 / 4%);
+  }
+
+  .el-card__header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--card-border);
+  }
+
+  .el-card__body {
+    padding: 20px;
+  }
+}
+
+/* 弹窗 */
 .el-dialog {
+  border-radius: 12px;
+
   .el-dialog__header {
-    padding: 15px 20px;
+    padding: 20px 20px 0;
     margin: 0;
-    border-bottom: $border;
+    border-bottom: none;
   }
 
   .el-dialog__body {
@@ -17,15 +49,15 @@ $border: 1px solid var(--el-border-color-light);
   }
 
   .el-dialog__footer {
-    padding: 15px;
-    border-top: $border;
+    padding: 0 20px 20px;
+    border-top: none;
   }
 }
 
-/* el-drawer */
+/* 抽屉 */
 .el-drawer {
   .el-drawer__header {
-    padding: 15px 20px;
+    padding: 16px 20px;
     margin: 0;
     color: inherit;
     border-bottom: $border;
@@ -36,11 +68,89 @@ $border: 1px solid var(--el-border-color-light);
   }
 
   .el-drawer__footer {
-    padding: 15px;
+    padding: 16px;
     border-top: $border;
   }
 }
 
+/* el-table */
+.el-table {
+  --el-table-border-color: var(--border-color);
+  --el-table-header-bg-color: var(--gray-100);
+  --el-table-row-hover-bg-color: var(--el-fill-color-lighter);
+  --el-table-current-row-bg-color: var(--el-fill-color-light);
+
+  border-radius: var(--custom-radius);
+
+  /* 表头 */
+  .el-table__header th {
+    padding: 12px 0;
+    font-weight: 500;
+    color: var(--el-text-color-regular);
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  /* 单元格 */
+  .el-table__body td {
+    padding: 10px 0;
+  }
+
+  /* 无数据时不显示底部边框 */
+  .el-table__empty-block {
+    border-bottom: none;
+  }
+}
+
+/* 斑马纹 — 更柔和 */
+.el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: rgb(0 0 0 / 1.5%);
+}
+
+html.dark .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: rgb(255 255 255 / 2%);
+}
+
+/* 下拉菜单项 */
+.el-dropdown-menu__item,
+.el-select-dropdown__item {
+  margin: 2px 6px;
+  border-radius: 6px;
+}
+
+/* 按钮 */
+.el-button {
+  --el-button-border-radius: var(--el-border-radius-base);
+  letter-spacing: 0.01em;
+
+  &:not(.is-link):not(.el-button--large):not(.el-button--small) {
+    padding: 9px 16px;
+  }
+}
+
+.el-button--default {
+  --el-button-border-color: var(--border-color);
+
+  &:hover:not(.is-disabled) {
+    color: var(--el-color-primary);
+    background: var(--el-color-primary-light-9);
+    border-color: var(--el-color-primary-light-5);
+  }
+}
+
+.el-button--primary,
+.el-button--success,
+.el-button--warning,
+.el-button--danger {
+  &:hover:not(.is-disabled) {
+    box-shadow: 0 2px 6px 0 var(--el-button-bg-color);
+  }
+}
+
+/* 标签 */
+.el-tag {
+  border-radius: 4px;
+}
+
 /* 抽屉和对话框底部按钮区域 */
 .dialog-footer {
   display: flex;
@@ -56,6 +166,7 @@ $border: 1px solid var(--el-border-color-light);
   --el-menu-hover-bg-color: var(--menu-hover);
 
   background-color: var(--menu-background);
+  border-radius: 8px;
 
   .el-menu-item,
   .el-sub-menu__title {

src/styles/vendors/_element-plus.scss

@@ -6,19 +6,19 @@
   $colors: (
     "primary": (
       // 默认主题色 - 修改此值时需同步修改 src/settings.ts 中的 themeColor
-      "base": #4080ff,
+      "base": #1677ff,
     ),
     "success": (
-      "base": #23c343,
+      "base": #22c55e,
     ),
     "warning": (
-      "base": #ff9a2e,
+      "base": #faad14,
     ),
     "danger": (
-      "base": #f76560,
+      "base": #ff4d4f,
     ),
     "info": (
-      "base": #a9aeb8,
+      "base": #788896,
     ),
   ),