feat: refine api key permissions and admin routes

apps/web/src/pages/admin/AccessRulesPanel.tsx

@@ -1,33 +1,16 @@
-import { useEffect, useMemo, useState } from 'react';
-import { ChevronDown, ChevronRight, ShieldCheck } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { ShieldCheck } from 'lucide-react';
 import type {
   BaseModelCatalogItem,
-  GatewayAccessEffect,
-  GatewayAccessRuleBatchRequest,
-  GatewayAccessRuleResourceRequest,
-  GatewayAccessResourceType,
   GatewayAccessRule,
+  GatewayAccessRuleBatchRequest,
   IntegrationPlatform,
   PlatformModel,
   UserGroup,
 } from '@easyai-ai-gateway/contracts';
-import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Checkbox, Input, Label, Select } from '../../components/ui';
+import { Badge, Card, CardContent, CardHeader, CardTitle, Label, Select } from '../../components/ui';
 import type { LoadState } from '../../types';
-
-type Effect = Extract<GatewayAccessEffect, 'allow' | 'deny'>;
-type ResourceType = Extract<GatewayAccessResourceType, 'platform' | 'platform_model'>;
-type ResourceKey = `${ResourceType}:${string}`;
-
-type PlatformNode = {
-  id: string;
-  name: string;
-  subtitle: string;
-  models: Array<{
-    id: string;
-    name: string;
-    subtitle: string;
-  }>;
-};
+import { AccessPermissionEditor } from './AccessPermissionEditor';
 
 export function AccessRulesPanel(props: {
   accessRules: GatewayAccessRule[];
@@ -40,20 +23,6 @@ export function AccessRulesPanel(props: {
   onBatchAccessRules: (input: GatewayAccessRuleBatchRequest) => Promise<void>;
 }) {
   const [selectedGroupId, setSelectedGroupId] = useState(props.userGroups[0]?.id ?? '');
-  const [allowSearch, setAllowSearch] = useState('');
-  const [denySearch, setDenySearch] = useState('');
-  const [allowExpanded, setAllowExpanded] = useState<Set<string>>(() => new Set(props.platforms.map((item) => item.id)));
-  const [denyExpanded, setDenyExpanded] = useState<Set<string>>(() => new Set(props.platforms.map((item) => item.id)));
-  const [localError, setLocalError] = useState('');
-
-  const platformTree = useMemo(() => buildPlatformTree(props.platforms, props.platformModels), [props.platformModels, props.platforms]);
-  const selectedGroupRules = useMemo(
-    () => props.accessRules.filter((rule) => rule.subjectType === 'user_group' && rule.subjectId === selectedGroupId && rule.status === 'active'),
-    [props.accessRules, selectedGroupId],
-  );
-  const ruleByEffectAndResource = useMemo(() => buildRuleIndex(selectedGroupRules), [selectedGroupRules]);
-  const allowTree = useMemo(() => filterTree(platformTree, allowSearch), [allowSearch, platformTree]);
-  const denyTree = useMemo(() => filterTree(platformTree, denySearch), [denySearch, platformTree]);
 
   useEffect(() => {
     if (!selectedGroupId && props.userGroups[0]?.id) {
@@ -61,79 +30,6 @@ export function AccessRulesPanel(props: {
     }
   }, [props.userGroups, selectedGroupId]);
 
-  useEffect(() => {
-    setAllowExpanded((current) => mergeExpanded(current, props.platforms));
-    setDenyExpanded((current) => mergeExpanded(current, props.platforms));
-  }, [props.platforms]);
-
-  async function setPermission(effect: Effect, resourceType: ResourceType, resourceId: string, enabled: boolean) {
-    const resourceKey = makeResourceKey(resourceType, resourceId);
-    await applyPermissionBatch(effect, enabled ? [resourceKey] : [], enabled ? [] : [resourceKey]);
-  }
-
-  async function setPlatformPermission(effect: Effect, platform: PlatformNode, enabled: boolean) {
-    const keys = [
-      makeResourceKey('platform', platform.id),
-      ...platform.models.map((model) => makeResourceKey('platform_model', model.id)),
-    ];
-    await batchApply(effect, keys, enabled);
-  }
-
-  async function selectAll(effect: Effect, nodes: PlatformNode[]) {
-    await batchApply(effect, visibleResourceKeys(nodes), true);
-  }
-
-  async function reverseVisible(effect: Effect, nodes: PlatformNode[]) {
-    const keys = visibleResourceKeys(nodes);
-    const upsertKeys: ResourceKey[] = [];
-    const deleteKeys: ResourceKey[] = [];
-    for (const key of keys) {
-      const checked = Boolean(ruleByEffectAndResource.get(`${effect}:${key}`));
-      if (checked) deleteKeys.push(key);
-      else upsertKeys.push(key);
-    }
-    await applyPermissionBatch(effect, upsertKeys, deleteKeys);
-  }
-
-  async function clearEffect(effect: Effect) {
-    const keys = selectedGroupRules
-      .filter((rule) => rule.effect === effect)
-      .map(resourceKeyFromRule)
-      .filter((key): key is ResourceKey => Boolean(key));
-    await applyPermissionBatch(effect, [], keys, '访问权限清空失败');
-  }
-
-  async function batchApply(effect: Effect, resourceKeys: ResourceKey[], enabled: boolean) {
-    await applyPermissionBatch(effect, enabled ? resourceKeys : [], enabled ? [] : resourceKeys);
-  }
-
-  async function applyPermissionBatch(
-    effect: Effect,
-    upsertKeys: ResourceKey[],
-    deleteKeys: ResourceKey[],
-    errorMessage = '访问权限更新失败',
-  ) {
-    if (!selectedGroupId) return;
-    const upsertResources = dedupeResourceKeys(upsertKeys).map((key) => createPermissionResource(effect, key));
-    const deleteResources = dedupeResourceKeys(deleteKeys).map(resourceRequestFromKey);
-    if (upsertResources.length === 0 && deleteResources.length === 0) return;
-    setLocalError('');
-    try {
-      await props.onBatchAccessRules({
-        subjectType: 'user_group',
-        subjectId: selectedGroupId,
-        effect,
-        upsertResources,
-        deleteResources,
-      });
-    } catch (err) {
-      setLocalError(err instanceof Error ? err.message : errorMessage);
-    }
-  }
-
-  const allowSummary = countEffectRules(selectedGroupRules, 'allow');
-  const denySummary = countEffectRules(selectedGroupRules, 'deny');
-
   return (
     <div className="pageStack">
       <Card>
@@ -145,7 +41,7 @@ export function AccessRulesPanel(props: {
           <Badge variant="secondary">{props.accessRules.length} 条规则</Badge>
         </CardHeader>
         <CardContent>
-          {(props.message || localError) && <p className="formMessage">{localError || props.message}</p>}
+          {props.message && <p className="formMessage">{props.message}</p>}
           <div className="accessGroupToolbar">
             <Label>
               用户组
@@ -162,48 +58,16 @@ export function AccessRulesPanel(props: {
       </Card>
 
       {selectedGroupId ? (
-        <section className="accessPermissionGrid">
-          <PermissionTreePanel
-            emptyText="暂无可维护的平台模型"
-            effect="allow"
-            expanded={allowExpanded}
-            rules={ruleByEffectAndResource}
-            search={allowSearch}
-            state={props.state}
-            summary={allowSummary}
-            title="专属使用（平台/模型）"
-            tree={allowTree}
-            onClear={() => void clearEffect('allow')}
-            onExpandAll={() => setAllowExpanded(new Set(platformTree.map((item) => item.id)))}
-            onFoldAll={() => setAllowExpanded(new Set())}
-            onReverse={() => void reverseVisible('allow', allowTree)}
-            onSearchChange={setAllowSearch}
-            onSelectAll={() => void selectAll('allow', allowTree)}
-            onToggleExpanded={(platformId) => setAllowExpanded(toggleSet(allowExpanded, platformId))}
-            onTogglePlatformPermission={setPlatformPermission}
-            onTogglePermission={setPermission}
-          />
-          <PermissionTreePanel
-            emptyText="暂无可维护的平台模型"
-            effect="deny"
-            expanded={denyExpanded}
-            rules={ruleByEffectAndResource}
-            search={denySearch}
-            state={props.state}
-            summary={denySummary}
-            title="不允许使用（平台/模型）"
-            tree={denyTree}
-            onClear={() => void clearEffect('deny')}
-            onExpandAll={() => setDenyExpanded(new Set(platformTree.map((item) => item.id)))}
-            onFoldAll={() => setDenyExpanded(new Set())}
-            onReverse={() => void reverseVisible('deny', denyTree)}
-            onSearchChange={setDenySearch}
-            onSelectAll={() => void selectAll('deny', denyTree)}
-            onToggleExpanded={(platformId) => setDenyExpanded(toggleSet(denyExpanded, platformId))}
-            onTogglePlatformPermission={setPlatformPermission}
-            onTogglePermission={setPermission}
-          />
-        </section>
+        <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>
@@ -213,221 +77,3 @@ export function AccessRulesPanel(props: {
     </div>
   );
 }
-
-function PermissionTreePanel(props: {
-  effect: Effect;
-  emptyText: string;
-  expanded: Set<string>;
-  rules: Map<string, GatewayAccessRule>;
-  search: string;
-  state: LoadState;
-  summary: { platforms: number; models: number };
-  title: string;
-  tree: PlatformNode[];
-  onClear: () => void;
-  onExpandAll: () => void;
-  onFoldAll: () => void;
-  onReverse: () => void;
-  onSearchChange: (value: string) => void;
-  onSelectAll: () => void;
-  onToggleExpanded: (platformId: string) => void;
-  onTogglePlatformPermission: (effect: Effect, platform: PlatformNode, enabled: boolean) => void;
-  onTogglePermission: (effect: Effect, resourceType: ResourceType, resourceId: string, enabled: boolean) => void;
-}) {
-  return (
-    <Card className="accessPermissionPanel">
-      <CardHeader>
-        <div>
-          <CardTitle>{props.title}</CardTitle>
-          <p className="mutedText">{props.summary.platforms} 个平台 / {props.summary.models} 个模型</p>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="accessTreeToolbar">
-          <Input size="sm" value={props.search} placeholder="筛选平台/模型" onChange={(event) => props.onSearchChange(event.target.value)} />
-          <Button type="button" variant="outline" size="sm" onClick={props.onExpandAll}>展开</Button>
-          <Button type="button" variant="outline" size="sm" onClick={props.onFoldAll}>折叠</Button>
-          <Button type="button" variant="outline" size="sm" disabled={props.state === 'loading'} onClick={props.onSelectAll}>全选</Button>
-          <Button type="button" variant="outline" size="sm" disabled={props.state === 'loading'} onClick={props.onReverse}>反选</Button>
-          <Button type="button" variant="outline" size="sm" disabled={props.state === 'loading'} onClick={props.onClear}>清空</Button>
-        </div>
-        <div className="accessTreeBox">
-          {props.tree.length ? props.tree.map((platform) => (
-            <PlatformPermissionNode
-              effect={props.effect}
-              expanded={props.expanded.has(platform.id)}
-              key={platform.id}
-              platform={platform}
-              rules={props.rules}
-              onToggleExpanded={props.onToggleExpanded}
-              onTogglePlatformPermission={props.onTogglePlatformPermission}
-              onTogglePermission={props.onTogglePermission}
-            />
-          )) : <span className="accessTreeEmpty">{props.emptyText}</span>}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-function PlatformPermissionNode(props: {
-  effect: Effect;
-  expanded: boolean;
-  platform: PlatformNode;
-  rules: Map<string, GatewayAccessRule>;
-  onToggleExpanded: (platformId: string) => void;
-  onTogglePlatformPermission: (effect: Effect, platform: PlatformNode, enabled: boolean) => void;
-  onTogglePermission: (effect: Effect, resourceType: ResourceType, resourceId: string, enabled: boolean) => void;
-}) {
-  const platformRuleKey = `${props.effect}:${makeResourceKey('platform', props.platform.id)}`;
-  const checkedModels = props.platform.models.filter((model) => props.rules.has(`${props.effect}:${makeResourceKey('platform_model', model.id)}`)).length;
-  const platformChecked = props.rules.has(platformRuleKey);
-  const platformState = platformChecked ? true : checkedModels > 0 ? 'indeterminate' : false;
-  return (
-    <div className="accessTreeNode">
-      <div className="accessTreeRow">
-        <button type="button" className="accessTreeExpand" onClick={() => props.onToggleExpanded(props.platform.id)}>
-          {props.expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-        </button>
-        <Checkbox
-          checked={platformState}
-          onCheckedChange={(checked) => props.onTogglePlatformPermission(props.effect, props.platform, checked === true)}
-        />
-        <span title={props.platform.subtitle || props.platform.name}>{props.platform.name}</span>
-        {checkedModels > 0 && <Badge variant="secondary">{checkedModels}</Badge>}
-      </div>
-      {props.expanded && props.platform.models.length > 0 && (
-        <div className="accessTreeChildren">
-          {props.platform.models.map((model) => {
-            const modelKey = `${props.effect}:${makeResourceKey('platform_model', model.id)}`;
-            return (
-              <label className="accessTreeRow accessTreeModel" key={model.id}>
-                <span />
-                <Checkbox
-                  checked={props.rules.has(modelKey)}
-                  onCheckedChange={(checked) => props.onTogglePermission(props.effect, 'platform_model', model.id, checked === true)}
-                />
-                <span title={model.subtitle || model.name}>{model.name}</span>
-              </label>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function buildPlatformTree(platforms: IntegrationPlatform[], platformModels: PlatformModel[]): PlatformNode[] {
-  const modelsByPlatform = new Map<string, PlatformModel[]>();
-  for (const model of platformModels) {
-    const current = modelsByPlatform.get(model.platformId) ?? [];
-    current.push(model);
-    modelsByPlatform.set(model.platformId, current);
-  }
-  return platforms.map((platform) => ({
-    id: platform.id,
-    name: platform.internalName || platform.name,
-    subtitle: `${platform.provider} / ${platform.platformKey}`,
-    models: (modelsByPlatform.get(platform.id) ?? [])
-      .slice()
-      .sort((a, b) => modelLabel(a).localeCompare(modelLabel(b)))
-      .map((model) => ({
-        id: model.id,
-        name: modelLabel(model),
-        subtitle: `${model.modelType} / ${model.modelName}`,
-      })),
-  })).sort((a, b) => a.name.localeCompare(b.name));
-}
-
-function filterTree(tree: PlatformNode[], keyword: string): PlatformNode[] {
-  const normalized = keyword.trim().toLowerCase();
-  if (!normalized) return tree;
-  return tree.flatMap((platform) => {
-    const platformMatched = `${platform.name} ${platform.subtitle}`.toLowerCase().includes(normalized);
-    const models = platformMatched
-      ? platform.models
-      : platform.models.filter((model) => `${model.name} ${model.subtitle}`.toLowerCase().includes(normalized));
-    return platformMatched || models.length ? [{ ...platform, models }] : [];
-  });
-}
-
-function buildRuleIndex(rules: GatewayAccessRule[]) {
-  const index = new Map<string, GatewayAccessRule>();
-  for (const rule of rules) {
-    if (rule.resourceType !== 'platform' && rule.resourceType !== 'platform_model') continue;
-    if (rule.effect !== 'allow' && rule.effect !== 'deny') continue;
-    index.set(`${rule.effect}:${makeResourceKey(rule.resourceType, rule.resourceId)}`, rule);
-  }
-  return index;
-}
-
-function countEffectRules(rules: GatewayAccessRule[], effect: Effect) {
-  return rules.reduce((summary, rule) => {
-    if (rule.effect !== effect) return summary;
-    if (rule.resourceType === 'platform') summary.platforms += 1;
-    if (rule.resourceType === 'platform_model') summary.models += 1;
-    return summary;
-  }, { platforms: 0, models: 0 });
-}
-
-function visibleResourceKeys(nodes: PlatformNode[]): ResourceKey[] {
-  return nodes.flatMap((platform) => [
-    makeResourceKey('platform', platform.id),
-    ...platform.models.map((model) => makeResourceKey('platform_model', model.id)),
-  ]);
-}
-
-function createPermissionResource(
-  effect: Effect,
-  resourceKey: ResourceKey,
-): GatewayAccessRuleResourceRequest {
-  const [resourceType, resourceId] = splitResourceKey(resourceKey);
-  return {
-    resourceType,
-    resourceId,
-    priority: effect === 'deny' ? 10 : 100,
-    minPermissionLevel: 0,
-    conditions: {},
-    metadata: { uiMode: 'user_group_permission_tree' },
-    status: 'active',
-  };
-}
-
-function resourceRequestFromKey(resourceKey: ResourceKey): GatewayAccessRuleResourceRequest {
-  const [resourceType, resourceId] = splitResourceKey(resourceKey);
-  return { resourceType, resourceId };
-}
-
-function resourceKeyFromRule(rule: GatewayAccessRule): ResourceKey | undefined {
-  if (rule.resourceType !== 'platform' && rule.resourceType !== 'platform_model') return undefined;
-  return makeResourceKey(rule.resourceType, rule.resourceId);
-}
-
-function dedupeResourceKeys(keys: ResourceKey[]) {
-  return Array.from(new Set(keys.filter(Boolean)));
-}
-
-function mergeExpanded(current: Set<string>, platforms: IntegrationPlatform[]) {
-  if (current.size > 0) return current;
-  return new Set(platforms.map((item) => item.id));
-}
-
-function toggleSet(set: Set<string>, value: string) {
-  const next = new Set(set);
-  if (next.has(value)) next.delete(value);
-  else next.add(value);
-  return next;
-}
-
-function makeResourceKey(resourceType: ResourceType, resourceId: string): ResourceKey {
-  return `${resourceType}:${resourceId}`;
-}
-
-function splitResourceKey(key: ResourceKey): [ResourceType, string] {
-  const [resourceType, ...rest] = key.split(':');
-  return [resourceType as ResourceType, rest.join(':')];
-}
-
-function modelLabel(model: PlatformModel) {
-  return model.displayName || model.modelAlias || model.modelName;
-}