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/ApprovalWorkflowPage.tsx
+99 -78
View File
@@ -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>