feat(i18n): Approval 审批模块全量国际化 — 11 文件硬编码中文改翻译键 + approval 命名空间(136 键)
迁移文件: - 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
1 parent
61a1f32e64
commit
fef4997391
13 files changed
+649
-292
No files matched your search
@@ -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 };
|
||||
@@ -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>
|
||||
|
||||
@@ -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 };
|
||||
@@ -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 };
|
||||
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user