@wzyjs/uis 0.3.8

package/src/components/JsonRenderer/index.tsx

@@ -0,0 +1,115 @@
+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,
+  'Tabs.TabPane': Tabs.TabPane,
+  Collapse,
+  'Collapse.Panel': Collapse.Panel,
+  Description: Descriptions,
+  Image,
+  List,
+  Popover,
+  Tooltip,
+  Card,
+  QRCode,
+  Segmented,
+  Table,
+  Tag,
+  Timeline,
+  Tree,
+  Alert,
+  Progress,
+}
+
+export interface Content {
+  component: keyof typeof ComponentMap // 对应 Ant Design 组件的枚举值
+  props?: Record<string, any>       // 对应组件的 props 配置
+  children?: Content[] | string     // 子节点，可递归嵌套，或直接是字符串
+}
+
+interface JsonRendererProps {
+  content: Content[]
+}
+
+export const JsonRenderer = (props: JsonRendererProps) => {
+  const { content } = props
+
+  // 递归渲染组件的函数
+  const renderContent = (item: Content | string) => {
+    // 如果是字符串，直接返回
+    if (typeof item === 'string') {
+      return item
+    }
+
+    const { component, props = {}, children } = item
+
+    // 获取对应的组件
+    const Component = ComponentMap[component] as React.ComponentType<any>
+
+    if (!Component) {
+      return <Alert type='error' message={`未找到组件: ${component}`} />
+    }
+
+    // 处理子节点
+    let childrenContent
+    if (children) {
+      if (Array.isArray(children)) {
+        childrenContent = children.map((child, index) => (
+          <React.Fragment key={index}>
+            {renderContent(child)}
+          </React.Fragment>
+        ))
+      } else {
+        childrenContent = renderContent(children)
+      }
+    }
+
+    // 渲染组件，传递 props 和 children
+    return <Component {...props}>{childrenContent}</Component>
+  }
+
+  return (
+    <>
+      {content.map((item, index) => (
+        <React.Fragment key={index}>
+          {renderContent(item)}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/src/components/JsonView/index.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import React from 'react'
+import ReactJson, { ReactJsonViewProps } from 'react-json-view'
+
+export type JsonViewProps = ReactJsonViewProps
+
+export const JsonView = (props: JsonViewProps) => {
+  const { style } = props
+
+  return (
+    <ReactJson
+      enableClipboard={false}
+      collapsed={true}
+      displayObjectSize={false}
+      displayDataTypes={false}
+      {...props}
+      style={{ overflow: 'auto', ...style }}
+    />
+  )
+}

package/src/components/Markdown/index.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+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'
+
+interface MarkdownProps {
+  content: string
+  showToc?: boolean // 是否显示目录
+}
+
+interface TocItem {
+  id: string
+  text: string
+  level: number
+}
+
+export const Markdown = (props: MarkdownProps) => {
+  const { content = '', showToc = true } = props
+
+  // 提取标题生成目录
+  const tocItems = useMemo(() => {
+    if (!showToc) {
+      return []
+    }
+
+    const lines = content.split('\n')
+    const items: TocItem[] = []
+
+    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 (
+      <div
+        className='markdown-toc-container'
+        style={{
+          padding: '10px 20px 10px 0',
+          backgroundColor: '#f8f9fa',
+          borderLeft: '4px solid #1890ff',
+          borderRadius: '4px',
+          overflowY: 'auto',
+          height: '100%'
+        }}
+      >
+        <ul style={{ margin: 0, padding: 0 }}>
+          {tocItems.map((item, index) => (
+            <li
+              key={index}
+              style={{
+                marginBottom: '4px',
+                marginLeft: `${(item.level - 1) * 16}px`,
+                listStyle: 'none',
+                position: 'relative',
+              }}
+            >
+              <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' })
+                  }
+                }}
+              >
+                {item.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ height: '100%' }}>
+      <style>{style}</style>
+      <div className='markdown-body markdown-toc' style={{ height: '100%', display: 'flex' }}>
+        <div style={{ marginRight: 14 }}>
+          {renderToc()}
+        </div>
+        <div style={{ overflow: 'auto', flex: 1 }}>
+          <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 ? (
+                  <SyntaxHighlighter
+                    PreTag='div'
+                    children={String(children).replace(/\n$/, '')}
+                    language={match[1]}
+                    style={oneLight}
+                  />
+                ) : (
+                  <code className={className}>
+                    {children}
+                  </code>
+                )
+              },
+            }}
+          >
+            {content}
+          </ReactMarkdown>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/Markdown/style.ts

@@ -0,0 +1,106 @@
+export const style = `
+  code {
+      color: #c7254e;
+      background-color: #f9f2f4;
+      border-radius: 4px;
+  }
+
+  /* 目录容器样式 */
+  .markdown-toc .markdown-body {
+    position: relative;
+  }
+
+  /* 锚点链接样式 */
+  .markdown-toc .anchor {
+    text-decoration: none !important;
+    color: inherit !important;
+    display: contents !important;
+  }
+
+  .markdown-toc .anchor:hover {
+    text-decoration: underline !important;
+  }
+
+  /* 标题悬浮效果 */
+  .markdown-toc h1:hover .anchor::after,
+  .markdown-toc h2:hover .anchor::after,
+  .markdown-toc h3:hover .anchor::after,
+  .markdown-toc h4:hover .anchor::after,
+  .markdown-toc h5:hover .anchor::after,
+  .markdown-toc h6:hover .anchor::after {
+    content: " 🔗";
+    opacity: 0.6;
+    font-size: 0.8em;
+  }
+
+  /* 目录标题样式 */
+  // .markdown-toc h2:first-of-type {
+  //   display: block !important;
+  //   color: #24292f !important;
+  //   font-size: 18px !important;
+  //   font-weight: 600 !important;
+  //   line-height: 1.4 !important;
+  //   border-bottom: 1px solid #d1d9e0 !important;
+  //   padding-bottom: 8px !important;
+  //   margin: 0 0 16px 0 !important;
+  // }
+
+  /* 目录专用样式 - 只对第一个h2下的列表生效 */
+  .markdown-toc h2:first-of-type + ul {
+    background: #f8f9fa !important;
+    border: 1px solid #e1e4e8 !important;
+    border-radius: 6px !important;
+    padding: 16px !important;
+    margin: 16px 0 24px 0 !important;
+    list-style: none !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li {
+    margin: 8px 0 !important;
+    padding-left: 0 !important;
+    list-style: none !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li::before {
+    content: "📖 " !important;
+    margin-right: 8px !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul {
+    margin: 4px 0 0 0 !important;
+    padding-left: 20px !important;
+    list-style: none !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul li {
+    margin: 4px 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul li::before {
+    content: "▸ " !important;
+    margin-right: 6px !important;
+    color: #666 !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul li ul {
+    padding-left: 16px !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul li ul li::before {
+    content: "◦ " !important;
+    color: #999 !important;
+  }
+
+  /* 目录链接样式 */
+  .markdown-toc h2:first-of-type + ul a {
+    color: #0969da !important;
+    text-decoration: none !important;
+    font-weight: 500 !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul a:hover {
+    text-decoration: underline !important;
+    color: #0550ae !important;
+  }
+`

package/src/components/MultiImageDisplay/index.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import React from 'react'
+import { Row, Col, Image } from 'antd'
+
+export const MultiImageDisplay = ({ images = [], preview = false }) => {
+  const renderImages = () => {
+    const count = images.length
+
+    if (count === 1) {
+      return (
+        <Image src={images[0]} preview={preview} style={{ width: '100%', height: 'auto' }} />
+      )
+    }
+
+    if (count === 2) {
+      return (
+        <Row gutter={8}>
+          {images.map((img, index) => (
+            <Col span={12} key={index}>
+              <Image src={img} preview={preview} style={{ width: '100%', height: 'auto' }} />
+            </Col>
+          ))}
+        </Row>
+      )
+    }
+
+    if (count === 3) {
+      return (
+        <div>
+          <Row gutter={8}>
+            {images.slice(0, 2).map((img, index) => (
+              <Col span={12} key={index}>
+                <Image src={img} preview={preview} style={{ width: '100%', height: 'auto' }} />
+              </Col>
+            ))}
+          </Row>
+          <Row gutter={8} style={{ marginTop: '8px' }}>
+            <Col span={24}>
+              <Image src={images[2]} preview={preview} style={{ width: '100%', height: 'auto' }} />
+            </Col>
+          </Row>
+        </div>
+      )
+    }
+
+    if (count >= 4) {
+      return (
+        <Row>
+          {images.map((img, index) => (
+            <Col span={12} key={index}>
+              <Image src={img} preview={preview} style={{ width: '100%', height: 'auto' }} />
+            </Col>
+          ))}
+        </Row>
+      )
+    }
+
+    return null
+  }
+
+  return <div>{renderImages()}</div>
+}

package/src/components/SectorButton/index.tsx

@@ -0,0 +1,247 @@
+'use client'
+
+import React, { useState } from 'react'
+
+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 const SectorButton = <T = string>(props: SectorButtonProps<T>) => {
+  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<T | null>(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: T) => {
+    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: SectorButtonSector<T>, originalIndex: number) => {
+    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 (
+    <div
+      className={`relative ${className}`}
+      style={{
+        width: shape === 'circle' ? size : rectWidth,
+        height: shape === 'circle' ? size : rectHeight,
+        borderRadius,
+        backgroundColor: 'transparent',
+      }}
+    >
+      <svg
+        width={svgWidth}
+        height={svgHeight}
+        viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+        style={{
+          position: 'absolute',
+          top: -padding,
+          left: -padding,
+        }}
+      >
+        <g>
+          {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 (
+              <g key={sector.id as string}>
+                <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)}
+                />
+              </g>
+            )
+          })}
+
+          {/* 在中间添加加号 */}
+          {showPlusSign && (
+            <g>
+              <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'
+              />
+              <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'
+              />
+            </g>
+          )}
+        </g>
+      </svg>
+    </div>
+  )
+}