create-fullstack-scaffold 0.1.0

package/template/src/admin/pages/TestCaptchaPage.tsx

@@ -0,0 +1,120 @@
+import { Button, Card, Space, Divider, Alert, message } from 'antd'
+import { apiClient } from '../services/apiClient'
+import { useState } from 'react'
+
+export const TestCaptchaPage: React.FC = () => {
+  const [result, setResult] = useState<string>('')
+  const [loading, setLoading] = useState(false)
+
+  const testNormalRequest = async () => {
+    setLoading(true)
+    try {
+      const response = await apiClient.api.admin.stats.$get()
+      const data = await response.json()
+      setResult(`✅ 正常请求成功:\n${JSON.stringify(data, null, 2)}`)
+      message.success('正常请求成功')
+    } catch (error) {
+      setResult(`❌ 请求失败: ${error}`)
+      message.error('请求失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const testCaptchaTrigger = async () => {
+    setLoading(true)
+    try {
+      for (let i = 0; i < 15; i++) {
+        await apiClient.api.admin.stats.$get()
+      }
+      setResult('✅ 触发限流验证码测试完成')
+      message.success('已触发多次请求，应该会显示验证码')
+    } catch (error) {
+      setResult(`❌ 请求失败: ${error}`)
+      message.error('请求失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const testConcurrentRequests = async () => {
+    setLoading(true)
+    try {
+      const promises = Array.from({ length: 5 }, () => apiClient.api.admin.stats.$get())
+
+      const responses = await Promise.all(promises)
+      const results = await Promise.all(
+        responses.map(
+          async (r: Awaited<ReturnType<typeof apiClient.api.admin.stats.$get>>) => await r.json()
+        )
+      )
+
+      setResult(`✅ 并发请求全部成功:\n${JSON.stringify(results, null, 2)}`)
+      message.success('并发请求测试成功')
+    } catch (error) {
+      setResult(`❌ 并发请求失败: ${error}`)
+      message.error('并发请求失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto">
+      <Card title="🧪 验证码拦截器测试" className="mb-4">
+        <Alert
+          message="测试说明"
+          description={
+            <div>
+              <p>此页面用于测试请求拦截器的各种场景：</p>
+              <ul className="list-disc list-inside mt-2">
+                <li>
+                  <strong>正常请求</strong>：不触发任何拦截
+                </li>
+                <li>
+                  <strong>限流触发</strong>：连续请求 15 次触发验证码
+                </li>
+                <li>
+                  <strong>并发请求</strong>：同时发送多个请求测试排队
+                </li>
+              </ul>
+            </div>
+          }
+          type="info"
+          showIcon
+          className="mb-4"
+        />
+
+        <Space direction="vertical" className="w-full" size="middle">
+          <Divider orientation="left">基础测试</Divider>
+
+          <Button type="primary" onClick={testNormalRequest} loading={loading} block size="large">
+            ✅ 测试正常请求（无拦截）
+          </Button>
+
+          <Button type="default" onClick={testCaptchaTrigger} loading={loading} block size="large">
+            🔐 测试限流触发验证码（连续请求 15 次）
+          </Button>
+
+          <Divider orientation="left">高级测试</Divider>
+
+          <Button
+            type="dashed"
+            onClick={testConcurrentRequests}
+            loading={loading}
+            block
+            size="large"
+          >
+            🔄 测试并发请求（同时发送 5 个请求）
+          </Button>
+        </Space>
+      </Card>
+
+      {result && (
+        <Card title="📋 测试结果">
+          <pre className="bg-gray-50 p-4 rounded overflow-auto max-h-96 text-sm">{result}</pre>
+        </Card>
+      )}
+    </div>
+  )
+}

package/template/src/admin/pages/TicketsPage.tsx

@@ -0,0 +1,292 @@
+import { useState, useEffect } from 'react'
+import { Table, Card, Tag, Button, Space, Modal, message, Descriptions } from 'antd'
+import { Eye, MessageCircle, CheckCircle, AlertCircle, Clock } from 'lucide-react'
+import { PermissionGuard } from '../components/PermissionGuard'
+import { Permission } from '@shared/modules/permission'
+import { apiClient } from '../services/apiClient'
+import type { Ticket } from '@shared/modules/ticket'
+
+const PRIORITY_COLORS = {
+  low: 'default',
+  medium: 'blue',
+  high: 'orange',
+  urgent: 'red',
+}
+
+const STATUS_COLORS = {
+  open: 'blue',
+  in_progress: 'processing',
+  waiting_customer: 'orange',
+  resolved: 'success',
+  closed: 'default',
+}
+
+const PRIORITY_LABELS = {
+  low: '低',
+  medium: '中',
+  high: '高',
+  urgent: '紧急',
+}
+
+const STATUS_LABELS = {
+  open: '待处理',
+  in_progress: '处理中',
+  waiting_customer: '等待客户',
+  resolved: '已解决',
+  closed: '已关闭',
+}
+
+export const TicketsPage: React.FC = () => {
+  const [tickets, setTickets] = useState<Ticket[]>([])
+  const [loading, setLoading] = useState(false)
+  const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null)
+  const [detailVisible, setDetailVisible] = useState(false)
+
+  useEffect(() => {
+    fetchTickets()
+  }, [])
+
+  const fetchTickets = async () => {
+    setLoading(true)
+    try {
+      const response = await apiClient.api.tickets.$get({ query: {} })
+      const result = await response.json()
+      if (result.success) {
+        setTickets(result.data)
+      }
+    } catch {
+      message.error('获取工单列表失败')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleClose = async (ticketId: string) => {
+    Modal.confirm({
+      title: '确认关闭',
+      content: '确定要关闭这个工单吗？',
+      onOk: async () => {
+        try {
+          const response = await apiClient.api.tickets[':id'].close.$put({
+            param: { id: ticketId },
+          })
+          const result = await response.json()
+          if (result.success) {
+            message.success('工单已关闭')
+            fetchTickets()
+          }
+        } catch {
+          message.error('关闭工单失败')
+        }
+      },
+    })
+  }
+
+  const showDetail = (ticket: Ticket) => {
+    setSelectedTicket(ticket)
+    setDetailVisible(true)
+  }
+
+  const columns = [
+    {
+      title: '工单号',
+      dataIndex: 'ticketNo',
+      key: 'ticketNo',
+      render: (text: string) => <code className="text-sm">{text}</code>,
+    },
+    {
+      title: '主题',
+      dataIndex: 'subject',
+      key: 'subject',
+    },
+    {
+      title: '客户',
+      key: 'customer',
+      render: (_: unknown, record: Ticket) => (
+        <div>
+          <div className="font-medium">{record.customerName}</div>
+          <div className="text-sm text-gray-500">{record.customerEmail}</div>
+        </div>
+      ),
+    },
+    {
+      title: '优先级',
+      dataIndex: 'priority',
+      key: 'priority',
+      render: (priority: keyof typeof PRIORITY_COLORS) => (
+        <Tag color={PRIORITY_COLORS[priority]}>{PRIORITY_LABELS[priority]}</Tag>
+      ),
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: keyof typeof STATUS_COLORS) => (
+        <Tag color={STATUS_COLORS[status]}>{STATUS_LABELS[status]}</Tag>
+      ),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      render: (_: unknown, record: Ticket) => (
+        <Space>
+          <Button
+            type="link"
+            size="small"
+            icon={<Eye className="w-4 h-4" />}
+            onClick={() => showDetail(record)}
+          >
+            查看
+          </Button>
+          <PermissionGuard permission={Permission.TICKET_CLOSE}>
+            {record.status !== 'closed' && (
+              <Button
+                type="link"
+                size="small"
+                icon={<CheckCircle className="w-4 h-4" />}
+                onClick={() => handleClose(record.id)}
+              >
+                关闭
+              </Button>
+            )}
+          </PermissionGuard>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">客服中心</h1>
+          <p className="text-gray-600 mt-1">处理客户工单和咨询</p>
+        </div>
+        <Button onClick={fetchTickets}>刷新</Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <Card>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-500">总工单</div>
+              <div className="text-2xl font-bold">{tickets.length}</div>
+            </div>
+            <MessageCircle className="w-8 h-8 text-blue-500" />
+          </div>
+        </Card>
+        <Card>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-500">待处理</div>
+              <div className="text-2xl font-bold text-blue-500">
+                {tickets.filter(t => t.status === 'open').length}
+              </div>
+            </div>
+            <Clock className="w-8 h-8 text-blue-500" />
+          </div>
+        </Card>
+        <Card>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-500">紧急</div>
+              <div className="text-2xl font-bold text-red-500">
+                {tickets.filter(t => t.priority === 'urgent').length}
+              </div>
+            </div>
+            <AlertCircle className="w-8 h-8 text-red-500" />
+          </div>
+        </Card>
+        <Card>
+          <div className="flex items-center justify-between">
+            <div>
+              <div className="text-sm text-gray-500">已解决</div>
+              <div className="text-2xl font-bold text-green-500">
+                {tickets.filter(t => t.status === 'resolved' || t.status === 'closed').length}
+              </div>
+            </div>
+            <CheckCircle className="w-8 h-8 text-green-500" />
+          </div>
+        </Card>
+      </div>
+
+      <Card>
+        <Table
+          columns={columns}
+          dataSource={tickets}
+          rowKey="id"
+          loading={loading}
+          pagination={{
+            pageSize: 10,
+            showTotal: total => `共 ${total} 条`,
+          }}
+        />
+      </Card>
+
+      <Modal
+        title="工单详情"
+        open={detailVisible}
+        onCancel={() => setDetailVisible(false)}
+        footer={null}
+        width={700}
+      >
+        {selectedTicket && (
+          <div>
+            <Descriptions column={2} bordered className="mb-4">
+              <Descriptions.Item label="工单号">
+                <code>{selectedTicket.ticketNo}</code>
+              </Descriptions.Item>
+              <Descriptions.Item label="状态">
+                <Tag color={STATUS_COLORS[selectedTicket.status]}>
+                  {STATUS_LABELS[selectedTicket.status]}
+                </Tag>
+              </Descriptions.Item>
+              <Descriptions.Item label="客户姓名">{selectedTicket.customerName}</Descriptions.Item>
+              <Descriptions.Item label="客户邮箱">{selectedTicket.customerEmail}</Descriptions.Item>
+              <Descriptions.Item label="优先级">
+                <Tag color={PRIORITY_COLORS[selectedTicket.priority]}>
+                  {PRIORITY_LABELS[selectedTicket.priority]}
+                </Tag>
+              </Descriptions.Item>
+              <Descriptions.Item label="负责人">
+                {selectedTicket.assignedTo || '未分配'}
+              </Descriptions.Item>
+              <Descriptions.Item label="主题" span={2}>
+                {selectedTicket.subject}
+              </Descriptions.Item>
+              <Descriptions.Item label="描述" span={2}>
+                {selectedTicket.description}
+              </Descriptions.Item>
+            </Descriptions>
+
+            {selectedTicket.replies.length > 0 && (
+              <div className="mt-4">
+                <h4 className="font-semibold mb-2">回复记录</h4>
+                {selectedTicket.replies.map(reply => (
+                  <div
+                    key={reply.id}
+                    className={`p-3 mb-2 rounded ${reply.isCustomer ? 'bg-gray-50' : 'bg-blue-50'}`}
+                  >
+                    <div className="flex justify-between items-center mb-1">
+                      <span className="font-medium">{reply.author}</span>
+                      <span className="text-sm text-gray-500">
+                        {new Date(reply.createdAt).toLocaleString('zh-CN')}
+                      </span>
+                    </div>
+                    <div className="text-gray-700">{reply.content}</div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </Modal>
+    </div>
+  )
+}

package/template/src/admin/pages/UsersPage.tsx

@@ -0,0 +1,282 @@
+import { useState, useEffect } from 'react'
+import {
+  Table,
+  Card,
+  Button,
+  Modal,
+  Form,
+  Input,
+  Select,
+  Tag,
+  Space,
+  message,
+  Popconfirm,
+} from 'antd'
+import {
+  PlusOutlined,
+  EditOutlined,
+  LockOutlined,
+  UnlockOutlined,
+  DeleteOutlined,
+} from '@ant-design/icons'
+import type { ColumnsType } from 'antd/es/table'
+import { apiClient, api } from '../services/apiClient'
+import { useRoleLabels } from '../hooks/useConfig'
+import { Permission, Role } from '@shared/modules/permission'
+import { PermissionGuard } from '../components/PermissionGuard'
+import type { User, CreateUserRequest } from '@shared/modules/admin'
+
+type UserFormData = CreateUserRequest & { password?: string }
+
+export const UsersPage: React.FC = () => {
+  const [users, setUsers] = useState<User[]>([])
+  const [modalVisible, setModalVisible] = useState(false)
+  const [editingUser, setEditingUser] = useState<User | null>(null)
+  const [form] = Form.useForm<UserFormData>()
+  const { roleLabels } = useRoleLabels()
+
+  const fetchUsers = async () => {
+    try {
+      const data = await api(apiClient.api.admin.users.$get()).withLoading('加载用户列表...').json()
+      setUsers(data)
+    } catch {
+      // 错误已由 api-request 自动处理
+    }
+  }
+
+  useEffect(() => {
+    fetchUsers()
+  }, [])
+
+  const handleCreate = () => {
+    setEditingUser(null)
+    form.resetFields()
+    setModalVisible(true)
+  }
+
+  const handleEdit = (user: User) => {
+    setEditingUser(user)
+    form.setFieldsValue({
+      username: user.username,
+      email: user.email,
+      role: user.role,
+      status: user.status,
+    })
+    setModalVisible(true)
+  }
+
+  const handleSubmit = async (values: UserFormData) => {
+    try {
+      if (editingUser) {
+        await api(
+          apiClient.api.admin.users[':id'].$put({
+            param: { id: editingUser.id },
+            json: values,
+          })
+        )
+          .withLoading('更新中...')
+          .json()
+        message.success('用户更新成功')
+        setModalVisible(false)
+        fetchUsers()
+      } else {
+        await api(
+          apiClient.api.admin.users.$post({
+            json: {
+              username: values.username,
+              email: values.email,
+              password: values.password!,
+              role: values.role,
+              status: values.status,
+            },
+          })
+        )
+          .withLoading('创建中...')
+          .json()
+        message.success('用户创建成功')
+        setModalVisible(false)
+        fetchUsers()
+      }
+    } catch {
+      // 错误已由 api-request 自动处理
+    }
+  }
+
+  const handleToggleLock = async (user: User) => {
+    try {
+      const newStatus = user.status === 'locked' ? 'active' : 'locked'
+      await api(
+        apiClient.api.admin.users[':id'].$put({
+          param: { id: user.id },
+          json: { status: newStatus },
+        })
+      )
+        .withLoading()
+        .json()
+      message.success(newStatus === 'locked' ? '用户已锁定' : '用户已解锁')
+      fetchUsers()
+    } catch {
+      // 错误已由 api-request 自动处理
+    }
+  }
+
+  const handleDelete = async (userId: string) => {
+    try {
+      await api(
+        apiClient.api.admin.users[':id'].$delete({
+          param: { id: userId },
+        })
+      )
+        .withLoading('删除中...')
+        .json()
+      message.success('用户已删除')
+      fetchUsers()
+    } catch {
+      // 错误已由 api-request 自动处理
+    }
+  }
+
+  const getStatusTag = (status: string) => {
+    const statusConfig = {
+      active: { color: 'green', text: '正常' },
+      inactive: { color: 'orange', text: '未激活' },
+      locked: { color: 'red', text: '已锁定' },
+    }
+    const config = statusConfig[status as keyof typeof statusConfig]
+    return <Tag color={config.color}>{config.text}</Tag>
+  }
+
+  const columns: ColumnsType<User> = [
+    {
+      title: '用户名',
+      dataIndex: 'username',
+      key: 'username',
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      key: 'email',
+    },
+    {
+      title: '角色',
+      dataIndex: 'role',
+      key: 'role',
+      render: (role: Role) => <Tag color="blue">{roleLabels[role] || role}</Tag>,
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status: string) => getStatusTag(status),
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createdAt',
+      key: 'createdAt',
+      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      render: (_: unknown, record: User) => (
+        <Space>
+          <PermissionGuard permission={Permission.USER_EDIT}>
+            <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
+              编辑
+            </Button>
+          </PermissionGuard>
+          <PermissionGuard permission={Permission.USER_EDIT}>
+            <Button
+              type="link"
+              icon={record.status === 'locked' ? <UnlockOutlined /> : <LockOutlined />}
+              onClick={() => handleToggleLock(record)}
+              danger={record.status !== 'locked'}
+            >
+              {record.status === 'locked' ? '解锁' : '锁定'}
+            </Button>
+          </PermissionGuard>
+          <PermissionGuard permission={Permission.USER_DELETE}>
+            <Popconfirm
+              title="确定要删除此用户吗？"
+              onConfirm={() => handleDelete(record.id)}
+              okText="确定"
+              cancelText="取消"
+            >
+              <Button type="link" icon={<DeleteOutlined />} danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </PermissionGuard>
+        </Space>
+      ),
+    },
+  ]
+
+  return (
+    <div className="p-6">
+      <Card
+        title="用户管理"
+        extra={
+          <PermissionGuard permission={Permission.USER_CREATE}>
+            <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
+              创建用户
+            </Button>
+          </PermissionGuard>
+        }
+      >
+        <Table columns={columns} dataSource={users} rowKey="id" />
+      </Card>
+
+      <Modal
+        title={editingUser ? '编辑用户' : '创建用户'}
+        open={modalVisible}
+        onCancel={() => setModalVisible(false)}
+        onOk={() => form.submit()}
+        width={600}
+      >
+        <Form form={form} layout="vertical" onFinish={handleSubmit}>
+          <Form.Item
+            name="username"
+            label="用户名"
+            rules={[{ required: true, message: '请输入用户名' }]}
+          >
+            <Input placeholder="请输入用户名" />
+          </Form.Item>
+          <Form.Item
+            name="email"
+            label="邮箱"
+            rules={[
+              { required: true, message: '请输入邮箱' },
+              { type: 'email', message: '请输入有效的邮箱地址' },
+            ]}
+          >
+            <Input placeholder="请输入邮箱" />
+          </Form.Item>
+          {!editingUser && (
+            <Form.Item
+              name="password"
+              label="密码"
+              rules={[{ required: true, message: '请输入密码' }]}
+            >
+              <Input.Password placeholder="请输入密码" />
+            </Form.Item>
+          )}
+          <Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
+            <Select placeholder="请选择角色">
+              <Select.Option value={Role.SUPER_ADMIN}>超级管理员</Select.Option>
+              <Select.Option value={Role.CUSTOMER_SERVICE}>客服人员</Select.Option>
+              <Select.Option value={Role.USER}>普通用户</Select.Option>
+            </Select>
+          </Form.Item>
+          <Form.Item name="status" label="状态" rules={[{ required: true, message: '请选择状态' }]}>
+            <Select placeholder="请选择状态">
+              <Select.Option value="active">正常</Select.Option>
+              <Select.Option value="inactive">未激活</Select.Option>
+              <Select.Option value="locked">已锁定</Select.Option>
+            </Select>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </div>
+  )
+}