· 12 days ago
import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
export default class extends BridgeComponent {
static component = "share"
static targets = ["button"]
static values = {
url: String, // 生成图片的 API endpoint
generating: Boolean // 是否正在生成
}
async share(event) {
event.preventDefault()
if (this.generatingValue) return
this.generatingValue = true
this.updateButtonState()
try {
// 1. 请求服务器生成图片
const response = await fetch(this.urlValue, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
}
})
if (!response.ok) throw new Error('Failed to generate image')
const data = await response.json()
// 2. 发送 share 事件到 iOS,直接触发分享面板
this.send("share", { url: data.image_url })
} catch (error) {
console.error('Share error:', error)
alert('生成图片失败,请重试')
} finally {
this.generatingValue = false
this.updateButtonState()
}
}
updateButtonState() {
if (this.hasButtonTarget) {
this.buttonTarget.disabled = this.generatingValue
this.buttonTarget.textContent = this.generatingValue ? '生成中...' : '分享图片'
}
}
}
Share with your followers.
Reply