+
+ )
+
+ const renderOAuthButtons = () => (
+
+
+
+
+ {t('or')}
+
+
+ {hasGoogle && (
+
+ )}
+ {hasGithub && (
+
+ )}
+
+ )
+
+ const renderPasswordForm = () => (
+
+ )
+
+ const renderEmailCodeFlow = () => {
+ if (emailStep === 'code') {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+ }
+
+ const renderSetPasswordView = () => (
+
+
+ )
+
+ // ── Main render ──────────────────────────────────────
+
return (
+
+
+
+
+
+
+ {t('setPasswordTitle')}
+{t('setPasswordDesc')}
+
+ {/* Header */}
)
diff --git a/web/app/[locale]/(console)/account/page.tsx b/web/app/[locale]/(console)/account/page.tsx
new file mode 100644
index 0000000..44c86fa
--- /dev/null
+++ b/web/app/[locale]/(console)/account/page.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { ProfileCard } from '@/modules/account/components/profile-card'
+import { ChangePasswordForm } from '@/modules/account/components/change-password-form'
+import { ChangeEmailForm } from '@/modules/account/components/change-email-form'
+
+export default function AccountPage() {
+ const t = useTranslations('account')
+
+ return (
+
-
-
- {/* SSO OAuth buttons */}
- {providers.length > 0 && (
- {t('title')}
-{t('subtitle')}
+
+ {brand.logo ? (
+ 
+ ) : (
+
+ {brand.name[0]}
+
+ )}
+
+
{brand.name}
+{t('subtitle')}
+
- {providers.includes('google') && (
-
- )}
-
- {providers.includes('github') && (
-
- )}
-
- {/* Divider */}
-
-
-
+ {/* Welcome toast */}
+ {welcomeMsg && (
+
-
-
-
- {t('or')}
-
-
+ {welcomeMsg}
)}
- {/* Email/password form */}
-
+ {/* Set password view (after new user registration) */}
+ {view === 'set-password' ? renderSetPasswordView() : (
+ <>
+ {/* Loading state */}
+ {methodsLoading ? (
+
+
+ ) : (
+ <>
+ {hasOAuth && renderOAuthButtons()}
+ {hasOAuth && (hasPassword || hasEmailCode) && renderDivider()}
+ {hasPassword && renderPasswordForm()}
+ {hasPassword && hasEmailCode && renderDivider()}
+ {hasEmailCode && renderEmailCodeFlow()}
+
+ )}
+
+ )}
{t('defaultCredentials')}
+
+ )
+}
diff --git a/web/app/[locale]/(console)/billing/page.tsx b/web/app/[locale]/(console)/billing/page.tsx
index 5dd3c1d..359aa06 100644
--- a/web/app/[locale]/(console)/billing/page.tsx
+++ b/web/app/[locale]/(console)/billing/page.tsx
@@ -1,18 +1,24 @@
'use client'
+
import { useTranslations } from 'next-intl'
+import { RedemptionTable } from '@/modules/billing/components/redemption-table'
+import { CreateRedemptionDialog } from '@/modules/billing/components/create-redemption-dialog'
+import { RedeemCodeCard } from '@/modules/billing/components/redeem-code-card'
-export default function Page() {
+export default function BillingPage() {
const t = useTranslations('billing')
- const tc = useTranslations('common')
+
return (
+
+ {t('title')}
+{t('subtitle')}
+
-
+ {/* Quota card */}
+
-
- {t('title')}
-{t('subtitle')}
-
-
)
}
diff --git a/web/app/[locale]/(console)/dashboard/page.tsx b/web/app/[locale]/(console)/dashboard/page.tsx
index a163660..29ce15e 100644
--- a/web/app/[locale]/(console)/dashboard/page.tsx
+++ b/web/app/[locale]/(console)/dashboard/page.tsx
@@ -2,11 +2,27 @@
import { useTranslations } from 'next-intl'
import { useAuth } from '@/shared/providers/auth-provider'
-import { Key, Activity, Users, Server } from 'lucide-react'
+import { useMyQuota } from '@/modules/quota'
+import { Key, Activity, Users, Server, Wallet, TrendingUp } from 'lucide-react'
+import { cn } from '@/shared/lib/utils'
+
+function formatQuota(n: number): string {
+ if (n === -1) return '∞'
+ if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+ if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K'
+ return n.toLocaleString()
+}
export default function DashboardPage() {
const t = useTranslations('dashboard')
const { user } = useAuth()
+ const { data: quotaInfo } = useMyQuota()
+
+ const quota = quotaInfo?.quota ?? 0
+ const usedQuota = quotaInfo?.used_quota ?? 0
+ const isUnlimited = quota === -1
+ const total = isUnlimited ? 0 : quota + usedQuota
+ const pct = isUnlimited ? 0 : total > 0 ? (usedQuota / total) * 100 : 0
const stats = [
{ label: t('apiKeys'), value: '—', icon: Key },
@@ -23,6 +39,42 @@ export default function DashboardPage() {
{tc('developing')}
+
+
+
+
+ {t('title')}
+{t('subtitle')}
+
+
+
+ {!isUnlimited && (
+
+
+
+
+
+
+ {t('remainingQuota')}
+{formatQuota(quota)}
+
+
+
+
+ {formatQuota(usedQuota)}
+
+
+
+ {t('usagePercent', { pct: pct.toFixed(1) })}
+ {t('totalQuota')}: {formatQuota(total)}
+
+
+
+ )}
+ 80 ? 'bg-red-400' : 'bg-blue-500')}
+ style={{ width: `${Math.min(pct, 100)}%` }}
+ />
+
+
{stats.map((stat) => (
diff --git a/web/app/[locale]/(console)/pricing/page.tsx b/web/app/[locale]/(console)/pricing/page.tsx
index 1038a70..880875c 100644
--- a/web/app/[locale]/(console)/pricing/page.tsx
+++ b/web/app/[locale]/(console)/pricing/page.tsx
@@ -1,18 +1,20 @@
'use client'
+
import { useTranslations } from 'next-intl'
+import { ModelPricingTable } from '@/modules/pricing/components/model-pricing-table'
+import { GroupRatioTable } from '@/modules/pricing/components/group-ratio-table'
-export default function Page() {
+export default function PricingPage() {
const t = useTranslations('pricing')
- const tc = useTranslations('common')
+
return (
-
+
- ('7d')
+ const [groupBy, setGroupBy] = useState('day')
+
+ const dates = getDateRange(range)
+ const params: UsageQueryParams = { ...dates }
+
return (
{t('title')}
{t('subtitle')}
-
+ {tc('developing')}
-{t('title')}
{t('subtitle')}
-
)
diff --git a/web/app/[locale]/(console)/usage/page.tsx b/web/app/[locale]/(console)/usage/page.tsx
index c4b9719..0d370bf 100644
--- a/web/app/[locale]/(console)/usage/page.tsx
+++ b/web/app/[locale]/(console)/usage/page.tsx
@@ -1,18 +1,76 @@
'use client'
+
+import { useState } from 'react'
import { useTranslations } from 'next-intl'
+import { UsageSummaryCards } from '@/modules/usage/components/usage-summary'
+import { UsageChart } from '@/modules/usage/components/usage-chart'
+import { UsageLogsTable } from '@/modules/usage/components/usage-logs-table'
+import { cn } from '@/shared/lib/utils'
+import type { UsageQueryParams } from '@/modules/usage/types/usage.types'
+
+type TimeRange = '7d' | '30d'
+type GroupBy = 'day' | 'model'
+
+function getDateRange(range: TimeRange): { start_date: string; end_date: string } {
+ const end = new Date()
+ const start = new Date()
+ start.setDate(end.getDate() - (range === '7d' ? 7 : 30))
+ return {
+ start_date: start.toISOString().split('T')[0],
+ end_date: end.toISOString().split('T')[0],
+ }
+}
-export default function Page() {
+export default function UsagePage() {
const t = useTranslations('usage')
- const tc = useTranslations('common')
+ const [range, setRange] = useState{tc('developing')}
+ +
+
{t('authSettings')}
+{t('authSettingsDesc')}
+
- (defaultBranding)
+
+ useEffect(() => {
+ fetch('/api/auth/branding', {
+ headers: { 'X-Forwarded-Host': window.location.host },
+ })
+ .then((r) => r.json())
+ .then((data) => {
+ if (data.tenant_name) {
+ setBrand({
+ name: data.tenant_name,
+ logo: data.logo_url || undefined,
+ domain: window.location.host,
+ docsUrl: data.slug === 'platform' ? 'https://docs.anyfast.ai' : undefined,
+ themeColor: data.theme_color || 'emerald',
+ })
+ }
+ })
+ .catch(() => {})
+ }, [])
+
+ return brand
}
/* ─── i18n content ─── */
diff --git a/web/config/locale/index.ts b/web/config/locale/index.ts
index cd174a6..2363a72 100644
--- a/web/config/locale/index.ts
+++ b/web/config/locale/index.ts
@@ -24,4 +24,5 @@ export const localeMessagesPaths = [
'channels',
'monitoring',
'settings',
+ 'account',
]
diff --git a/web/config/locale/messages/en/account.json b/web/config/locale/messages/en/account.json
new file mode 100644
index 0000000..b6a13c0
--- /dev/null
+++ b/web/config/locale/messages/en/account.json
@@ -0,0 +1,38 @@
+{
+ "title": "Account Settings",
+ "subtitle": "Manage your profile and security settings",
+ "profile": "Profile",
+ "username": "Username",
+ "email": "Email",
+ "createdAt": "Joined",
+ "changePassword": "Change Password",
+ "changePasswordDesc": "Update your login password",
+ "oldPassword": "Current Password",
+ "oldPasswordPlaceholder": "Enter current password",
+ "newPassword": "New Password",
+ "newPasswordPlaceholder": "At least 6 characters",
+ "confirmPassword": "Confirm New Password",
+ "confirmPasswordPlaceholder": "Enter new password again",
+ "passwordMismatch": "Passwords do not match",
+ "passwordTooShort": "Password must be at least 6 characters",
+ "updatePassword": "Update Password",
+ "updatingPassword": "Updating...",
+ "passwordUpdated": "Password updated",
+ "invalidOldPassword": "Current password is incorrect",
+ "noPasswordSet": "You have not set a password yet. Set one to enable password login.",
+ "changeEmail": "Change Email",
+ "changeEmailDesc": "Update your login email",
+ "newEmail": "New Email",
+ "newEmailPlaceholder": "new@example.com",
+ "sendVerification": "Send Code",
+ "sendingVerification": "Sending...",
+ "verificationSent": "Code sent to {email}",
+ "verificationCode": "Verification Code",
+ "verificationCodePlaceholder": "6-digit code",
+ "confirmChange": "Confirm Change",
+ "confirming": "Confirming...",
+ "emailUpdated": "Email updated",
+ "resendIn": "Resend in {seconds}s",
+ "invalidCode": "Invalid code, please try again",
+ "changePasswordError": "Failed to change password, please try again"
+}
diff --git a/web/config/locale/messages/en/auth.json b/web/config/locale/messages/en/auth.json
index e80d6a6..bf4c439 100644
--- a/web/config/locale/messages/en/auth.json
+++ b/web/config/locale/messages/en/auth.json
@@ -1,16 +1,45 @@
{
"title": "AnyFast Cloud",
"subtitle": "Multi-tenant LLM API Management Platform",
+ "loginWithGoogle": "Continue with Google",
+ "loginWithGithub": "Continue with GitHub",
+ "loginWithEmail": "Sign in with email",
+ "or": "or",
"account": "Account",
"accountPlaceholder": "Email or username",
"password": "Password",
"passwordPlaceholder": "Enter your password",
"login": "Sign in",
"loggingIn": "Signing in...",
- "loginError": "Invalid credentials",
- "loginWithGoogle": "Continue with Google",
- "loginWithGithub": "Continue with GitHub",
- "or": "or",
- "defaultCredentials": "Default: admin / admin123",
- "logout": "Sign out"
+ "email": "Email",
+ "emailPlaceholder": "you@example.com",
+ "sendCode": "Send Code",
+ "sendingCode": "Sending...",
+ "resendCode": "Resend in {seconds}s",
+ "codeSent": "Code sent to {email}",
+ "enterCode": "Enter verification code",
+ "codePlaceholder": "6-digit code",
+ "verify": "Verify & Sign in",
+ "verifying": "Verifying...",
+ "changeEmail": "Change email",
+ "codeExpired": "Code expired, please resend",
+ "invalidCode": "Invalid code, please try again",
+ "rateLimited": "Too many requests, retry in {seconds}s",
+ "loginError": "Sign in failed, please try again",
+ "welcome": "Welcome! Your account has been created",
+ "logout": "Sign out",
+ "loadingMethods": "Loading...",
+ "accountNotFound": "Account not found. Please register with email first.",
+ "switchToEmailCode": "Register with email code",
+ "setPasswordTitle": "Set Password",
+ "setPasswordDesc": "Set a password for your new account for future login",
+ "newPassword": "Password",
+ "newPasswordPlaceholder": "At least 6 characters",
+ "confirmPassword": "Confirm Password",
+ "confirmPasswordPlaceholder": "Enter password again",
+ "passwordMismatch": "Passwords do not match",
+ "passwordTooShort": "Password must be at least 6 characters",
+ "setPassword": "Set Password",
+ "settingPassword": "Setting...",
+ "skipSetPassword": "Skip for now"
}
diff --git a/web/config/locale/messages/en/billing.json b/web/config/locale/messages/en/billing.json
index bafe5ac..86084a6 100644
--- a/web/config/locale/messages/en/billing.json
+++ b/web/config/locale/messages/en/billing.json
@@ -1,4 +1,30 @@
{
"title": "Billing",
- "subtitle": "View invoices and settlement records"
+ "subtitle": "Redemption codes & quota recharge",
+ "codeName": "Name",
+ "code": "Code",
+ "quota": "Quota",
+ "expiredAt": "Expires",
+ "createdAt": "Created",
+ "available": "Available",
+ "used": "Used",
+ "disabled": "Disabled",
+ "disableCode": "Disable",
+ "disableConfirm": "Disable this redemption code?",
+ "createCode": "Create Code",
+ "createCodeTitle": "Create Redemption Code",
+ "createSuccess": "Created Successfully",
+ "codeNamePlaceholder": "e.g. VIP recharge code",
+ "generateCount": "Count",
+ "generate": "Generate",
+ "generating": "Generating...",
+ "codesGenerated": "{count} codes generated",
+ "copyAll": "Copy All",
+ "redeemTitle": "Redeem Code",
+ "redeemPlaceholder": "Enter redemption code",
+ "redeem": "Redeem",
+ "redeeming": "Redeeming...",
+ "redeemSuccess": "Redeemed successfully, received {quota} quota",
+ "redeemAnother": "Redeem Another",
+ "rechargeRecords": "Recharge Records"
}
diff --git a/web/config/locale/messages/en/dashboard.json b/web/config/locale/messages/en/dashboard.json
index 8972a4d..f5b4fee 100644
--- a/web/config/locale/messages/en/dashboard.json
+++ b/web/config/locale/messages/en/dashboard.json
@@ -7,5 +7,9 @@
"quickStart": "Quick Start",
"step1": "Create an API key on the API Key page",
"step2": "Use the key to call /v1/chat/completions",
- "step3": "View usage data on the Usage page"
+ "step3": "View usage data on the Usage page",
+ "remainingQuota": "Remaining Quota",
+ "usedQuota": "Used Quota",
+ "usagePercent": "{pct}% used",
+ "totalQuota": "Total Quota"
}
diff --git a/web/config/locale/messages/en/pricing.json b/web/config/locale/messages/en/pricing.json
index babd1a7..2779160 100644
--- a/web/config/locale/messages/en/pricing.json
+++ b/web/config/locale/messages/en/pricing.json
@@ -1,4 +1,23 @@
{
"title": "Pricing",
- "subtitle": "Set input/output prices for each model"
+ "subtitle": "Set input/output prices for each model",
+ "model": "Model",
+ "modelType": "Type",
+ "modelRatio": "Model Ratio",
+ "completionRatio": "Completion Ratio",
+ "inputCost": "Input Cost",
+ "outputCost": "Output Cost",
+ "override": "Override",
+ "removeOverride": "Remove Override",
+ "deleteConfirm": "Remove custom pricing for this model?",
+ "groupRatios": "Group Ratios",
+ "addGroup": "Add Group",
+ "groupName": "Group ID",
+ "displayName": "Display Name",
+ "ratio": "Ratio",
+ "priceEffect": "Price Effect",
+ "standardPrice": "Standard",
+ "discount": "{pct}% off",
+ "markup": "{pct}% markup",
+ "deleteGroupConfirm": "Delete this group?"
}
diff --git a/web/config/locale/messages/en/settings.json b/web/config/locale/messages/en/settings.json
index 6483569..1f90159 100644
--- a/web/config/locale/messages/en/settings.json
+++ b/web/config/locale/messages/en/settings.json
@@ -1,4 +1,55 @@
{
"title": "Settings",
- "subtitle": "Tenant settings, domains and branding"
+ "subtitle": "Tenant settings, domains and branding",
+ "authSettings": "Authentication",
+ "authSettingsDesc": "Configure login methods and third-party auth",
+ "loginMethods": "Login Methods",
+ "loginMethodsDesc": "Choose available login methods for users",
+ "methodPassword": "Password",
+ "methodPasswordDesc": "Username + password login",
+ "methodEmailCode": "Email Code",
+ "methodEmailCodeDesc": "Login via email verification code",
+ "methodGoogle": "Google",
+ "methodGoogleDesc": "Sign in with Google account",
+ "methodGithub": "GitHub",
+ "methodGithubDesc": "Sign in with GitHub account",
+ "smtpConfig": "SMTP Configuration",
+ "smtpConfigDesc": "Required for email verification code login",
+ "smtpHost": "SMTP Host",
+ "smtpHostPlaceholder": "smtp.example.com",
+ "smtpPort": "Port",
+ "smtpUsername": "Username",
+ "smtpUsernamePlaceholder": "noreply@example.com",
+ "smtpPassword": "Password",
+ "smtpPasswordPlaceholder": "SMTP password",
+ "smtpFrom": "From Address",
+ "smtpFromPlaceholder": "noreply@example.com",
+ "smtpFromName": "From Name",
+ "smtpFromNamePlaceholder": "My Company",
+ "testSmtp": "Send Test Email",
+ "testSmtpTo": "Test Recipient",
+ "testSmtpToPlaceholder": "admin@example.com",
+ "testSmtpSending": "Sending...",
+ "testSmtpSuccess": "Test email sent",
+ "testSmtpError": "Failed: {error}",
+ "googleOAuth": "Google OAuth",
+ "githubOAuth": "GitHub OAuth",
+ "clientId": "Client ID",
+ "clientIdPlaceholder": "xxx.apps.googleusercontent.com",
+ "clientSecret": "Client Secret",
+ "clientSecretPlaceholder": "OAuth Client Secret",
+ "saveSettings": "Save Settings",
+ "saving": "Saving...",
+ "saveSuccess": "Settings saved",
+ "saveError": "Save failed",
+ "validationEmailCodeNeedsSmtp": "Email code requires SMTP configuration",
+ "validationGoogleNeedsCreds": "Google login requires OAuth credentials",
+ "validationGithubNeedsCreds": "GitHub login requires OAuth credentials",
+ "validationAtLeastOneMethod": "At least one login method must be enabled",
+ "smtpGuideTitle": "Setup Guide",
+ "smtpGuideGmail": "Requires a Google App Password — your regular Google password won't work",
+ "smtpGuideAWS": "Create SMTP credentials in AWS Console under SES. Replace {region} with your region (e.g. us-east-1)",
+ "smtpGuideResend": "Create an API Key at resend.com and use it as the SMTP password. Username is 'resend'",
+ "smtpGuideAliyunTitle": "Alibaba Cloud Mail",
+ "smtpGuideAliyun": "Use Alibaba Cloud enterprise mail SMTP address, port 465 (SSL)"
}
diff --git a/web/config/locale/messages/en/usage.json b/web/config/locale/messages/en/usage.json
index cd796e3..1dd83e8 100644
--- a/web/config/locale/messages/en/usage.json
+++ b/web/config/locale/messages/en/usage.json
@@ -1,4 +1,24 @@
{
"title": "Usage",
- "subtitle": "View API calls and token consumption"
+ "subtitle": "View API calls and token consumption",
+ "totalRequests": "Total Requests",
+ "totalTokens": "Total Tokens",
+ "promptTokens": "Prompt Tokens",
+ "quotaCost": "Quota Cost",
+ "byDay": "By Day",
+ "byModel": "By Model",
+ "requests": "requests",
+ "recentLogs": "Request Logs",
+ "time": "Time",
+ "model": "Model",
+ "tokenName": "Key Name",
+ "promptTokensShort": "Prompt",
+ "completionTokensShort": "Completion",
+ "cost": "Cost",
+ "latency": "Latency",
+ "stream": "Mode",
+ "last7days": "Last 7 days",
+ "last30days": "Last 30 days",
+ "viewByDay": "By Day",
+ "viewByModel": "By Model"
}
diff --git a/web/config/locale/messages/zh/account.json b/web/config/locale/messages/zh/account.json
new file mode 100644
index 0000000..8be179d
--- /dev/null
+++ b/web/config/locale/messages/zh/account.json
@@ -0,0 +1,38 @@
+{
+ "title": "账户设置",
+ "subtitle": "管理你的个人信息和安全设置",
+ "profile": "个人信息",
+ "username": "用户名",
+ "email": "邮箱",
+ "createdAt": "注册时间",
+ "changePassword": "修改密码",
+ "changePasswordDesc": "更新你的登录密码",
+ "oldPassword": "当前密码",
+ "oldPasswordPlaceholder": "输入当前密码",
+ "newPassword": "新密码",
+ "newPasswordPlaceholder": "至少 6 位",
+ "confirmPassword": "确认新密码",
+ "confirmPasswordPlaceholder": "再次输入新密码",
+ "passwordMismatch": "两次输入的密码不一致",
+ "passwordTooShort": "密码至少 6 位",
+ "updatePassword": "修改密码",
+ "updatingPassword": "修改中...",
+ "passwordUpdated": "密码已修改",
+ "invalidOldPassword": "当前密码错误",
+ "noPasswordSet": "你还未设置密码。设置密码后可使用密码登录。",
+ "changeEmail": "修改邮箱",
+ "changeEmailDesc": "更新你的登录邮箱",
+ "newEmail": "新邮箱",
+ "newEmailPlaceholder": "new@example.com",
+ "sendVerification": "发送验证码",
+ "sendingVerification": "发送中...",
+ "verificationSent": "验证码已发送到 {email}",
+ "verificationCode": "验证码",
+ "verificationCodePlaceholder": "6 位验证码",
+ "confirmChange": "确认修改",
+ "confirming": "确认中...",
+ "emailUpdated": "邮箱已修改",
+ "resendIn": "{seconds}s 后可重发",
+ "invalidCode": "验证码错误，请重试",
+ "changePasswordError": "修改密码失败，请重试"
+}
diff --git a/web/config/locale/messages/zh/auth.json b/web/config/locale/messages/zh/auth.json
index 30fdcbe..efe5958 100644
--- a/web/config/locale/messages/zh/auth.json
+++ b/web/config/locale/messages/zh/auth.json
@@ -1,16 +1,45 @@
{
"title": "AnyFast Cloud",
"subtitle": "多租户 LLM API 管理平台",
+ "loginWithGoogle": "使用 Google 登录",
+ "loginWithGithub": "使用 GitHub 登录",
+ "loginWithEmail": "邮箱验证码登录",
+ "or": "或",
"account": "账号",
"accountPlaceholder": "邮箱或用户名",
"password": "密码",
"passwordPlaceholder": "请输入密码",
"login": "登录",
"loggingIn": "登录中...",
- "loginError": "登录失败，请检查账号密码",
- "loginWithGoogle": "使用 Google 登录",
- "loginWithGithub": "使用 GitHub 登录",
- "or": "或",
- "defaultCredentials": "默认账号: admin / admin123",
- "logout": "退出登录"
+ "email": "邮箱地址",
+ "emailPlaceholder": "you@example.com",
+ "sendCode": "发送验证码",
+ "sendingCode": "发送中...",
+ "resendCode": "{seconds}s 后可重发",
+ "codeSent": "验证码已发送到 {email}",
+ "enterCode": "输入验证码",
+ "codePlaceholder": "6 位验证码",
+ "verify": "验证并登录",
+ "verifying": "验证中...",
+ "changeEmail": "更换邮箱",
+ "codeExpired": "验证码已过期，请重新发送",
+ "invalidCode": "验证码错误，请重试",
+ "rateLimited": "操作过于频繁，请 {seconds}s 后重试",
+ "loginError": "登录失败，请重试",
+ "welcome": "欢迎加入！账号已自动创建",
+ "logout": "退出登录",
+ "loadingMethods": "正在加载...",
+ "accountNotFound": "该账号不存在，请先通过邮箱注册",
+ "switchToEmailCode": "使用邮箱验证码注册",
+ "setPasswordTitle": "设置密码",
+ "setPasswordDesc": "为你的新账号设置一个密码，方便下次登录",
+ "newPassword": "设置密码",
+ "newPasswordPlaceholder": "至少 6 位",
+ "confirmPassword": "确认密码",
+ "confirmPasswordPlaceholder": "再次输入密码",
+ "passwordMismatch": "两次输入的密码不一致",
+ "passwordTooShort": "密码至少 6 位",
+ "setPassword": "设置密码",
+ "settingPassword": "设置中...",
+ "skipSetPassword": "跳过，稍后设置"
}
diff --git a/web/config/locale/messages/zh/billing.json b/web/config/locale/messages/zh/billing.json
index 30ece3e..b39d45f 100644
--- a/web/config/locale/messages/zh/billing.json
+++ b/web/config/locale/messages/zh/billing.json
@@ -1,4 +1,30 @@
{
- "title": "账单",
- "subtitle": "查看账单明细和结算记录"
+ "title": "充值管理",
+ "subtitle": "兑换码管理与额度充值",
+ "codeName": "名称",
+ "code": "兑换码",
+ "quota": "额度",
+ "expiredAt": "过期时间",
+ "createdAt": "创建时间",
+ "available": "可用",
+ "used": "已用",
+ "disabled": "已禁用",
+ "disableCode": "禁用",
+ "disableConfirm": "确定禁用该兑换码？",
+ "createCode": "创建兑换码",
+ "createCodeTitle": "创建兑换码",
+ "createSuccess": "创建成功",
+ "codeNamePlaceholder": "如：VIP充值码",
+ "generateCount": "生成数量",
+ "generate": "生成",
+ "generating": "生成中...",
+ "codesGenerated": "已生成 {count} 个兑换码",
+ "copyAll": "复制全部",
+ "redeemTitle": "兑换码充值",
+ "redeemPlaceholder": "输入兑换码",
+ "redeem": "兑换",
+ "redeeming": "兑换中...",
+ "redeemSuccess": "兑换成功，获得 {quota} 额度",
+ "redeemAnother": "继续兑换",
+ "rechargeRecords": "充值记录"
}
diff --git a/web/config/locale/messages/zh/dashboard.json b/web/config/locale/messages/zh/dashboard.json
index 46a5651..91839ca 100644
--- a/web/config/locale/messages/zh/dashboard.json
+++ b/web/config/locale/messages/zh/dashboard.json
@@ -7,5 +7,9 @@
"quickStart": "快速开始",
"step1": "前往 API Key 页面创建一个密钥",
"step2": "使用密钥调用 /v1/chat/completions 接口",
- "step3": "在用量页面查看消费数据"
+ "step3": "在用量页面查看消费数据",
+ "remainingQuota": "可用额度",
+ "usedQuota": "已用额度",
+ "usagePercent": "已用 {pct}%",
+ "totalQuota": "总额度"
}
diff --git a/web/config/locale/messages/zh/pricing.json b/web/config/locale/messages/zh/pricing.json
index e724c06..8c272e8 100644
--- a/web/config/locale/messages/zh/pricing.json
+++ b/web/config/locale/messages/zh/pricing.json
@@ -1,4 +1,23 @@
{
"title": "模型定价",
- "subtitle": "设置各模型的输入/输出价格"
+ "subtitle": "设置各模型的输入/输出价格",
+ "model": "模型",
+ "modelType": "类型",
+ "modelRatio": "模型倍率",
+ "completionRatio": "补全倍率",
+ "inputCost": "输入价格",
+ "outputCost": "输出价格",
+ "override": "自定义",
+ "removeOverride": "移除覆盖",
+ "deleteConfirm": "确定移除该模型的自定义定价？",
+ "groupRatios": "分组倍率",
+ "addGroup": "添加分组",
+ "groupName": "分组标识",
+ "displayName": "显示名称",
+ "ratio": "倍率",
+ "priceEffect": "价格效果",
+ "standardPrice": "标准价",
+ "discount": "优惠 {pct}%",
+ "markup": "加价 {pct}%",
+ "deleteGroupConfirm": "确定删除该分组？"
}
diff --git a/web/config/locale/messages/zh/settings.json b/web/config/locale/messages/zh/settings.json
index 8fb5493..9c4a7e5 100644
--- a/web/config/locale/messages/zh/settings.json
+++ b/web/config/locale/messages/zh/settings.json
@@ -1,4 +1,55 @@
{
"title": "设置",
- "subtitle": "租户设置、域名和品牌定制"
+ "subtitle": "租户设置、域名和品牌定制",
+ "authSettings": "登录认证",
+ "authSettingsDesc": "配置租户的登录方式和第三方认证",
+ "loginMethods": "登录方式",
+ "loginMethodsDesc": "选择租户用户可用的登录方式",
+ "methodPassword": "密码登录",
+ "methodPasswordDesc": "用户名 + 密码登录",
+ "methodEmailCode": "邮箱验证码",
+ "methodEmailCodeDesc": "邮箱接收验证码登录",
+ "methodGoogle": "Google 登录",
+ "methodGoogleDesc": "使用 Google 账号登录",
+ "methodGithub": "GitHub 登录",
+ "methodGithubDesc": "使用 GitHub 账号登录",
+ "smtpConfig": "SMTP 邮件配置",
+ "smtpConfigDesc": "启用邮箱验证码需要配置 SMTP",
+ "smtpHost": "SMTP 服务器",
+ "smtpHostPlaceholder": "smtp.example.com",
+ "smtpPort": "端口",
+ "smtpUsername": "用户名",
+ "smtpUsernamePlaceholder": "noreply@example.com",
+ "smtpPassword": "密码",
+ "smtpPasswordPlaceholder": "SMTP 密码",
+ "smtpFrom": "发件人地址",
+ "smtpFromPlaceholder": "noreply@example.com",
+ "smtpFromName": "发件人名称",
+ "smtpFromNamePlaceholder": "My Company",
+ "testSmtp": "发送测试邮件",
+ "testSmtpTo": "测试收件人",
+ "testSmtpToPlaceholder": "admin@example.com",
+ "testSmtpSending": "发送中...",
+ "testSmtpSuccess": "测试邮件已发送",
+ "testSmtpError": "发送失败: {error}",
+ "googleOAuth": "Google OAuth 配置",
+ "githubOAuth": "GitHub OAuth 配置",
+ "clientId": "Client ID",
+ "clientIdPlaceholder": "xxx.apps.googleusercontent.com",
+ "clientSecret": "Client Secret",
+ "clientSecretPlaceholder": "OAuth Client Secret",
+ "saveSettings": "保存设置",
+ "saving": "保存中...",
+ "saveSuccess": "设置已保存",
+ "saveError": "保存失败",
+ "validationEmailCodeNeedsSmtp": "启用邮箱验证码需要先配置 SMTP",
+ "validationGoogleNeedsCreds": "启用 Google 登录需要先配置 OAuth 凭据",
+ "validationGithubNeedsCreds": "启用 GitHub 登录需要先配置 OAuth 凭据",
+ "validationAtLeastOneMethod": "至少启用一种登录方式",
+ "smtpGuideTitle": "配置指南",
+ "smtpGuideGmail": "需要开启 Google 应用专用密码（App Password），不能使用 Google 账号密码",
+ "smtpGuideAWS": "在 AWS Console 的 SES 中创建 SMTP 凭据，region 替换为你的区域（如 us-east-1）",
+ "smtpGuideResend": "在 resend.com 创建 API Key，用作 SMTP 密码，用户名填 resend",
+ "smtpGuideAliyunTitle": "阿里云企业邮箱",
+ "smtpGuideAliyun": "使用阿里云企业邮箱的 SMTP 地址，端口 465（SSL）"
}
diff --git a/web/config/locale/messages/zh/usage.json b/web/config/locale/messages/zh/usage.json
index ca25678..4184fca 100644
--- a/web/config/locale/messages/zh/usage.json
+++ b/web/config/locale/messages/zh/usage.json
@@ -1,4 +1,24 @@
{
"title": "用量统计",
- "subtitle": "查看 API 调用和 Token 消耗"
+ "subtitle": "查看 API 调用和 Token 消耗",
+ "totalRequests": "总请求",
+ "totalTokens": "总 Token",
+ "promptTokens": "输入 Token",
+ "quotaCost": "额度消耗",
+ "byDay": "按日统计",
+ "byModel": "按模型统计",
+ "requests": "请求",
+ "recentLogs": "请求明细",
+ "time": "时间",
+ "model": "模型",
+ "tokenName": "Key 名称",
+ "promptTokensShort": "输入 Token",
+ "completionTokensShort": "输出 Token",
+ "cost": "费用",
+ "latency": "延迟",
+ "stream": "模式",
+ "last7days": "最近 7 天",
+ "last30days": "最近 30 天",
+ "viewByDay": "按日",
+ "viewByModel": "按模型"
}
diff --git a/web/modules/account/api/account-api.ts b/web/modules/account/api/account-api.ts
new file mode 100644
index 0000000..53a53f0
--- /dev/null
+++ b/web/modules/account/api/account-api.ts
@@ -0,0 +1,37 @@
+import { apiClient } from '@/shared/lib/api-client'
+import type {
+ AccountProfile,
+ ChangePasswordRequest,
+ ChangeEmailSendCodeRequest,
+ ChangeEmailConfirmRequest,
+} from '../types/account.types'
+
+// ── Mock data ────────────────────────────────────────────
+const MOCK_PROFILE: AccountProfile = {
+ id: 42,
+ username: 'demo_user',
+ email: 'demo@example.com',
+ has_password: true,
+ created_at: '2026-03-01T10:00:00Z',
+}
+
+const USE_MOCK = false
+// ── End mock ─────────────────────────────────────────────
+
+export const accountApi = {
+ // GET /api/account
+ getProfile: (): Promise =>
+ USE_MOCK ? Promise.resolve(MOCK_PROFILE) : apiClient.get('/api/account'),
+
+ // PUT /api/account/password
+ changePassword: (data: ChangePasswordRequest): Promise<{ status: string }> =>
+ USE_MOCK ? Promise.resolve({ status: 'ok' }) : apiClient.put('/api/account/password', data),
+
+ // POST /api/account/change-email
+ sendChangeEmailCode: (data: ChangeEmailSendCodeRequest): Promise<{ status: string; expires_in: number }> =>
+ USE_MOCK ? Promise.resolve({ status: 'ok', expires_in: 300 }) : apiClient.post('/api/account/change-email', data),
+
+ // PUT /api/account/email
+ confirmChangeEmail: (data: ChangeEmailConfirmRequest): Promise<{ status: string }> =>
+ USE_MOCK ? Promise.resolve({ status: 'ok' }) : apiClient.put('/api/account/email', data),
+}
diff --git a/web/modules/account/components/change-email-form.tsx b/web/modules/account/components/change-email-form.tsx
new file mode 100644
index 0000000..a167827
--- /dev/null
+++ b/web/modules/account/components/change-email-form.tsx
@@ -0,0 +1,113 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { useTranslations } from 'next-intl'
+import { useSendChangeEmailCode, useConfirmChangeEmail } from '../hooks/use-account'
+import { Mail } from 'lucide-react'
+
+export function ChangeEmailForm() {
+ const t = useTranslations('account')
+ const sendMutation = useSendChangeEmailCode()
+ const confirmMutation = useConfirmChangeEmail()
+
+ const [newEmail, setNewEmail] = useState('')
+ const [code, setCode] = useState('')
+ const [step, setStep] = useState<'email' | 'code'>('email')
+ const [countdown, setCountdown] = useState(0)
+ const [error, setError] = useState('')
+ const [success, setSuccess] = useState('')
+ const timerRef = useRef | null>(null)
+
+ const startCountdown = useCallback((seconds: number) => {
+ setCountdown(seconds)
+ if (timerRef.current) clearInterval(timerRef.current)
+ timerRef.current = setInterval(() => {
+ setCountdown((prev) => {
+ if (prev <= 1) { if (timerRef.current) clearInterval(timerRef.current); return 0 }
+ return prev - 1
+ })
+ }, 1000)
+ }, [])
+
+ useEffect(() => {
+ return () => { if (timerRef.current) clearInterval(timerRef.current) }
+ }, [])
+
+ const handleSendCode = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setError('')
+ try {
+ await sendMutation.mutateAsync({ new_email: newEmail })
+ setStep('code')
+ startCountdown(60)
+ } catch {
+ setError(t('sendingVerification'))
+ }
+ }
+
+ const handleConfirm = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setError('')
+ try {
+ await confirmMutation.mutateAsync({ new_email: newEmail, code })
+ setSuccess(t('emailUpdated'))
+ setStep('email')
+ setNewEmail('')
+ setCode('')
+ } catch {
+ setError(t('invalidCode'))
+ }
+ }
+
+ const inputClass = 'w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm outline-none transition focus:border-blue-400 focus:bg-white focus:ring-2 focus:ring-blue-100'
+
+ return (
+ =>
+ authHttp.get('/api/auth/providers', { headers: forwardedHostHeaders() }).then((r) => r.data),
+
+ /** 获取租户品牌信息 */
+ getBranding: (): Promise =>
+ authHttp.get('/api/auth/branding', { headers: forwardedHostHeaders() }).then((r) => r.data),
+
+ /** 密码登录 */
+ loginWithPassword: (data: PasswordLoginRequest): Promise =>
+ authHttp.post('/api/auth/login', data, { headers: forwardedHostHeaders() }).then((r) => r.data),
+
+ /** 发送邮箱验证码 */
+ sendCode: (data: SendCodeRequest): Promise =>
+ authHttp.post('/api/auth/send-code', data, { headers: forwardedHostHeaders() }).then((r) => r.data),
+
+ /** 验证邮箱验证码（登录 / 自动注册） */
+ verifyCode: (data: VerifyCodeRequest): Promise =>
+ authHttp.post('/api/auth/verify-code', data, { headers: forwardedHostHeaders() }).then((r) => r.data),
+
+ /** 新用户设置密码（需要 JWT） */
+ setPassword: (password: string, token: string): Promise<{ status: string }> =>
+ authHttp.post('/api/auth/set-password', { password }, {
+ headers: { ...forwardedHostHeaders(), Authorization: `Bearer ${token}` },
+ }).then((r) => r.data),
+}
diff --git a/web/modules/auth/index.ts b/web/modules/auth/index.ts
new file mode 100644
index 0000000..22ed025
--- /dev/null
+++ b/web/modules/auth/index.ts
@@ -0,0 +1,23 @@
+export { authApi } from './api/auth-api'
+export type {
+ AuthMethod,
+ SendCodeRequest,
+ SendCodeResponse,
+ VerifyCodeRequest,
+ VerifyCodeResponse,
+ PasswordLoginRequest,
+ PasswordLoginResponse,
+ SetPasswordRequest,
+ ProvidersResponse,
+ BrandingResponse,
+ AccountProfile,
+ ChangePasswordRequest,
+ ChangeEmailSendCodeRequest,
+ ChangeEmailConfirmRequest,
+ AuthSettingsResponse,
+ AuthSettingsRequest,
+ SmtpConfig,
+ OAuthProviderConfig,
+ TestSmtpRequest,
+ TestSmtpResponse,
+} from './types/auth.types'
diff --git a/web/modules/auth/types/auth.types.ts b/web/modules/auth/types/auth.types.ts
new file mode 100644
index 0000000..08425ff
--- /dev/null
+++ b/web/modules/auth/types/auth.types.ts
@@ -0,0 +1,136 @@
+import type { UserInfo } from '@/shared/providers/auth-provider'
+
+// ── Auth Method Types ────────────────────────────────────
+export type AuthMethod = 'password' | 'email_code' | 'google' | 'github'
+
+// ── Login Page APIs ──────────────────────────────────────
+
+/** GET /api/auth/providers — 返回租户可用的登录方式 */
+export interface ProvidersResponse {
+ methods: AuthMethod[]
+ providers: string[] // OAuth providers only (backward compat)
+}
+
+/** Tenant branding response */
+export interface BrandingResponse {
+ tenant_name: string
+ logo_url: string
+ theme_color: string
+}
+
+/** POST /api/auth/login (password) request */
+export interface PasswordLoginRequest {
+ account: string
+ password: string
+}
+
+/** POST /api/auth/login (password) response */
+export interface PasswordLoginResponse {
+ access_token: string
+ expires_in: number
+ user: UserInfo
+}
+
+/** POST /api/auth/send-code request */
+export interface SendCodeRequest {
+ email: string
+}
+
+/** POST /api/auth/send-code success response */
+export interface SendCodeResponse {
+ status: string
+ expires_in: number
+}
+
+/** POST /api/auth/verify-code request */
+export interface VerifyCodeRequest {
+ email: string
+ code: string
+}
+
+/** POST /api/auth/verify-code success response */
+export interface VerifyCodeResponse {
+ access_token: string
+ expires_in: number
+ is_new_user: boolean
+ user: UserInfo
+}
+
+/** POST /api/auth/set-password — 新用户设置密码 */
+export interface SetPasswordRequest {
+ password: string
+}
+
+// ── Account APIs ─────────────────────────────────────────
+
+/** GET /api/account */
+export interface AccountProfile {
+ id: number
+ username: string
+ email: string
+ has_password: boolean
+ created_at: string
+}
+
+/** PUT /api/account/password */
+export interface ChangePasswordRequest {
+ old_password: string
+ new_password: string
+}
+
+/** POST /api/account/change-email — 发验证码到新邮箱 */
+export interface ChangeEmailSendCodeRequest {
+ new_email: string
+}
+
+/** PUT /api/account/email — 确认更换邮箱 */
+export interface ChangeEmailConfirmRequest {
+ new_email: string
+ code: string
+}
+
+// ── Auth Settings APIs (console) ─────────────────────────
+
+export interface SmtpConfig {
+ host: string
+ port: number
+ username: string
+ password: string // GET 返回 "****"，PUT 发 "****" 表示不修改
+ from: string
+ from_name: string
+}
+
+export interface OAuthProviderConfig {
+ client_id: string
+ client_secret: string // GET 返回 "****"
+}
+
+/** GET /api/settings/auth response */
+export interface AuthSettingsResponse {
+ methods: AuthMethod[]
+ smtp: SmtpConfig
+ oauth: {
+ google: OAuthProviderConfig
+ github: OAuthProviderConfig
+ }
+}
+
+/** PUT /api/settings/auth request (partial — only send what changed) */
+export interface AuthSettingsRequest {
+ methods: AuthMethod[]
+ smtp?: Partial
+ oauth?: {
+ google?: Partial
+ github?: Partial
+ }
+}
+
+/** POST /api/settings/auth/test-smtp */
+export interface TestSmtpRequest {
+ to: string
+}
+
+export interface TestSmtpResponse {
+ status?: string
+ error?: string
+}
diff --git a/web/modules/billing/api/billing-api.ts b/web/modules/billing/api/billing-api.ts
new file mode 100644
index 0000000..26b675f
--- /dev/null
+++ b/web/modules/billing/api/billing-api.ts
@@ -0,0 +1,55 @@
+import { apiClient } from '@/shared/lib/api-client'
+import type { PaginatedResponse, PaginationParams } from '@/shared/types/api.types'
+import type {
+ Redemption,
+ CreateRedemptionRequest,
+ CreateRedemptionResponse,
+ RedeemResponse,
+} from '../types/billing.types'
+
+// ── Mock data ────────────────────────────────────────────
+const STATUS_POOL: (1 | 2 | 3)[] = [1, 1, 1, 2, 2, 3]
+
+const MOCK_REDEMPTIONS: Redemption[] = Array.from({ length: 15 }, (_, i) => ({
+ id: i + 1,
+ code: `AF-${String.fromCharCode(65 + (i % 26))}${Math.random().toString(36).slice(2, 8).toUpperCase()}`,
+ name: `充值码 ${i + 1}`,
+ quota: [1000, 5000, 10000, 50000][i % 4],
+ status: STATUS_POOL[i % STATUS_POOL.length],
+ created_at: new Date(Date.now() - i * 86400000 * 2).toISOString(),
+}))
+
+const USE_MOCK = true
+
+function mockPaginated(items: T[], params: PaginationParams): PaginatedResponse {
+ const start = (params.page - 1) * params.page_size
+ return {
+ items: items.slice(start, start + params.page_size),
+ pagination: { page: params.page, page_size: params.page_size, total: items.length },
+ }
+}
+// ── End mock ─────────────────────────────────────────────
+
+export const billingApi = {
+ // GET /api/redemptions
+ listRedemptions: (params: PaginationParams): Promise> =>
+ USE_MOCK
+ ? Promise.resolve(mockPaginated(MOCK_REDEMPTIONS, params))
+ : apiClient.get('/api/redemptions', { params }),
+
+ // POST /api/redemptions
+ createRedemptions: (data: CreateRedemptionRequest): Promise =>
+ USE_MOCK
+ ? Promise.resolve({
+ codes: Array.from({ length: data.count }, () =>
+ `AF-${Math.random().toString(36).slice(2, 10).toUpperCase()}`
+ ),
+ })
+ : apiClient.post('/api/redemptions', data),
+
+ // POST /api/redemptions/redeem
+ redeemCode: (code: string): Promise =>
+ USE_MOCK
+ ? Promise.resolve({ quota_added: 5000, new_quota: 105000 })
+ : apiClient.post('/api/redemptions/redeem', { code }),
+}
diff --git a/web/modules/billing/components/create-redemption-dialog.tsx b/web/modules/billing/components/create-redemption-dialog.tsx
new file mode 100644
index 0000000..a4cd118
--- /dev/null
+++ b/web/modules/billing/components/create-redemption-dialog.tsx
@@ -0,0 +1,150 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useCreateRedemptions } from '../hooks/use-billing'
+import { useAuth } from '@/shared/providers/auth-provider'
+import { Plus, X, Copy, Check } from 'lucide-react'
+
+export function CreateRedemptionDialog() {
+ const t = useTranslations('billing')
+ const tc = useTranslations('common')
+ const [open, setOpen] = useState(false)
+ const [name, setName] = useState('')
+ const [quota, setQuota] = useState('5000')
+ const [count, setCount] = useState('1')
+ const [createdCodes, setCreatedCodes] = useState([])
+ const [copied, setCopied] = useState(false)
+ const createMutation = useCreateRedemptions()
+ const { hasPermission } = useAuth()
+
+ if (!hasPermission('billing:manage')) return null
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ const result = await createMutation.mutateAsync({
+ name,
+ quota: parseInt(quota),
+ count: parseInt(count),
+ })
+ setCreatedCodes(result.codes)
+ }
+
+ const handleCopyAll = () => {
+ navigator.clipboard.writeText(createdCodes.join('\n'))
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+ }
+
+ const handleClose = () => {
+ setOpen(false)
+ setCreatedCodes([])
+ setName('')
+ setQuota('5000')
+ setCount('1')
+ }
+
+ return (
+ <>
+
+
+ {open && (
+ (null)
+ const redeemMutation = useRedeemCode()
+
+ const handleRedeem = async (e: React.FormEvent) => {
+ e.preventDefault()
+ const res = await redeemMutation.mutateAsync(code)
+ setResult(res)
+ setCode('')
+ }
+
+ return (
+ (null)
+
+ const handleCopy = (code: string, id: number) => {
+ navigator.clipboard.writeText(code)
+ setCopiedId(id)
+ setTimeout(() => setCopiedId(null), 2000)
+ }
+
+ if (!hasPermission('billing:manage')) return null
+
+ if (isLoading) {
+ return =>
+ USE_MOCK
+ ? Promise.resolve()
+ : apiClient.delete(`/api/pricing/models/${encodeURIComponent(model)}`),
+
+ // GET /api/pricing/groups
+ listGroups: (): Promise<{ items: PricingGroup[] }> =>
+ USE_MOCK
+ ? Promise.resolve({ items: MOCK_GROUPS })
+ : apiClient.get('/api/pricing/groups'),
+
+ // POST /api/pricing/groups
+ createGroup: (data: UpsertPricingGroupRequest): Promise =>
+ USE_MOCK
+ ? Promise.resolve({ ...data, id: Date.now(), description: data.description || '' })
+ : apiClient.post('/api/pricing/groups', data),
+
+ // PUT /api/pricing/groups/:id
+ updateGroup: (id: number, data: UpsertPricingGroupRequest): Promise =>
+ USE_MOCK
+ ? Promise.resolve({ ...data, id, description: data.description || '' })
+ : apiClient.put(`/api/pricing/groups/${id}`, data),
+
+ // DELETE /api/pricing/groups/:id
+ deleteGroup: (id: number): Promise =>
+ USE_MOCK
+ ? Promise.resolve()
+ : apiClient.delete(`/api/pricing/groups/${id}`),
+}
diff --git a/web/modules/pricing/components/group-ratio-table.tsx b/web/modules/pricing/components/group-ratio-table.tsx
new file mode 100644
index 0000000..9cfdbb3
--- /dev/null
+++ b/web/modules/pricing/components/group-ratio-table.tsx
@@ -0,0 +1,154 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { usePricingGroups, useCreatePricingGroup, useDeletePricingGroup } from '../hooks/use-pricing'
+import { useAuth } from '@/shared/providers/auth-provider'
+import { Trash2, Plus, X } from 'lucide-react'
+
+export function GroupRatioTable() {
+ const { data, isLoading } = usePricingGroups()
+ const createMutation = useCreatePricingGroup()
+ const deleteMutation = useDeletePricingGroup()
+ const { hasPermission } = useAuth()
+ const t = useTranslations('pricing')
+ const tc = useTranslations('common')
+
+ const [showForm, setShowForm] = useState(false)
+ const [name, setName] = useState('')
+ const [displayName, setDisplayName] = useState('')
+ const [ratio, setRatio] = useState('1.0')
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ await createMutation.mutateAsync({ name, display_name: displayName, ratio: parseFloat(ratio) })
+ setName('')
+ setDisplayName('')
+ setRatio('1.0')
+ setShowForm(false)
+ }
+
+ if (isLoading) {
+ return = {
+ text: 'bg-blue-50 text-blue-700',
+ image: 'bg-purple-50 text-purple-700',
+ audio: 'bg-amber-50 text-amber-700',
+ video: 'bg-green-50 text-green-700',
+}
+
+export function ModelPricingTable() {
+ const { data, isLoading } = useModelPricing()
+ const removeMutation = useRemoveModelOverride()
+ const { hasPermission } = useAuth()
+ const t = useTranslations('pricing')
+ const tc = useTranslations('common')
+
+ if (isLoading) {
+ return =>
+ USE_MOCK
+ ? Promise.resolve(MOCK_QUOTA)
+ : apiClient.get('/api/quota/me'),
+}
diff --git a/web/modules/quota/components/quota-bar.tsx b/web/modules/quota/components/quota-bar.tsx
new file mode 100644
index 0000000..0a11c55
--- /dev/null
+++ b/web/modules/quota/components/quota-bar.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { useMyQuota } from '../hooks/use-quota'
+import { cn } from '@/shared/lib/utils'
+import { Wallet } from 'lucide-react'
+
+function formatQuota(n: number): string {
+ if (n === -1) return '∞'
+ if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+ if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K'
+ return n.toLocaleString()
+}
+
+export function QuotaBar() {
+ const { data } = useMyQuota()
+
+ if (!data) return null
+
+ const { quota, used_quota } = data
+ const isUnlimited = quota === -1
+ const total = isUnlimited ? 0 : quota + used_quota
+ const pct = isUnlimited ? 0 : total > 0 ? (used_quota / total) * 100 : 0
+ const isLow = !isUnlimited && quota < used_quota * 0.2
+
+ return (
+ =>
+ USE_MOCK
+ ? Promise.resolve(MOCK_AUTH_SETTINGS)
+ : apiClient.get('/api/settings/auth'),
+
+ // PUT /api/settings/auth
+ updateAuthSettings: (data: AuthSettingsRequest): Promise<{ status: string }> =>
+ USE_MOCK
+ ? Promise.resolve({ status: 'ok' })
+ : apiClient.put('/api/settings/auth', data),
+
+ // POST /api/settings/auth/test-smtp
+ testSmtp: (data: TestSmtpRequest): Promise =>
+ USE_MOCK
+ ? Promise.resolve({ status: 'ok' })
+ : apiClient.post('/api/settings/auth/test-smtp', data),
+}
diff --git a/web/modules/settings/components/auth-settings-form.tsx b/web/modules/settings/components/auth-settings-form.tsx
new file mode 100644
index 0000000..26d8106
--- /dev/null
+++ b/web/modules/settings/components/auth-settings-form.tsx
@@ -0,0 +1,306 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { useAuthSettings, useUpdateAuthSettings, useTestSmtp } from '../hooks/use-settings'
+import { useAuth } from '@/shared/providers/auth-provider'
+import type { AuthMethod, SmtpConfig, OAuthProviderConfig } from '../types/settings.types'
+import { cn } from '@/shared/lib/utils'
+import { Check, X, Send, Loader2, ChevronDown, BookOpen } from 'lucide-react'
+
+const METHOD_KEYS: { method: AuthMethod; labelKey: string; descKey: string }[] = [
+ { method: 'password', labelKey: 'methodPassword', descKey: 'methodPasswordDesc' },
+ { method: 'email_code', labelKey: 'methodEmailCode', descKey: 'methodEmailCodeDesc' },
+ { method: 'google', labelKey: 'methodGoogle', descKey: 'methodGoogleDesc' },
+ { method: 'github', labelKey: 'methodGithub', descKey: 'methodGithubDesc' },
+]
+
+const EMPTY_SMTP: SmtpConfig = { host: '', port: 587, username: '', password: '', from: '', from_name: '' }
+const EMPTY_OAUTH: OAuthProviderConfig = { client_id: '', client_secret: '' }
+
+export function AuthSettingsForm() {
+ const t = useTranslations('settings')
+ const tc = useTranslations('common')
+ const { hasPermission } = useAuth()
+ const { data, isLoading } = useAuthSettings()
+ const updateMutation = useUpdateAuthSettings()
+ const testSmtpMutation = useTestSmtp()
+
+ const [methods, setMethods] = useState(['password'])
+ const [smtp, setSmtp] = useState(EMPTY_SMTP)
+ const [google, setGoogle] = useState(EMPTY_OAUTH)
+ const [github, setGithub] = useState(EMPTY_OAUTH)
+ const [testEmail, setTestEmail] = useState('')
+ const [validationError, setValidationError] = useState('')
+ const [saveMsg, setSaveMsg] = useState('')
+ const [showGuide, setShowGuide] = useState(false)
+
+ // Load data
+ useEffect(() => {
+ if (data) {
+ setMethods(data.methods)
+ setSmtp(data.smtp)
+ setGoogle(data.oauth.google)
+ setGithub(data.oauth.github)
+ }
+ }, [data])
+
+ if (!hasPermission('settings:update')) return null
+
+ if (isLoading) {
+ return =>
+ USE_MOCK
+ ? Promise.resolve(mockUsageResponse(params))
+ : apiClient.get('/api/usage', { params }),
+
+ // Aggregated buckets (前端扩展，后端可后续添加)
+ getBuckets: (params: UsageQueryParams & { group_by: 'day' | 'model' }): Promise =>
+ USE_MOCK
+ ? Promise.resolve(params.group_by === 'model' ? MOCK_MODEL_BUCKETS : mockDailyBuckets(params.start_date, params.end_date))
+ : apiClient.get('/api/usage/buckets', { params }),
+}
diff --git a/web/modules/usage/components/usage-chart.tsx b/web/modules/usage/components/usage-chart.tsx
new file mode 100644
index 0000000..85b4d55
--- /dev/null
+++ b/web/modules/usage/components/usage-chart.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useUsageBuckets } from '../hooks/use-usage'
+import type { UsageQueryParams } from '../types/usage.types'
+
+interface Props {
+ params: UsageQueryParams & { group_by: 'day' | 'model' }
+}
+
+function formatNumber(n: number): string {
+ if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+ if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K'
+ return n.toString()
+}
+
+export function UsageChart({ params }: Props) {
+ const { data, isLoading } = useUsageBuckets(params)
+ const t = useTranslations('usage')
+ const tc = useTranslations('common')
+
+ if (isLoading) {
+ return
-
- {t('title')}
-{t('subtitle')}
-
-
)
}
diff --git a/web/app/[locale]/(landing)/page.tsx b/web/app/[locale]/(landing)/page.tsx
index 6fc8939..8fc3272 100644
--- a/web/app/[locale]/(landing)/page.tsx
+++ b/web/app/[locale]/(landing)/page.tsx
@@ -21,10 +21,28 @@ const defaultBranding: TenantBranding = {
}
function useTenantBranding(): TenantBranding {
- // TODO: 从后端 GET /api/auth/branding?tenant=xxx 获取租户品牌配置
- // 根据当前域名自动识别租户，返回 name/logo/domain/themeColor
- // 代理商域名访问时，这里会返回代理商的品牌信息
- return defaultBranding
+ const [brand, setBrand] = useState{tc('developing')}
+
+
+
+
+
+ {t('title')}
+{t('subtitle')}
+
+
+ {([['7d', t('last7days')], ['30d', t('last30days')]] as const).map(([key, label]) => (
+
+ ))}
+
+
+ {([['day', t('viewByDay')], ['model', t('viewByModel')]] as const).map(([key, label]) => (
+
+ ))}
+
+
+
+ )
+}
diff --git a/web/modules/account/components/change-password-form.tsx b/web/modules/account/components/change-password-form.tsx
new file mode 100644
index 0000000..502d38f
--- /dev/null
+++ b/web/modules/account/components/change-password-form.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useAccountProfile, useChangePassword } from '../hooks/use-account'
+import { Lock } from 'lucide-react'
+import { AxiosError } from 'axios'
+
+export function ChangePasswordForm() {
+ const t = useTranslations('account')
+ const { data: profile } = useAccountProfile()
+ const changeMutation = useChangePassword()
+
+ const [oldPassword, setOldPassword] = useState('')
+ const [newPassword, setNewPassword] = useState('')
+ const [confirmPwd, setConfirmPwd] = useState('')
+ const [error, setError] = useState('')
+ const [success, setSuccess] = useState('')
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ setError('')
+ setSuccess('')
+
+ if (newPassword.length < 6) { setError(t('passwordTooShort')); return }
+ if (newPassword !== confirmPwd) { setError(t('passwordMismatch')); return }
+
+ try {
+ await changeMutation.mutateAsync({ old_password: oldPassword, new_password: newPassword })
+ setSuccess(t('passwordUpdated'))
+ setOldPassword('')
+ setNewPassword('')
+ setConfirmPwd('')
+ } catch (err) {
+ if (err instanceof AxiosError && err.response?.status === 401) {
+ setError(t('invalidOldPassword'))
+ } else {
+ setError(t('changePasswordError'))
+ }
+ }
+ }
+
+ const inputClass = 'w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2.5 text-sm outline-none transition focus:border-blue-400 focus:bg-white focus:ring-2 focus:ring-blue-100'
+
+ return (
+
+
+ {t('changeEmail')}
+{t('changeEmailDesc')}
+ + {step === 'email' ? ( + + ) : ( + + )} +
+
+ )
+}
diff --git a/web/modules/account/components/profile-card.tsx b/web/modules/account/components/profile-card.tsx
new file mode 100644
index 0000000..178cdf6
--- /dev/null
+++ b/web/modules/account/components/profile-card.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useAccountProfile } from '../hooks/use-account'
+import { User } from 'lucide-react'
+
+export function ProfileCard() {
+ const { data, isLoading } = useAccountProfile()
+ const t = useTranslations('account')
+ const tc = useTranslations('common')
+
+ if (isLoading) {
+ return
+
+ {t('changePassword')}
+{t('changePasswordDesc')}
+ + {profile && !profile.has_password && ( +{t('noPasswordSet')}
+ )} + + +{tc('loading')}
+ }
+
+ if (!data) return null
+
+ return (
+
+
+ )
+}
diff --git a/web/modules/account/hooks/use-account.ts b/web/modules/account/hooks/use-account.ts
new file mode 100644
index 0000000..54ec73e
--- /dev/null
+++ b/web/modules/account/hooks/use-account.ts
@@ -0,0 +1,32 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { accountApi } from '../api/account-api'
+import type { ChangePasswordRequest, ChangeEmailSendCodeRequest, ChangeEmailConfirmRequest } from '../types/account.types'
+
+export function useAccountProfile() {
+ return useQuery({
+ queryKey: ['account', 'profile'],
+ queryFn: () => accountApi.getProfile(),
+ })
+}
+
+export function useChangePassword() {
+ return useMutation({
+ mutationFn: (data: ChangePasswordRequest) => accountApi.changePassword(data),
+ })
+}
+
+export function useSendChangeEmailCode() {
+ return useMutation({
+ mutationFn: (data: ChangeEmailSendCodeRequest) => accountApi.sendChangeEmailCode(data),
+ })
+}
+
+export function useConfirmChangeEmail() {
+ const qc = useQueryClient()
+ return useMutation({
+ mutationFn: (data: ChangeEmailConfirmRequest) => accountApi.confirmChangeEmail(data),
+ onSuccess: () => {
+ qc.invalidateQueries({ queryKey: ['account', 'profile'] })
+ },
+ })
+}
diff --git a/web/modules/account/index.ts b/web/modules/account/index.ts
new file mode 100644
index 0000000..694f550
--- /dev/null
+++ b/web/modules/account/index.ts
@@ -0,0 +1,5 @@
+export { ProfileCard } from './components/profile-card'
+export { ChangePasswordForm } from './components/change-password-form'
+export { ChangeEmailForm } from './components/change-email-form'
+export { useAccountProfile } from './hooks/use-account'
+export type { AccountProfile } from './types/account.types'
diff --git a/web/modules/account/types/account.types.ts b/web/modules/account/types/account.types.ts
new file mode 100644
index 0000000..0387378
--- /dev/null
+++ b/web/modules/account/types/account.types.ts
@@ -0,0 +1,6 @@
+export type {
+ AccountProfile,
+ ChangePasswordRequest,
+ ChangeEmailSendCodeRequest,
+ ChangeEmailConfirmRequest,
+} from '@/modules/auth/types/auth.types'
diff --git a/web/modules/auth/api/auth-api.ts b/web/modules/auth/api/auth-api.ts
new file mode 100644
index 0000000..b9ced50
--- /dev/null
+++ b/web/modules/auth/api/auth-api.ts
@@ -0,0 +1,51 @@
+import axios from 'axios'
+import type {
+ SendCodeRequest,
+ SendCodeResponse,
+ VerifyCodeRequest,
+ VerifyCodeResponse,
+ PasswordLoginRequest,
+ PasswordLoginResponse,
+ ProvidersResponse,
+ BrandingResponse,
+} from '../types/auth.types'
+
+// Auth API 使用独立 axios（不走 apiClient 的 401 拦截器，因为登录页本身就是未认证状态）
+const authHttp = axios.create({
+ baseURL: '',
+ timeout: 15000,
+ headers: { 'Content-Type': 'application/json' },
+})
+
+function forwardedHostHeaders() {
+ if (typeof window === 'undefined') return {}
+ return { 'X-Forwarded-Host': window.location.host }
+}
+
+export const authApi = {
+ /** 获取启用的登录方式 + OAuth providers */
+ getProviders: (): Promise
+
+
+
+
+
+ {data.username}
+{data.email}
+
+
+
+
+
+
+ {t('username')}
+{data.username}
+
+
+ {t('email')}
+{data.email}
+
+
+ {t('createdAt')}
+{new Date(data.created_at).toLocaleDateString()}
+
+
+ )}
+
+ )
+}
diff --git a/web/modules/billing/components/redeem-code-card.tsx b/web/modules/billing/components/redeem-code-card.tsx
new file mode 100644
index 0000000..98f9360
--- /dev/null
+++ b/web/modules/billing/components/redeem-code-card.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRedeemCode } from '../hooks/use-billing'
+import { Gift, Check } from 'lucide-react'
+import type { RedeemResponse } from '../types/billing.types'
+
+export function RedeemCodeCard() {
+ const t = useTranslations('billing')
+ const [code, setCode] = useState('')
+ const [result, setResult] = useState e.stopPropagation()}>
+
+
+
+
+ {createdCodes.length > 0 ? (
+ + {createdCodes.length > 0 ? t('createSuccess') : t('createCodeTitle')} +
+ +
+
+ ) : (
+
+ )}
+ {t('codesGenerated', { count: createdCodes.length })}
+
+ {createdCodes.map((code) => (
+
+ {code}
+ ))}
+
+
+
+
+
+
+ )
+}
diff --git a/web/modules/billing/components/redemption-table.tsx b/web/modules/billing/components/redemption-table.tsx
new file mode 100644
index 0000000..cf7d5f2
--- /dev/null
+++ b/web/modules/billing/components/redemption-table.tsx
@@ -0,0 +1,101 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRedemptions } from '../hooks/use-billing'
+import { useAuth } from '@/shared/providers/auth-provider'
+import { cn } from '@/shared/lib/utils'
+import { Copy, Check } from 'lucide-react'
+
+const STATUS_MAP = {
+ 1: { key: 'available', style: 'bg-green-50 text-green-700' },
+ 2: { key: 'used', style: 'bg-slate-100 text-slate-500' },
+ 3: { key: 'disabled', style: 'bg-red-50 text-red-600' },
+} as const
+
+export function RedemptionTable() {
+ const [page] = useState(1)
+ const { data, isLoading } = useRedemptions({ page, page_size: 20 })
+ const { hasPermission } = useAuth()
+ const t = useTranslations('billing')
+ const tc = useTranslations('common')
+
+ const [copiedId, setCopiedId] = useState
+
+
+ {result ? (
+ {t('redeemTitle')}
+
+
+ ) : (
+
+ )}
+ {tc('loading')}
+ }
+
+ if (!data?.items?.length) {
+ return (
+
+
+ )
+ }
+
+ return (
+ {tc('noData')}
+
+
+ )
+}
diff --git a/web/modules/billing/hooks/use-billing.ts b/web/modules/billing/hooks/use-billing.ts
new file mode 100644
index 0000000..24b8ebe
--- /dev/null
+++ b/web/modules/billing/hooks/use-billing.ts
@@ -0,0 +1,31 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { billingApi } from '../api/billing-api'
+import type { PaginationParams } from '@/shared/types/api.types'
+import type { CreateRedemptionRequest } from '../types/billing.types'
+
+export function useRedemptions(params: PaginationParams) {
+ return useQuery({
+ queryKey: ['redemptions', params],
+ queryFn: () => billingApi.listRedemptions(params),
+ })
+}
+
+export function useCreateRedemptions() {
+ const qc = useQueryClient()
+ return useMutation({
+ mutationFn: (data: CreateRedemptionRequest) => billingApi.createRedemptions(data),
+ onSuccess: () => {
+ qc.invalidateQueries({ queryKey: ['redemptions'] })
+ },
+ })
+}
+
+export function useRedeemCode() {
+ const qc = useQueryClient()
+ return useMutation({
+ mutationFn: (code: string) => billingApi.redeemCode(code),
+ onSuccess: () => {
+ qc.invalidateQueries({ queryKey: ['quota'] })
+ },
+ })
+}
diff --git a/web/modules/billing/index.ts b/web/modules/billing/index.ts
new file mode 100644
index 0000000..3a6fda3
--- /dev/null
+++ b/web/modules/billing/index.ts
@@ -0,0 +1,5 @@
+export { RedemptionTable } from './components/redemption-table'
+export { CreateRedemptionDialog } from './components/create-redemption-dialog'
+export { RedeemCodeCard } from './components/redeem-code-card'
+export { useRedemptions, useRedeemCode } from './hooks/use-billing'
+export type { Redemption, CreateRedemptionRequest, RedeemResponse } from './types/billing.types'
diff --git a/web/modules/billing/types/billing.types.ts b/web/modules/billing/types/billing.types.ts
new file mode 100644
index 0000000..016a98e
--- /dev/null
+++ b/web/modules/billing/types/billing.types.ts
@@ -0,0 +1,28 @@
+/** 兑换码 */
+export interface Redemption {
+ id: number
+ code: string
+ name: string
+ quota: number
+ status: 1 | 2 | 3 // 1=可用 2=已用 3=禁用
+ created_at: string
+}
+
+/** 批量创建兑换码 */
+export interface CreateRedemptionRequest {
+ name: string
+ quota: number
+ count: number
+ expires_at?: string
+}
+
+/** 批量创建返回 */
+export interface CreateRedemptionResponse {
+ codes: string[]
+}
+
+/** 兑换返回 */
+export interface RedeemResponse {
+ quota_added: number
+ new_quota: number
+}
diff --git a/web/modules/pricing/api/pricing-api.ts b/web/modules/pricing/api/pricing-api.ts
new file mode 100644
index 0000000..5a6ef0e
--- /dev/null
+++ b/web/modules/pricing/api/pricing-api.ts
@@ -0,0 +1,72 @@
+import { apiClient } from '@/shared/lib/api-client'
+import type {
+ ModelPricing,
+ SetModelPricingRequest,
+ PricingGroup,
+ UpsertPricingGroupRequest,
+} from '../types/pricing.types'
+
+// ── Mock data (后端未实现时使用) ──────────────────────────
+const MOCK_MODEL_PRICING: ModelPricing[] = [
+ { model: 'gpt-4o', model_ratio: 2.5, completion_ratio: 3, model_type: 'text', enabled: true, is_override: false },
+ { model: 'gpt-4o-mini', model_ratio: 0.15, completion_ratio: 0.6, model_type: 'text', enabled: true, is_override: false },
+ { model: 'claude-sonnet-4-6', model_ratio: 3.0, completion_ratio: 5, model_type: 'text', enabled: true, is_override: false },
+ { model: 'claude-haiku-4-5', model_ratio: 0.8, completion_ratio: 4, model_type: 'text', enabled: true, is_override: false },
+ { model: 'deepseek-chat', model_ratio: 0.14, completion_ratio: 2, model_type: 'text', enabled: true, is_override: false },
+ { model: 'deepseek-reasoner', model_ratio: 0.55, completion_ratio: 4, model_type: 'text', enabled: true, is_override: false },
+ { model: 'dall-e-3', model_ratio: 20, completion_ratio: 1, model_type: 'image', enabled: true, is_override: false },
+ { model: 'gpt-4o-audio', model_ratio: 2.5, completion_ratio: 10, model_type: 'audio', enabled: true, is_override: false },
+]
+
+const MOCK_GROUPS: PricingGroup[] = [
+ { id: 1, name: 'default', display_name: '标准', ratio: 1.0, description: '标准定价' },
+ { id: 2, name: 'vip', display_name: 'VIP', ratio: 0.85, description: 'VIP 折扣' },
+ { id: 3, name: 'wholesale', display_name: '批发', ratio: 0.5, description: '代理商批发价' },
+]
+
+const USE_MOCK = true
+// ── End mock ──────────────────────────────────────────────
+
+export const pricingApi = {
+ // GET /api/pricing/models
+ listModels: (): Promise<{ items: ModelPricing[] }> =>
+ USE_MOCK
+ ? Promise.resolve({ items: MOCK_MODEL_PRICING })
+ : apiClient.get('/api/pricing/models'),
+
+ // PUT /api/pricing/models — set override
+ setModelOverride: (data: SetModelPricingRequest): Promise<{ status: string }> =>
+ USE_MOCK
+ ? Promise.resolve({ status: 'ok' })
+ : apiClient.put('/api/pricing/models', data),
+
+ // DELETE /api/pricing/models/:model — remove override
+ removeModelOverride: (model: string): Promise
+
+
+
+
+ {data.pagination && (
+ | {t('codeName')} | +{t('code')} | +{t('quota')} | +{tc('status')} | +{t('createdAt')} | +
|---|---|---|---|---|
| {item.name} | +
+
+
+
+ {item.code.slice(0, 12)}...
+
+
+ |
+ {item.quota.toLocaleString()} | ++ + {t(statusInfo.key)} + + | ++ {new Date(item.created_at).toLocaleDateString()} + | +
+ {tc('total', { count: data.pagination.total })}
+
+ )}
+ {tc('loading')}
+ }
+
+ const items = data?.items
+
+ return (
+
+
+ )
+}
diff --git a/web/modules/pricing/components/model-pricing-table.tsx b/web/modules/pricing/components/model-pricing-table.tsx
new file mode 100644
index 0000000..da9fa08
--- /dev/null
+++ b/web/modules/pricing/components/model-pricing-table.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useModelPricing, useRemoveModelOverride } from '../hooks/use-pricing'
+import { useAuth } from '@/shared/providers/auth-provider'
+import { cn } from '@/shared/lib/utils'
+import { Trash2 } from 'lucide-react'
+
+const TYPE_STYLES: Record
+
+
+ {showForm && (
+ {t('groupRatios')}
+ {hasPermission('pricing:update') && ( + + )} +
+
+
+ )}
+
+
+
+
+
+
+ | {t('groupName')} | +{t('displayName')} | +{t('ratio')} | +{t('priceEffect')} | + {hasPermission('pricing:update') && ( +{tc('actions')} | + )} +
|---|---|---|---|---|
+
+ {group.name}
+
+ |
+ {group.display_name} | +{group.ratio} | ++ {group.ratio === 1 ? t('standardPrice') : group.ratio < 1 ? t('discount', { pct: Math.round((1 - group.ratio) * 100) }) : t('markup', { pct: Math.round((group.ratio - 1) * 100) })} + | + {hasPermission('pricing:update') && ( ++ {group.name !== 'default' && ( + + )} + | + )} +
{tc('loading')}
+ }
+
+ const items = data?.items
+ if (!items?.length) {
+ return (
+
+
+ )
+ }
+
+ return (
+ {tc('noData')}
+
+
+
+
+
+ )
+}
diff --git a/web/modules/pricing/hooks/use-pricing.ts b/web/modules/pricing/hooks/use-pricing.ts
new file mode 100644
index 0000000..b52a7ee
--- /dev/null
+++ b/web/modules/pricing/hooks/use-pricing.ts
@@ -0,0 +1,57 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { pricingApi } from '../api/pricing-api'
+import type { SetModelPricingRequest, UpsertPricingGroupRequest } from '../types/pricing.types'
+
+export function useModelPricing() {
+ return useQuery({
+ queryKey: ['pricing', 'models'],
+ queryFn: () => pricingApi.listModels(),
+ })
+}
+
+export function useSetModelOverride() {
+ const qc = useQueryClient()
+ return useMutation({
+ mutationFn: (data: SetModelPricingRequest) => pricingApi.setModelOverride(data),
+ onSuccess: () => {
+ qc.invalidateQueries({ queryKey: ['pricing', 'models'] })
+ },
+ })
+}
+
+export function useRemoveModelOverride() {
+ const qc = useQueryClient()
+ return useMutation({
+ mutationFn: (model: string) => pricingApi.removeModelOverride(model),
+ onSuccess: () => {
+ qc.invalidateQueries({ queryKey: ['pricing', 'models'] })
+ },
+ })
+}
+
+export function usePricingGroups() {
+ return useQuery({
+ queryKey: ['pricing', 'groups'],
+ queryFn: () => pricingApi.listGroups(),
+ })
+}
+
+export function useCreatePricingGroup() {
+ const qc = useQueryClient()
+ return useMutation({
+ mutationFn: (data: UpsertPricingGroupRequest) => pricingApi.createGroup(data),
+ onSuccess: () => {
+ qc.invalidateQueries({ queryKey: ['pricing', 'groups'] })
+ },
+ })
+}
+
+export function useDeletePricingGroup() {
+ const qc = useQueryClient()
+ return useMutation({
+ mutationFn: (id: number) => pricingApi.deleteGroup(id),
+ onSuccess: () => {
+ qc.invalidateQueries({ queryKey: ['pricing', 'groups'] })
+ },
+ })
+}
diff --git a/web/modules/pricing/index.ts b/web/modules/pricing/index.ts
new file mode 100644
index 0000000..4fc2c72
--- /dev/null
+++ b/web/modules/pricing/index.ts
@@ -0,0 +1,4 @@
+export { ModelPricingTable } from './components/model-pricing-table'
+export { GroupRatioTable } from './components/group-ratio-table'
+export { useModelPricing, usePricingGroups } from './hooks/use-pricing'
+export type { ModelPricing, PricingGroup } from './types/pricing.types'
diff --git a/web/modules/pricing/types/pricing.types.ts b/web/modules/pricing/types/pricing.types.ts
new file mode 100644
index 0000000..9b69e50
--- /dev/null
+++ b/web/modules/pricing/types/pricing.types.ts
@@ -0,0 +1,33 @@
+/** 模型定价（全局 + 租户覆盖合并后） */
+export interface ModelPricing {
+ model: string
+ model_ratio: number
+ completion_ratio: number
+ model_type: 'text' | 'image' | 'audio' | 'video'
+ enabled: boolean
+ is_override: boolean
+}
+
+/** 设置模型定价覆盖 */
+export interface SetModelPricingRequest {
+ model: string
+ model_ratio: number
+ completion_ratio: number
+}
+
+/** 分组倍率 */
+export interface PricingGroup {
+ id: number
+ name: string
+ display_name: string
+ ratio: number
+ description: string
+}
+
+/** 创建/更新分组 */
+export interface UpsertPricingGroupRequest {
+ name: string
+ display_name: string
+ ratio: number
+ description?: string
+}
diff --git a/web/modules/quota/api/quota-api.ts b/web/modules/quota/api/quota-api.ts
new file mode 100644
index 0000000..91bd86f
--- /dev/null
+++ b/web/modules/quota/api/quota-api.ts
@@ -0,0 +1,21 @@
+import { apiClient } from '@/shared/lib/api-client'
+import type { QuotaInfo } from '../types/quota.types'
+
+// ── Mock data ────────────────────────────────────────────
+const MOCK_QUOTA: QuotaInfo = {
+ quota: 500000,
+ used_quota: 123456,
+ pricing_group: 'default',
+ group_ratio: 1.0,
+}
+
+const USE_MOCK = true
+// ── End mock ─────────────────────────────────────────────
+
+export const quotaApi = {
+ // GET /api/quota/me
+ getMyQuota: (): Promise| {t('model')} | +{t('modelType')} | +{t('modelRatio')} | +{t('completionRatio')} | +{t('inputCost')} | +{t('outputCost')} | +{tc('status')} | + {hasPermission('pricing:update') && ( +{tc('actions')} | + )} +
|---|---|---|---|---|---|---|---|
|
+
+
+
+ {item.model}
+
+ {item.is_override && (
+
+ {t('override')}
+
+ )}
+ |
+ + + {item.model_type} + + | +{item.model_ratio} | +{item.completion_ratio}x | +${inputPer1m}/1M | +${outputPer1m}/1M | ++ + {item.enabled ? tc('enable') : tc('disable')} + + | + {hasPermission('pricing:update') && ( ++ {item.is_override && ( + + )} + | + )} +
+
+ )
+}
diff --git a/web/modules/quota/hooks/use-quota.ts b/web/modules/quota/hooks/use-quota.ts
new file mode 100644
index 0000000..46ee6b3
--- /dev/null
+++ b/web/modules/quota/hooks/use-quota.ts
@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query'
+import { quotaApi } from '../api/quota-api'
+
+export function useMyQuota() {
+ return useQuery({
+ queryKey: ['quota', 'me'],
+ queryFn: () => quotaApi.getMyQuota(),
+ staleTime: 30 * 1000,
+ })
+}
diff --git a/web/modules/quota/index.ts b/web/modules/quota/index.ts
new file mode 100644
index 0000000..a3114a6
--- /dev/null
+++ b/web/modules/quota/index.ts
@@ -0,0 +1,3 @@
+export { QuotaBar } from './components/quota-bar'
+export { useMyQuota } from './hooks/use-quota'
+export type { QuotaInfo } from './types/quota.types'
diff --git a/web/modules/quota/types/quota.types.ts b/web/modules/quota/types/quota.types.ts
new file mode 100644
index 0000000..0d7ce05
--- /dev/null
+++ b/web/modules/quota/types/quota.types.ts
@@ -0,0 +1,7 @@
+/** GET /api/quota/me 返回 */
+export interface QuotaInfo {
+ quota: number
+ used_quota: number
+ pricing_group: string
+ group_ratio: number
+}
diff --git a/web/modules/settings/api/settings-api.ts b/web/modules/settings/api/settings-api.ts
new file mode 100644
index 0000000..aabde45
--- /dev/null
+++ b/web/modules/settings/api/settings-api.ts
@@ -0,0 +1,47 @@
+import { apiClient } from '@/shared/lib/api-client'
+import type {
+ AuthSettingsResponse,
+ AuthSettingsRequest,
+ TestSmtpRequest,
+ TestSmtpResponse,
+} from '../types/settings.types'
+
+// ── Mock data ────────────────────────────────────────────
+const MOCK_AUTH_SETTINGS: AuthSettingsResponse = {
+ methods: ['password'],
+ smtp: {
+ host: '',
+ port: 587,
+ username: '',
+ password: '',
+ from: '',
+ from_name: '',
+ },
+ oauth: {
+ google: { client_id: '', client_secret: '' },
+ github: { client_id: '', client_secret: '' },
+ },
+}
+
+const USE_MOCK = false
+// ── End mock ─────────────────────────────────────────────
+
+export const settingsApi = {
+ // GET /api/settings/auth
+ getAuthSettings: (): Promise
+
+ {!isUnlimited && (
+
+
+
+ {formatQuota(quota)}
+
+
+
+
+ )}
+
+ 已用 {formatQuota(used_quota)}
+ {!isUnlimited && 总 {formatQuota(total)}}
+
+ {tc('loading')}
+ }
+
+ const toggleMethod = (method: AuthMethod) => {
+ setMethods((prev) =>
+ prev.includes(method) ? prev.filter((m) => m !== method) : [...prev, method],
+ )
+ setValidationError('')
+ }
+
+ const validate = (): string | null => {
+ if (methods.length === 0) return t('validationAtLeastOneMethod')
+ if (methods.includes('email_code') && !smtp.host && !data?.smtp.host) return t('validationEmailCodeNeedsSmtp')
+ if (methods.includes('google') && !google.client_id && !data?.oauth.google.client_id) return t('validationGoogleNeedsCreds')
+ if (methods.includes('github') && !github.client_id && !data?.oauth.github.client_id) return t('validationGithubNeedsCreds')
+ return null
+ }
+
+ const handleSave = async () => {
+ const err = validate()
+ if (err) { setValidationError(err); return }
+ setValidationError('')
+ setSaveMsg('')
+
+ try {
+ await updateMutation.mutateAsync({
+ methods,
+ smtp,
+ oauth: { google, github },
+ })
+ setSaveMsg(t('saveSuccess'))
+ setTimeout(() => setSaveMsg(''), 3000)
+ } catch {
+ setSaveMsg(t('saveError'))
+ }
+ }
+
+ const handleTestSmtp = async () => {
+ if (!testEmail) return
+ await testSmtpMutation.mutateAsync({ to: testEmail })
+ }
+
+ const inputClass = 'w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm outline-none transition focus:border-blue-400 focus:bg-white focus:ring-2 focus:ring-blue-100'
+
+ return (
+
+ {/* Login Methods */}
+
+
+
+ {/* SMTP Config — show when email_code enabled */}
+ {methods.includes('email_code') && (
+
+
+ )}
+
+ {/* Google OAuth — show when google enabled */}
+ {methods.includes('google') && (
+
+
+ )}
+
+ {/* GitHub OAuth — show when github enabled */}
+ {methods.includes('github') && (
+
+
+ )}
+
+ {/* Validation error + Save button */}
+
+ )
+}
diff --git a/web/modules/settings/hooks/use-settings.ts b/web/modules/settings/hooks/use-settings.ts
new file mode 100644
index 0000000..ae08650
--- /dev/null
+++ b/web/modules/settings/hooks/use-settings.ts
@@ -0,0 +1,26 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { settingsApi } from '../api/settings-api'
+import type { AuthSettingsRequest, TestSmtpRequest } from '../types/settings.types'
+
+export function useAuthSettings() {
+ return useQuery({
+ queryKey: ['settings', 'auth'],
+ queryFn: () => settingsApi.getAuthSettings(),
+ })
+}
+
+export function useUpdateAuthSettings() {
+ const qc = useQueryClient()
+ return useMutation({
+ mutationFn: (data: AuthSettingsRequest) => settingsApi.updateAuthSettings(data),
+ onSuccess: () => {
+ qc.invalidateQueries({ queryKey: ['settings', 'auth'] })
+ },
+ })
+}
+
+export function useTestSmtp() {
+ return useMutation({
+ mutationFn: (data: TestSmtpRequest) => settingsApi.testSmtp(data),
+ })
+}
diff --git a/web/modules/settings/index.ts b/web/modules/settings/index.ts
new file mode 100644
index 0000000..842876b
--- /dev/null
+++ b/web/modules/settings/index.ts
@@ -0,0 +1,3 @@
+export { AuthSettingsForm } from './components/auth-settings-form'
+export { useAuthSettings, useUpdateAuthSettings, useTestSmtp } from './hooks/use-settings'
+export type { AuthSettingsResponse, AuthSettingsRequest } from './types/settings.types'
diff --git a/web/modules/settings/types/settings.types.ts b/web/modules/settings/types/settings.types.ts
new file mode 100644
index 0000000..101a116
--- /dev/null
+++ b/web/modules/settings/types/settings.types.ts
@@ -0,0 +1,10 @@
+// Re-export auth settings types from auth module
+export type {
+ AuthSettingsResponse,
+ AuthSettingsRequest,
+ TestSmtpRequest,
+ TestSmtpResponse,
+ AuthMethod,
+ SmtpConfig,
+ OAuthProviderConfig,
+} from '@/modules/auth/types/auth.types'
diff --git a/web/modules/tokens/components/create-token-dialog.tsx b/web/modules/tokens/components/create-token-dialog.tsx
index 17c39da..4272eee 100644
--- a/web/modules/tokens/components/create-token-dialog.tsx
+++ b/web/modules/tokens/components/create-token-dialog.tsx
@@ -21,7 +21,7 @@ export function CreateTokenDialog() {
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
const result = await createMutation.mutateAsync({ name })
- setCreatedKey(result.full_key)
+ setCreatedKey(result.full_key || '')
setName('')
}
diff --git a/web/modules/tokens/types/tokens.types.ts b/web/modules/tokens/types/tokens.types.ts
index b31a876..537c2f7 100644
--- a/web/modules/tokens/types/tokens.types.ts
+++ b/web/modules/tokens/types/tokens.types.ts
@@ -8,7 +8,7 @@ export interface Token {
used_quota: number
rate_limit: number
expires_at: string | null
- status: string
+ status: number
created_at: string
}
diff --git a/web/modules/usage/api/usage-api.ts b/web/modules/usage/api/usage-api.ts
new file mode 100644
index 0000000..0d98b60
--- /dev/null
+++ b/web/modules/usage/api/usage-api.ts
@@ -0,0 +1,71 @@
+import { apiClient } from '@/shared/lib/api-client'
+import type { UsageResponse, UsageQueryParams, UsageBucket } from '../types/usage.types'
+
+// ── Mock data ────────────────────────────────────────────
+const MODELS = ['gpt-4o', 'gpt-4o-mini', 'claude-sonnet-4-6', 'deepseek-chat']
+
+function mockUsageResponse(params: UsageQueryParams): UsageResponse {
+ const page = params.page || 1
+ const pageSize = params.page_size || 20
+ const total = 85
+
+ const items = Array.from({ length: Math.min(pageSize, total - (page - 1) * pageSize) }, (_, i) => ({
+ id: `log-${(page - 1) * pageSize + i + 1}`,
+ model: MODELS[i % MODELS.length],
+ prompt_tokens: 500 + Math.floor(Math.random() * 2000),
+ completion_tokens: 200 + Math.floor(Math.random() * 800),
+ quota_cost: Math.floor(Math.random() * 50) + 5,
+ created_at: new Date(Date.now() - i * 3600000).toISOString(),
+ }))
+
+ return {
+ items,
+ summary: {
+ total_requests: 21100,
+ total_tokens: 14770000,
+ total_cost: 26920,
+ },
+ pagination: { page, page_size: pageSize, total },
+ }
+}
+
+function mockDailyBuckets(startDate: string, endDate: string): UsageBucket[] {
+ const buckets: UsageBucket[] = []
+ const start = new Date(startDate)
+ const end = new Date(endDate)
+ for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
+ const base = 200 + Math.floor(Math.random() * 800)
+ buckets.push({
+ key: d.toISOString().split('T')[0],
+ requests: base,
+ prompt_tokens: base * 500 + Math.floor(Math.random() * 50000),
+ completion_tokens: base * 200 + Math.floor(Math.random() * 20000),
+ quota_cost: Math.floor(base * 1.5),
+ })
+ }
+ return buckets
+}
+
+const MOCK_MODEL_BUCKETS: UsageBucket[] = [
+ { key: 'gpt-4o', requests: 4200, prompt_tokens: 2100000, completion_tokens: 840000, quota_cost: 12600 },
+ { key: 'gpt-4o-mini', requests: 8500, prompt_tokens: 4250000, completion_tokens: 1700000, quota_cost: 3400 },
+ { key: 'claude-sonnet-4-6', requests: 2100, prompt_tokens: 1050000, completion_tokens: 420000, quota_cost: 8400 },
+ { key: 'deepseek-chat', requests: 6300, prompt_tokens: 3150000, completion_tokens: 1260000, quota_cost: 2520 },
+]
+
+const USE_MOCK = true
+// ── End mock ─────────────────────────────────────────────
+
+export const usageApi = {
+ // GET /api/usage — matches contract response shape
+ getUsage: (params: UsageQueryParams): Promise{t('loginMethods')}
+{t('loginMethodsDesc')}
+ +
+ {METHOD_KEYS.map(({ method, labelKey, descKey }) => (
+
+ ))}
+
+ {t('smtpConfig')}
+{t('smtpConfigDesc')}
+ + {/* Collapsible Setup Guide */} +
+
+ {showGuide && (
+
+
+
+
+ )}
+
+
+ Gmail
+{t('smtpGuideGmail')}
+host: smtp.gmail.com · port: 587
+
+
+ AWS SES
+{t('smtpGuideAWS')}
+host: email-smtp.{region}.amazonaws.com · port: 587
+
+
+ Resend
+{t('smtpGuideResend')}
+host: smtp.resend.com · port: 587
+
+
+ {t('smtpGuideAliyunTitle')}
+{t('smtpGuideAliyun')}
+host: smtp.qiye.aliyun.com · port: 465
+
+
+
+ {/* Test SMTP */}
+
+
+ setSmtp({ ...smtp, host: e.target.value })} placeholder={t('smtpHostPlaceholder')} />
+
+
+
+ setSmtp({ ...smtp, port: parseInt(e.target.value) || 587 })} />
+
+
+
+ setSmtp({ ...smtp, username: e.target.value })} placeholder={t('smtpUsernamePlaceholder')} />
+
+
+
+ setSmtp({ ...smtp, password: e.target.value })}
+ onFocus={(e) => { if (e.target.value === '****') setSmtp({ ...smtp, password: '' }) }}
+ placeholder={t('smtpPasswordPlaceholder')}
+ />
+
+
+
+ setSmtp({ ...smtp, from: e.target.value })} placeholder={t('smtpFromPlaceholder')} />
+
+
+
+ setSmtp({ ...smtp, from_name: e.target.value })} placeholder={t('smtpFromNamePlaceholder')} />
+
+
+
+ {testSmtpMutation.isSuccess && (
+
+
+ setTestEmail(e.target.value)} placeholder={t('testSmtpToPlaceholder')} />
+
+
+ {t('googleOAuth')}
+
+
+
+
+ setGoogle({ ...google, client_id: e.target.value })} placeholder={t('clientIdPlaceholder')} />
+
+
+
+ setGoogle({ ...google, client_secret: e.target.value })}
+ onFocus={(e) => { if (e.target.value === '****') setGoogle({ ...google, client_secret: '' }) }}
+ placeholder={t('clientSecretPlaceholder')}
+ />
+
+ {t('githubOAuth')}
+
+
+
+
+ setGithub({ ...github, client_id: e.target.value })} placeholder={t('clientIdPlaceholder')} />
+
+
+
+ setGithub({ ...github, client_secret: e.target.value })}
+ onFocus={(e) => { if (e.target.value === '****') setGithub({ ...github, client_secret: '' }) }}
+ placeholder={t('clientSecretPlaceholder')}
+ />
+
+
+
+
+ {validationError &&
+
+ {validationError}
} + {saveMsg && ( ++ {saveMsg} +
+ )} +{tc('loading')}
+ }
+
+ if (!data?.length) {
+ return (
+
+
+ )
+ }
+
+ const maxRequests = Math.max(...data.map((b) => b.requests))
+
+ return (
+ {tc('noData')}
+
+
+ )
+}
diff --git a/web/modules/usage/components/usage-logs-table.tsx b/web/modules/usage/components/usage-logs-table.tsx
new file mode 100644
index 0000000..2db3158
--- /dev/null
+++ b/web/modules/usage/components/usage-logs-table.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useUsage } from '../hooks/use-usage'
+import type { UsageQueryParams } from '../types/usage.types'
+
+interface Props {
+ params: UsageQueryParams
+}
+
+export function UsageLogsTable({ params }: Props) {
+ const { data, isLoading } = useUsage({ ...params, page: 1, page_size: 20 })
+ const t = useTranslations('usage')
+ const tc = useTranslations('common')
+
+ if (isLoading) {
+ return + {params.group_by === 'model' ? t('byModel') : t('byDay')} +
+ +
+ {data.map((bucket) => {
+ const pct = maxRequests > 0 ? (bucket.requests / maxRequests) * 100 : 0
+ return (
+
+
+
+ {params.group_by === 'day' ? bucket.key.slice(5) : bucket.key}
+
+
+ )
+ })}
+
+
+
+ {formatNumber(bucket.requests)} {t('requests')}
+
+
+
+ {formatNumber(bucket.prompt_tokens + bucket.completion_tokens)} tok
+
+ {tc('loading')}
+ }
+
+ if (!data?.items?.length) {
+ return (
+
+
+ )
+ }
+
+ return (
+ {tc('noData')}
+
+
+ )
+}
diff --git a/web/modules/usage/components/usage-summary.tsx b/web/modules/usage/components/usage-summary.tsx
new file mode 100644
index 0000000..929712d
--- /dev/null
+++ b/web/modules/usage/components/usage-summary.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { useUsage } from '../hooks/use-usage'
+import { Activity, Zap, DollarSign } from 'lucide-react'
+import type { UsageQueryParams } from '../types/usage.types'
+
+function formatNumber(n: number): string {
+ if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+ if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K'
+ return n.toLocaleString()
+}
+
+interface Props {
+ params: UsageQueryParams
+}
+
+export function UsageSummaryCards({ params }: Props) {
+ const { data, isLoading } = useUsage(params)
+ const t = useTranslations('usage')
+ const tc = useTranslations('common')
+
+ if (isLoading) {
+ return
+
+ {t('recentLogs')}
+
+
+
+
+
+ {data.pagination && (
+ | {t('time')} | +{t('model')} | +{t('promptTokensShort')} | +{t('completionTokensShort')} | +{t('cost')} | +
|---|---|---|---|---|
| + {new Date(log.created_at).toLocaleString()} + | +
+ {log.model}
+ |
+ {log.prompt_tokens.toLocaleString()} | +{log.completion_tokens.toLocaleString()} | +{log.quota_cost} | +
+ {tc('total', { count: data.pagination.total })}
+
+ )}
+ {tc('loading')}
+ }
+
+ const summary = data?.summary
+ if (!summary) return null
+
+ const cards = [
+ { label: t('totalRequests'), value: formatNumber(summary.total_requests), icon: Activity, color: 'text-blue-500 bg-blue-50' },
+ { label: t('totalTokens'), value: formatNumber(summary.total_tokens), icon: Zap, color: 'text-amber-500 bg-amber-50' },
+ { label: t('quotaCost'), value: formatNumber(summary.total_cost), icon: DollarSign, color: 'text-purple-500 bg-purple-50' },
+ ]
+
+ return (
+
+ {cards.map((card) => (
+
+ )
+}
diff --git a/web/modules/usage/hooks/use-usage.ts b/web/modules/usage/hooks/use-usage.ts
new file mode 100644
index 0000000..0578c26
--- /dev/null
+++ b/web/modules/usage/hooks/use-usage.ts
@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query'
+import { usageApi } from '../api/usage-api'
+import type { UsageQueryParams } from '../types/usage.types'
+
+export function useUsage(params: UsageQueryParams) {
+ return useQuery({
+ queryKey: ['usage', params],
+ queryFn: () => usageApi.getUsage(params),
+ staleTime: 60 * 1000,
+ })
+}
+
+export function useUsageBuckets(params: UsageQueryParams & { group_by: 'day' | 'model' }) {
+ return useQuery({
+ queryKey: ['usage', 'buckets', params],
+ queryFn: () => usageApi.getBuckets(params),
+ staleTime: 60 * 1000,
+ })
+}
diff --git a/web/modules/usage/index.ts b/web/modules/usage/index.ts
new file mode 100644
index 0000000..d0945d3
--- /dev/null
+++ b/web/modules/usage/index.ts
@@ -0,0 +1,5 @@
+export { UsageSummaryCards } from './components/usage-summary'
+export { UsageChart } from './components/usage-chart'
+export { UsageLogsTable } from './components/usage-logs-table'
+export { useUsage, useUsageBuckets } from './hooks/use-usage'
+export type { UsageSummary, UsageLog, UsageQueryParams, UsageResponse, UsageBucket } from './types/usage.types'
diff --git a/web/modules/usage/types/usage.types.ts b/web/modules/usage/types/usage.types.ts
new file mode 100644
index 0000000..be6b65e
--- /dev/null
+++ b/web/modules/usage/types/usage.types.ts
@@ -0,0 +1,42 @@
+export interface UsageSummary {
+ total_requests: number
+ total_tokens: number
+ total_cost: number
+}
+
+export interface UsageLog {
+ id: string
+ model: string
+ prompt_tokens: number
+ completion_tokens: number
+ quota_cost: number
+ created_at: string
+}
+
+export interface UsageQueryParams {
+ start_date: string
+ end_date: string
+ model?: string
+ page?: number
+ page_size?: number
+}
+
+/** GET /api/usage 的完整响应 */
+export interface UsageResponse {
+ items: UsageLog[]
+ summary: UsageSummary
+ pagination: {
+ page: number
+ page_size: number
+ total: number
+ }
+}
+
+/** 用于图表的聚合数据（前端本地计算或后端扩展接口） */
+export interface UsageBucket {
+ key: string
+ requests: number
+ prompt_tokens: number
+ completion_tokens: number
+ quota_cost: number
+}
diff --git a/web/shared/components/layout/sidebar.tsx b/web/shared/components/layout/sidebar.tsx
index 2eba44a..c73e691 100644
--- a/web/shared/components/layout/sidebar.tsx
+++ b/web/shared/components/layout/sidebar.tsx
@@ -3,6 +3,7 @@
import { Link, usePathname } from '@/core/i18n/navigation'
import { useMenus } from '@/modules/menu'
import type { MenuItem } from '@/modules/menu'
+import { QuotaBar } from '@/modules/quota'
import { useAuth } from '@/shared/providers/auth-provider'
import { cn } from '@/shared/lib/utils'
import {
@@ -48,15 +49,16 @@ export function Sidebar() {
+
+ ))}
+
+ {card.label}
+
+
+ {card.value}
+
+ (url: string, config?: AxiosRequestConfig): Promise
+ post(url: string, data?: any, config?: AxiosRequestConfig): Promise
+ put(url: string, data?: any, config?: AxiosRequestConfig): Promise
+ delete(url: string, config?: AxiosRequestConfig): Promise
+}
export const apiClient = axios.create({
baseURL: '',
timeout: 15000,
headers: { 'Content-Type': 'application/json' },
-})
+}) as ApiClient
apiClient.interceptors.request.use((config) => {
if (typeof window !== 'undefined') {
@@ -12,23 +20,89 @@ apiClient.interceptors.request.use((config) => {
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
- // 把浏览器当前域名传给后端，用于识别租户
- // 开发环境: Next.js rewrite 会丢失 Host 头，靠这个 header 补回来
- // 生产环境: Higress 直接透传 Host，这个 header 作为备用
config.headers['X-Forwarded-Host'] = window.location.host
}
return config
})
+// Token refresh state — shared across concurrent 401s
+let isRefreshing = false
+let refreshSubscribers: Array<(token: string) => void> = []
+
+function onTokenRefreshed(token: string) {
+ refreshSubscribers.forEach((cb) => cb(token))
+ refreshSubscribers = []
+}
+
+function addRefreshSubscriber(cb: (token: string) => void) {
+ refreshSubscribers.push(cb)
+}
+
+function clearAuthAndRedirect() {
+ localStorage.removeItem('access_token')
+ localStorage.removeItem('user_info')
+ document.cookie = 'access_token=;path=/;max-age=0'
+ window.location.href = '/login'
+}
+
apiClient.interceptors.response.use(
(response) => response.data,
- (error) => {
- if (error.response?.status === 401 && typeof window !== 'undefined') {
- localStorage.removeItem('access_token')
- localStorage.removeItem('user_info')
- document.cookie = 'access_token=;path=/;max-age=0'
- window.location.href = '/login'
+ async (error) => {
+ const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean }
+
+ if (error.response?.status !== 401 || typeof window === 'undefined') {
+ return Promise.reject(error)
+ }
+
+ // Don't retry if this is already a retry or if it's the refresh call itself
+ if (originalRequest._retry || originalRequest.url === '/api/auth/refresh') {
+ clearAuthAndRedirect()
+ return Promise.reject(error)
+ }
+
+ if (isRefreshing) {
+ // Another request is already refreshing — wait for it
+ return new Promise((resolve) => {
+ addRefreshSubscriber((newToken: string) => {
+ originalRequest.headers.Authorization = `Bearer ${newToken}`
+ originalRequest._retry = true
+ resolve(apiClient(originalRequest))
+ })
+ })
+ }
+
+ isRefreshing = true
+ originalRequest._retry = true
+
+ try {
+ const token = localStorage.getItem('access_token')
+ const res = await axios.post('/api/auth/refresh', null, {
+ headers: {
+ Authorization: `Bearer ${token}`,
+ 'X-Forwarded-Host': window.location.host,
+ },
+ })
+
+ const newToken = res.data.access_token
+ localStorage.setItem('access_token', newToken)
+ document.cookie = `access_token=${newToken};path=/;max-age=${60 * 60 * 24 * 7};samesite=lax`
+
+ // Update user info if returned
+ if (res.data.user) {
+ localStorage.setItem('user_info', JSON.stringify(res.data.user))
+ }
+
+ onTokenRefreshed(newToken)
+
+ // Retry original request with new token
+ originalRequest.headers.Authorization = `Bearer ${newToken}`
+ return apiClient(originalRequest)
+ } catch {
+ refreshSubscribers = []
+ clearAuthAndRedirect()
+ return Promise.reject(error)
+ } finally {
+ isRefreshing = false
}
- return Promise.reject(error)
},
)
-
diff --git a/web/shared/lib/api-client.ts b/web/shared/lib/api-client.ts
index dddd6dc..d73f9ee 100644
--- a/web/shared/lib/api-client.ts
+++ b/web/shared/lib/api-client.ts
@@ -1,10 +1,18 @@
-import axios from 'axios'
+import axios, { type AxiosInstance, type AxiosRequestConfig, type InternalAxiosRequestConfig } from 'axios'
+
+// 扩展 axios 类型，让 response interceptor 返回 data 后类型正确
+interface ApiClient extends AxiosInstance {
+ get
-
- {user?.username}
+ +{user?.username}
{user?.tenant_name}
-