feature:基本功能

client/components/home/WidgetModal.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTranslation } from 'react-i18next';
+
+import SheetModal from '@/components/ui/SheetModal';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+};
+
+export default function WidgetModal({ visible, onClose }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <SheetModal visible={visible} title={t('profile.widget')} onClose={onClose}>
+      <View style={styles.content}>
+        <View style={styles.row}>
+          <PreviewCard label={t('widget.lockScreen')}>
+            <View style={[styles.previewInner, styles.previewLock]}>
+              <Text style={styles.previewDate} numberOfLines={1}>
+                {t('widget.previewDate')}
+              </Text>
+              <Text style={styles.previewTime} numberOfLines={1}>
+                13:45
+              </Text>
+            </View>
+          </PreviewCard>
+
+          <PreviewCard label={t('widget.homeScreen')}>
+            <View style={[styles.previewInner, styles.previewHome]}>
+              <Text style={styles.previewQuote} numberOfLines={3}>
+                {t('widget.previewQuote')}
+              </Text>
+            </View>
+          </PreviewCard>
+        </View>
+
+        <Text style={styles.desc}>{t('settings.widgetDesc')}</Text>
+      </View>
+    </SheetModal>
+  );
+}
+
+function PreviewCard({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <View style={styles.card}>
+      {children}
+      <Text style={styles.cardLabel}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    paddingBottom: 18,
+    gap: 14,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  card: {
+    flex: 1,
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: 'rgba(255,255,255,0.75)',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(94,42,40,0.12)',
+  },
+  previewInner: {
+    height: 120,
+    padding: 12,
+    justifyContent: 'center',
+  },
+  previewLock: {
+    backgroundColor: 'rgba(244,214,194,0.65)',
+  },
+  previewHome: {
+    backgroundColor: 'rgba(243,208,225,0.55)',
+  },
+  previewDate: {
+    color: 'rgba(94,42,40,0.70)',
+    fontSize: 12,
+    fontWeight: '600',
+    marginBottom: 6,
+  },
+  previewTime: {
+    color: '#ffffff',
+    fontSize: 44,
+    fontWeight: '800',
+    letterSpacing: 1,
+  },
+  previewQuote: {
+    color: '#5E2A28',
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '700',
+  },
+  cardLabel: {
+    paddingVertical: 10,
+    textAlign: 'center',
+    color: '#5E2A28',
+    fontSize: 13,
+    fontWeight: '700',
+  },
+  desc: {
+    color: 'rgba(94,42,40,0.75)',
+    fontSize: 13,
+    lineHeight: 18,
+  },
+});
+