refactor(SharePoster): 优化海报生成逻辑并移除冗余代码

重构海报生成流程，使用本地生成二维码和封面图base64避免跨域问题移除不必要的状态管理和事件监听，简化代码结构调整样式细节和注释位置

refactor(SharePoster): 优化海报生成逻辑并移除冗余代码
重构海报生成流程，使用本地生成二维码和封面图base64避免跨域问题移除不必要的状态管理和事件监听，简化代码结构调整样式细节和注释位置
hookehuyr
Commit f79f81d2bd5a5cf9f7bcc8d52fe5723330120662 f79f81d2 1 parent b611737f
Showing 1 changed file with 50 additions and 140 deletions
src/components/ui/SharePoster.vue
--- a/src/components/ui/SharePoster.vue
View file @f79f81d
+++ b/src/components/ui/SharePoster.vue
View file @f79f81d
@@ -5,8 +5,6 @@
         round
         position="bottom"
         :style="{ width: '100%' }"
-        @open="on_popup_open"
-        @close="on_popup_close"
     >
         <div class="PosterWrapper p-4">
             <!-- 标题与关闭按钮 -->
@@ -16,7 +14,7 @@
             </div>
             <!-- 生成中提示 -->
-            <div v-if="is_generating" class="text-center text-gray-500 text-sm mb-2">正在生成海报...</div>
+            <!-- <div v-if="is_generating" class="text-center text-gray-500 text-sm mb-2">正在生成海报...</div> -->
             <!-- 海报区域：直接使用 Canvas 合成的图片，支持长按保存 -->
             <!-- 当已生成海报图时，容器不再应用卡片边框与阴影，避免双重边框视觉效果；降级展示仍保留卡片样式 -->
@@ -39,10 +37,10 @@
                             <div class="flex-1 flex flex-col space-y-2 -mt-1">
                                 <div class="text-lg font-semibold text-gray-800 truncate leading-tight -mt-0.5">{{ title_text }}</div>
                                 <div class="text-sm text-gray-500 truncate" v-if="subtitle_text">{{ subtitle_text }}</div>
-                                <div class="text-lg text-gray-400 truncate" v-if="date_range_text">{{ date_range_text }}</div>
+                                <div class="text-sm text-gray-400 truncate" v-if="date_range_text">{{ date_range_text }}</div>
+                                <div class="mt-2 text-green-600 text-sm">扫码了解详情</div>
                             </div>
                         </div>
-                        <div class="mt-4 text-green-600 text-base">扫码了解详情</div>
                     </div>
                 </div>
             </div>
