@wzyjs/uis 0.3.10 → 0.3.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wzyjs/uis",
-  "version": "0.3.10",
+  "version": "0.3.16",
   "description": "description",
   "author": "wzy",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@wzyjs/utils": "^0.2.37",
     "antd": "^6.0.0"
   },
-  "gitHead": "74b286716c6df30605f96415a28ee8084cd18923",
+  "gitHead": "58a36c9fd59e43928b80701cdd7896754ea0db97",
   "publishConfig": {
     "access": "public"
   }

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

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

@@ -9,10 +9,11 @@ interface FilterButtonProps<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', style, onChange } = props
+  const { value, options, buttonStyle = 'outline', disabled, style, onChange } = props
 
   return (
     <Radio.Group
@@ -20,6 +21,7 @@ export const RadioButton = <V = string | number | boolean | null>(props: FilterB
       buttonStyle={buttonStyle}
       value={value}
       style={style}
+      disabled={disabled}
       onChange={e => onChange?.(e.target.value as V)}
     >
       {options.filter(item => item.label).map(item => (

package/src/antd/form/index.ts

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

package/src/antd/index.ts

@@ -15,6 +15,8 @@ export {
   ProTable,
   ProDescriptions,
 
+  ProForm,
+  ProFormList,
   ProFormText,
   ProFormCaptcha,
   ProFormCheckbox,

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

@@ -0,0 +1,174 @@
+'use client'
+
+import React, { type ReactNode } from 'react'
+
+import { Card, Col, Row, Avatar } from 'antd'
+import { Remove } from '../Remove'
+import { CreateUpdate } from '../CreateUpdate'
+
+import type { ListProps } from '../../types'
+
+export const CardList = (props: ListProps) => {
+  const { crud, columns, list, update, remove } = props
+
+  const cardConfig = list.cardConfig!
+  const {
+    gutter = [16, 16],
+    col = { xs: 24, md: 8, lg: 6 },
+    height = 'calc(100vh - 210px)',
+    render: customRender,
+    card,
+  } = cardConfig
+
+  const dataSource = crud.listState.data || []
+
+  // 默认操作按钮生成函数
+  const getDefaultActions = (record: any): ReactNode[] => {
+    const actions: ReactNode[] = []
+
+    if (update !== false) {
+      actions.push(
+        <CreateUpdate
+          key='edit'
+          crud={crud}
+          columns={columns}
+          config={update || {}}
+          record={record}
+        />
+      )
+    }
+
+    if (remove !== false) {
+      actions.push(
+        <Remove
+          key='delete'
+          crud={crud}
+          config={remove || {}}
+          record={record}
+        />
+      )
+    }
+
+    return actions
+  }
+
+  // 解析卡片字段值
+  const parseFieldValue = (field: any, record: any): any => {
+    if (typeof field === 'string') {
+      return record[field]
+    }
+    return field
+  }
+
+  // 渲染单个卡片项
+  const renderCardItem = (record: any, index: number) => {
+    const defaultActions = getDefaultActions(record)
+
+    // 如果有完全自定义渲染函数，直接使用
+    if (customRender) {
+      return customRender(record, index, defaultActions)
+    }
+
+    // 获取卡片配置（支持函数和对象两种形式）
+    const cardConfig = typeof card === 'function' ? card(record, index) : card
+    const {
+      title,
+      extra,
+      content,
+      cover,
+      meta,
+      actions: configActions,
+      props: cardProps = {},
+    } = cardConfig
+
+    // 渲染封面
+    const renderCover = () => {
+      if (!cover) return undefined
+      return parseFieldValue(cover, record)
+    }
+
+      // 渲染标题
+      const renderTitle = () => {
+        if (title !== undefined) {
+          return parseFieldValue(title, record)
+        }
+        // 默认标题逻辑
+        return record.title || record.name || record.id
+      }
+
+      // 渲染右上角
+      const renderExtra = () => {
+        if (extra !== undefined) {
+          return parseFieldValue(extra, record)
+        }
+        return null
+      }
+
+    // 渲染内容
+    const renderContent = () => {
+      if (content !== undefined) {
+        return parseFieldValue(content, record)
+        }
+        return null
+      }
+
+      // 渲染操作按钮
+      const renderActions = () => {
+        if (configActions && configActions.length > 0) {
+          return configActions.map(action => parseFieldValue(action, record))
+        }
+        return defaultActions
+      }
+
+    // 渲染元数据
+    const renderMeta = () => {
+      if (!meta) return undefined
+
+      const metaTitle = meta.title ? parseFieldValue(meta.title, record) : undefined
+      const metaDescription = meta.description ? parseFieldValue(meta.description, record) : undefined
+      const metaAvatar = meta.avatar ? parseFieldValue(meta.avatar, record) : undefined
+
+      if (!metaTitle && !metaDescription && !metaAvatar) {
+        return undefined
+      }
+
+      return (
+        <Card.Meta
+          title={metaTitle}
+          description={metaDescription}
+          avatar={metaAvatar && (
+            typeof metaAvatar === 'string' ? (
+              <Avatar src={metaAvatar} />
+            ) : (
+              metaAvatar
+            )
+          )}
+        />
+      )
+    }
+
+      return (
+        <Card
+          size='small'
+          title={renderTitle()}
+          extra={renderExtra()}
+          cover={renderCover()}
+          actions={renderActions()}
+          {...cardProps}
+        >
+          {renderMeta()}
+          {renderContent()}
+        </Card>
+      )
+  }
+
+  return (
+    <Row gutter={gutter} style={{ overflow: 'auto', height }}>
+      {dataSource.map((record, index) => (
+        <Col key={record.id || index} {...col}>
+          {renderCardItem(record, index)}
+        </Col>
+      ))}
+    </Row>
+  )
+}

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

@@ -0,0 +1,99 @@
+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'
+
+export const CreateUpdate = (props: CreateUpdateProps) => {
+  const { crud, columns, config, record } = props
+
+  const isEdit = !!record
+
+  const {
+    mode = 'drawer',
+    title = isEdit ? '编辑' : '新建',
+    buttonProps = {},
+    formProps = {},
+    transformData,
+    coverData,
+    width,
+  } = config
+
+  const { drawerProps, modalProps, ...formSafeProps } = formProps as unknown as { drawerProps?: DrawerProps; modalProps?: ModalProps } & Record<string, unknown>
+
+  const layoutType = mode === 'modal' ? 'ModalForm' : 'DrawerForm'
+
+  const finalDrawerProps: DrawerProps | undefined = layoutType === 'DrawerForm'
+    ? { forceRender: true, ...drawerProps }
+    : undefined
+
+  const finalModalProps: ModalProps | undefined = layoutType === 'ModalForm'
+    ? { forceRender: false, ...modalProps }
+    : undefined
+
+  const onFinish = async (values: Record<string, unknown>) => {
+    const finalValues = transformData ? transformData(values, record) : values
+
+    if (isEdit) {
+      await crud.updateState.mutateAsync(record.id, finalValues)
+    } else {
+      await crud.createState.mutateAsync(finalValues)
+    }
+    return true
+  }
+
+  const formKey = (() => {
+    if (isEdit && record) {
+      return record.id
+    }
+
+    const initialValues: unknown = (formSafeProps as { initialValues?: unknown }).initialValues
+    if (!initialValues) {
+      return 'create'
+    }
+
+    if (typeof initialValues !== 'object') {
+      return `create-${JSON.stringify(initialValues)}`
+    }
+
+    try {
+      return `create-${JSON.stringify(initialValues)}`
+    } catch {
+      return 'create'
+    }
+  })()
+
+  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) : {}),
+      }}
+      {...(finalDrawerProps ? { drawerProps: finalDrawerProps } : {})}
+      {...(finalModalProps ? { modalProps: finalModalProps } : {})}
+      trigger={
+        isEdit ? (
+          <Button
+            type='link'
+            size='small'
+            icon={<EditOutlined />}
+            {...buttonProps}
+          />
+        ) : (
+          <Button type='primary' icon={<PlusOutlined />} {...buttonProps}>
+            新建
+          </Button>
+        )
+      }
+      {...formSafeProps}
+    />
+  )
+}

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

@@ -0,0 +1,73 @@
+import { type PropsWithChildren, useContext } from 'react'
+import { Tag, Switch } from 'antd'
+import { ProProvider, ProFormSelect } from '@ant-design/pro-components'
+
+import type { Crud } from '../../types'
+
+interface ProviderProps extends PropsWithChildren {
+  crud?: Crud
+}
+
+export const Provider = (props: ProviderProps) => {
+  const { children, crud } = props
+
+  const defaultContext = useContext(ProProvider)
+
+  const onSwitchChange = (id: string, enabled: boolean) => {
+    if (crud?.updateState) {
+      crud.updateState.mutate(id, { enabled })
+    }
+  }
+
+  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}
+                />
+              )
+            },
+          },
+        },
+      }}
+    >
+      {children}
+    </ProProvider.Provider>
+  )
+}

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

