实现价格折扣动态调整

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

@@ -1,19 +1,33 @@
 "use client"
 
 import { format } from "date-fns"
-import { EyeIcon, EyeOffIcon, PlusIcon, TrashIcon } from "lucide-react"
 import { Suspense, useCallback, useEffect, useMemo, useState } from "react"
-import { getAllProduct, getPageProductSku } from "@/actions/product"
+import { toast } from "sonner"
+import {
+  deleteProductSku,
+  getAllProduct,
+  getPageProductSku,
+} from "@/actions/product"
 import { DataTable, useDataTable } from "@/components/data-table"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 import type { Product } from "@/models/product"
+import type { ProductSku } from "@/models/product_sku"
+import { BatchUpdateDiscount } from "./batch-discount"
+import { CreateProductSku } from "./create"
+import { UpdateProductSku } from "./update"
 
 export default function ProductPage() {
   const [selected, setSelected] = useState<number | undefined>(undefined)
@@ -36,7 +50,6 @@ function Products(props: {
     const resp = await getAllProduct()
     if (resp.success) {
       setList(resp.data)
-      console.log(resp.data)
     }
   }, [])
 
@@ -52,46 +65,10 @@ function Products(props: {
     <section className="flex-none basis-64 bg-background rounded-lg">
       <header className="pl-3 pr-1 h-10 border-b flex items-center justify-between">
         <h3 className="text-sm">产品列表</h3>
-        <div>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="size-8">
-                <PlusIcon />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>新建产品</p>
-            </TooltipContent>
-          </Tooltip>
-
-          {!!selected && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" className="size-8">
-                  {selected.status ? <EyeOffIcon /> : <EyeIcon />}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>{selected.status ? "禁用产品" : "启用产品"}</p>
-              </TooltipContent>
-            </Tooltip>
-          )}
-
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="size-8">
-                <TrashIcon />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>删除产品</p>
-            </TooltipContent>
-          </Tooltip>
-        </div>
       </header>
-      <ul>
+      <ul className="flex flex-col gap-1 py-1">
         {list.map(item => (
-          <li key={item.id} className="p-1">
+          <li key={item.id} className="px-1">
             <Button
               variant="ghost"
               className={cn(
@@ -125,11 +102,18 @@ function ProductSkus(props: { selected?: number }) {
 
   return (
     <div className="flex-auto overflow-hidden flex flex-col items-stretch gap-3">
-      <div>
-        <Button>新建套餐</Button>
+      <div className="flex gap-3">
+        <CreateProductSku
+          productId={props.selected ?? 0}
+          onSuccess={table.refresh}
+        />
+        <BatchUpdateDiscount
+          productId={props.selected ?? 0}
+          onSuccess={table.refresh}
+        />
       </div>
       <Suspense>
-        <DataTable
+        <DataTable<ProductSku>
           classNames={{
             root: "overflow-auto",
           }}
@@ -138,10 +122,13 @@ function ProductSkus(props: { selected?: number }) {
             { header: "套餐编码", accessorKey: "code" },
             { header: "套餐名称", accessorKey: "name" },
             { header: "单价", accessorKey: "price" },
-            { header: "折扣", accessorKey: "discount" },
+            { header: "折扣", accessorFn: row => row.discount?.name ?? "—" },
             {
               header: "最终价格",
-              accessorFn: row => Number(row.price) * row.discount,
+              accessorFn: row =>
+                row.discount
+                  ? (Number(row.price) * Number(row.discount.discount)) / 100
+                  : Number(row.price),
             },
             {
               header: "创建时间",
@@ -151,10 +138,67 @@ function ProductSkus(props: { selected?: number }) {
               header: "更新时间",
               accessorFn: row => format(row.updated_at, "yyyy-MM-dd HH:mm"),
             },
-            { header: "操作", cell: () => <div></div> },
+            {
+              header: "操作",
+              cell: ({ row }) => (
+                <div className="flex gap-1">
+                  <UpdateProductSku
+                    sku={row.original}
+                    onSuccess={table.refresh}
+                  />
+                  <DeleteButton sku={row.original} onSuccess={table.refresh} />
+                </div>
+              ),
+            },
           ]}
         />
       </Suspense>
     </div>
   )
 }
+
+function DeleteButton(props: { sku: ProductSku; onSuccess?: () => void }) {
+  const [loading, setLoading] = useState(false)
+
+  const handleConfirm = async () => {
+    setLoading(true)
+    try {
+      const resp = await deleteProductSku(props.sku.id)
+      if (resp.success) {
+        toast.success("删除成功")
+        props.onSuccess?.()
+      } else {
+        toast.error(resp.message ?? "删除失败")
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : error
+      toast.error(`接口请求错误: ${message}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button size="sm" variant="destructive" disabled={loading}>
+          删除
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogTitle>确认删除</AlertDialogTitle>
+          <AlertDialogDescription>
+            确定要删除套餐「{props.sku.name}」吗？此操作不可撤销。
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>取消</AlertDialogCancel>
+          <AlertDialogAction variant="destructive" onClick={handleConfirm}>
+            删除
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}