merge: with remote

2026-01-15 14:24:39 +00:00 · 2024-05-28 16:05:41 +08:00
parent fb38ba1c9d 5d6a58421f
commit 7de34ac9a2
5 changed files with 150 additions and 171 deletions
--- a/src/components/Form/FormFields/TagInput.vue
+++ b/src/components/Form/FormFields/TagInput.vue
@@ -17,7 +17,7 @@
      ref="SearchInput"
      v-model.trim="filterValue"
      :fetch-suggestions="autocomplete"
-      :placeholder="this.iPlaceholder"
+      :placeholder="iPlaceholder"
      :type="inputType"
      class="search-input"
      @blur="focus = false"
--- a/src/components/Table/ListTable/TableAction/ImportDialog.vue
+++ b/src/components/Table/ListTable/TableAction/ImportDialog.vue
@@ -128,11 +128,13 @@ export default {
      }
    },
    importTitle() {
+      let option = ''
      if (this.importOption === 'create') {
-        return this.$t('Import') + this.$t('Create')
+        option = this.$t('Create')
      } else {
-        return this.$t('Import') + this.$t('Update')
+        option = this.$t('Update')
      }
+      return `${this.$t('Import')} & ${option}`
    }
  },
  watch: {
--- a/src/layout/components/NavLeft/SidebarItem.vue
+++ b/src/layout/components/NavLeft/SidebarItem.vue
@@ -20,25 +20,39 @@
      </app-link>
    </template>

-    <el-submenu
-      v-else
-      ref="subMenu"
-      :index="resolvePath(item.path)"
-      class="el-submenu-sidebar submenu-item level0"
-      popper-append-to-body
-    >
-      <template slot="title">
-        <item v-if="item.meta" :children="item.children" :icon="item.meta && item.meta.icon" :title="getItemTitle(item)" />
-      </template>
-      <sidebar-item
-        v-for="child in item.children"
-        :key="child.path"
-        :base-path="resolvePath(child.path)"
-        :is-nest="true"
-        :item="child"
-        class="nest-menu"
-      />
-    </el-submenu>
+    <div v-else>
+      <div v-if="item.meta.level === 2" class="group-title" style="font-size: 12px">
+        <el-divider v-if="collapse" />
+        <span v-else>{{ getItemTitle(item) }}</span>
+        <sidebar-item
+          v-for="child in item.children"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          :is-nest="true"
+          :item="child"
+          class="nest-menu"
+        />
+      </div>
+      <el-submenu
+        v-else
+        ref="subMenu"
+        :index="resolvePath(item.path)"
+        class="el-submenu-sidebar submenu-item level0"
+        popper-append-to-body
+      >
+        <template slot="title">
+          <item v-if="item.meta" :children="item.children" :icon="item.meta && item.meta.icon" :title="getItemTitle(item)" />
+        </template>
+        <sidebar-item
+          v-for="child in item.children"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+          :is-nest="true"
+          :item="child"
+          class="nest-menu"
+        />
+      </el-submenu>
+    </div>
  </div>
 </template>

@@ -67,6 +81,10 @@ export default {
    basePath: {
      type: String,
      default: ''
+    },
+    collapse: {
+      type: Boolean,
+      default: false
    }
  },
  data() {
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -43,6 +43,7 @@
          :key="route.path"
          :base-path="route.path"
          :item="route"
+          :collapse="isCollapse"
        />
      </el-menu>
    </div>
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -2,10 +2,6 @@

 $icon-width: 14px;
 $single-menu-height: 38px;
-@mixin hover_active {
-  background-color: var(--menu-hover);
-  color: var(--color-primary);
-}

@mixin only_active {
  &:before {
@@ -18,178 +14,140 @@ $single-menu-height: 38px;
    background-color: var(--menu-text-active);
  }
 }
+@mixin collapse-active {
+  background-color: var(--menu-hover);
+
+  &:before {
+    width: 0
+  }
+}

 .el-menu {
  border-right: none !important;
-}

-.left-menu.el-menu {
-  .submenu-item {
-    &.el-submenu-sidebar {
-      margin-top: 8px;
-      &.is-opened {
-        .el-icon-arrow-down {
-          display: none;
-        }
-      }
-      // 有子菜单项的 title
-      .el-submenu__title {
-        height: 30px;
-        font-size: 11px;
-        cursor: default;
-        font-weight: 600;
-        line-height: 30px;
-        letter-spacing: .07em;
-        color: rgba(0, 0, 0, 0.6) !important;
+  // 通用 item 样式
+  .el-menu-item {
+    display: flex;
+    align-items: center;
+    height: $single-menu-height;
+    color: var(--color-text-primary);
+  }

-        .svg-icon {
-          display: none;
-        }
-
-        &:hover {
-          background-color: #ffffff;
-
-          .el-icon-arrow-down {
-            display: inline;
-          }
-        }
-      }
-
-      // 子菜单项
-      .el-menu--inline {
-        background-color: $subMenuBg;
-
-        .nest-menu {
-          display: flex;
-
-          .el-menu-item {
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            height: 36px;
-            padding: 19px 20px !important;
-            line-height: 36px;
-            min-width: 200px;
-            font-size: 13px;
-            letter-spacing: .03em;
-
-            &:hover,
-            &.is-active, {
-              @include hover_active;
-            }
-
-            &.is-active {
-              @include only_active;
-            }
-
-            .svg-icon {
-              font-weight: 500;
-              overflow: hidden;
-              width: $icon-width;
-              height: $icon-width;
-            }
-
-            span {
-              padding-left: 10px;
-            }
-          }
-        }
-      }
+  .submenu-title-noDropdown.level0 {
+    span {
+      padding-left: 10px;
+      line-height: 100%;
    }

-    // 当前菜单样式
-    &.is-active .el-submenu__title {
-      color: $menuActiveText;
+    .svg-icon {
+      width: $icon-width;
+      height: $icon-width;
    }

-    // 没有子菜单的项
-    &.submenu-title-noDropdown {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      height: $single-menu-height;
-      line-height: $single-menu-height;
-      min-width: 200px;
-      font-size: 13px;
-
-      &:hover,
-      &.is-active {
-       @include hover_active
-      }
-
-      &.is-active {
-        @include only_active;
-      }
-
-      .svg-icon {
-        //display: none;
-        width: $icon-width;
-        height: $icon-width;
-      }
+    &.is-active {
+      background-color: var(--menu-hover);
+      @include only_active;

      span {
-        padding-left: 10px;
+        color: var(--color-primary);
      }
    }
  }

-  // 折叠状态下
-  &.el-menu--collapse {
-    width: 100% !important;
-
-    .submenu-title-noDropdown,
-    .submenu-title-noDropdown .el-tooltip {
-      display: flex !important;
-      align-items: center !important;
-      min-width: 55px !important;
-
-      .svg-icon {
-        display: block
-      }
+  .group-title {
+    // 分组的 title 样式
+    & > span {
+      padding-left: 20px;
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 25px;
+      letter-spacing: .07em;
+      color: rgba(0, 0, 0, 0.6)
    }

-    .submenu-item {
-      width: 55px;
+    .nest-menu {
+      display: flex;
+      cursor: pointer;
+
+      // 存在三级子菜单
+      .level0 {
+        min-width: 200px;
+
+        .el-submenu__title {
+          display: flex;
+          align-items: center;
+          height: $single-menu-height;
+
+          span {
+            padding-left: 10px;
+            line-height: 100%;
+          }
+        }
+
+        .el-menu--inline .nest-menu .el-menu-item {
+          height: $single-menu-height;
+
+          &.is-active {
+            @include only_active
+          }
+        }

-      &.is-active {
-        cursor: pointer;
-        @include hover_active
      }

-      .el-submenu__title {
-        display: flex;
-        align-items: center;
-        height: $single-menu-height;
-
-        &:hover,
-        &.is-active {
-          cursor: pointer;
-          @include hover_active
-        }
+      // 没有三级子菜单的项
+      .level1-item {

        .svg-icon {
-          //display: block;
+          width: $icon-width;
+          height: $icon-width;
+        }
+
+        span {
+          // 此处若不显示给出 line-height 则默认继承 ElUI 默认 56px 行高
+          padding-left: 10px;
+          line-height: 100%;
+          color: var(--color-text-primary);
+        }
+
+        // 处于选中状态的高亮样式
+        &.is-active {
+          background-color: var(--menu-hover);
+          @include only_active;
+
+          span {
+            color: var(--color-primary);
+          }
        }
      }
    }
  }

-  i.fa {
-    margin-right: 10px;
-    width: 13px;
-  }
+  // 折叠起来的样式
+  &.el-menu--collapse {
+    // 覆盖默认 64px 宽度
+    width: 55px;

-  .is-active i.fa {
-    color: $menuActiveText;
-  }
-}
-
-.el-menu--vertical .el-menu-item {
-  display: flex;
-  align-items: center;
-  height: 36px;
-
-  .svg-icon {
-    margin-right: 15px;
+    .level0 {
+      height: $single-menu-height;
+      line-height: $single-menu-height;
+    }
+
+    .group-title {
+      & > span {
+        display: none;
+      }
+
+      .el-divider.el-divider--horizontal {
+        margin: 12px 0 !important;
+      }
+
+      .level0 {
+        min-width: 55px;
+      }
+
+      .nest-menu .level1-item {
+        line-height: $single-menu-height;
+      }
+    }
  }
 }