fix: add i18n to all pages and fix host.docker.internal DNS in Docker

- Replace all hardcoded English text across PITR, Agents, Audit, and Org pages
  with t() translation calls. Default UI language is Chinese, switches to
  English when selected.
- Add extra_hosts to server service in docker-compose.yml so that
  host.docker.internal resolves correctly on Linux/WSL2 Docker environments,
  allowing PITR recovery to connect to MySQL on the host machine.
- Add 20+ missing i18n translation keys to zh.json and en.json.

Author: Developer

docker-compose.yml

@@ -44,6 +44,8 @@ services:
     environment:
       DATABASE_URL: "root:pitr_test@tcp(mysql:3306)/pitr_server"
       LISTEN_ADDR: ":8080"
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
     depends_on:
       mysql:
         condition: service_healthy

web/src/locales/en.json

@@ -58,7 +58,12 @@
     "created": "Organization created",
     "createFailed": "Failed to create organization",
     "invited": "Member invited",
-    "inviteFailed": "Failed to invite member"
+    "inviteFailed": "Failed to invite member",
+    "member": "Member",
+    "admin": "Admin",
+    "settingsTitle": "Organization Settings",
+    "generalSettings": "General Settings",
+    "settingsDesc": "Organization settings will be available here. Admin access is required to modify settings."
   },
   "agents": {
     "title": "Agents",
@@ -89,7 +94,17 @@
     "viewDetail": "View Details",
     "delete": "Delete",
     "detail": "Agent Details",
-    "hostnameRequired": "Please enter the hostname"
+    "hostnameRequired": "Please enter the hostname",
+    "hostnamePlaceholder": "e.g. db-server-01",
+    "mysqlVersionPlaceholder": "e.g. 8.0.32",
+    "id": "ID",
+    "back": "Back",
+    "backToList": "Back to Agents",
+    "approve": "Approve Agent",
+    "approveSuccess": "Agent approved",
+    "approveFailed": "Failed to approve agent",
+    "rejectConfirmDetail": "Are you sure you want to reject this agent?",
+    "loadDetailFailed": "Failed to load agent details"
   },
   "pitr": {
     "title": "PITR Recovery",
@@ -151,7 +166,15 @@
     "viewAuditLog": "View Audit Log",
     "mysqlDsn": "MySQL DSN",
     "mysqlDsnHelp": "Format: user:password@tcp(host:port)/database",
-    "mysqlDsnPlaceholder": "user:password@tcp(127.0.0.1:3306)/database"
+    "mysqlDsnPlaceholder": "user:password@tcp(127.0.0.1:3306)/database",
+    "targetTablePlaceholder": "e.g. mydb.orders",
+    "calculating": "Calculating...",
+    "updatedAt": "Updated At",
+    "loadFailed": "Failed to load PITR operations",
+    "noOperations": "No PITR operations yet",
+    "noOperationsFiltered": "No PITR operations found in this time range",
+    "operationId": "Operation ID",
+    "agentId": "Agent ID"
   },
   "audit": {
     "title": "Audit Log",
@@ -194,6 +217,7 @@
   "common": {
     "loading": "Loading...",
     "error": "Error",
+    "success": "Success",
     "retry": "Retry",
     "cancel": "Cancel",
     "confirm": "Confirm",

web/src/locales/zh.json

@@ -58,7 +58,12 @@
     "created": "组织创建成功",
     "createFailed": "创建组织失败",
     "invited": "成员邀请成功",
-    "inviteFailed": "邀请成员失败"
+    "inviteFailed": "邀请成员失败",
+    "member": "成员",
+    "admin": "管理员",
+    "settingsTitle": "组织设置",
+    "generalSettings": "通用设置",
+    "settingsDesc": "组织设置将在此处提供。需要管理员权限才能修改。"
   },
   "agents": {
     "title": "代理",
@@ -89,7 +94,17 @@
     "viewDetail": "查看详情",
     "delete": "删除",
     "detail": "代理详情",
-    "hostnameRequired": "请输入主机名"
+    "hostnameRequired": "请输入主机名",
+    "hostnamePlaceholder": "例如 db-server-01",
+    "mysqlVersionPlaceholder": "例如 8.0.32",
+    "id": "ID",
+    "back": "返回",
+    "backToList": "返回代理列表",
+    "approve": "批准代理",
+    "approveSuccess": "代理已批准",
+    "approveFailed": "批准代理失败",
+    "rejectConfirmDetail": "确定要拒绝该代理吗？",
+    "loadDetailFailed": "加载代理详情失败"
   },
   "pitr": {
     "title": "PITR 恢复",
@@ -151,7 +166,15 @@
     "viewAuditLog": "查看审计日志",
     "mysqlDsn": "MySQL 连接串",
     "mysqlDsnHelp": "格式：user:password@tcp(host:port)/database",
-    "mysqlDsnPlaceholder": "user:password@tcp(127.0.0.1:3306)/database"
+    "mysqlDsnPlaceholder": "user:password@tcp(127.0.0.1:3306)/database",
+    "targetTablePlaceholder": "例如 mydb.orders",
+    "calculating": "计算中...",
+    "updatedAt": "更新时间",
+    "loadFailed": "加载 PITR 操作失败",
+    "noOperations": "暂无 PITR 恢复操作",
+    "noOperationsFiltered": "该时间范围内暂无 PITR 恢复操作",
+    "operationId": "操作 ID",
+    "agentId": "代理 ID"
   },
   "audit": {
     "title": "审计日志",
@@ -194,6 +217,7 @@
   "common": {
     "loading": "加载中...",
     "error": "出错了",
+    "success": "操作成功",
     "retry": "重试",
     "cancel": "取消",
     "confirm": "确认",

web/src/pages/agents/AgentDetailPage.tsx

@@ -4,6 +4,7 @@ import { Card, Descriptions, Badge, Button, Spin, Typography, message, Space, Mo
 import { ArrowLeftOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import { getAgent, approveAgent, rejectAgent } from '../../api/agents';
+import { useLocale } from '../../hooks/useLocale';
 
 const { Title } = Typography;
 
@@ -17,6 +18,7 @@ export default function AgentDetailPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+  const { t } = useLocale();
 
   const { data: agent, isLoading, error } = useQuery({
     queryKey: ['agent', id],
@@ -27,32 +29,32 @@ export default function AgentDetailPage() {
   const approveMutation = useMutation({
     mutationFn: () => approveAgent(id!),
     onSuccess: () => {
-      message.success('Agent approved');
+      message.success(t('agents.approveSuccess'));
       queryClient.invalidateQueries({ queryKey: ['agent', id] });
     },
     onError: () => {
-      message.error('Failed to approve agent');
+      message.error(t('agents.approveFailed'));
     },
   });
 
   const rejectMutation = useMutation({
     mutationFn: () => rejectAgent(id!),
     onSuccess: () => {
-      message.success('Agent rejected');
+      message.success(t('agents.rejected'));
       navigate('/agents');
     },
     onError: () => {
-      message.error('Failed to reject agent');
+      message.error(t('agents.rejectFailed'));
     },
   });
 
   const showRejectConfirm = () => {
     Modal.confirm({
-      title: 'Reject Agent',
-      content: 'Are you sure you want to reject this agent?',
-      okText: 'Confirm',
+      title: t('agents.rejectTitle'),
+      content: t('agents.rejectConfirmDetail'),
+      okText: t('common.confirm'),
       okType: 'danger',
-      cancelText: 'Cancel',
+      cancelText: t('common.cancel'),
       onOk: () => rejectMutation.mutate(),
     });
   };
@@ -65,9 +67,9 @@ export default function AgentDetailPage() {
     return (
       <Card>
         <div style={{ textAlign: 'center', padding: 48 }}>
-          <Typography.Text type="danger">Failed to load agent details.</Typography.Text>
+          <Typography.Text type="danger">{t('agents.loadDetailFailed')}</Typography.Text>
           <br /><br />
-          <Button onClick={() => navigate('/agents')}>Back to Agents</Button>
+          <Button onClick={() => navigate('/agents')}>{t('agents.backToList')}</Button>
         </div>
       </Card>
     );
@@ -77,7 +79,7 @@ export default function AgentDetailPage() {
     <div>
       <Space style={{ marginBottom: 16 }}>
         <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/agents')}>
-          Back
+          {t('agents.back')}
         </Button>
       </Space>
 
@@ -94,7 +96,7 @@ export default function AgentDetailPage() {
               onClick={() => approveMutation.mutate()}
               loading={approveMutation.isPending}
             >
-              Approve Agent
+              {t('agents.approve')}
             </Button>
             {!agent.approved && (
               <Button
@@ -103,25 +105,25 @@ export default function AgentDetailPage() {
                 onClick={showRejectConfirm}
                 loading={rejectMutation.isPending}
               >
-                Reject Agent
+                {t('agents.rejectTitle')}
               </Button>
             )}
           </Space>
         </div>
 
         <Descriptions bordered column={1}>
-          <Descriptions.Item label="ID">{agent.id}</Descriptions.Item>
-          <Descriptions.Item label="Hostname">{agent.hostname}</Descriptions.Item>
-          <Descriptions.Item label="MySQL Version">
+          <Descriptions.Item label={t('agents.id')}>{agent.id}</Descriptions.Item>
+          <Descriptions.Item label={t('agents.hostname')}>{agent.hostname}</Descriptions.Item>
+          <Descriptions.Item label={t('agents.mysqlVersion')}>
             {agent.mySQLVersion || '-'}
           </Descriptions.Item>
-          <Descriptions.Item label="Status">
+          <Descriptions.Item label={t('agents.status')}>
             <Badge status={statusBadge[agent.status]} text={agent.status} />
           </Descriptions.Item>
-          <Descriptions.Item label="Last Seen">
+          <Descriptions.Item label={t('agents.lastSeen')}>
             {agent.lastSeen ? dayjs(agent.lastSeen).format('YYYY-MM-DD HH:mm:ss') : '-'}
           </Descriptions.Item>
-          <Descriptions.Item label="Created At">
+          <Descriptions.Item label={t('agents.created')}>
             {dayjs(agent.createdAt).format('YYYY-MM-DD HH:mm:ss')}
           </Descriptions.Item>
         </Descriptions>

web/src/pages/agents/AgentListPage.tsx

@@ -271,13 +271,13 @@ export default function AgentListPage() {
               label={t('agents.hostname')}
               rules={[{ required: true, message: t('agents.hostnameRequired') }]}
             >
-              <Input placeholder="e.g. db-server-01" />
+              <Input placeholder={t('agents.hostnamePlaceholder')} />
             </Form.Item>
             <Form.Item
               name="mySQLVersion"
               label={t('agents.mysqlVersion')}
             >
-              <Input placeholder="e.g. 8.0.32" />
+              <Input placeholder={t('agents.mysqlVersionPlaceholder')} />
             </Form.Item>
             <Form.Item style={{ marginBottom: 0, textAlign: 'right' }}>
               <Space>
@@ -305,7 +305,7 @@ export default function AgentListPage() {
       >
         {detailAgent && (
           <Descriptions bordered column={1} size="small">
-            <Descriptions.Item label="ID">{detailAgent.id}</Descriptions.Item>
+            <Descriptions.Item label={t('agents.id')}>{detailAgent.id}</Descriptions.Item>
             <Descriptions.Item label={t('agents.hostname')}>{detailAgent.hostname}</Descriptions.Item>
             <Descriptions.Item label={t('agents.mysqlVersion')}>
               {detailAgent.mySQLVersion || '-'}

web/src/pages/audit/AuditDetailPage.tsx

@@ -54,7 +54,7 @@ export default function AuditDetailPage() {
     <div>
       <Space style={{ marginBottom: 16 }}>
         <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/audit')}>
-          Back
+          {t('audit.back')}
         </Button>
       </Space>
 

web/src/pages/audit/AuditLogPage.tsx

@@ -102,7 +102,7 @@ export default function AuditLogPage() {
   // Table columns
   const columns: ColumnsType<AuditEntry> = [
     {
-      title: 'Operation ID',
+      title: t('audit.operationId'),
       dataIndex: 'operationId',
       key: 'operationId',
       width: 120,
@@ -112,13 +112,13 @@ export default function AuditLogPage() {
       ),
     },
     {
-      title: 'Operator',
+      title: t('audit.operator'),
       dataIndex: 'operator',
       key: 'operator',
       width: 160,
     },
     {
-      title: 'Timestamp',
+      title: t('audit.timestamp'),
       dataIndex: 'timestamp',
       key: 'timestamp',
       width: 180,
@@ -128,20 +128,20 @@ export default function AuditLogPage() {
         dayjs(a.timestamp).unix() - dayjs(b.timestamp).unix(),
     },
     {
-      title: 'Target Table',
+      title: t('audit.targetTable'),
       dataIndex: 'targetTable',
       key: 'targetTable',
       width: 180,
     },
     {
-      title: 'Rows Affected',
+      title: t('audit.rowsAffected'),
       dataIndex: 'rowsAffected',
       key: 'rowsAffected',
       width: 120,
       render: (val: number) => val?.toLocaleString() || '0',
     },
     {
-      title: 'Status',
+      title: t('audit.status'),
       dataIndex: 'status',
       key: 'status',
       width: 120,
@@ -180,7 +180,7 @@ export default function AuditLogPage() {
         <Title level={3} style={{ margin: 0 }}>{t('audit.title')}</Title>
         <Space>
           <Button icon={<DownloadOutlined />} onClick={handleExport}>
-            Export CSV
+            {t('audit.export')}
           </Button>
         </Space>
       </div>
@@ -227,7 +227,7 @@ export default function AuditLogPage() {
             </Select>
           </div>
           <Button icon={<ReloadOutlined />} onClick={() => auditQuery.refetch()}>
-            Refresh
+            {t('audit.refresh')}
           </Button>
           {(dateRange || statusFilter || agentFilter) && (
             <Button onClick={clearFilters}>{t('audit.clearFilters')}</Button>
@@ -262,7 +262,7 @@ export default function AuditLogPage() {
                 <Button onClick={clearFilters}>{t('audit.clearFilters')}</Button>
               )}
               <Button type="primary" onClick={() => navigate('/pitr/new')}>
-                Start New Recovery
+                {t('audit.startNewRecovery')}
               </Button>
             </Space>
           </Empty>

web/src/pages/org/OrgPage.tsx

@@ -20,7 +20,7 @@ export default function OrgPage() {
 
   const memberColumns = [
     {
-      title: 'Email',
+      title: t('auth.email'),
       dataIndex: 'email',
       key: 'email',
     },
@@ -189,18 +189,18 @@ export default function OrgPage() {
         <Form form={inviteForm} onFinish={handleInviteMember} layout="vertical">
           <Form.Item
             name="email"
-            label="Email"
+            label={t('auth.email')}
             rules={[
               { required: true, message: t('auth.validation.emailRequired') },
               { type: 'email', message: t('auth.validation.emailInvalid') },
             ]}
           >
-            <Input placeholder="user@example.com" />
+            <Input placeholder={t('auth.placeholder.email')} />
           </Form.Item>
           <Form.Item name="role" label={t('org.role')} initialValue="member">
             <Select>
-              <Select.Option value="member">Member</Select.Option>
-              <Select.Option value="admin">Admin</Select.Option>
+              <Select.Option value="member">{t('org.member')}</Select.Option>
+              <Select.Option value="admin">{t('org.admin')}</Select.Option>
             </Select>
           </Form.Item>
         </Form>