@blocklet/pages-kit 0.4.109 → 0.4.111

package/lib/cjs/utils/builtin.js

@@ -72,4 +72,6 @@ exports.BuiltinModules = {
     '@blocklet/pages-kit/builtin/async/react-syntax-highlighter': {},
     '@blocklet/pages-kit/builtin/async/image-preview': {},
     '@blocklet/pages-kit/builtin/async/ai-runtime': {},
+    '@blocklet/pages-kit/builtin/uploader': {},
+    '@blocklet/pages-kit/builtin/color-picker': {},
 };

package/lib/cjs/utils/inject-global-components.js

@@ -35,6 +35,7 @@ const imagePreview = __importStar(require("../builtin/async/image-preview"));
 const reactMarkdown = __importStar(require("../builtin/async/react-markdown"));
 const reactScrollToBottom = __importStar(require("../builtin/async/react-scroll-to-bottom"));
 const reactSyntaxHighlighter = __importStar(require("../builtin/async/react-syntax-highlighter"));
+const colorPicker = __importStar(require("../builtin/color-picker"));
 const components = __importStar(require("../builtin/components"));
 const dayjs = __importStar(require("../builtin/dayjs"));
 const emotionCss = __importStar(require("../builtin/emotion/css"));
@@ -51,6 +52,7 @@ const reactRouterDOM = __importStar(require("../builtin/react-router-dom"));
 const reactWrapBalancer = __importStar(require("../builtin/react-wrap-balancer"));
 const session = __importStar(require("../builtin/session"));
 const stream = __importStar(require("../builtin/stream"));
+const uploader = __importStar(require("../builtin/uploader"));
 const utils = __importStar(require("../builtin/utils"));
 const zustand = __importStar(require("../builtin/zustand"));
 const zustandMiddlewareImmer = __importStar(require("../builtin/zustand/middleware/immer"));
