@wzyjs/uis 0.3.28 → 0.3.30

package/dist/layout/TabsPro/index.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Tabs } from 'antd';
+const getItemKeys = (items) => {
+    return (items || [])
+        .map(item => item?.key)
+        .filter((key) => typeof key === 'string' && !!key);
+};
+const getUrlTabKey = (queryKey) => {
+    if (typeof window === 'undefined') {
+        return undefined;
+    }
+    const value = new URLSearchParams(window.location.search).get(queryKey);
+    return value || undefined;
+};
+const updateUrlTabKey = (queryKey, key, mode) => {
+    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) => {
+    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(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 (_jsx(Tabs, { ...rest, items: items, activeKey: mergedActiveKey, onChange: key => {
+            if (typeof activeKey !== 'string') {
+                setInnerActiveKey(key);
+            }
+            onChange?.(key);
+        } }));
+};

package/dist/layout/index.d.ts

@@ -0,0 +1,6 @@
+export * from './FoldCard';
+export * from './ResizableGridLayout';
+export * from './TabsPro';
+export * from './DragSort';
+export * from './PageBase';
+export * from './SideMenu';

package/dist/layout/index.js

@@ -0,0 +1,6 @@
+export * from './FoldCard';
+export * from './ResizableGridLayout';
+export * from './TabsPro';
+export * from './DragSort';
+export * from './PageBase';
+export * from './SideMenu';

package/dist/web.d.ts

@@ -0,0 +1,6 @@
+export * from './antd';
+export * from './inputs';
+export * from './buttons';
+export * from './display';
+export * from './layout';
+export * from './advanced';

package/dist/web.js

@@ -0,0 +1,6 @@
+export * from './antd';
+export * from './inputs';
+export * from './buttons';
+export * from './display';
+export * from './layout';
+export * from './advanced';

package/package.json

@@ -1,22 +1,41 @@
 {
   "name": "@wzyjs/uis",
-  "version": "0.3.28",
+  "version": "0.3.30",
   "description": "description",
   "author": "wzy",
-  "sideEffects": false,
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc && rsync -a --include='*/' --include='*.css' --exclude='*' src/ dist/"
+  },
   "files": [
-    "src"
+    "dist"
   ],
   "exports": {
     "./web": {
-      "import": "./src/web.ts"
+      "import": "./dist/web.js",
+      "types": "./dist/web.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "./web": [
+        "./dist/web.d.ts"
+      ]
     }
   },
   "dependencies": {
     "@ant-design/icons": "^6.0.0",
     "@ant-design/nextjs-registry": "^1.0.2",
+    "@ant-design/pro-card": "^2.10.0",
     "@ant-design/pro-components": "^2.8.6",
-    "ali-oss": "^6.21.0",
+    "@ant-design/pro-form": "^2.32.0",
+    "@ant-design/pro-provider": "^2.16.2",
+    "@hello-pangea/dnd": "^18.0.1",
+    "@wzyjs/hooks": "0.3.30",
+    "@xyflow/react": "^12.5.3",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "github-markdown-css": "^5.8.1",
@@ -26,28 +45,25 @@
     "prettier": "^3.5.3",
     "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",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "rehype-starry-night": "^2.2.0",
-    "remark-gfm": "^4.0.1",
-    "remark-toc": "^9.0.0"
+    "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
     "@wzyjs/hooks": "^0.2.37",
-    "@wzyjs/types": "^0.2.37",
     "@wzyjs/utils": "^0.2.37",
-    "antd": "^6.0.0"
+    "antd": "^6.3.1"
   },
   "devDependencies": {
     "@types/js-beautify": "^1.14.3",
+    "@types/react": "^19.1.10",
     "@types/react-grid-layout": "1.3.5"
   },
-  "gitHead": "cfb708a071a9f7f0e2c819760c95427d7196623b",
+  "gitHead": "4e50539cd20e721602a057645c9b859530a1b8c5",
   "publishConfig": {
     "access": "public"
   }

package/src/antd/form/CheckboxButton/index.module.scss

@@ -1,24 +0,0 @@
-.checkcard {
-  :global(.ant-pro-checkcard-content) {
-    padding: 0 !important;
-  }
-
-  :global(.ant-pro-checkcard) {
-    margin-bottom: 0 !important;
-    text-align: center !important;
-    display: flex;
-    justify-content: center;
-    border-radius: 0 !important;
-  }
-
-  :global(.ant-pro-checkcard-title) {
-    height: 100%;
-  }
-
-  :global(.ant-pro-checkcard div) {
-    width: 100%;
-    font-weight: 400 !important;
-    height: 30px !important;
-    line-height: 28px !important;
-  }
-}

