chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-18 02:30:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add language dropdown

Browse Source
This commit is contained in:
Chebotov Nickolay
2026-02-06 15:20:25 +03:00
parent 0bb8090686
commit 50ab96c3ed
4 changed files with 97 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/layout/MainLayout.tsx
View File

@@ -35,6 +35,8 @@ import {
} from '@/stores';
import { configApi, versionApi } from '@/services/api';
import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
import { LANGUAGE_LABEL_KEYS, LANGUAGE_ORDER } from '@/utils/constants';
import type { Language } from '@/types';
const sidebarIcons: Record<string, ReactNode> = {
dashboard: <IconLayoutDashboard size={18} />,
@@ -189,7 +191,15 @@ export function MainLayout() {
const theme = useThemeStore((state) => state.theme);
const cycleTheme = useThemeStore((state) => state.cycleTheme);
const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
const language = useLanguageStore((state) => state.language);
const setLanguage = useLanguageStore((state) => state.setLanguage);
const handleLanguageChange = useCallback(
(event: React.ChangeEvent<HTMLSelectElement>) => {
setLanguage(event.target.value as Language);
},
[setLanguage]
);
const [sidebarOpen, setSidebarOpen] = useState(false);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
@@ -566,9 +576,23 @@ export function MainLayout() {
>
{headerIcons.update}
</Button>
<Button variant="ghost" size="sm" onClick={toggleLanguage} title={t('language.switch')}>
{headerIcons.language}
</Button>
<div className="language-select-wrapper" title={t('language.switch')}>
<span className="language-select-icon" aria-hidden="true">
{headerIcons.language}
</span>
<select
className="language-select"
value={language}
onChange={handleLanguageChange}
aria-label={t('language.switch')}
>
{LANGUAGE_ORDER.map((lang) => (
<option key={lang} value={lang}>
{t(LANGUAGE_LABEL_KEYS[lang])}
</option>
))}
</select>
</div>
<Button variant="ghost" size="sm" onClick={cycleTheme} title={t('theme.switch')}>
{theme === 'auto'
? headerIcons.autoTheme

19
src/pages/LoginPage.module.scss
View File

@@ -167,9 +167,24 @@
font-size: 14px;
}
// 语言切换按钮
.languageBtn {
// 语言下拉选择
.languageSelect {
white-space: nowrap;
border: 1px solid var(--border-color);
border-radius: $radius-md;
padding: 10px 12px;
font-size: 14px;
background: var(--bg-primary);
color: var(--text-primary);
cursor: pointer;
height: 40px;
box-sizing: border-box;
&:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
}
// 连接信息框

29
src/pages/LoginPage.tsx
View File

@@ -60,7 +60,7 @@ export function LoginPage() {
const location = useLocation();
const { showNotification } = useNotificationStore();
const language = useLanguageStore((state) => state.language);
const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
const setLanguage = useLanguageStore((state) => state.setLanguage);
const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
const login = useAuthStore((state) => state.login);
const restoreSession = useAuthStore((state) => state.restoreSession);
@@ -79,9 +79,12 @@ export function LoginPage() {
const [error, setError] = useState('');
const detectedBase = useMemo(() => detectApiBaseFromLocation(), []);
const nextLanguageIndex = LANGUAGE_ORDER.indexOf(language);
const nextLanguage: Language = LANGUAGE_ORDER[(nextLanguageIndex + 1) % LANGUAGE_ORDER.length];
const nextLanguageLabel = t(LANGUAGE_LABEL_KEYS[nextLanguage]);
const handleLanguageChange = useCallback(
(event: React.ChangeEvent<HTMLSelectElement>) => {
setLanguage(event.target.value as Language);
},
[setLanguage]
);
useEffect(() => {
const init = async () => {
@@ -188,17 +191,19 @@ export function LoginPage() {
<div className={styles.loginHeader}>
<div className={styles.titleRow}>
<div className={styles.title}>{t('title.login')}</div>
<Button
type="button"
variant="ghost"
size="sm"
className={styles.languageBtn}
onClick={toggleLanguage}
<select
className={styles.languageSelect}
value={language}
onChange={handleLanguageChange}
title={t('language.switch')}
aria-label={t('language.switch')}
>
{nextLanguageLabel}
</Button>
{LANGUAGE_ORDER.map((lang) => (
<option key={lang} value={lang}>
{t(LANGUAGE_LABEL_KEYS[lang])}
</option>
))}
</select>
</div>
<div className={styles.subtitle}>{t('login.subtitle')}</div>
</div>

35
src/styles/layout.scss
View File

@@ -190,6 +190,41 @@
gap: $spacing-xs;
flex-shrink: 0;
.language-select-wrapper {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--text-secondary);
&:hover {
color: var(--text-primary);
}
}
.language-select-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.language-select {
border: 1px solid var(--border-color);
border-radius: $radius-md;
padding: 10px 12px;
font-size: 14px;
background: var(--bg-primary);
color: var(--text-primary);
cursor: pointer;
height: 40px;
box-sizing: border-box;
&:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
}
svg {
display: block;
}