前端分享功能全局设计方案

src/share/
├── core/
│   ├── ShareManager.js        # 分享管理器
│   ├── WechatAdapter.js       # 微信适配器
│   └── NativeAdapter.js       # 原生分享适配器
├── composables/
│   └── useShare.js            # 组合式API
├── components/
│   ├── ShareButton.vue        # 分享按钮组件
│   └── SharePanel.vue         # 分享面板组件
└── utils/
    ├── poster.js              # 海报生成工具
    └── tracker.js             # 埋点工具

// src/share/core/ShareManager.js

class ShareManager {
    constructor() {
        this.adapters = new Map()
        this.currentAdapter = null
        this.config = {
            title: '',
            desc: '',
            link: '',
            imgUrl: '',
        }
    }

    // 注册适配器
    registerAdapter(name, adapter) {
        this.adapters.set(name, adapter)
    }

    // 自动选择适配器
    async init() {
        const isWechat = /MicroMessenger/i.test(navigator.userAgent)
        const hasNativeShare = navigator.share

        if (isWechat) {
            this.currentAdapter = this.adapters.get('wechat')
            await this.currentAdapter?.init()
        } else if (hasNativeShare) {
            this.currentAdapter = this.adapters.get('native')
        } else {
            this.currentAdapter = this.adapters.get('fallback')
        }

        return this.currentAdapter
    }

    // 统一分享方法
    async share(options) {
        if (!this.currentAdapter) {
            await this.init()
        }

        const shareData = {
            ...this.config,
            ...options,
        }

        try {
            const result = await this.currentAdapter.share(shareData)

            // 埋点上报
            this.track('share_success', shareData)

            return result
        } catch (error) {
            this.track('share_fail', { ...shareData, error: error.message })
            throw error
        }
    }

    // 设置全局配置
    setConfig(config) {
        this.config = { ...this.config, ...config }
    }

    // 埋点方法
    track(event, data) {
        // 实际项目对接埋点SDK
        console.log('埋点:', event, data)

        // 示例:发送到后端
        if (window._tracker) {
            window._tracker.track(event, data)
        }
    }
}

export default new ShareManager()

// src/share/core/WechatAdapter.js

class WechatAdapter {
    constructor() {
        this.isReady = false
        this.signUrl = '' // 记录签名时的URL
        this.signCache = null // 签名缓存
        this.cacheTime = 0
        this.CACHE_DURATION = 7000 * 1000 // 签名缓存2小时
    }

    // 初始化微信JSSDK
    async init() {
        // 加载JSSDK脚本
        await this.loadScript('https://res.wx.qq.com/open/js/jweixin-1.6.0.js')

        // 获取签名并配置
        await this.configWxSDK()

        // 监听路由变化,自动重新签名
        this.watchRoute()
    }

    // 动态加载脚本
    loadScript(src) {
        return new Promise((resolve, reject) => {
            if (window.wx) {
                resolve()
                return
            }

            const script = document.createElement('script')
            script.src = src
            script.onload = resolve
            script.onerror = reject
            document.head.appendChild(script)
        })
    }

    // 配置微信SDK
    async configWxSDK() {
        const currentUrl = this.getNormalizeUrl()

        // 检查缓存是否有效
        if (this.isCacheValid(currentUrl)) {
            console.log('使用缓存签名')
            this.applyConfig(this.signCache)
            return
        }

        try {
            // 请求后端获取签名
            const signature = await this.getSignature(currentUrl)

            // 缓存签名信息
            this.signCache = signature
            this.signUrl = currentUrl
            this.cacheTime = Date.now()

            // 应用配置
            this.applyConfig(signature)
        } catch (error) {
            console.error('微信签名失败:', error)
            throw error
        }
    }

    // 获取规范化URL
    getNormalizeUrl() {
        // 关键:iOS使用第一次进入的URL,Android使用当前URL
        const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent)

        if (isIOS && window.__wxFirstUrl__) {
            return window.__wxFirstUrl__
        }

        const url = window.location.href.split('#')[0]

        // 记录iOS首次URL
        if (isIOS && !window.__wxFirstUrl__) {
            window.__wxFirstUrl__ = url
        }

