From fef4997391366655280f6dd5720634860267adf9 Mon Sep 17 00:00:00 2001
From: attacker <attacker@gitee.com>
Date: Mon, 29 Jun 2026 18:25:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(i18n):=20Approval=20=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E5=85=A8=E9=87=8F=E5=9B=BD=E9=99=85=E5=8C=96?=
 =?UTF-8?q?=20=E2=80=94=2011=20=E6=96=87=E4=BB=B6=E7=A1=AC=E7=BC=96?=
 =?UTF-8?q?=E7=A0=81=E4=B8=AD=E6=96=87=E6=94=B9=E7=BF=BB=E8=AF=91=E9=94=AE?=
 =?UTF-8?q?=20+=20approval=20=E5=91=BD=E5=90=8D=E7=A9=BA=E9=97=B4(136=20?=
 =?UTF-8?q?=E9=94=AE)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

迁移文件:
- pages/approval/: ApprovalWorkflowPage + ApprovalCategoryPage + 3 子页面(Resource/App/Permission)
- components/approval/: ApprovalFlow + ApprovalProcessTab + ApprovalCreateDialog + ApprovalDetailDialog + ApprovalTemplateTab + helpers

翻译键: approval 命名空间 136 键 (8 子组: category/step/status/col/editor/detail/flow/type/msg)
复用 common.* 通用键 (approve/reject/cancel/save/create/delete/edit/detail/close/loading 等)
zh-CN/en-US 完全对齐, 8 命名空间 (common/menu/header/login/dashboard/server/alert/approval)

模式: 组件内 useTranslation() + t(); 模块级常量/helpers 用 i18n.t()
labelKey 模式: STATUS_TABS/statusMap 从 label:string 改为 labelKey:string + i18n.t(config.labelKey)
---
 .../approval/ApprovalCreateDialog.tsx         |  30 +--
 .../approval/ApprovalDetailDialog.tsx         |  26 +--
 .../src/components/approval/ApprovalFlow.tsx  |  62 +++---
 .../approval/ApprovalProcessTab.tsx           |  53 +++---
 .../approval/ApprovalTemplateTab.tsx          |  51 ++---
 frontend/src/components/approval/helpers.tsx  |  11 +-
 frontend/src/locales/en-US.json               | 156 +++++++++++++++
 frontend/src/locales/zh-CN.json               | 156 +++++++++++++++
 .../src/pages/approval/ApprovalAppPage.tsx    |  30 +--
 .../pages/approval/ApprovalCategoryPage.tsx   | 131 ++++++-------
 .../pages/approval/ApprovalPermissionPage.tsx |  30 +--
 .../pages/approval/ApprovalResourcePage.tsx   |  28 +--
 .../pages/approval/ApprovalWorkflowPage.tsx   | 177 ++++++++++--------
 13 files changed, 649 insertions(+), 292 deletions(-)

