@wzyjs/uis 0.3.10 → 0.3.16

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

@@ -0,0 +1,232 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import type { Edge, EdgeChange, Node, NodeChange } from '@xyflow/react'
+
+interface Snapshot<TNodeData extends Record<string, unknown>> {
+  nodes: Array<Node<TNodeData>>
+  edges: Edge[]
+}
+
+interface UseUndoRedoParams<TNodeData extends Record<string, unknown>> {
+  enabled?: boolean
+  nodes: Array<Node<TNodeData>>
+  edges: Edge[]
+  onNodesChange?: (changes: Array<NodeChange<Node<TNodeData>>>) => void
+  onEdgesChange?: (changes: Array<EdgeChange<Edge>>) => void
+}
+
+interface UseUndoRedoResult<TNodeData extends Record<string, unknown>> {
+  onNodesChange: (changes: Array<NodeChange<Node<TNodeData>>>) => void
+  onEdgesChange: (changes: Array<EdgeChange<Edge>>) => void
+}
+
+const clone = <T,>(value: T): T => {
+  const anyGlobal = globalThis as unknown as { structuredClone?: <V>(v: V) => V }
+  if (typeof anyGlobal.structuredClone === 'function') {
+    return anyGlobal.structuredClone(value)
+  }
+  return JSON.parse(JSON.stringify(value)) as T
+}
+
+const isEditableTarget = (target: EventTarget | null): boolean => {
+  const el = target as HTMLElement | null
+  if (!el) {
+    return false
+  }
+  const tag = el.tagName?.toLowerCase()
+  if (tag === 'input' || tag === 'textarea') {
+    return true
+  }
+  return el.isContentEditable
+}
+
+const buildNodeChanges = <TNodeData extends Record<string, unknown>,>(
+  current: Array<Node<TNodeData>>,
+  next: Array<Node<TNodeData>>,
+): Array<NodeChange<Node<TNodeData>>> => {
+  const currentById = new Map(current.map(n => [n.id, n]))
+  const nextById = new Map(next.map(n => [n.id, n]))
+
+  const changes: Array<NodeChange<Node<TNodeData>>> = []
+  current.forEach(node => {
+    if (!nextById.has(node.id)) {
+      changes.push({ type: 'remove', id: node.id })
+    }
+  })
+  next.forEach(node => {
+    if (!currentById.has(node.id)) {
+      changes.push({ type: 'add', item: clone(node) })
+      return
+    }
+    changes.push({ type: 'replace', id: node.id, item: clone(node) })
+  })
+  return changes
+}
+
+const buildEdgeChanges = (current: Edge[], next: Edge[]): Array<EdgeChange<Edge>> => {
+  const currentById = new Map(current.map(e => [e.id, e]))
+  const nextById = new Map(next.map(e => [e.id, e]))
+
+  const changes: Array<EdgeChange<Edge>> = []
+  current.forEach(edge => {
+    if (!nextById.has(edge.id)) {
+      changes.push({ type: 'remove', id: edge.id })
+    }
+  })
+  next.forEach(edge => {
+    if (!currentById.has(edge.id)) {
+      changes.push({ type: 'add', item: clone(edge) })
+      return
+    }
+    changes.push({ type: 'replace', id: edge.id, item: clone(edge) })
+  })
+  return changes
+}
+
+export const useUndoRedo = <TNodeData extends Record<string, unknown>,>(
+  params: UseUndoRedoParams<TNodeData>,
+): UseUndoRedoResult<TNodeData> => {
+  const { enabled = true, nodes, edges, onNodesChange, onEdgesChange } = params
+
+  const snapshot = useMemo((): Snapshot<TNodeData> => {
+    return { nodes: clone(nodes), edges: clone(edges) }
+  }, [edges, nodes])
+
+  const pastRef = useRef<Array<Snapshot<TNodeData>>>([])
+  const futureRef = useRef<Array<Snapshot<TNodeData>>>([])
+  const applyingRef = useRef<boolean>(false)
+  const commitNextRef = useRef<boolean>(false)
+
+  useEffect(() => {
+    if (!enabled) {
+      pastRef.current = []
+      futureRef.current = []
+      return
+    }
+    if (pastRef.current.length === 0) {
+      pastRef.current = [snapshot]
+      futureRef.current = []
+      return
+    }
+    if (applyingRef.current) {
+      return
+    }
+    if (!commitNextRef.current) {
+      return
+    }
+    commitNextRef.current = false
+    pastRef.current = [...pastRef.current, snapshot]
+    futureRef.current = []
+  }, [enabled, snapshot])
+
+  const applySnapshot = useCallback((next: Snapshot<TNodeData>): void => {
+    applyingRef.current = true
+    commitNextRef.current = false
+
+    const nodeChanges = onNodesChange ? buildNodeChanges(nodes, next.nodes) : []
+    const edgeChanges = onEdgesChange ? buildEdgeChanges(edges, next.edges) : []
+
+    if (nodeChanges.length > 0) {
+      onNodesChange?.(nodeChanges)
+    }
+    if (edgeChanges.length > 0) {
+      onEdgesChange?.(edgeChanges)
+    }
+
+    queueMicrotask(() => {
+      applyingRef.current = false
+    })
+  }, [edges, nodes, onEdgesChange, onNodesChange])
+
+  const undo = useCallback((): void => {
+    const past = pastRef.current
+    const current = past.at(-1)
+    const prev = past.at(-2)
+    if (!current || !prev) {
+      return
+    }
+
+    pastRef.current = past.slice(0, -1)
+    futureRef.current = [current, ...futureRef.current]
+    applySnapshot(prev)
+  }, [applySnapshot])
+
+  const redo = useCallback((): void => {
+    const next = futureRef.current.at(0)
+    if (!next) {
+      return
+    }
+
+    futureRef.current = futureRef.current.slice(1)
+    pastRef.current = [...pastRef.current, next]
+    applySnapshot(next)
+  }, [applySnapshot])
+
+  const onNodesChangeWrapped = useCallback((changes: Array<NodeChange<Node<TNodeData>>>): void => {
+    onNodesChange?.(changes)
+    if (!enabled) {
+      return
+    }
+    const shouldCommit = changes.some(change => {
+      if (change.type === 'position') {
+        return change.dragging !== true
+      }
+      return change.type === 'add' || change.type === 'remove'
+    })
+    if (shouldCommit) {
+      commitNextRef.current = true
+    }
+  }, [enabled, onNodesChange])
+
+  const onEdgesChangeWrapped = useCallback((changes: Array<EdgeChange<Edge>>): void => {
+    onEdgesChange?.(changes)
+    if (!enabled) {
+      return
+    }
+    const shouldCommit = changes.some(change => {
+      return change.type === 'add' || change.type === 'remove'
+    })
+    if (shouldCommit) {
+      commitNextRef.current = true
+    }
+  }, [enabled, onEdgesChange])
+
+  useEffect(() => {
+    if (!enabled) {
+      return
+    }
+
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (isEditableTarget(event.target)) {
+        return
+      }
+
+      const isMac = /Mac|iPhone|iPad|iPod/.test(navigator.platform)
+      const mod = isMac ? event.metaKey : event.ctrlKey
+      if (!mod) {
+        return
+      }
+      if (event.key.toLowerCase() !== 'z') {
+        return
+      }
+
+      event.preventDefault()
+      if (event.shiftKey) {
+        redo()
+        return
+      }
+      undo()
+    }
+
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [enabled, redo, undo])
+
+  return {
+    onNodesChange: onNodesChangeWrapped,
+    onEdgesChange: onEdgesChangeWrapped,
+  }
+}

