@wzyjs/uis 0.3.29 → 0.3.31

package/src/components/Com2Canvas/index.tsx

@@ -1,60 +0,0 @@
-'use client'
-
-import React, { useEffect, useRef, ReactNode } from 'react'
-
-import html2canvas from 'html2canvas'
-
-import { useDebounceFn } from '@wzyjs/hooks/web'
-import { getRandomColor } from '@wzyjs/utils/web'
-
-interface Com2CanvasProps {
-  children: ReactNode;
-  downloadName?: string;
-  onChange?: (url: string) => void;
-}
-
-export const Com2Canvas = (props: Com2CanvasProps) => {
-  const { children, downloadName, onChange } = props
-
-  const random = useRef(getRandomColor())
-  const htmlId = `h2c_html_${random.current}`
-  const canvasId = `htc_canvas_${random.current}`
-
-  const { run } = useDebounceFn(() => {
-    const el = document.querySelector(`#${canvasId}`) as HTMLElement
-    if (!el) {
-      return
-    }
-
-    html2canvas(el, {
-      allowTaint: true, // 允许污染
-      useCORS: true, // 使用跨域(当allowTaint为true时这段代码没什么用)
-      scale: 2,
-    }).then((canvas: any) => {
-      el.innerHTML = ''
-      el.appendChild(canvas)
-
-      onChange?.(canvas.toDataURL('image/png'))
-
-      if (downloadName) {
-        el.onclick = () => {
-          const a = document.createElement('a')
-          a.download = downloadName
-          a.href = canvas.toDataURL('image/png')
-          document.body.appendChild(a)
-          a.click()
-          a.remove()
-        }
-      }
-    })
-  }, { wait: 500 })
-
-  useEffect(run, [children])
-
-  return (
-    <span style={{ position: 'relative' }}>
-      <span id={htmlId}>{children}</span>
-      <span id={canvasId} style={{ position: 'absolute', top: 0 }} />
-    </span>
-  )
-}

package/src/components/CompileHtml/index.tsx

@@ -1,26 +0,0 @@
-'use client'
-
-import React, { useMemo } from 'react'
-import Handlebars from 'handlebars'
-
-interface Props {
-  template?: string
-  data: any
-}
-
-export default (props: Props) => {
-  const { template, data } = props
-
-  const html = useMemo(() => {
-    const html = Handlebars.compile(template || '')(data)
-    return html.replaceAll('\n', '').replaceAll('\t', '')
-  }, [template, data])
-
-  if (!html) {
-    return null
-  }
-
-  return (
-    <div dangerouslySetInnerHTML={{ __html: html }} />
-  )
-}

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'