update

src/packages/mobile/assets/themes/base/iconfont.less

@@ -4,7 +4,7 @@
     src        : url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWUAAsAAAAADEgAAAVGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDagqKYIhxATYCJAMkCxQABCAFhGcHbxuCClFUcCLIfkiStNh4oAABRwAAJIcDAAcA/GAxD4ggGvvf7MlTa18U0RI0/kQiaRJNNKJYIwUSLVAPK+FtLdu3rhlUhLkqqV1Vv7+XvevZyYamcQrjcC8k1WMU86+b/ZTqh5pp6ChmUDELE++SG8FrCjWT7Uw2tf//fqUTZT/AJq49kzG7fyJruy1p4vhWHN8zQBtV1oKVumDLto/pQFdZl7uMwMB1Ozo3Tq5uW4snSprWuh5rYJC2jyd5qloj0au0MKHn6PTdtIhvKul9OgV8DZ8//nOJEUnNrCOdPT5OWu9vOG05Y1vMvfwLm68bLp5QkXF5Z/542x59oxvXXNY1qNt7zx0tAz1Jat+boM235e1/Vqjmt7m2lBrP1nJgZGKG4SRr8qqj+88THZZ1hOIXtT0axyUEjUtIND4h0wSEQpsjVNo8oUNbInRpy149FPaXXmjZ0YofpHMgvmFOtu6NZitCKgdro/YYLTteerIzn7p6+NeR01DXlJMzN1MsSlVMj8cPJwF89/BA3N0B8scR9TT2sJoCLkIyuGKyPGP6uKgeLU7lBn42C2L8AWJIyBAM4v08Wm6vhYqE+tyWXiJvFVLwc4NkDgdCXMTA4RNn2oN+eBJ7gCxPcDVTuAINWDpFiEh4sGlG/D2Nx94yWNydBc9bGLUWAi0YZi1cbJcjhJghwofjuEMDfLXJ21v8/t6FI8zMoD51Rzw0Deo2UTiH09/JjAvMYD+P41s/uHIFdHyYOuSjuZpy2Hxev4aFBLa6zzbrCAIBTJ6JZMYaFAg187hEh965pk6ZEmSEsXHMWdYAGGYZGxMvZ2f2HyMG+jeG3g52YaH2KYDBmg50xVhF81TFgA8pSvFK5um59pWGN/YgNqudZ0/RlIS5YSXWE353VPsbEGvjrfSz07DzveH7LsOunyuFrPT9Kd8f0tpkyzUe0ahxYd8NvxpBI/cb+JccSQGagHIGhTgO/U22rWyqoTz8Cv9oU+NsbnqkW73mmvW/so5zjnJyinKO23cwwASz2fflWenUarpPpqdnpg/9nYMBJpjN/k6+HyUtJ/n9VJ3ifZ29Yp3UvSKKk9qq9arVivVK2CxaWDeIqgSF0WxL6LaBYSroYF4hGpwb2OqsAoAU0Fzgm4uiub4FPwADVy5Ks/+giYw3M93TwWhh3lR0YBidpdkG1TzeUluxWsphGe0bmMTAHBemxkcaU16giWiJtJQ1xRViRORpziWQr6t4Ls3Mdflr00ugJntewfC1AOeaKn2PkmbchS/PrHiuwczpVB2o+/lYVD5QpaaSlkh0DNowANgu5miSYiiMVf+YV2vusphk28YckgKVbzOHpIVoN2Foi4Hx3/qMDEXqV1nyvzfu1+kfOZLZLhYwTstQbKC3llnZQM+sRS+lX+r672pHKPsSwfABCTAAAewpuQBP5rUve+tYr101hUSGLmSyTPhFbAMVmQt0yPKFAVvgt/WQKigHXUiRAwDtqVeAMPMGycRPyGZW/CL+gGrjDzpm/mHgbsx3N3Qa+pBRCSawfIFcU2Mch4TFXmP6UCmuqrxHdjmWQ+SHxfpTbJCnWMM9prGIAcNUwwl/NKwqAstUoBY/E7EbQWDqrsTXVLcOMaQIlABLL0BOIw3jZ5f867uGUg8qCvfk34eZoxpSPIj4wh78U2vTq9eddHUepWJCqgxghLakBk7GhVFl1xBg6xcqIE34shFV1oaAZDN9rf769vpDT4MB6yz9SJGjRI1OdKMX/Rio91XqUddv1tOKZeAt5NHQ1XmFHvXDZUZPynoZ1TjhMx61WgAA');
 }
 
