github/claude-relay-service
1
0
Fork 0
mirror of https://github.com/Wei-Shaw/claude-relay-service.git synced 2026-01-23 21:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: 完成三个核心组件的国际化实现

Browse Source 
- 完成 GroupManagementModal.vue 组件国际化
  * 添加分组管理相关的所有翻译键
  * 实现创建、编辑、删除分组功能的多语言支持

- 完成 OAuthFlow.vue 组件国际化
  * 支持 Claude、Gemini、OpenAI 三个平台的授权流程
  * 修复模板中的语法错误（缺少引号）
  * 保留技术性地址不进行翻译

- 完成 ProxyConfig.vue 组件国际化
  * 添加代理配置相关的翻译键
  * 支持 SOCKS5 和 HTTP 代理类型的多语言显示

- 更新语言文件
  * 在 zh-cn.js、en.js、zh-tw.js 中添加所有新的翻译键
  * 保持三种语言文件的同步

变更统计：6 文件修改，526 行新增，116 行删除
This commit is contained in:
Wangnov
2025-09-09 19:21:02 +08:00
parent 2b40552eab
commit 2de5191c05
6 changed files with 526 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/admin-spa/src/components/accounts/GroupManagementModal.vue
View File

@@ -11,7 +11,7 @@
>
<i class="fas fa-layer-group text-sm text-white sm:text-base" />
</div>
<h3 class="text-lg font-bold text-gray-900 sm:text-xl">账户分组管理</h3>
<h3 class="text-lg font-bold text-gray-900 sm:text-xl">{{ t('groupManagement.title') }}</h3>
</div>
<button
class="p-1 text-gray-400 transition-colors hover:text-gray-600"
@@ -25,26 +25,26 @@
<div class="mb-6">
<button class="btn btn-primary px-4 py-2" @click="showCreateForm = true">
<i class="fas fa-plus mr-2" />
创建新分组
{{ t('groupManagement.createNewGroup') }}
</button>
</div>
<!-- 创建分组表单 -->
<div v-if="showCreateForm" class="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-4">
<h4 class="mb-4 text-lg font-semibold text-gray-900">创建新分组</h4>
<h4 class="mb-4 text-lg font-semibold text-gray-900">{{ t('groupManagement.createGroup') }}</h4>
<div class="space-y-4">
<div>
<label class="mb-2 block text-sm font-semibold text-gray-700">分组名称 *</label>
<label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.groupNameRequired') }}</label>
<input
v-model="createForm.name"
class="form-input w-full"
placeholder="输入分组名称"
:placeholder="t('groupManagement.groupNamePlaceholder')"
type="text"
/>
</div>
<div>
<label class="mb-2 block text-sm font-semibold text-gray-700">平台类型 *</label>
<label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.platformTypeRequired') }}</label>
<div class="flex gap-4">
<label class="flex cursor-pointer items-center">
<input v-model="createForm.platform" class="mr-2" type="radio" value="claude" />
@@ -62,11 +62,11 @@
</div>
<div>
<label class="mb-2 block text-sm font-semibold text-gray-700">描述 (可选)</label>
<label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.descriptionOptional') }}</label>
<textarea
v-model="createForm.description"
class="form-input w-full resize-none"
placeholder="分组描述..."
:placeholder="t('groupManagement.descriptionPlaceholder')"
rows="2"
/>
</div>
@@ -78,9 +78,9 @@
@click="createGroup"
>
<div v-if="creating" class="loading-spinner mr-2" />
{{ creating ? '创建中...' : '创建' }}
{{ creating ? t('groupManagement.creating') : t('groupManagement.create') }}
</button>
<button class="btn btn-secondary px-4 py-2" @click="cancelCreate">取消</button>
<button class="btn btn-secondary px-4 py-2" @click="cancelCreate">{{ t('groupManagement.cancel') }}</button>
</div>
</div>
</div>
@@ -89,12 +89,12 @@
<div class="space-y-4">
<div v-if="loading" class="py-8 text-center">
<div class="loading-spinner-lg mx-auto mb-4" />
<p class="text-gray-500">加载中...</p>
<p class="text-gray-500">{{ t('groupManagement.loading') }}</p>
</div>
<div v-else-if="groups.length === 0" class="rounded-lg bg-gray-50 py-8 text-center">
<i class="fas fa-layer-group mb-4 text-4xl text-gray-300" />
<p class="text-gray-500">暂无分组</p>
<p class="text-gray-500">{{ t('groupManagement.noGroups') }}</p>
</div>
<div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -109,7 +109,7 @@
{{ group.name }}
</h4>
<p class="mt-1 text-sm text-gray-500">
{{ group.description || '暂无描述' }}
{{ group.description || t('groupManagement.noDescription') }}
</p>
</div>
<div class="ml-4 flex items-center gap-2">
@@ -138,7 +138,7 @@
<div class="flex items-center gap-4">
<span>
<i class="fas fa-users mr-1" />
{{ group.memberCount || 0 }} 个成员
{{ group.memberCount || 0 }}{{ t('groupManagement.membersCount') }}
</span>
<span>
<i class="fas fa-clock mr-1" />
@@ -148,7 +148,7 @@
<div class="flex items-center gap-2">
<button
class="text-blue-600 transition-colors hover:text-blue-800"
title="编辑"
:title="t('groupManagement.edit')"
@click="editGroup(group)"
>
<i class="fas fa-edit" />
@@ -156,7 +156,7 @@
<button
class="text-red-600 transition-colors hover:text-red-800"
:disabled="group.memberCount > 0"
title="删除"
:title="t('groupManagement.delete')"
@click="deleteGroup(group)"
>
<i class="fas fa-trash" />
@@ -176,7 +176,7 @@
>
<div class="modal-content w-full max-w-lg p-4 sm:p-6">
<div class="mb-4 flex items-center justify-between">
<h3 class="text-lg font-bold text-gray-900">编辑分组</h3>
<h3 class="text-lg font-bold text-gray-900">{{ t('groupManagement.editGroup') }}</h3>
<button class="text-gray-400 transition-colors hover:text-gray-600" @click="cancelEdit">
<i class="fas fa-times" />
</button>
@@ -184,17 +184,17 @@
<div class="space-y-4">
<div>
<label class="mb-2 block text-sm font-semibold text-gray-700">分组名称 *</label>
<label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.groupNameRequired') }}</label>
<input
v-model="editForm.name"
class="form-input w-full"
placeholder="输入分组名称"
:placeholder="t('groupManagement.groupNamePlaceholder')"
type="text"
/>
</div>
<div>
<label class="mb-2 block text-sm font-semibold text-gray-700">平台类型</label>
<label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.platformTypeLabel') }}</label>
<div class="rounded-lg bg-gray-100 px-3 py-2 text-sm text-gray-600">
{{
editForm.platform === 'claude'
@@ -203,16 +203,16 @@
? 'Gemini'
: 'OpenAI'
}}
<span class="ml-2 text-xs text-gray-500">(不可修改)</span>
<span class="ml-2 text-xs text-gray-500">{{ t('groupManagement.cannotModify') }}</span>
</div>
</div>
<div>
<label class="mb-2 block text-sm font-semibold text-gray-700">描述 (可选)</label>
<label class="mb-2 block text-sm font-semibold text-gray-700">{{ t('groupManagement.descriptionOptional') }}</label>
<textarea
v-model="editForm.description"
class="form-input w-full resize-none"
placeholder="分组描述..."
:placeholder="t('groupManagement.descriptionPlaceholder')"
rows="2"
/>
</div>
@@ -224,9 +224,9 @@
@click="updateGroup"
>
<div v-if="updating" class="loading-spinner mr-2" />
{{ updating ? '更新中...' : '更新' }}
{{ updating ? t('groupManagement.updating') : t('groupManagement.update') }}
</button>
<button class="btn btn-secondary flex-1 px-4 py-2" @click="cancelEdit">取消</button>
<button class="btn btn-secondary flex-1 px-4 py-2" @click="cancelEdit">{{ t('groupManagement.cancel') }}</button>
</div>
</div>
</div>
@@ -236,9 +236,12 @@
<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { showToast } from '@/utils/toast'
import { apiClient } from '@/config/api'
const { t } = useI18n()
const emit = defineEmits(['close', 'refresh'])
const show = ref(true)
@@ -278,7 +281,7 @@ const loadGroups = async () => {
const response = await apiClient.get('/admin/account-groups')
groups.value = response.data || []
} catch (error) {
showToast('加载分组列表失败', 'error')
showToast(t('groupManagement.loadGroupsFailed'), 'error')
} finally {
loading.value = false
}
@@ -287,7 +290,7 @@ const loadGroups = async () => {
// 创建分组
const createGroup = async () => {
if (!createForm.value.name || !createForm.value.platform) {
showToast('请填写必填项', 'error')
showToast(t('groupManagement.fillRequiredFields'), 'error')
return
}
@@ -299,12 +302,12 @@ const createGroup = async () => {
description: createForm.value.description
})
showToast('分组创建成功', 'success')
showToast(t('groupManagement.groupCreated'), 'success')
cancelCreate()
await loadGroups()
emit('refresh')
} catch (error) {
showToast(error.response?.data?.error || '创建分组失败', 'error')
showToast(error.response?.data?.error || t('groupManagement.createGroupFailed'), 'error')
} finally {
creating.value = false
}
@@ -334,7 +337,7 @@ const editGroup = (group) => {
// 更新分组
const updateGroup = async () => {
if (!editForm.value.name) {
showToast('请填写分组名称', 'error')
showToast(t('groupManagement.fillGroupName'), 'error')
return
}
@@ -345,12 +348,12 @@ const updateGroup = async () => {
description: editForm.value.description
})
showToast('分组更新成功', 'success')
showToast(t('groupManagement.groupUpdated'), 'success')
cancelEdit()
await loadGroups()
emit('refresh')
} catch (error) {
showToast(error.response?.data?.error || '更新分组失败', 'error')
showToast(error.response?.data?.error || t('groupManagement.updateGroupFailed'), 'error')
} finally {
updating.value = false
}
@@ -370,21 +373,21 @@ const cancelEdit = () => {
// 删除分组
const deleteGroup = async (group) => {
if (group.memberCount > 0) {
showToast('分组内还有成员，无法删除', 'error')
showToast(t('groupManagement.groupHasMembers'), 'error')
return
}
if (!confirm(`确定要删除分组 "${group.name}" 吗？`)) {
if (!confirm(t('groupManagement.confirmDelete', { name: group.name }))) {
return
}
try {
await apiClient.delete(`/admin/account-groups/${group.id}`)
showToast('分组删除成功', 'success')
showToast(t('groupManagement.groupDeleted'), 'success')
await loadGroups()
emit('refresh')
} catch (error) {
showToast(error.response?.data?.error || '删除分组失败', 'error')
showToast(error.response?.data?.error || t('groupManagement.deleteGroupFailed'), 'error')
}
}

130
web/admin-spa/src/components/accounts/OAuthFlow.vue
View File

@@ -12,9 +12,9 @@
<i class="fas fa-link text-white" />
</div>
<div class="flex-1">
<h4 class="mb-3 font-semibold text-blue-900 dark:text-blue-200">Claude 账户授权</h4>
<h4 class="mb-3 font-semibold text-blue-900 dark:text-blue-200">{{ t('oauthFlow.claudeAccountAuth') }}</h4>
<p class="mb-4 text-sm text-blue-800 dark:text-blue-300">
请按照以下步骤完成 Claude 账户的授权：
{{ t('oauthFlow.claudeAuthDescription') }}
</p>
<div class="space-y-4">
@@ -30,7 +30,7 @@
</div>
<div class="flex-1">
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
点击下方按钮生成授权链接
{{ t('oauthFlow.step1Title') }}
</p>
<button
v-if="!authUrl"
@@ -40,7 +40,7 @@
>
<i v-if="!loading" class="fas fa-link mr-2" />
<div v-else class="loading-spinner mr-2" />
{{ loading ? '生成中...' : '生成授权链接' }}
{{ loading ? t('oauthFlow.generating') : t('oauthFlow.generateAuthLink') }}
</button>
<div v-else class="space-y-3">
<div class="flex items-center gap-2">
@@ -52,7 +52,7 @@
/>
<button
class="rounded-lg bg-gray-100 px-3 py-2 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
title="复制链接"
:title="t('oauthFlow.copyLinkTooltip')"
@click="copyAuthUrl"
>
<i :class="copied ? 'fas fa-check text-green-500' : 'fas fa-copy'" />
@@ -62,7 +62,7 @@
class="text-xs text-blue-600 hover:text-blue-700"
@click="regenerateAuthUrl"
>
<i class="fas fa-sync-alt mr-1" />重新生成
<i class="fas fa-sync-alt mr-1" />{{ t('oauthFlow.regenerate') }}
</button>
</div>
</div>
@@ -81,18 +81,18 @@
</div>
<div class="flex-1">
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
在浏览器中打开链接并完成授权
{{ t('oauthFlow.step2Title') }}
</p>
<p class="mb-2 text-sm text-blue-700 dark:text-blue-300">
请在新标签页中打开授权链接，登录您的 Claude 账户并授权。
{{ t('oauthFlow.step2Description') }}
</p>
<div
class="rounded border border-yellow-300 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-yellow-900/30"
>
<p class="text-xs text-yellow-800 dark:text-yellow-300">
<i class="fas fa-exclamation-triangle mr-1" />
<strong>注意：</strong
>如果您设置了代理，请确保浏览器也使用相同的代理访问授权页面。
<strong>{{ t('oauthFlow.proxyNotice') }}</strong
>{{ t('oauthFlow.proxyNoticeText') }}
</p>
</div>
</div>
@@ -111,29 +111,29 @@
</div>
<div class="flex-1">
<p class="mb-2 font-medium text-blue-900 dark:text-blue-200">
输入 Authorization Code
{{ t('oauthFlow.step3Title') }}
</p>
<p class="mb-3 text-sm text-blue-700 dark:text-blue-300">
授权完成后，页面会显示一个
<strong>Authorization Code</strong>，请将其复制并粘贴到下方输入框：
{{ t('oauthFlow.step3Description') }}
<strong>{{ t('oauthFlow.authorizationCode') }}</strong>{{ t('oauthFlow.step3DescriptionMiddle') }}
</p>
<div class="space-y-3">
<div>
<label
class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
>
<i class="fas fa-key mr-2 text-blue-500" />Authorization Code
<i class="fas fa-key mr-2 text-blue-500" />{{ t('oauthFlow.authorizationCode') }}
</label>
<textarea
v-model="authCode"
class="form-input w-full resize-none font-mono text-sm"
placeholder="粘贴从Claude页面获取的Authorization Code..."
:placeholder="t('oauthFlow.authCodePlaceholder')"
rows="3"
/>
</div>
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
<i class="fas fa-info-circle mr-1" />
请粘贴从Claude页面复制的Authorization Code
{{ t('oauthFlow.authCodeHint') }}
</p>
</div>
</div>
@@ -157,9 +157,9 @@
<i class="fas fa-robot text-white" />
</div>
<div class="flex-1">
<h4 class="mb-3 font-semibold text-green-900 dark:text-green-200">Gemini 账户授权</h4>
<h4 class="mb-3 font-semibold text-green-900 dark:text-green-200">{{ t('oauthFlow.geminiAccountAuth') }}</h4>
<p class="mb-4 text-sm text-green-800 dark:text-green-300">
请按照以下步骤完成 Gemini 账户的授权：
{{ t('oauthFlow.geminiAuthDescription') }}
</p>
<div class="space-y-4">
@@ -175,7 +175,7 @@
</div>
<div class="flex-1">
<p class="mb-2 font-medium text-green-900 dark:text-green-200">
点击下方按钮生成授权链接
{{ t('oauthFlow.step1Title') }}
</p>
<button
v-if="!authUrl"
@@ -185,7 +185,7 @@
>
<i v-if="!loading" class="fas fa-link mr-2" />
<div v-else class="loading-spinner mr-2" />
{{ loading ? '生成中...' : '生成授权链接' }}
{{ loading ? t('oauthFlow.generating') : t('oauthFlow.generateAuthLink') }}
</button>
<div v-else class="space-y-3">
<div class="flex items-center gap-2">
@@ -197,7 +197,7 @@
/>
<button
class="rounded-lg bg-gray-100 px-3 py-2 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
title="复制链接"
:title="t('oauthFlow.copyLinkTooltip')"
@click="copyAuthUrl"
>
<i :class="copied ? 'fas fa-check text-green-500' : 'fas fa-copy'" />
@@ -207,7 +207,7 @@
class="text-xs text-green-600 hover:text-green-700"
@click="regenerateAuthUrl"
>
<i class="fas fa-sync-alt mr-1" />重新生成
<i class="fas fa-sync-alt mr-1" />{{ t('oauthFlow.regenerate') }}
</button>
</div>
</div>
@@ -226,18 +226,18 @@
</div>
<div class="flex-1">
<p class="mb-2 font-medium text-green-900 dark:text-green-200">
在浏览器中打开链接并完成授权
{{ t('oauthFlow.step2Title') }}
</p>
<p class="mb-2 text-sm text-green-700 dark:text-green-300">
请在新标签页中打开授权链接，登录您的 Gemini 账户并授权。
{{ t('oauthFlow.step2DescriptionGemini') }}
</p>
<div
class="rounded border border-yellow-300 bg-yellow-50 p-3 dark:border-yellow-700 dark:bg-yellow-900/30"
>
<p class="text-xs text-yellow-800 dark:text-yellow-300">
<i class="fas fa-exclamation-triangle mr-1" />
<strong>注意：</strong
>如果您设置了代理，请确保浏览器也使用相同的代理访问授权页面。
<strong>{{ t('oauthFlow.proxyNotice') }}</strong
>{{ t('oauthFlow.proxyNoticeText') }}
</p>
</div>
</div>
@@ -256,29 +256,29 @@
</div>
<div class="flex-1">
<p class="mb-2 font-medium text-green-900 dark:text-green-200">
输入 Authorization Code
{{ t('oauthFlow.step3Title') }}
</p>
<p class="mb-3 text-sm text-green-700 dark:text-green-300">
授权完成后，页面会显示一个 Authorization Code，请将其复制并粘贴到下方输入框：
{{ t('oauthFlow.step3DescriptionGemini') }}
</p>
<div class="space-y-3">
<div>
<label
class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
>
<i class="fas fa-key mr-2 text-green-500" />Authorization Code
<i class="fas fa-key mr-2 text-green-500" />{{ t('oauthFlow.authorizationCode') }}
</label>
<textarea
v-model="authCode"
class="form-input w-full resize-none font-mono text-sm"
placeholder="粘贴从Gemini页面获取的Authorization Code..."
:placeholder="t('oauthFlow.authCodePlaceholderGemini')"
rows="3"
/>
</div>
<div class="mt-2 space-y-1">
<p class="text-xs text-gray-600 dark:text-gray-400">
<i class="fas fa-check-circle mr-1 text-green-500" />
请粘贴从Gemini页面复制的Authorization Code
{{ t('oauthFlow.authCodeHintGemini') }}
</p>
</div>
</div>
@@ -303,9 +303,9 @@
<i class="fas fa-brain text-white" />
</div>
<div class="flex-1">
<h4 class="mb-3 font-semibold text-orange-900 dark:text-orange-200">OpenAI 账户授权</h4>
<h4 class="mb-3 font-semibold text-orange-900 dark:text-orange-200">{{ t('oauthFlow.openaiAccountAuth') }}</h4>
<p class="mb-4 text-sm text-orange-800 dark:text-orange-300">
请按照以下步骤完成 OpenAI 账户的授权：
{{ t('oauthFlow.openaiAuthDescription') }}
</p>
<div class="space-y-4">
@@ -321,7 +321,7 @@
</div>
<div class="flex-1">
<p class="mb-2 font-medium text-orange-900 dark:text-orange-200">
点击下方按钮生成授权链接
{{ t('oauthFlow.step1Title') }}
</p>
<button
v-if="!authUrl"
@@ -331,7 +331,7 @@
>
<i v-if="!loading" class="fas fa-link mr-2" />
<div v-else class="loading-spinner mr-2" />
{{ loading ? '生成中...' : '生成授权链接' }}
{{ loading ? t('oauthFlow.generating') : t('oauthFlow.generateAuthLink') }}
</button>
<div v-else class="space-y-3">
<div class="flex items-center gap-2">
@@ -343,7 +343,7 @@
/>
<button
class="rounded-lg bg-gray-100 px-3 py-2 transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600"
title="复制链接"
:title="t('oauthFlow.copyLinkTooltip')"
@click="copyAuthUrl"
>
<i :class="copied ? 'fas fa-check text-green-500' : 'fas fa-copy'" />
@@ -353,7 +353,7 @@
class="text-xs text-orange-600 hover:text-orange-700"
@click="regenerateAuthUrl"
>
<i class="fas fa-sync-alt mr-1" />重新生成
<i class="fas fa-sync-alt mr-1" />{{ t('oauthFlow.regenerate') }}
</button>
</div>
</div>
@@ -372,22 +372,22 @@
</div>
<div class="flex-1">
<p class="mb-2 font-medium text-orange-900 dark:text-orange-200">
在浏览器中打开链接并完成授权
{{ t('oauthFlow.step2Title') }}
</p>
<p class="mb-2 text-sm text-orange-700 dark:text-orange-300">
请在新标签页中打开授权链接，登录您的 OpenAI 账户并授权。
{{ t('oauthFlow.step2DescriptionOpenAI') }}
</p>
<div
class="mb-3 rounded border border-amber-300 bg-amber-50 p-3 dark:border-amber-700 dark:bg-amber-900/30"
>
<p class="text-xs text-amber-800 dark:text-amber-300">
<i class="fas fa-clock mr-1" />
<strong>重要提示：</strong>授权后页面可能会加载较长时间，请耐心等待。
<strong>{{ t('oauthFlow.openaiImportantNote') }}</strong>{{ t('oauthFlow.openaiLoadingNote') }}
</p>
<p class="mt-2 text-xs text-amber-700 dark:text-amber-400">
当浏览器地址栏变为
{{ t('oauthFlow.openaiAddressNote') }}
<strong class="font-mono">http://localhost:1455/...</strong>
开头时，表示授权已完成。
{{ t('oauthFlow.openaiAddressNoteMiddle') }}
</p>
</div>
<div
@@ -395,8 +395,8 @@
>
<p class="text-xs text-yellow-800 dark:text-yellow-300">
<i class="fas fa-exclamation-triangle mr-1" />
<strong>注意：</strong
>如果您设置了代理，请确保浏览器也使用相同的代理访问授权页面。
<strong>{{ t('oauthFlow.proxyNotice') }}</strong
>{{ t('oauthFlow.proxyNoticeText') }}
</p>
</div>
</div>
@@ -415,23 +415,23 @@
</div>
<div class="flex-1">
<p class="mb-2 font-medium text-orange-900 dark:text-orange-200">
输入授权链接或 Code
{{ t('oauthFlow.step3TitleOpenAI') }}
</p>
<p class="mb-3 text-sm text-orange-700 dark:text-orange-300">
授权完成后，当页面地址变为
<strong class="font-mono">http://localhost:1455/...</strong> 时：
{{ t('oauthFlow.step3DescriptionOpenAI') }}
<strong class="font-mono">http://localhost:1455/...</strong> {{ t('oauthFlow.step3DescriptionOpenAIMiddle') }}
</p>
<div class="space-y-3">
<div>
<label
class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300"
>
<i class="fas fa-link mr-2 text-orange-500" />授权链接或 Code
<i class="fas fa-link mr-2 text-orange-500" />{{ t('oauthFlow.authLinkOrCode') }}
</label>
<textarea
v-model="authCode"
class="form-input w-full resize-none font-mono text-sm"
placeholder="方式1：复制完整的链接（http://localhost:1455/auth/callback?code=...）&#10;方式2：仅复制 code 参数的值&#10;系统会自动识别并提取所需信息"
:placeholder="t('oauthFlow.authCodePlaceholderOpenAI')"
rows="3"
/>
</div>
@@ -440,16 +440,15 @@
>
<p class="text-xs text-blue-700 dark:text-blue-300">
<i class="fas fa-lightbulb mr-1" />
<strong>提示：</strong>您可以直接复制整个链接或仅复制 code
参数值，系统会自动识别。
<strong>{{ t('oauthFlow.openaiTip') }}</strong>{{ t('oauthFlow.openaiTipText') }}
</p>
<p class="mt-1 text-xs text-blue-600 dark:text-blue-400">
• 完整链接示例：<span class="font-mono"
{{ t('oauthFlow.openaiLinkExample') }}<span class="font-mono"
>http://localhost:1455/auth/callback?code=ac_4hm8...</span
>
</p>
<p class="text-xs text-blue-600">
• 仅 Code 示例：<span class="font-mono"
{{ t('oauthFlow.openaiCodeExample') }}<span class="font-mono"
>ac_4hm8iqmx9A2fzMy_cwye7U3W7...</span
>
</p>
@@ -470,7 +469,7 @@
type="button"
@click="$emit('back')"
>
上一步
{{ t('oauthFlow.previousStep') }}
</button>
<button
class="btn btn-primary flex-1 px-6 py-3 font-semibold"
@@ -479,7 +478,7 @@
@click="exchangeCode"
>
<div v-if="exchanging" class="loading-spinner mr-2" />
{{ exchanging ? '验证中...' : '完成授权' }}
{{ exchanging ? t('oauthFlow.verifying') : t('oauthFlow.completeAuth') }}
</button>
</div>
</div>
@@ -487,9 +486,12 @@
<script setup>
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { showToast } from '@/utils/toast'
import { useAccountsStore } from '@/stores/accounts'
const { t } = useI18n()
const props = defineProps({
platform: {
type: String,
@@ -544,16 +546,16 @@ watch(authCode, (newValue) => {
if (code) {
// 成功提取授权码
authCode.value = code
showToast('成功提取授权码！', 'success')
showToast(t('oauthFlow.successExtractCode'), 'success')
console.log('Successfully extracted authorization code from URL')
} else {
// URL 中没有 code 参数
showToast('URL 中未找到授权码参数，请检查链接是否正确', 'error')
showToast(t('oauthFlow.errorCodeNotFound'), 'error')
}
} catch (error) {
// URL 解析失败
console.error('Failed to parse URL:', error)
showToast('链接格式错误，请检查是否为完整的 URL', 'error')
showToast(t('oauthFlow.errorLinkFormat'), 'error')
}
} else if (props.platform === 'gemini' || props.platform === 'openai') {
// Gemini 和 OpenAI 平台可能使用不同的回调URL
@@ -564,14 +566,14 @@ watch(authCode, (newValue) => {
if (code) {
authCode.value = code
showToast('成功提取授权码！', 'success')
showToast(t('oauthFlow.successExtractCode'), 'success')
}
} catch (error) {
// 不是有效的URL，保持原值
}
} else {
// 错误的 URL（不是正确的 localhost 回调地址）
showToast('请粘贴以 http://localhost:1455 或 http://localhost:45462 开头的链接', 'error')
showToast(t('oauthFlow.errorWrongUrlFormat'), 'error')
}
}
// 如果不是 URL，保持原值（兼容直接输入授权码）
@@ -607,7 +609,7 @@ const generateAuthUrl = async () => {
sessionId.value = result.sessionId
}
} catch (error) {
showToast(error.message || '生成授权链接失败', 'error')
showToast(error.message || t('oauthFlow.generateAuthFailed'), 'error')
} finally {
loading.value = false
}
@@ -625,7 +627,7 @@ const copyAuthUrl = async () => {
try {
await navigator.clipboard.writeText(authUrl.value)
copied.value = true
showToast('链接已复制', 'success')
showToast(t('oauthFlow.linkCopied'), 'success')
setTimeout(() => {
copied.value = false
}, 2000)
@@ -638,7 +640,7 @@ const copyAuthUrl = async () => {
document.execCommand('copy')
document.body.removeChild(input)
copied.value = true
showToast('链接已复制', 'success')
showToast(t('oauthFlow.linkCopied'), 'success')
setTimeout(() => {
copied.value = false
}, 2000)
@@ -695,7 +697,7 @@ const exchangeCode = async () => {
emit('success', tokenInfo)
} catch (error) {
showToast(error.message || '授权失败，请检查授权码是否正确', 'error')
showToast(error.message || t('oauthFlow.authFailed'), 'error')
} finally {
exchanging.value = false
}

35
web/admin-spa/src/components/accounts/ProxyConfig.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="space-y-4">
<div class="flex items-center justify-between">
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">代理设置 (可选)</h4>
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ t('proxyConfig.title') }}</h4>
<label class="flex cursor-pointer items-center">
<input
v-model="proxy.enabled"
class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-blue-500"
type="checkbox"
/>
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">启用代理</span>
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">{{ t('proxyConfig.enableProxy') }}</span>
</label>
</div>
@@ -22,10 +22,10 @@
</div>
<div class="flex-1">
<p class="text-sm text-gray-700 dark:text-gray-300">
配置代理以访问受限的网络资源。支持 SOCKS5 和 HTTP 代理。
{{ t('proxyConfig.configDescription') }}
</p>
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
请确保代理服务器稳定可用，否则会影响账户的正常使用。
{{ t('proxyConfig.stabilityNotice') }}
</p>
</div>
</div>
@@ -71,7 +71,7 @@
<div>
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
>代理类型</label
>{{ t('proxyConfig.proxyType') }}</label
>
<select
v-model="proxy.type"
@@ -86,23 +86,23 @@
<div class="grid grid-cols-2 gap-4">
<div>
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
>主机地址</label
>{{ t('proxyConfig.hostAddress') }}</label
>
<input
v-model="proxy.host"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="例如: 192.168.1.100"
:placeholder="t('proxyConfig.hostPlaceholder')"
type="text"
/>
</div>
<div>
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
>端口</label
>{{ t('proxyConfig.port') }}</label
>
<input
v-model="proxy.port"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="例如: 1080"
:placeholder="t('proxyConfig.portPlaceholder')"
type="number"
/>
</div>
@@ -120,31 +120,31 @@
class="ml-2 cursor-pointer text-sm text-gray-700 dark:text-gray-300"
for="proxyAuth"
>
需要身份验证
{{ t('proxyConfig.needsAuth') }}
</label>
</div>
<div v-if="showAuth" class="grid grid-cols-2 gap-4">
<div>
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
>用户名</label
>{{ t('proxyConfig.username') }}</label
>
<input
v-model="proxy.username"
class="form-input w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="代理用户名"
:placeholder="t('proxyConfig.usernamePlaceholder')"
type="text"
/>
</div>
<div>
<label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
>密码</label
>{{ t('proxyConfig.password') }}</label
>
<div class="relative">
<input
v-model="proxy.password"
class="form-input w-full border-gray-300 pr-10 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
placeholder="代理密码"
:placeholder="t('proxyConfig.passwordPlaceholder')"
:type="showPassword ? 'text' : 'password'"
/>
<button
@@ -164,8 +164,8 @@
>
<p class="text-xs text-blue-700 dark:text-blue-300">
<i class="fas fa-info-circle mr-1" />
<strong>提示：</strong
>代理设置将用于所有与此账户相关的API请求。请确保代理服务器支持HTTPS流量转发。
<strong>{{ t('proxyConfig.tip') }}</strong
>{{ t('proxyConfig.apiRequestNotice') }}
</p>
</div>
</div>
@@ -174,6 +174,9 @@
<script setup>
import { ref, watch, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
modelValue: {