Refactor code structure for improved readability and maintainability

frontend/src/pages/Login.tsx

@@ -2,9 +2,21 @@ import { FormEvent, useState } from 'react'
 import { Lock, User } from 'lucide-react'
 import AppIcon from '../components/AppIcon'
 import { useAuth } from '../contexts/AuthContext'
+import { useLanguage } from '../contexts/LanguageContext'
+import AutoTranslate from '../components/AutoTranslate'
+import BrowserDialogTranslator from '../components/BrowserDialogTranslator'
+
+function LanguageIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path d="M213.333333 640v85.333333a85.333333 85.333333 0 0 0 78.933334 85.12L298.666667 810.666667h128v85.333333H298.666667a170.666667 170.666667 0 0 1-170.666667-170.666667v-85.333333h85.333333z m554.666667-213.333333l187.733333 469.333333h-91.946666l-51.242667-128h-174.506667l-51.157333 128h-91.904L682.666667 426.666667h85.333333z m-42.666667 123.093333L672.128 682.666667h106.325333L725.333333 549.76zM341.333333 85.333333v85.333334h170.666667v298.666666H341.333333v128H256v-128H85.333333V170.666667h170.666667V85.333333h85.333333z m384 42.666667a170.666667 170.666667 0 0 1 170.666667 170.666667v85.333333h-85.333333V298.666667a85.333333 85.333333 0 0 0-85.333334-85.333334h-128V128h128zM256 256H170.666667v128h85.333333V256z m170.666667 0H341.333333v128h85.333334V256z" fill="currentColor" />
+    </svg>
+  )
+}
 
 export default function Login() {
   const { login, accessCodeLogin } = useAuth()
+  const { language, toggleLanguage, t } = useLanguage()
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [error, setError] = useState('')
@@ -29,7 +41,7 @@ export default function Login() {
       }
     } catch (err: unknown) {
       const error = err as { response?: { data?: { message?: string } } }
-      setError(error.response?.data?.message || '登录失败，请检查用户名和密码')
+      setError(error.response?.data?.message || t('登录失败，请检查用户名和密码'))
     } finally {
       setLoading(false)
     }
@@ -37,6 +49,16 @@ export default function Login() {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+      <AutoTranslate />
+      <BrowserDialogTranslator />
+      <button
+        type="button"
+        onClick={() => { void toggleLanguage() }}
+        className="absolute right-4 top-4 inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-600 shadow-sm hover:bg-gray-50"
+      >
+        <LanguageIcon className="h-3.5 w-3.5" />
+        {language === 'en' ? '中文' : 'English'}
+      </button>
       <div className="w-full max-w-md">
         <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-8">
             <div className="flex flex-col items-center mb-8">