create-fullstack-scaffold 0.4.9 → 0.4.11

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

@@ -5,15 +5,16 @@ import { PermissionGuard } from '../components/PermissionGuard'
 import { Permission } from '@shared/modules/permission'
 import { apiClient } from '../services/apiClient'
 import type { Ticket } from '@shared/modules/ticket'
+import { useLanguage } from '../i18n/useLanguage'
 
-const PRIORITY_COLORS = {
+const PRIORITY_COLORS: Record<string, string> = {
   low: 'default',
   medium: 'blue',
   high: 'orange',
   urgent: 'red',
 }
 
-const STATUS_COLORS = {
+const STATUS_COLORS: Record<string, string> = {
   open: 'blue',
   in_progress: 'processing',
   waiting_customer: 'orange',
@@ -21,27 +22,34 @@ const STATUS_COLORS = {
   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 { t, formatDate } = useLanguage()
   const [tickets, setTickets] = useState<Ticket[]>([])
   const [loading, setLoading] = useState(false)
   const [selectedTicket, setSelectedTicket] = useState<Ticket | null>(null)
   const [detailVisible, setDetailVisible] = useState(false)
 
+  const getPriorityLabel = (priority: string) => {
+    const map: Record<string, string> = {
+      low: t('tickets.priorityLow'),
+      medium: t('tickets.priorityMedium'),
+      high: t('tickets.priorityHigh'),
+      urgent: t('tickets.priorityUrgent'),
+    }
+    return map[priority] || priority
+  }
+
+  const getStatusLabel = (status: string) => {
+    const map: Record<string, string> = {
+      open: t('tickets.statusOpen'),
+      in_progress: t('tickets.statusInProgress'),
+      waiting_customer: t('tickets.statusWaitingCustomer'),
+      resolved: t('tickets.statusResolved'),
+      closed: t('tickets.statusClosed'),
+    }
+    return map[status] || status
+  }
+
   useEffect(() => {
     fetchTickets()
   }, [])
@@ -54,10 +62,10 @@ export const TicketsPage: React.FC = () => {
       if (result.success) {
         setTickets(result.data)
       } else {
-        message.error(result.error || 'Failed to load tickets')
+        message.error(result.error || t('tickets.loadFailed'))
       }
     } catch {
-      message.error('获取工单列表失败')
+      message.error(t('tickets.loadFailed'))
     } finally {
       setLoading(false)
     }
@@ -65,8 +73,8 @@ export const TicketsPage: React.FC = () => {
 
   const handleClose = async (ticketId: string) => {
     Modal.confirm({
-      title: '确认关闭',
-      content: '确定要关闭这个工单吗？',
+      title: t('tickets.confirmClose'),
+      content: t('tickets.confirmCloseContent'),
       onOk: async () => {
         try {
           const response = await apiClient.api.tickets[':id'].close.$put({
@@ -74,11 +82,11 @@ export const TicketsPage: React.FC = () => {
           })
           const result = await response.json()
           if (result.success) {
-            message.success('工单已关闭')
+            message.success(t('tickets.ticketClosed'))
             fetchTickets()
           }
         } catch {
-          message.error('关闭工单失败')
+          message.error(t('tickets.closeFailed'))
         }
       },
     })
@@ -91,18 +99,18 @@ export const TicketsPage: React.FC = () => {
 
   const columns = [
     {
-      title: '工单号',
+      title: t('tickets.ticketNo'),
       dataIndex: 'ticketNo',
       key: 'ticketNo',
       render: (text: string) => <code className="text-sm">{text}</code>,
     },
     {
-      title: '主题',
+      title: t('tickets.subject'),
       dataIndex: 'subject',
       key: 'subject',
     },
     {
-      title: '客户',
+      title: t('tickets.customer'),
       key: 'customer',
       render: (_: unknown, record: Ticket) => (
         <div>
@@ -112,29 +120,29 @@ export const TicketsPage: React.FC = () => {
       ),
     },
     {
-      title: '优先级',
+      title: t('tickets.priority'),
       dataIndex: 'priority',
       key: 'priority',
-      render: (priority: keyof typeof PRIORITY_COLORS) => (
-        <Tag color={PRIORITY_COLORS[priority]}>{PRIORITY_LABELS[priority]}</Tag>
+      render: (priority: string) => (
+        <Tag color={PRIORITY_COLORS[priority]}>{getPriorityLabel(priority)}</Tag>
       ),
     },
     {
-      title: '状态',
+      title: t('common.status'),
       dataIndex: 'status',
       key: 'status',
-      render: (status: keyof typeof STATUS_COLORS) => (
-        <Tag color={STATUS_COLORS[status]}>{STATUS_LABELS[status]}</Tag>
+      render: (status: string) => (
+        <Tag color={STATUS_COLORS[status]}>{getStatusLabel(status)}</Tag>
       ),
     },
     {
-      title: '创建时间',
+      title: t('common.createdAt'),
       dataIndex: 'createdAt',
       key: 'createdAt',
-      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+      render: (date: string) => formatDate(date),
     },
     {
-      title: '操作',
+      title: t('common.actions'),
       key: 'actions',
       render: (_: unknown, record: Ticket) => (
         <Space>
@@ -144,7 +152,7 @@ export const TicketsPage: React.FC = () => {
             icon={<Eye className="w-4 h-4" />}
             onClick={() => showDetail(record)}
           >
-            查看
+            {t('common.view')}
           </Button>
           <PermissionGuard permission={Permission.TICKET_CLOSE}>
             {record.status !== 'closed' && (
@@ -154,7 +162,7 @@ export const TicketsPage: React.FC = () => {
                 icon={<CheckCircle className="w-4 h-4" />}
                 onClick={() => handleClose(record.id)}
               >
-                关闭
+                {t('common.close')}
               </Button>
             )}
           </PermissionGuard>
@@ -167,17 +175,17 @@ export const TicketsPage: React.FC = () => {
     <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>
+          <h1 className="text-2xl font-bold text-gray-900">{t('tickets.title')}</h1>
+          <p className="text-gray-600 mt-1">{t('tickets.subtitle')}</p>
         </div>
-        <Button onClick={fetchTickets}>刷新</Button>
+        <Button onClick={fetchTickets}>{t('common.refresh')}</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-sm text-gray-500">{t('tickets.totalTickets')}</div>
               <div className="text-2xl font-bold">{tickets.length}</div>
             </div>
             <MessageCircle className="w-8 h-8 text-blue-500" />
@@ -186,7 +194,7 @@ export const TicketsPage: React.FC = () => {
         <Card>
           <div className="flex items-center justify-between">
             <div>
-              <div className="text-sm text-gray-500">待处理</div>
+              <div className="text-sm text-gray-500">{t('tickets.pending')}</div>
               <div className="text-2xl font-bold text-blue-500">
                 {tickets.filter(t => t.status === 'open').length}
               </div>
@@ -197,7 +205,7 @@ export const TicketsPage: React.FC = () => {
         <Card>
           <div className="flex items-center justify-between">
             <div>
-              <div className="text-sm text-gray-500">紧急</div>
+              <div className="text-sm text-gray-500">{t('tickets.urgent')}</div>
               <div className="text-2xl font-bold text-red-500">
                 {tickets.filter(t => t.priority === 'urgent').length}
               </div>
@@ -208,7 +216,7 @@ export const TicketsPage: React.FC = () => {
         <Card>
           <div className="flex items-center justify-between">
             <div>
-              <div className="text-sm text-gray-500">已解决</div>
+              <div className="text-sm text-gray-500">{t('tickets.resolved')}</div>
               <div className="text-2xl font-bold text-green-500">
                 {tickets.filter(t => t.status === 'resolved' || t.status === 'closed').length}
               </div>
@@ -226,13 +234,13 @@ export const TicketsPage: React.FC = () => {
           loading={loading}
           pagination={{
             pageSize: 10,
-            showTotal: total => `共 ${total} 条`,
+            showTotal: total => t('common.total', { count: total }),
           }}
         />
       </Card>
 
       <Modal
-        title="工单详情"
+        title={t('tickets.detail')}
         open={detailVisible}
         onCancel={() => setDetailVisible(false)}
         footer={null}
@@ -241,35 +249,35 @@ export const TicketsPage: React.FC = () => {
         {selectedTicket && (
           <div>
             <Descriptions column={2} bordered className="mb-4">
-              <Descriptions.Item label="工单号">
+              <Descriptions.Item label={t('tickets.ticketNo')}>
                 <code>{selectedTicket.ticketNo}</code>
               </Descriptions.Item>
-              <Descriptions.Item label="状态">
+              <Descriptions.Item label={t('common.status')}>
                 <Tag color={STATUS_COLORS[selectedTicket.status]}>
-                  {STATUS_LABELS[selectedTicket.status]}
+                  {getStatusLabel(selectedTicket.status)}
                 </Tag>
               </Descriptions.Item>
-              <Descriptions.Item label="客户姓名">{selectedTicket.customerName}</Descriptions.Item>
-              <Descriptions.Item label="客户邮箱">{selectedTicket.customerEmail}</Descriptions.Item>
-              <Descriptions.Item label="优先级">
+              <Descriptions.Item label={t('tickets.customerName')}>{selectedTicket.customerName}</Descriptions.Item>
+              <Descriptions.Item label={t('tickets.customerEmail')}>{selectedTicket.customerEmail}</Descriptions.Item>
+              <Descriptions.Item label={t('tickets.priority')}>
                 <Tag color={PRIORITY_COLORS[selectedTicket.priority]}>
-                  {PRIORITY_LABELS[selectedTicket.priority]}
+                  {getPriorityLabel(selectedTicket.priority)}
                 </Tag>
               </Descriptions.Item>
-              <Descriptions.Item label="负责人">
-                {selectedTicket.assignedTo || '未分配'}
+              <Descriptions.Item label={t('tickets.assignedTo')}>
+                {selectedTicket.assignedTo || t('tickets.unassigned')}
               </Descriptions.Item>
-              <Descriptions.Item label="主题" span={2}>
+              <Descriptions.Item label={t('tickets.subject')} span={2}>
                 {selectedTicket.subject}
               </Descriptions.Item>
-              <Descriptions.Item label="描述" span={2}>
+              <Descriptions.Item label={t('tickets.description')} span={2}>
                 {selectedTicket.description}
               </Descriptions.Item>
             </Descriptions>
 
             {selectedTicket.replies.length > 0 && (
               <div className="mt-4">
-                <h4 className="font-semibold mb-2">回复记录</h4>
+                <h4 className="font-semibold mb-2">{t('tickets.replies')}</h4>
                 {selectedTicket.replies.map(reply => (
                   <div
                     key={reply.id}
@@ -278,7 +286,7 @@ export const TicketsPage: React.FC = () => {
                     <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')}
+                        {formatDate(reply.createdAt)}
                       </span>
                     </div>
                     <div className="text-gray-700">{reply.content}</div>

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

@@ -25,10 +25,12 @@ 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'
+import { useLanguage } from '../i18n/useLanguage'
 
 type UserFormData = CreateUserRequest & { password?: string }
 
 export const UsersPage: React.FC = () => {
+  const { t, formatDate } = useLanguage()
   const [users, setUsers] = useState<User[]>([])
   const [modalVisible, setModalVisible] = useState(false)
   const [editingUser, setEditingUser] = useState<User | null>(null)
@@ -37,10 +39,10 @@ export const UsersPage: React.FC = () => {
 
   const fetchUsers = async () => {
     try {
-      const data = await api(apiClient.api.admin.users.$get()).withLoading('加载用户列表...').json()
+      const data = await api(apiClient.api.admin.users.$get()).withLoading(t('users.loading')).json()
       setUsers(data)
     } catch {
-      // 错误已由 api-request 自动处理
+      // handled by api-request
     }
   }
 
@@ -74,9 +76,9 @@ export const UsersPage: React.FC = () => {
             json: values,
           })
         )
-          .withLoading('更新中...')
+          .withLoading(t('users.updating'))
           .json()
-        message.success('用户更新成功')
+        message.success(t('users.updated'))
         setModalVisible(false)
         fetchUsers()
       } else {
@@ -91,14 +93,14 @@ export const UsersPage: React.FC = () => {
             },
           })
         )
-          .withLoading('创建中...')
+          .withLoading(t('users.creating'))
           .json()
-        message.success('用户创建成功')
+        message.success(t('users.created'))
         setModalVisible(false)
         fetchUsers()
       }
     } catch {
-      // 错误已由 api-request 自动处理
+      // handled by api-request
     }
   }
 
@@ -113,10 +115,10 @@ export const UsersPage: React.FC = () => {
       )
         .withLoading()
         .json()
-      message.success(newStatus === 'locked' ? '用户已锁定' : '用户已解锁')
+      message.success(newStatus === 'locked' ? t('users.userLocked') : t('users.userUnlocked'))
       fetchUsers()
     } catch {
-      // 错误已由 api-request 自动处理
+      // handled by api-request
     }
   }
 
@@ -127,63 +129,63 @@ export const UsersPage: React.FC = () => {
           param: { id: userId },
         })
       )
-        .withLoading('删除中...')
+        .withLoading(t('users.deleting'))
         .json()
-      message.success('用户已删除')
+      message.success(t('users.deleted'))
       fetchUsers()
     } catch {
-      // 错误已由 api-request 自动处理
+      // handled by api-request
     }
   }
 
   const getStatusTag = (status: string) => {
-    const statusConfig: Record<string, { color: string; text: string }> = {
-      active: { color: 'green', text: '正常' },
-      inactive: { color: 'orange', text: '未激活' },
-      locked: { color: 'red', text: '已锁定' },
+    const statusConfig: Record<string, { color: string; textKey: string }> = {
+      active: { color: 'green', textKey: 'users.active' },
+      inactive: { color: 'orange', textKey: 'users.inactive' },
+      locked: { color: 'red', textKey: 'users.locked' },
     }
     const config = statusConfig[status]
     if (!config) return <Tag>{status}</Tag>
-    return <Tag color={config.color}>{config.text}</Tag>
+    return <Tag color={config.color}>{t(config.textKey)}</Tag>
   }
 
   const columns: ColumnsType<User> = [
     {
-      title: '用户名',
+      title: t('users.username'),
       dataIndex: 'username',
       key: 'username',
     },
     {
-      title: '邮箱',
+      title: t('users.email'),
       dataIndex: 'email',
       key: 'email',
     },
     {
-      title: '角色',
+      title: t('users.role'),
       dataIndex: 'role',
       key: 'role',
       render: (role: Role) => <Tag color="blue">{roleLabels[role] || role}</Tag>,
     },
     {
-      title: '状态',
+      title: t('users.status'),
       dataIndex: 'status',
       key: 'status',
       render: (status: string) => getStatusTag(status),
     },
     {
-      title: '创建时间',
+      title: t('common.createdAt'),
       dataIndex: 'createdAt',
       key: 'createdAt',
-      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
+      render: (date: string) => formatDate(date),
     },
     {
-      title: '操作',
+      title: t('common.actions'),
       key: 'actions',
       render: (_: unknown, record: User) => (
         <Space>
           <PermissionGuard permission={Permission.USER_EDIT}>
             <Button type="link" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
-              编辑
+              {t('common.edit')}
             </Button>
           </PermissionGuard>
           <PermissionGuard permission={Permission.USER_EDIT}>
@@ -193,18 +195,18 @@ export const UsersPage: React.FC = () => {
               onClick={() => handleToggleLock(record)}
               danger={record.status !== 'locked'}
             >
-              {record.status === 'locked' ? '解锁' : '锁定'}
+              {record.status === 'locked' ? t('users.unlock') : t('users.lock')}
             </Button>
           </PermissionGuard>
           <PermissionGuard permission={Permission.USER_DELETE}>
             <Popconfirm
-              title="确定要删除此用户吗？"
+              title={t('users.deleteConfirm')}
               onConfirm={() => handleDelete(record.id)}
-              okText="确定"
-              cancelText="取消"
+              okText={t('common.confirm')}
+              cancelText={t('common.cancel')}
             >
               <Button type="link" icon={<DeleteOutlined />} danger>
-                删除
+                {t('common.delete')}
               </Button>
             </Popconfirm>
           </PermissionGuard>
@@ -216,11 +218,11 @@ export const UsersPage: React.FC = () => {
   return (
     <div className="p-6">
       <Card
-        title="用户管理"
+        title={t('users.title')}
         extra={
           <PermissionGuard permission={Permission.USER_CREATE}>
             <Button type="primary" icon={<PlusOutlined />} onClick={handleCreate}>
-              创建用户
+              {t('users.createUser')}
             </Button>
           </PermissionGuard>
         }
@@ -229,7 +231,7 @@ export const UsersPage: React.FC = () => {
       </Card>
 
       <Modal
-        title={editingUser ? '编辑用户' : '创建用户'}
+        title={editingUser ? t('users.editUser') : t('users.createUser')}
         open={modalVisible}
         onCancel={() => setModalVisible(false)}
         onOk={() => form.submit()}
@@ -238,42 +240,50 @@ export const UsersPage: React.FC = () => {
         <Form form={form} layout="vertical" onFinish={handleSubmit}>
           <Form.Item
             name="username"
-            label="用户名"
-            rules={[{ required: true, message: '请输入用户名' }]}
+            label={t('users.username')}
+            rules={[{ required: true, message: t('users.usernameRequired') }]}
           >
-            <Input placeholder="请输入用户名" />
+            <Input placeholder={t('users.usernamePlaceholder')} />
           </Form.Item>
           <Form.Item
             name="email"
-            label="邮箱"
+            label={t('users.email')}
             rules={[
-              { required: true, message: '请输入邮箱' },
-              { type: 'email', message: '请输入有效的邮箱地址' },
+              { required: true, message: t('users.emailRequired') },
+              { type: 'email', message: t('users.emailInvalid') },
             ]}
           >
-            <Input placeholder="请输入邮箱" />
+            <Input placeholder={t('users.emailPlaceholder')} />
           </Form.Item>
           {!editingUser && (
             <Form.Item
               name="password"
-              label="密码"
-              rules={[{ required: true, message: '请输入密码' }]}
+              label={t('users.password')}
+              rules={[{ required: true, message: t('users.passwordRequired') }]}
             >
-              <Input.Password placeholder="请输入密码" />
+              <Input.Password placeholder={t('users.passwordPlaceholder')} />
             </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>
+          <Form.Item
+            name="role"
+            label={t('users.role')}
+            rules={[{ required: true, message: t('users.roleRequired') }]}
+          >
+            <Select placeholder={t('users.rolePlaceholder')}>
+              <Select.Option value={Role.SUPER_ADMIN}>{t('users.superAdmin')}</Select.Option>
+              <Select.Option value={Role.CUSTOMER_SERVICE}>{t('users.customerService')}</Select.Option>
+              <Select.Option value={Role.USER}>{t('users.normalUser')}</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>
+          <Form.Item
+            name="status"
+            label={t('users.status')}
+            rules={[{ required: true, message: t('users.statusRequired') }]}
+          >
+            <Select placeholder={t('users.statusPlaceholder')}>
+              <Select.Option value="active">{t('users.active')}</Select.Option>
+              <Select.Option value="inactive">{t('users.inactive')}</Select.Option>
+              <Select.Option value="locked">{t('users.locked')}</Select.Option>
             </Select>
           </Form.Item>
         </Form>

package/template/src/admin/pages/__tests__/RolesPage.test.tsx

@@ -2,9 +2,9 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { RolesPage } from '../RolesPage'
-import type { RoleType } from '@shared/modules/role/schemas'
+import type { RoleDataType } from '@shared/modules/role/schemas'
 
-const mockRoles: RoleType[] = [
+const mockRoles: RoleDataType[] = [
   {
     id: '1',
     code: 'super_admin',

package/template/src/admin/stores/themeStore.ts

@@ -0,0 +1,32 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+type ThemeMode = 'light' | 'dark'
+
+interface ThemeState {
+  mode: ThemeMode
+  toggleTheme: () => void
+}
+
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set, get) => ({
+      mode: 'light' as ThemeMode,
+      toggleTheme: () => {
+        const newMode = get().mode === 'light' ? 'dark' : 'light'
+        document.documentElement.setAttribute('data-theme', newMode)
+        set({ mode: newMode })
+      },
+    }),
+    {
+      name: 'admin-theme',
+      onRehydrateStorage: () => {
+        return (state) => {
+          if (state) {
+            document.documentElement.setAttribute('data-theme', state.mode)
+          }
+        }
+      },
+    }
+  )
+)