@wzyjs/uis 0.3.29 → 0.3.30

package/src/antd/form/UploadImage/index.tsx

@@ -1,338 +0,0 @@
-'use client'
-
-import React, { useEffect, useRef, useState } from 'react'
-import { Alert, Button, Modal, Popover, Space, Typography } from 'antd'
-import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
-
-interface UploadImageProps {
-  value?: string[];
-  onChange?: (value: string[]) => void;
-  maxImages?: number;
-  enablePreview?: boolean;
-  enableDragDrop?: boolean;
-  enableFileSelect?: boolean;
-  enablePaste?: boolean;
-  enablePasteTip?: boolean;
-}
-
-export const UploadImage = (props: UploadImageProps) => {
-  const {
-    value = [],
-    onChange,
-    maxImages = 10,
-    enablePreview = false,
-    enableDragDrop = false,
-    enableFileSelect = false,
-    enablePaste = true,
-    enablePasteTip = false,
-  } = props
-
-  const [isDragging, setIsDragging] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (!enablePaste) return
-
-    const handlePaste = (event: ClipboardEvent) => {
-      if (event.clipboardData && event.clipboardData.items) {
-        const items = event.clipboardData.items
-        for (let i = 0; i < items.length; i++) {
-          const item = items[i]
-          if (item && item.type.indexOf('image') !== -1) {
-            const file = item.getAsFile()
-            if (file) {
-              convertToBase64(file)
-            }
-          }
-        }
-      }
-    }
-
-    document.addEventListener('paste', handlePaste)
-    return () => {
-      document.removeEventListener('paste', handlePaste)
-    }
-  }, [value, enablePaste])
-
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
-    if (!enableDragDrop) return
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(true)
-  }
-
-  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
-    if (!enableDragDrop) return
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(false)
-  }
-
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
-    if (!enableDragDrop) return
-    e.preventDefault()
-    e.stopPropagation()
-    setIsDragging(false)
-
-    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      const fileList = Array.from(e.dataTransfer.files)
-      fileList.forEach((file) => {
-        if (file.type.match('image.*')) {
-          convertToBase64(file)
-        }
-      })
-    }
-  }
-
-  const handleClick = () => {
-    if (!enableFileSelect) return
-    fileInputRef.current?.click()
-  }
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!enableFileSelect) return
-    if (e.target.files && e.target.files.length > 0) {
-      const fileList = Array.from(e.target.files)
-      fileList.forEach((file) => {
-        if (file.type.match('image.*')) {
-          convertToBase64(file)
-        }
-      })
-    }
-  }
-
-  const handlePasteButton = () => {
-    if (!enablePaste) return
-    navigator.clipboard.read().then((clipboardItems) => {
-      for (const clipboardItem of clipboardItems) {
-        for (const type of clipboardItem.types) {
-          if (type.startsWith('image/')) {
-            clipboardItem.getType(type).then((blob) => {
-              convertToBase64(blob)
-            })
-          }
-        }
-      }
-    }).catch(error => {
-      console.error('读取剪贴板失败:', error)
-      alert('读取剪贴板失败。请尝试使用 Ctrl+V 粘贴或手动上传图片。')
-    })
-  }
-
-  const convertToBase64 = (file: File | Blob) => {
-    if (value.length >= maxImages) {
-      alert(`最多允许上传 ${maxImages} 张图片。`)
-      return
-    }
-
-    compressImage(file).then(compressedFile => {
-      const reader = new FileReader()
-      reader.onloadend = () => {
-        const base64String = reader.result as string
-        if (!value.includes(base64String)) {
-          onChange?.([...value, base64String])
-        }
-      }
-      reader.readAsDataURL(compressedFile)
-    })
-  }
-
-  const compressImage = (file: File | Blob): Promise<Blob> => {
-    return new Promise((resolve) => {
-      const originalSize = file.size / 1024
-
-      const img = new Image()
-      img.src = URL.createObjectURL(file)
-
-      img.onload = () => {
-        URL.revokeObjectURL(img.src)
-
-        const canvas = document.createElement('canvas')
-        let width = img.width
-        let height = img.height
-
-        // 计算压缩比例，保持宽高比
-        const maxWidth = 1200
-        const maxHeight = 1200
-
-        if (width > maxWidth || height > maxHeight) {
-          const ratio = Math.min(maxWidth / width, maxHeight / height)
-          width = width * ratio
-          height = height * ratio
-        }
-
-        canvas.width = width
-        canvas.height = height
-
-        const ctx = canvas.getContext('2d')
-        if (!ctx) {
-          resolve(file as Blob)
-          return
-        }
-        ctx.drawImage(img, 0, 0, width, height)
-
-        // 转换为blob，压缩质量为0.8
-        canvas.toBlob(
-          (blob) => {
-            if (!blob) {
-              resolve(file as Blob)
-              return
-            }
-            // 获取压缩后的图片大小
-            const compressedSize = blob.size / 1024
-            console.log(`原始图片: ${originalSize.toFixed(2)} KB => ${compressedSize.toFixed(2)} KB`)
-            console.log(`压缩到了: ${((compressedSize / originalSize) * 100).toFixed(2)}%`)
-            resolve(blob)
-          },
-          'image/jpeg',
-          0.8,
-        )
-      }
-    })
-  }
-
-  const handleRemoveImage = (index: number) => {
-    Modal.confirm({
-      title: '确认删除',
-      content: '您确定要删除这张图片吗？',
-      okText: '确定',
-      cancelText: '取消',
-      onOk: () => {
-        const newImages = [...value]
-        newImages.splice(index, 1)
-        onChange?.(newImages)
-      },
-    })
-  }
-
-  return (
-    <div className='w-full space-y-4'>
-      <div className='flex flex-wrap gap-3'>
-        {value.map((image, index) => {
-          const imageNode = (
-            <div
-              className='rounded border overflow-hidden relative group bg-white'
-              style={{ maxWidth: 200 }}
-            >
-              <img
-                src={image}
-                alt={`图片 ${index + 1}`}
-                className='object-contain'
-                style={{ maxWidth: '100%', height: 'auto', display: 'block' }}
-              />
-              <Button
-                type='text'
-                icon={<DeleteOutlined />}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  handleRemoveImage(index)
-                }}
-                style={{ position: 'absolute', top: 0, right: 0 }}
-                className='absolute top-0 right-0 bg-black/40 text-white border-none hover:bg-black/60'
-                size='small'
-              />
-            </div>
-          )
-
-          if (!enablePreview) {
-            return (
-              <div key={index} className='relative'>
-                {imageNode}
-              </div>
-            )
-          }
-
-          return (
-            <div key={index} className='relative'>
-              <Popover
-                trigger='hover'
-                placement='top'
-                content={(
-                  <img
-                    src={image}
-                    alt={`预览图片 ${index + 1}`}
-                    style={{
-                      maxWidth: '400px',
-                      height: 'auto',
-                      objectFit: 'contain',
-                    }}
-                  />
-                )}
-              >
-                {imageNode}
-              </Popover>
-            </div>
-          )
-        })}
-
-        {value.length < maxImages && (
-          <Space style={{ width: '100%' }}>
-            {enableFileSelect && (
-              <div
-                className={`border-2 border-dashed rounded flex flex-col items-center justify-center cursor-pointer transition-colors ${
-                  isDragging && enableDragDrop ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-500'
-                }`}
-                onDragOver={enableDragDrop ? handleDragOver : undefined}
-                onDragLeave={enableDragDrop ? handleDragLeave : undefined}
-                onDrop={enableDragDrop ? handleDrop : undefined}
-                onClick={handleClick}
-                style={{ width: '50px', height: '50px' }}
-              >
-                <PlusOutlined style={{ fontSize: '24px', color: '#8c8c8c' }} />
-                <Typography.Text type='secondary' className='m-2'>上传</Typography.Text>
-              </div>
-            )}
-
-            {enablePaste && (
-              <div
-                style={{ width: '50px', height: '50px' }}
-                className={`border-2 border-dashed rounded flex flex-col items-center justify-center cursor-pointer transition-colors ${
-                  isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-blue-500'
-                }`}
-                onClick={handlePasteButton}
-              >
-                <PlusOutlined style={{ fontSize: '24px', color: '#8c8c8c' }} />
-                <Typography.Text type='secondary' className='m-2'>粘贴</Typography.Text>
-              </div>
-            )}
-          </Space>
-        )}
-      </div>
-
-      {enableFileSelect && (
-        <input
-          type='file'
-          ref={fileInputRef}
-          onChange={handleFileChange}
-          accept='image/*'
-          multiple
-          style={{ display: 'none' }}
-        />
-      )}
-
-      {(enablePasteTip && enablePaste) && (
-        <Alert
-          type='info'
-          showIcon
-          message={
-            <Typography.Text type='secondary'>
-              提示：您也可以在任意位置按下 <kbd style={{
-              padding: '0.1rem 0.4rem',
-              background: '#f5f5f5',
-              border: '1px solid #d9d9d9',
-              borderRadius: '3px',
-              fontSize: '12px',
-            }}>Ctrl</kbd> + <kbd style={{
-              padding: '0.1rem 0.4rem',
-              background: '#f5f5f5',
-              border: '1px solid #d9d9d9',
-              borderRadius: '3px',
-              fontSize: '12px',
-            }}>V</kbd> 从剪贴板粘贴图片
-            </Typography.Text>
-          }
-        />
-      )}
-    </div>
-  )
-}

