@wzyjs/uis 0.3.29 → 0.3.30

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

@@ -1,72 +0,0 @@
-'use client'
-
-import React, { useMemo } from 'react'
-
-import { Typography } from 'antd'
-import { TextProps } from 'antd/lib/typography/Text'
-
-import { replaceByRules } from '@wzyjs/utils/web'
-
-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/antd/pro/Typography/index.tsx

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

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

@@ -1,26 +0,0 @@
-'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/buttons/ConfirmButton.tsx

@@ -1,24 +0,0 @@
-'use client'
-
-import React from 'react'
-import { _ } from '@wzyjs/utils/web'
-import { Button, Popconfirm, PopconfirmProps, ButtonProps } from 'antd'
-
-export interface ConfirmButtonProps extends PopconfirmProps {
-  btnProps?: ButtonProps
-}
-
-// 1. 给按钮增加了确认功能
-export const ConfirmButton = (props: ConfirmButtonProps) => {
-  const { children, btnProps } = props
-
-  return (
-    <Popconfirm
-      okText='是'
-      cancelText='否'
-      {..._.omit(props, ['children', 'btnProps'])}
-    >
-      <Button type='link' {...btnProps}>{children}</Button>
-    </Popconfirm>
-  )
-}

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

@@ -1,47 +0,0 @@
-'use client'
-
-import React, { useState, ReactNode } from 'react'
-
-import { App, Button, ButtonProps } from 'antd'
-import { CheckOutlined } from '@ant-design/icons'
-
-import { copy, readClipboard } from '@wzyjs/utils/web'
-import { useControllableValue } from '@wzyjs/hooks/web'
-
-export interface CopyButtonProps extends ButtonProps {
-  value?: string,
-  canPaste?: boolean,
-}
-
-export const CopyButton = (props: CopyButtonProps) => {
-  const [icon, setIcon] = useState<ReactNode>(null)
-  const { message } = App.useApp()
-
-  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/antd/pro/buttons/DrawerButton.tsx

@@ -1,37 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { _ } from '@wzyjs/utils/web'
-import { Button, Drawer as AntdDrawer, DrawerProps as AntdDrawerProps, ButtonProps } from 'antd'
-
-export interface DrawerButtonProps extends AntdDrawerProps {
-  btnProps?: ButtonProps
-  defaultOpen?: boolean
-}
-
-export const DrawerButton = (props: DrawerButtonProps) => {
-  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)}
-        destroyOnHidden
-        {..._.omit(props, ['children', 'btnProps'])}
-      >
-        {children}
-      </AntdDrawer>
-    </>
-  )
-}

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

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

package/src/antd/pro/index.ts

@@ -1,5 +0,0 @@
-export * from './buttons'
-export * from './FoldCard'
-export * from './RangeInput'
-export * from './Tabs'
-export * from './Typography'

package/src/components/BottomBar/index.tsx

@@ -1,28 +0,0 @@
-'use client'
-
-import { ReactNode } from 'react'
-
-interface BottomBarProps {
-  children?: ReactNode
-  collapsed?: boolean
-}
-
-const style = {
-  display: 'flex',
-  justifyContent: 'center',
-  padding: 10,
-  right: 0,
-  bottom: 0,
-  boxShadow: '0 0 2px 0 rgba(0, 0, 0, 0.1)',
-  background: '#fff',
-}
-
-export const BottomBar = (props: BottomBarProps) => {
-  const { children, collapsed } = props
-
-  return (
-    <div style={{ ...style, left: collapsed ? 64 : 256, position: 'fixed' }}>
-      {children}
-    </div>
-  )
-}

package/src/components/CodeView/index.tsx

@@ -1,85 +0,0 @@
-'use client'
-
-import React, { CSSProperties, useEffect, useMemo, useRef } from 'react'
-
-import Prism from 'prismjs'
-import { format } from 'prettier/standalone'
-import parserBabel from 'prettier/parser-babel'
-import parserTs from 'prettier/parser-typescript'
-import { js_beautify, html_beautify, css_beautify } from 'js-beautify'
-
-import 'prismjs/components/prism-jsx'
-import 'prismjs/components/prism-tsx'
-import 'prismjs/components/prism-json'
-
-import 'prismjs/components/prism-javascript'
-import 'prismjs/components/prism-typescript'
-
-import 'prismjs/components/prism-css'
-import 'prismjs/components/prism-less'
-import 'prismjs/components/prism-sass'
-import 'prismjs/components/prism-scss'
-
-import 'prismjs/components/prism-bash'
-import 'prismjs/components/prism-http'
-import 'prismjs/components/prism-editorconfig'
-import 'prismjs/components/prism-docker'
-import 'prismjs/components/prism-git'
-import 'prismjs/components/prism-ignore'
-import 'prismjs/components/prism-yaml'
-
-import 'prismjs/themes/prism.css'
-
-interface CodeViewProps {
-  language?: 'html' | 'jsx' | 'tsx' | 'vue' | 'json' | 'javascript' | 'typescript' | 'css' | 'less' | 'sass' | 'scss' | 'bash' | 'http' | 'editorconfig' | 'dockerfile' | 'git' | 'ignore' | 'yaml'
-  code?: string,
-  children?: any,
-  style?: CSSProperties,
-}
-
-export const CodeView = (props: CodeViewProps) => {
-  const { language = 'javascript', style, children, code = children } = props
-
-  const preRef = useRef(null)
-  useEffect(() => {
-    if (!preRef.current) {
-      return
-    }
-    Prism.highlightElement(preRef.current)
-  }, [])
-
-  const beautifydCode = useMemo(() => {
-    if (language === 'html') {
-      return html_beautify(code, { indent_size: 2 })
-    }
-    if (language === 'css') {
-      return css_beautify(code, { indent_size: 2 })
-    }
-    if (language === 'javascript') {
-      return js_beautify(code, { indent_size: 2 })
-    }
-
-    try {
-      return format(code, {
-        semi: false,
-        parser: 'babel',
-        singleQuote: true,
-        tabWidth: 2,
-        jsxSingleQuote: true,
-        plugins: [parserBabel, parserTs],
-      })
-    } catch (e) {
-      return code
-    }
-  }, [code])
-
-  return (
-    <div style={{ overflow: 'scroll', ...style }}>
-      <pre style={{ margin: 0, backgroundColor: 'transparent' }}>
-        <code ref={preRef} className={`language-${language}`}>
-          {beautifydCode}
-        </code>
-      </pre>
-    </div>
-  )
-}

package/src/components/Collapse/index.tsx

@@ -1,26 +0,0 @@
-'use client'
-
-import { ReactNode } from 'react'
-import { useBoolean } from '@wzyjs/hooks/web'
-import { RightOutlined, LeftOutlined } from '@ant-design/icons'
-
-interface CollapseProps {
-  children: ReactNode
-}
-
-export const Collapse = (props: CollapseProps) => {
-  const { children } = props
-
-  const [collapse, { setTrue, setFalse }] = useBoolean(false)
-
-  return (
-    <div>
-      <div style={{ transform: 'translateY(100px)' }}>
-        {collapse ? <LeftOutlined onClick={setFalse} /> : <RightOutlined onClick={setTrue} />}
-      </div>
-      <div style={{ width: collapse ? 0 : 'auto', visibility: collapse ? 'hidden' : 'visible' }}>
-        {children}
-      </div>
-    </div>
-  )
-}

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