Edit.jsx 1.49 KB
import { Head, useForm } from '@inertiajs/react'
import Layout from '../Layout'
import ImageUploadForm from '../../components/ImageUploadForm'

export default function Edit({ image, tags, auth, errors = {} }) {
  // 初始化已有标签的ID列表
  const initialTagIds = image.tags
    ? image.tags.map(tag => tag.id)
    : []
    
  const { data, setData, patch, processing } = useForm({
    title: image.title || '',
    tag_ids: initialTagIds, // 使用tag_ids而不是tags
  })

  const handleSubmit = (e) => {
    e.preventDefault()
    patch(`/images/${image.id}`)
  }

  return (
    <Layout user={auth}>
      <Head title={`编辑 ${image.title}`} />
      <div className="bg-white shadow overflow-hidden sm:rounded-lg">
        <div className="px-4 py-5 sm:px-6">
          <h1 className="text-2xl font-bold text-gray-900">编辑图片</h1>
          <p className="mt-1 max-w-2xl text-sm text-gray-500">
            更新图片信息
          </p>
        </div>
        <div className="border-t border-gray-200 px-4 py-5 sm:px-6">
          <ImageUploadForm
            data={data}
            setData={setData}
            processing={processing}
            errors={errors}
            onSubmit={handleSubmit}
            submitButtonText="保存"
            processingButtonText="保存中..."
            showTagsField={true}
            isEdit={true}
            image={image}
            tags={tags}
            cancelUrl={`/images/${image.id}`}
          />
        </div>
      </div>
    </Layout>
  )
}