perf: 判断mobile 条件 语义化

src/components/SizeSelect/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-dropdown class="max-m:hidden menu--size-select-wrap" trigger="hover" @command="handleSetSize">
+	<el-dropdown class="mobile:hidden menu--size-select-wrap" trigger="hover" @command="handleSetSize">
 		<div class="menu--size-select menu-item le-hover-effect--bg">
 			<LeIcon class-name="size-icon" icon-class="le-text-size" />
 		</div>

src/hooks/useTheme.ts

@@ -9,7 +9,7 @@ import { asideTheme } from '@/styles/theme/aside'
 import { headerTheme } from '@/styles/theme/header'
 import { footerTheme } from '@/styles/theme/footer'
 import { defaultSettingState } from '@/settings.ts'
-import { isMaxM } from '@/utils'
+import { isMobile } from '@/utils'
 
 /**
  * @description 全局主题 hooks
@@ -121,7 +121,7 @@ export const useTheme = () => {
 		watermarkChange()
 		if (isGrey.value) changeGreyOrWeak('grey', true)
 		if (isWeak.value) changeGreyOrWeak('weak', true)
-		setting.changeCollapse(isMaxM())
+		setting.changeCollapse(isMobile())
 		// 判断是否是小屏 额外处理
 		/*if () {
 		}*/

src/layout/LayoutLeft/index.vue

@@ -23,7 +23,7 @@
 			</div>
 		</el-aside>
 		<div
-			class="min-m:hidden absolute left-0 top-0 h-full w-full bg-[rgba(0,0,0,0.2)] layout-mobile-sider-mask transition-all-300"
+			class="pc:hidden absolute left-0 top-0 h-full w-full bg-[rgba(0,0,0,0.2)] layout-mobile-sider-mask transition-all-300"
 			:class="isCollapse ? 'hidden' : ''"
 			@click.stop="setting.changeCollapse(true)"
 		/>

src/layout/components/Header/components/AuthProduct.vue

@@ -3,7 +3,7 @@
 		<el-tooltip :content="$t('le.authProduct')" effect="dark" placement="bottom">
 			<div class="menu--search menu-item le-hover-effect--bg" @click="jumpAuthPage">
 				<SvgIcon icon-class="auth-product" />
-				<span class="inline-block max-m:hidden" style="font-size: 20px; color: #3293ed; margin-left: 3px">采购授权</span>
+				<span class="inline-block mobile:hidden" style="font-size: 20px; color: #3293ed; margin-left: 3px">采购授权</span>
 			</div>
 		</el-tooltip>
 	</div>

src/layout/components/Header/components/Breadcrumb.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['breadcrumb-box flex max-m:hidden']">
+	<div :class="['breadcrumb-box flex mobile:hidden']">
 		<el-breadcrumb separator-icon="ArrowRight">
 			<transition-group name="breadcrumb">
 				<!--				<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">-->

src/layout/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts" name="layout">
-import { computed, type Component, onMounted, onUnmounted } from 'vue'
+import { computed, type Component, onMounted, onUnmounted, nextTick } from 'vue'
 import { LayoutType } from '@/store/interface'
 import useStore from '@/store'
 // import RightPanel from '@/components/RightPanel/index-old.vue'
@@ -24,10 +24,11 @@ const LayoutComponents: Record<LayoutType, Component> = {
 	top: LayoutTop
 }
 const { setting, app } = useStore()
-const layout = computed(() => (app.isMaxM ? 'left' : setting.layout))
+const layout = computed(() => (app.isMobile ? 'left' : setting.layout))
 const showSettings = computed(() => setting.showSettings)
 onMounted(() => {
 	window.addEventListener('resize', app.updateDevice)
+	nextTick(app.updateDevice)
 })
 
 onUnmounted(() => {

src/store/modules/app.ts

@@ -2,13 +2,13 @@ import { AppState } from '@/types'
 // import { ls } from '@/utils'
 import { defineStore } from 'pinia'
 import { getLanguage } from '@/lang'
-import { isMaxM } from '@/utils'
+import { isMobile } from '@/utils'
 
 const useAppStore = defineStore({
 	id: 'app',
 	state: (): AppState => ({
 		device: 'desktop',
-		isMaxM: false,
+		isMobile: false,
 		// sidebar: {
 		// 	opened: true,
 		// 	withoutAnimation: false
@@ -19,7 +19,7 @@ const useAppStore = defineStore({
 	}),
 	actions: {
 		updateDevice() {
-			this.isMaxM = isMaxM()
+			this.isMobile = isMobile()
 		},
 		// toggleSidebar() {
 		// 	this.sidebar.opened = !this.sidebar.opened

src/types/store.d.ts

@@ -1,5 +1,4 @@
 import { /*RouteRecordRaw,*/ RouteLocationNormalized } from 'vue-router'
-import { isMaxM } from '@/utils'
 // import { AppRouteRecordRaw } from '@/router/types'
 
 /**
@@ -7,7 +6,7 @@ import { isMaxM } from '@/utils'
  */
 export interface AppState {
 	device: string
-	isMaxM: boolean
+	isMobile: boolean
 	sidebar?: {
 		opened: boolean
 		withoutAnimation: boolean

src/utils/index.ts

@@ -301,8 +301,8 @@ export const ImageArr = [
 	'wallet'
 ]
 
-// 判断是否为小屏 同 theme.screens.max-m width
-export const isMaxM = () => {
+// 判断是否为小屏 同 theme.screens.mobile width
+export const isMobile = () => {
 	const userAgent = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 	const screenCheck = window.matchMedia('only screen and (max-width: 750px)').matches
 	return userAgent || screenCheck // window.innerWidth <= 750

src/views/flow/group/components/listGroup.vue

@@ -86,7 +86,7 @@
 													<el-tag v-if="element.processType === 'business'" type="success" round class="ml-1" size="small">业务流程</el-tag>
 													<el-tag v-if="element.processState === 0" type="danger" round class="ml-1" size="small">已停用</el-tag>
 												</div>
-												<div class="flex-1 max-m:hidden">{{ element.processKey }}</div>
+												<div class="flex-1 mobile:hidden">{{ element.processKey }}</div>
 											</div>
 										</el-col>
 										<el-col :span="4" :xs="8">

src/views/flow/group/index.vue

@@ -4,13 +4,13 @@
 			<header class="flex flex-wrap mb-[10px]">
 				<el-input
 					v-model="keyword"
-					class="w-[300px] max-m:w-full mt-[10px] mr-auto"
+					class="w-[300px] mobile:w-full mt-[10px] mr-auto"
 					placeholder="搜索"
 					clearable
 					@blur="searchProcess"
 					@clear="searchProcess"
 				/>
-				<div class="actions flex-1 max-m:w-full flex flex-wrap justify-end gap-x-[8px] gap-y-[10px]">
+				<div class="actions flex-1 mobile:w-full flex flex-wrap justify-end gap-x-[8px] gap-y-[10px]">
 					<template v-if="!sortFlag">
 						<el-button @click="addNewGroupEv">新建分组</el-button>
 						<el-button @click="changeComponent">分组排序</el-button>

tailwind.config.ts

@@ -7,8 +7,8 @@ export default {
 	},
 	theme: {
 		screens: {
-			'max-m': { max: '750px' }, // 最大宽 640
-			'min-m': '750px', // 最小宽 640
+			mobile: { max: '750px' }, // 最大宽 750
+			pc: '751px', // 最小宽 751
 			sm: '640px',
 			// => @media (min-width: 640px) { ... }