package/src/components/MindMap/index.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import type { ReactElement } from 'react'
+
+import { ReactFlow, type Edge, type EdgeChange, type EdgeTypes, type Node, type NodeChange, type NodeTypes } from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+
+import { useAlignmentSnap } from './hooks/useAlignmentSnap'
+import { useMoveDescendants } from './hooks/useMoveDescendants'
+import { useDropToReparent } from './hooks/useDropToReparent'
+import { useCopyPaste } from './hooks/useCopyPaste'
+import { useUndoRedo } from './hooks/useUndoRedo'
+import { useExpandCollapse } from './hooks/useExpandCollapse'
+import { MindMapDndProvider, useMindMapDndState } from './context'
+
+export interface MindMapNodeData extends Record<string, unknown> {
+  label: string
+}
+
+export { useMindMapDndState, useExpandCollapse }
+
+interface MindMapProps {
+  className?: string
+  enableSnap?: boolean // 是否开启对齐线与自动吸附
+  moveDescendants?: boolean // 是否拖动父节点时联动后代节点一起移动
+  enableDropToNode?: boolean // 是否允许拖拽到节点上建立父子关系
+  enableCopyPaste?: boolean // 是否开启复制粘贴
+  enableUndoRedo?: boolean // 是否开启撤销重做
+  dropHighlightClassName?: string // 可放下时的高亮样式
+  canDropOnNode?: (params: { draggingNode: Node<MindMapNodeData>, targetNode: Node<MindMapNodeData> }) => boolean // 外部控制是否可放下
+  nodeTypes?: NodeTypes
+  edgeTypes?: EdgeTypes
+  nodes: Array<Node<MindMapNodeData>>
+  edges?: Edge[]
+  onNodesChange?: (changes: Array<NodeChange<Node<MindMapNodeData>>>) => void
+  onEdgesChange?: (changes: Array<EdgeChange<Edge>>) => void
+}
+
+export const MindMap = (props: MindMapProps): ReactElement => {
+  const {
+    nodes,
+    edges = [],
+    onNodesChange,
+    onEdgesChange,
+    enableSnap = false,
+    moveDescendants = true,
+    enableDropToNode = true,
+    enableCopyPaste = true,
+    enableUndoRedo = true,
+    dropHighlightClassName,
+    canDropOnNode,
+    nodeTypes,
+    edgeTypes,
+    className = 'w-full h-full',
+  } = props
+
+  // 先把“联动后代移动”合并进节点变更回调，后续其它能力（如吸附）再基于它叠加
+  const { onNodesChange: onNodesChangeWithDescendants } = useMoveDescendants<MindMapNodeData>({
+    enabled: moveDescendants,
+    nodes,
+    edges,
+    onNodesChange,
+  })
+
+  // 在节点变更回调上叠加对齐线与吸附逻辑，并由 hook 直接给出对齐线元素
+  const { helperLines, onMove, onNodesChange: onNodesChangeWithSnap } = useAlignmentSnap<MindMapNodeData>({
+    enabled: enableSnap,
+    nodes,
+    onNodesChange: onNodesChangeWithDescendants,
+  })
+
+  const { onNodesChange: onNodesChangeWithUndoRedo, onEdgesChange: onEdgesChangeWithUndoRedo } = useUndoRedo<MindMapNodeData>({
+    enabled: enableUndoRedo,
+    nodes,
+    edges,
+    onNodesChange: onNodesChangeWithSnap,
+    onEdgesChange,
+  })
+
+  const { onNodeDrag, onNodeDragStop, draggingNodeId, dropTargetNodeId } = useDropToReparent<MindMapNodeData>({
+    enabled: enableDropToNode,
+    nodes,
+    edges,
+    dropHighlightClassName,
+    canDropOnNode,
+    onNodesChange: onNodesChangeWithUndoRedo,
+    onEdgesChange: onEdgesChangeWithUndoRedo,
+  })
+
+  useCopyPaste<MindMapNodeData>({
+    enabled: enableCopyPaste,
+    nodes,
+    edges,
+    onNodesChange: onNodesChangeWithUndoRedo,
+    onEdgesChange: onEdgesChangeWithUndoRedo,
+  })
+
+  return (
+    <MindMapDndProvider value={{ draggingNodeId, dropTargetNodeId }}>
+      <div className={`relative ${className}`}>
+        <ReactFlow
+          fitView
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          onNodesChange={onNodesChangeWithUndoRedo}
+          onEdgesChange={onEdgesChangeWithUndoRedo}
+          onMove={enableSnap ? onMove : undefined}
+          onNodeDrag={onNodeDrag}
+          onNodeDragStop={onNodeDragStop}
+        />
+        {helperLines}
+      </div>
+    </MindMapDndProvider>
+  )
+}

