72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
/**
|
||
* 管理后台的外观偏好：语言（中/英）与主题（浅色/深色）。
|
||
* 保存在 localStorage，刷新后保持，管理员与普通用户共用。
|
||
*/
|
||
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
||
import type { ReactNode } from 'react';
|
||
|
||
import { translate } from './adminI18n';
|
||
import type { AdminLang } from './adminI18n';
|
||
|
||
export type AdminThemeMode = 'light' | 'dark';
|
||
|
||
interface AdminPrefs {
|
||
lang: AdminLang;
|
||
themeMode: AdminThemeMode;
|
||
setLang: (lang: AdminLang) => void;
|
||
setThemeMode: (mode: AdminThemeMode) => void;
|
||
/** 按当前语言翻译文案（未收录时原样返回） */
|
||
t: (text: string) => string;
|
||
}
|
||
|
||
const STORAGE_KEY = 'cosmo_admin_prefs';
|
||
const AdminPrefsContext = createContext<AdminPrefs | null>(null);
|
||
|
||
function readStoredPrefs(): { lang: AdminLang; themeMode: AdminThemeMode } {
|
||
const fallback = { lang: 'zh' as AdminLang, themeMode: 'light' as AdminThemeMode };
|
||
try {
|
||
const raw = localStorage.getItem(STORAGE_KEY);
|
||
if (!raw) return fallback;
|
||
const parsed = JSON.parse(raw) as Partial<{ lang: AdminLang; themeMode: AdminThemeMode }>;
|
||
return {
|
||
lang: parsed.lang === 'en' ? 'en' : 'zh',
|
||
themeMode: parsed.themeMode === 'dark' ? 'dark' : 'light',
|
||
};
|
||
} catch {
|
||
return fallback;
|
||
}
|
||
}
|
||
|
||
export function AdminPrefsProvider({ children }: { children: ReactNode }) {
|
||
const [prefs, setPrefs] = useState(readStoredPrefs);
|
||
|
||
useEffect(() => {
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
|
||
}, [prefs]);
|
||
|
||
const setLang = useCallback((lang: AdminLang) => setPrefs((current) => ({ ...current, lang })), []);
|
||
const setThemeMode = useCallback(
|
||
(themeMode: AdminThemeMode) => setPrefs((current) => ({ ...current, themeMode })),
|
||
[],
|
||
);
|
||
|
||
const value = useMemo<AdminPrefs>(
|
||
() => ({
|
||
lang: prefs.lang,
|
||
themeMode: prefs.themeMode,
|
||
setLang,
|
||
setThemeMode,
|
||
t: (text: string) => translate(text, prefs.lang),
|
||
}),
|
||
[prefs.lang, prefs.themeMode, setLang, setThemeMode],
|
||
);
|
||
|
||
return <AdminPrefsContext.Provider value={value}>{children}</AdminPrefsContext.Provider>;
|
||
}
|
||
|
||
export function useAdminPrefs(): AdminPrefs {
|
||
const context = useContext(AdminPrefsContext);
|
||
if (!context) throw new Error('useAdminPrefs must be used inside AdminPrefsProvider');
|
||
return context;
|
||
}
|