@wzyjs/uis 0.3.28 → 0.3.30

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

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

@@ -1,179 +0,0 @@
-'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, 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',
-    title = isEdit ? '编辑' : '新建',
-    buttonProps = {},
-    formProps = {},
-    transformData,
-    coverData,
-    width,
-  } = config
-
-  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 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 ? await 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
-    }
-
-    if (!initialValues) {
-      return 'create'
-    }
-
-    if (typeof initialValues !== 'object') {
-      return `create-${JSON.stringify(initialValues)}`
-    }
-
-    try {
-      return `create-${JSON.stringify(initialValues)}`
-    } catch {
-      return 'create'
-    }
-  })()
-
-  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,83 +0,0 @@
-'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'
-
-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 })
-    }
-  }
-
-  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,
-      }}
-    >
-      {children}
-    </ProProvider.Provider>
-  )
-}

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

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

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

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

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

package/src/components/Crud/hooks/useColumns.tsx

@@ -1,169 +0,0 @@
-import React, { useMemo } from 'react'
-
-import { Space } from 'antd'
-import { CreateUpdate, Remove } from '../components'
-
-import type { ProColumnsPro, CrudProps } from '../types'
-
-interface UseColumnsParams {
-  columns: CrudProps['columns']
-  crud: CrudProps['crud']
-  update: CrudProps['update']
-  remove: CrudProps['remove']
-}
-
-const normalizeCellDom = (dom: React.ReactNode): React.ReactNode => {
-  if (!dom || typeof dom !== 'object') {
-    return dom
-  }
-
-  if ('children' in dom && 'props' in dom) {
-    return (dom as any).children
-  }
-
-  return dom
-}
-
-const normalizeRenderResult = (result: unknown) => {
-  if (!result || typeof result !== 'object') {
-    return result
-  }
-
-  if ('children' in result && 'props' in result) {
-    return (result as any).children
-  }
-
-  return result
-}
-
-export const useColumns = ({ columns, crud, update, remove }: UseColumnsParams) => {
-  // 检查是否需要显示操作列
-  const hasActions = update !== false || remove !== false
-
-  // 智能合并操作列
-  const finalColumns: ProColumnsPro[] = useMemo(() => {
-    // const proColumns = transformColumns(columns)
-    const proColumns: ProColumnsPro[] = columns.map((col: ProColumnsPro) => {
-      const isActionColumn: boolean = col.valueType === 'option'
-        || col.key === 'option'
-        || col.key === 'action'
-        || col.title === '操作'
-
-      if (col.render) {
-        const originalRender = col.render
-        return {
-          ...col,
-          render: (dom: any, record: any, index: any, action: any, schema: any) => {
-            return normalizeRenderResult(originalRender(dom, record, index, action, schema)) as any
-          },
-        }
-      }
-
-      if (isActionColumn) {
-        return col
-      }
-
-      return {
-        ...col,
-        // DragSortTable 需要包一层，不然有的字段不显示
-        render: (dom: React.ReactNode): React.ReactNode => normalizeCellDom(dom),
-      }
-    })
-
-    // 生成默认的操作按钮
-    const generateDefaultActions = (record: any) => {
-      const actions = []
-
-      if (update !== false) {
-        actions.push(
-          <CreateUpdate
-            key='update'
-            crud={crud}
-            columns={columns}
-            config={update || {}}
-            record={record}
-          />,
-        )
-      }
-
-      if (remove !== false) {
-        actions.push(
-          <Remove
-            key='remove'
-            crud={crud}
-            config={remove || {}}
-            record={record}
-          />,
-        )
-      }
-
-      return actions
-    }
-
-    // 查找是否已存在操作列
-    const existingActionColumnIndex = proColumns.findIndex(
-      col => col.key === 'option' || col.key === 'action' || col.title === '操作',
-    )
-
-    if (existingActionColumnIndex !== -1) {
-      // 如果已存在操作列，合并操作
-      const existingColumn = proColumns[existingActionColumnIndex]
-      if (!existingColumn) return proColumns
-
-      const originalRender = existingColumn.render
-
-      const mergedColumns = [...proColumns]
-      mergedColumns[existingActionColumnIndex] = {
-        ...existingColumn,
-        render: (text: any, record: any, index: number, action: any, schema: any) => {
-          const defaultActions = hasActions ? generateDefaultActions(record) : []
-
-          // 如果用户定义了自定义渲染，调用它
-          if (originalRender) {
-            const customActions = originalRender(text, record, index, action, schema)
-
-            // 如果自定义渲染返回 ReactElement 或数组，合并操作
-            if (React.isValidElement(customActions) || Array.isArray(customActions)) {
-              return (
-                <Space>
-                  {customActions}
-                  {defaultActions}
-                </Space>
-              )
-            }
-
-            // 如果自定义渲染返回其他内容，直接使用
-            return customActions
-          }
-
-          // 没有自定义渲染时，只显示默认操作
-          return <Space>{defaultActions}</Space>
-        },
-      }
-
-      return mergedColumns
-    } else {
-      // 如果不存在操作列且需要操作，添加新的操作列
-      return [
-        ...proColumns,
-        ...(hasActions ? [{
-          title: '操作',
-          dataIndex: 'action',
-          key: 'action',
-          fixed: 'right' as const,
-          width: 120,
-          search: false,
-          render: (_: any, record: any) => (
-            <Space>
-              {generateDefaultActions(record)}
-            </Space>
-          ),
-        }] : []),
-      ]
-    }
-  }, [columns, hasActions, update, remove, crud])
-
-  return {
-    finalColumns,
-  }
-}