admin/Hermes-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Codex OAuth login and fix channel config display

Browse Source 
- Add OpenAI Codex Device Code Flow login (backend polling + frontend modal)
- Codex provider integrated into preset dropdown (hides URL/API key fields)
- Sync provider model catalogs with Hermes system
- Fix channel config not displaying on first visit (wait for data load)
- Fix sidebar model list not refreshing after adding provider
- Add autocomplete="off" to API key input to prevent browser autofill

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ekko
2026-04-17 23:11:57 +08:00
parent 26bb821e29
commit 9979871550
19 changed files with 722 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/client/src/components/hermes/models/CodexLoginModal.vue
+239
View File
@@ -0,0 +1,239 @@
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { NModal, NButton, useMessage } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import { startCodexLogin, pollCodexLogin } from '@/api/hermes/codex-auth'
const { t } = useI18n()
const emit = defineEmits<{ close: []; success: [] }>()
const message = useMessage()
const showModal = ref(true)
const status = ref<'idle' | 'loading' | 'waiting' | 'approved' | 'expired' | 'error'>('idle')
const userCode = ref('')
const verificationUrl = ref('')
const sessionId = ref('')
const errorMessage = ref('')
let pollTimer: ReturnType<typeof setTimeout> | null = null
async function startLogin() {
status.value = 'loading'
errorMessage.value = ''
try {
const data = await startCodexLogin()
userCode.value = data.user_code
verificationUrl.value = data.verification_url
sessionId.value = data.session_id
status.value = 'waiting'
startPolling()
} catch (err: any) {
status.value = 'error'
const msg = err.message || ''
// Try to extract friendly error from response
try {
const match = msg.match(/\{[\s\S]*\}$/)
if (match) {
const body = JSON.parse(match[0])
errorMessage.value = body.error || msg
} else {
errorMessage.value = msg
}
} catch {
errorMessage.value = msg
}
message.error(errorMessage.value)
}
}
function startPolling() {
stopPolling()
pollTimer = setTimeout(async () => {
try {
const result = await pollCodexLogin(sessionId.value)
if (result.status === 'pending') {
startPolling()
} else if (result.status === 'approved') {
status.value = 'approved'
message.success(t('models.codexApproved'))
setTimeout(() => {
showModal.value = false
setTimeout(() => emit('success'), 200)
}, 1000)
} else if (result.status === 'expired') {
status.value = 'expired'
} else if (result.status === 'error') {
status.value = 'error'
errorMessage.value = result.error || 'Unknown error'
}
} catch {
startPolling()
}
}, 3000)
}
function stopPolling() {
if (pollTimer) {
clearTimeout(pollTimer)
pollTimer = null
}
}
function handleClose() {
stopPolling()
showModal.value = false
setTimeout(() => emit('close'), 200)
}
function copyCode() {
navigator.clipboard.writeText(userCode.value)
message.success(t('models.codexCopyCode'))
}
function openLink() {
window.open(verificationUrl.value, '_blank')
}
function retry() {
status.value = 'idle'
userCode.value = ''
verificationUrl.value = ''
sessionId.value = ''
errorMessage.value = ''
startLogin()
}
onUnmounted(() => {
stopPolling()
})
// Auto-start when modal opens
startLogin()
</script>
<template>
<NModal
v-model:show="showModal"
preset="card"
:title="t('models.codexLoginTitle')"
:style="{ width: 'min(440px, calc(100vw - 32px))' }"
:mask-closable="status !== 'waiting'"
@after-leave="emit('close')"
>
<div class="codex-login">
<!-- Idle / Loading -->
<div v-if="status === 'idle' || status === 'loading'" class="codex-login__state">
<NSpin size="small" />
</div>
<!-- Waiting for authorization -->
<div v-else-if="status === 'waiting'" class="codex-login__state">
<p class="codex-login__hint">{{ t('models.codexWaiting') }}</p>
<div class="codex-login__code" @click="copyCode">
<span class="codex-login__code-text">{{ userCode }}</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
</div>
<NButton type="primary" block @click="openLink">
<template #icon>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
</template>
{{ t('models.codexOpenLink') }}
</NButton>
</div>
<!-- Approved -->
<div v-else-if="status === 'approved'" class="codex-login__state codex-login__state--success">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
<p>{{ t('models.codexApproved') }}</p>
</div>
<!-- Expired -->
<div v-else-if="status === 'expired'" class="codex-login__state">
<p class="codex-login__error">{{ t('models.codexExpired') }}</p>
<NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
</div>
<!-- Error -->
<div v-else-if="status === 'error'" class="codex-login__state">
<p class="codex-login__error">{{ errorMessage }}</p>
<NButton size="small" @click="retry">{{ t('common.retry') }}</NButton>
</div>
</div>
<template #footer>
<div class="modal-footer">
<NButton :disabled="status === 'waiting'" @click="handleClose">{{ t('common.cancel') }}</NButton>
</div>
</template>
</NModal>
</template>
<style scoped lang="scss">
.codex-login {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0;
}
.codex-login__state {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
min-height: 120px;
justify-content: center;
width: 100%;
}
.codex-login__hint {
font-size: 14px;
color: var(--n-text-color, inherit);
text-align: center;
line-height: 1.6;
}
.codex-login__code {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
border: 1px solid var(--n-border-color, #e0e0e6);
border-radius: 8px;
cursor: pointer;
transition: border-color 0.2s;
background: var(--n-color, #fafafa);
&:hover {
border-color: var(--n-primary-color, #18a058);
}
}
.codex-login__code-text {
font-size: 28px;
font-weight: 700;
font-family: monospace;
letter-spacing: 4px;
color: var(--n-text-color, inherit);
}
.codex-login__state--success {
color: #18a058;
svg {
stroke: #18a058;
}
}
.codex-login__error {
color: #d03050;
text-align: center;
font-size: 13px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
}
</style>
packages/client/src/components/hermes/models/ProviderFormModal.vue
+30 -4
View File
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { ref, watch, computed } from 'vue'
import { NModal, NForm, NFormItem, NInput, NButton, NSelect, useMessage } from 'naive-ui'
import { useModelsStore } from '@/stores/hermes/models'
import { PROVIDER_PRESETS } from '@/shared/providers'
import { useI18n } from 'vue-i18n'
import CodexLoginModal from './CodexLoginModal.vue'
const { t } = useI18n()
@@ -18,6 +19,7 @@ const message = useMessage()
const showModal = ref(true)
const loading = ref(false)
const fetchingModels = ref(false)
const showCodexLogin = ref(false)
const providerType = ref<'preset' | 'custom'>('preset')
const selectedPreset = ref<string | null>(null)
@@ -32,6 +34,10 @@ const modelOptions = ref<Array<{ label: string; value: string }>>([])
const PRESET_PROVIDERS = PROVIDER_PRESETS as any[]
const CODEX_KEY = 'openai-codex'
const isCodex = computed(() => selectedPreset.value === CODEX_KEY)
function autoGenerateName(url: string): string {
const clean = url.replace(/^https?:\/\//, '').replace(/\/v1\/?$/, '')
const host = clean.split('/')[0]
@@ -104,6 +110,13 @@ async function handleSave() {
message.warning(t('models.selectProviderRequired'))
return
}
// Codex: 弹出授权码弹窗
if (isCodex.value) {
showCodexLogin.value = true
return
}
if (!formData.value.base_url.trim()) {
message.warning(t('models.baseUrlRequired'))
return
@@ -139,6 +152,12 @@ async function handleSave() {
}
}
async function handleCodexSuccess() {
showCodexLogin.value = false
message.success(t('models.providerAdded'))
emit('saved')
}
function handleClose() {
showModal.value = false
setTimeout(() => emit('close'), 200)
@@ -151,7 +170,7 @@ function handleClose() {
preset="card"
:title="t('models.addProvider')"
:style="{ width: 'min(520px, calc(100vw - 32px))' }"
:mask-closable="!loading"
:mask-closable="!loading && !showCodexLogin"
@after-leave="emit('close')"
>
<NForm label-placement="top">
@@ -191,7 +210,7 @@ function handleClose() {
/>
</NFormItem>
<NFormItem :label="t('models.baseUrl')" required>
<NFormItem v-if="!isCodex" :label="t('models.baseUrl')" required>
<NInput
v-model:value="formData.base_url"
:placeholder="t('models.baseUrlPlaceholder')"
@@ -199,12 +218,13 @@ function handleClose() {
/>
</NFormItem>
<NFormItem :label="t('models.apiKey')" required>
<NFormItem v-if="!isCodex" :label="t('models.apiKey')" required>
<NInput
v-model:value="formData.api_key"
type="password"
show-password-on="click"
:placeholder="t('models.apiKeyPlaceholder')"
autocomplete="off"
/>
</NFormItem>
@@ -237,6 +257,12 @@ function handleClose() {
</NButton>
</div>
</template>
<CodexLoginModal
v-if="showCodexLogin"
@close="showCodexLogin = false"
@success="handleCodexSuccess"
/>
</NModal>
</template>