wanglin2 / mind-map

一个还算强大的Web思维导图。A relatively powerful web mind map.
https://wanglin2.github.io/mind-map-docs/
MIT License
6.72k stars 956 forks source link

Not working, only blank page loaded #974

Closed tifDev closed 3 weeks ago

tifDev commented 3 weeks ago

Here are the logs:

Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings: CORS: disabled Cache: 3600 seconds Connection Timeout: 120 seconds Directory Listings: visible AutoIndex: visible Serve GZIP Files: false Serve Brotli Files: false Default File Extension: none

Available on: http://127.0.0.1:8081 http://192.168.1.66:8081 http://192.168.1.75:8081 Hit CTRL-C to stop the server

[2024-11-01T14:38:16.497Z] "GET /" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0" (node:118190) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated [2024-11-01T14:38:16.574Z] "GET /style.css" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0" [2024-11-01T14:38:16.578Z] "GET /node_modules/simple-mind-map/dist/simple-mind-map.min.js" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0" [2024-11-01T14:38:16.580Z] "GET /script.js" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0" [2024-11-01T14:38:16.583Z] "GET /node_modules/simple-mind-map/dist/simple-mind-map.min.js" Error (404): "Not found" [2024-11-01T14:38:16.674Z] "GET /favicon.ico" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0" [2024-11-01T14:38:16.675Z] "GET /favicon.ico" Error (404): "Not found" [2024-11-01T14:38:48.680Z] "GET /style.css" "Mozilla/5.0 (X11; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0"

Installed via:

npm i simple-mind-map npm install -g http-server

Directory:

. ├── node_modules ├── index.html ├── package.json ├── package-lock.json ├── script.js └── style.css

1 directory, 5 files


$ cat index.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.esm.css">
    <title>Simple Mind Map</title>
</head>
<body>
    <div id="mindMapContainer" style="width: 100%; height: 500px;"></div>
    <script src="node_modules/simple-mind-map/dist/simple-mind-map.min.js"></script>
    <script src="https://unpkg.com/simple-mind-map@0.10.2/dist/simpleMindMap.umd.min.js"></script>
</body>
</html>

$ cat style.css 
#mindMapContainer * {
    margin: 0;
    padding: 0;
}

$ cat script.js 
import MindMap from "simple-mind-map";

// Create a new instance of MindMap
const mindMap = new MindMap({
  el: document.getElementById("mindMapContainer"),
  data: {
    data: {
      text: "根节点",  // This is the main node text
    },
    children: [], // You can add children nodes here
  },
});

// Example of adding child nodes
mindMap.setData({
  data: {
    text: "根节点",
  },
  children: [
    {
      data: {
        text: "子节点 1",
      },
      children: [],
    },
    {
      data: {
        text: "子节点 2",
      },
      children: [
        {
          data: {
            text: "子节点 2.1",
          },
          children: [],
        },
      ],
    },
  ],
});

Note: Used CDN but also dind't worked with local files.

wanglin2 commented 3 weeks ago

If you use simpleMindMap.umd.min.js file, you cannot use 'import' to import, Just use global variables directly: new window.simpleMindMap.default({})

You can refer to this document: https://wanglin2.github.io/mind-map-docs/en/start/start.html#usage

image