持续优化 上线 微信小程序 和 移动端的二维码展示

src/common/utils.js

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-10-16 10:53:09
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2025-03-02 09:19:51
+ * @LastEditTime: 2025-03-10 16:13:53
  */
 // 放工具函数
 import { request } from '@fesjs/fes'
@@ -164,3 +164,24 @@ export const hasPlugin = (ename, cname) => {
     }
     return re
 }
+
+export const detectDeviceType = () => {
+    const ua = navigator.userAgent
+    const width = window.innerWidth
+
+    // 基于用户代理字符串的初步判断
+    const isMobileUA = /Mobi|Android|iPhone/i.test(ua)
+    const isTabletUA = /iPad|Tablet|Nexus 7|Nexus 10|KFAPWI/i.test(ua)
+
+    if (isMobileUA) {
+        return isTabletUA ? 'Tablet' : 'Mobile'
+    }
+    // 基于屏幕尺寸的进一步判断
+    if (width <= 480) {
+        return 'Mobile'
+    }
+    if (width <= 900) {
+        return 'Tablet'
+    }
+    return 'PC'
+}

src/components/forPreview/oneImageQr.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="hasPreview">
-        <FTooltip mode="popover" :offset="-208" placement="bottom" :getContainer="getContainer">
+        <FTooltip mode="popover" :offset="-208" placement="bottom" :getContainer="getContainer" :disabled="detectDeviceType() !== 'PC'">
             <FImage class="w-full max-h-70 h-14em" style="cursor: pointer" fit="contain" :src="publicPath + onePreview.src" lazy />
             <template #content>
                 <div style="width: 280px; height: 180px; display: flex; justify-content: center; align-items: center">
@@ -35,6 +35,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { FImage, FTooltip } from '@fesjs/fes-design'
+import { detectDeviceType } from '../../common/utils'
 
 const props = defineProps({
     onePreview: {

src/plugins/preview.vue

@@ -156,7 +156,7 @@ import { ref, provide, watch } from 'vue'
 import { defineRouteMeta, useModel } from '@fesjs/fes'
 import { FBadge, FDrawer, FMenu, FSubMenu, FMenuItem } from '@fesjs/fes-design'
 import { AppstoreOutlined, PictureOutlined, UpCircleOutlined, MoreCircleOutlined, ClusterOutlined } from '@fesjs/fes-design/icon'
-import { getPluginsConfig, getOnlinePluginConfig } from '../common/utils'
+import { getPluginsConfig, getOnlinePluginConfig, detectDeviceType } from '../common/utils'
 import cardList from '../components/forPreview/cardList.vue'
 import filterComFixed from '../components/forPreview/filterComFixed.vue'
 
@@ -297,28 +297,6 @@ const getleftMenuBadge = (name: string) => {
     return tagOne
 }
 
-//获取设备类型
-function detectDeviceType() {
-    const ua = navigator.userAgent
-    const width = window.innerWidth
-
-    // 基于用户代理字符串的初步判断
-    const isMobileUA = /Mobi|Android|iPhone/i.test(ua)
-    const isTabletUA = /iPad|Tablet|Nexus 7|Nexus 10|KFAPWI/i.test(ua)
-
-    if (isMobileUA) {
-        return isTabletUA ? 'Tablet' : 'Mobile'
-    } else {
-        // 基于屏幕尺寸的进一步判断
-        if (width <= 480) {
-            return 'Mobile'
-        } else if (width <= 900) {
-            return 'Tablet'
-        } else {
-            return 'PC'
-        }
-    }
-}
 // 区分是否是案例中心的 还是 插件市场的
 const isTvtstore = (onePlugin: any) => {
     return typeof onePlugin.tvtstore !== 'undefined'
@@ -517,7 +495,7 @@ const openTopMune = () => {
     .tag-fbdge[data-v-470f55ee] {
         scale: 0.8;
         margin-bottom: -5px;
-        margin-top:0px;
+        margin-top: 0px;
     }
 }
 </style>