@wzyjs/uis 0.3.29 → 0.3.30

package/dist/buttons/ProgressButton/index.css

@@ -0,0 +1,63 @@
+@keyframes wzy-ui-progress-button-complete {
+  0% {
+    transform: scale(1) rotateY(0deg);
+  }
+
+  20% {
+    transform: scale(0.9) rotateY(36deg);
+  }
+
+  40% {
+    transform: scale(0.95) rotateY(72deg);
+  }
+
+  60% {
+    transform: scale(1) rotateY(108deg);
+  }
+
+  80% {
+    transform: scale(1.05) rotateY(144deg);
+  }
+
+  100% {
+    transform: scale(1) rotateY(180deg);
+  }
+}
+
+@keyframes wzy-ui-progress-button-counter-rotate {
+  0% {
+    transform: rotateY(0deg);
+  }
+
+  20% {
+    transform: rotateY(-36deg);
+  }
+
+  40% {
+    transform: rotateY(-72deg);
+  }
+
+  60% {
+    transform: rotateY(-108deg);
+  }
+
+  80% {
+    transform: rotateY(-144deg);
+  }
+
+  100% {
+    transform: rotateY(-180deg);
+  }
+}
+
+.wzy-ui-progress-button .animate-complete {
+  animation: wzy-ui-progress-button-complete 0.6s cubic-bezier(0, 0, 1, 1);
+}
+
+.wzy-ui-progress-button .animate-counter-rotate {
+  animation: wzy-ui-progress-button-counter-rotate 0.6s cubic-bezier(0, 0, 1, 1);
+}
+
+.wzy-ui-progress-button .perspective {
+  perspective: 1000px;
+}

package/dist/buttons/ProgressButton/index.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import './index.css';
+interface ProgressButtonProps {
+    colors?: {
+        bg: string;
+        ring: string;
+    };
+    showRing?: boolean;
+    progress?: number;
+    padding?: number;
+    size?: number;
+    strokeWidth?: number;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const ProgressButton: (props: ProgressButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/buttons/ProgressButton/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.css';
+export const ProgressButton = (props) => {
+    const { colors, // 按钮颜色配置
+    showRing = false, // 是否显示进度环
+    progress = 0, // 进度值(0-1)
+    padding = 0, // 内边距
+    strokeWidth = 5, // 进度环宽度
+    size = 50, // 按钮大小
+    children, // 子元素
+    className = '', // 自定义className
+     } = props;
+    // 计算进度环的半径
+    const radius = (size / 2) - strokeWidth - padding + 2.5;
+    // 计算进度环的周长
+    const circumference = 2 * Math.PI * radius;
+    // 计算进度环的偏移量，用于显示进度
+    const offset = circumference * (1 - progress);
+    return (_jsx("div", { className: 'wzy-ui-progress-button', children: _jsxs("div", { style: { width: size, height: size }, className: `relative rounded-full
+          flex items-center justify-center
+          cursor-pointer hover:opacity-90
+          focus:outline-none focus:ring-2 focus:ring-offset-2
+          ${colors?.bg}
+          ${colors?.ring}
+          transform-gpu transition-all duration-300
+          perspective
+          ${className}`, children: [showRing && (_jsxs(_Fragment, { children: [_jsx("svg", { className: 'absolute inset-0 w-full h-full', viewBox: `0 0 ${size} ${size}`, children: _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: 'none', stroke: 'currentColor', strokeWidth: strokeWidth, className: 'opacity-30' }) }), _jsx("svg", { className: 'absolute inset-0 w-full h-full -rotate-90', viewBox: `0 0 ${size} ${size}`, children: _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: 'none', stroke: 'currentColor', strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: 'round', className: 'transition-all duration-300' }) })] })), _jsx("div", { className: `
+            relative z-10 text-white text-xs text-center whitespace-pre select-none
+            ${className ? 'animate-counter-rotate' : ''}
+          `, children: children })] }) }));
+};

package/dist/buttons/SectorButton/index.d.ts

