create-fullstack-scaffold 0.4.9 → 0.4.10

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

@@ -5,35 +5,43 @@ import { PermissionGuard } from '../components/PermissionGuard'
 import { Permission } from '@shared/modules/permission'
 import { apiClient } from '../services/apiClient'
 import type { Dispute } from '@shared/modules/dispute'
+import { useLanguage } from '../i18n/useLanguage'
 
-const TYPE_LABELS = {
-  refund: '退款争议',
-  product_quality: '商品质量',
-  service_quality: '服务质量',
-  delivery: '配送问题',
-  other: '其他',
-}
-
-const STATUS_COLORS = {
+const STATUS_COLORS: Record<string, string> = {
   pending: 'orange',
   investigating: 'blue',
   resolved: 'green',
   rejected: 'red',
 }
 
-const STATUS_LABELS = {
-  pending: '待处理',
-  investigating: '调查中',
-  resolved: '已解决',
-  rejected: '已驳回',
-}
-
 export const DisputesPage: React.FC = () => {
+  const { t, formatDate } = useLanguage()
   const [disputes, setDisputes] = useState<Dispute[]>([])
   const [loading, setLoading] = useState(false)
   const [selectedDispute, setSelectedDispute] = useState<Dispute | null>(null)
   const [detailVisible, setDetailVisible] = useState(false)
 
+  const getTypeLabel = (type: string) => {
+    const map: Record<string, string> = {
+      refund: t('disputes.typeRefund'),
+      product_quality: t('disputes.typeProductQuality'),
+      service_quality: t('disputes.typeServiceQuality'),
+      delivery: t('disputes.typeDelivery'),
+      other: t('disputes.typeOther'),
+    }
+    return map[type] || type
+  }
+
+  const getStatusLabel = (status: string) => {
+    const map: Record<string, string> = {
+      pending: t('disputes.statusPending'),
+      investigating: t('disputes.statusInvestigating'),
+      resolved: t('disputes.statusResolved'),
+      rejected: t('disputes.statusRejected'),
+    }
+    return map[status] || status
+  }
+
   useEffect(() => {
     fetchDisputes()
   }, [])
@@ -46,10 +54,10 @@ export const DisputesPage: React.FC = () => {
       if (result.success) {
         setDisputes(result.data)
       } else {
-        message.error(result.error || 'Failed to load disputes')
+        message.error(result.error || t('disputes.loadFailed'))
       }
     } catch {
-      message.error('获取争议列表失败')
+      message.error(t('disputes.loadFailed'))
     } finally {
       setLoading(false)
     }
@@ -57,11 +65,11 @@ export const DisputesPage: React.FC = () => {
 
   const handleResolve = (dispute: Dispute) => {
     Modal.confirm({
-      title: '解决争议',
+      title: t('disputes.resolveDispute'),
       content: (
         <div>
-          <p>确定要解决这个争议吗？</p>
-          <p>金额：¥{dispute.amount.toFixed(2)}</p>
+          <p>{t('disputes.confirmResolve')}</p>
+          <p>¥{dispute.amount.toFixed(2)}</p>
         </div>
       ),
       onOk: async () => {
@@ -75,11 +83,11 @@ export const DisputesPage: React.FC = () => {
           })
           const result = await response.json()
           if (result.success) {
-            message.success('争议已解决')
+            message.success(t('disputes.disputeResolved'))
             fetchDisputes()
           }
         } catch {
-          message.error('解决争议失败')
+          message.error(t('disputes.resolveFailed'))
         }
       },
     })
@@ -92,18 +100,18 @@ export const DisputesPage: React.FC = () => {
 
   const columns = [
     {
-      title: '争议编号',
+      title: t('disputes.disputeNo'),
       dataIndex: 'disputeNo',
       key: 'disputeNo',
       render: (text: string) => <code className="text-sm">{text}</code>,
     },
     {
-      title: '订单号',
+      title: t('disputes.orderNo'),
       dataIndex: 'orderNo',
       key: 'orderNo',
     },
     {
-      title: '客户',
+      title: t('disputes.customer'),
       key: 'customer',
       render: (_: unknown, record: Dispute) => (
         <div>
@@ -113,13 +121,13 @@ export const DisputesPage: React.FC = () => {
       ),
     },
     {
-      title: '类型',
+      title: t('disputes.type'),
       dataIndex: 'type',
       key: 'type',
-      render: (type: keyof typeof TYPE_LABELS) => TYPE_LABELS[type],
+      render: (type: string) => getTypeLabel(type),
     },
     {
-      title: '金额',
+      title: t('disputes.amount'),
       dataIndex: 'amount',
       key: 'amount',
       render: (amount: number) => (
@@ -127,21 +135,21 @@ export const DisputesPage: React.FC = () => {
       ),
     },
     {
-      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: Dispute) => (
         <Space>
@@ -151,7 +159,7 @@ export const DisputesPage: React.FC = () => {
             icon={<Eye className="w-4 h-4" />}
             onClick={() => showDetail(record)}
           >
-            查看
+            {t('common.view')}
           </Button>
           <PermissionGuard permission={Permission.TICKET_CLOSE}>
             {(record.status === 'pending' || record.status === 'investigating') && (
@@ -161,7 +169,7 @@ export const DisputesPage: React.FC = () => {
                 icon={<CheckCircle className="w-4 h-4" />}
                 onClick={() => handleResolve(record)}
               >
-                解决
+                {t('disputes.resolve')}
               </Button>
             )}
           </PermissionGuard>
@@ -174,17 +182,17 @@ export const DisputesPage: 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('disputes.title')}</h1>
+          <p className="text-gray-600 mt-1">{t('disputes.subtitle')}</p>
         </div>
-        <Button onClick={fetchDisputes}>刷新</Button>
+        <Button onClick={fetchDisputes}>{t('common.refresh')}</Button>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 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('disputes.totalDisputes')}</div>
               <div className="text-2xl font-bold">{disputes.length}</div>
             </div>
             <AlertTriangle className="w-8 h-8 text-orange-500" />
@@ -193,7 +201,7 @@ export const DisputesPage: 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('disputes.pending')}</div>
               <div className="text-2xl font-bold text-orange-500">
                 {disputes.filter(d => d.status === 'pending').length}
               </div>
@@ -204,7 +212,7 @@ export const DisputesPage: 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('disputes.resolved')}</div>
               <div className="text-2xl font-bold text-green-500">
                 {disputes.filter(d => d.status === 'resolved').length}
               </div>
@@ -225,7 +233,7 @@ export const DisputesPage: React.FC = () => {
       </Card>
 
       <Modal
-        title="争议详情"
+        title={t('disputes.detail')}
         open={detailVisible}
         onCancel={() => setDetailVisible(false)}
         footer={null}
@@ -233,27 +241,27 @@ export const DisputesPage: React.FC = () => {
       >
         {selectedDispute && (
           <Descriptions column={1} bordered>
-            <Descriptions.Item label="争议编号">
+            <Descriptions.Item label={t('disputes.disputeNo')}>
               <code>{selectedDispute.disputeNo}</code>
             </Descriptions.Item>
-            <Descriptions.Item label="订单号">{selectedDispute.orderNo}</Descriptions.Item>
-            <Descriptions.Item label="客户">
+            <Descriptions.Item label={t('disputes.orderNo')}>{selectedDispute.orderNo}</Descriptions.Item>
+            <Descriptions.Item label={t('disputes.customer')}>
               {selectedDispute.customerName} ({selectedDispute.customerEmail})
             </Descriptions.Item>
-            <Descriptions.Item label="类型">{TYPE_LABELS[selectedDispute.type]}</Descriptions.Item>
-            <Descriptions.Item label="金额">
+            <Descriptions.Item label={t('disputes.type')}>{getTypeLabel(selectedDispute.type)}</Descriptions.Item>
+            <Descriptions.Item label={t('disputes.amount')}>
               <span className="text-lg font-bold text-red-600">
                 ¥{selectedDispute.amount.toFixed(2)}
               </span>
             </Descriptions.Item>
-            <Descriptions.Item label="状态">
+            <Descriptions.Item label={t('common.status')}>
               <Tag color={STATUS_COLORS[selectedDispute.status]}>
-                {STATUS_LABELS[selectedDispute.status]}
+                {getStatusLabel(selectedDispute.status)}
               </Tag>
             </Descriptions.Item>
-            <Descriptions.Item label="描述">{selectedDispute.description}</Descriptions.Item>
+            <Descriptions.Item label={t('tickets.description')}>{selectedDispute.description}</Descriptions.Item>
             {selectedDispute.resolution && (
-              <Descriptions.Item label="解决方案">{selectedDispute.resolution}</Descriptions.Item>
+              <Descriptions.Item label={t('disputes.resolution')}>{selectedDispute.resolution}</Descriptions.Item>
             )}
           </Descriptions>
         )}

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

@@ -4,75 +4,83 @@ import { useNavigate, Link } from 'react-router-dom'
 import { useAdminStore } from '../stores/adminStore'
 import { Role } from '@shared/modules/permission'
 import type { LoginRequest } from '@shared/modules/admin'
+import { useLanguage } from '../i18n/useLanguage'
 
 interface QuickLoginAccount extends LoginRequest {
   username: string
   password: string
   role: Role
-  label: string
+  labelKey: string
   color: string
 }
 
-const QUICK_LOGIN_ACCOUNTS: QuickLoginAccount[] = [
-  {
-    username: 'superadmin',
-    password: '123456',
-    role: Role.SUPER_ADMIN,
-    label: '超级管理员',
-    color: 'red',
-  },
-  {
-    username: 'customerservice',
-    password: '123456',
-    role: Role.CUSTOMER_SERVICE,
-    label: '客服人员',
-    color: 'blue',
-  },
-  { username: 'user1', password: '123456', role: Role.USER, label: '普通用户', color: 'green' },
-]
-
 export const LoginPage: React.FC = () => {
+  const { t } = useLanguage()
   const navigate = useNavigate()
   const [form] = Form.useForm<LoginRequest>()
   const { login, loading } = useAdminStore()
 
+  const QUICK_LOGIN_ACCOUNTS: QuickLoginAccount[] = [
+    {
+      username: 'superadmin',
+      password: '123456',
+      role: Role.SUPER_ADMIN,
+      labelKey: 'login.superAdmin',
+      color: 'red',
+    },
+    {
+      username: 'customerservice',
+      password: '123456',
+      role: Role.CUSTOMER_SERVICE,
+      labelKey: 'login.customerService',
+      color: 'blue',
+    },
+    {
+      username: 'user1',
+      password: '123456',
+      role: Role.USER,
+      labelKey: 'login.normalUser',
+      color: 'green',
+    },
+  ]
+
   const handleSubmit = async (values: LoginRequest) => {
     try {
       await login(values.username, values.password)
-      message.success('登录成功！')
+      message.success(t('login.success'))
       navigate('/dashboard')
     } catch (error) {
-      message.error((error as Error).message || '登录失败！')
+      message.error((error as Error).message || t('login.failed'))
     }
   }
 
   const handleQuickLogin = async (account: QuickLoginAccount) => {
     try {
       await login(account.username, account.password)
-      message.success(`已以${account.label}身份登录！`)
+      message.success(t('login.quickLoginAs', { role: t(account.labelKey) }))
       navigate('/dashboard')
     } catch (error) {
-      message.error((error as Error).message || '登录失败！')
+      message.error((error as Error).message || t('login.failed'))
     }
   }
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <Card className="w-full max-w-md" title="管理后台登录">
+      <Card className="w-full max-w-md" title={t('login.title')}>
         <Spin spinning={loading}>
           <Form form={form} onFinish={handleSubmit} layout="vertical" data-testid="admin-login-form">
-            <Form.Item name="username" rules={[{ required: true, message: '请输入用户名！' }]}>
+            <Form.Item name="username" rules={[{ required: true, message: t('login.usernameRequired') }]}>
               <Input
                 prefix={<UserOutlined />}
-                placeholder="用户名"
+                placeholder={t('login.username')}
                 size="large"
                 data-testid="admin-login-username"
               />
             </Form.Item>
-            <Form.Item name="password" rules={[{ required: true, message: '请输入密码！' }]}>
+            <Form.Item name="password" rules={[{ required: true, message: t('login.passwordRequired') }]}>
               <Input.Password
                 prefix={<LockOutlined />}
-                placeholder="密码"
+                placeholder={t('login.password')}
                 size="large"
                 data-testid="admin-login-password"
               />
@@ -86,19 +94,19 @@ export const LoginPage: React.FC = () => {
                 loading={loading}
                 data-testid="admin-login-submit"
               >
-                登录
+                {t('login.submit')}
               </Button>
             </Form.Item>
             <div className="text-center">
-              <span className="text-gray-500">还没有账号？ </span>
+              <span className="text-gray-500">{t('login.noAccount')}</span>
               <Link to="/register" className="text-blue-500 hover:underline">
-                注册
+                {t('login.register')}
               </Link>
             </div>
           </Form>
         </Spin>
 
-        <Divider>快速登录</Divider>
+        <Divider>{t('login.quickLogin')}</Divider>
 
         <div className="space-y-2">
           {QUICK_LOGIN_ACCOUNTS.map(account => (
@@ -110,7 +118,7 @@ export const LoginPage: React.FC = () => {
               loading={loading}
               className="flex items-center justify-between"
             >
-              <span>{account.label}</span>
+              <span>{t(account.labelKey)}</span>
               <span className="text-gray-400 text-sm">{account.username}</span>
             </Button>
           ))}