feat(chat): enhance chat settings and message bubble styles

- Introduced dynamic chat settings for font size and message bubble radius, improving user customization.
- Updated ChatScreen styles to support dynamic themes and responsive layouts.
- Refactored bubble styles to utilize dynamic properties for better visual consistency.
- Simplified chat settings management by integrating Zustand store for state management.

This update significantly enhances the chat interface and user experience by allowing personalized settings and improved visual elements.

src/components/common/ImageGrid.tsx

@@ -132,10 +132,10 @@ function createImageGridStyles(colors: AppColors) {
       aspectRatio: 1,
     },
     gridItem2: {
-      width: '49%',
+      width: '48.5%',
     },
     gridItem3: {
-      width: '32.5%',
+      width: '31.8%',
     },
     masonryContainer: {
       flexDirection: 'row',

src/components/common/StepIndicator.tsx

@@ -12,7 +12,7 @@ export interface Step {
   title: string;
 }
 
-interface StepIndicatorProps {
+export interface StepIndicatorProps {
   steps: Step[];
   currentStep: number;
   containerStyle?: ViewStyle;

src/components/common/VerificationCodeInput.tsx

@@ -201,7 +201,7 @@ export const VerificationCodeInput: React.FC<VerificationCodeInputProps> = ({
 };
 
 function createStyles(colors: AppColors) {
-  return {
+  return StyleSheet.create({
     container: {
       alignItems: 'center',
       justifyContent: 'center',
@@ -225,7 +225,7 @@ function createStyles(colors: AppColors) {
     },
     cellFocused: {
       borderColor: colors.primary.main,
-      backgroundColor: `${colors.primary.main}10`, // 10% 透明度的主色
+      backgroundColor: `${colors.primary.main}10`,
     },
     cellFilled: {
       borderColor: colors.primary.main,
@@ -250,7 +250,7 @@ function createStyles(colors: AppColors) {
       backgroundColor: colors.primary.main,
       borderRadius: 1,
     },
-  };
+  });
 }
 
 export default VerificationCodeInput;