🐛 fix(RN): Model Tag component

sudongyuer · sudongyuer · commit 8c88ecf9c4a2 · 2025-07-29T12:28:46.000+08:00
diff --git a/packages/react-native/src/features/ModelTag/index.tsx b/packages/react-native/src/features/ModelTag/index.tsx
@@ -4,43 +4,55 @@ import { Text, View, type ViewStyle } from 'react-native';
 import RNModelIcon from '../ModelIcon';
 
 export interface RNModelTagProps {
-    model: string;
-    style?: ViewStyle;
-    textStyle?: ViewStyle;
-    type?: 'color' | 'mono';
+  model: string;
+  size?: number;
+  style?: ViewStyle;
+  textStyle?: ViewStyle;
+  type?: 'color' | 'mono';
 }
 
-const RNModelTag = memo<RNModelTagProps>(({ type = 'mono', model, style, textStyle, ...rest }) => (
-    <View
+const RNModelTag = memo<RNModelTagProps>(
+  ({ type = 'mono', model, size = 12, style, textStyle, ...rest }) => {
+    // Calculate text size and padding based on icon size
+    const textSize = Math.max(size * 0.9, 10); // Text slightly smaller than icon, minimum 10
+    const paddingHorizontal = Math.max(size * 0.67, 8); // Proportional padding, minimum 8
+    const paddingVertical = Math.max(size * 0.33, 4); // Proportional padding, minimum 4
+    const borderRadius = Math.max(size, 12); // Proportional border radius, minimum 12
+    const marginLeft = Math.max(size * 0.33, 4); // Proportional margin, minimum 4
+
+    return (
+      <View
         style={[
-            {
-                alignItems: 'center',
-                backgroundColor: '#f5f5f5',
-                borderRadius: 12,
-                flexDirection: 'row',
-                paddingHorizontal: 8,
-                paddingVertical: 4,
-            },
-            style,
+          {
+            alignItems: 'center',
+            backgroundColor: '#f5f5f5',
+            borderRadius,
+            flexDirection: 'row',
+            paddingHorizontal,
+            paddingVertical,
+          },
+          style,
         ]}
         {...rest}
-    >
-        <RNModelIcon model={model} size={12} type={type} />
+      >
+        <RNModelIcon model={model} size={size} type={type} />
         <Text
-            style={[
-                {
-                    color: '#666',
-                    fontSize: 12,
-                    marginLeft: 4,
-                },
-                textStyle,
-            ]}
+          style={[
+            {
+              color: '#666',
+              fontSize: textSize,
+              marginLeft,
+            },
+            textStyle,
+          ]}
         >
-            {model}
+          {model}
         </Text>
-    </View>
-));
+      </View>
+    );
+  },
+);
 
 RNModelTag.displayName = 'RNModelTag';
 
-export default RNModelTag; 
+export default RNModelTag;
