Beaver/beaver_project
6
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 将项目从nano重命名为beaver并更新相关配置

Browse Source 
- 将所有环境变量前缀从NANO_改为BEAVER_
- 更新README.md文档内容，包括项目介绍、组件说明和快速开始指南
- 修改.gitignore文件，添加auth-portal运行时路径排除规则
- 更新app-instance镜像标签从nano/app-instance改为beaver/app-instance
- 增强技能安全检查器，支持工具前缀白名单功能
- 添加技能草稿重新检查安全性API端点
- 扩展证据选择器，收集工具调用名称用于技能学习
- 改进技能合成器，基于实际调用的工具生成工具提示
- 优化路由超时处理机制，增加重试逻辑
- 更新后端架构文档，添加可视化入口和基础概念说明
- 实现在WebSocket消息中传递工具迭代次数信息
This commit is contained in:
steven_li
2026-05-20 18:01:06 +08:00
parent 3b0af173cc
commit 9d6cde2d23
63 changed files with 4894 additions and 1596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
auth-portal/src/.env.example
View File

@ -1,5 +1,5 @@
# auth-portal server-side runtime config
AUTHZ_API_BASE_URL=http://nano-authz-service:19090
DEPLOY_API_BASE_URL=http://nano-deploy-control:8090
AUTHZ_API_BASE_URL=http://beaver-authz-service:19090
DEPLOY_API_BASE_URL=http://beaver-deploy-control:8090
DEPLOY_API_TOKEN=change-me

2
auth-portal/src/README.md
View File