@@ -0,0 +1,20 @@
+export interface SectorButtonSector<T> {
+    id: T;
+    label?: string;
+    color?: string;
+    hoverColor?: string;
+}
+export interface SectorButtonProps<T> {
+    sectors: SectorButtonSector<T>[];
+    size?: number;
+    className?: string;
+    onClick?: (id: T) => void;
+    borderRadius?: number;
+    showPlusSign?: boolean;
+    plusSignColor?: string;
+    plusSignSize?: number;
+    shape?: 'circle' | 'rounded-rect';
+    rectWidth?: number;
+    rectHeight?: number;
+}
+export declare const SectorButton: <T = string>(props: SectorButtonProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/buttons/SectorButton/index.js

@@ -0,0 +1,130 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+export const SectorButton = (props) => {
+    const { shape = 'rounded-rect', size = 40, rectWidth = size, rectHeight = size, sectors, className, borderRadius = 12, showPlusSign = true, plusSignColor = '#bbb', plusSignSize = 0.3, onClick, } = props;
+    const [hoveredSector, setHoveredSector] = useState(null);
+    const anglePerSector = 360 / sectors.length;
+    const radius = size / 2;
+    // 添加额外边距确保虚线显示完整
+    const padding = 2;
+    const svgWidth = shape === 'circle' ? size + padding * 2 : rectWidth + padding * 2;
+    const svgHeight = shape === 'circle' ? size + padding * 2 : rectHeight + padding * 2;
+    const handleSectorClick = (id) => {
+        onClick?.(id);
+    };
+    // 先渲染非悬停的扇形，然后渲染悬停的扇形，确保悬停的扇形在最顶层
+    const nonHoveredSectors = sectors.filter(sector => sector.id !== hoveredSector);
+    const hoveredSector1 = sectors.find(sector => sector.id === hoveredSector);
+    const orderedSectors = [...nonHoveredSectors];
+    if (hoveredSector1) {
+        orderedSectors.push(hoveredSector1);
+    }
+    // 生成圆角矩形或扇形的路径
+    const generatePath = (sector, originalIndex) => {
+        const centerX = svgWidth / 2;
+        const centerY = svgHeight / 2;
+        if (shape === 'circle') {
+            // 原来的扇形路径生成逻辑
+            const startAngle = originalIndex * anglePerSector;
+            const endAngle = (originalIndex + 1) * anglePerSector;
+            const startRad = (startAngle - 90) * Math.PI / 180;
+            const endRad = (endAngle - 90) * Math.PI / 180;
+            return [
+                `M ${centerX} ${centerY}`,
+                `L ${centerX + radius * Math.cos(startRad)} ${centerY + radius * Math.sin(startRad)}`,
+                `A ${radius} ${radius} 0 ${anglePerSector > 180 ? 1 : 0} 1 ${centerX + radius * Math.cos(endRad)} ${centerY + radius * Math.sin(endRad)}`,
+                `Z`,
+            ].join(' ');
+        }
+        else {
+            // 圆角矩形的分块逻辑
+            const rectX = padding;
+            const rectY = padding;
+            const rectW = rectWidth;
+            const rectH = rectHeight;
+            // 当只有2个扇形时，使用左右布局
+            if (sectors.length === 2) {
+                const secWidth = rectW / 2;
+                const secHeight = rectH;
+                const x = rectX + originalIndex * secWidth;
+                const y = rectY;
+                // 使用圆角矩形绘制单个部分
+                const br = borderRadius > 0 ? Math.min(borderRadius, secWidth / 4, secHeight / 4) : 0;
+                // 确定是左侧还是右侧
+                const isLeft = originalIndex === 0;
+                const isRight = originalIndex === 1;
+                // 构建路径 - 根据位置决定哪些角有圆角
+                return [
+                    `M ${x + (isLeft ? br : 0)} ${y}`,
+                    // 上边
+                    `H ${x + secWidth - (isRight ? br : 0)}`,
+                    isRight ? `A ${br} ${br} 0 0 1 ${x + secWidth} ${y + br}` : '',
+                    // 右边
+                    `V ${y + secHeight - (isRight ? br : 0)}`,
+                    isRight ? `A ${br} ${br} 0 0 1 ${x + secWidth - br} ${y + secHeight}` : '',
+                    // 下边
+                    `H ${x + (isLeft ? br : 0)}`,
+                    isLeft ? `A ${br} ${br} 0 0 1 ${x} ${y + secHeight - br}` : '',
+                    // 左边
+                    `V ${y + (isLeft ? br : 0)}`,
+                    isLeft ? `A ${br} ${br} 0 0 1 ${x + br} ${y}` : '',
+                    'Z',
+                ].filter(Boolean).join(' ');
+            }
+            else {
+                // 原有的上下布局逻辑
+                const secWidth = rectW / (sectors.length % 2 === 0 ? sectors.length / 2 : Math.ceil(sectors.length / 2));
+                const secHeight = rectH / 2;
+                // 确定当前扇区在矩形中的位置
+                const isTopRow = originalIndex < Math.ceil(sectors.length / 2);
+                const rowIndex = isTopRow ? originalIndex : originalIndex - Math.ceil(sectors.length / 2);
+                const x = rectX + rowIndex * secWidth;
+                const y = isTopRow ? rectY : rectY + secHeight;
+                // 使用圆角矩形绘制单个部分
+                const br = borderRadius > 0 ? Math.min(borderRadius, secWidth / 4, secHeight / 4) : 0;
+                // 确定哪些边需要圆角
+                const isLeftEdge = (isTopRow && rowIndex === 0) || (!isTopRow && rowIndex === 0);
+                const isRightEdge = (isTopRow && rowIndex === Math.ceil(sectors.length / 2) - 1) ||
+                    (!isTopRow && rowIndex === (sectors.length - Math.ceil(sectors.length / 2)) - 1);
+                const isTopEdge = isTopRow;
+                const isBottomEdge = !isTopRow;
+                // 构建路径 - 根据位置决定哪些角有圆角
+                return [
+                    `M ${x + (isLeftEdge && isTopEdge ? br : 0)} ${y}`,
+                    // 上边
+                    `H ${x + secWidth - (isRightEdge && isTopEdge ? br : 0)}`,
+                    isRightEdge && isTopEdge ? `A ${br} ${br} 0 0 1 ${x + secWidth} ${y + br}` : '',
+                    // 右边
+                    `V ${y + secHeight - (isRightEdge && isBottomEdge ? br : 0)}`,
+                    isRightEdge && isBottomEdge ? `A ${br} ${br} 0 0 1 ${x + secWidth - br} ${y + secHeight}` : '',
+                    // 下边
+                    `H ${x + (isLeftEdge && isBottomEdge ? br : 0)}`,
+                    isLeftEdge && isBottomEdge ? `A ${br} ${br} 0 0 1 ${x} ${y + secHeight - br}` : '',
+                    // 左边
+                    `V ${y + (isLeftEdge && isTopEdge ? br : 0)}`,
+                    isLeftEdge && isTopEdge ? `A ${br} ${br} 0 0 1 ${x + br} ${y}` : '',
+                    'Z',
+                ].filter(Boolean).join(' ');
+            }
+        }
+    };
+    return (_jsx("div", { className: `relative ${className}`, style: {
+            width: shape === 'circle' ? size : rectWidth,
+            height: shape === 'circle' ? size : rectHeight,
+            borderRadius,
+            backgroundColor: 'transparent',
+        }, children: _jsx("svg", { width: svgWidth, height: svgHeight, viewBox: `0 0 ${svgWidth} ${svgHeight}`, style: {
+                position: 'absolute',
+                top: -padding,
+                left: -padding,
+            }, children: _jsxs("g", { children: [orderedSectors.map(sector => {
+                        const originalIndex = sectors.findIndex(s => s.id === sector.id);
+                        const pathData = generatePath(sector, originalIndex);
+                        const isHovered = hoveredSector === sector.id;
+                        const fillColor = (isHovered ? sector.hoverColor : sector.color) || 'white';
+                        const strokeColor = isHovered ? '#90cdf4' : '#e2e8f0';
+                        const strokeWidth = isHovered ? 1.5 : 1;
+                        return (_jsx("g", { children: _jsx("path", { d: pathData, fill: fillColor, stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: '4,1', className: 'transition-colors duration-200 cursor-pointer', onMouseEnter: () => setHoveredSector(sector.id), onMouseLeave: () => setHoveredSector(null), onClick: () => handleSectorClick(sector.id) }) }, sector.id));
+                    }), showPlusSign && (_jsxs("g", { children: [_jsx("line", { x1: svgWidth / 2 - (plusSignSize * (shape === 'circle' ? size : Math.min(rectWidth, rectHeight)) / 2), y1: svgHeight / 2, x2: svgWidth / 2 + (plusSignSize * (shape === 'circle' ? size : Math.min(rectWidth, rectHeight)) / 2), y2: svgHeight / 2, stroke: plusSignColor, strokeWidth: 2, strokeLinecap: 'round' }), _jsx("line", { x1: svgWidth / 2, y1: svgHeight / 2 - (plusSignSize * (shape === 'circle' ? size : Math.min(rectWidth, rectHeight)) / 2), x2: svgWidth / 2, y2: svgHeight / 2 + (plusSignSize * (shape === 'circle' ? size : Math.min(rectWidth, rectHeight)) / 2), stroke: plusSignColor, strokeWidth: 2, strokeLinecap: 'round' })] }))] }) }) }));
+};

package/dist/buttons/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ButtonGroup';
+export * from './ConfirmButton';
+export * from './CopyButton';
+export * from './DrawerButton';
+export * from './ProgressButton';
+export * from './SectorButton';

package/dist/buttons/index.js

@@ -0,0 +1,6 @@
+export * from './ButtonGroup';
+export * from './ConfirmButton';
+export * from './CopyButton';
+export * from './DrawerButton';
+export * from './ProgressButton';
+export * from './SectorButton';

package/dist/display/CodeView/index.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties } from 'react';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-less';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-http';
+import 'prismjs/components/prism-editorconfig';
+import 'prismjs/components/prism-docker';
+import 'prismjs/components/prism-git';
+import 'prismjs/components/prism-ignore';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/themes/prism.css';
+interface CodeViewProps {
+    language?: 'html' | 'jsx' | 'tsx' | 'vue' | 'json' | 'javascript' | 'typescript' | 'css' | 'less' | 'sass' | 'scss' | 'bash' | 'http' | 'editorconfig' | 'dockerfile' | 'git' | 'ignore' | 'yaml';
+    code?: string;
+    children?: any;
+    style?: CSSProperties;
+}
+export declare const CodeView: (props: CodeViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/display/CodeView/index.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import Prism from 'prismjs';
+import { format } from 'prettier/standalone';
+import parserBabel from 'prettier/parser-babel';
+import parserTs from 'prettier/parser-typescript';
+import { js_beautify, html_beautify, css_beautify } from 'js-beautify';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-less';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-http';
+import 'prismjs/components/prism-editorconfig';
+import 'prismjs/components/prism-docker';
+import 'prismjs/components/prism-git';
+import 'prismjs/components/prism-ignore';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/themes/prism.css';
+export const CodeView = (props) => {
+    const { language = 'javascript', style, children, code = children } = props;
+    const preRef = useRef(null);
+    useEffect(() => {
+        if (!preRef.current) {
+            return;
+        }
+        Prism.highlightElement(preRef.current);
+    }, []);
+    const beautifydCode = useMemo(() => {
+        if (language === 'html') {
+            return html_beautify(code, { indent_size: 2 });
+        }
+        if (language === 'css') {
+            return css_beautify(code, { indent_size: 2 });
+        }
+        if (language === 'javascript') {
+            return js_beautify(code, { indent_size: 2 });
+        }
+        try {
+            return format(code, {
+                semi: false,
+                parser: 'babel',
+                singleQuote: true,
+                tabWidth: 2,
+                jsxSingleQuote: true,
+                plugins: [parserBabel, parserTs],
+            });
+        }
+        catch (e) {
+            return code;
+        }
+    }, [code]);
+    return (_jsx("div", { style: { overflow: 'scroll', ...style }, children: _jsx("pre", { style: { margin: 0, backgroundColor: 'transparent' }, children: _jsx("code", { ref: preRef, className: `language-${language}`, children: beautifydCode }) }) }));
+};

package/dist/display/EnumTag/index.d.ts

@@ -0,0 +1,12 @@
+type EnumTagProps = {
+    value: string;
+    map: Map<string, {
+        label: string;
+        value: string;
+        extra?: {
+            color?: string;
+        };
+    }>;
+};
+export declare const EnumTag: (props: EnumTagProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/display/EnumTag/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from 'antd';
+export const EnumTag = (props) => {
+    const { value, map } = props;
+    const enumItem = map.get(value);
+    if (!enumItem) {
+        return _jsx(Tag, { children: value });
+    }
+    return (_jsx(Tag, { color: enumItem.extra?.color, children: enumItem.label }));
+};

package/dist/display/HtmlDataRenderer/index.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    template?: string;
+    data: any;
+}
+export declare const HtmlDataRenderer: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/display/HtmlDataRenderer/index.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import Handlebars from 'handlebars';
+export const HtmlDataRenderer = (props) => {
+    const { template, data } = props;
+    const html = useMemo(() => {
+        const html = Handlebars.compile(template || '')(data);
+        return html.replaceAll('\n', '').replaceAll('\t', '');
+    }, [template, data]);
+    if (!html) {
+        return null;
+    }
+    return (_jsx("div", { dangerouslySetInnerHTML: { __html: html } }));
+};

package/dist/display/HtmlView/index.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties } from 'react';
+export interface HtmlViewProps {
+    html: string;
+    style?: CSSProperties;
+}
+export declare const HtmlView: (props: HtmlViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/display/HtmlView/index.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HtmlView = (props) => {
+    const { html, style = {} } = props;
+    return (_jsx("div", { style: { minWidth: '100%', ...style }, dangerouslySetInnerHTML: { __html: html } }));
+};

package/dist/display/IframePro/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+export interface IframeProProps {
+    url: string;
+    errMessage?: string;
+    style?: CSSProperties;
+    isShowLoading?: boolean;
+}
+export declare const IframePro: (props: IframeProProps) => import("react/jsx-runtime").JSX.Element;

package/dist/display/IframePro/index.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Spin } from 'antd';
+import { useBoolean } from '@wzyjs/hooks/web';
+export const IframePro = (props) => {
+    const { url, style, errMessage = '', isShowLoading = false } = props;
+    const [loading, { setTrue, setFalse }] = useBoolean(true);
+    useEffect(() => {
+        setTrue();
+    }, [url]);
+    if (!url) {
+        return (_jsx("span", { style: {
+                ...style,
+                color: '#ccc',
+                fontSize: 14,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }, children: errMessage || '没有url' }));
+    }
+    return (_jsx(Spin, { spinning: loading && isShowLoading, children: _jsx("iframe", { src: url, width: '100%', height: '100%', style: style, onLoad: setFalse }) }));
+};

