create-nextdevtpl 2.6.0

package/template/src/app/[locale]/(admin)/admin/tickets/page.tsx

@@ -0,0 +1,236 @@
+import { desc, eq } from "drizzle-orm";
+import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { db } from "@/db";
+import { user } from "@/db/schema/auth";
+import { ticket } from "@/db/schema/support";
+import {
+  ticketCategories,
+  ticketPriorities,
+  ticketStatuses,
+} from "@/features/support";
+
+/**
+ * 管理员 - 工单管理列表页面
+ *
+ * 展示所有用户提交的工单
+ */
+export default async function AdminTicketsPage() {
+  // 获取所有工单（包含用户信息）
+  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,
+      user: {
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        image: user.image,
+      },
+    })
+    .from(ticket)
+    .leftJoin(user, eq(ticket.userId, 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;
+  };
+
+  /**
+   * 获取用户名首字母
+   */
+  const getInitials = (name: string) => {
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  // 统计数据
+  const openCount = tickets.filter((t) => t.status === "open").length;
+  const inProgressCount = tickets.filter(
+    (t) => t.status === "in_progress"
+  ).length;
+  const resolvedCount = tickets.filter((t) => t.status === "resolved").length;
+
+  return (
+    <div className="space-y-6">
+      {/* 页面标题 */}
+      <div>
+        <h2 className="text-2xl font-bold tracking-tight">工单管理</h2>
+        <p className="text-muted-foreground">查看和处理用户提交的支持工单</p>
+      </div>
+
+      {/* 统计信息 */}
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">待处理</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-primary">{openCount}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">处理中</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-warning">
+              {inProgressCount}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">已解决</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-success">
+              {resolvedCount}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">总工单</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{tickets.length}</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 工单列表 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>工单列表</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {tickets.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              暂无工单
+            </div>
+          ) : (
+            <div className="relative overflow-x-auto">
+              <table className="w-full text-sm text-left">
+                <thead className="bg-muted/40 font-mono text-[10px] tracking-[0.14em] text-muted-foreground uppercase">
+                  <tr>
+                    <th className="px-4 py-3">工单主题</th>
+                    <th className="px-4 py-3">用户</th>
+                    <th className="px-4 py-3">类别</th>
+                    <th className="px-4 py-3">优先级</th>
+                    <th className="px-4 py-3">状态</th>
+                    <th className="px-4 py-3">创建时间</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tickets.map((t) => (
+                    <tr
+                      key={t.id}
+                      className="border-b hover:bg-muted/50 cursor-pointer"
+                    >
+                      <td className="px-4 py-3">
+                        <Link
+                          href={`/admin/tickets/${t.id}`}
+                          className="font-medium hover:underline"
+                        >
+                          {t.subject}
+                        </Link>
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex items-center gap-2">
+                          <Avatar className="h-6 w-6">
+                            <AvatarImage
+                              src={t.user?.image || undefined}
+                              alt={t.user?.name || "用户"}
+                            />
+                            <AvatarFallback className="bg-primary text-primary-foreground text-xs">
+                              {t.user?.name ? getInitials(t.user.name) : "U"}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div>
+                            <div className="font-medium text-sm">
+                              {t.user?.name || "未知用户"}
+                            </div>
+                            <div className="text-xs text-muted-foreground">
+                              {t.user?.email}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-muted-foreground">
+                        {getCategoryLabel(t.category)}
+                      </td>
+                      <td className="px-4 py-3">
+                        {getPriorityBadge(t.priority)}
+                      </td>
+                      <td className="px-4 py-3">{getStatusBadge(t.status)}</td>
+                      <td className="px-4 py-3 text-muted-foreground">
+                        {new Date(t.createdAt).toLocaleDateString("zh-CN")}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}