'admin-21.01.29:适配移动端、部分布局同步优化'

vue-admin-wonderful-next/package.json

@@ -9,6 +9,7 @@
     "element-plus": "^1.0.2-beta.30",
     "mitt": "^2.1.0",
     "nprogress": "^0.2.0",
+    "screenfull": "^5.1.0",
     "sortablejs": "^1.13.0",
     "vue": "^3.0.5",
     "vue-router": "^4.0.2",

vue-admin-wonderful-next/src/store/index.ts

@@ -33,6 +33,7 @@ export interface RootStateTypes {
         isBreadcrumbIcon: boolean,
         isTagsviewIcon: boolean,
         isCacheTagsView: boolean,
+        isSortableTagsView: boolean,
         isFooter: boolean,
         isGrayscale: boolean,
         isInvert: boolean,

vue-admin-wonderful-next/src/theme/app.scss

@@ -130,6 +130,7 @@ body,
   @extend .flex;
   flex-direction: column;
   width: 100%;
+  overflow: hidden;
 }
 .flex-margin {
   margin: auto;

vue-admin-wonderful-next/src/theme/element.scss

@@ -917,3 +917,11 @@
 .el-select-dropdown .el-scrollbar__wrap {
   overflow-x: scroll !important;
 }
+
+/* Drawer 抽屉
+------------------------------- */
+.el-drawer__body {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}

vue-admin-wonderful-next/src/theme/media/layout.scss

@@ -0,0 +1,17 @@
+@import './index.scss';
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+  .el-message-box {
+    width: 80% !important;
+  }
+}
+
+/* 页面宽度小于768px
+------------------------------- */
+@media screen and (max-width: $sm) {
+  .layout-navbars-breadcrumb-hide {
+    display: none;
+  }
+}

vue-admin-wonderful-next/src/theme/media/media.scss

@@ -1,2 +1,3 @@
 @import './login.scss';
 @import './error.scss';
+@import './layout.scss';

vue-admin-wonderful-next/src/utils/themeConfig.ts

