update web to dashboard

2026-04-15 17:20:57 +08:00
parent 3d98cf1e27
commit c07e588030
206 changed files with 0 additions and 0 deletions
@@ -0,0 +1,149 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Controller, Resolver, useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { toast } from "sonner"
+import { z } from "zod/v4"
+
+import { OptionCombobox } from "@/components/option-combobox"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Field, FieldContent, FieldError, FieldLabel } from "@/components/ui/field"
+import { fetchAgentProfilesAll, type AdminAgentProfile } from "@/lib/api/admin"
+import { addTicketCollaborator } from "@/lib/api/ticket"
+
+const schema = z.object({
+  userId: z.string().trim().min(1, "请选择协作人"),
+})
+
+type FormValues = z.infer<typeof schema>
+
+const resolver = zodResolver(schema as never) as Resolver<
+  z.input<typeof schema>,
+  undefined,
+  z.output<typeof schema>
+>
+
+type TicketCollaboratorDialogProps = {
+  open: boolean
+  ticketId: number | null
+  onOpenChange: (open: boolean) => void
+  onSuccess?: () => Promise<void> | void
+}
+
+export function TicketCollaboratorDialog({
+  open,
+  ticketId,
+  onOpenChange,
+  onSuccess,
+}: TicketCollaboratorDialogProps) {
+  const [loadingAgents, setLoadingAgents] = useState(false)
+  const [agents, setAgents] = useState<AdminAgentProfile[]>([])
+  const userOptions = agents.map((agent) => ({
+    value: String(agent.userId),
+    label: agent.displayName || agent.nickname || agent.username || `客服 #${agent.userId}`,
+  }))
+
+  const form = useForm<
+    z.input<typeof schema>,
+    undefined,
+    z.output<typeof schema>
+  >({
+    resolver,
+    defaultValues: { userId: "" },
+  })
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = form
+
+  useEffect(() => {
+    if (open) {
+      reset({ userId: "" })
+    }
+  }, [open, reset])
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+    setLoadingAgents(true)
+    fetchAgentProfilesAll()
+      .then((data) => {
+        setAgents(Array.isArray(data) ? data : [])
+      })
+      .catch((error) => {
+        toast.error(error instanceof Error ? error.message : "加载客服列表失败")
+      })
+      .finally(() => {
+        setLoadingAgents(false)
+      })
+  }, [open])
+
+  async function onFormSubmit(values: FormValues) {
+    if (!ticketId) {
+      toast.error("工单不存在")
+      return
+    }
+    try {
+      await addTicketCollaborator({ ticketId, userId: Number(values.userId) })
+      toast.success("协作人已添加")
+      onOpenChange(false)
+      await onSuccess?.()
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "添加协作人失败")
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg gap-0 p-0 sm:max-w-lg">
+        <DialogHeader className="px-6 pt-6">
+          <DialogTitle>新增协作人</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <div className="space-y-4 p-6">
+            <Field data-invalid={!!errors.userId}>
+              <FieldLabel>协作人</FieldLabel>
+              <FieldContent>
+                <Controller
+                  control={control}
+                  name="userId"
+                  render={({ field }) => (
+                    <OptionCombobox
+                      value={field.value}
+                      options={userOptions}
+                      placeholder={loadingAgents ? "加载中..." : "选择协作人"}
+                      searchPlaceholder="搜索客服"
+                      emptyText="暂无可选客服"
+                      disabled={isSubmitting || loadingAgents}
+                      onChange={field.onChange}
+                    />
+                  )}
+                />
+                <FieldError errors={[errors.userId]} />
+              </FieldContent>
+            </Field>
+          </div>
+          <DialogFooter className="mx-0 mb-0 px-6 py-4">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              取消
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "提交中..." : "确认添加"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}