实现权限管理页面与功能

2026-03-18 17:13:31 +08:00
parent efe1568ab5
commit c4e1da8912
25 changed files with 2245 additions and 18 deletions
--- a/src/app/(root)/roles/create.tsx
+++ b/src/app/(root)/roles/create.tsx
@@ -0,0 +1,123 @@
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useState } from "react"
+import { Controller, useForm } from "react-hook-form"
+import { toast } from "sonner"
+import z from "zod"
+import { createRole } from "@/actions/role"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+const schema = z.object({
+  name: z.string().min(1, "请输入角色名称"),
+  description: z.string().optional(),
+})
+
+export function CreateRole(props: { onSuccess?: () => void }) {
+  const form = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      name: "",
+      description: "",
+    },
+  })
+
+  const onSubmit = async (data: z.infer<typeof schema>) => {
+    try {
+      const resp = await createRole(data)
+      if (resp.success) {
+        form.reset()
+        toast.success("角色创建成功")
+        props.onSuccess?.()
+        setOpen(false)
+      } else {
+        toast.error(resp.message)
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : error
+      toast.error(`接口请求错误: ${message}`)
+    }
+  }
+
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>创建角色</Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>创建角色</DialogTitle>
+        </DialogHeader>
+
+        <form id="role-create" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Controller
+              control={form.control}
+              name="name"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel htmlFor="role-create-name">名称</FieldLabel>
+                  <Input
+                    id="role-create-name"
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+
+            <Controller
+              control={form.control}
+              name="description"
+              render={({ field, fieldState }) => (
+                <Field>
+                  <FieldLabel htmlFor="role-create-description">
+                    描述
+                  </FieldLabel>
+                  <Textarea
+                    id="role-create-description"
+                    {...field}
+                    aria-invalid={fieldState.invalid}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </FieldGroup>
+        </form>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="ghost">取消</Button>
+          </DialogClose>
+          <Button type="submit" form="role-create">
+            创建
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}