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最佳实践
- 保持响应式设计和暗黑模式兼容性
- 统一错误处理和用户体验

web/admin-spa/src/i18n/locales/en.js

@@ -664,6 +664,134 @@ export default {
     batchAllFailed: 'All items failed to process'
   },
 
+  // User-related translations
+  user: {
+    // User Dashboard
+    dashboard: {
+      title: 'Dashboard Overview',
+      welcomeMessage: 'Welcome to your Claude Relay dashboard',
+      
+      // Navigation tabs
+      overview: 'Overview',
+      apiKeys: 'API Keys',
+      usageStats: 'Usage Stats',
+      
+      // Welcome section
+      welcome: 'Welcome',
+      
+      // Stats cards
+      activeApiKeys: 'Active API Keys',
+      deletedApiKeys: 'Deleted API Keys',
+      totalRequests: 'Total Requests',
+      inputTokens: 'Input Tokens',
+      totalCost: 'Total Cost',
+      
+      // Account information section
+      accountInformation: 'Account Information',
+      username: 'Username',
+      displayName: 'Display Name',
+      email: 'Email',
+      role: 'Role',
+      memberSince: 'Member Since',
+      lastLogin: 'Last Login',
+      notAvailable: 'N/A',
+      
+      // Messages
+      logout: 'Logout',
+      logoutSuccess: 'Logged out successfully',
+      logoutFailed: 'Logout failed',
+      loadProfileFailed: 'Failed to load user profile',
+      loadStatsFailed: 'Failed to load API keys stats'
+    },
+    
+    // User Login
+    login: {
+      title: 'User Sign In',
+      subtitle: 'Sign in to your account to manage your API keys',
+      username: 'Username',
+      password: 'Password',
+      usernamePlaceholder: 'Enter your username',
+      passwordPlaceholder: 'Enter your password',
+      signIn: 'Sign In',
+      signingIn: 'Signing In...',
+      adminLogin: 'Admin Login',
+      
+      // Validation and error messages
+      requiredFields: 'Please enter both username and password',
+      loginSuccess: 'Login successful!',
+      loginFailed: 'Login failed'
+    },
+    
+    // User Management
+    management: {
+      title: 'User Management',
+      description: 'Manage users, their API keys, and view usage statistics',
+      refresh: 'Refresh',
+      
+      // Stats cards
+      totalUsers: 'Total Users',
+      activeUsers: 'Active Users',
+      totalApiKeys: 'Total API Keys',
+      totalCost: 'Total Cost',
+      
+      // Search and filters
+      searchPlaceholder: 'Search users...',
+      allRoles: 'All Roles',
+      user: 'User',
+      admin: 'Admin',
+      allStatus: 'All Status',
+      active: 'Active',
+      disabled: 'Disabled',
+      
+      // User list
+      users: 'Users',
+      loadingUsers: 'Loading users...',
+      noUsersFound: 'No users found',
+      noUsersMatch: 'No users match your search criteria.',
+      noUsersCreated: 'No users have been created yet.',
+      
+      // User info and actions
+      displayName: 'Display Name',
+      email: 'Email',
+      role: 'Role',
+      username: 'Username',
+      apiKeysCount: 'API keys',
+      lastLogin: 'Last login',
+      neverLoggedIn: 'Never logged in',
+      requests: 'requests',
+      totalCostLabel: 'total cost',
+      
+      // Action buttons and tooltips
+      viewUsageStats: 'View Usage Stats',
+      disableAllApiKeys: 'Disable All API Keys',
+      disableUser: 'Disable User',
+      enableUser: 'Enable User',
+      changeRole: 'Change Role',
+      
+      // Confirmation dialogs
+      disableUserTitle: 'Disable User',
+      enableUserTitle: 'Enable User',
+      disableUserMessage: 'Are you sure you want to disable user "{username}"? This will prevent them from logging in.',
+      enableUserMessage: 'Are you sure you want to enable user "{username}"?',
+      disable: 'Disable',
+      enable: 'Enable',
+      
+      disableAllKeysTitle: 'Disable All API Keys',
+      disableAllKeysMessage: 'Are you sure you want to disable all {count} API keys for user "{username}"? This will prevent them from using the service.',
+      disableKeys: 'Disable Keys',
+      
+      // Success messages
+      userDisabledSuccess: 'User disabled successfully',
+      userEnabledSuccess: 'User enabled successfully',
+      keysDisabledSuccess: 'Disabled {count} API keys',
+      
+      // Error messages
+      loadUsersError: 'Failed to load users',
+      toggleStatusError: 'Failed to toggleStatus',
+      disableKeysError: 'Failed to disableKeys'
+    }
+  },
+
   // Settings
   settings: {
     title: 'System Settings',

web/admin-spa/src/i18n/locales/zh-cn.js

@@ -664,6 +664,134 @@ export default {
     batchAllFailed: '所有项目处理失败'
   },
 
+  // User-related translations
+  user: {
+    // User Dashboard
+    dashboard: {
+      title: 'Dashboard Overview',
+      welcomeMessage: 'Welcome to your Claude Relay dashboard',
+      
+      // Navigation tabs
+      overview: 'Overview',
+      apiKeys: 'API Keys',
+      usageStats: 'Usage Stats',
+      
+      // Welcome section
+      welcome: 'Welcome',
+      
+      // Stats cards
+      activeApiKeys: 'Active API Keys',
+      deletedApiKeys: 'Deleted API Keys',
+      totalRequests: 'Total Requests',
+      inputTokens: 'Input Tokens',
+      totalCost: 'Total Cost',
+      
+      // Account information section
+      accountInformation: 'Account Information',
+      username: 'Username',
+      displayName: 'Display Name',
+      email: 'Email',
+      role: 'Role',
+      memberSince: 'Member Since',
+      lastLogin: 'Last Login',
+      notAvailable: 'N/A',
+      
+      // Messages
+      logout: 'Logout',
+      logoutSuccess: 'Logged out successfully',
+      logoutFailed: 'Logout failed',
+      loadProfileFailed: 'Failed to load user profile',
+      loadStatsFailed: 'Failed to load API keys stats'
+    },
+    
+    // User Login
+    login: {
+      title: 'User Sign In',
+      subtitle: 'Sign in to your account to manage your API keys',
+      username: 'Username',
+      password: 'Password',
+      usernamePlaceholder: 'Enter your username',
+      passwordPlaceholder: 'Enter your password',
+      signIn: 'Sign In',
+      signingIn: 'Signing In...',
+      adminLogin: 'Admin Login',
+      
+      // Validation and error messages
+      requiredFields: 'Please enter both username and password',
+      loginSuccess: 'Login successful!',
+      loginFailed: 'Login failed'
+    },
+    
+    // User Management
+    management: {
+      title: 'User Management',
+      description: 'Manage users, their API keys, and view usage statistics',
+      refresh: 'Refresh',
+      
+      // Stats cards
+      totalUsers: 'Total Users',
+      activeUsers: 'Active Users',
+      totalApiKeys: 'Total API Keys',
+      totalCost: 'Total Cost',
+      
+      // Search and filters
+      searchPlaceholder: 'Search users...',
+      allRoles: 'All Roles',
+      user: 'User',
+      admin: 'Admin',
+      allStatus: 'All Status',
+      active: 'Active',
+      disabled: 'Disabled',
+      
+      // User list
+      users: 'Users',
+      loadingUsers: 'Loading users...',
+      noUsersFound: 'No users found',
+      noUsersMatch: 'No users match your search criteria.',
+      noUsersCreated: 'No users have been created yet.',
+      
+      // User info and actions
+      displayName: 'Display Name',
+      email: 'Email',
+      role: 'Role',
+      username: 'Username',
+      apiKeysCount: 'API keys',
+      lastLogin: 'Last login',
+      neverLoggedIn: 'Never logged in',
+      requests: 'requests',
+      totalCostLabel: 'total cost',
+      
+      // Action buttons and tooltips
+      viewUsageStats: 'View Usage Stats',
+      disableAllApiKeys: 'Disable All API Keys',
+      disableUser: 'Disable User',
+      enableUser: 'Enable User',
+      changeRole: 'Change Role',
+      
+      // Confirmation dialogs
+      disableUserTitle: 'Disable User',
+      enableUserTitle: 'Enable User',
+      disableUserMessage: 'Are you sure you want to disable user "{username}"? This will prevent them from logging in.',
+      enableUserMessage: 'Are you sure you want to enable user "{username}"?',
+      disable: 'Disable',
+      enable: 'Enable',
+      
+      disableAllKeysTitle: 'Disable All API Keys',
+      disableAllKeysMessage: 'Are you sure you want to disable all {count} API keys for user "{username}"? This will prevent them from using the service.',
+      disableKeys: 'Disable Keys',
+      
+      // Success messages
+      userDisabledSuccess: 'User disabled successfully',
+      userEnabledSuccess: 'User enabled successfully',
+      keysDisabledSuccess: 'Disabled {count} API keys',
+      
+      // Error messages
+      loadUsersError: 'Failed to load users',
+      toggleStatusError: 'Failed to toggleStatus',
+      disableKeysError: 'Failed to disableKeys'
+    }
+  },
+
   // Settings 设置页面
   settings: {
     title: '系统设置',

web/admin-spa/src/i18n/locales/zh-tw.js

@@ -664,6 +664,134 @@ export default {
     batchAllFailed: '所有項目處理失敗'
   },
 
+  // User-related translations
+  user: {
+    // User Dashboard
+    dashboard: {
+      title: 'Dashboard Overview',
+      welcomeMessage: 'Welcome to your Claude Relay dashboard',
+      
+      // Navigation tabs
+      overview: 'Overview',
+      apiKeys: 'API Keys',
+      usageStats: 'Usage Stats',
+      
+      // Welcome section
+      welcome: 'Welcome',
+      
+      // Stats cards
+      activeApiKeys: 'Active API Keys',
+      deletedApiKeys: 'Deleted API Keys',
+      totalRequests: 'Total Requests',
+      inputTokens: 'Input Tokens',
+      totalCost: 'Total Cost',
+      
+      // Account information section
+      accountInformation: 'Account Information',
+      username: 'Username',
+      displayName: 'Display Name',
+      email: 'Email',
+      role: 'Role',
+      memberSince: 'Member Since',
+      lastLogin: 'Last Login',
+      notAvailable: 'N/A',
+      
+      // Messages
+      logout: 'Logout',
+      logoutSuccess: 'Logged out successfully',
+      logoutFailed: 'Logout failed',
+      loadProfileFailed: 'Failed to load user profile',
+      loadStatsFailed: 'Failed to load API keys stats'
+    },
+    
+    // User Login
+    login: {
+      title: 'User Sign In',
+      subtitle: 'Sign in to your account to manage your API keys',
+      username: 'Username',
+      password: 'Password',
+      usernamePlaceholder: 'Enter your username',
+      passwordPlaceholder: 'Enter your password',
+      signIn: 'Sign In',
+      signingIn: 'Signing In...',
+      adminLogin: 'Admin Login',
+      
+      // Validation and error messages
+      requiredFields: 'Please enter both username and password',
+      loginSuccess: 'Login successful!',
+      loginFailed: 'Login failed'
+    },
+    
+    // User Management
+    management: {
+      title: 'User Management',
+      description: 'Manage users, their API keys, and view usage statistics',
+      refresh: 'Refresh',
+      
+      // Stats cards
+      totalUsers: 'Total Users',
+      activeUsers: 'Active Users',
+      totalApiKeys: 'Total API Keys',
+      totalCost: 'Total Cost',
+      
+      // Search and filters
+      searchPlaceholder: 'Search users...',
+      allRoles: 'All Roles',
+      user: 'User',
+      admin: 'Admin',
+      allStatus: 'All Status',
+      active: 'Active',
+      disabled: 'Disabled',
+      
+      // User list
+      users: 'Users',
+      loadingUsers: 'Loading users...',
+      noUsersFound: 'No users found',
+      noUsersMatch: 'No users match your search criteria.',
+      noUsersCreated: 'No users have been created yet.',
+      
+      // User info and actions
+      displayName: 'Display Name',
+      email: 'Email',
+      role: 'Role',
+      username: 'Username',
+      apiKeysCount: 'API keys',
+      lastLogin: 'Last login',
+      neverLoggedIn: 'Never logged in',
+      requests: 'requests',
+      totalCostLabel: 'total cost',
+      
+      // Action buttons and tooltips
+      viewUsageStats: 'View Usage Stats',
+      disableAllApiKeys: 'Disable All API Keys',
+      disableUser: 'Disable User',
+      enableUser: 'Enable User',
+      changeRole: 'Change Role',
+      
+      // Confirmation dialogs
+      disableUserTitle: 'Disable User',
+      enableUserTitle: 'Enable User',
+      disableUserMessage: 'Are you sure you want to disable user "{username}"? This will prevent them from logging in.',
+      enableUserMessage: 'Are you sure you want to enable user "{username}"?',
+      disable: 'Disable',
+      enable: 'Enable',
+      
+      disableAllKeysTitle: 'Disable All API Keys',
+      disableAllKeysMessage: 'Are you sure you want to disable all {count} API keys for user "{username}"? This will prevent them from using the service.',
+      disableKeys: 'Disable Keys',
+      
+      // Success messages
+      userDisabledSuccess: 'User disabled successfully',
+      userEnabledSuccess: 'User enabled successfully',
+      keysDisabledSuccess: 'Disabled {count} API keys',
+      
+      // Error messages
+      loadUsersError: 'Failed to load users',
+      toggleStatusError: 'Failed to toggleStatus',
+      disableKeysError: 'Failed to disableKeys'
+    }
+  },
+
   // Settings 設置頁面
   settings: {
     title: '系統設置',

web/admin-spa/src/views/UserDashboardView.vue

@@ -32,7 +32,7 @@
                   ]"
                   @click="handleTabChange('overview')"
                 >
-                  Overview
+                  {{ t('user.dashboard.overview') }}
                 </button>
                 <button
                   :class="[
@@ -43,7 +43,7 @@
                   ]"
                   @click="handleTabChange('api-keys')"
                 >
-                  API Keys
+                  {{ t('user.dashboard.apiKeys') }}
                 </button>
                 <button
                   :class="[
@@ -54,7 +54,7 @@
                   ]"
                   @click="handleTabChange('usage')"
                 >
