@wzyjs/uis 0.3.28 → 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/Alert/index.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import React, { ReactNode } from 'react'
-import { Alert, AlertProps, Space } from 'antd'
-
-export interface AlertProProps extends AlertProps {
-  children?: ReactNode,
-}
-
-// 1. 支持 children 作为 description 显示
-export const AlertPro = (props: AlertProProps) => {
-  const { children, description = children } = props
-
-  return (
-    <Alert
-      {...props}
-      description={(
-        <Space style={{ width: '100%' }} orientation='vertical'>
-          {description}
-        </Space>
-      )}
-    />
-  )
-}

package/src/antd/pro/Button/components/Confirm.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import React from 'react'
-import { _ } from '@wzyjs/utils/web'
-import { Button, Popconfirm, PopconfirmProps, ButtonProps } from 'antd'
-
-export interface ConfirmProps extends PopconfirmProps {
-  btnProps?: ButtonProps
-}
-
-// 1. 给按钮增加了确认功能
-export const Confirm = (props: ConfirmProps) => {
-  const { children, btnProps } = props
-
-  return (
-    <Popconfirm
-      okText='是'
-      cancelText='否'
-      {..._.omit(props, ['children', 'btnProps'])}
-    >
-      <Button type='link' {...btnProps}>{children}</Button>
-    </Popconfirm>
-  )
-}

package/src/antd/pro/Button/components/Copy.tsx

@@ -1,47 +0,0 @@
-'use client'
-
-import React, { useState, ReactNode } from 'react'
-
-import { App, Button, ButtonProps } from 'antd'
-import { CheckOutlined } from '@ant-design/icons'
-
-import { copy, readClipboard } from '@wzyjs/utils/web'
-import { useControllableValue } from '@wzyjs/hooks/web'
-
-export interface CopyProps extends ButtonProps {
-  value?: string,
-  canPaste?: boolean,
-}
-
-export const Copy = (props: CopyProps) => {
-  const [icon, setIcon] = useState<ReactNode>(null)
-  const { message } = App.useApp()
-
-  const [value, setValue] = useControllableValue<string>(props, {
-    defaultValue: props.value,
-  })
-
-  const onContextMenu = async () => {
-    setValue(await readClipboard())
-  }
-
-  return (
-    <Button
-      {...props}
-      icon={icon}
-      onContextMenu={props.canPaste ? onContextMenu : undefined}
-      children={props.children || value || '记录'}
-      onClick={(ev: any) => {
-        props.onClick?.(ev)
-
-        copy(value)
-        message.success('复制成功')
-
-        setIcon(<CheckOutlined />)
-        setTimeout(() => {
-          setIcon(null)
-        }, 1000)
-      }}
-    />
-  )
-}

package/src/antd/pro/Button/components/Drawer.tsx

@@ -1,37 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { _ } from '@wzyjs/utils/web'
-import { Button, Drawer as AntdDrawer, DrawerProps as AntdDrawerProps, ButtonProps } from 'antd'
-
-export interface DrawerProps extends AntdDrawerProps {
-  btnProps?: ButtonProps
-  defaultOpen?: boolean
-}
-
-export const Drawer = (props: DrawerProps) => {
-  const { children, defaultOpen, btnProps } = props
-  const [open, setOpen] = useState<boolean>(defaultOpen ?? false)
-
-  return (
-    <>
-      <Button
-        type='link'
-        {...btnProps}
-        onClick={ev => {
-          btnProps?.onClick?.(ev)
-          setOpen(true)
-        }}
-      />
-      <AntdDrawer
-        title={btnProps?.children}
-        open={open}
-        onClose={() => setOpen(false)}
-        destroyOnHidden
-        {..._.omit(props, ['children', 'btnProps'])}
-      >
-        {children}
-      </AntdDrawer>
-    </>
-  )
-}

package/src/antd/pro/Button/components/Group.tsx

