feat: 首页更新

2025-11-11 18:48:54 +08:00
parent 230191f181
commit b48cce06f4
43 changed files with 3186 additions and 1029 deletions
--- a/theme/styles.ts
+++ b/theme/styles.ts
@@ -1,30 +1,32 @@
 /**
 * 主题样式工厂
- * 
+ *
 * 提供创建主题感知样式的工具函数
- * 
+ *
 * React Native 不支持 CSS 类名，但可以通过样式工厂函数实现类似效果
 */

 import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
 import Colors from '@/constants/Colors';
+import { ThemeEnum } from '@/constants/theme';

 /**
 * 主题样式类型
 */
 export type ThemeStyles = {
-  light: any;
-  dark: any;
+  [ThemeEnum.LIGHT]: any;
+  [ThemeEnum.DARK]: any;
+  [ThemeEnum.ORANGE]: any;
 };

 /**
 * 创建主题样式
- * 
+ *
 * 类似于 CSS 类名的概念，但使用函数式方法
- * 
+ *
 * @param createStyles - 样式创建函数，接收颜色对象
 * @returns 主题样式对象
- * 
+ *
 * @example
 * ```tsx
 * const styles = createThemeStyles((colors) => ({
@@ -37,7 +39,7 @@ export type ThemeStyles = {
 *     fontSize: 16,
 *   },
 * }));
- * 
+ *
 * // 使用
 * const theme = useColorScheme();
 * <View style={styles[theme].container}>
@@ -46,23 +48,25 @@ export type ThemeStyles = {
 * ```
 */
 export function createThemeStyles<T extends StyleSheet.NamedStyles<T>>(
-  createStyles: (colors: typeof Colors.light) => T
+  createStyles: (colors: typeof Colors.light & typeof Colors.dark & typeof Colors.orange) => T
 ): ThemeStyles {
  return {
    light: StyleSheet.create(createStyles(Colors.light)),
    dark: StyleSheet.create(createStyles(Colors.dark)),
+    orange: StyleSheet.create(createStyles(Colors.light)),
  };
 }

 /**
 * 创建响应式主题样式
- * 
+ *
 * 允许为不同主题定义完全不同的样式
- * 
+ *
 * @param lightStyles - 浅色主题样式
 * @param darkStyles - 深色主题样式
+ * @param orangeStyles - 橙色主题样式
 * @returns 主题样式对象
- * 
+ *
 * @example
 * ```tsx
 * const styles = createResponsiveThemeStyles(
@@ -79,17 +83,19 @@ export function createThemeStyles<T extends StyleSheet.NamedStyles<T>>(
 */
 export function createResponsiveThemeStyles<T extends StyleSheet.NamedStyles<T>>(
  lightStyles: T,
-  darkStyles: T
+  darkStyles: T,
+  orangeStyles: T
 ): ThemeStyles {
  return {
    light: StyleSheet.create(lightStyles),
    dark: StyleSheet.create(darkStyles),
+    orange: StyleSheet.create(lightStyles),
  };
 }

 /**
 * 预定义的通用样式类
- * 
+ *
 * 类似于 Tailwind CSS 的工具类
 */
 export const commonStyles = createThemeStyles((colors) => ({
@@ -109,7 +115,7 @@ export const commonStyles = createThemeStyles((colors) => ({
    justifyContent: 'center',
    alignItems: 'center',
  },
-  
+
  // 卡片样式
  card: {
    backgroundColor: colors.card,
@@ -128,7 +134,7 @@ export const commonStyles = createThemeStyles((colors) => ({
    shadowRadius: 4,
    elevation: 3,
  },
-  
+
  // 文本样式
  textPrimary: {
    color: colors.text,
@@ -152,7 +158,7 @@ export const commonStyles = createThemeStyles((colors) => ({
    fontSize: 18,
    fontWeight: '600',
  } as TextStyle,
-  
+
  // 按钮样式
  button: {
    backgroundColor: colors.buttonPrimary,
@@ -182,7 +188,7 @@ export const commonStyles = createThemeStyles((colors) => ({
    fontSize: 16,
    fontWeight: '600',
  } as TextStyle,
-  
+
  // 输入框样式
  input: {
    backgroundColor: colors.inputBackground,
@@ -204,7 +210,7 @@ export const commonStyles = createThemeStyles((colors) => ({
    fontSize: 16,
    color: colors.text,
  } as TextStyle,
-  
+
  // 分隔线
  separator: {
    height: 1,
@@ -214,14 +220,14 @@ export const commonStyles = createThemeStyles((colors) => ({
    width: 1,
    backgroundColor: colors.separator,
  } as ViewStyle,
-  
+
  // 间距
  spacingXs: { height: 4 } as ViewStyle,
  spacingSm: { height: 8 } as ViewStyle,
  spacingMd: { height: 16 } as ViewStyle,
  spacingLg: { height: 24 } as ViewStyle,
  spacingXl: { height: 32 } as ViewStyle,
-  
+
  // 布局
  row: {
    flexDirection: 'row',
@@ -243,11 +249,11 @@ export const commonStyles = createThemeStyles((colors) => ({

 /**
 * 获取主题样式
- * 
+ *
 * @param styles - 主题样式对象
 * @param theme - 当前主题
 * @returns 当前主题的样式
- * 
+ *
 * @example
 * ```tsx
 * const theme = useColorScheme();
@@ -255,7 +261,7 @@ export const commonStyles = createThemeStyles((colors) => ({
 * <View style={style.container} />
 * ```
 */
-export function getThemeStyle<T>(styles: ThemeStyles, theme: 'light' | 'dark'): T {
+export function getThemeStyle<T>(styles: ThemeStyles, theme: ThemeEnum): T {
  return styles[theme];
 }

--- a/theme/utils.ts
+++ b/theme/utils.ts
@@ -1,43 +1,45 @@
 /**
 * 主题工具函数
- * 
+ *
 * 提供主题相关的辅助函数
 */

 import Colors from '@/constants/Colors';
+import { ThemeEnum } from '@/constants/theme';

 /**
 * 根据主题获取颜色
- * 
- * @param theme - 主题类型 'light' | 'dark'
+ *
+ * @param theme - 主题类型 ThemeEnum
 * @param colorName - 颜色名称
 * @returns 颜色值
 */
 export function getThemeColor(
-  theme: 'light' | 'dark',
-  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+  theme: ThemeEnum,
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark & keyof typeof Colors.orange
 ): string {
  return Colors[theme][colorName];
 }

 /**
 * 根据主题获取所有颜色
- * 
- * @param theme - 主题类型 'light' | 'dark'
+ *
+ * @param theme - 主题类型 ThemeEnum
 * @returns 颜色对象
 */
-export function getThemeColors(theme: 'light' | 'dark') {
+export function getThemeColors(theme: ThemeEnum) {
  return Colors[theme];
 }

 /**
 * 创建主题感知的样式
- * 
+ *
 * @param lightStyle - 浅色主题样式
 * @param darkStyle - 深色主题样式
+ * @param orangeStyle - 橙色主题样式
 * @param theme - 当前主题
 * @returns 合并后的样式
- * 
+ *
 * @example
 * ```tsx
 * const style = createThemedStyle(
@@ -50,19 +52,30 @@ export function getThemeColors(theme: 'light' | 'dark') {
 export function createThemedStyle<T>(
  lightStyle: T,
  darkStyle: T,
-  theme: 'light' | 'dark'
+  orangeStyle: T,
+  theme: ThemeEnum
 ): T {
-  return theme === 'dark' ? darkStyle : lightStyle;
+  switch (theme) {
+    case ThemeEnum.LIGHT:
+      return lightStyle;
+    case ThemeEnum.DARK:
+      return darkStyle;
+    case ThemeEnum.ORANGE:
+      return orangeStyle;
+    default:
+      return lightStyle;
+  }
 }

 /**
 * 根据主题选择值
- * 
+ *
 * @param lightValue - 浅色主题值
 * @param darkValue - 深色主题值
+ * @param orangeValue - 深色主题值
 * @param theme - 当前主题
 * @returns 选中的值
- * 
+ *
 * @example
 * ```tsx
 * const fontSize = selectByTheme(14, 16, theme);
@@ -71,18 +84,28 @@ export function createThemedStyle<T>(
 export function selectByTheme<T>(
  lightValue: T,
  darkValue: T,
-  theme: 'light' | 'dark'
+  orangeValue: T,
+  theme: ThemeEnum
 ): T {
-  return theme === 'dark' ? darkValue : lightValue;
+  switch (theme) {
+    case ThemeEnum.LIGHT:
+      return lightValue;
+    case ThemeEnum.DARK:
+      return darkValue;
+    case ThemeEnum.ORANGE:
+      return orangeValue;
+    default:
+      return lightValue;
+  }
 }

 /**
 * 颜色透明度调整
- * 
+ *
 * @param color - 十六进制颜色值
 * @param opacity - 透明度 0-1
 * @returns 带透明度的颜色值
- * 
+ *
 * @example
 * ```tsx
 * const color = withOpacity('#000000', 0.5); // rgba(0, 0, 0, 0.5)
@@ -91,32 +114,42 @@ export function selectByTheme<T>(
 export function withOpacity(color: string, opacity: number): string {
  // 移除 # 号
  const hex = color.replace('#', '');
-  
+
  // 转换为 RGB
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
-  
+
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
 }

 /**
 * 判断是否为深色主题
- * 
+ *
 * @param theme - 主题类型
 * @returns 是否为深色主题
 */
-export function isDarkTheme(theme: 'light' | 'dark'): boolean {
-  return theme === 'dark';
+export function isDarkTheme(theme: ThemeEnum): boolean {
+  return theme === ThemeEnum.DARK;
 }

 /**
 * 判断是否为浅色主题
- * 
+ *
 * @param theme - 主题类型
 * @returns 是否为浅色主题
 */
-export function isLightTheme(theme: 'light' | 'dark'): boolean {
-  return theme === 'light';
+export function isLightTheme(theme: ThemeEnum): boolean {
+  return theme === ThemeEnum.LIGHT;
+}
+
+/**
+ * 判断是否为橙色主题
+ *
+ * @param theme - 主题类型
+ * @returns 是否为橙色主题
+ */
+export function isOrangeTheme(theme: ThemeEnum): boolean {
+  return theme === ThemeEnum.ORANGE;
 }