support captchaId

src/components/captcha/index.vue

@@ -26,14 +26,42 @@ const props = withDefaults(defineProps<{
 const { width, height, from, api } = toRefs(props);
 
 const src = ref("");
-function update() {
+const captchaId = ref("");
-	src.value = `${api.value}?from=${from.value}&width=${width.value}&height=${height.value}&r=${Toolkit.random(0, 999999)}`;
+
+const emit = defineEmits<{
+	"update:captchaId": [id: string],
+}>();
+
+async function update() {
+	if (src.value && src.value.startsWith("blob:")) {
+		URL.revokeObjectURL(src.value);
+	}
+	const response = await fetch(`${api.value}?from=${from.value}&width=${width.value}&height=${height.value}&r=${Toolkit.random(0, 999999)}`);
+	if (!response.ok) {
+		throw new Error(`fetch captcha error: ${response.status}`);
+	}
+	captchaId.value = response.headers.get("X-Captcha-ID") || "";
+	src.value = URL.createObjectURL(await response.blob());
+	emit("update:captchaId", captchaId.value);
 }
 onMounted(update);
 
-defineExpose({
+watch([width, height], () => {
-	update
+	update();
 });
+
+onUnmounted(() => {
+	if (src.value && src.value.startsWith("blob:")) {
+		URL.revokeObjectURL(src.value);
+	}
+});
+
+defineExpose({
+	update,
+	getCaptchaId: () => captchaId.value,
+	refresh: update
+});
+
 </script>
 
 <style lang="less" scoped>