@wzyjs/uis 0.3.27 → 0.3.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wzyjs/uis",
-  "version": "0.3.27",
+  "version": "0.3.29",
   "description": "description",
   "author": "wzy",
   "sideEffects": false,
@@ -39,7 +39,6 @@
   },
   "peerDependencies": {
     "@wzyjs/hooks": "^0.2.37",
-    "@wzyjs/types": "^0.2.37",
     "@wzyjs/utils": "^0.2.37",
     "antd": "^6.0.0"
   },
@@ -47,7 +46,7 @@
     "@types/js-beautify": "^1.14.3",
     "@types/react-grid-layout": "1.3.5"
   },
-  "gitHead": "f9e5dcf56fea3b93a2614ad468ecb466e5da7945",
+  "gitHead": "a78702bb9367a10779eaa376ed70834d8b42b5a8",
   "publishConfig": {
     "access": "public"
   }

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

@@ -0,0 +1,131 @@
+'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/{Input/components/Range.tsx → RangeInput/index.tsx}

@@ -4,7 +4,7 @@ import React from 'react'
 import { InputNumber, InputNumberProps, Space } from 'antd'
 import { _ } from '@wzyjs/utils/web'
 
-export interface RangeProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
+export interface RangeInputProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
   value?: number[];
   min?: number;
   max?: number;
@@ -12,7 +12,7 @@ export interface RangeProps extends Omit<InputNumberProps, 'value' | 'onChange'>
 }
 
 // 最小值 最大值 的输入框
-export const Range = (props: RangeProps) => {
+export const RangeInput = (props: RangeInputProps) => {
   const { value = [], min, max, onChange } = props
 
   const onNumberChange = (index: 0 | 1, v: number | null) => {

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

@@ -0,0 +1,135 @@
+'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)
+      }}
+    />
+  )
+}

package/src/antd/pro/buttons/ButtonGroup.tsx

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

package/src/antd/pro/{Button/components/Confirm.tsx → buttons/ConfirmButton.tsx}

@@ -4,12 +4,12 @@ import React from 'react'
 import { _ } from '@wzyjs/utils/web'
 import { Button, Popconfirm, PopconfirmProps, ButtonProps } from 'antd'
 
