模块嵌入

src/layout/components/Navbar/Icon.vue

@@ -17,7 +17,7 @@ export default {
         return <Icon custom={icon} class='sub-el-icon' size="18" />
       }
       else {
-        return <svg-icon class-name="sub-el-icon" icon-class={this.icon}/>
+        return <i class="sub-el-icon"><svg-icon class-name="sub-el-icon__svg" icon-class={this.icon}/></i>
       }
     }
   },
@@ -31,7 +31,14 @@ export default {
 
 <style scoped lang="scss">
 .sub-el-icon {
-  margin-right: 4px;
+  margin-right: 5px;
+  width: 18px !important;
+  text-align: center;
+  vertical-align: middle;
   color: currentColor;
+  display: inline-block;
+
+  &__svg {
+  }
 }
 </style>

src/layout/components/Navbar/index.vue

@@ -2,7 +2,7 @@
   <div>
     <header class="navbar navbar-expand-md d-print-none">
       <div class="container-xl">
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+        <button v-show="$store.state.app.device === 'mobile'" :aria-expanded="isShowMenuMobile" class="navbar-toggler" @click="isShowMenuMobile = !isShowMenuMobile">
           <span class="navbar-toggler-icon" />
         </button>
         <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
@@ -70,7 +70,7 @@
     </header>
 
     <header class="navbar-expand-md">
-      <div id="navbar-menu" class="collapse navbar-collapse">
+      <div id="navbar-menu" class="navbar-collapse" v-if="$store.state.app.device === 'desktop'">
         <el-menu
           style="width: 100%;padding: 0 10px;"
           :text-color="variables.menuText"
@@ -82,6 +82,27 @@
           <Item v-for="(item, index) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
         </el-menu>
       </div>
+
+      <div id="navbar-menu-mobile" class="navbar-collapse collapse" v-else>
+        <transition name="fade-transform-y">
+          <div class="navbar" v-show="isShowMenuMobile">
+            <div class="container-xl">
+              <div class="row flex-fill align-items-center">
+                <el-menu
+                  unique-opened
+                  style="width: 100%;padding: 0 10px;"
+                  :text-color="variables.menuText"
+                  :background-color="variables.menuBg"
+                  :active-text-color="variables.menuActiveText"
+                  :default-active="activeMenu"
+                >
+                  <Item v-for="(item, index) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
+                </el-menu>
+              </div>
+            </div>
+          </div>
+        </transition>
+      </div>
     </header>
   </div>
 </template>
@@ -100,7 +121,8 @@ export default {
   },
   data() {
     return {
-      isFullscreen: false
+      isFullscreen: false,
+      isShowMenuMobile: true,
     }
   },
   computed: {

src/layout/mixin/ResizeHandler.js

@@ -17,7 +17,7 @@ export default {
   beforeDestroy() {
     window.removeEventListener('resize', this.$_resizeHandler)
   },
-  mounted() {
+  created() {
     const isMobile = this.$_isMobile()
     if (isMobile) {
       store.dispatch('app/toggleDevice', 'mobile')

src/styles/navbar.scss

@@ -3034,10 +3034,6 @@ progress {
     flex-basis: auto
   }
 
-  .navbar-expand-md .navbar-toggler {
-    display: none
-  }
-
   .navbar-expand-md .offcanvas {
     position: static;
     z-index: auto;
@@ -12921,185 +12917,6 @@ img,svg {
   color: var(--tblr-yellow-fg)!important
 }
 
-.text-lime {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-lime-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-lime-fg {
-  color: var(--tblr-lime-fg)!important
-}
-
-.text-green {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-green-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-green-fg {
-  color: var(--tblr-green-fg)!important
-}
-
-.text-teal {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-teal-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-teal-fg {
-  color: var(--tblr-teal-fg)!important
-}
-
-.text-cyan {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-cyan-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-cyan-fg {
-  color: var(--tblr-cyan-fg)!important
-}
-
-.text-x {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-x-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-x-fg {
-  color: var(--tblr-x-fg)!important
-}
-
-.text-facebook {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-facebook-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-facebook-fg {
-  color: var(--tblr-facebook-fg)!important
-}
-
-.text-twitter {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-twitter-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-twitter-fg {
-  color: var(--tblr-twitter-fg)!important
-}
-
-.text-linkedin {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-linkedin-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-linkedin-fg {
-  color: var(--tblr-linkedin-fg)!important
-}
-
-.text-google {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-google-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-google-fg {
-  color: var(--tblr-google-fg)!important
-}
-
-.text-youtube {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-youtube-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-youtube-fg {
-  color: var(--tblr-youtube-fg)!important
-}
-
-.text-vimeo {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-vimeo-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-vimeo-fg {
-  color: var(--tblr-vimeo-fg)!important
-}
-
-.text-dribbble {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-dribbble-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-dribbble-fg {
-  color: var(--tblr-dribbble-fg)!important
-}
-
-.text-github {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-github-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-github-fg {
-  color: var(--tblr-github-fg)!important
-}
-
-.text-instagram {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-instagram-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-instagram-fg {
-  color: var(--tblr-instagram-fg)!important
-}
-
-.text-pinterest {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-pinterest-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-pinterest-fg {
-  color: var(--tblr-pinterest-fg)!important
-}
-
-.text-vk {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-vk-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-vk-fg {
-  color: var(--tblr-vk-fg)!important
-}
-
-.text-rss {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-rss-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-rss-fg {
-  color: var(--tblr-rss-fg)!important
-}
-
-.text-flickr {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-flickr-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-flickr-fg {
-  color: var(--tblr-flickr-fg)!important
-}
-
-.text-bitbucket {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-bitbucket-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-bitbucket-fg {
-  color: var(--tblr-bitbucket-fg)!important
-}
-
-.text-tabler {
-  --tblr-text-opacity: 1;
-  color: rgba(var(--tblr-tabler-rgb),var(--tblr-text-opacity))!important
-}
-
-.text-tabler-fg {
-  color: var(--tblr-tabler-fg)!important
-}
 
 .bg-gray-50 {
   --tblr-bg-opacity: .1;
@@ -13327,102 +13144,3 @@ img,svg {
   height: 100%!important
 }
 
-.opacity-0 {
-  opacity: 0!important
-}
-
-.opacity-5 {
-  opacity: .05!important
-}
-
-.opacity-10 {
-  opacity: .1!important
-}
-
-.opacity-15 {
-  opacity: .15!important
-}
-
-.opacity-20 {
-  opacity: .2!important
-}
-
-.opacity-25 {
-  opacity: .25!important
-}
-
-.opacity-30 {
-  opacity: .3!important
-}
-
-.opacity-35 {
-  opacity: .35!important
-}
-
-.opacity-40 {
-  opacity: .4!important
-}
-
-.opacity-45 {
-  opacity: .45!important
-}
-
-.opacity-50 {
-  opacity: .5!important
-}
-
-.opacity-55 {
-  opacity: .55!important
-}
-
-.opacity-60 {
-  opacity: .6!important
-}
-
-.opacity-65 {
-  opacity: .65!important
-}
-
-.opacity-70 {
-  opacity: .7!important
-}
-
-.opacity-75 {
-  opacity: .75!important
-}
-
-.opacity-80 {
-  opacity: .8!important
-}
-
-.opacity-85 {
-  opacity: .85!important
-}
-
-.opacity-90 {
-  opacity: .9!important
-}
-
-.opacity-95 {
-  opacity: .95!important
-}
-
-.opacity-100 {
-  opacity: 1!important
-}
-
-.hover-shadow-sm:hover {
-  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important
-}
-
-.hover-shadow:hover {
-  box-shadow: rgba(var(--tblr-body-color-rgb),.04) 0 2px 4px 0!important
-}
-
-.hover-shadow-lg:hover {
-  box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important
-}
-
-.hover-shadow-none:hover {
-  box-shadow: none!important
-}

src/styles/sidebar.scss

@@ -15,3 +15,21 @@
   text-align: center;
   min-width: 100px !important;
 }
+
+#navbar-menu-mobile {
+  .el-menu {
+    border-right: none;
+
+    .el-menu-item, .el-submenu__title{
+      font-size: var(--tblr-nav-link-font-size);
+      height: auto;
+      line-height: inherit;
+      min-height: 2rem;
+      padding: .5rem calc(calc(var(--tblr-page-padding)* 2) / 2);
+    }
+    .el-submenu.is-active .el-submenu__title {
+      border-bottom: 0;
+      color: var(--theme-color);
+    }
+  }
+}

src/styles/transition.scss

@@ -26,7 +26,21 @@
   opacity: 0;
   transform: translateX(30px);
 }
+/* fade-transform-y */
+.fade-transform-y-leave-active,
+.fade-transform-y-enter-active {
+  transition: all .5s;
+}
 
+.fade-transform-y-enter {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.fade-transform-y-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}
 /* breadcrumb transition */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {