引入naive丰富页面和功能

package-lock.json

@@ -20,6 +20,7 @@
         "eslint-config-prettier": "^7.1.0",
         "eslint-plugin-prettier": "^3.3.1",
         "eslint-plugin-vue": "^7.4.1",
+        "naive-ui": "^2.16.2",
         "prettier": "^2.2.1",
         "stylus": "^0.54.8",
         "vite": "^2.1.0"
@@ -189,6 +190,30 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@css-render/plugin-bem": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.5.tgz",
+      "integrity": "sha512-+vf68Tqj0rg9mieh463+nEolMbvpRRi60dK0OW10z3Vd6KH1ojaPnTzmTu4feE14f4ez5Ogb7IpC5CsT1+DEvA==",
+      "dev": true,
+      "dependencies": {
+        "css-render": "~0.15.5"
+      }
+    },
+    "node_modules/@css-render/vue3-ssr": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.5.tgz",
+      "integrity": "sha512-1CFF12uJv6aMtUeKW7x3f/qdXiMe/jZ5xNZoDIbPyRIWmsFYI6kw/7+uyaGFUe6HhXFc8F/j42SvuaX9vlF4XQ==",
+      "dev": true,
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "dev": true
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -244,12 +269,168 @@
       "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
       "dev": true
     },
+    "node_modules/@jest/types": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
+      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^15.0.0",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
+    "node_modules/@jest/types/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@jest/types/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@jest/types/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@jest/types/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@jest/types/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/types/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "0.0.48",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.48.tgz",
       "integrity": "sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==",
       "dev": true
     },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
+      "integrity": "sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==",
+      "dev": true
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
+      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "dev": true,
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/jest": {
+      "version": "26.0.24",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz",
+      "integrity": "sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==",
+      "dev": true,
+      "dependencies": {
+        "jest-diff": "^26.0.0",
+        "pretty-format": "^26.0.0"
+      }
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.172",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.172.tgz",
+      "integrity": "sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==",
+      "dev": true
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.4",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.4.tgz",
+      "integrity": "sha512-BBz79DCJbD2CVYZH67MBeHZRX++HF+5p8Mo5MzjZi64Wac39S3diedJYHZtScbRVf4DjZyN6LzA0SB0zy+HSSQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "14.14.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.45.tgz",
+      "integrity": "sha512-DssMqTV9UnnoxDWu959sDLZzfvqCF0qDNRjaWeYSui9xkFe61kKo4l1TWNTQONpuXEm+gLMRvdlzvNHBamzmEw==",
+      "dev": true
+    },
+    "node_modules/@types/yargs": {
+      "version": "15.0.14",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
+      "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "20.2.1",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz",
+      "integrity": "sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==",
+      "dev": true
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.4.0.tgz",
@@ -435,6 +616,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/async-validator": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.2.tgz",
+      "integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ==",
+      "dev": true
+    },
     "node_modules/atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -624,6 +811,23 @@
         "css": "^2.0.0"
       }
     },
+    "node_modules/css-render": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.5.tgz",
+      "integrity": "sha512-i33v56jCiq+TPmYbwCA0N9VKWVy+BjPBuBJg1FKdCcrZDLGZrEc5vDfedHrWwFA0J9MCiPtz1HLAGl7R1LLQBg==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/hash": "~0.8.0",
+        "@types/node": "~14.14.31",
+        "csstype": "~3.0.5"
+      }
+    },
+    "node_modules/css-render/node_modules/csstype": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==",
+      "dev": true
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1011,6 +1215,19 @@
         "node": ">=12"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz",
+      "integrity": "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -1051,6 +1268,15 @@
         "robust-predicates": "^3.0.0"
       }
     },
+    "node_modules/diff-sequences": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
+      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -1470,6 +1696,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/evtd": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/evtd/-/evtd-0.2.2.tgz",
+      "integrity": "sha512-YRUY9BHnnOmeeaOOLlIfUEp3itg4oFEd+uWPGMs0m4WUJaGcEgxFx8PLRRQaaDKvN2B+19lYzhATILGfXuprnA==",
+      "dev": true
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -1675,6 +1907,15 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "dev": true
     },