-                  Usage Stats
+                  {{ t('user.dashboard.usageStats') }}
                 </button>
                 <button
                   :class="[
@@ -72,7 +72,7 @@
           </div>
           <div class="flex items-center space-x-4">
             <div class="text-sm text-gray-700 dark:text-gray-300">
-              Welcome, <span class="font-medium">{{ userStore.userName }}</span>
+              {{ t('user.dashboard.welcome') }}, <span class="font-medium">{{ userStore.userName }}</span>
             </div>
 
             <!-- 主题切换按钮 -->
@@ -82,7 +82,7 @@
               class="rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
               @click="handleLogout"
             >
-              Logout
+              {{ t('user.dashboard.logout') }}
             </button>
           </div>
         </div>
@@ -94,9 +94,9 @@
       <!-- Overview Tab -->
       <div v-if="activeTab === 'overview'" class="space-y-6">
         <div>
-          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Dashboard Overview</h1>
+          <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ t('user.dashboard.title') }}</h1>
           <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-            Welcome to your Claude Relay dashboard
+            {{ t('user.dashboard.welcomeMessage') }}
           </p>
         </div>
 
@@ -123,7 +123,7 @@
                 <div class="ml-5 w-0 flex-1">
                   <dl>
                     <dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                      Active API Keys
+                      {{ t('user.dashboard.activeApiKeys') }}
                     </dt>
                     <dd class="text-lg font-medium text-gray-900 dark:text-white">
                       {{ apiKeysStats.active }}