package/src/antd/form/index.ts

@@ -1,6 +0,0 @@
-export * from './Upload'
-export * from './UploadImage'
-export * from './FileUploader'
-
-export * from './CheckboxButton'
-export * from './RadioButton'

package/src/antd/index.ts

@@ -1,46 +0,0 @@
-export * from 'antd'
-
-export * from '@ant-design/icons'
-
-export { default as zh_CN } from 'antd/locale/zh_CN'
-
-export { AntdRegistry } from '@ant-design/nextjs-registry'
-
-export {
-  PageLoading,
-  PageHeader,
-
-  ProCard,
-  ProList,
-  ProTable,
-  ProDescriptions,
-
-  ProForm,
-  ProFormList,
-  ProFormText,
-  ProFormCaptcha,
-  ProFormCheckbox,
-  ProFormSelect,
-  ProFormUploadButton,
-  LoginForm,
-  BetaSchemaForm,
-  StepsForm,
-
-  CheckCard,
-  EditableProTable,
-  DragSortTable,
-
-  ProProvider,
-} from '@ant-design/pro-components'
-
-export type {
-  ProTableProps,
-  ProFormProps,
-  ProColumns,
-  ProLayoutProps,
-  ProFormInstance,
-  ActionType,
-} from '@ant-design/pro-components'
-
-export * from './pro'
-export * from './form'