+    "node_modules/highlight.js": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.2.0.tgz",
+      "integrity": "sha512-JOySjtOEcyG8s4MLR2MNbLUyaXqUunmSnL2kdV/KuGJOmHZuAR5xC54Ko7goAXBWNhf09Vy3B+U7vR62UZ/0iw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -1810,6 +2051,100 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
+    "node_modules/jest-diff": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
+      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      },
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
+    "node_modules/jest-diff/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-diff/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/jest-diff/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/jest-diff/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/jest-diff/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-diff/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-get-type": {
+      "version": "26.3.0",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
+      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.14.2"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1898,6 +2233,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -1985,6 +2326,34 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "node_modules/naive-ui": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.16.2.tgz",
+      "integrity": "sha512-pIQyg5Im0E3j4BI6Fb3zQRUqqHKLe1zqUEIDJ2GmDzTi9SZIxhSTj4t1ck9C43aCNu93QORZLf7e0sgJLf6LQg==",
+      "dev": true,
+      "dependencies": {
+        "@css-render/plugin-bem": "^0.15.4",
+        "@css-render/vue3-ssr": "^0.15.4",
+        "@types/lodash": "^4.14.170",
+        "@types/lodash-es": "^4.17.4",
+        "async-validator": "^3.5.1",
+        "css-render": "^0.15.4",
+        "date-fns": "^2.19.0",
+        "evtd": "^0.2.2",
+        "highlight.js": "^11.0.1",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "seemly": "^0.3.1",
+        "treemate": "^0.2.12",
+        "vdirs": "^0.1.4",
+        "vfonts": "^0.1.0",
+        "vooks": "^0.2.6",
+        "vueuc": "^0.4.9"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.1.23",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
@@ -2221,6 +2590,54 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
+      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+      "dev": true,
+      "dependencies": {
+        "@jest/types": "^26.6.2",
+        "ansi-regex": "^5.0.0",
+        "ansi-styles": "^4.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -2253,6 +2670,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
     "node_modules/regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -2274,6 +2697,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
+    },
     "node_modules/resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -2354,6 +2783,15 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
+    "node_modules/seemly": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.1.tgz",
+      "integrity": "sha512-7P4+IJU9SIP6EBl2jjVitbgrHPb0MqWRy4j2iXGOUiDrHpdG3tH/3j5Xpyv1qWAY3IBrCKOkmVXEfwTsT4UzDg==",
+      "dev": true,
+      "dependencies": {
+        "@types/jest": "^26.0.20"
+      }
+    },
     "node_modules/semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -2683,6 +3121,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/treemate": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/treemate/-/treemate-0.2.12.tgz",
+      "integrity": "sha512-li5ZxaT7BtBIEnT7eUO3mk4BdefANPUKjCGnTciFp5e5UDy3+07HLvWelKxuIz1jCz+6r5IPoP8P/5+8Xz9Z7w==",
+      "dev": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -2729,10 +3173,29 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
-    "node_modules/v8-compile-cache": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+    "node_modules/v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
+    "node_modules/vdirs": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/vdirs/-/vdirs-0.1.4.tgz",
+      "integrity": "sha512-g2wJgE8hj/ruqEnGFEXFVC8IR4kRaPDr7Cl+SSy+A8kmNr47rL1l+0wMi51amlrTL6eQsRk+wcl4bjjfPXNzZQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "^14.14.10",
+        "evtd": "^0.2.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
+    "node_modules/vfonts": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vfonts/-/vfonts-0.1.0.tgz",
+      "integrity": "sha512-vQBcvntBlnAPonAkGNM8iJ9NxE3PucA+V2W95xiN75YJKxirLJvOws2kEyOEO45T4N+YTbQOCR2m77Y05pfVhQ==",
       "dev": true
     },
     "node_modules/vite": {
@@ -2756,6 +3219,18 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/vooks": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/vooks/-/vooks-0.2.8.tgz",
+      "integrity": "sha512-d+MHX5mTHeNZn0XTILMUKjpxS1+dUKCI/kw9+LnvfHzCawL8bZ1itViAbWfwJI246uSc47rL3ECPgPMyS8wQrQ==",
+      "dev": true,
+      "dependencies": {
+        "evtd": "^0.2.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.1.tgz",
@@ -2813,6 +3288,24 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/vueuc": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.10.tgz",
+      "integrity": "sha512-d/GITEBOtrkMyhJPB72SNYeO7rYrsTYMlJ+uT7bwuTT1ag15O63vwUesqhY7Vf65FybJRcQwUtGAYShDOqRiJQ==",
+      "dev": true,
+      "dependencies": {
+        "css-render": "^0.15.3",
+        "evtd": "^0.2.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "seemly": "^0.3.1",
+        "vdirs": "^0.1.4",
+        "vooks": "^0.2.4"
+      },
+      "peerDependencies": {
+        "@css-render/vue3-ssr": "^0.15.3",
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -2975,6 +3468,28 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@css-render/plugin-bem": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/@css-render/plugin-bem/-/plugin-bem-0.15.5.tgz",
+      "integrity": "sha512-+vf68Tqj0rg9mieh463+nEolMbvpRRi60dK0OW10z3Vd6KH1ojaPnTzmTu4feE14f4ez5Ogb7IpC5CsT1+DEvA==",
+      "dev": true,
+      "requires": {
+        "css-render": "~0.15.5"
+      }
+    },
+    "@css-render/vue3-ssr": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/@css-render/vue3-ssr/-/vue3-ssr-0.15.5.tgz",
+      "integrity": "sha512-1CFF12uJv6aMtUeKW7x3f/qdXiMe/jZ5xNZoDIbPyRIWmsFYI6kw/7+uyaGFUe6HhXFc8F/j42SvuaX9vlF4XQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "dev": true
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -3020,12 +3535,146 @@
       "integrity": "sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==",
       "dev": true
     },
+    "@jest/types": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
+      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^15.0.0",
+        "chalk": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@types/estree": {
       "version": "0.0.48",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.48.tgz",
       "integrity": "sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew==",
       "dev": true
     },
