= {
+ 'admin.welcome': 'AdminWelcomeDescription',
+ 'admin.groupManage': 'AdminGroupManageDescription',
+ 'admin.createGroup': 'AdminCreateGroupDescription',
+ 'admin.groupName': 'AdminGroupNameDescription',
+ 'admin.groupPlatform': 'AdminGroupPlatformDescription',
+ 'admin.groupMultiplier': 'AdminGroupMultiplierDescription',
+ 'admin.groupExclusive': 'AdminGroupExclusiveDescription',
+ 'admin.groupSubmit': 'AdminGroupSubmitDescription',
+ 'admin.accountManage': 'AdminAccountManageDescription',
+ 'admin.createAccount': 'AdminCreateAccountDescription',
+ 'admin.accountName': 'AdminAccountNameDescription',
+ 'admin.accountPlatform': 'AdminAccountPlatformDescription',
+ 'admin.accountType': 'AdminAccountTypeDescription',
+ 'admin.accountPriority': 'AdminAccountPriorityDescription',
+ 'admin.accountGroups': 'AdminAccountGroupsDescription',
+ 'admin.accountSubmit': 'AdminAccountSubmitDescription',
+ 'admin.keyManage': 'AdminKeyManageDescription',
+ 'admin.createKey': 'AdminCreateKeyDescription',
+ 'admin.keyName': 'AdminKeyNameDescription',
+ 'admin.keyGroup': 'AdminKeyGroupDescription',
+ 'admin.keySubmit': 'AdminKeySubmitDescription',
+ 'user.welcome': 'UserWelcomeDescription',
+ 'user.keyManage': 'UserKeyManageDescription',
+ 'user.createKey': 'UserCreateKeyDescription',
+ 'user.keyName': 'UserKeyNameDescription',
+ 'user.keyGroup': 'UserKeyGroupDescription',
+ 'user.keySubmit': 'UserKeySubmitDescription'
+}
+
+export const useTourStepDescription = () => {
+ const getComponentName = (stepKey: TourStepKey) => TOUR_STEP_COMPONENTS[stepKey]
+
+ const isTourStepKey = (value: string): value is TourStepKey =>
+ Object.prototype.hasOwnProperty.call(TOUR_STEP_COMPONENTS, value)
+
+ return {
+ getComponentName,
+ isTourStepKey,
+ stepKeys: TOUR_STEP_KEYS
+ }
+}
diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
index 298263a7..486fb3bc 100644
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@@ -27,7 +27,10 @@ export const i18n = createI18n({
messages: {
en,
zh
- }
+ },
+ // 禁用 HTML 消息警告 - 引导步骤使用富文本内容（driver.js 支持 HTML）
+ // 这些内容是内部定义的，不存在 XSS 风险
+ warnHtmlMessage: false
})
export function setLocale(locale: string) {
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 10813b69..e62691d9 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -1489,5 +1489,150 @@ export default {
resetIn: 'Resets in {time}',
windowNotActive: 'Awaiting first use',
usageOf: '{used} of {limit}'
+ },
+
+ // Onboarding Tour
+ onboarding: {
+ restartTour: 'Restart Onboarding Tour',
+ dontShowAgain: "Don't show again",
+ dontShowAgainTitle: 'Permanently close onboarding guide',
+ confirmDontShow: "Are you sure you don't want to see the onboarding guide again?\n\nYou can restart it anytime from the user menu in the top right corner.",
+ confirmExit: 'Are you sure you want to exit the onboarding guide? You can restart it anytime from the top right menu.',
+ interactiveHint: 'Press Enter or Click to continue',
+ navigation: {
+ flipPage: 'Flip Page',
+ exit: 'Exit'
+ },
+ // Admin tour steps
+ admin: {
+ welcome: {
+ title: '👋 Welcome to Sub2API',
+ description: 'Sub2API is a powerful AI service gateway platform that helps you easily manage and distribute AI services.
🎯 Core Features:
- 📦 Group Management - Create service tiers (VIP, Free Trial, etc.)
- 🔗 Account Pool - Connect multiple upstream AI service accounts
- 🔑 Key Distribution - Generate independent API Keys for users
- 💰 Billing Control - Flexible rate and quota management
Let\'s complete the initial setup in 3 minutes →
What is a Group?
Groups are the core concept of Sub2API, like a "service package":
- 🎯 Each group can contain multiple upstream accounts
- 💰 Each group has independent billing multiplier
- 👥 Can be set as public or exclusive
💡 Example: You can create "VIP Premium" (high rate) and "Free Trial" (low rate) groups
👉 Click "Group Management" on the left sidebar
Let\'s create your first group.
📝 Tip: Recommend creating a test group first to familiarize yourself with the process
👉 Click the "Create Group" button
Give your group an easy-to-identify name.
💡 Naming Suggestions:- "Test Group" - For testing
- "VIP Premium" - High-quality service
- "Free Trial" - Trial version
Click "Next" when done
Choose the AI platform this group supports.
📌 Platform Guide:- Anthropic - Claude models
- OpenAI - GPT models
- Google - Gemini models
One group can only have one platform
Set the billing multiplier to control user charges.
⚙️ Billing Rules:- 1.0 - Original price (cost price)
- 1.5 - User consumes $1, charged $1.5
- 2.0 - User consumes $1, charged $2
- 0.8 - Subsidy mode (loss-making)
Recommend setting test group to 1.0
Control group visibility and access permissions.
🔐 Permission Guide:- Off - Public group, visible to all users
- On - Exclusive group, only for specified users
💡 Use Cases: VIP exclusive, internal testing, special customers
Confirm the information and click create to save the group.
⚠️ Note: Platform type cannot be changed after creation, but other settings can be edited anytime
📌 Next Step: After creation, we\'ll add upstream accounts to this group
👉 Click "Create" button
Great! Group created successfully 🎉
Now add upstream AI service accounts to enable actual service delivery.
🔑 Account Purpose:- Connect to upstream AI services (Claude, GPT, etc.)
- One group can contain multiple accounts (load balancing)
- Supports OAuth and Session Key methods
👉 Click "Account Management" on the left sidebar
Click the button to start adding your first upstream account.
💡 Tip: Recommend using OAuth method - more secure and no manual key extraction needed
👉 Click "Add Account" button
Set an easy-to-identify name for the account.
💡 Naming Suggestions: "Claude Main", "GPT Backup 1", "Test Account", etc.
Choose the service provider platform for this account.
⚠️ Important: Platform must match the group you just created
Choose the account authorization method.
✅ Recommended: OAuth Method- No manual key extraction needed
- More secure with auto-refresh support
- Works with Claude Code, ChatGPT OAuth
📌 Session Key Method- Requires manual extraction from browser
- May need periodic updates
- For platforms without OAuth support
Set the account call priority.
📊 Priority Rules:- Higher number = higher priority
- System uses high-priority accounts first
- Same priority = random selection
💡 Use Case: Set main account to high priority, backup accounts to low priority
Key Step! Assign the account to the group you just created.
⚠️ Important Reminder:- Must select at least one group
- Unassigned accounts cannot be used
- One account can be assigned to multiple groups
💡 Tip: Select the test group you just created
Confirm the information and click save.
📌 OAuth Flow:- Will redirect to service provider page after clicking save
- Complete login and authorization on provider page
- Auto-return after successful authorization
📌 Next Step: After adding account, we\'ll create an API key
👉 Click "Save" button
Congratulations! Account setup complete 🎉
Final step: generate an API Key to test if the service works properly.
🔑 API Key Purpose:- Credential for calling AI services
- Each key is bound to one group
- Can set quota and expiration
- Supports independent usage statistics
👉 Click "API Keys" on the left sidebar
Click the button to create your first API Key.
💡 Tip: Copy and save immediately after creation - key is only shown once
👉 Click "Create Key" button
Set an easy-to-manage name for the key.
💡 Naming Suggestions: "Test Key", "Production", "Mobile", etc.
Select the group you just configured.
📌 Group Determines:- Which accounts this key can use
- What billing multiplier applies
- Whether it\'s an exclusive key
💡 Tip: Select the test group you just created
System will generate a complete API Key after clicking create.
⚠️ Important Reminder:- Key is only shown once, copy immediately
- Need to regenerate if lost
- Keep it safe, don\'t share with others
🚀 Next Steps:- Copy the generated sk-xxx key
- Use in any OpenAI-compatible client
- Start experiencing AI services!
👉 Click "Create" button
Hello! Welcome to the Sub2API AI service platform.
🎯 Quick Start:
- 🔑 Create API Key
- 📋 Copy key to your application
- 🚀 Start using AI services
Just 1 minute, let\'s get started →
Manage all your API access keys here.
📌 What is an API Key?
An API key is your credential for accessing AI services, like a key that allows your application to call AI capabilities.
👉 Click to enter key page
Click the button to create your first API key.
💡 Tip: Key is only shown once after creation, make sure to copy and save
👉 Click "Create Key"
Give your key an easy-to-identify name.
💡 Examples: "My First Key", "For Testing", etc.
Select the service group assigned by the administrator.
📌 Group Info:
Different groups may have different service quality and billing rates, choose according to your needs.
Click to confirm and create your API key.
⚠️ Important:- Copy the key (sk-xxx) immediately after creation
- Key is only shown once, need to regenerate if lost
🚀 How to Use:
Configure the key in any OpenAI-compatible client (like ChatBox, OpenCat, etc.) and start using!
👉 Click "Create" button
Sub2API 是一个强大的 AI 服务中转平台，让您轻松管理和分发 AI 服务。
🎯 核心功能：
- 📦 分组管理 - 创建不同的服务套餐（VIP、免费试用等）
- 🔗 账号池 - 连接多个上游 AI 服务商账号
- 🔑 密钥分发 - 为用户生成独立的 API Key
- 💰 计费管理 - 灵活的费率和配额控制
接下来，我们将用 3 分钟带您完成首次配置 →
什么是分组？
分组是 Sub2API 的核心概念，它就像一个"服务套餐"：
- 🎯 每个分组可以包含多个上游账号
- 💰 每个分组有独立的计费倍率
- 👥 可以设置为公开或专属分组
💡 示例：您可以创建"VIP专线"（高倍率）和"免费试用"（低倍率）两个分组
👉 点击左侧的"分组管理"开始
现在让我们创建第一个分组。
📝 提示：建议先创建一个测试分组，熟悉流程后再创建正式分组
👉 点击"创建分组"按钮
为您的分组起一个易于识别的名称。
💡 命名建议：- "测试分组" - 用于测试
- "VIP专线" - 高质量服务
- "免费试用" - 体验版
填写完成后点击"下一步"继续
选择该分组支持的 AI 平台。
📌 平台说明：- Anthropic - Claude 系列模型
- OpenAI - GPT 系列模型
- Google - Gemini 系列模型
一个分组只能选择一个平台
设置该分组的计费倍率，控制用户的实际扣费。
⚙️ 计费规则：- 1.0 - 原价计费（成本价）
- 1.5 - 用户消耗 $1，扣除 $1.5
- 2.0 - 用户消耗 $1，扣除 $2
- 0.8 - 补贴模式（亏本运营）
建议测试分组设置为 1.0
控制分组的可见性和访问权限。
🔐 权限说明：- 关闭 - 公开分组，所有用户可见
- 开启 - 专属分组，仅指定用户可见
💡 使用场景：VIP 用户专属、内部测试、特殊客户等
确认信息无误后，点击创建按钮保存分组。
⚠️ 注意：分组创建后，平台类型不可修改，其他信息可以随时编辑
📌 下一步：创建成功后，我们将添加上游账号到这个分组
👉 点击"创建"按钮
太棒了！分组已创建成功 🎉
现在需要添加上游 AI 服务商的账号，让分组能够实际提供服务。
🔑 账号的作用：- 连接到上游 AI 服务（Claude、GPT 等）
- 一个分组可以包含多个账号（负载均衡）
- 支持 OAuth 和 Session Key 两种方式
👉 点击左侧的"账号管理"
点击按钮开始添加您的第一个上游账号。
💡 提示：建议使用 OAuth 方式，更安全且无需手动提取密钥
👉 点击"添加账号"按钮
为账号设置一个便于识别的名称。
💡 命名建议："Claude主账号"、"GPT备用1"、"测试账号" 等
选择该账号对应的服务商平台。
⚠️ 重要：平台必须与刚才创建的分组平台一致
选择账号的授权方式。
✅ 推荐：OAuth 方式- 无需手动提取密钥
- 更安全，支持自动刷新
- 适用于 Claude Code、ChatGPT OAuth
📌 Session Key 方式- 需要手动从浏览器提取
- 可能需要定期更新
- 适用于不支持 OAuth 的平台
设置账号的调用优先级。
📊 优先级规则：- 数字越大，优先级越高
- 系统优先使用高优先级账号
- 相同优先级则随机选择
💡 使用场景：主账号设置高优先级，备用账号设置低优先级
关键步骤！将账号分配到刚才创建的分组。
⚠️ 重要提醒：- 必须勾选至少一个分组
- 未分配分组的账号无法使用
- 一个账号可以分配给多个分组
💡 提示：请勾选刚才创建的测试分组
确认信息无误后，点击保存按钮。
📌 OAuth 授权流程：- 点击保存后会跳转到服务商页面
- 在服务商页面完成登录授权
- 授权成功后自动返回
📌 下一步：账号添加成功后，我们将创建 API 密钥
👉 点击"保存"按钮
恭喜！账号配置完成 🎉
最后一步，生成 API Key 来测试服务是否正常工作。
🔑 API Key 的作用：- 用于调用 AI 服务的凭证
- 每个 Key 绑定一个分组
- 可以设置配额和有效期
- 支持独立的使用统计
👉 点击左侧的"API 密钥"
点击按钮创建您的第一个 API Key。
💡 提示：创建后请立即复制保存，密钥只显示一次
👉 点击"创建密钥"按钮
为密钥设置一个便于管理的名称。
💡 命名建议："测试密钥"、"生产环境"、"移动端" 等
选择刚才配置好的分组。
📌 分组决定：- 该密钥可以使用哪些账号
- 计费倍率是多少
- 是否为专属密钥
💡 提示：选择刚才创建的测试分组
点击创建后，系统会生成完整的 API Key。
⚠️ 重要提醒：- 密钥只显示一次，请立即复制
- 丢失后需要重新生成
- 妥善保管，不要泄露给他人
🚀 下一步：- 复制生成的 sk-xxx 密钥
- 在支持 OpenAI 接口的客户端中使用
- 开始体验 AI 服务！
👉 点击"创建"按钮
您好！欢迎来到 Sub2API AI 服务平台。
🎯 快速开始：
- 🔑 创建 API 密钥
- 📋 复制密钥到您的应用
- 🚀 开始使用 AI 服务
只需 1 分钟，让我们开始吧 →
在这里管理您的所有 API 访问密钥。
📌 什么是 API 密钥？
API 密钥是您访问 AI 服务的凭证，就像一把钥匙，让您的应用能够调用 AI 能力。
👉 点击进入密钥页面
点击按钮创建您的第一个 API 密钥。
💡 提示：创建后密钥只显示一次，请务必复制保存
👉 点击"创建密钥"
为密钥起一个便于识别的名称。
💡 示例："我的第一个密钥"、"测试用" 等
选择管理员为您分配的服务分组。
📌 分组说明：
不同分组可能有不同的服务质量和计费标准，请根据需要选择。
点击确认创建您的 API 密钥。
⚠️ 重要：- 创建后请立即复制密钥（sk-xxx）
- 密钥只显示一次，丢失需重新生成
🚀 如何使用：
将密钥配置到支持 OpenAI 接口的任何客户端（如 ChatBox、OpenCat 等），即可开始使用！
👉 点击"创建"按钮