@@ -155,7 +155,7 @@
                 <div class="ml-5 w-0 flex-1">
                   <dl>
                     <dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                      Deleted API Keys
+                      {{ t('user.dashboard.deletedApiKeys') }}
                     </dt>
                     <dd class="text-lg font-medium text-gray-900 dark:text-white">
                       {{ apiKeysStats.deleted }}
@@ -187,7 +187,7 @@
                 <div class="ml-5 w-0 flex-1">
                   <dl>
                     <dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                      Total Requests
+                      {{ t('user.dashboard.totalRequests') }}
                     </dt>
                     <dd class="text-lg font-medium text-gray-900 dark:text-white">
                       {{ formatNumber(userProfile?.totalUsage?.requests || 0) }}
@@ -219,7 +219,7 @@
                 <div class="ml-5 w-0 flex-1">
                   <dl>
                     <dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                      Input Tokens
+                      {{ t('user.dashboard.inputTokens') }}
                     </dt>
                     <dd class="text-lg font-medium text-gray-900 dark:text-white">
                       {{ formatNumber(userProfile?.totalUsage?.inputTokens || 0) }}
@@ -251,7 +251,7 @@
                 <div class="ml-5 w-0 flex-1">
                   <dl>
                     <dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                      Total Cost
+                      {{ t('user.dashboard.totalCost') }}
                     </dt>
                     <dd class="text-lg font-medium text-gray-900 dark:text-white">
                       ${{ (userProfile?.totalUsage?.totalCost || 0).toFixed(4) }}