+    "@types/istanbul-lib-coverage": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
+      "integrity": "sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==",
+      "dev": true
+    },
+    "@types/istanbul-lib-report": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "@types/istanbul-reports": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
+      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "dev": true,
+      "requires": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "@types/jest": {
+      "version": "26.0.24",
+      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz",
+      "integrity": "sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==",
+      "dev": true,
+      "requires": {
+        "jest-diff": "^26.0.0",
+        "pretty-format": "^26.0.0"
+      }
+    },
+    "@types/lodash": {
+      "version": "4.14.172",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.172.tgz",
+      "integrity": "sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==",
+      "dev": true
+    },
+    "@types/lodash-es": {
+      "version": "4.17.4",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.4.tgz",
+      "integrity": "sha512-BBz79DCJbD2CVYZH67MBeHZRX++HF+5p8Mo5MzjZi64Wac39S3diedJYHZtScbRVf4DjZyN6LzA0SB0zy+HSSQ==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
+    "@types/node": {
+      "version": "14.14.45",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.45.tgz",
+      "integrity": "sha512-DssMqTV9UnnoxDWu959sDLZzfvqCF0qDNRjaWeYSui9xkFe61kKo4l1TWNTQONpuXEm+gLMRvdlzvNHBamzmEw==",
+      "dev": true
+    },
+    "@types/yargs": {
+      "version": "15.0.14",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
+      "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
+      "dev": true,
+      "requires": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "@types/yargs-parser": {
+      "version": "20.2.1",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz",
+      "integrity": "sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==",
+      "dev": true
+    },
     "@vitejs/plugin-vue": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.4.0.tgz",
@@ -3182,6 +3831,12 @@
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
       "dev": true
     },
+    "async-validator": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-3.5.2.tgz",
+      "integrity": "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ==",
+      "dev": true
+    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -3337,6 +3992,25 @@
         "css": "^2.0.0"
       }
     },
+    "css-render": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/css-render/-/css-render-0.15.5.tgz",
+      "integrity": "sha512-i33v56jCiq+TPmYbwCA0N9VKWVy+BjPBuBJg1FKdCcrZDLGZrEc5vDfedHrWwFA0J9MCiPtz1HLAGl7R1LLQBg==",
+      "dev": true,
+      "requires": {
+        "@emotion/hash": "~0.8.0",
+        "@types/node": "~14.14.31",
+        "csstype": "~3.0.5"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.8",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==",
+          "dev": true
+        }
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3611,6 +4285,12 @@
         "d3-transition": "2 - 3"
       }
     },
+    "date-fns": {
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.23.0.tgz",
+      "integrity": "sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==",
+      "dev": true
+    },
     "debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -3640,6 +4320,12 @@
         "robust-predicates": "^3.0.0"
       }
     },
+    "diff-sequences": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
+      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
+      "dev": true
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -3940,6 +4626,12 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
+    "evtd": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/evtd/-/evtd-0.2.2.tgz",
+      "integrity": "sha512-YRUY9BHnnOmeeaOOLlIfUEp3itg4oFEd+uWPGMs0m4WUJaGcEgxFx8PLRRQaaDKvN2B+19lYzhATILGfXuprnA==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4091,6 +4783,12 @@
       "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
       "dev": true
     },
