1000 修改刷新页面宽度

wujingjing

2025-02-24 d3efce76cd9698b364e1db3e17aec2f7ee36d0d9

1000 修改刷新页面宽度

 src/constants/index.ts

@@ -115,6 +115,13 @@
export const TENANT_CODE = window.moduleConfig?.auth?.tenant?.code;
//#endregion



//#region ====================== 其他 ======================
// 移动端最小宽度，达到这个阈值会刷新页面
export const MOBILE_MIN_WIDTH = 480;
//#endregion

export const responsePropertiesDict = {
    required: '必填',
    description: '说明',

 src/layout/component/aside.vue

@@ -17,6 +17,7 @@
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import mittBus from '/@/utils/mitt';
import { MOBILE_MIN_WIDTH } from '/@/constants';

// 引入组件
const Logo = defineAsyncComponent(() => import('/@/layout/logo/index.vue'));
@@ -41,7 +42,7 @@
    const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
    const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
    // 判断是否是手机端
    if (state.clientWidth <= 1000) {
    if (state.clientWidth <= MOBILE_MIN_WIDTH) {
        if (isCollapse) {
            document.body.setAttribute('class', 'el-popup-parent--hidden');
            const asideEle = document.querySelector('.layout-container') as HTMLElement;
@@ -80,7 +81,7 @@
        el?.parentNode?.removeChild(el);
    }, 300);
    const clientWidth = document.body.clientWidth;
    if (clientWidth < 1000) themeConfig.value.isCollapse = false;
    if (clientWidth < MOBILE_MIN_WIDTH) themeConfig.value.isCollapse = false;
    document.body.setAttribute('class', '');
};
// 设置/过滤路由（非静态路由/是否显示在菜单中）

 src/layout/index.vue

@@ -9,6 +9,7 @@
import { Local } from '/@/utils/storage';
import mittBus from '/@/utils/mitt';
import { PingLogin } from '/@/api/system';
import { MOBILE_MIN_WIDTH } from '../constants';

// 引入组件
const layouts: any = {
@@ -26,7 +27,7 @@
const onLayoutResize = () => {
    if (!Local.get('oldLayout')) Local.set('oldLayout', themeConfig.value.layout);
    const clientWidth = document.body.clientWidth;
    if (clientWidth < 1000) {
    if (clientWidth < MOBILE_MIN_WIDTH) {
        themeConfig.value.isCollapse = false;
        mittBus.emit('layoutMobileResize', {
            layout: 'defaults',

 src/layout/logo/index.vue

@@ -12,6 +12,7 @@
import { computed, onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { MOBILE_MIN_WIDTH } from '/@/constants';

// 定义变量内容
const storesThemeConfig = useThemeConfig();
@@ -20,7 +21,7 @@
// 设置 logo 的显示。classic 经典布局默认显示 logo
const setShowLogo = computed(() => {
    let { isCollapse, layout } = themeConfig.value;
    return !isCollapse || layout === 'classic' || document.body.clientWidth < 1000;
    return !isCollapse || layout === 'classic' || document.body.clientWidth < MOBILE_MIN_WIDTH;
});
// logo 点击实现菜单展开/收起
const onThemeConfigChange = () => {

 src/layout/navMenu/vertical.vue

@@ -31,12 +31,13 @@
</template>

<script setup lang="ts" name="navMenuVertical">
import { defineAsyncComponent, reactive, computed, onMounted, watch } from 'vue';
import { useRoute, onBeforeRouteUpdate, RouteRecordRaw } from 'vue-router';
import { storeToRefs } from 'pinia';
import { computed, defineAsyncComponent, onMounted, reactive, watch } from 'vue';
import type { RouteRecordRaw } from 'vue-router';
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
import { MOBILE_MIN_WIDTH } from '/@/constants';
import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other';
import { MenuTypeEnum } from '/@/api/menu/type';

// 引入组件
const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue'));
@@ -100,13 +101,13 @@
    // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
    state.defaultActive = setParentHighlight(to);
    const clientWidth = document.body.clientWidth;
    if (clientWidth < 1000) themeConfig.value.isCollapse = false;
    if (clientWidth < MOBILE_MIN_WIDTH) themeConfig.value.isCollapse = false;
});
// 设置菜单的收起/展开
watch(
    themeConfig.value,
    () => {
        document.body.clientWidth <= 1000 ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
        document.body.clientWidth <= MOBILE_MIN_WIDTH ? (state.isCollapse = false) : (state.isCollapse = themeConfig.value.isCollapse);
    },
    {
        immediate: true,