rlwj-lab/aiops
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): Approval 审批模块全量国际化 — 11 文件硬编码中文改翻译键 + approval 命名空间(136 键)

Browse Source 
迁移文件:
- 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)
This commit is contained in:
attacker committed 2026-06-29 18:25:29 +08:00
1 parent 61a1f32e64
commit fef4997391
13 files changed
+649 -292
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/approval/ApprovalCategoryPage.tsx
+67 -64
View File
@@ -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>