Merge branch 'master' of http://192.168.0.115:3000/lanxin/gmlx

project/package-lock.json

@@ -19,12 +19,14 @@
         "@types/node": "^16.18.3",
         "@types/react": "^18.0.24",
         "@types/react-dom": "^18.0.8",
+        "@xyflow/react": "^12.10.1",
         "antd": "^5.8.3",
         "antd-mobile": "^5.30.0",
         "axios": "^1.13.2",
         "classnames": "^2.5.1",
         "crypto-js": "^4.2.0",
         "d3": "^7.9.0",
+        "dagre": "^0.8.5",
         "media-chrome": "^4.15.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -37,6 +39,7 @@
         "redux": "^4.2.0",
         "redux-devtools-extension": "^2.13.9",
         "redux-thunk": "^2.4.1",
+        "relation-graph-react": "^2.2.11",
         "sass": "^1.55.0",
         "swiper": "^11.2.10",
         "typescript": "^4.8.4",
@@ -5020,6 +5023,38 @@
       "resolved": "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.1",
+      "resolved": "https://registry.npmmirror.com/@xyflow/react/-/react-12.10.1.tgz",
+      "integrity": "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.75",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmmirror.com/@xyflow/system/-/system-0.0.75.tgz",
+      "integrity": "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/abab/-/abab-2.0.6.tgz",
@@ -5905,6 +5940,15 @@
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz",
@@ -6278,6 +6322,12 @@
       "resolved": "https://registry.npmmirror.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmmirror.com/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
@@ -6666,6 +6716,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.7.1",
       "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.1.tgz",
@@ -7399,6 +7458,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -9629,6 +9698,15 @@
       "resolved": "https://registry.npmmirror.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmmirror.com/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -9868,6 +9946,19 @@
         "webpack": "^5.20.0"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -16227,6 +16318,16 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/relation-graph-react": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmmirror.com/relation-graph-react/-/relation-graph-react-2.2.11.tgz",
+      "integrity": "sha512-eFukFIpYXBnlUDf6KHERX79idqO5nuaZPMQDnN4dJfzBYmAVZaEdmV4Jdw5ddFXIc9OiNJ7qGve+G+11/EQBFg==",
+      "license": "MIT",
+      "dependencies": {
+        "html2canvas": "^1.4.1",
+        "screenfull": "^5.1.0"
+      }
+    },
     "node_modules/renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/renderkid/-/renderkid-3.0.0.tgz",
@@ -17561,6 +17662,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -17903,11 +18013,12 @@
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/util-deprecate": {
@@ -17939,6 +18050,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
@@ -18897,6 +19017,34 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   },
   "dependencies": {
@@ -22583,6 +22731,32 @@
       "resolved": "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
+    "@xyflow/react": {
+      "version": "12.10.1",
+      "resolved": "https://registry.npmmirror.com/@xyflow/react/-/react-12.10.1.tgz",
+      "integrity": "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==",
+      "requires": {
+        "@xyflow/system": "0.0.75",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      }
+    },
+    "@xyflow/system": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmmirror.com/@xyflow/system/-/system-0.0.75.tgz",
+      "integrity": "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==",
+      "requires": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/abab/-/abab-2.0.6.tgz",
@@ -23289,6 +23463,11 @@
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
+    },
     "batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz",
@@ -23587,6 +23766,11 @@
       "resolved": "https://registry.npmmirror.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmmirror.com/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
+    },
     "classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
@@ -23887,6 +24071,14 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "css-loader": {
       "version": "6.7.1",
       "resolved": "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.1.tgz",
@@ -24401,6 +24593,15 @@
         "d3-transition": "2 - 3"
       }
     },
+    "dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "requires": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -26126,6 +26327,14 @@
       "resolved": "https://registry.npmmirror.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
     },
+    "graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmmirror.com/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -26320,6 +26529,15 @@
         "tapable": "^2.0.0"
       }
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -31020,6 +31238,15 @@
       "resolved": "https://registry.npmmirror.com/relateurl/-/relateurl-0.2.7.tgz",
       "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog=="
     },
+    "relation-graph-react": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmmirror.com/relation-graph-react/-/relation-graph-react-2.2.11.tgz",
+      "integrity": "sha512-eFukFIpYXBnlUDf6KHERX79idqO5nuaZPMQDnN4dJfzBYmAVZaEdmV4Jdw5ddFXIc9OiNJ7qGve+G+11/EQBFg==",
+      "requires": {
+        "html2canvas": "^1.4.1",
+        "screenfull": "^5.1.0"
+      }
+    },
     "renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/renderkid/-/renderkid-3.0.0.tgz",
@@ -32056,6 +32283,14 @@
         "minimatch": "^3.0.4"
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -32321,9 +32556,9 @@
       }
     },
     "use-sync-external-store": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
       "requires": {}
     },
     "util-deprecate": {
@@ -32352,6 +32587,14 @@
       "resolved": "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz",
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz",
@@ -33139,6 +33382,14 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "requires": {
+        "use-sync-external-store": "^1.2.2"
+      }
     }
   }
 }

project/package.json

@@ -14,12 +14,14 @@
     "@types/node": "^16.18.3",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
+    "@xyflow/react": "^12.10.1",
     "antd": "^5.8.3",
     "antd-mobile": "^5.30.0",
     "axios": "^1.13.2",
     "classnames": "^2.5.1",
     "crypto-js": "^4.2.0",
     "d3": "^7.9.0",
+    "dagre": "^0.8.5",
     "media-chrome": "^4.15.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -32,6 +34,7 @@
     "redux": "^4.2.0",
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
+    "relation-graph-react": "^2.2.11",
     "sass": "^1.55.0",
     "swiper": "^11.2.10",
     "typescript": "^4.8.4",

project/public/tuPu/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="zh" style="height: 100%">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="./css/reset.css" />
+    <title>tu</title>
+  </head>
+
+  <body style="height: 100%; margin: 0; background: none">
+    <div id="container" style="height: 100%"></div>
+
+    <script src="../three/data.js"></script>
+
+    <script type="text/javascript" src="./js/echarts.min.js"></script>
+    <script src="./js/index.js"></script>
+  </body>
+</html>

project/public/tuPu/js/index.js

