react-native-x-components 0.1.0

package/dist/XRecord/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ============================================================================
+ * XRecord —— 录音（duxui Recorder 的 expo-audio 重写版）
+ * ============================================================================
+ *
+ * 【与 duxui Recorder 的关系】
+ * duxui 用 Taro getRecorderManager()（RN 端依赖 duxapp 原生录音模块），
+ * Expo 项目换官方 expo-audio：useAudioRecorder + RecordingPresets +
+ * useAudioRecorderState（轮询 RecorderState 拿时长，SDK 57 实测 API）。
+ * 交互保留 duxui 的"三段式"：待录音 → 录音中（计时/停止）→ 完成
+ * （试听/重录/使用），并补充受控 value 支持。
+ *
+ * 【取值】onChange({uri, duration})——uri 为本机临时文件，
+ * 上传可配合 XUpload 适配器（业务自行接管 uri）。
+ * ============================================================================
+ */
+import React from 'react';
+/** 录音结果 */
+export interface XRecordValue {
+    /** 本机文件地址 file://... */
+    uri: string;
+    /** 秒 */
+    duration: number;
+}
+export interface XRecordProps {
+    /** 最长录音秒数，默认 60（duxui 同默认） */
+    max?: number;
+    /** 受控值（回显已上抛的录音） */
+    value?: XRecordValue | null;
+    /** 录音完成并点"使用"后回传 */
+    onChange?: (value: XRecordValue) => void;
+    /** 麦克风权限被拒回调 */
+    onPermissionDenied?: () => void;
+    disabled?: boolean;
+}
+export declare function XRecord({ max, value, onChange, onPermissionDenied, disabled }: XRecordProps): React.JSX.Element;
+export default XRecord;

