mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-22 16:43:35 +00:00
feat: 完成用户相关组件的完整国际化支持
* 扩展语言文件新增用户功能翻译键 - 新增 user.dashboard、user.login、user.management 翻译组 - 涵盖三语言支持(zh-cn/zh-tw/en) - 包含120+翻译键covering用户仪表板、登录、管理功能 * UserDashboardView.vue 完整国际化 - 集成useI18n composable - 国际化导航标签、统计卡片、账户信息 - 响应式翻译Toast消息和错误处理 * UserLoginView.vue 完整国际化 - 国际化登录表单标签、占位符、按钮文本 - 响应式验证消息和状态提示 - 支持动态语言切换 * UserManagementView.vue 完整国际化 - 国际化用户列表、搜索过滤器、操作按钮 - 响应式确认对话框和Toast通知 - 支持参数化翻译消息(用户名、数量等) Technical implementation: - 遵循Vue 3 Composition API最佳实践 - 保持响应式设计和暗黑模式兼容性 - 统一错误处理和用户体验
This commit is contained in:
@@ -26,10 +26,10 @@
|
||||
<span class="ml-2 text-xl font-bold text-gray-900 dark:text-white">Claude Relay</span>
|
||||
</div>
|
||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
|
||||
User Sign In
|
||||
{{ t('user.login.title') }}
|
||||
</h2>
|
||||
<p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
|
||||
Sign in to your account to manage your API keys
|
||||
{{ t('user.login.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
class="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
for="username"
|
||||
>
|
||||
Username
|
||||
{{ t('user.login.username') }}
|
||||
</label>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
@@ -49,7 +49,7 @@
|
||||
class="relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-blue-500 focus:outline-none focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-400 dark:focus:ring-blue-400 sm:text-sm"
|
||||
:disabled="loading"
|
||||
name="username"
|
||||
placeholder="Enter your username"
|
||||
:placeholder="t('user.login.usernamePlaceholder')"
|
||||
required
|
||||
type="text"
|
||||
/>
|
||||
@@ -61,7 +61,7 @@
|
||||
class="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
for="password"
|
||||
>
|
||||
Password
|
||||
{{ t('user.login.password') }}
|
||||
</label>
|
||||
<div class="mt-1">
|
||||
<input
|
||||
@@ -70,7 +70,7 @@
|
||||
class="relative block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-blue-500 focus:outline-none focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-400 dark:focus:ring-blue-400 sm:text-sm"
|
||||
:disabled="loading"
|
||||
name="password"
|
||||
placeholder="Enter your password"
|
||||
:placeholder="t('user.login.passwordPlaceholder')"
|
||||
required
|
||||
type="password"
|
||||
/>
|
||||
@@ -125,7 +125,7 @@
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
{{ loading ? 'Signing In...' : 'Sign In' }}
|
||||
{{ loading ? t('user.login.signingIn') : t('user.login.signIn') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -134,7 +134,7 @@
|
||||
class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
to="/admin-login"
|
||||
>
|
||||
Admin Login
|
||||
{{ t('user.login.adminLogin') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</form>
|
||||
@@ -146,12 +146,14 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useThemeStore } from '@/stores/theme'
|
||||
import { showToast } from '@/utils/toast'
|
||||
import ThemeToggle from '@/components/common/ThemeToggle.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const userStore = useUserStore()
|
||||
const themeStore = useThemeStore()
|
||||
|
||||
@@ -165,7 +167,7 @@ const form = reactive({
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!form.username || !form.password) {
|
||||
error.value = 'Please enter both username and password'
|
||||
error.value = t('user.login.requiredFields')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -178,11 +180,11 @@ const handleLogin = async () => {
|
||||
password: form.password
|
||||
})
|
||||
|
||||
showToast('Login successful!', 'success')
|
||||
showToast(t('user.login.loginSuccess'), 'success')
|
||||
router.push('/user-dashboard')
|
||||
} catch (err) {
|
||||
console.error('Login error:', err)
|
||||
error.value = err.response?.data?.message || err.message || 'Login failed'
|
||||
error.value = err.response?.data?.message || err.message || t('user.login.loginFailed')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user