开发环境新增权限复制功能

package.json

@@ -3,7 +3,7 @@
   "version": "1.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -H 0.0.0.0 --turbopack",
+    "dev": "next dev -H 0.0.0.0 -p 3001 --turbopack",
     "build": "next build --turbopack",
     "lint": "biome check --write"
   },

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

@@ -250,7 +250,6 @@ export default function BatchPage() {
         <DataTable<Batch>
           {...table}
           columns={[
-            { header: "ID", accessorKey: "id" },
             {
               header: "会员号",
               accessorFn: row => row.user?.phone || "-",

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

@@ -328,7 +328,6 @@ export default function BillingPage() {
         <DataTable<Billing>
           {...table}
           columns={[
-            { header: "ID", accessorKey: "id" },
             { header: "会员号", accessorFn: row => row.user?.phone || "-" },
             { header: "套餐号", accessorKey: "resource.resource_no" },
             {

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

@@ -238,7 +238,6 @@ export default function ChannelPage() {
         <DataTable<Channel>
           {...table}
           columns={[
-            { header: "ID", accessorKey: "id" },
             {
               header: "会员号",
               accessorFn: row => row.user?.phone || "-",

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

@@ -35,7 +35,6 @@ export default function CouponPage() {
         <DataTable<Coupon>
           {...table}
           columns={[
-            { header: "ID", accessorKey: "id" },
             { header: "所属用户", accessorKey: "user_id" },
             { header: "代码", accessorKey: "code" },
             { header: "备注", accessorKey: "remark" },

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

@@ -234,7 +234,6 @@ export default function UserPage() {
         <DataTable<Cust>
           {...table}
           columns={[
-            { header: "ID", accessorKey: "id" },
             { header: "账号", accessorKey: "username" },
             { header: "手机", accessorKey: "phone" },
             { header: "邮箱", accessorKey: "email" },

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

@@ -5,9 +5,11 @@ import {
   type Row,
   useReactTable,
 } from "@tanstack/react-table"
+import { Copy } from "lucide-react"
 import { Suspense, useCallback, useEffect, useState } from "react"
 import { toast } from "sonner"
 import { getAllPermissions } from "@/actions/permission"
+import { Button } from "@/components/ui/button"
 import {
   Table,
   TableBody,
@@ -25,6 +27,34 @@ type Node = {
   children: Node[]
 }
 
+function toConstName(name: string): string {
+  return (
+    "Scope" +
+    name
+      .split(/[:_]/)
+      .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+      .join("")
+  )
+}
+
+function generateScopeCode(roots: Node[]): string {
+  function generateNode(node: Node, isRoot: boolean): string[] {
+    const lines: string[] = []
+    if (isRoot) {
+      lines.push(`// ${node.description}`)
+    }
+    const constName = toConstName(node.name)
+    const comment = isRoot ? "" : ` // ${node.description}`
+    lines.push(`export const ${constName} = "${node.name}"${comment}`)
+    for (const child of node.children) {
+      lines.push(...generateNode(child, false))
+    }
+    return lines
+  }
+
+  return roots.map(root => generateNode(root, true).join("\n")).join("\n\n")
+}
+
 export default function PermissionsPage() {
   return (
     <Suspense>
@@ -95,9 +125,27 @@ function PermissionTable() {
     refresh()
   }, [refresh])
 
+  const handleCopy = useCallback(async () => {
+    try {
+      const code = generateScopeCode(data)
+      await navigator.clipboard.writeText(code)
+      toast.success("已复制权限代码到剪贴板")
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "复制失败")
+    }
+  }, [data])
+
   return (
-    <div className="bg-background rounded-lg">
+    <div className="flex flex-col gap-3">
-      <Table>
+      {process.env.NODE_ENV === "development" && (
+        <div>
+          <Button variant="outline" size="sm" onClick={handleCopy}>
+            <Copy className="mr-2 h-4 w-4" />
+            复制权限代码
+          </Button>
+        </div>
+      )}
+      <Table className="bg-background rounded-lg">
         <TableHeader>
           <TableRow className="h-10">
             <TableHead>编码</TableHead>

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>
 

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

@@ -9,6 +9,7 @@ import {
   getPageProductSku,
 } from "@/actions/product"
 import { DataTable, useDataTable } from "@/components/data-table"
+import { SkuCodeBadge } from "@/components/products/format"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -22,15 +23,19 @@ import {
 } from "@/components/ui/alert-dialog"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import type { ProductCode } from "@/lib/base"
 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 type { SelectedProduct } from "./type"
 import { UpdateProductSku } from "./update"
 
 export default function ProductPage() {
-  const [selected, setSelected] = useState<number | undefined>(undefined)
+  const [selected, setSelected] = useState<SelectedProduct | undefined>(
+    undefined,
+  )
 
   return (
     <div className="size-full flex gap-6 items-stretch">
@@ -41,8 +46,8 @@ export default function ProductPage() {
 }
 
 function Products(props: {
-  selected?: number
+  selected?: SelectedProduct
-  onSelect?: (id: number) => void
+  onSelect?: (id: SelectedProduct) => void
 }) {
   const [list, setList] = useState<Product[]>([])
 
@@ -54,7 +59,7 @@ function Products(props: {
   }, [])
 
   const selected = useMemo(() => {
-    return list.find(item => item.id === props.selected)
+    return list.find(item => item.id === props.selected?.id)
   }, [list, props.selected])
 
   useEffect(() => {
@@ -75,7 +80,7 @@ function Products(props: {
                 "size-full box-border p-2 rounded-md flex justify-between items-center select-none",
                 selected?.id === item.id && "bg-primary/20",
               )}
-              onClick={() => props.onSelect?.(item.id)}
+              onClick={() => props.onSelect?.({ id: item.id, code: item.code })}
             >
               <div>
                 <p>{item.name}</p>
@@ -90,10 +95,15 @@ function Products(props: {
   )
 }
 
-function ProductSkus(props: { selected?: number }) {
+function ProductSkus(props: {
+  selected?: {
+    id: number
+    code: ProductCode
+  }
+}) {
   const action = useCallback(
     (page: number, size: number) =>
-      getPageProductSku({ page, size, product_id: props.selected }),
+      getPageProductSku({ page, size, product_id: props.selected?.id }),
     [props.selected],
   )
 
@@ -102,12 +112,9 @@ function ProductSkus(props: { selected?: number }) {
   return (
     <div className="flex-auto overflow-hidden flex flex-col items-stretch gap-3">
       <div className="flex gap-3">
-        <CreateProductSku
+        <CreateProductSku product={props.selected} onSuccess={table.refresh} />
-          productId={props.selected ?? 0}
-          onSuccess={table.refresh}
-        />
         <BatchUpdateDiscount
-          productId={props.selected ?? 0}
+          productId={props.selected?.id ?? 0}
           onSuccess={table.refresh}
         />
       </div>
@@ -118,7 +125,18 @@ function ProductSkus(props: { selected?: number }) {
           }}
           {...table}
           columns={[
-            { header: "套餐编码", accessorKey: "code" },
+            {
+              header: "套餐编码",
+              cell: ({ row }) =>
+                row.original.product ? (
+                  <SkuCodeBadge
+                    productCode={row.original.product.code}
+                    skuCode={row.original.code}
+                  />
+                ) : (
+                  row.original.code
+                ),
+            },
             { header: "套餐名称", accessorKey: "name" },
             { header: "单价", accessorFn: row => Number(row.price).toFixed(2) },
             { header: "折扣", accessorFn: row => row.discount?.name ?? "—" },

src/app/(root)/product/type.ts

@@ -0,0 +1,6 @@
+import type { ProductCode } from "@/lib/base"
+
+export type SelectedProduct = {
+  id: number
+  code: ProductCode
+}

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

@@ -5,6 +5,7 @@ import { toast } from "sonner"
 import z from "zod"
 import { updateProductSku } 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 {
@@ -124,25 +126,6 @@ export function UpdateProductSku(props: {
 
         <form id="sku-update" onSubmit={form.handleSubmit(onSubmit)}>
           <FieldGroup>
-            <Controller
-              control={form.control}
-              name="code"
-              render={({ field, fieldState }) => (
-                <Field>
-                  <FieldLabel htmlFor="sku-update-code">套餐编码</FieldLabel>
-                  <Input
-                    id="sku-update-code"
-                    placeholder="请输入套餐编码"
-                    {...field}
-                    aria-invalid={fieldState.invalid}
-                  />
-                  {fieldState.invalid && (
-                    <FieldError errors={[fieldState.error]} />
-                  )}
-                </Field>
-              )}
-            />
-
             <Controller
               control={form.control}
               name="name"
@@ -208,6 +191,16 @@ export function UpdateProductSku(props: {
                 </Field>
               )}
             />
+
+            <FieldSeparator />
+
+            {props.sku.product && (
+              <ProductCodeField
+                control={form.control}
+                name="code"
+                code={props.sku.product.code}
+              />
+            )}
           </FieldGroup>
         </form>
 

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

@@ -281,7 +281,6 @@ function ResourceList({ resourceType }: ResourceListProps) {
 
   const columns = useMemo(
     () => [
-      { header: "ID", accessorKey: "id" },
       {
         header: "会员号",
         accessorFn: (row: Resources) => row.user?.phone || "-",

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

@@ -258,7 +258,6 @@ export default function TradePage() {
         <DataTable<Trade>
           {...table}
           columns={[
-            { header: "ID", accessorKey: "id" },
             {
               header: "会员号",
               accessorFn: row => row.user?.phone || "-",

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

@@ -150,7 +150,6 @@ export default function UserPage() {
           data={userList || []}
           status={loading ? "load" : "done"}
           columns={[
-            { header: "ID", accessorKey: "id" },
             { header: "账号", accessorKey: "username" },
             { header: "手机", accessorKey: "phone" },
             { header: "邮箱", accessorKey: "email" },

src/components/data-table/component.tsx

@@ -29,6 +29,7 @@ export type DataTableProps<T> = {
     headRow?: string
     dataRow?: string
   }
+  serial?: boolean
 }
 
 export function DataTable<T extends Record<string, unknown>>(
@@ -36,7 +37,14 @@ export function DataTable<T extends Record<string, unknown>>(
 ) {
   const table = useReactTable({
     data: props.data,
-    columns: props.columns,
+    columns: [
+      {
+        id: "serial",
+        header: "#",
+        cell: ({ row }) => row.index + 1,
+      },
+      ...props.columns,
+    ],
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
     rowCount: props.pagination?.total,

src/components/products/format.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react"
+import { Badge } from "@/components/ui/badge"
+import { ProductCode } from "@/lib/base"
+
+interface SkuCodeBadgeProps {
+  productCode: ProductCode
+  skuCode: string
+}
+
+export function SkuCodeBadge({
+  productCode,
+  skuCode,
+}: SkuCodeBadgeProps): ReactNode {
+  switch (productCode) {
+    case ProductCode.Short:
+    case ProductCode.Long:
+      return <ParsedSkuCodeBadge skuCode={skuCode} />
+    default:
+      return <Badge variant="outline">{skuCode}</Badge>
+  }
+}
+
+function ParsedSkuCodeBadge({ skuCode }: { skuCode: string }): ReactNode {
+  const params = new URLSearchParams(skuCode)
+  const modeStr = params.get("mode")
+
+  let mode: string | undefined
+  let modeClass: string | undefined
+  switch (modeStr) {
+    case "time":
+      mode = "包时"
+      modeClass = "bg-green-50"
+      break
+    case "quota":
+      mode = "包量"
+      modeClass = "bg-blue-50"
+      break
+  }
+
+  const live = params.get("live")
+  const expire = params.get("expire")
+
+  if (!mode || !live || !expire) {
+    return (
+      <Badge variant="secondary" className="bg-red-50">
+        {skuCode}（解析失败）
+      </Badge>
+    )
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1">
+      <Badge variant="secondary" className={modeClass}>
+        类型：{mode}
+      </Badge>
+      <Badge variant="secondary">有效时间：{live} 分钟</Badge>
+      {expire !== "0" && (
+        <Badge variant="secondary">过期时间：{expire} 天</Badge>
+      )}
+    </div>
+  )
+}

src/components/products/index.tsx

@@ -0,0 +1,200 @@
+import type { ChangeEvent } from "react"
+import {
+  type Control,
+  type Path,
+  type UseControllerReturn,
+  useController,
+} from "react-hook-form"
+import { ProductCode } from "@/lib/base"
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+} from "../ui/field"
+import { Input } from "../ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select"
+
+export function ProductCodeField<
+  T extends {
+    code: string
+  },
+>(props: { control: Control<T>; name: Path<T>; code: ProductCode }) {
+  const rt = useController(props)
+
+  switch (props.code) {
+    case ProductCode.Short:
+      return <ProductShortCode {...rt} />
+    case ProductCode.Long:
+      return <ProductLongCode {...rt} />
+  }
+
+  return null
+}
+
+function ProductShortCode<T extends { code: string }>(
+  props: UseControllerReturn<T>,
+) {
+  const { field, fieldState } = props
+
+  const params = new URLSearchParams(field.value)
+  const setParams = (data: {
+    mode?: string
+    live?: string
+    expire?: string
+  }) => {
+    if (data.mode) params.set("mode", data.mode)
+    if (data.live) params.set("live", data.live)
+    if (data.expire) params.set("expire", data.expire)
+    field.onChange(params.toString())
+  }
+
+  const onModeChange = (value: string) => {
+    setParams({ mode: value })
+  }
+  const onLiveChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value || "0"
+    if (value.length > 1 && value[0] === "0") {
+      value = value.substring(1, value.length)
+    }
+    if (!/^([0-9]+)$/.test(value)) return
+    setParams({ live: value })
+  }
+  const onExpireChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value || "0"
+    if (value.length > 1 && value[0] === "0") {
+      value = value.substring(1, value.length)
+    }
+    if (!/^([0-9]+)$/.test(value)) return
+    setParams({ expire: value })
+  }
+
+  return (
+    <FieldLegend>
+      <FieldLegend>短效套餐详情</FieldLegend>
+      <FieldGroup>
+        <Field>
+          <FieldLabel>套餐类型</FieldLabel>
+          <Select
+            defaultValue={params.get("mode") ?? "quota"}
+            onValueChange={onModeChange}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="请选择套餐类型" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="time">包时</SelectItem>
+              <SelectItem value="quota">包量</SelectItem>
+            </SelectContent>
+          </Select>
+        </Field>
+        <Field>
+          <FieldLabel>有效期（分钟）</FieldLabel>
+          <Input
+            type="number"
+            value={params.get("live") ?? "0"}
+            onChange={onLiveChange}
+          />
+        </Field>
+        {params.get("mode") === "time" && (
+          <Field>
+            <FieldLabel>过期时间（天）</FieldLabel>
+            <Input
+              type="number"
+              value={params.get("expire") ?? "0"}
+              onChange={onExpireChange}
+            />
+          </Field>
+        )}
+        {fieldState.error && <FieldError errors={[fieldState.error]} />}
+      </FieldGroup>
+    </FieldLegend>
+  )
+}
+
+function ProductLongCode<T extends { code: string }>(
+  props: UseControllerReturn<T>,
+) {
+  const { field, fieldState } = props
+
+  const params = new URLSearchParams(field.value)
+  const setParams = (data: {
+    mode?: string
+    live?: string
+    expire?: string
+  }) => {
+    if (data.mode) params.set("mode", data.mode)
+    if (data.live) params.set("live", data.live)
+    if (data.expire) params.set("expire", data.expire)
+    field.onChange(params.toString())
+  }
+
+  const onModeChange = (value: string) => {
+    setParams({ mode: value })
+  }
+  const onLiveChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value || "0"
+    if (value.length > 1 && value[0] === "0") {
+      value = value.substring(1, value.length)
+    }
+    if (!/^([0-9]+)$/.test(value)) return
+    setParams({ live: value })
+  }
+  const onExpireChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value || "0"
+    if (value.length > 1 && value[0] === "0") {
+      value = value.substring(1, value.length)
+    }
+    if (!/^([0-9]+)$/.test(value)) return
+    setParams({ expire: value })
+  }
+
+  return (
+    <FieldLegend>
+      <FieldLegend>长效套餐详情</FieldLegend>
+      <FieldGroup>
+        <Field>
+          <FieldLabel>套餐类型</FieldLabel>
+          <Select
+            defaultValue={params.get("mode") ?? "quota"}
+            onValueChange={onModeChange}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="请选择套餐类型" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="time">包时</SelectItem>
+              <SelectItem value="quota">包量</SelectItem>
+            </SelectContent>
+          </Select>
+        </Field>
+        <Field>
+          <FieldLabel>有效期（分钟）</FieldLabel>
+          <Input
+            type="number"
+            value={params.get("live") ?? "0"}
+            onChange={onLiveChange}
+          />
+        </Field>
+        {params.get("mode") === "time" && (
+          <Field>
+            <FieldLabel>过期时间（天）</FieldLabel>
+            <Input
+              type="number"
+              value={params.get("expire") ?? "0"}
+              onChange={onExpireChange}
+            />
+          </Field>
+        )}
+        {fieldState.error && <FieldError errors={[fieldState.error]} />}
+      </FieldGroup>
+    </FieldLegend>
+  )
+}

src/models/product.ts

@@ -1,8 +1,9 @@
+import type { ProductCode } from "@/lib/base"
 import type { Model } from "./base/model"
 import type { ProductSku } from "./product_sku"
 
 export type Product = Model & {
-  code: string
+  code: ProductCode
   name: string
   description?: string
   sort: number