create-fullstack-scaffold 0.4.9 → 0.4.11

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

@@ -5,30 +5,35 @@ import { PermissionGuard } from '../components/PermissionGuard'
 import { Permission } from '@shared/modules/permission'
 import { apiClient } from '../services/apiClient'
 import type { Order } from '@shared/modules/order'
-
-const STATUS_COLORS = {
-  pending: 'orange',
-  processing: 'blue',
-  completed: 'green',
-  cancelled: 'red',
-  disputed: 'purple',
-}
-
-const STATUS_LABELS = {
-  pending: '待处理',
-  processing: '处理中',
-  completed: '已完成',
-  cancelled: '已取消',
-  disputed: '争议中',
-}
+import { useLanguage } from '../i18n/useLanguage'
 
 export const OrdersPage: React.FC = () => {
+  const { t, formatDate } = useLanguage()
   const [orders, setOrders] = useState<Order[]>([])
   const [loading, setLoading] = useState(false)
   const [selectedOrder, setSelectedOrder] = useState<Order | null>(null)
   const [detailVisible, setDetailVisible] = useState(false)
   const [filterStatus, setFilterStatus] = useState<string | undefined>()
 
+  const STATUS_COLORS: Record<string, string> = {
+    pending: 'orange',
+    processing: 'blue',
+    completed: 'green',
+    cancelled: 'red',
+    disputed: 'purple',
+  }
+
+  const getLabel = (status: string) => {
+    const map: Record<string, string> = {
+      pending: t('orders.pending'),
+      processing: t('orders.processing'),
+      completed: t('orders.completed'),
+      cancelled: t('orders.cancelled'),
+      disputed: t('orders.disputed'),
+    }
+    return map[status] || status
+  }
+
   const fetchOrders = useCallback(async () => {
     setLoading(true)
     try {
@@ -42,14 +47,14 @@ export const OrdersPage: React.FC = () => {
       if (result.success) {
         setOrders(result.data)
       } else {
-        message.error(result.error || 'Failed to load orders')
+        message.error(result.error || t('orders.loadFailed'))
       }
     } catch {
-      message.error('获取订单列表失败')
+      message.error(t('orders.loadFailed'))
     } finally {
       setLoading(false)
     }
-  }, [filterStatus])
+  }, [filterStatus, t])
 
   useEffect(() => {
     fetchOrders()
@@ -62,18 +67,18 @@ export const OrdersPage: React.FC = () => {
       })
       const result = await response.json()
       if (result.success) {
-        message.success('订单已开始处理')
+        message.success(t('orders.orderProcessed'))
         fetchOrders()
       }
     } catch {
-      message.error('处理订单失败')
+      message.error(t('orders.processFailed'))
     }
   }
 
   const handleCancel = async (orderId: string) => {
     Modal.confirm({
-      title: '确认取消',
-      content: '确定要取消这个订单吗？',
+      title: t('orders.confirmCancel'),
+      content: t('orders.confirmCancelContent'),
       onOk: async () => {
         try {
           const response = await apiClient.api.orders[':id'].cancel.$put({
@@ -81,11 +86,11 @@ export const OrdersPage: React.FC = () => {
           })
           const result = await response.json()
           if (result.success) {
-            message.success('订单已取消')
+            message.success(t('orders.orderCancelled'))
             fetchOrders()
           }
         } catch {
-          message.error('取消订单失败')
+          message.error(t('orders.cancelFailed'))
         }
       },
     })
@@ -98,13 +103,13 @@ export const OrdersPage: React.FC = () => {
 
   const columns = [
     {
-      title: '订单号',
+      title: t('orders.orderNo'),
       dataIndex: 'orderNo',
       key: 'orderNo',
       render: (text: string) => <code className="text-sm">{text}</code>,
     },
     {
-      title: '客户信息',
+      title: t('orders.customer'),
       key: 'customer',
       render: (_: unknown, record: Order) => (
         <div>
@@ -114,12 +119,12 @@ export const OrdersPage: React.FC = () => {
       ),
     },
     {
-      title: '商品',
+      title: t('orders.product'),
       dataIndex: 'productName',
       key: 'productName',
     },
     {
-      title: '金额',
+      title: t('orders.amount'),
       dataIndex: 'amount',
       key: 'amount',
       render: (amount: number) => (
@@ -127,21 +132,21 @@ export const OrdersPage: React.FC = () => {
       ),
     },
     {
-      title: '状态',
+      title: t('orders.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]}>{getLabel(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: Order) => (
         <Space>
@@ -151,7 +156,7 @@ export const OrdersPage: React.FC = () => {
             icon={<Eye className="w-4 h-4" />}
             onClick={() => showDetail(record)}
           >
-            查看
+            {t('common.view')}
           </Button>
           <PermissionGuard permission={Permission.ORDER_PROCESS}>
             {record.status === 'pending' && (
@@ -161,7 +166,7 @@ export const OrdersPage: React.FC = () => {
                 icon={<CheckCircle className="w-4 h-4" />}
                 onClick={() => handleProcess(record.id)}
               >
-                处理
+                {t('orders.process')}
               </Button>
             )}
             {(record.status === 'pending' || record.status === 'processing') && (
@@ -172,7 +177,7 @@ export const OrdersPage: React.FC = () => {
                 icon={<XCircle className="w-4 h-4" />}
                 onClick={() => handleCancel(record.id)}
               >
-                取消
+                {t('orders.cancelOrder')}
               </Button>
             )}
           </PermissionGuard>
@@ -185,25 +190,25 @@ export const OrdersPage: 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('orders.title')}</h1>
+          <p className="text-gray-600 mt-1">{t('orders.subtitle')}</p>
         </div>
         <Space>
           <Select
-            placeholder="筛选状态"
+            placeholder={t('orders.filterStatus')}
             style={{ width: 150 }}
             allowClear
             value={filterStatus}
             onChange={setFilterStatus}
             options={[
-              { value: 'pending', label: '待处理' },
-              { value: 'processing', label: '处理中' },
-              { value: 'completed', label: '已完成' },
-              { value: 'cancelled', label: '已取消' },
-              { value: 'disputed', label: '争议中' },
+              { value: 'pending', label: t('orders.pending') },
+              { value: 'processing', label: t('orders.processing') },
+              { value: 'completed', label: t('orders.completed') },
+              { value: 'cancelled', label: t('orders.cancelled') },
+              { value: 'disputed', label: t('orders.disputed') },
             ]}
           />
-          <Button onClick={fetchOrders}>刷新</Button>
+          <Button onClick={fetchOrders}>{t('common.refresh')}</Button>
         </Space>
       </div>
 
@@ -211,7 +216,7 @@ export const OrdersPage: 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('orders.totalOrders')}</div>
               <div className="text-2xl font-bold">{orders.length}</div>
             </div>
             <DollarSign className="w-8 h-8 text-blue-500" />
@@ -220,7 +225,7 @@ export const OrdersPage: 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('orders.pending')}</div>
               <div className="text-2xl font-bold text-orange-500">
                 {orders.filter(o => o.status === 'pending').length}
               </div>
@@ -231,7 +236,7 @@ export const OrdersPage: 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('orders.processing')}</div>
               <div className="text-2xl font-bold text-blue-500">
                 {orders.filter(o => o.status === 'processing').length}
               </div>
@@ -242,7 +247,7 @@ export const OrdersPage: 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('orders.completed')}</div>
               <div className="text-2xl font-bold text-green-500">
                 {orders.filter(o => o.status === 'completed').length}
               </div>
@@ -260,13 +265,13 @@ export const OrdersPage: React.FC = () => {
           loading={loading}
           pagination={{
             pageSize: 10,
-            showTotal: total => `共 ${total} 条`,
+            showTotal: total => t('common.total', { count: total }),
           }}
         />
       </Card>
 
       <Modal
-        title="订单详情"
+        title={t('orders.detail')}
         open={detailVisible}
         onCancel={() => setDetailVisible(false)}
         footer={null}
@@ -274,27 +279,27 @@ export const OrdersPage: React.FC = () => {
       >
         {selectedOrder && (
           <Descriptions column={1} bordered>
-            <Descriptions.Item label="订单号">
+            <Descriptions.Item label={t('orders.orderNo')}>
               <code>{selectedOrder.orderNo}</code>
             </Descriptions.Item>
-            <Descriptions.Item label="客户姓名">{selectedOrder.customerName}</Descriptions.Item>
-            <Descriptions.Item label="客户邮箱">{selectedOrder.customerEmail}</Descriptions.Item>
-            <Descriptions.Item label="商品名称">{selectedOrder.productName}</Descriptions.Item>
-            <Descriptions.Item label="订单金额">
+            <Descriptions.Item label={t('orders.customerName')}>{selectedOrder.customerName}</Descriptions.Item>
+            <Descriptions.Item label={t('orders.customerEmail')}>{selectedOrder.customerEmail}</Descriptions.Item>
+            <Descriptions.Item label={t('orders.productName')}>{selectedOrder.productName}</Descriptions.Item>
+            <Descriptions.Item label={t('orders.orderAmount')}>
               <span className="text-lg font-bold text-green-600">
                 ¥{selectedOrder.amount.toFixed(2)}
               </span>
             </Descriptions.Item>
-            <Descriptions.Item label="订单状态">
+            <Descriptions.Item label={t('orders.orderStatus')}>
               <Tag color={STATUS_COLORS[selectedOrder.status]}>
-                {STATUS_LABELS[selectedOrder.status]}
+                {getLabel(selectedOrder.status)}
               </Tag>
             </Descriptions.Item>
-            <Descriptions.Item label="创建时间">
-              {new Date(selectedOrder.createdAt).toLocaleString('zh-CN')}
+            <Descriptions.Item label={t('common.createdAt')}>
+              {formatDate(selectedOrder.createdAt)}
             </Descriptions.Item>
-            <Descriptions.Item label="更新时间">
-              {new Date(selectedOrder.updatedAt).toLocaleString('zh-CN')}
+            <Descriptions.Item label={t('orders.updatedAt')}>
+              {formatDate(selectedOrder.updatedAt)}
             </Descriptions.Item>
           </Descriptions>
         )}

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

@@ -2,8 +2,10 @@ import { Card, Table, Tag } from 'antd'
 import { usePermissions } from '../hooks/usePermissions'
 import { usePermissionCategories, useRoleLabels, usePermissionLabels } from '../hooks/useConfig'
 import type { PermissionInfo, Permission } from '@shared/modules/permission'
+import { useLanguage } from '../i18n/useLanguage'
 
 export const PermissionsPage: React.FC = () => {
+  const { t } = useLanguage()
   const { allPermissions, roles, loading } = usePermissions()
   const { categories } = usePermissionCategories()
   const { roleLabels } = useRoleLabels()
@@ -20,13 +22,13 @@ export const PermissionsPage: React.FC = () => {
 
   const columns = [
     {
-      title: '权限',
+      title: t('permissions.permission'),
       dataIndex: 'permission',
       key: 'permission',
       render: (permission: Permission) => permissionLabels[permission] || permission,
     },
     {
-      title: '超级管理员',
+      title: t('permissions.superAdmin'),
       key: 'superAdmin',
       render: (_: unknown, record: PermissionInfo) => {
         const role = roles.find(r => r.role === 'super_admin')
@@ -35,7 +37,7 @@ export const PermissionsPage: React.FC = () => {
       },
     },
     {
-      title: '客服人员',
+      title: t('permissions.customerService'),
       key: 'customerService',
       render: (_: unknown, record: PermissionInfo) => {
         const role = roles.find(r => r.role === 'customer_service')
@@ -44,7 +46,7 @@ export const PermissionsPage: React.FC = () => {
       },
     },
     {
-      title: '普通用户',
+      title: t('permissions.normalUser'),
       key: 'user',
       render: (_: unknown, record: PermissionInfo) => {
         const role = roles.find(r => r.role === 'user')
@@ -56,9 +58,9 @@ export const PermissionsPage: React.FC = () => {
 
   return (
     <div className="p-6">
-      <h1 className="text-2xl font-bold mb-6">权限管理</h1>
+      <h1 className="text-2xl font-bold mb-6">{t('permissions.title')}</h1>
 
-      <Card title="角色列表" className="mb-6">
+      <Card title={t('permissions.roleList')} className="mb-6">
         <div className="grid grid-cols-3 gap-4">
           {roles.map(role => (
             <Card key={role.role} size="small">
@@ -66,14 +68,14 @@ export const PermissionsPage: React.FC = () => {
                 {roleLabels[role.role] || role.role}
               </div>
               <div className="text-sm text-gray-500">
-                权限数量: {role.permissions.length}
+                {t('permissions.permissionCount', { count: role.permissions.length })}
               </div>
             </Card>
           ))}
         </div>
       </Card>
 
-      <Card title="权限矩阵">
+      <Card title={t('permissions.permissionMatrix')}>
         {Object.entries(groupedPermissions).map(([category, permissions]) => (
           <div key={category} className="mb-6">
             <h3 className="text-lg font-semibold mb-3">

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

@@ -13,6 +13,7 @@ import {
 import type { ColumnsType } from 'antd/es/table'
 import { apiClient, api } from '../services/apiClient'
 import type { AdminDashboardStats, AdminPlugin } from '@shared/modules/plugins'
+import { useLanguage } from '../i18n/useLanguage'
 
 const STATUS_CONFIG: Record<string, { color: string; label: string }> = {
   pending: { color: 'orange', label: '待审核' },
@@ -21,6 +22,7 @@ const STATUS_CONFIG: Record<string, { color: string; label: string }> = {
 }
 
 export const PluginDashboardPage: React.FC = () => {
+  const { formatDate } = useLanguage()
   const [stats, setStats] = useState<AdminDashboardStats | null>(null)
   const [recentSubmissions, setRecentSubmissions] = useState<AdminPlugin[]>([])
   const [loading, setLoading] = useState(true)
@@ -175,7 +177,7 @@ export const PluginDashboardPage: React.FC = () => {
       title: '提交时间',
       dataIndex: 'createdAt',
       key: 'createdAt',
-      render: (ts: number) => new Date(ts).toLocaleString('zh-CN'),
+      render: (ts: number) => formatDate(new Date(ts).toISOString()),
     },
     {
       title: '操作',

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

@@ -4,6 +4,7 @@ import { CheckCircle, XCircle, Star, Download, Trash2, Search, RefreshCw } from
 import type { ColumnsType } from 'antd/es/table'
 import { apiClient, api } from '../services/apiClient'
 import type { Plugin } from '@shared/modules/plugins'
+import { useLanguage } from '../i18n/useLanguage'
 
 type PluginStatus = 'pending' | 'approved' | 'rejected'
 
@@ -23,6 +24,7 @@ const STATUS_OPTIONS = [
 ]
 
 export const PluginManagementPage: React.FC = () => {
+  const { formatDate } = useLanguage()
   const [plugins, setPlugins] = useState<Plugin[]>([])
   const [total, setTotal] = useState(0)
   const [page, setPage] = useState(1)
@@ -201,7 +203,7 @@ export const PluginManagementPage: React.FC = () => {
       title: '更新时间',
       dataIndex: 'updatedAt',
       key: 'updatedAt',
-      render: (ts: number) => new Date(ts).toLocaleString('zh-CN'),
+      render: (ts: number) => formatDate(new Date(ts).toISOString()),
       sorter: (a: Plugin, b: Plugin) => a.updatedAt - b.updatedAt,
       defaultSortOrder: 'descend',
     },

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

@@ -4,12 +4,14 @@ import { useNavigate, Link } from 'react-router-dom'
 import { useState } from 'react'
 import { apiClient } from '../services/apiClient'
 import type { RegisterRequest } from '@shared/modules/admin'
+import { useLanguage } from '../i18n/useLanguage'
 
 interface RegisterForm extends RegisterRequest {
   confirmPassword: string
 }
 
 export const RegisterPage: React.FC = () => {
+  const { t } = useLanguage()
   const navigate = useNavigate()
   const [form] = Form.useForm<RegisterForm>()
   const [loading, setLoading] = useState(false)
@@ -26,13 +28,13 @@ export const RegisterPage: React.FC = () => {
       })
       const result = await response.json()
       if (result.success) {
-        message.success('Registration successful! Please login.')
+        message.success(t('register.success'))
         navigate('/login')
       } else {
-        message.error(result.error || 'Registration failed!')
+        message.error(result.error || t('register.failed'))
       }
     } catch (error) {
-      message.error((error as Error).message || 'Registration failed!')
+      message.error((error as Error).message || t('register.failed'))
     } finally {
       setLoading(false)
     }
@@ -40,59 +42,59 @@ export const RegisterPage: React.FC = () => {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <Card className="w-full max-w-md" title="Admin Registration">
+      <Card className="w-full max-w-md" title={t('register.title')}>
         <Spin spinning={loading}>
           <Form form={form} onFinish={handleSubmit} layout="vertical">
             <Form.Item
               name="username"
-              rules={[{ required: true, message: 'Please input username!' }]}
+              rules={[{ required: true, message: t('register.usernameRequired') }]}
             >
-              <Input prefix={<UserOutlined />} placeholder="Username" size="large" />
+              <Input prefix={<UserOutlined />} placeholder={t('register.username')} size="large" />
             </Form.Item>
             <Form.Item
               name="email"
-              rules={[{ required: true, type: 'email', message: 'Please input valid email!' }]}
+              rules={[{ required: true, type: 'email', message: t('register.emailRequired') }]}
             >
-              <Input prefix={<MailOutlined />} placeholder="Email" size="large" />
+              <Input prefix={<MailOutlined />} placeholder={t('register.email')} size="large" />
             </Form.Item>
             <Form.Item
               name="password"
               rules={[
-                { required: true, min: 6, message: 'Password must be at least 6 characters!' },
+                { required: true, min: 6, message: t('register.passwordMin') },
               ]}
             >
-              <Input.Password prefix={<LockOutlined />} placeholder="Password" size="large" />
+              <Input.Password prefix={<LockOutlined />} placeholder={t('register.password')} size="large" />
             </Form.Item>
             <Form.Item
               name="confirmPassword"
               dependencies={['password']}
               rules={[
-                { required: true, message: 'Please confirm password!' },
+                { required: true, message: t('register.confirmRequired') },
                 ({ getFieldValue }) => ({
                   validator(_, value) {
                     if (!value || getFieldValue('password') === value) {
                       return Promise.resolve()
                     }
-                    return Promise.reject(new Error('Passwords do not match!'))
+                    return Promise.reject(new Error(t('register.passwordMismatch')))
                   },
                 }),
               ]}
             >
               <Input.Password
                 prefix={<LockOutlined />}
-                placeholder="Confirm Password"
+                placeholder={t('register.confirmPassword')}
                 size="large"
               />
             </Form.Item>
             <Form.Item>
               <Button type="primary" htmlType="submit" size="large" block loading={loading}>
-                Register
+                {t('register.submit')}
               </Button>
             </Form.Item>
             <div className="text-center">
-              <span className="text-gray-500">Already have an account? </span>
+              <span className="text-gray-500">{t('register.hasAccount')}</span>
               <Link to="/login" className="text-blue-500 hover:underline">
-                Login
+                {t('register.loginLink')}
               </Link>
             </div>
           </Form>