@@ -0,0 +1,56 @@
+import { Popconfirm, Button } from 'antd'
+import { DeleteOutlined } from '@ant-design/icons'
+
+import type { RemoveProps } from '../../types'
+
+export const Remove = (props: RemoveProps) => {
+  const { crud, config, record } = props
+
+  const {
+    confirm = true,
+    buttonProps = {},
+    title = '确定要删除吗?',
+    content,
+  } = config
+
+  const onConfirm = () => {
+    crud.removeState.mutate(record.id)
+  }
+
+  // 如果不需要确认，直接执行删除
+  if (!confirm) {
+    return (
+      <Button
+        type='link'
+        danger
+        size='small'
+        icon={<DeleteOutlined />}
+        loading={crud.removeState.isLoading}
+        onClick={onConfirm}
+        {...buttonProps}
+      />
+    )
+  }
+
+  // 需要确认的删除按钮
+  return (
+    <Popconfirm
+      title={title}
+      description={content}
+      onConfirm={onConfirm}
+      okText='确定'
+      cancelText='取消'
+      okButtonProps={{
+        loading: crud.removeState.isLoading,
+      }}
+    >
+      <Button
+        type='link'
+        danger
+        size='small'
+        icon={<DeleteOutlined />}
+        {...buttonProps}
+      />
+    </Popconfirm>
+  )
+}

package/src/components/Crud/components/index.ts

@@ -0,0 +1,4 @@
+export { CreateUpdate } from './CreateUpdate'
+export { Remove } from './Remove'
+export { CardList } from './CardList'
+export { Provider } from './Provider'

package/src/components/Crud/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useColumns } from './useColumns'
+export { useList } from './useList'
+export { useRequest } from './useRequest'
+export { useOrderable } from './useOrderable'