wangziqi/gongxue-base
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align permission-gated UI actions

Browse Source
This commit is contained in:
wangziqi
2026-07-23 11:32:13 +08:00
parent adf738288f
commit c98d37307e
28 changed files with 1340 additions and 718 deletions
Download Patch File Download Diff File Expand all files Collapse all files

385
apps/admin/src/components/JinshujuMatchModal.tsx
View File

@@ -11,6 +11,8 @@ import {
} from '@ant-design/icons';
import api from '../api';
import { message } from '../ui/app-message';
import { usePermission } from '../hooks/usePermission';
import PermissionButton from './PermissionButton';
const { Text } = Typography;
@@ -86,7 +88,12 @@ interface MatchSelectorProps {
onChange: (d: MatchDecision) => void;
}
const MatchSelector: React.FC<MatchSelectorProps> = ({ entry, decision, studentOptions, onChange }) => {
const MatchSelector: React.FC<MatchSelectorProps> = ({
entry,
decision,
studentOptions,
onChange,
}) => {
const action = decision?.action ?? 'skip';
if (action === 'match') {
@@ -94,7 +101,9 @@ const MatchSelector: React.FC<MatchSelectorProps> = ({ entry, decision, studentO
const matchedStudent = studentOptions.find((s) => s.id === matchD.matchStudentId);
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
<Tag color="blue" icon={<LinkOutlined />}>已匹配</Tag>
<Tag color="blue" icon={<LinkOutlined />}>
已匹配
</Tag>
<Text style={{ flex: 1 }}>
{matchedStudent?.name ?? '未知'}
{matchedStudent?.studentNo && (
@@ -103,7 +112,9 @@ const MatchSelector: React.FC<MatchSelectorProps> = ({ entry, decision, studentO
</Text>
)}
</Text>
<Button size="small" type="link" danger onClick={() => onChange({ action: 'skip' })}>取消</Button>
<Button size="small" type="link" danger onClick={() => onChange({ action: 'skip' })}>
取消
</Button>
</div>
);
}
@@ -112,30 +123,76 @@ const MatchSelector: React.FC<MatchSelectorProps> = ({ entry, decision, studentO
const createD = decision as { action: 'create'; createName: string; createPhone: string };
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
<Tag color="green" icon={<PlusOutlined />}>将新建</Tag>
<Input size="small" value={createD.createName} placeholder="姓名" style={{ width: 100 }}
onChange={(e) => onChange({ action: 'create', createName: e.target.value, createPhone: createD.createPhone })} />
<Input size="small" value={createD.createPhone} placeholder="手机号" style={{ width: 120 }}
onChange={(e) => onChange({ action: 'create', createName: createD.createName, createPhone: e.target.value })} />
<Button size="small" type="link" danger onClick={() => onChange({ action: 'skip' })}>取消</Button>
<Tag color="green" icon={<PlusOutlined />}>
将新建
</Tag>
<Input
size="small"
value={createD.createName}
placeholder="姓名"
style={{ width: 100 }}
onChange={(e) =>
onChange({
action: 'create',
createName: e.target.value,
createPhone: createD.createPhone,
})
}
/>
<Input
size="small"
value={createD.createPhone}
placeholder="手机号"
style={{ width: 120 }}
onChange={(e) =>
onChange({
action: 'create',
createName: createD.createName,
createPhone: e.target.value,
})
}
/>
<Button size="small" type="link" danger onClick={() => onChange({ action: 'skip' })}>
取消
</Button>
</div>
);
}
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%' }}>
<Select showSearch size="small" placeholder="搜索学生…" style={{ flex: 1 }} value={undefined}
filterOption={(input, option) => ((option?.label as string) || '').toLowerCase().includes(input.toLowerCase())}
<Select
showSearch
size="small"
placeholder="搜索学生…"
style={{ flex: 1 }}
value={undefined}
filterOption={(input, option) =>
((option?.label as string) || '').toLowerCase().includes(input.toLowerCase())
}
options={studentOptions.map((s) => ({
value: s.id,
label: `${s.name}${s.phone ? ` (${s.phone})` : ''}${s.studentNo ? ` [${s.studentNo}]` : ''}`,
}))}
onChange={(studentId: number) => onChange({ action: 'match', matchStudentId: studentId })} />
<Button size="small" type="dashed" icon={<PlusOutlined />}
onClick={() => onChange({ action: 'create', createName: entry.name || '', createPhone: entry.phone || '' })}>
onChange={(studentId: number) => onChange({ action: 'match', matchStudentId: studentId })}
/>
<Button
size="small"
type="dashed"
icon={<PlusOutlined />}
onClick={() =>
onChange({
action: 'create',
createName: entry.name || '',
createPhone: entry.phone || '',
})
}
>
新建
</Button>
<Button size="small" type="link" onClick={() => onChange({ action: 'skip' })}>跳过</Button>
<Button size="small" type="link" onClick={() => onChange({ action: 'skip' })}>
跳过
</Button>
</div>
);
};
@@ -151,13 +208,25 @@ interface RuleEditorProps {
onCancel: () => void;
}
const RuleEditor: React.FC<RuleEditorProps> = ({ rule, formToken, fields, onSave, onDelete, onCancel }) => {
const RuleEditor: React.FC<RuleEditorProps> = ({
rule,
formToken,
fields,
onSave,
onDelete,
onCancel,
}) => {
const [name, setName] = useState(rule?.name ?? '');
const [mappings, setMappings] = useState<Record<string, string>>(rule?.mappings ?? { name: 'field_1', phone: 'field_2' });
const [mappings, setMappings] = useState<Record<string, string>>(
rule?.mappings ?? { name: 'field_1', phone: 'field_2' },
);
const [saving, setSaving] = useState(false);
const handleSave = async () => {
if (!name.trim()) { message.warning('请输入规则名称'); return; }
if (!name.trim()) {
message.warning('请输入规则名称');
return;
}
setSaving(true);
try {
if (rule) {
@@ -170,18 +239,31 @@ const RuleEditor: React.FC<RuleEditorProps> = ({ rule, formToken, fields, onSave
} catch (e: unknown) {
const err = e as { message?: string };
if (err?.message) message.error(err.message);
} finally { setSaving(false); }
} finally {
setSaving(false);
}
};
return (
<div style={{ padding: '12px 0' }}>
<Input placeholder="规则名称" value={name} onChange={(e) => setName(e.target.value)}
style={{ marginBottom: 12 }} />
<Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>选择金数据字段映射到学生资料</Text>
<Input
placeholder="规则名称"
value={name}
onChange={(e) => setName(e.target.value)}
style={{ marginBottom: 12 }}
/>
<Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
选择金数据字段映射到学生资料
</Text>
{STUDENT_FIELDS.map((sf) => (
<div key={sf.key} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
<div
key={sf.key}
style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}
>
<Text style={{ width: 100, textAlign: 'right', fontSize: 13 }}>{sf.label}</Text>
<Text type="secondary" style={{ fontSize: 12 }}>←</Text>
<Text type="secondary" style={{ fontSize: 12 }}>
←
</Text>
<Select
allowClear
showSearch
@@ -193,20 +275,26 @@ const RuleEditor: React.FC<RuleEditorProps> = ({ rule, formToken, fields, onSave
value: field.key,
label: `${field.label}（${field.key}）`,
}))}
onChange={(value) => setMappings((prev) => {
const next = { ...prev };
if (value) next[sf.key] = value;
else delete next[sf.key];
return next;
})}
onChange={(value) =>
setMappings((prev) => {
const next = { ...prev };
if (value) next[sf.key] = value;
else delete next[sf.key];
return next;
})
}
/>
</div>
))}
<div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
<Button type="primary" icon={<SaveOutlined />} loading={saving} onClick={handleSave}>保存</Button>
<Button type="primary" icon={<SaveOutlined />} loading={saving} onClick={handleSave}>
保存
</Button>
{rule && (
<Popconfirm title="确定删除此规则？" onConfirm={() => onDelete(rule.id)}>
<Button danger icon={<DeleteOutlined />}>删除</Button>
<Button danger icon={<DeleteOutlined />}>
删除
</Button>
</Popconfirm>
)}
<Button onClick={onCancel}>取消</Button>
@@ -224,6 +312,8 @@ interface MatchModalProps {
}
const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplied }) => {
const { hasPermission } = usePermission();
const canTriggerSync = hasPermission('sync:trigger');
const [step, setStep] = useState<'connection' | 'rule' | 'match' | 'applying'>('connection');
const [loading, setLoading] = useState(false);
const [selectedRuleId, setSelectedRuleId] = useState<number | undefined>();
@@ -251,7 +341,9 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
try {
const res = await api.get<{ success: boolean; data: MatchRule[] }>('/sync/jinshuju/rules');
if (res.success) setRules(res.data);
} catch { /* ignore */ }
} catch {
/* ignore */
}
};
const handleConnectionNext = async () => {
@@ -286,7 +378,10 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
const initial = new Map<number, MatchDecision>();
for (const entry of res.entries) {
if (entry.suggestedStudent) {
initial.set(entry.serialNumber, { action: 'match', matchStudentId: entry.suggestedStudent.id });
initial.set(entry.serialNumber, {
action: 'match',
matchStudentId: entry.suggestedStudent.id,
});
}
}
setDecisions(initial);
@@ -294,22 +389,29 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
} catch (e: unknown) {
const err = e as { message?: string };
if (err?.message) message.error(err.message);
} finally { setLoading(false); }
} finally {
setLoading(false);
}
};
const handleApply = async () => {
if (!canTriggerSync) return;
setLoading(true);
setStep('applying');
try {
const decisionList = [...decisions.entries()].map(([serialNumber, d]) => ({ serialNumber, ...d }));
const decisionList = [...decisions.entries()].map(([serialNumber, d]) => ({
serialNumber,
...d,
}));
const body: Record<string, unknown> = {
...credForm.getFieldsValue(),
decisions: decisionList,
};
if (selectedRuleId) body.ruleId = selectedRuleId;
const res = await api.post<{ success: boolean; log: { recordsCount: number; message?: string } }>(
'/sync/jinshuju/apply', body,
);
const res = await api.post<{
success: boolean;
log: { recordsCount: number; message?: string };
}>('/sync/jinshuju/apply', body);
if (res.success) {
message.success(res.log.message || `处理 ${res.log.recordsCount} 条记录`);
onApplied();
@@ -319,7 +421,9 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
const err = e as { message?: string };
if (err?.message) message.error(err.message);
setStep('match');
} finally { setLoading(false); }
} finally {
setLoading(false);
}
};
const reset = () => {
@@ -334,7 +438,10 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
credForm.resetFields();
};
const handleClose = () => { reset(); onClose(); };
const handleClose = () => {
reset();
onClose();
};
const handleScroll = (source: 'left' | 'right') => {
const el = source === 'left' ? leftRef.current : rightRef.current;
if (el) setScrollTop(el.scrollTop);
@@ -346,7 +453,8 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
}, [scrollTop]);
const getDecision = (serial: number): MatchDecision | undefined => decisions.get(serial);
const setDecision = (serial: number, d: MatchDecision) => setDecisions((prev) => new Map(prev).set(serial, d));
const setDecision = (serial: number, d: MatchDecision) =>
setDecisions((prev) => new Map(prev).set(serial, d));
const total = entries.length;
const matched = [...decisions.values()].filter((d) => d.action !== 'skip').length;
@@ -401,7 +509,7 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
onChange={(value) => setSelectedRuleId(value)}
options={visibleRules.map((rule) => ({ value: rule.id, label: rule.name }))}
/>
{selectedRule ? (
{canTriggerSync && selectedRule ? (
<Button
icon={<EditOutlined />}
onClick={() => {
@@ -412,15 +520,17 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
编辑
</Button>
) : null}
<Button
icon={<PlusOutlined />}
onClick={() => {
setEditingRule(null);
setShowRuleEditor(true);
}}
>
新建规则
</Button>
{canTriggerSync ? (
<Button
icon={<PlusOutlined />}
onClick={() => {
setEditingRule(null);
setShowRuleEditor(true);
}}
>
新建规则
</Button>
) : null}
</div>
{visibleRules.length === 0 && !showRuleEditor ? (
@@ -429,7 +539,7 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
</Text>
) : null}
{showRuleEditor ? (
{canTriggerSync && showRuleEditor ? (
<RuleEditor
rule={editingRule}
formToken={formToken}
@@ -459,51 +569,113 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
const d = getDecision(entry.serialNumber);
const isMatched = d?.action === 'match';
const color = isMatched ? '#1677ff' : '#d9d9d9';
lines.push(<line key={entry.serialNumber} x1={LEFT_WIDTH} y1={y} x2={LEFT_WIDTH + GAP} y2={y}
stroke={color} strokeWidth={isMatched ? 2 : 1}
strokeDasharray={isMatched ? undefined : '4 4'} opacity={isMatched ? 0.7 : 0.3} />);
lines.push(
<line
key={entry.serialNumber}
x1={LEFT_WIDTH}
y1={y}
x2={LEFT_WIDTH + GAP}
y2={y}
stroke={color}
strokeWidth={isMatched ? 2 : 1}
strokeDasharray={isMatched ? undefined : '4 4'}
opacity={isMatched ? 0.7 : 0.3}
/>,
);
});
return (
<div style={{ position: 'relative' }}>
<div style={{ marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Text type="secondary">共 {total} 条，已匹配 {matched} 条</Text>
<Button size="small" onClick={() => setDecisions(new Map())}>清除全部匹配</Button>
<div
style={{
marginBottom: 12,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Text type="secondary">
共 {total} 条，已匹配 {matched} 条
</Text>
<Button size="small" onClick={() => setDecisions(new Map())}>
清除全部匹配
</Button>
</div>
<div style={{ display: 'flex', position: 'relative' }}>
<svg style={{ position: 'absolute', top: 0, left: 0, width: LEFT_WIDTH + GAP, height: svgHeight, pointerEvents: 'none', zIndex: 1 }}>
<svg
style={{
position: 'absolute',
top: 0,
left: 0,
width: LEFT_WIDTH + GAP,
height: svgHeight,
pointerEvents: 'none',
zIndex: 1,
}}
>
{lines}
</svg>
<div ref={leftRef} onScroll={() => handleScroll('left')}
style={{ width: LEFT_WIDTH, maxHeight: 480, overflowY: 'auto', flexShrink: 0 }}>
<div
ref={leftRef}
onScroll={() => handleScroll('left')}
style={{ width: LEFT_WIDTH, maxHeight: 480, overflowY: 'auto', flexShrink: 0 }}
>
{entries.map((entry, i) => {
const d = getDecision(entry.serialNumber);
const isMatched = d?.action === 'match';
return (
<div key={entry.serialNumber} style={{
height: ROW_HEIGHT, padding: '8px 12px', borderBottom: '1px solid #f0f0f0',
display: 'flex', flexDirection: 'column', justifyContent: 'center',
background: isMatched ? '#f6ffed' : i % 2 === 0 ? '#fafafa' : '#fff',
borderLeft: isMatched ? '3px solid #1677ff' : '3px solid transparent',
}}>
<Text strong style={{ fontSize: 13 }}>{entry.name || <Text type="secondary">无姓名</Text>}</Text>
{entry.phone && <Text type="secondary" style={{ fontSize: 12 }}>{entry.phone}</Text>}
<Text type="secondary" style={{ fontSize: 11 }}>#{entry.serialNumber}</Text>
<div
key={entry.serialNumber}
style={{
height: ROW_HEIGHT,
padding: '8px 12px',
borderBottom: '1px solid #f0f0f0',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
background: isMatched ? '#f6ffed' : i % 2 === 0 ? '#fafafa' : '#fff',
borderLeft: isMatched ? '3px solid #1677ff' : '3px solid transparent',
}}
>
<Text strong style={{ fontSize: 13 }}>
{entry.name || <Text type="secondary">无姓名</Text>}
</Text>
{entry.phone && (
<Text type="secondary" style={{ fontSize: 12 }}>
{entry.phone}
</Text>
)}
<Text type="secondary" style={{ fontSize: 11 }}>
#{entry.serialNumber}
</Text>
</div>
);
})}
</div>
<div style={{ width: GAP, flexShrink: 0 }} />
<div ref={rightRef} onScroll={() => handleScroll('right')}
style={{ flex: 1, maxHeight: 480, overflowY: 'auto' }}>
<div
ref={rightRef}
onScroll={() => handleScroll('right')}
style={{ flex: 1, maxHeight: 480, overflowY: 'auto' }}
>
{entries.map((entry) => (
<div key={entry.serialNumber} style={{
height: ROW_HEIGHT, padding: '8px 12px', borderBottom: '1px solid #f0f0f0',
display: 'flex', alignItems: 'center', gap: 8,
}}>
<MatchSelector entry={entry} decision={getDecision(entry.serialNumber)}
<div
key={entry.serialNumber}
style={{
height: ROW_HEIGHT,
padding: '8px 12px',
borderBottom: '1px solid #f0f0f0',
display: 'flex',
alignItems: 'center',
gap: 8,
}}
>
<MatchSelector
entry={entry}
decision={getDecision(entry.serialNumber)}
studentOptions={studentOptions}
onChange={(newD) => setDecision(entry.serialNumber, newD)} />
onChange={(newD) => setDecision(entry.serialNumber, newD)}
/>
</div>
))}
</div>
@@ -524,40 +696,65 @@ const JinshujuMatchModal: React.FC<MatchModalProps> = ({ open, onClose, onApplie
footer={
step === 'connection'
? [
<Button key="cancel" onClick={handleClose}>取消</Button>,
<Button key="next" type="primary" onClick={handleConnectionNext}>下一步</Button>,
<Button key="cancel" onClick={handleClose}>
取消
</Button>,
<Button key="next" type="primary" onClick={handleConnectionNext}>
下一步
</Button>,
]
: step === 'rule'
? [
<Button key="back" onClick={() => setStep('connection')}>上一步</Button>,
<Button key="cancel" onClick={handleClose}>取消</Button>,
<Button key="next" type="primary" icon={<SearchOutlined />} loading={loading} onClick={handlePreview}>
<Button key="back" onClick={() => setStep('connection')}>
上一步
</Button>,
<Button key="cancel" onClick={handleClose}>
取消
</Button>,
<Button
key="next"
type="primary"
icon={<SearchOutlined />}
loading={loading}
onClick={handlePreview}
>
获取数据并下一步
</Button>,
]
: step === 'match'
? [
<Button key="back" onClick={() => setStep('rule')}>上一步</Button>,
<Button key="cancel" onClick={handleClose}>取消</Button>,
<Button key="apply" type="primary" icon={<CloudUploadOutlined />} loading={loading} onClick={handleApply}>
应用匹配
<Button key="back" onClick={() => setStep('rule')}>
上一步
</Button>,
<Button key="cancel" onClick={handleClose}>
取消
</Button>,
canTriggerSync ? (
<PermissionButton
key="apply"
permission="sync:trigger"
type="primary"
icon={<CloudUploadOutlined />}
loading={loading}
onClick={handleApply}
>
应用匹配
</PermissionButton>
) : null,
]
: null
}
>
<Steps
current={currentStep}
items={[
{ title: '连接表单' },
{ title: '匹配规则' },
{ title: '确认匹配' },
]}
items={[{ title: '连接表单' }, { title: '匹配规则' }, { title: '确认匹配' }]}
/>
{step === 'connection' ? renderConnectionStep() : null}
{step === 'rule' ? renderRuleStep() : null}
{step === 'match' ? renderMatchStep() : null}
{step === 'applying' ? <Spin tip="正在同步..." style={{ display: 'block', margin: '48px auto' }} /> : null}
{step === 'applying' ? (
<Spin tip="正在同步..." style={{ display: 'block', margin: '48px auto' }} />
) : null}
</Modal>
);
};