create-nextdevtpl 2.6.0

package/template/src/app/[locale]/(dashboard)/dashboard/support/[id]/page.tsx

@@ -0,0 +1,220 @@
+import { and, eq } from "drizzle-orm";
+import { ArrowLeft } from "lucide-react";
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { db } from "@/db";
+import { user } from "@/db/schema/auth";
+import { ticket, ticketMessage } from "@/db/schema/support";
+import { TicketMessageForm } from "@/features/support";
+import {
+  ticketCategories,
+  ticketPriorities,
+  ticketStatuses,
+} from "@/features/support";
+import { getServerSession } from "@/lib/auth/server";
+
+interface TicketDetailPageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+/**
+ * 工单详情页面
+ *
+ * 展示工单信息和消息历史，允许用户回复
+ */
+export default async function TicketDetailPage({
+  params,
+}: TicketDetailPageProps) {
+  const { id } = await params;
+
+  // 获取当前用户会话
+  const session = await getServerSession();
+  if (!session?.user) {
+    redirect("/sign-in");
+  }
+
+  // 获取工单信息
+  const ticketResult = await db
+    .select()
+    .from(ticket)
+    .where(and(eq(ticket.id, id), eq(ticket.userId, session.user.id)))
+    .limit(1);
+
+  const ticketData = ticketResult[0];
+  if (!ticketData) {
+    notFound();
+  }
+
+  // 获取消息列表
+  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, id))
+    .orderBy(ticketMessage.createdAt);
+
+  /**
+   * 获取状态徽章样式
+   */
+  const getStatusBadge = (status: string) => {
+    const statusConfig = ticketStatuses.find((s) => s.value === status);
+    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",
+    };
+    return (
+      <Badge
+        className={colorMap[status] || colorMap.closed}
+        variant="secondary"
+      >
+        {statusConfig?.label || status}
+      </Badge>
+    );
+  };
+
+  /**
+   * 获取优先级徽章样式
+   */
+  const getPriorityBadge = (priority: string) => {
+    const priorityConfig = ticketPriorities.find((p) => p.value === priority);
+    const colorMap: Record<string, string> = {
+      low: "bg-success/15 text-success",
+      medium: "bg-warning/15 text-warning",
+      high: "bg-destructive/15 text-destructive",
+    };
+    return (
+      <Badge
+        className={colorMap[priority] || colorMap.medium}
+        variant="secondary"
+      >
+        {priorityConfig?.label || priority}
+      </Badge>
+    );
+  };
+
+  /**
+   * 获取类别标签
+   */
+  const getCategoryLabel = (category: string) => {
+    const categoryConfig = ticketCategories.find((c) => c.value === category);
+    return categoryConfig?.label || category;
+  };
+
+  /**
+   * 获取用户名首字母
+   */
+  const getInitials = (name: string) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  const isClosed = ticketData.status === "closed";
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center gap-4">
+        <Link href="/dashboard/support">
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        </Link>
+        <div className="flex-1">
+          <h2 className="text-2xl font-bold tracking-tight">
+            {ticketData.subject}
+          </h2>
+          <p className="text-muted-foreground">
+            {getCategoryLabel(ticketData.category)} · 创建于{" "}
+            {new Date(ticketData.createdAt).toLocaleDateString("zh-CN")}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {getPriorityBadge(ticketData.priority)}
+          {getStatusBadge(ticketData.status)}
+        </div>
+      </div>
+
+      {/* 消息列表 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>对话记录</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {messages.map((msg) => (
+            <div
+              key={msg.id}
+              className={`flex gap-4 p-4 rounded-lg ${
+                msg.isAdminResponse ? "bg-primary/10" : "bg-muted/50"
+              }`}
+            >
+              <Avatar className="h-10 w-10">
+                <AvatarImage
+                  src={msg.user?.image || undefined}
+                  alt={msg.user?.name || "用户"}
+                />
+                <AvatarFallback
+                  className={
+                    msg.isAdminResponse
+                      ? "bg-primary text-primary-foreground"
+                      : "bg-primary text-primary-foreground"
+                  }
+                >
+                  {msg.user?.name ? getInitials(msg.user.name) : "U"}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 space-y-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">
+                    {msg.user?.name || "用户"}
+                  </span>
+                  {msg.isAdminResponse && (
+                    <Badge variant="secondary" className="text-xs">
+                      客服
+                    </Badge>
+                  )}
+                  <span className="text-xs text-muted-foreground">
+                    {new Date(msg.createdAt).toLocaleString("zh-CN")}
+                  </span>
+                </div>
+                <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
+              </div>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      {/* 回复表单 */}
+      {isClosed ? (
+        <Card>
+          <CardContent className="py-6 text-center text-muted-foreground">
+            此工单已关闭，无法添加新消息
+          </CardContent>
+        </Card>
+      ) : (
+        <TicketMessageForm ticketId={id} />
+      )}
+    </div>
+  );
+}