@@ -267,30 +267,30 @@
         <div class="rounded-lg bg-white shadow dark:bg-gray-800">
           <div class="px-4 py-5 sm:p-6">
             <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">
-              Account Information
+              {{ t('user.dashboard.accountInformation') }}
             </h3>
             <div class="mt-5 border-t border-gray-200 dark:border-gray-700">
               <dl class="divide-y divide-gray-200 dark:divide-gray-700">
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Username</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.username') }}</dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
                     {{ userProfile?.username }}
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Display Name</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.displayName') }}</dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
-                    {{ userProfile?.displayName || 'N/A' }}
+                    {{ userProfile?.displayName || t('user.dashboard.notAvailable') }}
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Email</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.email') }}</dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
-                    {{ userProfile?.email || 'N/A' }}
+                    {{ userProfile?.email || t('user.dashboard.notAvailable') }}
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Role</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.role') }}</dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
                     <span
                       class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200"
@@ -300,15 +300,15 @@
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Member Since</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.memberSince') }}</dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
                     {{ formatDate(userProfile?.createdAt) }}
                   </dd>
                 </div>
                 <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
-                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Last Login</dt>
+                  <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('user.dashboard.lastLogin') }}</dt>
                   <dd class="mt-1 text-sm text-gray-900 dark:text-white sm:col-span-2 sm:mt-0">
