@wzyjs/components 0.2.41

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@wzyjs/components",
+  "version": "0.2.41",
+  "description": "description",
+  "author": "wzy",
+  "main": "src/index.ts",
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "ali-oss": "^6.21.0",
+    "echarts": "^5.4.3",
+    "echarts-for-react": "^3.0.2",
+    "handlebars": "^4.7.8",
+    "html2canvas": "^1.4.1",
+    "js-beautify": "^1.14.7",
+    "prettier": "^3.5.3",
+    "prismjs": "^1.29.0",
+    "react": "^19.0.0",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-json-view": "^1.21.3",
+    "react-syntax-highlighter": "^15.5.0"
+  },
+  "peerDependencies": {
+    "@wzyjs/antd": "^0.2.37",
+    "@wzyjs/hooks": "^0.2.37",
+    "@wzyjs/types": "^0.2.37",
+    "@wzyjs/utils": "^0.2.37"
+  },
+  "devDependencies": {
+    "@types/js-beautify": "^1.13.3",
+    "@types/prettier": "^2.7.2",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "^19.0.0",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-syntax-highlighter": "^15.5.5"
+  },
+  "gitHead": "22795bdb9c670d3e37e9a6e83b544f916bab3c16",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/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/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/Collapse/index.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { useBoolean } from 'ahooks'
+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/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'
+import { getRandomColor } from '@wzyjs/utils'
+
+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)
+
+      if (onChange) {
+        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/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/Crud/components/create.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import React from 'react'
+
+import { Button } from 'antd'
+import { FormPro } from '../../FormPro'
+
+import { useUpdate } from '@wzyjs/hooks'
+import { Apis, Column, ApiParams } from '../types'
+
+interface CreateProps<I> {
+  name?: string,
+  columns: Column<I>[],
+  api: Apis<I>['create'],
+  title?: string,
+  layoutType?: 'ModalForm' | 'DrawerForm',
+  initialValues?: Partial<I>,
+  labelCol?: { span: number },
+  wrapperCol?: { span: number },
+  style?: React.CSSProperties,
+  convertValues?: (values: Partial<I>) => Partial<I>,
+  // 调用接口时的附加参数
+  apiParams?: ApiParams
+}
+
+export const Create = <I, >(props: CreateProps<I>) => {
+  const {
+    name = '',
+    style,
+    layoutType = 'ModalForm',
+    columns,
+    initialValues,
+    api,
+    title = '新建',
+    labelCol = { span: 4 },
+    wrapperCol = { span: 19 },
+    apiParams,
+    convertValues = values => values,
+  } = props
+
+  const update = useUpdate()
+
+  if (!api) {
+    return null
+  }
+
+  return (
+    <FormPro
+      style={style}
+      title={`${title}${name}`}
+      layout='horizontal'
+      layoutType={layoutType}
+      initialValues={initialValues as any}
+      labelCol={labelCol}
+      wrapperCol={wrapperCol}
+      {...({
+        ModalForm: {
+          modalProps: { destroyOnClose: true },
+        },
+        DrawerForm: {
+          drawerProps: { destroyOnClose: true },
+        },
+      })[layoutType]}
+      columns={columns.filter((column) => !column.hideInCreate) as any}
+      onFinish={async (formValues: Partial<I>) => {
+        if (!api) {
+          return
+        }
+        const { success } = await api(convertValues({ ...apiParams?.create, ...formValues }))
+        return success
+      }}
+      trigger={(
+        <Button onClick={() => setTimeout(update, 10)}>{title}</Button>
+      )}
+    />
+  )
+}

package/src/Crud/components/remove.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import React from 'react'
+import { ButtonPro } from '@wzyjs/antd'
+import { Apis } from '../types'
+
+interface RemoveProps<I> {
+  initialValues: I,
+  api: Apis<I>['remove'],
+  title?: string,
+}
+
+export default <I extends { id: string }>(props: RemoveProps<I>) => {
+  const { api, initialValues, title = '删除' } = props
+
+  if (!api) {
+    return null
+  }
+
+  return (
+    <ButtonPro.Confirm
+      title={`确认${title}?`}
+      btnProps={{
+        danger: true
+      }}
+      onConfirm={() => {
+        api(initialValues.id)
+      }}
+    >
+      {title}
+    </ButtonPro.Confirm>
+  )
+}

package/src/Crud/components/update.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import React from 'react'
+
+import { Button } from 'antd'
+import { FormPro } from '../../FormPro'
+
+import { useUpdate } from '@wzyjs/hooks'
+import { Apis, Column } from '../types'
+
+interface UpdateProps<I> {
+  name?: string,
+  columns: Column<I>[],
+  initialValues: I,
+  api: Apis<I>['update'],
+  title?: string,
+  layoutType?: 'ModalForm' | 'DrawerForm',
+  labelCol?: { span: number },
+  wrapperCol?: { span: number },
+  style?: React.CSSProperties,
+  convertValues?: (values: Partial<I>) => Partial<I>,
+}
+
+export default <I extends { id: string }>(props: UpdateProps<I>) => {
+  const {
+    name = '',
+    style,
+    layoutType = 'ModalForm',
+    columns,
+    initialValues,
+    api,
+    title = '编辑',
+    labelCol = { span: 4 },
+    wrapperCol = { span: 19 },
+    convertValues = values => values,
+  } = props
+
+  const update = useUpdate()
+
+  if (!api) {
+    return null
+  }
+
+  return (
+    <FormPro
+      key={JSON.stringify(initialValues)}
+      style={style}
+      title={`${title}${name}`}
+      layout='horizontal'
+      layoutType={layoutType}
+      initialValues={initialValues}
+      labelCol={labelCol}
+      wrapperCol={wrapperCol}
+      {...({
+        ModalForm: {
+          modalProps: { destroyOnClose: true },
+        },
+        DrawerForm: {
+          drawerProps: { destroyOnClose: true },
+        },
+      })[layoutType]}
+      columns={columns.filter(column => !column.hideInUpdate) as any}
+      onFinish={async (formValues: Partial<I>) => {
+        if (!api) {
+          return
+        }
+        const { success } = await api(initialValues.id, convertValues(formValues))
+        return success
+      }}
+      trigger={(
+        <Button type='link' onClick={() => setTimeout(update, 10)}>{title}</Button>
+      )}
+    />
+  )
+}

package/src/Crud/index.tsx

@@ -0,0 +1,144 @@
+// 'use client'
+//
+// import React, { useRef, useImperativeHandle, useEffect } from 'react'
+//
+// import { Create } from './components/create'
+// import { ActionType, TablePro, TableProProps } from '../TablePro'
+//
+// import { handleParams, dayjs } from '@wzyjs/utils'
+// import { useRequestPro } from '@wzyjs/hooks'
+// import { FilterParams, Pagination, SortParams } from '@wzyjs/types'
+//
+// import option from './powers/option'
+// import validator from './powers/validator'
+// import { handleColumns } from './utils'
+// import { ApiParams, Apis, Column, Columns } from './types'
+//
+// export { getRequire, getRequireFormProps } from './utils'
+//
+// export * from './types'
+//
+// interface CrudProps<I> extends Omit<TableProProps<I, I>, 'columns'> {
+//   layoutType?: 'ModalForm' | 'DrawerForm',
+//   columns: Columns<I>,
+//   apis: Apis<I>,
+//   initialValues?: Partial<I>,
+//
+//   // 获取到列表数据后传递给父组件
+//   onLoadData?: (data: I[]) => void,
+//   // 调用接口时的附加参数
+//   apiParams?: ApiParams
+//
+//   // 转换列表数据
+//   convertData?: (values: I[]) => I[],
+//   // 处理创建或提交表单提交的数据
+//   convertValues?: (values: Partial<I>) => Partial<I>,
+// }
+//
+// export const Crud = <I extends { id: string }>(props: CrudProps<I>) => {
+//   const {
+//     name = '',
+//     columns,
+//     apis,
+//     toolBarRender,
+//     initialValues,
+//     convertValues = values => values,
+//     convertData = data => data,
+//     onLoadData,
+//     apiParams,
+//     layoutType = 'ModalForm',
+//   } = props
+//
+//   const actionRef = useRef<ActionType>()
+//
+//   useImperativeHandle(props.actionRef, () => actionRef.current)
+//
+//   const listState = useRequestPro(apis.list, {
+//     manual: true,
+//   })
+//   const createState = useRequestPro(apis.create, {
+//     manual: true,
+//     alertSuccessMessage: true,
+//     onSuccess: () => actionRef.current?.reload()
+//   })
+//   const updateState = useRequestPro(apis.update, {
+//     manual: true,
+//     alertSuccessMessage: true,
+//     onSuccess: () => actionRef.current?.reload()
+//   })
+//   const removeState = useRequestPro(apis.remove, {
+//     manual: true,
+//     alertSuccessMessage: true,
+//     onSuccess: () => actionRef.current?.reload()
+//   })
+//
+//   const mvalidator = (columns: Column<I>[]) => validator({
+//     columns,
+//     findApi: apis.find,
+//   })
+//
+//   const moption = (columns: Column<I>[]) => {
+//     columns.forEach(column => {
+//       if (column.valueType === 'dateTime') {
+//         column.render = (_, __) => {
+//           return dayjs(__?.[column.dataIndex]).format('YYYY-MM-DD HH:mm:ss')
+//         }
+//       }
+//     })
+//     return columns
+//   }
+//
+//   const timeoption = (columns: Column<I>[]) => option({
+//     name,
+//     columns,
+//     layoutType,
+//     updateApi: apis.update && updateState?.runAsync,
+//     removeApi: apis.remove && removeState?.runAsync,
+//     mvalidator,
+//     convertValues,
+//   })
+//
+//   const request = async (
+//     params: Pagination & I,
+//     sort: SortParams,
+//     filter: FilterParams,
+//   ) => {
+//     let { data = { data: [], total: 0 } } = await listState?.runAsync(
+//       handleParams(params, sort, filter, apiParams?.list),
+//     )
+//     onLoadData?.(data.data)
+//     return {
+//       data: convertData(data.data || []),
+//       total: data.total,
+//     }
+//   }
+//
+//   useEffect(() => {
+//     actionRef.current?.reload()
+//   }, [JSON.stringify(apiParams?.list)])
+//
+//   return (
+//     <TablePro
+//       {...props}
+//       headerTitle={`${name}列表`}
+//       actionRef={actionRef}
+//       request={request}
+//       columns={handleColumns(columns, { type: 'list', isList: true }, [moption, timeoption])}
+//       toolBarRender={(action, rows) => [
+//         ...(toolBarRender && toolBarRender?.(action, rows) || []),
+//         apis?.create && (
+//           <Create
+//             name={name}
+//             key='create'
+//             columns={handleColumns(columns, { type: 'create', isCreate: true }, [mvalidator])}
+//             layoutType={layoutType}
+//             apiParams={apiParams}
+//             api={createState?.runAsync}
+//             initialValues={initialValues}
+//             convertValues={convertValues}
+//           />
+//         ),
+//       ]}
+//     />
+//   )
+// }

package/src/Crud/powers/option.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import React from 'react'
+import { Space } from 'antd'
+import Update from '../components/update'
+import Remove from '../components/remove'
+import { Apis, Column } from '../types'
+import { handleColumns } from '../utils'
+
+interface OptionProps<I> {
+  name?: string,
+  columns: Column<I>[],
+  layoutType?: 'ModalForm' | 'DrawerForm',
+  updateApi: Apis<I>['update'],
+  removeApi: Apis<I>['remove'],
+  mvalidator: (columns: Column<I>[]) => Column<I>[],
+  convertValues?: (values: Partial<I>) => Partial<I>,
+}
+
+export default <I extends { id: string }>(props: OptionProps<I>): Column<I>[] => {
+  const { name, columns, convertValues, updateApi, removeApi, mvalidator, layoutType = 'ModalForm' } = props
+
+  // 编辑和删除按钮
+  const optionRender = {
+    title: '操作',
+    key: 'option',
+    render: (dom: React.ReactNode, record: I) => (
+      <Space key='option'>
+        {updateApi && (
+          <Update
+            name={name}
+            columns={handleColumns(columns, { type: 'update', isUpdate: true }, [mvalidator])}
+            layoutType={layoutType}
+            initialValues={record}
+            api={updateApi}
+            convertValues={convertValues}
+          />
+        )}
+        {removeApi && (
+          <Remove
+            api={removeApi}
+            initialValues={record}
+          />
+        )}
+      </Space>
+    ),
+  }
+
+  const last = columns[columns.length - 1]
+  if (last?.key === 'option') {
+    const originalRender = last.render
+    // @ts-ignore
+    last.render = (dom: React.ReactNode, entity: I, index: number, action: any, schema: any) => [
+      (updateApi || removeApi) && optionRender.render(dom, entity),
+      originalRender?.(dom, entity, index, action, schema),
+    ].flat()
+  }
+
+  return columns
+}