@wzyjs/uis 0.3.8

package/src/components/Com2Canvas/index.tsx

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

@@ -0,0 +1,26 @@
+'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/DateSwitcher/index.module.scss

@@ -0,0 +1,10 @@
+.picker {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  :global(.ant-picker-input input) {
+    text-align: center !important;
+    cursor: pointer;
+  }
+}

package/src/components/DateSwitcher/index.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import React, { useState } from 'react'
+
+import { DatePicker, Button } from 'antd'
+import { LeftOutlined, RightOutlined } from '@ant-design/icons'
+
+import { dayjs, type Dayjs } from '@wzyjs/utils/web'
+
+import styles from './index.module.scss'
+
+interface DateSwitcherProps {
+  value?: Dayjs
+  onChange?: (date: Dayjs) => void
+}
+
+export const DateSwitcher = (props: DateSwitcherProps) => {
+  const { value = dayjs(), onChange } = props
+
+  const [selectedDate, setSelectedDate] = useState(value)
+
+  const handleDateChange = (date: Dayjs | null) => {
+    if (date) {
+      setSelectedDate(date)
+      onChange?.(date)
+    }
+  }
+
+  const handlePrevDay = () => {
+    const newDate = selectedDate.subtract(1, 'day')
+    handleDateChange(newDate)
+  }
+
+  const handleNextDay = () => {
+    const newDate = selectedDate.add(1, 'day')
+    handleDateChange(newDate)
+  }
+
+  const isToday = selectedDate.isSame(dayjs(), 'day')
+
+  return (
+    <div className={styles.picker}>
+      <Button
+        type='text'
+        icon={<LeftOutlined />}
+        onClick={handlePrevDay}
+        className='flex items-center justify-center'
+      />
+      <DatePicker
+        value={selectedDate}
+        onChange={handleDateChange}
+        allowClear={false}
+        suffixIcon={null}
+        className='w-40 text-center cursor-pointer'
+        style={{ border: 'none' }}
+        components={{
+          input: props => (
+            <div {...props} className={isToday ? 'text-green-600' : ''}>
+              <span>{selectedDate.format('YYYY-MM-DD')}</span>
+              <span style={{ marginLeft: 5 }}>
+                (周{['日', '一', '二', '三', '四', '五', '六'][dayjs(selectedDate).day()]})
+              </span>
+            </div>
+          ),
+        }}
+      />
+      <Button
+        type='text'
+        icon={<RightOutlined />}
+        onClick={handleNextDay}
+        className='flex items-center justify-center'
+      />
+    </div>
+  )
+}

package/src/components/DownloadLink/index.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react'
+
+interface DownloadLinkProps {
+  url: string
+  filename?: string
+}
+
+export const DownloadLink = ({ url, filename }: DownloadLinkProps) => {
+  const handleDownload = (e: any) => {
+    e.preventDefault()
+    fetch(url, { method: 'GET' })
+    .then(response => response.blob())
+    .then(blob => {
+      const downloadUrl = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = downloadUrl
+      a.download = filename || '下载文件'
+      document.body.appendChild(a)
+      a.click()
+      a.remove()
+      window.URL.revokeObjectURL(downloadUrl)
+    })
+    .catch((err) => {
+      console.log(666, err)
+      alert('下载失败')
+    })
+  }
+
+  return (
+    <a href={url} onClick={handleDownload}>
+      下载
+    </a>
+  )
+}

package/src/components/DragSort/index.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import React from 'react'
+
+import { Space } from 'antd'
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  type OnDragEndResponder,
+  type DraggableProvided,
+} from 'react-beautiful-dnd'
+
+interface DragSortProps<T> {
+  direction?: 'vertical' | 'horizontal'
+  droppableId?: string
+  list?: T[]
+  children: (item: T, provided: DraggableProvided) => React.ReactNode
+  lastChildren?: React.ReactNode
+  onDragEnd?: OnDragEndResponder
+  hasContext?: boolean
+  dropType?: string
+}
+
+export { type DropResult, type DraggableProvided } from 'react-beautiful-dnd'
+
+export const DragSort = <T extends { id: string }>(props: DragSortProps<T>) => {
+  const {
+    dropType,
+    direction = 'vertical',
+    droppableId = 'list',
+    list,
+    children,
+    hasContext = true,
+    lastChildren,
+    onDragEnd = () => undefined,
+  } = props
+
+  const content = (
+    <Droppable
+      type={dropType}
+      droppableId={droppableId}
+      direction={direction}
+      isDropDisabled={false}
+      isCombineEnabled={false}
+      ignoreContainerClipping
+    >
+      {provided => (
+        <div ref={provided.innerRef} {...provided.droppableProps}>
+          <Space orientation={direction} wrap style={{ width: '100%' }}>
+            {list?.map((item, index) => (
+              <Draggable key={item.id} disableInteractiveElementBlocking draggableId={item.id.toString()} index={index}>
+                {provided => (
+                  <div ref={provided.innerRef} {...provided.draggableProps} >
+                    {children(item, provided)}
+                  </div>
+                )}
+              </Draggable>
+            ))}
+            {provided.placeholder}
+            {lastChildren}
+          </Space>
+        </div>
+      )}
+    </Droppable>
+  )
+
+  if (!hasContext) {
+    return content
+  }
+
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      {content}
+    </DragDropContext>
+  )
+}