@@ -84,7 +82,9 @@ function normalize_image_url(src) {
     try {
         const u = new URL(url, window.location.origin)
         if (u.hostname === 'cdn.ipadbiz.cn') {
-            return url
+            if (u.hostname === 'cdn.ipadbiz.cn') {
+            return url + '?imageMogr2/thumbnail/400x/strip/quality/70'
+        }
         }
     } catch (e) {
         // 非绝对路径或无法解析的场景，直接返回原值
@@ -132,11 +132,6 @@ const card_ref = ref(null)
  * @description 是否处于海报生成中状态，用于在弹窗内展示“正在生成海报...”提示。
  */
 const is_generating = ref(false)
-/**
- * @var {import('vue').Ref<boolean>} needs_recompose
- * @description 生成过程中如有数据变化则标记，生成结束后自动再次合成，避免首次空白。
- */
-const needs_recompose = ref(false)
 /** 标题/副标题/介绍 */
 const title_text = computed(() => props.course?.title || '课程')
@@ -187,7 +182,7 @@ const date_range_text = computed(() => {
 })
 /** 封面图地址（含CDN压缩规则） */
-const cover_src = computed(() => (props.course?.cover || ''))
+const cover_src = computed(() => normalize_image_url(props.course?.cover || ''))
 /**
  * @var {import('vue').Ref<string>} cover_data_url
  * @description 封面图的 base64；优先用 base64 以避免跨域获取失败
@@ -203,7 +198,7 @@ const cover_final_src = computed(() => cover_data_url.value || cover_src.value)
  * @returns {string} 可直接用于 img 的二维码服务地址
  */
 function build_qr_service_url(raw_url) {
-    const origin = window.location.origin
+    const origin = import.meta.env.VITE_PROXY_TARGET || (typeof window !== 'undefined' ? window.location.origin : '')
     // 规整 origin，确保以 / 结尾便于 URL 组合
     const base = origin.endsWith('/') ? origin : origin + '/'
     const api = new URL('admin/?m=srv&a=get_qrcode', base)
@@ -218,9 +213,13 @@ const qr_src = computed(() => {
     const url = props.qr_url || (typeof window !== 'undefined' ? window.location.href : '')
     return build_qr_service_url(url)
 })
-
+/**
+ * @var {import('vue').Ref<string>} qr_data_url
+ * @description 本地生成的二维码 base64，避免跨域图片导致生成失败
+ */
+const qr_data_url = ref('')
 /** 最终二维码地址：优先使用本地生成的 base64，否则回退服务端地址 */
-const qr_final_src = computed(() => qr_src.value)
+const qr_final_src = computed(() => qr_data_url.value || qr_src.value)
 // 海报图片 dataURL（用于长按保存）
 const poster_img_src = ref('')
@@ -249,6 +248,29 @@ async function try_fetch_to_data_url(url) {
 }
 /**
+ * @function prepare_assets
+ * @description 在截图前准备资源：封面尝试转 base64、二维码本地生成为 base64。
+ * @returns {Promise<void>}
+ */
+async function prepare_assets() {
+    // 二维码本地生成
+    try {
+        const url = props.qr_url || (typeof window !== 'undefined' ? window.location.href : '')
+        const data_url = await QRCode.toDataURL(url, { margin: 2, width: 256, color: { dark: '#000000', light: '#ffffff' } })
+        qr_data_url.value = data_url || ''
+    } catch (e) {
+        qr_data_url.value = ''
+    }
+    // 封面尝试转 base64（若跨域失败则回退原地址）
+    try {
+        const b64 = await try_fetch_to_data_url(cover_src.value)
+        cover_data_url.value = b64 || ''
+    } catch (e) {
+        cover_data_url.value = ''
+    }
+}
+
+/**
  * @function compose_poster
  * @description 使用 html-to-image 对可视卡片 DOM 截图并生成 PNG 的 dataURL，仅在弹窗打开时触发。
  * @returns {Promise<void>}
@@ -258,35 +280,18 @@ async function compose_poster() {
     try {
         // 标记进入生成流程
         is_generating.value = true
+        // 准备资源，尽量使用 base64 避免跨域失败
+        await prepare_assets()
+        await nextTick()
         const node = card_ref.value
         if (!node) {
             is_generating.value = false
-            // 生成结束后若存在队列请求，则再次合成
-            maybe_recompose_after_finish()
             return
         }
         // 等待容器内图片加载完成，避免首次截图丢失封面
         await wait_images_loaded(node)
-        // 等待封面图片明确就绪（有 src 且 naturalWidth > 0），不足则设置一次性自动重合成
+        // 轻微延迟，确保弹窗过渡动画结束，布局稳定
-        const cover_ready = await ensure_cover_ready(node, 3500)
+        await new Promise(r => setTimeout(r, 80))
-        if (!cover_ready) {
-            // 监听封面 load 后自动重试一次
-            const img = node.querySelector('.PosterCover img')
-            if (img) {
-                img.addEventListener('load', () => {
-                    if (show_proxy.value && !is_generating.value) {
-                        nextTick(() => compose_poster())
-                    }
-                }, { once: true })
-            }
-            is_generating.value = false
-            maybe_recompose_after_finish()
-            return
-        }
-        // 等待弹窗过渡动画结束，确保布局稳定
-        await wait_transition_end(node, 320)
-        // 轻微延迟，确保尺寸计算稳定
-        await new Promise(r => setTimeout(r, 60))
         // 克隆离屏节点，避免弹窗动画与布局抖动影响截图
         const { wrapper, clone, size } = create_offscreen_clone(node)
         await wait_images_loaded(clone, 1200)
@@ -311,15 +316,11 @@ async function compose_poster() {
         // 清理离屏节点
         if (wrapper && wrapper.parentNode) wrapper.parentNode.removeChild(wrapper)
         is_generating.value = false
-        // 生成结束后若存在队列请求，则再次合成
-        maybe_recompose_after_finish()
     } catch (err) {
         console.error('html-to-image 生成海报失败:', err)
         showToast('海报生成失败，已展示标准卡片，请长按保存截图')
         poster_img_src.value = ''
         is_generating.value = false
-        // 生成结束后若存在队列请求，则再次合成
-        maybe_recompose_after_finish()
     }
 }
@@ -362,84 +363,17 @@ function create_offscreen_clone(node) {
 }
 /**
- * @function ensure_cover_ready
+ * @function watch_open_and_generate
- * @description 等待封面图片可用（存在 src 且 naturalWidth > 0）。
+ * @description 仅在弹窗打开时开始生成海报；关闭不生成。每次打开都重新生成以保证信息最新。
- * @param {HTMLElement} node 卡片根节点
- * @param {number} timeout 超时毫秒
- * @returns {Promise<boolean>} 是否就绪
- */
-function ensure_cover_ready(node, timeout = 3000) {
-    return new Promise((resolve) => {
-        try {
-            const img = node?.querySelector?.('.PosterCover img')
-            if (!img) return resolve(false)
-            if (img.src && img.complete && img.naturalWidth > 0) return resolve(true)
-            let done = false
-            const finish = (ok) => { if (!done) { done = true; resolve(!!ok) } }
-            const onload = () => finish(true)
-            const onerror = () => finish(false)
-            img.addEventListener('load', onload, { once: true })
-            img.addEventListener('error', onerror, { once: true })
-            // 若当前无 src，监听 src 变化
-            if (!img.src) {
-                const obs = new MutationObserver(() => {
-                    if (img.src && img.complete && img.naturalWidth > 0) {
-                        obs.disconnect()
-                        finish(true)
-                    }
-                })
-                obs.observe(img, { attributes: true, attributeFilter: ['src'] })
-                setTimeout(() => { obs.disconnect(); finish(false) }, timeout)
-            } else {
-                setTimeout(() => finish(img.naturalWidth > 0), timeout)
-            }
-        } catch (_) {
-            resolve(false)
-        }
-    })
-}
-
-/**
- * @function wait_transition_end
- * @description 等待弹窗或卡片相关的过渡动画结束，避免动画期间截图导致首帧空白。
- * @param {HTMLElement} node 卡片根节点
- * @param {number} timeout 超时毫秒
- * @returns {Promise<void>}
- */
-function wait_transition_end(node, timeout = 320) {
-    return new Promise((resolve) => {
-        try {
-            let done = false
-            const finish = () => { if (!done) { done = true; resolve() } }
-            const targets = [node, node?.parentElement, node?.closest?.('.van-popup')]
-            const opts = { once: true }
-            targets.forEach(el => {
-                if (el && el.addEventListener) {
-                    el.addEventListener('transitionend', finish, opts)
-                    el.addEventListener('animationend', finish, opts)
-                    el.addEventListener('webkitTransitionEnd', finish, opts)
-                }
-            })
-            setTimeout(finish, timeout)
-        } catch (_) {
-            resolve()
-        }
-    })
-}
-
-/**
- * @function maybe_recompose_after_finish
- * @description 若生成期间数据发生变化（如封面地址更新），生成结束后自动再次合成。
  * @returns {void}
  */
-function maybe_recompose_after_finish() {
+watch(show_proxy, (opened) => {
-    if (needs_recompose.value && show_proxy.value) {
+    if (opened) {
-        needs_recompose.value = false
+        if (is_generating.value) return
+        poster_img_src.value = ''
         nextTick(() => compose_poster())
     }
-}
+})
-
-// 移除基于 show 的 watcher，改为使用 Popup 的 open 事件更精确地触发生成，避免重复调用
 /**
  * @function recompose_on_data_change
@@ -476,8 +410,8 @@ async function wait_images_loaded(node, timeout = 2500) {
 // 调整数据变更监听：仅在封面地址或二维码地址变化时重新生成
 watch([() => props.course?.cover, () => props.qr_url], () => {
     if (show_proxy.value) {
+        if (is_generating.value) return
         poster_img_src.value = ''
-        if (is_generating.value) { needs_recompose.value = true; return }
         nextTick(() => compose_poster())
     }
 })
@@ -518,27 +452,3 @@ watch([() => props.course?.cover, () => props.qr_url], () => {
     }
 }
 </style>
-/**
- * @function on_popup_open
- * @description 弹窗打开时启动海报生成，仅在打开时触发，避免未打开即生成。
- * @returns {void}
- */
-function on_popup_open() {
-    try {
-        poster_img_src.value = ''
-        if (is_generating.value) { needs_recompose.value = true; return }
-        nextTick(() => compose_poster())
-    } catch (_) {}
-}
-
-/**
- * @function on_popup_close
- * @description 弹窗关闭时进行轻量清理，避免关闭后继续生成或重试。
- * @returns {void}
- */
-function on_popup_close() {
-    try {
-        // 关闭后不再自动重合成
-        needs_recompose.value = false
-    } catch (_) {}
-}