feat(分辨率调整): 增加dpi

components/disk.vue

@@ -0,0 +1,155 @@
+<template>
+  <div
+    :data-id="diskInfo && diskInfo.id"
+    class="disk reverse flex flex-col h-full"
+  >
+    <header class="disk-header"></header>
+    <main class="disk-main flex-auto"></main>
+    <footer class="disk-footer h-50rpx"></footer>
+    <v-overlay absolute :value="loading">
+      <div class="flex flex-col justify-center items-center">
+        <v-progress-circular indeterminate class="w-32rpx h-32rpx"></v-progress-circular>
+        <div v-if="loadingLabel" class="label mt-2">{{ loadingLabel }}</div>
+      </div>
+    </v-overlay>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Disk',
+  props: {
+    userCardId: {
+      type: Number,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      diskInfo: null,
+      connectInfo: null,
+      loading: false,
+      loadingLabel: null,
+    };
+  },
+  async fetch() {
+    // await this.getDiskInfo();
+  },
+  watch: {
+    userCardId: {
+      async handler(userCardId) {
+        if (userCardId) {
+          try {
+            this.loading = true;
+            await this.getDiskInfo(userCardId);
+            await this.connect(userCardId);
+          } finally {
+            this.loading = false;
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    // 查询云机
+    async getDiskInfo(userCardId) {
+      const res = await this.$axios.$get(
+        '/resources/v5/client/disk/info/userCard/single',
+        {
+          params: {
+            userCardId,
+          },
+        },
+      );
+      this.diskInfo = res.data;
+    },
+
+    /**
+     * 轮询连接云机，因为超分需要挂载
+     * @param {number} userCardId
+     * @param {number} 超时
+     */
+    async connect(userCardId) {
+      const getConnectData = () =>
+        this.$axios.$post('/resources/user/cloud/connect', {
+          userCardId,
+        });
+      const res = await getConnectData().catch((error) => {
+        if (error.response.data.status === 5200) {
+          // 云手机挂载中, 开启轮询
+          return new Promise((resolve, reject) => {
+            this.loadingLabel = '云手机挂载中...';
+            const startTime = Date.now();
+            const maxTime = 1000 * 20;
+            this._watchConnectInterval = setInterval(async () => {
+              try {
+                if (Date.now() - startTime >= maxTime) {
+                  throw new Error('云手机挂载超时');
+                }
+                const res = await getConnectData().catch((error) => {
+                  if (error.response.data.status === 5200) {
+                    return false;
+                  }
+                  throw error;
+                });
+
+                if (res) {
+                  clearInterval(this._watchConnectInterval);
+                  resolve(res);
+                }
+              } catch (error) {
+                clearInterval(this._watchConnectInterval);
+                reject(error);
+              }
+            }, 1000);
+          });
+        }
+        throw error;
+      });
+
+      this.connectInfo = res.data;
+      return res;
+
+      // const src = await new Promise((resolve, reject) => {
+      //   const startTime = Date.now();
+      //   this._watchConnectInterval = setInterval(async () => {
+      //     if (Date.now() - startTime >= time) {
+      //       clearInterval(this._watchConnectInterval);
+      //       reject(new Error('挂载超时'));
+      //       return;
+      //     }
+      //     await this.$axios
+      //       .$post('/resources/user/cloud/connect', {
+      //         userCardId,
+      //       })
+      //       .then();
+      //   }, interval);
+      // });
+      // return src;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// .disk {
+//   position: relative;
+//   display: flex;
+//   flex-direction: column;
+//   height: 100%;
+// }
+// .disk-header {
+//   position: relative;
+//   height: 0;
+//   flex: none;
+// }
+// .disk-main {
+//   position: relative;
+//   flex: 1;
+// }
+// .disk-footer {
+//   height: 50px;
+// flex: none;
+// }
+</style>

modules/postcss-px-to-viewport.js

@@ -12,6 +12,7 @@ export default function () {
 
     buildOptions.postcss.plugins['postcss-px-to-viewport'] = {
       viewportWidth: 375,
+      unitPrecision: 10,
     };
   });
 }

nuxt.config.js

@@ -126,6 +126,10 @@ export default {
   ],
   unocss: {
     uno: true,
+    rules: [
+      [/^w-(\d+)rpx$/, ([, d]) => ({ width: `${d * (100 / 375)}vw` })],
+      [/^h-(\d+)rpx$/, ([, d]) => ({ height: `${d * (100 / 375)}vw` })],
+    ],
   },
 
   optimizedImages: {

package.json

@@ -48,10 +48,11 @@
     "webpack": "^4.46.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.16.3",
+    "@babel/core": "^7",
+    "@babel/eslint-parser": "^7.18.2",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
-    "@mdi/font": "^6.7.96",
+    "@mdi/font": "^7.0.96",
     "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/eslint-config": "^10.0.0",
     "@nuxtjs/eslint-module": "^3.0.2",

pages/activity/invite-user/index.vue

@@ -180,7 +180,7 @@ export default {
 
       if (this.$userAgent.isMiniProgram) {
         // 小程序环境
-        await clipboard.writeText(url);
+        await clipboard.writeText(`${url} 唔即云手机`);
         this.$toast.success('链接复制成功');
       } else if (this.$userAgent.isApp) {
         // app环境
@@ -192,7 +192,7 @@ export default {
         });
       } else {
         // 浏览器环境
-        await clipboard.writeText(url);
+        await clipboard.writeText(`${url} 唔即云手机`);
         // throw new Error('1231');
         this.$toast.success('链接复制成功');
       }

pages/phone/_id.vue

@@ -1,75 +1,23 @@
 <template>
-  <div class="disk"></div>
+  <div class="disk-page">
+    <disk :user-card-id="userCardId"></disk>
+  </div>
 </template>
 
 <script>
-import qs from 'qs';
+// import qs from 'qs';
 export default {
+  name: 'DiskPage',
   middleware: [
-    async ({ base, route, $axios, $auth, redirect, $userAgent }) => {
-      const res = await $axios.$get(
-        '/resources/v5/client/disk/info/userCard/single',
-        {
-          params: {
-            userCardId: route.params.id,
-          },
-        },
-      );
-      const {
-        userCardId,
-        userName,
-        room,
-        buyVipType,
-        sourceType,
-        authPhone,
-        validTime,
-      } = res.data;
-      const token = $auth.strategy.token.get();
-
-      const url = `${location.origin}${base}${
-        $userAgent.isIos ? 'screenIos' : 'screenAndroid'
-      }/WXtrialInterface.html${qs.stringify(
-        {
-          userCardId,
-          username: userName,
-          token,
-          rm: room,
-          mealType: buyVipType,
-          sourceType,
-          authPhone,
-          validTime,
-        },
-        {
-          addQueryPrefix: true,
-        },
-      )}`;
-      // console.log(url);
-      redirect(url);
-      // window.open(url, '_self');
-    },
-  ],
-  data() {
-    return {
-      // diskInfo: null,
-    };
-  },
-  async fetch() {
-    // await this.getDiskInfo(this.$route.params.id);
-    // this.openDisk();
-  },
-  methods: {
-    // async getDiskInfo(userCardId) {
-    //   const res = await this.$axios.$get(
+    // async ({ base, route, $axios, $auth, redirect, $userAgent }) => {
+    //   const res = await $axios.$get(
     //     '/resources/v5/client/disk/info/userCard/single',
     //     {
     //       params: {
-    //         userCardId,
+    //         userCardId: route.params.id,
     //       },
     //     },
     //   );
-    //   this.diskInfo = res.data;
-    // },
-    // openDisk() {
     //   const {
     //     userCardId,
     //     userName,
@@ -78,9 +26,11 @@ export default {
     //     sourceType,
     //     authPhone,
     //     validTime,
-    //   } = this.diskInfo;
-    //   const token = this.$auth.strategy.token.get();
-    //   const url = `/screenIos/WXtrialInterface.html${qs.stringify(
+    //   } = res.data;
+    //   const token = $auth.strategy.token.get();
+    //   const url = `${location.origin}${base}${
+    //     $userAgent.isIos ? 'screenIos' : 'screenAndroid'
+    //   }/WXtrialInterface.html${qs.stringify(
     //     {
     //       userCardId,
     //       username: userName,
@@ -95,8 +45,24 @@ export default {
     //       addQueryPrefix: true,
     //     },
     //   )}`;
-    //   window.open(url);
+    //   redirect(url);
     // },
+  ],
+  data() {
+    return {
+      userCardId: null,
+    };
+  },
+  fetch() {
+    this.userCardId = +this.$route.params.id;
   },
+  methods: {},
 };
 </script>
+
+<style lang="scss" scoped>
+.disk-page {
+  height: 100vh;
+  position: relative;
+}
+</style>

static/screenAndroid/WXtrialInterface.html

@@ -50,9 +50,10 @@
       {{~ it.list :value:index }}
       <div
         class="phone-size-item {{? value.width === it.active.width && value.height === it.active.height }}active{{?}}"
+        data-id="{{= value.id }}"
+        data-dpi="{{= value.dpi }}"
         data-width="{{= value.width }}"
         data-height="{{= value.height }}"
-        data-id="{{= value.id }}"
       >
         <span>{{= value.width }}x{{= value.height }}</span>
       </div>
@@ -1647,6 +1648,7 @@
             data: {
               width: config.width,
               height: config.height,
+              dpi: config.dpi,
             },
           }),
         );
@@ -1658,6 +1660,7 @@
               id: config.id,
               width: config.width,
               height: config.height,
+              dpi: config.dpi,
               desc: '分辨率修改', // 可选
             },
           }),
@@ -1674,9 +1677,10 @@
           contentType: 'application/json; charset=UTF-8',
           data: JSON.stringify({
             userCardId: window.userCardId,
-            width: config.width,
-            height: config.height,
             resolvingPowerId: config.id,
+            // width: config.width,
+            // height: config.height,
+            // dpi: config.dpi,
           }),
         });
         window.currentPhoneSize = config;

static/screenIos/WXtrialInterface.html

@@ -53,9 +53,10 @@
       {{~ it.list :value:index }}
       <div
         class="phone-size-item {{? value.width === it.active.width && value.height === it.active.height }}active{{?}}"
+        data-id="{{= value.id }}"
+        data-dpi="{{= value.dpi }}"
         data-width="{{= value.width }}"
         data-height="{{= value.height }}"
-        data-id="{{= value.id }}"
       >
         <span>{{= value.width }}x{{= value.height }}</span>
       </div>
@@ -1437,6 +1438,7 @@
             data: {
               width: config.width,
               height: config.height,
+              dpi: config.dpi,
             },
           }),
         );
@@ -1449,6 +1451,7 @@
               id: config.id,
               width: config.width,
               height: config.height,
+              dpi: config.dpi,
               desc: '分辨率修改', // 可选
             },
           }),
@@ -1466,9 +1469,10 @@
           contentType: 'application/json; charset=UTF-8',
           data: JSON.stringify({
             userCardId: window.userCardId,
-            width: config.width,
-            height: config.height,
             resolvingPowerId: config.id,
+            // width: config.width,
+            // height: config.height,
+            // dpi: config.dpi,
           }),
         });