+    "highlight.js": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.2.0.tgz",
+      "integrity": "sha512-JOySjtOEcyG8s4MLR2MNbLUyaXqUunmSnL2kdV/KuGJOmHZuAR5xC54Ko7goAXBWNhf09Vy3B+U7vR62UZ/0iw==",
+      "dev": true
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -4191,6 +4889,75 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
+    "jest-diff": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
+      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^26.6.2",
+        "jest-get-type": "^26.3.0",
+        "pretty-format": "^26.6.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "jest-get-type": {
+      "version": "26.3.0",
+      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
+      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
+      "dev": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4261,6 +5028,12 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -4339,6 +5112,31 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "naive-ui": {
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.16.2.tgz",
+      "integrity": "sha512-pIQyg5Im0E3j4BI6Fb3zQRUqqHKLe1zqUEIDJ2GmDzTi9SZIxhSTj4t1ck9C43aCNu93QORZLf7e0sgJLf6LQg==",
+      "dev": true,
+      "requires": {
+        "@css-render/plugin-bem": "^0.15.4",
+        "@css-render/vue3-ssr": "^0.15.4",
+        "@types/lodash": "^4.14.170",
+        "@types/lodash-es": "^4.17.4",
+        "async-validator": "^3.5.1",
+        "css-render": "^0.15.4",
+        "date-fns": "^2.19.0",
+        "evtd": "^0.2.2",
+        "highlight.js": "^11.0.1",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "seemly": "^0.3.1",
+        "treemate": "^0.2.12",
+        "vdirs": "^0.1.4",
+        "vfonts": "^0.1.0",
+        "vooks": "^0.2.6",
+        "vueuc": "^0.4.9"
+      }
+    },
     "nanoid": {
       "version": "3.1.23",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
@@ -4506,6 +5304,44 @@
         "fast-diff": "^1.1.2"
       }
     },
+    "pretty-format": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
+      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^26.6.2",
+        "ansi-regex": "^5.0.0",
+        "ansi-styles": "^4.0.0",
+        "react-is": "^17.0.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        }
+      }
+    },
     "progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -4526,6 +5362,12 @@
         "side-channel": "^1.0.4"
       }
     },
+    "react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
     "regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -4538,6 +5380,12 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -4599,6 +5447,15 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
+    "seemly": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/seemly/-/seemly-0.3.1.tgz",
+      "integrity": "sha512-7P4+IJU9SIP6EBl2jjVitbgrHPb0MqWRy4j2iXGOUiDrHpdG3tH/3j5Xpyv1qWAY3IBrCKOkmVXEfwTsT4UzDg==",
+      "dev": true,
+      "requires": {
+        "@types/jest": "^26.0.20"
+      }
+    },
     "semver": {
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@@ -4860,6 +5717,12 @@
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
     },
+    "treemate": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/treemate/-/treemate-0.2.12.tgz",
+      "integrity": "sha512-li5ZxaT7BtBIEnT7eUO3mk4BdefANPUKjCGnTciFp5e5UDy3+07HLvWelKxuIz1jCz+6r5IPoP8P/5+8Xz9Z7w==",
+      "dev": true
+    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -4902,6 +5765,22 @@
       "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
       "dev": true
     },
+    "vdirs": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/vdirs/-/vdirs-0.1.4.tgz",
+      "integrity": "sha512-g2wJgE8hj/ruqEnGFEXFVC8IR4kRaPDr7Cl+SSy+A8kmNr47rL1l+0wMi51amlrTL6eQsRk+wcl4bjjfPXNzZQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "^14.14.10",
+        "evtd": "^0.2.2"
+      }
+    },
+    "vfonts": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vfonts/-/vfonts-0.1.0.tgz",
+      "integrity": "sha512-vQBcvntBlnAPonAkGNM8iJ9NxE3PucA+V2W95xiN75YJKxirLJvOws2kEyOEO45T4N+YTbQOCR2m77Y05pfVhQ==",
+      "dev": true
+    },
     "vite": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/vite/-/vite-2.4.4.tgz",
@@ -4915,6 +5794,15 @@
         "rollup": "^2.38.5"
       }
     },
+    "vooks": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/vooks/-/vooks-0.2.8.tgz",
+      "integrity": "sha512-d+MHX5mTHeNZn0XTILMUKjpxS1+dUKCI/kw9+LnvfHzCawL8bZ1itViAbWfwJI246uSc47rL3ECPgPMyS8wQrQ==",
+      "dev": true,
+      "requires": {
+        "evtd": "^0.2.2"
+      }
+    },
     "vue": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.1.tgz",
@@ -4959,6 +5847,20 @@
         }
       }
     },
+    "vueuc": {
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/vueuc/-/vueuc-0.4.10.tgz",
+      "integrity": "sha512-d/GITEBOtrkMyhJPB72SNYeO7rYrsTYMlJ+uT7bwuTT1ag15O63vwUesqhY7Vf65FybJRcQwUtGAYShDOqRiJQ==",
+      "dev": true,
+      "requires": {
+        "css-render": "^0.15.3",
+        "evtd": "^0.2.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "seemly": "^0.3.1",
+        "vdirs": "^0.1.4",
+        "vooks": "^0.2.4"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -20,6 +20,7 @@
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.4.1",
+    "naive-ui": "^2.16.2",
     "prettier": "^2.2.1",
     "stylus": "^0.54.8",
     "vite": "^2.1.0"

src/App.vue

 <template>
-  <Main />
+  <n-dialog-provider>
+    <n-message-provider>
+      <Main />
+    </n-message-provider>
+  </n-dialog-provider>
 </template>
 
 <script>
@@ -15,9 +19,11 @@ html,
 body
   margin 0
   padding 0
+  overflow hidden
 #app
   font-family Avenir, Helvetica, Arial, sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
   color #2c3e50
+  overflow hidden
 </style>

src/components/d3.vue

 <template>
-  <div ref="container" />
+  <div class="graph">
+    <div ref="container" style="width: 100%; height: 100%" />
+    <div class="legend">
+      <n-space>
+        <n-tag
+          v-for="n in nodeList"
+          :key="n.name"
+          size="small"
+          round
+          :color="n.color || defaultColor"
+        >
+          {{ `${n.name}（${n.val}）` }}
+        </n-tag>
+      </n-space>
+      <n-space>
+        <n-tag
+          v-for="n in linkList"
+          :key="n.name"
+          size="small"
+          :color="n.color || defaultColor"
+        >
+          {{ `${n.name}（${n.val}）` }}
+        </n-tag>
+      </n-space>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -23,16 +48,45 @@ export default {
       },
     },
   },
-  emits: ['more', 'add', 'del', 'branch'],
+  emits: ['more', 'add', 'del', 'branch', 'curNode'],
   setup(props, ctx) {
+    const colorList = {
+      default: 'skyblue',
+      System: '#58b2dc',
+      Property: '#ffb11b',
+      Subject: '#42b983',
+    }
     let instance = null
     const container = ref(null)
     const menuData = [
-      { icon: branch, action: (d) => ctx.emit('branch', d), title: '分支' },
-      { icon: more, action: (d) => ctx.emit('more', d), title: '更多' },
-      { icon: add, action: (d) => ctx.emit('add', d), title: '新增' },
-      { icon: del, action: (d) => ctx.emit('del', d), title: '删除' },
+      {
+        key: 'branch',
+        icon: branch,
+        action: (d) => ctx.emit('branch', d),
+        title: '分支',
+      },
+      {
+        key: 'more',
+        icon: more,
+        action: (d) => ctx.emit('more', d),
+        title: '更多',
+      },
+      {
+        key: 'add',
+        icon: add,
+        action: (d) => ctx.emit('add', d),
+        title: '新增',
+      },
+      {
+        key: 'del',
+        icon: del,
+        action: (d) => ctx.emit('del', d),
+        title: '删除',
+      },
     ]
+    const setCurNode = (type) => {
+      ctx.emit('curNode', type)
+    }
     function init() {
       if (!container.value) return
       if (instance) {
@@ -42,8 +96,11 @@ export default {
         container.value,
         props.data,
         props.config,
-        menuData
+        menuData,
+        colorList,
+        setCurNode
       )
+      setLegend()
     }
     function setKey(key) {
       instance.setKey(key)
@@ -53,13 +110,80 @@ export default {
       () => init(),
       { immediate: true }
     )
+
+    const nodeList = ref([])
+    const linkList = ref([])
+
+    function setLegend() {
+      const { nodes, links } = props.data
+      if (!nodes || !links) return
+      const nodeKey = {}
+      const linkKey = {}
+
+      nodes.forEach((node) => {
+        if (nodeKey.hasOwnProperty(node.nodeLabel)) {
+          nodeKey[node.nodeLabel] += 1
+        } else {
+          nodeKey[node.nodeLabel] = 1
+        }
+      })
+      links.forEach((link) => {
+        const key = `${link.source.nodeLabel}_${link.target.nodeLabel}`
+        if (linkKey.hasOwnProperty(key)) {
+          linkKey[key] += 1
+        } else {
+          linkKey[key] = 1
+        }
+      })
+      const nodeResult = []
+      for (const key in nodeKey) {
+        nodeResult.push({
+          name: key,
+          val: nodeKey[key],
+          color: {
+            color: colorList[key],
+            textColor: '#2c3e50',
+            borderColor: colorList[key],
+          },
+        })
+      }
+      const linkResult = []
+      for (const key in linkKey) {
+        linkResult.push({
+          name: key,
+          val: linkKey[key],
+        })
+      }
+
+      nodeList.value = nodeResult
+      linkList.value = linkResult
+    }
     return {
+      colorList,
       container,
       setKey,
+      nodeList,
+      linkList,
+      defaultColor: {
+        color: '#a5abb6',
+        textColor: '#fff',
+        borderColor: '#a5abb6',
+      },
     }
   },
 }
 </script>
+<style lang="stylus" scoped>
+.graph
+  background #f9fbfd
+  width 100%
+  height 100%
+  position relative
+.legend
+  position absolute
+  top 20px
+  left 20px
+</style>
 
 <style lang="stylus">
 .relation-tooltip

src/components/footer.vue

+<template>
+  <div class="footer">
+    <n-space>
+      <n-tag v-show="nodeVal" size="small" round :color="color">
+        {{ nodeVal && nodeVal.nodeLabel }}
+      </n-tag>
+      <n-button
+        v-for="name in list"
+        :key="name"
+        type="info"
+        :dashed="name !== curKey"
+        size="tiny"
+        @click="setKey(name)"
+      >
+        {{ name }}
+      </n-button>
+    </n-space>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed } from 'vue'
+
+export default defineComponent({
+  name: 'Footer',
+  props: {
+    node: {
+      type: Object,
+      default: () => ({
+        nodeLabel: 'Subject',
+      }),
+    },
+  },
+  emits: ['set'],
+  setup(props, ctx) {
+    const colorList = {
+      default: 'skyblue',
+      System: '#58b2dc',
+      Property: '#ffb11b',
+      Subject: '#42b983',
+    }
+    const nodeVal = computed(
+      () =>
+        props.node || {
+          nodeLabel: 'Subject',
+        }
+    )
+    const color = computed(() => {
+      if (!nodeVal.value) return {}
+      return {
+        color: colorList[nodeVal.value.nodeLabel],
+        textColor: '#fff',
+        borderColor: colorList[nodeVal.value.nodeLabel],
+      }
+    })
+    const curKey = ref('subjectName')
+    function setKey(key) {
+      curKey.value = key
+      ctx.emit('set', key)
+    }
+    const list = ref([
+      'subjectName',
+      'propertyName',
+      'systemName',
+      'nodeId',
+      'nodeLabel',
+    ])
+    return {
+      curKey,
+      setKey,
+      list,
+      color,
+      nodeVal,
+    }
+  },
+})
+</script>
+
+<style lang="stylus" scoped>
+.footer
+  display flex
+  align-items center
+  justify-content flex-end
+  padding 0 15px 8px
+  background #f8f9fb
+  box-shadow 10px 6px 10px 0 #000
+  margin-top 4px
+</style>

src/components/main.vue

 <template>
-  <D3
-    ref="d3Ref"
-    :data="data"
-    :config="config"
-    style="background: #fff; width: 100%; height: 100vh"
-    @branch="handleBranch"
-    @add="handleAdd"
-  />
-  <div class="btns">
-    <button @click="setKey('systemName')">systemName</button>
-    <button @click="setKey('propertyName')">propertyName</button>
-    <button @click="setKey('subjectName')">subjectName</button>
+  <div class="main">
+    <Nav style="grid-area: nav" />
+    <D3
+      ref="d3Ref"
+      style="grid-area: content"
+      class="graph"
+      :data="data"
+      @branch="handleBranch"
+      @add="handleAdd"
+      @curNode="curNode = $event"
+      @del="handleDelete"
+    />
+    <Side style="grid-area: side" />
+    <Footer style="grid-area: footer" :node="curNode" @set="setKey" />
   </div>
+  <n-drawer v-model:show="showDrawer" :width="400" placement="left">
+    <n-drawer-content title="新增节点">
+      <n-form ref="formRef" :model="formData" :rules="rules">
+        <n-form-item path="propertyName" label="节点名称">
+          <n-input
+            v-model:value="formData.propertyName"
+            placeholder="请输入"
+            @keydown.enter.prevent
+          />
+        </n-form-item>
+        <n-form-item label="关系" path="relationId">
+          <n-select
+            v-model:value="formData.relationId"
+            placeholder="请选择"
+            :options="relationOptions"
+          />
+        </n-form-item>
+        <n-form-item label="所属系统" path="systemId">
+          <n-select
+            v-model:value="formData.systemId"
+            placeholder="请选择"
+            :options="systemOptions"
+          />
+        </n-form-item>
+        <n-space justify="end">
+          <n-button :loading="isLoading" type="primary" @click="submit">
+            提交
+          </n-button>
+        </n-space>
+      </n-form>
+    </n-drawer-content>
+  </n-drawer>
 </template>
 
 <script>
 import D3 from './d3.vue'
+import Nav from './nav.vue'
+import Side from './side.vue'
+import Footer from './footer.vue'
 import mockData from '@/util/mock.js'
-import { ref, shallowRef } from 'vue'
+import { ref } from 'vue'
 import { ajax, api } from '@/ajax'
+import { useMessage, useDialog } from 'naive-ui'
 
 export default {
   name: 'Main',
-  components: { D3 },
+  components: { D3, Nav, Side, Footer },
   setup() {
+    const message = useMessage()
+    const dialog = useDialog()
+    const subjectId = ref(null)
+    const formRef = ref(null)
+    const formData = ref({
+      propertyName: null,
+      relationId: null,
+    })
+    const showDrawer = ref(false)
+    const isLoading = ref(false)
     const d3Ref = ref(null)
+    const relationOptions = ref([])
+    const systemOptions = ref([])
     const data = ref([])
+    function getData() {
+      ajax
+        .get({
+          url: api.GET_NODES,
+        })
+        .then((res) => {
+          console.log('nodes:', res)
+          data.value = res.data.content
+          systemOptions.value = data.value.nodes
+            .filter((node) => node.nodeLabel === 'System')
+            .map((node) => ({ label: node.systemName, value: node.nodeId }))
+        })
+    }
+    getData()
     ajax
       .get({
-        url: api.GET_NODES,
+        url: api.GET_RELATIONS,
       })
       .then((res) => {
-        console.log('nodes:', res)
-        data.value = res.data.content
+        if (!res.data || !res.data.content) return
+        relationOptions.value = res.data.content.map((item) => ({
+          label: item.relationName,
+          value: item.id,
+        }))
       })
-    const config = ref({
-      config: {
-        strokeColor: 'skyblue',
-      },
-    })
     function handleBranch({ nodeId }) {
       ajax
         .get({
@@ -50,37 +112,104 @@ export default {
           // data.value = res.data.content
         })
     }
-    function handleAdd() {
-      const { nodes, links } = data.value
-      data.value = {
-        nodes: nodes.slice(0, 2),
-        links: links.slice(0, 2),
-      }
-      console.log(data.value)
+    function handleAdd({ nodeId }) {
+      subjectId.value = nodeId
+      showDrawer.value = true
     }
     function setKey(key) {
       d3Ref.value.setKey(key)
     }
+    function submit(e) {
+      e.preventDefault()
+      formRef.value.validate((errors) => {
+        if (!errors) {
+          isLoading.value = true
+          ajax
+            .post({
+              url: api.POST_NODE,
+              params: {
+                subjectId: subjectId.value,
+                ...formData.value,
+              },
+            })
+            .then(() => {
+              getData()
+              isLoading.value = false
+              showDrawer.value = false
+              message.success('提交成功')
+            })
+        }
+      })
+    }
+    const curNode = ref(null)
+    function handleDelete(data) {
+      dialog.error({
+        title: '删除节点',
+        content: `确定是否删除 '${
+          data[data.nodeLabel.toLowerCase() + 'Name']
+        }' 节点？`,
+        positiveText: '确定',
+        negativeText: '取消',
+        maskClosable: false,
+        onPositiveClick: () => {
+          console.log('delete', data)
+          message.success('删除成功！')
+        },
+      })
+    }
     return {
+      formRef,
+      formData,
+      showDrawer,
+      submit,
+      isLoading,
+      relationOptions,
+      systemOptions,
       data,
       mockData,
-      config,
       handleBranch,
       handleAdd,
       d3Ref,
       setKey,
+      rules: {
+        propertyName: [
+          {
+            required: true,
+            message: '请输入节点名称',
+            trigger: ['input', 'blur'],
+          },
+        ],
+        relationId: [
+          {
+            required: true,
+            message: '请选择从属类型',
+            trigger: ['input', 'blur'],
+          },
+        ],
+        systemId: [
+          {
+            required: true,
+            message: '请选择所属系统',
+            trigger: ['input', 'blur'],
+          },
+        ],
+      },
+      curNode,
+      handleDelete,
     }
   },
 }
 </script>
 
 <style lang="stylus" scoped>
-.btns
-  position fixed
-  top 10px
-  left 10px
-  z-index 100
-  >button
-    margin-right 10px
-    cursor pointer
+.main
+  width 100vw
+  height 100vh
+  display grid
+  overflow hidden
+  grid-template-areas 'nav nav' 'side content' 'side footer'
+  grid-template-columns 0px 1fr
+  grid-template-rows 0px 1fr 70px
+  padding 4px
+  font-weight bold !important
 </style>

src/components/nav.vue

+<template>
+  <div class="nav"></div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Nav',
+  setup() {},
+})
+</script>
+
+<style lang="stylus" scoped>
+.nav
+  background #f9fbfd
+  border-bottom 4px solid #fff
+</style>

src/components/side.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Side',
+  setup() {},
+})
+</script>
+
+<style lang="stylus" scoped></style>

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+import {
+  create,
+  NButton,
+  NTag,
+  NSpace,
+  NDrawer,
+  NDrawerContent,
+  NForm,
+  NFormItem,
+  NInput,
+  NSelect,
+  NMessageProvider,
+  NDialogProvider,
+} from 'naive-ui'
+
+const naive = create({
+  components: [
+    NButton,
+    NTag,
+    NSpace,
+    NDrawer,
+    NDrawerContent,
+    NForm,
+    NFormItem,
+    NInput,
+    NSelect,
+    NMessageProvider,
+    NDialogProvider,
+  ],
+})
+
+createApp(App).use(naive).mount('#app')

src/util/useD3.js

@@ -38,7 +38,7 @@ function textWrap(text, width) {
   text.each(function () {
     const text = d3.select(this),
       words = text.text().split('').reverse(),
-      lineHeight = 1.1, // ems
+      lineHeight = 1, // ems
       x = text.attr('x'),
       y = text.attr('y'),
       dy = 0
@@ -83,7 +83,7 @@ const defaultConfig = {
   alphaDecay: 0.0228, // 控制力学模拟衰减率
   r: 45, // 圈圈的半径 [30 - 45]
   nodeColor: 'skyblue', // 圈圈节点背景颜色
-  fontColor: '#000', // 圈圈内文字的颜色
+  fontColor: '#2c3e50', // 圈圈内文字的颜色
   linkSrc: 30, // 划线时候的弧度
   linkColor: 'gray', // 链接线默认的颜色
   strokeColor: 'gray', // 圈圈外围包裹的颜色
@@ -105,8 +105,10 @@ const defaultConfig = {
 let menu = null
 
 export default class RelationGraph {
-  constructor(selector, data, configs = {}, menuData) {
+  constructor(selector, data, configs = {}, menuData, colorList, setCurNode) {
     this.menuData = menuData
+    this.colorLIst = colorList
+    this.setCurNode = setCurNode
 
     const mapW = selector.offsetWidth
     const mapH = selector.offsetHeight
@@ -149,7 +151,8 @@ export default class RelationGraph {
 
   setKey(key) {
     d3.selectAll('.node-text')
-      .text((d) => (key && d[key]) || d[d.nodeLabel.toLowerCase() + 'Name'])
+      .text((d) => (key && d[key]) || '无')
+      // .text((d) => (key && d[key]) || d[d.nodeLabel.toLowerCase() + 'Name'])
       .call(textWrap, this.config.r * 1.8)
   }
   update(data) {
@@ -160,12 +163,17 @@ export default class RelationGraph {
     d3.selectAll('g.circle-wrapper').data(this.config.nodes)
     d3.selectAll('g.edge').data(this.config.links)
   }
-  openMenu(self, d) {
-    menu = new RadialMenu()
-      .radius(50)
-      .thickness(40)
-      .appendTo(self.parentNode)
-      .show(this.menuData, d)
+  openMenu(self, d, type) {
+    this.setCurNode(d)
+    menu = new RadialMenu().radius(50).thickness(40).appendTo(self.parentNode)
+    if (!type) {
+      menu.show(this.menuData, d)
+    } else {
+      menu.show(
+        this.menuData.filter((e) => e.key === type),
+        d
+      )
+    }
   }
   closeMenu() {
     if (menu) {
@@ -272,6 +280,7 @@ export default class RelationGraph {
       .attr('x', this.config.r)
       .attr('y', this.config.r) // edit
       .attr('text-anchor', 'middle')
+      .attr('dominant-baseline', 'middle')
       .attr('fill', this.config.fontColor)
       .style('font-size', this.config.r / 3.8)
       .text((d) => d[d.nodeLabel.toLowerCase() + 'Name'])
@@ -330,7 +339,7 @@ export default class RelationGraph {
       .attr('y', -10)
       .attr('width', 40)
       .attr('height', 20)
-      .attr('fill', 'white')
+      .attr('fill', '#f9fbfd')
       .attr('stroke', 'transparent')
 
     // 5.5 文本标签  坐标（x,y）代表 文本的左下角的点
@@ -393,7 +402,11 @@ export default class RelationGraph {
           self.closeMenu()
         } else {
           self.closeMenu()
-          self.openMenu(this, d)
+          if (d.nodeLabel === 'Subject') {
+            self.openMenu(this, d)
+          } else {
+            self.openMenu(this, d, 'del')
+          }
         }
         //阻止事件冒泡  阻止事件默认行为
         e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)