package/src/antd/pro/FoldCard/index.tsx

@@ -1,131 +0,0 @@
-'use client'
-
-import React, { useState, useRef, useEffect, forwardRef, CSSProperties } from 'react'
-import { Card, Button, CardProps } from 'antd'
-import { DownOutlined, UpOutlined } from '@ant-design/icons'
-
-export interface FoldCardProps extends CardProps {
-  max?: number; // 默认折叠高度，可根据需要调整
-  buttonStyle?: CSSProperties;
-  defaultCollapsed?: boolean;
-  showButtonOnHover?: boolean;
-}
-
-export const FoldCard = forwardRef((props: FoldCardProps, ref: any) => {
-  const {
-    max,
-    buttonStyle,
-    defaultCollapsed = true,
-    showButtonOnHover = true,
-    children,
-    style,
-    onMouseEnter,
-    onMouseLeave,
-    ...rest
-  } = props
-
-  const maxHeight = max ?? 300
-
-  const [collapsed, setCollapsed] = useState(defaultCollapsed)
-  const [hovered, setHovered] = useState(false)
-  const [isOverflow, setIsOverflow] = useState(false)
-  const contentRef = useRef<HTMLDivElement>(null)
-
-  const measureOverflow = () => {
-    const contentEl = contentRef.current
-    if (!contentEl) {
-      return
-    }
-
-    setIsOverflow(contentEl.scrollHeight > maxHeight)
-  }
-
-  const toggleCollapse = (ev: React.MouseEvent<HTMLElement>) => {
-    ev.stopPropagation()
-    setCollapsed(value => !value)
-  }
-
-  useEffect(() => {
-    measureOverflow()
-
-    const contentEl = contentRef.current
-    if (!contentEl || typeof ResizeObserver === 'undefined') {
-      return
-    }
-
-    const observer = new ResizeObserver(measureOverflow)
-    observer.observe(contentEl)
-    return () => observer.disconnect()
-  }, [children, maxHeight])
-
-  const contentStyle: CSSProperties = {
-    maxHeight: collapsed ? maxHeight : undefined,
-    transition: 'max-height 0.3s ease',
-    overflow: collapsed ? 'hidden' : 'visible',
-  }
-
-  const hoverButtonContainerStyle: CSSProperties = {
-    position: 'absolute',
-    bottom: hovered ? 10 : -40,
-    left: '50%',
-    transform: 'translateX(-50%)',
-    transition: 'bottom 0.3s ease, opacity 0.3s ease',
-    display: 'flex',
-    justifyContent: 'center',
-    width: '100%',
-    pointerEvents: 'none',
-    opacity: hovered && isOverflow ? 1 : 0,
-  }
-
-  const inlineButtonContainerStyle: CSSProperties = {
-    textAlign: 'center',
-    marginTop: 8,
-  }
-
-  const finalButtonStyle: CSSProperties = {
-    pointerEvents: 'auto',
-    border: 'none',
-    boxShadow: showButtonOnHover ? '0 2px 8px rgba(0, 0, 0, 0.15)' : undefined,
-    ...buttonStyle,
-  }
-
-  const button = (
-    <Button
-      size='small'
-      icon={collapsed ? <DownOutlined /> : <UpOutlined />}
-      onClick={toggleCollapse}
-      style={finalButtonStyle}
-    />
-  )
-
-  return (
-    <Card
-      ref={ref}
-      style={{ position: 'relative', overflow: 'hidden', ...style }}
-      onMouseEnter={(ev) => {
-        setHovered(true)
-        onMouseEnter?.(ev)
-      }}
-      onMouseLeave={(ev) => {
-        setHovered(false)
-        onMouseLeave?.(ev)
-      }}
-      {...rest}
-    >
-      <div style={contentStyle} ref={contentRef}>
-        {children}
-      </div>
-      {isOverflow && (
-        showButtonOnHover ? (
-          <div style={hoverButtonContainerStyle}>
-            {button}
-          </div>
-        ) : (
-          <div style={inlineButtonContainerStyle}>
-            {button}
-          </div>
-        )
-      )}
-    </Card>
-  )
-})

