create-nextdevtpl 2.6.0

package/template/src/features/support/actions/user-ticket.ts

@@ -0,0 +1,153 @@
+"use server";
+
+import { and, desc, eq } from "drizzle-orm";
+import { revalidatePath } from "next/cache";
+
+import { db } from "@/db";
+import { user } from "@/db/schema/auth";
+import { ticket, ticketMessage } from "@/db/schema/support";
+import {
+  addTicketMessageSchema,
+  createTicketSchema,
+} from "@/features/support/schemas";
+import { protectedAction } from "@/lib/safe-action";
+
+const withTicketAction = (name: string) =>
+  protectedAction.metadata({ action: `support.${name}` });
+
+/**
+ * 创建工单
+ */
+export const createTicketAction = withTicketAction("createTicket")
+  .schema(createTicketSchema)
+  .action(async ({ parsedInput: data, ctx }) => {
+    const ticketId = crypto.randomUUID();
+    const messageId = crypto.randomUUID();
+
+    await db.insert(ticket).values({
+      id: ticketId,
+      userId: ctx.userId,
+      subject: data.subject,
+      category: data.category,
+      priority: data.priority,
+      status: "open",
+    });
+
+    await db.insert(ticketMessage).values({
+      id: messageId,
+      ticketId: ticketId,
+      userId: ctx.userId,
+      content: data.message,
+      isAdminResponse: false,
+    });
+
+    revalidatePath("/dashboard/support");
+
+    return {
+      message: "工单创建成功",
+      ticketId,
+    };
+  });
+
+/**
+ * 获取用户的工单列表
+ */
+export const getMyTicketsAction = withTicketAction("getMyTickets").action(
+  async ({ ctx }) => {
+    const tickets = await db
+      .select({
+        id: ticket.id,
+        subject: ticket.subject,
+        category: ticket.category,
+        priority: ticket.priority,
+        status: ticket.status,
+        createdAt: ticket.createdAt,
+        updatedAt: ticket.updatedAt,
+      })
+      .from(ticket)
+      .where(eq(ticket.userId, ctx.userId))
+      .orderBy(desc(ticket.createdAt));
+
+    return { tickets };
+  }
+);
+
+/**
+ * 获取工单详情 (用户端)
+ */
+export const getTicketDetailAction = withTicketAction("getTicketDetail")
+  .schema(addTicketMessageSchema.pick({ ticketId: true }))
+  .action(async ({ parsedInput: { ticketId }, ctx }) => {
+    const ticketResult = await db
+      .select()
+      .from(ticket)
+      .where(and(eq(ticket.id, ticketId), eq(ticket.userId, ctx.userId)))
+      .limit(1);
+
+    if (ticketResult.length === 0) {
+      throw new Error("工单不存在或无权访问");
+    }
+
+    const messages = await db
+      .select({
+        id: ticketMessage.id,
+        content: ticketMessage.content,
+        isAdminResponse: ticketMessage.isAdminResponse,
+        createdAt: ticketMessage.createdAt,
+        user: {
+          id: user.id,
+          name: user.name,
+          image: user.image,
+        },
+      })
+      .from(ticketMessage)
+      .leftJoin(user, eq(ticketMessage.userId, user.id))
+      .where(eq(ticketMessage.ticketId, ticketId))
+      .orderBy(ticketMessage.createdAt);
+
+    return {
+      ticket: ticketResult[0],
+      messages,
+    };
+  });
+
+/**
+ * 添加工单消息 (用户端)
+ */
+export const addTicketMessageAction = withTicketAction("addTicketMessage")
+  .schema(addTicketMessageSchema)
+  .action(async ({ parsedInput: data, ctx }) => {
+    const ticketResult = await db
+      .select()
+      .from(ticket)
+      .where(and(eq(ticket.id, data.ticketId), eq(ticket.userId, ctx.userId)))
+      .limit(1);
+
+    const ticketData = ticketResult[0];
+    if (!ticketData) {
+      throw new Error("工单不存在或无权访问");
+    }
+
+    if (ticketData.status === "closed") {
+      throw new Error("工单已关闭，无法添加新消息");
+    }
+
+    await db.insert(ticketMessage).values({
+      id: crypto.randomUUID(),
+      ticketId: data.ticketId,
+      userId: ctx.userId,
+      content: data.content,
+      isAdminResponse: false,
+    });
+
+    await db
+      .update(ticket)
+      .set({ updatedAt: new Date() })
+      .where(eq(ticket.id, data.ticketId));
+
+    revalidatePath(`/dashboard/support/${data.ticketId}`);
+
+    return {
+      message: "消息发送成功",
+    };
+  });

