@wzyjs/uis 0.3.8

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@wzyjs/uis",
+  "version": "0.3.8",
+  "description": "description",
+  "author": "wzy",
+  "sideEffects": false,
+  "files": [
+    "src"
+  ],
+  "exports": {
+    "./web": {
+      "import": "./src/web.ts"
+    }
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@ant-design/nextjs-registry": "^1.0.2",
+    "@ant-design/pro-components": "^2.8.6",
+    "ali-oss": "^6.21.0",
+    "echarts": "^5.4.3",
+    "echarts-for-react": "^3.0.2",
+    "github-markdown-css": "^5.8.1",
+    "handlebars": "^4.7.8",
+    "html2canvas": "^1.4.1",
+    "js-beautify": "^1.14.7",
+    "prettier": "^3.5.3",
+    "prismjs": "^1.29.0",
+    "react": "^19.0.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-json-view": "^1.21.3",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-starry-night": "^2.2.0",
+    "remark-gfm": "^4.0.1",
+    "remark-toc": "^9.0.0"
+  },
+  "peerDependencies": {
+    "@wzyjs/hooks": "^0.2.37",
+    "@wzyjs/types": "^0.2.37",
+    "@wzyjs/utils": "^0.2.37",
+    "antd": "^6.0.0"
+  },
+  "gitHead": "f52c49060c511ee5dd658c68449467394efac69a",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/antd/form/CheckboxButton/index.module.scss

@@ -0,0 +1,24 @@
+.checkcard {
+  :global(.ant-pro-checkcard-content) {
+    padding: 0 !important;
+  }
+
+  :global(.ant-pro-checkcard) {
+    margin-bottom: 0 !important;
+    text-align: center !important;
+    display: flex;
+    justify-content: center;
+    border-radius: 0 !important;
+  }
+
+  :global(.ant-pro-checkcard-title) {
+    height: 100%;
+  }
+
+  :global(.ant-pro-checkcard div) {
+    width: 100%;
+    font-weight: 400 !important;
+    height: 30px !important;
+    line-height: 28px !important;
+  }
+}

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

@@ -0,0 +1,31 @@
+'use client'
+
+import { Col, Row } from 'antd'
+import { CheckCard } from '@ant-design/pro-components'
+import { CheckCardValueType, CheckGroupValueType } from '@ant-design/pro-card/es/components/CheckCard/Group'
+
+import styles from './index.module.scss'
+
+interface CheckboxButtonProps {
+  options: { label: string; value: CheckCardValueType }[]
+  value?: CheckGroupValueType
+  onChange?: (value: CheckGroupValueType) => void
+}
+
+export const CheckboxButton = (props: CheckboxButtonProps) => {
+  const { options, value, onChange } = props
+
+  return (
+    <div className={styles.checkcard}>
+      <CheckCard.Group style={{ width: '100%' }} size='small' multiple value={value} onChange={onChange}>
+        <Row>
+          {options.map((item, index) => (
+            <Col key={index}>
+              <CheckCard title={item.label} value={item.value} style={{ width: 60, height: 30 }} />
+            </Col>
+          ))}
+        </Row>
+      </CheckCard.Group>
+    </div>
+  )
+}

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

@@ -0,0 +1,30 @@
+'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
+}
+
+export const RadioButton = <V = string | number | boolean | null>(props: FilterButtonProps<V>) => {
+  const { value, options, buttonStyle = 'outline', style, onChange } = props
+
+  return (
+    <Radio.Group
+      optionType='button'
+      buttonStyle={buttonStyle}
+      value={value}
+      style={style}
+      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

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

@@ -0,0 +1,338 @@
+'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, maxHeight: 200 }}
+            >
+              <img
+                src={image}
+                alt={`图片 ${index + 1}`}
+                className='object-contain'
+                style={{ maxWidth: '100%', maxHeight: '100%', 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: '200px',
+                      maxHeight: '200px',
+                      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='mt-1'>上传</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='mt-1'>粘贴</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

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

package/src/antd/index.ts

@@ -0,0 +1,43 @@
+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,
+
+  ProFormText,
+  ProFormCaptcha,
+  ProFormCheckbox,
+  ProFormSelect,
+  ProFormUploadButton,
+  LoginForm,
+  BetaSchemaForm,
+  StepsForm,
+
+  CheckCard,
+  EditableProTable,
+  DragSortTable,
+
+  ProProvider,
+} from '@ant-design/pro-components'
+
+export type {
+  ProTableProps,
+  ProFormProps,
+  ProColumns,
+  ProLayoutProps,
+  ProFormInstance
+} from '@ant-design/pro-components'
+
+export * from './pro'
+export * from './form'

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

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

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

@@ -0,0 +1,46 @@
+'use client'
+
+import React, { useState, ReactNode } from 'react'
+
+import { Button, ButtonProps, message } 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 [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)
+      }}
+    />
+  )
+}