增加移动端支持

2026-10-07 15:48:05 +08:00 · 2020-11-08 03:35:28 +08:00
parent be93c9cb4e
commit bcee8e4c5e
7 changed files with 137 additions and 22 deletions
@@ -20,8 +20,32 @@ export default {
        $route: 'routeChange',
        '$store.state.keepAlive.list'(val) {
            process.env.NODE_ENV == 'development' && console.log(`[ keepAliveList ] ${val}`)
+        },
+        '$store.state.global.mode': {
+            handler() {
+                if (this.$store.state.global.mode == 'pc') {
+                    if (this.$store.state.global.enableSidebarCollapse) {
+                        this.$store.commit('global/updateThemeSetting', {
+                            'sidebarCollapse': false
+                        })
+                    }
+                }
+                if (this.$store.state.global.mode == 'mobile') {
+                    this.$store.commit('global/updateThemeSetting', {
+                        'sidebarCollapse': true
+                    })
+                }
+                document.body.setAttribute('data-mode', this.$store.state.global.mode)
+            },
+            immediate: true
        }
    },
+    mounted() {
+        window.onresize = () => {
+            this.$store.commit('global/setMode', document.body.clientWidth)
+        }
+        window.onresize()
+    },
    methods: {
        reload(type = 1) {
            if (type == 1) {
@@ -43,6 +43,12 @@ export default {
 </script>

 <style lang="scss" scoped>
+[data-mode=mobile] {
+    .actionbar {
+        width: 100%;
+        transform: translateX(-50%);
+    }
+}
 .actionbar {
    position: fixed;
    z-index: 4;
@@ -1,14 +1,14 @@
 <template>
    <div class="breadcrumb-container">
        <div class="left-box">
-            <div v-if="$store.state.global.enableSidebarCollapse" :class="{
+            <div v-if="$store.state.global.mode == 'mobile' || $store.state.global.enableSidebarCollapse" :class="{
                'sidebar-collapse': true,
                'is-collapse': $store.state.global.sidebarCollapse
            }" @click="$store.commit('global/toggleSidebarCollapse')"
            >
                <svg-icon name="collapse" />
            </div>
-            <el-breadcrumb separator-class="el-icon-arrow-right">
+            <el-breadcrumb v-if="$store.state.global.mode == 'pc'" separator-class="el-icon-arrow-right">
                <transition-group name="breadcrumb">
                    <el-breadcrumb-item v-for="item in breadcrumbList" :key="item.path" :to="item.path">{{ item.meta.title }}</el-breadcrumb-item>
                </transition-group>
@@ -43,6 +43,12 @@ export default {
 </script>

 <style lang="scss" scoped>
+[data-mode=mobile] {
+    .breadcrumb-container {
+        width: 100%;
+        transform: translateX(-50%);
+    }
+}
 .breadcrumb-container {
    position: fixed;
    z-index: 999;
@@ -1,20 +1,26 @@
 <template>
    <div>
-        <el-drawer title="主题配置" :visible.sync="openTheme" direction="rtl" size="500px">
+        <el-drawer title="主题配置" :visible.sync="openTheme" direction="rtl" :size="$store.state.global.mode == 'pc' ? '500px' : '300px'">
            <el-alert title="主题配置可实时预览效果，更多设置请在 src/setting.js 中进行设置，建议在生产环境隐藏主题配置功能" type="error" :closable="false" />
-            <el-form ref="form" label-width="100px" size="small">
-                <el-form-item label="头部">
+            <el-form ref="form" :label-position="$store.state.global.mode == 'pc' ? 'right' : 'top'" label-width="100px" size="small">
+                <el-form-item v-if="$store.state.global.mode == 'pc'" label="头部">
                    <el-radio-group v-model="showHeader">
                        <el-radio-button :label="true">显示</el-radio-button>
                        <el-radio-button :label="false">隐藏</el-radio-button>
                    </el-radio-group>
                </el-form-item>
-                <el-form-item label="侧边栏切换">
+                <el-form-item v-if="$store.state.global.mode == 'pc'" label="侧边栏切换">
                    <el-radio-group v-model="enableSidebarCollapse">
                        <el-radio-button :label="true">启用</el-radio-button>
                        <el-radio-button :label="false">关闭</el-radio-button>
                    </el-radio-group>
                </el-form-item>
+                <el-form-item label="侧边栏导航">
+                    <el-radio-group v-model="sidebarCollapse">
+                        <el-radio-button :label="true">收起</el-radio-button>
+                        <el-radio-button :label="false">展开</el-radio-button>
+                    </el-radio-group>
+                </el-form-item>
                <el-form-item label="底部版权">
                    <el-radio-group v-model="showCopyright">
                        <el-radio-button :label="true">显示</el-radio-button>
@@ -28,7 +34,7 @@
                    </el-radio-group>
                    <el-alert title="该功能为页面右上角的搜索按钮，可对侧边栏导航进行快捷搜索" type="info" :closable="false" />
                </el-form-item>
-                <el-form-item label="全屏">
+                <el-form-item v-if="$store.state.global.mode == 'pc'" label="全屏">
                    <el-radio-group v-model="enableFullscreen">
                        <el-radio-button :label="true">开启</el-radio-button>
                        <el-radio-button :label="false">关闭</el-radio-button>
@@ -105,6 +111,16 @@ export default {
                })
            }
        },
+        sidebarCollapse: {
+            get: function() {
+                return this.$store.state.global.sidebarCollapse
+            },
+            set: function(newValue) {
+                this.$store.commit('global/updateThemeSetting', {
+                    'sidebarCollapse': newValue
+                })
+            }
+        },
        showCopyright: {
            get: function() {
                return this.$store.state.global.showCopyright
@@ -1,7 +1,7 @@
 <template>
    <div class="user">
        <div class="tools">
-            <span class="item item-pro" @click="pro">
+            <span v-if="$store.state.global.mode == 'pc'" class="item item-pro" @click="pro">
                <svg-icon name="pro" />
                <span class="title">查看专业版</span>
            </span>
@@ -10,7 +10,7 @@
                    <svg-icon name="search" />
                </span>
            </el-tooltip>
-            <el-tooltip v-if="isFullscreenEnable && $store.state.global.enableFullscreen" effect="dark" content="全屏" placement="bottom">
+            <el-tooltip v-if="$store.state.global.mode == 'pc' && isFullscreenEnable && $store.state.global.enableFullscreen" effect="dark" content="全屏" placement="bottom">
                <span class="item" @click="fullscreen">
                    <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
                </span>
@@ -4,7 +4,7 @@
            '--real-sidebar-width': realSidebarWidth
        }"
        >
-            <header v-if="$store.state.global.showHeader">
+            <header v-if="$store.state.global.mode == 'pc' && $store.state.global.showHeader">
                <div class="header-container">
                    <div class="main">
                        <Logo />
@@ -26,8 +26,12 @@
                </div>
            </header>
            <div class="wrapper">
-                <div class="sidebar-container">
-                    <div v-if="!$store.state.global.showHeader && $store.state.global.allRoutes.length > 1" class="main-sidebar-container">
+                <div :class="{
+                    'sidebar-container': true,
+                    'show': $store.state.global.mode == 'mobile' && !$store.state.global.sidebarCollapse
+                }"
+                >
+                    <div v-if="(!$store.state.global.showHeader || $store.state.global.mode == 'mobile') && $store.state.global.allRoutes.length > 1" class="main-sidebar-container">
                        <Logo :show-title="false" class="sidebar-logo" />
                        <div class="nav">
                            <template v-for="(item, index) in $store.state.global.allRoutes">
@@ -44,7 +48,7 @@
                    </div>
                    <div :class="{
                        'sub-sidebar-container': true,
-                        'is-collapse': $store.state.global.sidebarCollapse
+                        'is-collapse': $store.state.global.mode == 'pc' && $store.state.global.sidebarCollapse
                    }" @scroll="onSidebarScroll"
                    >
                        <Logo :show-logo="$store.state.global.allRoutes.length <= 1" :class="{
@@ -53,8 +57,8 @@
                            'shadow': sidebarScrollTop
                        }"
                        />
-                        <el-menu :background-color="variables.g_sub_sidebar_bg" :text-color="variables.g_sub_sidebar_menu_color" :active-text-color="variables.g_sub_sidebar_menu_active_color" unique-opened :default-active="$route.meta.activeMenu || $route.path" :collapse="$store.state.global.sidebarCollapse" :collapse-transition="false" :class="{
-                            'is-collapse-without-logo': $store.state.global.allRoutes.length > 1 && $store.state.global.sidebarCollapse
+                        <el-menu :background-color="variables.g_sub_sidebar_bg" :text-color="variables.g_sub_sidebar_menu_color" :active-text-color="variables.g_sub_sidebar_menu_active_color" unique-opened :default-active="$route.meta.activeMenu || $route.path" :collapse="$store.state.global.mode == 'pc' && $store.state.global.sidebarCollapse" :collapse-transition="false" :class="{
+                            'is-collapse-without-logo': $store.state.global.allRoutes.length > 1 && $store.state.global.mode == 'pc' && $store.state.global.sidebarCollapse
                        }"
                        >
                            <transition-group name="sidebar">
