@wzyjs/uis 0.3.28 → 0.3.30

package/src/components/SectorButton/index.tsx

@@ -1,247 +0,0 @@
-'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>
-  )
-}

package/src/components/TextInput/index.tsx

@@ -1,61 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-
-import { Input } from 'antd'
-import { useBoolean } from '@wzyjs/hooks/web'
-
-interface TextInputProps {
-  value: string
-  onChange?: (value: string) => void
-}
-
-export const TextInput = (props: TextInputProps) => {
-  const { value, onChange } = props
-
-  const [text, setText] = useState(value)
-
-  const [isEditing, { setTrue, setFalse }] = useBoolean(false)
-
-  const onSubmit = () => {
-    if (!text.trim()) {
-      return
-    }
-
-    if (text === value) {
-      setFalse()
-      return
-    }
-
-    onChange?.(text.trim())
-    setFalse()
-  }
-
-  const onBlur = () => {
-    onSubmit()
-  }
-
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      onSubmit()
-    }
-  }
-
-  return (
-    <div onDoubleClick={setTrue}>
-      {!isEditing ? (
-        <span>{text}</span>
-      ) : (
-        <Input
-          value={text}
-          onChange={ev => setText(ev.target.value)}
-          onBlur={onBlur}
-          onKeyDown={onKeyDown}
-          autoFocus
-          size='small'
-          style={{ width: 200 }}
-        />
-      )}
-    </div>
-  )
-}

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

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

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

@@ -1,56 +0,0 @@
-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>
-        )
-      )}
-    </>
-  )
-}

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

@@ -1,54 +0,0 @@
-import React from 'react'
-import type { ReactElement } from 'react'
-
-import { dayjs } from '@/utils'
-import { calcOffsetByTime } from '../../utils'
-
-interface TodayIndicatorProps {
-  originTime: number
-  timePxPerDay: number
-}
-
-export const TodayIndicator = (props: TodayIndicatorProps): ReactElement | null => {
-  const { originTime, timePxPerDay } = props
-
-  const offset = calcOffsetByTime({
-    originTime,
-    timePxPerDay,
-    time: dayjs().startOf('day').valueOf(),
-  })
-
-  return (
-    <>
-      <div
-        style={{
-          position: 'absolute',
-          top: 1,
-          left: offset + (timePxPerDay - 30) / 2,
-          width: 30,
-          fontSize: 8,
-          lineHeight: '12px',
-          textAlign: 'center',
-          borderRadius: 999,
-          background: '#0ea5e9',
-          color: '#fff',
-          whiteSpace: 'nowrap',
-          pointerEvents: 'none',
-        }}
-      >
-        今天
-      </div>
-      <div
-        style={{
-          position: 'absolute',
-          left: offset + (timePxPerDay - 7) / 2,
-          bottom: 0,
-          borderLeft: '4px solid transparent',
-          borderRight: '4px solid transparent',
-          borderBottom: '7px solid #0ea5e9',
-          pointerEvents: 'none',
-        }}
-      />
-    </>
-  )
-}

package/src/components/TimelineBar/components/index.ts

@@ -1,4 +0,0 @@
-export * from './Ticks'
-export * from './Guides'
-export * from './TodayIndicator'
-export * from './CurrentWeekHighlight'

package/src/components/TimelineBar/const.ts

@@ -1,3 +0,0 @@
-export const HEIGHT = 50
-export const ONE_DAY_MS = 24 * 60 * 60 * 1000
-export const WEEKDAY_LABELS = ['日', '一', '二', '三', '四', '五', '六']

package/src/components/TimelineBar/hooks/index.ts

@@ -1,5 +0,0 @@
-export * from './useTickValues'
-export * from './useVisibleRange'
-export * from './useMonthGuides'
-export * from './useWeekGuides'
-export * from './useHighlightRange'

package/src/components/TimelineBar/hooks/useHighlightRange.ts