package/src/components/DynamicSelect/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { AutoComplete, Button, Space } from 'antd'
+import { type Option } from '@wzyjs/types'
+
+export * from './utils'
+
+interface DynamicSelectProps {
+  value?: string[]
+  onChange?: (value: string[]) => void
+  options?: Option[]
+}
+
+export const DynamicSelect = (props: DynamicSelectProps) => {
+  const { value = [''], onChange, options = [] } = props
+
+  const removeOption = (index: number) => {
+    const newOptions = [...value]
+    newOptions.splice(index, 1)
+    onChange?.(newOptions)
+  }
+
+  const handleChange = (index: number, val: string) => {
+    const newValue = [...[...value].slice(0, index), val]
+    onChange?.(newValue)
+
+    if (newValue.every(item => item)) {
+      onChange?.([...newValue, ''])
+    }
+  }
+
+  const getOptions = (options: Option[], index: number): Option[] => {
+    if (index === 0) {
+      return options
+    }
+
+    const currentValue = value[value.length - 1 - index]
+    if (!currentValue) return []
+
+    return getOptions(
+      options.find(item => item.value === currentValue)?.children || [],
+      index - 1,
+    )
+  }
+
+  return (
+    <Space size={8} align='center'>
+      {value.map((val, index) => (
+        <Space key={index} size={4} align='center'>
+          <AutoComplete
+            style={{
+              minWidth: '120px',
+              maxWidth: '300px',
+              width: 'auto',
+            }}
+            value={val}
+            onChange={val => handleChange(index, val)}
+            options={getOptions(options, index)}
+            placeholder={`请选择第 ${index + 1} 级`}
+          />
+          {index !== 0 && (
+            <Button
+              type='text'
+              danger
+              size='small'
+              onClick={() => removeOption(index)}
+            >
+              删除
+            </Button>
+          )}
+          {index < value.length - 1 && (
+            <span style={{ color: '#999' }}>/</span>
+          )}
+        </Space>
+      ))}
+    </Space>
+  )
+}

package/src/components/DynamicSelect/utils.ts

@@ -0,0 +1,47 @@
+import type { Option } from '@wzyjs/types'
+
+export const transformOptions = (data: string[][]): Option[] => {
+  const result: Option[] = []
+
+  data.forEach((item = []) => {
+    let currentNode: Option | undefined
+    let parentNode: Option | undefined
+
+    for (let i = 0; i < item.length; i++) {
+      const currentValue = item[i]
+      if (!currentValue) continue
+
+      if (i === 0) {
+        currentNode = result.find(r => r.value === currentValue)
+
+        if (!currentNode) {
+          currentNode = {
+            label: currentValue,
+            value: currentValue,
+          }
+          result.push(currentNode)
+        }
+
+        parentNode = currentNode
+      } else {
+        currentNode = parentNode?.children?.find(c => c.value === currentValue)
+
+        if (!currentNode) {
+          currentNode = {
+            label: currentValue,
+            value: currentValue,
+          }
+          if (!parentNode) {
+            return
+          }
+          parentNode.children = parentNode.children || []
+          parentNode.children.push(currentNode)
+        }
+
+        parentNode = currentNode
+      }
+    }
+  })
+
+  return result
+}

package/src/components/EnumTag/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { Tag } from 'antd'
+
+type EnumTagProps = {
+  value: string
+  map: Map<string, { label: string; value: string; extra?: { color?: string } }>
+}
+
+export const EnumTag = (props: EnumTagProps) => {
+  const { value, map } = props
+
+  const enumItem = map.get(value)
+
+  if (!enumItem) {
+    return <Tag>{value}</Tag>
+  }
+
+  return (
+    <Tag color={enumItem.extra?.color}>
+      {enumItem.label}
+    </Tag>
+  )
+}