@ -12,7 +12,7 @@ Registration now goes through AuthZ, while login/runtime lookup still uses deplo
See also:
- [`.env.example`](/home/ivan/xuan/nano_project/auth-portal/src/.env.example)
- [`.env.example`](/home/ivan/xuan/beaver_project/auth-portal/src/.env.example)
```bash
AUTHZ_API_BASE_URL=http://127.0.0.1:19090

120
auth-portal/src/app/api/runtime/provider-onboarding/route.ts Normal file
View File

@ -0,0 +1,120 @@
import { NextRequest, NextResponse } from 'next/server';
import type { TokenResponse } from '@/types/auth';
import { normalizePortalLocale, pickPortalText } from '@/lib/i18n/core';
import { HttpError, callDeployControl, callInstanceApi, normalizeTokenResponse } from '@/lib/runtime-control';
const PROVIDER_ONBOARDING_TIMEOUT_MS = 120000;
const KNOWN_PROVIDERS = new Set([
'anthropic',
'openai',
'openrouter',
'deepseek',
'groq',
'zhipu',
'dashscope',
'vllm',
'gemini',
'moonshot',
'minimax',
'aihubmix',
'siliconflow',
'volcengine',
]);
const API_KEY_OPTIONAL_PROVIDERS = new Set(['vllm']);
function errorStatus(error: unknown): number {
if (error instanceof HttpError) {
return error.status;
}
return 500;
}
function errorDetail(error: unknown): string {
if (error instanceof HttpError) {
return error.message;
}
return error instanceof Error ? error.message : 'provider onboarding failed';
}
export async function POST(request: NextRequest) {
const locale = normalizePortalLocale(
request.cookies.get('beaver_locale')?.value ||
request.headers.get('accept-language')
);
try {
const body = (await request.json()) as {
username?: string;
password?: string;
provider?: string;
model?: string;
api_key?: string;
api_base?: string;
};
const username = body.username?.trim() || '';
const password = body.password || '';
const provider = body.provider?.trim() || '';
const model = body.model?.trim() || '';
const apiKey = body.api_key?.trim() || '';
const apiBase = body.api_base?.trim() || '';
if (!username || !password) {
return NextResponse.json({
detail: pickPortalText(locale, '用户名和密码不能为空', 'Username and password are required'),
}, { status: 400 });
}
if (!KNOWN_PROVIDERS.has(provider)) {
return NextResponse.json({
detail: pickPortalText(locale, '请选择有效的模型提供商', 'Choose a valid model provider'),
}, { status: 400 });
}
if (!model) {
return NextResponse.json({
detail: pickPortalText(locale, '模型名称不能为空', 'Model name is required'),
}, { status: 400 });
}
if (!API_KEY_OPTIONAL_PROVIDERS.has(provider) && !apiKey) {
return NextResponse.json({
detail: pickPortalText(locale, 'API Key 不能为空', 'API key is required'),
}, { status: 400 });
}
if (API_KEY_OPTIONAL_PROVIDERS.has(provider) && !apiKey && !apiBase) {
return NextResponse.json({
detail: pickPortalText(locale, '本地模型至少需要 API Base', 'Local models require at least an API base URL'),
}, { status: 400 });
}
const initialRouting = await callDeployControl<{
api_base_url?: string;
frontend_base_url?: string;
public_url?: string;
}>('/api/instances/resolve', { username });
await callInstanceApi<TokenResponse>(initialRouting.api_base_url || '', '/api/auth/login', {
username,
password,
});
const configuredRouting = await callDeployControl<{
api_base_url?: string;
frontend_base_url?: string;
public_url?: string;
}>('/api/instances/configure-provider', {
username,
provider,
model,
api_key: apiKey,
api_base: apiBase,
}, PROVIDER_ONBOARDING_TIMEOUT_MS);
const response = await callInstanceApi<TokenResponse>(configuredRouting.api_base_url || '', '/api/auth/login', {
username,
password,
});
return NextResponse.json(normalizeTokenResponse(response, configuredRouting));
} catch (error) {
return NextResponse.json({ detail: errorDetail(error) }, { status: errorStatus(error) });
}
}

643
auth-portal/src/app/globals.css
View File

@ -1,16 +1,26 @@
:root {
--bg: #f4efe6;
--bg-strong: #e6d8bf;
--panel: rgba(23, 26, 31, 0.88);
--panel-border: rgba(255, 255, 255, 0.1);
--text: #f7f1e7;
--muted: rgba(247, 241, 231, 0.72);
--accent: #ff8d3a;
--accent-strong: #ff6b00;
--danger: #ff8787;
--input: rgba(255, 255, 255, 0.08);
--input-focus: rgba(255, 141, 58, 0.28);
--shadow: 0 40px 90px rgba(26, 24, 21, 0.28);
--background: #f5f3f1;
--foreground: #0b0b0b;
--primary: #1d1715;
--secondary: #e5e2df;
--muted: #ddd9d6;
--accent: #cac5c0;
--zinc-50: #f7f5f4;
--zinc-100: #ece8e5;
--zinc-200: #d8d2ce;
--zinc-300: #b8aea8;
--zinc-400: #8b7e77;
--zinc-500: #6a5e58;
--zinc-600: #4f4642;
--zinc-700: #342e2b;
--sage-100: #e3e8e2;
--sage-500: #869683;
--slate-100: #e4e7eb;
--danger: #a8433f;
--shadow-soft:
0 1px 2px rgba(0, 0, 0, 0.04),
0 6px 24px rgba(0, 0, 0, 0.03);
--shadow-floating: 0 12px 40px rgba(0, 0, 0, 0.06);
}
* {
@ -24,12 +34,13 @@ body {
}
body {
font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
color: var(--text);
color: var(--foreground);
background:
radial-gradient(circle at top left, rgba(255, 141, 58, 0.28), transparent 28%),
radial-gradient(circle at right center, rgba(19, 104, 93, 0.18), transparent 24%),
linear-gradient(135deg, var(--bg) 0%, #d6c09b 45%, var(--bg-strong) 100%);
linear-gradient(90deg, rgba(255, 255, 255, 0.42) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.42) 1px, transparent 1px),
var(--background);
background-size: 44px 44px;
font-family: "Public Sans", Inter, "Avenir Next", "Segoe UI", sans-serif;
}
a {
@ -38,145 +49,366 @@ a {
}
button,
input {
input,
select {
font: inherit;
}
.portal-page {
position: relative;
min-height: 100vh;
display: grid;
place-items: center;
padding: 32px 18px;
padding: 32px;
}
.portal-page:has(.auth-page) {
padding: 0;
}
.auth-page {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: flex-end;
padding: clamp(24px, 5vh, 56px) clamp(24px, 8vw, 128px);
background:
linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.58) 100%),
url("/login-background.png"),
radial-gradient(circle at 24% 50%, rgba(255, 255, 255, 0.88), rgba(245, 243, 241, 0.52) 54%, rgba(245, 243, 241, 0.9) 100%);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.auth-page .portal-panel {
width: clamp(360px, 34vw, 560px);
padding: 0;
background: transparent;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.field-icon {
position: absolute;
left: 20px;
top: 50%;
z-index: 1;
width: 24px;
height: 24px;
transform: translateY(-50%);
pointer-events: none;
}
.field-icon,
.ghost-icon-button svg,
.button-arrow {
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.9;
}
.ghost-icon-button {
position: absolute;
right: 18px;
top: 50%;
z-index: 2;
width: 30px;
height: 30px;
padding: 0;
border: 0;
color: #a29d99;
background: transparent;
transform: translateY(-50%);
cursor: pointer;
}
.ghost-icon-button:hover {
color: var(--primary);
}
.login-card .error-text {
min-height: 20px;
margin-top: -4px;
font-size: 13px;
}
.login-card .primary-button {
min-height: 58px;
margin-top: 4px;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
#1d1d1d;
box-shadow: 0 8px 18px rgba(29, 23, 21, 0.16);
}
.login-card .primary-button:hover {
background: #111;
}
.button-arrow {
width: 26px;
height: 26px;
vertical-align: middle;
}
.login-divider {
position: relative;
margin: 34px 0 28px;
color: #8f8984;
font-size: 16px;
text-align: center;
}
.login-divider::before,
.login-divider::after {
content: "";
position: absolute;
top: 50%;
width: calc(50% - 28px);
height: 1px;
background: rgba(202, 197, 192, 0.72);
}
.login-divider::before {
left: 0;
}
.login-divider::after {
right: 0;
}
.login-footer {
margin-top: 0;
display: grid;
grid-template-columns: auto auto;
align-items: center;
gap: 12px;
color: #9a9692;
font-size: 15px;
}
.login-footer a {
justify-self: start;
}
.portal-toolbar {
position: absolute;
top: 20px;
right: 24px;
z-index: 10;
}
.language-switcher {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--zinc-200);
border-radius: 999px;
background: rgba(247, 245, 244, 0.82);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(10px);
}
.language-switcher span {
margin-left: 8px;
color: var(--zinc-500);
font-size: 11px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
.language-switcher button {
min-width: 34px;
height: 28px;
border: 0;
border-radius: 999px;
color: var(--zinc-600);
background: transparent;
cursor: pointer;
font-size: 12px;
font-weight: 700;
transition: background 140ms ease, color 140ms ease;
}
.language-switcher button:hover,
.language-switcher button.is-active {
color: var(--zinc-50);
background: var(--primary);
}
.portal-shell {
width: min(980px, 100%);
width: min(1080px, 100%);
display: grid;
grid-template-columns: 1.05fr 0.95fr;
grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
overflow: hidden;
border-radius: 28px;
box-shadow: var(--shadow);
background: rgba(255, 250, 241, 0.45);
backdrop-filter: blur(12px);
border: 1px solid rgba(184, 174, 168, 0.42);
border-radius: 24px;
background: rgba(247, 245, 244, 0.72);
box-shadow: var(--shadow-floating);
backdrop-filter: blur(14px);
}
.portal-brand {
position: relative;
min-height: 620px;
padding: 48px 42px;
color: #26180d;
display: flex;
flex-direction: column;
justify-content: center;
padding: 56px;
color: var(--foreground);
background:
linear-gradient(160deg, rgba(255, 240, 217, 0.82), rgba(255, 220, 174, 0.64)),
linear-gradient(135deg, #ffd7a3, #f3b15f);
linear-gradient(135deg, rgba(227, 232, 226, 0.72), transparent 48%),
linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(229, 226, 223, 0.58)),
var(--zinc-100);
}
.portal-brand::after {
content: "";
position: absolute;
inset: 22px;
border-radius: 22px;
border: 1px solid rgba(38, 24, 13, 0.08);
inset: 24px;
border: 1px solid rgba(184, 174, 168, 0.36);
border-radius: 18px;
pointer-events: none;
}
.portal-logo-lockup {
width: 104px;
height: 104px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 112px;
height: 112px;
padding: 10px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(38, 24, 13, 0.1);
box-shadow:
0 18px 36px rgba(38, 24, 13, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.58);
padding: 12px;
border: 1px solid var(--zinc-200);
border-radius: 24px;
background: rgba(247, 245, 244, 0.78);
box-shadow: var(--shadow-soft);
}
.portal-logo-image {
width: 100%;
height: auto;
border-radius: 16px;
}
.portal-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
margin-top: 34px;
padding: 8px 12px;
border: 1px solid var(--zinc-200);
border-radius: 999px;
background: rgba(38, 24, 13, 0.08);
color: var(--zinc-600);
background: rgba(255, 255, 255, 0.46);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
}
.portal-title {
margin: 26px 0 14px;
font-size: clamp(36px, 5vw, 60px);
line-height: 0.95;
letter-spacing: -0.06em;
max-width: 520px;
margin: 22px 0 16px;
color: var(--primary);
font-family: "Lora", Georgia, serif;
font-size: clamp(42px, 6vw, 68px);
font-weight: 600;
line-height: 1.04;
}
.portal-copy {
max-width: 460px;
font-size: 16px;
line-height: 1.65;
color: rgba(38, 24, 13, 0.78);
max-width: 500px;
margin: 0;
color: var(--zinc-600);
font-size: 17px;
line-height: 1.7;
}
.portal-notes {
width: min(100%, 500px);
margin-top: 34px;
display: grid;
gap: 14px;
gap: 12px;
}
.portal-note {
padding: 16px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(38, 24, 13, 0.08);
border: 1px solid rgba(184, 174, 168, 0.42);
border-radius: 16px;
color: var(--zinc-600);
background: rgba(255, 255, 255, 0.48);
box-shadow: var(--shadow-soft);
font-size: 14px;
line-height: 1.55;
}
.portal-note strong {
display: block;
margin-bottom: 6px;
color: var(--primary);
font-size: 14px;
}
.portal-note code {
padding: 2px 6px;
border-radius: 6px;
background: var(--zinc-100);
color: var(--zinc-700);
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 13px;
}
.portal-panel {
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
padding: 48px;
background:
linear-gradient(180deg, rgba(23, 26, 31, 0.96), rgba(12, 14, 17, 0.94));
linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(236, 232, 229, 0.66)),
var(--zinc-50);
}
.auth-card {
width: min(440px, 100%);
width: min(456px, 100%);
padding: 34px;
border-radius: 24px;
background: var(--panel);
border: 1px solid var(--panel-border);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
border: 1px solid rgba(184, 174, 168, 0.5);
border-radius: 16px;
background: rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow-soft);
}
.auth-card h1 {
margin: 0 0 10px;
font-size: 34px;
letter-spacing: -0.05em;
color: var(--primary);
font-family: "Lora", Georgia, serif;
font-size: 36px;
font-weight: 600;
line-height: 1.15;
}
.auth-card p {
margin: 0;
color: var(--muted);
line-height: 1.6;
color: var(--zinc-500);
font-size: 15px;
line-height: 1.65;
}
.auth-form {
margin-top: 26px;
margin-top: 28px;
display: grid;
gap: 16px;
}
@ -187,91 +419,294 @@ input {
}
.field label {
font-size: 14px;
color: var(--muted);
color: var(--zinc-600);
font-size: 13px;
font-weight: 700;
}
.field input {
.field input,
.field select {
width: 100%;
padding: 14px 16px;
border: 1px solid transparent;
border-radius: 14px;
color: var(--text);
background: var(--input);
min-height: 48px;
padding: 13px 14px;
border: 1px solid var(--zinc-200);
border-radius: 12px;
color: var(--foreground);
background: rgba(247, 245, 244, 0.76);
outline: none;
transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.field input:focus {
border-color: rgba(255, 141, 58, 0.65);
background: rgba(255, 255, 255, 0.11);
box-shadow: 0 0 0 5px var(--input-focus);
.field input::placeholder {
color: var(--zinc-400);
}
.field input:focus,
.field select:focus {
border-color: var(--zinc-400);
background: #fff;
box-shadow: 0 0 0 4px rgba(202, 197, 192, 0.35);
}
.field select {
appearance: none;
cursor: pointer;
}
.error-text {
min-height: 22px;
font-size: 14px;
color: var(--danger);
font-size: 14px;
line-height: 1.5;
}
.primary-button,
.secondary-button {
width: 100%;
min-height: 48px;
padding: 13px 18px;
border-radius: 12px;
cursor: pointer;
font-weight: 800;
transition: transform 140ms ease, background 140ms ease, color 140ms ease, opacity 140ms ease;
}
.primary-button {
width: 100%;
padding: 14px 18px;
border: none;
border-radius: 16px;
cursor: pointer;
color: #26180d;
background: linear-gradient(135deg, var(--accent), var(--accent-strong));
font-weight: 700;
letter-spacing: 0.01em;
transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
border: 1px solid var(--primary);
color: var(--zinc-50);
background: var(--primary);
}
.primary-button:hover {
transform: translateY(-1px);
filter: brightness(1.02);
background: var(--zinc-700);
}
.primary-button:disabled {
.secondary-button {
border: 1px solid var(--zinc-200);
color: var(--primary);
background: rgba(255, 255, 255, 0.68);
}
.secondary-button:hover {
transform: translateY(-1px);
background: var(--secondary);
}
.primary-button:disabled,
.secondary-button:disabled {
cursor: wait;
opacity: 0.68;
opacity: 0.62;
transform: none;
}
.auth-footer {
margin-top: 20px;
color: var(--muted);
color: var(--zinc-500);
font-size: 14px;
}
.auth-footer a {
color: #ffd7a3;
color: var(--primary);
font-weight: 800;
}
.status-panel {
margin-top: 18px;
padding: 14px 16px;
border: 1px solid rgba(134, 150, 131, 0.28);
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
color: var(--muted);
color: var(--zinc-600);
background: rgba(227, 232, 226, 0.54);
font-size: 13px;
line-height: 1.6;
}
.auth-page .auth-card.login-card {
width: 100%;
max-height: calc(100vh - clamp(48px, 10vh, 112px));
padding: clamp(30px, 5vh, 54px) clamp(24px, 3.2vw, 44px) clamp(26px, 4vh, 40px);
display: flex;
flex-direction: column;
align-items: stretch;
overflow-y: auto;
border-color: rgba(216, 210, 206, 0.95);
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.05),
0 18px 48px rgba(29, 23, 21, 0.12);
backdrop-filter: blur(16px);
}
.auth-page .auth-card.register-card {
padding-top: clamp(24px, 3.4vh, 42px);
padding-bottom: clamp(22px, 3vh, 34px);
}
.auth-page .login-logo {
width: clamp(76px, 8vw, 112px);
height: auto;
flex: 0 0 auto;
align-self: center;
margin-bottom: clamp(14px, 2.4vh, 24px);
object-fit: contain;
}
.auth-page .auth-card.login-card h1 {
margin: 0 0 clamp(22px, 4vh, 38px);
color: #1b1b1b;
font-family: "Public Sans", Inter, "Avenir Next", "Segoe UI", sans-serif;
font-size: clamp(26px, 2.4vw, 38px);
font-weight: 800;
line-height: 1.1;
text-align: center;
}
.auth-page .auth-card.register-card h1 {
margin-bottom: clamp(18px, 2.6vh, 28px);
}
.auth-page .login-card .auth-form {
margin-top: 0;
display: grid;
gap: clamp(12px, 1.9vh, 18px);
}
.auth-page .login-field {
position: relative;
display: block;
}
.auth-page .login-field input,
.auth-page .login-field select {
min-height: clamp(50px, 6vh, 60px);
padding: 14px 52px 14px 18px;
border-color: rgba(202, 197, 192, 0.72);
border-radius: 8px;
background: rgba(255, 255, 255, 0.78);
color: #1d1715;
font-size: clamp(15px, 1.1vw, 17px);
}
.auth-page .login-field .field-icon + input {
padding-left: 62px;
}
.auth-page .login-field input::placeholder {
color: #9e9a96;
}
.auth-page .login-field input:focus,
.auth-page .login-field select:focus {
border-color: rgba(139, 126, 119, 0.72);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 4px rgba(216, 210, 206, 0.34);
}
.auth-page .login-card .error-text {
min-height: 20px;
margin-top: -4px;
font-size: 13px;
}
.auth-page .login-card .primary-button {
min-height: clamp(52px, 6vh, 58px);
margin-top: 0;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
#1d1d1d;
box-shadow: 0 8px 18px rgba(29, 23, 21, 0.16);
}
.auth-page .login-card .primary-button:hover {
background: #111;
}
.auth-page .login-card .secondary-button {
min-height: 48px;
border-radius: 8px;
}
@media (max-width: 920px) {
.portal-page {
align-items: start;
padding-top: 76px;
}
.portal-page:has(.auth-page) {
padding: 0;
}
.auth-page {
align-items: flex-end;
justify-content: center;
padding: 96px 24px 32px;
background-position: 38% center;
}
.auth-page .portal-panel {
width: min(520px, 100%);
}
.portal-shell {
grid-template-columns: 1fr;
}
.portal-brand {
min-height: auto;
padding-bottom: 30px;
padding: 40px;
}
.portal-brand::after {
inset: 18px;
}
}
@media (max-width: 640px) {
.portal-page {
padding: 16px;
padding: 76px 16px 16px;
}
.portal-page:has(.auth-page) {
padding: 0;
}
.auth-page {
padding: 84px 16px 20px;
}
.auth-page .auth-card.login-card {
min-height: auto;
padding: 34px 22px 28px;
max-height: calc(100vh - 104px);
}
.auth-page .login-logo {
width: 86px;
margin-bottom: 18px;
}
.auth-page .auth-card.login-card h1 {
margin-bottom: 28px;
font-size: 28px;
}
.auth-page .login-field input,
.auth-page .login-field select {
min-height: 54px;
font-size: 16px;
}
.login-footer {
grid-template-columns: 1fr auto;
row-gap: 10px;
}
.portal-toolbar {
top: 16px;
right: 16px;
}
.portal-brand,
@ -279,6 +714,10 @@ input {
padding: 24px;
}
.portal-title {
font-size: 40px;
}
.auth-card {
padding: 24px 20px;
}

4
auth-portal/src/app/layout.tsx
View File

@ -4,8 +4,8 @@ import { PortalI18nProvider } from '@/lib/i18n/provider';
import { getServerPortalLocale } from '@/lib/i18n/server';
export const metadata: Metadata = {
title: 'Boardware Agent Sandbox Auth Portal',
description: 'Boardware Agent Sandbox Auth Portal',
title: 'Boardware Agent Sandbox',
description: 'Boardware Agent Sandbox sign-in',
icons: {
icon: '/boardware-logo.jpg',
},

117
auth-portal/src/app/login/page.tsx
View File

@ -17,6 +17,7 @@ export default function LoginPage() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
@ -37,74 +38,56 @@ export default function LoginPage() {
return (
<main className="portal-page">
<div className="absolute right-5 top-5 z-10">
<div className="portal-toolbar">
<LanguageSwitcher />
</div>
<section className="portal-shell">
<div className="portal-brand">
<div className="portal-logo-lockup">
<section className="auth-page">
<div className="portal-panel">
<div className="auth-card login-card">
<Image
src="/boardware-logo.jpg"
alt="Boardware logo"
width={128}
height={128}
className="portal-logo-image"
width={120}
height={120}
className="login-logo"
priority
/>
</div>
<div className="portal-kicker">Auth Portal</div>
<h1 className="portal-title">Boardware Agent Sandbox</h1>
<p className="portal-copy">
{pickPortalText(
locale,
'这个入口只负责鉴权。成功后会把你直接送到为你分配的专属实例 URL，后续前后端请求都留在那套容器里。',
'This portal only handles authentication. After sign-in, you are redirected to your dedicated runtime URL and all later requests stay inside that container.'
)}
</p>
<div className="portal-notes">
<div className="portal-note">
<strong>{pickPortalText(locale, '容器边界', 'Container boundary')}</strong>
{pickPortalText(
locale,
'登录注册先经过独立 auth portal，再跳到专属实例。一用户一套前后端容器不变。',
'Authentication happens in this standalone portal first, then the browser jumps into the dedicated runtime. Each user keeps an isolated frontend/backend container pair.'
)}
</div>
<div className="portal-note">
<strong>{pickPortalText(locale, '目标页面', 'Target page')}</strong>
{pickPortalText(locale, '当前登录完成后将回到：', 'After sign-in you will return to:')} <code>{nextPath}</code>
</div>
</div>
</div>
<div className="portal-panel">
<div className="auth-card">
<h1>{pickPortalText(locale, '登录', 'Sign In')}</h1>
<p>{pickPortalText(locale, '输入已有账号，认证完成后直接进入目标容器前端。', 'Use an existing account and continue straight into the target runtime UI.')}</p>
<h1>Beaver Agentsandbox</h1>
<form className="auth-form" onSubmit={handleSubmit}>
<div className="field">
<label htmlFor="username">{pickPortalText(locale, '用户名', 'Username')}</label>
<div className="field login-field">
<label className="visually-hidden" htmlFor="username">{pickPortalText(locale, '邮箱或用户名', 'Email or username')}</label>
<MailIcon />
<input
id="username"
value={username}
onChange={(event) => setUsername(event.target.value)}
autoComplete="username"
placeholder={pickPortalText(locale, '例如：bwgdi', 'Example: bwgdi')}
placeholder={pickPortalText(locale, '邮箱', 'Email')}
required
/>
</div>
<div className="field">
<label htmlFor="password">{pickPortalText(locale, '密码', 'Password')}</label>
<div className="field login-field">
<label className="visually-hidden" htmlFor="password">{pickPortalText(locale, '密码', 'Password')}</label>
<LockIcon />
<input
id="password"
type="password"
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(event) => setPassword(event.target.value)}
autoComplete="current-password"
placeholder={pickPortalText(locale, '输入密码', 'Enter password')}
required
/>
<button
className="ghost-icon-button"
type="button"
onClick={() => setShowPassword((value) => !value)}
aria-label={pickPortalText(locale, showPassword ? '隐藏密码' : '显示密码', showPassword ? 'Hide password' : 'Show password')}
>
<EyeIcon />
</button>
</div>
<div className="error-text">{error}</div>
@ -112,12 +95,17 @@ export default function LoginPage() {
<button className="primary-button" type="submit" disabled={loading}>
{loading
? pickPortalText(locale, '登录中...', 'Signing in...')
: pickPortalText(locale, '登录并进入容器', 'Sign in and continue')}
: <ArrowRightIcon />}
</button>
</form>
<div className="auth-footer">
{pickPortalText(locale, '还没有账号？', "Don't have an account yet?")} <Link href={withNext('/register', nextPath)}>{pickPortalText(locale, '去注册', 'Create one')}</Link>
<div className="login-divider">
<span>{pickPortalText(locale, '或', 'or')}</span>
</div>
<div className="auth-footer login-footer">
<span>{pickPortalText(locale, '还没有账号？', "Don't have an account yet?")}</span>
<Link href={withNext('/register', nextPath)}>{pickPortalText(locale, '注册', 'Create one')} <span aria-hidden="true">›</span></Link>
</div>
</div>
</div>
@ -125,3 +113,40 @@ export default function LoginPage() {
</main>
);
}
function MailIcon() {
return (
<svg className="field-icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4.75 6.75h14.5v10.5H4.75z" />
<path d="m5.25 7.25 6.75 5.5 6.75-5.5" />
</svg>
);
}
function LockIcon() {
return (
<svg className="field-icon" viewBox="0 0 24 24" aria-hidden="true">
<path d="M7.25 10.25h9.5v8H7.25z" />
<path d="M9 10.25V8a3 3 0 0 1 6 0v2.25" />
</svg>
);
}
function EyeIcon() {
return (
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3.75 12s2.8-5.25 8.25-5.25S20.25 12 20.25 12s-2.8 5.25-8.25 5.25S3.75 12 3.75 12Z" />
<path d="m4.75 4.75 14.5 14.5" />
<path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
</svg>
);
}
function ArrowRightIcon() {
return (
<svg className="button-arrow" viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 12h13" />
<path d="m13 6 6 6-6 6" />
</svg>
);
}

355
auth-portal/src/app/register/page.tsx
View File

@ -6,9 +6,24 @@ import { useSearchParams } from 'next/navigation';
import { useState } from 'react';
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
import { buildFrontendHandoffUrl, register, withNext } from '@/lib/auth-client';
import { buildFrontendHandoffUrl, configureProviderOnboarding, register, withNext } from '@/lib/auth-client';
import { pickPortalText } from '@/lib/i18n/core';
import { usePortalI18n } from '@/lib/i18n/provider';
import type { TokenResponse } from '@/types/auth';
const PROVIDER_OPTIONS = [
{ id: 'openrouter', label: 'OpenRouter', model: 'openrouter/anthropic/claude-sonnet-4.5' },
{ id: 'openai', label: 'OpenAI', model: 'openai/gpt-5' },
{ id: 'anthropic', label: 'Anthropic', model: 'claude-sonnet-4.5' },
{ id: 'dashscope', label: 'DashScope', model: 'qwen-plus' },
{ id: 'deepseek', label: 'DeepSeek', model: 'deepseek-chat' },
{ id: 'gemini', label: 'Gemini', model: 'gemini/gemini-2.5-pro' },
{ id: 'moonshot', label: 'Moonshot', model: 'moonshot/kimi-k2.5' },
{ id: 'minimax', label: 'MiniMax', model: 'minimax/minimax-m1' },
{ id: 'siliconflow', label: 'SiliconFlow', model: 'Qwen/Qwen3-32B' },
{ id: 'volcengine', label: 'VolcEngine', model: 'volcengine/deepseek-v3' },
{ id: 'vllm', label: 'vLLM / Local', model: 'hosted_vllm/local-model' },
];
export default function RegisterPage() {
const { locale } = usePortalI18n();
@ -19,8 +34,18 @@ export default function RegisterPage() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [registrationResponse, setRegistrationResponse] = useState<TokenResponse | null>(null);
const [provider, setProvider] = useState(PROVIDER_OPTIONS[0].id);
const [model, setModel] = useState(PROVIDER_OPTIONS[0].model);
const [apiKey, setApiKey] = useState('');
const [apiBase, setApiBase] = useState('');
const [showPassword, setShowPassword] = useState(false);
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
const [showApiKey, setShowApiKey] = useState(false);
const [loading, setLoading] = useState(false);
const [onboardingLoading, setOnboardingLoading] = useState(false);
const [error, setError] = useState('');
const [onboardingError, setOnboardingError] = useState('');
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
@ -32,7 +57,7 @@ export default function RegisterPage() {
throw new Error(pickPortalText(locale, '两次输入的密码不一致', 'Passwords do not match'));
}
const response = await register(username, email, password);
window.location.replace(buildFrontendHandoffUrl(response, nextPath));
setRegistrationResponse(response);
} catch (err) {
setError(err instanceof Error ? err.message : pickPortalText(locale, '注册失败，请稍后重试', 'Sign-up failed. Please try again.'));
} finally {
@ -40,122 +65,248 @@ export default function RegisterPage() {
}
};
const handleProviderChange = (value: string) => {
const previousDefault = PROVIDER_OPTIONS.find((item) => item.id === provider)?.model;
const selected = PROVIDER_OPTIONS.find((item) => item.id === value);
setProvider(value);
if (selected && (!model.trim() || model === previousDefault)) {
setModel(selected.model);
}
};
const continueWithoutProvider = () => {
if (!registrationResponse) return;
window.location.replace(buildFrontendHandoffUrl(registrationResponse, nextPath));
};
const handleProviderSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!registrationResponse) return;
setOnboardingLoading(true);
setOnboardingError('');
try {
const response = await configureProviderOnboarding({
username,
password,
provider,
model,
api_key: apiKey,
api_base: apiBase,
});
window.location.replace(buildFrontendHandoffUrl(response, nextPath));
} catch (err) {
setOnboardingError(err instanceof Error ? err.message : pickPortalText(locale, '模型配置失败，请检查后重试', 'Provider setup failed. Check the values and try again.'));
} finally {
setOnboardingLoading(false);
}
};
return (
<main className="portal-page">
<div className="absolute right-5 top-5 z-10">
<div className="portal-toolbar">
<LanguageSwitcher />
</div>
<section className="portal-shell">
<div className="portal-brand">
<div className="portal-logo-lockup">
<Image
src="/boardware-logo.jpg"
alt="Boardware logo"
width={128}
height={128}
className="portal-logo-image"
/>
</div>
<div className="portal-kicker">Auth Portal</div>
<h1 className="portal-title">Create Runtime</h1>
<p className="portal-copy">
{pickPortalText(
locale,
'注册不仅建立登录账号，还会触发专属实例创建和 backend 身份分配。认证完成后会直接进入你的专属 URL。',
'Sign-up not only creates a login account, it also provisions your dedicated runtime and backend identity. After authentication, you go straight into your own URL.'
)}
</p>
<div className="portal-notes">
<div className="portal-note">
<strong>{pickPortalText(locale, '注册结果', 'Provisioning result')}</strong>
{pickPortalText(
locale,
'AuthZ 会编排 deploy-control 创建实例，并完成 backend 身份初始化，auth portal 最后把你转交到该实例前端。',
'AuthZ coordinates deploy-control to create the runtime, initialize backend identity, and then the portal hands the browser over to that frontend.'
)}
</div>
<div className="portal-note">
<strong>{pickPortalText(locale, '目标页面', 'Target page')}</strong>
{pickPortalText(locale, '当前注册完成后将回到：', 'After sign-up you will return to:')} <code>{nextPath}</code>
</div>
</div>
</div>
<section className="auth-page">
<div className="portal-panel">
<div className="auth-card">
<h1>{pickPortalText(locale, '注册', 'Sign Up')}</h1>
<p>{pickPortalText(locale, '为当前容器创建登录账号，并完成 backend 身份初始化。', 'Create a login account for this runtime and initialize backend identity.')}</p>
{registrationResponse ? (
<div className="auth-card login-card register-card">
<BrandHeader title={pickPortalText(locale, '配置模型', 'Model Setup')} />
<form className="auth-form" onSubmit={handleSubmit}>
<div className="field">
<label htmlFor="username">{pickPortalText(locale, '用户名', 'Username')}</label>
<input
id="username"
value={username}
onChange={(event) => setUsername(event.target.value)}
autoComplete="username"
placeholder={pickPortalText(locale, '例如：bwgdi', 'Example: bwgdi')}
required
/>
</div>
<form className="auth-form" onSubmit={handleProviderSubmit}>
<div className="field login-field">
<label className="visually-hidden" htmlFor="provider">{pickPortalText(locale, '模型提供商', 'Model provider')}</label>
<select
id="provider"
value={provider}
onChange={(event) => handleProviderChange(event.target.value)}
disabled={onboardingLoading}
>
{PROVIDER_OPTIONS.map((item) => (
<option key={item.id} value={item.id}>{item.label}</option>
))}
</select>
</div>
<div className="field">
<label htmlFor="email">{pickPortalText(locale, '邮箱', 'Email')}</label>
<input
id="email"
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
autoComplete="email"
placeholder={pickPortalText(locale, '例如：steven@example.com', 'Example: steven@example.com')}
/>
</div>
<div className="field login-field">
<label className="visually-hidden" htmlFor="model">{pickPortalText(locale, '模型', 'Model')}</label>
<input
id="model"
value={model}
onChange={(event) => setModel(event.target.value)}
placeholder={pickPortalText(locale, '模型', 'Model')}
required
disabled={onboardingLoading}
/>
</div>
<div className="field">
<label htmlFor="password">{pickPortalText(locale, '密码', 'Password')}</label>
<input
id="password"
type="password"
value={password}
onChange={(event) => setPassword(event.target.value)}
autoComplete="new-password"
placeholder={pickPortalText(locale, '设置密码', 'Set a password')}
required
/>
</div>
<div className="field login-field">
<label className="visually-hidden" htmlFor="apiKey">API Key</label>
<input
id="apiKey"
type={showApiKey ? 'text' : 'password'}
value={apiKey}
onChange={(event) => setApiKey(event.target.value)}
autoComplete="off"
placeholder={provider === 'vllm' ? pickPortalText(locale, 'API Key 可选', 'API key optional') : 'API Key'}
required={provider !== 'vllm'}
disabled={onboardingLoading}
/>
<VisibilityButton
active={showApiKey}
onClick={() => setShowApiKey((value) => !value)}
label={pickPortalText(locale, showApiKey ? '隐藏 API Key' : '显示 API Key', showApiKey ? 'Hide API key' : 'Show API key')}
/>
</div>
<div className="field">
<label htmlFor="confirmPassword">{pickPortalText(locale, '确认密码', 'Confirm password')}</label>
<input
id="confirmPassword"
type="password"
value={confirmPassword}
onChange={(event) => setConfirmPassword(event.target.value)}
autoComplete="new-password"
placeholder={pickPortalText(locale, '再次输入密码', 'Enter the password again')}
required
/>
</div>
<div className="field login-field">
<label className="visually-hidden" htmlFor="apiBase">API Base</label>
<input
id="apiBase"
value={apiBase}
onChange={(event) => setApiBase(event.target.value)}
placeholder="API Base"
disabled={onboardingLoading}
/>
</div>
<div className="error-text">{error}</div>
<div className="error-text">{onboardingError}</div>
<button className="primary-button" type="submit" disabled={loading}>
{loading
? pickPortalText(locale, '注册中...', 'Creating account...')
: pickPortalText(locale, '注册并进入容器', 'Create account and continue')}
</button>
</form>
<div className="auth-footer">
{pickPortalText(locale, '已有账号？', 'Already have an account?')} <Link href={withNext('/login', nextPath)}>{pickPortalText(locale, '去登录', 'Sign in')}</Link>
<button className="primary-button" type="submit" disabled={onboardingLoading}>
{onboardingLoading ? pickPortalText(locale, '写入中...', 'Saving...') : <ArrowRightIcon />}
</button>
<button className="secondary-button" type="button" onClick={continueWithoutProvider} disabled={onboardingLoading}>
{pickPortalText(locale, '跳过', 'Skip')}
</button>
</form>
</div>
) : (
<div className="auth-card login-card register-card">
<BrandHeader title="Beaver Agentsandbox" />
<div className="status-panel">
{pickPortalText(locale, 'Portal 会先调用部署机接口创建实例，再把浏览器跳到实例自己的 URL。', 'The portal first calls the deployment controller to create the runtime, then redirects the browser into the instance URL.')}
<form className="auth-form" onSubmit={handleSubmit}>
<div className="field login-field">
<label className="visually-hidden" htmlFor="username">{pickPortalText(locale, '用户名', 'Username')}</label>
<input
id="username"
value={username}
onChange={(event) => setUsername(event.target.value)}
autoComplete="username"
placeholder={pickPortalText(locale, '用户名', 'Username')}
required
/>
</div>
<div className="field login-field">
<label className="visually-hidden" htmlFor="email">{pickPortalText(locale, '邮箱', 'Email')}</label>
<input
id="email"
type="email"
value={email}
onChange={(event) => setEmail(event.target.value)}
autoComplete="email"
placeholder={pickPortalText(locale, '邮箱', 'Email')}
/>
</div>
<div className="field login-field">
<label className="visually-hidden" htmlFor="password">{pickPortalText(locale, '密码', 'Password')}</label>
<input
id="password"
type={showPassword ? 'text' : 'password'}
value={password}
onChange={(event) => setPassword(event.target.value)}
autoComplete="new-password"
placeholder={pickPortalText(locale, '密码', 'Password')}
required
/>
<VisibilityButton
active={showPassword}
onClick={() => setShowPassword((value) => !value)}
label={pickPortalText(locale, showPassword ? '隐藏密码' : '显示密码', showPassword ? 'Hide password' : 'Show password')}
/>
</div>
<div className="field login-field">
<label className="visually-hidden" htmlFor="confirmPassword">{pickPortalText(locale, '确认密码', 'Confirm password')}</label>
<input
id="confirmPassword"
type={showConfirmPassword ? 'text' : 'password'}
value={confirmPassword}
onChange={(event) => setConfirmPassword(event.target.value)}
autoComplete="new-password"
placeholder={pickPortalText(locale, '确认密码', 'Confirm password')}
required
/>
<VisibilityButton
active={showConfirmPassword}
onClick={() => setShowConfirmPassword((value) => !value)}
label={pickPortalText(locale, showConfirmPassword ? '隐藏确认密码' : '显示确认密码', showConfirmPassword ? 'Hide confirm password' : 'Show confirm password')}
/>
</div>
<div className="error-text">{error}</div>
<button className="primary-button" type="submit" disabled={loading}>
{loading ? pickPortalText(locale, '注册中...', 'Creating...') : <ArrowRightIcon />}
</button>
</form>
<div className="login-divider">
<span>{pickPortalText(locale, '或', 'or')}</span>
</div>
<div className="auth-footer login-footer">
<span>{pickPortalText(locale, '已有账号？', 'Already have an account?')}</span>
<Link href={withNext('/login', nextPath)}>{pickPortalText(locale, '登录', 'Sign in')} <span aria-hidden="true">›</span></Link>
</div>
</div>
</div>
)}
</div>
</section>
</main>
);
}
function BrandHeader({ title }: { title: string }) {
return (
<>
<Image
src="/boardware-logo.jpg"
alt="Boardware logo"
width={120}
height={120}
className="login-logo"
priority
/>
<h1>{title}</h1>
</>
);
}
function VisibilityButton({ active, label, onClick }: { active: boolean; label: string; onClick: () => void }) {
return (
<button className="ghost-icon-button" type="button" onClick={onClick} aria-label={label} aria-pressed={active}>
<EyeIcon />
</button>
);
}
function EyeIcon() {
return (
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3.75 12s2.8-5.25 8.25-5.25S20.25 12 20.25 12s-2.8 5.25-8.25 5.25S3.75 12 3.75 12Z" />
<path d="m4.75 4.75 14.5 14.5" />
<path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
</svg>
);
}
function ArrowRightIcon() {
return (
<svg className="button-arrow" viewBox="0 0 24 24" aria-hidden="true">
<path d="M5 12h13" />
<path d="m13 6 6 6-6 6" />
</svg>
);
}

10
auth-portal/src/components/LanguageSwitcher.tsx
View File

@ -11,18 +11,14 @@ export function LanguageSwitcher() {
const { locale, setLocale } = usePortalI18n();
return (
<div className="inline-flex items-center gap-1 rounded-full border border-white/15 bg-black/25 p-1 backdrop-blur">
<span className="ml-1 text-[11px] font-medium uppercase tracking-[0.14em] text-white/70">Lang</span>
<div className="language-switcher">
<span>Lang</span>
{OPTIONS.map((option) => (
<button
key={option.value}
type="button"
onClick={() => setLocale(option.value)}
className={`rounded-full px-2.5 py-1 text-xs font-medium transition-colors ${
locale === option.value
? 'bg-white text-slate-900'
: 'text-white/75 hover:text-white'
}`}
className={locale === option.value ? 'is-active' : undefined}
>
{option.label}
</button>

17
auth-portal/src/lib/auth-client.ts
View File

@ -5,6 +5,16 @@ import { getCurrentPortalLocale, pickPortalText } from '@/lib/i18n/core';
const REQUEST_TIMEOUT_MS = 8000;
const REGISTER_REQUEST_TIMEOUT_MS = 90000;
const PROVIDER_ONBOARDING_TIMEOUT_MS = 120000;
export interface ProviderOnboardingPayload {
username: string;
password: string;
provider: string;
model: string;
api_key: string;
api_base?: string;
}
function normalizeBaseUrl(value?: string | null): string | null {
const trimmed = value?.trim();
@ -82,6 +92,13 @@ export async function register(username: string, email: string, password: string
}, REGISTER_REQUEST_TIMEOUT_MS);
}
export async function configureProviderOnboarding(payload: ProviderOnboardingPayload): Promise<TokenResponse> {
return fetchJSON('/api/runtime/provider-onboarding', {
method: 'POST',
body: JSON.stringify(payload),
}, PROVIDER_ONBOARDING_TIMEOUT_MS);
}
export function buildFrontendHandoffUrl(response: TokenResponse, nextPath: string): string {
const locale = getCurrentPortalLocale();
const frontendBaseUrl = getFrontendBaseUrl(response);

4
auth-portal/src/lib/runtime-control.ts
View File

@ -69,7 +69,7 @@ async function fetchJson<T>(url: string, init?: RequestInit, timeoutMs = REQUEST
}
}
export async function callDeployControl<T>(path: string, payload: JsonObject): Promise<T> {
export async function callDeployControl<T>(path: string, payload: JsonObject, timeoutMs = REQUEST_TIMEOUT_MS): Promise<T> {
const headers: Record<string, string> = {};
if (DEPLOY_API_TOKEN) {
headers.Authorization = `Bearer ${DEPLOY_API_TOKEN}`;
@ -78,7 +78,7 @@ export async function callDeployControl<T>(path: string, payload: JsonObject): P
method: 'POST',
headers,
body: JSON.stringify(payload),
});
}, timeoutMs);
}
export async function callAuthzService<T>(path: string, payload: JsonObject, timeoutMs = REQUEST_TIMEOUT_MS): Promise<T> {

BIN
auth-portal/src/public/login-background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB