修复移动端顶部导航昵称过长导致横向滚动的问题

src/layout/navBars/breadcrumb/user.vue

@@ -56,7 +56,7 @@
     <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
       <span class="layout-navbars-breadcrumb-user-link">
         <img :src="avatar" class="layout-navbars-breadcrumb-user-link-photo mr5" />
-        {{ userInfos.userName === '' ? 'common' : userInfos.userName }}
+        <span class="layout-navbars-breadcrumb-user-link-name">{{ userInfos.userName ? userInfos.userName : '' }}</span>
         <el-icon class="el-icon--right">
           <ele-ArrowDown />
         </el-icon>

src/stores/themeConfig.ts

@@ -20,7 +20,7 @@ export const useThemeConfig = defineStore('themeConfig', {
        * 全局主题
        */
       // 默认 primary 主题颜色 蓝色 #409eff 红色 #F34D37 紫色 #6954f0 绿色 #41b584
-      primary: '#F34D37',
+      primary: '#6954f0',
       // 是否开启深色模式
       isIsDark: false,
 

src/theme/app.scss

@@ -189,6 +189,18 @@ body,
   }
 }
 
+.layout-container {
+  .layout-aside {
+    .el-scrollbar__view {
+      overflow: unset;
+    }
+  }
+}
+
+.error.layout-padding {
+  position: relative;
+}
+
 /* element plus 全局样式
 ------------------------------- */
 .layout-breadcrumb-seting {
@@ -328,4 +340,31 @@ body,
   .pl#{$i} {
     padding-left: #{$i}px !important;
   }
+
+  .el-form .mb#{$i} .el-form-item:last-of-type {
+    margin-bottom: 0px !important;
+  }
+
+  .el-form .el-col.mb#{$i} {
+    margin-bottom: #{$i}px !important;
+  }
+}
+
+/* 文字省略
+------------------------------- */
+@for $i from 1 through 5 {
+  .my-line-#{$i} {
+    @if $i == '1' {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    } @else {
+      display: -webkit-box !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      -webkit-line-clamp: $i;
+      -webkit-box-orient: vertical !important;
+    }
+  }
 }

src/theme/element.scss

@@ -319,3 +319,27 @@
     overflow: auto;
   }
 }
+
+/* Form 表单
+------------------------------- */
+.el-form {
+  .el-col {
+    margin-bottom: 20px;
+  }
+}
+
+/* ColorPicker 颜色选择器
+------------------------------- */
+.el-color-predefine__color-selector {
+  border: 1px solid var(--el-border-color);
+}
+
+/* Button 按钮
+------------------------------- */
+.el-button:not(.is-circle) i.el-icon,
+.el-button i.iconfont,
+.el-button i.fa,
+.el-button--default i.iconfont,
+.el-button--default i.fa {
+  margin-right: 0px;
+}

src/theme/index.scss

@@ -1,10 +1,10 @@
 @import './app.scss';
+@import './my-app.scss';
 @import 'common/transition.scss';
 @import './other.scss';
 @import './element.scss';
+@import './my-element.scss';
 @import './media/media.scss';
 @import './waves.scss';
 @import './dark.scss';
-@import './my-element.scss';
 @import './my-flex.scss';
-@import './my-app.scss';

src/theme/media/form.scss

@@ -8,6 +8,9 @@
     text-align: left !important;
     // 移动端 label 右对齐问题
     justify-content: flex-start !important;
+    height: unset !important;
+    line-height: unset !important;
+    margin-bottom: 5px;
   }
   .el-form-item__content {
     margin-left: 0 !important;

src/theme/media/layout.scss

@@ -7,6 +7,12 @@
   .el-message-box {
     width: 80% !important;
   }
+
+  .layout-navbars-breadcrumb-user-link-name {
+    // display: none;
+    max-width: 42px;
+    @include text-ellipsis(1);
+  }
 }
 
 /* 页面宽度小于768px

src/theme/my-app.scss

@@ -1,48 +0,0 @@
-/* 主布局样式
-------------------------------- */
-.layout-container {
-  .layout-aside {
-    .el-scrollbar__view {
-      overflow: unset;
-    }
-  }
-}
-
-.error.layout-padding {
-  position: relative;
-}
-
-.el-form .mb20 .el-form-item:last-of-type {
-  margin-bottom: 0px !important;
-}
-
-.el-form .el-col.mb20 {
-  margin-bottom: 20px !important;
-}
-
-@media only screen and (max-width: 768px) {
-  .el-form .el-col .el-form-item .el-form-item__label {
-    height: unset;
-    line-height: unset;
-    margin-bottom: 5px;
-  }
-}
-
-/* 文字省略
-------------------------------- */
-@for $i from 1 through 5 {
-  .my-line-#{$i} {
-    @if $i == '1' {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    } @else {
-      display: -webkit-box !important;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      -webkit-line-clamp: $i;
-      -webkit-box-orient: vertical !important;
-    }
-  }
-}

src/theme/my-element.scss

@@ -1,25 +0,0 @@
-@import 'mixins/index.scss';
-
-/* Form 表单
-------------------------------- */
-.el-form {
-  .el-col {
-    margin-bottom: 20px !important;
-  }
-}
-
-/* ColorPicker 颜色选择器
-------------------------------- */
-.el-color-predefine__color-selector {
-  border: 1px solid var(--el-border-color);
-}
-
-/* Button 按钮
-------------------------------- */
-.el-button:not(.is-circle) i.el-icon,
-.el-button i.iconfont,
-.el-button i.fa,
-.el-button--default i.iconfont,
-.el-button--default i.fa {
-  margin-right: 0px;
-}

src/views/admin/cache/index.vue

@@ -46,7 +46,7 @@ const onQuery = async () => {
 
 const onClear = (row: any) => {
   proxy.$modal
-    .confirmDelete(`确定要清除【${row.description}缓存?`, { icon: 'ele-Brush' })
+    .confirmDelete(`确定要清除【${row.description}】缓存?`, { icon: 'ele-Brush' })
     .then(async () => {
       await new CacheApi().clear({ cacheKey: row.value }, { loading: true, showSuccessMessage: true })
       onQuery()

src/views/example/personal/index.vue

@@ -240,7 +240,7 @@ const currentTime = computed(() => {
       padding: 0 15px;
       .personal-title {
         font-size: 18px;
-        @include text-ellipsis(1);
+        @include text-ellipsis(2);
       }
       .personal-item {
         display: flex;