309 lines
15 KiB
TypeScript
309 lines
15 KiB
TypeScript
import type { FormEvent, ReactNode } from 'react';
|
|
import { Boxes, Building2, Gauge, KeyRound, Route, ServerCog, ShieldCheck, UsersRound, Workflow } from 'lucide-react';
|
|
import type { BaseModelUpsertRequest, CatalogProviderUpsertRequest, PricingRuleSetUpsertRequest } from '@easyai-ai-gateway/contracts';
|
|
import type { ConsoleData, StatItem } from '../app-state';
|
|
import { EntityTable } from '../components/EntityTable';
|
|
import { PageHeader } from '../components/PageHeader';
|
|
import { StatGrid } from '../components/StatGrid';
|
|
import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Select, Tabs } from '../components/ui';
|
|
import type { AdminSection, LoadState, PlatformForm, PlatformModelForm } from '../types';
|
|
import { BaseModelCatalogPanel } from './admin/BaseModelCatalogPanel';
|
|
import { PricingRulesPanel } from './admin/PricingRulesPanel';
|
|
import { ProviderManagementPanel } from './admin/ProviderManagementPanel';
|
|
|
|
const tabs = [
|
|
{ value: 'overview', label: '总览', icon: <Workflow size={15} /> },
|
|
{ value: 'globalModels', label: 'Provider', icon: <Boxes size={15} /> },
|
|
{ value: 'baseModels', label: '基准模型库', icon: <Boxes size={15} /> },
|
|
{ value: 'pricing', label: '定价规则', icon: <Gauge size={15} /> },
|
|
{ value: 'platforms', label: '平台管理', icon: <ServerCog size={15} /> },
|
|
{ value: 'tenants', label: '租户', icon: <Building2 size={15} /> },
|
|
{ value: 'users', label: '用户', icon: <UsersRound size={15} /> },
|
|
{ value: 'userGroups', label: '用户组', icon: <UsersRound size={15} /> },
|
|
{ value: 'runtime', label: '运行限流', icon: <Gauge size={15} /> },
|
|
] satisfies Array<{ value: AdminSection; label: string; icon: ReactNode }>;
|
|
|
|
export function AdminPage(props: {
|
|
data: ConsoleData;
|
|
platformForm: PlatformForm;
|
|
platformModelForm: PlatformModelForm;
|
|
operationMessage: string;
|
|
section: AdminSection;
|
|
stats: StatItem[];
|
|
state: LoadState;
|
|
onDeleteBaseModel: (baseModelId: string) => Promise<void>;
|
|
onDeleteProvider: (providerId: string) => Promise<void>;
|
|
onDeletePricingRuleSet: (ruleSetId: string) => Promise<void>;
|
|
onPlatformFormChange: (value: PlatformForm) => void;
|
|
onPlatformModelFormChange: (value: PlatformModelForm) => void;
|
|
onSaveBaseModel: (input: BaseModelUpsertRequest, baseModelId?: string) => Promise<void>;
|
|
onSaveProvider: (input: CatalogProviderUpsertRequest, providerId?: string) => Promise<void>;
|
|
onSavePricingRuleSet: (input: PricingRuleSetUpsertRequest, ruleSetId?: string) => Promise<void>;
|
|
onSectionChange: (value: AdminSection) => void;
|
|
onSubmitPlatform: (event: FormEvent<HTMLFormElement>) => void;
|
|
onSubmitPlatformModel: (event: FormEvent<HTMLFormElement>) => void;
|
|
}) {
|
|
return (
|
|
<div className="pageStack">
|
|
<PageHeader eyebrow="Admin" title="管理工作台" description="全局模型、平台、租户用户和运行策略。" />
|
|
<div className="subPageLayout">
|
|
<Tabs className="sideTabs" value={props.section} tabs={tabs} onValueChange={props.onSectionChange} />
|
|
<div className="subPageContent">
|
|
{props.section === 'overview' && <OverviewPanel data={props.data} stats={props.stats} />}
|
|
{props.section === 'globalModels' && (
|
|
<ProviderManagementPanel
|
|
message={props.operationMessage}
|
|
providers={props.data.providers}
|
|
state={props.state}
|
|
onDeleteProvider={props.onDeleteProvider}
|
|
onSaveProvider={props.onSaveProvider}
|
|
/>
|
|
)}
|
|
{props.section === 'baseModels' && (
|
|
<BaseModelCatalogPanel
|
|
baseModels={props.data.baseModels}
|
|
message={props.operationMessage}
|
|
providers={props.data.providers}
|
|
state={props.state}
|
|
onDeleteBaseModel={props.onDeleteBaseModel}
|
|
onSaveBaseModel={props.onSaveBaseModel}
|
|
/>
|
|
)}
|
|
{props.section === 'pricing' && (
|
|
<PricingRulesPanel
|
|
message={props.operationMessage}
|
|
pricingRuleSets={props.data.pricingRuleSets}
|
|
state={props.state}
|
|
onDeletePricingRuleSet={props.onDeletePricingRuleSet}
|
|
onSavePricingRuleSet={props.onSavePricingRuleSet}
|
|
/>
|
|
)}
|
|
{props.section === 'platforms' && <PlatformsPanel {...props} />}
|
|
{props.section === 'tenants' && <TenantsPanel data={props.data} />}
|
|
{props.section === 'users' && <UsersPanel data={props.data} />}
|
|
{props.section === 'userGroups' && <UserGroupsPanel data={props.data} />}
|
|
{props.section === 'runtime' && <RuntimePanel data={props.data} />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function OverviewPanel(props: { data: ConsoleData; stats: StatItem[] }) {
|
|
const enabledPlatforms = props.data.platforms.filter((item) => item.status === 'enabled');
|
|
const chatModels = props.data.models.filter((item) => item.modelType === 'chat' && item.enabled);
|
|
const imageModels = props.data.models.filter((item) => item.modelType === 'image' && item.enabled);
|
|
|
|
return (
|
|
<div className="pageStack">
|
|
<StatGrid items={props.stats} />
|
|
<section className="contentGrid three">
|
|
<ManagementCard icon={<Route size={18} />} label="路由候选" value={enabledPlatforms.length} detail="平台优先级 / 失败切换" />
|
|
<ManagementCard icon={<ShieldCheck size={18} />} label="策略对象" value={props.data.userGroups.length} detail="用户组 / 折扣 / 并发" />
|
|
<ManagementCard icon={<Workflow size={18} />} label="运行窗口" value={props.data.rateLimitWindows.length} detail="TPM / RPM / 并发" />
|
|
</section>
|
|
<section className="contentGrid two">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>可用平台</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<EntityTable
|
|
columns={['Provider', '平台', '状态', '优先级']}
|
|
empty="暂无平台"
|
|
rows={props.data.platforms.slice(0, 6).map((item) => [item.provider, item.name, item.status, item.priority])}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>近期任务</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{props.data.taskResult ? (
|
|
<div className="taskPreview">
|
|
<Badge variant={props.data.taskResult.status === 'succeeded' ? 'success' : 'secondary'}>{props.data.taskResult.status}</Badge>
|
|
<strong>{props.data.taskResult.model}</strong>
|
|
<pre>{JSON.stringify(props.data.taskResult.result ?? {}, null, 2)}</pre>
|
|
</div>
|
|
) : (
|
|
<div className="emptyState">
|
|
<KeyRound size={18} />
|
|
<strong>暂无任务记录</strong>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
<section className="contentGrid two">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>模型能力</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<EntityTable
|
|
columns={['能力', '数量', '阶段', '入口']}
|
|
empty="暂无模型"
|
|
rows={[
|
|
['对话', chatModels.length, 'Phase 1', '/v1/chat/completions'],
|
|
['图像', imageModels.length, 'Phase 1', '/v1/images/*'],
|
|
['视频', props.data.models.filter((item) => item.modelType === 'video').length, 'Next', '/v1/videos/*'],
|
|
]}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>限流窗口</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<EntityTable
|
|
columns={['Scope', '指标', '使用', '限制']}
|
|
empty="暂无限流窗口"
|
|
rows={props.data.rateLimitWindows.slice(0, 6).map((item) => [item.scopeKey, item.metric, item.usedValue, item.limitValue])}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ManagementCard(props: { detail: string; icon: ReactNode; label: string; value: number }) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="capabilityCard">
|
|
<div className="iconBox">{props.icon}</div>
|
|
<div>
|
|
<span>{props.label}</span>
|
|
<strong>{props.value}</strong>
|
|
<small>{props.detail}</small>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function PlatformsPanel(props: {
|
|
data: ConsoleData;
|
|
platformForm: PlatformForm;
|
|
platformModelForm: PlatformModelForm;
|
|
state: LoadState;
|
|
onPlatformFormChange: (value: PlatformForm) => void;
|
|
onPlatformModelFormChange: (value: PlatformModelForm) => void;
|
|
onSubmitPlatform: (event: FormEvent<HTMLFormElement>) => void;
|
|
onSubmitPlatformModel: (event: FormEvent<HTMLFormElement>) => void;
|
|
}) {
|
|
return (
|
|
<section className="contentGrid two">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>创建平台</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form className="formGrid" onSubmit={props.onSubmitPlatform}>
|
|
<Label>Provider<Input value={props.platformForm.provider} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, provider: event.target.value })} /></Label>
|
|
<Label>平台 Key<Input value={props.platformForm.platformKey} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, platformKey: event.target.value })} /></Label>
|
|
<Label>名称<Input value={props.platformForm.name} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, name: event.target.value })} /></Label>
|
|
<Label>Base URL<Input value={props.platformForm.baseUrl} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, baseUrl: event.target.value })} /></Label>
|
|
<Label>
|
|
定价规则
|
|
<Select value={props.platformForm.pricingRuleSetId} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, pricingRuleSetId: event.target.value })}>
|
|
<option value="">默认规则</option>
|
|
{props.data.pricingRuleSets.map((item) => <option value={item.id} key={item.id}>{item.name}</option>)}
|
|
</Select>
|
|
</Label>
|
|
<Label>平台折扣率<Input value={props.platformForm.defaultDiscountFactor} onChange={(event) => props.onPlatformFormChange({ ...props.platformForm, defaultDiscountFactor: event.target.value })} /></Label>
|
|
<Button type="submit" disabled={props.state === 'loading'}>创建平台</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>绑定平台模型</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form className="formGrid" onSubmit={props.onSubmitPlatformModel}>
|
|
<Label>
|
|
平台
|
|
<Select value={props.platformModelForm.platformId} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, platformId: event.target.value })}>
|
|
<option value="">选择平台</option>
|
|
{props.data.platforms.map((item) => <option value={item.id} key={item.id}>{item.name}</option>)}
|
|
</Select>
|
|
</Label>
|
|
<Label>
|
|
基准模型
|
|
<Select value={props.platformModelForm.canonicalModelKey} onChange={(event) => updateBaseModel(event.target.value, props)}>
|
|
<option value="">选择基准模型</option>
|
|
{props.data.baseModels.map((item) => <option value={item.canonicalModelKey} key={item.id}>{item.canonicalModelKey}</option>)}
|
|
</Select>
|
|
</Label>
|
|
<Label>模型名<Input value={props.platformModelForm.modelName} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, modelName: event.target.value })} /></Label>
|
|
<Label>别名<Input value={props.platformModelForm.modelAlias} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, modelAlias: event.target.value })} /></Label>
|
|
<Label>
|
|
定价规则
|
|
<Select value={props.platformModelForm.pricingRuleSetId} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, pricingRuleSetId: event.target.value })}>
|
|
<option value="">继承平台规则</option>
|
|
{props.data.pricingRuleSets.map((item) => <option value={item.id} key={item.id}>{item.name}</option>)}
|
|
</Select>
|
|
</Label>
|
|
<Label>模型折扣率<Input value={props.platformModelForm.discountFactor} onChange={(event) => props.onPlatformModelFormChange({ ...props.platformModelForm, discountFactor: event.target.value })} /></Label>
|
|
<Button type="submit" disabled={props.state === 'loading'}>绑定模型</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="spanTwo">
|
|
<CardHeader>
|
|
<CardTitle>平台模型</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<EntityTable
|
|
columns={['模型', '类型', '平台', '状态']}
|
|
empty="暂无平台模型"
|
|
rows={props.data.models.map((item) => [item.modelName, item.modelType, item.platformName ?? item.provider ?? '-', item.enabled ? 'enabled' : 'disabled'])}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function TenantsPanel(props: { data: ConsoleData }) {
|
|
return <Card><CardHeader><CardTitle>租户管理</CardTitle></CardHeader><CardContent><EntityTable columns={['Key', '名称', '来源', '状态']} empty="暂无租户" rows={props.data.tenants.map((item) => [item.tenantKey, item.name, item.source, item.status])} /></CardContent></Card>;
|
|
}
|
|
|
|
function UsersPanel(props: { data: ConsoleData }) {
|
|
return <Card><CardHeader><CardTitle>用户管理</CardTitle></CardHeader><CardContent><EntityTable columns={['用户名', '租户', '来源', '状态']} empty="暂无用户" rows={props.data.users.map((item) => [item.username, item.tenantKey ?? '-', item.source, item.status])} /></CardContent></Card>;
|
|
}
|
|
|
|
function UserGroupsPanel(props: { data: ConsoleData }) {
|
|
return <Card><CardHeader><CardTitle>用户组策略</CardTitle></CardHeader><CardContent><EntityTable columns={['Key', '名称', '优先级', '状态']} empty="暂无用户组" rows={props.data.userGroups.map((item) => [item.groupKey, item.name, item.priority, item.status])} /></CardContent></Card>;
|
|
}
|
|
|
|
function RuntimePanel(props: { data: ConsoleData }) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>TPM / RPM / 并发窗口</CardTitle>
|
|
<Badge variant="secondary">{props.data.rateLimitWindows.length}</Badge>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<EntityTable columns={['Scope', '指标', '使用', '限制']} empty="暂无限流窗口" rows={props.data.rateLimitWindows.map((item) => [item.scopeKey, item.metric, item.usedValue, item.limitValue])} />
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function updateBaseModel(value: string, props: Parameters<typeof PlatformsPanel>[0]) {
|
|
const base = props.data.baseModels.find((item) => item.canonicalModelKey === value);
|
|
props.onPlatformModelFormChange({
|
|
...props.platformModelForm,
|
|
canonicalModelKey: value,
|
|
modelAlias: value,
|
|
modelName: base?.providerModelName ?? '',
|
|
modelType: base?.modelType ?? props.platformModelForm.modelType,
|
|
});
|
|
}
|