IOS小组件/文案

client/components/home/ThemeModal.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import SheetModal from '@/components/ui/SheetModal';
 
-export type ThemeMode = 'scenery' | 'color';
+import type { ThemeMode } from '@/src/storage/appStorage';
 
 type Props = {
   visible: boolean;
@@ -16,7 +16,7 @@ type Props = {
 export default function ThemeModal({ visible, mode, onSelect, onClose }: Props) {
   const { t } = useTranslation();
   return (
-    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose} height={350}>
+    <SheetModal visible={visible} title={t('theme.title')} onClose={onClose} height={360}>
       <View style={styles.row}>
         <ThemeCard
           title={t('theme.scenery')}
@@ -41,6 +41,19 @@ export default function ThemeModal({ visible, mode, onSelect, onClose }: Props)
             style={styles.previewImage}
           />
         </ThemeCard>
+
+        <ThemeCard
+          title={t('theme.suixin')}
+          selected={mode === 'suixin'}
+          onPress={() => onSelect('suixin')}
+        >
+          <Image
+            // 占位：一期复用纯色预览图，后续可替换为专用资源
+            source={require('../../assets/images/theme/theme_color.png')}
+            resizeMode="cover"
+            style={styles.previewImage}
+          />
+        </ThemeCard>
       </View>
     </SheetModal>
   );
@@ -81,19 +94,20 @@ function ThemeCard({
 const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
-    gap: 30,
-    paddingHorizontal: 10,
+    flexWrap: 'wrap',
+    gap: 12,
+    paddingHorizontal: 0,
     paddingBottom: 50,
     paddingTop: 20,
     justifyContent: 'center',
   },
   cardContainer: {
     alignItems: 'center',
-    width: 143,
+    width: 112,
   },
   previewWrapper: {
-    width: 138,
-    height: 203,
+    width: 110,
+    height: 178,
     borderRadius: 26,
     padding: 6.5,
     justifyContent: 'center',