@@ -0,0 +1,288 @@
+function anonymous() {
+  const urlAll = window.location.href
+
+  if (!urlAll.includes('?id=')) return alert('参数错误')
+
+  const id = urlAll.split('?id=')[1]
+
+  const obj = cardNames.find(v => v.id == id)
+
+  if (!obj) return alert('参数错误')
+
+  let dom = document.getElementById('container')
+  let myChart = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false
+  })
+
+  let option
+
+  const data1 = []
+  const data2 = []
+
+  if (obj.son) {
+    const ids = []
+
+    obj.son.forEach((c1, i) => {
+      c1.forEach(c2 => {
+        data2.push({
+          source: c2.source + '',
+          target: c2.target + '',
+          value: c2.value
+        })
+
+        if (!ids.map(a => a.id).includes(c2.source + '')) {
+          ids.push({
+            id: c2.source + '',
+            symbolSize: 200 - (i + 1) * 50,
+            tit: i === obj.son.length - 1,
+            value: c2.value
+          })
+        }
+        if (!ids.map(a => a.id).includes(c2.target + '')) {
+          ids.push({
+            id: c2.target + '',
+            symbolSize: 200 - (i + 1) * 50,
+            tit: i === obj.son.length - 1,
+            value: c2.value
+          })
+        }
+      })
+    })
+
+    ids.forEach(v => {
+      const isCenter = id == v.id
+      const centerX = window.innerWidth / 2 // 中心坐标x
+      const centerY = window.innerHeight / 2 // 中心坐标y
+
+      const obj = cardNames.find(c => c.id == v.id)
+
+      data1.push({
+        fixed: isCenter, // 固定中心节点位置
+        x: isCenter ? centerX : null, // 设置中心节点坐标
+        y: isCenter ? centerY : null,
+        // category: id == v.id ? '中心' : '',
+        symbolSize: id == v.id ? 200 : v.symbolSize,
+        id: v.id,
+        name: obj.name,
+        symbol: `image://../../three/assets/out/${v.id}.png`
+        //  tit:v.tit
+      })
+    })
+  }
+
+  option = {
+    tooltip: {
+      show: true, // 默认显示
+      showContent: true, // 是否显示提示框浮层
+      trigger: 'item', // 触发类型，默认数据项触发
+      triggerOn: 'mousemove', // 提示触发条件，mousemove鼠标移至触发，还有click点击触发
+      alwaysShowContent: false, // 默认离开提示框区域隐藏，true为一直显示
+      showDelay: 100, // 浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
+      hideDelay: 2000, // 浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
+      enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
+      position: 'right', // 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
+      confine: true, // 是否将 tooltip 框限制在图表的区域内。
+      // 外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
+      transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间，单位是秒，设置为 0 的时候会紧跟着鼠标移动。
+      formatter: function (params) {
+        // 判断当前节点是否为第三级节点
+        // 假设层级信息可以通过 params.data.tit 获取，或者通过其他逻辑判断
+        if (params.data.tit) {
+          // 如果是第三级节点，返回自定义的悬浮框内容
+          return params.name
+        } else {
+          // 如果不是第三级节点，返回默认的悬浮框内容或不显示
+          return '' // 不显示悬浮框
+        }
+      },
+      // 自定义提示框的样式
+      borderColor: '#896a43',
+      backgroundColor: 'rgba(0,0,0,0.5)',
+      textStyle: {
+        color: '#dfd5c5',
+        fontFamily: 'sk'
+      },
+      blur: {
+        itemStyle: {
+          opacity: 0.2 // 非突出节点的透明度
+        },
+        label: {
+          show: false // 非突出节点隐藏标签
+        }
+      }
+    },
+
+    series: [
+      {
+        type: 'graph', // 关系图
+        symbolKeepAspect: true, // 保持图片宽高比
+        // name: "Name:", // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
+        layout: 'force', // 图的布局，类型为力导图，'circular' 采用环形布局，见示例 Les Miserables
+        legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
+        hoverAnimation: false, // 是否开启鼠标悬停节点的显示动画
+        coordinateSystem: null, // 坐标系可选
+        // xAxisIndex: 0, // x轴坐标 有多种坐标系轴坐标选项
+        // yAxisIndex: 0, // y轴坐标
+        force: {
+          // 力引导图基本配置
+          // initLayout: 'circular',
+          // initLayout: , // 力引导的初始化布局，默认使用xy轴的标点
+          repulsion: 600, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
+          gravity: 0.01, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
+          edgeLength: 240, //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
+          layoutAnimation: true, // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画
+          // 在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
+          // 防止节点重叠
+          friction: 0.8, // 增加摩擦力
+          // 增加防止重叠的参数
+          nodeOverlap: 20, // 防止节点重叠的参数
+          // 优化布局迭代
+          coolingFactor: 0.99, // 冷却因子，使布局逐渐稳定
+          minMovement: 0.5, // 最小移动距离
+          maxIteration: 2000 // 增加最大迭代次数
+        },
+        roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启，true 为都开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'
+        // zoom: 1,
+        scaleLimit: {
+          // 缩放限制，只在使用 force 布局时有效。
+          min: 0.8 ? 0.8 : 0.5, // 最小缩放比例
+          max: 3 // 最大缩放比例
+        },
+        nodeScaleRatio: 0.6, // 鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
+        draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
+        focusNodeAdjacency: !window.isMobile ? true : false, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
+        emphasis: {
+          itemStyle: {
+            opacity: 1 // 突出节点的透明度
+          }
+        },
+        blur: {
+          itemStyle: {
+            opacity: 0.3 // 非突出节点的透明度
+          },
+          lineStyle: {
+            opacity: 0.3 // 非突出节点的透明度
+          },
+          label: {
+            opacity: 0.3 // 非突出节点的透明度
+          }
+        },
+        // symbol:'roundRect', // 关系图节点标记的图形。
+        // ECharts 提供的标记类型包括：'circle'(圆形), 'rect'（矩形）, 'roundRect'（圆角矩形）,
+        // 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大头针）, 'arrow'（箭头）
+        // 也可以通过 'image://url' 设置为图片，其中 url 为图片的链接。'path:// 这种方式可以任意改变颜色并且抗锯齿
+        // symbolSize: 10 , // 也可以用数组分开表示宽和高，例如 [20, 10] 如果需要每个数据的图形大小不一样，
+        // 可以设置为如下格式的回调函数：(value: Array|number, params: Object) => number|Array
+        // symbolRotate:, // 关系图节点标记的旋转角度。注意在 markLine 中当 symbol 为 'arrow' 时会忽略 symbolRotate 强制设置为切线的角度。
+        // symbolOffset:[0,0], // 关系图节点标记相对于原本位置的偏移。[0, '50%']
+        edgeSymbol: ['circle', 'circle'], // 边两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。
+        // 默认不显示标记，常见的可以设置为箭头，如下：edgeSymbol: ['circle', 'arrow']
+        edgeSymbolSize: [0, 10], // 边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
+
+        symbolSize: 120, // 关系图节点标记的大小，可以是一个数组分别指定两端，也可以是单个统一指定。
+        itemStyle: {
+          // ========图形样式，有 normal 和 emphasis 两个状态。
+          // normal 是图形在默认状态下的样式；
+          // emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
+          normal: {
+            // 默认样式
+            label: {
+              show: true
+            },
+            borderType: 'solid', // 图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
+            borderColor: '#fad166', // 设置图形边框为淡金色,透明度为0.4
+            borderWidth: 2, // 图形的描边线宽。为 0 时无描边。
+            opacity: 1 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
+          },
+          emphasis: {
+            // 高亮状态
+            // lineStyle: {
+            //   width: 10,
+            // },
+          }
+        },
+        lineStyle: {
+          // ========关系边的公用线条样式。
+          normal: {
+            color: '#fad166',
+            width: '1', //线的粗细
+            type: 'dashed', // 线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
+            curveness: 0.3, // 线条的曲线程度，从0到1
+            opacity: 0.5 // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
+          },
+          emphasis: {
+            // 高亮状态
+          }
+        },
+        label: {
+          // ========结点图形上的文本标签
+          normal: {
+            show: true, // 是否显示标签。
+            position: 'bottom', // 标签的位置。['50%', '50%'] [x,y]
+            textStyle: {
+              // 标签的字体样式
+              color: '#fad166', // 字体颜色
+              fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
+              fontWeight: 'normal', // 'normal'标准，'bold'粗的，'bolder'更粗的，'lighter'更细的，或100 | 200 | 300 | 400...
+              fontFamily: 'sk', // 文字的字体系列
+              fontSize: 16
+            }
+          }
+        },
+        edgeLabel: {
+          // ========连接线上的文本标签
+          normal: {
+            show: true, // 不显示连接线上的文字，如果显示只能显示结点的value值，而不是连接线的值
+            // position: "middle", // 标签的位置。['50%', '50%'] [x,y]
+            textStyle: {
+              color: '#f4e6bf',
+              fontSize: 16
+            },
+            formatter: '{c}'
+          }
+        },
+
+        data: data1,
+        // 设置连线edges的数据,
+
+        links: data2, // 设置连线edges的数据
+        // 添加节点布局优化
+        circular: {
+          rotateLabel: false
+        },
+        // 优化节点间距
+        categories: [
+          {
+            name: '中心',
+            itemStyle: {
+              color: '#ff6b6b'
+            }
+          }
+        ]
+      }
+    ]
+  }
+
+  if (myChart) {
+    if (option && typeof option === 'object') {
+      setTimeout(function () {
+        myChart.setOption(option)
+      }, 500)
+    }
+  } else {
+    console.error('ECharts 初始化失败')
+  }
+
+  // 点击节点跳转链接
+  myChart.on('click', function (params, e) {
+    // if (params.componentType === "series" && params.dataType === "node") {
+    //   const nodeData = params.data;
+    //   openDetail(nodeData.idinfo, e);
+    // }
+  })
+
+  window.addEventListener('resize', myChart.resize)
+}
+
+anonymous()