@@ -63,6 +67,11 @@
                        </el-menu>
                    </div>
                </div>
+                <div :class="{
+                    'sidebar-mask': true,
+                    'show': $store.state.global.mode == 'mobile' && !$store.state.global.sidebarCollapse
+                }" @click="$store.commit('global/toggleSidebarCollapse')"
+                />
                <div class="main-container">
                    <Breadcrumb :class="{'shadow': scrollTop}" />
                    <div class="main">
@@ -110,17 +119,32 @@ export default {
        },
        realSidebarWidth() {
            let realSidebarWidth = 0
-            if (!this.$store.state.global.showHeader && this.$store.state.global.allRoutes.length > 1) {
-                realSidebarWidth = parseInt(variables.g_main_sidebar_width)
-            }
-            if (this.$store.state.global.sidebarCollapse) {
-                realSidebarWidth += 64
+            if (this.$store.state.global.mode == 'pc') {
+                if (!this.$store.state.global.showHeader && this.$store.state.global.allRoutes.length > 1) {
+                    realSidebarWidth = parseInt(variables.g_main_sidebar_width)
+                }
+                if (this.$store.state.global.sidebarCollapse) {
+                    realSidebarWidth += 64
+                } else {
+                    realSidebarWidth += parseInt(variables.g_sub_sidebar_width)
+                }
            } else {
-                realSidebarWidth += parseInt(variables.g_sub_sidebar_width)
+                realSidebarWidth = parseInt(variables.g_main_sidebar_width) + parseInt(variables.g_sub_sidebar_width)
            }
            return `${realSidebarWidth}px`
        }
    },
