套餐编码可视化改造

src/app/(root)/product/create.tsx

@@ -5,6 +5,7 @@ import { toast } from "sonner"
 import z from "zod"
 import { createProductSku } from "@/actions/product"
 import { getAllProductDiscount } from "@/actions/product_discount"
+import { ProductCodeField } from "@/components/products"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
@@ -20,6 +21,7 @@ import {
   FieldError,
   FieldGroup,
   FieldLabel,
+  FieldSeparator,
 } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 import {
@@ -30,6 +32,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import type { ProductDiscount } from "@/models/product_discount"
+import type { SelectedProduct } from "./type"
 
 const schema = z.object({
   code: z.string().min(1, "请输入套餐编码"),
@@ -45,7 +48,7 @@ const schema = z.object({
 })
 
 export function CreateProductSku(props: {
-  productId: number
+  product?: SelectedProduct
   onSuccess?: () => void
 }) {
   const [open, setOpen] = useState(false)
@@ -74,9 +77,11 @@ export function CreateProductSku(props: {
   }, [open])
 
   const onSubmit = async (data: z.infer<typeof schema>) => {
+    if (!props.product) return
+
     try {
       const resp = await createProductSku({
-        product_id: props.productId,
+        product_id: props.product.id,
         code: data.code,
         name: data.name,
         price: data.price,
@@ -109,7 +114,7 @@ export function CreateProductSku(props: {
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
-        <Button disabled={!props.productId}>新建套餐</Button>
+        <Button disabled={!props.product}>新建套餐</Button>
       </DialogTrigger>
 
       <DialogContent>
@@ -119,25 +124,6 @@ export function CreateProductSku(props: {
 
         <form id="sku-create" onSubmit={form.handleSubmit(onSubmit)}>
           <FieldGroup>
-            <Controller
-              control={form.control}
-              name="code"
-              render={({ field, fieldState }) => (
-                <Field>
-                  <FieldLabel htmlFor="sku-create-code">套餐编码</FieldLabel>
-                  <Input
-                    id="sku-create-code"
-                    placeholder="请输入套餐编码"
-                    {...field}
-                    aria-invalid={fieldState.invalid}
-                  />
-                  {fieldState.invalid && (
-                    <FieldError errors={[fieldState.error]} />
-                  )}
-                </Field>
-              )}
-            />
-
             <Controller
               control={form.control}
               name="name"
@@ -203,6 +189,16 @@ export function CreateProductSku(props: {
                 </Field>
               )}
             />
+
+            <FieldSeparator />
+
+            {props.product && (
+              <ProductCodeField
+                control={form.control}
+                name="code"
+                code={props.product.code}
+              />
+            )}
           </FieldGroup>
         </form>