@@ -1,26 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Button } from 'antd'
-import { Confirm, ConfirmProps } from './Confirm'
-
-export interface GroupProps {
-  list?: (ConfirmProps & { visible?: boolean, title?: string })[]
-}
-
-// 1. 按钮组
-export const Group = (props: GroupProps) => {
-  const { list = [] } = props
-
-  if (!list?.length) {
-    return null
-  }
-
-  return (
-    <Button.Group>
-      {list.filter(item => item.visible).map((item, index) => (
-        <Confirm key={index} {...item}>{item.title}</Confirm>
-      ))}
-    </Button.Group>
-  )
-}

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

@@ -1,11 +0,0 @@
-import { Group } from './components/Group'
-import { Confirm } from './components/Confirm'
-import { Copy } from './components/Copy'
-import { Drawer } from './components/Drawer'
-
-export const ButtonPro = {
-  Group,
-  Confirm,
-  Copy,
-  Drawer,
-}

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

@@ -1,92 +0,0 @@
-'use client'
-
-import React, { useState, useRef, useEffect, forwardRef } from 'react'
-import { Card, Button, CardProps } from 'antd'
-import { DownOutlined, UpOutlined } from '@ant-design/icons'
-
-interface CardProProps extends CardProps {
-  collapsedHeight?: number; // 默认折叠高度，可根据需要调整
-}
-
-export const CardPro = forwardRef((props: CardProProps, ref: any) => {
-  const { collapsedHeight = 300, children, ...rest } = props
-
-  const [collapsed, setCollapsed] = useState(true)
-  const [hovered, setHovered] = useState(false)
-  const [isOverflow, setIsOverflow] = useState(false)
-  const contentRef = useRef<HTMLSpanElement>(null)
-
-  const toggleCollapse = (ev: any) => {
-    ev.stopPropagation()
-    setCollapsed(!collapsed)
-  }
-
-  useEffect(() => {
-    const contentEl = contentRef.current
-    if (contentEl) {
-      // 获取内容的实际高度
-      const actualHeight = contentEl.scrollHeight
-      if (actualHeight > collapsedHeight) {
-        setIsOverflow(true)
-      } else {
-        setIsOverflow(false)
-      }
-    }
-  }, [children, collapsedHeight])
-
-  const cardStyle: React.CSSProperties = {
-    position: 'relative',
-    overflow: 'hidden',
-  }
-
-  const contentStyle: React.CSSProperties = {
-    maxHeight: collapsed ? `${collapsedHeight}px` : 'none',
-    overflowY: collapsed ? 'auto' : 'visible',
-    transition: 'max-height 0.3s ease',
-    display: 'block',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  }
-
-  const buttonContainerStyle: React.CSSProperties = {
-    position: 'absolute',
-    bottom: hovered ? '10px' : '-40px', // 增加隐藏时的负值，确保按钮完全隐藏
-    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 buttonStyle: React.CSSProperties = {
-    pointerEvents: 'auto', // 允许按钮在悬停时可点击
-    border: 'none',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-  }
-
-  return (
-    <Card
-      ref={ref}
-      style={cardStyle}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      {...rest}
-    >
-      <span style={contentStyle} ref={contentRef}>
-        {children}
-      </span>
-      {isOverflow && (
-        <div style={buttonContainerStyle}>
-          <Button
-            icon={collapsed ? <DownOutlined /> : <UpOutlined />}
-            onClick={toggleCollapse}
-            style={buttonStyle}
-          />
-        </div>
-      )}
-    </Card>
-  )
-})

package/src/antd/pro/Collapse/components/Item.tsx

@@ -1,30 +0,0 @@
-'use client'
-
-import React from 'react'
-import { Collapse, CollapsePanelProps, Space } from 'antd'
-
-export interface CollapseItemProps extends Omit<CollapsePanelProps, 'key'> {
-  step?: boolean; // 为true自动给标题添加 `第{index}步：`
-  index?: number; // step为true时才需要
-  space?: boolean; // 子元素是否有间距
-}
-
-export const Item = (props: CollapseItemProps) => {
-  const { step = true, header, index, space } = props
-
-  return (
-    <Collapse.Panel
-      key={String(header)}
-      {...props}
-      header={step ? `第${index}步: ${header}` : header}
-    >
-      {space ? (
-        <Space orientation='vertical' size='small' style={{ width: '100%' }}>
-          {props.children}
-        </Space>
-      ) : (
-        props.children
-      )}
-    </Collapse.Panel>
-  )
-}