package/src/components/FetchSelect/index.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { useImperativeHandle } from 'react'
+import { Select, SelectProps, Spin } from 'antd'
+import { useRequest } from '@wzyjs/hooks/web'
+
+export interface FetchSelectProps<I> extends SelectProps {
+  selectRef?: any,
+  isDetail?: boolean, // 只返回id 还是返回整个信息
+  searchApi: (params: { search: string }) => Promise<any>,
+  convertData?: (data: I[]) => any[],
+  onChange?: (value: any) => void
+}
+
+export interface FetchSelectRef {
+  refresh: () => void
+}
+
+export const FetchSelect = <I extends { id: string | number }, >(props: FetchSelectProps<I>) => {
+  const { searchApi, convertData, onChange, isDetail = false, selectRef, ...other } = props
+
+  const { data, run, loading, refresh } = useRequest(searchApi, {
+    debounceWait: 100,
+  })
+
+  const onSearch = (value: string) => {
+    run({ search: value })
+  }
+
+  useImperativeHandle(selectRef, () => ({
+    refresh,
+  }))
+
+  return (
+    <Select
+      showSearch
+      defaultActiveFirstOption={false}
+      popupMatchSelectWidth={false}
+      suffixIcon={null}
+      filterOption={false}
+      notFoundContent={loading ? <Spin size='small' /> : null}
+      loading={loading}
+      {...other}
+
+      options={convertData ? convertData(data?.data || []) : data?.data}
+      onSearch={onSearch}
+      onChange={value => {
+        if (isDetail) {
+          const detail = data?.data?.find(item => item.id === value)
+          onChange?.(detail)
+        } else {
+          onChange?.(value)
+        }
+      }}
+    />
+  )
+}

package/src/components/Fold/index.tsx

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

package/src/components/FormPro/index.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import React, { useImperativeHandle, useRef } from 'react'
+import { BetaSchemaForm, ProFormInstance } from '@ant-design/pro-components'
+import { FormSchema } from '@ant-design/pro-form/es/components/SchemaForm'
+
+export type { ProFormColumnsType, ProFormInstance } from '@ant-design/pro-components'
+
+export type FormProProps<T, ValueType> = FormSchema<T, ValueType>
+
+export const FormPro = <T, ValueType>(props: FormProProps<T, ValueType>) => {
+
+  const formRef = useRef<ProFormInstance>(null)
+  useImperativeHandle(props.formRef, () => formRef?.current, [formRef])
+
+  // useEffect(() => {
+  //   if (props.value) {
+  //     formRef.current?.setFieldsValue(props.value)
+  //   }
+  // }, [JSON.stringify(props.value)])
+
+  return (
+    <BetaSchemaForm
+      {...props}
+      formRef={formRef}
+    />
+  )
+}

package/src/components/GroupLayout/index.tsx

@@ -0,0 +1,45 @@
+import { CSSProperties, ReactNode } from 'react'
+
+import GridLayout, { Layout } from 'react-grid-layout'
+import 'react-grid-layout/css/styles.css'
+
+export type { Layout as GridLayoutItem } from 'react-grid-layout'
+
+interface GridLayoutProps<I> {
+  layout: I[]
+  style?: CSSProperties
+  onChange?: (layout: I[]) => void
+  renderItem?: (item: I) => ReactNode
+}
+
+export const GroupLayout = <I extends Layout>(props: GridLayoutProps<I>) => {
+  const { style, layout, onChange, renderItem = item => item.i } = props
+
+  const onLayoutChange = (items: Layout[]) => {
+    onChange?.(items.map(item => ({
+      ...layout.find(i => i.i === item.i),
+      ...item,
+    }) as I))
+  }
+
+  return (
+    <GridLayout
+      layout={layout}
+      cols={24}
+      rowHeight={50}
+      width={1200}
+      useCSSTransforms={false}
+      containerPadding={[0, 0]}
+      style={{ width: '100%', height: '100%', userSelect: 'none', ...style }}
+      draggableHandle='.drag-handle'
+      resizeHandles={['se']}
+      onLayoutChange={onLayoutChange}
+    >
+      {layout.map(item => (
+        <div key={item.i}>
+          {renderItem(item)}
+        </div>
+      ))}
+    </GridLayout>
+  )
+}

package/src/components/HtmlPro/index.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import React, { CSSProperties } from 'react'
+
+export interface HtmlProProps {
+  html: string;
+  style?: CSSProperties
+}
+
+export const HtmlPro = (props: HtmlProProps) => {
+  const { html, style = {} } = props
+  return (
+    <div
+      style={{ minWidth: '100%', ...style }}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}

package/src/components/IframePro/index.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import React, { useEffect, CSSProperties } from 'react'
+import { Spin } from 'antd'
+import { useBoolean } from '@wzyjs/hooks/web'
+
+export interface IframeProProps {
+  url: string;
+  errMessage?: string;
+  style?: CSSProperties;
+  isShowLoading?: boolean;
+}
+
+export const IframePro = (props: IframeProProps) => {
+  const { url, style, errMessage = '', isShowLoading = false } = props
+
+  const [loading, { setTrue, setFalse }] = useBoolean(true)
+
+  useEffect(() => {
+    setTrue()
+  }, [url])
+
+  if (!url) {
+    return (
+      <span
+        style={{
+          ...style,
+          color: '#ccc',
+          fontSize: 14,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        {errMessage || '没有url'}
+      </span>
+    )
+  }
+
+  return (
+    <Spin spinning={loading && isShowLoading}>
+      <iframe
+        src={url}
+        width='100%'
+        height='100%'
+        style={style}
+        onLoad={setFalse}
+      />
+    </Spin>
+  )
+}