github/sub2api
4
0
Fork 0
mirror of https://github.com/Wei-Shaw/sub2api.git synced 2026-10-31 08:25:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): add Grok key setup templates

Browse Source
This commit is contained in:
superman2003
2026-07-16 00:16:21 +08:00
parent 410ea8490c
commit e8cc1fe26b
4 changed files with 297 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/keys/UseKeyModal.vue
+128 -8
View File
@@ -29,11 +29,12 @@
</p>
<!-- Client Tabs -->
<div v-if="clientTabs.length" class="border-b border-gray-200 dark:border-dark-700">
<nav class="-mb-px flex space-x-6" aria-label="Client">
<div v-if="clientTabs.length" class="overflow-x-auto border-b border-gray-200 dark:border-dark-700">
<nav class="-mb-px flex min-w-max gap-4 sm:gap-6" aria-label="Client">
<button
v-for="tab in clientTabs"
:key="tab.id"
type="button"
@click="activeClientTab = tab.id"
:class="[
'whitespace-nowrap py-2.5 px-1 border-b-2 font-medium text-sm transition-colors',
@@ -102,11 +103,12 @@
</div>
<!-- OS/Shell Tabs -->
<div v-if="showShellTabs" class="border-b border-gray-200 dark:border-dark-700">
<nav class="-mb-px flex space-x-4" aria-label="Tabs">
<div v-if="showShellTabs" class="overflow-x-auto border-b border-gray-200 dark:border-dark-700">
<nav class="-mb-px flex min-w-max gap-4" aria-label="Tabs">
<button
v-for="tab in currentTabs"
:key="tab.id"
type="button"
@click="activeTab = tab.id"
:class="[
'whitespace-nowrap py-2.5 px-1 border-b-2 font-medium text-sm transition-colors',
@@ -138,10 +140,11 @@
<div class="bg-gray-900 dark:bg-dark-900 rounded-xl overflow-hidden">
<!-- Code Header -->
<div class="flex items-center justify-between px-4 py-2 bg-gray-800 dark:bg-dark-800 border-b border-gray-700 dark:border-dark-700">
<span class="text-xs text-gray-400 font-mono">{{ file.path }}</span>
<span class="min-w-0 truncate text-xs text-gray-400 font-mono">{{ file.path }}</span>
<button
type="button"
@click="copyContent(file.content, index)"
class="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-lg transition-colors"
class="flex flex-shrink-0 items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-lg transition-colors"
:class="copiedIndex === index
? 'bg-green-500/20 text-green-400'
: 'bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white'"
@@ -353,6 +356,8 @@ const clientTabs = computed((): TabConfig[] => {
case 'grok':
return [
{ id: 'grok', label: t('keys.useKeyModal.cliTabs.grokCli'), icon: TerminalIcon },
{ id: 'claude', label: t('keys.useKeyModal.cliTabs.claudeCode'), icon: TerminalIcon },
{ id: 'codex', label: t('keys.useKeyModal.cliTabs.codexCli'), icon: TerminalIcon },
{ id: 'opencode', label: t('keys.useKeyModal.cliTabs.opencode'), icon: TerminalIcon }
]
default:
@@ -403,6 +408,12 @@ const platformDescription = computed(() => {
case 'antigravity':
return t('keys.useKeyModal.antigravity.description')
case 'grok':
if (activeClientTab.value === 'claude') {
return t('keys.useKeyModal.grok.claudeDescription')
}
if (activeClientTab.value === 'codex') {
return t('keys.useKeyModal.grok.codexDescription')
}
return t('keys.useKeyModal.grok.description')
default:
return t('keys.useKeyModal.description')
@@ -425,6 +436,14 @@ const platformNote = computed(() => {
? t('keys.useKeyModal.antigravity.claudeNote')
: t('keys.useKeyModal.antigravity.geminiNote')
case 'grok':
if (activeClientTab.value === 'claude') {
return t('keys.useKeyModal.grok.claudeNote')
}
if (activeClientTab.value === 'codex') {
return activeTab.value === 'windows'
? t('keys.useKeyModal.grok.codexNoteWindows')
: t('keys.useKeyModal.grok.codexNote')
}
return activeTab.value === 'windows'
? t('keys.useKeyModal.grok.noteWindows')
: t('keys.useKeyModal.grok.note')
@@ -509,6 +528,12 @@ const currentFiles = computed((): FileConfig[] => {
}
return generateAnthropicFiles(`${baseUrl}/antigravity`, apiKey)
case 'grok':
if (activeClientTab.value === 'claude') {
return generateGrokClaudeFiles(baseRoot, apiKey)
}
if (activeClientTab.value === 'codex') {
return generateGrokCodexFiles(apiBase, apiKey)
}
return generateGrokFiles(apiBase, apiKey)
default:
return generateAnthropicFiles(baseUrl, apiKey)
@@ -548,9 +573,10 @@ $env:CLAUDE_CODE_ATTRIBUTION_HEADER=0`
const vscodeSettingsPath = activeTab.value === 'unix'
? '~/.claude/settings.json'
: '%userprofile%\\.claude\\settings.json'
: '%USERPROFILE%\\.claude\\settings.json'
const vscodeContent = `{
"$schema": "https://json.schemastore.org/claude-code-settings.json",
"env": {
"ANTHROPIC_BASE_URL": "${baseUrl}",
"ANTHROPIC_AUTH_TOKEN": "${apiKey}",
@@ -561,7 +587,68 @@ $env:CLAUDE_CODE_ATTRIBUTION_HEADER=0`
return [
{ path, content },
{ path: vscodeSettingsPath, content: vscodeContent, hint: 'VSCode Claude Code' }
{
path: vscodeSettingsPath,
content: vscodeContent,
hint: t('keys.useKeyModal.claudeSettingsHint')
}
]
}
function generateGrokClaudeFiles(baseUrl: string, apiKey: string): FileConfig[] {
const environment = {
ANTHROPIC_BASE_URL: baseUrl,
ANTHROPIC_AUTH_TOKEN: apiKey,
ANTHROPIC_MODEL: 'grok-4.5',
ANTHROPIC_DEFAULT_OPUS_MODEL: 'grok-4.5',
ANTHROPIC_DEFAULT_SONNET_MODEL: 'grok-4.5',
ANTHROPIC_DEFAULT_HAIKU_MODEL: 'grok-4.5',
ANTHROPIC_DEFAULT_FABLE_MODEL: 'grok-4.5',
CLAUDE_CODE_SUBAGENT_MODEL: 'grok-4.5',
CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC: '1',
CLAUDE_CODE_ATTRIBUTION_HEADER: '0'
}
let path: string
let content: string
switch (activeTab.value) {
case 'unix':
path = 'Terminal'
content = Object.entries(environment)
.map(([name, value]) => `export ${name}="${value}"`)
.join('\n')
break
case 'cmd':
path = 'Command Prompt'
content = Object.entries(environment)
.map(([name, value]) => `set ${name}=${value}`)
.join('\n')
break
case 'powershell':
path = 'PowerShell'
content = Object.entries(environment)
.map(([name, value]) => `$env:${name}="${value}"`)
.join('\n')
break
default:
path = 'Terminal'
content = ''
}
const settingsPath = activeTab.value === 'unix'
? '~/.claude/settings.json'
: '%USERPROFILE%\\.claude\\settings.json'
return [
{ path, content },
{
path: settingsPath,
content: JSON.stringify({
$schema: 'https://json.schemastore.org/claude-code-settings.json',
env: environment
}, null, 2),
hint: t('keys.useKeyModal.claudeSettingsHint')
}
]
}
@@ -682,6 +769,39 @@ supports_backend_search = true`
}]
}
function generateGrokCodexFiles(baseUrl: string, apiKey: string): FileConfig[] {
const isWindows = activeTab.value === 'windows'
const configPath = isWindows
? '%USERPROFILE%\\.codex\\config.toml'
: '~/.codex/config.toml'
const configContent = `model_provider = "sub2api_grok"
model = "grok-4.5"
review_model = "grok-4.5"
model_reasoning_effort = "xhigh"
model_context_window = 1000000
[model_providers.sub2api_grok]
name = "Sub2API Grok"
base_url = "${baseUrl}"
env_key = "SUB2API_API_KEY"
wire_api = "responses"`
const environmentContent = isWindows
? `$env:SUB2API_API_KEY="${apiKey}"`
: `export SUB2API_API_KEY="${apiKey}"`
return [
{
path: configPath,
content: configContent,
hint: t('keys.useKeyModal.grok.codexConfigTomlHint')
},
{
path: isWindows ? 'PowerShell' : 'Terminal',
content: environmentContent
}
]
}
function generateOpenAIWsFiles(baseUrl: string, apiKey: string): FileConfig[] {
const isWindows = activeTab.value === 'windows'
const configDir = isWindows ? '%userprofile%\\.codex' : '~/.codex'
frontend/src/components/keys/__tests__/UseKeyModal.spec.ts
+152 -1
View File
@@ -2,6 +2,10 @@ import { describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { nextTick } from 'vue'
const { copyToClipboardMock } = vi.hoisted(() => ({
copyToClipboardMock: vi.fn().mockResolvedValue(true)
}))
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key: string) => key
@@ -10,7 +14,7 @@ vi.mock('vue-i18n', () => ({
vi.mock('@/composables/useClipboard', () => ({
useClipboard: () => ({
copyToClipboard: vi.fn().mockResolvedValue(true)
copyToClipboard: copyToClipboardMock
})
}))
@@ -78,6 +82,153 @@ describe('UseKeyModal', () => {
expect(parsed.provider.grok.models['gpt-5.6']).toBeUndefined()
})
it('renders copyable Claude Code setup through the Grok Messages gateway', async () => {
copyToClipboardMock.mockClear()
const wrapper = mount(UseKeyModal, {
props: {
show: true,
apiKey: 'sk-grok-claude-test',
baseUrl: 'https://example.com/v1',
platform: 'grok'
},
global: {
stubs: {
BaseDialog: {
template: '<div><slot /><slot name="footer" /></div>'
},
Icon: {
template: '<span />'
}
}
}
})
const claudeTab = wrapper.findAll('button').find((button) =>
button.text().includes('keys.useKeyModal.cliTabs.claudeCode')
)
expect(claudeTab).toBeDefined()
await claudeTab!.trigger('click')
await nextTick()
let codeBlocks = wrapper.findAll('pre code').map((code) => code.text())
expect(codeBlocks.join('\n')).toContain('ANTHROPIC_BASE_URL="https://example.com"')
expect(codeBlocks.join('\n')).toContain('ANTHROPIC_AUTH_TOKEN="sk-grok-claude-test"')
const unixConfig = codeBlocks.find((content) => content.startsWith('export ANTHROPIC_BASE_URL'))
expect(unixConfig).toBeDefined()
for (const name of [
'ANTHROPIC_MODEL',
'ANTHROPIC_DEFAULT_OPUS_MODEL',
'ANTHROPIC_DEFAULT_SONNET_MODEL',
'ANTHROPIC_DEFAULT_HAIKU_MODEL',
'ANTHROPIC_DEFAULT_FABLE_MODEL',
'CLAUDE_CODE_SUBAGENT_MODEL'
]) {
expect(unixConfig).toContain(`export ${name}="grok-4.5"`)
}
const settingsConfig = codeBlocks.find((content) => content.includes('"$schema"'))
expect(settingsConfig).toBeDefined()
const parsedSettings = JSON.parse(settingsConfig!)
expect(parsedSettings.$schema).toBe('https://json.schemastore.org/claude-code-settings.json')
expect(parsedSettings.env.ANTHROPIC_MODEL).toBe('grok-4.5')
expect(wrapper.text()).toContain('keys.useKeyModal.claudeSettingsHint')
expect(wrapper.text()).toContain('keys.useKeyModal.grok.claudeNote')
expect(wrapper.find('nav[aria-label="Client"]').classes()).toContain('min-w-max')
expect(wrapper.find('nav[aria-label="Client"]').element.parentElement?.classList.contains('overflow-x-auto')).toBe(true)
const cmdTab = wrapper.findAll('button').find(
(button) => button.text().trim() === 'Windows CMD'
)
expect(cmdTab).toBeDefined()
await cmdTab!.trigger('click')
await nextTick()
codeBlocks = wrapper.findAll('pre code').map((code) => code.text())
expect(codeBlocks.join('\n')).toContain('set ANTHROPIC_MODEL=grok-4.5')
expect(codeBlocks.join('\n')).toContain('set ANTHROPIC_DEFAULT_FABLE_MODEL=grok-4.5')
expect(codeBlocks.join('\n')).toContain('set CLAUDE_CODE_SUBAGENT_MODEL=grok-4.5')
const powershellTab = wrapper.findAll('button').find(
(button) => button.text().trim() === 'PowerShell'
)
expect(powershellTab).toBeDefined()
await powershellTab!.trigger('click')
await nextTick()
codeBlocks = wrapper.findAll('pre code').map((code) => code.text())
expect(codeBlocks.join('\n')).toContain('$env:ANTHROPIC_BASE_URL="https://example.com"')
expect(codeBlocks.join('\n')).toContain('$env:ANTHROPIC_MODEL="grok-4.5"')
expect(codeBlocks.join('\n')).toContain('$env:ANTHROPIC_DEFAULT_FABLE_MODEL="grok-4.5"')
expect(codeBlocks.join('\n')).toContain('$env:CLAUDE_CODE_SUBAGENT_MODEL="grok-4.5"')
expect(wrapper.text()).toContain('%USERPROFILE%\\.claude\\settings.json')
const copyButton = wrapper.findAll('button').find((button) =>
button.text().includes('keys.useKeyModal.copy')
)
expect(copyButton).toBeDefined()
await copyButton!.trigger('click')
expect(copyToClipboardMock).toHaveBeenCalledWith(
expect.stringContaining('ANTHROPIC_AUTH_TOKEN="sk-grok-claude-test"'),
'keys.copied'
)
})
it('renders Codex custom provider setup through the Grok Responses gateway', async () => {
const wrapper = mount(UseKeyModal, {
props: {
show: true,
apiKey: 'sk-grok-codex-test',
baseUrl: 'https://example.com/v1',
platform: 'grok'
},
global: {
stubs: {
BaseDialog: {
template: '<div><slot /><slot name="footer" /></div>'
},
Icon: {
template: '<span />'
}
}
}
})
const codexTab = wrapper.findAll('button').find((button) =>
button.text().includes('keys.useKeyModal.cliTabs.codexCli')
)
expect(codexTab).toBeDefined()
await codexTab!.trigger('click')
await nextTick()
let codeBlocks = wrapper.findAll('pre code').map((code) => code.text())
const configToml = codeBlocks.find((content) => content.includes('[model_providers.sub2api_grok]'))
expect(configToml).toBeDefined()
expect(configToml).toContain('model_provider = "sub2api_grok"')
expect(configToml).toContain('model = "grok-4.5"')
expect(configToml).toContain('model_context_window = 1000000')
expect(configToml).toContain('base_url = "https://example.com/v1"')
expect(configToml).toContain('env_key = "SUB2API_API_KEY"')
expect(configToml).toContain('wire_api = "responses"')
expect(configToml).not.toContain('requires_openai_auth')
expect(configToml).not.toContain('disable_response_storage')
expect(configToml).not.toContain('network_access')
expect(configToml).not.toContain('windows_wsl_setup_acknowledged')
expect(configToml).not.toContain('[features]')
expect(configToml).not.toContain('goals = true')
expect(codeBlocks).toContain('export SUB2API_API_KEY="sk-grok-codex-test"')
expect(wrapper.text()).not.toContain('auth.json')
const windowsTab = wrapper.findAll('button').find(
(button) => button.text().trim() === 'Windows'
)
expect(windowsTab).toBeDefined()
await windowsTab!.trigger('click')
await nextTick()
codeBlocks = wrapper.findAll('pre code').map((code) => code.text())
expect(wrapper.text()).toContain('%USERPROFILE%\\.codex\\config.toml')
expect(codeBlocks).toContain('$env:SUB2API_API_KEY="sk-grok-codex-test"')
})
it('keeps legacy OpenAI Codex config as the default', () => {
const wrapper = mount(UseKeyModal, {
props: {