From b6583e07c85316e5ee55e1a75c9cb109ba6d821b Mon Sep 17 00:00:00 2001
From: lafay <2021211506@stu.hit.edu.cn>
Date: Thu, 26 Mar 2026 03:58:09 +0800
Subject: [PATCH] feat(TextComponent): enhance text styling with dynamic font
 weights and improved layout

- Updated Text component to support dynamic font weights, allowing for more flexible text styling.
- Refactored variant styles to utilize new font weight constants for better consistency across text variants.
- Introduced letter spacing adjustments for improved readability and visual appeal.
- Added font family configuration for iOS and Android to optimize typography across platforms.
---
 src/components/common/Text.tsx | 33 +++++++++++++++++++++------------
 src/theme/tokens.ts            | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/components/common/Text.tsx b/src/components/common/Text.tsx
index 8870a08..ca6404e 100644
--- a/src/components/common/Text.tsx
+++ b/src/components/common/Text.tsx
@@ -4,8 +4,8 @@
  */
 
 import React from 'react';
-import { Text as RNText, TextProps, StyleSheet, TextStyle, ViewStyle } from 'react-native';
-import { useAppColors, fontSizes } from '../../theme';
+import { Text as RNText, TextProps, StyleSheet, TextStyle, ViewStyle, Platform } from 'react-native';
+import { useAppColors, fontSizes, fontWeights } from '../../theme';
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
 
@@ -16,38 +16,45 @@ interface CustomTextProps extends Omit<TextProps, 'style'> {
   numberOfLines?: number;
   onPress?: () => void;
   style?: TextStyle | TextStyle[];
+  weight?: 'regular' | 'medium' | 'semibold' | 'bold';
 }
 
 const variantStyles: Record<TextVariant, object> = {
   h1: {
     fontSize: fontSizes['4xl'],
-    fontWeight: '700',
-    lineHeight: fontSizes['4xl'] * 1.4,
+    fontWeight: fontWeights.bold,
+    lineHeight: fontSizes['4xl'] * 1.3,
+    letterSpacing: -0.5,
   },
   h2: {
     fontSize: fontSizes['3xl'],
-    fontWeight: '600',
-    lineHeight: fontSizes['3xl'] * 1.4,
+    fontWeight: fontWeights.semibold,
+    lineHeight: fontSizes['3xl'] * 1.3,
+    letterSpacing: -0.3,
   },
   h3: {
     fontSize: fontSizes['2xl'],
-    fontWeight: '600',
+    fontWeight: fontWeights.semibold,
     lineHeight: fontSizes['2xl'] * 1.3,
+    letterSpacing: -0.2,
   },
   body: {
     fontSize: fontSizes.md,
-    fontWeight: '400',
-    lineHeight: fontSizes.md * 1.5,
+    fontWeight: fontWeights.regular,
+    lineHeight: fontSizes.md * 1.6,
+    letterSpacing: 0.1,
   },
   caption: {
     fontSize: fontSizes.sm,
-    fontWeight: '400',
-    lineHeight: fontSizes.sm * 1.4,
+    fontWeight: fontWeights.regular,
+    lineHeight: fontSizes.sm * 1.5,
+    letterSpacing: 0.2,
   },
   label: {
     fontSize: fontSizes.xs,
-    fontWeight: '500',
+    fontWeight: fontWeights.medium,
     lineHeight: fontSizes.xs * 1.4,
+    letterSpacing: 0.3,
   },
 };
 
@@ -55,6 +62,7 @@ const Text: React.FC<CustomTextProps> = ({
   children,
   variant = 'body',
   color,
+  weight,
   numberOfLines,
   onPress,
   style,
@@ -64,6 +72,7 @@ const Text: React.FC<CustomTextProps> = ({
   const textStyle = [
     styles.base,
     variantStyles[variant],
+    weight ? { fontWeight: fontWeights[weight] } : null,
     color ? { color } : { color: colors.text.primary },
     style,
   ];
diff --git a/src/theme/tokens.ts b/src/theme/tokens.ts
index 2cbe911..646dd97 100644
--- a/src/theme/tokens.ts
+++ b/src/theme/tokens.ts
@@ -2,6 +2,39 @@
  * 与明暗无关的设计 token
  */
 
+// 字体配置 - 使用系统字体栈，优化字重
+export const fontFamily = {
+  // iOS 系统字体
+  ios: {
+    regular: 'System',
+    medium: 'System',
+    semibold: 'System',
+    bold: 'System',
+  },
+  // Android 系统字体
+  android: {
+    regular: 'Roboto',
+    medium: 'Roboto',
+    semibold: 'Roboto',
+    bold: 'Roboto',
+  },
+  // 通用字体栈
+  system: {
+    regular: 'System',
+    medium: 'System',
+    semibold: 'System',
+    bold: 'System',
+  },
+};
+
+// 字体字重 - 使用数值更精确控制
+export const fontWeights = {
+  regular: '400' as const,
+  medium: '500' as const,
+  semibold: '600' as const,
+  bold: '700' as const,
+};
+
 export const fontSizes = {
   xs: 10,
   sm: 12,