Image Upload

<script setup lang="ts">import { ref } from 'vue'import {  AdminImageUpload,  AdminImageUploadLoading,  AdminImageUploadMessage,  AdminImageUploadPlaceholder,  AdminImageUploadPreview,  AdminImageUploadTrigger} from '@/components/admin/image-upload'​const value = ref<File | null>(null)const status = ref<'uploading' | 'failed' | undefined>(undefined)const isError = ref(false)​function handleReset() {  value.value = null  status.value = undefined  isError.value = false}</script>​<template>  <div class="flex flex-col gap-4">    <admin-image-upload v-model="value" :is-error="isError" :status="status">      <admin-image-upload-trigger>        <admin-image-upload-placeholder />        <admin-image-upload-preview />        <admin-image-upload-loading />      </admin-image-upload-trigger>      <admin-image-upload-message />    </admin-image-upload>​    <div class="flex flex-wrap gap-2 typo-content-medium">      <button class="rounded-sm border border-text-30 px-2 py-1" type="button" @click="handleReset">        Reset      </button>      <button        class="rounded-sm border border-text-30 px-2 py-1"        type="button"        @click="status = status === 'uploading' ? undefined : 'uploading'"      >        Toggle uploading      </button>      <button        class="rounded-sm border border-text-30 px-2 py-1"        type="button"        @click="status = status === 'failed' ? undefined : 'failed'"      >        Toggle failed      </button>      <button        class="rounded-sm border border-text-30 px-2 py-1"        type="button"        @click="isError = !isError"      >        Toggle is-error      </button>    </div>  </div></template>

<script setup lang="ts">import { useForm, Field as VeeField } from 'vee-validate'import { ref } from 'vue'import { AdminField, AdminFieldContent, AdminFieldLabel } from '@/components/admin/field'import {  AdminImageUpload,  AdminImageUploadLoading,  AdminImageUploadMessage,  AdminImageUploadPlaceholder,  AdminImageUploadPreview,  AdminImageUploadTrigger} from '@/components/admin/image-upload'​// canonical split：欄位值 cover 是「已持久化的 URL」（送出值），// 元件 v-model 綁的 file 只承載使用者新選、尚未上傳完成的本地 File。const { handleSubmit, values, setFieldValue } = useForm<{  cover: string | null}>({  initialValues: {    cover: null  }})​const file = ref<File | null>(null)const status = ref<'uploading' | 'failed' | undefined>(undefined)const lastReject = ref<string | undefined>(undefined)​function validateCover(value: unknown) {  return value ? true : '請上傳商品圖片'}​// 5MB 上限function validateFile(f: File): true | string {  if (f.size > 5 * 1024 * 1024) {    return '檔案大小超過 5MB'  }  return true}​// 模擬 upload：1.2 秒後隨機成功 / 失敗async function fakeUpload(payload: { file: File }) {  status.value = 'uploading'  await new Promise((resolve) => setTimeout(resolve, 1200))  if (Math.random() < 0.3) {    status.value = 'failed'    return  }  // 成功：把回傳的持久化 URL 存進表單欄位、清掉本地選檔，preview 改吃 :src  setFieldValue('cover', URL.createObjectURL(payload.file))  file.value = null  status.value = undefined}​function onFileReject(payload: { reason: string; file?: File }) {  lastReject.value = payload.reason}​const onSubmit = handleSubmit((submitted) => {  // eslint-disable-next-line no-alert  alert(`已送出，cover = ${submitted.cover ?? 'null'}`)})​function handleReset() {  setFieldValue('cover', null)  file.value = null  status.value = undefined  lastReject.value = undefined}</script>​<template>  <form class="flex w-full max-w-sm flex-col gap-4" @submit.prevent="onSubmit">    <vee-field v-slot="{ errorMessage }" name="cover" :rules="validateCover">      <admin-field>        <admin-field-label class="w-26 shrink-0 py-2.5">商品圖片</admin-field-label>        <admin-field-content class="min-h-full min-w-0">          <admin-image-upload            v-model="file"            accept="image/*"            :is-error="!!errorMessage"            :on-file-validate="validateFile"            :status="status"            @file-reject="onFileReject"            @upload="fakeUpload"          >            <admin-image-upload-trigger>              <admin-image-upload-placeholder v-if="!values.cover" />              <admin-image-upload-preview :src="values.cover" />              <admin-image-upload-loading />            </admin-image-upload-trigger>            <admin-image-upload-message />          </admin-image-upload>        </admin-field-content>      </admin-field>    </vee-field>​    <div class="flex gap-2">      <button        class="rounded-sm border border-text-30 px-3 py-1.5 typo-content-medium"        type="submit"      >        Submit      </button>      <button        class="rounded-sm border border-text-30 px-3 py-1.5 typo-content-medium"        type="button"        @click="handleReset"      >        Reset      </button>    </div>​    <p class="typo-caption-small text-text-60">      Cover (persisted): {{ values.cover ?? 'null' }}      <br />      Local file: {{ file ? '[File]' : 'null' }}      <br />      Status: {{ status ?? '—' }}      <br />      Last reject: {{ lastReject ?? '—' }}    </p>  </form></template>