-                    {{ formatDate(userProfile?.lastLoginAt) || 'N/A' }}
+                    {{ formatDate(userProfile?.lastLoginAt) || t('user.dashboard.notAvailable') }}
                   </dd>
                 </div>
               </dl>
@@ -338,6 +338,7 @@
 <script setup>
 import { ref, 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'
@@ -347,6 +348,7 @@ import UserUsageStats from '@/components/user/UserUsageStats.vue'
 import TutorialView from '@/views/TutorialView.vue'
 
 const router = useRouter()
+const { t } = useI18n()
 const userStore = useUserStore()
 const themeStore = useThemeStore()
 
@@ -385,11 +387,11 @@ const handleTabChange = (tab) => {
 const handleLogout = async () => {
   try {
     await userStore.logout()
-    showToast('Logged out successfully', 'success')
+    showToast(t('user.dashboard.logoutSuccess'), 'success')
     router.push('/user-login')
   } catch (error) {
     console.error('Logout error:', error)
-    showToast('Logout failed', 'error')
+    showToast(t('user.dashboard.logoutFailed'), 'error')
   }
 }
 
@@ -398,7 +400,7 @@ const loadUserProfile = async () => {
     userProfile.value = await userStore.getUserProfile()
   } catch (error) {
     console.error('Failed to load user profile:', error)
-    showToast('Failed to load user profile', 'error')
+    showToast(t('user.dashboard.loadProfileFailed'), 'error')
   }
 }
 

web/admin-spa/src/views/UserLoginView.vue

@@ -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
   }