package/dist/XRecord/index.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XRecord —— 录音（duxui Recorder 的 expo-audio 重写版）
+ * ============================================================================
+ *
+ * 【与 duxui Recorder 的关系】
+ * duxui 用 Taro getRecorderManager()（RN 端依赖 duxapp 原生录音模块），
+ * Expo 项目换官方 expo-audio：useAudioRecorder + RecordingPresets +
+ * useAudioRecorderState（轮询 RecorderState 拿时长，SDK 57 实测 API）。
+ * 交互保留 duxui 的"三段式"：待录音 → 录音中（计时/停止）→ 完成
+ * （试听/重录/使用），并补充受控 value 支持。
+ *
+ * 【取值】onChange({uri, duration})——uri 为本机临时文件，
+ * 上传可配合 XUpload 适配器（业务自行接管 uri）。
+ * ============================================================================
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { RecordingPresets, requestRecordingPermissionsAsync, useAudioPlayer, useAudioPlayerStatus, useAudioRecorder, useAudioRecorderState, } from 'expo-audio';
+import { useXTheme } from '../theme';
+import { useXLocale } from '../XLocale';
+import { XButton } from '../XButton';
+/** 秒 → mm:ss */
+const fmt = (s) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
+export function XRecord({ max = 60, value, onChange, onPermissionDenied, disabled = false }) {
+    const t = useXTheme();
+    const { t: i18n } = useXLocale();
+    /** 三段式状态：idle 待录音 / recording 录音中 / done 录完待确认 */
+    const [phase, setPhase] = useState('idle');
+    /** 录完待确认的草稿 */
+    const [draft, setDraft] = useState(null);
+    /** 权限拒绝提示 */
+    const [denied, setDenied] = useState(false);
+    /** 录音停止瞬间锁存的时长（state 轮询停更后仍能取到正确值） */
+    const secondsRef = useRef(0);
+    const recorder = useAudioRecorder(RecordingPresets.HIGH_QUALITY);
+    /** 轮询录音状态（200ms）：时长计时 + 上限判断 */
+    const recState = useAudioRecorderState(recorder, 200);
+    const seconds = recState.durationMillis / 1000;
+    /** 停止录音 → 生成草稿 */
+    const finishRecording = useCallback(async () => {
+        try {
+            await recorder.stop();
+            const uri = recorder.uri ?? recState.url;
+            if (uri) {
+                setDraft({ uri, duration: Math.max(1, Math.round(Math.min(secondsRef.current || seconds, max))) });
+                setPhase('done');
+            }
+            else {
+                setPhase('idle');
+            }
+        }
+        catch {
+            setPhase('idle');
+        }
+    }, [recorder, recState.url, seconds, max]);
+    /** 上限自动停（isRecording 中且到达 max） */
+    useEffect(() => {
+        if (phase === 'recording' && recState.isRecording && seconds >= max) {
+            secondsRef.current = max;
+            finishRecording();
+        }
+        else if (recState.isRecording) {
+            secondsRef.current = seconds;
+        }
+    }, [phase, recState.isRecording, seconds, max, finishRecording]);
+    /** 开始录音：先请求权限 */
+    const startRecording = useCallback(async () => {
+        if (disabled)
+            return;
+        setDenied(false);
+        const { granted } = await requestRecordingPermissionsAsync();
+        if (!granted) {
+            setDenied(true);
+            onPermissionDenied?.();
+            return;
+        }
+        secondsRef.current = 0;
+        await recorder.prepareToRecordAsync();
+        recorder.record();
+        setPhase('recording');
+    }, [recorder, disabled, onPermissionDenied]);
+    /** 重录：回到待录音 */
+    const reset = useCallback(() => {
+        setDraft(null);
+        secondsRef.current = 0;
+        setPhase('idle');
+    }, []);
+    /** 使用：上抛结果 */
+    const confirm = useCallback(() => {
+        if (draft)
+            onChange?.(draft);
+        setPhase('idle');
+        setDraft(null);
+    }, [draft, onChange]);
+    // 录音中：计时 + 上限提示 + 停止
+    if (phase === 'recording') {
+        return (_jsxs(View, { style: [styles.box, { backgroundColor: t.colorErrorBg, borderColor: t.colorErrorBg }], children: [_jsx(View, { style: [styles.dot, { backgroundColor: t.colorError }] }), _jsx(Text, { style: [styles.timer, { color: t.colorError }], allowFontScaling: false, children: fmt(seconds) }), _jsx(Text, { style: [styles.tip, { color: t.colorTextSecondary }], allowFontScaling: false, children: i18n('maxDurationTip', { n: max }) }), _jsx(XButton, { type: 'primary', danger: true, size: 'small', onPress: finishRecording, children: i18n('stopRecord') })] }));
+    }
+    // 录完待确认：试听 + 重录 + 使用
+    if (phase === 'done' && draft) {
+        return _jsx(PreviewRow, { draft: draft, onRerecord: reset, onUse: confirm, disabled: disabled });
+    }
+    // 待录音（或受控回显）
+    return (_jsxs(View, { style: styles.wrap, children: [value ? (_jsx(PreviewRow, { draft: value, onRerecord: reset, disabled: disabled, usedMode: true })) : (_jsx(XButton, { type: 'default', block: true, onPress: startRecording, disabled: disabled, children: i18n('tapToRecord') })), denied && _jsx(Text, { style: [styles.denied, { color: t.colorError }], children: i18n('micPermissionTip') })] }));
+}
+/** 完成态行：播放/暂停 + 时长 + 重录（+ 使用） */
+function PreviewRow({ draft, onRerecord, onUse, disabled, usedMode = false, }) {
+    const t = useXTheme();
+    const { t: i18n } = useXLocale();
+    const player = useAudioPlayer({ uri: draft.uri });
+    const status = useAudioPlayerStatus(player);
+    const playing = status?.playing ?? false;
+    const togglePlay = () => {
+        if (!player)
+            return;
+        if (playing) {
+            player.pause();
+        }
+        else {
+            player.seekTo(0);
+            player.play();
+        }
+    };
+    return (_jsxs(View, { style: [styles.box, { borderColor: t.colorSplit }], children: [_jsx(Text, { style: [styles.timer, { color: t.colorText }], allowFontScaling: false, children: fmt(draft.duration) }), _jsx(XButton, { size: 'small', type: playing ? 'primary' : 'default', onPress: togglePlay, disabled: disabled, children: playing ? i18n('pause') : i18n('play') }), !usedMode && (_jsxs(_Fragment, { children: [_jsx(XButton, { size: 'small', onPress: onRerecord, disabled: disabled, children: i18n('rerecord') }), _jsx(XButton, { size: 'small', type: 'primary', onPress: () => onUse?.(), disabled: disabled, children: i18n('useRecording') })] }))] }));
+}
+const styles = StyleSheet.create({
+    wrap: {
+        width: '100%',
+    },
+    box: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        gap: 8,
+    },
+    dot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+    },
+    timer: {
+        fontSize: 16,
+        fontWeight: '600',
+        fontVariant: ['tabular-nums'],
+    },
+    tip: {
+        fontSize: 12,
+        flex: 1,
+    },
+    denied: {
+        fontSize: 12,
+        marginTop: 6,
+    },
+});
+export default XRecord;

