@wzyjs/uis 0.3.29 → 0.3.31

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

@@ -1,163 +0,0 @@
-'use client'
-
-import { useState, type ReactElement } from 'react'
-
-import { Upload, Button,  } from 'antd'
-import { UploadOutlined, InboxOutlined } from '@ant-design/icons'
-
-import type { UploadProps, UploadFile as AntUploadFile } from 'antd'
-
-export interface FileUploaderProps {
-  value?: AntUploadFile[]
-  onChange?: (fileList: AntUploadFile[]) => void
-
-  // 模式
-  mode?: 'file' | 'http' // http 暂未实现
-
-  // 限制
-  accept?: string
-  multiple?: boolean
-  maxCount?: number
-
-  // 展示
-  trigger?: 'button' | 'dragger' | ReactElement
-  listType?: UploadProps['listType']
-
-  // 校验
-  beforeUpload?: (file: AntUploadFile) => boolean | Promise<void>
-
-  // 上传行为
-  immediateUpload?: boolean
-  action?: string
-  data?: Record<string, unknown> | ((file: AntUploadFile) => Record<string, unknown>)
-  headers?: UploadProps['headers']
-  withCredentials?: boolean
-
-  disabled?: boolean
-  showUploadList?: boolean
-  onUploadChange?: UploadProps['onChange']
-}
-
-export const FileUploader = (props: FileUploaderProps) => {
-  const {
-    value,
-    onChange,
-    mode = 'file',
-    accept,
-    multiple = true,
-    maxCount,
-    trigger = 'dragger',
-    listType = 'text',
-    beforeUpload,
-    immediateUpload = false,
-    action = '/api/file/upload',
-    data,
-    headers,
-    withCredentials,
-    disabled,
-    showUploadList = trigger === 'dragger',
-    onUploadChange,
-  } = props
-
-  const [internalFileList, setInternalFileList] = useState<AntUploadFile[]>([])
-
-  const fileList = value || internalFileList
-
-  const handleChange: UploadProps['onChange'] = (info) => {
-    let newFileList = [...info.fileList]
-
-    // 限制数量
-    if (maxCount && newFileList.length > maxCount) {
-      newFileList = newFileList.slice(-maxCount)
-    }
-
-    // 如果不是立即上传模式，我们需要手动管理状态
-    if (!immediateUpload) {
-      // 这里的逻辑主要依赖 beforeUpload 返回 false 来阻止上传
-      // 但 onChange 依然会被触发
-    }
-
-    // 更新状态
-    if (!value) {
-      setInternalFileList(newFileList)
-    }
-
-    // 通知外部
-    onChange?.(newFileList)
-    onUploadChange?.(info)
-  }
-
-  const handleBeforeUpload = async (file: AntUploadFile) => {
-    // 1. 外部校验
-    if (beforeUpload) {
-      const result = await beforeUpload(file)
-      if (result === false) {
-        return Upload.LIST_IGNORE
-      }
-    }
-
-    // 2. 立即上传模式
-    if (immediateUpload) {
-      return true
-    }
-
-    // 3. 非立即上传模式，阻止默认上传行为，但添加到列表
-    return false
-  }
-
-  const uploadProps: UploadProps = {
-    fileList,
-    accept,
-    multiple,
-    maxCount,
-    listType,
-    disabled,
-    showUploadList,
-    beforeUpload: handleBeforeUpload as UploadProps['beforeUpload'],
-    onChange: handleChange,
-    onDrop: (e: unknown) => {
-      // console.log('Dropped files', e.dataTransfer.files)
-    },
-  }
-
-  // 立即上传相关配置
-  if (immediateUpload) {
-    uploadProps.action = action
-    uploadProps.data = data
-    uploadProps.headers = headers
-    uploadProps.withCredentials = withCredentials
-  } else {
-    // 非立即上传模式，不需要 action
-    uploadProps.customRequest = () => undefined // 覆盖默认上传行为，防止自动上传尝试
-  }
-
-  if (mode === 'http') {
-    return <div>HTTP 输入模式暂未支持</div>
-  }
-
-  if (trigger === 'button') {
-    return (
-      <Upload {...uploadProps}>
-        <Button type="primary" icon={<UploadOutlined />}>
-          上传文件
-        </Button>
-      </Upload>
-    )
-  }
-
-  if (trigger === 'dragger') {
-    return (
-      <Upload.Dragger {...uploadProps}>
-        <p className="ant-upload-drag-icon">
-          <InboxOutlined />
-        </p>
-        <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
-        <p className="ant-upload-hint">
-          支持单个或批量上传{maxCount ? `，最多 ${maxCount} 个文件` : ''}
-        </p>
-      </Upload.Dragger>
-    )
-  }
-
-  return trigger
-}

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