        return url
    }

    // 检查缓存是否有效
    isCacheValid(currentUrl) {
        if (!this.signCache) return false

        const isExpired = Date.now() - this.cacheTime > this.CACHE_DURATION
        const isUrlChanged = this.signUrl !== currentUrl

        return !isExpired && !isUrlChanged
    }

    // 请求签名
    async getSignature(url) {
        const response = await fetch('/api/wechat/signature', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ url }),
        })

        if (!response.ok) {
            throw new Error('获取签名失败')
        }

        return response.json()
    }

    // 应用微信配置
    applyConfig(signature) {
        return new Promise((resolve, reject) => {
            window.wx.config({
                debug: false,
                appId: signature.appId,
                timestamp: signature.timestamp,
                nonceStr: signature.nonceStr,
                signature: signature.signature,
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData',
                    'onMenuShareAppMessage', // 兼容旧版本
                    'onMenuShareTimeline',
                ],
            })

            window.wx.ready(() => {
                this.isReady = true
                console.log('微信SDK配置成功')
                resolve()
            })

            window.wx.error((err) => {
                console.error('微信SDK配置失败:', err)
                reject(err)
            })
        })
    }

    // 监听路由变化
    watchRoute() {
        let lastUrl = window.location.href

        // 监听 popstate (浏览器前进后退)
        window.addEventListener('popstate', () => {
            this.handleRouteChange()
        })

        // 监听 pushState 和 replaceState
        const originalPushState = history.pushState
        const originalReplaceState = history.replaceState

        history.pushState = (...args) => {
            originalPushState.apply(history, args)
            this.handleRouteChange()
        }

        history.replaceState = (...args) => {
            originalReplaceState.apply(history, args)
            this.handleRouteChange()
        }

        // 兼容hash路由
        window.addEventListener('hashchange', () => {
            const currentUrl = window.location.href
            if (currentUrl !== lastUrl) {
                lastUrl = currentUrl
                this.handleRouteChange()
            }
        })
    }

    // 处理路由变化
    async handleRouteChange() {
        const currentUrl = this.getNormalizeUrl()

        // 如果URL变化且缓存失效,重新签名
        if (this.signUrl !== currentUrl && !this.isCacheValid(currentUrl)) {
            console.log('路由变化,重新签名')
            await this.configWxSDK()
        }
    }

    // 分享方法
    async share(options) {
        if (!this.isReady) {
            await this.init()
        }

        const { title, desc, link, imgUrl } = options

        return new Promise((resolve, reject) => {
            // 分享给朋友
            window.wx.updateAppMessageShareData({
                title,
                desc,
                link,
                imgUrl,
                success: () => {
                    console.log('分享给朋友配置成功')
                    resolve({ platform: 'wechat_friend' })
                },
                fail: reject,
            })

            // 分享到朋友圈
            window.wx.updateTimelineShareData({
                title,
                link,
                imgUrl,
                success: () => {
                    console.log('分享到朋友圈配置成功')
                    resolve({ platform: 'wechat_timeline' })
                },
                fail: reject,
            })

            // 兼容旧版本API
            window.wx.onMenuShareAppMessage({
                title,
                desc,
                link,
                imgUrl,
                success: () => resolve({ platform: 'wechat_friend' }),
            })

            window.wx.onMenuShareTimeline({
                title,
                link,
                imgUrl,
                success: () => resolve({ platform: 'wechat_timeline' }),
            })
        })
    }
}

export default WechatAdapter

// src/share/core/NativeAdapter.js

class NativeAdapter {
    async share(options) {
        const { title, desc, link } = options

        if (!navigator.share) {
            throw new Error('浏览器不支持原生分享')
        }

        try {
            await navigator.share({
                title: title,
                text: desc,
                url: link,
            })

            return { platform: 'native', success: true }
        } catch (error) {
            if (error.name === 'AbortError') {
                // 用户取消分享
                return { platform: 'native', cancelled: true }
            }
            throw error
        }
    }
}

export default NativeAdapter

// src/share/core/FallbackAdapter.js

class FallbackAdapter {
    async share(options) {
        const { link } = options

        // 复制链接到剪贴板
        try {
            await navigator.clipboard.writeText(link)

            // 提示用户
            this.showToast('链接已复制,快去分享吧!')

            return { platform: 'fallback', method: 'clipboard' }
        } catch (error) {
            // 如果复制失败,显示二维码
            this.showQRCode(link)
            return { platform: 'fallback', method: 'qrcode' }
        }
    }

    showToast(message) {
        const toast = document.createElement('div')
        toast.className = 'share-toast'
        toast.textContent = message
        toast.style.cssText = `
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 12px 24px;
      border-radius: 8px;
      z-index: 9999;
      font-size: 14px;
    `

        document.body.appendChild(toast)

        setTimeout(() => {
            toast.remove()
        }, 2000)
    }