package/template/src/features/support/components/admin-ticket-reply-form.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Loader2, Send } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
+import { adminReplyTicketAction } from "@/features/support/actions";
+
+interface AdminTicketReplyFormProps {
+  /** 工单 ID */
+  ticketId: string;
+  /** 工单是否已关闭 */
+  isClosed: boolean;
+}
+
+/**
+ * 管理员工单回复表单组件
+ *
+ * 管理员在工单中添加回复
+ */
+export function AdminTicketReplyForm({
+  ticketId,
+  isClosed,
+}: AdminTicketReplyFormProps) {
+  const router = useRouter();
+  const t = useTranslations("Support");
+  const [content, setContent] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  /**
+   * 处理消息提交
+   */
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!content.trim()) {
+      toast.error(t("enterReplyContent"));
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const result = await adminReplyTicketAction({
+        ticketId,
+        content: content.trim(),
+      });
+
+      if (result?.data) {
+        toast.success(t("replySuccess"));
+        setContent("");
+        router.refresh();
+      } else if (result?.serverError) {
+        toast.error(result.serverError);
+      }
+    } catch (error) {
+      toast.error(t("replyFailed"));
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isClosed) {
+    return (
+      <Card>
+        <CardContent className="py-6 text-center text-muted-foreground">
+          {t("ticketClosedNotice")}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("replyUser")}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Textarea
+            placeholder={t("inputReplyPlaceholder")}
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            rows={4}
+            maxLength={5000}
+          />
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">
+              {content.length}/5000 {t("characters")}
+            </p>
+            <Button type="submit" disabled={isLoading || !content.trim()}>
+              {isLoading ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Send className="mr-2 h-4 w-4" />
+              )}
+              {t("sendReply")}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/template/src/features/support/components/admin-ticket-status-select.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { updateTicketStatusAction } from "@/features/support/actions";
+import { ticketStatuses } from "@/features/support/schemas";
+
+interface AdminTicketStatusSelectProps {
+  /** 工单 ID */
+  ticketId: string;
+  /** 当前状态 */
+  currentStatus: "open" | "in_progress" | "resolved" | "closed";
+}
+
+/**
+ * 管理员工单状态选择组件
+ *
+ * 管理员可以通过此组件修改工单状态
+ */
+export function AdminTicketStatusSelect({
+  ticketId,
+  currentStatus,
+}: AdminTicketStatusSelectProps) {
+  const router = useRouter();
+  const t = useTranslations("Support");
+  const [isLoading, setIsLoading] = useState(false);
+  const [status, setStatus] = useState(currentStatus);
+
+  /**
+   * 状态颜色映射
+   */
+  const colorMap: Record<string, string> = {
+    open: "bg-primary/15 text-primary",
+    in_progress: "bg-warning/15 text-warning",
+    resolved: "bg-success/15 text-success",
+    closed: "bg-muted text-muted-foreground",
+  };
+
+  /**
+   * 获取状态标签
+   */
+  const getStatusLabel = (s: string) => {
+    const statusConfig = ticketStatuses.find((item) => item.value === s);
+    return statusConfig?.label || s;
+  };
+
+  /**
+   * 处理状态变更
+   */
+  const handleStatusChange = async (newStatus: string) => {
+    if (newStatus === status) return;
+
+    setIsLoading(true);
+
+    try {
+      const result = await updateTicketStatusAction({
+        ticketId,
+        status: newStatus as "open" | "in_progress" | "resolved" | "closed",
+      });
+
+      if (result?.data) {
+        toast.success(result.data.message);
+        setStatus(newStatus as "open" | "in_progress" | "resolved" | "closed");
+        router.refresh();
+      } else if (result?.serverError) {
+        toast.error(result.serverError);
+      }
+    } catch (error) {
+      toast.error(t("statusUpdateFailed"));
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        <span className="text-sm text-muted-foreground"> {t("updating")}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <p className="text-sm text-muted-foreground"> {t("selectNewStatus")}</p>
+      <Select value={status} onValueChange={handleStatusChange}>
+        <SelectTrigger className="w-full">
+          <SelectValue>
+            <Badge className={colorMap[status]} variant="secondary">
+              {getStatusLabel(status)}
+            </Badge>
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {ticketStatuses.map((s) => (
+            <SelectItem key={s.value} value={s.value}>
+              <Badge className={colorMap[s.value]} variant="secondary">
+                {s.label}
+              </Badge>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/template/src/features/support/components/index.ts

@@ -0,0 +1,6 @@
+// Support 组件模块导出
+
+export { AdminTicketReplyForm } from "./admin-ticket-reply-form";
+export { AdminTicketStatusSelect } from "./admin-ticket-status-select";
+export { TicketMessageForm } from "./ticket-message-form";
+export { UserRoleSelect } from "./user-role-select";

package/template/src/features/support/components/ticket-message-form.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { Loader2, Send } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Textarea } from "@/components/ui/textarea";
+import { addTicketMessageAction } from "@/features/support/actions";
+
+interface TicketMessageFormProps {
+  /** 工单 ID */
+  ticketId: string;
+  /** 是否为管理员模式 */
+  isAdmin?: boolean;
+}
+
+/**
+ * 工单消息回复表单组件
+ *
+ * 用于用户或管理员在工单中添加新消息
+ */
+export function TicketMessageForm({
+  ticketId,
+  isAdmin = false,
+}: TicketMessageFormProps) {
+  const router = useRouter();
+  const t = useTranslations("Support");
+  const [content, setContent] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  /**
+   * 处理消息提交
+   */
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!content.trim()) {
+      toast.error(t("enterMessage"));
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const result = await addTicketMessageAction({
+        ticketId,
+        content: content.trim(),
+      });
+
+      if (result?.data) {
+        toast.success(t("messageSent"));
+        setContent("");
+        router.refresh();
+      } else if (result?.serverError) {
+        toast.error(result.serverError);
+      }
+    } catch (error) {
+      toast.error(t("sendFailed"));
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{isAdmin ? t("replyUser") : t("addReply")}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Textarea
+            placeholder={t("inputPlaceholder")}
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            rows={4}
+            maxLength={5000}
+          />
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">
+              {content.length}/5000 {t("characters")}
+            </p>
+            <Button type="submit" disabled={isLoading || !content.trim()}>
+              {isLoading ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Send className="mr-2 h-4 w-4" />
+              )}
+              {t("send")}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/template/src/features/support/components/user-role-select.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { updateUserRoleAction } from "@/features/support/actions";
+
+interface UserRoleSelectProps {
+  /** 用户 ID */
+  userId: string;
+  /** 当前角色 */
+  currentRole: "user" | "admin";
+}
+
+/**
+ * 用户角色选择组件
+ *
+ * 管理员可以通过此组件修改用户角色
+ */
+export function UserRoleSelect({ userId, currentRole }: UserRoleSelectProps) {
+  const router = useRouter();
+  const t = useTranslations("Support");
+  const [isLoading, setIsLoading] = useState(false);
+  const [role, setRole] = useState(currentRole);
+
+  /**
+   * 处理角色变更
+   */
+  const handleRoleChange = async (newRole: string) => {
+    if (newRole === role) return;
+
+    setIsLoading(true);
+
+    try {
+      const result = await updateUserRoleAction({
+        userId,
+        role: newRole as "user" | "admin",
+      });
+
+      if (result?.data) {
+        toast.success(result.data.message);
+        setRole(newRole as "user" | "admin");
+        router.refresh();
+      } else if (result?.serverError) {
+        toast.error(result.serverError);
+      }
+    } catch (error) {
+      toast.error(t("roleUpdateFailed"));
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // 显示当前角色的徽章样式
+  const getRoleBadge = (r: string) => {
+    if (r === "admin") {
+      return (
+        <Badge className="bg-destructive/15 text-destructive">管理员</Badge>
+      );
+    }
+    return (
+      <Badge variant="secondary" className="bg-muted text-muted-foreground">
+        普通用户
+      </Badge>
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        <span className="text-sm text-muted-foreground"> {t("updating")}</span>
+      </div>
+    );
+  }
+
+  return (
+    <Select value={role} onValueChange={handleRoleChange}>
+      <SelectTrigger className="w-[120px]">
+        <SelectValue>{getRoleBadge(role)}</SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="user">
+          <Badge variant="secondary" className="bg-muted text-muted-foreground">
+            {t("user")}
+          </Badge>
+        </SelectItem>
+        <SelectItem value="admin">
+          <Badge className="bg-destructive/15 text-destructive">
+            {t("admin")}
+          </Badge>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}

package/template/src/features/support/index.ts

@@ -0,0 +1,5 @@
+// Support Feature
+export * from "./actions";
+export * from "./components";
+export * from "./schemas";
+export { supportModule } from "./manifest";

package/template/src/features/support/manifest.ts

@@ -0,0 +1,53 @@
+import { defineModule } from "@/core/modules";
+
+export const supportModule = defineModule({
+  id: "support",
+  name: "Support",
+  description: "用户工单、管理员回复和状态管理",
+  kind: "optional",
+  dependencies: ["credits"],
+  routes: [
+    {
+      path: "/dashboard/support",
+      source: "src/app/[locale]/(dashboard)/dashboard/support/page.tsx",
+    },
+    {
+      path: "/dashboard/support/new",
+      source: "src/app/[locale]/(dashboard)/dashboard/support/new/page.tsx",
+    },
+    {
+      path: "/dashboard/support/[id]",
+      source: "src/app/[locale]/(dashboard)/dashboard/support/[id]/page.tsx",
+    },
+    {
+      path: "/admin/tickets",
+      source: "src/app/[locale]/(admin)/admin/tickets/page.tsx",
+    },
+    {
+      path: "/admin/tickets/[id]",
+      source: "src/app/[locale]/(admin)/admin/tickets/[id]/page.tsx",
+    },
+  ],
+  navigation: [
+    {
+      area: "dashboard",
+      group: "dashboard",
+      groupTranslationKey: "nav.dashboard",
+      translationKey: "nav.support",
+      href: "/dashboard/support",
+      icon: "headset",
+      order: 40,
+    },
+    {
+      area: "admin",
+      group: "control-panel",
+      groupTranslationKey: "nav.controlPanel",
+      translationKey: "nav.ticketManagement",
+      href: "/admin/tickets",
+      icon: "ticket",
+      order: 30,
+    },
+  ],
+  translations: ["Support"],
+  schema: ["support"],
+});

package/template/src/features/support/schemas/index.ts

@@ -0,0 +1,15 @@
+// 工单 Schema 模块导出
+export {
+  type AddTicketMessageInput,
+  addTicketMessageSchema,
+  // 类型
+  type CreateTicketInput,
+  // Schema
+  createTicketSchema,
+  // 选项配置
+  ticketCategories,
+  ticketPriorities,
+  ticketStatuses,
+  type UpdateTicketStatusInput,
+  updateTicketStatusSchema,
+} from "./ticket";