80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { ShieldCheck } from 'lucide-react';
|
||
import type {
|
||
BaseModelCatalogItem,
|
||
GatewayAccessRule,
|
||
GatewayAccessRuleBatchRequest,
|
||
IntegrationPlatform,
|
||
PlatformModel,
|
||
UserGroup,
|
||
} from '@easyai-ai-gateway/contracts';
|
||
import { Badge, Card, CardContent, CardHeader, CardTitle, Label, Select } from '../../components/ui';
|
||
import type { LoadState } from '../../types';
|
||
import { AccessPermissionEditor } from './AccessPermissionEditor';
|
||
|
||
export function AccessRulesPanel(props: {
|
||
accessRules: GatewayAccessRule[];
|
||
baseModels: BaseModelCatalogItem[];
|
||
message: string;
|
||
platformModels: PlatformModel[];
|
||
platforms: IntegrationPlatform[];
|
||
state: LoadState;
|
||
userGroups: UserGroup[];
|
||
onBatchAccessRules: (input: GatewayAccessRuleBatchRequest) => Promise<void>;
|
||
}) {
|
||
const [selectedGroupId, setSelectedGroupId] = useState(props.userGroups[0]?.id ?? '');
|
||
|
||
useEffect(() => {
|
||
if (!selectedGroupId && props.userGroups[0]?.id) {
|
||
setSelectedGroupId(props.userGroups[0].id);
|
||
}
|
||
}, [props.userGroups, selectedGroupId]);
|
||
|
||
return (
|
||
<div className="pageStack">
|
||
<Card>
|
||
<CardHeader>
|
||
<div>
|
||
<CardTitle>用户组访问权限</CardTitle>
|
||
<p className="mutedText">数据仍写入统一权限规则表；这里按用户组维护专属使用和不允许使用的平台/模型。</p>
|
||
</div>
|
||
<Badge variant="secondary">{props.accessRules.length} 条规则</Badge>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{props.message && <p className="formMessage">{props.message}</p>}
|
||
<div className="accessGroupToolbar">
|
||
<Label>
|
||
用户组
|
||
<Select size="sm" value={selectedGroupId} onChange={(event) => setSelectedGroupId(event.target.value)}>
|
||
{props.userGroups.map((group) => <option value={group.id} key={group.id}>{group.name}</option>)}
|
||
</Select>
|
||
</Label>
|
||
<div className="accessGroupHint">
|
||
<ShieldCheck size={15} />
|
||
<span>未配置规则时默认放行；拒绝规则优先于专属规则。</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{selectedGroupId ? (
|
||
<AccessPermissionEditor
|
||
accessRules={props.accessRules}
|
||
metadataMode="user_group_permission_tree"
|
||
platformModels={props.platformModels}
|
||
platforms={props.platforms}
|
||
state={props.state}
|
||
subjectId={selectedGroupId}
|
||
subjectType="user_group"
|
||
onBatchAccessRules={props.onBatchAccessRules}
|
||
/>
|
||
) : (
|
||
<div className="emptyState">
|
||
<strong>暂无用户组</strong>
|
||
<span>请先创建用户组，再维护平台和模型权限。</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|