feat: 实现 Phase 2 — 用户详情页、反馈管理、订阅管理、CSV 导出

Phase 2a: 用户详情页（资料卡片、游戏统计、答题历史、章节进度）
Phase 2b: 反馈管理页面（类型/状态筛选、详情弹窗、状态变更）
Phase 2c: 订阅等级管理（等级变更对话框、权益对比）
Phase 2d: CSV 导出（用户/反馈/题目列表，Excel 兼容 BOM）

src/App.tsx

@@ -8,6 +8,8 @@ import EditQuestionPage from "@/routes/questions/$id.edit"
 import CategoriesPage from "@/routes/categories"
 import SkillTreePage from "@/routes/skill-tree"
 import UsersPage from "@/routes/users"
+import UserDetailPage from "@/routes/users/$id"
+import FeedbackPage from "@/routes/feedback"
 import SettingsPage from "@/routes/settings"
 
 const router = createBrowserRouter([
@@ -30,7 +32,14 @@ const router = createBrowserRouter([
       },
       { path: "categories", Component: CategoriesPage },
       { path: "skill-tree", Component: SkillTreePage },
-      { path: "users", Component: UsersPage },
+      { path: "feedback", Component: FeedbackPage },
+      {
+        path: "users",
+        children: [
+          { index: true, Component: UsersPage },
+          { path: ":id", Component: UserDetailPage },
+        ],
+      },
       { path: "settings", Component: SettingsPage },
     ],
   },

src/components/feedback/FeedbackDetailDialog.tsx

@@ -0,0 +1,115 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  FEEDBACK_STATUS_LABELS,
+  FEEDBACK_TYPE_LABELS,
+  FEEDBACK_RATING_LABELS,
+} from "@/lib/constants"
+import type { Feedback, FeedbackStatus } from "@/types/feedback"
+
+const STATUS_VARIANTS: Record<FeedbackStatus, "secondary" | "default" | "destructive"> = {
+  pending: "destructive",
+  read: "secondary",
+  resolved: "default",
+}
+
+interface FeedbackDetailDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  feedback: Feedback | null
+  onStatusChange: (id: string, status: FeedbackStatus) => Promise<void>
+}
+
+export function FeedbackDetailDialog({
+  open,
+  onOpenChange,
+  feedback,
+  onStatusChange,
+}: FeedbackDetailDialogProps) {
+  if (!feedback) return null
+
+  const isPending = feedback.status === "pending"
+  const isResolved = feedback.status === "resolved"
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>反馈详情</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* 基本信息 */}
+          <div className="flex items-center gap-2">
+            <Badge variant="outline">{FEEDBACK_TYPE_LABELS[feedback.type]}</Badge>
+            <Badge variant={STATUS_VARIANTS[feedback.status]}>
+              {FEEDBACK_STATUS_LABELS[feedback.status]}
+            </Badge>
+          </div>
+
+          {/* 用户 */}
+          <div className="text-sm">
+            <span className="text-muted-foreground">用户：</span>
+            {feedback.userNickname || "匿名"}
+            {feedback.contact && (
+              <span className="ml-2 text-muted-foreground">({feedback.contact})</span>
+            )}
+          </div>
+
+          {/* 内容 */}
+          {feedback.type === "quiz_rating" ? (
+            <div className="space-y-2">
+              <div className="text-sm">
+                <span className="text-muted-foreground">评价：</span>
+                <span className="font-medium">
+                  {FEEDBACK_RATING_LABELS[feedback.rating ?? ""] ?? feedback.rating}
+                </span>
+              </div>
+              {feedback.questionStem && (
+                <div className="rounded-md bg-muted p-3">
+                  <p className="text-sm">{feedback.questionStem}</p>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="rounded-md bg-muted p-3">
+              <p className="whitespace-pre-wrap text-sm">{feedback.content ?? "（无内容）"}</p>
+            </div>
+          )}
+
+          {/* 时间 */}
+          <div className="text-xs text-muted-foreground">
+            提交于 {new Date(feedback.createdAt).toLocaleString("zh-CN")}
+          </div>
+
+          {/* 操作按钮 */}
+          {!isResolved && (
+            <div className="flex justify-end gap-2">
+              {isPending && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => onStatusChange(feedback.id, "read")}
+                >
+                  标记已读
+                </Button>
+              )}
+              <Button
+                size="sm"
+                onClick={() => onStatusChange(feedback.id, "resolved")}
+              >
+                标记已处理
+              </Button>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/feedback/columns.tsx

@@ -0,0 +1,116 @@
+import type { ColumnDef } from "@tanstack/react-table"
+import { Badge } from "@/components/ui/badge"
+import {
+  FEEDBACK_STATUS_LABELS,
+  FEEDBACK_TYPE_LABELS,
+  FEEDBACK_RATING_LABELS,
+} from "@/lib/constants"
+import type { Feedback, FeedbackStatus } from "@/types/feedback"
+
+const STATUS_VARIANTS: Record<FeedbackStatus, "secondary" | "default" | "destructive"> = {
+  pending: "destructive",
+  read: "secondary",
+  resolved: "default",
+}
+
+interface ColumnContext {
+  onMarkRead: (fb: Feedback) => void
+  onMarkResolved: (fb: Feedback) => void
+  onViewDetail: (fb: Feedback) => void
+}
+
+export function getColumns(ctx: ColumnContext): ColumnDef<Feedback>[] {
+  return [
+    {
+      accessorKey: "type",
+      header: "类型",
+      cell: ({ row }) => {
+        const type = row.getValue("type") as string
+        return (
+          <Badge variant="outline">{FEEDBACK_TYPE_LABELS[type as keyof typeof FEEDBACK_TYPE_LABELS] ?? type}</Badge>
+        )
+      },
+    },
+    {
+      id: "content",
+      header: "内容",
+      cell: ({ row }) => {
+        const fb = row.original
+        if (fb.type === "quiz_rating") {
+          return (
+            <div className="max-w-xs">
+              <span className="text-sm">{FEEDBACK_RATING_LABELS[fb.rating ?? ""] ?? fb.rating}</span>
+              {fb.questionStem && (
+                <p className="line-clamp-1 text-xs text-muted-foreground">{fb.questionStem}</p>
+              )}
+            </div>
+          )
+        }
+        return (
+          <span className="line-clamp-2 max-w-xs text-sm">
+            {fb.content ?? "—"}
+          </span>
+        )
+      },
+    },
+    {
+      accessorKey: "userNickname",
+      header: "用户",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground">
+          {(row.getValue("userNickname") as string) || "匿名"}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "status",
+      header: "状态",
+      cell: ({ row }) => {
+        const status = row.getValue("status") as FeedbackStatus
+        return <Badge variant={STATUS_VARIANTS[status]}>{FEEDBACK_STATUS_LABELS[status]}</Badge>
+      },
+    },
+    {
+      accessorKey: "createdAt",
+      header: "提交时间",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-xs">
+          {new Date(row.getValue("createdAt") as string).toLocaleString("zh-CN")}
+        </span>
+      ),
+    },
+    {
+      id: "actions",
+      header: "",
+      cell: ({ row }) => {
+        const fb = row.original
+        return (
+          <div className="flex items-center gap-1">
+            <button
+              className="text-xs text-muted-foreground hover:text-foreground"
+              onClick={() => ctx.onViewDetail(fb)}
+            >
+              详情
+            </button>
+            {fb.status === "pending" && (
+              <button
+                className="text-xs text-muted-foreground hover:text-foreground"
+                onClick={() => ctx.onMarkRead(fb)}
+              >
+                已读
+              </button>
+            )}
+            {fb.status !== "resolved" && (
+              <button
+                className="text-xs text-muted-foreground hover:text-foreground"
+                onClick={() => ctx.onMarkResolved(fb)}
+              >
+                处理
+              </button>
+            )}
+          </div>
+        )
+      },
+    },
+  ]
+}

src/components/layout/Sidebar.tsx

@@ -5,6 +5,7 @@ import {
   FolderOpen,
   TreePine,
   Users,
+  MessageSquare,
   Settings,
   LogOut,
 } from "lucide-react"
@@ -17,6 +18,7 @@ const navItems = [
   { to: "/categories", label: "分类管理", icon: FolderOpen },
   { to: "/skill-tree", label: "技能树", icon: TreePine },
   { to: "/users", label: "用户管理", icon: Users },
+  { to: "/feedback", label: "用户反馈", icon: MessageSquare },
   { to: "/settings", label: "系统设置", icon: Settings },
 ]
 

src/components/ui/tabs.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

src/components/user/AnswerHistoryTable.tsx

@@ -0,0 +1,159 @@
+import { useCallback, useEffect, useState } from "react"
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+  type ColumnDef,
+} from "@tanstack/react-table"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { fetchUserProgress } from "@/lib/api/user-api"
+import type { UserProgress } from "@/types/user-detail"
+
+const PAGE_SIZE = 20
+
+function getColumns(): ColumnDef<UserProgress>[] {
+  return [
+    {
+      accessorKey: "questionStem",
+      header: "题目",
+      cell: ({ row }) => {
+        const stem = row.getValue("questionStem") as string
+        return (
+          <span className="line-clamp-2 max-w-xs">
+            {stem.length > 60 ? stem.slice(0, 60) + "..." : stem}
+          </span>
+        )
+      },
+    },
+    {
+      accessorKey: "correct",
+      header: "结果",
+      cell: ({ row }) => {
+        const correct = row.getValue("correct") as boolean
+        return (
+          <Badge variant={correct ? "default" : "destructive"}>
+            {correct ? "正确" : "错误"}
+          </Badge>
+        )
+      },
+    },
+    {
+      accessorKey: "timeMs",
+      header: "用时",
+      cell: ({ row }) => {
+        const ms = row.getValue("timeMs") as number
+        return <span className="text-muted-foreground">{(ms / 1000).toFixed(1)}s</span>
+      },
+    },
+    {
+      accessorKey: "answeredAt",
+      header: "答题时间",
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-xs">
+          {new Date(row.getValue("answeredAt") as string).toLocaleString("zh-CN")}
+        </span>
+      ),
+    },
+  ]
+}
+
+interface AnswerHistoryTableProps {
+  userId: string
+}
+
+export function AnswerHistoryTable({ userId }: AnswerHistoryTableProps) {
+  const [data, setData] = useState<UserProgress[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await fetchUserProgress(userId, { page, limit: PAGE_SIZE })
+      setData(res.data)
+      setTotal(res.pagination.total)
+    } catch {
+      setData([])
+    } finally {
+      setLoading(false)
+    }
+  }, [userId, page])
+
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  const columns = getColumns()
+  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((hg) => (
+              <TableRow key={hg.id}>
+                {hg.headers.map((h) => (
+                  <TableHead key={h.id}>
+                    {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-20 text-center text-muted-foreground">
+                  加载中...
+                </TableCell>
+              </TableRow>
+            ) : data.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-20 text-center text-muted-foreground">
+                  暂无答题记录
+                </TableCell>
+              </TableRow>
+            ) : (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <span>第 {page}/{totalPages} 页</span>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+              上一页
+            </Button>
+            <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
+              下一页
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/user/ChapterProgressList.tsx

@@ -0,0 +1,54 @@
+import { Badge } from "@/components/ui/badge"
+import type { ChapterProgress, ChapterStatus } from "@/types/user-detail"
+
+const STATUS_LABELS: Record<ChapterStatus, string> = {
+  locked: "未解锁",
+  unlocked: "已解锁",
+  passed: "已通过",
+  perfect: "完美",
+}
+
+const STATUS_VARIANTS: Record<ChapterStatus, "secondary" | "outline" | "default" | "destructive"> = {
+  locked: "secondary",
+  unlocked: "outline",
+  passed: "default",
+  perfect: "destructive",
+}
+
+interface ChapterProgressListProps {
+  chapters: ChapterProgress[]
+}
+
+export function ChapterProgressList({ chapters }: ChapterProgressListProps) {
+  if (chapters.length === 0) {
+    return <div className="py-8 text-center text-muted-foreground">暂无章节进度数据</div>
+  }
+
+  return (
+    <div className="space-y-2">
+      {chapters.map((ch) => (
+        <div
+          key={ch.chapterId}
+          className="flex items-center justify-between rounded-lg border px-4 py-3"
+        >
+          <div className="flex items-center gap-3">
+            <Badge variant={STATUS_VARIANTS[ch.status]}>{STATUS_LABELS[ch.status]}</Badge>
+            <span className="font-medium">{ch.chapterTitle}</span>
+          </div>
+
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <span>
+              {ch.bestCorrectCount}/{ch.totalQuestions} 题
+            </span>
+            <span>尝试 {ch.attempts} 次</span>
+            {ch.completedAt && (
+              <span className="text-xs">
+                {new Date(ch.completedAt).toLocaleDateString("zh-CN")}
+              </span>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/user/GameStatsGrid.tsx

@@ -0,0 +1,57 @@
+import { Zap, Flame, Heart, Target, Clock, Trophy } from "lucide-react"
+import { StatsCard } from "@/components/charts/StatsCard"
+import type { UserDetail } from "@/types/user-detail"
+
+interface GameStatsGridProps {
+  user: UserDetail
+}
+
+export function GameStatsGrid({ user }: GameStatsGridProps) {
+  const stats = [
+    {
+      title: "总 XP",
+      value: user.xpTotal.toLocaleString(),
+      description: `今日 ${user.dailyXpEarned}/${user.dailyXpGoal}`,
+      icon: Zap,
+    },
+    {
+      title: "连续天数",
+      value: `${user.streakDays} 天`,
+      icon: Flame,
+    },
+    {
+      title: "红心",
+      value: user.heartsRemaining,
+      icon: Heart,
+    },
+    {
+      title: "答题总数",
+      value: user.totalAnswered.toLocaleString(),
+      icon: Target,
+    },
+    {
+      title: "正确率",
+      value: `${(user.correctRate * 100).toFixed(1)}%`,
+      icon: Trophy,
+    },
+    {
+      title: "平均用时",
+      value: `${(user.avgTimeMs / 1000).toFixed(1)}s`,
+      icon: Clock,
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
+      {stats.map((stat) => (
+        <StatsCard
+          key={stat.title}
+          title={stat.title}
+          value={stat.value}
+          description={stat.description}
+          icon={stat.icon}
+        />
+      ))}
+    </div>
+  )
+}

src/components/user/TierChangeDialog.tsx

@@ -0,0 +1,112 @@
+import { useState } from "react"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { TIER_LABELS, TIER_DESCRIPTIONS } from "@/lib/constants"
+import type { User, UserTier } from "@/types/user"
+
+const TIER_VARIANTS: Record<UserTier, "secondary" | "default" | "destructive"> = {
+  free: "secondary",
+  pro: "default",
+  proplus: "destructive",
+}
+
+const ALL_TIERS: UserTier[] = ["free", "pro", "proplus"]
+
+interface TierChangeDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  user: User
+  onConfirm: (tier: UserTier) => Promise<void>
+}
+
+export function TierChangeDialog({
+  open,
+  onOpenChange,
+  user,
+  onConfirm,
+}: TierChangeDialogProps) {
+  const [selected, setSelected] = useState<UserTier>(user.tier)
+  const [submitting, setSubmitting] = useState(false)
+
+  const changed = selected !== user.tier
+
+  const handleConfirm = async () => {
+    if (!changed) return
+    setSubmitting(true)
+    try {
+      await onConfirm(selected)
+      onOpenChange(false)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>更改订阅等级</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* 当前等级 */}
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">当前：</span>
+            <Badge variant={TIER_VARIANTS[user.tier]}>{TIER_LABELS[user.tier]}</Badge>
+          </div>
+
+          {/* 新等级选择 */}
+          <div className="space-y-2">
+            <span className="text-sm text-muted-foreground">更改为：</span>
+            <Select value={selected} onValueChange={(v) => setSelected(v as UserTier)}>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {ALL_TIERS.map((tier) => (
+                  <SelectItem key={tier} value={tier}>
+                    {TIER_LABELS[tier]}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* 权益变更提示 */}
+          {changed && (
+            <div className="rounded-md border bg-muted/50 p-3 space-y-1.5">
+              <p className="text-sm font-medium">权益变更：</p>
+              <p className="text-xs text-muted-foreground">
+                {TIER_LABELS[user.tier]} → {TIER_LABELS[selected]}
+              </p>
+              <p className="text-xs text-muted-foreground">{TIER_DESCRIPTIONS[selected]}</p>
+            </div>
+          )}
+
+          {/* 操作 */}
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={submitting}>
+              取消
+            </Button>
+            <Button onClick={handleConfirm} disabled={!changed || submitting}>
+              {submitting ? "提交中..." : "确认更改"}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/user/UserProfileCard.tsx

@@ -0,0 +1,58 @@
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent } from "@/components/ui/card"
+import type { UserDetail } from "@/types/user-detail"
+import type { UserTier } from "@/types/user"
+
+const TIER_LABELS: Record<UserTier, string> = {
+  free: "免费",
+  pro: "Pro",
+  proplus: "Pro+",
+}
+
+const TIER_VARIANTS: Record<UserTier, "secondary" | "default" | "destructive"> = {
+  free: "secondary",
+  pro: "default",
+  proplus: "destructive",
+}
+
+const AUTH_TYPE_LABELS: Record<string, string> = {
+  huawei: "华为",
+  guest: "游客",
+  phone: "手机",
+  apple: "Apple",
+  google: "Google",
+}
+
+interface UserProfileCardProps {
+  user: UserDetail
+}
+
+export function UserProfileCard({ user }: UserProfileCardProps) {
+  return (
+    <Card>
+      <CardContent className="flex items-center gap-6 pt-6">
+        {/* 头像 */}
+        <div className="flex size-16 items-center justify-center rounded-full bg-muted text-2xl font-bold text-muted-foreground">
+          {(user.nickname ?? "?").slice(0, 1).toUpperCase()}
+        </div>
+
+        {/* 信息 */}
+        <div className="flex flex-1 flex-col gap-1.5">
+          <div className="flex items-center gap-2">
+            <span className="text-lg font-semibold">
+              {user.nickname || "未设置昵称"}
+            </span>
+            <Badge variant={TIER_VARIANTS[user.tier]}>{TIER_LABELS[user.tier]}</Badge>
+          </div>
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <span>{AUTH_TYPE_LABELS[user.authType] ?? user.authType}</span>
+            <span>注册于 {new Date(user.createdAt).toLocaleDateString("zh-CN")}</span>
+            {user.streakLastDate && (
+              <span>最近活跃 {new Date(user.streakLastDate).toLocaleDateString("zh-CN")}</span>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/user/columns.tsx

@@ -1,4 +1,5 @@
 import type { ColumnDef } from "@tanstack/react-table"
+import { Link } from "react-router"
 import { Badge } from "@/components/ui/badge"
 import type { User, UserTier } from "@/types/user"
 
@@ -29,10 +30,11 @@ export function getColumns(): ColumnDef<User>[] {
       header: "昵称",
       cell: ({ row }) => {
         const nickname = row.getValue("nickname") as string | null
+        const userId = row.original.id
         return (
-          <span className="font-medium">
+          <Link to={`/users/${userId}`} className="font-medium hover:underline">
             {nickname || <span className="text-muted-foreground">未设置</span>}
-          </span>
+          </Link>
         )
       },
     },

src/lib/api/feedback-api.ts

@@ -0,0 +1,33 @@
+import { apiClient } from "@/lib/api-client"
+import type { ApiResponse, PaginatedResponse } from "@/types/api"
+import type { Feedback, FeedbackStatus, FeedbackType } from "@/types/feedback"
+
+export interface FetchFeedbackParams {
+  page?: number
+  limit?: number
+  type?: FeedbackType
+  status?: FeedbackStatus
+}
+
+export async function fetchFeedback(
+  params: FetchFeedbackParams = {}
+): Promise<PaginatedResponse<Feedback>> {
+  const searchParams = new URLSearchParams()
+  if (params.page) searchParams.set("page", String(params.page))
+  if (params.limit) searchParams.set("limit", String(params.limit))
+  if (params.type) searchParams.set("type", params.type)
+  if (params.status) searchParams.set("status", params.status)
+
+  return apiClient
+    .get("feedback", { searchParams })
+    .json<PaginatedResponse<Feedback>>()
+}
+
+export async function updateFeedbackStatus(
+  id: string,
+  status: FeedbackStatus
+): Promise<ApiResponse<Feedback>> {
+  return apiClient
+    .patch(`feedback/${id}`, { json: { status } })
+    .json<ApiResponse<Feedback>>()
+}

src/lib/api/user-api.ts

@@ -1,6 +1,7 @@
 import { apiClient } from "@/lib/api-client"
 import type { PaginatedResponse, ApiResponse } from "@/types/api"
 import type { User, UserTier } from "@/types/user"
+import type { UserDetail, UserProgress, ChapterProgress } from "@/types/user-detail"
 
 export interface FetchUsersParams {
   page?: number
@@ -26,3 +27,30 @@ export async function fetchUsers(
 export async function fetchUser(id: string): Promise<ApiResponse<User>> {
   return apiClient.get(`users/${id}`).json<ApiResponse<User>>()
 }
+
+export async function fetchUserDetail(id: string): Promise<ApiResponse<UserDetail>> {
+  return apiClient.get(`users/${id}`).json<ApiResponse<UserDetail>>()
+}
+
+export async function updateUserTier(id: string, tier: UserTier): Promise<ApiResponse<User>> {
+  return apiClient.patch(`users/${id}`, { json: { tier } }).json<ApiResponse<User>>()
+}
+
+export async function fetchUserProgress(
+  id: string,
+  params: { page?: number; limit?: number } = {}
+): Promise<PaginatedResponse<UserProgress>> {
+  const searchParams = new URLSearchParams()
+  if (params.page) searchParams.set("page", String(params.page))
+  if (params.limit) searchParams.set("limit", String(params.limit))
+
+  return apiClient
+    .get(`users/${id}/progress`, { searchParams })
+    .json<PaginatedResponse<UserProgress>>()
+}
+
+export async function fetchUserChapterProgress(
+  id: string
+): Promise<ApiResponse<ChapterProgress[]>> {
+  return apiClient.get(`users/${id}/chapters`).json<ApiResponse<ChapterProgress[]>>()
+}

src/lib/constants.ts

@@ -1,5 +1,7 @@
 import type { CategoryStatus } from "@/types/category"
+import type { FeedbackStatus, FeedbackType } from "@/types/feedback"
 import type { QuestionStatus } from "@/types/question"
+import type { UserTier } from "@/types/user"
 
 export const QUESTION_STATUSES = {
   draft: "草稿",
@@ -31,3 +33,31 @@ export const CATEGORY_STATUS_LABELS: Record<CategoryStatus, string> = {
 export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:3000"
 
 export const AUTH_STORAGE_KEY = "duoqi_admin_jwt"
+
+export const FEEDBACK_STATUS_LABELS: Record<FeedbackStatus, string> = {
+  pending: "待处理",
+  read: "已读",
+  resolved: "已处理",
+}
+
+export const FEEDBACK_TYPE_LABELS: Record<FeedbackType, string> = {
+  quiz_rating: "题目评价",
+  text_feedback: "意见反馈",
+}
+
+export const FEEDBACK_RATING_LABELS: Record<string, string> = {
+  good: "👍 有趣",
+  bad: "👎 一般",
+}
+
+export const TIER_LABELS: Record<UserTier, string> = {
+  free: "免费",
+  pro: "Pro",
+  proplus: "Pro+",
+}
+
+export const TIER_DESCRIPTIONS: Record<UserTier, string> = {
+  free: "完整答题内容 + 5 颗红心/天 + 可选广告",
+  pro: "无广告 + 无限红心 + 深度知识卡 + 连胜自动修复",
+  proplus: "Pro 全部权益 + 专属题包 + 吉祥物皮肤 + AI 知识问答",
+}

src/lib/csv-export.ts

@@ -0,0 +1,35 @@
+/**
+ * 将数据导出为 CSV 文件并触发浏览器下载。
+ *
+ * @param filename 下载文件名（如 "users.csv"）
+ * @param columns  列定义，每项包含 key（数据字段名）和 label（表头）
+ * @param data     要导出的数据行
+ */
+export function exportToCsv<T extends Record<string, unknown>>(
+  filename: string,
+  columns: ReadonlyArray<{ key: keyof T & string; label: string }>,
+  data: ReadonlyArray<T>
+): void {
+  const escape = (value: unknown): string => {
+    const str = value === null || value === undefined ? "" : String(value)
+    if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+      return `"${str.replace(/"/g, '""')}"`
+    }
+    return str
+  }
+
+  const header = columns.map((col) => escape(col.label)).join(",")
+  const rows = data.map((row) =>
+    columns.map((col) => escape(row[col.key])).join(",")
+  )
+
+  const csv = [header, ...rows].join("\n")
+  const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" })
+
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = filename
+  link.click()
+  URL.revokeObjectURL(url)
+}

src/routes/feedback/index.tsx

@@ -0,0 +1,235 @@
+import { useCallback, useEffect, useState } from "react"
+import {
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+} from "@tanstack/react-table"
+import { Download } from "lucide-react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { FeedbackDetailDialog } from "@/components/feedback/FeedbackDetailDialog"
+import { getColumns } from "@/components/feedback/columns"
+import { fetchFeedback, updateFeedbackStatus } from "@/lib/api/feedback-api"
+import { exportToCsv } from "@/lib/csv-export"
+import { FEEDBACK_STATUS_LABELS, FEEDBACK_TYPE_LABELS } from "@/lib/constants"
+import type { Feedback, FeedbackStatus, FeedbackType } from "@/types/feedback"
+
+const PAGE_SIZE = 20
+
+export default function FeedbackPage() {
+  const [data, setData] = useState<Feedback[]>([])
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [typeFilter, setTypeFilter] = useState<FeedbackType | "all">("all")
+  const [statusFilter, setStatusFilter] = useState<FeedbackStatus | "all">("all")
+
+  // 详情弹窗
+  const [detailFeedback, setDetailFeedback] = useState<Feedback | null>(null)
+  const [detailOpen, setDetailOpen] = useState(false)
+  const [exporting, setExporting] = useState(false)
+
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    try {
+      const res = await fetchFeedback({
+        page,
+        limit: PAGE_SIZE,
+        type: typeFilter !== "all" ? typeFilter : undefined,
+        status: statusFilter !== "all" ? statusFilter : undefined,
+      })
+      setData(res.data)
+      setTotal(res.pagination.total)
+    } catch {
+      setData([])
+    } finally {
+      setLoading(false)
+    }
+  }, [page, typeFilter, statusFilter])
+
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  const handleStatusChange = async (id: string, status: FeedbackStatus) => {
+    await updateFeedbackStatus(id, status)
+    setDetailOpen(false)
+    loadData()
+  }
+
+  const handleMarkRead = (fb: Feedback) => handleStatusChange(fb.id, "read")
+  const handleMarkResolved = (fb: Feedback) => handleStatusChange(fb.id, "resolved")
+  const handleViewDetail = (fb: Feedback) => {
+    setDetailFeedback(fb)
+    setDetailOpen(true)
+  }
+
+  const handleExport = async () => {
+    setExporting(true)
+    try {
+      const res = await fetchFeedback({
+        limit: 10000,
+        type: typeFilter !== "all" ? typeFilter : undefined,
+        status: statusFilter !== "all" ? statusFilter : undefined,
+      })
+      exportToCsv("feedback.csv", [
+        { key: "type", label: "类型" },
+        { key: "userNickname", label: "用户" },
+        { key: "content", label: "内容" },
+        { key: "rating", label: "评价" },
+        { key: "status", label: "状态" },
+        { key: "createdAt", label: "提交时间" },
+      ], res.data as unknown as Record<string, unknown>[])
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  const columns = getColumns({
+    onMarkRead: handleMarkRead,
+    onMarkResolved: handleMarkResolved,
+    onViewDetail: handleViewDetail,
+  })
+
+  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })
+
+  return (
+    <div className="space-y-6">
+      {/* 头部 */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">用户反馈</h1>
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-muted-foreground">共 {total} 条</span>
+          <Button variant="outline" size="sm" disabled={exporting} onClick={handleExport}>
+            <Download className="mr-1 size-4" />
+            {exporting ? "导出中..." : "导出 CSV"}
+          </Button>
+        </div>
+      </div>
+
+      {/* 筛选 */}
+      <div className="flex items-center gap-3">
+        <Select
+          value={typeFilter}
+          onValueChange={(val) => {
+            setTypeFilter(val as FeedbackType | "all")
+            setPage(1)
+          }}
+        >
+          <SelectTrigger className="w-32">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部类型</SelectItem>
+            {Object.entries(FEEDBACK_TYPE_LABELS).map(([value, label]) => (
+              <SelectItem key={value} value={value}>
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select
+          value={statusFilter}
+          onValueChange={(val) => {
+            setStatusFilter(val as FeedbackStatus | "all")
+            setPage(1)
+          }}
+        >
+          <SelectTrigger className="w-32">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部状态</SelectItem>
+            {Object.entries(FEEDBACK_STATUS_LABELS).map(([value, label]) => (
+              <SelectItem key={value} value={value}>
+                {label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 表格 */}
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((hg) => (
+              <TableRow key={hg.id}>
+                {hg.headers.map((h) => (
+                  <TableHead key={h.id}>
+                    {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-20 text-center text-muted-foreground">
+                  加载中...
+                </TableCell>
+              </TableRow>
+            ) : data.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-20 text-center text-muted-foreground">
+                  暂无反馈数据
+                </TableCell>
+              </TableRow>
+            ) : (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* 分页 */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <span>第 {page}/{totalPages} 页</span>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+              上一页
+            </Button>
+            <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
+              下一页
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* 详情弹窗 */}
+      <FeedbackDetailDialog
+        open={detailOpen}
+        onOpenChange={setDetailOpen}
+        feedback={detailFeedback}
+        onStatusChange={handleStatusChange}
+      />
+    </div>
+  )
+}

src/routes/questions/index.tsx

@@ -6,7 +6,7 @@ import {
   flexRender,
   type ColumnDef,
 } from "@tanstack/react-table"
-import { Plus, Search, Trash2, EyeOff, Send } from "lucide-react"
+import { Plus, Search, Trash2, EyeOff, Send, Download } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -40,6 +40,7 @@ import { ImportQuestionsDialog } from "@/components/question/ImportQuestionsDial
 import { Checkbox } from "@/components/ui/checkbox"
 import { fetchQuestions, deleteQuestion, updateQuestionStatus, batchOperateQuestions } from "@/lib/api/question-api"
 import { fetchCategories } from "@/lib/api/category-api"
+import { exportToCsv } from "@/lib/csv-export"
 import { DIFFICULTY_LABELS, QUESTION_STATUSES } from "@/lib/constants"
 import type { Question, QuestionStatus, Difficulty } from "@/types/question"
 import type { Category } from "@/types/category"
@@ -73,6 +74,7 @@ export default function QuestionsPage() {
   const [batchConfirmOpen, setBatchConfirmOpen] = useState(false)
   const [batchAction, setBatchAction] = useState<"publish" | "archive" | "delete">("delete")
   const [batchSubmitting, setBatchSubmitting] = useState(false)
+  const [exporting, setExporting] = useState(false)
 
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
 
@@ -192,12 +194,42 @@ export default function QuestionsPage() {
 
   const selectedCount = table.getFilteredSelectedRowModel().rows.length
 
+  async function handleExport() {
+    setExporting(true)
+    try {
+      const res = await fetchQuestions({
+        limit: 10000,
+        search: search || undefined,
+        status: statusFilter !== "all" ? statusFilter : undefined,
+        categoryId: categoryFilter !== "all" ? categoryFilter : undefined,
+        difficulty: difficultyFilter !== "all"
+          ? (Number(difficultyFilter) as Difficulty)
+          : undefined,
+      })
+      exportToCsv("questions.csv", [
+        { key: "stem", label: "题干" },
+        { key: "categoryId", label: "分类" },
+        { key: "difficulty", label: "难度" },
+        { key: "status", label: "状态" },
+        { key: "answerCount", label: "答题次数" },
+        { key: "correctRate", label: "正确率" },
+        { key: "updatedAt", label: "更新时间" },
+      ], res.data as unknown as Record<string, unknown>[])
+    } finally {
+      setExporting(false)
+    }
+  }
+
   return (
     <div className="space-y-6">
       {/* 页面头部 */}
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">题库管理</h1>
         <div className="flex gap-2">
+          <Button variant="outline" size="sm" disabled={exporting} onClick={handleExport}>
+            <Download className="mr-1 size-4" />
+            {exporting ? "导出中..." : "导出 CSV"}
+          </Button>
           <Button variant="outline" onClick={() => setImportOpen(true)}>
             批量导入
           </Button>

src/routes/users/$id.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from "react"
+import { useNavigate, useParams } from "react-router"
+import { ArrowLeft } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { AnswerHistoryTable } from "@/components/user/AnswerHistoryTable"
+import { ChapterProgressList } from "@/components/user/ChapterProgressList"
+import { GameStatsGrid } from "@/components/user/GameStatsGrid"
+import { TierChangeDialog } from "@/components/user/TierChangeDialog"
+import { UserProfileCard } from "@/components/user/UserProfileCard"
+import { fetchUserChapterProgress, fetchUserDetail, updateUserTier } from "@/lib/api/user-api"
+import { TIER_LABELS, TIER_DESCRIPTIONS } from "@/lib/constants"
+import type { ChapterProgress, UserDetail } from "@/types/user-detail"
+import type { UserTier } from "@/types/user"
+
+const TIER_VARIANTS: Record<UserTier, "secondary" | "default" | "destructive"> = {
+  free: "secondary",
+  pro: "default",
+  proplus: "destructive",
+}
+
+export default function UserDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const [user, setUser] = useState<UserDetail | null>(null)
+  const [chapters, setChapters] = useState<ChapterProgress[]>([])
+  const [loading, setLoading] = useState(true)
+  const [tierDialogOpen, setTierDialogOpen] = useState(false)
+
+  useEffect(() => {
+    if (!id) return
+
+    Promise.all([
+      fetchUserDetail(id).then((res) => res.data),
+      fetchUserChapterProgress(id)
+        .then((res) => res.data)
+        .catch(() => []),
+    ])
+      .then(([userDetail, chapterData]) => {
+        setUser(userDetail)
+        setChapters(chapterData)
+      })
+      .catch(() => navigate("/users"))
+      .finally(() => setLoading(false))
+  }, [id, navigate])
+
+  if (loading) {
+    return <div className="text-muted-foreground py-12 text-center">加载中...</div>
+  }
+
+  if (!user) {
+    return <div className="text-muted-foreground py-12 text-center">用户不存在</div>
+  }
+
+  const handleTierChange = async (tier: UserTier) => {
+    if (!id) return
+    const res = await updateUserTier(id, tier)
+    setUser((prev) => (prev ? { ...prev, tier: res.data.tier } : prev))
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 头部 */}
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="icon" onClick={() => navigate("/users")}>
+          <ArrowLeft className="size-4" />
+        </Button>
+        <h1 className="text-2xl font-bold">用户详情</h1>
+      </div>
+
+      {/* 资料 + 统计 */}
+      <UserProfileCard user={user} />
+      <GameStatsGrid user={user} />
+
+      {/* Tab 面板 */}
+      <Tabs defaultValue="history">
+        <TabsList>
+          <TabsTrigger value="history">答题历史</TabsTrigger>
+          <TabsTrigger value="chapters">章节进度</TabsTrigger>
+          <TabsTrigger value="subscription">订阅管理</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="history" className="mt-4">
+          <AnswerHistoryTable userId={user.id} />
+        </TabsContent>
+
+        <TabsContent value="chapters" className="mt-4">
+          <ChapterProgressList chapters={chapters} />
+        </TabsContent>
+
+        <TabsContent value="subscription" className="mt-4">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle className="text-base">订阅状态</CardTitle>
+              <Button size="sm" onClick={() => setTierDialogOpen(true)}>
+                更改等级
+              </Button>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-muted-foreground">当前等级：</span>
+                <Badge variant={TIER_VARIANTS[user.tier]} className="text-base">
+                  {TIER_LABELS[user.tier]}
+                </Badge>
+              </div>
+              <p className="text-sm text-muted-foreground">{TIER_DESCRIPTIONS[user.tier]}</p>
+
+              {/* 权益参考 */}
+              <div className="mt-4 rounded-md border">
+                <div className="border-b px-4 py-2">
+                  <span className="text-sm font-medium">各等级权益对比</span>
+                </div>
+                <div className="divide-y text-sm">
+                  {(["free", "pro", "proplus"] as const).map((tier) => (
+                    <div
+                      key={tier}
+                      className={`flex items-center justify-between px-4 py-2 ${
+                        tier === user.tier ? "bg-muted/50" : ""
+                      }`}
+                    >
+                      <div className="flex items-center gap-2">
+                        <Badge variant={TIER_VARIANTS[tier]}>{TIER_LABELS[tier]}</Badge>
+                        {tier === user.tier && (
+                          <span className="text-xs text-muted-foreground">（当前）</span>
+                        )}
+                      </div>
+                      <span className="text-xs text-muted-foreground">{TIER_DESCRIPTIONS[tier]}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* 订阅变更弹窗 */}
+      <TierChangeDialog
+        open={tierDialogOpen}
+        onOpenChange={setTierDialogOpen}
+        user={user}
+        onConfirm={handleTierChange}
+      />
+    </div>
+  )
+}

src/routes/users/index.tsx

@@ -4,7 +4,7 @@ import {
   getCoreRowModel,
   flexRender,
 } from "@tanstack/react-table"
-import { Search } from "lucide-react"
+import { Download, Search } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -24,6 +24,7 @@ import {
 } from "@/components/ui/table"
 import { getColumns } from "@/components/user/columns"
 import { fetchUsers } from "@/lib/api/user-api"
+import { exportToCsv } from "@/lib/csv-export"
 import type { User, UserTier } from "@/types/user"
 
 const PAGE_SIZE = 20
@@ -66,6 +67,26 @@ export default function UsersPage() {
     loadUsers()
   }, [loadUsers])
 
+  const [exporting, setExporting] = useState(false)
+
+  const handleExport = async () => {
+    setExporting(true)
+    try {
+      const res = await fetchUsers({ limit: 10000, search: search || undefined, tier: tierFilter !== "all" ? tierFilter : undefined })
+      exportToCsv("users.csv", [
+        { key: "nickname", label: "昵称" },
+        { key: "authType", label: "登录方式" },
+        { key: "tier", label: "订阅" },
+        { key: "xpTotal", label: "总 XP" },
+        { key: "streakDays", label: "连续天数" },
+        { key: "heartsRemaining", label: "红心" },
+        { key: "createdAt", label: "注册时间" },
+      ], res.data as unknown as Record<string, unknown>[])
+    } finally {
+      setExporting(false)
+    }
+  }
+
   const columns = getColumns()
 
   const table = useReactTable({
@@ -79,7 +100,13 @@ export default function UsersPage() {
       {/* 页面头部 */}
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">用户管理</h1>
-        <span className="text-sm text-muted-foreground">共 {total} 名用户</span>
+        <div className="flex items-center gap-3">
+          <span className="text-sm text-muted-foreground">共 {total} 名用户</span>
+          <Button variant="outline" size="sm" disabled={exporting} onClick={handleExport}>
+            <Download className="mr-1 size-4" />
+            {exporting ? "导出中..." : "导出 CSV"}
+          </Button>
+        </div>
       </div>
 
       {/* 筛选栏 */}

src/types/feedback.ts

@@ -0,0 +1,17 @@
+export type FeedbackType = "quiz_rating" | "text_feedback"
+export type FeedbackStatus = "pending" | "read" | "resolved"
+
+export interface Feedback {
+  id: string
+  type: FeedbackType
+  userId: string
+  userNickname?: string
+  questionId?: string
+  questionStem?: string
+  rating?: "good" | "bad"
+  content?: string
+  contact?: string
+  status: FeedbackStatus
+  createdAt: string
+  updatedAt: string
+}

src/types/user-detail.ts

@@ -0,0 +1,32 @@
+import type { User } from "./user"
+
+/** 用户详情，包含统计摘要 */
+export interface UserDetail extends User {
+  totalAnswered: number
+  correctRate: number
+  avgTimeMs: number
+}
+
+/** 单条答题记录 */
+export interface UserProgress {
+  id: string
+  questionId: string
+  questionStem: string
+  correct: boolean
+  timeMs: number
+  answeredAt: string
+}
+
+/** 章节完成状态 */
+export type ChapterStatus = "locked" | "unlocked" | "passed" | "perfect"
+
+/** 单章节进度 */
+export interface ChapterProgress {
+  chapterId: string
+  chapterTitle: string
+  status: ChapterStatus
+  bestCorrectCount: number
+  totalQuestions: number
+  attempts: number
+  completedAt?: string
+}