package/dist/XSignature/XSignatureSkia.d.ts

@@ -0,0 +1,39 @@
+/**
+ * ============================================================================
+ * XSignatureSkia —— Skia 逐字签名（changhu/SkiaSignature 正式迁移版）
+ * ============================================================================
+ *
+ * 【迁移改造清单】（相对 changhu 原版）
+ * 1. 弹层：RN Modal → XPullView（底部拉起，与项目弹窗族动画/遮罩一致）；
+ * 2. 底部按钮：5 个等宽蓝色 TouchableOpacity → XButton 组合
+ *    （关闭=text / 重写=text / 存字=default / 清空=danger text / 完成=primary），
+ *    颜色全部走 useXTheme，暗黑自适应；
+ * 3. 去业务耦合：uploadAsset/XLoadingModalService/api 全部移除 ——
+ *    「完成」只做截图导出 onExport(base64)，上传交给业务层或 XUpload 适配器；
+ * 4. RNFS → 移除（导出纯 base64，写临时文件由上传侧按需处理）；
+ * 5. 文案 → i18n（中英），色值 → token。
+ *
+ * 【算法】采点/贝塞尔平滑/字符变换 100% 保留（见 ./core.tsx）。
+ * ============================================================================
+ */
+import React from 'react';
+import { XSignatureCharacter, XSignatureSkiaValue, XSignatureStroke } from './core';
+export type { XSignatureSkiaValue, XSignatureCharacter, XSignatureStroke };
+export interface XSignatureSkiaProps {
+    /** 受控值（结构化字符集，可回填表单） */
+    value?: XSignatureSkiaValue | null;
+    /** 字符集变化 */
+    onChange?: (value: XSignatureSkiaValue | null) => void;
+    /** 触发按钮文案，默认"签名" */
+    buttonText?: string;
+    /** 笔迹颜色（白纸上），默认 #111 */
+    strokeColor?: string;
+    /** 笔迹宽度，默认 4 */
+    strokeWidth?: number;
+    /** 点完成：导出签名 PNG base64（不含 data: 前缀） */
+    onExport?: (base64: string) => void;
+    /** 只弹签名板（不渲染触发按钮/预览），默认 false */
+    inline?: boolean;
+}
+export declare function XSignatureSkia({ value, onChange, buttonText, strokeColor, strokeWidth, onExport, inline, }: XSignatureSkiaProps): React.JSX.Element;
+export default XSignatureSkia;

