react-native-x-components 0.1.0 → 0.2.1

package/dist/XSignature/XSignatureSkia.js

@@ -32,7 +32,9 @@ export function XSignatureSkia({ value, onChange, buttonText = '签名', strokeC
     const t = useXTheme();
     const { t: i18n } = useXLocale();
     const insets = useSafeAreaInsets();
-    const signatureValue = value?.characters ? value : emptyValue();
+    /** 非受控兜底：未传 value/onChange 时内部自持状态（示例/轻量场景开箱即用） */
+    const [innerValue, setInnerValue] = useState(null);
+    const signatureValue = value !== undefined ? (value?.characters ? value : emptyValue()) : (innerValue ?? emptyValue());
     /** 预览画布 ref（完成时截图用） */
     const previewCanvasRef = useCanvasRef();
     const [visible, setVisible] = useState(false);
@@ -43,8 +45,14 @@ export function XSignatureSkia({ value, onChange, buttonText = '签名', strokeC
     /** 预览：字符集拼到预览画布 */
     const previewStrokes = useMemo(() => transformCharacters(signatureValue.characters, previewSize), [previewSize, signatureValue.characters]);
     const emitCharacters = useCallback((characters) => {
-        onChange?.(characters.length ? { version: 1, characters } : null);
-    }, [onChange]);
+        const next = characters.length ? { version: 1, characters } : null;
+        if (value !== undefined) {
+            onChange?.(next);
+        }
+        else {
+            setInnerValue(next);
+        }
+    }, [value, onChange]);
     /** 一笔画完 */
     const handleStrokeComplete = useCallback((points, size) => {
         setCurrentStrokes(strokes => [
@@ -105,12 +113,12 @@ export function XSignatureSkia({ value, onChange, buttonText = '签名', strokeC
         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') })] })] }));
+    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, { height: 320 }], 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: '#DDDDDD', strokeWidth: '1', strokeDasharray: [4, 4] }), _jsx(Line, { x1: '50%', y1: '0%', x2: '50%', y2: '100%', stroke: '#DDDDDD', strokeWidth: '1', strokeDasharray: [4, 4] }), _jsx(Line, { x1: '0%', y1: '0%', x2: '100%', y2: '100%', stroke: '#DDDDDD', strokeWidth: '1', strokeDasharray: [4, 4] }), _jsx(Line, { x1: '100%', y1: '0%', x2: '0%', y2: '100%', stroke: '#DDDDDD', 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 }) })] }));
+    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: 520, paddingBottom: 10 }, children: board }) })] }));
 }
 /** 单个已存字的 chip 缩略渲染 */
 function CharacterChip({ character }) {

package/dist/XSignature/index.js

@@ -17,7 +17,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { ImageFormat, useCanvasRef } from '@shopify/react-native-skia';
 import { StyleSheet, Text, View } from 'react-native';
-import Svg, { Line } from 'react-native-svg';
 import { XButton } from '../XButton';
 import { useXTheme } from '../theme';
 import { useXLocale } from '../XLocale';
@@ -59,7 +58,7 @@ export function XSignature({ height = 200, strokeColor = '#111111', strokeWidth
         if (image)
             onExport?.(image.encodeToBase64(ImageFormat.PNG));
     }, [strokes.length, canvasRef, onExport]);
-    return (_jsxs(View, { style: [styles.container, style], children: [_jsxs(View, { style: [styles.paper, { height, borderColor: t.colorBorder, borderRadius: t.borderRadiusXL }], children: [_jsx(SignatureCanvas, { strokes: strokes, touchEnabled: !disabled, strokeColor: strokeColor, strokeWidth: strokeWidth, onStrokeComplete: handleStrokeComplete, onLayoutSize: setSize, canvasRef: canvasRef }), size.width > 0 && (_jsxs(Svg, { pointerEvents: 'none', width: size.width, height: size.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] })] })), strokes.length === 0 && (_jsx(Text, { pointerEvents: 'none', style: [styles.placeholder, { color: t.colorTextTertiary }], children: i18n('signHint') }))] }), _jsxs(View, { style: styles.actions, children: [_jsx(XButton, { size: 'small', onPress: handleUndo, disabled: disabled || !strokes.length, children: i18n('undo') }), _jsx(XButton, { size: 'small', danger: true, type: 'text', onPress: handleClear, disabled: disabled || !strokes.length, children: i18n('clear') }), _jsx(XButton, { size: 'small', type: 'primary', onPress: handleDone, disabled: disabled || !strokes.length, children: i18n('done') })] })] }));
+    return (_jsxs(View, { style: [styles.container, style], children: [_jsxs(View, { style: [styles.paper, { height, borderColor: t.colorBorder, borderRadius: t.borderRadiusXL }], children: [_jsx(SignatureCanvas, { strokes: strokes, touchEnabled: !disabled, strokeColor: strokeColor, strokeWidth: strokeWidth, onStrokeComplete: handleStrokeComplete, onLayoutSize: setSize, canvasRef: canvasRef }), strokes.length === 0 && (_jsx(Text, { pointerEvents: 'none', style: [styles.placeholder, { color: t.colorTextTertiary }], children: i18n('signHint') }))] }), _jsxs(View, { style: styles.actions, children: [_jsx(XButton, { size: 'small', onPress: handleUndo, disabled: disabled || !strokes.length, children: i18n('undo') }), _jsx(XButton, { size: 'small', danger: true, type: 'text', onPress: handleClear, disabled: disabled || !strokes.length, children: i18n('clear') }), _jsx(XButton, { size: 'small', type: 'primary', onPress: handleDone, disabled: disabled || !strokes.length, children: i18n('done') })] })] }));
 }
 const styles = StyleSheet.create({
     container: {

package/dist/XTheme/BrandColor.d.ts

@@ -0,0 +1,20 @@
+export interface XBrandPreset {
+    name: string;
+    /** 浅色主色 */
+    primary: string;
+    /** 暗黑主色 */
+    primaryDark: string;
+    /** 弱背景色（antd colorPrimaryBg） */
+    primaryBg: string;
+}
+export declare const X_BRAND_PRESETS: XBrandPreset[];
+interface XBrandState {
+    brand: XBrandPreset;
+    setXBrand: (brand: XBrandPreset) => void;
+    setXBrandByName: (name: string) => void;
+}
+export declare const useXBrandStore: import("zustand").UseBoundStore<import("zustand").StoreApi<XBrandState>>;
+/** 命令式：切换品牌色 */
+export declare function setXBrand(brand: XBrandPreset): void;
+export declare function setXBrandByName(name: string): void;
+export {};

package/dist/XTheme/BrandColor.js

@@ -0,0 +1,33 @@
+/**
+ * ============================================================================
+ * XBrand —— 运行时主题色切换
+ * ============================================================================
+ * 一组预设品牌色 + zustand 全局 store。setXBrand(name) 立即生效：
+ * 浅/深两套 token 里的 colorPrimary / colorPrimaryActive / colorPrimaryBg
+ * 被覆盖。组件统一 useXTheme() 取色，不需要额外订阅。
+ * ============================================================================
+ */
+import { create } from 'zustand';
+export const X_BRAND_PRESETS = [
+    { name: '海洋蓝', primary: '#2080F0', primaryDark: '#3C93F5', primaryBg: 'rgba(32,128,240,0.18)' },
+    { name: '薰衣紫', primary: '#7C3AED', primaryDark: '#A78BFA', primaryBg: 'rgba(124,58,237,0.18)' },
+    { name: '翡翠绿', primary: '#16A34A', primaryDark: '#4ADE80', primaryBg: 'rgba(22,163,74,0.18)' },
+    { name: '暖阳橙', primary: '#F97316', primaryDark: '#FB923C', primaryBg: 'rgba(249,115,22,0.18)' },
+];
+const DEFAULT_BRAND = X_BRAND_PRESETS[0];
+export const useXBrandStore = create(set => ({
+    brand: DEFAULT_BRAND,
+    setXBrand: brand => set({ brand }),
+    setXBrandByName: name => {
+        const found = X_BRAND_PRESETS.find(p => p.name === name);
+        if (found)
+            set({ brand: found });
+    },
+}));
+/** 命令式：切换品牌色 */
+export function setXBrand(brand) {
+    useXBrandStore.getState().setXBrand(brand);
+}
+export function setXBrandByName(name) {
+    useXBrandStore.getState().setXBrandByName(name);
+}

package/dist/XTheme/ThemeControls.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ============================================================================
+ * ThemeControls —— 暗黑/主题色/语言 三个切换按钮组
+ * ============================================================================
+ * 在 3 个位置使用：
+ *   1. 介绍页（app/index.tsx）顶部
+ *   2. 组件页（app/components/index.tsx）Stack headerRight
+ *   3. 我的/关于页（app/mine.tsx）顶部
+ *
+ * props:
+ *   compact?: boolean   true 时紧凑（用于 headerRight 单行）
+ *   inline?: boolean    true 时背景透明、无边框（用于页面顶部）
+ * ============================================================================
+ */
+import React from 'react';
+export interface ThemeControlsProps {
+    compact?: boolean;
+    style?: any;
+}
+/** 三个按钮组合 */
+export declare function ThemeControls({ compact, style }: ThemeControlsProps): React.JSX.Element;
+export default ThemeControls;

package/dist/XTheme/ThemeControls.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useXTheme, useXThemeMode, setXThemeMode } from '../theme';
+import { useXBrandStore, setXBrandByName, X_BRAND_PRESETS } from './BrandColor';
+import { showXActionSheet } from '../XActionSheet/global';
+import { useXLocale, setXLocale } from '../XLocale';
+/**
+ * 暗黑切换：三态循环 📱跟随系统 → 🌙暗 → ☀️亮 → 📱。
+ * 用户点过两态按钮会永久脱离系统跟随（bug 根因），三态保证能回到"自动"。
+ */
+function ThemeModeButton({ compact }) {
+    const t = useXTheme();
+    const mode = useXThemeMode();
+    const next = mode === 'system' ? 'dark' : mode === 'dark' ? 'light' : 'system';
+    return (_jsx(Pressable, { onPress: () => setXThemeMode(next), hitSlop: 8, style: ({ pressed }) => [
+            compact ? styles.btnCompact : styles.btn,
+            { borderColor: t.colorBorder, backgroundColor: pressed ? t.colorBgLayout : 'transparent' },
+        ], children: _jsx(Text, { style: [compact ? styles.icon : styles.iconBig, { color: t.colorText }], children: mode === 'system' ? '📱' : mode === 'dark' ? '🌙' : '☀️' }) }));
+}
+/** 主题色选择：点击弹 ActionSheet（当前色打勾），选中即时生效 */
+function BrandColorButton({ compact }) {
+    const t = useXTheme();
+    const brand = useXBrandStore(s => s.brand);
+    return (_jsx(Pressable, { onPress: async () => {
+            const picked = await showXActionSheet({
+                title: '选择主题色',
+                options: X_BRAND_PRESETS.map(p => ({ label: `⬤  ${p.name}`, value: p.name })),
+            });
+            if (picked)
+                setXBrandByName(picked);
+        }, hitSlop: 8, style: ({ pressed }) => [
+            compact ? styles.btnCompact : styles.btn,
+            { borderColor: t.colorBorder, backgroundColor: pressed ? t.colorBgLayout : 'transparent' },
+        ], children: _jsx(View, { style: {
+                width: compact ? 14 : 18,
+                height: compact ? 14 : 18,
+                borderRadius: compact ? 7 : 9,
+                backgroundColor: brand.primary,
+            } }) }));
+}
+/** 语言切换：中 ↔ 英 */
+function LocaleButton({ compact }) {
+    const t = useXTheme();
+    const { locale } = useXLocale();
+    const next = locale === 'zh-CN' ? 'en-US' : 'zh-CN';
+    return (_jsx(Pressable, { onPress: () => setXLocale(next), hitSlop: 8, style: ({ pressed }) => [
+            compact ? styles.btnCompact : styles.btn,
+            { borderColor: t.colorBorder, backgroundColor: pressed ? t.colorBgLayout : 'transparent' },
+        ], children: _jsx(Text, { style: [compact ? styles.icon : styles.iconBig, { color: t.colorText, fontWeight: '600' }], children: locale === 'zh-CN' ? 'EN' : '中' }) }));
+}
+/** 三个按钮组合 */
+export function ThemeControls({ compact, style }) {
+    return (_jsxs(View, { style: [compact ? styles.rowCompact : styles.row, compact && styles.rowFlex], children: [_jsx(ThemeModeButton, { compact: compact }), _jsx(BrandColorButton, { compact: compact }), _jsx(LocaleButton, { compact: compact })] }));
+}
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        gap: 10,
+        alignItems: 'center',
+    },
+    rowCompact: {
+        flexDirection: 'row',
+        gap: 6,
+        alignItems: 'center',
+    },
+    rowFlex: {
+        flex: 1,
+    },
+    btn: {
+        width: 44,
+        height: 36,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    btnCompact: {
+        width: 32,
+        height: 32,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    icon: {
+        fontSize: 14,
+    },
+    iconBig: {
+        fontSize: 16,
+    },
+});
+export default ThemeControls;

package/dist/XUpload/XUploadImage.js

@@ -13,11 +13,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ============================================================================
  */
 import { useCallback, useRef, useState } from 'react';
-import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Alert, Image, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useXTheme } from '../theme';
 import { useXLocale } from '../XLocale';
 import { useXUploadAdapter } from './provider';
