@wzyjs/uis 0.3.29 → 0.3.31

package/src/components/JsonRenderer/index.tsx

@@ -1,114 +0,0 @@
-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 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

@@ -1,21 +0,0 @@
-'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

@@ -1,152 +0,0 @@
-'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/MindMap/context.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import { createContext, useContext, type ReactNode } from 'react'
-
-export interface MindMapDndState {
-  draggingNodeId: string | null
-  dropTargetNodeId: string | null
-}
-
-const MindMapDndContext = createContext<MindMapDndState | null>(null)
-
-interface MindMapDndProviderProps {
-  value: MindMapDndState
-  children: ReactNode
-}
-
-export const MindMapDndProvider = (props: MindMapDndProviderProps) => {
-  const { value, children } = props
-  return (
-    <MindMapDndContext.Provider value={value}>
-      {children}
-    </MindMapDndContext.Provider>
-  )
-}
-
-export const useMindMapDndState = (): MindMapDndState => {
-  const value = useContext(MindMapDndContext)
-  return value ?? { draggingNodeId: null, dropTargetNodeId: null }
-}

package/src/components/MindMap/hooks/useAlignmentSnap.ts

@@ -1,220 +0,0 @@
-'use client'
-
-import { Fragment, createElement, useCallback, useMemo, useState, type ReactElement } from 'react'
-
-import type { NodeChange, Node, Viewport } from '@xyflow/react'
-
-interface HelperLines {
-  x: number | null
-  y: number | null
-}
-
-interface UseAlignmentSnapParams<TNodeData extends Record<string, unknown>> {
-  // 开关：关闭时只透传回调，不做任何吸附与对齐线计算
-  enabled?: boolean
-  // 当前节点列表（用于计算对齐点）
-  nodes: Array<Node<TNodeData>>
-  // 透传给 ReactFlow 的 onNodesChange（通常来自 useNodesState）
-  onNodesChange?: (changes: Array<NodeChange<Node<TNodeData>>>) => void
-  // 吸附阈值（单位：画布坐标 px）
-  snapThreshold?: number
-}
-
-interface UseAlignmentSnapResult<TNodeData extends Record<string, unknown>> {
-  // hook 直接产出的对齐线元素，主组件可直接渲染
-  helperLines: ReactElement | null
-  // 用于同步 viewport，保证对齐线在屏幕坐标下位置正确
-  onMove: (_event: unknown, viewport: Viewport) => void
-  // 包装后的 onNodesChange：在 position change 上做吸附与对齐线更新
-  onNodesChange: (changes: Array<NodeChange<Node<TNodeData>>>) => void
-}
-
-const getNodeSize = <TNodeData extends Record<string, unknown>,>(node: Node<TNodeData>): { width: number, height: number } => {
-  const width = node.measured?.width ?? node.width ?? 0
-  const height = node.measured?.height ?? node.height ?? 0
-  return { width, height }
-}
-
-export const useAlignmentSnap = <TNodeData extends Record<string, unknown>,>(params: UseAlignmentSnapParams<TNodeData>): UseAlignmentSnapResult<TNodeData> => {
-  const { enabled = false, nodes, onNodesChange: onNodesChangeExternal, snapThreshold = 6 } = params
-
-  const [viewport, setViewport] = useState<Viewport>({ x: 0, y: 0, zoom: 1 })
-  // 保存对齐线在画布坐标下的位置（未做 viewport 变换）
-  const [helperLines, setHelperLines] = useState<HelperLines>({ x: null, y: null })
-
-  const onMove = useCallback((_event: unknown, nextViewport: Viewport): void => {
-    setViewport(nextViewport)
-  }, [])
-
-  const onNodesChange = useCallback((changes: Array<NodeChange<Node<TNodeData>>>): void => {
-    if (!onNodesChangeExternal) {
-      return
-    }
-
-    if (!enabled) {
-      setHelperLines({ x: null, y: null })
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    // 只在 position change 上参与吸附，避免对 selection 等变更产生副作用
-    const positionChange = changes.find(change => change.type === 'position')
-    if (positionChange?.type !== 'position' || !positionChange.position) {
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    const dragging = positionChange.dragging === true
-    if (!dragging) {
-      setHelperLines({ x: null, y: null })
-    }
-
-    const baseNode = nodes.find(item => item.id === positionChange.id)
-    if (!baseNode) {
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    const selfSize = getNodeSize(baseNode)
-    if (!selfSize.width || !selfSize.height) {
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    // 以“边/中/边”作为候选锚点，计算与其他节点锚点的最小距离
-    const selfX = positionChange.position.x
-    const selfY = positionChange.position.y
-    const selfXAnchors: Array<{ point: number, shift: number }> = [
-      { point: selfX, shift: 0 },
-      { point: selfX + selfSize.width / 2, shift: selfSize.width / 2 },
-      { point: selfX + selfSize.width, shift: selfSize.width },
-    ]
-    const selfYAnchors: Array<{ point: number, shift: number }> = [
-      { point: selfY, shift: 0 },
-      { point: selfY + selfSize.height / 2, shift: selfSize.height / 2 },
-      { point: selfY + selfSize.height, shift: selfSize.height },
-    ]
-
-    let bestXDiff: number = Number.POSITIVE_INFINITY
-    let bestYDiff: number = Number.POSITIVE_INFINITY
-    let bestXLine: number | null = null
-    let bestYLine: number | null = null
-    let bestXOffset: number = 0
-    let bestYOffset: number = 0
-
-    nodes.forEach(other => {
-      if (other.id === positionChange.id) {
-        return
-      }
-      const otherSize = getNodeSize(other)
-      if (!otherSize.width || !otherSize.height) {
-        return
-      }
-
-      const otherX = other.position.x
-      const otherY = other.position.y
-      const otherXAnchors: Array<number> = [otherX, otherX + otherSize.width / 2, otherX + otherSize.width]
-      const otherYAnchors: Array<number> = [otherY, otherY + otherSize.height / 2, otherY + otherSize.height]
-
-      for (const selfAnchor of selfXAnchors) {
-        for (const otherAnchor of otherXAnchors) {
-          const diffX = Math.abs(selfAnchor.point - otherAnchor)
-          if (diffX <= snapThreshold && diffX < bestXDiff) {
-            bestXDiff = diffX
-            bestXLine = otherAnchor
-            bestXOffset = otherAnchor - selfAnchor.point
-          }
-        }
-      }
-
-      for (const selfAnchor of selfYAnchors) {
-        for (const otherAnchor of otherYAnchors) {
-          const diffY = Math.abs(selfAnchor.point - otherAnchor)
-          if (diffY <= snapThreshold && diffY < bestYDiff) {
-            bestYDiff = diffY
-            bestYLine = otherAnchor
-            bestYOffset = otherAnchor - selfAnchor.point
-          }
-        }
-      }
-    })
-
-    if (dragging) {
-      setHelperLines({ x: bestXLine, y: bestYLine })
-    }
-
-    // 没命中阈值则完全透传，避免抖动
-    if (bestXLine === null && bestYLine === null) {
-      onNodesChangeExternal(changes)
-      return
-    }
-
-    const nextX = bestXLine === null ? selfX : selfX + bestXOffset
-    const nextY = bestYLine === null ? selfY : selfY + bestYOffset
-
-    // 通过“改写 position change”的方式实现吸附，避免与外部受控状态冲突
-    const nextChanges: Array<NodeChange<Node<TNodeData>>> = changes.map(change => {
-      if (change.type !== 'position' || change.id !== positionChange.id || !change.position) {
-        return change
-      }
-      if (change.position.x === nextX && change.position.y === nextY) {
-        return change
-      }
-      return {
-        ...change,
-        position: { x: nextX, y: nextY },
-      }
-    })
-
-    onNodesChangeExternal(nextChanges)
-  }, [enabled, nodes, onNodesChangeExternal, snapThreshold])
-
-  // 将画布坐标转换为屏幕坐标，用于 absolute 定位对齐线
-  const helperLineX = useMemo((): number | null => {
-    if (helperLines.x === null) {
-      return null
-    }
-    return helperLines.x * viewport.zoom + viewport.x
-  }, [helperLines.x, viewport.x, viewport.zoom])
-
-  const helperLineY = useMemo((): number | null => {
-    if (helperLines.y === null) {
-      return null
-    }
-    return helperLines.y * viewport.zoom + viewport.y
-  }, [helperLines.y, viewport.y, viewport.zoom])
-
-  const helperLinesElement = useMemo((): ReactElement | null => {
-    if (!enabled) {
-      return null
-    }
-
-    const elements: ReactElement[] = []
-    if (helperLineX !== null) {
-      elements.push(createElement('div', {
-        key: 'helper-line-x',
-        className: 'pointer-events-none absolute top-0 h-full w-px bg-sky-500',
-        style: { left: helperLineX },
-      }))
-    }
-    if (helperLineY !== null) {
-      elements.push(createElement('div', {
-        key: 'helper-line-y',
-        className: 'pointer-events-none absolute left-0 w-full h-px bg-sky-500',
-        style: { top: helperLineY },
-      }))
-    }
-
-    if (elements.length === 0) {
-      return null
-    }
-
-    return createElement(Fragment, null, ...elements)
-  }, [enabled, helperLineX, helperLineY])
-
-  return {
-    helperLines: helperLinesElement,
-    onMove,
-    onNodesChange,
-  }
-}