project/src/assets/styles/base.css

@@ -118,7 +118,7 @@ textarea {
 }
 .mySorrl::-webkit-scrollbar {
   /*滚动条整体样式*/
-  width: 5px;
+  width: 0.6vw;
   /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
 }

project/src/assets/styles/base.less

@@ -13,7 +13,7 @@ video {
   height: 100%;
 }
 
-iframe{
+iframe {
   width: 100%;
   height: 100%;
   border: none;
@@ -33,8 +33,16 @@ html {
 
 body {
   position: relative;
-  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB',
-    'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
+  font:
+    1em/1.4 'Microsoft Yahei',
+    'PingFang SC',
+    'Avenir',
+    'Segoe UI',
+    'Hiragino Sans GB',
+    'STHeiti',
+    'Microsoft Sans Serif',
+    'WenQuanYi Micro Hei',
+    sans-serif;
   font-size: var(--fontNum);
   height: 100%;
   color: black;
@@ -49,7 +57,6 @@ body {
   background-color: rgba(0, 0, 0, 0.9) !important;
 }
 .ant-image-preview-img-wrapper {
-
   .previewImage {
     width: 100%;
     height: 100%;
@@ -69,7 +76,6 @@ body {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
-
       }
     }
     .ImgFromTxt {
@@ -84,10 +90,6 @@ body {
   }
 }
 
-
-
-
-
 #root {
   overflow: hidden;
   margin: auto;
@@ -148,7 +150,7 @@ textarea {
 // 滚动条
 .mySorrl::-webkit-scrollbar {
   /*滚动条整体样式*/
-  width: 5px;
+  width: 0.6vw;
   /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
 }
@@ -188,12 +190,14 @@ textarea {
 
 // 默认字体
 .sizeNo {
-  font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
+  font-family:
+    'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
     'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
 }
 
 .adm-auto-center-content {
-  font-family: 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
+  font-family:
+    'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti',
     'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif !important;
   font-size: 16px;
   letter-spacing: 3px;
@@ -214,7 +218,6 @@ textarea {
   color: #f1e39e;
 }
 
-
 @keyframes yunShan {
   0% {
     opacity: 1;
@@ -229,7 +232,6 @@ textarea {
   }
 }
 
-
 // 热点页面打开透明的变化
 #HotOpCss {
   animation: HotOpCss 0.5s linear forwards;
@@ -258,7 +260,6 @@ textarea {
 // antd mo 查看图片
 
 @media screen and (orientation: portrait) {
-
   /* 竖屏 */
   .adm-image-viewer-image-wrapper img {
     transform: rotate(90deg) !important;
@@ -292,7 +293,6 @@ textarea {
     }
   }
 
-
   .ant-image-preview-img-wrapper {
     .previewImage {
       position: relative;
@@ -312,8 +312,6 @@ textarea {
     }
   }
 
-
-
   #root .ant-tooltip {
     transform: rotate(0) !important;
     width: 410px !important;
@@ -325,11 +323,7 @@ textarea {
     }
   }
 
-
-
-
   #root .ant-tooltip .tooltip_MT {
-
     .top {
       position: relative;
       width: 100%;
@@ -368,10 +362,8 @@ textarea {
       height: calc(100% - 30px) !important;
     }
   }
-
 }
 
-
 // 热点图标闪动
 .HotIconBase {
   animation: yunShan 2s infinite linear;
@@ -470,10 +462,8 @@ textarea {
     .ant-tooltip-arrow {
       top: 2px !important;
     }
-
   }
 
-
   .ant-tooltip-inner {
     // background: url(../img/tooltipBg.png) no-repeat;
     // background-size: 100% 100%;
@@ -593,7 +583,6 @@ textarea {
     transform: translateX(0);
   }
 
-
   25% {
     transform: translateX(-20px);
   }
@@ -606,7 +595,6 @@ textarea {
     transform: translateX(20px);
   }
 
-
   100% {
     transform: translateX(0);
   }
@@ -800,4 +788,4 @@ textarea {
     /* 10帧：-(10-1)×200 = -1800px */
     transform: translate(-5845px, 0);
   }
-}
+}

project/src/pages/A5view/PageSon/A5atlas/index.module.scss

@@ -1,4 +1,35 @@
 .A5atlas {
+  position: relative;
+  width: 100%;
+  height: 100%;
   :global {
+    .A5Aback {
+      position: absolute;
+      z-index: 5;
+      left: 1.5vw;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4vw;
+      height: auto;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: auto;
+      }
+      & > div {
+        position: absolute;
+        left: 0;
+        bottom: -22px;
+        width: 100%;
+        text-align: center;
+        color: var(--themeColor2);
+        letter-spacing: 2px;
+        font-size: 18px;
+      }
+    }
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
   }
 }

project/src/pages/A5view/PageSon/A5atlas/index.tsx

@@ -2,19 +2,23 @@ import React from 'react'
 import styles from './index.module.scss'
 import { infoPageIDGet } from '@/utils/locStore'
 import history from '@/utils/history'
+import { urlCanRes } from '@/utils/urlCan'
 function A5atlas() {
   return (
     <div className={styles.A5atlas}>
-      <h1 style={{ color: '#fff' }}>图谱页面</h1>
-      <h1
-        style={{ color: '#fff' }}
+      {/* 返回按钮 */}
+      <div
+        className='A5Aback'
         onClick={() => {
           const key = infoPageIDGet()
           history.replace(`/view/${key}`)
         }}
       >
-        返回
-      </h1>
+        <img src={require('@/assets/three/back.png')} alt='' />
+        <div>返回</div>
+      </div>
+
+      <iframe src={`./tuPu/index.html?id=${urlCanRes()}`} title='tuPu' frameBorder='0'></iframe>
     </div>
   )
 }

project/src/pages/A5view/PageSon/A5atlas2/data.tsx

@@ -0,0 +1,44 @@
+import { MessageFu } from '@/utils/message'
+import { urlCanRes } from '@/utils/urlCan'
+
+// ---------------这个版本只支持电脑端 弃用----------------
+const nodes: any[] = []
+
+const lines: any[] = []
+
+cardNames.forEach(v => {
+  nodes.push({
+    id: v.id + '',
+    text: v.name,
+    data: { name: v.name, img: v.img, lines: v.lines, id: v.id }
+  })
+
+  if (v.lines) {
+    v.lines.forEach((c: any) => {
+      lines.push({
+        from: v.id + '',
+        to: c.to + '',
+        text: c.text,
+        dashType: 2
+      })
+    })
+  }
+})
+
+export const atlData = () => {
+  let objRes: any = {}
+
+  const id = urlCanRes()
+  if (typeof id === 'number') {
+    const obj = cardNames.find(v => v.id === id)
+    if (obj) {
+      objRes = {
+        rootId: id + '',
+        nodes: nodes,
+        lines: lines
+      }
+    } else MessageFu.warning('id错误')
+  } else MessageFu.warning('id错误')
+
+  return objRes
+}

project/src/pages/A5view/PageSon/A5atlas2/index.module.scss

@@ -0,0 +1,107 @@
+.A5atlas {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  :global {
+    .A5Aback {
+      position: absolute;
+      z-index: 5;
+      left: 1.5vw;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4vw;
+      height: auto;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: auto;
+      }
+      & > div {
+        position: absolute;
+        left: 0;
+        bottom: -22px;
+        width: 100%;
+        text-align: center;
+        color: var(--themeColor2);
+        letter-spacing: 2px;
+        font-size: 18px;
+      }
+    }
+
+    .A5Aloding {
+      left: auto;
+      right: 1.5vw;
+    }
+
+    .A5Amain {
+      width: 100%;
+      height: 100%;
+
+      .A5Arow {
+        display: inline-block;
+        position: relative;
+        width: 200px;
+        height: 238px;
+        background-image: url('../../../../assets/three/bj.png');
+        background-size: 100% 100%;
+        transition: all 0.3s;
+
+        img {
+          pointer-events: none;
+        }
+
+        & > div {
+          position: absolute;
+          top: 9%;
+          left: 5%;
+          width: 90%;
+          height: 72%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          & > div {
+            color: var(--themeColor2);
+            margin-bottom: 20px;
+            font-size: 18px;
+          }
+          & > img {
+            max-width: 70%;
+            max-height: 50%;
+          }
+        }
+      }
+
+      .A5ArowAc {
+        transform: scale(1.2);
+      }
+
+      .react-flow__node {
+        width: 250px;
+        height: 295px;
+        background-color: transparent;
+        border: none;
+        box-shadow: none !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // 隐藏所有连接点
+        .react-flow__handle {
+          opacity: 0;
+          pointer-events: none;
+        }
+      }
+      .react-flow__edge-textbg {
+        fill: transparent;
+      }
+      .react-flow__edge-text {
+        font-size: 24px;
+        fill: var(--themeColor2);
+      }
+    }
+    .react-flow__panel {
+      display: none !important;
+    }
+  }
+}

project/src/pages/A5view/PageSon/A5atlas2/index.tsx

@@ -0,0 +1,205 @@
+import React, { useCallback, useEffect, useMemo } from 'react'
+import styles from './index.module.scss'
+import { infoPageIDGet } from '@/utils/locStore'
+import history from '@/utils/history'
+import { baseOssUrl } from '@/utils/http'
+import classNames from 'classnames'
+import dagre from 'dagre'
+
+import {
+  ReactFlow,
+  Edge,
+  useNodesState,
+  useEdgesState,
+  useReactFlow,
+  MarkerType,
+  ReactFlowProvider
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+
+const layoutDirection = 'TB'
+
+function FlowChart() {
+  const { fitView } = useReactFlow() // 获取 fitView 方法
+  // 每个组件
+  const Row = useCallback((item: any) => {
+    return (
+      <div className={classNames('A5Arow')}>
+        <div>
+          <div>{item.name}</div>
+          <img src={`${baseOssUrl}modelSS/img/${item.img}`} alt='' />
+        </div>
+      </div>
+    )
+  }, [])
+
+  // 创建不带位置的初始节点
+  const initialNodesWithoutPosition: any[] = useMemo(() => {
+    return cardNames.map(v => ({
+      id: v.id + '',
+      // position: v.position,
+      data: { label: Row(v) },
+      draggable: true
+    }))
+  }, [Row])
+
+  // 初始边 - 添加箭头标记
+  const initialEdges: Edge[] = useMemo(() => {
+    const arr: any[] = []
+    cardNames.forEach(v1 => {
+      if (v1.lines) {
+        v1.lines.forEach((v2: any, index: any) => {
+          arr.push({
+            id: index + '' + v1.id,
+            source: v1.id + '',
+            target: v2.to + '',
+            label: v2.text,
+            // 设置箭头
+            markerEnd: {
+              type: MarkerType.ArrowClosed,
+              color: '#f7d56f'
+            },
+            // 设置边样式
+            style: { stroke: '#f7d56f', strokeWidth: 2 }
+          })
+        })
+      }
+    })
+
+    return arr
+  }, [])
+
+  // 使用状态管理节点和边
+  const [nodes, setNodes, onNodesChange] = useNodesState([] as any[])
+  const [edges, setEdges, onEdgesChange] = useEdgesState([] as any[])
+
+  // 自动布局函数
+  const applyAutoLayout = useCallback((nodes: any[], edges: any[], direction: string = 'TB') => {
+    // 创建 dagre 图
+    const dagreGraph = new dagre.graphlib.Graph()
+    dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+    // 设置布局选项
+    const nodeWidth = 250
+    const nodeHeight = 295
+
+    // 根据方向设置布局参数
+    const isHorizontal = direction === 'LR' || direction === 'RL'
+    dagreGraph.setGraph({
+      rankdir: direction,
+      nodesep: 100, // 节点间距
+      ranksep: 100, // 层级间距
+      marginx: 20,
+      marginy: 20
+    })
+
+    // 添加节点到 dagre 图
+    nodes.forEach(node => {
+      dagreGraph.setNode(node.id, {
+        width: nodeWidth,
+        height: nodeHeight
+      })
+    })
+
+    // 添加边到 dagre 图
+    edges.forEach(edge => {
+      if (edge.source && edge.target) {
+        dagreGraph.setEdge(edge.source, edge.target)
+      }
+    })
+
+    // 计算布局
+    dagre.layout(dagreGraph)
+
+    // 转换节点位置
+    const layoutedNodes = nodes.map(node => {
+      const nodeWithPosition = dagreGraph.node(node.id)
+
+      return {
+        ...node,
+        targetPosition: isHorizontal ? 'left' : 'top',
+        sourcePosition: isHorizontal ? 'right' : 'bottom',
+        position: {
+          x: nodeWithPosition.x - nodeWidth / 2 + Math.random() * 10,
+          y: nodeWithPosition.y - nodeHeight / 2 + Math.random() * 10
+        }
+      }
+    })
+
+    return layoutedNodes
+  }, [])
+
+  // 初始化布局
+
+  const initFu = useCallback(() => {
+    if (initialNodesWithoutPosition.length > 0) {
+      const layoutedNodes = applyAutoLayout(
+        initialNodesWithoutPosition,
+        initialEdges,
+        layoutDirection
+      )
+      setNodes(layoutedNodes)
+      setEdges(initialEdges)
+
+      // 自适应视图
+      setTimeout(() => {
+        fitView({ duration: 300, padding: 0.1 })
+      }, 100)
+    }
+  }, [applyAutoLayout, fitView, initialEdges, initialNodesWithoutPosition, setEdges, setNodes])
+
+  useEffect(() => {
+    initFu()
+  }, [initFu])
+
+  // 处理节点点击
+  const onNodeClick = useCallback((event: React.MouseEvent, node: any) => {
+    console.log('------', event, node)
+  }, [])
+
+  return (
+    <div className={styles.A5atlas}>
+      {/* 返回按钮 */}
+      <div
+        className='A5Aback'
+        onClick={() => {
+          const key = infoPageIDGet()
+          history.replace(`/view/${key}`)
+        }}
+      >
+        <img src={require('@/assets/three/back.png')} alt='' />
+        <div>返回</div>
+      </div>
+
+      {/* 手动重置按钮 */}
+      <div className='A5Aback A5Aloding' onClick={initFu}>
+        <img src={require('@/assets/three/Reset.png')} alt='' />
+        <div>重置</div>
+      </div>
+
+      <div className={classNames('A5Amain')} style={{ width: '100%', height: '100%' }}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onNodeClick={onNodeClick} // 添加这行
+          fitView
+        ></ReactFlow>
+      </div>
+    </div>
+  )
+}
+
+// 主组件，用 ReactFlowProvider 包裹
+function A5atlas() {
+  return (
+    <ReactFlowProvider>
+      <FlowChart />
+    </ReactFlowProvider>
+  )
+}
+
+const MemoA5atlas = React.memo(A5atlas)
+
+export default MemoA5atlas

project/src/pages/A5view/PageSon/A5atlas2/index2.module.scss

@@ -0,0 +1,143 @@
+.A5atlas {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  :global {
+    .A5Aback {
+      position: absolute;
+      z-index: 5;
+      left: 1.5vw;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4vw;
+      height: auto;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: auto;
+      }
+      & > div {
+        position: absolute;
+        left: 0;
+        bottom: -22px;
+        width: 100%;
+        text-align: center;
+        color: var(--themeColor2);
+        letter-spacing: 2px;
+        font-size: 18px;
+      }
+    }
+
+    .A5Aloding {
+      left: auto;
+      right: 1.5vw;
+    }
+
+    .A5Amain {
+      width: 100%;
+      height: 100%;
+
+      .relation-graph {
+        background-image: url('../../../../assets/three/background.jpg');
+        background-size: 100% 100%;
+        // pointer-events: none;
+      }
+
+      // 样式重置
+      .relation-graph .rel-map {
+        background-color: transparent;
+      }
+
+      .rel-node-peel {
+        width: 250px;
+        height: 295px;
+      }
+
+      .rel-node-type-node {
+        background-color: transparent !important;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        box-shadow: none;
+
+        .A5Arow {
+          display: inline-block;
+          position: relative;
+          width: 200px;
+          height: 238px;
+          background-image: url('../../../../assets/three/bj.png');
+          background-size: 100% 100%;
+          transition: all 0.3s;
+
+          img {
+            pointer-events: none;
+          }
+
+          & > div {
+            position: absolute;
+            top: 9%;
+            left: 5%;
+            width: 90%;
+            height: 72%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            & > div {
+              color: var(--themeColor2);
+              margin-bottom: 20px;
+              font-size: 18px;
+            }
+            & > img {
+              max-width: 70%;
+              max-height: 50%;
+            }
+          }
+        }
+        // .A5ArowAc {
+        //   transition: all 0.3s;
+        //   transform: scale(1.2);
+        // }
+      }
+
+      .rel-node-peel-checked {
+        .rel-node-checked {
+          box-shadow: none;
+          // transform: scale(1.2);
+          transition: all 0.3s;
+        }
+        /* 当父元素 .rel-node-checked 直接包含一个同时具有 A5ArowAc 和 checked 类的子元素时，匹配该父元素 */
+        .rel-node-checked:has(> .A5ArowAc) {
+          transform: scale(1.2);
+        }
+      }
+      .rel-node {
+        transition: all 0.3s;
+      }
+
+      .c-rg-line-text {
+        font-size: 20px;
+        fill: #fff3c5 !important;
+      }
+
+      .rel-toolbar {
+        display: none;
+        // background-color: rgba(0, 0, 0, 0.6);
+        // .c-current-zoom {
+        //   color: #fff;
+        // }
+      }
+    }
+
+    .A5AmainAc {
+      .relation-graph {
+        pointer-events: auto;
+      }
+    }
+
+    .rel-link-peel {
+      pointer-events: none !important;
+    }
+  }
+}

project/src/pages/A5view/PageSon/A5atlas2/index2.tsx

@@ -0,0 +1,125 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import styles from './index2.module.scss'
+import { infoPageIDGet } from '@/utils/locStore'
+import history from '@/utils/history'
+
+import RelationGraph from 'relation-graph-react'
+import { atlData } from './data'
+import { baseOssUrl } from '@/utils/http'
+import { urlCanRes } from '@/utils/urlCan'
+import classNames from 'classnames'
+
+const isMobile = /Android|webOS|iPhone|iPad|iPod/i.test(navigator.userAgent)
+
+function A5atlas() {
+  // 通过id高亮线条
+  const liangXianFu = useCallback((id: string) => {
+    if (graphRef.current) {
+      setAcId(id)
+      const allLinks: any[] = graphRef.current.getInstance().getLinks()
+      allLinks.forEach(link => {
+        link.relations.forEach((c: any) => {
+          if (c.from === id || c.to === id) {
+            c.opacity = 1
+            c.lineWidth = 3
+          } else {
+            c.opacity = 0.3
+            c.lineWidth = 1
+          }
+        })
+      })
+
+      const arr = graphRef.current.getInstance().getNodes()
+
+      arr.forEach((v1: any) => {
+        // v1.width = 200
+        // v1.height = 238
+        v1.opacity = 0.3
+      })
+
+      const nowObj = graphRef.current.getInstance().getNodeById(id)
+      // console.log('--------', nowObj)
+      // nowObj.width = 250
+      // nowObj.height = 295
+      nowObj.opacity = 1
+      nowObj.targetNodes.forEach((v2: any) => {
+        v2.opacity = 1
+      })
+    }
+  }, [])
+
+  const graphRef = useRef<any>(null)
+
+  const showGraph = useCallback(() => {
+    if (graphRef.current) {
+      graphRef.current.setJsonData(atlData())
+      const id = urlCanRes()
+      if (id) {
+        setTimeout(() => {
+          liangXianFu(id + '')
+        }, 200)
+      }
+    }
+  }, [liangXianFu])
+
+  useEffect(() => {
+    showGraph()
+  }, [showGraph])
+
+  const [acId, setAcId] = useState('0')
+
+  return (
+    <div className={styles.A5atlas}>
+      {/* 返回按钮 */}
+      <div
+        className='A5Aback'
+        onClick={() => {
+          const key = infoPageIDGet()
+          history.replace(`/view/${key}`)
+        }}
+      >
+        <img src={require('@/assets/three/back.png')} alt='' />
+        <div>返回</div>
+      </div>
+
+      {/* 手动重置按钮 */}
+      <div className='A5Aback A5Aloding' onClick={showGraph}>
+        <img src={require('@/assets/three/Reset.png')} alt='' />
+        <div>重置</div>
+      </div>
+
+      <div
+        className={classNames('A5Amain', isMobile ? '' : 'A5AmainAc')}
+        // 可选：防止移动浏览器在拖动/缩放时的一些默认行为
+        style={{ touchAction: 'none' }}
+      >
+        <RelationGraph
+          ref={graphRef}
+          options={{
+            disableDragCanvas: false,
+            defaultLineShape: 3,
+            allowSwitchLineShape: true,
+            allowSwitchJunctionPoint: true,
+            moveToCenterWhenRefresh: true, // 刷新时居中，可选
+            useAnimationWhenRefresh: true // 刷新时使用动画，可选
+          }}
+          nodeSlot={({ node }: any) => (
+            <div
+              className={classNames('A5Arow', acId === node.data.id + '' ? 'A5ArowAc' : '')}
+              onClick={() => liangXianFu(node.data.id + '')}
+            >
+              <div>
+                <div>{node.data.name}</div>
+                <img src={`${baseOssUrl}modelSS/img/${node.data.img}`} alt='' />
+              </div>
+            </div>
+          )}
+        ></RelationGraph>
+      </div>
+    </div>
+  )
+}
+
+const MemoA5atlas = React.memo(A5atlas)
+
+export default MemoA5atlas

project/src/pages/A5view/PageSon/A5list/index.module.scss

@@ -1,5 +1,146 @@
 .A5list {
-  color: #fff;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 4% 6% 6% 8%;
   :global {
+    .A5Lback {
+      position: absolute;
+      left: 1.5vw;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4vw;
+      height: auto;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: auto;
+      }
+      & > div {
+        position: absolute;
+        left: 0;
+        bottom: -22px;
+        width: 100%;
+        text-align: center;
+        color: var(--themeColor2);
+        letter-spacing: 2px;
+        font-size: 18px;
+      }
+    }
+
+    .A5Ltype {
+      position: absolute;
+      left: 6.5vw;
+      bottom: 1.5vh;
+      display: flex;
+      .A5Lbtn {
+        position: relative;
+        width: auto;
+        height: auto;
+        margin-right: 1vw;
+        cursor: pointer;
+        & > img {
+          pointer-events: none;
+          height: 4vw;
+          width: auto;
+        }
+        & > div {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 2;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          letter-spacing: 2px;
+          font-size: 24px;
+          color: var(--themeColor);
+        }
+      }
+      .A5LbtnAc {
+        pointer-events: none;
+        & > div {
+          color: var(--themeColor2);
+        }
+      }
+    }
+
+    // 中间主体
+    .A5Lmain {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      .A5Lrow {
+        cursor: pointer;
+        width: 24%;
+        min-height: 260px;
+        height: auto;
+        margin-right: 1%;
+        margin-bottom: 2%;
+        position: relative;
+        // background-color: #5d4530;
+        & > img {
+          width: 100%;
+          height: auto;
+        }
+        & > div {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          z-index: 2;
+          .A5Lrow1 {
+            height: 82%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 10%;
+            .adm-image-tip {
+              background-color: transparent;
+              svg {
+                width: 100px;
+                height: 100px;
+              }
+            }
+            .adm-image,
+            .adm-image-tip {
+              width: 100%;
+              height: 100%;
+              img {
+                object-fit: contain !important;
+              }
+            }
+            .imgLoding {
+              width: 100%;
+              height: 100%;
+              color: var(--themeColor2);
+              letter-spacing: 3px;
+              font-size: 18px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+          .A5Lrow2 {
+            height: 18%;
+            display: flex;
+            align-items: center;
+            padding: 0 2% 0 4%;
+            letter-spacing: 2px;
+            color: var(--themeColor2);
+            font-size: 18px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
   }
 }

project/src/pages/A5view/PageSon/A5list/index.tsx

@@ -1,7 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import A5win from '../A5win'
 import { infoPageIDSet } from '@/utils/locStore'
+import history from '@/utils/history'
+import classNames from 'classnames'
+import { baseOssUrl } from '@/utils/http'
+import { Image } from 'antd-mobile'
 
 function A5list() {
   const [winId, setWinId] = useState(0)
@@ -10,9 +14,70 @@ function A5list() {
     infoPageIDSet('list')
   }, [])
 
+  const [type, setType] = useState('全部')
+
+  const [typeArr, setTypeArr] = useState<string[]>([])
+
+  useEffect(() => {
+    const arr: string[] = ['全部']
+
+    cardNames.forEach(v => {
+      if (!arr.includes(v.type)) arr.push(v.type)
+    })
+
+    setTypeArr(arr)
+  }, [])
+
+  const list = useMemo(() => {
+    let arr = [...cardNames]
+
+    if (type !== '全部') arr = cardNames.filter(v => v.type === type)
+
+    return arr
+  }, [type])
+
   return (
     <div className={styles.A5list}>
-      <h1 onClick={() => setWinId(1)}>打开弹窗</h1>
+      {/* 返回按钮 */}
+      <div className='A5Lback' onClick={() => history.replace('/view/three')}>
+        <img src={require('@/assets/three/back.png')} alt='' />
+        <div>返回</div>
+      </div>
+
+      {/* 底部分类 */}
+      <div className='A5Ltype'>
+        {typeArr.map((item, index) => (
+          <div
+            key={index}
+            onClick={() => setType(item)}
+            className={classNames('A5Lbtn', type === item ? 'A5LbtnAc' : '')}
+          >
+            <img src={require(`@/assets/three/type${type === item ? 'Ac' : ''}.png`)} alt='' />
+            <div>{item}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* 中级主体 */}
+      <div className='A5Lmain mySorrl'>
+        {list.map(item => (
+          <div className='A5Lrow' key={item.id} onClick={() => setWinId(item.id)}>
+            <img src={require('@/assets/three/listBj.png')} alt='' />
+            <div>
+              <div className='A5Lrow1'>
+                <Image
+                  lazy
+                  src={`${baseOssUrl}modelSS/img/${item.id}.png`}
+                  placeholder={<div className='imgLoding'>加载中...</div>}
+                />
+              </div>
+              <div className='A5Lrow2' title={item.name}>
+                {item.name}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
 
       {/* 弹窗页面 */}
       <A5win id={winId} closeFu={() => setWinId(0)} />

project/src/pages/A5view/PageSon/A5model/index.module.scss

@@ -18,8 +18,16 @@
     }
     .A5Mtxt {
       position: absolute;
+      height: 86%;
       top: 2%;
       left: 1%;
+      overflow: auto;
+      &::-webkit-scrollbar {
+        width: 0.3vw;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: var(--themeColor2);
+      }
 
       & > h3 {
         color: #f9d36d;
@@ -33,10 +41,22 @@
         font-size: 16px;
         display: flex;
         flex-wrap: wrap;
+
         & > div {
           font-weight: 700;
         }
       }
+
+      .A5Mtext {
+        padding-right: 15px;
+        text-align: justify;
+        font-size: 16px;
+        line-height: 26px;
+        margin-top: 2vh;
+        color: var(--themeColor2);
+        width: 16vw;
+        word-wrap: break-word;
+      }
     }
 
     .A5Mbtn {

project/src/pages/A5view/PageSon/A5model/index.tsx

@@ -13,8 +13,9 @@ function A5model() {
     const id = urlCanRes()
     if (typeof id === 'number') {
       const obj = cardNames.find(v => v.id === id)
-      if (obj) setInfo(obj)
-      else MessageFu.warning('id错误')
+      if (obj) {
+        setInfo(obj)
+      } else MessageFu.warning('id错误')
     } else MessageFu.warning('id错误')
   }, [])
 
@@ -50,7 +51,7 @@ function A5model() {
           ></iframe>
 
           {/* 左上角内容 */}
-          <div className='A5Mtxt'>
+          <div className='A5Mtxt mySorrl'>
             <h3>{info.name}</h3>
             {txtArr.map(item => (
               <div className='A5Mrow' key={item.name}>
@@ -58,6 +59,10 @@ function A5model() {
                 <p>{item.txt}</p>
               </div>
             ))}
+
+            {info.text ? (
+              <div className='A5Mtext' dangerouslySetInnerHTML={{ __html: info.text }}></div>
+            ) : null}
           </div>
 
           {/* 关闭按钮 */}

project/src/pages/A5view/PageSon/A5win/index.module.scss

@@ -51,8 +51,11 @@
           }
         }
         .A5Mtu {
+          object-fit: contain;
+          max-width: 46%;
+          max-height: 70%;
           position: absolute;
-          top: 50%;
+          top: 46%;
           left: 50%;
           transform: translate(-50%, -50%);
         }

project/src/pages/A5view/PageSon/A5win/index.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react'
 import styles from './index.module.scss'
 import classNmaes from 'classnames'
 import history from '@/utils/history'
+import { baseOssUrl } from '@/utils/http'
 
 type Props = {
   id: number
@@ -16,7 +17,6 @@ function A5win({ id, closeFu }: Props) {
 
   const txtArr = useMemo(() => {
     let arr: any[] = []
-
     if (info.id) {
       const obj = info.obj
       for (const k in obj) {
@@ -36,19 +36,23 @@ function A5win({ id, closeFu }: Props) {
               <h3>{info.name}</h3>
               {txtArr.map(item => (
                 <div className='A5Mrow' key={item.name}>
-                  <div>{item.name}：</div>
+                  {item.name.includes('&空') ? null : <div>{item.name}：</div>}
+
                   <p>{item.txt}</p>
                 </div>
               ))}
 
-              <img className='A5Mtu' src={`./three/assets/in/${info.img}`} alt='' />
+              <img className='A5Mtu' src={`${baseOssUrl}modelSS/img/${info.img}`} alt='' />
 
               <div className='A5Mbtn'>
-                <img
-                  src={require('@/assets/three/icG.png')}
-                  alt=''
-                  onClick={() => history.replace(`/view/atlas?id=${info.id}`)}
-                />
+                {info.son && info.son.length ? (
+                  <img
+                    src={require('@/assets/three/icG.png')}
+                    alt=''
+                    onClick={() => history.replace(`/view/atlas?id=${info.id}`)}
+                  />
+                ) : null}
+
                 <img src={require('@/assets/three/icX.png')} alt='' onClick={closeFu} />
                 <img
                   src={require('@/assets/three/icM.png')}

project/src/pages/初始化组件/index.module.scss

@@ -1,4 +1,5 @@
-  .AAAAA {
-  :global {
+.AAAAA{
+  :global{
+    
   }
-}
+}

project/src/types/declaration.d.ts

@@ -6,7 +6,7 @@ declare module '*.gif'
 declare module '*.svg'
 declare module 'js-export-excel'
 declare module 'braft-utils'
-declare module 'react-virtualized'
+declare module 'dagre'
 declare const cardNames: any[]
 declare const baseOssUrl1: string
 declare const baseOssUrl2: string

project/yarn.lock

@@ -2232,7 +2232,7 @@
   resolved "https://registry.npmmirror.com/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz"
   integrity sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==
 
-"@types/d3-drag@*":
+"@types/d3-drag@*", "@types/d3-drag@^3.0.7":
   version "3.0.7"
   resolved "https://registry.npmmirror.com/@types/d3-drag/-/d3-drag-3.0.7.tgz"
   integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
@@ -2278,7 +2278,7 @@
   resolved "https://registry.npmmirror.com/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz"
   integrity sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==
 
-"@types/d3-interpolate@*":
+"@types/d3-interpolate@*", "@types/d3-interpolate@^3.0.4":
   version "3.0.4"
   resolved "https://registry.npmmirror.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz"
   integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
@@ -2317,7 +2317,7 @@
   dependencies:
     "@types/d3-time" "*"
 
-"@types/d3-selection@*":
+"@types/d3-selection@*", "@types/d3-selection@^3.0.10":
   version "3.0.11"
   resolved "https://registry.npmmirror.com/@types/d3-selection/-/d3-selection-3.0.11.tgz"
   integrity sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==
@@ -2344,14 +2344,14 @@
   resolved "https://registry.npmmirror.com/@types/d3-timer/-/d3-timer-3.0.2.tgz"
   integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
 
-"@types/d3-transition@*":
+"@types/d3-transition@*", "@types/d3-transition@^3.0.8":
   version "3.0.9"
   resolved "https://registry.npmmirror.com/@types/d3-transition/-/d3-transition-3.0.9.tgz"
   integrity sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==
   dependencies:
     "@types/d3-selection" "*"
 
-"@types/d3-zoom@*":
+"@types/d3-zoom@*", "@types/d3-zoom@^3.0.8":
   version "3.0.8"
   resolved "https://registry.npmmirror.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz"
   integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
@@ -2595,7 +2595,7 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8 || ^17.0 || ^18.0", "@types/react@^18.0.24":
+"@types/react@*", "@types/react@^16.8 || ^17.0 || ^18.0", "@types/react@^18.0.24", "@types/react@>=16.8":
   version "18.0.24"
   resolved "https://registry.npmmirror.com/@types/react/-/react-18.0.24.tgz"
   integrity sha512-wRJWT6ouziGUy+9uX0aW4YOJxAY0bG6/AOk5AW5QSvZqI7dk6VBIbXvcVgIw/W5Jrl24f77df98GEKTJGOLx7Q==
@@ -2933,6 +2933,30 @@
   resolved "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@xyflow/react@^12.10.1":
+  version "12.10.1"
+  resolved "https://registry.npmmirror.com/@xyflow/react/-/react-12.10.1.tgz"
+  integrity sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==
+  dependencies:
+    "@xyflow/system" "0.0.75"
+    classcat "^5.0.3"
+    zustand "^4.4.0"
+
+"@xyflow/system@0.0.75":
+  version "0.0.75"
+  resolved "https://registry.npmmirror.com/@xyflow/system/-/system-0.0.75.tgz"
+  integrity sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==
+  dependencies:
+    "@types/d3-drag" "^3.0.7"
+    "@types/d3-interpolate" "^3.0.4"
+    "@types/d3-selection" "^3.0.10"
+    "@types/d3-transition" "^3.0.8"
+    "@types/d3-zoom" "^3.0.8"
+    d3-drag "^3.0.0"
+    d3-interpolate "^3.0.1"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+
 abab@^2.0.3, abab@^2.0.5:
   version "2.0.6"
   resolved "https://registry.npmmirror.com/abab/-/abab-2.0.6.tgz"
@@ -3537,6 +3561,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.npmmirror.com/batch/-/batch-0.6.1.tgz"
@@ -3827,6 +3856,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.npmmirror.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+classcat@^5.0.3:
+  version "5.0.5"
+  resolved "https://registry.npmmirror.com/classcat/-/classcat-5.0.5.tgz"
+  integrity sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==
+
 classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2, classnames@^2.5.1, classnames@2.x:
   version "2.5.1"
   resolved "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz"
@@ -4119,6 +4153,13 @@ css-has-pseudo@^3.0.4:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-loader@^6.5.1:
   version "6.7.1"
   resolved "https://registry.npmmirror.com/css-loader/-/css-loader-6.7.1.tgz"
@@ -4364,7 +4405,7 @@ d3-delaunay@6:
   resolved "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz"
   integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
 
-"d3-drag@2 - 3", d3-drag@3:
+d3-drag@^3.0.0, "d3-drag@2 - 3", d3-drag@3:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz"
   integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
@@ -4419,7 +4460,7 @@ d3-hierarchy@3:
   resolved "https://registry.npmmirror.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz"
   integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
 
-"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
+d3-interpolate@^3.0.1, "d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
   version "3.0.1"
   resolved "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz"
   integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
@@ -4465,7 +4506,7 @@ d3-scale@4:
     d3-time "2.1.1 - 3"
     d3-time-format "2 - 4"
 
-"d3-selection@2 - 3", d3-selection@3:
+d3-selection@^3.0.0, "d3-selection@2 - 3", d3-selection@3:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz"
   integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
@@ -4507,7 +4548,7 @@ d3-shape@3:
     d3-interpolate "1 - 3"
     d3-timer "1 - 3"
 
-d3-zoom@3:
+d3-zoom@^3.0.0, d3-zoom@3:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz"
   integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
@@ -4554,6 +4595,14 @@ d3@^7.9.0:
     d3-transition "3"
     d3-zoom "3"
 
+dagre@^0.8.5:
+  version "0.8.5"
+  resolved "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz"
+  integrity sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==
+  dependencies:
+    graphlib "^2.1.8"
+    lodash "^4.17.15"
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmmirror.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@@ -5870,6 +5919,13 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.npmmirror.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
+graphlib@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.npmmirror.com/graphlib/-/graphlib-2.1.8.tgz"
+  integrity sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==
+  dependencies:
+    lodash "^4.17.15"
+
 gzip-size@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz"
@@ -6015,6 +6071,14 @@ html-webpack-plugin@^5.5.0:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
+html2canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz"
@@ -6134,7 +6198,7 @@ ignore@^5.2.0:
   resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
-immer@^9.0.7:
+immer@^9.0.7, immer@>=9.0.6:
   version "9.0.16"
   resolved "https://registry.npmmirror.com/immer/-/immer-9.0.16.tgz"
   integrity sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ==
@@ -9028,7 +9092,7 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@*, "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 16.3", "react-dom@>= 16.3.0", react-dom@>=16.0.0, react-dom@>=16.11.0, react-dom@>=16.8.0, react-dom@>=16.9.0:
+react-dom@*, "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 16.3", "react-dom@>= 16.3.0", react-dom@>=16.0.0, react-dom@>=16.11.0, react-dom@>=16.8.0, react-dom@>=16.9.0, react-dom@>=17:
   version "18.2.0"
   resolved "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -9212,7 +9276,7 @@ react-sortablejs@^6.1.4:
     classnames "2.3.1"
     tiny-invariant "1.2.0"
 
-react@*, "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", "react@>= 16.3", "react@>= 16.3.0", "react@>= 16.8.0", react@>=15, react@>=16.0.0, react@>=16.11.0, react@>=16.8.0, react@>=16.9.0, react@>=17.0.0:
+react@*, "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", react@^18.0.0, react@^18.2.0, "react@>= 16", "react@>= 16.3", "react@>= 16.3.0", "react@>= 16.8.0", react@>=15, react@>=16.0.0, react@>=16.11.0, react@>=16.8, react@>=16.8.0, react@>=16.9.0, react@>=17, react@>=17.0.0:
   version "18.2.0"
   resolved "https://registry.npmmirror.com/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -9364,6 +9428,14 @@ relateurl@^0.2.7:
   resolved "https://registry.npmmirror.com/relateurl/-/relateurl-0.2.7.tgz"
   integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
 
+relation-graph-react@^2.2.11:
+  version "2.2.11"
+  resolved "https://registry.npmmirror.com/relation-graph-react/-/relation-graph-react-2.2.11.tgz"
+  integrity sha512-eFukFIpYXBnlUDf6KHERX79idqO5nuaZPMQDnN4dJfzBYmAVZaEdmV4Jdw5ddFXIc9OiNJ7qGve+G+11/EQBFg==
+  dependencies:
+    html2canvas "^1.4.1"
+    screenfull "^5.1.0"
+
 renderkid@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/renderkid/-/renderkid-3.0.0.tgz"
@@ -9614,7 +9686,7 @@ schema-utils@2.7.0:
     ajv "^6.12.2"
     ajv-keywords "^3.4.1"
 
-screenfull@^5.0.0:
+screenfull@^5.0.0, screenfull@^5.1.0:
   version "5.2.0"
   resolved "https://registry.npmmirror.com/screenfull/-/screenfull-5.2.0.tgz"
   integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
@@ -10254,6 +10326,13 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz"
@@ -10514,10 +10593,10 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
-  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0, use-sync-external-store@^1.2.2:
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz"
+  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
 
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
@@ -10544,6 +10623,13 @@ utils-merge@1.0.1:
   resolved "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmmirror.com/uuid/-/uuid-8.3.2.tgz"
@@ -11095,3 +11181,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^4.4.0:
+  version "4.5.7"
+  resolved "https://registry.npmmirror.com/zustand/-/zustand-4.5.7.tgz"
+  integrity sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==
+  dependencies:
+    use-sync-external-store "^1.2.2"

静态文件/modelSS/index.html

@@ -11,12 +11,21 @@
     html {
       overflow: hidden;
     }
+ 
+
+ 
   </style>
+  
 </head>
 
 <body>
+
   <div id="ui"></div>
+
   <script>
+
+    document.querySelector('body').style.opacity='0'
+
     let m = getQueryVariable("m");