Initial frontend repository commit.

Include app source and update .gitignore to exclude local release artifacts and signing files. Made-with: Cursor
2026-03-09 21:29:03 +08:00
commit 3968660048
129 changed files with 55599 additions and 0 deletions
--- a/src/components/business/SearchBar.tsx
+++ b/src/components/business/SearchBar.tsx
@@ -0,0 +1,134 @@
+/**
+ * SearchBar 搜索栏组件
+ * 用于搜索内容
+ */
+
+import React, { useState } from 'react';
+import { View, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { colors, spacing, fontSizes, borderRadius } from '../../theme';
+
+interface SearchBarProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  onSubmit: () => void;
+  placeholder?: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  autoFocus?: boolean;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({
+  value,
+  onChangeText,
+  onSubmit,
+  placeholder = '搜索...',
+  onFocus,
+  onBlur,
+  autoFocus = false,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+
+  return (
+    <View style={[styles.container, isFocused && styles.containerFocused]}>
+      <View style={[styles.searchIconWrap, isFocused && styles.searchIconWrapFocused]}>
+        <MaterialCommunityIcons
+          name="magnify"
+          size={18}
+          color={isFocused ? colors.primary.main : colors.text.secondary}
+        />
+      </View>
+      <TextInput
+        style={styles.input}
+        value={value}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        placeholderTextColor={colors.text.hint}
+        returnKeyType="search"
+        onSubmitEditing={onSubmit}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        autoFocus={autoFocus}
+      />
+      {value.length > 0 && (
+        <TouchableOpacity
+          onPress={() => onChangeText('')}
+          style={styles.clearButton}
+          activeOpacity={0.7}
+        >
+          <MaterialCommunityIcons
+            name="close"
+            size={14}
+            color={colors.text.secondary}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.background.paper,
+    borderRadius: borderRadius.full,
+    paddingHorizontal: spacing.xs,
+    height: 46,
+    borderWidth: 1,
+    borderColor: '#E7E7E7',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.09,
+    shadowRadius: 6,
+    elevation: 2,
+  },
+  containerFocused: {
+    borderColor: `${colors.primary.main}66`,
+    shadowColor: colors.primary.main,
+    shadowOpacity: 0.18,
+    shadowRadius: 10,
+    elevation: 4,
+  },
+  searchIconWrap: {
+    width: 30,
+    height: 30,
+    marginLeft: spacing.xs,
+    marginRight: spacing.xs,
+    borderRadius: borderRadius.full,
+    backgroundColor: `${colors.text.secondary}12`,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  searchIconWrapFocused: {
+    backgroundColor: `${colors.primary.main}1A`,
+  },
+  input: {
+    flex: 1,
+    fontSize: fontSizes.md,
+    color: colors.text.primary,
+    paddingVertical: spacing.sm + 1,
+    paddingHorizontal: spacing.xs,
+  },
+  clearButton: {
+    width: 24,
+    height: 24,
+    marginHorizontal: spacing.xs,
+    borderRadius: borderRadius.full,
+    backgroundColor: `${colors.text.secondary}14`,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default SearchBar;