package/dist/display/JsonSchemaRenderer/index.d.ts

@@ -0,0 +1,11 @@
+export type JsonSchemaComponentName = 'Divider' | 'Flex' | 'Space' | 'Typography' | 'Typography.Title' | 'Typography.Text' | 'Typography.Paragraph' | 'Typography.Link' | 'Steps' | 'Tabs' | 'Collapse' | 'Collapse.Panel' | 'Description' | 'Image' | 'List' | 'Popover' | 'Tooltip' | 'Card' | 'QRCode' | 'Segmented' | 'Table' | 'Tag' | 'Timeline' | 'Tree' | 'Alert' | 'Progress';
+export interface Content {
+    component: JsonSchemaComponentName;
+    props?: Record<string, any>;
+    children?: Content[] | string;
+}
+interface JsonSchemaRendererProps {
+    content: Content[];
+}
+export declare const JsonSchemaRenderer: (props: JsonSchemaRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/display/JsonSchemaRenderer/index.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Divider, Flex, Space, Typography, Steps, Tabs, Collapse, Descriptions, Image, List, Popover, Tooltip, Card, QRCode, Segmented, Table, Tag, Timeline, Tree, Alert, Progress, } from 'antd';
+const ComponentMap = {
+    // 布局结构类
+    Divider,
+    Flex,
+    Space,
+    // 信息展示类
+    Typography,
+    'Typography.Title': Typography.Title,
+    'Typography.Text': Typography.Text,
+    'Typography.Paragraph': Typography.Paragraph,
+    'Typography.Link': Typography.Link,
+    Steps,
+    Tabs,
+    Collapse,
+    'Collapse.Panel': Collapse.Panel,
+    Description: Descriptions,
+    Image,
+    List,
+    Popover,
+    Tooltip,
+    Card,
+    QRCode,
+    Segmented,
+    Table,
+    Tag,
+    Timeline,
+    Tree,
+    Alert,
+    Progress,
+};
+export const JsonSchemaRenderer = (props) => {
+    const { content } = props;
+    // 递归渲染组件的函数
+    const renderContent = (item) => {
+        // 如果是字符串，直接返回
+        if (typeof item === 'string') {
+            return item;
+        }
+        const { component, props = {}, children } = item;
+        // 获取对应的组件
+        const Component = ComponentMap[component];
+        if (!Component) {
+            return _jsx(Alert, { type: 'error', title: `未找到组件: ${component}` });
+        }
+        // 处理子节点
+        let childrenContent;
+        if (children) {
+            if (Array.isArray(children)) {
+                childrenContent = children.map((child, index) => (_jsx(React.Fragment, { children: renderContent(child) }, index)));
+            }
+            else {
+                childrenContent = renderContent(children);
+            }
+        }
+        // 渲染组件，传递 props 和 children
+        return _jsx(Component, { ...props, children: childrenContent });
+    };
+    return (_jsx(_Fragment, { children: content.map((item, index) => (_jsx(React.Fragment, { children: renderContent(item) }, index))) }));
+};