-import { compressImage, pickImageFiles } from './helpers';
+import { showXActionSheet } from '../XActionSheet/global';
+import { XConfirmForm } from '../XConfirmForm';
+import { XImagePreviewService } from '../XProviders';
+import { compressImage, pickImageFiles, takePicture } from './helpers';
 const CELL_GAP = 8;
 export function XUploadImage({ value, onChange, max = 9, compress = true, compressWidth = 1280, quality = 0.6, disabled = false, columns = 3, adapter: localAdapter, onItemPress, style, }) {
     const t = useXTheme();
@@ -38,14 +41,32 @@ export function XUploadImage({ value, onChange, max = 9, compress = true, compre
         setInner(next);
         onChange?.(next);
     }, [onChange]);
-    /** 加号：选图 → 逐张压缩上传（串行，进度独立展示） */
+    /**
+     * 加号：弹 ActionSheet（拍照/相册/取消），再选 → 压缩 → 串行上传
+     */
     const handleAdd = useCallback(async () => {
         if (disabled || tasks.length)
             return;
         const remaining = max - currentRef.current.length;
         if (remaining <= 0)
             return;
-        const picked = await pickImageFiles({ max: remaining, quality: 0.9 });
+        const source = await showXActionSheet({
+            title: '选择图片来源',
+            options: [
+                { label: '📷  拍照', value: 'camera' },
+                { label: '🖼️  从相册选择', value: 'album' },
+                { label: '取消', value: null },
+            ],
+        });
+        let picked = [];
+        if (source === 'camera') {
+            const file = await takePicture({ quality: 0.9 });
+            if (file)
+                picked = [file];
+        }
+        else if (source === 'album') {
+            picked = await pickImageFiles({ max: remaining, quality: 0.9 });
+        }
         for (const raw of picked) {
             if (currentRef.current.length >= max)
                 break;
@@ -60,15 +81,24 @@ export function XUploadImage({ value, onChange, max = 9, compress = true, compre
             }
             catch (e) {
                 console.warn('[XUploadImage] upload failed:', e);
+                Alert.alert('上传失败', String(e.message ?? e));
             }
             finally {
                 setTasks(prev => prev.filter(task => task.id !== taskId));
             }
         }
     }, [disabled, max, tasks.length, compress, compressWidth, quality, adapter, emit]);
-    /** 删除 */
+    /** 删除：先弹命令式确认框，确认后才删 */
     const handleRemove = useCallback((index) => {
-        emit(currentRef.current.filter((_, i) => i !== index));
+        XConfirmForm.show({
+            title: '删除图片',
+            content: '确定要删除这张图片吗？',
+            confirmText: '删除',
+            danger: true,
+        }).then(ok => {
+            if (ok)
+                emit(currentRef.current.filter((_, i) => i !== index));
+        });
     }, [emit]);
     const handleLayout = useCallback((e) => {
         setGridWidth(e.nativeEvent.layout.width);
@@ -76,16 +106,28 @@ export function XUploadImage({ value, onChange, max = 9, compress = true, compre
     /** 精确列宽：容器宽 - 间隙后均分 */
     const cellWidth = gridWidth > 0 ? (gridWidth - CELL_GAP * (columns - 1)) / columns : undefined;
     const showAdd = !disabled && items.length + tasks.length < max;
-    return (_jsxs(View, { style: [styles.grid, style], onLayout: handleLayout, children: [items.map((item, index) => (_jsxs(View, { style: [styles.cell, { borderRadius: t.borderRadius, borderColor: t.colorSplit, width: cellWidth }], children: [_jsx(Pressable, { style: styles.cellInner, onPress: () => onItemPress?.(item, index), children: _jsx(Image, { source: { uri: item.url ?? item.uri }, style: styles.image, resizeMode: 'cover' }) }), !disabled && (_jsx(Pressable, { style: styles.remove, onPress: () => handleRemove(index), hitSlop: 6, children: _jsx(Text, { style: styles.removeText, allowFontScaling: false, children: "\u2715" }) }))] }, `${item.objectKey ?? item.url ?? index}`))), tasks.map(task => (_jsx(View, { style: [
+    return (_jsxs(View, { style: [styles.grid, style], onLayout: handleLayout, children: [items.map((item, index) => (_jsxs(View, { style: [styles.cell, { borderRadius: t.borderRadius, borderColor: t.colorSplit, width: cellWidth }], children: [_jsx(Pressable, { style: styles.cellInner, onPress: () => {
+                            // 默认调用内置 XImagePreviewService 预览；也可通过 onItemPress 覆盖
+                            if (onItemPress) {
+                                onItemPress(item, index);
+                            }
+                            else {
+                                const urls = items
+                                    .map(it => it?.url ?? it.uri)
+                                    .filter(Boolean);
+                                const initialIndex = index;
+                                XImagePreviewService.show({ images: urls, initialIndex });
+                            }
+                        }, children: _jsx(Image, { source: { uri: item.url ?? item.uri }, style: styles.image, resizeMode: 'cover' }) }), !disabled && (_jsx(Pressable, { style: styles.remove, onPress: () => handleRemove(index), hitSlop: 6, children: _jsx(Text, { style: styles.removeText, allowFontScaling: false, children: "\u2715" }) }))] }, `${item.objectKey ?? item.url ?? index}`))), tasks.map(task => (_jsx(View, { style: [
                     styles.cell,
                     styles.uploadingCell,
                     { borderRadius: t.borderRadius, borderColor: t.colorSplit, backgroundColor: t.colorBgLayout, width: cellWidth },
-                ], children: _jsx(Text, { style: [styles.progressText, { color: t.colorPrimary }], allowFontScaling: false, children: i18n('uploadingPercent', { n: task.progress }) }) }, task.id))), showAdd && (_jsx(Pressable, { onPress: handleAdd, style: ({ pressed }) => [
+                ], children: _jsx(View, { style: styles.cellCenter, children: _jsx(Text, { style: [styles.progressText, { color: t.colorPrimary }], allowFontScaling: false, children: i18n('uploadingPercent', { n: task.progress }) }) }) }, task.id))), showAdd && (_jsx(Pressable, { onPress: handleAdd, style: ({ pressed }) => [
                     styles.cell,
                     styles.addCell,
                     { borderRadius: t.borderRadius, borderColor: t.colorBorder, width: cellWidth },
                     pressed && { backgroundColor: t.colorBgLayout },
-                ], children: _jsx(Text, { style: [styles.addText, { color: t.colorTextTertiary }], allowFontScaling: false, children: "\uFF0B" }) }))] }));
+                ], children: _jsx(View, { style: styles.cellCenter, children: _jsx(Text, { style: [styles.addText, { color: t.colorTextTertiary }], allowFontScaling: false, children: "\uFF0B" }) }) }))] }));
 }
 const styles = StyleSheet.create({
     grid: {
@@ -125,14 +167,18 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
+    /** 单元格内容统一用 flex:1 居中容器（修复安卓上加号仅水平居中问题） */
+    cellCenter: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
     progressText: {
         fontSize: 12,
         fontWeight: '600',
     },
     addCell: {
         borderStyle: 'dashed',
-        alignItems: 'center',
-        justifyContent: 'center',
     },
     addText: {
         fontSize: 26,

package/dist/XUpload/XUploadVideo.js

@@ -12,7 +12,9 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { useXTheme } from '../theme';
 import { useXLocale } from '../XLocale';
 import { useXUploadAdapter } from './provider';
-import { pickVideoFile } from './helpers';
+import { showXActionSheet } from '../XActionSheet/global';
+import { pickVideoFile, takeVideo } from './helpers';
+import { XVideoPreview } from '../XVideoPreview';
 export function XUploadVideo({ value, onChange, videoMaxDuration = 60, disabled = false, adapter: localAdapter, style, }) {
     const t = useXTheme();
     const { t: i18n } = useXLocale();
@@ -21,16 +23,32 @@ export function XUploadVideo({ value, onChange, videoMaxDuration = 60, disabled
     const current = value !== undefined ? value : inner;
     const [progress, setProgress] = useState(null);
     const [failed, setFailed] = useState(false);
+    /** 视频预览弹层 */
+    const [previewUri, setPreviewUri] = useState(null);
     const emit = useCallback((item) => {
         setInner(item);
         onChange?.(item);
     }, [onChange]);
-    /** 选择视频 → 上传 */
+    /** 弹 ActionSheet → 拍照 / 相册 → 上传 */
     const handlePick = useCallback(async () => {
         if (disabled || progress !== null)
             return;
         setFailed(false);
-        const file = await pickVideoFile({ videoMaxDuration });
+        const source = await showXActionSheet({
+            title: '选择视频来源',
+            options: [
+                { label: '🎥  拍视频', value: 'camera' },
+                { label: '🎞️  从相册选择', value: 'album' },
+                { label: '取消', value: null },
+            ],
+        });
+        let file = null;
+        if (source === 'camera') {
+            file = await takeVideo({ videoMaxDuration });
+        }
+        else if (source === 'album') {
+            file = await pickVideoFile({ videoMaxDuration });
+        }
         if (!file)
             return;
         setProgress(0);
@@ -46,11 +64,11 @@ export function XUploadVideo({ value, onChange, videoMaxDuration = 60, disabled
             setProgress(null);
         }
     }, [disabled, progress, videoMaxDuration, adapter, emit]);
-    return (_jsx(View, { style: style, children: current ? (_jsxs(View, { style: [styles.resultBox, { borderColor: t.colorSplit, backgroundColor: t.colorBgLayout, borderRadius: t.borderRadius }], children: [_jsxs(Text, { numberOfLines: 1, style: [styles.resultText, { color: t.colorText }], children: ["\uD83C\uDFAC ", String(current.url ?? current.objectKey ?? '视频')] }), !disabled && (_jsx(Pressable, { onPress: () => emit(null), hitSlop: 6, children: _jsx(Text, { style: [styles.removeText, { color: t.colorError }], children: i18n('delete') }) }))] })) : (_jsx(Pressable, { onPress: handlePick, disabled: disabled, style: ({ pressed }) => [
-                styles.pickBox,
-                { borderColor: t.colorBorder, borderRadius: t.borderRadius },
-                pressed && { backgroundColor: t.colorBgLayout },
-            ], children: progress !== null ? (_jsx(Text, { style: [styles.pickText, { color: t.colorPrimary }], allowFontScaling: false, children: i18n('uploadingPercent', { n: progress }) })) : (_jsx(Text, { style: [styles.pickText, { color: failed ? t.colorError : t.colorTextSecondary }], allowFontScaling: false, children: failed ? `${i18n('uploadFailed')} · ${i18n('retry')}` : i18n('pleaseSelect') })) })) }));
+    return (_jsxs(View, { style: style, children: [current ? (_jsxs(Pressable, { onPress: () => setPreviewUri(current.url ?? current.uri ?? null), style: [styles.resultBox, { borderColor: t.colorSplit, backgroundColor: t.colorBgLayout, borderRadius: t.borderRadius }], children: [_jsxs(Text, { numberOfLines: 1, style: [styles.resultText, { color: t.colorText }], children: ["\uD83C\uDFAC ", String(current.url ?? current.objectKey ?? '视频')] }), !disabled && (_jsx(Pressable, { hitSlop: 6, onPress: () => emit(null), style: styles.deleteBtn, children: _jsx(Text, { style: [styles.removeText, { color: t.colorError }], children: i18n('delete') }) }))] })) : (_jsx(Pressable, { onPress: handlePick, disabled: disabled, style: ({ pressed }) => [
+                    styles.pickBox,
+                    { borderColor: t.colorBorder, borderRadius: t.borderRadius },
+                    pressed && { backgroundColor: t.colorBgLayout },
+                ], children: progress !== null ? (_jsx(Text, { style: [styles.pickText, { color: t.colorPrimary }], allowFontScaling: false, children: i18n('uploadingPercent', { n: progress }) })) : (_jsx(Text, { style: [styles.pickText, { color: failed ? t.colorError : t.colorTextSecondary }], allowFontScaling: false, children: failed ? `${i18n('uploadFailed')} · ${i18n('retry')}` : i18n('pleaseSelect') })) })), _jsx(XVideoPreview, { visible: !!previewUri, uri: previewUri ?? '', onClose: () => setPreviewUri(null) })] }));
 }
 const styles = StyleSheet.create({
     resultBox: {
@@ -69,6 +87,9 @@ const styles = StyleSheet.create({
     removeText: {
         fontSize: 13,
     },
+    deleteBtn: {
+        paddingHorizontal: 4,
+    },
     pickBox: {
         height: 64,
         borderWidth: StyleSheet.hairlineWidth,

package/dist/XUpload/helpers.d.ts

@@ -9,6 +9,14 @@
  * ============================================================================
  */
 import type { XUploadAdapter, XUploadFile, XUploadResult } from './types';
+/** 拍照 */
+export declare function takePicture(options?: {
+    quality?: number;
+}): Promise<XUploadFile | null>;
+/** 拍视频 */
+export declare function takeVideo(options?: {
+    videoMaxDuration?: number;
+}): Promise<XUploadFile | null>;
 /** 选图（可多选），返回本机文件列表 */
 export declare function pickImageFiles(options?: {
     /** 最多可选，默认 9 */

package/dist/XUpload/helpers.js

@@ -21,6 +21,29 @@ function toUploadFile(asset) {
         size: asset.fileSize ?? undefined,
     };
 }
+/** 拍照 */
+export async function takePicture(options) {
+    // 拍照权限（Android 自动授予，iOS 第一次会弹）
+    await ImagePicker.requestCameraPermissionsAsync();
+    const res = await ImagePicker.launchCameraAsync({
+        mediaTypes: ['images'],
+        quality: options?.quality ?? 0.9,
+    });
+    if (res.canceled || !res.assets.length)
+        return null;
+    return toUploadFile(res.assets[0]);
+}
+/** 拍视频 */
+export async function takeVideo(options) {
+    await ImagePicker.requestCameraPermissionsAsync();
+    const res = await ImagePicker.launchCameraAsync({
+        mediaTypes: ['videos'],
+        videoMaxDuration: options?.videoMaxDuration ?? 60,
+    });
+    if (res.canceled || !res.assets.length)
+        return null;
+    return toUploadFile(res.assets[0]);
+}
 /** 选图（可多选），返回本机文件列表 */
 export async function pickImageFiles(options) {
     const res = await ImagePicker.launchImageLibraryAsync({

package/dist/XUpload/index.d.ts

@@ -5,7 +5,7 @@ export type { XUploadAdapter, XUploadFile, XUploadResult } from './types';
 export { createMinioPresignedAdapter, createFormDataUploadAdapter, createMockUploadAdapter } from './adapters';
 export type { MinioPresignedAdapterOptions, FormDataAdapterOptions } from './adapters';
 export { XUploadProvider, setXUploadAdapter, getXUploadAdapter, useXUploadAdapter, createMinioAdapter } from './provider';
-export { pickImageFiles, pickVideoFile, compressImage, uploadBase64 } from './helpers';
+export { pickImageFiles, pickVideoFile, compressImage, uploadBase64, takePicture, takeVideo } from './helpers';
 export { XUploadImage } from './XUploadImage';
 export type { XUploadImageProps } from './XUploadImage';
 export { XUploadVideo } from './XUploadVideo';

package/dist/XUpload/index.js

@@ -1,5 +1,5 @@
 export { createMinioPresignedAdapter, createFormDataUploadAdapter, createMockUploadAdapter } from './adapters';
 export { XUploadProvider, setXUploadAdapter, getXUploadAdapter, useXUploadAdapter, createMinioAdapter } from './provider';
-export { pickImageFiles, pickVideoFile, compressImage, uploadBase64 } from './helpers';
+export { pickImageFiles, pickVideoFile, compressImage, uploadBase64, takePicture, takeVideo } from './helpers';
 export { XUploadImage } from './XUploadImage';
 export { XUploadVideo } from './XUploadVideo';

package/dist/XVideoPreview/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ============================================================================
+ * XVideoPreview —— 视频全屏预览（基于 expo-video + XPullView 居中弹层）
+ * ============================================================================
+ * 用法：受控组件
+ *   <XVideoPreview visible={visible} onClose={...} uri="..." />
+ * XUploadVideo 内部直接复用。
+ * ============================================================================
+ */
+import React from 'react';
+export interface XVideoPreviewProps {
+    visible: boolean;
+    onClose: () => void;
+    uri: string;
+}
+export declare function XVideoPreview({ visible, onClose, uri }: XVideoPreviewProps): React.JSX.Element;
+export default XVideoPreview;

package/dist/XVideoPreview/index.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XVideoPreview —— 视频全屏预览（基于 expo-video + XPullView 居中弹层）
+ * ============================================================================
+ * 用法：受控组件
+ *   <XVideoPreview visible={visible} onClose={...} uri="..." />
+ * XUploadVideo 内部直接复用。
+ * ============================================================================
+ */
+import { useEffect } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useVideoPlayer, VideoView } from 'expo-video';
+import { XPullView } from '../XPullView';
+export function XVideoPreview({ visible, onClose, uri }) {
+    const player = useVideoPlayer(uri, p => {
+        p.loop = false;
+        p.play();
+    });
+    // 关闭时停止播放 + 卸载时清理
+    useEffect(() => {
+        return () => {
+            try {
+                player?.pause();
+            }
+            catch {
+                /* noop */
+            }
+        };
+    }, [player]);
+    // 每次打开自动播放
+    useEffect(() => {
+        if (visible && player) {
+            try {
+                player.play();
+            }
+            catch {
+                /* noop */
+            }
+        }
+        else if (!visible && player) {
+            try {
+                player.pause();
+            }
+            catch {
+                /* noop */
+            }
+        }
+    }, [visible, player]);
+    return (_jsx(XPullView, { visible: visible, onClose: onClose, side: 'center', overlayOpacity: 0.85, mask: true, children: _jsxs(View, { style: styles.overlay, children: [_jsx(VideoView, { player: player, style: StyleSheet.absoluteFill, contentFit: 'contain', nativeControls: true }), _jsx(Pressable, { onPress: onClose, hitSlop: 12, style: styles.close, children: _jsx(Text, { style: styles.closeText, children: "\u2715" }) })] }) }));
+}
+const styles = StyleSheet.create({
+    overlay: {
+        width: '100%',
+        aspectRatio: 16 / 9,
+        maxHeight: '80%',
+        backgroundColor: '#000',
+        overflow: 'hidden',
+        borderRadius: 12,
+    },
+    close: {
+        position: 'absolute',
+        top: 12,
+        right: 12,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    closeText: {
+        color: '#fff',
+        fontSize: 18,
+        fontWeight: '600',
+    },
+});
+export default XVideoPreview;

package/dist/index.d.ts

@@ -90,8 +90,6 @@ export { XCarousel } from './XCarousel';
 export type { XCarouselProps, XCarouselItem } from './XCarousel';
 export { XTabs, XTabPane } from './XTabs';
 export type { XTabsProps, XTabPaneProps } from './XTabs';
-export { XElevator } from './XElevator';
-export type { XElevatorProps, XElevatorSection } from './XElevator';
 export { default as XDropdownMenu, XDropdownMenuItem } from './XDropdownMenu';
 export type { XDropdownMenuProps, XDropdownMenuItemProps, XMenuOption } from './XDropdownMenu';
 export { XCalendar } from './XCalendar';
@@ -111,3 +109,8 @@ export type { XSignatureProps } from './XSignature';
 export { XSignatureSkia } from './XSignature/XSignatureSkia';
 export type { XSignatureSkiaProps, XSignatureSkiaValue, XSignatureCharacter, XSignatureStroke, } from './XSignature/XSignatureSkia';
 export * from './XUpload';
+export { ThemeControls } from './XTheme/ThemeControls';
+export { useXBrandStore, setXBrand, setXBrandByName, X_BRAND_PRESETS } from './XTheme/BrandColor';
+export type { XBrandPreset } from './XTheme/BrandColor';
+export { XVideoPreview } from './XVideoPreview';
+export type { XVideoPreviewProps } from './XVideoPreview';