feat: 支持H5震动反馈设置

Author: OXOYO

src/common/publicData.js

@@ -201,7 +201,8 @@ export const defaultSettingData = {
     'displaySize',
     'toggleTabbar',
     'backtop'
-  ]
+  ],
+  h5Vibration: true
 }
 
 export const colorList = [

src/h5/assets/main.css

@@ -2,6 +2,11 @@
   --fbw-tabbar-height: var(--van-tabbar-height);
 }
 
+html,
+body {
+  user-select: none;
+}
+
 .page-wrapper {
   width: 100vw;
   height: calc(100vh - var(--fbw-tabbar-height));

src/h5/pages/home/index.vue

@@ -2,7 +2,6 @@
 import UseCommonStore from '@h5/stores/commonStore.js'
 import UseSettingStore from '@h5/stores/settingStore.js'
 import * as api from '@h5/api/index.js'
-import { vibrate } from '@h5/utils/index.js'
 import { showImagePreview, showNotify, showConfirmDialog } from 'vant'
 import { useTranslation } from 'i18next-vue'
 
@@ -495,7 +494,7 @@ const handleFavoriteTouchStart = (event) => {
       // 添加最大值限制
       if (favoriteHold.count < 100) {
         favoriteHold.count++
-        vibrate() // 每次计数增加时震动反馈
+        settingStore.vibrate() // 每次计数增加时震动反馈
       } else {
         // 达到最大值时停止计数并提示用户
         clearInterval(favoriteHold.interval)
@@ -604,7 +603,7 @@ const onAddToFavorites = async () => {
   const res = await api.addToFavorites(currentImage.id)
   if (res.success) {
     currentImage.isFavorite = true
-    vibrate()
+    settingStore.vibrate()
   }
 }
 
@@ -617,7 +616,7 @@ const onRemoveFavorites = async () => {
   const res = await api.removeFavorites(currentImage.id)
   if (res.success) {
     currentImage.isFavorite = false
-    vibrate()
+    settingStore.vibrate()
   }
 }
 
@@ -657,7 +656,6 @@ const onPreviewImage = async (index) => {
     maxZoom: 100,
     minZoom: 1 / 3
   })
-  vibrate()
 }
 
 // 图片项触摸相关状态
@@ -678,7 +676,6 @@ const handleImageTouchStart = (index, event) => {
   longPress.timer = setTimeout(() => {
     longPress.selectedIndex = index
     flags.showActionPopup = true
-    vibrate() // 触发震动反馈
   }, 500) // 500毫秒长按触发
 }
 
@@ -774,7 +771,7 @@ const saveImage = async () => {
       type: 'success',
       message: t('messages.saveSuccess')
     })
-    vibrate()
+    settingStore.vibrate()
   } catch (error) {
     showNotify({
       type: 'danger',
@@ -830,7 +827,7 @@ const deleteImage = async () => {
         type: 'success',
         message: t('messages.deleteSuccess')
       })
-      vibrate()
+      settingStore.vibrate()
     } else {
       showNotify({
         type: 'danger',

src/h5/pages/setting/index.vue

@@ -453,6 +453,16 @@ onMounted(() => {
           </template>
         </van-picker>
       </van-popup>
+
+      <van-cell :title="t('h5.pages.setting.form.h5Vibration')">
+        <template #right-icon>
+          <van-switch
+            v-model="settingDataForm.h5Vibration"
+            size="20px"
+            @change="onSettingDataChange('h5Vibration')"
+          />
+        </template>
+      </van-cell>
     </van-cell-group>
 
     <van-cell-group inset :title="t('h5.pages.setting.about')">

src/h5/stores/settingStore.js

@@ -32,6 +32,11 @@ const UseSettingStore = defineStore('setting', {
           this.settingData = Object.assign({}, this.settingData, res.data)
         }
       })
+    },
+    vibrate(duration = 50) {
+      if (this.settingData.h5Vibration && navigator.vibrate) {
+        navigator.vibrate(duration)
+      }
     }
   }
 })

src/h5/utils/index.js

@@ -135,7 +135,8 @@
         "h5EnabledFloatingButtons": {
           "label": "Enabled Floating Buttons",
           "placeholder": "Please select enabled floating buttons"
-        }
+        },
+        "h5Vibration": "Vibration"
       },
       "privacyPasswordForm": {
         "old": {
@@ -508,7 +509,8 @@
           "h5EnabledFloatingButtons": {
             "label": "Enabled Floating Buttons",
             "placeholder": ""
-          }
+          },
+          "h5Vibration": "Vibration"
         },
         "about": "About",
         "version": "Version"

src/i18n/locale/lang/en-US.json

@@ -135,7 +135,8 @@
         "h5EnabledFloatingButtons": {
           "label": "启用悬浮按钮",
           "placeholder": "请选择悬浮按钮"
-        }
+        },
+        "h5Vibration": "震动反馈"
       },
       "privacyPasswordForm": {
         "old": {
@@ -508,7 +509,8 @@
           "h5EnabledFloatingButtons": {
             "label": "启用悬浮按钮",
             "placeholder": ""
-          }
+          },
+          "h5Vibration": "震动反馈"
         },
         "about": "关于",
         "version": "版本"

src/i18n/locale/lang/zh-CN.json

@@ -705,7 +705,6 @@ onBeforeUnmount(() => {
                 v-model="settingDataForm.allowedFileExt"
                 multiple
                 collapse-tags
-                collapse-tags-tooltip
                 :placeholder="t('pages.Setting.settingDataForm.allowedFileExt.placeholder')"
                 style="width: 290px"
                 @change="onAllowedFileExtChange"
@@ -917,7 +916,6 @@ onBeforeUnmount(() => {
                 v-model="settingDataForm.downloadSources"
                 multiple
                 collapse-tags
-                collapse-tags-tooltip
                 style="width: 290px"
                 @change="onSettingDataFormChange"
               >
@@ -1257,7 +1255,6 @@ onBeforeUnmount(() => {
                 v-model="settingDataForm.h5EnabledFloatingButtons"
                 multiple
                 collapse-tags
-                collapse-tags-tooltip
                 :placeholder="
                   t('pages.Setting.settingDataForm.h5EnabledFloatingButtons.placeholder')
                 "
@@ -1272,6 +1269,15 @@ onBeforeUnmount(() => {
                 />
               </el-select>
             </el-form-item>
+            <el-form-item
+              :label="t('pages.Setting.settingDataForm.h5Vibration')"
+              prop="h5Vibration"
+            >
+              <el-checkbox
+                v-model="settingDataForm.h5Vibration"
+                @change="onSettingDataFormChange"
+              />
+            </el-form-item>
           </div>
 
           <div class="form-card">