    showQRCode(url) {
        // 实际项目可以用 qrcode.js 库
        console.log('生成二维码:', url)
        alert(`请手动复制链接分享:\n${url}`)
    }
}

export default FallbackAdapter

// src/share/composables/useShare.js

import { ref, onMounted } from 'vue'
import ShareManager from '../core/ShareManager'
import WechatAdapter from '../core/WechatAdapter'
import NativeAdapter from '../core/NativeAdapter'
import FallbackAdapter from '../core/FallbackAdapter'

export function useShare(options = {}) {
    const isLoading = ref(false)
    const isReady = ref(false)
    const error = ref(null)

    // 初始化分享管理器
    const initShare = async () => {
        try {
            isLoading.value = true

            // 注册所有适配器
            ShareManager.registerAdapter('wechat', new WechatAdapter())
            ShareManager.registerAdapter('native', new NativeAdapter())
            ShareManager.registerAdapter('fallback', new FallbackAdapter())

            // 设置全局配置
            if (options.config) {
                ShareManager.setConfig(options.config)
            }

            // 初始化
            await ShareManager.init()

            isReady.value = true
        } catch (err) {
            error.value = err
            console.error('分享初始化失败:', err)
        } finally {
            isLoading.value = false
        }
    }

    // 执行分享
    const share = async (shareData) => {
        try {
            isLoading.value = true
            error.value = null

            const result = await ShareManager.share(shareData)

            return result
        } catch (err) {
            error.value = err
            console.error('分享失败:', err)
            throw err
        } finally {
            isLoading.value = false
        }
    }

    // 自动初始化
    onMounted(() => {
        if (options.autoInit !== false) {
            initShare()
        }
    })

    return {
        isLoading,
        isReady,
        error,
        share,
        initShare,
    }
}

<script setup>
import { ref } from 'vue'
import { useShare } from '../composables/useShare'

const props = defineProps({
    title: {
        type: String,
        default: '分享标题',
    },
    desc: {
        type: String,
        default: '分享描述',
    },
    link: {
        type: String,
        default: () => window.location.href,
    },
    imgUrl: {
        type: String,
        default: '',
    },
})

const emit = defineEmits(['success', 'fail'])

const { share, isLoading } = useShare({
    autoInit: true,
    config: {
        imgUrl: props.imgUrl || 'https://example.com/default-share.jpg',
    },
})

const showToast = ref(false)
const toastMessage = ref('')

const handleShare = async () => {
    try {
        const result = await share({
            title: props.title,
            desc: props.desc,
            link: props.link,
            imgUrl: props.imgUrl,
        })

        toastMessage.value = '分享设置成功,请点击右上角分享'
        showToast.value = true

        setTimeout(() => {
            showToast.value = false
        }, 2000)

        emit('success', result)
    } catch (error) {
        toastMessage.value = '分享失败,请重试'
        showToast.value = true

        setTimeout(() => {
            showToast.value = false
        }, 2000)

        emit('fail', error)
    }
}
</script>

<template>
    <div class="share-button-wrapper">
        <button class="share-button" :disabled="isLoading" @click="handleShare">
            <span v-if="isLoading">分享中...</span>
            <span v-else>
                <slot>分享</slot>
            </span>
        </button>

        <div v-if="showToast" class="toast">
            {{ toastMessage }}
        </div>
    </div>
</template>

<style scoped>
.share-button-wrapper {
    position: relative;
}

.share-button {
    padding: 10px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.share-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.share-button:active {
    transform: translateY(0);
}

.share-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
</style>

<script setup>
import { ref, computed } from 'vue'
import { useShare } from '../composables/useShare'

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    shareData: {
        type: Object,
        default: () => ({}),
    },
})

const emit = defineEmits(['update:visible', 'success'])

const { share } = useShare({ autoInit: true })

const platforms = ref([
    { name: '微信', icon: '💬', type: 'wechat' },
    { name: '朋友圈', icon: '🔗', type: 'timeline' },
    { name: '微博', icon: '📱', type: 'weibo' },
    { name: 'QQ', icon: '🐧', type: 'qq' },
    { name: '复制链接', icon: '📋', type: 'copy' },
])

const handlePlatformClick = async (platform) => {
    if (platform.type === 'copy') {
        await copyLink()
        return
    }

    try {
        await share(props.shareData)
        emit('success', platform)
        emit('update:visible', false)
    } catch (error) {
        console.error('分享失败:', error)
    }
}

