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/components/approval/ApprovalCreateDialog.tsx
+16 -14
View File
@@ -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>
frontend/src/components/approval/ApprovalDetailDialog.tsx
+14 -12
View File
@@ -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>
frontend/src/components/approval/ApprovalFlow.tsx
+32 -30
View File
@@ -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>
frontend/src/components/approval/ApprovalProcessTab.tsx
+28 -25
View File
@@ -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">
frontend/src/components/approval/ApprovalTemplateTab.tsx
+28 -23
View File
@@ -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>
frontend/src/components/approval/helpers.tsx
+6 -5
View File
@@ -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>