@@ -29,6 +29,7 @@ export default {
     isBreadcrumbIcon: false,
     isTagsviewIcon: false,
     isCacheTagsView: false,
+    isSortableTagsView: true,
     isFooter: false,
     isGrayscale: false,
     isInvert: false,

vue-admin-wonderful-next/src/views/layout/component/aside.vue

@@ -1,10 +1,18 @@
 <template>
-  <el-aside :class="setCollapseWidth">
+  <el-aside :class="setCollapseWidth" v-if="clientWidth > 1000">
     <Logo v-if="setShowLogo" />
     <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
       <Vertical :menuList="menuList" :class="setCollapseWidth" />
     </el-scrollbar>
   </el-aside>
+  <el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
+    <el-aside class="w100 h100">
+      <Logo v-if="setShowLogo" />
+      <el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
+        <Vertical :menuList="menuList" />
+      </el-scrollbar>
+    </el-aside>
+  </el-drawer>
 </template>
 
 <script lang="ts">
@@ -17,10 +25,12 @@ import {
   ref,
   onBeforeMount,
   onUnmounted,
+  nextTick,
 } from "vue";
 import { useStore } from "/@/store/index.ts";
 import Logo from "/@/views/layout/logo/index.vue";
 import Vertical from "/@/views/layout/navMenu/vertical.vue";
+import { stat } from "fs";
 export default {
   name: "layoutAside",
   components: { Logo, Vertical },
@@ -29,22 +39,12 @@ export default {
     const store = useStore();
     const state = reactive({
       menuList: [],
+      clientWidth: "",
+    });
+    // 获取布局配置信息
+    const getThemeConfig = computed(() => {
+      return store.state.themeConfig;
     });
-    // 设置/过滤路由（非静态路由/是否显示在菜单中）
-    const setFilterRoutes = () => {
-      if (store.state.themeConfig.layout === "columns") return false;
-      state.menuList = filterRoutesFun(store.state.routes);
-    };
-    // 路由过滤递归函数
-    const filterRoutesFun = (arr: Array<object>) => {
-      return arr
-        .filter((item) => !item.meta.isHide)
-        .map((item) => {
-          item = Object.assign({}, item);
-          if (item.children) item.children = filterRoutesFun(item.children);
-          return item;
-        });
-    };
     // 设置菜单展开/收起时的宽度
     const setCollapseWidth = computed(() => {
       let { layout, isCollapse, menuBar } = store.state.themeConfig;
@@ -79,6 +79,25 @@ export default {
         (isShowLogo && layout === "columns")
       );
     });
+    // 设置/过滤路由（非静态路由/是否显示在菜单中）
+    const setFilterRoutes = () => {
+      if (store.state.themeConfig.layout === "columns") return false;
+      state.menuList = filterRoutesFun(store.state.routes);
+    };
+    // 路由过滤递归函数
+    const filterRoutesFun = (arr: Array<object>) => {
+      return arr
+        .filter((item) => !item.meta.isHide)
+        .map((item) => {
+          item = Object.assign({}, item);
+          if (item.children) item.children = filterRoutesFun(item.children);
+          return item;
+        });
+    };
+    // 设置菜单导航是否固定（移动端）
+    const initMenuFixed = (clientWidth: number) => {
+      state.clientWidth = clientWidth;
+    };
     // 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
     watch(store.state.themeConfig, (val) => {
       if (val.isShowLogoChange !== val.isShowLogo) {
@@ -88,6 +107,7 @@ export default {
     });
     // 页面加载前
     onBeforeMount(() => {
+      initMenuFixed(document.body.clientWidth);
       setFilterRoutes();
       proxy.mittBus.on("setSendColumnsChildren", (res) => {
         state.menuList = res.children;
@@ -100,16 +120,21 @@ export default {
       proxy.mittBus.on("getBreadcrumbIndexSetFilterRoutes", () => {
         setFilterRoutes();
       });
+      proxy.mittBus.on("layoutMobileResize", (res) => {
+        initMenuFixed(res.clientWidth);
+      });
     });
     // 页面卸载时
     onUnmounted(() => {
       proxy.mittBus.off("setSendColumnsChildren");
       proxy.mittBus.off("setSendClassicChildren");
       proxy.mittBus.off("getBreadcrumbIndexSetFilterRoutes");
+      proxy.mittBus.off("layoutMobileResize");
     });
     return {
       setCollapseWidth,
       setShowLogo,
+      getThemeConfig,
       ...toRefs(state),
     };
   },

vue-admin-wonderful-next/src/views/layout/index.vue

@@ -6,15 +6,9 @@
 </template>
 
 <script lang="ts">
-import { computed, onBeforeMount, onMounted, onUnmounted } from "vue";
+import { computed, onBeforeMount, onUnmounted, getCurrentInstance } from "vue";
 import { useStore } from "/@/store/index.ts";
-import {
+import { getLocal } from "/@/utils/storage.ts";
-  setLocal,
-  getLocal,
-  setSession,
-  getSession,
-  removeSession,
-} from "/@/utils/storage.ts";
 import Defaults from "/@/views/layout/main/defaults.vue";
 import Classic from "/@/views/layout/main/classic.vue";
 import Transverse from "/@/views/layout/main/transverse.vue";
@@ -23,37 +17,32 @@ export default {
   name: "layout",
   components: { Defaults, Classic, Transverse, Columns },
   setup() {
+    const { proxy } = getCurrentInstance();
     const store = useStore();
     // 获取布局配置信息
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
-    // 窗口大小改变时
+    // 窗口大小改变时(适配移动端)
     const onLayoutResize = () => {
       const clientWidth = document.body.clientWidth;
-      console.log(clientWidth);
       if (clientWidth < 1000) {
-        if (getLocal("themeConfig").layout === "defaults") return false;
+        getThemeConfig.value.isCollapse = false;
-        setSession("oldThemeConfig", getLocal("themeConfig"));
+        proxy.mittBus.emit("layoutMobileResize", {
-        const config = getLocal("themeConfig");
+          layout: "defaults",
-        config.layout = "defaults";
+          clientWidth,
-        console.log(config);
+        });
-        setLocal("themeConfig", config);
       } else {
-        if (
+        proxy.mittBus.emit("layoutMobileResize", {
-          getLocal("themeConfig").layout === getSession("oldThemeConfig").layout
+          layout: getLocal("oldLayout") ? getLocal("oldLayout") : "defaults",
-        )
+          clientWidth,
-          return false;
+        });
-        setLocal("themeConfig", getSession("oldThemeConfig"));
       }
     };
     // 页面加载前
     onBeforeMount(() => {
-      window.addEventListener("resize", onLayoutResize);
-    });
-    // 页面加载时
-    onMounted(() => {
       onLayoutResize();
+      window.addEventListener("resize", onLayoutResize);
     });
     // 页面卸载时
     onUnmounted(() => {

vue-admin-wonderful-next/src/views/layout/logo/index.vue

@@ -18,7 +18,9 @@ export default {
     // 设置 logo 的显示。classic 经典布局默认显示 logo
     const setShowLogo = computed(() => {
       let { isCollapse, layout } = store.state.themeConfig;
-      return !isCollapse || layout === "classic";
+      return (
+        !isCollapse || layout === "classic" || document.body.clientWidth < 1000
+      );
     });
     // logo 点击实现菜单展开/收起
     const onThemeConfigChange = () => {

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/breadcrumb.vue

@@ -2,7 +2,7 @@
   <div class="layout-navbars-breadcrumb" v-show="getThemeConfig.isBreadcrumb">
     <i class="layout-navbars-breadcrumb-icon" :class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
       @click="onThemeConfigChange"></i>
-    <el-breadcrumb>
+    <el-breadcrumb class="layout-navbars-breadcrumb-hide">
       <transition-group name="breadcrumb" mode="out-in">
         <el-breadcrumb-item v-for="(v,k) in breadcrumbList" :key="v.meta.title">
           <span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue

@@ -192,6 +192,12 @@
             <el-switch v-model="getThemeConfig.isCacheTagsView" @change="setLocalThemeConfig"></el-switch>
           </div>
         </div>
+        <div class="layout-breadcrumb-seting-bar-flex mt15">
+          <div class="layout-breadcrumb-seting-bar-flex-label">开启 TagsView 拖拽 </div>
+          <div class="layout-breadcrumb-seting-bar-flex-value">
+            <el-switch v-model="getThemeConfig.isSortableTagsView" @change="onSortableTagsViewChange"></el-switch>
+          </div>
+        </div>
         <div class="layout-breadcrumb-seting-bar-flex mt15">
           <div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
           <div class="layout-breadcrumb-seting-bar-flex-value">
@@ -364,6 +370,7 @@ export default defineComponent({
   setup() {
     const { proxy } = getCurrentInstance();
     const store = useStore();
+    // 获取布局配置信息
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
@@ -479,6 +486,11 @@ export default defineComponent({
       }
       setLocalThemeConfig();
     };
+    // 4、界面显示 --> 开启 TagsView 拖拽
+    const onSortableTagsViewChange = () => {
+      proxy.mittBus.emit("openOrCloseSortable");
+      setLocalThemeConfig();
+    };
     // 4、界面显示 --> 灰色模式/色弱模式
     const onAddFilterChange = (attr: string) => {
       if (attr === "grayscale") {
@@ -515,6 +527,7 @@ export default defineComponent({
     };
     // 5、布局切换
     const onSetLayout = (layout: string) => {
+      setLocal("oldLayout", layout);
       if (getThemeConfig.value.layout === layout) return false;
       getThemeConfig.value.layout = layout;
       getThemeConfig.value.isDrawer = false;
@@ -526,6 +539,7 @@ export default defineComponent({
       if (getThemeConfig.value.layout === "classic") {
         getThemeConfig.value.isShowLogo = true;
         getThemeConfig.value.isBreadcrumb = false;
+        getThemeConfig.value.isCollapse = false;
         getThemeConfig.value.isClassicSplitMenu = false;
         getThemeConfig.value.menuBar = "#FFFFFF";
         getThemeConfig.value.menuBarColor = "#606266";
@@ -535,6 +549,7 @@ export default defineComponent({
       } else if (getThemeConfig.value.layout === "transverse") {
         getThemeConfig.value.isShowLogo = true;
         getThemeConfig.value.isBreadcrumb = false;
+        getThemeConfig.value.isCollapse = false;
         getThemeConfig.value.isTagsview = false;
         getThemeConfig.value.isClassicSplitMenu = false;
         getThemeConfig.value.menuBarColor = "#FFFFFF";
@@ -544,6 +559,7 @@ export default defineComponent({
       } else if (getThemeConfig.value.layout === "columns") {
         getThemeConfig.value.isShowLogo = true;
         getThemeConfig.value.isBreadcrumb = true;
+        getThemeConfig.value.isCollapse = false;
         getThemeConfig.value.isTagsview = true;
         getThemeConfig.value.isClassicSplitMenu = false;
         getThemeConfig.value.menuBar = "#FFFFFF";
@@ -554,6 +570,7 @@ export default defineComponent({
       } else {
         getThemeConfig.value.isShowLogo = false;
         getThemeConfig.value.isBreadcrumb = true;
+        getThemeConfig.value.isCollapse = true;
         getThemeConfig.value.isTagsview = true;
         getThemeConfig.value.isClassicSplitMenu = false;
         getThemeConfig.value.menuBar = "#545c64";
@@ -596,9 +613,19 @@ export default defineComponent({
     };
     onMounted(() => {
       nextTick(() => {
+        // 监听菜单点击，菜单字体背景高亮
         proxy.mittBus.on("onMenuClick", () => {
           onMenuBarHighlightChange();
         });
+        // 监听窗口大小改变，非默认布局，设置成默认布局（适配移动端）
+        proxy.mittBus.on("layoutMobileResize", (res) => {
+          if (getThemeConfig.value.layout === res.layout) return false;
+          getThemeConfig.value.layout = res.layout;
+          getThemeConfig.value.isDrawer = false;
+          initSetLayoutChange();
+          onMenuBarHighlightChange();
+          getThemeConfig.value.isCollapse = false;
+        });
         // 刷新页面时，设置了值，直接取缓存中的值进行初始化
         setTimeout(() => {
           // 顶栏背景渐变
@@ -631,7 +658,9 @@ export default defineComponent({
       });
     });
     onUnmounted(() => {
-      proxy.mittBus.off("onMenuClick", () => {});
+      // 取消监听菜单点击，菜单字体背景高亮
+      proxy.mittBus.off("onMenuClick");
+      proxy.mittBus.off("layoutMobileResize");
     });
     return {
       openDrawer,
@@ -652,6 +681,7 @@ export default defineComponent({
       setLocalThemeConfig,
       onClassicSplitMenuChange,
       onIsBreadcrumbChange,
+      onSortableTagsViewChange,
     };
   },
 });

vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/user.vue

@@ -7,7 +7,8 @@
       <i class="icon-skin iconfont" title="布局配置"></i>
     </div>
     <div class="layout-navbars-breadcrumb-user-icon"><i class="el-icon-bell" title="消息"></i></div>
-    <div class="layout-navbars-breadcrumb-user-icon mr10"><i class="icon-fullscreen iconfont" title="开全屏"></i></div>
+    <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick"><i class="iconfont"
+        :title="isScreenfull ? '开全屏' : '关全屏'" :class="!isScreenfull?'icon-fullscreen':'icon-tuichuquanping'"></i></div>
     <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
       <span class="layout-navbars-breadcrumb-user-link">
         <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
@@ -28,9 +29,17 @@
 </template>
 
 <script lang="ts">
-import { ref, getCurrentInstance, computed } from "vue";
+import {
+  ref,
+  getCurrentInstance,
+  computed,
+  reactive,
+  toRefs,
+  toRef,
+} from "vue";
 import { useRouter } from "vue-router";
 import { ElMessageBox, ElMessage } from "element-plus";
+import screenfull from "screenfull";
 import { resetRoute } from "/@/router/index.ts";
 import { useStore } from "/@/store/index.ts";
 import { clearSession } from "/@/utils/storage.ts";
@@ -40,6 +49,9 @@ export default {
     const { proxy } = getCurrentInstance();
     const router = useRouter();
     const store = useStore();
+    const state = reactive({
+      isScreenfull: false,
+    });
     // 设置布局
     const setFlexAutoStyle = computed(() => {
       if (
@@ -49,6 +61,15 @@ export default {
       )
         return { flex: 1 };
     });
+    // 全屏点击时
+    const onScreenfullClick = () => {
+      if (!screenfull.isEnabled) {
+        ElMessage.warning("暂不不支持全屏");
+        return false;
+      }
+      screenfull.toggle();
+      state.isScreenfull = !state.isScreenfull;
+    };
     // 布局配置 icon 点击时
     const onLayoutSetingClick = () => {
       proxy.mittBus.emit("openSetingsDrawer");
@@ -96,6 +117,8 @@ export default {
       setFlexAutoStyle,
       onLayoutSetingClick,
       onHandleCommandClick,
+      onScreenfullClick,
+      ...toRefs(state),
     };
   },
 };

vue-admin-wonderful-next/src/views/layout/navBars/tagsView/tagsView.vue

@@ -61,6 +61,7 @@ export default {
       },
       tagsRefsIndex: 0,
       tagsViewList: [],
+      sortable: "",
     });
     // 动态设置 tagsView 风格样式
     const setTagsStyle = computed(() => {
@@ -202,19 +203,23 @@ export default {
     const initSortable = () => {
       const el = document.querySelector(".layout-navbars-tagsview-ul");
       if (!el) return false;
-      const sortable = Sortable.create(el, {
+      if (!getThemeConfig.value.isSortableTagsView)
-        animation: 300,
+        state.sortable && state.sortable.destroy();
-        dataIdAttr: "data-name",
+      if (getThemeConfig.value.isSortableTagsView) {
-        onEnd: () => {
+        state.sortable = Sortable.create(el, {
-          const sortEndList = [];
+          animation: 300,
-          sortable.toArray().map((val) => {
+          dataIdAttr: "data-name",
-            state.tagsViewList.map((v) => {
+          onEnd: () => {
-              if (v.name === val) sortEndList.push({ ...v });
+            const sortEndList = [];
+            state.sortable.toArray().map((val) => {
+              state.tagsViewList.map((v) => {
+                if (v.name === val) sortEndList.push({ ...v });
+              });
             });
-          });
+            addBrowserSetSession(sortEndList);
-          addBrowserSetSession(sortEndList);
+          },
-        },
+        });
-      });
+      }
     };
     // 数据加载前
     onBeforeMount(() => {
@@ -222,11 +227,17 @@ export default {
       proxy.mittBus.on("onCurrentContextmenuClick", (data: object) => {
         onCurrentContextmenuClick(data);
       });
+      // 监听布局配置界面开启/关闭拖拽
+      proxy.mittBus.on("openOrCloseSortable", () => {
+        initSortable();
+      });
     });
     // 页面卸载时
     onUnmounted(() => {
       // 取消非本页面调用监听
       proxy.mittBus.off("onCurrentContextmenuClick");
+      // 取消监听布局配置界面开启/关闭拖拽
+      proxy.mittBus.off("openOrCloseSortable");
     });
     // 数据更新时
     onBeforeUpdate(() => {
@@ -266,6 +277,9 @@ export default {
 .layout-navbars-tagsview {
   flex: 1;
   background-color: #ffffff;
+  ::v-deep(.el-scrollbar__wrap) {
+    overflow-x: auto !important;
+  }
   &-ul {
     list-style: none;
     margin: 0;

vue-admin-wonderful-next/src/views/layout/navMenu/vertical.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-menu router :default-active="defaultActive" background-color="transparent" :collapse="getThemeConfig.isCollapse"
+  <el-menu router :default-active="defaultActive" background-color="transparent" :collapse="setIsCollapse"
     :unique-opened="getThemeConfig.isUniqueOpened" :collapse-transition="false">
     <template v-for="val in menuList">
       <el-submenu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
@@ -27,6 +27,7 @@ import {
   computed,
   defineComponent,
   getCurrentInstance,
+  onBeforeMount,
 } from "vue";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
 import { useStore } from "/@/store/index.ts";
@@ -57,14 +58,23 @@ export default defineComponent({
     const getThemeConfig = computed(() => {
       return store.state.themeConfig;
     });
+    // 设置菜单的收起/展开
+    const setIsCollapse = computed(() => {
+      return document.body.clientWidth < 1000
+        ? false
+        : getThemeConfig.value.isCollapse;
+    });
     // 路由更新时
     onBeforeRouteUpdate((to) => {
       state.defaultActive = to.path;
       proxy.mittBus.emit("onMenuClick");
+      const clientWidth = document.body.clientWidth;
+      if (clientWidth < 1000) getThemeConfig.value.isCollapse = false;
     });
     return {
       menuList,
       getThemeConfig,
+      setIsCollapse,
       ...toRefs(state),
     };
   },

vue-admin-wonderful-next/src/views/login/component/account.vue

@@ -110,6 +110,7 @@ export default defineComponent({
     .login-content-code-img {
       width: 100%;
       height: 40px;
+      line-height: 40px;
       background-color: #ffffff;
       border: 1px solid rgb(220, 223, 230);
       color: #333;