chore: enhance iOS experience

arkntools · Apr 16, 2024 · 89418de · 89418de
1 parent 0e537dc
commit 89418de
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 40 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -131,7 +131,7 @@
     <!-- /应用栏 -->
     <!-- 抽屉 -->
     <div id="app-drawer" class="mdui-drawer mdui-drawer-close mdui-hidden-sm-up">
-      <div class="app-drawer-logo" @touchend="enterDebugMode">Arknights<br />Toolbox</div>
+      <div class="app-drawer-logo" @click="enterDebugMode">Arknights<br />Toolbox</div>
       <div class="mdui-list mdui-p-t-0">
         <router-link
           v-for="{ path, name } in routes.filter(({ name }) => name in routeMeta)"
@@ -199,7 +199,7 @@ import PasteCapturer from '@/components/PasteCapturer.vue';
 import ScrollToTop from '@/components/ScrollToTop.vue';
 import MigrationDialog from './components/home/MigrationDialog.vue';
 import { router, meta as routeMeta } from './router';
-import { VConsoleLoaded, loadVConsole } from '@/utils/vConsole';
+import { vConsoleLoaded, loadVConsole } from '@/utils/vConsole';
 import MduiTab from '@/utils/MduiTab';
 import { IS_DEV } from '@/utils/env';
 import { mapState } from 'pinia';
