fix(i18n): add internationalization support for app names

- Add i18n for Claude/Codex/Gemini app names in AppSwitcher
- Use useTranslation hook with existing translation keys
- Fix ASCII diagram alignment in README files
This commit is contained in:
Jason
2025-11-13 16:37:58 +08:00
parent 30c763ffe3
commit 2fae8c9275
3 changed files with 23 additions and 21 deletions

View File

@@ -167,18 +167,18 @@ Download the latest `CC-Switch-v{version}-Linux.deb` package or `CC-Switch-v{ver
```
┌─────────────────────────────────────────────────────────────┐
│ Frontend (React + TS) │
│ ┌─────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ Components │ │ Hooks │ │ TanStack Query │ │
│ │ (UI) │──│ (Bus. Logic) │──│ (Cache/Sync) │ │
│ └─────────────┘ └──────────────┘ └──────────────────┘ │
│ ┌─────────────┐ ┌──────────────┐ ┌──────────────────┐
│ │ Components │ │ Hooks │ │ TanStack Query │
│ │ (UI) │──│ (Bus. Logic) │──│ (Cache/Sync) │
│ └─────────────┘ └──────────────┘ └──────────────────┘
└────────────────────────┬────────────────────────────────────┘
│ Tauri IPC
┌────────────────────────▼────────────────────────────────────┐
│ Backend (Tauri + Rust) │
│ ┌─────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ Commands │ │ Services │ │ Models/Config │ │
│ │ (API Layer) │──│ (Bus. Layer) │──│ (Data) │ │
│ └─────────────┘ └──────────────┘ └──────────────────┘ │
│ ┌─────────────┐ ┌──────────────┐ ┌──────────────────┐
│ │ Commands │ │ Services │ │ Models/Config │
│ │ (API Layer) │──│ (Bus. Layer) │──│ (Data) │
│ └─────────────┘ └──────────────┘ └──────────────────┘
└─────────────────────────────────────────────────────────────┘
```

View File

@@ -166,19 +166,19 @@ brew upgrade --cask cc-switch
```
┌─────────────────────────────────────────────────────────────┐
│ 前端 (React + TS) │
│ ┌─────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ Components │ │ Hooks │ │ TanStack Query │ │
│ │ (UI) │──│ (业务逻辑) │──│ (缓存/同步) │ │
│ └─────────────┘ └──────────────┘ └──────────────────┘ │
│ 前端 (React + TS)
│ ┌─────────────┐ ┌──────────────┐ ┌──────────────────┐
│ │ Components │ │ Hooks │ │ TanStack Query │
│ │ UI │──│ 业务逻辑 │──│ 缓存/同步
│ └─────────────┘ └──────────────┘ └──────────────────┘
└────────────────────────┬────────────────────────────────────┘
│ Tauri IPC
┌────────────────────────▼────────────────────────────────────┐
│ 后端 (Tauri + Rust) │
│ ┌─────────────┐ ┌──────────────┐ ┌──────────────────┐ │
│ │ Commands │ │ Services │ │ Models/Config │ │
│ │ (API 层) │──│ (业务层) │──│ (数据) │ │
│ └─────────────┘ └──────────────┘ └──────────────────┘ │
│ 后端 (Tauri + Rust)
│ ┌─────────────┐ ┌──────────────┐ ┌──────────────────┐
│ │ Commands │ │ Services │ │ Models/Config │
│ │ API 层 │──│ 业务层 │──│ 数据
│ └─────────────┘ └──────────────┘ └──────────────────┘
└─────────────────────────────────────────────────────────────┘
```

View File

@@ -1,5 +1,6 @@
import type { AppId } from "@/lib/api";
import { ClaudeIcon, CodexIcon, GeminiIcon } from "./BrandIcons";
import { useTranslation } from "react-i18next";
interface AppSwitcherProps {
activeApp: AppId;
@@ -7,6 +8,7 @@ interface AppSwitcherProps {
}
export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
const { t } = useTranslation();
const handleSwitch = (app: AppId) => {
if (app === activeApp) return;
onSwitch(app);
@@ -31,7 +33,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
: "text-gray-500 dark:text-gray-400 group-hover:text-[#D97757] dark:group-hover:text-[#D97757] transition-colors duration-200"
}
/>
<span>Claude</span>
<span>{t("apps.claude")}</span>
</button>
<button
@@ -44,7 +46,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
}`}
>
<CodexIcon size={16} />
<span>Codex</span>
<span>{t("apps.codex")}</span>
</button>
<button
@@ -64,7 +66,7 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
: "text-gray-500 dark:text-gray-400 group-hover:text-[#4285F4] dark:group-hover:text-[#4285F4] transition-colors duration-200"
}
/>
<span>Gemini</span>
<span>{t("apps.gemini")}</span>
</button>
</div>
);