1. 修复登录界面文字被遮挡问题
2. 大字模式关闭后显示异常问题
3. 重新调整大字模式是否开启时的字体显示效果
This commit is contained in:
yangshilin
2026-04-10 20:35:57 +08:00
parent abf8497c2e
commit 17b9fa3466
27 changed files with 390 additions and 161 deletions

View File

@@ -1,12 +1,14 @@
/**
* Typography context for large text mode (大字模式).
* Global typography from design tokens.
*
* - **关大字模式** → `typography.large`(舒适基准,不用过小的 `normal` 档)
* - **开大字模式** → `typography.xlarge`(一级页、正文等整体再放大一档)
*
* 对话气泡等仍可在页面内用 `largeText` 做更大一级的 token 选择。
*
* Uses React Context instead of NativeWind vars() because vars() returns empty
* objects on native (iOS/Android), so CSS variables never cascade to children.
* See: https://github.com/nativewind/nativewind/issues/1113
*
* NativeWind vars() docs (works on web only):
* https://www.nativewind.dev/docs/api/vars
* objects on native (iOS/Android). See:
* https://github.com/nativewind/nativewind/issues/1113
*/
import React, {
createContext,
@@ -19,18 +21,23 @@ import { useAppSettings } from '@/hooks/use-app-settings';
import tokens from '../../design-tokens.json';
export type TypographyMode = 'normal' | 'large';
export type TypographyScale = 'large' | 'xlarge';
export type TypographyTokens = Record<string, number>;
const TypographyContext = createContext<TypographyTokens | null>(null);
const SCALE: Record<TypographyScale, TypographyTokens> = {
large: tokens.typography.large as TypographyTokens,
xlarge: tokens.typography.xlarge as TypographyTokens,
};
export function TypographyProvider({ children }: PropsWithChildren) {
const { largeText } = useAppSettings();
const typography = useMemo(() => {
const mode: TypographyMode = largeText ? 'large' : 'normal';
return tokens.typography[mode] as TypographyTokens;
}, [largeText]);
const typography = useMemo(
() => SCALE[largeText ? 'xlarge' : 'large'],
[largeText],
);
return (
<TypographyContext.Provider value={typography}>