web/admin-spa/src/views/UserManagementView.vue

@@ -3,9 +3,9 @@
     <!-- Header -->
     <div class="sm:flex sm:items-center">
       <div class="sm:flex-auto">
-        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">User Management</h1>
+        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{{ t('user.management.title') }}</h1>
         <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
-          Manage users, their API keys, and view usage statistics
+          {{ t('user.management.description') }}
         </p>
       </div>
       <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
@@ -22,7 +22,7 @@
               stroke-width="2"
             />
           </svg>
-          Refresh
+          {{ t('user.management.refresh') }}
         </button>
       </div>
     </div>
@@ -50,7 +50,7 @@
             <div class="ml-5 w-0 flex-1">
               <dl>
                 <dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Total Users
+                  {{ t('user.management.totalUsers') }}
                 </dt>
                 <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {{ userStats?.totalUsers || 0 }}
@@ -82,7 +82,7 @@
             <div class="ml-5 w-0 flex-1">
               <dl>
                 <dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Active Users
+                  {{ t('user.management.activeUsers') }}
                 </dt>
                 <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {{ userStats?.activeUsers || 0 }}
@@ -114,7 +114,7 @@
             <div class="ml-5 w-0 flex-1">
               <dl>
                 <dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Total API Keys
+                  {{ t('user.management.totalApiKeys') }}
                 </dt>
                 <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {{ userStats?.totalApiKeys || 0 }}
@@ -146,7 +146,7 @@
             <div class="ml-5 w-0 flex-1">
               <dl>
                 <dt class="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Total Cost
+                  {{ t('user.management.totalCost') }}
                 </dt>
                 <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   ${{ (userStats?.totalUsage?.totalCost || 0).toFixed(4) }}
@@ -184,7 +184,7 @@
                 <input
                   v-model="searchQuery"
                   class="block w-full rounded-md border-gray-300 pl-10 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
-                  placeholder="Search users..."
+                  :placeholder="t('user.management.searchPlaceholder')"
                   type="search"
                   @input="debouncedSearch"
                 />
@@ -198,9 +198,9 @@
                 class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
                 @change="loadUsers"
               >
-                <option value="">All Roles</option>
-                <option value="user">User</option>
-                <option value="admin">Admin</option>
+                <option value="">{{ t('user.management.allRoles') }}</option>
+                <option value="user">{{ t('user.management.user') }}</option>
+                <option value="admin">{{ t('user.management.admin') }}</option>
               </select>
             </div>
 
@@ -211,9 +211,9 @@
                 class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white sm:text-sm"
                 @change="loadUsers"
               >
-                <option value="">All Status</option>
-                <option value="true">Active</option>
-                <option value="false">Disabled</option>
+                <option value="">{{ t('user.management.allStatus') }}</option>
+                <option value="true">{{ t('user.management.active') }}</option>
+                <option value="false">{{ t('user.management.disabled') }}</option>
               </select>
             </div>
           </div>