package/src/antd/form/CheckboxButton/index.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import { Col, Row } from 'antd'
-import { CheckCard } from '@ant-design/pro-components'
-import { CheckCardValueType, CheckGroupValueType } from '@ant-design/pro-card/es/components/CheckCard/Group'
-
-import styles from './index.module.scss'
-
-interface CheckboxButtonProps {
-  options: { label: string; value: CheckCardValueType }[]
-  value?: CheckGroupValueType
-  onChange?: (value: CheckGroupValueType) => void
-}
-
-export const CheckboxButton = (props: CheckboxButtonProps) => {
-  const { options, value, onChange } = props
-
-  return (
-    <div className={styles.checkcard}>
-      <CheckCard.Group style={{ width: '100%' }} size='small' multiple value={value} onChange={onChange}>
-        <Row>
-          {options.map((item, index) => (
-            <Col key={index}>
-              <CheckCard title={item.label} value={item.value} style={{ width: 60, height: 30 }} />
-            </Col>
-          ))}
-        </Row>
-      </CheckCard.Group>
-    </div>
-  )
-}

package/src/antd/form/FileUploader/index.tsx

@@ -1,163 +0,0 @@
-'use client'
-
-import { useState, type ReactElement } from 'react'
-
-import { Upload, Button,  } from 'antd'
-import { UploadOutlined, InboxOutlined } from '@ant-design/icons'
-
-import type { UploadProps, UploadFile as AntUploadFile } from 'antd'
-
-export interface FileUploaderProps {
-  value?: AntUploadFile[]
-  onChange?: (fileList: AntUploadFile[]) => void
-
-  // 模式
-  mode?: 'file' | 'http' // http 暂未实现
-
-  // 限制
-  accept?: string
-  multiple?: boolean
-  maxCount?: number
-
-  // 展示
-  trigger?: 'button' | 'dragger' | ReactElement
-  listType?: UploadProps['listType']
-
-  // 校验
-  beforeUpload?: (file: AntUploadFile) => boolean | Promise<void>
-
-  // 上传行为
-  immediateUpload?: boolean
-  action?: string
-  data?: Record<string, unknown> | ((file: AntUploadFile) => Record<string, unknown>)
-  headers?: UploadProps['headers']
-  withCredentials?: boolean
-
-  disabled?: boolean
-  showUploadList?: boolean
-  onUploadChange?: UploadProps['onChange']
-}
-
-export const FileUploader = (props: FileUploaderProps) => {
-  const {
-    value,
-    onChange,
-    mode = 'file',
-    accept,
-    multiple = true,
-    maxCount,
-    trigger = 'dragger',
-    listType = 'text',
-    beforeUpload,
-    immediateUpload = false,
-    action = '/api/file/upload',
-    data,
-    headers,
-    withCredentials,
-    disabled,
-    showUploadList = trigger === 'dragger',
-    onUploadChange,
-  } = props
-
-  const [internalFileList, setInternalFileList] = useState<AntUploadFile[]>([])
-
-  const fileList = value || internalFileList
-
-  const handleChange: UploadProps['onChange'] = (info) => {
-    let newFileList = [...info.fileList]
-
-    // 限制数量
-    if (maxCount && newFileList.length > maxCount) {
-      newFileList = newFileList.slice(-maxCount)
-    }
-
-    // 如果不是立即上传模式，我们需要手动管理状态
-    if (!immediateUpload) {
-      // 这里的逻辑主要依赖 beforeUpload 返回 false 来阻止上传
-      // 但 onChange 依然会被触发
-    }
-
-    // 更新状态
-    if (!value) {
-      setInternalFileList(newFileList)
-    }
-
-    // 通知外部
-    onChange?.(newFileList)
-    onUploadChange?.(info)
-  }
-
-  const handleBeforeUpload = async (file: AntUploadFile) => {
-    // 1. 外部校验
-    if (beforeUpload) {
-      const result = await beforeUpload(file)
-      if (result === false) {
-        return Upload.LIST_IGNORE
-      }
-    }
-
-    // 2. 立即上传模式
-    if (immediateUpload) {
-      return true
-    }
-
-    // 3. 非立即上传模式，阻止默认上传行为，但添加到列表
-    return false
-  }
-
-  const uploadProps: UploadProps = {
-    fileList,
-    accept,
-    multiple,
-    maxCount,
-    listType,
-    disabled,
-    showUploadList,
-    beforeUpload: handleBeforeUpload as UploadProps['beforeUpload'],
-    onChange: handleChange,
-    onDrop: (e: unknown) => {
-      // console.log('Dropped files', e.dataTransfer.files)
-    },
-  }
-
-  // 立即上传相关配置
-  if (immediateUpload) {
-    uploadProps.action = action
-    uploadProps.data = data
-    uploadProps.headers = headers
-    uploadProps.withCredentials = withCredentials
-  } else {
-    // 非立即上传模式，不需要 action
-    uploadProps.customRequest = () => undefined // 覆盖默认上传行为，防止自动上传尝试
-  }
-
-  if (mode === 'http') {
-    return <div>HTTP 输入模式暂未支持</div>
-  }
-
-  if (trigger === 'button') {
-    return (
-      <Upload {...uploadProps}>
-        <Button type="primary" icon={<UploadOutlined />}>
-          上传文件
-        </Button>
-      </Upload>
-    )
-  }
-
-  if (trigger === 'dragger') {
-    return (
-      <Upload.Dragger {...uploadProps}>
-        <p className="ant-upload-drag-icon">
-          <InboxOutlined />
-        </p>
-        <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
-        <p className="ant-upload-hint">
-          支持单个或批量上传{maxCount ? `，最多 ${maxCount} 个文件` : ''}
-        </p>
-      </Upload.Dragger>
-    )
-  }
-
-  return trigger
-}

