@wzyjs/uis 0.3.8

package/src/antd/pro/Button/components/Drawer.tsx

@@ -0,0 +1,37 @@
+'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 DrawerProps extends AntdDrawerProps {
+  btnProps?: ButtonProps
+  defaultOpen?: boolean
+}
+
+export const Drawer = (props: DrawerProps) => {
+  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)}
+        destroyOnClose
+        {..._.omit(props, ['children', 'btnProps'])}
+      >
+        {children}
+      </AntdDrawer>
+    </>
+  )
+}

package/src/antd/pro/Button/components/Group.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import React from 'react'
+import { Button } from 'antd'
+import { Confirm, ConfirmProps } from './Confirm'
+
+export interface GroupProps {
+  list?: (ConfirmProps & { visible?: boolean, title?: string })[]
+}
+
+// 1. 按钮组
+export const Group = (props: GroupProps) => {
+  const { list = [] } = props
+
+  if (!list?.length) {
+    return null
+  }
+
+  return (
+    <Button.Group>
+      {list.filter(item => item.visible).map((item, index) => (
+        <Confirm key={index} {...item}>{item.title}</Confirm>
+      ))}
+    </Button.Group>
+  )
+}

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

@@ -0,0 +1,11 @@
+import { Group } from './components/Group'
+import { Confirm } from './components/Confirm'
+import { Copy } from './components/Copy'
+import { Drawer } from './components/Drawer'
+
+export const ButtonPro = {
+  Group,
+  Confirm,
+  Copy,
+  Drawer,
+}

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

@@ -0,0 +1,92 @@
+'use client'
+
+import React, { useState, useRef, useEffect, forwardRef } from 'react'
+import { Card, Button, CardProps } from 'antd'
+import { DownOutlined, UpOutlined } from '@ant-design/icons'
+
+interface CardProProps extends CardProps {
+  collapsedHeight?: number; // 默认折叠高度，可根据需要调整
+}
+
+export const CardPro = forwardRef((props: CardProProps, ref: any) => {
+  const { collapsedHeight = 300, children, ...rest } = props
+
+  const [collapsed, setCollapsed] = useState(true)
+  const [hovered, setHovered] = useState(false)
+  const [isOverflow, setIsOverflow] = useState(false)
+  const contentRef = useRef<HTMLSpanElement>(null)
+
+  const toggleCollapse = (ev: any) => {
+    ev.stopPropagation()
+    setCollapsed(!collapsed)
+  }
+
+  useEffect(() => {
+    const contentEl = contentRef.current
+    if (contentEl) {
+      // 获取内容的实际高度
+      const actualHeight = contentEl.scrollHeight
+      if (actualHeight > collapsedHeight) {
+        setIsOverflow(true)
+      } else {
+        setIsOverflow(false)
+      }
+    }
+  }, [children, collapsedHeight])
+
+  const cardStyle: React.CSSProperties = {
+    position: 'relative',
+    overflow: 'hidden',
+  }
+
+  const contentStyle: React.CSSProperties = {
+    maxHeight: collapsed ? `${collapsedHeight}px` : 'none',
+    overflowY: collapsed ? 'auto' : 'visible',
+    transition: 'max-height 0.3s ease',
+    display: 'block',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  }
+
+  const buttonContainerStyle: React.CSSProperties = {
+    position: 'absolute',
+    bottom: hovered ? '10px' : '-40px', // 增加隐藏时的负值，确保按钮完全隐藏
+    left: '50%',
+    transform: 'translateX(-50%)',
+    transition: 'bottom 0.3s ease, opacity 0.3s ease',
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+    pointerEvents: 'none', // 默认情况下，禁止点击
+    opacity: hovered && isOverflow ? 1 : 0, // 控制按钮的透明度
+  }
+
+  const buttonStyle: React.CSSProperties = {
+    pointerEvents: 'auto', // 允许按钮在悬停时可点击
+    border: 'none',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+  }
+
+  return (
+    <Card
+      ref={ref}
+      style={cardStyle}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      {...rest}
+    >
+      <span style={contentStyle} ref={contentRef}>
+        {children}
+      </span>
+      {isOverflow && (
+        <div style={buttonContainerStyle}>
+          <Button
+            icon={collapsed ? <DownOutlined /> : <UpOutlined />}
+            onClick={toggleCollapse}
+            style={buttonStyle}
+          />
+        </div>
+      )}
+    </Card>
+  )
+})

