@wzyjs/components 0.2.56 → 0.2.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wzyjs/components",
-  "version": "0.2.56",
+  "version": "0.2.58",
   "description": "description",
   "author": "wzy",
   "main": "src/index.ts",
@@ -43,7 +43,7 @@
     "@types/react-grid-layout": "^1.3.5",
     "@types/react-syntax-highlighter": "^15.5.5"
   },
-  "gitHead": "2a14d6fdc5a381dd93390472cdfbc409f12e65db",
+  "gitHead": "c293b90cf37a8425c75eb8f3880787b40b951593",
   "publishConfig": {
     "access": "public"
   }

package/src/DynamicSelect/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { AutoComplete, Button, Space } from 'app/src/components'
+import { type Option } from 'app/src/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/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/EnumTag/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { Tag } from 'app/src/components'
+
+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/JsonRenderer/index.tsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import {
+  Divider,
+  Flex,
+  Space,
+  Typography,
+  Steps,
+  Tabs,
+  Collapse,
+  Descriptions,
+  Image,
+  List,
+  Popover,
+  Tooltip,
+  Card,
+  QRCode,
+  Segmented,
+  Table,
+  Tag,
+  Timeline,
+  Tree,
+  Alert,
+  Progress,
+} from 'antd'
+
+const ComponentMap = {
+  // 布局结构类
+  Divider,
+  Flex,
+  Space,
+
+  // 信息展示类
+  Typography,
+  'Typography.Title': Typography.Title,
+  'Typography.Text': Typography.Text,
+  'Typography.Paragraph': Typography.Paragraph,
+  'Typography.Link': Typography.Link,
+  Steps,
+  Tabs,
+  'Tabs.TabPane': Tabs.TabPane,
+  Collapse,
+  'Collapse.Panel': Collapse.Panel,
+  Description: Descriptions,
+  Image,
+  List,
+  Popover,
+  Tooltip,
+  Card,
+  QRCode,
+  Segmented,
+  Table,
+  Tag,
+  Timeline,
+  Tree,
+  Alert,
+  Progress,
+}
+
+export interface Content {
+  component: keyof typeof ComponentMap // 对应 Ant Design 组件的枚举值
+  props?: Record<string, any>       // 对应组件的 props 配置
+  children?: Content[] | string     // 子节点，可递归嵌套，或直接是字符串
+}
+
+interface JsonRendererProps {
+  content: Content[]
+}
+
+export const JsonRenderer = (props: JsonRendererProps) => {
+  const { content } = props
+
+  // 递归渲染组件的函数
+  const renderContent = (item: Content | string) => {
+    // 如果是字符串，直接返回
+    if (typeof item === 'string') {
+      return item
+    }
+
+    const { component, props = {}, children } = item
+
+    // 获取对应的组件
+    const Component = ComponentMap[component] as React.ComponentType<any>
+
+    if (!Component) {
+      return <Alert type='error' message={`未找到组件: ${component}`} />
+    }
+
+    // 处理子节点
+    let childrenContent
+    if (children) {
+      if (Array.isArray(children)) {
+        childrenContent = children.map((child, index) => (
+          <React.Fragment key={index}>
+            {renderContent(child)}
+          </React.Fragment>
+        ))
+      } else {
+        childrenContent = renderContent(children)
+      }
+    }
+
+    // 渲染组件，传递 props 和 children
+    return <Component {...props}>{childrenContent}</Component>
+  }
+
+  return (
+    <>
+      {content.map((item, index) => (
+        <React.Fragment key={index}>
+          {renderContent(item)}
+        </React.Fragment>
+      ))}
+    </>
+  )
+}

package/src/Markdown/index.tsx

@@ -23,7 +23,7 @@ interface TocItem {
 }
 
 export const Markdown = (props: MarkdownProps) => {
-  const { content, showToc = true } = props
+  const { content = '', showToc = true } = props
 
   // 提取标题生成目录
   const tocItems = useMemo(() => {

package/src/index.ts

@@ -14,6 +14,9 @@ export * from './GroupLayout'
 export * from './TextInput'
 export * from './SectorButton'
 export * from './Markdown'
+export * from './DynamicSelect'
+export * from './JsonRenderer'
+export * from './EnumTag'
 
 // export * from './JsonView'
 // export * from './Crud'