package/dist/XSignature/XSignatureSkia.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XSignatureSkia —— Skia 逐字签名（changhu/SkiaSignature 正式迁移版）
+ * ============================================================================
+ *
+ * 【迁移改造清单】（相对 changhu 原版）
+ * 1. 弹层：RN Modal → XPullView（底部拉起，与项目弹窗族动画/遮罩一致）；
+ * 2. 底部按钮：5 个等宽蓝色 TouchableOpacity → XButton 组合
+ *    （关闭=text / 重写=text / 存字=default / 清空=danger text / 完成=primary），
+ *    颜色全部走 useXTheme，暗黑自适应；
+ * 3. 去业务耦合：uploadAsset/XLoadingModalService/api 全部移除 ——
+ *    「完成」只做截图导出 onExport(base64)，上传交给业务层或 XUpload 适配器；
+ * 4. RNFS → 移除（导出纯 base64，写临时文件由上传侧按需处理）；
+ * 5. 文案 → i18n（中英），色值 → token。
+ *
+ * 【算法】采点/贝塞尔平滑/字符变换 100% 保留（见 ./core.tsx）。
+ * ============================================================================
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { ImageFormat, useCanvasRef } from '@shopify/react-native-skia';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Svg, { Line } from 'react-native-svg';
+import { XButton } from '../XButton';
+import { XPullView } from '../XPullView';
+import { useXTheme } from '../theme';
+import { useXLocale } from '../XLocale';
+import { SignatureCanvas, transformCharacters, } from './core';
+const emptyValue = () => ({ version: 1, characters: [] });
+export function XSignatureSkia({ value, onChange, buttonText = '签名', strokeColor = '#111111', strokeWidth = 4, onExport, inline = false, }) {
+    const t = useXTheme();
+    const { t: i18n } = useXLocale();
+    const insets = useSafeAreaInsets();
+    const signatureValue = value?.characters ? value : emptyValue();
+    /** 预览画布 ref（完成时截图用） */
+    const previewCanvasRef = useCanvasRef();
+    const [visible, setVisible] = useState(false);
+    const [previewSize, setPreviewSize] = useState({ width: 0, height: 0 });
+    const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
+    /** 当前正在写的字（未"存字"的笔画） */
+    const [currentStrokes, setCurrentStrokes] = useState([]);
+    /** 预览：字符集拼到预览画布 */
+    const previewStrokes = useMemo(() => transformCharacters(signatureValue.characters, previewSize), [previewSize, signatureValue.characters]);
+    const emitCharacters = useCallback((characters) => {
+        onChange?.(characters.length ? { version: 1, characters } : null);
+    }, [onChange]);
+    /** 一笔画完 */
+    const handleStrokeComplete = useCallback((points, size) => {
+        setCurrentStrokes(strokes => [
+            ...strokes,
+            {
+                id: `${Date.now()}-${strokes.length}`,
+                color: strokeColor,
+                width: strokeWidth,
+                points,
+                size,
+            },
+        ]);
+    }, [strokeColor, strokeWidth]);
+    /** 存字：当前笔画收进字符集 */
+    const handleSaveCharacter = useCallback(() => {
+        if (!currentStrokes.length)
+            return;
+        const nextCharacter = {
+            id: `${Date.now()}`,
+            strokes: currentStrokes,
+            size: currentStrokes[0].size,
+        };
+        emitCharacters([...signatureValue.characters, nextCharacter]);
+        setCurrentStrokes([]);
+    }, [currentStrokes, signatureValue.characters, emitCharacters]);
+    /** 重写：只清当前字 */
+    const handleClearCurrent = useCallback(() => setCurrentStrokes([]), []);
+    /** 清空：连已存的字一起清 */
+    const handleClearAll = useCallback(() => {
+        setCurrentStrokes([]);
+        emitCharacters([]);
+    }, [emitCharacters]);
+    /** 长按字符 chip 删除该字 */
+    const handleRemoveCharacter = useCallback((id) => {
+        emitCharacters(signatureValue.characters.filter(character => character.id !== id));
+    }, [signatureValue.characters, emitCharacters]);
+    /** 完成：先收尾当前字 → 等预览渲染 → 截图导出 */
+    const handleDone = useCallback(async () => {
+        let finalCharacters = signatureValue.characters;
+        if (currentStrokes.length) {
+            finalCharacters = [
+                ...finalCharacters,
+                { id: `${Date.now()}`, strokes: currentStrokes, size: currentStrokes[0].size },
+            ];
+            emitCharacters(finalCharacters);
+            setCurrentStrokes([]);
+        }
+        if (!finalCharacters.length) {
+            setVisible(false);
+            return;
+        }
+        // 等预览 Canvas 渲染出最新字符（changhu 原版同款时序）
+        await new Promise(resolve => setTimeout(resolve, 100));
+        const image = previewCanvasRef.current?.makeImageSnapshot();
+        if (image) {
+            onExport?.(image.encodeToBase64(ImageFormat.PNG));
+        }
+        setVisible(false);
+    }, [signatureValue.characters, currentStrokes, emitCharacters, previewCanvasRef, onExport]);
+    /** 签名板内容（XPullView 内） */
+    const board = (_jsxs(View, { style: [styles.board, { backgroundColor: t.colorBgContainer, paddingBottom: Math.max(insets.bottom, 8) }], children: [_jsxs(ScrollView, { horizontal: true, style: [styles.characterStrip, { backgroundColor: t.colorBgLayout }], contentContainerStyle: styles.characterStripContent, children: [_jsx(Text, { style: [styles.savedCount, { color: t.colorTextTertiary }], allowFontScaling: false, children: i18n('savedChars', { n: signatureValue.characters.length }) }), signatureValue.characters.map(character => (_jsx(Pressable, { onLongPress: () => handleRemoveCharacter(character.id), style: [styles.characterChip, { borderColor: t.colorBorder, backgroundColor: t.colorBgContainer }], children: _jsx(CharacterChip, { character: character }) }, character.id)))] }), _jsxs(View, { style: styles.signArea, children: [_jsx(SignatureCanvas, { strokes: currentStrokes, touchEnabled: true, strokeColor: strokeColor, strokeWidth: strokeWidth, onStrokeComplete: handleStrokeComplete, onLayoutSize: setCanvasSize }), canvasSize.width > 0 && canvasSize.height > 0 && (_jsxs(Svg, { pointerEvents: 'none', width: canvasSize.width, height: canvasSize.height, style: styles.grid, children: [_jsx(Line, { x1: '0%', y1: '50%', x2: '100%', y2: '50%', stroke: t.colorSplit, strokeWidth: '1', strokeDasharray: [4, 4] }), _jsx(Line, { x1: '50%', y1: '0%', x2: '50%', y2: '100%', stroke: t.colorSplit, strokeWidth: '1', strokeDasharray: [4, 4] }), _jsx(Line, { x1: '0%', y1: '0%', x2: '100%', y2: '100%', stroke: t.colorSplit, strokeWidth: '1', strokeDasharray: [4, 4] }), _jsx(Line, { x1: '100%', y1: '0%', x2: '0%', y2: '100%', stroke: t.colorSplit, strokeWidth: '1', strokeDasharray: [4, 4] })] }))] }), _jsxs(View, { style: styles.footer, children: [_jsx(XButton, { type: 'text', onPress: () => setVisible(false), children: i18n('close') }), _jsx(XButton, { type: 'text', onPress: handleClearCurrent, children: i18n('rewrite') }), _jsx(XButton, { type: 'default', size: 'small', onPress: handleSaveCharacter, children: i18n('saveChar') }), _jsx(XButton, { type: 'text', danger: true, onPress: handleClearAll, children: i18n('clear') }), _jsx(XButton, { type: 'primary', size: 'small', onPress: handleDone, children: i18n('done') })] })] }));
+    // inline 模式：外部自己控制 XPullView（board 由 renderBoard 暴露）——当前版本仅内部用
+    if (inline) {
+        return board;
+    }
+    return (_jsxs(View, { style: styles.container, children: [_jsx(XButton, { type: 'primary', style: styles.openButton, onPress: () => setVisible(true), children: buttonText }), _jsxs(View, { style: [styles.preview, { borderColor: t.colorBorder }], children: [_jsx(SignatureCanvas, { strokes: previewStrokes, strokeColor: strokeColor, strokeWidth: strokeWidth, onLayoutSize: setPreviewSize, canvasRef: previewCanvasRef }), previewStrokes.length === 0 && (_jsx(Text, { style: [styles.placeholder, { color: t.colorTextTertiary }], children: i18n('signHint') }))] }), _jsx(XPullView, { visible: visible, onClose: () => setVisible(false), side: 'bottom', overlayOpacity: 0.5, children: _jsx(View, { style: { height: '88%' }, children: board }) })] }));
+}
+/** 单个已存字的 chip 缩略渲染 */
+function CharacterChip({ character }) {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const strokes = useMemo(() => transformCharacters([character], size), [character, size]);
+    return (_jsx(View, { style: styles.characterChipInner, children: _jsx(SignatureCanvas, { strokes: strokes, strokeColor: '#111111', strokeWidth: 3, onLayoutSize: setSize }) }));
+}
+const styles = StyleSheet.create({
+    container: {
+        gap: 8,
+    },
+    openButton: {
+        alignSelf: 'flex-start',
+    },
+    preview: {
+        height: 120,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 8,
+        overflow: 'hidden',
+        justifyContent: 'center',
+    },
+    placeholder: {
+        position: 'absolute',
+        alignSelf: 'center',
+        fontSize: 13,
+    },
+    board: {
+        flex: 1,
+    },
+    characterStrip: {
+        height: 96,
+        flexGrow: 0,
+    },
+    characterStripContent: {
+        alignItems: 'center',
+        gap: 8,
+        paddingHorizontal: 12,
+    },
+    savedCount: {
+        fontSize: 12,
+    },
+    characterChip: {
+        width: 64,
+        height: 64,
+        borderRadius: 6,
+        borderWidth: StyleSheet.hairlineWidth,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    characterChipInner: {
+        width: '100%',
+        height: '100%',
+    },
+    signArea: {
+        flex: 1,
+    },
+    grid: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+    },
+    footer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-around',
+        paddingTop: 8,
+        gap: 4,
+    },
+});
+export default XSignatureSkia;

