feat: 整体UI美化,并丰富可配置的UI项

Author: DymoneLewis

examples/feature-examples/src/pages/extensions/dynamic-group/index.tsx

@@ -203,7 +203,7 @@ export default function DynamicGroupDemo() {
             text: 'dynamic-group_2',
             resizable: true,
             properties: {
-              transformWithContainer: false,
+              transformWithContainer: true,
               width: 520,
               height: 350,
               radius: 5,
@@ -310,6 +310,62 @@ export default function DynamicGroupDemo() {
 
   const rerender = () => {}
 
+  // 导出当前图数据为 JSON 文件
+  const handleExportGraph = () => {
+    const lf = lfRef.current
+    if (!lf) return
+    const data = lf.getGraphRawData() as GraphConfigData
+    try {
+      const json = JSON.stringify(data, null, 2)
+      const blob = new Blob([json], { type: 'application/json;charset=utf-8' })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = 'dynamic-group-graph.json'
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+      message.success('导出成功')
+    } catch (err) {
+      console.error('导出失败:', err)
+      message.error('导出失败，请查看控制台日志')
+    }
+  }
+
+  // 从本地 JSON 文件导入图数据
+  const handleImportGraph = () => {
+    const lf = lfRef.current
+    if (!lf) return
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = '.json,application/json'
+    input.onchange = () => {
+      const file = input.files?.[0]
+      if (!file) return
+      const reader = new FileReader()
+      reader.onload = () => {
+        try {
+          const text = String(reader.result || '')
+          const parsed = JSON.parse(text) as GraphConfigData
+          // 简单校验结构
+          if (!parsed || typeof parsed !== 'object') {
+            throw new Error('无效的图数据')
+          }
+          // 渲染导入数据
+          lf.clearData()
+          lf.render(parsed)
+          message.success('导入成功')
+        } catch (err) {
+          console.error('导入失败:', err)
+          message.error('导入失败：JSON 格式不合法或数据结构错误')
+        }
+      }
+      reader.readAsText(file)
+    }
+    input.click()
+  }
+
   return (
     <Card
       title="LogicFlow Extension - DynamicGroup"
@@ -322,6 +378,12 @@ export default function DynamicGroupDemo() {
         <Button type="primary" key="rerender" onClick={rerender}>
           重新渲染
         </Button>
+        <Button type="primary" key="export" onClick={handleExportGraph}>
+          导出 JSON
+        </Button>
+        <Button type="primary" key="import" onClick={handleImportGraph}>
+          导入 JSON
+        </Button>
       </Flex>
       <Divider />
       <div ref={containerRef} id="graph" className="viewport"></div>

examples/feature-examples/src/pages/graph/index.less

@@ -1,5 +1,6 @@
 .viewport {
   position: relative;
+  width: 80vw;
   height: 80vh;
   overflow: hidden;
 }
@@ -9,6 +10,34 @@
     outline: none;
   }
 
+  .react-algo-node {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid #e59b68;
+    border-radius: 14px;
+
+    img {
+      width: 24px;
+      height: 24px;
+    }
+
+    span {
+      margin-left: 4px;
+      color: #000000a6;
+      font-size: 12px;
+    }
+
+    &.dark {
+      background-color: #141414;
+
+      span {
+        color: #fff;
+      }
+    }
+  }
+
   .dnd-item {
     display: flex;
     align-items: center;