package/src/antd/form/RadioButton/index.tsx

@@ -1,32 +0,0 @@
-'use client'
-
-import { CSSProperties } from 'react'
-import { Radio } from 'antd'
-
-interface FilterButtonProps<V> {
-  options: { label: string; value: V }[]
-  value?: V
-  buttonStyle?: 'outline' | 'solid'
-  onChange?: (value: V) => void
-  style?: CSSProperties
-  disabled?: boolean
-}
-
-export const RadioButton = <V = string | number | boolean | null>(props: FilterButtonProps<V>) => {
-  const { value, options, buttonStyle = 'outline', disabled, style, onChange } = props
-
-  return (
-    <Radio.Group
-      optionType='button'
-      buttonStyle={buttonStyle}
-      value={value}
-      style={style}
-      disabled={disabled}
-      onChange={e => onChange?.(e.target.value as V)}
-    >
-      {options.filter(item => item.label).map(item => (
-        <Radio key={String(item.value)} value={item.value}>{item.label}</Radio>
-      ))}
-    </Radio.Group>
-  )
-}

package/src/antd/form/Upload/index.tsx

@@ -1,65 +0,0 @@
-'use client'
-
-import { Upload } from 'antd'
-import { InboxOutlined } from '@ant-design/icons'
-import { generateUniqueFileName } from '@wzyjs/utils/web'
-
-interface item {
-  name: string
-  url: string
-  status: string
-}
-
-interface UploadFormItemProps {
-  oss: any
-  multiple?: boolean,
-  mode?: 'image' | 'video'
-  value?: item[]
-  onChange?: (value: item[]) => void
-}
-
-export const UploadFormItem = (props: UploadFormItemProps) => {
-  const { oss, mode = 'image', multiple = true, onChange } = props
-
-  const accept = mode === 'image' ? '.jpg,.png,.jpeg' : '.mp4,.mov'
-
-  const onUpload = async (info: any) => {
-    onChange?.(info.fileList.map((item: any) => ({
-      name: item?.response.name,
-      url: item?.response.url,
-    })))
-  }
-
-  const customRequest = async ({ file, onSuccess }: any) => {
-    const newName = generateUniqueFileName(file.name)
-    const result = await oss.put(newName, file, {
-      headers: {
-        'Cache-Control': 'public, max-age=31536000, immutable', // 设置缓存时间为365天
-      },
-    })
-    onSuccess(result)
-  }
-
-  return (
-    <Upload.Dragger
-      multiple={multiple}
-      accept={accept}
-      listType='picture-card'
-      onChange={onUpload}
-      customRequest={customRequest}
-    >
-      <p className='ant-upload-drag-icon'>
-        <InboxOutlined />
-      </p>
-      <p className='ant-upload-text'>
-        <span>点击或拖拽文件到这里以上传</span>
-      </p>
-      {mode === 'image' && (
-        <p className='ant-upload-hint'>支持上传多张 JPG 或者 PNG 格式的照片</p>
-      )}
-      {mode === 'video' && (
-        <p className='ant-upload-hint'>支持上传多个 MP4 或者 MOV 格式的视频</p>
-      )}
-    </Upload.Dragger>
-  )
-}