package/src/antd/pro/Collapse/components/Item.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import React from 'react'
+import { Collapse, CollapsePanelProps, Space } from 'antd'
+
+export interface CollapseItemProps extends Omit<CollapsePanelProps, 'key'> {
+  step?: boolean; // 为true自动给标题添加 `第{index}步：`
+  index?: number; // step为true时才需要
+  space?: boolean; // 子元素是否有间距
+}
+
+export const Item = (props: CollapseItemProps) => {
+  const { step = true, header, index, space } = props
+
+  return (
+    <Collapse.Panel
+      key={String(header)}
+      {...props}
+      header={step ? `第${index}步: ${header}` : header}
+    >
+      {space ? (
+        <Space orientation='vertical' size='small' style={{ width: '100%' }}>
+          {props.children}
+        </Space>
+      ) : (
+        props.children
+      )}
+    </Collapse.Panel>
+  )
+}

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

@@ -0,0 +1,27 @@
+'use client'
+
+import React from 'react'
+import { Collapse, CollapseProps } from 'antd'
+import { Item, CollapseItemProps } from './components/Item'
+
+export interface CollapseProProps extends CollapseProps {
+  list?: CollapseItemProps[],
+  step?: boolean; // 为true自动给标题添加 `第{index}步：`
+  space?: boolean; // 子元素是否有间距
+}
+
+export const CollapsePro = (props: CollapseProProps) => {
+  const { list = [], step = false, space = true, accordion = true } = props
+
+  if (!props.children && list.length) {
+    props.children = list.map((item, index) => (
+      <Item key={index} step={step} space={space} index={index + 1} {...item} />
+    ))
+  }
+
+  return (
+    <Collapse accordion={accordion} {...props} />
+  )
+}
+
+CollapsePro.Pane = Item

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

@@ -0,0 +1,17 @@
+'use client'
+
+import React from 'react'
+import { Image, ImageProps } from 'antd'
+
+export type ImageProProps = ImageProps
+
+export const ImagePro = (props: ImageProProps) => {
+  const { preview = false } = props
+
+  return (
+    <Image
+      {...props}
+      preview={preview}
+    />
+  )
+}

package/src/antd/pro/Input/components/Range.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import React from 'react'
+import { InputNumber, InputNumberProps, Space } from 'antd'
+import { _ } from '@wzyjs/utils/web'
+
+export interface RangeProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
+  value?: number[];
+  min?: number;
+  max?: number;
+  onChange?: (numbers: number[]) => void;
+}
+
+// 最小值 最大值 的输入框
+export const Range = (props: RangeProps) => {
+  const { value = [], min, max, onChange } = props
+
+  const onNumberChange = (index: 0 | 1, v: number | null) => {
+    if (Number.isNaN(v) || v === null) {
+      return
+    }
+
+    const numbers = _.cloneDeep(value) || []
+    numbers[index] = v
+
+    onChange?.(numbers)
+  }
+
+  return (
+    <Space>
+      <InputNumber
+        min={min}
+        max={max}
+        value={value[0]}
+        onChange={(v: number | null) => onNumberChange(0, v)}
+      />
+      <span style={{ margin: '0 3px' }}> - </span>
+      <InputNumber
+        min={min}
+        max={max}
+        value={value[1]}
+        onChange={(v: number | null) => onNumberChange(1, v)}
+      />
+    </Space>
+  )
+}

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

