@wzyjs/antd 0.2.41

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@wzyjs/antd",
+  "version": "0.2.41",
+  "description": "description",
+  "author": "wzy",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@ant-design/icons": "^5.6.1",
+    "@ant-design/nextjs-registry": "^1.0.2",
+    "@ant-design/pro-components": "^2.8.6",
+    "@ant-design/v5-patch-for-react-19": "^1.0.3"
+  },
+  "peerDependencies": {
+    "@wzyjs/hooks": "^0.2.37",
+    "@wzyjs/utils": "^0.2.37",
+    "antd": "^5.24.3"
+  },
+  "gitHead": "22795bdb9c670d3e37e9a6e83b544f916bab3c16",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/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/form/CheckboxButton/index.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { Col, Row } from 'antd'
+import { CheckCard } from '@ant-design/pro-components'
+import { CheckCardValueType } from '@ant-design/pro-card/es/components/CheckCard/Group'
+
+import styles from './index.module.scss'
+
+interface CheckboxButtonProps {
+  options: { label: string; value: CheckCardValueType }[]
+  value?: CheckCardValueType
+  onChange?: (value?: CheckCardValueType) => 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/form/RadioButton/index.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { Radio } from 'antd'
+
+interface FilterButtonProps<V> {
+  options: { label: string; value: V }[]
+  value: V
+  onChange: (value: V) => void
+}
+
+export const RadioButton = <V = string | number | boolean | null>(props: FilterButtonProps<V>) => {
+  const { value, options, onChange } = props
+
+  return (
+    <Radio.Group
+      optionType='button'
+      buttonStyle='solid'
+      value={value}
+      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/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'
+
+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/form/index.ts

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

package/src/index.ts

@@ -0,0 +1,34 @@
+import '@ant-design/v5-patch-for-react-19'
+
+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,
+
+  ProFormText,
+  ProFormCaptcha,
+  ProFormCheckbox,
+  ProFormUploadButton,
+  LoginForm,
+  BetaSchemaForm,
+
+  CheckCard,
+  EditableProTable,
+} from '@ant-design/pro-components'
+
+export type { ProLayoutProps, ProFormInstance } from '@ant-design/pro-components'
+
+export * from './pro'
+export * from './form'

package/src/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%' }} direction='vertical'>
+          {description}
+        </Space>
+      )}
+    />
+  )
+}

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

@@ -0,0 +1,24 @@
+'use client'
+
+import React from 'react'
+import { _ } from '@wzyjs/utils'
+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/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'
+import { useControllableValue } from '@wzyjs/hooks'
+
+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)
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,37 @@
+'use client'
+
+import React, { useState } from 'react'
+import { _ } from '@wzyjs/utils'
+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)}
+        destroyOnClose
+        {..._.omit(props, ['children', 'btnProps'])}
+      >
+        {children}
+      </AntdDrawer>
+    </>
+  )
+}

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

@@ -0,0 +1,26 @@
+'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/pro/Button/index.tsx

@@ -0,0 +1,11 @@
+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/pro/Card/index.tsx

@@ -0,0 +1,92 @@
+'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/pro/Collapse/components/Item.tsx

@@ -0,0 +1,30 @@
+'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 direction='vertical' size='small' style={{ width: '100%' }}>
+          {props.children}
+        </Space>
+      ) : (
+        props.children
+      )}
+    </Collapse.Panel>
+  )
+}

package/src/pro/Collapse/index.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import React from 'react'
+import { Collapse, CollapseProps } from 'antd'
+import { Item, CollapseItemProps } from './components/Item'
+
+export interface CollapseProProps extends CollapseProps {
+  list?: CollapseItemProps[],
+  step?: boolean; // 为true自动给标题添加 `第{index}步：`
+  space?: boolean; // 子元素是否有间距
+}
+
+export const CollapsePro = (props: CollapseProProps) => {
+  const { list = [], step = false, space = true, accordion = true } = props
+
+  if (!props.children && list.length) {
+    props.children = list.map((item, index) => (
+      <Item key={index} step={step} space={space} index={index + 1} {...item} />
+    ))
+  }
+
+  return (
+    <Collapse accordion={accordion} {...props} />
+  )
+}
+
+CollapsePro.Pane = Item

package/src/pro/Image/index.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import React from 'react'
+import { Image, ImageProps } from 'antd'
+
+export type ImageProProps = ImageProps
+
+export const ImagePro = (props: ImageProProps) => {
+  const { preview = false } = props
+
+  return (
+    <Image
+      {...props}
+      preview={preview}
+    />
+  )
+}

