@wzyjs/uis 0.3.26 → 0.3.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wzyjs/uis",
-  "version": "0.3.26",
+  "version": "0.3.28",
   "description": "description",
   "author": "wzy",
   "sideEffects": false,
@@ -27,6 +27,7 @@
     "prismjs": "^1.29.0",
     "react": "^19.0.0",
     "react-beautiful-dnd": "^13.1.1",
+    "react-grid-layout": "^1.5.1",
     "react-json-view": "^1.21.3",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.5.0",
@@ -42,7 +43,11 @@
     "@wzyjs/utils": "^0.2.37",
     "antd": "^6.0.0"
   },
-  "gitHead": "cf770d4d9e94b1000eab84ce34f91a4e6ee912f6",
+  "devDependencies": {
+    "@types/js-beautify": "^1.14.3",
+    "@types/react-grid-layout": "1.3.5"
+  },
+  "gitHead": "cfb708a071a9f7f0e2c819760c95427d7196623b",
   "publishConfig": {
     "access": "public"
   }

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

@@ -0,0 +1,135 @@
+'use client'
+
+import React from 'react'
+import { Tabs, type TabsProps } from 'antd'
+
+type SyncMode = 'replace' | 'push'
+
+export interface TabsProProps extends TabsProps {
+  syncToUrl?: boolean
+  queryKey?: string
+  historyMode?: SyncMode
+}
+
+const getItemKeys = (items?: TabsProps['items']): string[] => {
+  return (items || [])
+  .map(item => item?.key)
+  .filter((key): key is string => typeof key === 'string' && !!key)
+}
+
+const getUrlTabKey = (queryKey: string): string | undefined => {
+  if (typeof window === 'undefined') {
+    return undefined
+  }
+
+  const value = new URLSearchParams(window.location.search).get(queryKey)
+  return value || undefined
+}
+
+const updateUrlTabKey = (queryKey: string, key: string, mode: SyncMode) => {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const url = new URL(window.location.href)
+  url.searchParams.set(queryKey, key)
+
+  const nextUrl = `${url.pathname}${url.search}${url.hash}`
+  if (mode === 'push') {
+    window.history.pushState(window.history.state, '', nextUrl)
+    return
+  }
+
+  window.history.replaceState(window.history.state, '', nextUrl)
+}
+
+export const TabsPro = (props: TabsProProps) => {
+  const {
+    syncToUrl = false,
+    queryKey = 'tab',
+    historyMode = 'replace',
+    activeKey,
+    defaultActiveKey,
+    items,
+    onChange,
+    ...rest
+  } = props
+
+  const itemKeys = React.useMemo(() => getItemKeys(items), [items])
+
+  const initialKey = React.useMemo(() => {
+    const urlKey = syncToUrl ? getUrlTabKey(queryKey) : undefined
+    if (urlKey && itemKeys.includes(urlKey)) {
+      return urlKey
+    }
+
+    if (typeof defaultActiveKey === 'string' && itemKeys.includes(defaultActiveKey)) {
+      return defaultActiveKey
+    }
+
+    return itemKeys[0]
+  }, [defaultActiveKey, itemKeys, queryKey, syncToUrl])
+
+  const [innerActiveKey, setInnerActiveKey] = React.useState<string | undefined>(initialKey)
+
+  const mergedActiveKey = typeof activeKey === 'string' ? activeKey : innerActiveKey
+
+  React.useEffect(() => {
+    if (typeof activeKey === 'string') {
+      return
+    }
+
+    setInnerActiveKey(prev => {
+      if (prev && itemKeys.includes(prev)) {
+        return prev
+      }
+      return initialKey
+    })
+  }, [activeKey, initialKey, itemKeys])
+
+  React.useEffect(() => {
+    if (!syncToUrl || !mergedActiveKey) {
+      return
+    }
+
+    updateUrlTabKey(queryKey, mergedActiveKey, historyMode)
+  }, [historyMode, mergedActiveKey, queryKey, syncToUrl])
+
+  React.useEffect(() => {
+    if (!syncToUrl) {
+      return
+    }
+
+    const onPopState = () => {
+      const urlKey = getUrlTabKey(queryKey)
+      if (!urlKey || !itemKeys.includes(urlKey)) {
+        return
+      }
+
+      if (typeof activeKey !== 'string') {
+        setInnerActiveKey(urlKey)
+      }
+
+      onChange?.(urlKey)
+    }
+
+    window.addEventListener('popstate', onPopState)
+    return () => {
+      window.removeEventListener('popstate', onPopState)
+    }
+  }, [activeKey, itemKeys, onChange, queryKey, syncToUrl])
+
+  return (
+    <Tabs
+      {...rest}
+      items={items}
+      activeKey={mergedActiveKey}
+      onChange={key => {
+        if (typeof activeKey !== 'string') {
+          setInnerActiveKey(key)
+        }
+        onChange?.(key)
+      }}
+    />
+  )
+}

