Add Chinese (Simplified) add i18n support

Author: PythonSmall-Q

README.md

@@ -2,6 +2,8 @@
 
 开源的 OAuth2.0/OIDC 认证服务器，部署在 Cloudflare 上。
 
+Demo: [Click Here](https://authmaster.pages.dev/)
+
 ## 特性
 
 - ✅ 完整的 OAuth2.0 和 OpenID Connect 支持
@@ -66,6 +68,7 @@ cp .env.example .env
 ```
 
 默认配置：
+
 ```
 VITE_API_URL=http://localhost:8787
 ```
@@ -108,27 +111,32 @@ npx wrangler pages deploy dist --project-name=authmaster
 ```
 
 **重要**: 部署后需要在 Cloudflare 控制台配置环境变量：
-- 后端: 在 `wrangler.toml` 中设置 `FRONTEND_URL` 
+
+- 后端: 在 `wrangler.toml` 中设置 `FRONTEND_URL`
 - 前端: 在 Cloudflare Pages 设置中添加 `VITE_API_URL部署 Worker API
-cd packages/worker-api
-npm run deploy
+  cd packages/worker-api
+  npm run deploy
 
 # 部署前端到 Cloudflare Pages
+
 cd packages/web-console
 npm run build
 npm run deploy
+
 ```
 
 ## 项目结构
 
 ```
+
 authmaster/
 ├── packages/
 │   ├── worker-api/       # Cloudflare Workers 后端
 │   ├── web-console/      # React 前端控制台
 │   └── shared/           # 共享类型和工具
 ├── docs/                 # 文档
 └── README.md
+
 ```
 
 ## 文档
@@ -145,3 +153,4 @@ MIT License - 详见 [LICENSE](./LICENSE) 文件
 ## 贡献
 
 欢迎提交 Issue 和 Pull Request！
+```

package-lock.json

@@ -11,8 +11,11 @@
   },
   "dependencies": {
     "@authmaster/shared": "file:../shared",
+    "i18next": "^25.8.4",
+    "i18next-browser-languagedetector": "^8.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^16.5.4",
     "react-router-dom": "^6.20.1"
   },
   "devDependencies": {

packages/web-console/package.json

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 interface ConfirmModalProps {
   isOpen: boolean;
   title: string;
@@ -13,12 +15,13 @@ export function ConfirmModal({
   isOpen,
   title,
   message,
-  confirmText = 'Confirm',
-  cancelText = 'Cancel',
+  confirmText,
+  cancelText,
   onConfirm,
   onCancel,
   variant = 'danger',
 }: ConfirmModalProps) {
+  const { t } = useTranslation();
   if (!isOpen) return null;
 
   const variantStyles = {
@@ -46,13 +49,13 @@ export function ConfirmModal({
               onClick={onCancel}
               className="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300 transition-colors"
             >
-              {cancelText}
+              {cancelText || t('common.cancel')}
             </button>
             <button
               onClick={onConfirm}
               className={`px-4 py-2 text-white rounded transition-colors ${variantStyles[variant]}`}
             >
-              {confirmText}
+              {confirmText || t('common.confirm')}
             </button>
           </div>
         </div>

packages/web-console/src/components/ConfirmModal.tsx

@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+
+export function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+
+  const languages = [
+    { code: 'en', name: 'English', flag: '🇺🇸' },
+    { code: 'zh', name: '中文', flag: '🇨🇳' },
+  ];
+
+  const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
+
+  return (
+    <div className="relative group">
+      <button
+        className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors"
+        type="button"
+      >
+        <span className="text-lg">{currentLanguage.flag}</span>
+        <span className="text-sm font-medium text-gray-700">{currentLanguage.name}</span>
+        <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
+        {languages.map(lang => (
+          <button
+            key={lang.code}
+            onClick={() => i18n.changeLanguage(lang.code)}
+            className={`w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors first:rounded-t-lg last:rounded-b-lg ${
+              i18n.language === lang.code ? 'bg-blue-50' : ''
+            }`}
+          >
+            <span className="text-lg">{lang.flag}</span>
+            <span className={`text-sm font-medium ${
+              i18n.language === lang.code ? 'text-blue-600' : 'text-gray-700'
+            }`}>
+              {lang.name}
+            </span>
+            {i18n.language === lang.code && (
+              <svg className="w-4 h-4 text-blue-600 ml-auto" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

packages/web-console/src/components/LanguageSwitcher.tsx

@@ -1,8 +1,11 @@
 import { Link } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
+import { useTranslation } from 'react-i18next';
+import { LanguageSwitcher } from './LanguageSwitcher';
 
 export function Navbar() {
   const { isAuthenticated, user, logout } = useAuth();
+  const { t } = useTranslation();
 
   return (
     <nav className="bg-blue-600 text-white shadow-lg">
@@ -16,32 +19,33 @@ export function Navbar() {
             {isAuthenticated ? (
               <>
                 <Link to="/dashboard" className="hover:text-blue-200">
-                  Dashboard
+                  {t('nav.dashboard')}
                 </Link>
                 <Link to="/apps" className="hover:text-blue-200">
-                  Applications
+                  {t('nav.applications')}
                 </Link>
                 <span className="text-blue-200">{user?.email}</span>
                 <button
                   onClick={logout}
                   className="bg-blue-700 hover:bg-blue-800 px-4 py-2 rounded"
                 >
-                  Logout
+                  {t('nav.logout')}
                 </button>
               </>
             ) : (
               <>
                 <Link to="/login" className="hover:text-blue-200">
-                  Login
+                  {t('nav.login')}
                 </Link>
                 <Link
                   to="/register"
                   className="bg-blue-700 hover:bg-blue-800 px-4 py-2 rounded"
                 >
-                  Register
+                  {t('nav.register')}
                 </Link>
               </>
             )}
+            <LanguageSwitcher />
           </div>
         </div>
       </div>