Initial frontend repository commit.

Include app source and update .gitignore to exclude local release artifacts and signing files.

Made-with: Cursor

src/components/common/Button.tsx

@@ -0,0 +1,260 @@
+/**
+ * Button 按钮组件
+ * 支持多种变体、尺寸、加载状态和图标
+ */
+
+import React from 'react';
+import {
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { colors, borderRadius, spacing, fontSizes, shadows } from '../../theme';
+import Text from './Text';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type IconPosition = 'left' | 'right';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  icon?: string; // MaterialCommunityIcons name
+  iconPosition?: IconPosition;
+  fullWidth?: boolean;
+  style?: ViewStyle;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  variant = 'primary',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  icon,
+  iconPosition = 'left',
+  fullWidth = false,
+  style,
+}) => {
+  // 获取按钮样式
+  const getButtonStyle = (): ViewStyle[] => {
+    const baseStyle: ViewStyle[] = [styles.base, styles[`size_${size}`]];
+
+    // 变体样式
+    switch (variant) {
+      case 'primary':
+        baseStyle.push(styles.primary);
+        break;
+      case 'secondary':
+        baseStyle.push(styles.secondary);
+        break;
+      case 'outline':
+        baseStyle.push(styles.outline);
+        break;
+      case 'text':
+        baseStyle.push(styles.text);
+        break;
+      case 'danger':
+        baseStyle.push(styles.danger);
+        break;
+    }
+
+    // 禁用状态
+    if (disabled || loading) {
+      baseStyle.push(styles.disabled);
+    }
+
+    // 全宽度
+    if (fullWidth) {
+      baseStyle.push(styles.fullWidth);
+    }
+
+    return baseStyle;
+  };
+
+  // 获取文本样式
+  const getTextStyle = (): TextStyle => {
+    const baseStyle: TextStyle = {
+      ...styles.textBase,
+      ...styles[`textSize_${size}`],
+    };
+
+    switch (variant) {
+      case 'primary':
+      case 'danger':
+        baseStyle.color = colors.text.inverse;
+        break;
+      case 'secondary':
+        baseStyle.color = colors.text.inverse;
+        break;
+      case 'outline':
+      case 'text':
+        baseStyle.color = colors.primary.main;
+        break;
+    }
+
+    if (disabled || loading) {
+      baseStyle.color = colors.text.disabled;
+    }
+
+    return baseStyle;
+  };
+
+  // 获取图标大小
+  const getIconSize = (): number => {
+    switch (size) {
+      case 'sm':
+        return 16;
+      case 'md':
+        return 20;
+      case 'lg':
+        return 24;
+    }
+  };
+
+  // 获取图标颜色
+  const getIconColor = (): string => {
+    if (disabled || loading) {
+      return colors.text.disabled;
+    }
+    switch (variant) {
+      case 'primary':
+      case 'danger':
+        return colors.text.inverse;
+      case 'secondary':
+        return colors.text.inverse;
+      case 'outline':
+      case 'text':
+        return colors.primary.main;
+    }
+  };
+
+  const isDisabled = disabled || loading;
+
+  return (
+    <TouchableOpacity
+      style={[getButtonStyle(), style]}
+      onPress={onPress}
+      disabled={isDisabled}
+      activeOpacity={0.9}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size="small"
+          color={variant === 'outline' || variant === 'text' 
+            ? colors.primary.main 
+            : colors.text.inverse}
+        />
+      ) : (
+        <View style={styles.content}>
+          {icon && iconPosition === 'left' && (
+            <MaterialCommunityIcons
+              name={icon as any}
+              size={getIconSize()}
+              color={getIconColor()}
+              style={styles.iconLeft}
+            />
+          )}
+          <Text style={getTextStyle()}>{title}</Text>
+          {icon && iconPosition === 'right' && (
+            <MaterialCommunityIcons
+              name={icon as any}
+              size={getIconSize()}
+              color={getIconColor()}
+              style={styles.iconRight}
+            />
+          )}
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  base: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: borderRadius.md,
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  // 尺寸样式
+  size_sm: {
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    minHeight: 32,
+  },
+  size_md: {
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    minHeight: 40,
+  },
+  size_lg: {
+    paddingVertical: spacing.lg,
+    paddingHorizontal: spacing.xl,
+    minHeight: 48,
+  },
+  // 变体样式
+  primary: {
+    backgroundColor: colors.primary.main,
+  },
+  secondary: {
+    backgroundColor: colors.secondary.main,
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: colors.primary.main,
+  },
+  text: {
+    backgroundColor: 'transparent',
+    shadowColor: 'transparent',
+    elevation: 0,
+  },
+  danger: {
+    backgroundColor: colors.error.main,
+  },
+  // 禁用状态
+  disabled: {
+    backgroundColor: colors.background.disabled,
+    borderColor: colors.background.disabled,
+  },
+  // 全宽度
+  fullWidth: {
+    width: '100%',
+  },
+  // 文本样式
+  textBase: {
+    fontWeight: '600',
+  },
+  textSize_sm: {
+    fontSize: fontSizes.sm,
+  },
+  textSize_md: {
+    fontSize: fontSizes.md,
+  },
+  textSize_lg: {
+    fontSize: fontSizes.lg,
+  },
+  // 图标样式
+  iconLeft: {
+    marginRight: spacing.sm,
+  },
+  iconRight: {
+    marginLeft: spacing.sm,
+  },
+});
+
+export default Button;