feat: update

components/Themed.tsx

@@ -1,12 +1,14 @@
 /**
- * Learn more about Light and Dark modes:
- * https://docs.expo.io/guides/color-schemes/
+ * 主题化组件
+ *
+ * 提供自动适配主题的 Text 和 View 组件
+ * 支持从 settingsStore 读取主题设置
  */
 
-import { Text as DefaultText, View as DefaultView } from 'react-native';
+import { Text as DefaultText, View as DefaultView, TextStyle } from 'react-native';
 
 import Colors from '@/constants/Colors';
-import { useColorScheme } from './useColorScheme';
+import { useColorScheme } from '@/hooks/useTheme';
 
 type ThemeProps = {
   lightColor?: string;
@@ -16,6 +18,13 @@ type ThemeProps = {
 export type TextProps = ThemeProps & DefaultText['props'];
 export type ViewProps = ThemeProps & DefaultView['props'];
 
+/**
+ * 获取主题颜色
+ *
+ * @param props - 包含 light 和 dark 颜色的对象
+ * @param colorName - Colors 中定义的颜色名称
+ * @returns 当前主题对应的颜色值
+ */
 export function useThemeColor(
   props: { light?: string; dark?: string },
   colorName: keyof typeof Colors.light & keyof typeof Colors.dark
@@ -30,6 +39,11 @@ export function useThemeColor(
   }
 }
 
+/**
+ * 主题化 Text 组件
+ *
+ * 自动应用当前主题的文本颜色
+ */
 export function Text(props: TextProps) {
   const { style, lightColor, darkColor, ...otherProps } = props;
   const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
@@ -37,9 +51,77 @@ export function Text(props: TextProps) {
   return <DefaultText style={[{ color }, style]} {...otherProps} />;
 }
 
+/**
+ * 主题化 View 组件
+ *
+ * 自动应用当前主题的背景颜色
+ */
 export function View(props: ViewProps) {
   const { style, lightColor, darkColor, ...otherProps } = props;
   const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
 
   return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
 }
+
+/**
+ * 主题化 Text 组件（带类型）
+ *
+ * 支持不同的文本类型：title, subtitle, defaultSemiBold, link
+ */
+export type ThemedTextProps = TextProps & {
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+export function ThemedText({ style, type = 'default', ...rest }: ThemedTextProps) {
+  const color = useThemeColor({}, 'text');
+  const linkColor = useThemeColor({}, 'tint');
+
+  const typeStyles: Record<string, TextStyle> = {
+    default: {
+      fontSize: 16,
+      lineHeight: 24,
+    },
+    defaultSemiBold: {
+      fontSize: 16,
+      lineHeight: 24,
+      fontWeight: '600',
+    },
+    title: {
+      fontSize: 32,
+      fontWeight: 'bold',
+      lineHeight: 40,
+    },
+    subtitle: {
+      fontSize: 20,
+      fontWeight: '600',
+      lineHeight: 28,
+    },
+    link: {
+      fontSize: 16,
+      lineHeight: 24,
+      color: linkColor,
+    },
+  };
+
+  return (
+    <Text
+      style={[
+        { color },
+        typeStyles[type],
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+/**
+ * 主题化 View 组件
+ */
+export type ThemedViewProps = ViewProps;
+
+export function ThemedView({ style, ...otherProps }: ThemedViewProps) {
+  const backgroundColor = useThemeColor({}, 'background');
+
+  return <DefaultView style={[{ backgroundColor }, style]} {...otherProps} />;
+}