@@ -225,7 +225,7 @@
     <div class="overflow-hidden bg-white shadow dark:bg-gray-800 sm:rounded-md">
       <div class="border-b border-gray-200 px-4 py-5 dark:border-gray-700 sm:px-6">
         <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">
-          Users
+          {{ t('user.management.users') }}
           <span v-if="!loading" class="text-sm text-gray-500 dark:text-gray-400"
             >({{ filteredUsers.length }} of {{ users.length }})</span
           >
@@ -254,7 +254,7 @@
             fill="currentColor"
           ></path>
         </svg>
-        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Loading users...</p>
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ t('user.management.loadingUsers') }}</p>
       </div>
 
       <!-- Users List -->
@@ -299,7 +299,7 @@
                           : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
                       ]"
                     >
-                      {{ user.isActive ? 'Active' : 'Disabled' }}
+                      {{ user.isActive ? t('user.management.active') : t('user.management.disabled') }}
                     </span>
                     <span
                       :class="[
@@ -318,18 +318,18 @@
                 >
                   <span>@{{ user.username }}</span>
                   <span v-if="user.email">{{ user.email }}</span>
-                  <span>{{ user.apiKeyCount || 0 }} API keys</span>
+                  <span>{{ user.apiKeyCount || 0 }} {{ t('user.management.apiKeysCount') }}</span>
                   <span v-if="user.lastLoginAt"
-                    >Last login: {{ formatDate(user.lastLoginAt) }}</span
+                    >{{ t('user.management.lastLogin') }}: {{ formatDate(user.lastLoginAt) }}</span
                   >
-                  <span v-else>Never logged in</span>
+                  <span v-else>{{ t('user.management.neverLoggedIn') }}</span>
                 </div>
                 <div
                   v-if="user.totalUsage"
                   class="mt-1 flex items-center space-x-4 text-xs text-gray-400 dark:text-gray-500"
                 >
-                  <span>{{ formatNumber(user.totalUsage.requests || 0) }} requests</span>
-                  <span>${{ (user.totalUsage.totalCost || 0).toFixed(4) }} total cost</span>
+                  <span>{{ formatNumber(user.totalUsage.requests || 0) }} {{ t('user.management.requests') }}</span>
+                  <span>${{ (user.totalUsage.totalCost || 0).toFixed(4) }} {{ t('user.management.totalCostLabel') }}</span>
                 </div>
               </div>
             </div>
@@ -337,7 +337,7 @@
               <!-- View Usage Stats -->
               <button
                 class="inline-flex items-center rounded border border-transparent p-1 text-gray-400 hover:text-blue-600"
-                title="View Usage Stats"
+:title="t('user.management.viewUsageStats')"
                 @click="viewUserStats(user)"
               >
                 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -354,7 +354,7 @@
               <button
                 class="inline-flex items-center rounded border border-transparent p-1 text-gray-400 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50"
                 :disabled="user.apiKeyCount === 0"
-                title="Disable All API Keys"
+:title="t('user.management.disableAllApiKeys')"
                 @click="disableUserApiKeys(user)"
               >
                 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -375,7 +375,7 @@
                     ? 'text-gray-400 hover:text-red-600'
                     : 'text-gray-400 hover:text-green-600'
                 ]"
-                :title="user.isActive ? 'Disable User' : 'Enable User'"
+                :title="user.isActive ? t('user.management.disableUser') : t('user.management.enableUser')"
                 @click="toggleUserStatus(user)"
               >
                 <svg
@@ -405,7 +405,7 @@
               <!-- Change Role -->
               <button
                 class="inline-flex items-center rounded border border-transparent p-1 text-gray-400 hover:text-purple-600"
-                title="Change Role"
+:title="t('user.management.changeRole')"
                 @click="changeUserRole(user)"
               >
                 <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -437,10 +437,10 @@
             stroke-width="2"
           />
         </svg>