-[class^='g-icon'] {
+[class*='g-icon'] {
     --icon-mall       : '\e696'; // 商城
     --icon-mall-filled: '\e697'; // 商城(填充)
     --icon-cart       : '\e69a'; // 购物车

src/packages/mobile/components/layouts/page/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import { RouteRecordNormalized, RouteRecordName } from 'vue-router';
+import { RouteRecordNormalized, RouteRecordName } from 'vue-router'
 import animateRouter from '@mobile/router/animateRouter'
 
 const { state } = animateRouter;

src/packages/mobile/main.ts

@@ -6,10 +6,11 @@ import directives from '@/directives' // 自定义指令集
 import '@/services/subscribe' // 全局订阅通知
 import '@/mock' // 模拟数据
 import '@/utils/h5plus' // 加载html5+
-import '@/utils/client' // 适配客户端屏幕
 import '@/hooks/theme' // 加载主题
+import client from '@/utils/client' // 适配客户端
 import layouts from './components/layouts' // 全局布局组件
 import './assets/themes/style.less' // 主题样式
+import { timerInterceptor } from '@/utils/timer'
 // import Vconsole from 'vconsole'
 // new Vconsole();
 
@@ -17,4 +18,11 @@ const app = createApp(App)
 app.use(router)
 app.use(directives)
 app.use(layouts)
-app.mount('#app')
+app.mount('#app')
+
+// 等待 html 加载完成
+document.addEventListener('DOMContentLoaded', () => {
+    client.screenAdapter(true);
+    // 监听窗口大小变化
+    window.addEventListener('resize', timerInterceptor.setDebounce(() => client.screenAdapter(true)));
+}, false)

src/packages/mobile/router/animateRouter.ts

@@ -76,6 +76,11 @@ export default new (class {
             this.addHistory(to);
         })
 
+        router.afterEach(() => {
+            const { excludeName } = toRefs(this._state.value);
+            excludeName.value = [];
+        })
+
         return router;
     }
 
@@ -85,7 +90,6 @@ export default new (class {
      */
     private addHistory = (route: RouteLocationNormalized) => {
         const { historyStacks, excludeName, actionName, transitionName } = toRefs(this._state.value);
-        excludeName.value = [];
 
         // 如果是替换动作，必定是前进
         if (actionName.value === 'replace') {

src/packages/pc/main.ts

@@ -5,14 +5,23 @@ import directives from '@/directives' // 自定义指令集
 import '@/services/subscribe' // 全局订阅通知
 import '@/mock' // 模拟数据
 import '@/hooks/theme' // 加载主题
+import client from '@/utils/client' // 适配客户端
 import layouts from "./components/layouts" // 布局组件
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import './assets/themes/style.less' // 主题样式
+import { timerInterceptor } from '@/utils/timer'
 
 const app = createApp(App)
 app.use(router)
 app.use(directives)
 app.use(ElementPlus)
 app.use(layouts)
-app.mount('#app')
+app.mount('#app')
+
+// 等待 html 加载完成
+document.addEventListener('DOMContentLoaded', () => {
+    client.screenAdapter(false);
+    // 监听窗口大小变化
+    window.addEventListener('resize', timerInterceptor.setDebounce(() => client.screenAdapter(false)));
+}, false)

src/utils/client/index.ts

@@ -1,47 +1,51 @@
-import { reactive, readonly } from 'vue'
-import { timerInterceptor } from '@/utils/timer'
+import { reactive, toRefs, readonly } from 'vue'
 
 export default new (class {
     private _state = reactive({
-        clientWidth: 0
+        clientWidth: 0, // 客户端宽度
+        isMobile: false, // 是否移动端
     })
 
     /** 只读状态 */
     state = readonly(this._state);
 
-    constructor() {
-        // 等待 html 加载完成
-        document.addEventListener('DOMContentLoaded', () => {
-            this.screenAdapter();
-            // 监听窗口大小变化
-            window.addEventListener('resize', timerInterceptor.setDebounce(() => this.screenAdapter()));
-        }, false)
-    }
-
     /**
-     * 适配屏幕 rem 单位尺寸
+     * 适配客户端屏幕
+     * @param pxtorem rem 布局
      */
-    private screenAdapter() {
-        const clientAgent = this.getClientAgent(),
-            el = document.documentElement,
-            body = document.body,
-            designSize = 750;
+    screenAdapter(pxtorem: boolean) {
+        const { clientWidth, isMobile } = toRefs(this._state);
+        const { isPc } = this.getClientAgent();
+        const el = document.documentElement;
+        const body = document.body;
+        let screenWidth = el.clientWidth;
 
-        let clientWidth = el.clientWidth;
+        if (pxtorem) {
+            const designSize = 750;
+            isMobile.value = true;
 
-        if (clientAgent.isPc) {
-            clientWidth = designSize / 1.8;
-            body.style.setProperty('width', '540px');
+            if (isPc) {
+                screenWidth = designSize / 1.8;
+                body.style.setProperty('width', '540px');
+            } else {
+                body.style.removeProperty('width')
+            }
+
+            if (screenWidth > 0) {
+                const fontSize = (screenWidth / designSize) * 100 + 'px';
+                el.style.setProperty('font-size', fontSize);
+            }
         } else {
-            body.style.removeProperty('width')
-        }
+            if (screenWidth > 768) {
+                isMobile.value = false;
+            } else {
+                isMobile.value = true;
+            }
 
-        if (clientWidth > 0) {
-            const fontSize = (clientWidth / designSize) * 100 + 'px';
-            el.style.setProperty('font-size', fontSize);
+            el.setAttribute('mode', isMobile.value ? 'mobile' : 'pc');
         }
 
-        this._state.clientWidth = body.clientWidth;
+        clientWidth.value = body.clientWidth;
     }
 
     /**