package/dist/display/JsonView/index.d.ts

@@ -0,0 +1,3 @@
+import { ReactJsonViewProps } from 'react-json-view';
+export type JsonViewProps = ReactJsonViewProps;
+export declare const JsonView: (props: JsonViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/display/JsonView/index.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactJson from 'react-json-view';
+export const JsonView = (props) => {
+    const { style } = props;
+    return (_jsx(ReactJson, { enableClipboard: false, collapsed: true, displayObjectSize: false, displayDataTypes: false, ...props, style: { overflow: 'auto', ...style } }));
+};

package/dist/display/MarkdownView/index.d.ts

@@ -0,0 +1,7 @@
+import 'github-markdown-css/github-markdown-light.css';
+interface MarkdownViewProps {
+    content: string;
+    showToc?: boolean;
+}
+export declare const MarkdownView: (props: MarkdownViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/display/MarkdownView/index.js

@@ -0,0 +1,80 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import 'github-markdown-css/github-markdown-light.css';
+import { style } from './style';
+export const MarkdownView = (props) => {
+    const { content = '', showToc = true } = props;
+    // 提取标题生成目录
+    const tocItems = useMemo(() => {
+        if (!showToc) {
+            return [];
+        }
+        const lines = content.split('\n');
+        const items = [];
+        lines.forEach((line) => {
+            const match = line.match(/^(#{2,4})\s+(.+)$/);
+            if (match && match[1] && match[2]) {
+                const level = match[1].length;
+                const text = match[2].trim();
+                const id = text
+                    .toLowerCase()
+                    .replace(/[^\w\u4e00-\u9fa5\s-]/g, '') // 保留中文、英文、数字、空格和连字符
+                    .replace(/\s+/g, '-'); // 空格替换为连字符
+                items.push({ id, text, level });
+            }
+        });
+        return items;
+    }, [content, showToc]);
+    // 渲染目录
+    const renderToc = () => {
+        if (!showToc || tocItems.length === 0) {
+            return null;
+        }
+        return (_jsx("div", { className: 'markdown-toc-container', style: {
+                padding: '10px 20px 10px 0',
+                backgroundColor: '#f8f9fa',
+                borderLeft: '4px solid #1890ff',
+                borderRadius: '4px',
+                overflowY: 'auto',
+                height: '100%'
+            }, children: _jsx("ul", { style: { margin: 0, padding: 0 }, children: tocItems.map((item, index) => (_jsx("li", { style: {
+                        marginBottom: '4px',
+                        marginLeft: `${(item.level - 1) * 16}px`,
+                        listStyle: 'none',
+                        position: 'relative',
+                    }, children: _jsx("a", { href: `#${item.id}`, style: {
+                            textDecoration: 'none',
+                            color: '#1890ff',
+                            fontSize: item.level <= 2 ? '14px' : '13px',
+                            fontWeight: item.level === 1 ? 600 : 400,
+                        }, onClick: (e) => {
+                            e.preventDefault();
+                            const element = document.getElementById(item.id);
+                            if (element) {
+                                element.scrollIntoView({ behavior: 'smooth' });
+                            }
+                        }, children: item.text }) }, index))) }) }));
+    };
+    return (_jsxs("div", { style: { height: '100%' }, children: [_jsx("style", { children: style }), _jsxs("div", { className: 'markdown-body markdown-toc', style: { height: '100%', display: 'flex' }, children: [_jsx("div", { style: { marginRight: 14 }, children: renderToc() }), _jsx("div", { style: { overflow: 'auto', flex: 1 }, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [
+                                rehypeSlug,
+                                [rehypeAutolinkHeadings, {
+                                        behavior: 'wrap',
+                                        properties: {
+                                            className: ['anchor'],
+                                        },
+                                    }],
+                            ], components: {
+                                code(props) {
+                                    const { children, className } = props;
+                                    const match = /language-(\w+)/.exec(className || '');
+                                    return match ? (_jsx(SyntaxHighlighter, { PreTag: 'div', children: String(children).replace(/\n$/, ''), language: match[1], style: oneLight })) : (_jsx("code", { className: className, children: children }));
+                                },
+                            }, children: content }) })] })] }));
+};