feat(recall): 新增分享海报功能组件和页面

添加 RecallPoster 组件用于生成分享海报
创建 PosterPage 页面路由和视图
实现海报背景更换、竖排文字绘制和二维码展示功能

@@ -32,6 +32,7 @@ declare module 'vue' {
     PdfPreview: typeof import('./components/ui/PdfPreview.vue')['default']
     PdfViewer: typeof import('./components/ui/PdfViewer.vue')['default']
     PostCountModel: typeof import('./components/count/postCountModel.vue')['default']
+    RecallPoster: typeof import('./components/ui/RecallPoster.vue')['default']
     ReviewPopup: typeof import('./components/courses/ReviewPopup.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

+<template>
+    <div class="recall-poster-container w-full max-w-[340px] relative select-none shrink-0 my-auto mx-auto">
+        <!-- 最终生成的海报图片展示区域 -->
+        <div v-if="posterImgSrc" class="relative w-full fade-in">
+            <img :src="posterImgSrc" class="w-full h-auto rounded-2xl shadow-2xl block" alt="分享海报" />
+            <div class="text-white/80 text-center text-xs mt-4">长按图片保存</div>
+        </div>
+
+        <!-- 生成中/加载中占位 -->
+        <div v-else
+            class="w-full h-[62vh] min-h-[400px] bg-white/10 backdrop-blur-sm rounded-2xl flex flex-col items-center justify-center text-white/80">
+            <van-loading type="spinner" color="#ffffff" size="32px" />
+            <div class="mt-4 text-sm font-medium">海报生成中...</div>
+        </div>
+
+        <!-- Canvas (Hidden) -->
+        <canvas ref="canvasRef" class="hidden"></canvas>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick, onMounted } from 'vue'
+import { showToast } from 'vant'
+
+const props = defineProps({
+    bgUrl: {
+        type: String,
+        required: true
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    logoUrl: {
+        type: String,
+        default: 'https://cdn.ipadbiz.cn/mlaj/recall/poster/kai@2x.png'
+    },
+    qrUrl: {
+        type: String,
+        default: 'https://cdn.ipadbiz.cn/mlaj/recall/poster/%E4%BA%8C%E7%BB%B4%E7%A0%81@2x.png'
+    }
+})
+
+const canvasRef = ref(null)
+const posterImgSrc = ref('')
+
+// 工具函数：加载图片
+const loadImage = (src) => {
+    return new Promise((resolve, reject) => {
+        if (!src) {
+            reject(new Error('Image source is empty'))
+            return
+        }
+        const img = new Image()
+        // 处理跨域，Blob URL 不需要
+        if (!src.startsWith('blob:') && !src.startsWith('data:')) {
+            img.crossOrigin = 'anonymous'
+        }
+        img.onload = () => resolve(img)
+        img.onerror = (e) => {
+            console.error('Failed to load image:', src)
+            // 图片加载失败不应该阻断流程，返回 null 或者透明图占位
+            // 这里resolve null，绘制时跳过
+            resolve(null)
+        }
+        img.src = src
+    })
+}
+
+// 工具函数：绘制圆角矩形
+const drawRoundedRect = (ctx, x, y, width, height, radius) => {
+    ctx.beginPath()
+    ctx.moveTo(x + radius, y)
+    ctx.lineTo(x + width - radius, y)
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
+    ctx.lineTo(x + width, y + height - radius)
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
+    ctx.lineTo(x + radius, y + height)
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
+    ctx.lineTo(x, y + radius)
+    ctx.quadraticCurveTo(x, y, x + radius, y)
+    ctx.closePath()
+}
+
+// 工具函数：绘制多行文本
+const wrapText = (ctx, text, x, y, maxWidth, lineHeight, maxLines) => {
+    const words = text.split('') // 中文按字分割
+    let line = ''
+    let lineCount = 0
+    let currentY = y
+
+    for (let n = 0; n < words.length; n++) {
+        const testLine = line + words[n]
+        const metrics = ctx.measureText(testLine)
+        const testWidth = metrics.width
+
+        if (testWidth > maxWidth && n > 0) {
+            ctx.fillText(line, x, currentY)
+            line = words[n]
+            currentY += lineHeight
+            lineCount++
+            if (maxLines && lineCount >= maxLines) {
+                // 超过最大行数，最后一行加省略号（简化处理，暂不精确计算省略号位置）
+                return
+            }
+        } else {
+            line = testLine
+        }
+    }
+    ctx.fillText(line, x, currentY)
+}
+
+// 工具函数：绘制竖排文字
+const drawVerticalText = (ctx, text, x, y, fontSize, letterSpacing) => {
+    const chars = text.split('')
+    let currentY = y
+    ctx.font = `500 ${fontSize}px sans-serif`
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+
+    chars.forEach(char => {
+        ctx.fillText(char, x, currentY)
+        currentY += fontSize + letterSpacing
+    })
+}
+
+// 核心生成逻辑：Canvas 绘制
+const generatePoster = async () => {
+    posterImgSrc.value = ''
+
+    // 确保 Canvas 元素存在
+    await nextTick()
+    const canvas = canvasRef.value
+    if (!canvas) return
+
+    try {
+        // 1. 准备画布尺寸 (2倍图)
+        const scale = 2
+        const width = 375 * scale
+        // 图片区域高度缩小，从 600 -> 480，保持较好比例
+        const imgAreaHeight = 480 * scale
+        const infoAreaHeight = 130 * scale
+        const height = imgAreaHeight + infoAreaHeight
+
+        canvas.width = width
+        canvas.height = height
+        const ctx = canvas.getContext('2d')
+
+        // 设置白色背景
+        ctx.fillStyle = '#ffffff'
+        ctx.fillRect(0, 0, width, height)
+
+        // 2. 并行加载所有图片资源
+        const [bgImg, logoImg, qrImg] = await Promise.all([
+            loadImage(props.bgUrl),
+            loadImage(props.logoUrl),
+            loadImage(props.qrUrl)
+        ])
+
+        // 3. 绘制背景图 (Object-Cover 效果)
+        if (bgImg) {
+            // 计算裁剪
+            const imgRatio = bgImg.width / bgImg.height
+            const canvasRatio = width / imgAreaHeight
+            let sx, sy, sWidth, sHeight
+
+            if (imgRatio > canvasRatio) {
+                // 图片更宽，裁左右
+                sHeight = bgImg.height
+                sWidth = sHeight * canvasRatio
+                sx = (bgImg.width - sWidth) / 2
+                sy = 0
+            } else {
+                // 图片更高，裁上下
+                sWidth = bgImg.width
+                sHeight = sWidth / canvasRatio
+                sx = 0
+                sy = (bgImg.height - sHeight) / 2
+            }
+
+            ctx.drawImage(bgImg, sx, sy, sWidth, sHeight, 0, 0, width, imgAreaHeight)
+        }
+
+        // 4. 绘制 Logo (左上角)
+        if (logoImg) {
+            const logoW = 96 * scale // w-24 = 96px
+            const logoRatio = logoImg.width / logoImg.height
+            const logoH = logoW / logoRatio
+            const logoX = 24 * scale // left-6
+            const logoY = 24 * scale // top-6
+
+            // 添加阴影
+            ctx.shadowColor = 'rgba(0, 0, 0, 0.2)'
+            ctx.shadowBlur = 4 * scale
+            ctx.shadowOffsetY = 2 * scale
+            ctx.drawImage(logoImg, logoX, logoY, logoW, logoH)
+            ctx.shadowColor = 'transparent' // 重置阴影
+        }
+
+        // 5. 绘制竖排文字 (右下角)
+        // 位置: right-5 (20px), bottom-6 (24px) relative to imgArea
+        const textRightMargin = 20 * scale
+        const textBottomMargin = 24 * scale
+        const fontSize = 13 * scale
+        const letterSpacing = fontSize * 0.5 // tracking-[0.5em]
+
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
+        // Shadow
+        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)'
+        ctx.shadowBlur = 2 * scale
+        ctx.shadowOffsetY = 1 * scale
+
+        // Column 1: "每一段成长故事" (左边那列，离右边远一点)
+        // Column 2: "见证我在美乐爱觉宇宙的" (右边那列)
+
+        const colRightX = width - textRightMargin - (fontSize / 2)
+        const colLeftX = colRightX - fontSize - 12 * scale // gap-3 = 12px
+
+        const textRight = "见证我在美乐爱觉宇宙的"
+        const textLeft = "每一段成长故事"
+
+        // 计算文本对齐
+        // 目标：整个文本块的底部与 bottom-6 对齐
+        // 右列（第一句）作为基准
+        // 左列（第二句）相对于右列下移 48px (mt-12)
+
+        const charH = fontSize + letterSpacing
+        const hRight = textRight.length * charH - letterSpacing
+        const hLeft = textLeft.length * charH - letterSpacing
+        const offset = 48 * scale // mt-12
+
+        const maxBottom = imgAreaHeight - textBottomMargin
+        // 计算起始 Y 坐标，使得最底部的点不超过 maxBottom
+        const heightDiff = Math.max(hRight, offset + hLeft)
+        const tRight = maxBottom - heightDiff
+        const tLeft = tRight + offset
+
+        // 设置字体
+        ctx.font = `500 ${fontSize}px sans-serif`
+
+        // 内部绘制函数
+        const drawVert = (txt, x, startY) => {
+            const chars = txt.split('')
+            let cy = startY + fontSize / 2
+            ctx.textAlign = 'center'
+            ctx.textBaseline = 'middle'
+            chars.forEach(char => {
+                ctx.fillText(char, x, cy)
+                cy += fontSize + letterSpacing
+            })
+        }
+
+        drawVert(textRight, colRightX, tRight)
+        drawVert(textLeft, colLeftX, tLeft)
+
+        ctx.shadowColor = 'transparent'
+
+
+        // 6. 绘制 Info Area 内容
+        // 坐标参考
+        const infoY = imgAreaHeight
+
+        // 6.1 Title
+        // Padding: p-5 (20px). Left side.
+        // pr-4 (16px) for title container.
+        // Title Width = Total Width - Padding Left - Padding Right - QR Section Width
+        // QR Section: w-[72px] + margins?
+        // DOM: justify-between.
+        // QR Section is shrink-0.
+        // QR Image: 72px. Text below.
+        // Let's reserve 100px width for QR section on the right.
+
+        const padding = 20 * scale
+        const titleX = padding
+        const titleY = infoY + padding
+        const qrSectionW = 85 * scale // approx
+        const titleMaxW = width - padding - qrSectionW - (10 * scale) // extra gap
+
+        ctx.fillStyle = '#0052D9'
+        ctx.font = `bold ${15 * scale}px sans-serif`
+        ctx.textAlign = 'left'
+        ctx.textBaseline = 'top'
+
+        // Line height: leading-relaxed (approx 1.6?)
+        const lineHeight = 15 * scale * 1.6
+        wrapText(ctx, props.title, titleX, titleY, titleMaxW, lineHeight, 4)
+
+        // 6.2 QR Code
+        if (qrImg) {
+            const qrSize = 72 * scale
+            // Center in the right section
+            // Section starts at width - padding - qrSectionW?
+            // Actually DOM is flex justify-between.
+            // QR is at the very right (minus padding).
+            const qrX = width - padding - qrSize + (4 * scale) // slight adjustment
+            const qrY = infoY + padding
+
+            ctx.drawImage(qrImg, qrX, qrY, qrSize, qrSize)
+
+            // 6.3 QR Text
+            // text-[10px], scale-90. Effective size 9px.
+            // text-[#666]
+            const smallTextSize = 10 * scale * 0.9
+            ctx.fillStyle = '#666666'
+            ctx.font = `${smallTextSize}px sans-serif`
+            ctx.textAlign = 'center'
+
+            const textCenterX = qrX + qrSize / 2
+            const textStartY = qrY + qrSize + (8 * scale) // mb-2 is for img
+
+            ctx.fillText("跟我一起加入", textCenterX, textStartY)
+            ctx.fillText("美乐爱觉宇宙吧", textCenterX, textStartY + smallTextSize * 1.4)
+        }
+
+        // 7. 导出图片
+        posterImgSrc.value = canvas.toDataURL('image/png')
+
+    } catch (error) {
+        console.error('Canvas poster generation failed:', error)
+        showToast('生成失败，请重试')
+    }
+}
+
+watch(() => props.bgUrl, () => {
+    generatePoster()
+})
+
+onMounted(() => {
+    // 稍微延时确保字体等资源就绪（虽然canvas不强依赖DOM渲染，但字体加载是全局的）
+    setTimeout(generatePoster, 500)
+})
+
+defineExpose({
+    generatePoster
+})
+</script>
+
+<style scoped>
+.fade-in {
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+</style>

 /*
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-12-23 15:31:50
+ * @LastEditTime: 2025-12-23 15:51:28
  * @FilePath: /mlaj/src/router/routes.js
  * @Description: 路由地址映射配置
  */
@@ -139,6 +139,12 @@ export const routes = [
     meta: { title: '活动历史' },
   },
   {
+    path: '/recall/poster',
+    name: 'Poster',
+    component: () => import('../views/recall/PosterPage.vue'),
+    meta: { title: '分享海报' },
+  },
+  {
     path: '/checkout',
     name: 'CheckoutPage',
     component: () => import('../views/checkout/CheckoutPage.vue'),

+<!--
+ * @Date: 2025-12-23 15:50:59
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-12-23 16:40:19
+ * @FilePath: /mlaj/src/views/recall/PosterPage.vue
+ * @Description: 分享海报页面
+-->
+<template>
+  <div class="min-h-screen bg-[#1E40C8] relative flex flex-col">
+
+    <!-- Poster Container (Scrollable Area) -->
+    <div class="flex-1 overflow-y-auto px-6 pt-6 pb-32 flex flex-col items-center">
+      <RecallPoster
+        :bg-url="posterBg"
+        :title="title"
+        :logo-url="logoUrl"
+        :qr-url="qrCodeUrl"
+      />
+    </div>
+
+    <!-- Buttons (Fixed at Bottom) -->
+    <div class="fixed bottom-0 left-0 right-0 bg-[#1E40C8] px-8 py-6 pb-10 flex gap-4 z-50 max-w-md mx-auto w-full">
+      <van-uploader :after-read="afterRead" accept="image/*" class="flex-1 w-full" :show-upload="false">
+        <template #default>
+          <van-button block color="#0052D9" plain
+            class="!rounded-lg !h-[44px] !text-[15px] !font-bold w-full !border-[#0052D9] !bg-white">
+            更换图片
+          </van-button>
+        </template>
+      </van-uploader>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTitle } from '@vueuse/core'
+import RecallPoster from '@/components/ui/RecallPoster.vue'
+
+const $route = useRoute();
+const $router = useRouter();
+useTitle('分享海报');
+
+// Assets
+const defaultBg = 'https://cdn.ipadbiz.cn/mlaj/images/test-bgg03.jpg?imageMogr2/thumbnail/800x/strip/quality/80'
+const logoUrl = 'https://cdn.ipadbiz.cn/mlaj/recall/poster/kai@2x.png'
+const qrCodeUrl = 'https://cdn.ipadbiz.cn/mlaj/recall/poster/%E4%BA%8C%E7%BB%B4%E7%A0%81@2x.png'
+
+// State
+const posterBg = ref(defaultBg)
+const title = ref('2017.7.6-7.11 【自然的恩典】“爱我中华”优秀传统文化夏令营-天津场开启~')
+
+// Actions
+const afterRead = (file) => {
+  // Use Object URL for local preview to avoid uploading
+  posterBg.value = URL.createObjectURL(file.file)
+}
+</script>
+
+<style lang="less" scoped>
+:deep(.van-uploader__input-wrapper) {
+  width: 100%;
+}
+</style>