polish about page experience
This commit is contained in:
boos
+56
-1
@@ -87,6 +87,62 @@ const zhToEn: Record<string, string> = {
|
||||
'模型测试': 'Model Testing',
|
||||
'关于': 'About',
|
||||
'关于 BoosAPI': 'About BoosAPI',
|
||||
'BoosAPI 网关内核驱动': 'Powered by the BoosAPI gateway core',
|
||||
'一个平台，接住模型、工作流和多模态生产。': 'One platform for models, workflows, and multimodal production.',
|
||||
'BossAI 把多站点账号、模型路由、兼容 API、ComfyUI 工作流、创作助手和普通用户工作空间收进同一个自托管控制台。': 'BossAI brings multi-site accounts, model routing, compatible APIs, ComfyUI workflows, creative assistants, and user workspaces into one self-hosted console.',
|
||||
'核心兼容能力': 'Core compatibility',
|
||||
'兼容协议': 'Compatible protocol',
|
||||
'消息入口': 'Messages endpoint',
|
||||
'工作流前端': 'Workflow frontend',
|
||||
'平台运行结构': 'Platform runtime structure',
|
||||
'当前版本': 'Current version',
|
||||
'平台能力概览': 'Platform capability overview',
|
||||
'工作流后端': 'Workflow backends',
|
||||
'自托管服务': 'Self-hosted service',
|
||||
'统一模型入口': 'Unified model entry',
|
||||
'OpenAI、Claude、Responses、图像和视频接口集中到一套鉴权、计费和日志体系。': 'OpenAI, Claude, Responses, image, and video interfaces share one authentication, billing, and logging system.',
|
||||
'模型路由中枢': 'Model routing hub',
|
||||
'按站点、账号、成本、健康度和冷却状态选择通道，失败后自动避让。': 'Select channels by site, account, cost, health, and cooldown state, with automatic failover.',
|
||||
'工作流执行面': 'Workflow execution surface',
|
||||
'嵌入官方 ComfyUI 前端，同时接入 Cloud、RunningHub、外部 ComfyUI 和 BoosAPI 执行器。': 'Embed the official ComfyUI frontend while connecting Cloud, RunningHub, external ComfyUI, and the BoosAPI executor.',
|
||||
'多模态应用层': 'Multimodal app layer',
|
||||
'生图助手、视频助手、数字人和短视频工厂复用同一套模型路由与用户 Key。': 'Picture Agent, Video Assistant, Digital Human, and Short Video Factory reuse the same model routing and user keys.',
|
||||
'运行能力': 'Runtime capabilities',
|
||||
'围绕接入、路由、创作和运维，把 AI 应用需要的底座放在一个控制台里。': 'Access, routing, creation, and operations are organized into one console for AI apps.',
|
||||
'站点与账号': 'Sites and accounts',
|
||||
'维护上游站点、账号、OAuth、API Key、余额和连接状态。': 'Manage upstream sites, accounts, OAuth, API keys, balances, and connection state.',
|
||||
'聚合模型可用性、价格、账号覆盖、绑定令牌和路由健康度。': 'Aggregate model availability, prices, account coverage, bound tokens, and route health.',
|
||||
'用户体系': 'User system',
|
||||
'普通用户拥有独立 API Key、使用日志、工作空间和可见模型范围。': 'Regular users have independent API keys, usage logs, workspaces, and visible model scopes.',
|
||||
'审计告警': 'Audit and alerts',
|
||||
'使用日志、程序日志、通知渠道和运行事件集中留痕。': 'Usage logs, program logs, notification channels, and runtime events are recorded centrally.',
|
||||
'只归档最终产出，按用户隔离图片、视频、音频和工作流资产。': 'Archive only final outputs, with images, videos, audio, and workflow assets isolated by user.',
|
||||
'任务编排': 'Task orchestration',
|
||||
'后台生成、取消、查询、归档和失败原因追踪保持一致体验。': 'Background generation, cancellation, queries, archiving, and failure tracking stay consistent.',
|
||||
'请求处理路径': 'Request processing path',
|
||||
'接入请求': 'Receive request',
|
||||
'下游 Key、用户身份和协议类型先进入统一网关。': 'Downstream keys, user identity, and protocol type enter the unified gateway first.',
|
||||
'选择通道': 'Select channel',
|
||||
'结合路由优先级、账号状态、成本、延迟和冷却策略选择上游。': 'Choose an upstream using route priority, account state, cost, latency, and cooldown policy.',
|
||||
'执行生产': 'Execute production',
|
||||
'对话、生图、视频、工作流和数字人任务共享同一套执行链路。': 'Chat, image, video, workflow, and digital human tasks share one execution path.',
|
||||
'记录归档': 'Record and archive',
|
||||
'调用日志、费用、延迟和最终产出进入用户隔离的工作空间。': 'Call logs, cost, latency, and final outputs enter user-isolated workspaces.',
|
||||
'OpenAI 对话兼容入口，支持流式与非流式。': 'OpenAI-compatible chat endpoint with streaming and non-streaming support.',
|
||||
'Claude Messages API 兼容入口，支持 Anthropic 请求和事件。': 'Claude Messages API-compatible endpoint for Anthropic requests and events.',
|
||||
'Responses API 入口，适配支持该协议的上游。': 'Responses API endpoint for upstreams that support the protocol.',
|
||||
'图像生成入口，供生图助手与工作流节点调用。': 'Image generation endpoint for Picture Agent and workflow nodes.',
|
||||
'视频任务创建入口，可接火山方舟或 Comfy 视频模板。': 'Video task creation endpoint for Volcengine Ark or Comfy video templates.',
|
||||
'只暴露当前可路由、未冷却且账号有效的模型。': 'Expose only currently routable models with valid accounts and no cooldown.',
|
||||
'Comfy Cloud API 后端，适合官方订阅和云端执行。': 'Comfy Cloud API backend for official subscriptions and cloud execution.',
|
||||
'RunningHub API 后端，适合复用插件、模型和模板生态。': 'RunningHub API backend for plugin, model, and template ecosystems.',
|
||||
'连接自部署完整版 ComfyUI，由 BossAI 统一代理和嵌入。': 'Connect a self-hosted full ComfyUI instance through BossAI proxy and embedding.',
|
||||
'Rust API-native 执行器，直接调用后台模型路由。': 'Rust API-native executor that directly calls backend model routing.',
|
||||
'本地完整版 ComfyUI 模式，适合有 GPU 和完整模型目录的环境。': 'Local full ComfyUI mode for environments with a GPU and full model directory.',
|
||||
'技术底座': 'Technical foundation',
|
||||
'后端、前端和工作流资产都由同一个 Rust 服务统一托管。': 'Backend, frontend, and workflow assets are served by the same Rust service.',
|
||||
'数据与隐私': 'Data and privacy',
|
||||
'BossAI 完全自托管。账号、令牌、路由、日志、用户资产和工作台状态都保存在你的运行环境中，系统 Key 默认脱敏并受保护。': 'BossAI is fully self-hosted. Accounts, tokens, routes, logs, user assets, and workspace state stay in your runtime, with system keys masked and protected by default.',
|
||||
'站点文档': 'Site Docs',
|
||||
'任务状态已更新': 'Task status updated',
|
||||
'会话已过期，请重新登录': 'Session expired, please sign in again',
|
||||
@@ -323,7 +379,6 @@ const zhToEn: Record<string, string> = {
|
||||
'轻量 TypeScript ORM': 'Lightweight TypeScript ORM',
|
||||
'零配置嵌入式数据库': 'Zero-config embedded database',
|
||||
'项目链接': 'Project Links',
|
||||
'数据与隐私': 'Data & Privacy',
|
||||
'BoosAPI 完全自托管，所有数据（账号、令牌、路由、日志）均存储在本地 SQLite 数据库中，不会向任何第三方发送数据。代理请求仅在你的服务器与上游站点之间直连传输。': 'BoosAPI is fully self-hosted. All data (accounts, tokens, routes, logs) is stored in a local SQLite database and never sent to any third party. Proxy requests travel directly between your server and upstream sites.',
|
||||
|
||||
// User SaaS translations
|
||||
|
||||
+500
-118
@@ -10781,162 +10781,454 @@ textarea {
|
||||
|
||||
/* ===== About Page ===== */
|
||||
.about-page {
|
||||
max-width: 1180px;
|
||||
width: min(100%, 1240px);
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-header {
|
||||
margin-bottom: 16px;
|
||||
.about-hero,
|
||||
.about-capability-card,
|
||||
.about-section,
|
||||
.about-flow {
|
||||
border: 1px solid var(--console-line);
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
linear-gradient(180deg, color-mix(in srgb, var(--console-panel-solid) 96%, transparent), color-mix(in srgb, var(--console-panel-solid) 86%, transparent));
|
||||
box-shadow: var(--console-shadow-panel);
|
||||
}
|
||||
|
||||
.about-hero {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: 360px;
|
||||
padding: 34px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.74fr);
|
||||
gap: 28px;
|
||||
align-items: stretch;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.about-hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background:
|
||||
radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 34%),
|
||||
radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 30%),
|
||||
linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 42%);
|
||||
}
|
||||
|
||||
.about-hero-copy-block {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.about-brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.about-logo {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 14px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--console-line);
|
||||
background: var(--color-bg-card);
|
||||
box-shadow: 0 12px 24px rgba(32, 46, 73, 0.08);
|
||||
}
|
||||
|
||||
.about-brand-name {
|
||||
font-size: 18px;
|
||||
font-weight: 820;
|
||||
letter-spacing: 0;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-brand-meta {
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.about-hero h1 {
|
||||
max-width: 720px;
|
||||
margin: 0;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 52px;
|
||||
line-height: 1.02;
|
||||
letter-spacing: 0;
|
||||
font-weight: 860;
|
||||
}
|
||||
|
||||
.about-hero p {
|
||||
max-width: 680px;
|
||||
margin: 18px 0 0;
|
||||
font-size: 15px;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.about-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.about-chip {
|
||||
border: 1px solid var(--console-line);
|
||||
border-radius: 12px;
|
||||
padding: 7px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
background: color-mix(in srgb, var(--color-bg-card) 80%, transparent);
|
||||
}
|
||||
|
||||
.about-proof-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
max-width: 560px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.about-proof-row div {
|
||||
min-width: 0;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--console-line));
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in srgb, var(--color-bg-card) 76%, transparent);
|
||||
}
|
||||
|
||||
.about-proof-row strong,
|
||||
.about-proof-row span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.about-proof-row strong {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-proof-row span {
|
||||
margin-top: 5px;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.about-platform-card {
|
||||
position: relative;
|
||||
min-height: 300px;
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--console-line));
|
||||
background:
|
||||
linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)), color-mix(in srgb, var(--color-bg-card) 82%, transparent));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about-platform-card::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto 22px 16px auto;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
|
||||
border-radius: 50%;
|
||||
opacity: 0.28;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.about-version {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--color-border-light);
|
||||
border: 1px solid var(--console-line);
|
||||
border-radius: 999px;
|
||||
background: var(--color-bg-card);
|
||||
background: color-mix(in srgb, var(--color-bg-card) 78%, transparent);
|
||||
color: var(--color-text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.about-hero,
|
||||
.about-section,
|
||||
.about-privacy {
|
||||
border: 1px solid var(--color-border-light);
|
||||
.about-orbit {
|
||||
position: relative;
|
||||
height: 212px;
|
||||
margin-top: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-bg-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 12%, var(--console-line));
|
||||
background:
|
||||
radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 38%),
|
||||
linear-gradient(90deg, color-mix(in srgb, var(--console-line) 42%, transparent) 1px, transparent 1px),
|
||||
linear-gradient(0deg, color-mix(in srgb, var(--console-line) 42%, transparent) 1px, transparent 1px);
|
||||
background-size: 34px 34px;
|
||||
}
|
||||
|
||||
.about-hero {
|
||||
padding: 24px;
|
||||
margin-bottom: 14px;
|
||||
.about-orbit-core,
|
||||
.about-orbit-card {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--console-line);
|
||||
background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
|
||||
box-shadow: 0 14px 30px rgba(32, 46, 73, 0.08);
|
||||
}
|
||||
|
||||
.about-brand {
|
||||
.about-orbit-core {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 128px;
|
||||
height: 72px;
|
||||
gap: 8px;
|
||||
border-radius: 18px;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: 820;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-orbit-core img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.about-orbit-card {
|
||||
min-width: 116px;
|
||||
min-height: 34px;
|
||||
padding: 0 11px;
|
||||
border-radius: 999px;
|
||||
color: var(--color-text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.orbit-card-1 {
|
||||
left: 18px;
|
||||
top: 22px;
|
||||
}
|
||||
|
||||
.orbit-card-2 {
|
||||
right: 18px;
|
||||
top: 44px;
|
||||
}
|
||||
|
||||
.orbit-card-3 {
|
||||
left: 34px;
|
||||
bottom: 26px;
|
||||
}
|
||||
|
||||
.orbit-card-4 {
|
||||
right: 34px;
|
||||
bottom: 18px;
|
||||
}
|
||||
|
||||
.about-signal-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.about-signal-grid div {
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--console-line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in srgb, var(--color-bg-card) 80%, transparent);
|
||||
}
|
||||
|
||||
.about-signal-grid strong {
|
||||
display: block;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-signal-grid span {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.about-capability-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.about-capability-card {
|
||||
min-height: 184px;
|
||||
padding: 18px;
|
||||
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
|
||||
}
|
||||
|
||||
.about-capability-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: color-mix(in srgb, var(--color-primary) 22%, var(--console-line));
|
||||
box-shadow: var(--console-shadow-soft);
|
||||
}
|
||||
|
||||
.about-capability-topline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 16px;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.about-logo {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid var(--color-border-light);
|
||||
.about-capability-topline span,
|
||||
.about-capability-topline code {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.about-brand-name {
|
||||
font-size: 19px;
|
||||
.about-capability-topline code {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.about-capability-card h3 {
|
||||
margin: 0;
|
||||
font-size: 17px;
|
||||
font-weight: 780;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-brand-meta {
|
||||
.about-capability-card p {
|
||||
margin: 9px 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.65;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.about-hero-copy {
|
||||
margin: 0;
|
||||
max-width: 86ch;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.about-chip-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.about-chip {
|
||||
border: 1px solid var(--color-border-light);
|
||||
border-radius: 999px;
|
||||
padding: 5px 9px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
background: color-mix(in srgb, var(--color-bg) 72%, var(--color-bg-card));
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 20px;
|
||||
margin-bottom: 14px;
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.about-section-heading {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
gap: 24px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.about-section-heading h3,
|
||||
.about-privacy h3 {
|
||||
.about-section-heading h2,
|
||||
.about-privacy h2 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 720;
|
||||
font-size: 17px;
|
||||
font-weight: 780;
|
||||
letter-spacing: 0;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-section-heading p {
|
||||
max-width: 420px;
|
||||
margin: 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
line-height: 1.7;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.about-feature-grid {
|
||||
.about-ops-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
column-gap: 24px;
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.about-feature-row {
|
||||
display: flex;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
padding: 11px 0;
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.about-feature-mark {
|
||||
width: 34px;
|
||||
height: 26px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-border-light);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 760;
|
||||
color: var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card));
|
||||
flex-shrink: 0;
|
||||
.about-ops-item {
|
||||
min-height: 128px;
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--console-line);
|
||||
background: color-mix(in srgb, var(--color-bg) 56%, var(--color-bg-card));
|
||||
}
|
||||
|
||||
.about-feature-title,
|
||||
.about-tech-name {
|
||||
.about-ops-item span {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 680;
|
||||
font-weight: 760;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-feature-desc,
|
||||
.about-tech-desc {
|
||||
.about-ops-item p {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 3px;
|
||||
line-height: 1.58;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.about-flow {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about-flow::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 28px;
|
||||
right: 28px;
|
||||
top: 58px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 55%, transparent), color-mix(in srgb, var(--console-line) 80%, transparent));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.about-flow-step {
|
||||
position: relative;
|
||||
min-height: 156px;
|
||||
padding: 24px;
|
||||
border-right: 1px solid var(--console-line);
|
||||
}
|
||||
|
||||
.about-flow-step:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.about-flow-step span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--console-line));
|
||||
border-radius: 50%;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.about-flow-step strong {
|
||||
display: block;
|
||||
margin-top: 22px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-flow-step p {
|
||||
margin: 8px 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.about-two-column {
|
||||
@@ -10947,19 +11239,20 @@ textarea {
|
||||
|
||||
.about-definition-list {
|
||||
display: grid;
|
||||
border-top: 1px solid var(--console-line);
|
||||
}
|
||||
|
||||
.about-definition-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(112px, 160px) 1fr;
|
||||
gap: 12px;
|
||||
grid-template-columns: minmax(104px, 136px) 1fr;
|
||||
gap: 14px;
|
||||
align-items: start;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
padding: 13px 0;
|
||||
border-bottom: 1px solid var(--console-line);
|
||||
}
|
||||
|
||||
.about-endpoint-row {
|
||||
grid-template-columns: minmax(185px, 245px) 1fr;
|
||||
grid-template-columns: minmax(190px, 245px) 1fr;
|
||||
}
|
||||
|
||||
.about-definition-row code {
|
||||
@@ -10972,37 +11265,76 @@ textarea {
|
||||
.about-definition-row div {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.6;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.about-tech-grid {
|
||||
.about-bottom-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 10px;
|
||||
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.about-tech-item {
|
||||
padding: 12px 13px;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-border-light);
|
||||
background: color-mix(in srgb, var(--color-bg) 68%, var(--color-bg-card));
|
||||
.about-tech-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.about-privacy {
|
||||
padding: 20px;
|
||||
.about-tech-strip span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 0 11px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--console-line);
|
||||
background: color-mix(in srgb, var(--color-bg) 60%, var(--color-bg-card));
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.about-privacy p {
|
||||
margin: 8px 0 0;
|
||||
margin: 12px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
@media (max-width: 1180px) {
|
||||
.about-hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-capability-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.about-hero h1 {
|
||||
font-size: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.about-ops-grid,
|
||||
.about-bottom-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-two-column {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-flow {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.about-flow::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-flow-step:nth-child(2) {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -11033,14 +11365,54 @@ textarea {
|
||||
|
||||
.about-page {
|
||||
max-width: none;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.about-hero,
|
||||
.about-section,
|
||||
.about-privacy {
|
||||
.about-hero {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.about-hero h1 {
|
||||
font-size: 32px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.about-proof-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-platform-card {
|
||||
min-height: 280px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.about-signal-grid,
|
||||
.about-capability-grid,
|
||||
.about-ops-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-section,
|
||||
.about-capability-card {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.about-flow {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-flow-step,
|
||||
.about-flow-step:nth-child(2) {
|
||||
min-height: auto;
|
||||
padding: 18px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--console-line);
|
||||
}
|
||||
|
||||
.about-flow-step:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.about-section-heading {
|
||||
display: block;
|
||||
}
|
||||
@@ -11050,16 +11422,26 @@ textarea {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.about-feature-grid,
|
||||
.about-tech-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.about-definition-row,
|
||||
.about-endpoint-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.about-orbit-card {
|
||||
min-width: 104px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.orbit-card-1,
|
||||
.orbit-card-3 {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.orbit-card-2,
|
||||
.orbit-card-4 {
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== BossAI Console 2026 Polish ===== */
|
||||
|
||||
+264
-107
@@ -1,170 +1,327 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { gsap } from 'gsap';
|
||||
import { tr } from '../i18n.js';
|
||||
|
||||
const VERSION = '1.3.0';
|
||||
|
||||
const FEATURES = [
|
||||
{ icon: 'GW', title: '统一模型网关', desc: '一个入口聚合 OpenAI / Claude / Gemini / 方舟等兼容上游，统一鉴权、计费与日志。' },
|
||||
{ icon: 'RT', title: '模型路由与容灾', desc: '按模型、账号、站点和通道优先级调度，失败后自动冷却并切换到可用通道。' },
|
||||
{ icon: 'AC', title: '站点与账号管理', desc: '集中维护站点、账号、API Key、OAuth、下游 Key 和普通用户可用模型。' },
|
||||
{ icon: 'MD', title: '模型广场', desc: '聚合各站点模型可用性、账号覆盖、绑定令牌与路由状态，便于快速修路由。' },
|
||||
{ icon: 'WF', title: '工作流画布', desc: '内嵌 ComfyUI 前端，支持 Comfy Cloud、RunningHub、外部 ComfyUI 与 BoosAPI API-native 执行器。' },
|
||||
{ icon: 'AG', title: '视频助手', desc: '面向工作流创作的对话助手，支持附件、多会话、用户 API Key 和模型路由选择。' },
|
||||
{ icon: 'PI', title: '生图助手', desc: '提供提示词模板、比例尺寸控制和图像模型调用，管理员与普通用户均可使用。' },
|
||||
{ icon: 'VD', title: '视频任务模板', desc: '支持火山方舟 Step1 创建视频任务、Step2 查询任务结果，并可复用 BoosAPI 模型路由。' },
|
||||
{ icon: 'CK', title: '签到与余额刷新', desc: '按站点/账号执行签到、余额刷新、健康检查和连接状态追踪。' },
|
||||
{ icon: 'NT', title: '通知与审计', desc: 'Webhook / Bark / Server酱 / Telegram / SMTP 告警，配合代理日志和程序事件排障。' },
|
||||
const HERO_TAGS = [
|
||||
'Unified API Gateway',
|
||||
'Intelligent Routing',
|
||||
'Cloud Workflow',
|
||||
'Workspace Archive',
|
||||
'Multimodal Agents',
|
||||
];
|
||||
|
||||
const TECH_STACK = [
|
||||
{ name: 'Rust', desc: '后端核心服务，提供代理、路由、认证、任务和静态资源服务。' },
|
||||
{ name: 'Axum / Tokio', desc: '异步 HTTP 服务、SSE、后台任务和代理执行。' },
|
||||
{ name: 'SQLx', desc: '类型化数据库访问与迁移管理。' },
|
||||
{ name: 'SQLite', desc: '默认嵌入式数据库，适合单机部署和低运维成本场景。' },
|
||||
{ name: 'React / Vite', desc: '管理后台、普通用户面板、模型测试器和 Agent 界面。' },
|
||||
{ name: 'Workflow UI', desc: '内嵌官方 ComfyUI 前端资产，按后端模式代理 Cloud、RunningHub 或外部 ComfyUI。' },
|
||||
{ name: 'Multi Backend', desc: '支持 cloud / runninghub / external / boosapi / docker 五种工作流后端配置。' },
|
||||
const HERO_SIGNALS = [
|
||||
{ value: 'OpenAI', label: '兼容协议' },
|
||||
{ value: 'Claude', label: '消息入口' },
|
||||
{ value: 'Comfy', label: '工作流前端' },
|
||||
];
|
||||
|
||||
const CAPABILITIES = [
|
||||
{
|
||||
label: 'Gateway',
|
||||
title: '统一模型入口',
|
||||
desc: 'OpenAI、Claude、Responses、图像和视频接口集中到一套鉴权、计费和日志体系。',
|
||||
stat: '/v1/*',
|
||||
},
|
||||
{
|
||||
label: 'Routing',
|
||||
title: '模型路由中枢',
|
||||
desc: '按站点、账号、成本、健康度和冷却状态选择通道，失败后自动避让。',
|
||||
stat: 'P0 / P1',
|
||||
},
|
||||
{
|
||||
label: 'Workflow',
|
||||
title: '工作流执行面',
|
||||
desc: '嵌入官方 ComfyUI 前端，同时接入 Cloud、RunningHub、外部 ComfyUI 和 BoosAPI 执行器。',
|
||||
stat: '5 modes',
|
||||
},
|
||||
{
|
||||
label: 'Agents',
|
||||
title: '多模态应用层',
|
||||
desc: '生图助手、视频助手、数字人和短视频工厂复用同一套模型路由与用户 Key。',
|
||||
stat: '4 apps',
|
||||
},
|
||||
];
|
||||
|
||||
const OPERATIONS = [
|
||||
{ title: '站点与账号', desc: '维护上游站点、账号、OAuth、API Key、余额和连接状态。' },
|
||||
{ title: '模型广场', desc: '聚合模型可用性、价格、账号覆盖、绑定令牌和路由健康度。' },
|
||||
{ title: '用户体系', desc: '普通用户拥有独立 API Key、使用日志、工作空间和可见模型范围。' },
|
||||
{ title: '审计告警', desc: '使用日志、程序日志、通知渠道和运行事件集中留痕。' },
|
||||
{ title: '工作空间', desc: '只归档最终产出，按用户隔离图片、视频、音频和工作流资产。' },
|
||||
{ title: '任务编排', desc: '后台生成、取消、查询、归档和失败原因追踪保持一致体验。' },
|
||||
];
|
||||
|
||||
const ENDPOINTS = [
|
||||
{ path: '/v1/chat/completions', desc: 'OpenAI 兼容对话代理，支持非流式与流式。' },
|
||||
{ path: '/v1/messages', desc: 'Claude Messages API 兼容入口，支持 Anthropic 请求、响应和流式事件。' },
|
||||
{ path: '/v1/responses', desc: 'Responses API 兼容代理，可接入支持该协议的上游。' },
|
||||
{ path: '/v1/images/generations', desc: '图像生成代理，供生图助手和工作流图像节点使用。' },
|
||||
{ path: '/v1/videos', desc: '视频生成任务入口，已适配火山方舟任务创建。' },
|
||||
{ path: '/v1/videos/{id}', desc: '视频任务查询入口，已适配火山方舟任务轮询。' },
|
||||
{ path: '/v1/models', desc: '仅暴露当前可路由、未冷却、账号有效的模型列表。' },
|
||||
{ path: '/v1/chat/completions', desc: 'OpenAI 对话兼容入口，支持流式与非流式。' },
|
||||
{ path: '/v1/messages', desc: 'Claude Messages API 兼容入口，支持 Anthropic 请求和事件。' },
|
||||
{ path: '/v1/responses', desc: 'Responses API 入口，适配支持该协议的上游。' },
|
||||
{ path: '/v1/images/generations', desc: '图像生成入口，供生图助手与工作流节点调用。' },
|
||||
{ path: '/v1/videos', desc: '视频任务创建入口，可接火山方舟或 Comfy 视频模板。' },
|
||||
{ path: '/v1/models', desc: '只暴露当前可路由、未冷却且账号有效的模型。' },
|
||||
];
|
||||
|
||||
const WORKFLOW_BACKENDS = [
|
||||
{ name: 'cloud', desc: 'Comfy Cloud API 后端，适合使用官方订阅能力和云端执行。' },
|
||||
{ name: 'runninghub', desc: 'RunningHub API 后端，适合复用 RunningHub 插件、模型与工作流生态。' },
|
||||
{ name: 'external', desc: '连接你自己部署的完整版 ComfyUI，BoosAPI 负责统一代理与嵌入。' },
|
||||
{ name: 'boosapi', desc: '使用 Rust API-native 工作流执行器，直接调用后台模型路由。' },
|
||||
{ name: 'docker', desc: '本地完整版 ComfyUI 模式，适合有本地 GPU 和完整模型目录的环境。' },
|
||||
{ name: 'cloud', desc: 'Comfy Cloud API 后端，适合官方订阅和云端执行。' },
|
||||
{ name: 'runninghub', desc: 'RunningHub API 后端，适合复用插件、模型和模板生态。' },
|
||||
{ name: 'external', desc: '连接自部署完整版 ComfyUI，由 BossAI 统一代理和嵌入。' },
|
||||
{ name: 'boosapi', desc: 'Rust API-native 执行器，直接调用后台模型路由。' },
|
||||
{ name: 'docker', desc: '本地完整版 ComfyUI 模式，适合有 GPU 和完整模型目录的环境。' },
|
||||
];
|
||||
|
||||
const TECH_STACK = [
|
||||
'Rust',
|
||||
'Axum',
|
||||
'Tokio',
|
||||
'SQLx',
|
||||
'React',
|
||||
'Vite',
|
||||
'GSAP',
|
||||
'ComfyUI Frontend',
|
||||
];
|
||||
|
||||
export default function About() {
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const root = rootRef.current;
|
||||
if (!root) return undefined;
|
||||
|
||||
const mm = gsap.matchMedia();
|
||||
mm.add(
|
||||
{
|
||||
reduceMotion: '(prefers-reduced-motion: reduce)',
|
||||
isDesktop: '(min-width: 900px)',
|
||||
},
|
||||
(context) => {
|
||||
const conditions = context.conditions || {};
|
||||
const motionItems = Array.from(root.querySelectorAll<HTMLElement>('.about-motion-item'));
|
||||
const orbitItems = Array.from(root.querySelectorAll<HTMLElement>('.about-orbit-card'));
|
||||
const orbitCore = root.querySelector<HTMLElement>('.about-orbit-core');
|
||||
|
||||
if (conditions.reduceMotion) {
|
||||
gsap.set([...motionItems, ...orbitItems, orbitCore].filter(Boolean), {
|
||||
autoAlpha: 1,
|
||||
clearProps: 'transform,opacity,visibility',
|
||||
});
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const enterTween = gsap.fromTo(
|
||||
motionItems,
|
||||
{ autoAlpha: 0, y: conditions.isDesktop ? 18 : 10, scale: 0.99 },
|
||||
{
|
||||
autoAlpha: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
duration: 0.54,
|
||||
ease: 'power2.out',
|
||||
stagger: 0.045,
|
||||
clearProps: 'transform,opacity,visibility',
|
||||
},
|
||||
);
|
||||
|
||||
const orbitTween = orbitItems.length
|
||||
? gsap.fromTo(
|
||||
orbitItems,
|
||||
{ autoAlpha: 0, y: 12 },
|
||||
{
|
||||
autoAlpha: 1,
|
||||
y: 0,
|
||||
duration: 0.48,
|
||||
ease: 'power2.out',
|
||||
stagger: { each: 0.06, from: 'center' },
|
||||
delay: 0.12,
|
||||
clearProps: 'transform,opacity,visibility',
|
||||
},
|
||||
)
|
||||
: null;
|
||||
|
||||
const floatTween = orbitCore
|
||||
? gsap.to(orbitCore, {
|
||||
y: -4,
|
||||
duration: 2.4,
|
||||
ease: 'sine.inOut',
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
})
|
||||
: null;
|
||||
|
||||
return () => {
|
||||
enterTween.kill();
|
||||
orbitTween?.kill();
|
||||
floatTween?.kill();
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
return () => mm.revert();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="about-page animate-fade-in">
|
||||
<div className="page-header about-header">
|
||||
<div>
|
||||
<h2 className="page-title">{tr('关于 BoosAPI')}</h2>
|
||||
<p className="page-subtitle">{tr('统一网关、模型路由、工作流与多模态助手的运行概览。')}</p>
|
||||
</div>
|
||||
<span className="about-version">v{VERSION}</span>
|
||||
</div>
|
||||
|
||||
<section className="about-hero animate-slide-up stagger-1">
|
||||
<div ref={rootRef} className="about-page">
|
||||
<section className="about-hero about-motion-item">
|
||||
<div className="about-hero-copy-block">
|
||||
<div className="about-brand">
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="BoosAPI"
|
||||
className="about-logo"
|
||||
/>
|
||||
<img src="/logo.png" alt="BossAI" className="about-logo" />
|
||||
<div>
|
||||
<div className="about-brand-name">BoosAPI</div>
|
||||
<div className="about-brand-meta">{tr('自托管 AI 模型网关与工作台')}</div>
|
||||
<div className="about-brand-name">BossAI</div>
|
||||
<div className="about-brand-meta">{tr('BoosAPI 网关内核驱动')}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="about-hero-copy">
|
||||
{tr('BoosAPI 是一个自托管 AI 模型网关与工作台。它把多站点账号、下游 Key、模型路由、图像生成、视频任务、ComfyUI 风格工作流和普通用户面板收束到同一个 Rust 服务中，让前端、Agent、Workflow Studio 和外部 API 都能使用后台已经配置好的模型。')}
|
||||
|
||||
<h1>{tr('一个平台，接住模型、工作流和多模态生产。')}</h1>
|
||||
<p>
|
||||
{tr('BossAI 把多站点账号、模型路由、兼容 API、ComfyUI 工作流、创作助手和普通用户工作空间收进同一个自托管控制台。')}
|
||||
</p>
|
||||
|
||||
<div className="about-proof-row" aria-label={tr('核心兼容能力')}>
|
||||
{HERO_SIGNALS.map((item) => (
|
||||
<div key={item.value}>
|
||||
<strong>{item.value}</strong>
|
||||
<span>{tr(item.label)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="about-chip-row">
|
||||
{['Rust Backend', 'OpenAI Compatible', 'Claude Messages', 'ComfyUI Frontend', 'Comfy Cloud', 'RunningHub'].map((tag) => (
|
||||
<span key={tag} className="about-chip">
|
||||
{tag}
|
||||
</span>
|
||||
{HERO_TAGS.map((tag) => (
|
||||
<span key={tag} className="about-chip">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="about-section animate-slide-up stagger-2">
|
||||
<div className="about-section-heading">
|
||||
<h3>{tr('核心特色')}</h3>
|
||||
<p>{tr('围绕网关、模型、工作流和运维审计组织能力。')}</p>
|
||||
</div>
|
||||
<div className="about-feature-grid">
|
||||
{FEATURES.map((f) => (
|
||||
<div key={f.title} className="about-feature-row">
|
||||
<span className="about-feature-mark">
|
||||
{f.icon}
|
||||
</span>
|
||||
|
||||
<div className="about-platform-card" aria-label={tr('平台运行结构')}>
|
||||
<div className="about-version">{tr('当前版本')} v{VERSION}</div>
|
||||
<div className="about-orbit">
|
||||
<div className="about-orbit-core">
|
||||
<img src="/logo.png" alt="" />
|
||||
<span>BossAI</span>
|
||||
</div>
|
||||
<div className="about-orbit-card orbit-card-1">API Gateway</div>
|
||||
<div className="about-orbit-card orbit-card-2">Route Engine</div>
|
||||
<div className="about-orbit-card orbit-card-3">Workflow UI</div>
|
||||
<div className="about-orbit-card orbit-card-4">Agent Apps</div>
|
||||
</div>
|
||||
<div className="about-signal-grid" aria-label={tr('平台能力概览')}>
|
||||
<div>
|
||||
<div className="about-feature-title">{tr(f.title)}</div>
|
||||
<div className="about-feature-desc">
|
||||
{tr(f.desc)}
|
||||
<strong>7</strong>
|
||||
<span>{tr('兼容入口')}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>5</strong>
|
||||
<span>{tr('工作流后端')}</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>1</strong>
|
||||
<span>{tr('自托管服务')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="about-capability-grid about-motion-item">
|
||||
{CAPABILITIES.map((item) => (
|
||||
<article key={item.title} className="about-capability-card">
|
||||
<div className="about-capability-topline">
|
||||
<span>{item.label}</span>
|
||||
<code>{item.stat}</code>
|
||||
</div>
|
||||
<h3>{tr(item.title)}</h3>
|
||||
<p>{tr(item.desc)}</p>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section className="about-section about-motion-item">
|
||||
<div className="about-section-heading">
|
||||
<h2>{tr('运行能力')}</h2>
|
||||
<p>{tr('围绕接入、路由、创作和运维，把 AI 应用需要的底座放在一个控制台里。')}</p>
|
||||
</div>
|
||||
<div className="about-ops-grid">
|
||||
{OPERATIONS.map((item) => (
|
||||
<div key={item.title} className="about-ops-item">
|
||||
<span>{tr(item.title)}</span>
|
||||
<p>{tr(item.desc)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="about-two-column animate-slide-up stagger-3">
|
||||
<section className="about-flow about-motion-item" aria-label={tr('请求处理路径')}>
|
||||
<div className="about-flow-step">
|
||||
<span>01</span>
|
||||
<strong>{tr('接入请求')}</strong>
|
||||
<p>{tr('下游 Key、用户身份和协议类型先进入统一网关。')}</p>
|
||||
</div>
|
||||
<div className="about-flow-step">
|
||||
<span>02</span>
|
||||
<strong>{tr('选择通道')}</strong>
|
||||
<p>{tr('结合路由优先级、账号状态、成本、延迟和冷却策略选择上游。')}</p>
|
||||
</div>
|
||||
<div className="about-flow-step">
|
||||
<span>03</span>
|
||||
<strong>{tr('执行生产')}</strong>
|
||||
<p>{tr('对话、生图、视频、工作流和数字人任务共享同一套执行链路。')}</p>
|
||||
</div>
|
||||
<div className="about-flow-step">
|
||||
<span>04</span>
|
||||
<strong>{tr('记录归档')}</strong>
|
||||
<p>{tr('调用日志、费用、延迟和最终产出进入用户隔离的工作空间。')}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="about-two-column about-motion-item">
|
||||
<section className="about-section">
|
||||
<div className="about-section-heading">
|
||||
<h3>{tr('工作流后端模式')}</h3>
|
||||
<h2>{tr('工作流后端')}</h2>
|
||||
</div>
|
||||
<div className="about-definition-list">
|
||||
{WORKFLOW_BACKENDS.map((backend) => (
|
||||
<div
|
||||
key={backend.name}
|
||||
className="about-definition-row"
|
||||
>
|
||||
<code>
|
||||
{backend.name}
|
||||
</code>
|
||||
<div>
|
||||
{tr(backend.desc)}
|
||||
</div>
|
||||
<div key={backend.name} className="about-definition-row">
|
||||
<code>{backend.name}</code>
|
||||
<div>{tr(backend.desc)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="about-section">
|
||||
<section className="about-section about-api-section">
|
||||
<div className="about-section-heading">
|
||||
<h3>{tr('兼容入口')}</h3>
|
||||
<h2>{tr('兼容入口')}</h2>
|
||||
</div>
|
||||
<div className="about-definition-list">
|
||||
{ENDPOINTS.map((endpoint) => (
|
||||
<div
|
||||
key={endpoint.path}
|
||||
className="about-definition-row about-endpoint-row"
|
||||
>
|
||||
<code>
|
||||
{endpoint.path}
|
||||
</code>
|
||||
<div>
|
||||
{tr(endpoint.desc)}
|
||||
</div>
|
||||
<div key={endpoint.path} className="about-definition-row about-endpoint-row">
|
||||
<code>{endpoint.path}</code>
|
||||
<div>{tr(endpoint.desc)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="about-section animate-slide-up stagger-4">
|
||||
<section className="about-bottom-grid about-motion-item">
|
||||
<div className="about-section about-tech-panel">
|
||||
<div className="about-section-heading">
|
||||
<h3>{tr('技术栈')}</h3>
|
||||
</div>
|
||||
<div className="about-tech-grid">
|
||||
{TECH_STACK.map((t) => (
|
||||
<div key={t.name} className="about-tech-item">
|
||||
<div className="about-tech-name">{t.name}</div>
|
||||
<div className="about-tech-desc">
|
||||
{tr(t.desc)}
|
||||
</div>
|
||||
<h2>{tr('技术底座')}</h2>
|
||||
<p>{tr('后端、前端和工作流资产都由同一个 Rust 服务统一托管。')}</p>
|
||||
</div>
|
||||
<div className="about-tech-strip">
|
||||
{TECH_STACK.map((item) => (
|
||||
<span key={item}>{item}</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section className="about-privacy animate-slide-up stagger-5">
|
||||
<h3>{tr('数据与隐私')}</h3>
|
||||
<div className="about-section about-privacy">
|
||||
<h2>{tr('数据与隐私')}</h2>
|
||||
<p>
|
||||
{tr('BoosAPI 完全自托管，账号、令牌、路由、日志、普通用户和工作台状态均保存在你的运行环境中。代理请求只在你的服务器、可选外部 ComfyUI 与已配置上游之间流转；内置系统 Key 会被保护，后台列表中只展示脱敏值。')}
|
||||
{tr('BossAI 完全自托管。账号、令牌、路由、日志、用户资产和工作台状态都保存在你的运行环境中，系统 Key 默认脱敏并受保护。')}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user