package/src/antd/pro/RangeInput/index.tsx

@@ -1,46 +0,0 @@
-'use client'
-
-import React from 'react'
-import { InputNumber, InputNumberProps, Space } from 'antd'
-import { _ } from '@wzyjs/utils/web'
-
-export interface RangeInputProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
-  value?: number[];
-  min?: number;
-  max?: number;
-  onChange?: (numbers: number[]) => void;
-}
-
-// 最小值 最大值 的输入框
-export const RangeInput = (props: RangeInputProps) => {
-  const { value = [], min, max, onChange } = props
-
-  const onNumberChange = (index: 0 | 1, v: number | null) => {
-    if (Number.isNaN(v) || v === null) {
-      return
-    }
-
-    const numbers = _.cloneDeep(value) || []
-    numbers[index] = v
-
-    onChange?.(numbers)
-  }
-
-  return (
-    <Space>
-      <InputNumber
-        min={min}
-        max={max}
-        value={value[0]}
-        onChange={(v: number | null) => onNumberChange(0, v)}
-      />
-      <span style={{ margin: '0 3px' }}> - </span>
-      <InputNumber
-        min={min}
-        max={max}
-        value={value[1]}
-        onChange={(v: number | null) => onNumberChange(1, v)}
-      />
-    </Space>
-  )
-}