package/src/antd/pro/index.ts

@@ -6,5 +6,6 @@ export * from './Image'
 export * from './Input'
 export * from './Radio'
 export * from './Space'
+export * from './Tabs'
 export * from './Typography'
 export * from './Popconfirm'

package/src/components/Crud/components/CreateUpdate/index.tsx

@@ -1,13 +1,50 @@
+'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 } from '../../types'
+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',
@@ -19,20 +56,49 @@ export const CreateUpdate = (props: CreateUpdateProps) => {
     width,
   } = config
 
-  const { drawerProps, modalProps, ...formSafeProps } = formProps as unknown as { drawerProps?: DrawerProps; modalProps?: ModalProps } & Record<string, unknown>
+  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 finalDrawerProps: DrawerProps | undefined = layoutType === 'DrawerForm'
-  //   ? { forceRender: false, ...drawerProps }
-  //   : undefined
-  //
-  // const finalModalProps: ModalProps | undefined = layoutType === 'ModalForm'
-  //   ? { forceRender: false, ...modalProps }
-  //   : undefined
+  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 ? transformData(values, record) : values
+    const finalValues = transformData ? await transformData(values, record) : values
 
     if (isEdit) {
       await crud.updateState.mutateAsync(record.id, finalValues)
@@ -47,7 +113,6 @@ export const CreateUpdate = (props: CreateUpdateProps) => {
       return record.id
     }
 
-    const initialValues: unknown = (formSafeProps as { initialValues?: unknown }).initialValues
     if (!initialValues) {
       return 'create'
     }
@@ -63,37 +128,52 @@ export const CreateUpdate = (props: CreateUpdateProps) => {
     }
   })()
 
-  return (
-    <BetaSchemaForm
-      key={formKey}
-      layoutType={layoutType as any}
-      title={title}
-      width={width}
-      columns={columns as any}
-      onFinish={onFinish}
-      layout='horizontal'
-      labelCol={{ span: 4 }}
-      initialValues={{
-        ...(record ?? {}),
-        ...(coverData ? coverData(record) : {}),
-      }}
-      {...(drawerProps ? { drawerProps } : {})}
-      {...(modalProps ? { modalProps } : {})}
-      trigger={
-        isEdit ? (
-          <Button
-            type='link'
-            size='small'
-            icon={<EditOutlined />}
-            {...buttonProps}
-          />
-        ) : (
-          <Button type='primary' icon={<PlusOutlined />} {...buttonProps}>
-            新建
-          </Button>
-        )
-      }
-      {...formSafeProps}
+  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,6 +1,9 @@
-import { type PropsWithChildren, useContext } from 'react'
+'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'
 
@@ -19,52 +22,59 @@ export const Provider = (props: ProviderProps) => {
     }
   }
 
+  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: {
-          tags: {
-            renderFormItem: (_: unknown, props) => {
-              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}
-                />
-              )
-            },
-          },
-        },
+        valueTypeMap,
       }}
     >
       {children}