@@ -80,6 +82,9 @@ function injectGlobalComponents() {
         '@blocklet/pages-kit/builtin/utils': utils,
         '@blocklet/pages-kit/builtin/stream': stream,
         '@blocklet/pages-kit/builtin/react': react,
+        '@blocklet/pages-kit/builtin/react-dom': reactDOM,
+        '@blocklet/pages-kit/builtin/uploader': uploader,
+        '@blocklet/pages-kit/builtin/color-picker': colorPicker,
         '@blocklet/pages-kit/builtin/emotion/css': emotionCss,
         '@blocklet/pages-kit/builtin/mui/material': muiMaterial,
         '@blocklet/pages-kit/builtin/mui/lab': muiLab,
@@ -90,7 +95,6 @@ function injectGlobalComponents() {
         '@blocklet/pages-kit/builtin/immer': immer,
         '@blocklet/pages-kit/builtin/react-wrap-balancer': reactWrapBalancer,
         '@blocklet/pages-kit/builtin/react-router-dom': reactRouterDOM,
-        '@blocklet/pages-kit/builtin/react-dom': reactDOM,
         '@blocklet/pages-kit/builtin/session': session,
         '@blocklet/pages-kit/builtin/locale': locale,
         '@blocklet/pages-kit/builtin/arcblock/ux': arcblockUx,

package/lib/cjs/utils/style.js

@@ -155,7 +155,10 @@ function parseColor(color = '') {
  */
 function colorConvert(color, _theme = blockletTheme) {
     if (isMuiColorKey(color)) {
-        return (0, get_1.default)(_theme.palette, color);
+        if (color === 'transparent') {
+            return 'transparent';
+        }
+        return (0, get_1.default)(_theme.palette, color, color);
     }
     // 处理渐变和普通颜色
     if (isGradient(color)) {

package/lib/esm/builtin/color-picker.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Empty from '@arcblock/ux/lib/Empty';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, ButtonGroup, Typography, Tooltip, Skeleton, } from '@mui/material';
+import { useBoolean, useLocalStorageState, useReactive } from 'ahooks';
+import { Suspense, forwardRef, lazy, useCallback, useImperativeHandle, useRef } from 'react';
+import tinycolor from 'tinycolor2';
+import { useMuiColorPalette } from '../contexts/color';
+import { isColorString, isGradient, getSafeGradient } from '../utils/style';
+const ColorPickerLib = lazy(() => import('react-best-gradient-color-picker'));
+const HEIGHT = 400;
+const WIDTH = 270;
+export function ColorItem({ color, sx = {}, ...props }) {
+    isColorString(color);
+    const styleMap = {};
+    if (isGradient(color)) {
+        styleMap.backgroundImage = color;
+    }
+    else {
+        styleMap.backgroundColor = color;
+    }
+    return (_jsx(Box, { sx: {
+            ...sx,
+            width: '100%',
+            paddingBottom: '100%',
+            cursor: 'pointer',
+            transition: 'opacity 0.2s',
+            border: '1px solid #ccc',
+            borderRadius: 0.5,
+            '&:hover': {
+                opacity: 0.75,
+            },
+            ...styleMap,
+        }, ...props }));
+}
+export function ColorPicker({ value, onChange, style = {}, sx = {} }) {
+    const refDialog = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx(ColorItem, { color: value, style: { width: '1rem', height: '1rem', padding: 0, marginRight: '0.25rem', ...style }, sx: { ...sx }, onClick: () => {
+                    refDialog.current?.open({ value });
+                } }), _jsx(ConfigColorDialog, { ref: refDialog, onSave: ({ value }, close) => {
+                    onChange(value);
+                    close();
+                } })] }));
+}
+export default ColorPicker;
+export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave, enableMuiPalette = true }, ref) {
+    const state = useReactive({
+        value: '',
+        originalMuiKey: null,
+    });
+    const { t } = useLocaleContext();
+    const [activeTab, setActiveTab] = useLocalStorageState('pages-kit:color-picker-active-tab', {
+        defaultValue: 0,
+    });
+    const muiPalette = useMuiColorPalette();
+    const previewStyle = {};
+    if (state.value) {
+        if (isGradient(state.value)) {
+            previewStyle.backgroundImage = state.value;
+        }
+        else {
+            previewStyle.backgroundColor = state.value;
+        }
+    }
+    else {
+        previewStyle.border = '1px solid #ccc';
+    }
+    const [open, { setFalse, setTrue }] = useBoolean(false);
+    const handleClose = useCallback(() => {
+        setFalse();
+    }, [setFalse]);
+    const isActiveMuiTab = enableMuiPalette && activeTab === 0;
+    useImperativeHandle(ref, () => {
+        return {
+            open({ value } = { value: '' }) {
+                // 处理 MUI 色板键
+                if (enableMuiPalette && muiPalette.isMuiColorKey(value)) {
+                    state.originalMuiKey = value;
+                    const colorValue = muiPalette.getColorByMuiKey(value);
+                    state.value = getSafeGradient(colorValue || value);
+                    // 如果是 MUI 颜色键，再切换到 MUI Theme 标签
+                    setActiveTab(0);
+                }
+                else {
+                    state.originalMuiKey = null;
+                    state.value = getSafeGradient(value);
+                    // 不自动切换标签，尊重用户上一次的选择
+                    // 只有在 MUI 不可用时才强制切换到自定义
+                    if (!enableMuiPalette) {
+                        setActiveTab(1);
+                    }
+                }
+                setTrue();
+            },
+            close() {
+                handleClose();
+            },
+        };
+    });
+    const handleSave = () => {
+        // 启用 MUI 预设时，检查是否为 MUI 颜色
+        if (enableMuiPalette && muiPalette) {
+            // 只有当前在 MUI Theme 标签页时才尝试自动转换为 MUI 色键
+            if (isActiveMuiTab) {
+                const muiKey = muiPalette.getMuiKeyByColor(state.value);
+                onSave({ value: muiKey || state.value }, handleClose);
+            }
+            else {
+                // 在自定义色彩标签页时，保持原始值
+                onSave({ value: state.value }, handleClose);
+            }
+        }
+        else {
+            onSave({ value: state.value }, handleClose);
+        }
+    };
+    // 直接从 hook 获取分组
+    const { groupedMuiColors } = muiPalette;
+    return (_jsxs(Dialog, { disableEnforceFocus: true, open: open, onClose: handleClose, children: [_jsxs(DialogTitle, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [_jsx(Typography, { variant: "inherit", component: "div", children: t('maker.configColor') }), enableMuiPalette && (_jsxs(ButtonGroup, { size: "small", "aria-label": "color mode selector", children: [_jsx(Button, { variant: isActiveMuiTab ? 'contained' : 'outlined', onClick: () => setActiveTab(0), sx: {
+                                    fontWeight: 500,
+                                    textTransform: 'none',
+                                    minWidth: 'unset',
+                                }, children: t('maker.configColorMuiTheme') || 'Theme Color' }), _jsx(Button, { variant: activeTab === 1 ? 'contained' : 'outlined', onClick: () => setActiveTab(1), sx: {
+                                    fontWeight: 500,
+                                    textTransform: 'none',
+                                    minWidth: 'unset',
+                                }, children: t('maker.configColorCustomColor') || 'Custom Color' })] }))] }), _jsxs(DialogContent, { sx: { width: 600, display: 'flex', flexDirection: 'row', gap: 2, overflowX: 'hidden' }, children: [_jsxs(Box, { sx: {
+                            ...previewStyle,
+                            flex: '0 0 270px',
+                            borderRadius: 1,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            position: 'sticky',
+                            top: 0,
+                        }, children: [!state.value && _jsx(Empty, { children: t('error.notConfig') }), state.originalMuiKey && isActiveMuiTab && (_jsx(Typography, { variant: "body2", sx: {
+                                    bgcolor: 'rgba(255,255,255,0.7)',
+                                    px: 2,
+                                    py: 1,
+                                    borderRadius: 1,
+                                    color: '#000',
+                                    maxWidth: '90%',
+                                    textAlign: 'center',
+                                }, children: state.originalMuiKey }))] }, "color-preview"), _jsx(Box, { sx: { flex: 1 }, children: isActiveMuiTab ? (
+                        // MUI 主题色面板
+                        _jsx(Box, { sx: { height: HEIGHT }, children: Object.entries(groupedMuiColors).map(([palette, paletteColors]) => (_jsxs(Box, { sx: { pb: 1.5 }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, sx: { textTransform: 'capitalize', mb: 0.5, lineHeight: 1 }, children: palette }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: paletteColors.map((item) => {
+                                            let selectedColor = '';
+                                            if (state.originalMuiKey === item.colorKey) {
+                                                if (item.colorValue === 'transparent') {
+                                                    selectedColor = 'rgba(0,0,0,0.7)';
+                                                }
+                                                else if (tinycolor(item.colorValue).isDark()) {
+                                                    selectedColor = 'rgba(255,255,255,0.8)';
+                                                }
+                                                else {
+                                                    selectedColor = 'rgba(0,0,0,0.7)';
+                                                }
+                                            }
+                                            return (_jsx(Tooltip, { title: item.colorKey, children: _jsx(Box, { onClick: () => {
+                                                        state.value = item.colorValue;
+                                                        state.originalMuiKey = item.colorKey;
+                                                    }, sx: {
+                                                        width: 28,
+                                                        height: 28,
+                                                        bgcolor: item.colorValue,
+                                                        border: state.originalMuiKey === item.colorKey
+                                                            ? `2px solid ${selectedColor}`
+                                                            : '1px solid #ccc',
+                                                        borderRadius: 0.5,
+                                                        cursor: 'pointer',
+                                                        '&:hover': { opacity: 0.8 },
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        // 透明色时显示棋盘背景
+                                                        ...(item.colorValue === 'transparent'
+                                                            ? {
+                                                                background: 'repeating-conic-gradient(#CCCCCC 0% 25%, #FFFFFF 0% 50%) 50% / 10px 10px',
+                                                            }
+                                                            : {}),
+                                                    }, children: state.originalMuiKey === item.colorKey && (_jsx("i", { className: "i-mdi:check", style: {
+                                                            color: selectedColor,
+                                                            fontSize: '1.2rem',
+                                                        } })) }) }, item.colorKey));
+                                        }) })] }, palette))) })) : (
+                        // 自定义颜色选择器
+                        _jsx(Box, { sx: { overflowY: 'auto', overflowX: 'hidden' }, children: _jsx(Suspense, { fallback: _jsx(Skeleton, { variant: "rectangular", width: WIDTH, height: HEIGHT }), children: _jsx(ColorPickerLib, { disableDarkMode: true, width: WIDTH, 
+                                    // menu color picker height
+                                    height: WIDTH, value: state.value, onChange: (value) => {
+                                        state.value = value;
+                                        state.originalMuiKey = null;
+                                    }, hidePresets: true, hideAdvancedSliders: true, hideColorGuide: true, hideInputType: true }) }) })) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: handleClose, children: t('common.cancel') }), _jsx(Button, { variant: "contained", size: "small", onClick: handleSave, children: t('maker.save') })] })] }));
+});