-export interface ConfirmProps extends PopconfirmProps {
+export interface ConfirmButtonProps extends PopconfirmProps {
   btnProps?: ButtonProps
 }
 
 // 1. 给按钮增加了确认功能
-export const Confirm = (props: ConfirmProps) => {
+export const ConfirmButton = (props: ConfirmButtonProps) => {
   const { children, btnProps } = props
 
   return (

package/src/antd/pro/{Button/components/Copy.tsx → buttons/CopyButton.tsx}

@@ -8,12 +8,12 @@ import { CheckOutlined } from '@ant-design/icons'
 import { copy, readClipboard } from '@wzyjs/utils/web'
 import { useControllableValue } from '@wzyjs/hooks/web'
 
-export interface CopyProps extends ButtonProps {
+export interface CopyButtonProps extends ButtonProps {
   value?: string,
   canPaste?: boolean,
 }
 
-export const Copy = (props: CopyProps) => {
+export const CopyButton = (props: CopyButtonProps) => {
   const [icon, setIcon] = useState<ReactNode>(null)
   const { message } = App.useApp()
 

package/src/antd/pro/{Button/components/Drawer.tsx → buttons/DrawerButton.tsx}

@@ -4,12 +4,12 @@ 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 {
+export interface DrawerButtonProps extends AntdDrawerProps {
   btnProps?: ButtonProps
   defaultOpen?: boolean
 }
 
-export const Drawer = (props: DrawerProps) => {
+export const DrawerButton = (props: DrawerButtonProps) => {
   const { children, defaultOpen, btnProps } = props
   const [open, setOpen] = useState<boolean>(defaultOpen ?? false)
 

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

@@ -0,0 +1,4 @@
+export * from './ButtonGroup'
+export * from './ConfirmButton'
+export * from './CopyButton'
+export * from './DrawerButton'

package/src/antd/pro/index.ts

@@ -1,10 +1,5 @@
-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 './buttons'
+export * from './FoldCard'
+export * from './RangeInput'
+export * from './Tabs'
 export * from './Typography'
-export * from './Popconfirm'

package/src/components/Crud/components/CreateUpdate/index.tsx

@@ -1,13 +1,50 @@
+'use client'
+
+import { useMemo, useState } from 'react'
 import { Button, type DrawerProps, type ModalProps } from 'antd'
 import { PlusOutlined, EditOutlined  } from '@ant-design/icons'
 import { BetaSchemaForm } from '@ant-design/pro-components'
 
-import type { CreateUpdateProps } from '../../types'
+import type { CreateUpdateProps, ProColumnsPro } from '../../types'
+
+const isActionColumn = (column: ProColumnsPro) => (
+  column.valueType === 'option'
+  || column.key === 'option'
+  || column.key === 'action'
+  || column.title === '操作'
+)
+
+const getFormColumns = (columns: ProColumnsPro[]) => {
+  return columns
+    .filter(column => !column.hideInForm && !isActionColumn(column) && column.key !== '__drag_sort__')
+    .map((column) => {
+      const {
+        fixed,
+        sorter,
+        sortOrder,
+        defaultSortOrder,
+        filters,
+        onFilter,
+        onCell,
+        onHeaderCell,
+        ellipsis,
+        copyable,
+        render,
+        renderText,
+        width,
+        ...formColumn
+      } = column as ProColumnsPro & Record<string, unknown>
+
+      return formColumn as ProColumnsPro
+    })
+}
 
 export const CreateUpdate = (props: CreateUpdateProps) => {
   const { crud, columns, config, record } = props
 
   const isEdit = !!record
+  const [open, setOpen] = useState(false)
+  const [formRendered, setFormRendered] = useState(false)
 
   const {
     mode = 'drawer',
@@ -19,20 +56,49 @@ export const CreateUpdate = (props: CreateUpdateProps) => {
     width,
   } = config
 
-  const { drawerProps, modalProps, ...formSafeProps } = formProps as unknown as { drawerProps?: DrawerProps; modalProps?: ModalProps } & Record<string, unknown>
+  const {
+    drawerProps,
+    modalProps,
+    initialValues,
+    onOpenChange,
+    onVisibleChange,
+    open: _open,
+    visible: _visible,
+    ...formSafeProps
+  } = formProps as unknown as {
+    drawerProps?: DrawerProps
+    modalProps?: ModalProps
+    initialValues?: Record<string, unknown>
+    onOpenChange?: (open: boolean) => void
+    onVisibleChange?: (open: boolean) => void
+    open?: boolean
+    visible?: boolean
+  } & Record<string, unknown>
 
   const layoutType = mode === 'modal' ? 'ModalForm' : 'DrawerForm'
 
-  // const finalDrawerProps: DrawerProps | undefined = layoutType === 'DrawerForm'
-  //   ? { forceRender: false, ...drawerProps }
-  //   : undefined
-  //
-  // const finalModalProps: ModalProps | undefined = layoutType === 'ModalForm'
-  //   ? { forceRender: false, ...modalProps }
-  //   : undefined
+  const formColumns = useMemo(() => getFormColumns(columns), [columns])
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen)
+    if (nextOpen) {
+      setFormRendered(true)
+    }
+    onOpenChange?.(nextOpen)
+    onVisibleChange?.(nextOpen)
+  }
+
+  const openForm = (event: any) => {
+    buttonProps.onClick?.(event)
+    if (event.defaultPrevented) {
+      return
+    }
+    setFormRendered(true)
+    setOpen(true)
+  }
 
   const onFinish = async (values: Record<string, unknown>) => {
-    const finalValues = transformData ? transformData(values, record) : values
+    const finalValues = transformData ? await transformData(values, record) : values
 
     if (isEdit) {
       await crud.updateState.mutateAsync(record.id, finalValues)
@@ -47,7 +113,6 @@ export const CreateUpdate = (props: CreateUpdateProps) => {
       return record.id
     }
 
-    const initialValues: unknown = (formSafeProps as { initialValues?: unknown }).initialValues
     if (!initialValues) {
       return 'create'
     }
@@ -63,37 +128,52 @@ export const CreateUpdate = (props: CreateUpdateProps) => {
     }
   })()
 
-  return (
-    <BetaSchemaForm
-      key={formKey}
-      layoutType={layoutType as any}
-      title={title}
-      width={width}
-      columns={columns as any}
-      onFinish={onFinish}
-      layout='horizontal'
-      labelCol={{ span: 4 }}
-      initialValues={{
-        ...(record ?? {}),
-        ...(coverData ? coverData(record) : {}),
-      }}
-      {...(drawerProps ? { drawerProps } : {})}
-      {...(modalProps ? { modalProps } : {})}
-      trigger={
-        isEdit ? (
-          <Button
-            type='link'
-            size='small'
-            icon={<EditOutlined />}
-            {...buttonProps}
-          />
-        ) : (
-          <Button type='primary' icon={<PlusOutlined />} {...buttonProps}>
-            新建
-          </Button>
-        )
-      }
-      {...formSafeProps}
+  const finalInitialValues = {
+    ...(record ?? {}),
+    ...(initialValues ?? {}),
+    ...(coverData ? coverData(record) : {}),
+  }
+
+  const trigger = isEdit ? (
+    <Button
+      type='link'
+      size='small'
+      icon={<EditOutlined />}
+      {...buttonProps}
+      onClick={openForm}
     />
+  ) : (
+    <Button
+      type='primary'
+      icon={<PlusOutlined />}
+      {...buttonProps}
+      onClick={openForm}
+    >
+      新建
+    </Button>
+  )
+
+  return (
+    <>
+      {trigger}
+      {formRendered ? (
+        <BetaSchemaForm
+          key={formKey}
+          layoutType={layoutType as any}
+          title={title}
+          width={width}
+          columns={formColumns as any}
+          onFinish={onFinish}
+          layout='horizontal'
+          labelCol={{ span: 4 }}
+          initialValues={finalInitialValues}
+          open={open}
+          onOpenChange={handleOpenChange}
+          {...(drawerProps ? { drawerProps } : {})}
+          {...(modalProps ? { modalProps } : {})}
+          {...formSafeProps}
+        />
+      ) : null}
+    </>
   )
 }

package/src/components/Crud/components/Provider/index.tsx

@@ -1,6 +1,9 @@
-import { type PropsWithChildren, useContext } from 'react'
+'use client'
+
+import { type PropsWithChildren, useContext, useMemo } from 'react'
 import { Tag, Switch } from 'antd'
 import { ProProvider, ProFormSelect } from '@ant-design/pro-components'
+import type { ProRenderFieldPropsType } from '@ant-design/pro-provider'
 
 import type { Crud } from '../../types'
 
@@ -19,52 +22,59 @@ export const Provider = (props: ProviderProps) => {
     }
   }
 
+  const valueTypeMap = useMemo<Record<string, ProRenderFieldPropsType>>(() => ({
+    ...defaultContext.valueTypeMap,
+    tags: {
+      renderFormItem: (_: unknown, props: any) => {
+        const { options, ...restFieldProps } = props.fieldProps || {}
+
+        let processedOptions = options
+
+        if (Array.isArray(options) && options.length > 0 && typeof options[0] === 'string') {
+          processedOptions = options.map((item: string) => ({
+            label: item,
+            value: item,
+          }))
+        }
+
+        return (
+          <ProFormSelect
+            placeholder='请输入标签'
+            mode='tags'
+            options={processedOptions}
+            {...restFieldProps}
+          />
+        )
+      },
+      render: (tags: string[]) => {
+        return (
+          <>
+            {tags?.map((tag: string) => (
+              <Tag key={tag}>{tag}</Tag>
+            ))}
+          </>
+        )
+      },
+    },
+    enabled: {
+      render: (enabled: boolean, props: any) => {
+        return (
+          <Switch
+            loading={crud?.updateState.isLoading}
+            checked={enabled}
+            onChange={enabled => onSwitchChange(props.record?.id, enabled)}
+            disabled={!crud?.updateState}
+          />
+        )
+      },
+    },
+  }), [crud?.updateState, defaultContext.valueTypeMap])
+
   return (
     <ProProvider.Provider
       value={{
         ...defaultContext,
-        valueTypeMap: {
-          tags: {
-            renderFormItem: (_: unknown, props) => {
-              const { options, ...restFieldProps } = props.fieldProps || {}
-
-              let processedOptions = options
-
-              if (Array.isArray(options) && options.length > 0 && typeof options[0] === 'string') {
-                processedOptions = options.map((item: string) => ({
-                  label: item,
-                  value: item,
-                }))
-              }
-
-              return (
-                <ProFormSelect
-                  placeholder='请输入标签'
-                  mode='tags'
-                  options={processedOptions}
-                  {...restFieldProps}
-                />
-              )
-            },
-            render: (tags: string[]) => {
-              return tags?.map((tag: string) => (
-                <Tag key={tag}>{tag}</Tag>
-              ))
-            },
-          },
-          enabled: {
-            render: (enabled: boolean, props: any) => {
-              return (
-                <Switch
-                  loading={crud?.updateState.isLoading}
-                  checked={enabled}
-                  onChange={enabled => onSwitchChange(props.record?.id, enabled)}
-                  disabled={!crud?.updateState}
-                />
-              )
-            },
-          },
-        },
+        valueTypeMap,
       }}
     >
       {children}

package/src/components/DynamicSelect/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { AutoComplete, Button, Space } from 'antd'
 
+import type { Option } from './types'
+
 interface DynamicSelectProps {
   value?: string[]
   onChange?: (value: string[]) => void

package/src/components/DynamicSelect/types.ts

@@ -0,0 +1,8 @@
+export type OptionValue = string | number | boolean
+
+export interface Option<V extends OptionValue = OptionValue> {
+  label: string
+  value: V
+  children?: Option<V>[]
+  extra?: Record<string, any>
+}

package/src/components/DynamicSelect/utils.ts

@@ -1,3 +1,5 @@
+import type { Option } from './types'
+
 export const transformOptions = (data: string[][]): Option[] => {
   const result: Option[] = []
 

package/src/components/index.ts

@@ -6,7 +6,6 @@ export * from './Com2Canvas'
 export * from './Video'
 export * from './MultiImageDisplay'
 export * from './DownloadLink'
-export * from './Fold'
 export * from './DragSort'
 export * from './DateSwitcher'
 export * from './GroupLayout'

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/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>
-  )
-}

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

@@ -1,27 +0,0 @@
-'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/antd/pro/Image/index.tsx

@@ -1,17 +0,0 @@
-'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/antd/pro/Input/index.tsx

@@ -1,61 +0,0 @@
-'use client'
-
-import React, { useState, useEffect, useMemo } from 'react'
-import { Input, InputProps } from 'antd'
-import { getStrLength } from '@wzyjs/utils/web'
-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/antd/pro/Popconfirm/index.tsx

@@ -1,16 +0,0 @@
-'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/antd/pro/Radio/components/Cancel.tsx

@@ -1,30 +0,0 @@
-'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/antd/pro/Radio/index.tsx

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

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

@@ -1,15 +0,0 @@
-'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/components/Fold/index.tsx

@@ -1,52 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { Button } from 'antd'
-import { DownOutlined, UpOutlined } from '@ant-design/icons'
-
-interface FoldProps {
-  max: number
-  children?: React.ReactNode
-  btnStyle?: React.CSSProperties
-}
-
-export const Fold = (props: FoldProps) => {
-  const { max, children, btnStyle = {} } = props
-
-  const [collapsed, setCollapsed] = useState<boolean | undefined>(undefined)
-
-  const divRef = React.useRef<HTMLDivElement>(null)
-
-  React.useEffect(() => {
-    if (divRef.current) {
-      const { clientHeight } = divRef.current
-      if (clientHeight > max) {
-        setCollapsed(true)
-      }
-    }
-  }, [divRef.current])
-
-  return (
-    <div ref={divRef} style={{ overflow: 'hidden' }}>
-      <div style={{ maxHeight: collapsed ? max : undefined }}>
-        {children}
-      </div>
-
-      <div style={{ textAlign: 'center', ...btnStyle }}>
-        {collapsed === undefined ? null : collapsed ? (
-          <Button
-            size='small'
-            icon={<DownOutlined />}
-            onClick={() => setCollapsed(false)}
-          />
-        ) : (
-          <Button
-            size='small'
-            icon={<UpOutlined />}
-            onClick={() => setCollapsed(true)}
-          />
-        )}
-      </div>
-    </div>
-  )
-}