package/dist/XSignature/core.d.ts

@@ -0,0 +1,69 @@
+/**
+ * ============================================================================
+ * XSignature 共享内核 —— Skia 画布/贝塞尔/字符变换（逐字签名与普通签名共用）
+ * ============================================================================
+ *
+ * 【移植自 changhu/SkiaSignature】核心算法原样保留：
+ * - makePath：中点二次贝塞尔平滑（quadTo），单点画圆；
+ * - transformCharacters：每个"字"按独立 cell 等比缩放居中拼到目标画布；
+ * - SignatureCanvas：PanResponder 采点（locationX/Y）+ forceTick 触发重绘，
+ *   已提交笔画 useMemo 化的 Skia Path 渲染。
+ * ============================================================================
+ */
+import React from 'react';
+import { type CanvasRef } from '@shopify/react-native-skia';
+export interface XSignaturePoint {
+    x: number;
+    y: number;
+}
+/** 一笔 */
+export interface XSignatureStroke {
+    id: string;
+    color: string;
+    width: number;
+    points: XSignaturePoint[];
+    size: {
+        width: number;
+        height: number;
+    };
+}
+/** 一个"字"（逐字签名用） */
+export interface XSignatureCharacter {
+    id: string;
+    strokes: XSignatureStroke[];
+    size: {
+        width: number;
+        height: number;
+    };
+}
+/** 逐字签名结构化取值（可直接进表单） */
+export interface XSignatureSkiaValue {
+    version: 1;
+    characters: XSignatureCharacter[];
+}
+/** 中点二次贝塞尔平滑（changhu 原算法） */
+export declare function makeSignaturePath(points: XSignaturePoint[]): import("@shopify/react-native-skia").SkPath;
+/** 字符集 → 目标画布笔画（等比缩放居中，changhu 原算法） */
+export declare function transformCharacters(characters: XSignatureCharacter[] | undefined | null, targetSize: {
+    width: number;
+    height: number;
+}): XSignatureStroke[];
+/** 签名画布（采集 + 渲染；touchEnabled=false 时为静态预览） */
+export declare function SignatureCanvas({ strokes, currentPoints, touchEnabled, strokeColor, strokeWidth, onStrokeComplete, onLayoutSize, canvasRef, paperColor, }: {
+    strokes: XSignatureStroke[];
+    currentPoints?: XSignaturePoint[];
+    touchEnabled?: boolean;
+    strokeColor: string;
+    strokeWidth: number;
+    onStrokeComplete?: (points: XSignaturePoint[], size: {
+        width: number;
+        height: number;
+    }) => void;
+    onLayoutSize?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    canvasRef?: React.RefObject<CanvasRef | null>;
+    /** 纸面颜色（签名图默认白纸，不随主题） */
+    paperColor?: string;
+}): React.JSX.Element;