package/src/antd/pro/Tabs/index.tsx

@@ -1,135 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Tabs, type TabsProps } from 'antd'
-
-type SyncMode = 'replace' | 'push'
-
-export interface TabsProProps extends TabsProps {
-  syncToUrl?: boolean
-  queryKey?: string
-  historyMode?: SyncMode
-}
-
-const getItemKeys = (items?: TabsProps['items']): string[] => {
-  return (items || [])
-  .map(item => item?.key)
-  .filter((key): key is string => typeof key === 'string' && !!key)
-}
-
-const getUrlTabKey = (queryKey: string): string | undefined => {
-  if (typeof window === 'undefined') {
-    return undefined
-  }
-
-  const value = new URLSearchParams(window.location.search).get(queryKey)
-  return value || undefined
-}
-
-const updateUrlTabKey = (queryKey: string, key: string, mode: SyncMode) => {
-  if (typeof window === 'undefined') {
-    return
-  }
-
-  const url = new URL(window.location.href)
-  url.searchParams.set(queryKey, key)
-
-  const nextUrl = `${url.pathname}${url.search}${url.hash}`
-  if (mode === 'push') {
-    window.history.pushState(window.history.state, '', nextUrl)
-    return
-  }
-
-  window.history.replaceState(window.history.state, '', nextUrl)
-}
-
-export const TabsPro = (props: TabsProProps) => {
-  const {
-    syncToUrl = false,
-    queryKey = 'tab',
-    historyMode = 'replace',
-    activeKey,
-    defaultActiveKey,
-    items,
-    onChange,
-    ...rest
-  } = props
-
-  const itemKeys = React.useMemo(() => getItemKeys(items), [items])
-
-  const initialKey = React.useMemo(() => {
-    const urlKey = syncToUrl ? getUrlTabKey(queryKey) : undefined
-    if (urlKey && itemKeys.includes(urlKey)) {
-      return urlKey
-    }
-
-    if (typeof defaultActiveKey === 'string' && itemKeys.includes(defaultActiveKey)) {
-      return defaultActiveKey
-    }
-
-    return itemKeys[0]
-  }, [defaultActiveKey, itemKeys, queryKey, syncToUrl])
-
-  const [innerActiveKey, setInnerActiveKey] = React.useState<string | undefined>(initialKey)
-
-  const mergedActiveKey = typeof activeKey === 'string' ? activeKey : innerActiveKey
-
-  React.useEffect(() => {
-    if (typeof activeKey === 'string') {
-      return
-    }
-
-    setInnerActiveKey(prev => {
-      if (prev && itemKeys.includes(prev)) {
-        return prev
-      }
-      return initialKey
-    })
-  }, [activeKey, initialKey, itemKeys])
-
-  React.useEffect(() => {
-    if (!syncToUrl || !mergedActiveKey) {
-      return
-    }
-
-    updateUrlTabKey(queryKey, mergedActiveKey, historyMode)
-  }, [historyMode, mergedActiveKey, queryKey, syncToUrl])
-
-  React.useEffect(() => {
-    if (!syncToUrl) {
-      return
-    }
-
-    const onPopState = () => {
-      const urlKey = getUrlTabKey(queryKey)
-      if (!urlKey || !itemKeys.includes(urlKey)) {
-        return
-      }
-
-      if (typeof activeKey !== 'string') {
-        setInnerActiveKey(urlKey)
-      }
-
-      onChange?.(urlKey)
-    }
-
-    window.addEventListener('popstate', onPopState)
-    return () => {
-      window.removeEventListener('popstate', onPopState)
-    }
-  }, [activeKey, itemKeys, onChange, queryKey, syncToUrl])
-
-  return (
-    <Tabs
-      {...rest}
-      items={items}
-      activeKey={mergedActiveKey}
-      onChange={key => {
-        if (typeof activeKey !== 'string') {
-          setInnerActiveKey(key)
-        }
-        onChange?.(key)
-      }}
-    />
-  )
-}