package/src/pro/Input/components/Range.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import React from 'react'
+import { InputNumber, InputNumberProps, Space } from 'antd'
+import { _ } from '@wzyjs/utils'
+
+export interface RangeProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
+  value?: number[];
+  min?: number;
+  max?: number;
+  onChange?: (numbers: number[]) => void;
+}
+
+// 最小值 最大值 的输入框
+export const Range = (props: RangeProps) => {
+  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/pro/Input/index.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import React, { useState, useEffect, useMemo } from 'react'
+import { Input, InputProps } from 'antd'
+import { getStrLength } from '@wzyjs/utils'
+import { Range } from './components/Range'
+
+export interface InputProProps extends Omit<InputProps, 'onChange'> {
+  maxLengthChinese?: boolean; // 限制长度：中文算2个字符
+  onChange?: (value: string) => void
+}
+
+// 1. 增加对中文字符串的长度限制 (Input的maxLength会认为汉字为1个长度)
+export const InputPro = (props: InputProProps) => {
+  const {
+    value: _value,
+    onChange: _onChange,
+    addonAfter: _addonAfter,
+    maxLength,
+    maxLengthChinese,
+    ...rest
+  } = props
+
+  const [value, setValue] = useState<string>('')
+
+  const addonAfter = useMemo(() => {
+    if (!maxLengthChinese) {
+      return _addonAfter
+    }
+
+    return (
+      <>
+        {_addonAfter}
+        {maxLength ? `${getStrLength(value)} / ${maxLength}` : null}
+      </>
+    )
+  }, [_addonAfter, value, maxLength])
+
+  useEffect(() => {
+    _onChange?.(value)
+  }, [value])
+
+  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    if (maxLengthChinese && maxLength && getStrLength(ev.target.value) > maxLength) {
+      return
+    }
+    setValue(ev.target.value)
+  }
+
+  return (
+    <Input
+      value={value}
+      onChange={onChange}
+      addonAfter={addonAfter}
+      maxLength={maxLength}
+      {...rest}
+    />
+  )
+}
+
+InputPro.Range = Range

package/src/pro/Popconfirm/index.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import React from 'react'
+import { Popconfirm, PopconfirmProps } from 'antd'
+
+export type PopconfirmProProps = PopconfirmProps
+
+export const PopconfirmPro = (props: PopconfirmProProps) => {
+  return (
+    <Popconfirm
+      okText="确定"
+      cancelText="取消"
+      {...props}
+    />
+  )
+}

package/src/pro/Radio/components/Cancel.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import React from 'react'
+import { Checkbox, CheckboxProps, CheckboxOptionType } from 'antd'
+
+export interface CancelProps {
+  value: CheckboxProps['value'];
+  options: CheckboxOptionType[];
+  onChange?: CheckboxProps['onChange'];
+}
+
+// 给Radio组件增加取消选择的功能，是用Checkbox组件实现的
+export const Cancel = (props: CancelProps) => {
+  const { value, options, onChange } = props
+
+  const evs = {
+    onChange: (checkedValue: CheckboxProps['value'][]) => {
+      onChange?.(checkedValue.find(i => i !== value) || '')
+    },
+  }
+
+  return (
+    <Checkbox.Group
+      value={[value]}
+      prefixCls='ant-radio'
+      options={options}
+      onChange={evs.onChange}
+    />
+  )
+}

package/src/pro/Radio/index.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { Cancel } from './components/Cancel'
+
+export const RadioPro = {
+  Cancel,
+}

package/src/pro/Space/index.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import React from 'react'
+import { Space, SpaceProps } from 'antd'
+
+export type SpaceProProps = SpaceProps
+
+export const SpacePro = (props: SpaceProProps) => {
+  return (
+    <Space
+      style={{ width: '100%' }}
+      {...props}
+    />
+  )
+}

package/src/pro/Typography/components/String.tsx

@@ -0,0 +1,72 @@
+'use client'
+
+import React, { useMemo } from 'react'
+
+import { Typography } from 'antd'
+import { TextProps } from 'antd/lib/typography/Text'
+
+import { replaceByRules } from '@wzyjs/utils'
+
+export interface StringProps extends TextProps {
+  isCopy?: boolean;
+  isEllipsis?: boolean;
+}
+
+export const String = (props: StringProps) => {
+  const { isEllipsis, isCopy, children } = props
+
+  const { source = '', __html = '' } = useMemo<{ source?: string, __html?: string }>(() => {
+    if (typeof children !== 'string') {
+      return {}
+    }
+
+    if (!children.includes('’')) {
+      return {
+        source: children.trim(),
+      }
+    }
+
+    return {
+      source: children.trim(),
+      __html: replaceByRules(children.trim(), [
+        [
+          '‘',
+          '<xmp style="display: inline-block; color: #d56161; margin: 0 3px; font-family: Consolas, Monaco, monospace;">',
+        ],
+        ['’', '</xmp>'],
+      ]),
+    }
+  }, [])
+
+  const ellipsis = useMemo(() => {
+    if (!isEllipsis) {
+      return false
+    }
+    return { rows: 100, expandable: true }
+  }, [isEllipsis])
+
+  const copyable = useMemo(() => {
+    if (!isCopy) {
+      return
+    }
+    return {
+      text: replaceByRules(source, [
+        ['‘', ''],
+        ['’', ''],
+      ]),
+    }
+  }, [isCopy, source])
+
+  return (
+    <Typography.Paragraph
+      {...props}
+      ellipsis={ellipsis}
+      copyable={copyable}
+    >
+      <span
+        style={{ whiteSpace: 'pre' }}
+        dangerouslySetInnerHTML={{ __html: __html || source }}
+      />
+    </Typography.Paragraph>
+  )
+}

package/src/pro/Typography/index.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import { String as String_ } from './components/String'
+
+export const TypographyPro = {
+  String: String_,
+}
+
+export const String = String_

package/src/pro/index.ts

@@ -0,0 +1,10 @@
+export * from './Alert'
+export * from './Button'
+export * from './Card'
+export * from './Collapse'
+export * from './Image'
+export * from './Input'
+export * from './Radio'
+export * from './Space'
+export * from './Typography'
+export * from './Popconfirm'