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

feat: 工单列表重设计+权限组实例过滤+通知修复

Browse Source 
后端:
- Ticket model 新增 ticket_no 字段(格式: YYYYMMDDHHmmss+ms+seq, 如20260522160543841)
- create_ticket 自动生成工单编号(flush后生成)
- _enrich_ticket 新增 instance_name, current_approver_name 字段
- current_approver: 从 ticket_approvals 查询第一个 pending 状态的审批步骤获取审核人
- TicketResponse schema 新增 ticket_no, instance_name, current_approver_name
- 新增 /instances/accessible endpoint(按用户权限组过滤实例, 无admin bypass)
- instance_group response_model 改为 InstanceGroupDetailResponse(含readonly/write实例)
- instance_group_members 脏数据清理, 重建 group_id=2 正确数据
- notification 模板修复: \n→\n 换行, 钉钉 \n→\n\n 双换行
- test_notification endpoint 改为真正调用 NotificationSender.send()
- auditor 角色添加到 audit_rule/ticket 只读端点
- seed_data() 创建4个默认用户(admin/zhangsan/laoliu/lurenjia)
- SQLite ALTER TABLE 添加 ticket_no 列, 迁移现有6条工单数据

前端:
- TicketsPage 完全重设计: 工单编号/实例名称/提交人/当前审核人/状态/操作
- 状态映射简化: pending/reviewing/approved→审核中, success→完成, failed→失败
- 执行详情弹框: 解析 execute_result JSON 展示状态/影响行数/耗时/验证/原始输出/错误信息
- 状态流程可视化(提交→审批→通过→执行→完成)
- 快速筛选: 全部/待审批/执行中/完成/失败 (合并 pending+reviewing+approved 统计)
- TicketCreatePage: 去掉数据库类型选择器, 用 accessible(write) 过滤变更实例
- QueriesPage: 用 accessible(readonly) 过滤查询实例
- instance.ts 新增 accessible 方法
- 分页优化: 动态计算页码范围(总页>5时中间滚动)
This commit is contained in:
logan committed 2026-05-24 22:55:51 +08:00
1 parent 88d064ea95
commit 08f0f88cf1
20 files changed
+1672 -944
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/api/instance.ts
+1
View File
@@ -2,6 +2,7 @@ import request from './request';
export const instanceApi = {
list: (params?: any) => request.get<any, any[]>('/instances', { params }),
accessible: (accessType: 'readonly' | 'write') => request.get<any, any[]>('/instances/accessible', { params: { access_type: accessType } }),
get: (id: number) => request.get<any, any>(`/instances/${id}`),
create: (data: any) => request.post<any, any>('/instances', data),
update: (id: number, data: any) => request.put<any, any>(`/instances/${id}`, data),
frontend/src/components/EditInstanceDialog.tsx
+20 -7
View File
@@ -34,12 +34,13 @@ interface Props {
open: boolean;
onClose: () => void;
onSaved: () => void;
mode?: 'edit' | 'clone';
}
/* ------------------------------------------------------------------ */
/* Reusable Edit Instance Dialog */
/* ------------------------------------------------------------------ */
export default function EditInstanceDialog({ instance, open, onClose, onSaved }: Props) {
export default function EditInstanceDialog({ instance, open, onClose, onSaved, mode = 'edit' }: Props) {
const [name, setName] = useState(instance.name);
const [host, setHost] = useState(instance.host);
const [port, setPort] = useState(String(instance.port));
@@ -105,19 +106,31 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
? maskFields.filter(m => m.table && m.field)
: undefined;
await instanceApi.update(instance.id, {
const payload: Record<string, unknown> = {
name: name.trim(),
host: host.trim(),
port: Number(port),
username: username.trim() || undefined,
password: password || undefined,
database: database.trim() || undefined,
env,
access_mode: accessMode,
workflow_id: workflowId,
excluded_databases: parsedExcluded,
mask_fields: parsedMask,
});
};
if (mode === 'clone') {
payload.db_type = instance.db_type;
if (!password) {
alert('克隆数据源需要重新输入密码');
setSubmitting(false);
return;
}
payload.password = password;
await instanceApi.create(payload);
} else {
payload.password = password || undefined;
await instanceApi.update(instance.id, payload);
}
onSaved();
} catch (e: unknown) {
const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败';
@@ -140,7 +153,7 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
>
{/* Header */}
<div className="flex items-center justify-between px-5 py-4">
<h2 className="text-base font-semibold">编辑数据源</h2>
<h2 className="text-base font-semibold">{mode === 'clone' ? '克隆数据源' : '编辑数据源'}</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" />
</button>
@@ -172,7 +185,7 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
<input className={inputCls} value={username} onChange={e => setUsername(e.target.value)} />
</div>
<div>
<label className={labelCls}>密码（留空不修改）</label>
<label className={labelCls}>{mode === 'clone' ? '密码' : '密码（留空不修改）'}</label>
<input className={inputCls} type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="••••••" />
</div>
</div>
@@ -254,7 +267,7 @@ export default function EditInstanceDialog({ instance, open, onClose, onSaved }:
<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">取消</button>
<button onClick={handleSubmit} disabled={submitting} className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 disabled:opacity-50 rounded-lg transition-colors">
{submitting && <Loader2 className="w-4 h-4 animate-spin" />}
保存
{mode === 'clone' ? '克隆' : '保存'}
</button>
</div>
</div>
frontend/src/hooks/useAuth.tsx
+20 -1
View File
@@ -164,7 +164,26 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
dataSourcePermissions: [],
customPermissions: {},
});
const [isLoggedIn, setIsLoggedIn] = useState(() => !!localStorage.getItem('token'));
// 从 token 恢复基本用户信息（页面刷新时）
const [isLoggedIn, setIsLoggedIn] = useState(() => {
const token = localStorage.getItem('token');
if (!token) return false;
try {
const payload = JSON.parse(atob(token.split('.')[1]));
const role = payload.role as UserRole;
if (role) {
setUser(u => ({
...u,
id: Number(payload.sub) || 0,
role,
roleName: roleNameMap[role] || role,
avatar: role.charAt(0).toUpperCase(),
}));
}
} catch { /* ignore */ }
return true;
});
/** 权限缓存引用 */
const permissionCacheRef = useRef<PermissionCache>({
frontend/src/pages/InstanceGroupPage.tsx
+21 -8
View File
@@ -21,7 +21,7 @@ const DB_TYPE_COLORS: Record<string, string> = {
/* ───────── Transfer Component ───────── */
interface TransferItem { label: string; value: string; tag?: string; tagColor?: string }
interface TransferItem { label: string; value: string; tag?: string; tagColor?: string; accessMode?: string }
interface TransferProps {
title: string;
@@ -151,10 +151,23 @@ export default function InstanceGroupPage() {
value: String(i.id),
tag: i.db_type,
tagColor: DB_TYPE_COLORS[i.db_type] || '',
accessMode: i.access_mode || 'readwrite',
})),
[allInstances]
);
// 查询授权：只匹配 read + readwrite 实例
const readonlyTransferItems = useMemo(() =>
transferItems.filter(i => i.accessMode === 'read' || i.accessMode === 'readwrite'),
[transferItems]
);
// 变更授权：只匹配 write + readwrite 实例
const writeTransferItems = useMemo(() =>
transferItems.filter(i => i.accessMode === 'write' || i.accessMode === 'readwrite'),
[transferItems]
);
const filteredGroups = useMemo(() => groups.filter(g => !search || g.name.includes(search)), [groups, search]);
const filteredUsers = useMemo(() => allUsers.filter(u => !userSearch || (u.display_name || u.username).toLowerCase().includes(userSearch.toLowerCase())), [allUsers, userSearch]);
@@ -263,20 +276,20 @@ export default function InstanceGroupPage() {
<div className="rounded-xl p-4 bg-emerald-500/5 border border-emerald-500/20">
<div className="flex items-center gap-2 mb-3">
<Eye className="w-4 h-4 text-emerald-400" />
<span className="text-sm font-medium text-emerald-400">只读查看</span>
<span className="text-sm font-medium text-emerald-400">查询授权</span>
<span className="text-xs text-[var(--dg-text-muted)]">— 查询数据的实例</span>
</div>
<Transfer title="只读实例" items={transferItems} selected={readonlyIds} onChange={setReadonlyIds} emptyText="选择用于查询的实例" />
<Transfer title="只读实例" items={readonlyTransferItems} selected={readonlyIds} onChange={setReadonlyIds} emptyText="选择用于查询的实例" />
</div>
{/* Write Transfer */}
<div className="rounded-xl p-4 bg-amber-500/5 border border-amber-500/20">
<div className="flex items-center gap-2 mb-3">
<PenLine className="w-4 h-4 text-amber-400" />
<span className="text-sm font-medium text-amber-400">写入变更</span>
<span className="text-sm font-medium text-amber-400">变更授权</span>
<span className="text-xs text-[var(--dg-text-muted)]">— 数据变更工单的实例</span>
</div>
<Transfer title="写入实例" items={transferItems} selected={writeIds} onChange={setWriteIds} emptyText="选择用于变更的实例" />
<Transfer title="写入实例" items={writeTransferItems} selected={writeIds} onChange={setWriteIds} emptyText="选择用于变更的实例" />
</div>
<div className="flex justify-end gap-3 pt-2">
@@ -297,7 +310,7 @@ export default function InstanceGroupPage() {
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-semibold">数据库权限组</h1>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">每个策略包含「只读查看」和「写入变更」两类实例</p>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">每个策略包含「查询授权」和「变更授权」两类实例</p>
</div>
{canManage && (
<button onClick={() => { resetForm(); setShowCreateModal(true); }} className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 rounded-lg text-sm font-medium text-white hover:bg-blue-600 transition-colors">
@@ -372,7 +385,7 @@ export default function InstanceGroupPage() {
<Card className="dg-card">
<CardContent className="p-5">
<h3 className="text-sm font-semibold flex items-center gap-2 mb-3">
<Eye className="w-4 h-4 text-emerald-400" />只读查看 ({roInst.length})
<Eye className="w-4 h-4 text-emerald-400" />查询授权 ({roInst.length})
</h3>
<InstanceList instances={roInst} />
</CardContent>
@@ -382,7 +395,7 @@ export default function InstanceGroupPage() {
<Card className="dg-card">
<CardContent className="p-5">
<h3 className="text-sm font-semibold flex items-center gap-2 mb-3">
<PenLine className="w-4 h-4 text-amber-400" />写入变更 ({wrInst.length})
<PenLine className="w-4 h-4 text-amber-400" />变更授权 ({wrInst.length})
</h3>
<InstanceList instances={wrInst} />
</CardContent>
frontend/src/pages/InstancePage.tsx
+94 -19
View File
@@ -4,7 +4,7 @@ import {
Activity, HardDrive, ChevronRight, Trash2, Edit2,
XCircle, Eye, EyeOff, ChevronLeft, Gauge, Wifi,
WifiOff, AlertTriangle, CheckCircle, Signal,
LayoutGrid, ListFilter, X, Loader2, BarChart3, Users,
LayoutGrid, ListFilter, X, Loader2, BarChart3, Users, Copy,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useActionPermission } from '@/hooks/useAuth';
@@ -140,6 +140,8 @@ export default function InstancePage() {
const [editingInstance, setEditingInstance] = useState<InstanceItem | null>(null);
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
const [batchDeleting, setBatchDeleting] = useState(false);
const [showClone, setShowClone] = useState(false);
const [cloneSource, setCloneSource] = useState<InstanceItem | null>(null);
const typeTabs = [
{ key: 'all', label: '全部', icon: LayoutGrid },
@@ -249,6 +251,7 @@ export default function InstancePage() {
canDelete={canDelete}
onDelete={() => { handleDelete(editingInstance.id); setView('grid'); setShowEdit(false); setEditingInstance(null); }}
onEdit={() => {}}
onClone={canAdd ? () => { setCloneSource(editingInstance); setShowClone(true); } : undefined}
/>
<EditInstanceDialog
instance={editingInstance}
@@ -256,6 +259,15 @@ export default function InstancePage() {
onClose={() => { setShowEdit(false); setEditingInstance(null); }}
onSaved={() => { setShowEdit(false); setEditingInstance(null); fetchInstances(); }}
/>
{cloneSource && showClone && (
<EditInstanceDialog
instance={{ ...cloneSource, name: `${cloneSource.name}-副本`, id: 0 }}
open={showClone}
onClose={() => { setShowClone(false); setCloneSource(null); }}
onSaved={() => { setShowClone(false); setCloneSource(null); fetchInstances(); }}
mode="clone"
/>
)}
</>
);
}
@@ -266,15 +278,27 @@ export default function InstancePage() {
if (view === 'detail' && selectedInstance) {
return (
<InstanceDetail
instance={selectedInstance}
onBack={() => setView('grid')}
config={selectedConfig}
canEdit={canEdit}
canDelete={canDelete}
onDelete={() => { handleDelete(selectedInstance.id); setView('grid'); }}
onEdit={() => { setEditingInstance(selectedInstance); setShowEdit(true); }}
/>
<>
<InstanceDetail
instance={selectedInstance}
onBack={() => setView('grid')}
config={selectedConfig}
canEdit={canEdit}
canDelete={canDelete}
onDelete={() => { handleDelete(selectedInstance.id); setView('grid'); }}
onEdit={() => { setEditingInstance(selectedInstance); setShowEdit(true); }}
onClone={canAdd ? () => { setCloneSource(selectedInstance); setShowClone(true); } : undefined}
/>
{cloneSource && showClone && (
<EditInstanceDialog
instance={{ ...cloneSource, name: `${cloneSource.name}-副本`, id: 0 }}
open={showClone}
onClose={() => { setShowClone(false); setCloneSource(null); }}
onSaved={() => { setShowClone(false); setCloneSource(null); fetchInstances(); }}
mode="clone"
/>
)}
</>
);
}
@@ -540,11 +564,34 @@ export default function InstancePage() {
<div className="mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="mt-2 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-between">
<span className="text-[11px] text-blue-400 flex items-center gap-1">
查看详情
<ChevronRight className="w-3 h-3" />
</span>
<div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
{canAdd && (
<button
onClick={() => {
setCloneSource(instance);
setShowClone(true);
}}
className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors"
title="克隆实例"
>
<Copy className="w-3.5 h-3.5" />
</button>
)}
{canEdit && (
<button
onClick={() => { setEditingInstance(instance); setShowEdit(true); }}
className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors"
title="编辑实例"
>
<Edit2 className="w-3.5 h-3.5" />
</button>
)}
</div>
</div>
</div>
);
@@ -627,12 +674,23 @@ export default function InstancePage() {
</div>
</td>
<td className="px-4 py-3">
<button
onClick={e => { e.stopPropagation(); setSelectedInstance(instance); setView('detail'); }}
className="text-blue-400 hover:text-blue-300 text-xs font-medium transition-colors"
>
查看
</button>
<div className="flex items-center gap-2">
<button
onClick={e => { e.stopPropagation(); setSelectedInstance(instance); setView('detail'); }}
className="text-blue-400 hover:text-blue-300 text-xs font-medium transition-colors"
>
查看
</button>
{canAdd && (
<button
onClick={e => { e.stopPropagation(); setCloneSource(instance); setShowClone(true); }}
className="text-[var(--dg-text-muted)] hover:text-blue-400 transition-colors"
title="克隆实例"
>
<Copy className="w-3.5 h-3.5" />
</button>
)}
</div>
</td>
</tr>
);
@@ -643,6 +701,17 @@ export default function InstancePage() {
</CardContent>
</Card>
)}
{/* Clone Dialog */}
{cloneSource && showClone && (
<EditInstanceDialog
instance={{ ...cloneSource, name: `${cloneSource.name}-副本`, id: 0 }}
open={showClone}
onClose={() => { setShowClone(false); setCloneSource(null); }}
onSaved={() => { setShowClone(false); setCloneSource(null); fetchInstances(); }}
mode="clone"
/>
)}
</div>
);
}
@@ -650,10 +719,10 @@ export default function InstancePage() {
/* ------------------------------------------------------------------ */
/* InstanceDetail */
/* ------------------------------------------------------------------ */
function InstanceDetail({ instance, onBack, config, canEdit, canDelete, onDelete, onEdit }: {
function InstanceDetail({ instance, onBack, config, canEdit, canDelete, onDelete, onEdit, onClone }: {
instance: InstanceItem; onBack: () => void;
config: { icon: React.ElementType; color: string; bg: string };
canEdit: boolean; canDelete: boolean; onDelete: () => void; onEdit: () => void;
canEdit: boolean; canDelete: boolean; onDelete: () => void; onEdit: () => void; onClone?: () => void;
}) {
const [testing, setTesting] = useState(false);
const [testResult, setTestResult] = useState<{ success: boolean; message: string; version?: string } | null>(null);
@@ -710,6 +779,12 @@ function InstanceDetail({ instance, onBack, config, canEdit, canDelete, onDelete
<Zap className="w-4 h-4" />
{testing ? '测试中...' : '测试连接'}
</button>
{onClone && (
<button onClick={onClone} className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-all">
<Copy className="w-4 h-4" />
克隆
</button>
)}
{canEdit && (
<button onClick={onEdit} className="flex items-center gap-2 px-4 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] transition-all">
<Edit2 className="w-4 h-4" />
frontend/src/pages/QueriesPage.tsx
+1 -1
View File
@@ -309,7 +309,7 @@ function NewQueryPanel({
const [showSidebar, setShowSidebar] = useState(true);
useEffect(() => {
instanceApi.list().then(res => {
instanceApi.accessible('readonly').then(res => {
const data = Array.isArray(res) ? res : [];
setInstances(data);
}).catch(() => { setInstances([]); });
frontend/src/pages/TicketCreatePage.tsx
+12 -49
View File
@@ -165,7 +165,6 @@ export default function TicketCreatePage() {
// -- Form fields --
const [title, setTitle] = useState('');
const [priority, setPriority] = useState('medium');
const [dbType, setDbType] = useState('');
const [instanceId, setInstanceId] = useState('');
const [database, setDatabase] = useState('');
const [sqlContent, setSqlContent] = useState('');
@@ -208,7 +207,7 @@ export default function TicketCreatePage() {
useEffect(() => {
setLoadingInstances(true);
instanceApi.list()
instanceApi.accessible('write')
.then((res: unknown) => {
const data = (res as { items?: unknown[] })?.items ?? res;
setInstances(Array.isArray(data) ? data as InstanceItem[] : []);
@@ -217,33 +216,9 @@ export default function TicketCreatePage() {
.finally(() => setLoadingInstances(false));
}, []);
const filteredInstances = useMemo(() => {
if (!dbType) return instances;
return instances.filter(i => {
if (dbType === 'postgres') return i.db_type === 'postgres' || i.db_type === 'postgresql';
return i.db_type === dbType;
});
}, [instances, dbType]);
useEffect(() => {
if (instanceId) {
const current = instances.find(i => i.id === Number(instanceId));
if (current && dbType) {
const match = dbType === 'postgres'
? (current.db_type === 'postgres' || current.db_type === 'postgresql')
: current.db_type === dbType;
if (!match) {
setInstanceId('');
setDatabase('');
setDatabases([]);
}
}
}
}, [dbType, instances, instanceId]);
/* ---------------------------------------------------------------- */
/* Fetch databases */
/* ---------------------------------------------------------------- */
// 从选中实例自动获取 dbType
const selectedInstance = useMemo(() => instances.find((i) => i.id === Number(instanceId)), [instances, instanceId]);
const dbType = selectedInstance?.db_type || '';
useEffect(() => {
if (!instanceId) { setDatabases([]); setDatabase(''); return; }
@@ -391,7 +366,7 @@ export default function TicketCreatePage() {
try {
const inst = instances.find((i) => i.id === Number(instanceId));
await ticketApi.create({
title: title.trim(), db_type: inst?.db_type || dbType || 'mysql',
title: title.trim(), db_type: inst?.db_type || 'mysql',
instance_id: Number(instanceId), target_database: database,
sql_content: sqlContent, rollback_sql: rollbackSql || undefined,
reason: reason.trim(), priority: priority,
@@ -403,13 +378,12 @@ export default function TicketCreatePage() {
const msg = Array.isArray(raw) ? raw.map((v) => v.msg).join('; ') : (raw || '提交失败，请稍后重试');
setError(msg);
} finally { setSubmitting(false); }
}, [title, sqlContent, instanceId, database, reason, priority, rollbackSql, instances, dbType, navigate]);
}, [title, sqlContent, instanceId, database, reason, priority, rollbackSql, instances, navigate]);
/* ---------------------------------------------------------------- */
/* Derived values */
/* ---------------------------------------------------------------- */
const selectedInstance = useMemo(() => instances.find((i) => i.id === Number(instanceId)), [instances, instanceId]);
const isRedis = selectedInstance?.db_type === 'redis';
const isMySQL = selectedInstance?.db_type === 'mysql' || selectedInstance?.db_type === 'postgresql' || selectedInstance?.db_type === 'postgres';
@@ -770,33 +744,22 @@ export default function TicketCreatePage() {
{PRIORITY_OPTIONS.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
</select>
</div>
<div>
<label className="block text-sm font-medium mb-2">
数据库类型 <span className="text-red-400">*</span>
</label>
<select value={dbType} onChange={(e) => setDbType(e.target.value)}
className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors">
{DB_TYPE_OPTIONS.map((opt) => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
</select>
</div>
</div>
{/* Instance */}
{/* Instance — 直接展示用户变更授权的实例 */}
<div>
<label className="block text-sm font-medium mb-2">
选择实例 <span className="text-red-400">*</span>
目标实例 <span className="text-red-400">*</span>
</label>
<select value={instanceId} onChange={(e) => setInstanceId(e.target.value)}
disabled={loadingInstances || filteredInstances.length === 0}
disabled={loadingInstances}
className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 transition-colors disabled:opacity-50">
<option value="">
{loadingInstances ? '加载中...' : dbType && filteredInstances.length === 0
? `无 ${(DB_TYPE_LABELS[dbType]) || dbType} 实例` : dbType
? `请选择 ${(DB_TYPE_LABELS[dbType]) || dbType} 实例` : '请先选择数据库类型'}
{loadingInstances ? '加载中...' : instances.length === 0 ? '暂无变更授权实例' : '请选择实例'}
</option>
{filteredInstances.map((inst) => (
{instances.map((inst) => (
<option key={inst.id} value={String(inst.id)}>
{inst.name} ({inst.host}:{inst.port})
{inst.name} ({inst.host}:{inst.port}) — {DB_TYPE_LABELS[inst.db_type] || inst.db_type}
</option>
))}
</select>
frontend/src/pages/TicketsPage.tsx
+473 -783
View File
File diff suppressed because it is too large. Load diff
frontend/src/pages/WorkflowPage.tsx
+491 -48
View File
@@ -2,20 +2,19 @@ import { useState, useEffect, useCallback } from 'react';
import {
Plus, Edit2, Eye, ToggleLeft, ToggleRight, GitBranch, Users, CheckCircle,
ArrowRight, Shield, Trash2, X, ChevronDown, ChevronUp,
Save, Play, Copy, History, TestTube, AlertTriangle,
Loader2, Check, XCircle, Star,
Save, Play, Copy, Loader2, Star, ArrowUp, ArrowDown, UserPlus,
} from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { dbTypeColorMap } from '@/lib/constants';
import { workflowApi } from '@/api/workflow';
import { userApi } from '@/api/user';
/* ------------------------------------------------------------------ */
/* Types */
/* ------------------------------------------------------------------ */
interface WorkflowStep {
id: number;
workflow_id: number;
id?: number;
workflow_id?: number;
step_number: number;
name: string;
step_type: string;
@@ -36,6 +35,19 @@ interface WorkflowDetail {
steps: WorkflowStep[];
}
interface UserItem {
id: number;
username: string;
display_name: string | null;
role: string;
}
interface StepDraft {
name: string;
step_type: 'submit' | 'audit' | 'execute';
approver_ids: number[];
}
const STEP_TYPE_LABELS: Record<string, string> = {
submit: '提交阶段',
serial: '串行审批',
@@ -63,34 +75,431 @@ 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: '执行人员操作' },
];
/* ------------------------------------------------------------------ */
/* UserDropdown — 下拉多选用户 */
/* ------------------------------------------------------------------ */
interface UserDropdownProps {
users: UserItem[];
selectedIds: number[];
label: string;
onToggle: (uid: number) => void;
onToggleAll: () => void;
onClear: () => void;
getUserName: (uid: number) => string;
}
function UserDropdown({ users, selectedIds, label, onToggle, onToggleAll, onClear, getUserName }: UserDropdownProps) {
const [open, setOpen] = useState(false);
const allSelected = selectedIds.length === users.length && users.length > 0;
return (
<div className="relative">
{/* Trigger */}
<button
type="button"
onClick={() => setOpen(!open)}
className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${
selectedIds.length === 0
? 'bg-[var(--dg-bg-tertiary)] border border-red-500/40 text-[var(--dg-text-muted)]'
: 'bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)]'
}`}
>
<span className="truncate">
{selectedIds.length === 0
? `${label} * 请选择`
: selectedIds.length === 1
? getUserName(selectedIds[0])
: `${label} (${selectedIds.length}人)`
}
</span>
<ChevronDown className={`w-4 h-4 text-[var(--dg-text-muted)] transition-transform ${open ? 'rotate-180' : ''}`} />
</button>
{/* Selected tags */}
{selectedIds.length > 1 && (
<div className="flex flex-wrap gap-1 mt-1.5">
{selectedIds.map((uid) => (
<span
key={uid}
className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 text-blue-400"
>
{getUserName(uid)}
<button onClick={() => onToggle(uid)} className="hover:text-red-400 transition-colors">
<X className="w-3 h-3" />
</button>
</span>
))}
</div>
)}
{/* Dropdown */}
{open && (
<>
<div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
<div className="absolute left-0 right-0 top-full mt-1 z-50 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl max-h-52 overflow-y-auto">
{/* Select all / Clear */}
<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 transition-colors"
>
{allSelected ? '取消全选' : '全选'}
</button>
{selectedIds.length > 0 && (
<button onClick={onClear} className="text-[11px] text-red-400 hover:text-red-300 transition-colors">
清空
</button>
)}
</div>
{/* User list */}
{users.map((u) => {
const checked = selectedIds.includes(u.id);
return (
<div
key={u.id}
onClick={() => onToggle(u.id)}
className="flex items-center gap-2.5 px-3 py-2 cursor-pointer hover:bg-[var(--dg-bg-hover)] transition-colors"
>
<div className={`w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 ${
checked
? 'bg-blue-500 border-blue-500'
: 'border-[var(--dg-border)]'
}`}>
{checked && <CheckCircle className="w-3 h-3 text-white" />}
</div>
<span className={`text-sm flex-1 ${checked ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-secondary)]'}`}>
{u.display_name || u.username}
</span>
<span className="text-[10px] text-[var(--dg-text-muted)] px-1.5 py-0.5 rounded bg-[var(--dg-bg-tertiary)]">
{u.role}
</span>
</div>
);
})}
</div>
</>
)}
</div>
);
}
/* ------------------------------------------------------------------ */
/* WorkflowEditorModal — 创建/编辑流程弹框 */
/* ------------------------------------------------------------------ */
interface EditorProps {
workflow?: WorkflowDetail | null;
users: UserItem[];
onClose: () => void;
onSaved: () => void;
}
function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps) {
const isEdit = !!workflow;
const [name, setName] = useState(workflow?.name || '');
const [description, setDescription] = useState(workflow?.description || '');
const [steps, setSteps] = useState<StepDraft[]>([]);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState('');
// 初始化步骤
useEffect(() => {
if (workflow?.steps?.length) {
setSteps(
workflow.steps.map((s) => ({
name: s.name,
step_type: (s.step_type === 'serial' || s.step_type === 'parallel' || s.step_type === 'any_one')
? 'audit' as const
: s.step_type as 'submit' | 'audit' | 'execute',
approver_ids: s.approver_ids ? JSON.parse(s.approver_ids) : [],
}))
);
} else {
// 新建默认：提交→执行
setSteps([
{ name: '提交阶段', step_type: 'submit', approver_ids: [] },
{ name: '执行阶段', step_type: 'execute', approver_ids: [] },
]);
}
}, [workflow]);
const addStep = (type: 'submit' | 'audit' | 'execute') => {
const labels: Record<string, string> = { submit: '提交阶段', audit: '审核阶段', execute: '执行阶段' };
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: [] }]);
};
const removeStep = (idx: number) => setSteps(steps.filter((_, i) => i !== idx));
const moveStep = (idx: number, dir: -1 | 1) => {
const target = idx + dir;
if (target < 0 || target >= steps.length) return;
const next = [...steps];
[next[idx], next[target]] = [next[target], next[idx]];
setSteps(next);
};
const updateStep = (idx: number, patch: Partial<StepDraft>) => {
setSteps(steps.map((s, i) => (i === idx ? { ...s, ...patch } : s)));
};
const toggleUser = (idx: number, uid: number) => {
const step = steps[idx];
const has = step.approver_ids.includes(uid);
updateStep(idx, {
approver_ids: has ? step.approver_ids.filter((id) => id !== uid) : [...step.approver_ids, uid],
});
};
const toggleAllUsers = (idx: number) => {
const step = steps[idx];
if (step.approver_ids.length === users.length) {
updateStep(idx, { approver_ids: [] });
} else {
updateStep(idx, { approver_ids: users.map((u) => u.id) });
}
};
const handleSubmit = async () => {
if (!name.trim()) { setError('请输入流程名称'); return; }
if (steps.length === 0) { setError('请至少添加一个步骤'); return; }
// 验证非 submit 步骤至少有一个人员
for (let i = 0; i < steps.length; i++) {
if (steps[i].step_type !== 'submit' && steps[i].approver_ids.length === 0) {
setError(`步骤"${steps[i].name}"需要关联至少一个人员`);
return;
}
}
setSubmitting(true);
setError('');
try {
const payload = {
name: name.trim(),
description: description.trim() || null,
steps: steps.map((s, i) => ({
step_number: i + 1,
name: s.name,
step_type: s.step_type,
approver_ids: s.approver_ids.length > 0 ? JSON.stringify(s.approver_ids) : null,
is_required: true,
timeout_hours: 24,
auto_approve_on_timeout: false,
})),
};
if (isEdit && workflow) {
await workflowApi.update(workflow.id, payload);
} else {
await workflowApi.create(payload);
}
onSaved();
} catch (e: unknown) {
const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败';
setError(msg);
} finally {
setSubmitting(false);
}
};
const getUserName = (uid: number) => {
const u = users.find((u) => u.id === uid);
return u ? (u.display_name || u.username) : `#${uid}`;
};
const inputCls = 'w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors';
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div
className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between px-5 py-4">
<h2 className="text-base font-semibold">{isEdit ? '编辑审批流程' : '新建审批流程'}</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" />
</button>
</div>
{/* Body */}
<div className="px-5 pb-5 space-y-4">
{error && <div className="px-3 py-2 text-sm text-red-400 bg-red-500/10 rounded-lg">{error}</div>}
<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="输入流程名称" />
</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="可选" />
</div>
{/* Steps */}
<div>
<div className="flex items-center justify-between mb-2">
<label className="text-xs font-medium text-[var(--dg-text-secondary)]">流程步骤</label>
<div className="flex items-center gap-1">
{STEP_TYPES.map((t) => (
<button
key={t.value}
onClick={() => addStep(t.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}
</button>
))}
</div>
</div>
<div className="space-y-2">
{steps.map((step, idx) => {
const typeConf = STEP_TYPES.find((t) => t.value === step.step_type)!;
const colorCls = STEP_TYPE_COLORS[step.step_type];
const Icon = STEP_TYPE_ICONS[step.step_type] || Shield;
return (
<div key={idx} className="p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
{/* Step header */}
<div className="flex items-center gap-2 mb-2">
<div className={`w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 ${colorCls.split(' ')[0]}`}>
<Icon className={`w-3.5 h-3.5 ${colorCls.split(' ')[1]}`} />
</div>
<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"
value={step.name}
onChange={(e) => updateStep(idx, { name: e.target.value })}
placeholder="步骤名称"
/>
<span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>
{typeConf.label}
</span>
<div className="flex items-center gap-0.5 ml-1">
<button
onClick={() => moveStep(idx, -1)}
disabled={idx === 0}
className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] disabled:opacity-20 transition-colors"
title="上移"
>
<ArrowUp className="w-3.5 h-3.5" />
</button>
<button
onClick={() => moveStep(idx, 1)}
disabled={idx === steps.length - 1}
className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] disabled:opacity-20 transition-colors"
title="下移"
>
<ArrowDown className="w-3.5 h-3.5" />
</button>
<button
onClick={() => removeStep(idx)}
className="p-1 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:text-red-400 transition-colors"
title="删除"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
</div>
</div>
{/* User selection — submit 步骤不需要选人 */}
{step.step_type !== 'submit' && (
<div className="pl-9 mt-2">
<UserDropdown
users={users}
selectedIds={step.approver_ids}
label={step.step_type === 'audit' ? '审核人员' : '执行人员'}
onToggle={(uid) => toggleUser(idx, uid)}
onToggleAll={() => toggleAllUsers(idx)}
onClear={() => updateStep(idx, { approver_ids: [] })}
getUserName={getUserName}
/>
</div>
)}
</div>
);
})}
</div>
{steps.length === 0 && (
<div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">
请点击上方按钮添加流程步骤
</div>
)}
</div>
</div>
{/* Footer */}
<div className="flex items-center justify-end gap-3 px-5 py-4">
<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">
取消
</button>
<button
onClick={handleSubmit}
disabled={submitting}
className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 disabled:opacity-50 rounded-lg transition-colors"
>
{submitting && <Loader2 className="w-4 h-4 animate-spin" />}
{isEdit ? '保存' : '创建'}
</button>
</div>
</div>
</div>
);
}
/* ------------------------------------------------------------------ */
/* Main Page */
/* ------------------------------------------------------------------ */
export default function WorkflowPage() {
const [items, setItems] = useState<WorkflowDetail[]>([]);
const [users, setUsers] = useState<UserItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [expandedId, setExpandedId] = useState<number | null>(null);
const [previewWorkflow, setPreviewWorkflow] = useState<WorkflowDetail | null>(null);
const [editorWorkflow, setEditorWorkflow] = useState<WorkflowDetail | null | undefined>(undefined);
const fetchWorkflows = useCallback(async () => {
try {
setLoading(true);
setError(null);
const data = await workflowApi.list();
setItems(data);
} catch (err: any) {
setError(err?.response?.data?.detail || '获取审批流程失败');
setItems(Array.isArray(data) ? data : []);
} catch (err: unknown) {
const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '获取审批流程失败';
setError(msg);
} finally {
setLoading(false);
}
}, []);
const fetchUsers = useCallback(async () => {
try {
const data = await userApi.list();
setUsers(Array.isArray(data) ? data : []);
} catch {}
}, []);
useEffect(() => {
fetchWorkflows();
}, [fetchWorkflows]);
fetchUsers();
}, [fetchWorkflows, fetchUsers]);
const toggleWorkflow = useCallback(async (wf: WorkflowDetail) => {
try {
await workflowApi.update(wf.id, { is_active: !wf.is_active });
setItems(prev => prev.map(w => w.id === wf.id ? { ...w, is_active: !w.is_active } : w));
setItems((prev) => prev.map((w) => (w.id === wf.id ? { ...w, is_active: !w.is_active } : w)));
} catch {}
}, []);
@@ -98,14 +507,14 @@ export default function WorkflowPage() {
if (!confirm('确认删除该审批流程？')) return;
try {
await workflowApi.delete(id);
setItems(prev => prev.filter(w => w.id !== id));
setItems((prev) => prev.filter((w) => w.id !== id));
} catch {}
}, []);
const setDefault = useCallback(async (id: number) => {
try {
await workflowApi.setDefault(id);
setItems(prev => prev.map(w => ({ ...w, is_default: w.id === id })));
setItems((prev) => prev.map((w) => ({ ...w, is_default: w.id === id })));
} catch {}
}, []);
@@ -116,6 +525,14 @@ export default function WorkflowPage() {
} catch {}
}, [fetchWorkflows]);
const getUserName = useCallback(
(uid: number) => {
const u = users.find((u) => u.id === uid);
return u ? (u.display_name || u.username) : `#${uid}`;
},
[users]
);
if (loading) {
return (
<div className="flex items-center justify-center h-64">
@@ -127,7 +544,6 @@ export default function WorkflowPage() {
if (error) {
return (
<div className="flex flex-col items-center justify-center h-64 text-[var(--dg-text-muted)]">
<AlertCircle className="w-12 h-12 mb-3 text-red-400" />
<p className="text-sm">{error}</p>
<button onClick={fetchWorkflows} className="mt-3 px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors">
重试
@@ -142,14 +558,27 @@ export default function WorkflowPage() {
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<div>
<h1 className="text-2xl font-semibold">审批流程配置</h1>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多级审批流程模板，支持串行/并行审批模式</p>
<p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多级审批流程，支持审核阶段叠加和多人执行</p>
</div>
<button
onClick={() => setEditorWorkflow(null)}
className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors"
>
<Plus className="w-4 h-4" />
新建流程
</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)]">暂无审批流程，请联系管理员配置</p>
<p className="text-sm text-[var(--dg-text-muted)] mb-4">暂无审批流程</p>
<button
onClick={() => setEditorWorkflow(null)}
className="px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors"
>
创建第一个流程
</button>
</div>
) : (
<>
@@ -157,8 +586,8 @@ export default function WorkflowPage() {
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
{[
{ label: '流程总数', value: items.length, icon: GitBranch, color: 'text-blue-400', bg: 'bg-blue-400/10' },
{ label: '已启用', value: items.filter(w => w.is_active).length, icon: CheckCircle, color: 'text-green-400', bg: 'bg-green-400/10' },
{ label: '默认流程', value: items.filter(w => w.is_default).length, icon: Star, color: 'text-yellow-400', bg: 'bg-yellow-400/10' },
{ label: '已启用', value: items.filter((w) => w.is_active).length, icon: CheckCircle, color: 'text-green-400', bg: 'bg-green-400/10' },
{ label: '默认流程', value: items.filter((w) => w.is_default).length, icon: Star, color: 'text-yellow-400', bg: 'bg-yellow-400/10' },
{ label: '总步骤数', value: items.reduce((acc, w) => acc + w.steps.length, 0), icon: Users, color: 'text-purple-400', bg: 'bg-purple-400/10' },
].map((s, i) => (
<Card key={i} className="dg-card">
@@ -199,22 +628,23 @@ export default function WorkflowPage() {
</span>
</div>
{wf.description && (
<p className="text-sm text-[var(--dg-text-secondary)] mb-3">{wf.description}</p>
)}
{wf.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-3">{wf.description}</p>}
{/* Flow visualization */}
<div className="flex items-center gap-1 mt-4 p-4 bg-[var(--dg-bg-tertiary)] rounded-lg overflow-x-auto">
{wf.steps.map((step, i) => {
const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
return (
<div key={step.id} className="flex items-center gap-1 flex-shrink-0">
<div key={step.id || i} className="flex items-center gap-1 flex-shrink-0">
<div className={`px-3 py-2 rounded-lg border ${STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial} flex items-center gap-2`}>
<StepIcon className="w-4 h-4" />
<div>
<div className="text-xs font-medium whitespace-nowrap">{step.name}</div>
{step.approver_role && (
<div className="text-[10px] opacity-80 whitespace-nowrap">{step.approver_role}</div>
{uids.length > 0 && (
<div className="text-[10px] opacity-80 whitespace-nowrap">
{uids.map((uid) => getUserName(uid)).join('、')}
</div>
)}
</div>
</div>
@@ -231,11 +661,12 @@ export default function WorkflowPage() {
<GitBranch className="w-4 h-4 text-[var(--dg-text-muted)]" />
流程步骤详情
</h4>
{wf.steps.map((step) => {
{wf.steps.map((step, si) => {
const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
return (
<div key={step.id} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
<div key={step.id || si} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
<div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
<StepIcon className={`w-4 h-4 ${colorClass.split(' ')[1]}`} />
</div>
@@ -245,23 +676,15 @@ export default function WorkflowPage() {
<span className={`text-[11px] px-2 py-0.5 rounded ${colorClass}`}>
{STEP_TYPE_LABELS[step.step_type] || step.step_type}
</span>
{step.timeout_hours !== 24 && (
<span className="text-[11px] px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]">
超时 {step.timeout_hours}h
</span>
)}
{step.auto_approve_on_timeout && (
<span className="text-[11px] px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-400">
超时自动通过
</span>
)}
</div>
{step.approver_role && (
{uids.length > 0 && (
<div className="flex items-center gap-1 mt-1 flex-wrap">
<span className="text-xs text-[var(--dg-text-muted)]">审批角色:</span>
<span className="text-xs text-blue-400 bg-blue-500/10 px-1.5 py-0.5 rounded">
{step.approver_role}
</span>
<span className="text-xs text-[var(--dg-text-muted)]">关联人员:</span>
{uids.map((uid) => (
<span key={uid} className="text-[11px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">
{getUserName(uid)}
</span>
))}
</div>
)}
</div>
@@ -274,6 +697,13 @@ export default function WorkflowPage() {
{/* Actions */}
<div className="flex items-center gap-1 ml-4 shrink-0">
<button
onClick={() => setEditorWorkflow(wf)}
className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-blue-500/10 hover:text-blue-400 transition-colors"
title="编辑"
>
<Edit2 className="w-4 h-4" />
</button>
{!wf.is_default && (
<button onClick={() => setDefault(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-yellow-500/10 hover:text-yellow-400 transition-colors" title="设为默认">
<Star className="w-4 h-4" />
@@ -321,15 +751,14 @@ export default function WorkflowPage() {
<X className="w-5 h-5" />
</button>
</div>
{previewWorkflow.description && (
<p className="text-sm text-[var(--dg-text-secondary)] mb-4">{previewWorkflow.description}</p>
)}
{previewWorkflow.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-4">{previewWorkflow.description}</p>}
<div className="space-y-4">
{previewWorkflow.steps.map((step, i) => {
const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
return (
<div key={step.id} className="flex items-start gap-4">
<div key={step.id || i} className="flex items-start gap-4">
<div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
<StepIcon className={`w-5 h-5 ${colorClass.split(' ')[1]}`} />
</div>
@@ -340,10 +769,14 @@ export default function WorkflowPage() {
{STEP_TYPE_LABELS[step.step_type] || step.step_type}
</span>
</div>
{step.approver_role && (
<div className="flex items-center gap-2 mt-1">
<span className="text-xs text-[var(--dg-text-muted)]">审批角色:</span>
<span className="text-xs text-blue-400">{step.approver_role}</span>
{uids.length > 0 && (
<div className="flex items-center gap-1 mt-1 flex-wrap">
<span className="text-xs text-[var(--dg-text-muted)]">关联人员:</span>
{uids.map((uid) => (
<span key={uid} className="text-[11px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">
{getUserName(uid)}
</span>
))}
</div>
)}
</div>
@@ -360,6 +793,16 @@ export default function WorkflowPage() {
</div>
</div>
)}
{/* Editor Modal */}
{editorWorkflow !== undefined && (
<WorkflowEditorModal
workflow={editorWorkflow}
users={users}
onClose={() => setEditorWorkflow(undefined)}
onSaved={() => { setEditorWorkflow(undefined); fetchWorkflows(); }}
/>
)}
</div>
);
}