-        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No users found</h3>
+        <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">{{ t('user.management.noUsersFound') }}</h3>
         <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
           {{
-            searchQuery ? 'No users match your search criteria.' : 'No users have been created yet.'
+            searchQuery ? t('user.management.noUsersMatch') : t('user.management.noUsersCreated')
           }}
         </p>
       </div>
@@ -476,6 +476,7 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { apiClient } from '@/config/api'
 import { showToast } from '@/utils/toast'
 import { debounce } from 'lodash-es'
@@ -483,6 +484,7 @@ import UserUsageStatsModal from '@/components/admin/UserUsageStatsModal.vue'
 import ChangeRoleModal from '@/components/admin/ChangeRoleModal.vue'
 import ConfirmModal from '@/components/common/ConfirmModal.vue'
 
+const { t } = useI18n()
 const loading = ref(true)
 const users = ref([])
 const userStats = ref(null)
@@ -577,7 +579,7 @@ const loadUsers = async () => {
     }
   } catch (error) {
     console.error('Failed to load users:', error)
-    showToast('Failed to load users', 'error')
+    showToast(t('user.management.loadUsersError'), 'error')
   } finally {
     loading.value = false
   }
@@ -595,11 +597,11 @@ const viewUserStats = (user) => {
 const toggleUserStatus = (user) => {
   selectedUser.value = user
   confirmAction.value = {
-    title: user.isActive ? 'Disable User' : 'Enable User',
+    title: user.isActive ? t('user.management.disableUserTitle') : t('user.management.enableUserTitle'),
     message: user.isActive
-      ? `Are you sure you want to disable user "${user.username}"? This will prevent them from logging in.`
-      : `Are you sure you want to enable user "${user.username}"?`,
-    confirmText: user.isActive ? 'Disable' : 'Enable',
+      ? t('user.management.disableUserMessage', { username: user.username })
+      : t('user.management.enableUserMessage', { username: user.username }),
+    confirmText: user.isActive ? t('user.management.disable') : t('user.management.enable'),
     confirmClass: user.isActive ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700',
     action: 'toggleStatus'
   }
@@ -611,9 +613,9 @@ const disableUserApiKeys = (user) => {
 
   selectedUser.value = user
   confirmAction.value = {
-    title: 'Disable All API Keys',
-    message: `Are you sure you want to disable all ${user.apiKeyCount} API keys for user "${user.username}"? This will prevent them from using the service.`,
-    confirmText: 'Disable Keys',
+    title: t('user.management.disableAllKeysTitle'),
+    message: t('user.management.disableAllKeysMessage', { count: user.apiKeyCount, username: user.username }),
+    confirmText: t('user.management.disableKeys'),
     confirmClass: 'bg-red-600 hover:bg-red-700',
     action: 'disableKeys'
   }
@@ -640,19 +642,19 @@ const handleConfirmAction = async () => {
         if (userIndex !== -1) {
           users.value[userIndex].isActive = !user.isActive
         }
-        showToast(`User ${user.isActive ? 'disabled' : 'enabled'} successfully`, 'success')
+        showToast(user.isActive ? t('user.management.userDisabledSuccess') : t('user.management.userEnabledSuccess'), 'success')
       }
     } else if (action === 'disableKeys') {
       const response = await apiClient.post(`/users/${user.id}/disable-keys`)
 
       if (response.success) {
-        showToast(`Disabled ${response.disabledCount} API keys`, 'success')
+        showToast(t('user.management.keysDisabledSuccess', { count: response.disabledCount }), 'success')
         await loadUsers() // Refresh to get updated counts
       }
     }
   } catch (error) {
     console.error(`Failed to ${action}:`, error)
-    showToast(`Failed to ${action}`, 'error')
+    showToast(t(`user.management.${action}Error`), 'error')
   } finally {
     showConfirmModal.value = false
     selectedUser.value = null