261 lines
8.2 KiB
TypeScript
261 lines
8.2 KiB
TypeScript
import { type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node';
|
||
import { Link, useLoaderData } from '@remix-run/react';
|
||
import { Card } from '~/components/ui/Card';
|
||
import { Table } from '~/components/ui/Table';
|
||
import { Tag, type TagColor } from '~/components/ui/Tag';
|
||
import { loadRuleYamlPacks, type RuleSummary, type RuleYamlPack } from '~/utils/rules-yaml-mock.server';
|
||
import styles from '~/styles/pages/rules_test.css?url';
|
||
|
||
export const links = () => [
|
||
{ rel: 'stylesheet', href: styles }
|
||
];
|
||
|
||
export const meta: MetaFunction = () => [
|
||
{ title: '规则 YAML 列表 - 智慧法务' }
|
||
];
|
||
|
||
type RuleRow = RuleSummary & {
|
||
rowId: string;
|
||
packId: string;
|
||
documentType: string;
|
||
moduleType: string;
|
||
mainType: string;
|
||
subtype: string;
|
||
yamlName: string;
|
||
yamlStatus: RuleYamlPack['sourceStatus'];
|
||
};
|
||
|
||
type LoaderData = {
|
||
rows: RuleRow[];
|
||
packs: RuleYamlPack[];
|
||
filters: {
|
||
documentType: string;
|
||
mainType: string;
|
||
subtype: string;
|
||
ruleGroup: string;
|
||
keyword: string;
|
||
};
|
||
options: {
|
||
documentTypes: string[];
|
||
mainTypes: string[];
|
||
subtypes: string[];
|
||
ruleGroups: string[];
|
||
};
|
||
};
|
||
|
||
function unique(values: string[]): string[] {
|
||
return Array.from(new Set(values.filter(Boolean)));
|
||
}
|
||
|
||
function riskColor(risk: string): TagColor {
|
||
if (risk === 'high') return 'red';
|
||
if (risk === 'medium') return 'orange';
|
||
if (risk === 'low') return 'green';
|
||
return 'gray';
|
||
}
|
||
|
||
export async function loader({ request }: LoaderFunctionArgs) {
|
||
const url = new URL(request.url);
|
||
const requestedMainType = url.searchParams.get('mainType') || url.searchParams.get('ruleTypeName') || '';
|
||
const requestedSubtype = url.searchParams.get('subtype') || url.searchParams.get('documentAttributeType') || '';
|
||
const requestedRuleGroup = url.searchParams.get('ruleGroup') || url.searchParams.getAll('ruleGroups')[0] || '';
|
||
const requestedFilters = {
|
||
documentType: url.searchParams.get('documentType') || '',
|
||
mainType: requestedMainType,
|
||
subtype: requestedSubtype,
|
||
ruleGroup: requestedRuleGroup,
|
||
keyword: url.searchParams.get('keyword') || ''
|
||
};
|
||
|
||
const packs = await loadRuleYamlPacks();
|
||
const documentTypes = unique(packs.map(pack => pack.documentType));
|
||
const inferredDocumentType = packs.find(pack => pack.mainType === requestedFilters.mainType)?.documentType || '';
|
||
const currentDocumentType = documentTypes.includes(requestedFilters.documentType)
|
||
? requestedFilters.documentType
|
||
: inferredDocumentType || documentTypes[0] || '';
|
||
const scopedFilters = {
|
||
...requestedFilters,
|
||
documentType: currentDocumentType,
|
||
mainType: packs.some(pack => pack.documentType === currentDocumentType && pack.mainType === requestedFilters.mainType)
|
||
? requestedFilters.mainType
|
||
: '',
|
||
subtype: packs.some(pack =>
|
||
pack.documentType === currentDocumentType &&
|
||
(!requestedFilters.mainType || pack.mainType === requestedFilters.mainType) &&
|
||
pack.subtype === requestedFilters.subtype
|
||
)
|
||
? requestedFilters.subtype
|
||
: ''
|
||
};
|
||
const scopedPacks = packs.filter(pack =>
|
||
pack.documentType === scopedFilters.documentType &&
|
||
(!scopedFilters.mainType || pack.mainType === scopedFilters.mainType) &&
|
||
(!scopedFilters.subtype || pack.subtype === scopedFilters.subtype)
|
||
);
|
||
const ruleGroupOptions = unique(scopedPacks.flatMap(pack => pack.rules.map(rule => rule.group))).sort((a, b) => a.localeCompare(b, 'zh-CN'));
|
||
const filters = {
|
||
...scopedFilters,
|
||
ruleGroup: ruleGroupOptions.includes(requestedFilters.ruleGroup) ? requestedFilters.ruleGroup : ''
|
||
};
|
||
const visiblePacks = packs.filter(pack =>
|
||
pack.documentType === filters.documentType &&
|
||
(!filters.mainType || pack.mainType === filters.mainType) &&
|
||
(!filters.subtype || pack.subtype === filters.subtype)
|
||
);
|
||
|
||
const rows: RuleRow[] = visiblePacks.flatMap((pack): RuleRow[] => {
|
||
if (pack.rules.length === 0) {
|
||
return [{
|
||
rowId: `${pack.id}-empty`,
|
||
packId: pack.id,
|
||
documentType: pack.documentType,
|
||
moduleType: pack.moduleType,
|
||
mainType: pack.mainType,
|
||
subtype: pack.subtype,
|
||
yamlName: pack.metadata.name || '待配置 YAML',
|
||
yamlStatus: pack.sourceStatus,
|
||
id: `${pack.id}-empty`,
|
||
ruleId: '-',
|
||
name: '暂无规则配置',
|
||
group: '待配置',
|
||
risk: '-',
|
||
score: '-',
|
||
type: '-',
|
||
checkTypes: [],
|
||
logic: '',
|
||
subRules: [],
|
||
subRuleIds: [],
|
||
scope: [],
|
||
dependencies: [],
|
||
stageCount: 0,
|
||
appliesIn: [],
|
||
prompt: '',
|
||
description: '当前文档类型已保留规则列表与 YAML 配置页流程，等待后续接入规则文件。'
|
||
}];
|
||
}
|
||
|
||
return pack.rules.map(rule => ({
|
||
...rule,
|
||
rowId: `${pack.id}-${rule.ruleId || rule.id}`,
|
||
packId: pack.id,
|
||
documentType: pack.documentType,
|
||
moduleType: pack.moduleType,
|
||
mainType: pack.mainType,
|
||
subtype: pack.subtype,
|
||
yamlName: pack.metadata.name,
|
||
yamlStatus: pack.sourceStatus
|
||
}));
|
||
}).filter(row => {
|
||
if (filters.ruleGroup && row.group !== filters.ruleGroup) {
|
||
return false;
|
||
}
|
||
if (!filters.keyword) return true;
|
||
return [row.ruleId, row.name, row.group, row.yamlName, row.subtype]
|
||
.some(value => value.toLowerCase().includes(filters.keyword.toLowerCase()));
|
||
});
|
||
|
||
return Response.json({
|
||
rows,
|
||
packs,
|
||
filters,
|
||
options: {
|
||
documentTypes,
|
||
mainTypes: unique(packs.filter(pack => pack.documentType === filters.documentType).map(pack => pack.mainType)),
|
||
subtypes: unique(packs.filter(pack =>
|
||
pack.documentType === filters.documentType &&
|
||
(!filters.mainType || pack.mainType === filters.mainType)
|
||
).map(pack => pack.subtype)),
|
||
ruleGroups: ruleGroupOptions
|
||
}
|
||
} satisfies LoaderData);
|
||
}
|
||
|
||
export default function RulesTestList() {
|
||
const { rows } = useLoaderData<typeof loader>() as LoaderData;
|
||
|
||
const columns = [
|
||
{
|
||
title: '规则',
|
||
key: 'rule',
|
||
width: '24%',
|
||
render: (_: unknown, record: RuleRow) => (
|
||
<div className="rule-name">
|
||
<strong>{record.name}</strong>
|
||
<span>{record.ruleId}</span>
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: '子分类',
|
||
key: 'subtype',
|
||
width: '12%',
|
||
align: 'center' as const,
|
||
render: (_: unknown, record: RuleRow) => (
|
||
<div className="inline-tags">
|
||
<Tag color="blue" size="sm">{record.subtype}</Tag>
|
||
</div>
|
||
)
|
||
},
|
||
{
|
||
title: '规则组',
|
||
dataIndex: 'group' as keyof RuleRow,
|
||
key: 'group',
|
||
width: '14%',
|
||
align: 'center' as const
|
||
},
|
||
{
|
||
title: '风险',
|
||
key: 'risk',
|
||
width: '8%',
|
||
align: 'center' as const,
|
||
render: (_: unknown, record: RuleRow) => (
|
||
<Tag color={riskColor(record.risk)} size="sm">{record.risk}</Tag>
|
||
)
|
||
},
|
||
{
|
||
title: '分值',
|
||
key: 'score',
|
||
width: '8%',
|
||
align: 'center' as const,
|
||
render: (_: unknown, record: RuleRow) => (
|
||
<Tag color="gray" size="sm">{record.score}</Tag>
|
||
)
|
||
},
|
||
{
|
||
title: '依赖字段',
|
||
key: 'dependencies',
|
||
width: '20%',
|
||
render: (_: unknown, record: RuleRow) => (
|
||
<span>{record.dependencies.length > 0 ? record.dependencies.slice(0, 3).join('、') : '-'}</span>
|
||
)
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'operation',
|
||
width: '14%',
|
||
align: 'center' as const,
|
||
render: (_: unknown, record: RuleRow) => (
|
||
<Link className="operation-btn" to={`/rulesTest/detail?packId=${encodeURIComponent(record.packId)}&ruleId=${encodeURIComponent(record.ruleId || record.id)}`}>
|
||
<i className="ri-settings-3-line"></i> 配置
|
||
</Link>
|
||
)
|
||
}
|
||
];
|
||
|
||
return (
|
||
<div className="rules-test-page rules-page">
|
||
<div className="page-shell">
|
||
<Card className="ant-card">
|
||
<Table
|
||
className="rules-test-table rules-table"
|
||
columns={columns}
|
||
dataSource={rows}
|
||
rowKey="rowId"
|
||
emptyText={<div className="empty-state">暂无规则。当前类型的规则列表流程已保留，可进入配置页查看空 YAML 模板。</div>}
|
||
/>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|