增加了 移动端 和小程序端的 二维码展示

src/components/forPreview/cardList.vue

@@ -4,7 +4,7 @@
  * @Autor: 地虎降天龙
  * @Date: 2023-11-03 16:02:49
  * @LastEditors: 地虎降天龙
- * @LastEditTime: 2024-09-12 19:10:41
+ * @LastEditTime: 2025-03-10 10:36:53
 -->
 <template>
     <FDivider titlePlacement="left">{{ props.onePlugin.title + ' - ' + props.onePlugin.name }}</FDivider>
@@ -31,7 +31,7 @@
                         <div class="p-2">官网已经更新样例功能，请git 更新代码!</div>
                     </div>
                     <div class="cursor-pointer text-right" style="margin-top: 6px; margin-bottom: -8px" @click="toPage(props.onePlugin, onePreview, true)">
-                        点击查看演示
+                        点击web端演示
                     </div>
                 </FCard>
             </template>
@@ -43,7 +43,7 @@
                     <video controls class="w-full max-h-70 h-14em" v-if="onePreview.type === 'video'">
                         <source :src="publicPath + onePreview.src" type="video/mp4" autoplay="true" loop="true" />
                     </video>
-                    <FImage class="w-full max-h-70 h-14em" fit="contain" v-else-if="onePreview.type === 'img'" :src="publicPath + onePreview.src" lazy />
+                    <oneImageQr v-else-if="onePreview.type === 'img'" :onePreview="onePreview" :onePlugin="onePlugin" />
                     <div
                         class="w-full h-48 text-3 text-left mb-2"
                         style="background-color: rgb(55 56 61); overflow: hidden; border-radius: 10px"
@@ -52,7 +52,7 @@
                         <div class="p-2" style="color: white" v-html="onePreview.src"></div>
                     </div>
                     <div class="cursor-pointer text-right" style="margin-top: 6px; margin-bottom: -8px" @click="toPage(props.onePlugin, onePreview)">
-                        点击查看演示
+                        点击web端演示
                     </div>
                 </FCard>
             </template>
@@ -63,6 +63,7 @@
 import { FCard, FDivider, FSpace, FText, FImage } from '@fesjs/fes-design'
 import { useRouter, useModel } from '@fesjs/fes' //fesJS的路由被他自己封装了
 import { UserOutlined } from '@fesjs/fes-design/icon'
+import oneImageQr from './oneImageQr.vue'
 const props = withDefaults(
     defineProps<{
         onePlugin: any

src/components/forPreview/oneImageQr.vue

@@ -0,0 +1,95 @@
+<template>
+    <div v-if="hasPreview">
+        <FTooltip mode="popover" :offset="-208">
+            <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">
+                    <div class="one-item-qrcode">
+                        <FImage :src="urlMobile">
+                            <template #placeholder>
+                                <div class="image-slot">
+                                    <div class="image-slot">生成中<span class="dot">...</span></div>
+                                </div>
+                            </template>
+                        </FImage>
+                        <span>H5移动端</span>
+                    </div>
+                    <div class="one-item-qrcode" style="border-left: 2px #a2a2a2 dashed">
+                        <span>微信小程序</span>
+                        <FImage :src="urlmini">
+                            <template #placeholder>
+                                <div class="image-slot">
+                                    <div class="image-slot">生成中<span class="dot">...</span></div>
+                                </div>
+                            </template>
+                        </FImage>
+                    </div>
+                </div>
+            </template>
+        </FTooltip>
+    </div>
+    <div v-else>
+        <FImage class="w-full max-h-70 h-14em" style="cursor: pointer" fit="contain" :src="publicPath + onePreview.src" lazy />
+    </div>
+</template>
+<script setup lang="ts">
+import { FImage, FTooltip } from '@fesjs/fes-design'
+
+const props = defineProps({
+    onePreview: {
+        default: {
+            src: '',
+            type: '',
+            name: '',
+            url: '',
+        },
+    },
+    onePlugin: {
+        default: {},
+    } as any,
+})
+
+const publicPath = process.env.BASE_URL
+
+// console.log(props.onePreview)
+// console.log(props.onePlugin)
+
+let hasPreview = true
+let comUrl = 'https://opensource.icegl.cn/#/plugins/'
+if (props.onePreview.url) {
+    comUrl = props.onePreview.url
+    if (props.onePreview.url.startsWith('https://www.icegl.cn/tvtstore/') || props.onePreview.url.startsWith('https://www.bilibili.com/')) {
+        hasPreview = false
+    }
+} else {
+    if (props.onePlugin.pNode) {
+        comUrl += props.onePlugin.pNode + '/'
+    }
+    comUrl += props.onePlugin.name + '/'
+    comUrl += props.onePreview.name + '/'
+}
+comUrl = encodeURIComponent(comUrl)
+let miniPre = `https://www.icegl.cn/addons/tvt/mini/onePreview?urlPath=${comUrl}`
+miniPre = encodeURIComponent(miniPre)
+const urlMobile = `https://icegl.cn/qrcode/build?text=${comUrl}&logo=1&labelalignment=center&foreground=%23333333&background=%23ffffff&size=180&padding=1&logosize=30&errorcorrection=quartile`
+const urlmini = `https://icegl.cn/qrcode/build?text=${miniPre}&logo=1&labelalignment=center&foreground=%2300367b&background=%23ffffff&size=160&padding=1&logosize=30&errorcorrection=quartile`
+</script>
+<style lang="less">
+.fes-tooltip-confirm,
+.fes-tooltip-popover {
+    background-color: #000000ab;
+}
+.one-item-qrcode {
+    width: 50%;
+    color: white;
+    text-align: center;
+    font-size: 16px;
+    font-weight: bolder;
+    img {
+        width: 80%;
+        margin: 10px auto;
+        display: block;
+    }
+}
+</style>
+<style lang="less" scoped></style>