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']

 /*
  * @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>