package/template/src/app/[locale]/(dashboard)/dashboard/support/new/page.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { ArrowLeft, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  createTicketAction,
+  ticketCategories,
+  ticketPriorities,
+} from "@/features/support";
+
+/**
+ * 新建工单页面
+ *
+ * 用户填写表单创建新的支持工单
+ */
+export default function NewTicketPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+
+  // 表单状态
+  const [subject, setSubject] = useState("");
+  const [category, setCategory] = useState<string>("other");
+  const [priority, setPriority] = useState<string>("medium");
+  const [message, setMessage] = useState("");
+
+  /**
+   * 处理表单提交
+   */
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      const result = await createTicketAction({
+        subject,
+        category: category as
+          | "billing"
+          | "technical"
+          | "bug"
+          | "feature"
+          | "other",
+        priority: priority as "low" | "medium" | "high",
+        message,
+      });
+
+      if (result?.data) {
+        toast.success("工单创建成功");
+        router.push(`/dashboard/support/${result.data.ticketId}`);
+      } else if (result?.serverError) {
+        toast.error(result.serverError);
+      }
+    } catch (error) {
+      toast.error("创建工单失败，请重试");
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center gap-4">
+        <Link href="/dashboard/support">
+          <Button variant="ghost" size="icon">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+        </Link>
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">新建工单</h2>
+          <p className="text-muted-foreground">
+            描述您遇到的问题，我们会尽快回复
+          </p>
+        </div>
+      </div>
+
+      {/* 工单表单 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>工单信息</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* 主题 */}
+            <div className="space-y-2">
+              <Label htmlFor="subject">主题 *</Label>
+              <Input
+                id="subject"
+                placeholder="简要描述您的问题"
+                value={subject}
+                onChange={(e) => setSubject(e.target.value)}
+                required
+                minLength={5}
+                maxLength={200}
+              />
+            </div>
+
+            {/* 类别和优先级 */}
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="category">类别</Label>
+                <Select value={category} onValueChange={setCategory}>
+                  <SelectTrigger id="category">
+                    <SelectValue placeholder="选择类别" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {ticketCategories.map((cat) => (
+                      <SelectItem key={cat.value} value={cat.value}>
+                        {cat.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="priority">优先级</Label>
+                <Select value={priority} onValueChange={setPriority}>
+                  <SelectTrigger id="priority">
+                    <SelectValue placeholder="选择优先级" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {ticketPriorities.map((pri) => (
+                      <SelectItem key={pri.value} value={pri.value}>
+                        {pri.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            {/* 详细描述 */}
+            <div className="space-y-2">
+              <Label htmlFor="message">详细描述 *</Label>
+              <Textarea
+                id="message"
+                placeholder="请详细描述您遇到的问题，包括：&#10;- 问题发生的时间&#10;- 具体的错误信息&#10;- 您已尝试的解决方法"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                required
+                minLength={10}
+                maxLength={5000}
+                rows={8}
+              />
+              <p className="text-xs text-muted-foreground">
+                {message.length}/5000 字符
+              </p>
+            </div>
+
+            {/* 提交按钮 */}
+            <div className="flex justify-end gap-4">
+              <Link href="/dashboard/support">
+                <Button type="button" variant="outline">
+                  取消
+                </Button>
+              </Link>
+              <Button type="submit" disabled={isLoading}>
+                {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                提交工单
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/template/src/app/[locale]/(dashboard)/dashboard/support/page.tsx

@@ -0,0 +1,145 @@
+import { desc, eq } from "drizzle-orm";
+import { Plus, Ticket } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { db } from "@/db";
+import { ticket } from "@/db/schema/support";
+import {
+  ticketCategories,
+  ticketPriorities,
+  ticketStatuses,
+} from "@/features/support";
+import { getServerSession } from "@/lib/auth/server";
+
+/**
+ * 用户工单列表页面
+ *
+ * 展示用户提交的所有支持工单
+ */
+export default async function SupportPage() {
+  // 获取当前用户会话
+  const session = await getServerSession();
+  if (!session?.user) {
+    redirect("/sign-in");
+  }
+
+  // 获取用户的工单列表
+  const tickets = await db
+    .select()
+    .from(ticket)
+    .where(eq(ticket.userId, session.user.id))
+    .orderBy(desc(ticket.createdAt));
+
+  /**
+   * 获取状态徽章样式
+   */
+  const getStatusBadge = (status: string) => {
+    const statusConfig = ticketStatuses.find((s) => s.value === status);
+    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",
+    };
+    return (
+      <Badge
+        className={colorMap[status] || colorMap.closed}
+        variant="secondary"
+      >
+        {statusConfig?.label || status}
+      </Badge>
+    );
+  };
+
+  /**
+   * 获取优先级徽章样式
+   */
+  const getPriorityBadge = (priority: string) => {
+    const priorityConfig = ticketPriorities.find((p) => p.value === priority);
+    const colorMap: Record<string, string> = {
+      low: "bg-success/15 text-success",
+      medium: "bg-warning/15 text-warning",
+      high: "bg-destructive/15 text-destructive",
+    };
+    return (
+      <Badge
+        className={colorMap[priority] || colorMap.medium}
+        variant="secondary"
+      >
+        {priorityConfig?.label || priority}
+      </Badge>
+    );
+  };
+
+  /**
+   * 获取类别标签
+   */
+  const getCategoryLabel = (category: string) => {
+    const categoryConfig = ticketCategories.find((c) => c.value === category);
+    return categoryConfig?.label || category;
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">支持中心</h2>
+          <p className="text-muted-foreground">查看和管理您的支持工单</p>
+        </div>
+        <Link href="/dashboard/support/new">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            新建工单
+          </Button>
+        </Link>
+      </div>
+
+      {/* 工单列表 */}
+      {tickets.length === 0 ? (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Ticket className="h-12 w-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-medium">暂无工单</h3>
+            <p className="text-muted-foreground mb-4">
+              您还没有提交过任何支持工单
+            </p>
+            <Link href="/dashboard/support/new">
+              <Button>
+                <Plus className="mr-2 h-4 w-4" />
+                创建第一个工单
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {tickets.map((t) => (
+            <Link key={t.id} href={`/dashboard/support/${t.id}`}>
+              <Card className="hover:bg-muted/50 transition-colors cursor-pointer">
+                <CardHeader className="pb-2">
+                  <div className="flex items-start justify-between">
+                    <div className="space-y-1">
+                      <CardTitle className="text-base">{t.subject}</CardTitle>
+                      <p className="text-sm text-muted-foreground">
+                        {getCategoryLabel(t.category)} ·{" "}
+                        {new Date(t.createdAt).toLocaleDateString("zh-CN")}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {getPriorityBadge(t.priority)}
+                      {getStatusBadge(t.status)}
+                    </div>
+                  </div>
+                </CardHeader>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/template/src/app/[locale]/(dashboard)/layout.tsx

@@ -0,0 +1,35 @@
+import { redirect } from "next/navigation";
+import { CreditBalanceBadge } from "@/features/credits";
+import {
+  DashboardMainWrapper,
+  DashboardSidebar,
+  SidebarProvider,
+} from "@/features/dashboard";
+import { CurrentPlanBadge } from "@/features/subscription";
+import { getServerSession } from "@/lib/auth/server";
+
+export default async function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // 服务端会话校验（防御纵深）
+  // middleware 仅做 cookie 存在性检查（可被伪造），此处用 Better Auth 做
+  // 真正的 DB 会话校验，确保所有 /dashboard 子页面都受到强制保护。
+  const session = await getServerSession();
+  if (!session?.user) {
+    redirect("/sign-in");
+  }
+
+  return (
+    <SidebarProvider>
+      <div className="min-h-screen bg-muted/40">
+        <DashboardSidebar
+          compactAccountBadge={<CreditBalanceBadge />}
+          accountPlanBadge={<CurrentPlanBadge />}
+        />
+        <DashboardMainWrapper>{children}</DashboardMainWrapper>
+      </div>
+    </SidebarProvider>
+  );
+}