package/dist/XSignature/core.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XSignature 共享内核 —— Skia 画布/贝塞尔/字符变换（逐字签名与普通签名共用）
+ * ============================================================================
+ *
+ * 【移植自 changhu/SkiaSignature】核心算法原样保留：
+ * - makePath：中点二次贝塞尔平滑（quadTo），单点画圆；
+ * - transformCharacters：每个"字"按独立 cell 等比缩放居中拼到目标画布；
+ * - SignatureCanvas：PanResponder 采点（locationX/Y）+ forceTick 触发重绘，
+ *   已提交笔画 useMemo 化的 Skia Path 渲染。
+ * ============================================================================
+ */
+import { useMemo, useRef, useState } from 'react';
+import { PanResponder, StyleSheet, View } from 'react-native';
+import { Canvas, Fill, Path, Skia } from '@shopify/react-native-skia';
+/** 中点二次贝塞尔平滑（changhu 原算法） */
+export function makeSignaturePath(points) {
+    const path = Skia.Path.Make();
+    if (points.length === 0)
+        return path;
+    path.moveTo(points[0].x, points[0].y);
+    if (points.length === 1) {
+        path.addCircle(points[0].x, points[0].y, 0.5);
+        return path;
+    }
+    for (let i = 1; i < points.length - 1; i++) {
+        const current = points[i];
+        const next = points[i + 1];
+        const midX = (current.x + next.x) / 2;
+        const midY = (current.y + next.y) / 2;
+        path.quadTo(current.x, current.y, midX, midY);
+    }
+    const last = points[points.length - 1];
+    path.lineTo(last.x, last.y);
+    return path;
+}
+/** 字符集 → 目标画布笔画（等比缩放居中，changhu 原算法） */
+export function transformCharacters(characters, targetSize) {
+    if (!characters || !characters.length || !targetSize.width || !targetSize.height)
+        return [];
+    const cellWidth = targetSize.width / characters.length;
+    const padding = Math.min(cellWidth, targetSize.height) * 0.12;
+    const targetWidth = Math.max(cellWidth - padding * 2, 1);
+    const targetHeight = Math.max(targetSize.height - padding * 2, 1);
+    return characters.flatMap((character, charIndex) => {
+        const scale = Math.min(targetWidth / character.size.width, targetHeight / character.size.height);
+        const drawWidth = character.size.width * scale;
+        const drawHeight = character.size.height * scale;
+        const offsetX = charIndex * cellWidth + (cellWidth - drawWidth) / 2;
+        const offsetY = (targetSize.height - drawHeight) / 2;
+        return character.strokes.map(stroke => ({
+            ...stroke,
+            width: Math.max(stroke.width * scale, 1),
+            size: targetSize,
+            points: stroke.points.map(point => ({
+                x: point.x * scale + offsetX,
+                y: point.y * scale + offsetY,
+            })),
+        }));
+    });
+}
+/** 签名画布（采集 + 渲染；touchEnabled=false 时为静态预览） */
+export function SignatureCanvas({ strokes, currentPoints = [], touchEnabled = false, strokeColor, strokeWidth, onStrokeComplete, onLayoutSize, canvasRef, paperColor = '#FFFFFF', }) {
+    const sizeRef = useRef({ width: 0, height: 0 });
+    const pointsRef = useRef([]);
+    const [, forceTick] = useState(0);
+    const panResponder = useMemo(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => touchEnabled,
+        onMoveShouldSetPanResponder: () => touchEnabled,
+        onPanResponderGrant: event => {
+            const point = { x: event.nativeEvent.locationX, y: event.nativeEvent.locationY };
+            pointsRef.current = [point];
+            forceTick(tick => tick + 1);
+        },
+        onPanResponderMove: event => {
+            const point = { x: event.nativeEvent.locationX, y: event.nativeEvent.locationY };
+            pointsRef.current = [...pointsRef.current, point];
+            forceTick(tick => tick + 1);
+        },
+        onPanResponderRelease: () => {
+            if (pointsRef.current.length) {
+                onStrokeComplete?.(pointsRef.current, sizeRef.current);
+            }
+            pointsRef.current = [];
+            forceTick(tick => tick + 1);
+        },
+        onPanResponderTerminate: () => {
+            pointsRef.current = [];
+            forceTick(tick => tick + 1);
+        },
+    }), [onStrokeComplete, touchEnabled]);
+    const activePoints = touchEnabled ? pointsRef.current : currentPoints;
+    return (_jsx(View, { style: styles.canvasHost, onLayout: event => {
+            const { width, height } = event.nativeEvent.layout;
+            const size = { width, height };
+            sizeRef.current = size;
+            onLayoutSize?.(size);
+        }, ...(touchEnabled ? panResponder.panHandlers : {}), children: _jsxs(Canvas, { ref: canvasRef, style: styles.canvas, children: [_jsx(Fill, { color: paperColor }), strokes.map(stroke => (_jsx(Path, { path: makeSignaturePath(stroke.points), color: stroke.color, style: 'stroke', strokeWidth: stroke.width, strokeCap: 'round', strokeJoin: 'round' }, stroke.id))), activePoints.length > 0 && (_jsx(Path, { path: makeSignaturePath(activePoints), color: strokeColor, style: 'stroke', strokeWidth: strokeWidth, strokeCap: 'round', strokeJoin: 'round' }))] }) }));
+}
+const styles = StyleSheet.create({
+    canvasHost: {
+        flex: 1,
+    },
+    canvas: {
+        flex: 1,
+    },
+});

