feat: 方便后续 样式调整兼容 app 根据 设备判断 新增 app-mobile app-pc

src/App.vue

@@ -1,11 +1,13 @@
 <template>
-	<el-config-provider :locale="locale" :size="size">
-		<router-view />
-	</el-config-provider>
+	<div :class="['app-wrapper', app.isMobile ? 'app-mobile' : 'app-pc']">
+		<el-config-provider :locale="locale" :size="size">
+			<router-view />
+		</el-config-provider>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { ElConfigProvider } from 'element-plus'
 import { ls } from '@/utils'
 import useAppStore from '@/store/modules/app'
@@ -40,4 +42,12 @@ watch(
 		immediate: true
 	}
 )
+onMounted(() => {
+	window.addEventListener('resize', app.updateDevice)
+	nextTick(app.updateDevice)
+})
+
+onUnmounted(() => {
+	window.removeEventListener('resize', app.updateDevice)
+})
 </script>

src/layout/index.vue

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

src/styles/index.scss

@@ -32,7 +32,8 @@ body {
 	font-weight: 700;
 }*/
 
-#app {
+#app,
+.app-wrapper {
 	height: 100%;
 }