+    watch: {
+        '$store.state.global.sidebarCollapse'(val) {
+            if (this.$store.state.global.mode == 'mobile') {
+                if (!val) {
+                    document.querySelector('body').classList.add('hidden')
+                } else {
+                    document.querySelector('body').classList.remove('hidden')
+                }
+            }
+        }
+    },
    mounted() {
        this.$hotkeys('alt+s', e => {
            if (this.$store.state.global.enableNavSearch) {
@@ -151,6 +175,18 @@ export default {
 </script>

 <style lang="scss" scoped>
+[data-mode=mobile] {
+    .sidebar-container {
+        transition: 0.3s;
+        transform: translateX(calc(-1 * #{$g-sidebar-width}));
+        &.show {
+            transform: translateX(0);
+        }
+    }
+    .main-container {
+        margin-left: 0 !important;
+    }
+}
 .layout {
    height: 100%;
 }
@@ -238,12 +274,30 @@ header {
    height: 100%;
    .sidebar-container {
        position: fixed;
-        z-index: 1000;
+        z-index: 1010;
        top: 0;
        bottom: 0;
        display: flex;
        width: var(--real-sidebar-width);
    }
+    .sidebar-mask {
+        position: fixed;
+        z-index: 1000;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba($color: #000, $alpha: 0.5);
+        backdrop-filter: blur(2px);
+        transition: all 0.2s;
+        transform: translateZ(0);
+        opacity: 0;
+        visibility: hidden;
+        &.show {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
    .main-sidebar-container,
    .sub-sidebar-container {
        transition: 0.3s;
@@ -40,6 +40,8 @@ function filterAsyncRoutes(routes, permissions) {

 const state = {
    ...setting,
+    // 显示模式，支持：mobile、pc
+    mode: 'pc',
    // 如果未开启 openPermission 则 permissionInit 和 permissions 参数不会使用到
    permissionInit: false,
    permissions: [],
@@ -117,6 +119,13 @@ const actions = {
 }

 const mutations = {
+    setMode(state, width) {
+        if (width < 992) {
+            state.mode = 'mobile'
+        } else {
+            state.mode = 'pc'
+        }
+    },
    setPermissions(state, permissions) {
        state.permissions = permissions
    },