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>
|
|
);
|
|
}
|