@wzyjs/components 0.2.55 → 0.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wzyjs/components",
-  "version": "0.2.55",
+  "version": "0.2.57",
   "description": "description",
   "author": "wzy",
   "main": "src/index.ts",
@@ -22,8 +22,11 @@
     "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-gfm": "^4.0.1",
+    "remark-toc": "^9.0.0"
   },
   "peerDependencies": {
     "@wzyjs/antd": "^0.2.37",
@@ -40,7 +43,7 @@
     "@types/react-grid-layout": "^1.3.5",
     "@types/react-syntax-highlighter": "^15.5.5"
   },
-  "gitHead": "0d197525f11d492c132b2ae376ab33b883237c1c",
+  "gitHead": "7603b720b28050ff484e841ae23e60a330db8956",
   "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/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

@@ -1,23 +1,150 @@
 'use client'
 
-import { MarkdownHooks } from 'react-markdown'
-
+import { useMemo } from 'react'
+import ReactMarkdown from 'react-markdown'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import remarkGfm from 'remark-gfm'
-import rehypeStarryNight from 'rehype-starry-night'
+import rehypeSlug from 'rehype-slug'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 
 import 'github-markdown-css/github-markdown-light.css'
+import { style } from './style'
 
 interface MarkdownProps {
   content: string
+  showToc?: boolean // 是否显示目录
+}
+
+interface TocItem {
+  id: string
+  text: string
+  level: number
 }
 
 export const Markdown = (props: MarkdownProps) => {
-  const { content } = props
+  const { content = '', showToc = true } = props
+
+  // 提取标题生成目录
+  const tocItems = useMemo(() => {
+    if (!showToc) {
+      return []
+    }
+
+    const lines = content.split('\n')
+    const items: TocItem[] = []
+
+    lines.forEach((line) => {
+      const match = line.match(/^(#{2,4})\s+(.+)$/)
+      if (match) {
+        const level = match[1].length
+        const text = match[2].trim()
+        const id = text
+        .toLowerCase()
+        .replace(/[^\w\u4e00-\u9fa5\s-]/g, '') // 保留中文、英文、数字、空格和连字符
+        .replace(/\s+/g, '-') // 空格替换为连字符
+
+        items.push({ id, text, level })
+      }
+    })
+
+    return items
+  }, [content, showToc])
+
+  // 渲染目录
+  const renderToc = () => {
+    if (!showToc || tocItems.length === 0) {
+      return null
+    }
+
+    return (
+      <div
+        className='markdown-toc-container'
+        style={{
+          padding: '10px 20px 10px 0',
+          backgroundColor: '#f8f9fa',
+          borderLeft: '4px solid #1890ff',
+          borderRadius: '4px',
+        }}
+      >
+        <ul style={{ margin: 0, padding: 0 }}>
+          {tocItems.map((item, index) => (
+            <li
+              key={index}
+              style={{
+                marginBottom: '4px',
+                marginLeft: `${(item.level - 1) * 16}px`,
+                listStyle: 'none',
+                position: 'relative',
+              }}
+            >
+              <a
+                href={`#${item.id}`}
+                style={{
+                  textDecoration: 'none',
+                  color: '#1890ff',
+                  fontSize: item.level <= 2 ? '14px' : '13px',
+                  fontWeight: item.level === 1 ? 600 : 400,
+                }}
+                onClick={(e) => {
+                  e.preventDefault()
+                  const element = document.getElementById(item.id)
+                  if (element) {
+                    element.scrollIntoView({ behavior: 'smooth' })
+                  }
+                }}
+              >
+                {item.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    )
+  }
+
   return (
-    <div className='markdown-body' style={{ backgroundColor: 'transparent' }}>
-      <MarkdownHooks rehypePlugins={[rehypeStarryNight, remarkGfm]}>
-        {content}
-      </MarkdownHooks>
+    <div style={{ height: '100%' }}>
+      <style>{style}</style>
+      <div className='markdown-body markdown-toc' style={{ height: '100%', display: 'flex' }}>
+        <div style={{ marginRight: 14 }}>
+          {renderToc()}
+        </div>
+        <div style={{ overflow: 'auto', flex: 1 }}>
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={[
+              rehypeSlug,
+              [rehypeAutolinkHeadings, {
+                behavior: 'wrap',
+                properties: {
+                  className: ['anchor'],
+                },
+              }],
+            ]}
+            components={{
+              code(props) {
+                const { children, className } = props
+                const match = /language-(\w+)/.exec(className || '')
+                return match ? (
+                  <SyntaxHighlighter
+                    PreTag='div'
+                    children={String(children).replace(/\n$/, '')}
+                    language={match[1]}
+                    style={oneLight}
+                  />
+                ) : (
+                  <code className={className}>
+                    {children}
+                  </code>
+                )
+              },
+            }}
+          >
+            {content}
+          </ReactMarkdown>
+        </div>
+      </div>
     </div>
   )
 }

package/src/Markdown/style.ts

@@ -0,0 +1,106 @@
+export const style = `
+  code {
+      color: #c7254e;
+      background-color: #f9f2f4;
+      border-radius: 4px;
+  }
+
+  /* 目录容器样式 */
+  .markdown-toc .markdown-body {
+    position: relative;
+  }
+
+  /* 锚点链接样式 */
+  .markdown-toc .anchor {
+    text-decoration: none !important;
+    color: inherit !important;
+    display: contents !important;
+  }
+
+  .markdown-toc .anchor:hover {
+    text-decoration: underline !important;
+  }
+
+  /* 标题悬浮效果 */
+  .markdown-toc h1:hover .anchor::after,
+  .markdown-toc h2:hover .anchor::after,
+  .markdown-toc h3:hover .anchor::after,
+  .markdown-toc h4:hover .anchor::after,
+  .markdown-toc h5:hover .anchor::after,
+  .markdown-toc h6:hover .anchor::after {
+    content: " 🔗";
+    opacity: 0.6;
+    font-size: 0.8em;
+  }
+
+  /* 目录标题样式 */
+  // .markdown-toc h2:first-of-type {
+  //   display: block !important;
+  //   color: #24292f !important;
+  //   font-size: 18px !important;
+  //   font-weight: 600 !important;
+  //   line-height: 1.4 !important;
+  //   border-bottom: 1px solid #d1d9e0 !important;
+  //   padding-bottom: 8px !important;
+  //   margin: 0 0 16px 0 !important;
+  // }
+
+  /* 目录专用样式 - 只对第一个h2下的列表生效 */
+  .markdown-toc h2:first-of-type + ul {
+    background: #f8f9fa !important;
+    border: 1px solid #e1e4e8 !important;
+    border-radius: 6px !important;
+    padding: 16px !important;
+    margin: 16px 0 24px 0 !important;
+    list-style: none !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li {
+    margin: 8px 0 !important;
+    padding-left: 0 !important;
+    list-style: none !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li::before {
+    content: "📖 " !important;
+    margin-right: 8px !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul {
+    margin: 4px 0 0 0 !important;
+    padding-left: 20px !important;
+    list-style: none !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul li {
+    margin: 4px 0 !important;
+    padding-left: 0 !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul li::before {
+    content: "▸ " !important;
+    margin-right: 6px !important;
+    color: #666 !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul li ul {
+    padding-left: 16px !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul li ul li ul li::before {
+    content: "◦ " !important;
+    color: #999 !important;
+  }
+
+  /* 目录链接样式 */
+  .markdown-toc h2:first-of-type + ul a {
+    color: #0969da !important;
+    text-decoration: none !important;
+    font-weight: 500 !important;
+  }
+
+  .markdown-toc h2:first-of-type + ul a:hover {
+    text-decoration: underline !important;
+    color: #0550ae !important;
+  }
+`

package/src/index.ts

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