package/lib/esm/builtin/uploader.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UploaderProvider as UploaderProviderLib, useUploaderContext } from '@blocklet/uploader/react';
+import UploadIcon from '@mui/icons-material/Upload';
+import { IconButton } from '@mui/material';
+export const useUploader = useUploaderContext;
+export function UploaderButton({ onChange }) {
+    const uploaderRef = useUploader();
+    const handleOpen = () => {
+        // @ts-ignore
+        const uploader = uploaderRef?.current?.getUploader();
+        uploader?.open();
+        if (onChange) {
+            // rewrite default emitter
+            uploader.onceUploadSuccess((...args) => {
+                onChange(...args);
+            });
+        }
+    };
+    return (_jsx(IconButton, { size: "small", onClick: handleOpen, children: _jsx(UploadIcon, {}) }, "uploader-trigger"));
+}
+export function UploaderProvider({ children }) {
+    return (_jsx(UploaderProviderLib, { popup: true, 
+        // @ts-ignore
+        coreProps: {
+            restrictions: {
+                allowedFileTypes: [
+                    'image/png',
+                    'image/jpeg',
+                    'image/gif',
+                    'image/webp',
+                    'image/svg+xml',
+                    'video/mp4',
+                    'video/webm',
+                    'audio/mpeg',
+                ],
+                maxNumberOfFiles: 1,
+            },
+        }, children: children }, "uploader"
+    // @ts-ignore
+    ));
+}
+export default UploaderProvider;
+export function getVideoSize(url) {
+    return new Promise((resolve, reject) => {
+        const video = document.createElement('video');
+        video.src = url;
+        video.onloadedmetadata = () => {
+            const { videoWidth: naturalWidth, videoHeight: naturalHeight } = video;
+            resolve({ naturalWidth, naturalHeight });
+        };
+        video.onerror = (e) => reject(e);
+    });
+}
+export function getImageSize(url) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.src = url;
+        img.onload = () => {
+            const { naturalWidth, naturalHeight } = img;
+            resolve({ naturalWidth, naturalHeight });
+        };
+        img.onerror = (e) => reject(e);
+    });
+}