@@ -1,32 +0,0 @@
-'use client'
-
-import { CSSProperties } from 'react'
-import { Radio } from 'antd'
-
-interface FilterButtonProps<V> {
-  options: { label: string; value: V }[]
-  value?: V
-  buttonStyle?: 'outline' | 'solid'
-  onChange?: (value: V) => void
-  style?: CSSProperties
-  disabled?: boolean
-}
-
-export const RadioButton = <V = string | number | boolean | null>(props: FilterButtonProps<V>) => {
-  const { value, options, buttonStyle = 'outline', disabled, style, onChange } = props
-
-  return (
-    <Radio.Group
-      optionType='button'
-      buttonStyle={buttonStyle}
-      value={value}
-      style={style}
-      disabled={disabled}
-      onChange={e => onChange?.(e.target.value as V)}
-    >
-      {options.filter(item => item.label).map(item => (
-        <Radio key={String(item.value)} value={item.value}>{item.label}</Radio>
-      ))}
-    </Radio.Group>
-  )
-}

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

@@ -1,65 +0,0 @@
-'use client'
-
-import { Upload } from 'antd'
-import { InboxOutlined } from '@ant-design/icons'
-import { generateUniqueFileName } from '@wzyjs/utils/web'
-
-interface item {
-  name: string
-  url: string
-  status: string
-}
-
-interface UploadFormItemProps {
-  oss: any
-  multiple?: boolean,
-  mode?: 'image' | 'video'
-  value?: item[]
-  onChange?: (value: item[]) => void
-}
-
-export const UploadFormItem = (props: UploadFormItemProps) => {
-  const { oss, mode = 'image', multiple = true, onChange } = props
-
-  const accept = mode === 'image' ? '.jpg,.png,.jpeg' : '.mp4,.mov'
-
-  const onUpload = async (info: any) => {
-    onChange?.(info.fileList.map((item: any) => ({
-      name: item?.response.name,
-      url: item?.response.url,
-    })))
-  }
-
-  const customRequest = async ({ file, onSuccess }: any) => {
-    const newName = generateUniqueFileName(file.name)
-    const result = await oss.put(newName, file, {
-      headers: {
-        'Cache-Control': 'public, max-age=31536000, immutable', // 设置缓存时间为365天
-      },
-    })
-    onSuccess(result)
-  }
-
-  return (
-    <Upload.Dragger
-      multiple={multiple}
-      accept={accept}
-      listType='picture-card'
-      onChange={onUpload}
-      customRequest={customRequest}
-    >
-      <p className='ant-upload-drag-icon'>
-        <InboxOutlined />
-      </p>
-      <p className='ant-upload-text'>
-        <span>点击或拖拽文件到这里以上传</span>
-      </p>
-      {mode === 'image' && (
-        <p className='ant-upload-hint'>支持上传多张 JPG 或者 PNG 格式的照片</p>
-      )}
-      {mode === 'video' && (
-        <p className='ant-upload-hint'>支持上传多个 MP4 或者 MOV 格式的视频</p>
-      )}
-    </Upload.Dragger>
-  )
-}

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'