推送项目重构代码

2026-05-29 19:52:32 +08:00
parent 95141d0e1f
commit 3dafaceef2
65 changed files with 3762 additions and 583 deletions
--- a/ruoyi-ui/src/assets/styles/element-variables.scss
+++ b/ruoyi-ui/src/assets/styles/element-variables.scss
@@ -5,10 +5,10 @@


 /* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #ffba00;
-$--color-danger: #ff4949;
+$--color-primary: #1677ff;
+$--color-success: #00b42a;
+$--color-warning: #ff7d00;
+$--color-danger: #f53f3f;
 // $--color-info: #1E1E1E;

 $--button-font-weight: 400;
--- a/ruoyi-ui/src/assets/styles/index.scss
+++ b/ruoyi-ui/src/assets/styles/index.scss
@@ -8,10 +8,201 @@

 body {
  height: 100%;
+  background-color: #f4f7f9;
+  font-size: 12px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: "Inter", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+}
+
+// ===== 全局紧凑化 =====
+// Element UI 默认字号 14px / 行高较松，整体收紧到 13px
+#app {
+  font-size: 12px;
+}
+
+// 表单 / 输入 / 按钮 紧凑
+.el-form-item {
+  margin-bottom: 14px;
+}
+.el-form-item__label {
+  font-size: 12px;
+  line-height: 30px;
+  padding: 0 8px 0 0;
+}
+.el-form-item--small.el-form-item {
+  margin-bottom: 12px;
+}
+/* 全局输入控件统一压低高度（含 input/select/cascader/date/range/autocomplete） */
+.el-input__inner,
+.el-textarea__inner,
+.el-select .el-input__inner,
+.el-cascader .el-input__inner,
+.el-autocomplete .el-input__inner,
+.el-date-editor .el-input__inner,
+.el-date-editor--daterange.el-range-editor,
+.el-date-editor--datetimerange.el-range-editor,
+.el-date-editor--monthrange.el-range-editor,
+.el-range-editor.el-input__inner {
+  height: 28px !important;
+  line-height: 28px !important;
+  font-size: 12px !important;
+  padding: 0 8px !important;
+}
+.el-input--medium .el-input__inner { height: 30px !important; line-height: 30px !important; }
+.el-input--small  .el-input__inner { height: 28px !important; line-height: 28px !important; }
+.el-input--mini   .el-input__inner { height: 24px !important; line-height: 24px !important; font-size: 12px !important; }
+.el-input--mini.el-input,
+.el-input--mini .el-input__suffix,
+.el-input--mini .el-input__prefix { line-height: 24px !important; }
+.el-range-editor.el-input__inner { padding: 0 10px !important; }
+.el-range-editor .el-range-input { font-size: 12px !important; height: 100% !important; line-height: 1 !important; }
+.el-range-editor .el-range-separator { line-height: 26px !important; font-size: 12px !important; }
+.el-input__icon { line-height: 28px !important; }
+.el-input__suffix-inner .el-input__icon { line-height: 28px !important; }
+.el-form-item__content { line-height: 28px; }
+.el-button {
+  padding: 7px 12px;
+  font-size: 12px;
+  border-radius: 6px;
+}
+.el-button--mini,
+.el-button--small {
+  padding: 6px 10px;
+  font-size: 12px;
+}
+.el-button--medium {
+  padding: 8px 14px;
+  font-size: 12px;
+}
+.el-button + .el-button {
+  margin-left: 8px;
+}
+
+// 表格紧凑
+.el-table {
+  font-size: 12px;
+}
+.el-table th.el-table__cell > .cell,
+.el-table td.el-table__cell > .cell {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.el-table th.el-table__cell {
+  padding: 6px 0;
+  background-color: #fafafa;
+}
+.el-table td.el-table__cell {
+  padding: 6px 0;
+}
+.el-table--mini th.el-table__cell,
+.el-table--mini td.el-table__cell {
+  padding: 4px 0;
+}
+
+// 分页紧凑
+.el-pagination {
+  padding: 6px 0;
+  font-size: 12px;
+}
+.el-pagination .btn-prev,
+.el-pagination .btn-next,
+.el-pagination .el-pager li {
+  min-width: 28px;
+  height: 28px;
+  line-height: 28px;
+}
+
+// 卡片 / 容器 紧凑
+.el-card__header {
+  padding: 10px 16px;
+  font-size: 13px;
+}
+.el-card__body {
+  padding: 14px 16px;
+}
+.el-dialog__header {
+  padding: 14px 18px 10px;
+}
+.el-dialog__body {
+  padding: 16px 18px;
+  font-size: 12px;
+}
+.el-dialog__footer {
+  padding: 10px 18px 14px;
+}
+
+// 菜单收紧
+.el-menu-item,
+.el-submenu__title {
+  font-size: 12px;
+  height: 38px !important;
+  line-height: 38px !important;
+}
+
+// Tabs / Tags
+.el-tabs__item {
+  height: 36px;
+  line-height: 36px;
+  font-size: 12px;
+}
+.el-tag {
+  height: 22px;
+  line-height: 20px;
+  padding: 0 8px;
+  font-size: 12px;
+}
+
+// 描述列表 / 步骤
+.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
+  padding: 8px 12px;
+  font-size: 12px;
+}
+
+// 复选框 / 单选
+.el-checkbox__label,
+.el-radio__label {
+  font-size: 12px;
+}
+
+// Vben 风格：浅色侧边栏选中项
+#app .sidebar-container.theme-light {
+  .el-menu-item,
+  .el-submenu__title {
+    border-radius: 6px;
+    margin: 2px 8px;
+    height: 40px;
+    line-height: 40px;
+  }
+  .el-menu-item.is-active {
+    background-color: #e6f4ff !important;
+    color: #1677ff !important;
+    font-weight: 500;
+  }
+}
+
+// 顶部导航 & 内容卡片化
+.app-main {
+  background-color: #f4f7f9;
+}
+
+.app-container {
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 21, 41, 0.04);
+}
+
+// 圆角按钮/输入框
+.el-button {
+  border-radius: 6px;
+}
+.el-input__inner,
+.el-textarea__inner {
+  border-radius: 6px;
+}
+.el-card {
+  border-radius: 8px;
 }

 label {
@@ -122,7 +313,7 @@ aside {

 //main-container全局样式
 .app-container {
-  padding: 20px;
+  padding: 12px 14px;
 }

 .components-container {
@@ -180,4 +371,116 @@ aside {
    vertical-align: middle;
    margin-bottom: 10px;
  }
-}
+}
+/* 全局按钮缩小：默认按钮等比 small 化 */
+.el-button {
+  padding: 7px 12px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+.el-button--medium {
+  padding: 8px 14px;
+  font-size: 12px;
+}
+.el-button--small {
+  padding: 6px 10px;
+  font-size: 12px;
+}
+.el-button--mini {
+  padding: 5px 8px;
+  font-size: 12px;
+}
+.el-button [class*="el-icon-"] + span {
+  margin-left: 4px;
+}
+.el-button-group > .el-button {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+/* 列表页搜索表单紧凑模式（加 class="compact-search" 即可生效） */
+.compact-search.el-form--inline {
+  margin-bottom: 8px;
+}
+.compact-search .el-form-item {
+  margin-bottom: 8px;
+  margin-right: 12px;
+}
+.compact-search .el-form-item__label {
+  font-size: 12px;
+  font-weight: normal;
+  color: #606266;
+  line-height: 28px;
+  padding-right: 6px;
+}
+.compact-search .el-form-item__content {
+  line-height: 28px;
+}
+.compact-search .el-input--mini .el-input__inner,
+.compact-search .el-select .el-input__inner,
+.compact-search .el-date-editor .el-input__inner,
+.compact-search .el-range-editor .el-range-input {
+  height: 28px;
+  line-height: 28px;
+  font-size: 12px;
+}
+.compact-search .el-range-editor.el-input__inner {
+  padding: 0 8px;
+}
+
+/* compact-search 进一步收紧 */
+.compact-search .el-form-item__label {
+  font-size: 11px !important;
+  line-height: 26px !important;
+  padding-right: 4px !important;
+}
+.compact-search .el-form-item__content,
+.compact-search .el-input--mini,
+.compact-search .el-select,
+.compact-search .el-date-editor {
+  font-size: 11px !important;
+}
+.compact-search .el-input--mini .el-input__inner,
+.compact-search .el-select .el-input__inner,
+.compact-search .el-date-editor .el-input__inner,
+.compact-search .el-range-editor .el-range-input {
+  height: 26px !important;
+  line-height: 26px !important;
+  font-size: 11px !important;
+}
+.compact-search .el-form-item {
+  margin-bottom: 4px !important;
+  margin-right: 8px !important;
+}
+.compact-search .el-button--mini {
+  padding: 5px 10px !important;
+  font-size: 11px !important;
+}
+
+/* 紧凑型 tabs（class="compact-tabs"） */
+.compact-tabs.el-tabs {
+  margin-bottom: 6px;
+}
+.compact-tabs .el-tabs__header {
+  margin-bottom: 6px;
+}
+.compact-tabs .el-tabs__nav-wrap::after {
+  height: 1px;
+}
+.compact-tabs .el-tabs__item {
+  height: 28px;
+  line-height: 28px;
+  font-size: 12px;
+  padding: 0 12px;
+}
+.compact-tabs .el-tabs__active-bar {
+  height: 2px;
+}
+
+/* 加急行高亮（用于备注含 "急" 的未完成单据） */
+.el-table .row-urgent > td.el-table__cell {
+  background: #fff1f0 !important;
+}
+.el-table .row-urgent:hover > td.el-table__cell {
+  background: #ffd8d6 !important;
+}
--- a/ruoyi-ui/src/assets/styles/ruoyi.scss
+++ b/ruoyi-ui/src/assets/styles/ruoyi.scss
@@ -304,8 +304,18 @@ h6 {
 }

 .top-right-btn {
-  position: relative;
-  float: right;
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  z-index: 3;
+  float: none;
+}
+.app-container { position: relative; }
+.top-right-btn .el-button.is-circle {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  font-size: 12px;
 }

 .table-input {
--- a/ruoyi-ui/src/assets/styles/sidebar.scss
+++ b/ruoyi-ui/src/assets/styles/sidebar.scss
@@ -24,8 +24,9 @@
    left: 0;
    z-index: 1001;
    overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    -webkit-box-shadow: 1px 0 4px rgba(0, 21, 41, 0.08);
+    box-shadow: 1px 0 4px rgba(0, 21, 41, 0.08);
+    border-right: 1px solid #f0f0f0;

    // reset element-ui css
    .horizontal-collapse-transition {
@@ -46,7 +47,7 @@

    &.has-logo {
      .el-scrollbar {
-        height: calc(100% - 50px);
+        height: calc(100% - 40px);
      }
    }

@@ -74,6 +75,14 @@
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
+      font-size: 12px !important;
+      height: 40px !important;
+      line-height: 40px !important;
+    }
+
+    .svg-icon {
+      margin-right: 10px;
+      font-size: 14px;
    }

    // menu hover
@@ -91,10 +100,18 @@
    & .nest-menu .el-submenu>.el-submenu__title,
    & .el-submenu .el-menu-item {
      min-width: $base-sidebar-width !important;
+      font-size: 12px !important;
+      height: 36px !important;
+      line-height: 36px !important;

      &:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
      }
+
+      // 隐藏二级菜单及更深层级的图标
+      .svg-icon {
+        display: none !important;
+      }
    }

    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
--- a/ruoyi-ui/src/assets/styles/variables.scss
+++ b/ruoyi-ui/src/assets/styles/variables.scss
@@ -8,18 +8,18 @@ $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;

-// 默认菜单主题风格
-$base-menu-color:#bfcbd9;
-$base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
-$base-logo-title-color: #ffffff;
+// 默认菜单主题风格（Vben 风格浅色）
+$base-menu-color: rgba(0,0,0,.75);
+$base-menu-color-active: #1677ff;
+$base-menu-background: #ffffff;
+$base-logo-title-color: #1677ff;

-$base-menu-light-color:rgba(0,0,0,.70);
-$base-menu-light-background:#ffffff;
-$base-logo-light-title-color: #001529;
+$base-menu-light-color: rgba(0,0,0,.75);
+$base-menu-light-background: #ffffff;
+$base-logo-light-title-color: #1677ff;

-$base-sub-menu-background:#1f2d3d;
-$base-sub-menu-hover:#001528;
+$base-sub-menu-background: #ffffff;
+$base-sub-menu-hover: #f0f5ff;

 // 自定义暗色菜单风格
 /**
@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */

-$base-sidebar-width: 200px;
+$base-sidebar-width: 150px;

 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass