feat(web): add reusable admin form dialog

2026-05-09 20:15:35 +08:00
parent c0335bd5d0
commit a5e66e79cd
49 changed files with 6013 additions and 1108 deletions
@@ -0,0 +1,127 @@
+import type { ReactNode } from 'react';
+import { Activity, Boxes, Image, Layers, Route, ServerCog, ShieldCheck, Video, Workflow } from 'lucide-react';
+import { Badge, Button, Card, CardContent } from '../components/ui';
+import type { PageKey } from '../types';
+
+const coverage = [
+  { icon: <Activity size={18} />, label: '大模型对话', value: 'Chat / Responses', detail: '兼容 OpenAI 对话接口与 EasyAI 站内调用' },
+  { icon: <Image size={18} />, label: '图像生成', value: 'Image Generation', detail: '支持尺寸、质量、计费权重和结果转存' },
+  { icon: <Layers size={18} />, label: '图像编辑', value: 'Image Edit', detail: '参考图、mask 和主服务文件上传链路' },
+  { icon: <Video size={18} />, label: '视频能力', value: 'Video Ready', detail: '保留任务队列、进度事件和后续 Client 扩展位' },
+];
+
+const advantages = [
+  { icon: <Route size={18} />, title: '多客户端路由', body: '同一模型可配置多个平台客户端，前一个失败后按策略切换下一个。' },
+  { icon: <Workflow size={18} />, title: '持久化任务', body: '任务、事件、队列和回调 outbox 入库，服务重启后可以恢复运行状态。' },
+  { icon: <ShieldCheck size={18} />, title: '策略化限流', body: 'TPM、RPM、并发、用户组折扣和平台优先级统一纳入调度。' },
+  { icon: <ServerCog size={18} />, title: 'Hybrid 接入', body: '既可独立闭环运行，也可以对接 server-main 的认证、上传和业务前端。' },
+];
+
+export function HomePage(props: { onNavigate: (page: PageKey) => void }) {
+  return (
+    <div className="landingPage">
+      <section className="releaseNotice">
+        <Badge variant="success">模型上线</Badge>
+        <strong>OpenAI 与 Gemini Phase 1 Client 已进入网关运行链路</strong>
+        <span>对话、生图、图像编辑先行迁移，视频任务队列和进度模型已预留扩展位。</span>
+      </section>
+
+      <section className="landingHero">
+        <div className="landingCopy">
+          <Badge variant="secondary">EasyAI AI Gateway</Badge>
+          <h1>一个面向多模型、多平台、多任务形态的 AI 网关中台</h1>
+          <p>统一承接对话、生图、图像编辑和后续视频能力，让 server-main 通过稳定接口调用模型，让平台路由、失败重试、限流计费和任务恢复在网关侧闭环。</p>
+          <div className="landingActions">
+            <Button type="button" onClick={() => props.onNavigate('models')}>浏览模型</Button>
+            <Button type="button" variant="outline" onClick={() => props.onNavigate('docs')}>查看 API 文档</Button>
+          </div>
+        </div>
+        <GatewayPreview />
+      </section>
+
+      <section className="landingSection">
+        <div className="landingSectionHeader">
+          <p className="eyebrow">Model Coverage</p>
+          <h2>覆盖从文本到多媒体的模型能力</h2>
+        </div>
+        <div className="coverageGrid">
+          {coverage.map((item) => (
+            <FeatureCard {...item} key={item.label} />
+          ))}
+        </div>
+      </section>
+
+      <section className="landingSection">
+        <div className="landingSectionHeader">
+          <p className="eyebrow">Gateway Advantage</p>
+          <h2>为生产调度准备的网关能力</h2>
+        </div>
+        <div className="advantageGrid">
+          {advantages.map((item) => (
+            <AdvantageCard {...item} key={item.title} />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function GatewayPreview() {
+  return (
+    <div className="gatewayPreview" aria-label="网关能力预览">
+      <div className="previewHeader">
+        <span>Gateway Runtime</span>
+        <Badge variant="success">hybrid</Badge>
+      </div>
+      <div className="previewGrid">
+        <PreviewItem label="Provider" value="OpenAI / Gemini" />
+        <PreviewItem label="Routes" value="Chat · Image · Edit · Video" />
+        <PreviewItem label="Limits" value="TPM · RPM · Concurrent" />
+        <PreviewItem label="Queue" value="Persistent Recovery" />
+      </div>
+      <div className="previewFlow">
+        <span>Request</span>
+        <span>Policy</span>
+        <span>Client Retry</span>
+        <span>Callback</span>
+        <span>Result</span>
+      </div>
+    </div>
+  );
+}
+
+function PreviewItem(props: { label: string; value: string }) {
+  return (
+    <div>
+      <span>{props.label}</span>
+      <strong>{props.value}</strong>
+    </div>
+  );
+}
+
+function FeatureCard(props: { detail: string; icon: ReactNode; label: string; value: string }) {
+  return (
+    <Card>
+      <CardContent className="landingFeatureCard">
+        <div className="iconBox">{props.icon}</div>
+        <div>
+          <span>{props.label}</span>
+          <strong>{props.value}</strong>
+          <p>{props.detail}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function AdvantageCard(props: { body: string; icon: ReactNode; title: string }) {
+  return (
+    <Card>
+      <CardContent className="advantageCard">
+        <div className="iconBox">{props.icon}</div>
+        <strong>{props.title}</strong>
+        <p>{props.body}</p>
+      </CardContent>
+    </Card>
+  );
+}