diff --git a/frontend/src/components/approval/ApprovalCreateDialog.tsx b/frontend/src/components/approval/ApprovalCreateDialog.tsx
index 2704be0..164e57a 100644
--- a/frontend/src/components/approval/ApprovalCreateDialog.tsx
+++ b/frontend/src/components/approval/ApprovalCreateDialog.tsx
@@ -21,6 +21,7 @@ import {
 } from '@/components/ui/dialog';
 import { Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
 import { approvalApi } from '@/api';
 import { parseFields, APPROVAL_TYPE_OPTIONS } from './helpers';
 import type { JsonData } from '@/types/common';
@@ -39,6 +40,7 @@ export function ApprovalCreateDialog({
   templates,
   onSuccess,
 }: ApprovalCreateDialogProps) {
+  const { t } = useTranslation();
   const [selectedTemplate, setSelectedTemplate] = useState<JsonData>(null);
   const [formData, setFormData] = useState<JsonData>({});
   const [submitting, setSubmitting] = useState(false);
@@ -46,13 +48,13 @@ export function ApprovalCreateDialog({
   // 提交新建申请 // Logan.Li
   const handleSubmit = async () => {
     if (!selectedTemplate) {
-      toast.error('请先选择申请类型');
+      toast.error(t('approval.flow.pleaseSelectType'));
       return;
     }
     const fields = parseFields(selectedTemplate.form_schema);
     for (const f of fields) {
       if (f.required && !formData[f.key]) {
-        toast.error(`请填写${f.label}`);
+        toast.error(t('approval.flow.pleaseFillField', { label: f.label }));
         return;
       }
     }
@@ -63,13 +65,13 @@ export function ApprovalCreateDialog({
         title: formData.app_name || selectedTemplate.name,
         form_data: JSON.stringify(formData),
       });
-      toast.success('申请已提交');
+      toast.success(t('approval.msg.submitSuccess'));
       onOpenChange(false);
       setSelectedTemplate(null);
       setFormData({});
       onSuccess();
     } catch (e) {
-      toast.error('提交失败', { description: e?.message });
+      toast.error(t('approval.msg.submitFailed'), { description: e?.message });
     } finally {
       setSubmitting(false);
     }
@@ -89,9 +91,9 @@ export function ApprovalCreateDialog({
     >
       <DialogContent className="max-w-2xl bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-[var(--dg-text-primary)]">新建资源申请</DialogTitle>
+          <DialogTitle className="text-[var(--dg-text-primary)]">{t('approval.flow.newResourceRequest')}</DialogTitle>
           <DialogDescription className="text-[var(--dg-text-muted)]">
-            {selectedTemplate ? '请填写申请信息' : '请选择申请类型'}
+            {selectedTemplate ? t('approval.flow.fillInfo') : t('approval.flow.selectType')}
           </DialogDescription>
         </DialogHeader>
 
@@ -100,7 +102,7 @@ export function ApprovalCreateDialog({
           <div className="grid grid-cols-2 gap-4 py-2">
             {APPROVAL_TYPE_OPTIONS.map((opt) => {
               const tpl = templates.find(
-                (t) => t.type === opt.value && (t.enabled !== false)
+                (tm) => tm.type === opt.value && (tm.enabled !== false)
               );
               const Icon = opt.icon;
               return (
@@ -124,7 +126,7 @@ export function ApprovalCreateDialog({
                   <div>
                     <p className="text-sm font-medium text-[var(--dg-text-primary)]">{opt.label}</p>
                     <p className="text-xs text-[var(--dg-text-muted)] mt-0.5">
-                      {tpl ? tpl.description || `共 ${parseFields(tpl.form_schema).length} 个字段` : '暂无可用模板'}
+                      {tpl ? tpl.description || t('approval.flow.fieldCount', { count: parseFields(tpl.form_schema).length }) : t('approval.flow.noTemplateAvailable')}
                     </p>
                   </div>
                 </button>
@@ -140,7 +142,7 @@ export function ApprovalCreateDialog({
                 onClick={() => { setSelectedTemplate(null); setFormData({}); }}
                 className="text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]"
               >
-                ← 返回选择类型
+                {t('approval.flow.backToSelect')}
               </button>
             </div>
             <div className="grid grid-cols-2 gap-x-4 gap-y-4">
@@ -158,7 +160,7 @@ export function ApprovalCreateDialog({
                         onValueChange={(val) => setFormData((prev) => ({ ...prev, [field.key]: val }))}
                       >
                         <SelectTrigger className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
-                          <SelectValue placeholder={field.placeholder || `请选择${field.label}`} />
+                          <SelectValue placeholder={field.placeholder || `${t('approval.editor.pleaseSelect')}${field.label}`} />
                         </SelectTrigger>
                         <SelectContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
                           {(field.options || []).map((opt: string) => (
@@ -170,7 +172,7 @@ export function ApprovalCreateDialog({
                       </Select>
                     ) : field.type === 'textarea' ? (
                       <Textarea
-                        placeholder={field.placeholder || `请输入${field.label}`}
+                        placeholder={field.placeholder || `${t('approval.flow.pleaseFillField', { label: '' })}${field.label}`}
                         value={formData[field.key] ?? ''}
                         onChange={(e) => setFormData((prev) => ({ ...prev, [field.key]: e.target.value }))}
                         className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] min-h-[80px]"
@@ -178,7 +180,7 @@ export function ApprovalCreateDialog({
                     ) : (
                       <Input
                         type={field.type === 'number' ? 'number' : 'text'}
-                        placeholder={field.placeholder || `请输入${field.label}`}
+                        placeholder={field.placeholder || `${t('approval.flow.pleaseFillField', { label: '' })}${field.label}`}
                         value={formData[field.key] ?? ''}
                         onChange={(e) => setFormData((prev) => ({
                           ...prev,
@@ -195,7 +197,7 @@ export function ApprovalCreateDialog({
         )}
 
         <DialogFooter>
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>取消</Button>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>{t('common.cancel')}</Button>
           {selectedTemplate && (
             <Button
               className="bg-[var(--dg-blue)] hover:opacity-90 text-white"
@@ -203,7 +205,7 @@ export function ApprovalCreateDialog({
               disabled={submitting}
             >
               {submitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
-              提交申请
+              {t('approval.submitRequest')}
             </Button>
           )}
         </DialogFooter>
diff --git a/frontend/src/components/approval/ApprovalDetailDialog.tsx b/frontend/src/components/approval/ApprovalDetailDialog.tsx
index d4a1922..63f4824 100644
--- a/frontend/src/components/approval/ApprovalDetailDialog.tsx
+++ b/frontend/src/components/approval/ApprovalDetailDialog.tsx
@@ -9,6 +9,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { CheckCircle2, XCircle, Clock } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import {
   renderFormData,
   renderStepProgress,
@@ -36,14 +37,15 @@ export function ApprovalDetailDialog({
   onApprove,
   onReject,
 }: ApprovalDetailDialogProps) {
+  const { t } = useTranslation();
   if (!instance) return null;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-[var(--dg-text-primary)]">审批详情</DialogTitle>
-          <DialogDescription className="text-[var(--dg-text-muted)]">查看审批流程详细信息</DialogDescription>
+          <DialogTitle className="text-[var(--dg-text-primary)]">{t('approval.detail.approvalDetail')}</DialogTitle>
+          <DialogDescription className="text-[var(--dg-text-muted)]">{t('approval.detail.approvalDetailDesc')}</DialogDescription>
         </DialogHeader>
         <div className="space-y-4 py-2">
           <div>
@@ -53,10 +55,10 @@ export function ApprovalDetailDialog({
                 {getApprovalTypeLabel(getInstanceType(instance))}
               </Badge>
               <span className="text-xs text-[var(--dg-text-muted)]">
-                申请人：{instance.applicant_name || instance.applicant || '--'}
+                {t('approval.detail.applicant')}: {instance.applicant_name || instance.applicant || '--'}
               </span>
               <span className="text-xs text-[var(--dg-text-muted)]">
-                提交于 {instance.created_at ? new Date(instance.created_at).toLocaleString() : '--'}
+                {t('approval.detail.submittedAt')} {instance.created_at ? new Date(instance.created_at).toLocaleString() : '--'}
               </span>
             </div>
           </div>
@@ -70,12 +72,12 @@ export function ApprovalDetailDialog({
 
           {/* 申请表单 */}
           {(() => {
-            const tpl = templates.find((t) => t.id === instance.template_id);
+            const tpl = templates.find((tm) => tm.id === instance.template_id);
             const rendered = renderFormData(instance.form_data, tpl);
             if (!rendered) return null;
             return (
               <div className="bg-[var(--dg-bg-primary)] rounded-lg p-4">
-                <p className="text-sm font-medium text-[var(--dg-text-secondary)] mb-3">申请表单</p>
+                <p className="text-sm font-medium text-[var(--dg-text-secondary)] mb-3">{t('approval.detail.requestForm')}</p>
                 {rendered}
               </div>
             );
@@ -83,14 +85,14 @@ export function ApprovalDetailDialog({
 
           {/* 审批进度 */}
           <div className="bg-[var(--dg-bg-primary)] rounded-lg p-4">
-            <p className="text-sm font-medium text-[var(--dg-text-secondary)] mb-3">审批进度</p>
+            <p className="text-sm font-medium text-[var(--dg-text-secondary)] mb-3">{t('approval.detail.approvalProgress')}</p>
             {renderStepProgress(instance)}
           </div>
 
           {/* 操作记录 */}
           {instance.actions && (
             <div className="bg-[var(--dg-bg-primary)] rounded-lg p-4">
-              <p className="text-sm font-medium text-[var(--dg-text-secondary)] mb-3">操作记录</p>
+              <p className="text-sm font-medium text-[var(--dg-text-secondary)] mb-3">{t('approval.detail.operationLog')}</p>
               <div className="space-y-2">
                 {instance.actions.map((action: JsonData, index: number) => (
                   <div key={index} className="flex items-center gap-3 text-sm">
@@ -107,7 +109,7 @@ export function ApprovalDetailDialog({
                       </span>
                       <span className="text-[var(--dg-text-muted)] mx-1">·</span>
                       <span className="text-[var(--dg-text-secondary)]">
-                        {action.action === 'approve' ? '通过' : action.action === 'reject' ? '拒绝' : '提交'}
+                        {action.action === 'approve' ? t('common.approve') : action.action === 'reject' ? t('common.reject') : t('common.submit')}
                       </span>
                       {action.comment && (
                         <p className="text-xs text-[var(--dg-text-muted)] mt-0.5">{action.comment}</p>
@@ -126,14 +128,14 @@ export function ApprovalDetailDialog({
           {instance.status === 'pending' && (
             <>
               <Button variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => { onOpenChange(false); onReject(instance); }}>
-                <XCircle className="h-4 w-4 mr-2" />拒绝
+                <XCircle className="h-4 w-4 mr-2" />{t('common.reject')}
               </Button>
               <Button className="bg-emerald-500/90 hover:bg-emerald-500 text-white" onClick={() => { onOpenChange(false); onApprove(instance); }}>
-                <CheckCircle2 className="h-4 w-4 mr-2" />通过
+                <CheckCircle2 className="h-4 w-4 mr-2" />{t('common.approve')}
               </Button>
             </>
           )}
-          <Button variant="ghost" onClick={() => onOpenChange(false)}>关闭</Button>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>{t('common.close')}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/frontend/src/components/approval/ApprovalFlow.tsx b/frontend/src/components/approval/ApprovalFlow.tsx
index bd0e13e..342bf7e 100644
--- a/frontend/src/components/approval/ApprovalFlow.tsx
+++ b/frontend/src/components/approval/ApprovalFlow.tsx
@@ -33,9 +33,11 @@ import {
   getApprovalTypeColor,
   getInstanceType,
 } from './helpers';
+import { useTranslation } from 'react-i18next';
 import type { JsonData } from '@/types/common';
 
 export function ApprovalFlow() {
+  const { t } = useTranslation();
   const [activeTab, setActiveTab] = useState<'instances' | 'flows' | 'my-approvals'>('instances');
 
   const [processes, setProcesses] = useState<JsonData[]>([]);
@@ -72,7 +74,7 @@ export function ApprovalFlow() {
       setTemplates(templatesRes?.list || []);
       setMyApprovals(myRes?.list || []);
     } catch (error) {
-      console.error('加载审批数据失败:', error);
+      console.error('Failed to load approval data:', error);
     } finally {
       setLoading(false);
     }
@@ -116,15 +118,15 @@ export function ApprovalFlow() {
       setActionSubmitting(true);
       if (actionType === 'approve') {
         await approvalApi.approveProcess(selectedInstance.id, actionComment);
-        toast.success('审批通过');
+        toast.success(t('approval.flow.approvalPassed'));
       } else {
         await approvalApi.rejectProcess(selectedInstance.id, actionComment);
-        toast.success('已拒绝');
+        toast.success(t('approval.msg.rejectSuccess'));
       }
       setActionDialogOpen(false);
       loadData();
     } catch (error) {
-      toast.error('操作失败', { description: (error as JsonData).message });
+      toast.error(t('common.operationFailed'), { description: (error as JsonData).message });
     } finally {
       setActionSubmitting(false);
     }
@@ -141,15 +143,15 @@ export function ApprovalFlow() {
       {/* Page Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">资源申请</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">云服务器申请 · 应用部署申请</p>
+          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{t('approval.flow.title')}</h1>
+          <p className="text-sm text-[var(--dg-text-muted)] mt-1">{t('approval.flow.subtitle')}</p>
         </div>
         <Button
           className="bg-[var(--dg-blue)] hover:opacity-90 text-white"
           onClick={() => setCreateOpen(true)}
         >
           <Plus className="h-4 w-4 mr-2" />
-          新建申请
+          {t('approval.newRequest')}
         </Button>
       </div>
 
@@ -159,7 +161,7 @@ export function ApprovalFlow() {
           <CardContent className="p-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-[var(--dg-text-muted)]">待审批</p>
+                <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.flow.pendingApproval')}</p>
                 <p className="text-2xl font-bold text-amber-400">{pendingCount}</p>
               </div>
               <div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
@@ -172,7 +174,7 @@ export function ApprovalFlow() {
           <CardContent className="p-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-[var(--dg-text-muted)]">已通过</p>
+                <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.status.approved')}</p>
                 <p className="text-2xl font-bold text-emerald-400">{approvedCount}</p>
               </div>
               <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
@@ -185,7 +187,7 @@ export function ApprovalFlow() {
           <CardContent className="p-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-[var(--dg-text-muted)]">已拒绝</p>
+                <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.status.rejected')}</p>
                 <p className="text-2xl font-bold text-red-400">{rejectedCount}</p>
               </div>
               <div className="p-3 rounded-lg bg-red-500/10 text-red-400">
@@ -198,7 +200,7 @@ export function ApprovalFlow() {
           <CardContent className="p-4">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-sm text-[var(--dg-text-muted)]">我的待办</p>
+                <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.flow.myTodo')}</p>
                 <p className="text-2xl font-bold text-[var(--dg-blue)]">{myPendingCount}</p>
               </div>
               <div className="p-3 rounded-lg bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]">
@@ -212,9 +214,9 @@ export function ApprovalFlow() {
       {/* Tab Bar */}
       <div className="flex items-center gap-1 border-b border-[var(--dg-border)]">
         {([
-          { key: 'instances', label: '审批实例' },
-          { key: 'flows', label: '流程模板' },
-          { key: 'my-approvals', label: '我的审批' },
+          { key: 'instances', label: t('approval.flow.tabInstances') },
+          { key: 'flows', label: t('approval.flow.tabTemplates') },
+          { key: 'my-approvals', label: t('approval.flow.tabMyApprovals') },
         ] as const).map((tab) => (
           <button
             key={tab.key}
@@ -265,8 +267,8 @@ export function ApprovalFlow() {
               <CardContent className="p-12">
                 <div className="text-center">
                   <FileText className="h-12 w-12 mx-auto text-[var(--dg-text-muted)] mb-4" />
-                  <h3 className="text-lg font-medium text-[var(--dg-text-secondary)] mb-2">暂无待办</h3>
-                  <p className="text-sm text-[var(--dg-text-muted)]">没有等待你处理的审批</p>
+                  <h3 className="text-lg font-medium text-[var(--dg-text-secondary)] mb-2">{t('approval.noTodo')}</h3>
+                  <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.noTodoDesc')}</p>
                 </div>
               </CardContent>
             </Card>
@@ -289,25 +291,25 @@ export function ApprovalFlow() {
                             </Badge>
                           </div>
                           <p className="text-xs text-[var(--dg-text-muted)]">
-                            申请人：{instance.applicant_name || instance.applicant || '--'}
+                            {t('approval.detail.applicant')}: {instance.applicant_name || instance.applicant || '--'}
                           </p>
                           <p className="text-xs text-[var(--dg-text-muted)]">
-                            提交于 {instance.created_at ? new Date(instance.created_at).toLocaleString() : '--'}
+                            {t('approval.detail.submittedAt')} {instance.created_at ? new Date(instance.created_at).toLocaleString() : '--'}
                           </p>
                         </div>
                       </div>
                       <div className="flex items-center gap-2">
                         <Button variant="ghost" size="sm" onClick={() => handleView(instance)}>
                           <FileText className="h-4 w-4 mr-1" />
-                          详情
+                          {t('common.detail')}
                         </Button>
                         {instance.status === 'pending' && (
                           <>
                             <Button variant="outline" size="sm" className="border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/10" onClick={() => openActionDialog('approve', instance)}>
-                              <CheckCircle2 className="h-4 w-4 mr-1" />通过
+                              <CheckCircle2 className="h-4 w-4 mr-1" />{t('common.approve')}
                             </Button>
                             <Button variant="outline" size="sm" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={() => openActionDialog('reject', instance)}>
-                              <XCircle className="h-4 w-4 mr-1" />拒绝
+                              <XCircle className="h-4 w-4 mr-1" />{t('common.reject')}
                             </Button>
                           </>
                         )}
@@ -315,7 +317,7 @@ export function ApprovalFlow() {
                     </div>
                     <div className="mb-3">
                       <div className="flex items-center justify-between text-xs text-[var(--dg-text-muted)] mb-1.5">
-                        <span>审批进度</span>
+                        <span>{t('approval.detail.approvalProgress')}</span>
                         <span>{percentage}%</span>
                       </div>
                       <div className="w-full h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
@@ -351,30 +353,30 @@ export function ApprovalFlow() {
               {actionType === 'approve' ? (
                 <>
                   <CheckCircle2 className="h-5 w-5 text-emerald-400" />
-                  确认通过审批
+                  {t('approval.flow.approveConfirm')}
                 </>
               ) : (
                 <>
                   <XCircle className="h-5 w-5 text-red-400" />
-                  确认拒绝审批
+                  {t('approval.flow.rejectConfirm')}
                 </>
               )}
             </DialogTitle>
             <DialogDescription className="text-[var(--dg-text-muted)]">
-              {actionType === 'approve' ? '请填写审批意见后确认通过' : '请填写拒绝原因后确认拒绝'}
+              {actionType === 'approve' ? t('approval.flow.commentPlaceholder') : t('approval.flow.commentPlaceholder')}
             </DialogDescription>
           </DialogHeader>
           {selectedInstance && (
             <div className="py-2">
               <p className="text-sm text-[var(--dg-text-secondary)] mb-2">
-                审批标题：<span className="text-[var(--dg-text-primary)]">{selectedInstance.title}</span>
+                {t('approval.detail.title')}: <span className="text-[var(--dg-text-primary)]">{selectedInstance.title}</span>
               </p>
               <div className="space-y-2">
                 <label className="text-sm font-medium text-[var(--dg-text-secondary)]">
-                  {actionType === 'approve' ? '审批意见' : '拒绝原因'}
+                  {actionType === 'approve' ? t('approval.flow.approveTitle') : t('approval.flow.rejectTitle')}
                 </label>
                 <Textarea
-                  placeholder={actionType === 'approve' ? '请填写审批意见（可选）' : '请填写拒绝原因'}
+                  placeholder={t('approval.flow.commentPlaceholder')}
                   value={actionComment}
                   onChange={(e) => setActionComment(e.target.value)}
                   className="bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)] min-h-[80px]"
@@ -384,7 +386,7 @@ export function ApprovalFlow() {
           )}
           <DialogFooter>
             <Button variant="outline" onClick={() => setActionDialogOpen(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
-              取消
+              {t('common.cancel')}
             </Button>
             <Button
               onClick={handleConfirmAction}
@@ -392,7 +394,7 @@ export function ApprovalFlow() {
               className={actionType === 'approve' ? 'bg-emerald-500/90 hover:bg-emerald-500 text-white' : 'bg-red-500 hover:bg-red-600 text-white'}
             >
               {actionSubmitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
-              {actionType === 'approve' ? '确认通过' : '确认拒绝'}
+              {actionType === 'approve' ? t('approval.flow.approveConfirm') : t('approval.flow.rejectConfirm')}
             </Button>
           </DialogFooter>
         </DialogContent>
diff --git a/frontend/src/components/approval/ApprovalProcessTab.tsx b/frontend/src/components/approval/ApprovalProcessTab.tsx
index 02aab72..2eb2460 100644
--- a/frontend/src/components/approval/ApprovalProcessTab.tsx
+++ b/frontend/src/components/approval/ApprovalProcessTab.tsx
@@ -19,42 +19,44 @@ import {
   getApprovalTypeIcon,
   getInstanceType,
 } from './helpers';
+import i18n from 'i18next';
+import { useTranslation } from 'react-i18next';
 import type { JsonData } from '@/types/common';
 
 // 状态标签页定义
 const STATUS_TABS = [
-  { key: 'all', label: '全部', value: '' },
-  { key: 'pending', label: '待审批', value: 'pending' },
-  { key: 'approved', label: '已通过', value: 'approved' },
-  { key: 'rejected', label: '已拒绝', value: 'rejected' },
-  { key: 'processing', label: '进行中', value: 'processing' },
-  { key: 'completed', label: '已完成', value: 'completed' },
+  { key: 'all', labelKey: 'common.all', value: '' },
+  { key: 'pending', labelKey: 'approval.status.pending', value: 'pending' },
+  { key: 'approved', labelKey: 'approval.status.approved', value: 'approved' },
+  { key: 'rejected', labelKey: 'approval.status.rejected', value: 'rejected' },
+  { key: 'processing', labelKey: 'approval.status.pending', value: 'processing' },
+  { key: 'completed', labelKey: 'common.completed', value: 'completed' },
 ];
 
 function getStatusBadge(status: string) {
-  const statusMap: Record<string, { label: string; className: string; dot: string }> = {
+  const statusMap: Record<string, { labelKey: string; className: string; dot: string }> = {
     pending: {
-      label: '待审批',
+      labelKey: 'approval.status.pending',
       className: 'border-amber-500/30 text-amber-400 bg-amber-500/10',
       dot: 'bg-amber-400',
     },
     approved: {
-      label: '已通过',
+      labelKey: 'approval.status.approved',
       className: 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10',
       dot: 'bg-emerald-400',
     },
     rejected: {
-      label: '已拒绝',
+      labelKey: 'approval.status.rejected',
       className: 'border-red-500/30 text-red-400 bg-red-500/10',
       dot: 'bg-red-400',
     },
     processing: {
-      label: '进行中',
+      labelKey: 'approval.status.pending',
       className: 'border-[var(--dg-blue)]/30 text-[var(--dg-blue)] bg-[var(--dg-blue)]/10',
       dot: 'bg-[var(--dg-blue)]',
     },
     completed: {
-      label: '已完成',
+      labelKey: 'common.completed',
       className: 'border-[var(--dg-border)] text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)]',
       dot: 'bg-[var(--dg-text-secondary)]',
     },
@@ -64,7 +66,7 @@ function getStatusBadge(status: string) {
   return (
     <Badge variant="outline" className={config.className}>
       <div className={cn('w-1.5 h-1.5 rounded-full mr-1.5', config.dot)} />
-      {config.label}
+      {i18n.t(config.labelKey)}
     </Badge>
   );
 }
@@ -93,6 +95,7 @@ export function ApprovalProcessTab({
   onApprove,
   onReject,
 }: ApprovalProcessTabProps) {
+  const { t } = useTranslation();
   return (
     <>
       {/* 搜索 + 状态筛选 */}
@@ -100,7 +103,7 @@ export function ApprovalProcessTab({
         <div className="relative w-72">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
           <Input
-            placeholder="搜索标题/申请人..."
+            placeholder={t('approval.flow.searchPlaceholder')}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             className="pl-9 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]"
@@ -118,7 +121,7 @@ export function ApprovalProcessTab({
                   : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
               )}
             >
-              {tab.label}
+              {t(tab.labelKey)}
             </button>
           ))}
         </div>
@@ -130,7 +133,7 @@ export function ApprovalProcessTab({
           <CardContent className="p-12">
             <div className="flex items-center justify-center text-[var(--dg-text-muted)]">
               <Loader2 className="h-6 w-6 animate-spin mr-2" />
-              加载中...
+              {t('common.loading')}
             </div>
           </CardContent>
         </Card>
@@ -139,8 +142,8 @@ export function ApprovalProcessTab({
           <CardContent className="p-12">
             <div className="text-center">
               <FileText className="h-12 w-12 mx-auto text-[var(--dg-text-muted)] mb-4" />
-              <h3 className="text-lg font-medium text-[var(--dg-text-secondary)] mb-2">暂无审批流程</h3>
-              <p className="text-sm text-[var(--dg-text-muted)]">当前筛选条件下没有匹配的流程实例</p>
+              <h3 className="text-lg font-medium text-[var(--dg-text-secondary)] mb-2">{t('approval.noInstances')}</h3>
+              <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.noInstancesDesc')}</p>
             </div>
           </CardContent>
         </Card>
@@ -168,15 +171,15 @@ export function ApprovalProcessTab({
                               {getApprovalTypeLabel(getInstanceType(instance))}
                             </Badge>
                           </span>
-                          <span>申请人：{instance.applicant_name || instance.applicant || '--'}</span>
-                          <span>提交于 {instance.created_at ? new Date(instance.created_at).toLocaleString() : '--'}</span>
+                          <span>{t('approval.detail.applicant')}: {instance.applicant_name || instance.applicant || '--'}</span>
+                          <span>{t('approval.detail.submittedAt')} {instance.created_at ? new Date(instance.created_at).toLocaleString() : '--'}</span>
                         </div>
                       </div>
                     </div>
                     <div className="flex items-center gap-2">
                       <Button variant="ghost" size="sm" className="text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]" onClick={() => onView(instance)}>
                         <Eye className="h-4 w-4 mr-1" />
-                        详情
+                        {t('common.detail')}
                       </Button>
                       {instance.status === 'pending' && (
                         <>
@@ -187,7 +190,7 @@ export function ApprovalProcessTab({
                             onClick={() => onApprove(instance)}
                           >
                             <CheckCircle2 className="h-4 w-4 mr-1" />
-                            通过
+                            {t('common.approve')}
                           </Button>
                           <Button
                             variant="outline"
@@ -196,16 +199,16 @@ export function ApprovalProcessTab({
                             onClick={() => onReject(instance)}
                           >
                             <XCircle className="h-4 w-4 mr-1" />
-                            拒绝
+                            {t('common.reject')}
                           </Button>
                         </>
                       )}
                     </div>
                   </div>
-                  {/* 审批进度条 */}
+                  {/* {t('approval.detail.approvalProgress')}条 */}
                   <div className="mb-3">
                     <div className="flex items-center justify-between text-xs text-[var(--dg-text-muted)] mb-1.5">
-                      <span>审批进度</span>
+                      <span>{t('approval.detail.approvalProgress')}</span>
                       <span>{percentage}%</span>
                     </div>
                     <div className="w-full h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
diff --git a/frontend/src/components/approval/ApprovalTemplateTab.tsx b/frontend/src/components/approval/ApprovalTemplateTab.tsx
index 8d30528..6de6ee0 100644
--- a/frontend/src/components/approval/ApprovalTemplateTab.tsx
+++ b/frontend/src/components/approval/ApprovalTemplateTab.tsx
@@ -3,6 +3,8 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Filter, Edit, GitBranch, ArrowRight } from 'lucide-react';
+import i18n from 'i18next';
+import { useTranslation } from 'react-i18next';
 import type { JsonData } from '@/types/common';
 
 function parseSteps(steps: JsonData) {
@@ -18,24 +20,26 @@ function parseSteps(steps: JsonData) {
   return [];
 }
 
-// 审批类型字典
-const APPROVAL_TYPE_OPTIONS = [
-  { value: 'deploy', label: '发布审批', color: 'var(--dg-blue)' },
-  { value: 'server', label: '服务器操作', color: 'var(--dg-cyan)' },
-  { value: 'permission', label: '权限申请', color: 'var(--dg-purple)' },
-];
+// 审批类型字典 (labels resolved at render via i18n)
+const APPROVAL_TYPE_META: Record<string, { key: string; color: string }> = {
+  deploy: { key: 'approval.type.deploy', color: 'var(--dg-blue)' },
+  server: { key: 'approval.type.server', color: 'var(--dg-cyan)' },
+  permission: { key: 'approval.type.permission', color: 'var(--dg-purple)' },
+};
 
-const getApprovalTypeLabel = (value: string): string =>
-  APPROVAL_TYPE_OPTIONS.find((o) => o.value === value)?.label || value || '通用审批';
+const getApprovalTypeLabel = (value: string): string => {
+  const meta = APPROVAL_TYPE_META[value];
+  return meta ? i18n.t(meta.key) : (value || i18n.t('approval.type.general'));
+};
 
 const getApprovalTypeColor = (value: string): string =>
-  APPROVAL_TYPE_OPTIONS.find((o) => o.value === value)?.color || 'var(--dg-text-secondary)';
+  APPROVAL_TYPE_META[value]?.color || 'var(--dg-text-secondary)';
 
 // 模拟审批流程图
 function renderFlowChart(flow: JsonData) {
   const nodes = parseSteps(flow.steps);
   if (nodes.length === 0) {
-    return <div className="text-[var(--dg-text-muted)] text-center py-4">暂无流程节点</div>;
+    return <div className="text-[var(--dg-text-muted)] text-center py-4">{i18n.t('approval.noFlowNodes')}</div>;
   }
   return (
     <div className="flex items-center gap-2 overflow-x-auto py-4">
@@ -77,13 +81,14 @@ export function ApprovalTemplateTab({
   templateTypeFilter,
   setTemplateTypeFilter,
 }: ApprovalTemplateTabProps) {
+  const { t } = useTranslation();
   return (
     <>
       {/* 类型筛选 */}
       <div className="flex items-center gap-3 flex-wrap">
         <div className="flex items-center gap-1.5 text-sm text-[var(--dg-text-secondary)]">
           <Filter className="h-4 w-4" />
-          <span>类型筛选：</span>
+          <span>{t('approval.flow.filterType')}</span>
         </div>
         <div className="flex items-center gap-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg p-1">
           <button
@@ -95,21 +100,21 @@ export function ApprovalTemplateTab({
                 : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
             )}
           >
-            全部类型
+            {t('approval.flow.allTypes')}
           </button>
-          {APPROVAL_TYPE_OPTIONS.map((opt) => (
+          {Object.entries(APPROVAL_TYPE_META).map(([val, meta]) => (
             <button
-              key={opt.value}
-              onClick={() => setTemplateTypeFilter(opt.value)}
+              key={val}
+              onClick={() => setTemplateTypeFilter(val)}
               className={cn(
                 'px-3 py-1.5 rounded-md text-sm transition-colors flex items-center gap-1.5',
-                templateTypeFilter === opt.value
+                templateTypeFilter === val
                   ? 'bg-[var(--dg-bg-hover)] text-[var(--dg-text-primary)] font-medium'
                   : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
               )}
             >
-              <span style={{ color: opt.color }}>●</span>
-              {opt.label}
+              <span style={{ color: meta.color }}>●</span>
+              {getApprovalTypeLabel(val)}
             </button>
           ))}
         </div>
@@ -121,8 +126,8 @@ export function ApprovalTemplateTab({
             <CardContent className="p-8">
               <div className="text-center">
                 <GitBranch className="h-12 w-12 mx-auto text-[var(--dg-text-muted)] mb-4" />
-                <h3 className="text-lg font-medium text-[var(--dg-text-secondary)] mb-2">暂无流程模板</h3>
-                <p className="text-sm text-[var(--dg-text-muted)]">当前筛选条件下没有匹配的模板</p>
+                <h3 className="text-lg font-medium text-[var(--dg-text-secondary)] mb-2">{t('approval.noTemplates')}</h3>
+                <p className="text-sm text-[var(--dg-text-muted)]">{t('approval.noTemplatesDesc')}</p>
               </div>
             </CardContent>
           </Card>
@@ -160,7 +165,7 @@ export function ApprovalTemplateTab({
                           : 'border-[var(--dg-border)] text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)]'
                       }
                     >
-                      {flow.status === 1 || flow.status === 'active' || flow.status === true ? '已启用' : '已停用'}
+                      {flow.status === 1 || flow.status === 'active' || flow.status === true ? t('approval.status.enabled') : t('approval.status.disabled')}
                     </Badge>
                     <Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]">
                       <Edit className="h-4 w-4" />
@@ -173,8 +178,8 @@ export function ApprovalTemplateTab({
                   {renderFlowChart(flow)}
                 </div>
                 <div className="flex items-center justify-between mt-4 text-sm text-[var(--dg-text-muted)]">
-                  <span>创建于 {flow.created_at ? new Date(flow.created_at).toLocaleDateString() : '--'}</span>
-                  <span>{parseSteps(flow.steps).length} 个节点</span>
+                  <span>{t('approval.flow.createdOn')} {flow.created_at ? new Date(flow.created_at).toLocaleDateString() : '--'}</span>
+                  <span>{t('approval.flow.nodeCount', { count: parseSteps(flow.steps).length })}</span>
                 </div>
               </CardContent>
             </Card>
diff --git a/frontend/src/components/approval/helpers.tsx b/frontend/src/components/approval/helpers.tsx
index 73517a9..d45cd5e 100644
--- a/frontend/src/components/approval/helpers.tsx
+++ b/frontend/src/components/approval/helpers.tsx
@@ -1,4 +1,5 @@
 // 资源申请模块共享辅助函数（从 ApprovalFlow.tsx 提取） // Logan.Li
+import i18n from 'i18next';
 import { cn } from '@/lib/utils';
 import {
   CheckCircle2,
@@ -64,12 +65,12 @@ export function renderFormData(formDataStr: string, template?: JsonData) {
 
 // 审批类型选项 // Logan.Li
 export const APPROVAL_TYPE_OPTIONS = [
-  { value: 'server_apply', label: '云服务器申请', icon: Server, color: 'var(--dg-cyan)' },
-  { value: 'app_deploy', label: '应用部署申请', icon: GitCommit, color: 'var(--dg-blue)' },
+  { value: 'server_apply', label: i18n.t('approval.type.serverApply'), icon: Server, color: 'var(--dg-cyan)' },
+  { value: 'app_deploy', label: i18n.t('approval.type.appDeploy'), icon: GitCommit, color: 'var(--dg-blue)' },
 ];
 
 export const getApprovalTypeLabel = (value: string): string =>
-  APPROVAL_TYPE_OPTIONS.find((o) => o.value === value)?.label || value || '通用审批';
+  APPROVAL_TYPE_OPTIONS.find((o) => o.value === value)?.label || value || i18n.t('approval.type.general');
 
 export const getApprovalTypeColor = (value: string): string =>
   APPROVAL_TYPE_OPTIONS.find((o) => o.value === value)?.color || 'var(--dg-text-secondary)';
@@ -116,7 +117,7 @@ export function renderStepProgress(instance: JsonData) {
               {isCompleted && <CheckCircle2 className="h-3 w-3" />}
               {isRejected && <XCircle className="h-3 w-3" />}
               {isCurrent && !isRejected && <Loader2 className="h-3 w-3 animate-spin" />}
-              <span>{step.name || step.approver_name || `步骤 ${index + 1}`}</span>
+              <span>{step.name || step.approver_name || i18n.t('approval.step.number', { count: index + 1 })}</span>
               {step.step_type && step.step_type !== 'submit' && (
                 <span className={cn(
                   'text-[10px] px-1 py-0 rounded',
@@ -124,7 +125,7 @@ export function renderStepProgress(instance: JsonData) {
                     ? 'bg-green-500/15 text-green-400' 
                     : 'bg-purple-500/15 text-purple-400'
                 )}>
-                  {step.step_type === 'execute' ? '执行' : '审核'}
+                  {step.step_type === 'execute' ? i18n.t('approval.step.executeShort') : i18n.t('approval.step.auditShort')}
                 </span>
               )}
             </div>
diff --git a/frontend/src/locales/en-US.json b/frontend/src/locales/en-US.json
index 2ee9d0f..1a1b440 100644
--- a/frontend/src/locales/en-US.json
+++ b/frontend/src/locales/en-US.json
@@ -389,5 +389,161 @@
     "minutesShort": "{{count}}m",
     "prevPage": "Previous",
     "nextPage": "Next"
+  },
+  "approval": {
+    "workflowTitle": "Approval Workflow Config",
+    "workflowSubtitle": "Configure multi-level approval workflows for resource, application, and permission requests",
+    "resourceTitle": "Resource Request",
+    "appTitle": "Application Request",
+    "permissionTitle": "Permission Approval",
+    "resourceDesc": "Request cloud servers, storage, network and other infrastructure resources",
+    "appDesc": "Request application deployment, version release, pipeline configuration",
+    "permissionDesc": "Request bastion, VPN, log query, database query and other ops permissions",
+    "newRequest": "New Request",
+    "newWorkflow": "New Workflow",
+    "createFirst": "Create your first workflow",
+    "submitRequest": "Submit Request",
+    "submitting": "Submitting...",
+    "retry": "Retry",
+    "noWorkflows": "No approval workflows",
+    "noRecords": "No request records",
+    "applyNow": "Apply Now",
+    "noTodo": "No pending tasks",
+    "noTodoDesc": "No approvals waiting for you",
+    "noInstances": "No approval workflows",
+    "noInstancesDesc": "No matching workflow instances under current filters",
+    "noTemplates": "No workflow templates",
+    "noTemplatesDesc": "No matching templates under current filters",
+    "noFlowNodes": "No flow nodes",
+    "category": {
+      "resource": "Resource Request",
+      "app": "Application Request",
+      "permission": "Permission Approval"
+    },
+    "step": {
+      "submit": "Submit Stage",
+      "audit": "Review Stage",
+      "execute": "Execute Stage",
+      "submitDesc": "Ticket submitter",
+      "auditDesc": "Reviewer approval",
+      "executeDesc": "Executor operation",
+      "submitShort": "Submit",
+      "auditShort": "Review",
+      "executeShort": "Execute",
+      "name": "Step name",
+      "number": "Step {{count}}",
+      "addHint": "Click the buttons above to add workflow steps"
+    },
+    "status": {
+      "approved": "Approved",
+      "rejected": "Rejected",
+      "pending": "Pending",
+      "enabled": "Enabled",
+      "disabled": "Disabled",
+      "default": "Default",
+      "passed": "Passed",
+      "waiting": "Waiting",
+      "notStarted": "Not started"
+    },
+    "col": {
+      "submitTime": "Submitted",
+      "submitAccount": "Submitter",
+      "currentApprover": "Current Reviewer",
+      "status": "Status",
+      "actions": "Actions"
+    },
+    "editor": {
+      "editTitle": "Edit Approval Workflow",
+      "newTitle": "New Approval Workflow",
+      "workflowName": "Workflow name",
+      "workflowCategory": "Category",
+      "workflowDesc": "Description",
+      "workflowSteps": "Workflow steps",
+      "auditUser": "Reviewer",
+      "executeUser": "Executor",
+      "pleaseSelect": "Please select",
+      "selectAll": "Select all",
+      "deselectAll": "Deselect all",
+      "enterName": "Enter workflow name",
+      "nameRequired": "Please enter a workflow name",
+      "addStepRequired": "Please add at least one step",
+      "stepNeedsApprover": "Step \"{{name}}\" needs at least one approver",
+      "saveFailed": "Save failed",
+      "people": "{{count}} people"
+    },
+    "detail": {
+      "title": "Request Details",
+      "approvalDetail": "Approval Details",
+      "approvalDetailDesc": "View approval workflow details",
+      "operationTimeline": "Operation Timeline",
+      "submitNode": "Submit Request",
+      "assignee": "Assignee",
+      "adminPending": "Admin (unassigned)",
+      "admin": "Admin",
+      "requestContent": "Request Content",
+      "approvalProgress": "Approval Progress",
+      "requestForm": "Request Form",
+      "operationLog": "Operation Log",
+      "applicant": "Applicant",
+      "submittedAt": "Submitted at",
+      "noApproverLinked": "No approver linked",
+      "stepProgress": "Step {{current}}/{{total}}",
+      "statusLabel": "Status: "
+    },
+    "flow": {
+      "title": "Resource Request",
+      "subtitle": "Cloud server request · Application deployment request",
+      "pendingApproval": "Pending Approval",
+      "myTodo": "My Tasks",
+      "tabInstances": "Instances",
+      "tabTemplates": "Templates",
+      "tabMyApprovals": "My Approvals",
+      "searchPlaceholder": "Search title/applicant...",
+      "searchRequest": "Search requests...",
+      "filterType": "Filter type: ",
+      "allTypes": "All types",
+      "newResourceRequest": "New Resource Request",
+      "selectType": "Please select request type",
+      "fillInfo": "Please fill in the request info",
+      "backToSelect": "← Back to type selection",
+      "noTemplateAvailable": "No template available",
+      "fieldCount": "{{count}} fields",
+      "nodeCount": "{{count}} nodes",
+      "createdOn": "Created on",
+      "approvalPassed": "Approval passed",
+      "pleaseSelectType": "Please select a request type first",
+      "pleaseFillField": "Please fill in {{label}}",
+      "approveTitle": "Approve",
+      "rejectTitle": "Reject",
+      "commentPlaceholder": "Enter approval comment (optional)",
+      "approveConfirm": "Confirm Approve",
+      "rejectConfirm": "Confirm Reject",
+      "loadFailed": "Failed to load approval data"
+    },
+    "type": {
+      "serverApply": "Cloud Server Request",
+      "appDeploy": "Application Deployment Request",
+      "deploy": "Deploy Approval",
+      "server": "Server Operation",
+      "permission": "Permission Request",
+      "general": "General Approval"
+    },
+    "msg": {
+      "fetchFailed": "Failed to load approval workflows",
+      "submitSuccess": "Request submitted",
+      "submitFailed": "Submit failed",
+      "approveSuccess": "Approved",
+      "rejectSuccess": "Rejected",
+      "approveFailed": "Approval failed",
+      "deleted": "Deleted",
+      "deleteFailed": "Delete failed",
+      "setDefaultSuccess": "Set as default",
+      "disabled": "Disabled",
+      "enabled": "Enabled",
+      "deleteTitle": "Delete Approval Workflow",
+      "deleteConfirm": "Are you sure to delete workflow \"{{name}}\"? This cannot be undone.",
+      "templateNotLoaded": "Template not loaded",
+      "pleaseFill": "Please fill in \"{{label}}\""
+    }
   }
 }
diff --git a/frontend/src/locales/zh-CN.json b/frontend/src/locales/zh-CN.json
index e85a68b..d1a24b3 100644
--- a/frontend/src/locales/zh-CN.json
+++ b/frontend/src/locales/zh-CN.json
@@ -389,5 +389,161 @@
     "minutesShort": "{{count}}分",
     "prevPage": "上一页",
     "nextPage": "下一页"
+  },
+  "approval": {
+    "workflowTitle": "审批流程配置",
+    "workflowSubtitle": "为资源申请、应用申请、权限审批配置多级审批流程",
+    "resourceTitle": "资源申请",
+    "appTitle": "应用申请",
+    "permissionTitle": "权限审批",
+    "resourceDesc": "申请云服务器、存储、网络等基础设施资源",
+    "appDesc": "申请应用部署、版本发布、流水线配置",
+    "permissionDesc": "申请堡垒机、VPN、日志查询、数据库查询等运维权限",
+    "newRequest": "新建申请",
+    "newWorkflow": "新建流程",
+    "createFirst": "创建第一个流程",
+    "submitRequest": "提交申请",
+    "submitting": "提交中...",
+    "retry": "重试",
+    "noWorkflows": "暂无审批流程",
+    "noRecords": "暂无申请记录",
+    "applyNow": "立即申请",
+    "noTodo": "暂无待办",
+    "noTodoDesc": "没有等待你处理的审批",
+    "noInstances": "暂无审批流程",
+    "noInstancesDesc": "当前筛选条件下没有匹配的流程实例",
+    "noTemplates": "暂无流程模板",
+    "noTemplatesDesc": "当前筛选条件下没有匹配的模板",
+    "noFlowNodes": "暂无流程节点",
+    "category": {
+      "resource": "资源申请",
+      "app": "应用申请",
+      "permission": "权限审批"
+    },
+    "step": {
+      "submit": "提交阶段",
+      "audit": "审核阶段",
+      "execute": "执行阶段",
+      "submitDesc": "工单提交人",
+      "auditDesc": "审核人员审批",
+      "executeDesc": "执行人员操作",
+      "submitShort": "提交",
+      "auditShort": "审核",
+      "executeShort": "执行",
+      "name": "步骤名称",
+      "number": "步骤 {{count}}",
+      "addHint": "请点击上方按钮添加流程步骤"
+    },
+    "status": {
+      "approved": "已通过",
+      "rejected": "已拒绝",
+      "pending": "审批中",
+      "enabled": "启用",
+      "disabled": "停用",
+      "default": "默认",
+      "passed": "通过",
+      "waiting": "待审批",
+      "notStarted": "待开始"
+    },
+    "col": {
+      "submitTime": "提交时间",
+      "submitAccount": "提交账号",
+      "currentApprover": "当前审核人",
+      "status": "状态",
+      "actions": "操作"
+    },
+    "editor": {
+      "editTitle": "编辑审批流程",
+      "newTitle": "新建审批流程",
+      "workflowName": "流程名称",
+      "workflowCategory": "所属分类",
+      "workflowDesc": "描述",
+      "workflowSteps": "流程步骤",
+      "auditUser": "审核人",
+      "executeUser": "执行人",
+      "pleaseSelect": "请选择",
+      "selectAll": "全选",
+      "deselectAll": "取消全选",
+      "enterName": "输入流程名称",
+      "nameRequired": "请输入流程名称",
+      "addStepRequired": "请至少添加一个步骤",
+      "stepNeedsApprover": "步骤\"{{name}}\"需要关联至少一个审批人",
+      "saveFailed": "保存失败",
+      "people": "{{count}}人"
+    },
+    "detail": {
+      "title": "申请详情",
+      "approvalDetail": "审批详情",
+      "approvalDetailDesc": "查看审批流程详细信息",
+      "operationTimeline": "操作时间线",
+      "submitNode": "提交申请",
+      "assignee": "指派人",
+      "adminPending": "管理员（待分配）",
+      "admin": "管理员",
+      "requestContent": "申请内容",
+      "approvalProgress": "审批进度",
+      "requestForm": "申请表单",
+      "operationLog": "操作记录",
+      "applicant": "申请人",
+      "submittedAt": "提交于",
+      "noApproverLinked": "未关联审批人",
+      "stepProgress": "第 {{current}}/{{total}} 步",
+      "statusLabel": "状态："
+    },
+    "flow": {
+      "title": "资源申请",
+      "subtitle": "云服务器申请 · 应用部署申请",
+      "pendingApproval": "待审批",
+      "myTodo": "我的待办",
+      "tabInstances": "审批实例",
+      "tabTemplates": "流程模板",
+      "tabMyApprovals": "我的审批",
+      "searchPlaceholder": "搜索标题/申请人...",
+      "searchRequest": "搜索申请...",
+      "filterType": "类型筛选：",
+      "allTypes": "全部类型",
+      "newResourceRequest": "新建资源申请",
+      "selectType": "请选择申请类型",
+      "fillInfo": "请填写申请信息",
+      "backToSelect": "← 返回选择类型",
+      "noTemplateAvailable": "暂无可用模板",
+      "fieldCount": "{{count}} 个字段",
+      "nodeCount": "{{count}} 个节点",
+      "createdOn": "创建于",
+      "approvalPassed": "审批通过",
+      "pleaseSelectType": "请先选择申请类型",
+      "pleaseFillField": "请填写{{label}}",
+      "approveTitle": "审批通过",
+      "rejectTitle": "审批拒绝",
+      "commentPlaceholder": "请输入审批意见（可选）",
+      "approveConfirm": "确认通过",
+      "rejectConfirm": "确认拒绝",
+      "loadFailed": "加载审批数据失败"
+    },
+    "type": {
+      "serverApply": "云服务器申请",
+      "appDeploy": "应用部署申请",
+      "deploy": "发布审批",
+      "server": "服务器操作",
+      "permission": "权限申请",
+      "general": "通用审批"
+    },
+    "msg": {
+      "fetchFailed": "获取审批流程失败",
+      "submitSuccess": "申请已提交",
+      "submitFailed": "提交失败",
+      "approveSuccess": "已通过",
+      "rejectSuccess": "已拒绝",
+      "approveFailed": "审批失败",
+      "deleted": "已删除",
+      "deleteFailed": "删除失败",
+      "setDefaultSuccess": "已设为默认",
+      "disabled": "已停用",
+      "enabled": "已启用",
+      "deleteTitle": "删除审批流程",
+      "deleteConfirm": "确定删除审批流程「{{name}}」？删除后不可恢复。",
+      "templateNotLoaded": "模板未加载",
+      "pleaseFill": "请填写「{{label}}」"
+    }
   }
 }
diff --git a/frontend/src/pages/approval/ApprovalAppPage.tsx b/frontend/src/pages/approval/ApprovalAppPage.tsx
index e91577a..9e4ca00 100644
--- a/frontend/src/pages/approval/ApprovalAppPage.tsx
+++ b/frontend/src/pages/approval/ApprovalAppPage.tsx
@@ -1,25 +1,27 @@
 // 应用申请子页面 — 应用部署、版本发布申请
+import { useTranslation } from 'react-i18next';
 import { ApprovalCategoryPage, type FormField } from './ApprovalCategoryPage';
 
-const APP_FIELDS: FormField[] = [
-  { key: 'app_name', label: '应用名称', type: 'text', placeholder: '如 user-service', required: true },
-  { key: 'git_url', label: 'Git 地址', type: 'text', placeholder: '如 https://github.com/org/repo.git', required: true },
-  { key: 'branch', label: '分支', type: 'text', defaultValue: 'main', required: true },
-  { key: 'language', label: '开发语言', type: 'select', options: ['Java', 'Go', 'Python', 'Node.js', 'C++'], required: true },
-  { key: 'http_port', label: 'HTTP 端口', type: 'number', placeholder: '如 8080' },
-  { key: 'env', label: '部署环境', type: 'select', options: ['dev', 'staging', 'prod'], required: true },
-  { key: 'replicas', label: '副本数', type: 'number', defaultValue: 2, required: true },
-  { key: 'remark', label: '备注', type: 'textarea' },
-];
-
-export function ApprovalAppPage() {
+function ApprovalAppPage() {
+  const { t } = useTranslation();
+  const APP_FIELDS: FormField[] = [
+    { key: 'app_name', label: 'App', type: 'text', placeholder: 'user-service', required: true },
+    { key: 'git_url', label: 'Git URL', type: 'text', placeholder: 'https://github.com/org/repo.git', required: true },
+    { key: 'branch', label: 'Branch', type: 'text', defaultValue: 'main', required: true },
+    { key: 'language', label: 'Language', type: 'select', options: ['Java', 'Go', 'Python', 'Node.js', 'C++'], required: true },
+    { key: 'http_port', label: 'HTTP Port', type: 'number', placeholder: '8080' },
+    { key: 'env', label: 'Env', type: 'select', options: ['dev', 'staging', 'prod'], required: true },
+    { key: 'replicas', label: 'Replicas', type: 'number', defaultValue: 2, required: true },
+    { key: 'remark', label: 'Remark', type: 'textarea' },
+  ];
   return (
     <ApprovalCategoryPage
       category="app"
-      title="应用申请"
-      description="申请应用部署、版本发布、流水线配置"
+      title={t('approval.appTitle')}
+      description={t('approval.appDesc')}
       fields={APP_FIELDS}
       templateCode="app_deploy"
     />
   );
 }
+export { ApprovalAppPage };
diff --git a/frontend/src/pages/approval/ApprovalCategoryPage.tsx b/frontend/src/pages/approval/ApprovalCategoryPage.tsx
index 12bd3fb..f9a1d07 100644
--- a/frontend/src/pages/approval/ApprovalCategoryPage.tsx
+++ b/frontend/src/pages/approval/ApprovalCategoryPage.tsx
@@ -1,5 +1,6 @@
 // 审批分类通用页面 — 资源申请/应用申请/权限审批三个子页面共用
 import { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -39,11 +40,11 @@ interface ProcessItem {
   steps?: StepItem[];
 }
 
-const statusBadge = (status: string) => {
+const statusBadge = (status: string, t: (k: string) => string) => {
   switch (status) {
-    case 'approved': return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30"><CheckCircle className="h-3 w-3 mr-1" />已通过</Badge>;
-    case 'rejected': return <Badge className="bg-red-500/20 text-red-400 border-red-500/30"><XCircle className="h-3 w-3 mr-1" />已拒绝</Badge>;
-    default: return <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30"><Clock className="h-3 w-3 mr-1" />审批中</Badge>;
+    case 'approved': return <Badge className="bg-emerald-500/20 text-emerald-400 border-emerald-500/30"><CheckCircle className="h-3 w-3 mr-1" />{t('approval.status.approved')}</Badge>;
+    case 'rejected': return <Badge className="bg-red-500/20 text-red-400 border-red-500/30"><XCircle className="h-3 w-3 mr-1" />{t('approval.status.rejected')}</Badge>;
+    default: return <Badge className="bg-amber-500/20 text-amber-400 border-amber-500/30"><Clock className="h-3 w-3 mr-1" />{t('approval.status.pending')}</Badge>;
   }
 };
 
@@ -56,17 +57,18 @@ function getApplicant(p: JsonData): string {
   return u ? (u.real_name || u.username || `#${p.applicant}`) : (p?.applicant ? `#${p.applicant}` : '--');
 }
 
-function getCurrentApprover(p: ProcessItem): string {
+function getCurrentApprover(p: ProcessItem, t: (k: string) => string): string {
   if (p.status !== 'pending') return '--';
   const steps = p.steps || [];
-  if (steps.length === 0) return '管理员（待分配）';
+  if (steps.length === 0) return t('approval.detail.adminPending');
   const cs = steps.find(s => s.step === p.current_step && s.status === 'pending');
-  if (!cs) return '管理员（待分配）';
+  if (!cs) return t('approval.detail.adminPending');
   if (cs.approver_user) return cs.approver_user.real_name || cs.approver_user.username || `#${cs.approver}`;
-  return '管理员';
+  return t('approval.detail.admin');
 }
 
 export function ApprovalCategoryPage({ category, title, description, fields, templateCode }: Props) {
+  const { t } = useTranslation();
   const [processes, setProcesses] = useState<ProcessItem[]>([]);
   const [loading, setLoading] = useState(true);
   const [keyword, setKeyword] = useState('');
@@ -102,8 +104,8 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
   useEffect(() => { fetchTemplateId(); }, [fetchTemplateId]);
 
   const handleCreate = async () => {
-    if (!templateId) { toast.error('模板未加载'); return; }
-    for (const f of fields) { if (f.required && !formData[f.key]) { toast.error(`请填写「${f.label}」`); return; } }
+    if (!templateId) { toast.error(t('approval.msg.templateNotLoaded')); return; }
+    for (const f of fields) { if (f.required && !formData[f.key]) { toast.error(t('approval.msg.pleaseFill', { label: f.label })); return; } }
     setSubmitting(true);
     try {
       const firstVal = formData[fields[0]?.key] || '';
@@ -113,9 +115,9 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
         title: `${title} - ${firstVal}${secondVal ? ' / ' + secondVal : ''}`,
         form_data: JSON.stringify(formData),
       });
-      toast.success('申请已提交');
+      toast.success(t('approval.msg.submitSuccess'));
       setDialogOpen(false); setFormData({}); fetchProcesses();
-    } catch (err) { toast.error(err?.message || '提交失败'); }
+    } catch (err) { toast.error(err?.message || t('approval.msg.submitFailed')); }
     finally { setSubmitting(false); }
   };
 
@@ -127,15 +129,15 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
 
   const handleApprove = async (id: number) => {
     setActing(true);
-    try { await approvalApi.approveProcess(id); toast.success('已通过'); fetchProcesses(); }
-    catch (err) { toast.error(err?.response?.data?.message || '审批失败'); }
+    try { await approvalApi.approveProcess(id); toast.success(t('approval.msg.approveSuccess')); fetchProcesses(); }
+    catch (err) { toast.error(err?.response?.data?.message || t('approval.msg.approveFailed')); }
     finally { setActing(false); }
   };
 
   const handleReject = async (id: number) => {
     setActing(true);
-    try { await approvalApi.rejectProcess(id, '审批拒绝'); toast.success('已拒绝'); fetchProcesses(); }
-    catch (err) { toast.error(err?.response?.data?.message || '操作失败'); }
+    try { await approvalApi.rejectProcess(id, t('approval.flow.rejectTitle')); toast.success(t('approval.msg.rejectSuccess')); fetchProcesses(); }
+    catch (err) { toast.error(err?.response?.data?.message || t('common.operationFailed')); }
     finally { setActing(false); }
   };
 
@@ -159,29 +161,29 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
           <p className="text-sm text-[var(--dg-text-secondary)] mt-1">{description}</p>
         </div>
         <Button onClick={openCreateDialog} className="bg-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/90">
-          <Plus className="h-4 w-4 mr-2" />新建申请
+          <Plus className="h-4 w-4 mr-2" />{t('approval.newRequest')}
         </Button>
       </div>
 
       <div className="flex items-center gap-3 flex-wrap">
         <div className="relative w-64">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
-          <Input placeholder="搜索申请..." value={keyword} onChange={(e) => setKeyword(e.target.value)}
+          <Input placeholder={t('approval.flow.searchRequest')} value={keyword} onChange={(e) => setKeyword(e.target.value)}
             className="pl-9 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]" />
         </div>
         <Select value={statusFilter} onValueChange={setStatusFilter}>
           <SelectTrigger className="w-32 h-9 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
-            <SelectValue placeholder="全部状态" />
+            <SelectValue placeholder={t('common.all')} />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="all">全部状态</SelectItem>
-            <SelectItem value="pending">审批中</SelectItem>
-            <SelectItem value="approved">已通过</SelectItem>
-            <SelectItem value="rejected">已拒绝</SelectItem>
+            <SelectItem value="all">{t('common.all')}</SelectItem>
+            <SelectItem value="pending">{t('approval.status.pending')}</SelectItem>
+            <SelectItem value="approved">{t('approval.status.approved')}</SelectItem>
+            <SelectItem value="rejected">{t('approval.status.rejected')}</SelectItem>
           </SelectContent>
         </Select>
         <Button variant="outline" size="sm" className="border-[var(--dg-border)]" onClick={fetchProcesses}>
-          <RefreshCw className="h-4 w-4 mr-2" />刷新
+          <RefreshCw className="h-4 w-4 mr-2" />{t('common.refresh')}
         </Button>
       </div>
 
@@ -192,18 +194,18 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
           ) : filtered.length === 0 ? (
             <div className="flex flex-col items-center justify-center py-16 text-[var(--dg-text-muted)]">
               <FileText className="h-10 w-10 mb-3 opacity-30" />
-              <p className="text-sm">暂无申请记录</p>
-              <Button variant="link" className="mt-2" onClick={openCreateDialog}>立即申请</Button>
+              <p className="text-sm">{t('approval.noRecords')}</p>
+              <Button variant="link" className="mt-2" onClick={openCreateDialog}>{t('approval.applyNow')}</Button>
             </div>
           ) : (
             <Table>
               <TableHeader>
                 <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
-                  <TableHead className="text-[var(--dg-text-secondary)]">提交时间</TableHead>
-                  <TableHead className="text-[var(--dg-text-secondary)]">提交账号</TableHead>
-                  <TableHead className="text-[var(--dg-text-secondary)]">当前审核人</TableHead>
-                  <TableHead className="text-[var(--dg-text-secondary)]">状态</TableHead>
-                  <TableHead className="text-[var(--dg-text-secondary)] w-28">操作</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">{t('approval.col.submitTime')}</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">{t('approval.col.submitAccount')}</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">{t('approval.col.currentApprover')}</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)]">{t('approval.col.status')}</TableHead>
+                  <TableHead className="text-[var(--dg-text-secondary)] w-28">{t('approval.col.actions')}</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -213,22 +215,22 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
                       {p.created_at ? new Date(p.created_at).toLocaleString('zh-CN') : '--'}
                     </TableCell>
                     <TableCell className="text-[var(--dg-text-primary)]">{getApplicant(p)}</TableCell>
-                    <TableCell className="text-[var(--dg-text-muted)] text-sm">{getCurrentApprover(p)}</TableCell>
-                    <TableCell>{statusBadge(p.status)}</TableCell>
+                    <TableCell className="text-[var(--dg-text-muted)] text-sm">{getCurrentApprover(p, t)}</TableCell>
+                    <TableCell>{statusBadge(p.status, t)}</TableCell>
                     <TableCell>
                       <div className="flex items-center gap-1">
                         {p.status === 'pending' ? (
                           <>
                             <Button variant="ghost" size="sm" className="h-8 text-red-400 hover:bg-red-500/10" onClick={() => handleReject(p.id)} disabled={acting}>
-                              <XIcon className="h-3.5 w-3.5 mr-1" />拒绝
+                              <XIcon className="h-3.5 w-3.5 mr-1" />{t('common.reject')}
                             </Button>
                             <Button variant="ghost" size="sm" className="h-8 text-emerald-400 hover:bg-emerald-500/10" onClick={() => handleApprove(p.id)} disabled={acting}>
-                              <Check className="h-3.5 w-3.5 mr-1" />通过
+                              <Check className="h-3.5 w-3.5 mr-1" />{t('common.approve')}
                             </Button>
                           </>
                         ) : (
                           <Button variant="ghost" size="sm" className="h-8 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]" onClick={() => openDetail(p)}>
-                            <Eye className="h-3.5 w-3.5 mr-1" />详情
+                            <Eye className="h-3.5 w-3.5 mr-1" />{t('common.detail')}
                           </Button>
                         )}
                       </div>
@@ -245,7 +247,7 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-lg max-h-[85vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-[var(--dg-text-primary)]">新建{title}</DialogTitle>
+            <DialogTitle className="text-[var(--dg-text-primary)]">{t('approval.newRequest')} {title}</DialogTitle>
             <DialogDescription className="text-[var(--dg-text-secondary)]">{description}</DialogDescription>
           </DialogHeader>
           <div className="space-y-4 py-2">
@@ -254,7 +256,7 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
                 <Label className="text-[var(--dg-text-primary)] text-sm">{field.label}{field.required && <span className="text-red-400 ml-0.5">*</span>}</Label>
                 {field.type === 'select' ? (
                   <Select value={formData[field.key] || ''} onValueChange={(v) => setFormData((prev) => ({ ...prev, [field.key]: v }))}>
-                    <SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"><SelectValue placeholder={field.placeholder || `选择${field.label}`} /></SelectTrigger>
+                    <SelectTrigger className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"><SelectValue placeholder={field.placeholder || `${t('approval.editor.pleaseSelect')}${field.label}`} /></SelectTrigger>
                     <SelectContent>{(field.options || []).map((opt) => (<SelectItem key={opt} value={opt}>{opt}</SelectItem>))}</SelectContent>
                   </Select>
                 ) : field.type === 'textarea' ? (
@@ -269,9 +271,9 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
             ))}
           </div>
           <div className="flex justify-end gap-3 pt-2">
-            <Button variant="outline" className="border-[var(--dg-border)]" onClick={() => setDialogOpen(false)}>取消</Button>
+            <Button variant="outline" className="border-[var(--dg-border)]" onClick={() => setDialogOpen(false)}>{t('common.cancel')}</Button>
             <Button onClick={handleCreate} disabled={submitting} className="bg-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/90">
-              {submitting ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />提交中...</> : '提交申请'}
+              {submitting ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />{t('approval.submitting')}</> : t('approval.submitRequest')}
             </Button>
           </div>
         </DialogContent>
@@ -290,35 +292,36 @@ export function ApprovalCategoryPage({ category, title, description, fields, tem
 function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
   item: ProcessItem | null; onClose: () => void; fields: FormField[]; onStatusChange: () => void;
 }) {
+  const { t } = useTranslation();
   const [acting, setActing] = useState(false);
   if (!item) return null;
 
-  const timeStr = (t: string | null) => {
-    if (!t) return '';
-    return new Date(t).toLocaleString('zh-CN');
+  const timeStr = (tm: string | null) => {
+    if (!tm) return '';
+    return new Date(tm).toLocaleString('zh-CN');
   };
 
   const steps = item.steps || [];
 
   const handleApprove = async () => {
     setActing(true);
-    try { await approvalApi.approveProcess(item.id); toast.success('已通过'); onStatusChange(); onClose(); }
-    catch (err) { toast.error(err?.response?.data?.message || '审批失败'); }
+    try { await approvalApi.approveProcess(item.id); toast.success(t('approval.msg.approveSuccess')); onStatusChange(); onClose(); }
+    catch (err) { toast.error(err?.response?.data?.message || t('approval.msg.approveFailed')); }
     finally { setActing(false); }
   };
 
   const handleReject = async () => {
     setActing(true);
-    try { await approvalApi.rejectProcess(item.id, '审批拒绝'); toast.success('已拒绝'); onStatusChange(); onClose(); }
-    catch (err) { toast.error(err?.response?.data?.message || '操作失败'); }
+    try { await approvalApi.rejectProcess(item.id, t('approval.flow.rejectTitle')); toast.success(t('approval.msg.rejectSuccess')); onStatusChange(); onClose(); }
+    catch (err) { toast.error(err?.response?.data?.message || t('common.operationFailed')); }
     finally { setActing(false); }
   };
 
   const stepStatusLabel = (s: StepItem) => {
-    if (s.status === 'approved') return '通过';
-    if (s.status === 'rejected') return '拒绝';
-    if (s.status === 'pending' && s.step === item.current_step) return '待审批';
-    if (s.status === 'pending') return '待开始';
+    if (s.status === 'approved') return t('approval.status.passed');
+    if (s.status === 'rejected') return t('common.reject');
+    if (s.status === 'pending' && s.step === item.current_step) return t('approval.status.waiting');
+    if (s.status === 'pending') return t('approval.status.notStarted');
     return s.status;
   };
 
@@ -331,32 +334,32 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
 
   const approverName = (s: StepItem) => {
     if (s.approver_user) return s.approver_user.real_name || s.approver_user.username || `#${s.approver}`;
-    return '管理员';
+    return t('approval.detail.admin');
   };
 
   return (
     <Dialog open={!!item} onOpenChange={(v) => { if (!v) onClose(); }}>
       <DialogContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] max-w-lg max-h-[85vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-[var(--dg-text-primary)]">申请详情</DialogTitle>
+          <DialogTitle className="text-[var(--dg-text-primary)]">{t('approval.detail.title')}</DialogTitle>
           <DialogDescription className="text-[var(--dg-text-secondary)]">{item.title}</DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-2">
           {/* Status + Meta */}
           <div className="flex items-center gap-3">
-            <span className="text-sm text-[var(--dg-text-muted)]">状态：</span>
-            {statusBadge(item.status)}
+            <span className="text-sm text-[var(--dg-text-muted)]">{t('approval.detail.statusLabel')}</span>
+            {statusBadge(item.status, t)}
             {item.status === 'pending' && (
               <span className="text-xs text-[var(--dg-text-muted)]">
-                第 {item.current_step}/{item.total_steps} 步
+                {t('approval.detail.stepProgress', { current: item.current_step, total: item.total_steps })}
               </span>
             )}
           </div>
 
           {/* Operation Timeline */}
           <div className="border-t border-[var(--dg-border)] pt-4">
-            <h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-4">操作时间线</h4>
+            <h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-4">{t('approval.detail.operationTimeline')}</h4>
             <div className="space-y-0">
               {/* 1. Submit node */}
               <div className="flex gap-3">
@@ -366,7 +369,7 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
                 </div>
                 <div className="flex-1 pb-4">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-[var(--dg-text-primary)]">提交申请</span>
+                    <span className="text-sm font-medium text-[var(--dg-text-primary)]">{t('approval.detail.submitNode')}</span>
                     <span className="text-xs text-[var(--dg-text-muted)]">·</span>
                     <span className="text-xs text-[var(--dg-text-secondary)]">{getApplicant(item)}</span>
                     <span className="text-xs text-[var(--dg-text-muted)]">·</span>
@@ -394,7 +397,7 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
               {steps.map((s, i) => {
                 const isLast = i === steps.length - 1;
                 const isExecute = s.step_type === 'execute';
-                const stepLabel = isExecute ? '执行' : '审核';
+                const stepLabel = isExecute ? t('approval.step.executeShort') : t('approval.step.auditShort');
                 const iconColor = s.status === 'approved' ? 'bg-emerald-500/20'
                   : s.status === 'rejected' ? 'bg-red-500/20'
                   : 'bg-[var(--dg-bg-tertiary)]';
@@ -416,7 +419,7 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
                         {s.approver_user && (
                           <>
                             <span className="text-xs text-[var(--dg-text-muted)]">·</span>
-                            <span className="text-xs text-[var(--dg-text-secondary)]">指派人: {approverName(s)}</span>
+                            <span className="text-xs text-[var(--dg-text-secondary)]">{t('approval.detail.assignee')}: {approverName(s)}</span>
                           </>
                         )}
                         {s.approved_at && (
@@ -446,7 +449,7 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
 
           {/* Full form data */}
           <div className="border-t border-[var(--dg-border)] pt-4">
-            <h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-2">申请内容</h4>
+            <h4 className="text-sm font-medium text-[var(--dg-text-primary)] mb-2">{t('approval.detail.requestContent')}</h4>
             <div className="space-y-2">
               {(() => {
                 const data = parseFormData(item.form_data || '{}');
@@ -468,14 +471,14 @@ function DetailTimelineDialog({ item, onClose, fields, onStatusChange }: {
           {item.status === 'pending' && (
             <>
               <Button variant="outline" className="border-red-500/30 text-red-400 hover:bg-red-500/10" onClick={handleReject} disabled={acting}>
-                <XIcon className="h-4 w-4 mr-1.5" />拒绝
+                <XIcon className="h-4 w-4 mr-1.5" />{t('common.reject')}
               </Button>
               <Button className="bg-emerald-600 hover:bg-emerald-700" onClick={handleApprove} disabled={acting}>
-                <Check className="h-4 w-4 mr-1.5" />通过
+                <Check className="h-4 w-4 mr-1.5" />{t('common.approve')}
               </Button>
             </>
           )}
-          <Button variant="outline" className="border-[var(--dg-border)]" onClick={onClose}>关闭</Button>
+          <Button variant="outline" className="border-[var(--dg-border)]" onClick={onClose}>{t('common.close')}</Button>
         </div>
       </DialogContent>
     </Dialog>
diff --git a/frontend/src/pages/approval/ApprovalPermissionPage.tsx b/frontend/src/pages/approval/ApprovalPermissionPage.tsx
index ee7701d..747ea17 100644
--- a/frontend/src/pages/approval/ApprovalPermissionPage.tsx
+++ b/frontend/src/pages/approval/ApprovalPermissionPage.tsx
@@ -1,25 +1,27 @@
 // 权限审批子页面 — 堡垒机、VPN、日志查询、数据查询等权限申请
+import { useTranslation } from 'react-i18next';
 import { ApprovalCategoryPage, type FormField } from './ApprovalCategoryPage';
 
-const PERMISSION_FIELDS: FormField[] = [
-  { key: 'perm_type', label: '权限类型', type: 'select', options: [
-    '堡垒机权限', '生产VPN权限', '日志查询权限', '数据库查询权限', '服务器SSH权限', 'K8s集群权限',
-  ], required: true },
-  { key: 'account', label: '申请账号', type: 'text', placeholder: '如 logan.li', required: true },
-  { key: 'reason', label: '申请理由', type: 'textarea', placeholder: '说明为什么需要该权限', required: true },
-  { key: 'duration', label: '权限时长', type: 'select', options: [
-    '临时(24小时)', '短期(7天)', '中期(30天)', '长期(90天)', '永久',
-  ], required: true },
-];
-
-export function ApprovalPermissionPage() {
+function ApprovalPermissionPage() {
+  const { t } = useTranslation();
+  const PERMISSION_FIELDS: FormField[] = [
+    { key: 'perm_type', label: t('approval.type.permission'), type: 'select', options: [
+      '堡垒机', 'VPN', 'Log', 'DB', 'SSH', 'K8s',
+    ], required: true },
+    { key: 'account', label: 'Account', type: 'text', placeholder: 'logan.li', required: true },
+    { key: 'reason', label: 'Reason', type: 'textarea', placeholder: '', required: true },
+    { key: 'duration', label: 'Duration', type: 'select', options: [
+      '24h', '7d', '30d', '90d', 'Permanent',
+    ], required: true },
+  ];
   return (
     <ApprovalCategoryPage
       category="permission"
-      title="权限审批"
-      description="申请堡垒机、VPN、日志查询、数据库查询等运维权限"
+      title={t('approval.permissionTitle')}
+      description={t('approval.permissionDesc')}
       fields={PERMISSION_FIELDS}
       templateCode="permission_request"
     />
   );
 }
+export { ApprovalPermissionPage };
diff --git a/frontend/src/pages/approval/ApprovalResourcePage.tsx b/frontend/src/pages/approval/ApprovalResourcePage.tsx
index 6b49d9d..96306d3 100644
--- a/frontend/src/pages/approval/ApprovalResourcePage.tsx
+++ b/frontend/src/pages/approval/ApprovalResourcePage.tsx
@@ -1,24 +1,26 @@
 // 资源申请子页面 — 云服务器、存储、网络等资源申请
+import { useTranslation } from 'react-i18next';
 import { ApprovalCategoryPage, type FormField } from './ApprovalCategoryPage';
 
-const RESOURCE_FIELDS: FormField[] = [
-  { key: 'provider', label: '云厂商', type: 'select', options: ['阿里云', '腾讯云', '华为云', 'AWS'], required: true },
-  { key: 'region', label: '地域', type: 'text', placeholder: '如 cn-hangzhou', required: true },
-  { key: 'spec', label: '规格', type: 'select', options: ['2C4G', '4C8G', '8C16G', '16C32G', '32C64G'], required: true },
-  { key: 'disk', label: '系统盘(GB)', type: 'number', defaultValue: 40, required: true },
-  { key: 'count', label: '数量(台)', type: 'number', defaultValue: 1, required: true },
-  { key: 'duration', label: '时长', type: 'select', options: ['1个月', '3个月', '6个月', '1年'], required: true },
-  { key: 'purpose', label: '用途说明', type: 'textarea', required: true },
-];
-
-export function ApprovalResourcePage() {
+function ApprovalResourcePage() {
+  const { t } = useTranslation();
+  const RESOURCE_FIELDS: FormField[] = [
+    { key: 'provider', label: t('approval.resourceTitle'), type: 'select', options: ['阿里云', '腾讯云', '华为云', 'AWS'], required: true },
+    { key: 'region', label: 'Region', type: 'text', placeholder: 'cn-hangzhou', required: true },
+    { key: 'spec', label: 'Spec', type: 'select', options: ['2C4G', '4C8G', '8C16G', '16C32G', '32C64G'], required: true },
+    { key: 'disk', label: 'Disk(GB)', type: 'number', defaultValue: 40, required: true },
+    { key: 'count', label: 'Count', type: 'number', defaultValue: 1, required: true },
+    { key: 'duration', label: 'Duration', type: 'select', options: ['1M', '3M', '6M', '1Y'], required: true },
+    { key: 'purpose', label: 'Purpose', type: 'textarea', required: true },
+  ];
   return (
     <ApprovalCategoryPage
       category="resource"
-      title="资源申请"
-      description="申请云服务器、存储、网络等基础设施资源"
+      title={t('approval.resourceTitle')}
+      description={t('approval.resourceDesc')}
       fields={RESOURCE_FIELDS}
       templateCode="server_apply"
     />
   );
 }
+export { ApprovalResourcePage };
diff --git a/frontend/src/pages/approval/ApprovalWorkflowPage.tsx b/frontend/src/pages/approval/ApprovalWorkflowPage.tsx
index 9574353..e8bb70f 100644
--- a/frontend/src/pages/approval/ApprovalWorkflowPage.tsx
+++ b/frontend/src/pages/approval/ApprovalWorkflowPage.tsx
@@ -1,5 +1,6 @@
 // 审批流程配置 — 参考 OpsxSQL WorkflowPage 工作流模式
 import { useState, useEffect, useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Plus, Edit2, Trash2, X, ChevronDown, ChevronUp, ArrowUp, ArrowDown,
   Play, Loader2, Star, CheckCircle, GitBranch, Users, Shield,
@@ -51,18 +52,6 @@ interface StepDraft {
   approver_ids: number[];
 }
 
-const CATEGORY_LABELS: Record<string, string> = {
-  resource: '资源申请',
-  app: '应用申请',
-  permission: '权限审批',
-};
-
-const STEP_TYPE_LABELS: Record<string, string> = {
-  submit: '提交阶段',
-  audit: '审核阶段',
-  execute: '执行阶段',
-};
-
 const STEP_TYPE_COLORS: Record<string, string> = {
   submit: 'bg-blue-500/15 text-blue-400 border-blue-500/30',
   audit: 'bg-purple-500/15 text-purple-400 border-purple-500/30',
@@ -75,12 +64,6 @@ const STEP_TYPE_ICONS: Record<string, React.ElementType> = {
   execute: Play,
 };
 
-const STEP_TYPES = [
-  { value: 'submit' as const, label: '提交阶段', desc: '工单提交人' },
-  { value: 'audit' as const, label: '审核阶段', desc: '审核人员审批' },
-  { value: 'execute' as const, label: '执行阶段', desc: '执行人员操作' },
-];
-
 
 
 /* ------------------------------------------------------------------ */
@@ -98,6 +81,7 @@ function UserSelectInline({
   onClear: () => void;
   getUserName: (uid: number) => string;
 }) {
+  const { t } = useTranslation();
   const [open, setOpen] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
   const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
@@ -122,7 +106,7 @@ function UserSelectInline({
         }`}
       >
         <span className="truncate">
-          {selectedIds.length === 0 ? `${label} * 请选择` : `${label} (${selectedIds.length}人)`}
+          {selectedIds.length === 0 ? `${label} * ${t('approval.editor.pleaseSelect')}` : `${label} (${t('approval.editor.people', { count: selectedIds.length })})`}
         </span>
         <ChevronDown className={`w-4 h-4 text-[var(--dg-text-muted)] transition-transform ${open ? 'rotate-180' : ''}`} />
       </button>
@@ -145,10 +129,10 @@ function UserSelectInline({
             style={{ top: pos.top, left: pos.left, width: pos.width }}>
             <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--dg-border)]">
               <button onClick={onToggleAll} className="text-[11px] text-blue-400 hover:text-blue-300">
-                {selectedIds.length === users.length && users.length > 0 ? '取消全选' : '全选'}
+                {selectedIds.length === users.length && users.length > 0 ? t('approval.editor.deselectAll') : t('approval.editor.selectAll')}
               </button>
               {selectedIds.length > 0 && (
-                <button onClick={onClear} className="text-[11px] text-red-400 hover:text-red-300">清空</button>
+                <button onClick={onClear} className="text-[11px] text-red-400 hover:text-red-300">{t('common.clear')}</button>
               )}
             </div>
             {users.map((u) => {
@@ -189,6 +173,7 @@ interface EditorProps {
 }
 
 function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps) {
+  const { t } = useTranslation();
   const isEdit = !!workflow;
   const [name, setName] = useState(workflow?.name || '');
   const [description, setDescription] = useState(workflow?.description || '');
@@ -197,6 +182,24 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
   const [submitting, setSubmitting] = useState(false);
   const [error, setError] = useState('');
 
+  const categoryLabels: Record<string, string> = {
+    resource: t('approval.category.resource'),
+    app: t('approval.category.app'),
+    permission: t('approval.category.permission'),
+  };
+
+  const stepTypeLabels: Record<string, string> = {
+    submit: t('approval.step.submit'),
+    audit: t('approval.step.audit'),
+    execute: t('approval.step.execute'),
+  };
+
+  const stepTypes = [
+    { value: 'submit' as const, label: t('approval.step.submit') },
+    { value: 'audit' as const, label: t('approval.step.audit') },
+    { value: 'execute' as const, label: t('approval.step.execute') },
+  ];
+
   useEffect(() => {
     if (workflow?.steps?.length) {
       setSteps(
@@ -210,10 +213,11 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
       );
     } else {
       setSteps([
-        { name: '提交申请', step_type: 'submit', approver_ids: [] },
-        { name: '审核', step_type: 'audit', approver_ids: [] },
+        { name: t('approval.detail.submitNode'), step_type: 'submit', approver_ids: [] },
+        { name: t('approval.step.auditShort'), step_type: 'audit', approver_ids: [] },
       ]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [workflow]);
 
   const parseIds = (ids: string | null): number[] => {
@@ -225,7 +229,11 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
   };
 
   const addStep = (type: 'submit' | 'audit' | 'execute') => {
-    const labels: Record<string, string> = { submit: '提交', audit: '审核', execute: '执行' };
+    const labels: Record<string, string> = {
+      submit: t('approval.step.submitShort'),
+      audit: t('approval.step.auditShort'),
+      execute: t('approval.step.executeShort'),
+    };
     const count = steps.filter((s) => s.step_type === type).length;
     const suffix = count > 0 ? ` ${count + 1}` : '';
     setSteps([...steps, { name: `${labels[type]}${suffix}`, step_type: type, approver_ids: [] }]);
@@ -251,7 +259,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
   const getEligibleUsers = (stepType: string) => {
     const active = users.filter(u => u.is_active !== false);
     if (stepType === 'audit') return active;
-    if (stepType === 'execute') return active.filter(u => 
+    if (stepType === 'execute') return active.filter(u =>
       ['super_admin', 'k8s_admin', 'release_admin', 'resource_admin'].includes(u.role)
     );
     return active;
@@ -265,11 +273,11 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
   };
 
   const handleSubmit = async () => {
-    if (!name.trim()) { setError('请输入流程名称'); return; }
-    if (steps.length === 0) { setError('请至少添加一个步骤'); return; }
+    if (!name.trim()) { setError(t('approval.editor.nameRequired')); return; }
+    if (steps.length === 0) { setError(t('approval.editor.addStepRequired')); return; }
     for (let i = 0; i < steps.length; i++) {
       if (steps[i].step_type !== 'submit' && steps[i].approver_ids.length === 0) {
-        setError(`步骤"${steps[i].name}"需要关联至少一个审批人`);
+        setError(t('approval.editor.stepNeedsApprover', { name: steps[i].name }));
         return;
       }
     }
@@ -297,7 +305,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
       }
       onSaved();
     } catch (e: unknown) {
-      const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败';
+      const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || t('approval.editor.saveFailed');
       setError(msg);
     } finally {
       setSubmitting(false);
@@ -317,7 +325,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
       <div className="relative bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto m-4">
         <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--dg-border)]">
           <h2 className="text-base font-semibold text-[var(--dg-text-primary)]">
-            {isEdit ? '编辑审批流程' : '新建审批流程'}
+            {isEdit ? t('approval.editor.editTitle') : t('approval.editor.newTitle')}
           </h2>
           <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] transition-colors">
             <X className="w-4 h-4" />
@@ -329,33 +337,33 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
 
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">流程名称 *</label>
-              <input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder="输入流程名称" />
+              <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">{t('approval.editor.workflowName')} *</label>
+              <input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder={t('approval.editor.enterName')} />
             </div>
             <div>
-              <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">所属分类</label>
+              <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">{t('approval.editor.workflowCategory')}</label>
               <select className={inputCls} value={category} onChange={(e) => setCategory(e.target.value)}>
-                <option value="resource">资源申请</option>
-                <option value="app">应用申请</option>
-                <option value="permission">权限审批</option>
+                <option value="resource">{t('approval.category.resource')}</option>
+                <option value="app">{t('approval.category.app')}</option>
+                <option value="permission">{t('approval.category.permission')}</option>
               </select>
             </div>
           </div>
 
           <div>
-            <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">描述</label>
-            <input className={inputCls} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="可选" />
+            <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">{t('approval.editor.workflowDesc')}</label>
+            <input className={inputCls} value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('common.optional')} />
           </div>
 
           {/* Steps */}
           <div>
             <div className="flex items-center justify-between mb-2">
-              <label className="text-xs font-medium text-[var(--dg-text-secondary)]">流程步骤</label>
+              <label className="text-xs font-medium text-[var(--dg-text-secondary)]">{t('approval.editor.workflowSteps')}</label>
               <div className="flex items-center gap-1">
-                {STEP_TYPES.map((t) => (
-                  <button key={t.value} onClick={() => addStep(t.value)}
+                {stepTypes.map((tp) => (
+                  <button key={tp.value} onClick={() => addStep(tp.value)}
                     className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 rounded transition-colors">
-                    <Plus className="w-3 h-3" />{t.label}
+                    <Plus className="w-3 h-3" />{tp.label}
                   </button>
                 ))}
               </div>
@@ -374,10 +382,10 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
                       <input
                         className="flex-1 px-2 py-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-sm focus:border-blue-400 focus:outline-none text-[var(--dg-text-primary)]"
                         value={step.name} onChange={(e) => updateStep(idx, { name: e.target.value })}
-                        placeholder="步骤名称"
+                        placeholder={t('approval.step.name')}
                       />
                       <span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>
-                        {STEP_TYPE_LABELS[step.step_type]}
+                        {stepTypeLabels[step.step_type]}
                       </span>
                       <div className="flex items-center gap-0.5 ml-1">
                         <button onClick={() => moveStep(idx, -1)} disabled={idx === 0}
@@ -400,7 +408,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
                         <UserSelectInline
                           users={getEligibleUsers(step.step_type)}
                           selectedIds={step.approver_ids}
-                          label={step.step_type === 'audit' ? '审核人' : '执行人'}
+                          label={step.step_type === 'audit' ? t('approval.editor.auditUser') : t('approval.editor.executeUser')}
                           onToggle={(uid) => toggleUser(idx, uid)}
                           onToggleAll={() => toggleAllUsers(idx)}
                           onClear={() => updateStep(idx, { approver_ids: [] })}
@@ -414,7 +422,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
 
               {steps.length === 0 && (
                 <div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">
-                  请点击上方按钮添加流程步骤
+                  {t('approval.step.addHint')}
                 </div>
               )}
             </div>
@@ -423,11 +431,11 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
 
         <div className="flex items-center justify-end gap-3 px-5 py-4 border-t border-[var(--dg-border)]">
           <button onClick={onClose} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] rounded-lg transition-colors">
-            取消
+            {t('common.cancel')}
           </button>
           <Button onClick={handleSubmit} disabled={submitting}>
             {submitting && <Loader2 className="w-4 h-4 animate-spin mr-1" />}
-            {isEdit ? '保存' : '创建'}
+            {isEdit ? t('common.save') : t('common.create')}
           </Button>
         </div>
       </div>
@@ -440,6 +448,7 @@ function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps)
 /* ------------------------------------------------------------------ */
 
 export default function ApprovalWorkflowPage() {
+  const { t } = useTranslation();
   const confirm = useConfirm();
   const [items, setItems] = useState<WorkflowItem[]>([]);
   const [users, setUsers] = useState<UserItem[]>([]);
@@ -448,6 +457,18 @@ export default function ApprovalWorkflowPage() {
   const [expandedId, setExpandedId] = useState<number | null>(null);
   const [editorWorkflow, setEditorWorkflow] = useState<WorkflowItem | null | undefined>(undefined);
 
+  const categoryLabels: Record<string, string> = {
+    resource: t('approval.category.resource'),
+    app: t('approval.category.app'),
+    permission: t('approval.category.permission'),
+  };
+
+  const stepTypeLabels: Record<string, string> = {
+    submit: t('approval.step.submit'),
+    audit: t('approval.step.audit'),
+    execute: t('approval.step.execute'),
+  };
+
   const fetchWorkflows = useCallback(async () => {
     try {
       setLoading(true);
@@ -457,11 +478,11 @@ export default function ApprovalWorkflowPage() {
       const normalized = data.map((w: any) => ({ ...w, steps: w.steps || [] }));
       setItems(normalized);
     } catch {
-      setError('获取审批流程失败');
+      setError(t('approval.msg.fetchFailed'));
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [t]);
 
   const fetchUsers = useCallback(async () => {
     try {
@@ -485,32 +506,32 @@ export default function ApprovalWorkflowPage() {
     try {
       await approvalWorkflowApi.update(wf.id, { is_active: !wf.is_active });
       setItems((prev) => prev.map((w) => (w.id === wf.id ? { ...w, is_active: !w.is_active } : w)));
-      toast.success(wf.is_active ? '已停用' : '已启用');
-    } catch { toast.error('操作失败'); }
-  }, []);
+      toast.success(wf.is_active ? t('approval.msg.disabled') : t('approval.msg.enabled'));
+    } catch { toast.error(t('common.operationFailed')); }
+  }, [t]);
 
   const handleDelete = useCallback(async (id: number, name: string) => {
     const ok = await confirm({
-      title: '删除审批流程',
-      description: `确定删除审批流程「${name}」？删除后不可恢复。`,
-      confirmText: '删除',
+      title: t('approval.msg.deleteTitle'),
+      description: t('approval.msg.deleteConfirm', { name }),
+      confirmText: t('common.delete'),
       variant: 'destructive',
     });
     if (!ok) return;
     try {
       await approvalWorkflowApi.delete(id);
       setItems((prev) => prev.filter((w) => w.id !== id));
-      toast.success('已删除');
-    } catch { toast.error('删除失败'); }
-  }, [confirm]);
+      toast.success(t('approval.msg.deleted'));
+    } catch { toast.error(t('approval.msg.deleteFailed')); }
+  }, [confirm, t]);
 
   const setDefault = useCallback(async (id: number) => {
     try {
       await approvalWorkflowApi.setDefault(id);
       setItems((prev) => prev.map((w) => ({ ...w, is_default: w.id === id })));
-      toast.success('已设为默认');
-    } catch { toast.error('操作失败'); }
-  }, []);
+      toast.success(t('approval.msg.setDefaultSuccess'));
+    } catch { toast.error(t('common.operationFailed')); }
+  }, [t]);
 
   const getUserName = useCallback(
     (uid: number) => {
@@ -532,7 +553,7 @@ export default function ApprovalWorkflowPage() {
     return (
       <div className="flex flex-col items-center justify-center h-64 text-[var(--dg-text-muted)]">
         <p className="text-sm">{error}</p>
-        <Button variant="outline" onClick={fetchWorkflows} className="mt-3">重试</Button>
+        <Button variant="outline" onClick={fetchWorkflows} className="mt-3">{t('approval.retry')}</Button>
       </div>
     );
   }
@@ -542,21 +563,21 @@ export default function ApprovalWorkflowPage() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-semibold text-[var(--dg-text-primary)]">审批流程配置</h1>
+          <h1 className="text-2xl font-semibold text-[var(--dg-text-primary)]">{t('approval.workflowTitle')}</h1>
           <p className="text-sm text-[var(--dg-text-secondary)] mt-1">
-            为资源申请、应用申请、权限审批配置多级审批流程
+            {t('approval.workflowSubtitle')}
           </p>
         </div>
         <Button onClick={() => setEditorWorkflow(null)}>
-          <Plus className="w-4 h-4 mr-1.5" />新建流程
+          <Plus className="w-4 h-4 mr-1.5" />{t('approval.newWorkflow')}
         </Button>
       </div>
 
       {items.length === 0 ? (
         <div className="dg-card p-12 text-center">
           <GitBranch className="w-12 h-12 mx-auto mb-3 opacity-50 text-[var(--dg-text-muted)]" />
-          <p className="text-sm text-[var(--dg-text-muted)] mb-4">暂无审批流程</p>
-          <Button variant="outline" onClick={() => setEditorWorkflow(null)}>创建第一个流程</Button>
+          <p className="text-sm text-[var(--dg-text-muted)] mb-4">{t('approval.noWorkflows')}</p>
+          <Button variant="outline" onClick={() => setEditorWorkflow(null)}>{t('approval.createFirst')}</Button>
         </div>
       ) : (
         <>
@@ -571,12 +592,12 @@ export default function ApprovalWorkflowPage() {
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-3 mb-2 flex-wrap">
                           <h3 className="text-lg font-semibold text-[var(--dg-text-primary)]">{wf.name}</h3>
-                          {wf.is_default && <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-400/15 text-yellow-400 flex items-center gap-1"><Star className="w-3 h-3" />默认</span>}
+                          {wf.is_default && <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-400/15 text-yellow-400 flex items-center gap-1"><Star className="w-3 h-3" />{t('approval.status.default')}</span>}
                           <span className={`text-[10px] px-1.5 py-0.5 rounded ${wf.is_active ? 'bg-green-500/15 text-green-400' : 'bg-red-500/15 text-red-400'}`}>
-                            {wf.is_active ? '启用' : '停用'}
+                            {wf.is_active ? t('approval.status.enabled') : t('approval.status.disabled')}
                           </span>
                           <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-500/15 text-blue-400">
-                            {CATEGORY_LABELS[wf.category] || wf.category}
+                            {categoryLabels[wf.category] || wf.category}
                           </span>
                         </div>
                         {wf.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-1">{wf.description}</p>}
@@ -584,7 +605,7 @@ export default function ApprovalWorkflowPage() {
                           {wf.steps?.map((s, i) => (
                             <span key={i} className="flex items-center gap-1">
                               <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'bg-gray-500/15 text-gray-400 border-gray-500/30'}`}>
-                                {STEP_TYPE_LABELS[s.step_type] || s.step_type}
+                                {stepTypeLabels[s.step_type] || s.step_type}
                               </span>
                               {i < (wf.steps?.length || 0) - 1 && (
                                 <span className="text-[var(--dg-text-muted)] text-[10px]">→</span>
@@ -601,21 +622,21 @@ export default function ApprovalWorkflowPage() {
                         </button>
                         {!wf.is_default && (
                           <button onClick={() => setDefault(wf.id)}
-                            className="p-1.5 rounded hover:bg-yellow-500/10 text-[var(--dg-text-muted)] hover:text-yellow-400 transition-colors" title="设为默认">
+                            className="p-1.5 rounded hover:bg-yellow-500/10 text-[var(--dg-text-muted)] hover:text-yellow-400 transition-colors" title={t('approval.msg.setDefaultSuccess')}>
                             <Star className="w-4 h-4" />
                           </button>
                         )}
                         <button onClick={() => toggleActive(wf)}
                           className={`p-1.5 rounded transition-colors ${wf.is_active ? 'hover:bg-red-500/10 text-green-400 hover:text-red-400' : 'hover:bg-green-500/10 text-red-400 hover:text-green-400'}`}
-                          title={wf.is_active ? '停用' : '启用'}>
+                          title={wf.is_active ? t('approval.status.disabled') : t('approval.status.enabled')}>
                           <Play className={`w-4 h-4 ${!wf.is_active ? 'rotate-180' : ''}`} />
                         </button>
                         <button onClick={() => setEditorWorkflow(wf)}
-                          className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors" title="编辑">
+                          className="p-1.5 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors" title={t('common.edit')}>
                           <Edit2 className="w-4 h-4" />
                         </button>
                         <button onClick={() => handleDelete(wf.id, wf.name)}
-                          className="p-1.5 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:text-red-400 transition-colors" title="删除">
+                          className="p-1.5 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:text-red-400 transition-colors" title={t('common.delete')}>
                           <Trash2 className="w-4 h-4" />
                         </button>
                       </div>
@@ -634,7 +655,7 @@ export default function ApprovalWorkflowPage() {
                                 <div className="flex items-center gap-2 mb-1">
                                   <span className="text-sm font-medium text-[var(--dg-text-primary)]">{s.name}</span>
                                   <span className={`text-[10px] px-1.5 py-0.5 rounded ${STEP_TYPE_COLORS[s.step_type] || 'bg-gray-500/15 text-gray-400 border-gray-500/30'}`}>
-                                    {STEP_TYPE_LABELS[s.step_type] || s.step_type}
+                                    {stepTypeLabels[s.step_type] || s.step_type}
                                   </span>
                                 </div>
                                 {ids.length > 0 && (
@@ -647,7 +668,7 @@ export default function ApprovalWorkflowPage() {
                                   </div>
                                 )}
                                 {ids.length === 0 && s.step_type !== 'submit' && (
-                                  <span className="text-[11px] text-red-400">未关联审批人</span>
+                                  <span className="text-[11px] text-red-400">{t('approval.detail.noApproverLinked')}</span>
                                 )}
                               </div>
                             </div>