package/src/components/ProgressButton/index.module.scss

@@ -0,0 +1,65 @@
+.progressButton {
+  @keyframes 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 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);
+    }
+  }
+
+  .animate-complete {
+    animation: complete 0.6s cubic-bezier(0, 0, 1, 1);
+  }
+
+  .animate-counter-rotate {
+    animation: counter-rotate 0.6s cubic-bezier(0, 0, 1, 1);
+  }
+
+  .perspective {
+    perspective: 1000px;
+  }
+}

package/src/components/ProgressButton/index.tsx

@@ -0,0 +1,96 @@
+import { type ReactNode } from 'react'
+import styles from './index.module.scss'
+
+interface ProgressButtonProps {
+  colors?: { bg: string, ring: string }
+  showRing?: boolean
+  progress?: number
+  padding?: number
+  size?: number
+  strokeWidth?: number
+  children?: ReactNode
+  className?: string
+}
+
+export const ProgressButton = (props: ProgressButtonProps) => {
+  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 (
+    <div className={styles.progressButton}>
+      <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}`}
+      >
+        {showRing && (
+          <>
+            <svg
+              className='absolute inset-0 w-full h-full'
+              viewBox={`0 0 ${size} ${size}`}
+            >
+              <circle
+                cx={size / 2}
+                cy={size / 2}
+                r={radius}
+                fill='none'
+                stroke='currentColor'
+                strokeWidth={strokeWidth}
+                className='opacity-30'
+              />
+            </svg>
+
+            <svg
+              className='absolute inset-0 w-full h-full -rotate-90'
+              viewBox={`0 0 ${size} ${size}`}
+            >
+              <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'
+              />
+            </svg>
+          </>
+        )}
+
+        <div
+          className={`
+            relative z-10 text-white text-xs text-center whitespace-pre select-none
+            ${className ? 'animate-counter-rotate' : ''}
+          `}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/TimelineBar/components/CurrentWeekHighlight/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import type { ReactElement } from 'react'
+
+import { dayjs } from '@/utils'
+import { HEIGHT } from '../../const'
+import { useHighlightRange } from '../../hooks'
+
+interface CurrentWeekHighlightProps {
+  originTime: number
+  timePxPerDay: number
+}
+
+export const CurrentWeekHighlight = (props: CurrentWeekHighlightProps): ReactElement | null => {
+  const { originTime, timePxPerDay } = props
+
+  const today = dayjs().startOf('day')
+
+  const weekStart = today.startOf('week').startOf('day')
+  const weekEnd = weekStart.add(1, 'week')
+
+  const currentWeekHighlight = useHighlightRange({
+    originTime,
+    timePxPerDay,
+    startTime: weekStart.valueOf(),
+    endTime: weekEnd.valueOf(),
+  })
+
+  const monthStart = today.startOf('month').startOf('day')
+  const monthEnd = monthStart.add(1, 'month')
+
+  const currentMonthHighlight = useHighlightRange({
+    originTime,
+    timePxPerDay,
+    startTime: monthStart.valueOf(),
+    endTime: monthEnd.valueOf(),
+  })
+
+  return (
+    <>
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: currentMonthHighlight.left,
+          width: currentMonthHighlight.width,
+          height: HEIGHT,
+          background: 'linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.04))',
+          pointerEvents: 'none',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: currentWeekHighlight.left,
+          width: currentWeekHighlight.width,
+          height: HEIGHT,
+          background: 'linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05))',
+          pointerEvents: 'none',
+        }}
+      />
+    </>
+  )
+}

package/src/components/TimelineBar/components/Guides/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import type { CSSProperties, ReactElement } from 'react'
+
+import { HEIGHT } from '../../const'
+import { useMonthGuides, useWeekGuides } from '../../hooks'
+
+interface MonthGuidesProps {
+  originTime: number
+  visibleDates: Date[]
+  timePxPerDay: number
+}
+
+const baseStyles: CSSProperties = {
+  position: 'absolute',
+  pointerEvents: 'none',
+  width: 1,
+  background: '#cbd5e1',
+}
+
+export const Guides = (props: MonthGuidesProps): ReactElement => {
+  const { originTime, visibleDates, timePxPerDay } = props
+
+  const monthGuides = useMonthGuides({
+    originTime,
+    visibleDates,
+    timePxPerDay,
+  })
+
+  const weekGuides = useWeekGuides({
+    originTime,
+    visibleDates,
+    timePxPerDay,
+  })
+
+  return (
+    <>
+      {weekGuides.map(week => (
+        <div
+          key={`week-line-${week.key}`}
+          style={{
+            ...baseStyles,
+            bottom: 0,
+            height: 20,
+            left: week.offset,
+          }}
+        />
+      ))}
+      {monthGuides.map(month => (
+        <div
+          key={`month-line-${month.key}`}
+          style={{
+            ...baseStyles,
+            top: 0,
+            height: HEIGHT / 1.75,
+            left: month.offset,
+          }}
+        />
+      ))}
+    </>
+  )
+}

package/src/components/TimelineBar/components/Ticks/index.tsx

@@ -0,0 +1,56 @@
+import React, { type ReactElement, useMemo } from 'react'
+
+import { dayjs } from '@/utils'
+import { WEEKDAY_LABELS } from '../../const'
+import { calcOffsetByTime } from '../../utils'
+
+interface TicksProps {
+  originTime: number
+  timePxPerDay: number
+  visibleDates: Date[]
+}
+
+export const Ticks = (props: TicksProps): ReactElement => {
+  const { visibleDates, timePxPerDay, originTime } = props
+
+  const ticks = useMemo(() => {
+    return visibleDates.map(value => {
+      const d = dayjs(value)
+      const time = d.valueOf()
+
+      return {
+        time,
+        monthLabel: d.date() === 15 ? d.format('YYYY-M') : '',
+        weekLabel: WEEKDAY_LABELS[d.day()],
+        dayLabel: d.format('DD'),
+        offset: calcOffsetByTime({ originTime, time, timePxPerDay })
+      }
+    })
+  }, [visibleDates])
+
+  return (
+    <>
+      {ticks.map(tick => (
+          <div key={tick.time}>
+            <div
+              className="absolute text-center pt-[2] pb-[4] top-0 h-full text-[11px] leading-[12px] text-slate-600 whitespace-nowrap pointer-events-none"
+              style={{ left: tick.offset, width: timePxPerDay }}
+            >
+              <div className="flex h-full flex-col">
+                <div className="flex-1 text-[10px] text-slate-500">
+                  {tick.monthLabel || ''}
+                </div>
+                <div className="flex-1 text-[11px] text-slate-600">
+                  {tick.dayLabel}
+                </div>
+                <div className={'flex-1 text-[10px] text-slate-500'}>
+                  {tick.weekLabel}
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      )}
+    </>
+  )
+}