package/dist/XSignature/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * ============================================================================
+ * XSignature —— 普通签名（单画布连笔，非逐字）
+ * ============================================================================
+ *
+ * 【与 XSignatureSkia 的分工】
+ * - XSignatureSkia：逐字签名（一字一格、可单字重写、结构化 value）；
+ * - XSignature：普通连笔签名（一块白纸写到底），适合"签个名确认"场景；
+ * 两者共用 ./core.tsx 的采集/贝塞尔/渲染内核。
+ *
+ * 【API】
+ *   <XSignature height={200} onExport={base64 => upload(base64)} />
+ * 内置 撤销/清空/完成 三个动作按钮（XButton + theme + i18n）。
+ * ============================================================================
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface XSignatureProps {
+    /** 画布高度，默认 200 */
+    height?: number;
+    /** 笔迹颜色（白纸上），默认 #111 */
+    strokeColor?: string;
+    /** 笔迹宽度，默认 4 */
+    strokeWidth?: number;
+    /** 点完成：导出 PNG base64（不含 data: 前缀） */
+    onExport?: (base64: string) => void;
+    /** 每笔画完回调（业务可拿笔迹做存储） */
+    onStrokeEnd?: (strokeCount: number) => void;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function XSignature({ height, strokeColor, strokeWidth, onExport, onStrokeEnd, disabled, style, }: XSignatureProps): React.JSX.Element;
+export default XSignature;