Initial commit: expo-popcore-app

components/ui/delete-confirm-dialog.tsx

@@ -0,0 +1,137 @@
+import { StyleSheet, Platform } from 'react-native'
+import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    DeleteAlertDialogAction,
+    CancelAlertDialogAction,
+} from './alert-dialog'
+
+interface DeleteConfirmDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onConfirm: () => void
+    title?: string
+    description?: string
+}
+
+export function DeleteConfirmDialog({
+    open,
+    onOpenChange,
+    onConfirm,
+    title = '删除该条记录?',
+    description = '删除后不可恢复',
+}: DeleteConfirmDialogProps) {
+    const handleConfirm = () => {
+        onConfirm()
+        onOpenChange(false)
+    }
+
+    return (
+        <AlertDialog open={open} onOpenChange={onOpenChange}>
+            <AlertDialogContent style={styles.dialogContent}>
+                <AlertDialogHeader>
+                    <AlertDialogTitle style={styles.dialogTitle}>
+                        {title}
+                    </AlertDialogTitle>
+                    <AlertDialogDescription style={styles.dialogDescription}>
+                        {description}
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter style={styles.dialogFooter}>
+                    <CancelAlertDialogAction
+                        onPress={() => onOpenChange(false)}
+                        style={styles.cancelButton}
+                    />
+                    <DeleteAlertDialogAction
+                        onPress={handleConfirm}
+                        style={styles.confirmDeleteButton}
+                    />
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    )
+}
+
+const styles = StyleSheet.create({
+    dialogContent: {
+        backgroundColor: '#1C1E22',
+        borderRadius: 16,
+        padding: 24,
+        width: '90%',
+        maxWidth: 320,
+        borderWidth: 0,
+        // Android 阴影效果
+        ...Platform.select({
+            android: {
+                elevation: 24,
+            },
+            ios: {
+                shadowColor: '#000',
+                shadowOffset: {
+                    width: 0,
+                    height: 8,
+                },
+                shadowOpacity: 0.3,
+                shadowRadius: 16,
+            },
+        }),
+    },
+    dialogTitle: {
+        color: '#F5F5F5',
+        fontSize: 15,
+        fontWeight: '500',
+        textAlign: 'center',
+        marginBottom: 8,
+        // iOS 字体渲染优化
+        ...Platform.select({
+            ios: {
+                fontWeight: '600',
+            },
+        }),
+    },
+    dialogDescription: {
+        color: '#8A8A8A',
+        fontSize: 13,
+        textAlign: 'center',
+        lineHeight: 20,
+    },
+    dialogFooter: {
+        flexDirection: 'row',
+        gap: 12,
+        marginTop: 24,
+        justifyContent: 'center',
+    },
+    cancelButton: {
+        flex: 1,
+        height: 44,
+        borderRadius: 8,
+        backgroundColor: '#262A31',
+        justifyContent: 'center',
+        alignItems: 'center',
+        // Android 触摸反馈
+        ...Platform.select({
+            android: {
+                elevation: 0,
+            },
+        }),
+    },
+    confirmDeleteButton: {
+        flex: 1,
+        height: 44,
+        borderRadius: 8,
+        backgroundColor: '#FA3F2C',
+        justifyContent: 'center',
+        alignItems: 'center',
+        // Android 触摸反馈
+        ...Platform.select({
+            android: {
+                elevation: 0,
+            },
+        }),
+    },
+})
+