@@ -242,9 +242,9 @@ export default defineComponent({
       document.getElementById('wrapper').scroll(0, 0);
     },
     enterDebugMode() {
-      if (VConsoleLoaded()) return;
+      if (vConsoleLoaded()) return;
       this.debugClickCount++;
-      if (this.debugClickCount === 10) loadVConsole();
+      if (this.debugClickCount === 5) loadVConsole();
     },
     changeServer() {
       if (this.nextServer === null) return;
@@ -264,6 +264,12 @@ export default defineComponent({
   },
   mounted() {
     mduiTab.init();
+    this.$$('#app-drawer').on('close.mdui.drawer', () => {
+      this.debugClickCount = 0;
+    });
+  },
+  beforeDestroy() {
+    this.$$('#app-drawer').off('close.mdui.drawer');
   },
 });
 </script>
@@ -319,6 +325,7 @@ html,
 body {
   height: 100%;
   overflow: hidden;
+  touch-action: manipulation;
 }
 body {
   box-sizing: border-box;

diff --git a/src/components/DataImg.vue b/src/components/DataImg.vue
@@ -1,6 +1,5 @@
 <template>
   <img
-    v-show="!(hideWhenError && isError)"
     :src="imgSrc"
     :style="imgStyle"
     :loading="lazy ? 'lazy' : undefined"
@@ -14,7 +13,6 @@ import { defineComponent } from 'vue';
 import { mapState } from 'pinia';
 import { useHotUpdateStore } from '@/store/hotUpdate';
 import { PNG1P } from '@/utils/constant';
-import NO_IMAGE from '@/assets/img/no-image.png';
 
 const defaultErrorStyle = {
   backgroundColor: '#bdbdbd',
@@ -27,7 +25,6 @@ export default defineComponent({
     type: String,
     name: [Number, String],
     errorStyle: [Boolean, Object],
-    hideWhenError: Boolean,
     lazy: Boolean,
   },
   data: () => ({
@@ -41,14 +38,19 @@ export default defineComponent({
   computed: {
     ...mapState(useHotUpdateStore, ['dataBaseURL']),
     imgSrc() {
-      if (!(this.type && this.name)) return PNG1P;
-      if (this.isError && !this.hideWhenError) return NO_IMAGE;
+      if (!(this.dataBaseURL && this.type && this.name)) return PNG1P;
       return `${this.dataBaseURL}/img/${this.type}/${this.name}.png`;
     },
     imgStyle() {
       if (!this.isError) return;
       return this.errorStyle === true ? defaultErrorStyle : this.errorStyle;
     },
   },
+  methods: {
+    handleError(e) {
+      console.error('[DataImg] loading error', this.imgSrc);
+      console.error(e);
+    },
+  },
 });
 </script>
diff --git a/src/main.js b/src/main.js
@@ -332,30 +332,12 @@ new Vue({
       nls.setItem('server', this.server);
     } else this.server = server;
 
-    // 禁止 iOS 缩放
-    (() => {
-      document.addEventListener(
-        'touchstart',
-        event => {
-          if (event.touches.length > 1) {
-            event.preventDefault();
-          }
-        },
-        { passive: false },
-      );
-      let lastTouchEnd = 0;
-      document.addEventListener(
-        'touchend',
-        event => {
-          const now = Date.now();
-          if (now - lastTouchEnd <= 300) {
-            event.preventDefault();
-          }
-          lastTouchEnd = now;
-        },
-        false,
-      );
-    })();
+    // 禁止 iOS 双指缩放
+    document.addEventListener('gesturestart', function (event) {
+      event.preventDefault();
+    });
+    // 配合 touch-action: manipulation; 禁止 iOS 双击缩放
+    document.body.addEventListener('click', () => {});
 
     // 初始化工具箱数据
     this.initData();

diff --git a/src/store/hotUpdate.js b/src/store/hotUpdate.js
@@ -55,7 +55,7 @@ export const DataStatus = {
 };
 
 export const useHotUpdateStore = defineStore('hotUpdate', () => {
-  const baseURL = ref(process.env.VUE_APP_DATA_BASE_URL?.replace(/\/$/, '') || '/data');
+  const baseURL = process.env.VUE_APP_DATA_BASE_URL?.replace(/\/$/, '') || '/data';
   const mapMd5 = ref('');
   const timestamp = ref(0);
   const version = ref('');
@@ -139,7 +139,7 @@ export const useHotUpdateStore = defineStore('hotUpdate', () => {
 
     try {
       dataStatus.value = DataStatus.CHECKING;
-      const check = await fetchData(`${baseURL.value}/check.json`);
+      const check = await fetchData(`${baseURL}/check.json`);
 
       if (!check.version.startsWith(CUR_VERSION)) {
         throw new Error(i18n.t('hotUpdate.error.appNeedUpdate'));
@@ -158,7 +158,7 @@ export const useHotUpdateStore = defineStore('hotUpdate', () => {
       downloadedDataNum.value = 0;
       totalDataNum.value = 0;
 
-      const newMapMd5 = await fetchData(`${baseURL.value}/map.${check.mapMd5}.json`);
+      const newMapMd5 = await fetchData(`${baseURL}/map.${check.mapMd5}.json`);
       const needUpdateUrlMap = getDataUrlMap(
         _.pickBy(
           newMapMd5,
@@ -232,7 +232,7 @@ export const useHotUpdateStore = defineStore('hotUpdate', () => {
   };
 
   const getDataUrl = (key, md5 = md5Map.value[key]) => {
-    return `${baseURL.value}/${key}`.replace(/\.[^.]+$/, `.${md5}$&`);
+    return `${baseURL}/${key}`.replace(/\.[^.]+$/, `.${md5}$&`);
   };
 
   const getDataUrlMap = targetMap => _.mapValues(targetMap, (md5, key) => getDataUrl(key, md5));

diff --git a/src/utils/vConsole.js b/src/utils/vConsole.js
@@ -1,7 +1,7 @@
-export const VConsoleLoaded = () => !!window.VConsole;
+export const vConsoleLoaded = () => !!window.VConsole;
 
 export const loadVConsole = async () => {
-  if (VConsoleLoaded()) return;
+  if (vConsoleLoaded()) return;
   await import(
     /* webpackIgnore: true */ 'https://fastly.jsdelivr.net/npm/[email protected]/dist/vconsole.min.js'
   );

diff --git a/src/views/Material/index.js b/src/views/Material/index.js
@@ -1082,7 +1082,7 @@ export default defineComponent({
         },
       );
 
-      this.$$(dialog.$dialog[0]).on('close.mdui.dialog', () => {
+      this.$$(dialog.$dialog[0]).one('close.mdui.dialog', () => {
         if (dropFocus) this.showDropDetail({ name: dropFocus });
       });
-Original file line number
+Diff line change
@@ Expand Up / @@ -1082,7 +1082,7 @@ export default defineComponent({ @@
             },
           );
-          this.$$(dialog.$dialog[0]).on('close.mdui.dialog', () => {
+          this.$$(dialog.$dialog[0]).one('close.mdui.dialog', () => {
             if (dropFocus) this.showDropDetail({ name: dropFocus });
           });
@@ Expand Down @@