From 97e97040b756e52e7c007cc42d89347ecb24ba58 Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Thu, 27 Nov 2025 15:04:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=8B=E8=AF=95=E5=88=86=E4=BA=AB?= =?UTF-8?q?=E5=88=B0whatsapp?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 10 +- src/utils/share.ts | 184 +++++ src/views/Workshop/creation/creation-list.vue | 652 +++++++++--------- 3 files changed, 525 insertions(+), 321 deletions(-) create mode 100644 src/utils/share.ts diff --git a/index.html b/index.html index 8172a46..96d768e 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,15 @@ - Activities + Lane Crawford + + + + + + + +
diff --git a/src/utils/share.ts b/src/utils/share.ts new file mode 100644 index 0000000..ecdaf9a --- /dev/null +++ b/src/utils/share.ts @@ -0,0 +1,184 @@ +/** + * 分享工具函数 + * 支持移动浏览器原生分享 API 和 WhatsApp 分享 + */ + +interface ShareData { + title?: string + text?: string + url?: string + files?: File[] +} + +/** + * 检查是否支持 Web Share API + */ +export function isWebShareSupported(): boolean { + return typeof navigator !== 'undefined' && 'share' in navigator +} + +/** + * 使用 Web Share API 进行分享（移动浏览器原生分享） + * @param data 分享数据 + */ +async function shareWithWebAPI(data: ShareData): Promise { + if (!isWebShareSupported()) { + throw new Error('Web Share API is not supported') + } + + try { + // Web Share API 只支持 title, text, url 和 files + const shareData: ShareData = {} + + if (data.title) shareData.title = data.title + if (data.text) shareData.text = data.text + if (data.url) shareData.url = data.url + if (data.files && data.files.length > 0) shareData.files = data.files + + await navigator.share(shareData) + } catch (error: any) { + // 用户取消分享时，会抛出 AbortError，这是正常情况 + if (error.name !== 'AbortError') { + console.error('分享失败:', error) + throw error + } + } +} + +/** + * 分享到 WhatsApp（回退方案） + * @param text 分享的文本内容 + * @param url 分享的链接（可选） + */ +export function shareToWhatsApp(text: string, url?: string): void { + const shareText = url ? `${text} ${url}` : text + // WhatsApp Web API: https://wa.me/?text= + const encodedText = encodeURIComponent(shareText) + const whatsappUrl = `https://wa.me/?text=${encodedText}` + + // 打开 WhatsApp 分享链接 + window.open(whatsappUrl, '_blank') +} + +/** + * 通用分享函数（优先使用 Web Share API，不支持则回退到 WhatsApp） + * @param options 分享选项 + */ +export async function share(options: { + title?: string + text?: string + url?: string + files?: File[] + fallbackToWhatsApp?: boolean +}): Promise { + const { title, text, url, files, fallbackToWhatsApp = true } = options + + // 如果支持 Web Share API，优先使用 + if (isWebShareSupported() && !files) { + try { + await shareWithWebAPI({ title, text, url }) + return + } catch (error) { + // 如果分享失败且允许回退，则使用 WhatsApp + if (fallbackToWhatsApp) { + const shareText = [title, text, url].filter(Boolean).join('\n\n') + shareToWhatsApp(shareText) + return + } + throw error + } + } + + // 如果不支持 Web Share API 或需要分享文件，使用 WhatsApp + if (fallbackToWhatsApp) { + const shareText = [title, text, url].filter(Boolean).join('\n\n') + shareToWhatsApp(shareText) + } else { + throw new Error('Web Share API is not supported and fallback is disabled') + } +} + +/** + * 分享当前页面（优先使用原生分享，不支持则回退到 WhatsApp） + * @param title 分享的标题 + * @param description 分享的描述（可选） + */ +export async function shareCurrentPage(title: string, description?: string): Promise { + const currentUrl = window.location.href + await share({ + title, + text: description, + url: currentUrl, + fallbackToWhatsApp: true + }) +} + +/** + * 分享图片（优先使用原生分享，不支持则回退到 WhatsApp） + * @param imageUrl 图片链接 + * @param title 分享的标题 + * @param description 分享的描述（可选） + */ +export async function shareImage(imageUrl: string, title: string, description?: string): Promise { + console.log('1',imageUrl,'2',title) + const currentUrl = window.location.href + const text = description + ? `${description}\n\n查看图片: ${imageUrl}` + : `查看图片: ${imageUrl}` + + await share({ + title, + text, + url: currentUrl, + fallbackToWhatsApp: true + }) +} + +/** + * 分享图片文件（使用 Web Share API，支持直接分享图片文件） + * @param imageFile 图片文件 + * @param title 分享的标题（可选） + * @param text 分享的文本（可选） + */ +export async function shareImageFile(imageFile: File, title?: string, text?: string): Promise { + if (!isWebShareSupported()) { + // 如果不支持文件分享，可以尝试将文件转换为 URL 后分享 + const imageUrl = URL.createObjectURL(imageFile) + await shareImage(imageUrl, title || '分享图片', text) + URL.revokeObjectURL(imageUrl) + return + } + + try { + await shareWithWebAPI({ + title, + text, + files: [imageFile] + }) + } catch (error) { + // 如果分享失败，回退到 URL 方式 + const imageUrl = URL.createObjectURL(imageFile) + await shareImage(imageUrl, title || '分享图片', text) + URL.revokeObjectURL(imageUrl) + } +} + +/** + * 分享当前页面到 WhatsApp（兼容旧版本，推荐使用 shareCurrentPage） + * @param title 分享的标题 + * @param description 分享的描述（可选） + */ +export async function shareCurrentPageToWhatsApp(title: string, description?: string): Promise { + await shareCurrentPage(title, description) +} + +/** + * 分享图片到 WhatsApp（兼容旧版本，推荐使用 shareImage） + * @param imageUrl 图片链接 + * @param title 分享的标题 + * @param description 分享的描述（可选） + */ +export async function shareImageToWhatsApp(imageUrl: string, title: string, description?: string): Promise { + await shareImage(imageUrl, title, description) +} + diff --git a/src/views/Workshop/creation/creation-list.vue b/src/views/Workshop/creation/creation-list.vue index 8f9cbff..fa9f67a 100644 --- a/src/views/Workshop/creation/creation-list.vue +++ b/src/views/Workshop/creation/creation-list.vue @@ -1,334 +1,346 @@