fix: fix examples types

examples/index.tsx

@@ -1,30 +1,30 @@
-import React, { useState } from 'react'
-import ReactDOM from 'react-dom'
-import { NodeArrayData, NodeTreeData } from './mock'
+import React, { useState, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { NodeArrayData, NodeTreeData, NodeArrayDataType, NodeTreeDataType } from './mock';
 // import ReactJsMind from '../dist/index'
-import ReactJsMind from 'react-jsmind'
-import 'react-jsmind/dist/index.min.css'
-import './index.less'
+import ReactJsMind from 'react-jsmind';
+import 'react-jsmind/dist/index.min.css';
+import './index.less';
 
 const App = () => {
-  const mindRef: any = useState(null)
-  const [data, setData] = useState(NodeTreeData)
-  const [editable, setEditable] = useState(true)
+  const mindRef = useRef<ReactJsMind | null>(null);
+  const [data, setData] = useState<NodeTreeDataType | NodeArrayDataType>(NodeTreeData);
+  const [editable, setEditable] = useState<Boolean>(true);
   const getData = () => {
     if (mindRef.current) {
-      const data = mindRef.current.getData()
-      alert(JSON.stringify(data))
+      const data = mindRef.current.getData();
+      alert(JSON.stringify(data));
     }
-  }
+  };
   const changeData = () => {
-    setData(NodeArrayData)
-  }
+    setData(NodeArrayData);
+  };
   const enableEdit = () => {
-    setEditable(!editable)
-  }
+    setEditable(!editable);
+  };
   const onNodeClick = (node) => {
-    console.log('点击的节点', node)
-  }
+    console.log('点击的节点', node);
+  };
   return (
     <div style={{ width: '100%', height: 400 }}>
       <div className='btns'>
@@ -34,7 +34,7 @@ const App = () => {
       </div>
       <ReactJsMind ref={mindRef} options={{ editable }} data={data} onClick={onNodeClick} />
     </div>
-  )
-}
+  );
+};
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.render(<App />, document.getElementById('root'));

examples/mock.ts

@@ -26,7 +26,7 @@ export const NodeArrayData = {
     },
     { id: 'sub3', parentid: 'root', topic: 'sub3' },
   ],
-}
+};
 
 export const NodeTreeData = {
   meta: { name: 'mind图', author: 'Your Name', version: '0.8.5' },
@@ -49,4 +49,42 @@ export const NodeTreeData = {
       },
     ],
   },
+};
+
+export interface NodeTreeDataType {
+  meta: { name?: string; author?: string; version?: string };
+  format?: string;
+  data: {
+    id?: string;
+    topic?: string;
+    direction?: string;
+    expanded?: boolean;
+    'background-color'?: string;
+    children: Array<{
+      id?: string;
+      topic?: string;
+      direction?: string;
+      expanded?: boolean;
+      'background-color'?: string;
+      children: Array<{ id?: string; topic?: string }>;
+      data: { width?: number; type?: string }; // 自定义业务数据
+    }>;
+  };
+}
+
+export interface NodeArrayDataType {
+  meta: {
+    name: string;
+    author: string;
+    version: string;
+  };
+  format: string;
+  data: Array<{
+    id: string;
+    isroot?: boolean; // 这个属性不是所有的节点都有，所以标记为可选
+    parentid?: string; // 父节点ID，根节点可能没有这个属性
+    topic: string;
+    'background-color'?: string; // 背景颜色，不是所有节点都有
+    'foreground-color'?: string; // 前景颜色，不是所有节点都有
+  }>;
 }