const copyLink = async () => {
    try {
        await navigator.clipboard.writeText(props.shareData.link)
        alert('链接已复制')
        emit('update:visible', false)
    } catch (error) {
        console.error('复制失败:', error)
    }
}

const handleClose = () => {
    emit('update:visible', false)
}
</script>

<template>
    <div v-if="visible" class="share-panel-mask" @click="handleClose">
        <div class="share-panel" @click.stop>
            <div class="panel-header">
                <h3>分享到</h3>
                <button class="close-btn" @click="handleClose">✕</button>
            </div>

            <div class="platform-list">
                <div
                    v-for="platform in platforms"
                    :key="platform.type"
                    class="platform-item"
                    @click="handlePlatformClick(platform)"
                >
                    <div class="platform-icon">{{ platform.icon }}</div>
                    <div class="platform-name">{{ platform.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.share-panel-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    z-index: 9999;
    animation: fadeIn 0.3s;
}

.share-panel {
    width: 100%;
    background: white;
    border-radius: 16px 16px 0 0;
    padding: 20px;
    animation: slideUp 0.3s;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 10px 0;
}

.platform-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

.platform-item:active {
    background: #f5f5f5;
}

.platform-icon {
    font-size: 36px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    border-radius: 12px;
}

.platform-name {
    font-size: 12px;
    color: #666;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}
</style>

// src/share/utils/poster.js

class PosterGenerator {
    constructor(options = {}) {
        this.canvas = null
        this.ctx = null
        this.imageCache = new Map()
        this.options = {
            width: 750,
            height: 1334,
            quality: 0.9,
            ...options,
        }
    }

    // 创建海报
    async generate(config) {
        const { width, height } = this.options

        // 创建离屏Canvas
        this.canvas = document.createElement('canvas')
        this.canvas.width = width
        this.canvas.height = height
        this.ctx = this.canvas.getContext('2d')

        // 绘制背景
        await this.drawBackground(config.background)

        // 绘制头像
        if (config.avatar) {
            await this.drawAvatar(config.avatar)
        }

        // 绘制文本
        if (config.title) {
            this.drawText(config.title, 60, 'bold 36px Arial', '#333')
        }

        if (config.desc) {
            this.drawText(config.desc, 120, '24px Arial', '#666')
        }

        // 绘制二维码
        if (config.qrcode) {
            await this.drawQRCode(config.qrcode)
        }

        // 转换为图片
        return this.toImage()
    }

    // 绘制背景
    async drawBackground(background) {
        if (typeof background === 'string') {
            // 图片背景
            const img = await this.loadImage(background)
            this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
        } else {
            // 渐变背景
            const gradient = this.ctx.createLinearGradient(
                0,
                0,
                0,
                this.canvas.height
            )
            gradient.addColorStop(0, background.start || '#667eea')
            gradient.addColorStop(1, background.end || '#764ba2')

            this.ctx.fillStyle = gradient
            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
        }
    }

    // 绘制头像
    async drawAvatar(config) {
        const { url, x = 40, y = 40, size = 100 } = config
        const img = await this.loadImage(url)

        this.ctx.save()

        // 绘制圆形头像
        this.ctx.beginPath()
        this.ctx.arc(x + size / 2, y + size / 2, size / 2, 0, Math.PI * 2)
        this.ctx.clip()
        this.ctx.drawImage(img, x, y, size, size)

        this.ctx.restore()
    }

    // 绘制文本
    drawText(text, y, font, color) {
        this.ctx.font = font
        this.ctx.fillStyle = color
        this.ctx.textAlign = 'center'
        this.ctx.fillText(text, this.canvas.width / 2, y)
    }

    // 绘制二维码
    async drawQRCode(config) {
        const { url, x, y, size = 200 } = config
        const img = await this.loadImage(url)

        const qrX = x || (this.canvas.width - size) / 2
        const qrY = y || this.canvas.height - size - 40

        this.ctx.drawImage(img, qrX, qrY, size, size)
    }

    // 加载图片(带缓存)
    loadImage(url) {
        if (this.imageCache.has(url)) {
            return Promise.resolve(this.imageCache.get(url))
        }

        return new Promise((resolve, reject) => {
            const img = new Image()
            img.crossOrigin = 'anonymous' // 允许跨域

            img.onload = () => {
                this.imageCache.set(url, img)
                resolve(img)
            }

            img.onerror = reject
            img.src = url
        })
    }

    // 转换为图片
    toImage() {
        return new Promise((resolve) => {
            this.canvas.toBlob(
                (blob) => {
                    const url = URL.createObjectURL(blob)
                    resolve(url)
                },
                'image/png',
                this.options.quality
            )
        })
    }

    // 清理资源
    destroy() {
        this.imageCache.clear()
        this.canvas = null
        this.ctx = null
    }
}

export default PosterGenerator

<script setup>
import { ref } from 'vue'
import ShareButton from './components/ShareButton.vue'
import SharePanel from './components/SharePanel.vue'
import PosterGenerator from './utils/poster.js'

const showPanel = ref(false)
const posterUrl = ref('')

const shareData = ref({
    title: '超级棒的文章标题',
    desc: '这是一篇非常有价值的文章,快来阅读吧!',
    link: window.location.href,
    imgUrl: 'https://example.com/share-cover.jpg',
})

// 生成海报
const generatePoster = async () => {
    const generator = new PosterGenerator()

    const url = await generator.generate({
        background: {
            start: '#667eea',
            end: '#764ba2',
        },
        avatar: {
            url: 'https://example.com/avatar.jpg',
            x: 40,
            y: 40,
            size: 100,
        },
        title: shareData.value.title,
        desc: shareData.value.desc,
        qrcode: {
            url: 'https://example.com/qrcode.jpg',
            size: 200,
        },
    })

    posterUrl.value = url

    // 更新分享图片
    shareData.value.imgUrl = url

    generator.destroy()
}

const handleShareSuccess = (result) => {
    console.log('分享成功:', result)
}
</script>

<template>
    <div class="app">
        <div class="content">
            <h1>{{ shareData.title }}</h1>
            <p>{{ shareData.desc }}</p>

            <div class="action-bar">
                <ShareButton v-bind="shareData" @success="handleShareSuccess">
                    点击分享
                </ShareButton>

                <button class="panel-btn" @click="showPanel = true">
                    打开分享面板
                </button>

                <button class="poster-btn" @click="generatePoster">
                    生成分享海报
                </button>
            </div>

            <div v-if="posterUrl" class="poster-preview">
                <h3>生成的海报:</h3>
                <img :src="posterUrl" alt="分享海报" />
            </div>
        </div>

        <SharePanel
            v-model:visible="showPanel"
            :share-data="shareData"
            @success="handleShareSuccess"
        />
    </div>
</template>

<style scoped>
.app {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.content {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h1 {
    margin: 0 0 16px;
    font-size: 28px;
    color: #333;
}

p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.action-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.panel-btn,
.poster-btn {
    padding: 10px 24px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
}

.panel-btn:hover,
.poster-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

.poster-preview {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.poster-preview h3 {
    margin-bottom: 16px;
    font-size: 18px;
}

.poster-preview img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

// src/share/utils/tracker.js

class ShareTracker {
    constructor() {
        this.sessionId = this.generateSessionId()
    }

    // 生成会话ID
    generateSessionId() {
        return `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
    }

    // 上报事件
    track(event, data = {}) {
        const trackData = {
            event,
            session_id: this.sessionId,
            timestamp: Date.now(),
            url: window.location.href,
            user_agent: navigator.userAgent,
            ...data,
        }

        // 发送到后端
        this.send(trackData)

        // 同时打印到控制台(开发环境)
        if (process.env.NODE_ENV === 'development') {
            console.log('📊 埋点:', trackData)
        }
    }

    // 发送数据
    async send(data) {
        try {
            // 使用 sendBeacon 保证数据发送
            if (navigator.sendBeacon) {
                navigator.sendBeacon('/api/track', JSON.stringify(data))
            } else {
                // 降级方案
                await fetch('/api/track', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(data),
                    keepalive: true,
                })
            }
        } catch (error) {
            console.error('埋点上报失败:', error)
        }
    }

    // 分享按钮点击
    trackShareClick(platform) {
        this.track('share_button_click', { platform })
    }

    // 分享成功
    trackShareSuccess(platform, shareData) {
        this.track('share_success', {
            platform,
            title: shareData.title,
            link: shareData.link,
        })
    }

    // 分享失败
    trackShareFail(platform, error) {
        this.track('share_fail', {
            platform,
            error: error.message,
        })
    }

    // 分享回流(用户从分享链接进入)
    trackShareCallback(shareId) {
        this.track('share_callback', { share_id: shareId })
    }
}

export default new ShareTracker()