@@ -0,0 +1,61 @@
+'use client'
+
+import React, { useState, useEffect, useMemo } from 'react'
+import { Input, InputProps } from 'antd'
+import { getStrLength } from '@wzyjs/utils/web'
+import { Range } from './components/Range'
+
+export interface InputProProps extends Omit<InputProps, 'onChange'> {
+  maxLengthChinese?: boolean; // 限制长度：中文算2个字符
+  onChange?: (value: string) => void
+}
+
+// 1. 增加对中文字符串的长度限制 (Input的maxLength会认为汉字为1个长度)
+export const InputPro = (props: InputProProps) => {
+  const {
+    value: _value,
+    onChange: _onChange,
+    addonAfter: _addonAfter,
+    maxLength,
+    maxLengthChinese,
+    ...rest
+  } = props
+
+  const [value, setValue] = useState<string>('')
+
+  const addonAfter = useMemo(() => {
+    if (!maxLengthChinese) {
+      return _addonAfter
+    }
+
+    return (
+      <>
+        {_addonAfter}
+        {maxLength ? `${getStrLength(value)} / ${maxLength}` : null}
+      </>
+    )
+  }, [_addonAfter, value, maxLength])
+
+  useEffect(() => {
+    _onChange?.(value)
+  }, [value])
+
+  const onChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    if (maxLengthChinese && maxLength && getStrLength(ev.target.value) > maxLength) {
+      return
+    }
+    setValue(ev.target.value)
+  }
+
+  return (
+    <Input
+      value={value}
+      onChange={onChange}
+      addonAfter={addonAfter}
+      maxLength={maxLength}
+      {...rest}
+    />
+  )
+}
+
+InputPro.Range = Range

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

@@ -0,0 +1,16 @@
+'use client'
+
+import React from 'react'
+import { Popconfirm, PopconfirmProps } from 'antd'
+
+export type PopconfirmProProps = PopconfirmProps
+
+export const PopconfirmPro = (props: PopconfirmProProps) => {
+  return (
+    <Popconfirm
+      okText="确定"
+      cancelText="取消"
+      {...props}
+    />
+  )
+}

package/src/antd/pro/Radio/components/Cancel.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import React from 'react'
+import { Checkbox, CheckboxProps, CheckboxOptionType } from 'antd'
+
+export interface CancelProps {
+  value: CheckboxProps['value'];
+  options: CheckboxOptionType[];
+  onChange?: CheckboxProps['onChange'];
+}
+
+// 给Radio组件增加取消选择的功能，是用Checkbox组件实现的
+export const Cancel = (props: CancelProps) => {
+  const { value, options, onChange } = props
+
+  const evs = {
+    onChange: (checkedValue: CheckboxProps['value'][]) => {
+      onChange?.(checkedValue.find(i => i !== value) || '')
+    },
+  }
+
+  return (
+    <Checkbox.Group
+      value={[value]}
+      prefixCls='ant-radio'
+      options={options}
+      onChange={evs.onChange}
+    />
+  )
+}

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

@@ -0,0 +1,7 @@
+'use client'
+
+import { Cancel } from './components/Cancel'
+
+export const RadioPro = {
+  Cancel,
+}

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

@@ -0,0 +1,15 @@
+'use client'
+
+import React from 'react'
+import { Space, SpaceProps } from 'antd'
+
+export type SpaceProProps = SpaceProps
+
+export const SpacePro = (props: SpaceProProps) => {
+  return (
+    <Space
+      style={{ width: '100%' }}
+      {...props}
+    />
+  )
+}

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

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

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

package/src/antd/pro/index.ts

@@ -0,0 +1,10 @@
+export * from './Alert'
+export * from './Button'
+export * from './Card'
+export * from './Collapse'
+export * from './Image'
+export * from './Input'
+export * from './Radio'
+export * from './Space'
+export * from './Typography'
+export * from './Popconfirm'

package/src/components/BottomBar/index.tsx

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

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

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