@@ -1,21 +0,0 @@
-import { calcOffsetByTime } from '../utils'
-
-interface HighlightRangeOption {
-  originTime: number
-  startTime: number
-  endTime: number
-  timePxPerDay: number
-}
-
-export const useHighlightRange = (option: HighlightRangeOption) => {
-  const { originTime, startTime, endTime, timePxPerDay } = option
-
-  const start = calcOffsetByTime({ originTime, time: startTime, timePxPerDay })
-  const end = calcOffsetByTime({ originTime, time: endTime, timePxPerDay })
-
-  const safeLeft = start
-  const safeRight = Math.max(safeLeft, end)
-  const safeWidth = Math.max(0, safeRight - safeLeft)
-
-  return { left: safeLeft, width: safeWidth }
-}

package/src/components/TimelineBar/hooks/useMonthGuides.ts

@@ -1,40 +0,0 @@
-import { dayjs } from '@/utils'
-import { calcOffsetByTime } from '../utils'
-
-interface GuideLine {
-  key: string
-  offset: number
-}
-
-interface MonthGuidesOption {
-  originTime: number
-  visibleDates: Date[]
-  timePxPerDay: number
-}
-
-export const useMonthGuides = (option: MonthGuidesOption): GuideLine[] => {
-  const { originTime, visibleDates, timePxPerDay } = option
-
-  if (!visibleDates.length) {
-    return []
-  }
-
-  const result: GuideLine[] = []
-
-  for (const date of visibleDates) {
-    const d = dayjs(date)
-    if (d.date() !== 1) {
-      continue
-    }
-
-    const time: number = d.startOf('month').startOf('day').valueOf()
-    const offset = calcOffsetByTime({ originTime, time, timePxPerDay })
-
-    result.push({
-      key: `${d.format('YYYY-MM')}-start`,
-      offset,
-    })
-  }
-
-  return result
-}

package/src/components/TimelineBar/hooks/useTickValues.ts

@@ -1,18 +0,0 @@
-import { dayjs } from '@/utils'
-
-interface TickValuesOption {
-  visibleStart: number
-  visibleEnd: number
-}
-
-export const useTickValues = (option: TickValuesOption) => {
-  const { visibleStart, visibleEnd } = option
-
-  const start = dayjs(visibleStart).startOf('day')
-  const end = dayjs(visibleEnd).endOf('day')
-  const days = end.diff(start, 'day') + 1
-
-  return Array.from({ length: days }).map((_, i: number) => (
-    start.add(i, 'day').toDate()
-  ))
-}

package/src/components/TimelineBar/hooks/useVisibleRange.ts

@@ -1,43 +0,0 @@
-import { useTickValues } from '../hooks'
-import { calcTimeByScreenOffset } from '.././utils'
-
-interface VisibleRangeOption {
-  x: number
-  originTime: number
-  containerWidth: number
-  timePxPerDay: number
-  minTime?: number
-  maxTime?: number
-}
-
-export const useVisibleRange = (option: VisibleRangeOption) => {
-  const { x, originTime, containerWidth, timePxPerDay, minTime, maxTime } = option
-
-  const lower: number = typeof minTime === 'number' ? minTime : Number.NEGATIVE_INFINITY
-  const upper: number = typeof maxTime === 'number' ? maxTime : Number.POSITIVE_INFINITY
-  const safeLower: number = Math.min(lower, upper)
-  const safeUpper: number = Math.max(lower, upper)
-
-  const rawVisibleStart: number = calcTimeByScreenOffset({ screenOffset: 0, x, originTime, timePxPerDay })
-  const rawVisibleEnd: number = calcTimeByScreenOffset({ screenOffset: containerWidth, x, originTime, timePxPerDay })
-
-  const visibleStart: number = Math.min(
-    safeUpper,
-    Math.max(safeLower, Math.min(rawVisibleStart, rawVisibleEnd)),
-  )
-  const visibleEnd: number = Math.max(
-    visibleStart,
-    Math.min(safeUpper, Math.max(safeLower, Math.max(rawVisibleStart, rawVisibleEnd))),
-  )
-
-  const visibleDates = useTickValues({
-    visibleStart,
-    visibleEnd,
-  })
-
-  return {
-    visibleStart,
-    visibleEnd,
-    visibleDates,
-  }
-}