✨ feat: 调整样式更紧凑

gear-ui3/src/assets/styles/element-ui.scss

@@ -1,100 +1,831 @@
-// cover some element-ui styles
+// ====================== 1. 基础尺寸变量（Sass直接处理）======================
+// 间距/尺寸变量
+$--spacing-sm: 4px;
+$--spacing-base: 8px;
+$--spacing-md: $--spacing-base;
+$--spacing-lg: $--spacing-base * 2;
+$--form-item-margin: $--spacing-base;
+$--btn-height: 24px; 
 
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
+
+// ====================== 2. CSS尺寸变量（与Sass变量同步）======================
+:root {
+  /* 间距/尺寸体系 */
+  --spacing-sm: #{$--spacing-sm};
+  --spacing-base: #{$--spacing-base};
+  --spacing-md: #{$--spacing-md};
+  --spacing-lg: #{$--spacing-lg};
+  --form-item-margin: #{$--form-item-margin};
+  --btn-height: #{$--btn-height};
 }
 
-.el-upload {
-  input[type="file"] {
-    display: none !important;
+
+// ====================== 3. Element UI适配 - 尺寸变量 =======================
+// 尺寸变量
+$--spacing-sm: $--spacing-sm !default;
+$--spacing-base: $--spacing-base !default;
+$--spacing-md: $--spacing-md !default;
+$--spacing-lg: $--spacing-lg !default;
+$--form-item-margin: $--form-item-margin !default;
+$--btn-height: $--btn-height !default;
+
+
+// ====================== 4. 全局尺寸样式 ======================
+body {
+  font-size: 14px;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+}
+
+// 标签页内容溢出修复（尺寸相关）
+.el-tabs__content {
+  overflow: visible !important;
+}
+
+
+// ====================== 5. 组件尺寸样式（按优先级合并）======================
+// ---------------------- 5.1 按钮（紧凑尺寸）----------------------
+@mixin button-variant() {
+  border-radius: 6px;
+  transition: all .25s ease;
+  height: $--btn-height;
+  padding: 0 var(--spacing-lg);
+  font-size: 13px;
+
+  &:hover,
+  &:focus {
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+
+  &.is-disabled,
+  &[disabled] {
+    cursor: not-allowed;
   }
 }
 
-.el-upload__input {
-  display: none;
+// 主按钮（尺寸相关）
+.el-button--primary {
+  @include button-variant();
 }
 
-.cell {
-  .el-tag {
-    margin-right: 0px;
+// 功能按钮（尺寸相关）
+.el-button--success,
+.el-button--warning,
+.el-button--danger,
+.el-button--info {
+  @include button-variant();
+}
+
+// 文本按钮（尺寸相关）
+.el-button--text {
+  height: auto;
+  padding: 4px 8px;
+}
+
+// 图标按钮（圆形紧凑尺寸）
+.el-button.is-circle {
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border-radius: 50%;
+
+  &:only-child {
+    padding: 0;
   }
 }
 
-.small-padding {
-  .cell {
-    padding-left: 5px;
-    padding-right: 5px;
-  }
-}
+// 按钮组（无缝衔接尺寸）
+.el-button-group {
+  .el-button {
+    border-radius: 0;
+    margin: 0;
 
-.fixed-width {
-  .el-button--mini {
-    padding: 7px 10px;
-    width: 60px;
-  }
-}
+    &:first-child {
+      border-radius: 6px 0 0 6px;
+    }
 
-.status-col {
-  .cell {
-    padding: 0 10px;
-    text-align: center;
+    &:last-child {
+      border-radius: 0 6px 6px 0;
+    }
 
-    .el-tag {
-      margin-right: 0px;
+    &:not(:last-child) {
+      border-right: none;
     }
   }
 }
 
-// to fixed https://github.com/ElemeFE/element/issues/2461
+// 中号按钮（尺寸）
+.el-button--medium {
+  padding: 4px 8px !important;
+  font-size: 12px;
+  height: $--btn-height - 4px;
+}
+
+// 迷你/小号按钮（超紧凑尺寸）
+.el-button--mini,
+.el-button--small,
+.el-button {
+  padding: 4px 8px !important;
+  font-size: 12px;
+  height: $--btn-height - 4px;
+
+  &.is-circle {
+    padding: 4px !important;
+  }
+}
+
+
+// ---------------------- 5.2 表格（紧凑尺寸）----------------------
+.el-table {
+  border-radius: 8px;
+  overflow: hidden;
+  margin-top: $--form-item-margin * 2; // 与表单间距
+
+  // 表头（紧凑padding）
+  .el-table__header-wrapper {
+    th.el-table__cell {
+      padding: 4px !important;
+      height: auto;
+      font-size: 13px;
+    }
+  }
+
+  .el-button + .el-button {
+    margin-left: 2px;
+  }
+
+  .el-button.el-button--text {
+    padding: 0 2px !important;
+  }
+
+  // 表体（紧凑padding）
+  .el-table__body-wrapper {
+    .el-table__cell {
+      padding: 2px 4px !important; // 超紧凑
+      font-size: 13px;
+    }
+  }
+
+  // 表尾（紧凑padding）
+  .el-table__footer-wrapper {
+    td {
+      padding: 4px !important;
+    }
+  }
+
+  // 适配尺寸类（统一紧凑）
+  &.el-table--medium .el-table__cell,
+  &.el-table--mini .el-table__cell {
+    padding: 0 !important;
+  }
+}
+
+.el-table__fixed-right {
+  // 表头（紧凑padding）
+  .el-table__fixed-header-wrapper {
+    th.el-table__cell {
+      padding: 4px !important;
+      font-size: 13px;
+    }
+  }
+}
+
+// 自定义表格工具类（补充紧凑）
+.small-padding .cell {
+  padding-left: calc($--spacing-base / 2);
+  padding-right: calc($--spacing-base / 2);
+}
+
+.status-col .cell {
+  padding: 0 10px !important;
+  text-align: center;
+}
+
+
+// ---------------------- 5.3 日期范围选择器（尺寸适配）----------------------
+.el-date-editor {
+  height: $--btn-height;
+
+  // 基础尺寸
+  &.el-range-editor {
+    padding: 0 8px;
+    height: $--btn-height;
+
+    // 图标尺寸
+    .el-input__icon {
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+    }
+
+    // 输入框尺寸
+    .el-range-input {
+      padding: 0 4px;
+      height: 100%;
+      font-size: 13px;
+      width: 80px;
+    }
+
+    // 分隔符尺寸
+    .el-range-separator {
+      padding: 0 4px;
+      font-size: 13px;
+    }
+
+    // 清除图标间距
+    .el-range__close-icon {
+      margin-left: 4px;
+    }
+  }
+
+  &--medium.el-input__inner {
+    height: auto;
+  }
+}
+
+.el-range-editor--medium.el-input__inner {
+  height: $--btn-height !important;
+  width: auto !important;
+
+  .el-range-separator {
+    padding: 0;
+    line-height: 16px;
+    font-size: 13px;
+  }
+}
+
+// 日期选择面板尺寸
+.el-picker-panel {
+  border-radius: 6px;
+
+  // 头部导航尺寸
+  .el-picker-panel__header {
+    padding: 6px 10px;
+
+    .el-picker-panel__icon-btn {
+      width: 24px;
+      height: 24px;
+      line-height: 24px;
+      border-radius: 4px;
+    }
+  }
+
+  // 日期表格尺寸
+  .el-date-table {
+    border-collapse: separate;
+    border-spacing: 2px;
+
+    th {
+      padding: 4px 0;
+      font-size: 12px;
+    }
+
+    td {
+      padding: 0;
+
+      .el-date-table__cell {
+        width: 28px;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 4px;
+        margin: 1px;
+        font-size: 13px;
+      }
+    }
+  }
+
+  // 范围选择器底部按钮尺寸
+  .el-range-picker__footer {
+    padding: 6px 10px;
+
+    button {
+      height: 24px;
+      line-height: 22px;
+      padding: 0 12px;
+      font-size: 12px;
+      border-radius: 4px;
+    }
+  }
+}
+
+
+// ---------------------- 5.4 表单/输入（统一尺寸）----------------------
+// 表单项布局尺寸
+.el-form-item {
+  margin-bottom: $--form-item-margin !important;
+  font-size: 13px;
+
+  // 标签间距
+  .el-form-item__label {
+    padding-right: $--spacing-base;
+    font-size: 13px;
+  }
+
+  // 搜索表单 inline 布局
+  &.search-form-item {
+    display: inline-block;
+    margin-right: $--spacing-base;
+    vertical-align: middle;
+  }
+}
+
+// 输入框（统一高度）
+.el-input {
+  height: $--btn-height;
+
+  .el-input__inner {
+    border-radius: 0;
+    height: $--btn-height;
+    line-height: $--btn-height;
+    font-size: 13px;
+  }
+
+  // 输入框图标尺寸
+  .el-input__icon {
+    height: $--btn-height;
+    line-height: $--btn-height;
+  }
+
+  // 尺寸适配（统一高度）
+  &.el-input--small .el-input__inner,
+  &.el-input--medium .el-input__inner,
+  &.el-input--large .el-input__inner {
+    height: $--btn-height;
+    line-height: $--btn-height;
+  }
+
+  // 输入组尺寸
+  .el-input-group__append,
+  .el-input-group__prepend {
+    border-radius: 0;
+    font-size: 13px;
+  }
+}
+
+// 文本域尺寸
+.el-textarea .el-textarea__inner {
+  border-radius: 0;
+  padding: $--spacing-base;
+  font-size: 13px;
+}
+
+// 数字输入框尺寸
+.el-input-number {
+  .el-input__inner {
+    border-radius: 0;
+  }
+
+  // 增减按钮尺寸
+  .el-input-number__increase,
+  .el-input-number__decrease {
+    transition: all .2s ease;
+    height: $--btn-height;
+    line-height: $--btn-height;
+  }
+
+  .el-input-number__increase,
+  .el-input-number__decrease {
+    border-radius: 0;
+  }
+
+  // 迷你尺寸
+  &.el-input-number--small {
+    .el-input-number__increase,
+    .el-input-number__decrease {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  // 无控制按钮尺寸
+  &.is-without-controls .el-input__inner {
+    border-radius: 0;
+  }
+}
+
+// 选择器/下拉框尺寸
+.el-select {
+  .el-input__inner {
+    border-radius: 0;
+  }
+
+  // 下拉面板尺寸
+  .el-select-dropdown {
+    border-radius: 6px;
+
+    .el-select-dropdown__item {
+      padding: 6px 16px;
+      font-size: 13px;
+    }
+  }
+}
+
+
+// ---------------------- 5.5 卡片/对话框（尺寸层级）----------------------
+// 卡片尺寸
+.el-card {
+  border-radius: 8px;
+  overflow: hidden;
+
+  // 卡片头部尺寸
+  .el-card__header {
+    padding: $--spacing-md $--spacing-lg;
+  }
+
+  // 卡片主体尺寸
+  .el-card__body {
+    padding: $--spacing-lg;
+  }
+}
+
+// 对话框尺寸
 .el-dialog {
   transform: none;
   left: 0;
   position: relative;
-  margin: 0 auto;
+  margin: 10vh auto 0;
+  border-radius: 8px;
+  width: 60% !important; // 自适应宽度
+
+  // 对话框头部尺寸
+  .el-dialog__header {
+    padding: $--spacing-lg;
+  }
+
+  // 对话框主体尺寸
+  .el-dialog__body {
+    padding: $--spacing-lg;
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+
+  // 对话框底部尺寸
+  .el-dialog__footer {
+    padding: $--spacing-md $--spacing-lg;
+    text-align: right;
+  }
 }
 
-// refine element ui upload
-.upload-container {
-  .el-upload {
+// 抽屉尺寸
+.el-drawer {
+  border-radius: 8px;
+}
+
+// Popover尺寸
+.el-popover {
+  border-radius: 8px;
+  padding: $--spacing-lg;
+
+  // Popover 标题尺寸
+  .el-popover__title {
+    padding-bottom: $--spacing-md;
+    margin-bottom: $--spacing-md;
+  }
+
+  // Popover 底部尺寸
+  .el-popover__footer {
+    padding-top: $--spacing-md;
+    margin-top: $--spacing-md;
+    text-align: right;
+  }
+}
+
+.el-button-group+.el-popover {
+  margin-left: 5px;
+}
+
+
+// ---------------------- 5.6 标签页组件（el-tabs）尺寸 ----------------======
+.el-tabs {
+  // 标签栏尺寸
+  .el-tabs__header {
+    margin: 0;
+    padding: 0;
+
+    // 标签导航容器尺寸
+    .el-tabs__nav {
+      height: 40px;
+      line-height: 40px;
+      padding: 0 var(--spacing-base);
+    }
+
+    // 标签项尺寸
+    .el-tabs__item {
+      height: 40px;
+      line-height: 40px;
+      font-size: 13px;
+      transition: all 0.2s ease;
+    }
+
+    // 标签滚动按钮尺寸
+    .el-tabs__nav-prev,
+    .el-tabs__nav-next {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      margin: 4px 0;
+      border-radius: 4px;
+      transition: all 0.2s ease;
+    }
+  }
+
+  // 标签内容区尺寸
+  .el-tabs__content {
+    padding: var(--spacing-lg);
+    border-radius: 0 0 6px 6px;
+    min-height: 100px; // 确保有基本高度
+  }
+
+  // 卡片类型标签页尺寸
+  &.el-tabs--card {
+    .el-tabs__header {
+      .el-tabs__nav {
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .el-tabs__item {
+        margin: 0 2px;
+        border-radius: 6px 6px 0 0;
+      }
+    }
+
+    .el-tabs__content {
+      border-radius: 0 6px 6px 6px;
+      margin-top: -1px;
+    }
+  }
+
+  // 左侧/右侧标签页尺寸
+  &.el-tabs--left,
+  &.el-tabs--right {
+    .el-tabs__header {
+      margin: 0 var(--spacing-lg) 0 0;
+
+      .el-tabs__nav {
+        flex-direction: column;
+        height: auto;
+      }
+
+      .el-tabs__item {
+        width: 100%;
+      }
+    }
+
+    &.el-tabs--right {
+      .el-tabs__header {
+        margin: 0 0 0 var(--spacing-lg);
+      }
+    }
+
+    .el-tabs__content {
+      border-radius: 6px;
+    }
+  }
+
+  // 标签页关闭按钮间距
+  .el-icon-close {
+    margin-left: var(--spacing-sm);
+    transition: all 0.2s ease;
+  }
+
+  // 可编辑标签添加按钮间距
+  .el-tabs__new-tab {
+    margin: 0 var(--spacing-sm);
+    transition: all 0.2s ease;
+  }
+}
+
+
+// ---------------------- 5.7 日期选择器（尺寸优化）----------------------
+.el-date-picker {
+  .el-picker-panel {
+    border-radius: 8px;
+
+    // 头部尺寸
+    .el-date-picker__header {
+      padding: $--spacing-md;
+    }
+
+    // 日期表格尺寸
+    .el-date-table {
+      th {
+        padding: $--spacing-sm;
+      }
+
+      td {
+        padding: $--spacing-sm;
+        border-radius: 4px;
+        transition: all .2s;
+      }
+    }
+
+    // 快捷选项尺寸
+    .el-picker-panel__shortcut {
+      padding: $--spacing-md;
+
+      .el-picker-panel__shortcut-btn {
+        padding: 4px 10px;
+        border-radius: 4px;
+        transition: all .2s;
+      }
+    }
+  }
+
+  // 范围选择器分隔符尺寸
+  .el-range-separator {
+    padding: 0 $--spacing-md;
+    box-sizing: content-box;
+  }
+
+  // 范围输入框布局
+  .el-range-editor.el-input__inner {
+    display: inline-flex !important;
+  }
+}
+
+
+// ---------------------- 5.8 描述列表组件（el-descriptions）- 尺寸适配 ======================
+.el-descriptions {
+  width: 100%;
+  overflow: hidden;
+
+  // 描述列表头部尺寸
+  &__header {
+    padding: $--spacing-base $--spacing-lg;
+    font-size: 14px;
+  }
+
+  // 描述列表主体容器尺寸
+  &__body {
+    width: 100%;
+  }
+
+  // 描述列表行布局
+  &__row {
+    display: flex;
     width: 100%;
 
-    .el-upload-dragger {
+    // 最后一行布局
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  // 描述列表标签项尺寸
+  .el-descriptions-item__label {
+    padding: $--spacing-lg;
+    box-sizing: border-box;
+    white-space: nowrap;
+    font-size: 13px;
+  }
+
+  // 描述列表内容项尺寸
+  &-item__content {
+    padding: $--spacing-lg;
+    flex: 1;
+    box-sizing: border-box;
+    font-size: 13px;
+    word-break: break-word;
+  }
+
+  // 带边框模式尺寸
+  &--border {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  // 尺寸适配
+  &--small {
+    .el-descriptions__label,
+    .el-descriptions__content {
+      padding: calc($--spacing-base / 2) $--spacing-base; 
+      font-size: 12px;
+    }
+
+    .el-descriptions__header {
+      padding: calc($--spacing-base / 2) $--spacing-base;
+      font-size: 13px;
+    }
+  }
+
+  &--large {
+    .el-descriptions__label,
+    .el-descriptions__content {
+      padding: $--spacing-lg $--spacing-lg * 1.5;
+      font-size: 14px;
+    }
+
+    .el-descriptions__header {
+      padding: $--spacing-base $--spacing-lg * 1.5;
+      font-size: 15px;
+    }
+  }
+
+  // 响应式适配
+  @media (max-width: 768px) {
+    .el-descriptions__row {
+      flex-direction: column;
+    }
+
+    .el-descriptions__label {
       width: 100%;
-      height: 200px;
     }
   }
 }
 
-// dropdown
-.el-dropdown-menu {
-  a {
-    display: block
+// 菜单尺寸
+.el-menu {
+  .el-menu-item,
+  .el-submenu__title {
+    height: 40px !important;
+    line-height: 40px !important;
+  }
+
+  // 折叠菜单布局
+  &.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
+    display: none;
   }
 }
 
-// fix date-picker ui bug in filter-item
-.el-range-editor.el-input__inner {
-  display: inline-flex !important;
+
+// ---------------------- 5.10 其他组件（标签/分页/上传）尺寸 ----------------------
+// 标签尺寸
+.el-tag {
+  padding: 2px 8px;
+  border-radius: 2px;
+  font-size: 12px;
+  height: auto;
+  margin-right: 0;
+
+  // 表格内标签尺寸
+  .cell & {
+    margin-right: 0;
+    padding: 1px !important;
+    border-radius: 0 !important;
+  }
 }
 
-// to fix el-date-picker css style
-.el-range-separator {
-  box-sizing: content-box;
+// 分页尺寸
+.el-pagination {
+  margin-top: 16px;
+  padding: 8px 0;
+  text-align: right;
+
+  .el-pager li {
+    margin: 0 2px;
+    min-width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 4px;
+  }
+
+  // 输入框后缀布局
+  .el-input__suffix {
+    position: absolute;
+    line-height: 0;
+  }
 }
 
-.el-menu--collapse
-  > div
-  > .el-submenu
-  > .el-submenu__title
-  .el-submenu__icon-arrow {
-  display: none;
+// 分页容器尺寸
+div.pagination-container {
+  padding: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+
+  .el-pagination {
+    padding: 0 !important;
+  }
 }
 
-.el-dropdown .el-dropdown-link{
-  color: var(--el-color-primary) !important;
+// 上传组件尺寸
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+
+  .el-upload__input {
+    display: none;
+  }
+
+  // 拖拽上传容器尺寸
+  .el-upload-dragger {
+    width: 100%;
+    height: 200px;
+    border-radius: 6px;
+  }
 }
-  
-.el-select-dropdown {
-  z-index: 9999 !important; /* 需大于全屏容器的z-index */
+
+// 树形组件布局
+.el-tree {
+  .el-tree-node {
+    &.is-current>.el-tree-node__content {
+      width: 100%;
+    }
+  }
 }

gear-ui3/src/assets/styles/ruoyi.scss

@@ -5,52 +5,52 @@
 
 /** 基础通用 **/
 .pt5 {
-  padding-top: 5px;
+  padding-top: 2px;
 }
 .pr5 {
-  padding-right: 5px;
+  padding-right: 2px;
 }
 .pb5 {
-  padding-bottom: 5px;
+  padding-bottom: 2px;
 }
 .mt5 {
-  margin-top: 5px;
+  margin-top: 2px;
 }
 .mr5 {
-  margin-right: 5px;
+  margin-right: 2px;
 }
 .mb5 {
-  margin-bottom: 5px;
+  margin-bottom: 2px;
 }
 .mb8 {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 .ml5 {
-  margin-left: 5px;
+  margin-left: 2px;
 }
 .mt10 {
-  margin-top: 10px;
+  margin-top: 5px;
 }
 .mr10 {
-  margin-right: 10px;
+  margin-right: 5px;
 }
 .mb10 {
-  margin-bottom: 10px;
+  margin-bottom: 5px;
 }
 .ml10 {
-  margin-left: 10px;
+  margin-left: 5px;
 }
 .mt20 {
-  margin-top: 20px;
+  margin-top: 10px;
 }
 .mr20 {
-  margin-right: 20px;
+  margin-right: 10px;
 }
 .mb20 {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 .ml20 {
-  margin-left: 20px;
+  margin-left: 10px;
 }
 
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {