实现基本的框架

.vscode/settings.json

@@ -9,5 +9,8 @@
 		"dist": true // set this to false to include "dist" folder in search results
 	},
 	// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-	"typescript.tsc.autoDetect": "off"
+	"typescript.tsc.autoDetect": "off",
+	
+	"i18n-haru.root": "app/src/i18n",
+	"i18n-haru.main": "zh"
 }

app/.eslintrc.js

@@ -14,5 +14,6 @@ module.exports = {
 	rules: {
 		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
 		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+		'vue/multi-word-component-names': 'off'
 	},
 };

app/package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "element-plus": "^2.9.7",
         "vue": "^3.2.13",
+        "vue-i18n": "^11.1.2",
         "vue-router": "^4.0.3"
       },
       "devDependencies": {
@@ -1737,6 +1739,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -1747,6 +1758,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.5.1",
       "resolved": "https://registry.npmmirror.com/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz",
@@ -1836,6 +1856,31 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -1877,6 +1922,50 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.2.tgz",
+      "integrity": "sha512-nmG512G8QOABsserleechwHGZxzKSAlggGf9hQX0nltvSwyKNVuB/4o6iFeG2OnjXK253r8p8eSDOZf8PgFdWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "11.1.2",
+        "@intlify/shared": "11.1.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.2.tgz",
+      "integrity": "sha512-T/xbNDzi+Yv0Qn2Dfz2CWCAJiwNgU5d95EhhAEf4YmOgjCKktpfpiUSmLcBvK1CtLpPQ85AMMQk/2NCcXnNj1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.1.2",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.2.tgz",
+      "integrity": "sha512-dF2iMMy8P9uKVHV/20LA1ulFLL+MKSbfMiixSmn6fpwqzvix38OIc7ebgnFbBqElvghZCW9ACtzKTGKsTGTWGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -2005,6 +2094,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.5.tgz",
@@ -2206,6 +2306,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.16",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.16.tgz",
+      "integrity": "sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz",
@@ -2325,6 +2440,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/webpack-env": {
       "version": "1.18.8",
       "resolved": "https://registry.npmmirror.com/@types/webpack-env/-/webpack-env-1.18.8.tgz",
@@ -3326,6 +3447,94 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "9.13.0",
+        "@vueuse/shared": "9.13.0",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
+      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
+      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmmirror.com/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -3785,6 +3994,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
+      "license": "MIT"
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -5091,6 +5306,12 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/debounce/-/debounce-1.2.1.tgz",
@@ -5552,6 +5773,32 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/element-plus": {
+      "version": "2.9.7",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.9.7.tgz",
+      "integrity": "sha512-6vjZh5SXBncLhUwJGTVKS5oDljfgGMh6J4zVTeAZK3YdMUN76FgpvHkwwFXocpJpMbii6rDYU3sgie64FyPerQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.13",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -5713,7 +5960,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/escape-string-regexp": {
@@ -8070,9 +8316,25 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
       "license": "MIT"
     },
+    "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==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8374,6 +8636,12 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/merge-descriptors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
@@ -8830,6 +9098,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -11733,7 +12007,7 @@
       "version": "4.5.5",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.5.5.tgz",
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -12028,6 +12302,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-i18n": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.2.tgz",
+      "integrity": "sha512-MfdkdKGUHN+jkkaMT5Zbl4FpRmN7kfelJIwKoUpJ32ONIxdFhzxZiLTVaAXkAwvH3y9GmWpoiwjDqbPIkPIMFA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.1.2",
+        "@intlify/shared": "11.1.2",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz",

app/package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "element-plus": "^2.9.7",
     "vue": "^3.2.13",
+    "vue-i18n": "^11.1.2",
     "vue-router": "^4.0.3"
   },
   "devDependencies": {

app/public/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4870215 */
-  src: url('iconfont.woff2?t=1742888965630') format('woff2'),
+  src: url('iconfont.woff2?t=1742911403305') format('woff2'),
-       url('iconfont.woff?t=1742888965630') format('woff'),
+       url('iconfont.woff?t=1742911403305') format('woff'),
-       url('iconfont.ttf?t=1742888965630') format('truetype');
+       url('iconfont.ttf?t=1742911403305') format('truetype');
 }
 
 .iconfont {
@@ -13,8 +13,28 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-debug:before {
+  content: "\e76d";
+}
+
 .icon-plugin:before {
-  content: "\f2e1";
+  content: "\e63e";
+}
+
+.icon-about:before {
+  content: "\e6e5";
+}
+
+.icon-setting:before {
+  content: "\e610";
+}
+
+.icon-send:before {
+  content: "\e888";
+}
+
+.icon-robot:before {
+  content: "\e8e8";
 }
 
 .icon-play:before {

app/public/mcp.css

@@ -2,7 +2,7 @@
     --signal-default-color: #4CAF50;
     --main-color: #CB81DA;
     --main-dark-color: #2D323B;
-    --main-light-color: var(--main-color);
+    --main-light-color: rgba(203, 129, 218, 0.7);
     --sidebar-width: 330px;
     --right-nav-width: 50px;
     --time-scale-height: 30px;

app/public/protocol.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1742640634061" class="icon" viewBox="0 0 1024 1024" version="1.1"
+	xmlns="http://www.w3.org/2000/svg" p-id="1503" data-darkreader-inline-fill=""
+	xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+	<path
+		d="M768 854.016h-170.016L768 170.016h170.016L768 854.016zM682.016 170.016H512l-170.016 684H512l170.016-684zM86.016 704q0 44 31.008 75.008t75.008 31.008 75.008-31.008T298.048 704t-31.008-75.008-75.008-31.008-75.008 31.008T86.016 704z m0-297.984q0 44 31.008 75.008t75.008 31.008 75.008-31.008 31.008-75.008-31.008-76-75.008-32-75.008 32-31.008 76z"
+		p-id="1504" fill="#CB81DA"></path>
+</svg>

app/src/App.vue

@@ -1,11 +1,30 @@
 <template>
-	<nav>
+	<div class="main">
-		<router-link to="/">Home</router-link> |
+		<Sidebar></Sidebar>
-		<router-link to="/about">About</router-link>
+		<MainPanel></MainPanel>
-	</nav>
+	</div>
-	<router-view />
 </template>
 
-<style>
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { Connection } from './components/sidebar/sidebar';
 
+import Sidebar from '@/components/sidebar/index.vue';
+import MainPanel from '@/components/main-panel/index.vue';
+
+
+onMounted(() => {
+	document.addEventListener('click', () => {
+		Connection.showPanel = false;
+	});
+})
+
+</script>
+
+<style>
+.main {
+	height: calc(100vh - 50px);
+	display: flex;
+	justify-content: center;
+}
 </style>

app/src/components/HelloWorld.vue

@@ -1,132 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  name: "HelloWorld",
-  props: {
-    msg: String,
-  },
-});
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

app/src/components/main-panel/index.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="main-panel-container">
+		<div class="tabs-container">
+			<span
+				class="tab"
+				v-for="(_, index) of tabs.content"
+				:key="index"
+			></span>
+			<span class="add-button"
+				@click="addNewTab"
+			></span>
+		</div>
+		<div class="main-panel">
+			<router-view />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+import { addNewTab, tabs } from './panel';
+
+defineComponent({ name: 'main-panel' });
+</script>
+
+<style>
+
+.main-panel-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	margin-left: 20px;
+}
+
+.main-panel {
+	background-color: var(--sidebar);
+	border-radius: 1.2em;
+	width: 100%;
+	height: 95%;
+}
+
+.tabs-container {
+	height: 78px;
+	width: 90%;
+	background-color: var(--background);
+	display: flex;
+	align-items: center;
+
+}
+
+.tabs-container .tab {
+	margin: 5px;
+}
+
+.tabs-container .add-button {
+	height: 20px;
+	width: 20px;
+	border-radius: .5em;
+}
+
+</style>

app/src/components/main-panel/panel.ts

@@ -0,0 +1,11 @@
+import { reactive } from 'vue';
+
+export const tabs = reactive({
+	content: [],
+
+});
+
+export function addNewTab() {
+	console.log();
+	
+}

app/src/components/not-connected/index.vue

@@ -0,0 +1,12 @@
+<template>
+	
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+
+defineComponent({ name: 'not-connected' });
+</script>
+
+<style>
+</style>

app/src/components/sidebar/connected.vue

@@ -0,0 +1,83 @@
+<template>
+	<div class="connected-status-container"
+		@click.stop="toggleConnectionPanel()"
+	>
+		<span
+			class="status-circle"
+			:class="statusColorStyle"
+			>
+		</span>
+		<span class="status-string">{{ statusString }}</span>
+			
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Connection } from './sidebar';
+
+defineComponent({ name: 'connected' });
+
+const { t } = useI18n();
+
+const statusString = computed(() => {
+	if (Connection.connected) {
+		return t('connected');
+	} else {
+		return t('disconnected');
+	}
+});
+
+const statusColorStyle = computed(() => {
+	if (Connection.connected) {
+		return 'connected-color';
+	} else {
+		return 'disconnected-color';
+	}
+});
+
+
+
+function toggleConnectionPanel() {
+	Connection.showPanel = true;
+}
+
+</script>
+
+<style>
+
+.connected-color {
+	background-color: #21DA49;
+}
+
+.disconnected-color {
+	background-color: var(--main-color);
+}
+
+.status-circle {
+	height: 12px;
+	width: 12px;
+	margin-right: 10px;
+	border-radius: 99%;
+}
+
+.extra-connect-container {
+	cursor: pointer;
+	user-select: none;
+}
+
+.connected-status-container {
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	justify-content: center;
+}
+
+.connected-status-container:hover .status-string {
+	color: var(--main-color);
+	transition: var(--animation-3s);
+}
+
+</style>

app/src/components/sidebar/index.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="sidebar-container">
+		<div>
+			<McpTitle></McpTitle>
+			<hr>
+			<br>
+			<SidebarItemContainer></SidebarItemContainer>
+		</div>
+
+		<div>
+			<Connected></Connected>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+import { sidebarItems } from './sidebar';
+
+import McpTitle from './mcp-title.vue';
+import SidebarItemContainer from './sidebar-item-container.vue';
+import Connected from './connected.vue';
+
+defineComponent({ name: 'sidebar' });
+
+</script>
+
+<style>
+.sidebar-container {
+	width: 300px;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.sidebar-container > hr {
+	height: 1px;
+	width: 90%;
+	fill: var(--main-color);
+}
+
+</style>

app/src/components/sidebar/mcp-title.vue

@@ -0,0 +1,30 @@
+<template>
+	<div class="mcp-title">
+		<img src="/protocol.svg" alt="">
+		<div>OpenMCP</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+
+defineComponent({ name: 'mcp-title' });
+</script>
+
+<style>
+.mcp-title {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.mcp-title > img {
+	height: 48px;
+	margin-right: 10px;
+}
+
+.mcp-title > div {
+	font-size: 24px;
+}
+
+</style>

app/src/components/sidebar/sidebar-item-container.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="sidebar-item-container">
+		<div
+			class="sidebar-option-item"
+			:class="{'active': isActive(item.ident)}"
+			v-for="(item, index) of sidebarItems"
+			:key="index"
+			@click="gotoOption(item.ident)"
+		>
+			<span :class="`iconfont ${item.icon}`"></span>
+			<span>{{ item.name }}</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { sidebarItems } from './sidebar';
+
+defineComponent({ name: 'sidebar-item-container' });
+
+const route = useRoute();
+const router = useRouter();
+
+function isActive(name: string) {	
+	return route.name === name;
+}
+
+function gotoOption(ident: string) {
+	console.log(router);
+	
+	router.push('/' + ident);
+}
+
+</script>
+
+<style>
+.sidebar-item-container {
+	display: contents;
+}
+
+.sidebar-option-item {
+	margin: 7px;
+	height: 32px;
+	display: flex;
+	align-items: center;
+	padding: 5px 12px;
+	border-radius: 16px;
+	transition: var(--animation-3s);
+	cursor: pointer;
+	border: 1px solid var(--background);
+}
+
+.sidebar-option-item:hover {
+	border: 1px solid var(--main-color);
+	transition: var(--animation-3s);
+}
+
+.sidebar-option-item .iconfont {
+	margin-right: 5px;
+	font-size: 20px;
+}
+
+.sidebar-option-item.active {
+	background-color: var(--main-light-color);
+	transition: var(--animation-3s);
+}
+
+</style>

app/src/components/sidebar/sidebar.ts

@@ -0,0 +1,33 @@
+import { reactive } from 'vue';
+
+import I18n from '@/i18n';
+
+const { t } = I18n.global;
+
+export const sidebarItems = reactive([
+	{
+		icon: 'icon-debug',
+		name: t('debug'),
+		ident: 'debug'
+	},
+	{
+		icon: 'icon-plugin',
+		name: t('connect'),
+		ident: 'connect'
+	},
+	{
+		icon: 'icon-setting',
+		name: t('setting'),
+		ident: 'setting'
+	},
+	{
+		icon: 'icon-about',
+		name: t('about'),
+		ident: 'about'
+	}
+]);
+
+export const Connection = reactive({
+	connected: false,
+	showPanel: false
+});

app/src/i18n/ar.json

@@ -0,0 +1,110 @@
+{
+    "module": "وحدة",
+    "signal": "إشارة",
+    "search-signal": "البحث عن إشارة",
+    "language-setting": "اللغة",
+    "horizontal-scaling-ratio": "سرعة التكبير الأفقي",
+    "horizontal-scaling-ratio-description": "هناك 5 مستويات، كلما ارتفع المستوى،<br/>كلما زاد معدل التكبير باستخدام ctrl + عجلة الماوس",
+    "horizontal-roll-ratio": "سرعة التمرير الأفقي",
+    "horizontal-roll-ratio-description": "هناك 5 مستويات، كلما ارتفع المستوى،<br/>كلما زاد خطوة التمرير الأفقي لمحور الوقت للموجة",
+    "vertical-roll-ratio": "سرعة التمرير العمودي",
+    "vertical-roll-ratio-description": "هناك 5 مستويات، كلما ارتفع المستوى،<br/>كلما زاد خطوة التمرير العمودي لمحور الوقت للموجة",
+    "search-setting": "البحث",
+    "search-case-sensitivity": "حساسية الحالة",
+    "search-mode": "وضع البحث",
+    "search-scope": "نطاق البحث",
+    "search-display-parent-only": "عرض الوحدة الرئيسية فقط",
+    "search-nothing": "لم يتم العثور على أي إشارات",
+    "signal-only": "إشارة فقط",
+    "module-only": "وحدة فقط",
+    "signal-module": "إشارة + وحدة",
+    "general-setting": "عام",
+    "appearance-setting": "المظهر",
+    "display-wave-height": "ارتفاع مسار الموجة",
+    "display-signal-info-scope": "معلومات العرض في الشريط الجانبي",
+    "display-signal-info-scope.width": "عرض البت",
+    "display-signal-info-scope.parent": "اسم الوحدة الرئيسية",
+    "wavecolor": "لون الموجة الافتراضي",
+    "wavecolor.normal-bit": "موجة بعرض وحدة",
+    "wavecolor.normal-vec": "موجة بعرض متعدد البتات",
+    "wavecolor.high-impedance": "موجة عالية المقاومة",
+    "wavecolor.unknown": "موجة بحالة غير معروفة",
+    "operation-setting": "العمليات",
+    "render-setting": "العرض",
+    "prerender": "العرض المسبق",
+    "prerender-description": "العرض المسبق يزيد من سرعة العرض ولكنه يستهلك ذاكرة إضافية<br/>إذا كانت ذاكرة الكمبيوتر الخاص بك أكبر من 10 جيجابايت، نوصي بتفعيله.",
+    "render-animation": "تفعيل الرسوم المتحركة للعرض",
+    "usermanual": "دليل المستخدم",
+    "usermanual.left-right-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.left-right-scroll.caption": "التحرك لأعلى ولأسفل",
+    "usermanual.up-down-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-left-right\"/> / <span class=\"iconfont icon-shift\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.up-down-scroll.caption": "التحرك لليسار ولليمين",
+    "usermanual.xscale.title": "<span class=\"iconfont icon-ctrl\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.xscale.caption": "التكبير الأفقي",
+    "loading": "جاري التحميل",
+    "context-menu.create-group": "إنشاء مجموعة جديدة",
+    "context-menu.join-group": "الانضمام إلى مجموعة موجودة",
+    "context-menu.change-color": "تغيير اللون",
+    "context-menu.delete": "حذف الإشارة",
+    "context-menu.delete-all-select": "حذف جميع الإشارات المحددة",
+    "context-menu.signal.name": "اسم الإشارة",
+    "context-menu.signal.type": "نوع الإشارة",
+    "context-menu.signal.width": "عرض الإشارة",
+    "context-menu.signal.dep": "التبعيات",
+    "context-menu.group.cancel": "إلغاء التجميع",
+    "context-menu.group.delete": "حذف المجموعة",
+    "context-menu.group.empty": "لا توجد مجموعات متاحة",
+    "context-menu.group.uname-group": "مجموعة بدون اسم",
+    "toolbar.modal.common-digital": "رقمي",
+    "toolbar.modal.ladder-analog": "تناظري (سلم)",
+    "toolbar.modal.line-analog": "تناظري (خط)",
+    "toolbar.search.name": "الاسم",
+    "toolbar.search.value": "القيمة",
+    "toolbar.format.category.base": "أساسي",
+    "toolbar.format.category.dec": "عشري",
+    "toolbar.format.category.float": "فاصلة عائمة",
+    "toolbar.format.signed": "موقع",
+    "toolbar.format.unsigned": "غير موقع",
+    "toolbar.format.half": "نصف دقة (16 بت)",
+    "toolbar.format.float": "دقة واحدة (32 بت)",
+    "toolbar.format.double": "دقة مزدوجة (64 بت)",
+    "toolbar.location.to-begin": "الانتقال إلى البداية",
+    "toolbar.location.to-end": "الانتقال إلى النهاية",
+    "toolbar.location.to-next-change": "الانتقال إلى التغيير التالي",
+    "toolbar.location.to-prev-change": "الانتقال إلى التغيير السابق",
+    "toolbar.location.make-location": "إنشاء علامة جديدة",
+    "toolbar.location.clear-location": "مسح جميع العلامات",
+    "toolbar.location.clear-location-dialog": "هل أنت متأكد أنك تريد مسح جميع العلامات؟",
+    "context-menu.cannot-join-repeat-group": "الإشارة الحالية موجودة بالفعل في هذه المجموعة",
+    "toolbar.no-result": "لا توجد نتائج",
+    "toolbar.search.value.already-to-head": "بالفعل في البداية",
+    "toolbar.search.value.already-to-tail": "بالفعل في النهاية",
+    "toolbar.search.value.searching": "جاري البحث",
+    "pivot.context.delete": "حذف العلامة",
+    "pivot.context.display-axis": "إنشاء محور نسبي",
+    "pivot.context.cancel-axis": "إلغاء المحور النسبي",
+    "setting.appearance.pivot-color": "لون العلامة",
+    "setting.appearance.moving-pivot": "علامة متحركة",
+    "setting.appearance.user-pivot": "علامة المستخدم",
+    "setting.appearance.system-pivot": "علامة النظام",
+    "confirm": "تأكيد",
+    "cancel": "إلغاء",
+    "tips": "نصائح",
+    "filemenu.save-view": "حفظ ملف العرض",
+    "filemenu.save-as-view": "حفظ العرض كملف",
+    "filemenu.load-view": "تحميل ملف العرض",
+    "filemenu.auto-save": "الحفظ التلقائي",
+    "current-version": "الإصدار الحالي",
+    "copyright": "حقوق النشر مملوكة لفريق مشروع <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a>، نرحب بـ <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>.",
+    "setting.language.change-dialog": "لقد قمت بتغيير اللغة إلى {0}، ونوصي بإعادة تشغيل Vcd Viewer.",
+    "resources": "الموارد",
+    "tools": "أدوات",
+    "prompts": "المطالبات",
+    "interaction-test": "اختبار تفاعلي",
+    "setting": "إعدادات",
+    "about": "نبذة عنا",
+    "connected": "متصل",
+    "disconnected": "غير متصل",
+    "debug": "تصحيح",
+    "connect": "اتصال"
+}

app/src/i18n/de.json

@@ -0,0 +1,110 @@
+{
+    "module": "Modul",
+    "signal": "Signal",
+    "search-signal": "Signal suchen",
+    "language-setting": "Sprache",
+    "horizontal-scaling-ratio": "Horizontale Skalierungsgeschwindigkeit",
+    "horizontal-scaling-ratio-description": "Es gibt 5 Stufen, je höher die Stufe, desto höher die<br/>Vergrößerungsrate bei Strg + Mausrad",
+    "horizontal-roll-ratio": "Horizontale Scrollgeschwindigkeit",
+    "horizontal-roll-ratio-description": "Es gibt 5 Stufen, je höher die Stufe, desto größer der<br/>Schritt beim Scrollen der Wellenformzeitachse nach links und rechts",
+    "vertical-roll-ratio": "Vertikale Scrollgeschwindigkeit",
+    "vertical-roll-ratio-description": "Es gibt 5 Stufen, je höher die Stufe, desto größer der<br/>Schritt beim Scrollen der Wellenformzeitachse nach oben und unten",
+    "search-setting": "Suche",
+    "search-case-sensitivity": "Groß- und Kleinschreibung beachten",
+    "search-mode": "Suchmodus",
+    "search-scope": "Suchbereich",
+    "search-display-parent-only": "Nur übergeordnetes Modul anzeigen",
+    "search-nothing": "Keine Signale gefunden",
+    "signal-only": "Nur Signal",
+    "module-only": "Nur Modul",
+    "signal-module": "Signal + Modul",
+    "general-setting": "Allgemein",
+    "appearance-setting": "Aussehen",
+    "display-wave-height": "Höhe der Wellenformspur",
+    "display-signal-info-scope": "Informationen in der Seitenleiste anzeigen",
+    "display-signal-info-scope.width": "Bitbreite",
+    "display-signal-info-scope.parent": "Name des übergeordneten Moduls",
+    "wavecolor": "Standardwellenformfarbe",
+    "wavecolor.normal-bit": "Einzelbitwellenform",
+    "wavecolor.normal-vec": "Mehrfachbitwellenform",
+    "wavecolor.high-impedance": "Hohes Impedanzwellenform",
+    "wavecolor.unknown": "Unbekannte Zustandswellenform",
+    "operation-setting": "Operation",
+    "render-setting": "Rendering",
+    "prerender": "Vorrendern",
+    "prerender-description": "Vorrendern beschleunigt das Rendering, verbraucht jedoch zusätzlichen Speicher<br/>Wenn Ihr Computer über 10 GB Speicher verfügt, empfehlen wir es zu aktivieren.",
+    "render-animation": "Rendering-Animation aktivieren",
+    "usermanual": "Benutzerhandbuch",
+    "usermanual.left-right-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.left-right-scroll.caption": "Nach oben und unten bewegen",
+    "usermanual.up-down-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-left-right\"/> / <span class=\"iconfont icon-shift\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.up-down-scroll.caption": "Nach links und rechts bewegen",
+    "usermanual.xscale.title": "<span class=\"iconfont icon-ctrl\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.xscale.caption": "Horizontal skalieren",
+    "loading": "Laden",
+    "context-menu.create-group": "Neue Gruppe erstellen",
+    "context-menu.join-group": "Einer bestehenden Gruppe beitreten",
+    "context-menu.change-color": "Farbe ändern",
+    "context-menu.delete": "Signal löschen",
+    "context-menu.delete-all-select": "Alle ausgewählten Signale löschen",
+    "context-menu.signal.name": "Signalname",
+    "context-menu.signal.type": "Signaltyp",
+    "context-menu.signal.width": "Signalbreite",
+    "context-menu.signal.dep": "Abhängigkeiten",
+    "context-menu.group.cancel": "Gruppierung abbrechen",
+    "context-menu.group.delete": "Gruppe löschen",
+    "context-menu.group.empty": "Keine verfügbaren Gruppen",
+    "context-menu.group.uname-group": "Unbenannte Gruppe",
+    "toolbar.modal.common-digital": "Digital",
+    "toolbar.modal.ladder-analog": "Analog (Treppe)",
+    "toolbar.modal.line-analog": "Analog (Linie)",
+    "toolbar.search.name": "Name",
+    "toolbar.search.value": "Wert",
+    "toolbar.format.category.base": "Basis",
+    "toolbar.format.category.dec": "Dezimal",
+    "toolbar.format.category.float": "Fließkomma",
+    "toolbar.format.signed": "Vorzeichenbehaftet",
+    "toolbar.format.unsigned": "Vorzeichenlos",
+    "toolbar.format.half": "Halbgenau (16 Bit)",
+    "toolbar.format.float": "Einfach genau (32 Bit)",
+    "toolbar.format.double": "Doppelt genau (64 Bit)",
+    "toolbar.location.to-begin": "Zum Anfang bewegen",
+    "toolbar.location.to-end": "Zum Ende bewegen",
+    "toolbar.location.to-next-change": "Zum nächsten Änderungspunkt bewegen",
+    "toolbar.location.to-prev-change": "Zum vorherigen Änderungspunkt bewegen",
+    "toolbar.location.make-location": "Neuen Ankerpunkt erstellen",
+    "toolbar.location.clear-location": "Alle Ankerpunkte löschen",
+    "toolbar.location.clear-location-dialog": "Sind Sie sicher, dass Sie alle Ankerpunkte löschen möchten?",
+    "context-menu.cannot-join-repeat-group": "Das aktuelle Signal ist bereits in dieser Gruppe",
+    "toolbar.no-result": "Kein Ergebnis",
+    "toolbar.search.value.already-to-head": "Bereits am Anfang",
+    "toolbar.search.value.already-to-tail": "Bereits am Ende",
+    "toolbar.search.value.searching": "Suche läuft",
+    "pivot.context.delete": "Ankerpunkt löschen",
+    "pivot.context.display-axis": "Relative Achse erstellen",
+    "pivot.context.cancel-axis": "Relative Achse abbrechen",
+    "setting.appearance.pivot-color": "Ankerpunktfarbe",
+    "setting.appearance.moving-pivot": "Beweglicher Ankerpunkt",
+    "setting.appearance.user-pivot": "Benutzerankerpunkt",
+    "setting.appearance.system-pivot": "Systemankerpunkt",
+    "confirm": "Bestätigen",
+    "cancel": "Abbrechen",
+    "tips": "Tipps",
+    "filemenu.save-view": "Ansicht speichern",
+    "filemenu.save-as-view": "Ansicht speichern unter",
+    "filemenu.load-view": "Ansicht laden",
+    "filemenu.auto-save": "Automatisches Speichern",
+    "current-version": "Aktuelle Version",
+    "copyright": "Dieses Software gehört dem <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> Projektteam, willkommen <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>.",
+    "setting.language.change-dialog": "Sie haben die Sprache auf {0} geändert. Wir empfehlen Ihnen, Vcd Viewer neu zu starten.",
+    "resources": "Ressourcen",
+    "tools": "Werkzeuge",
+    "prompts": "Eingabeaufforderungen",
+    "interaction-test": "Interaktiver Test",
+    "setting": "Einstellungen",
+    "about": "Über",
+    "connected": "Verbunden",
+    "disconnected": "Getrennt",
+    "debug": "Debuggen",
+    "connect": "Verbinden"
+}

app/src/i18n/fr.json

@@ -0,0 +1,110 @@
+{
+    "module": "Module",
+    "signal": "Signal",
+    "search-signal": "Rechercher un signal",
+    "language-setting": "Langue",
+    "horizontal-scaling-ratio": "Vitesse de zoom horizontal",
+    "horizontal-scaling-ratio-description": "Il y a 5 niveaux, plus le niveau est élevé,<br/>plus le taux de zoom avec ctrl + molette de la souris est élevé",
+    "horizontal-roll-ratio": "Vitesse de défilement horizontal",
+    "horizontal-roll-ratio-description": "Il y a 5 niveaux, plus le niveau est élevé,<br/>plus le pas de défilement de l'axe temporel de l'onde à gauche et à droite est grand",
+    "vertical-roll-ratio": "Vitesse de défilement vertical",
+    "vertical-roll-ratio-description": "Il y a 5 niveaux, plus le niveau est élevé,<br/>plus le pas de défilement de l'axe temporel de l'onde en haut et en bas est grand",
+    "search-setting": "Recherche",
+    "search-case-sensitivity": "Sensibilité à la casse",
+    "search-mode": "Mode de recherche",
+    "search-scope": "Portée de la recherche",
+    "search-display-parent-only": "Afficher uniquement le module parent",
+    "search-nothing": "Aucun signal trouvé",
+    "signal-only": "Signal uniquement",
+    "module-only": "Module uniquement",
+    "signal-module": "Signal + Module",
+    "general-setting": "Général",
+    "appearance-setting": "Apparence",
+    "display-wave-height": "Hauteur de la piste d'onde",
+    "display-signal-info-scope": "Informations affichées dans la barre latérale",
+    "display-signal-info-scope.width": "Largeur de bit",
+    "display-signal-info-scope.parent": "Nom du module parent",
+    "wavecolor": "Couleur d'onde par défaut",
+    "wavecolor.normal-bit": "Onde à largeur unique",
+    "wavecolor.normal-vec": "Onde à largeur multiple",
+    "wavecolor.high-impedance": "Onde à haute impédance",
+    "wavecolor.unknown": "Onde à état inconnu",
+    "operation-setting": "Opérations",
+    "render-setting": "Rendu",
+    "prerender": "Pré-rendu",
+    "prerender-description": "Le pré-rendu accélère le rendu mais consomme de la mémoire supplémentaire<br/>Si votre ordinateur a plus de 10 Go de mémoire, nous vous recommandons de l'activer.",
+    "render-animation": "Activer l'animation de rendu",
+    "usermanual": "Manuel utilisateur",
+    "usermanual.left-right-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.left-right-scroll.caption": "Déplacer vers le haut et le bas",
+    "usermanual.up-down-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-left-right\"/> / <span class=\"iconfont icon-shift\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.up-down-scroll.caption": "Déplacer vers la gauche et la droite",
+    "usermanual.xscale.title": "<span class=\"iconfont icon-ctrl\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.xscale.caption": "Zoom horizontal",
+    "loading": "Chargement",
+    "context-menu.create-group": "Créer un groupe",
+    "context-menu.join-group": "Rejoindre un groupe existant",
+    "context-menu.change-color": "Changer la couleur",
+    "context-menu.delete": "Supprimer le signal",
+    "context-menu.delete-all-select": "Supprimer tous les signaux sélectionnés",
+    "context-menu.signal.name": "Nom du signal",
+    "context-menu.signal.type": "Type de signal",
+    "context-menu.signal.width": "Largeur du signal",
+    "context-menu.signal.dep": "Dépendances",
+    "context-menu.group.cancel": "Annuler le groupement",
+    "context-menu.group.delete": "Supprimer le groupe",
+    "context-menu.group.empty": "Aucun groupe disponible",
+    "context-menu.group.uname-group": "Groupe sans nom",
+    "toolbar.modal.common-digital": "Numérique",
+    "toolbar.modal.ladder-analog": "Analogique (échelle)",
+    "toolbar.modal.line-analog": "Analogique (ligne)",
+    "toolbar.search.name": "Nom",
+    "toolbar.search.value": "Valeur",
+    "toolbar.format.category.base": "Base",
+    "toolbar.format.category.dec": "Décimal",
+    "toolbar.format.category.float": "Virgule flottante",
+    "toolbar.format.signed": "Signé",
+    "toolbar.format.unsigned": "Non signé",
+    "toolbar.format.half": "Demi-précision (16 bits)",
+    "toolbar.format.float": "Simple précision (32 bits)",
+    "toolbar.format.double": "Double précision (64 bits)",
+    "toolbar.location.to-begin": "Déplacer au début",
+    "toolbar.location.to-end": "Déplacer à la fin",
+    "toolbar.location.to-next-change": "Aller au prochain changement",
+    "toolbar.location.to-prev-change": "Aller au changement précédent",
+    "toolbar.location.make-location": "Créer un nouveau repère",
+    "toolbar.location.clear-location": "Effacer tous les repères",
+    "toolbar.location.clear-location-dialog": "Êtes-vous sûr de vouloir effacer tous les repères?",
+    "context-menu.cannot-join-repeat-group": "Le signal actuel est déjà dans ce groupe",
+    "toolbar.no-result": "Aucun résultat",
+    "toolbar.search.value.already-to-head": "Déjà au début",
+    "toolbar.search.value.already-to-tail": "Déjà à la fin",
+    "toolbar.search.value.searching": "Recherche en cours",
+    "pivot.context.delete": "Supprimer le repère",
+    "pivot.context.display-axis": "Créer un axe relatif",
+    "pivot.context.cancel-axis": "Annuler l'axe relatif",
+    "setting.appearance.pivot-color": "Couleur du repère",
+    "setting.appearance.moving-pivot": "Repère mobile",
+    "setting.appearance.user-pivot": "Repère utilisateur",
+    "setting.appearance.system-pivot": "Repère système",
+    "confirm": "Confirmer",
+    "cancel": "Annuler",
+    "tips": "Conseils",
+    "filemenu.save-view": "Enregistrer le fichier de vue",
+    "filemenu.save-as-view": "Enregistrer la vue sous",
+    "filemenu.load-view": "Charger le fichier de vue",
+    "filemenu.auto-save": "Sauvegarde automatique",
+    "current-version": "Version actuelle",
+    "copyright": "Les droits d'auteur appartiennent au groupe de projet <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a>, bienvenue <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>.",
+    "setting.language.change-dialog": "Vous avez changé la langue en {0}, nous vous recommandons de redémarrer Vcd Viewer.",
+    "resources": "Ressources",
+    "tools": "Outils",
+    "prompts": "Invites",
+    "interaction-test": "Test interactif",
+    "setting": "Paramètres",
+    "about": "À propos",
+    "connected": "Connecté",
+    "disconnected": "Déconnecté",
+    "debug": "Déboguer",
+    "connect": "Connexion"
+}

app/src/i18n/index.ts

@@ -0,0 +1,20 @@
+import { createI18n } from 'vue-i18n';
+
+import en from './en.json';
+import zh from './zh-cn.json';
+import zhTw from './zh-tw.json';
+import ja from './ja.json';
+import de from './de.json';
+import ko from './ko.json';
+import ru from './ru.json';
+import fr from './fr.json';
+import ar from './ar.json';
+
+const i18n = createI18n({
+    legacy: false,
+    locale: 'zh',
+    warnHtmlMessage: false,
+    messages: { en, zh, zhTw, ja, de, ko, ru, fr, ar }
+});
+
+export default i18n;

app/src/i18n/ja.json

@@ -0,0 +1,110 @@
+{
+    "module": "モジュール",
+    "signal": "信号",
+    "search-signal": "信号を検索",
+    "language-setting": "言語",
+    "horizontal-scaling-ratio": "横方向の拡大速度",
+    "horizontal-scaling-ratio-description": "5つの段階があり、段階が高いほど、<br/>ctrl + マウスホイールでの拡大率が高くなります",
+    "horizontal-roll-ratio": "横方向のスクロール速度",
+    "horizontal-roll-ratio-description": "5つの段階があり、段階が高いほど、<br/>左右に波形の時間軸をスクロールするステップが大きくなります",
+    "vertical-roll-ratio": "縦方向のスクロール速度",
+    "vertical-roll-ratio-description": "5つの段階があり、段階が高いほど、<br/>上下に波形の時間軸をスクロールするステップが大きくなります",
+    "search-setting": "検索",
+    "search-case-sensitivity": "大文字と小文字を区別",
+    "search-mode": "検索モード",
+    "search-scope": "検索範囲",
+    "search-display-parent-only": "親モジュールのみ表示",
+    "search-nothing": "信号が見つかりませんでした",
+    "signal-only": "信号のみ",
+    "module-only": "モジュールのみ",
+    "signal-module": "信号 + モジュール",
+    "general-setting": "一般",
+    "appearance-setting": "外観",
+    "display-wave-height": "波形トラックの高さ",
+    "display-signal-info-scope": "サイドバーに表示する情報",
+    "display-signal-info-scope.width": "ビット幅",
+    "display-signal-info-scope.parent": "所属モジュール名",
+    "wavecolor": "デフォルトの波形色",
+    "wavecolor.normal-bit": "単位幅波形",
+    "wavecolor.normal-vec": "複数ビット幅波形",
+    "wavecolor.high-impedance": "ハイインピーダンス波形",
+    "wavecolor.unknown": "未知状態波形",
+    "operation-setting": "操作",
+    "render-setting": "レンダリング",
+    "prerender": "プリレンダリング",
+    "prerender-description": "プリレンダリングによりレンダリング速度が向上しますが、追加のメモリを消費します<br/>メモリが10GB以上の場合、有効にすることをお勧めします。",
+    "render-animation": "レンダリングアニメーションを有効にする",
+    "usermanual": "使用説明",
+    "usermanual.left-right-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.left-right-scroll.caption": "上下に移動",
+    "usermanual.up-down-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-left-right\"/> / <span class=\"iconfont icon-shift\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.up-down-scroll.caption": "左右に移動",
+    "usermanual.xscale.title": "<span class=\"iconfont icon-ctrl\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.xscale.caption": "横方向に拡大",
+    "loading": "読み込み中",
+    "context-menu.create-group": "新しいグループを作成",
+    "context-menu.join-group": "既存のグループに参加",
+    "context-menu.change-color": "色を変更",
+    "context-menu.delete": "信号を削除",
+    "context-menu.delete-all-select": "選択したすべての信号を削除",
+    "context-menu.signal.name": "信号名",
+    "context-menu.signal.type": "信号タイプ",
+    "context-menu.signal.width": "信号幅",
+    "context-menu.signal.dep": "依存関係",
+    "context-menu.group.cancel": "グループをキャンセル",
+    "context-menu.group.delete": "グループを削除",
+    "context-menu.group.empty": "利用可能なグループがありません",
+    "context-menu.group.uname-group": "名前なしグループ",
+    "toolbar.modal.common-digital": "デジタル",
+    "toolbar.modal.ladder-analog": "アナログ（階段）",
+    "toolbar.modal.line-analog": "アナログ（折れ線）",
+    "toolbar.search.name": "名前",
+    "toolbar.search.value": "値",
+    "toolbar.format.category.base": "基本",
+    "toolbar.format.category.dec": "10進数",
+    "toolbar.format.category.float": "浮動小数点数",
+    "toolbar.format.signed": "符号付き",
+    "toolbar.format.unsigned": "符号なし",
+    "toolbar.format.half": "半精度（16ビット）",
+    "toolbar.format.float": "単精度（32ビット）",
+    "toolbar.format.double": "倍精度（64ビット）",
+    "toolbar.location.to-begin": "先頭に移動",
+    "toolbar.location.to-end": "末尾に移動",
+    "toolbar.location.to-next-change": "次の変化点に移動",
+    "toolbar.location.to-prev-change": "前の変化点に移動",
+    "toolbar.location.make-location": "新しいピボットを作成",
+    "toolbar.location.clear-location": "すべてのピボットをクリア",
+    "toolbar.location.clear-location-dialog": "すべてのピボットをクリアしてもよろしいですか？",
+    "context-menu.cannot-join-repeat-group": "現在の信号はすでにこのグループに含まれています",
+    "toolbar.no-result": "結果なし",
+    "toolbar.search.value.already-to-head": "すでに先頭にいます",
+    "toolbar.search.value.already-to-tail": "すでに末尾にいます",
+    "toolbar.search.value.searching": "検索中",
+    "pivot.context.delete": "ピボットを削除",
+    "pivot.context.display-axis": "相対座標軸を作成",
+    "pivot.context.cancel-axis": "相対座標軸をキャンセル",
+    "setting.appearance.pivot-color": "ピボットの色",
+    "setting.appearance.moving-pivot": "移動ピボット",
+    "setting.appearance.user-pivot": "ユーザーピボット",
+    "setting.appearance.system-pivot": "システムピボット",
+    "confirm": "確認",
+    "cancel": "キャンセル",
+    "tips": "ヒント",
+    "filemenu.save-view": "ビューファイルを保存",
+    "filemenu.save-as-view": "ビューファイルとして保存",
+    "filemenu.load-view": "ビューファイルをインポート",
+    "filemenu.auto-save": "自動保存",
+    "current-version": "現在のバージョン",
+    "copyright": "このソフトウェアの著作権は <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> プロジェクトチームに帰属します。<a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a> を歓迎します。",
+    "setting.language.change-dialog": "言語を{0}に変更しました。Vcd Viewerを再起動することをお勧めします。",
+    "resources": "リソース",
+    "tools": "ツール",
+    "prompts": "プロンプト",
+    "interaction-test": "インタラクティブテスト",
+    "setting": "設定",
+    "about": "について",
+    "connected": "接続済み",
+    "disconnected": "切断されました",
+    "debug": "デバッグ",
+    "connect": "接続"
+}

app/src/i18n/ko.json

@@ -0,0 +1,110 @@
+{
+    "module": "모듈",
+    "signal": "신호",
+    "search-signal": "신호 검색",
+    "language-setting": "언어",
+    "horizontal-scaling-ratio": "가로 확대 속도",
+    "horizontal-scaling-ratio-description": "5단계가 있으며, 단계가 높을수록<br/>ctrl + 마우스 휠 확대 비율이 높아집니다",
+    "horizontal-roll-ratio": "가로 스크롤 속도",
+    "horizontal-roll-ratio-description": "5단계가 있으며, 단계가 높을수록<br/>좌우로 파형 시간축을 스크롤하는 단계가 커집니다",
+    "vertical-roll-ratio": "세로 스크롤 속도",
+    "vertical-roll-ratio-description": "5단계가 있으며, 단계가 높을수록<br/>상하로 파형 시간축을 스크롤하는 단계가 커집니다",
+    "search-setting": "검색",
+    "search-case-sensitivity": "대소문자 구분",
+    "search-mode": "검색 모드",
+    "search-scope": "검색 범위",
+    "search-display-parent-only": "부모 모듈만 표시",
+    "search-nothing": "신호를 찾을 수 없습니다",
+    "signal-only": "신호만",
+    "module-only": "모듈만",
+    "signal-module": "신호 + 모듈",
+    "general-setting": "일반",
+    "appearance-setting": "외관",
+    "display-wave-height": "파형 트랙의 높이",
+    "display-signal-info-scope": "사이드바에 표시할 정보",
+    "display-signal-info-scope.width": "비트 너비",
+    "display-signal-info-scope.parent": "소속 모듈 이름",
+    "wavecolor": "기본 파형 색상",
+    "wavecolor.normal-bit": "단위 너비 파형",
+    "wavecolor.normal-vec": "다중 비트 너비 파형",
+    "wavecolor.high-impedance": "고임피던스 파형",
+    "wavecolor.unknown": "알 수 없는 상태 파형",
+    "operation-setting": "작업",
+    "render-setting": "렌더링",
+    "prerender": "사전 렌더링",
+    "prerender-description": "사전 렌더링은 렌더링 속도를 높이지만 추가 메모리를 사용합니다<br/>컴퓨터 메모리가 10GB 이상인 경우 활성화하는 것이 좋습니다.",
+    "render-animation": "렌더링 애니메이션 활성화",
+    "usermanual": "사용 설명서",
+    "usermanual.left-right-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.left-right-scroll.caption": "상하 이동",
+    "usermanual.up-down-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-left-right\"/> / <span class=\"iconfont icon-shift\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.up-down-scroll.caption": "좌우 이동",
+    "usermanual.xscale.title": "<span class=\"iconfont icon-ctrl\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.xscale.caption": "가로 확대",
+    "loading": "로딩 중",
+    "context-menu.create-group": "새 그룹 생성",
+    "context-menu.join-group": "기존 그룹에 참여",
+    "context-menu.change-color": "색상 변경",
+    "context-menu.delete": "신호 삭제",
+    "context-menu.delete-all-select": "선택한 모든 신호 삭제",
+    "context-menu.signal.name": "신호 이름",
+    "context-menu.signal.type": "신호 유형",
+    "context-menu.signal.width": "신호 너비",
+    "context-menu.signal.dep": "종속성",
+    "context-menu.group.cancel": "그룹 취소",
+    "context-menu.group.delete": "그룹 삭제",
+    "context-menu.group.empty": "사용 가능한 그룹이 없습니다",
+    "context-menu.group.uname-group": "이름 없는 그룹",
+    "toolbar.modal.common-digital": "디지털",
+    "toolbar.modal.ladder-analog": "아날로그 (사다리)",
+    "toolbar.modal.line-analog": "아날로그 (선)",
+    "toolbar.search.name": "이름",
+    "toolbar.search.value": "값",
+    "toolbar.format.category.base": "기본",
+    "toolbar.format.category.dec": "십진법",
+    "toolbar.format.category.float": "부동 소수점",
+    "toolbar.format.signed": "부호 있음",
+    "toolbar.format.unsigned": "부호 없음",
+    "toolbar.format.half": "반정밀도 (16비트)",
+    "toolbar.format.float": "단정밀도 (32비트)",
+    "toolbar.format.double": "배정밀도 (64비트)",
+    "toolbar.location.to-begin": "시작 부분으로 이동",
+    "toolbar.location.to-end": "끝 부분으로 이동",
+    "toolbar.location.to-next-change": "다음 변화로 이동",
+    "toolbar.location.to-prev-change": "이전 변화로 이동",
+    "toolbar.location.make-location": "새 표식 생성",
+    "toolbar.location.clear-location": "모든 표식 지우기",
+    "toolbar.location.clear-location-dialog": "모든 표식을 지우시겠습니까?",
+    "context-menu.cannot-join-repeat-group": "현재 신호가 이미 이 그룹에 있습니다",
+    "toolbar.no-result": "결과 없음",
+    "toolbar.search.value.already-to-head": "이미 시작 부분입니다",
+    "toolbar.search.value.already-to-tail": "이미 끝 부분입니다",
+    "toolbar.search.value.searching": "검색 중",
+    "pivot.context.delete": "표식 삭제",
+    "pivot.context.display-axis": "상대 좌표축 생성",
+    "pivot.context.cancel-axis": "상대 좌표축 취소",
+    "setting.appearance.pivot-color": "표식 색상",
+    "setting.appearance.moving-pivot": "이동 표식",
+    "setting.appearance.user-pivot": "사용자 표식",
+    "setting.appearance.system-pivot": "시스템 표식",
+    "confirm": "확인",
+    "cancel": "취소",
+    "tips": "팁",
+    "filemenu.save-view": "뷰 파일 저장",
+    "filemenu.save-as-view": "뷰 파일로 저장",
+    "filemenu.load-view": "뷰 파일 불러오기",
+    "filemenu.auto-save": "자동 저장",
+    "current-version": "현재 버전",
+    "copyright": "이 소프트웨어의 저작권은 <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> 프로젝트 팀에 있으며, <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>를 환영합니다.",
+    "setting.language.change-dialog": "언어를 {0}로 변경했습니다. Vcd Viewer를 다시 시작하는 것을 권장합니다.",
+    "resources": "자원",
+    "tools": "도구",
+    "prompts": "프롬프트",
+    "interaction-test": "인터랙티브 테스트",
+    "setting": "설정",
+    "about": "정보",
+    "connected": "연결됨",
+    "disconnected": "연결 해제됨",
+    "debug": "디버그",
+    "connect": "연결"
+}

app/src/i18n/ru.json

@@ -0,0 +1,110 @@
+{
+    "module": "Модуль",
+    "signal": "Сигнал",
+    "search-signal": "Поиск сигнала",
+    "language-setting": "Язык",
+    "horizontal-scaling-ratio": "Скорость горизонтального масштабирования",
+    "horizontal-scaling-ratio-description": "Есть 5 уровней, чем выше уровень,<br/>тем выше коэффициент масштабирования при нажатии ctrl + колесо мыши",
+    "horizontal-roll-ratio": "Скорость горизонтальной прокрутки",
+    "horizontal-roll-ratio-description": "Есть 5 уровней, чем выше уровень,<br/>тем больше шаг при прокрутке оси времени волны влево и вправо",
+    "vertical-roll-ratio": "Скорость вертикальной прокрутки",
+    "vertical-roll-ratio-description": "Есть 5 уровней, чем выше уровень,<br/>тем больше шаг при прокрутке оси времени волны вверх и вниз",
+    "search-setting": "Поиск",
+    "search-case-sensitivity": "Учитывать регистр",
+    "search-mode": "Режим поиска",
+    "search-scope": "Область поиска",
+    "search-display-parent-only": "Показывать только родительский модуль",
+    "search-nothing": "Сигналы не найдены",
+    "signal-only": "Только сигнал",
+    "module-only": "Только модуль",
+    "signal-module": "Сигнал + Модуль",
+    "general-setting": "Общие",
+    "appearance-setting": "Внешний вид",
+    "display-wave-height": "Высота дорожки волны",
+    "display-signal-info-scope": "Информация в боковой панели",
+    "display-signal-info-scope.width": "Ширина бита",
+    "display-signal-info-scope.parent": "Имя родительского модуля",
+    "wavecolor": "Цвет волны по умолчанию",
+    "wavecolor.normal-bit": "Одиночная ширина волны",
+    "wavecolor.normal-vec": "Многобитная ширина волны",
+    "wavecolor.high-impedance": "Высокоимпедансная волна",
+    "wavecolor.unknown": "Неизвестное состояние волны",
+    "operation-setting": "Операции",
+    "render-setting": "Рендеринг",
+    "prerender": "Предварительный рендеринг",
+    "prerender-description": "Предварительный рендеринг ускоряет рендеринг, но потребляет дополнительную память<br/>Если у вас больше 10 ГБ памяти, мы рекомендуем включить его.",
+    "render-animation": "Включить анимацию рендеринга",
+    "usermanual": "Руководство пользователя",
+    "usermanual.left-right-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.left-right-scroll.caption": "Перемещение вверх и вниз",
+    "usermanual.up-down-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-left-right\"/> / <span class=\"iconfont icon-shift\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.up-down-scroll.caption": "Перемещение влево и вправо",
+    "usermanual.xscale.title": "<span class=\"iconfont icon-ctrl\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.xscale.caption": "Горизонтальное масштабирование",
+    "loading": "Загрузка",
+    "context-menu.create-group": "Создать группу",
+    "context-menu.join-group": "Присоединиться к существующей группе",
+    "context-menu.change-color": "Изменить цвет",
+    "context-menu.delete": "Удалить сигнал",
+    "context-menu.delete-all-select": "Удалить все выбранные сигналы",
+    "context-menu.signal.name": "Имя сигнала",
+    "context-menu.signal.type": "Тип сигнала",
+    "context-menu.signal.width": "Ширина сигнала",
+    "context-menu.signal.dep": "Зависимости",
+    "context-menu.group.cancel": "Отменить группировку",
+    "context-menu.group.delete": "Удалить группу",
+    "context-menu.group.empty": "Нет доступных групп",
+    "context-menu.group.uname-group": "Безымянная группа",
+    "toolbar.modal.common-digital": "Цифровой",
+    "toolbar.modal.ladder-analog": "Аналоговый (ступенчатый)",
+    "toolbar.modal.line-analog": "Аналоговый (линейный)",
+    "toolbar.search.name": "Имя",
+    "toolbar.search.value": "Значение",
+    "toolbar.format.category.base": "Основной",
+    "toolbar.format.category.dec": "Десятичный",
+    "toolbar.format.category.float": "Плавающая запятая",
+    "toolbar.format.signed": "Знаковый",
+    "toolbar.format.unsigned": "Беззнаковый",
+    "toolbar.format.half": "Полуточный (16 бит)",
+    "toolbar.format.float": "Одинарная точность (32 бита)",
+    "toolbar.format.double": "Двойная точность (64 бита)",
+    "toolbar.location.to-begin": "Переместить в начало",
+    "toolbar.location.to-end": "Переместить в конец",
+    "toolbar.location.to-next-change": "Перейти к следующему изменению",
+    "toolbar.location.to-prev-change": "Перейти к предыдущему изменению",
+    "toolbar.location.make-location": "Создать новый маркер",
+    "toolbar.location.clear-location": "Очистить все маркеры",
+    "toolbar.location.clear-location-dialog": "Вы уверены, что хотите очистить все маркеры?",
+    "context-menu.cannot-join-repeat-group": "Текущий сигнал уже находится в этой группе",
+    "toolbar.no-result": "Нет результатов",
+    "toolbar.search.value.already-to-head": "Уже в начале",
+    "toolbar.search.value.already-to-tail": "Уже в конце",
+    "toolbar.search.value.searching": "Поиск",
+    "pivot.context.delete": "Удалить маркер",
+    "pivot.context.display-axis": "Создать относительную ось",
+    "pivot.context.cancel-axis": "Отменить относительную ось",
+    "setting.appearance.pivot-color": "Цвет маркера",
+    "setting.appearance.moving-pivot": "Движущийся маркер",
+    "setting.appearance.user-pivot": "Пользовательский маркер",
+    "setting.appearance.system-pivot": "Системный маркер",
+    "confirm": "Подтвердить",
+    "cancel": "Отменить",
+    "tips": "Советы",
+    "filemenu.save-view": "Сохранить файл представления",
+    "filemenu.save-as-view": "Сохранить представление как",
+    "filemenu.load-view": "Загрузить файл представления",
+    "filemenu.auto-save": "Автосохранение",
+    "current-version": "Текущая версия",
+    "copyright": "Авторские права принадлежат проектной группе <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a>, приветствуем <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>.",
+    "setting.language.change-dialog": "Вы изменили язык на {0}, рекомендуем перезапустить Vcd Viewer.",
+    "resources": "Ресурсы",
+    "tools": "Инструменты",
+    "prompts": "Подсказки",
+    "interaction-test": "Интерактивный тест",
+    "setting": "Настройки",
+    "about": "О нас",
+    "connected": "Подключено",
+    "disconnected": "Отключено",
+    "debug": "Отладка",
+    "connect": "Подключение"
+}

app/src/i18n/zh-cn.json

@@ -0,0 +1,110 @@
+{
+    "module": "模块",
+    "signal": "信号",
+    "search-signal": "搜索信号",
+    "language-setting": "语言",
+    "horizontal-scaling-ratio": "横向缩放速度",
+    "horizontal-scaling-ratio-description": "一共有5个挡位，挡位越高，<br/>ctrl + 鼠标滚轮缩放时的倍率越高",
+    "horizontal-roll-ratio": "横向滚动速度",
+    "horizontal-roll-ratio-description": "一共有5个挡位，挡位越高，<br/>左右滑动波形时间轴的步长越大",
+    "vertical-roll-ratio": "纵向滚动速度",
+    "vertical-roll-ratio-description": "一共有5个挡位，挡位越高，<br/>上下滑动波形时间轴的步长越大",
+    "search-setting": "搜索",
+    "search-case-sensitivity": "区分大小写",
+    "search-mode": "搜索模式",
+    "search-scope": "搜索范围",
+    "search-display-parent-only": "只展示父模块",
+    "search-nothing": "没有找到任何信号",
+    "signal-only": "信号",
+    "module-only": "模块",
+    "signal-module": "信号 + 模块",
+    "general-setting": "通用",
+    "appearance-setting": "外观",
+    "display-wave-height": "波形轨道的高度",
+    "display-signal-info-scope": "侧边栏展示信息",
+    "display-signal-info-scope.width": "位宽",
+    "display-signal-info-scope.parent": "所属模块名",
+    "wavecolor": "默认波形颜色",
+    "wavecolor.normal-bit": "单位宽波形",
+    "wavecolor.normal-vec": "多位宽波形",
+    "wavecolor.high-impedance": "高阻态波形",
+    "wavecolor.unknown": "未知态波形",
+    "operation-setting": "操作",
+    "render-setting": "渲染",
+    "prerender": "预渲染",
+    "prerender-description": "预渲染将使得渲染速度更快，但是会占用额外内存<br/>如果您的电脑内存大于10个G，我们建议您开启。",
+    "render-animation": "开启渲染动画",
+    "usermanual": "使用说明",
+    "usermanual.left-right-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.left-right-scroll.caption": "上下移动",
+    "usermanual.up-down-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-left-right\"/> / <span class=\"iconfont icon-shift\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.up-down-scroll.caption": "左右移动",
+    "usermanual.xscale.title": "<span class=\"iconfont icon-ctrl\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.xscale.caption": "横向缩放",
+    "loading": "加载中",
+    "context-menu.create-group": "新建组",
+    "context-menu.join-group": "加入已有分组",
+    "context-menu.change-color": "修改颜色",
+    "context-menu.delete": "删除信号",
+    "context-menu.delete-all-select": "删除所有选中信号",
+    "context-menu.signal.name": "信号名称",
+    "context-menu.signal.type": "信号类型",
+    "context-menu.signal.width": "信号宽度",
+    "context-menu.signal.dep": "依赖关系",
+    "context-menu.group.cancel": "取消分组",
+    "context-menu.group.delete": "删除分组",
+    "context-menu.group.empty": "当前没有可用的分组",
+    "context-menu.group.uname-group": "未命名分组",
+    "toolbar.modal.common-digital": "数字",
+    "toolbar.modal.ladder-analog": "模拟（阶梯）",
+    "toolbar.modal.line-analog": "模拟（折线）",
+    "toolbar.search.name": "名称",
+    "toolbar.search.value": "值",
+    "toolbar.format.category.base": "基础",
+    "toolbar.format.category.dec": "十进制",
+    "toolbar.format.category.float": "浮点数",
+    "toolbar.format.signed": "有符号",
+    "toolbar.format.unsigned": "无符号",
+    "toolbar.format.half": "半精度（16bit）",
+    "toolbar.format.float": "单精度（32bit）",
+    "toolbar.format.double": "双精度（64bit）",
+    "toolbar.location.to-begin": "移动至开头",
+    "toolbar.location.to-end": "移动至结尾",
+    "toolbar.location.to-next-change": "前往下一个变化的边沿",
+    "toolbar.location.to-prev-change": "前往上一个变化的边沿",
+    "toolbar.location.make-location": "创建新的信标",
+    "toolbar.location.clear-location": "清除所有信标",
+    "toolbar.location.clear-location-dialog": "您确定要清除所有的信标吗？",
+    "context-menu.cannot-join-repeat-group": "当前信号已在此分组中",
+    "toolbar.no-result": "无结果",
+    "toolbar.search.value.already-to-head": "已经到开头了",
+    "toolbar.search.value.already-to-tail": "已经到结尾了",
+    "toolbar.search.value.searching": "搜索中",
+    "pivot.context.delete": "删除信标",
+    "pivot.context.display-axis": "创建相对坐标轴",
+    "pivot.context.cancel-axis": "取消相对坐标轴",
+    "setting.appearance.pivot-color": "信标颜色",
+    "setting.appearance.moving-pivot": "移动信标",
+    "setting.appearance.user-pivot": "用户信标",
+    "setting.appearance.system-pivot": "系统信标",
+    "confirm": "确定",
+    "cancel": "取消",
+    "tips": "提示",
+    "filemenu.save-view": "保存视图文件",
+    "filemenu.save-as-view": "另存为视图文件",
+    "filemenu.load-view": "导入视图文件",
+    "filemenu.auto-save": "自动保存",
+    "current-version": "当前版本",
+    "copyright": "本软件版权归 <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> 项目组所有，欢迎 <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>。",
+    "setting.language.change-dialog": "您已经更换语言为 {0}，我们建议您重启 Vcd Viewer",
+    "resources": "资源",
+    "tools": "工具",
+    "prompts": "提词",
+    "interaction-test": "交互测试",
+    "setting": "设置",
+    "about": "关于",
+    "connected": "已连接",
+    "disconnected": "未连接",
+    "debug": "调试",
+    "connect": "连接"
+}

app/src/i18n/zh-tw.json

@@ -0,0 +1,110 @@
+{
+    "module": "模塊",
+    "signal": "信號",
+    "search-signal": "搜索信號",
+    "language-setting": "語言",
+    "horizontal-scaling-ratio": "橫向縮放速度",
+    "horizontal-scaling-ratio-description": "一共有5個擋位，擋位越高，<br/>ctrl + 鼠標滾輪縮放時的倍率越高",
+    "horizontal-roll-ratio": "橫向滾動速度",
+    "horizontal-roll-ratio-description": "一共有5個擋位，擋位越高，<br/>左右滑動波形時間軸的步長越大",
+    "vertical-roll-ratio": "縱向滾動速度",
+    "vertical-roll-ratio-description": "一共有5個擋位，擋位越高，<br/>上下滑動波形時間軸的步長越大",
+    "search-setting": "搜索",
+    "search-case-sensitivity": "區分大小寫",
+    "search-mode": "搜索模式",
+    "search-scope": "搜索範圍",
+    "search-display-parent-only": "只展示父模塊",
+    "search-nothing": "沒有找到任何信號",
+    "signal-only": "信號",
+    "module-only": "模塊",
+    "signal-module": "信號 + 模塊",
+    "general-setting": "通用",
+    "appearance-setting": "外觀",
+    "display-wave-height": "波形軌道的高度",
+    "display-signal-info-scope": "側邊欄展示信息",
+    "display-signal-info-scope.width": "位寬",
+    "display-signal-info-scope.parent": "所屬模塊名",
+    "wavecolor": "默認波形顏色",
+    "wavecolor.normal-bit": "單位寬波形",
+    "wavecolor.normal-vec": "多位寬波形",
+    "wavecolor.high-impedance": "高阻態波形",
+    "wavecolor.unknown": "未知態波形",
+    "operation-setting": "操作",
+    "render-setting": "渲染",
+    "prerender": "預渲染",
+    "prerender-description": "預渲染將使得渲染速度更快，但是會佔用額外內存<br/>如果您的電腦內存大於10個G，我們建議您開啟。",
+    "render-animation": "開啟渲染動畫",
+    "usermanual": "使用說明",
+    "usermanual.left-right-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.left-right-scroll.caption": "上下移動",
+    "usermanual.up-down-scroll.title": "<span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-left-right\"/> / <span class=\"iconfont icon-shift\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.up-down-scroll.caption": "左右移動",
+    "usermanual.xscale.title": "<span class=\"iconfont icon-ctrl\"/> + <span class=\"iconfont icon-mouse\"/><span class=\"iconfont icon-up-down\"/>",
+    "usermanual.xscale.caption": "橫向縮放",
+    "loading": "加載中",
+    "context-menu.create-group": "新建組",
+    "context-menu.join-group": "加入已有分組",
+    "context-menu.change-color": "修改顏色",
+    "context-menu.delete": "刪除信號",
+    "context-menu.delete-all-select": "刪除所有選中信號",
+    "context-menu.signal.name": "信號名稱",
+    "context-menu.signal.type": "信號類型",
+    "context-menu.signal.width": "信號寬度",
+    "context-menu.signal.dep": "依賴關係",
+    "context-menu.group.cancel": "取消分組",
+    "context-menu.group.delete": "刪除分組",
+    "context-menu.group.empty": "當前沒有可用的分組",
+    "context-menu.group.uname-group": "未命名分組",
+    "toolbar.modal.common-digital": "數字",
+    "toolbar.modal.ladder-analog": "模擬（階梯）",
+    "toolbar.modal.line-analog": "模擬（折線）",
+    "toolbar.search.name": "名稱",
+    "toolbar.search.value": "值",
+    "toolbar.format.category.base": "基礎",
+    "toolbar.format.category.dec": "十進制",
+    "toolbar.format.category.float": "浮點數",
+    "toolbar.format.signed": "有符號",
+    "toolbar.format.unsigned": "無符號",
+    "toolbar.format.half": "半精度（16bit）",
+    "toolbar.format.float": "單精度（32bit）",
+    "toolbar.format.double": "雙精度（64bit）",
+    "toolbar.location.to-begin": "移動至開頭",
+    "toolbar.location.to-end": "移動至結尾",
+    "toolbar.location.to-next-change": "前往下一個變化的邊沿",
+    "toolbar.location.to-prev-change": "前往上一個變化的邊沿",
+    "toolbar.location.make-location": "創建新的信標",
+    "toolbar.location.clear-location": "清除所有信標",
+    "toolbar.location.clear-location-dialog": "您確定要清除所有的信標嗎？",
+    "context-menu.cannot-join-repeat-group": "當前信號已在此分組中",
+    "toolbar.no-result": "無結果",
+    "toolbar.search.value.already-to-head": "已經到開頭了",
+    "toolbar.search.value.already-to-tail": "已經到結尾了",
+    "toolbar.search.value.searching": "搜索中",
+    "pivot.context.delete": "刪除信標",
+    "pivot.context.display-axis": "創建相對坐標軸",
+    "pivot.context.cancel-axis": "取消相對坐標軸",
+    "setting.appearance.pivot-color": "信標顏色",
+    "setting.appearance.moving-pivot": "移動信標",
+    "setting.appearance.user-pivot": "用戶信標",
+    "setting.appearance.system-pivot": "系統信標",
+    "confirm": "確定",
+    "cancel": "取消",
+    "tips": "提示",
+    "filemenu.save-view": "保存視圖文件",
+    "filemenu.save-as-view": "另存為視圖文件",
+    "filemenu.load-view": "導入視圖文件",
+    "filemenu.auto-save": "自動保存",
+    "current-version": "當前版本",
+    "copyright": "本軟件版權歸 <a href=\"https://github.com/Digital-EDA\" target=\"_blank\">Digital-IDE</a> 項目組所有，歡迎 <a href=\"https://github.com/Digital-EDA/Digital-IDE\">Star</a>。",
+    "setting.language.change-dialog": "您已將語言更改為 {0}，我們建議您重新啟動 Vcd Viewer。",
+    "resources": "資源",
+    "tools": "工具",
+    "prompts": "提示",
+    "interaction-test": "交互測試",
+    "setting": "設定",
+    "about": "關於",
+    "connected": "已連線",
+    "disconnected": "已斷開連接",
+    "debug": "偵錯",
+    "connect": "連接"
+}

app/src/main.ts

@@ -1,5 +1,12 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
+import i18n from './i18n';
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
-createApp(App).use(router).mount("#app");
+createApp(App)
+    .use(i18n)
+    .use(router)
+    .use(ElementPlus)
+    .mount('#app')

app/src/router/index.ts

@@ -1,21 +1,30 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import HomeView from "../views/HomeView.vue";
 
 const routes: Array<RouteRecordRaw> = [
 	{
-    path: "/",
+		path: "/debug",
-    name: "home",
+		name: "debug",
-    component: HomeView,
+		component: () => import("@/views/debug/index.vue"),
+		meta: { title: "Debug" }
+	},
+	{
+		path: "/connect",
+		name: "connect",
+		component: () => import("@/views/connect/index.vue"),
+		meta: { title: "Connect" }
+	},
+	{
+		path: "/setting",
+		name: "setting",
+		component: () => import("@/views/setting/index.vue"),
+		meta: { title: "Setting" }
 	},
 	{
 		path: "/about",
 		name: "about",
-    // route level code-splitting
+		component: () => import("@/views/about/index.vue"),
-    // this generates a separate chunk (about.[hash].js) for this route
+		meta: { title: "Tools" }
-    // which is lazy-loaded when the route is visited.
+	}
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
-  },
 ];
 
 const router = createRouter({
@@ -23,4 +32,12 @@ const router = createRouter({
 	routes,
 });
 
+
+router.beforeEach((to, from, next) => {
+	if (to.meta.title) {
+		document.title = `OpenMCP | ${to.meta.title}`;
+	}
+	next();
+});
+
 export default router;

app/src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

app/src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
-
-export default defineComponent({
-  name: "HomeView",
-  components: {
-    HelloWorld,
-  },
-});
-</script>

app/src/views/about/index.vue

@@ -0,0 +1,22 @@
+<template>
+	<div>
+		OpenMCP Client 0.0.1 由 @锦恢 开发
+		
+		<p>@锦恢 享有软件本体的所有权</p>
+
+		<p>软件已开源 <a href="https://github.com/LSTM-Kirigaya/openmcp-client" target="_blank">
+			LSTM-Kirigaya/openmcp-client
+		</a></p>
+
+		<p>请遵循开源协议进行分发和二次开发。</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+
+defineComponent({ name: 'about' });
+</script>
+
+<style>
+</style>

app/src/views/connect/index.vue

@@ -0,0 +1,13 @@
+<template>
+	<div></div>
+	
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+
+defineComponent({ name: 'connect' });
+</script>
+
+<style>
+</style>

app/src/views/debug/index.vue

@@ -0,0 +1,16 @@
+<template>
+	<div style="height: 100%;">
+		<Welcome></Welcome>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+
+import Welcome from './welcome.vue';
+
+defineComponent({ name: 'TEMPLATE_NAME' });
+</script>
+
+<style>
+</style>

app/src/views/debug/welcome.vue

@@ -0,0 +1,103 @@
+<template>
+	<div class="debug-welcome">
+		<span>选择一个项目进行调试</span>
+		<div class="welcome-container">
+			<span
+				class="debug-option"
+				v-for="(option, index) of debugOptions"
+				:key="index"	
+			>
+				<span>
+					<span :class="`iconfont ${option.icon}`"></span>
+				</span>
+				<span>{{ option.name }}</span>
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+defineComponent({ name: 'welcome' });
+
+const { t } = useI18n();
+
+const debugOptions = [
+	{
+		icon: 'icon-file',
+		name: t("resources"),
+		ident: 'resources'
+	},
+	{
+		icon: 'icon-chat',
+		name: t("prompts"),
+		ident: 'prompts'
+	},
+	{
+		icon: 'icon-tool',
+		name: t("tools"),
+		ident: 'tool'
+	},
+	{
+		icon: 'icon-robot',
+		name: t("interaction-test"),
+		ident: 'interaction'
+	}
+];
+
+</script>
+
+<style>
+.debug-welcome {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.debug-welcome > span {
+	font-size: 30px;
+	margin-top: 100px;
+	margin-bottom: 76px;
+}
+
+
+.welcome-container {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 100px;
+}
+
+.welcome-container > span {
+	flex: 1 1 calc(50% - 100px);
+	box-sizing: border-box;
+}
+
+.debug-option {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	font-size: 24px;
+	padding: 30px 0; 
+	border-radius: .5em;
+	cursor: pointer;
+	border: 1px solid var(--sidebar);
+	transition: var(--animation-3s);
+}
+
+.debug-option > span:first-child {
+	margin-bottom: 15px;
+}
+
+.debug-option:hover {
+	border: 1px solid var(--main-color);
+	transition: var(--animation-3s);
+}
+
+.debug-option .iconfont {
+	font-size: 48px;
+}
+
+</style>

app/src/views/setting/index.vue

@@ -0,0 +1,12 @@
+<template>
+	<div></div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from 'vue';
+
+defineComponent({ name: 'setting' });
+</script>
+
+<style>
+</style>

app/tsconfig.json

@@ -9,6 +9,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
     "useDefineForClassFields": true,
     "sourceMap": true,
     "baseUrl": ".",

icons/protocol.svg

@@ -1 +1,9 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1742640634061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1503" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M768 854.016h-170.016L768 170.016h170.016L768 854.016zM682.016 170.016H512l-170.016 684H512l170.016-684zM86.016 704q0 44 31.008 75.008t75.008 31.008 75.008-31.008T298.048 704t-31.008-75.008-75.008-31.008-75.008 31.008T86.016 704z m0-297.984q0 44 31.008 75.008t75.008 31.008 75.008-31.008 31.008-75.008-31.008-76-75.008-32-75.008 32-31.008 76z" p-id="1504"></path></svg>
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1742640634061" class="icon" viewBox="0 0 1024 1024" version="1.1"
+	xmlns="http://www.w3.org/2000/svg" p-id="1503" data-darkreader-inline-fill=""
+	xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+	<path
+		d="M768 854.016h-170.016L768 170.016h170.016L768 854.016zM682.016 170.016H512l-170.016 684H512l170.016-684zM86.016 704q0 44 31.008 75.008t75.008 31.008 75.008-31.008T298.048 704t-31.008-75.008-75.008-31.008-75.008 31.008T86.016 704z m0-297.984q0 44 31.008 75.008t75.008 31.008 75.008-31.008 31.008-75.008-31.008-76-75.008-32-75.008 32-31.008 76z"
+		p-id="1504" fill="#CB81DA"></path>
+</svg>