fix: boundary scan could not close and jtag scan failed

Merge branch 'master' of ssh://git.swordlost.top:222/SikongJueluo/FPGA_WebLab
2025-05-20 20:31:52 +08:00 · 2025-05-20 20:19:09 +08:00 · 2025-05-20 20:18:58 +08:00 · 2025-05-20 20:09:42 +08:00 · 2025-05-20 20:09:39 +08:00 · 2025-05-20 20:08:20 +08:00
35 changed files with 1167 additions and 1764 deletions
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,56 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    BaseBoard: typeof import('./src/components/equipments/BaseBoard.vue')['default']
-    Canvas: typeof import('./src/components/Canvas.vue')['default']
-    CollapsibleSection: typeof import('./src/components/CollapsibleSection.vue')['default']
-    ComponentSelector: typeof import('./src/components/LabCanvas/ComponentSelector.vue')['default']
-    DDR: typeof import('./src/components/equipments/DDR.vue')['default']
-    DDS: typeof import('./src/components/equipments/DDS.vue')['default']
-    DDSPropertyEditor: typeof import('./src/components/equipments/DDSPropertyEditor.vue')['default']
-    DiagramCanvas: typeof import('./src/components/LabCanvas/DiagramCanvas.vue')['default']
-    Dialog: typeof import('./src/components/Dialog.vue')['default']
-    ETH: typeof import('./src/components/equipments/ETH.vue')['default']
-    HDMI: typeof import('./src/components/equipments/HDMI.vue')['default']
-    LabCanvas: typeof import('./src/components/LabCanvasNew/LabCanvas.vue')['default']
-    LabCanvasNew: typeof import('./src/components/LabCanvas/LabCanvasNew.vue')['default']
-    LabComponentsDrawer: typeof import('./src/components/LabCanvasNew/LabComponentsDrawer.vue')['default']
-    LabComponentsDrawerNew: typeof import('./src/components/LabCanvas/LabComponentsDrawerNew.vue')['default']
-    LoginCard: typeof import('./src/components/LoginCard.vue')['default']
-    MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
-    MechanicalButton: typeof import('./src/components/equipments/MechanicalButton.vue')['default']
-    MotherBoard: typeof import('./src/components/equipments/MotherBoard.vue')['default']
-    MotherBoardCaps: typeof import('./src/components/equipments/MotherBoardCaps.vue')['default']
-    Navbar: typeof import('./src/components/Navbar.vue')['default']
-    PG2L100H_FBG676: typeof import('./src/components/equipments/PG2L100H_FBG676.vue')['default']
-    Pin: typeof import('./src/components/equipments/Pin.vue')['default']
-    PopButton: typeof import('./src/components/PopButton.vue')['default']
-    PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
-    PropertyPanel: typeof import('./src/components/PropertyPanel.vue')['default']
-    RekaSplitterGroup: typeof import('reka-ui')['SplitterGroup']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SD: typeof import('./src/components/equipments/SD.vue')['default']
-    SevenSegmentDisplay: typeof import('./src/components/equipments/SevenSegmentDisplay.vue')['default']
-    SFP: typeof import('./src/components/equipments/SFP.vue')['default']
-    Sidebar: typeof import('./src/components/Sidebar.vue')['default']
-    SMA: typeof import('./src/components/equipments/SMA.vue')['default']
-    SMT_LED: typeof import('./src/components/equipments/SMT_LED.vue')['default']
-    SplitterGroup: typeof import('reka-ui')['SplitterGroup']
-    SplitterPanel: typeof import('reka-ui')['SplitterPanel']
-    SplitterResizeHandle: typeof import('reka-ui')['SplitterResizeHandle']
-    Switch: typeof import('./src/components/equipments/Switch.vue')['default']
-    ThemeControlButton: typeof import('./src/components/ThemeControlButton.vue')['default']
-    ThemeControlToggle: typeof import('./src/components/ThemeControlToggle.vue')['default']
-    TutorialCarousel: typeof import('./src/components/TutorialCarousel.vue')['default']
-    UploadCard: typeof import('./src/components/UploadCard.vue')['default']
-    Wire: typeof import('./src/components/equipments/Wire.vue')['default']
-  }
-}
--- a/flake.lock
+++ b/flake.lock
@@ -2,12 +2,12 @@
  "nodes": {
    "nixpkgs": {
      "locked": {
-        "lastModified": 1748929857,
-        "narHash": "sha256-lcZQ8RhsmhsK8u7LIFsJhsLh/pzR9yZ8yqpTzyGdj+Q=",
-        "rev": "c2a03962b8e24e669fb37b7df10e7c79531ff1a4",
-        "revCount": 810143,
+        "lastModified": 1741246872,
+        "narHash": "sha256-Q6pMP4a9ed636qilcYX8XUguvKl/0/LGXhHcRI91p0U=",
+        "rev": "10069ef4cf863633f57238f179a0297de84bd8d3",
+        "revCount": 763342,
        "type": "tarball",
-        "url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.810143%2Brev-c2a03962b8e24e669fb37b7df10e7c79531ff1a4/01973914-8b42-7168-9ee2-4d6ea6946695/source.tar.gz"
+        "url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.763342%2Brev-10069ef4cf863633f57238f179a0297de84bd8d3/01956ed4-f66c-7a87-98e4-b7e58f4aa591/source.tar.gz"
      },
      "original": {
        "type": "tarball",
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,16 +10,14 @@
      "dependencies": {
        "@svgdotjs/svg.js": "^3.2.4",
        "@types/lodash": "^4.17.16",
-        "@vueuse/core": "^13.5.0",
        "async-mutex": "^0.5.0",
        "highlight.js": "^11.11.1",
        "lodash": "^4.17.21",
        "log-symbols": "^7.0.0",
-        "lucide-vue-next": "^0.525.0",
        "marked": "^12.0.0",
        "mathjs": "^14.4.0",
        "pinia": "^3.0.1",
-        "reka-ui": "^2.3.1",
+        "tinypool": "^1.0.2",
        "ts-log": "^2.2.7",
        "ts-results-es": "^5.0.1",
        "vue": "^3.5.13",
@@ -41,7 +39,6 @@
        "postcss": "^8.5.3",
        "tailwindcss": "^4.0.12",
        "typescript": "~5.7.3",
-        "unplugin-vue-components": "^28.8.0",
        "vite": "^6.1.0",
        "vite-plugin-vue-devtools": "^7.7.2",
        "vue-tsc": "^2.2.2"
@@ -963,86 +960,6 @@
        "node": ">=18"
      }
    },
-    "node_modules/@floating-ui/core": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz",
-      "integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.10"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz",
-      "integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.7.2",
-        "@floating-ui/utils": "^0.2.10"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
-      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
-      "license": "MIT"
-    },
-    "node_modules/@floating-ui/vue": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.7.tgz",
-      "integrity": "sha512-idmAtbAIigGXN2SI5gItiXYBYtNfDTP9yIiObxgu13dgtG7ARCHlNfnR29GxP4LI4o13oiwsJ8wVgghj1lNqcw==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.7.2",
-        "@floating-ui/utils": "^0.2.10",
-        "vue-demi": ">=0.13.0"
-      }
-    },
-    "node_modules/@floating-ui/vue/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/@internationalized/date": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.8.2.tgz",
-      "integrity": "sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@internationalized/number": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.3.tgz",
-      "integrity": "sha512-p+Zh1sb6EfrfVaS86jlHGQ9HA66fJhV9x5LiE5vCbZtXEHAuhcmUZUdZ4WrFpUBfNalr2OkAJI5AcKEQF+Lebw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.8",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
@@ -1435,15 +1352,6 @@
        "url": "https://github.com/sponsors/Fuzzyma"
      }
    },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
-      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
    "node_modules/@tailwindcss/node": {
      "version": "4.1.4",
      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.4.tgz",
@@ -1712,32 +1620,6 @@
        "tailwindcss": "4.1.4"
      }
    },
-    "node_modules/@tanstack/virtual-core": {
-      "version": "3.13.12",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
-      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/vue-virtual": {
-      "version": "3.13.12",
-      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.12.tgz",
-      "integrity": "sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==",
-      "license": "MIT",
-      "dependencies": {
-        "@tanstack/virtual-core": "3.13.12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "vue": "^2.7.0 || ^3.0.0"
-      }
-    },
    "node_modules/@tsconfig/node22": {
      "version": "22.0.1",
      "resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.1.tgz",
@@ -1768,12 +1650,6 @@
        "undici-types": "~6.21.0"
      }
    },
-    "node_modules/@types/web-bluetooth": {
-      "version": "0.0.21",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
-      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
-      "license": "MIT"
-    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "5.2.3",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz",
@@ -2114,69 +1990,6 @@
        }
      }
    },
-    "node_modules/@vueuse/core": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.5.0.tgz",
-      "integrity": "sha512-wV7z0eUpifKmvmN78UBZX8T7lMW53Nrk6JP5+6hbzrB9+cJ3jr//hUlhl9TZO/03bUkMK6gGkQpqOPWoabr72g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "13.5.0",
-        "@vueuse/shared": "13.5.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "vue": "^3.5.0"
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.5.0.tgz",
-      "integrity": "sha512-K7GrQIxJ/ANtucxIXbQlUHdB0TPA8c+q5i+zbrjxuhJCnJ9GtBg75sBSnvmLSxHKPg2Yo8w62PWksl9kwH0Q8g==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "vue": "^3.5.0"
-      }
-    },
-    "node_modules/@vueuse/metadata": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.5.0.tgz",
-      "integrity": "sha512-euhItU3b0SqXxSy8u1XHxUCdQ8M++bsRs+TYhOLDU/OykS7KvJnyIFfep0XM5WjIFry9uAPlVSjmVHiqeshmkw==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared": {
-      "version": "12.8.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-12.8.2.tgz",
-      "integrity": "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==",
-      "license": "MIT",
-      "dependencies": {
-        "vue": "^3.5.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
    "node_modules/alien-signals": {
      "version": "1.0.13",
      "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-1.0.13.tgz",
@@ -2197,45 +2010,6 @@
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/anymatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/aria-hidden": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
-      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/async-mutex": {
      "version": "0.5.0",
      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.5.0.tgz",
@@ -2290,19 +2064,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/birpc": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.3.0.tgz",
@@ -2313,28 +2074,15 @@
      }
    },
    "node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "balanced-match": "^1.0.0"
      }
    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/browserslist": {
      "version": "4.24.4",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
@@ -2405,31 +2153,6 @@
      ],
      "license": "CC-BY-4.0"
    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
    "node_modules/complex.js": {
      "version": "2.4.2",
      "resolved": "https://registry.npmjs.org/complex.js/-/complex.js-2.4.2.tgz",
@@ -2443,13 +2166,6 @@
        "url": "https://github.com/sponsors/rawify"
      }
    },
-    "node_modules/confbox": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
-      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -2534,9 +2250,9 @@
      "license": "MIT"
    },
    "node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -2600,12 +2316,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/defu": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
-      "license": "MIT"
-    },
    "node_modules/detect-libc": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -2749,13 +2459,6 @@
        "url": "https://github.com/sindresorhus/execa?sponsor=1"
      }
    },
-    "node_modules/exsolve": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
-      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/fdir": {
      "version": "6.4.4",
      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
@@ -2787,19 +2490,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2871,19 +2561,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
    "node_modules/globals": {
      "version": "11.12.0",
      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -2936,19 +2613,6 @@
        "node": ">=18.18.0"
      }
    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/is-docker": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -2965,29 +2629,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/is-inside-container": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -3007,16 +2648,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
    "node_modules/is-plain-obj": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -3411,24 +3042,6 @@
        "url": "https://opencollective.com/parcel"
      }
    },
-    "node_modules/local-pkg": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.1.tgz",
-      "integrity": "sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mlly": "^1.7.4",
-        "pkg-types": "^2.0.1",
-        "quansync": "^0.2.8"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -3461,15 +3074,6 @@
        "yallist": "^3.0.2"
      }
    },
-    "node_modules/lucide-vue-next": {
-      "version": "0.525.0",
-      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.525.0.tgz",
-      "integrity": "sha512-Xf8+x8B2DrnGDV/rxylS+KBp2FIe6ljwDn2JsGTZZvXIfhmm/q+nv8RuGO1OyoMjOVkkz7CqtUqJfwtFPRbB2w==",
-      "license": "ISC",
-      "peerDependencies": {
-        "vue": ">=3.0.1"
-      }
-    },
    "node_modules/magic-string": {
      "version": "0.30.17",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -3558,38 +3162,6 @@
      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
      "license": "MIT"
    },
-    "node_modules/mlly": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
-      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^8.14.0",
-        "pathe": "^2.0.1",
-        "pkg-types": "^1.3.0",
-        "ufo": "^1.5.4"
-      }
-    },
-    "node_modules/mlly/node_modules/confbox": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
-      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/mlly/node_modules/pkg-types": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
-      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "confbox": "^0.1.8",
-        "mlly": "^1.7.4",
-        "pathe": "^2.0.1"
-      }
-    },
    "node_modules/mrmime": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
@@ -3639,16 +3211,6 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/normalize-range": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -3739,12 +3301,6 @@
        "npm": ">=3.10.8"
      }
    },
-    "node_modules/ohash": {
-      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
-      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
-      "license": "MIT"
-    },
    "node_modules/open": {
      "version": "10.1.1",
      "resolved": "https://registry.npmjs.org/open/-/open-10.1.1.tgz",
@@ -3860,18 +3416,6 @@
        }
      }
    },
-    "node_modules/pkg-types": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.1.1.tgz",
-      "integrity": "sha512-eY0QFb6eSwc9+0d/5D2lFFUq+A3n3QNGSy/X2Nvp+6MfzGw2u6EbA7S80actgjY1lkvvI0pqB+a4hioMh443Ew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "confbox": "^0.2.2",
-        "exsolve": "^1.0.7",
-        "pathe": "^2.0.3"
-      }
-    },
    "node_modules/postcss": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@@ -3923,23 +3467,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/quansync": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.10.tgz",
-      "integrity": "sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/antfu"
-        },
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/sxzz"
-        }
-      ],
-      "license": "MIT"
-    },
    "node_modules/read-package-json-fast": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/read-package-json-fast/-/read-package-json-fast-4.0.0.tgz",
@@ -3954,77 +3481,6 @@
        "node": "^18.17.0 || >=20.5.0"
      }
    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/readdirp/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/reka-ui": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.3.1.tgz",
-      "integrity": "sha512-2SjGeybd7jvD8EQUkzjgg7GdOQdf4cTwdVMq/lDNTMqneUFNnryGO43dg8WaM/jaG9QpSCZBvstfBFWlDdb2Zg==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.6.13",
-        "@floating-ui/vue": "^1.1.6",
-        "@internationalized/date": "^3.5.0",
-        "@internationalized/number": "^3.5.0",
-        "@tanstack/vue-virtual": "^3.12.0",
-        "@vueuse/core": "^12.5.0",
-        "@vueuse/shared": "^12.5.0",
-        "aria-hidden": "^1.2.4",
-        "defu": "^6.1.4",
-        "ohash": "^2.0.11"
-      },
-      "peerDependencies": {
-        "vue": ">= 3.2.0"
-      }
-    },
-    "node_modules/reka-ui/node_modules/@vueuse/core": {
-      "version": "12.8.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-12.8.2.tgz",
-      "integrity": "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "12.8.2",
-        "@vueuse/shared": "12.8.2",
-        "vue": "^3.5.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/reka-ui/node_modules/@vueuse/metadata": {
-      "version": "12.8.2",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-12.8.2.tgz",
-      "integrity": "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
    "node_modules/rfdc": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
@@ -4231,9 +3687,9 @@
      "license": "MIT"
    },
    "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
+      "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -4247,17 +3703,13 @@
        "url": "https://github.com/sponsors/SuperchupuDev"
      }
    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+    "node_modules/tinypool": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.2.tgz",
+      "integrity": "sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==",
      "license": "MIT",
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
      "engines": {
-        "node": ">=8.0"
+        "node": "^18.0.0 || >=20.0.0"
      }
    },
    "node_modules/totalist": {
@@ -4311,13 +3763,6 @@
        "node": ">=14.17"
      }
    },
-    "node_modules/ufo": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
-      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/undici-types": {
      "version": "6.21.0",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
@@ -4348,74 +3793,6 @@
        "node": ">= 10.0.0"
      }
    },
-    "node_modules/unplugin": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.5.tgz",
-      "integrity": "sha512-RyWSb5AHmGtjjNQ6gIlA67sHOsWpsbWpwDokLwTcejVdOjEkJZh7QKu14J00gDDVSh8kGH4KYC/TNBceXFZhtw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^8.14.1",
-        "picomatch": "^4.0.2",
-        "webpack-virtual-modules": "^0.6.2"
-      },
-      "engines": {
-        "node": ">=18.12.0"
-      }
-    },
-    "node_modules/unplugin-utils": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.4.tgz",
-      "integrity": "sha512-8U/MtpkPkkk3Atewj1+RcKIjb5WBimZ/WSLhhR3w6SsIj8XJuKTacSP8g+2JhfSGw0Cb125Y+2zA/IzJZDVbhA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pathe": "^2.0.2",
-        "picomatch": "^4.0.2"
-      },
-      "engines": {
-        "node": ">=18.12.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sxzz"
-      }
-    },
-    "node_modules/unplugin-vue-components": {
-      "version": "28.8.0",
-      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-28.8.0.tgz",
-      "integrity": "sha512-2Q6ZongpoQzuXDK0ZsVzMoshH0MWZQ1pzVL538G7oIDKRTVzHjppBDS8aB99SADGHN3lpGU7frraCG6yWNoL5Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": "^3.6.0",
-        "debug": "^4.4.1",
-        "local-pkg": "^1.1.1",
-        "magic-string": "^0.30.17",
-        "mlly": "^1.7.4",
-        "tinyglobby": "^0.2.14",
-        "unplugin": "^2.3.5",
-        "unplugin-utils": "^0.2.4"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@babel/parser": "^7.15.8",
-        "@nuxt/kit": "^3.2.2 || ^4.0.0",
-        "vue": "2 || 3"
-      },
-      "peerDependenciesMeta": {
-        "@babel/parser": {
-          "optional": true
-        },
-        "@nuxt/kit": {
-          "optional": true
-        }
-      }
-    },
    "node_modules/update-browserslist-db": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -4676,13 +4053,6 @@
        "typescript": ">=5.0.0"
      }
    },
-    "node_modules/webpack-virtual-modules": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
-      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
-      "dev": true,
-      "license": "MIT"
-    },
    "node_modules/which": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -16,16 +16,14 @@
  "dependencies": {
    "@svgdotjs/svg.js": "^3.2.4",
    "@types/lodash": "^4.17.16",
-    "@vueuse/core": "^13.5.0",
    "async-mutex": "^0.5.0",
    "highlight.js": "^11.11.1",
    "lodash": "^4.17.21",
    "log-symbols": "^7.0.0",
-    "lucide-vue-next": "^0.525.0",
    "marked": "^12.0.0",
    "mathjs": "^14.4.0",
    "pinia": "^3.0.1",
-    "reka-ui": "^2.3.1",
+    "tinypool": "^1.0.2",
    "ts-log": "^2.2.7",
    "ts-results-es": "^5.0.1",
    "vue": "^3.5.13",
@@ -47,7 +45,6 @@
    "postcss": "^8.5.3",
    "tailwindcss": "^4.0.12",
    "typescript": "~5.7.3",
-    "unplugin-vue-components": "^28.8.0",
    "vite": "^6.1.0",
    "vite-plugin-vue-devtools": "^7.7.2",
    "vue-tsc": "^2.2.2"
--- a/server/Program.cs
+++ b/server/Program.cs
@@ -1,3 +1,5 @@
+using System.Net;
+using System.Net.Sockets;
 using Microsoft.AspNetCore.Http.Features;
 using Microsoft.Extensions.FileProviders;
 using Newtonsoft.Json;
--- a/server/src/Controllers/UDPController.cs
+++ b/server/src/Controllers/UDPController.cs
@@ -106,15 +106,15 @@ public class UDPController : ControllerBase
    }

    /// <summary>
-    /// 获取指定IP地址接受的数据列表
+    /// 获取指定IP地址接收的数据列表
    /// </summary>
    /// <param name="address">IP地址</param>
    [HttpGet("GetRecvDataArray")]
    [ProducesResponseType(typeof(List<UDPData>), StatusCodes.Status200OK)]
    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> GetRecvDataArray(string address)
+    public async ValueTask<IResult> GetRecvDataArray(string address, int taskID)
    {
-        var ret = await MsgBus.UDPServer.GetDataArrayAsync(address);
+        var ret = await MsgBus.UDPServer.GetDataArrayAsync(address, taskID);

        if (ret.HasValue)
        {
--- a/server/src/JtagClient.cs
+++ b/server/src/JtagClient.cs
@@ -422,7 +422,7 @@ public class Jtag
        if (!MsgBus.IsRunning)
            return new(new Exception("Message Bus not Working!"));

-        var retPack = await MsgBus.UDPServer.WaitForDataAsync(address, port);
+        var retPack = await MsgBus.UDPServer.WaitForDataAsync(address, 0, port);
        if (!retPack.IsSuccessful || !retPack.Value.IsSuccessful)
            return new(new Exception("Send address package failed"));

@@ -441,7 +441,7 @@ public class Jtag
        (UInt32 devAddr, UInt32 data, UInt32 result, UInt32 resultMask = 0xFF_FF_FF_FF, UInt32 delayMilliseconds = 0)
    {
        {
-            var ret = await UDPClientPool.WriteAddr(this.ep, devAddr, data, this.timeout);
+            var ret = await UDPClientPool.WriteAddr(this.ep, 0, devAddr, data, this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);
            if (!ret.Value) return new(new Exception("Write FIFO failed"));
        }
@@ -450,7 +450,7 @@ public class Jtag
        await Task.Delay(TimeSpan.FromMilliseconds(delayMilliseconds));

        {
-            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, JtagAddr.STATE, result, resultMask, this.timeout);
+            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, 0, JtagAddr.STATE, result, resultMask, this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);
            return ret.Value;
        }
@@ -460,7 +460,7 @@ public class Jtag
        (UInt32 devAddr, byte[] data, UInt32 result, UInt32 resultMask = 0xFF_FF_FF_FF, UInt32 delayMilliseconds = 0)
    {
        {
-            var ret = await UDPClientPool.WriteAddr(this.ep, devAddr, data, this.timeout);
+            var ret = await UDPClientPool.WriteAddr(this.ep, 0, devAddr, data, this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);
            if (!ret.Value) return new(new Exception("Write FIFO failed"));
        }
@@ -469,7 +469,7 @@ public class Jtag
        await Task.Delay(TimeSpan.FromMilliseconds(delayMilliseconds));

        {
-            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, JtagAddr.STATE, result, resultMask, this.timeout);
+            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, 0, JtagAddr.STATE, result, resultMask, this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);
            return ret.Value;
        }
@@ -627,9 +627,9 @@ public class Jtag
    public async ValueTask<Result<uint>> ReadIDCode()
    {
        // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);

-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");

        Result<bool> ret;

@@ -665,9 +665,9 @@ public class Jtag
    public async ValueTask<Result<uint>> ReadStatusReg()
    {
        // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);

-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");

        Result<bool> ret;

@@ -702,9 +702,9 @@ public class Jtag
    public async ValueTask<Result<bool>> DownloadBitstream(byte[] bitstream)
    {
        // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);

-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");

        Result<bool> ret;

@@ -786,9 +786,9 @@ public class Jtag
        logger.Debug($"Get boundar scan registers number: {portNum}");

        // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);

-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");

        Result<bool> ret;

@@ -853,9 +853,9 @@ public class Jtag
    public async ValueTask<Result<bool>> SetSpeed(UInt32 speed)
    {
        // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);

-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");

        var ret = await WriteFIFO(
            JtagAddr.SPEED_CTRL, (speed << 16) | speed,
--- a/server/src/Peripherals/DDSClient.cs
+++ b/server/src/Peripherals/DDSClient.cs
@@ -108,11 +108,11 @@ public class DDS
        if (waveNum < 0 || waveNum > 3) return new(new ArgumentException(
            $"Wave number should be 0 ~ 3 instead of {waveNum}", nameof(waveNum)));

-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 1);
        logger.Trace("Clear udp data finished");

        var ret = await UDPClientPool.WriteAddr(
-                this.ep, DDSAddr.Channel[channelNum].WaveSelect, (UInt32)waveNum, this.timeout);
+                this.ep, 1, DDSAddr.Channel[channelNum].WaveSelect, (UInt32)waveNum, this.timeout);
        if (!ret.IsSuccessful)
            return new(ret.Error);
        return ret.Value;
@@ -132,11 +132,11 @@ public class DDS
        if (waveNum < 0 || waveNum > 3) return new(new ArgumentException(
            $"Wave number should be 0 ~ 3 instead of {waveNum}", nameof(waveNum)));

-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 1);
        logger.Trace("Clear udp data finished");

        var ret = await UDPClientPool.WriteAddr(
-                this.ep, DDSAddr.Channel[channelNum].FreqCtrl[waveNum], step, this.timeout);
+                this.ep, 1, DDSAddr.Channel[channelNum].FreqCtrl[waveNum], step, this.timeout);
        if (!ret.IsSuccessful)
            return new(ret.Error);
        return ret.Value;
@@ -158,11 +158,11 @@ public class DDS
        if (phase < 0 || phase > 4096) return new(new ArgumentException(
            $"Phase should be 0 ~ 4096 instead of {phase}", nameof(phase)));

-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 1);
        logger.Trace("Clear udp data finished");

        var ret = await UDPClientPool.WriteAddr(
-                this.ep, DDSAddr.Channel[channelNum].PhaseCtrl[waveNum], (UInt32)phase, this.timeout);
+                this.ep, 1, DDSAddr.Channel[channelNum].PhaseCtrl[waveNum], (UInt32)phase, this.timeout);
        if (!ret.IsSuccessful)
            return new(ret.Error);
        return ret.Value;
--- a/server/src/Peripherals/MatrixKeyClient.cs
+++ b/server/src/Peripherals/MatrixKeyClient.cs
@@ -44,10 +44,10 @@ public class MatrixKey
    public async ValueTask<Result<bool>> EnableControl()
    {
        if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address);
+            await MsgBus.UDPServer.ClearUDPData(this.address, 1);
        else return new(new Exception("Message Bus not work!"));

-        var ret = await UDPClientPool.WriteAddr(this.ep, MatrixKeyAddr.KEY_ENABLE, 1, this.timeout);
+        var ret = await UDPClientPool.WriteAddr(this.ep, 1, MatrixKeyAddr.KEY_ENABLE, 1, this.timeout);
        if (!ret.IsSuccessful) return new(ret.Error);
        return ret.Value;
    }
@@ -59,10 +59,10 @@ public class MatrixKey
    public async ValueTask<Result<bool>> DisableControl()
    {
        if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address);
+            await MsgBus.UDPServer.ClearUDPData(this.address, 1);
        else return new(new Exception("Message Bus not work!"));

-        var ret = await UDPClientPool.WriteAddr(this.ep, MatrixKeyAddr.KEY_ENABLE, 0, this.timeout);
+        var ret = await UDPClientPool.WriteAddr(this.ep, 1, MatrixKeyAddr.KEY_ENABLE, 0, this.timeout);
        if (!ret.IsSuccessful) return new(ret.Error);
        return ret.Value;
    }
@@ -75,14 +75,14 @@ public class MatrixKey
    public async ValueTask<Result<bool>> ControlKey(BitArray keyStates)
    {
        if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address);
+            await MsgBus.UDPServer.ClearUDPData(this.address, 1);
        else return new(new Exception("Message Bus not work!"));

        if (keyStates.Length != 16) return new(new ArgumentException(
            $"The number of key should be 16 instead of {keyStates.Length}", nameof(keyStates)));

        var ret = await UDPClientPool.WriteAddr(
-            this.ep, MatrixKeyAddr.KEY_CTRL, Common.Number.BitsToNumber(keyStates).Value, this.timeout);
+            this.ep, 1, MatrixKeyAddr.KEY_CTRL, Common.Number.BitsToNumber(keyStates).Value, this.timeout);
        if (!ret.IsSuccessful) return new(ret.Error);
        return ret.Value;
    }
--- a/server/src/Peripherals/PowerClient.cs
+++ b/server/src/Peripherals/PowerClient.cs
@@ -45,10 +45,10 @@ public class Power
    public async ValueTask<Result<bool>> SetPowerOnOff(bool enable)
    {
        if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address);
+            await MsgBus.UDPServer.ClearUDPData(this.address, 1);
        else return new(new Exception("Message Bus not work!"));

-        var ret = await UDPClientPool.WriteAddr(this.ep, PowerAddr.PowerCtrl, Convert.ToUInt32(enable), this.timeout);
+        var ret = await UDPClientPool.WriteAddr(this.ep, 1, PowerAddr.PowerCtrl, Convert.ToUInt32(enable), this.timeout);
        if (!ret.IsSuccessful) return new(ret.Error);
        return ret.Value;
    }
--- a/server/src/RemoteUpdateClient.cs
+++ b/server/src/RemoteUpdateClient.cs
@@ -142,7 +142,7 @@ public class RemoteUpdater

        {
            var ret = await UDPClientPool.WriteAddr(
-                this.ep, RemoteUpdaterAddr.WriteCtrl,
+                this.ep, 0, RemoteUpdaterAddr.WriteCtrl,
                Convert.ToUInt32((writeSectorNum << 16) | (1 << 15) | Convert.ToInt32(flashAddr / 4096)), this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);
            if (!ret.Value) return new(new Exception("Enable write flash failed"));
@@ -150,7 +150,7 @@ public class RemoteUpdater

        {
            var ret = await UDPClientPool.ReadAddrWithWait(
-                this.ep, RemoteUpdaterAddr.WriteSign,
+                this.ep, 0, RemoteUpdaterAddr.WriteSign,
                0x00_00_00_01, 0x00_00_00_01, this.timeoutForWait);
            if (!ret.IsSuccessful) return new(ret.Error);
            if (!ret.Value) return new(new Exception(
@@ -158,14 +158,14 @@ public class RemoteUpdater
        }

        {
-            var ret = await UDPClientPool.WriteAddr(this.ep, RemoteUpdaterAddr.WriteFIFO, bytesData, this.timeout);
+            var ret = await UDPClientPool.WriteAddr(this.ep, 0, RemoteUpdaterAddr.WriteFIFO, bytesData, this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);
            if (!ret.Value) return new(new Exception("Send data to flash failed"));
        }

        {
            var ret = await UDPClientPool.ReadAddrWithWait(
-                this.ep, RemoteUpdaterAddr.WriteSign,
+                this.ep, 0, RemoteUpdaterAddr.WriteSign,
                0x00_00_01_00, 0x00_00_01_00, this.timeoutForWait);
            if (!ret.IsSuccessful) return new(ret.Error);
            return ret.Value;
@@ -314,14 +314,14 @@ public class RemoteUpdater
    private async ValueTask<Result<bool>> CheckBitstreamCRC(int bitstreamNum, int bitstreamLen, UInt32 checkSum)
    {
        {
-            var ret = await UDPClientPool.WriteAddr(this.ep, RemoteUpdaterAddr.ReadCtrl2, 0x00_00_00_00, this.timeout);
+            var ret = await UDPClientPool.WriteAddr(this.ep, 0, RemoteUpdaterAddr.ReadCtrl2, 0x00_00_00_00, this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);
            if (!ret.Value) return new(new Exception("Write read control 2 failed"));
        }

        {
            var ret = await UDPClientPool.WriteAddr(
-                this.ep, RemoteUpdaterAddr.ReadCtrl1,
+                this.ep, 0, RemoteUpdaterAddr.ReadCtrl1,
                Convert.ToUInt32((bitstreamLen << 16) | (1 << 15) | Convert.ToInt32(FlashAddr.Bitstream[bitstreamNum] / 4096)),
                this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);
@@ -330,7 +330,7 @@ public class RemoteUpdater

        {
            var ret = await UDPClientPool.ReadAddrWithWait(
-                this.ep, RemoteUpdaterAddr.ReadSign,
+                this.ep, 0, RemoteUpdaterAddr.ReadSign,
                0x00_00_01_00, 0x00_00_01_00, this.timeoutForWait);
            if (!ret.IsSuccessful) return new(ret.Error);
            if (!ret.Value) return new(new Exception(
@@ -338,7 +338,7 @@ public class RemoteUpdater
        }

        {
-            var ret = await UDPClientPool.ReadAddr(this.ep, RemoteUpdaterAddr.ReadCRC, this.timeout);
+            var ret = await UDPClientPool.ReadAddr(this.ep, 0, RemoteUpdaterAddr.ReadCRC, this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);

            var bytes = ret.Value.Options.Data;
@@ -368,7 +368,7 @@ public class RemoteUpdater
                $"Bitsteam num should be 0 ~ 3 for HotRest, but given {bitstreamNum}", nameof(bitstreamNum)));

        var ret = await UDPClientPool.WriteAddr(
-            this.ep, RemoteUpdaterAddr.HotResetCtrl,
+            this.ep, 0, RemoteUpdaterAddr.HotResetCtrl,
            ((FlashAddr.Bitstream[bitstreamNum] << 8) | 1), this.timeout);
        if (!ret.IsSuccessful) return new(ret.Error);
        return ret.Value;
@@ -381,7 +381,7 @@ public class RemoteUpdater
    /// <returns>[TODO:return]</returns>
    public async ValueTask<Result<bool>> HotResetBitstream(int bitstreamNum)
    {
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
        logger.Trace("Clear udp data finished");

        {
@@ -411,7 +411,7 @@ public class RemoteUpdater
        byte[]? bitstream2,
        byte[]? bitstream3)
    {
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
        logger.Trace("Clear udp data finished");

        for (int bitstreamNum = 0; bitstreamNum < 4; bitstreamNum++)
@@ -462,7 +462,7 @@ public class RemoteUpdater
                $"The length of data should be divided by 4096, bug given {bytesData.Length}", nameof(bytesData)));
        var bitstreamBlockNum = bytesData.Length / (4 * 1024);

-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
        logger.Trace("Clear udp data finished");

        {
@@ -538,11 +538,11 @@ public class RemoteUpdater
    /// <returns>[TODO:return]</returns>
    public async ValueTask<Result<UInt32>> GetVersion()
    {
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
        logger.Trace("Clear udp data finished");

        {
-            var ret = await UDPClientPool.ReadAddr(this.ep, RemoteUpdaterAddr.Version, this.timeout);
+            var ret = await UDPClientPool.ReadAddr(this.ep, 0, RemoteUpdaterAddr.Version, this.timeout);
            if (!ret.IsSuccessful) return new(ret.Error);

            var retData = ret.Value.Options.Data;
--- a/server/src/UdpClientPool.cs
+++ b/server/src/UdpClientPool.cs
@@ -184,14 +184,14 @@ public class UDPClientPool
    /// <param name="timeout">[TODO:parameter]</param>
    /// <returns>[TODO:return]</returns>
    public static async ValueTask<Result<RecvDataPackage>> ReadAddr(
-            IPEndPoint endPoint, uint devAddr, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, uint devAddr, int timeout = 1000)
    {
        var ret = false;
        var opts = new SendAddrPackOptions();

        opts.BurstType = BurstType.FixedBurst;
        opts.BurstLength = 0;
-        opts.CommandID = 0;
+        opts.CommandID = Convert.ToByte(taskID);
        opts.Address = devAddr;

        // Read Jtag State Register
@@ -204,7 +204,7 @@ public class UDPClientPool
            return new(new Exception("Message Bus not Working!"));

        var retPack = await MsgBus.UDPServer.WaitForDataAsync(
-                endPoint.Address.ToString(), endPoint.Port, timeout);
+                endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
        if (!retPack.IsSuccessful) return new(retPack.Error);
        else if (!retPack.Value.IsSuccessful)
            return new(new Exception("Send address package failed"));
@@ -226,11 +226,11 @@ public class UDPClientPool
    /// <param name="timeout">[TODO:parameter]</param>
    /// <returns>[TODO:return]</returns>
    public static async ValueTask<Result<bool>> ReadAddr(
-            IPEndPoint endPoint, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
    {
        var address = endPoint.Address.ToString();

-        var ret = await ReadAddr(endPoint, devAddr, timeout);
+        var ret = await ReadAddr(endPoint, taskID, devAddr, timeout);
        if (!ret.IsSuccessful) return new(ret.Error);
        if (!ret.Value.IsSuccessful)
            return new(new Exception($"Read device {address} address {devAddr} failed"));
@@ -264,7 +264,7 @@ public class UDPClientPool
    /// <param name="timeout">[TODO:parameter]</param>
    /// <returns>[TODO:return]</returns>
    public static async ValueTask<Result<bool>> ReadAddrWithWait(
-            IPEndPoint endPoint, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
    {
        var address = endPoint.Address.ToString();

@@ -277,7 +277,7 @@ public class UDPClientPool

            try
            {
-                var ret = await ReadAddr(endPoint, devAddr, Convert.ToInt32(timeleft.TotalMilliseconds));
+                var ret = await ReadAddr(endPoint, taskID, devAddr, Convert.ToInt32(timeleft.TotalMilliseconds));
                if (!ret.IsSuccessful) return new(ret.Error);
                if (!ret.Value.IsSuccessful)
                    return new(new Exception($"Read device {address} address {devAddr} failed"));
@@ -312,14 +312,14 @@ public class UDPClientPool
    /// <param name="timeout">[TODO:parameter]</param>
    /// <returns>[TODO:return]</returns>
    public static async ValueTask<Result<bool>> WriteAddr(
-            IPEndPoint endPoint, UInt32 devAddr, UInt32 data, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, UInt32 devAddr, UInt32 data, int timeout = 1000)
    {
        var ret = false;
        var opts = new SendAddrPackOptions();

        opts.BurstType = BurstType.FixedBurst;
        opts.BurstLength = 0;
-        opts.CommandID = 0;
+        opts.CommandID = Convert.ToByte(taskID);
        opts.Address = devAddr;

        // Write Jtag State Register
@@ -337,7 +337,7 @@ public class UDPClientPool

        // Wait for Write Ack
        var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(
-                endPoint.Address.ToString(), endPoint.Port, timeout);
+                endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
        if (!udpWriteAck.IsSuccessful) return new(udpWriteAck.Error);

        return udpWriteAck.Value.IsSuccessful;
@@ -351,14 +351,15 @@ public class UDPClientPool
    /// <param name="dataArray">[TODO:parameter]</param>
    /// <param name="timeout">[TODO:parameter]</param>
    /// <returns>[TODO:return]</returns>
-    public static async ValueTask<Result<bool>> WriteAddr(IPEndPoint endPoint, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
+    public static async ValueTask<Result<bool>> WriteAddr(
+        IPEndPoint endPoint, int taskID, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
    {
        var ret = false;
        var opts = new SendAddrPackOptions();


        opts.BurstType = BurstType.FixedBurst;
-        opts.CommandID = 0;
+        opts.CommandID = Convert.ToByte(taskID);
        opts.Address = devAddr;

        // Check Msg Bus
@@ -389,7 +390,7 @@ public class UDPClientPool
            if (!ret) return new(new Exception("Send data package failed!"));

            // Wait for Write Ack
-            var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(endPoint.Address.ToString(), endPoint.Port, timeout);
+            var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
            if (!udpWriteAck.IsSuccessful) return new(udpWriteAck.Error);

            if (!udpWriteAck.Value.IsSuccessful)
--- a/server/src/UdpServer.cs
+++ b/server/src/UdpServer.cs
@@ -22,6 +22,11 @@ public class UDPData
    /// 发送来源的端口号
    /// </summary>
    public required int Port { get; set; }
+
+    /// <summary>
+    /// 任务ID
+    /// </summary>
+    public required int TaskID { get; set; }
    /// <summary>
    /// 接受到的数据
    /// </summary>
@@ -44,6 +49,7 @@ public class UDPData
            DateTime = this.DateTime,
            Address = new string(this.Address),
            Port = this.Port,
+            TaskID = this.TaskID,
            Data = cloneData,
            HasRead = this.HasRead
        };
@@ -119,6 +125,7 @@ public class UDPServer
    /// 异步寻找目标发送的内容
    /// </summary>
    /// <param name="ipAddr"> 目标IP地址 </param>
+    /// <param name="taskID">[TODO:parameter]</param>
    /// <param name="timeout">超时时间</param>
    /// <param name="cycle">延迟时间</param>
    /// <param name="callerName">调用函数名称</param>
@@ -129,13 +136,14 @@ public class UDPServer
    /// Optional 存在时，为最先收到的数据
    /// </returns>
    public async ValueTask<Optional<UDPData>> FindDataAsync(
-         string ipAddr, int timeout = 1000, int cycle = 0,
+         string ipAddr, int taskID, int timeout = 1000, int cycle = 0,
         [CallerMemberName] string callerName = "",
-         [CallerLineNumber] int callerLineNum = 0)
+         [CallerLineNumber] int callerLineNum = 0
+         )
    {
        UDPData? data = null;

-        logger.Debug($"Caller \"{callerName}|{callerLineNum}\": Try to find {ipAddr} UDP Data");
+        logger.Debug($"Caller \"{callerName}|{callerLineNum}\": Try to find {ipAddr}-{taskID} UDP Data");

        var startTime = DateTime.Now;
        var isTimeout = false;
@@ -149,8 +157,8 @@ public class UDPServer
            timeleft = TimeSpan.FromMilliseconds(timeout) - elapsed;
            using (await udpData.AcquireWriteLockAsync(timeleft))
            {
-                if (udpData.ContainsKey(ipAddr) &&
-                    udpData.TryGetValue(ipAddr, out var dataQueue) &&
+                if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
+                    udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
                    dataQueue.Count > 0)
                {
                    data = dataQueue.Dequeue();
@@ -177,10 +185,11 @@ public class UDPServer
    /// 获取还未被读取的数据列表
    /// </summary>
    /// <param name="ipAddr">IP地址</param>
+    /// <param name="taskID">[TODO:parameter]</param>
    /// <param name="timeout">超时时间</param>
    /// <param name="cycle">延迟时间</param>
    /// <returns>数据列表</returns>
-    public async ValueTask<Optional<List<UDPData>>> GetDataArrayAsync(string ipAddr, int timeout = 1000, int cycle = 0)
+    public async ValueTask<Optional<List<UDPData>>> GetDataArrayAsync(string ipAddr, int taskID, int timeout = 1000, int cycle = 0)
    {
        List<UDPData>? data = null;

@@ -196,8 +205,8 @@ public class UDPServer
            timeleft = TimeSpan.FromMilliseconds(timeout) - elapsed;
            using (await udpData.AcquireReadLockAsync(timeleft))
            {
-                if (udpData.ContainsKey(ipAddr) &&
-                    udpData.TryGetValue(ipAddr, out var dataQueue) &&
+                if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
+                    udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
                    dataQueue.Count > 0)
                {
                    data = dataQueue.ToList();
@@ -226,9 +235,9 @@ public class UDPServer
    /// <param name="timeout">超时时间范围</param>
    /// <returns>接收响应包</returns>
    public async ValueTask<Result<WebProtocol.RecvRespPackage>> WaitForAckAsync
-        (string address, int port = -1, int timeout = 1000)
+        (string address, int taskID, int port = -1, int timeout = 1000)
    {
-        var data = await FindDataAsync(address, timeout);
+        var data = await FindDataAsync(address, taskID, timeout);
        if (!data.HasValue)
            return new(new Exception("Get None even after time out!"));

@@ -251,9 +260,9 @@ public class UDPServer
    /// <param name="timeout">超时时间范围</param>
    /// <returns>接收数据包</returns>
    public async ValueTask<Result<RecvDataPackage>> WaitForDataAsync
-        (string address, int port = -1, int timeout = 1000)
+        (string address, int taskID, int port = -1, int timeout = 1000)
    {
-        var data = await FindDataAsync(address, timeout);
+        var data = await FindDataAsync(address, taskID, timeout);
        if (!data.HasValue)
            return new(new Exception("Get None even after time out!"));

@@ -284,7 +293,7 @@ public class UDPServer


        // Handle Package
-        var udpData = RecordUDPData(bytes, remoteEP);
+        var udpData = RecordUDPData(bytes, remoteEP, Convert.ToInt32(bytes[1]));
        PrintData(udpData);

    BEGIN_RECEIVE:
@@ -308,7 +317,7 @@ public class UDPServer
        else { return false; }
    }

-    private UDPData RecordUDPData(byte[] bytes, IPEndPoint remoteEP)
+    private UDPData RecordUDPData(byte[] bytes, IPEndPoint remoteEP, int taskID)
    {
        var remoteAddress = remoteEP.Address.ToString();
        var remotePort = remoteEP.Port;
@@ -316,6 +325,7 @@ public class UDPServer
        {
            Address = remoteAddress,
            Port = remotePort,
+            TaskID = taskID,
            Data = bytes,
            DateTime = DateTime.Now,
            HasRead = false,
@@ -324,7 +334,8 @@ public class UDPServer
        using (udpData.AcquireWriteLock())
        {
            // Record UDP Receive Data
-            if (udpData.ContainsKey(remoteAddress) && udpData.TryGetValue(remoteAddress, out var dataQueue))
+            if (udpData.ContainsKey($"{remoteAddress}-{taskID}") &&
+                udpData.TryGetValue($"{remoteAddress}-{taskID}", out var dataQueue))
            {
                dataQueue.Enqueue(data);
                logger.Trace("Receive data from old client");
@@ -333,7 +344,7 @@ public class UDPServer
            {
                var queue = new Queue<UDPData>();
                queue.Enqueue(data);
-                udpData.Add(remoteAddress, queue);
+                udpData.Add($"{remoteAddress}-{taskID}", queue);
                logger.Trace("Receive data from new client");
            }
        }
@@ -410,12 +421,12 @@ public class UDPServer
    /// </summary>
    /// <param name="ipAddr">IP地址</param>
    /// <returns>无</returns>
-    public async Task ClearUDPData(string ipAddr)
+    public async Task ClearUDPData(string ipAddr, int taskID)
    {
        using (await udpData.AcquireWriteLockAsync())
        {
-            if (udpData.ContainsKey(ipAddr) &&
-                udpData.TryGetValue(ipAddr, out var dataQueue) &&
+            if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
+                udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
                dataQueue.Count > 0)
            {
                dataQueue.Clear();
--- a/src/utils/Common.ts
+++ b/src/utils/Common.ts
@@ -1,4 +1,4 @@
-import { type FileParameter } from "@/APIClient";
+import { type FileParameter } from "./APIClient";
 import { isNull, isUndefined } from "lodash";

 export namespace Common {
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,10 +0,0 @@
-@import "tailwindcss";
-
-@plugin "daisyui" {
-  themes: winter --default, night --prefersdark;
-}
-
-@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
-@custom-variant light (&:where([data-theme=winter], [data-theme=winter] *));
-
-
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,4 +1,11 @@
-@import "base.css";
+@import "tailwindcss";
+
+@plugin "daisyui" {
+  themes: winter --default, night --prefersdark;
+}
+
+@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
+@custom-variant light (&:where([data-theme=winter], [data-theme=winter] *));

 /* 禁止所有图像和SVG选择 */
 img, svg {
--- a/src/components/LabCanvas/ComponentSelector.vue
+++ b/src/components/LabCanvas/ComponentSelector.vue
@@ -181,8 +181,8 @@

 <script setup lang="ts">
 import { ref, computed, shallowRef, onMounted } from "vue";
-import motherboardSvg from "@/components/equipments/svg/motherboard.svg";
-import buttonSvg from "@/components//equipments/svg/button.svg";
+import motherboardSvg from "../components/equipments/svg/motherboard.svg";
+import buttonSvg from "../components//equipments/svg/button.svg";

 // Props 定义
 interface Props {
@@ -258,7 +258,7 @@ async function loadComponentModule(type: string) {
  if (!componentModules.value[type]) {
    try {
      // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
-      const module = await import(`@/components/equipments/${type}.vue`);
+      const module = await import(`../components/equipments/${type}.vue`);

      // 将模块添加到缓存中
      componentModules.value = {
--- a/src/components/LabCanvas/DiagramCanvas.vue
+++ b/src/components/LabCanvas/DiagramCanvas.vue
@@ -83,15 +83,14 @@
          }
        ">
        <!-- 动态渲染组件 -->
-        <component :is="componentManager.getComponentDefinition(component.type)" 
-          v-if="componentManager.componentModules.value[component.type] && componentManager.getComponentDefinition(component.type)"
-          v-bind="componentManager.prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
+        <component :is="getComponentDefinition(component.type)" v-if="props.componentModules[component.type]"
+          v-bind="prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
            (value: string) =>
              updateComponentProp(component.id, 'bindKey', value)
          " @pin-click="
            (pinInfo: any) =>
              handlePinClick(component.id, pinInfo, pinInfo.originalEvent)
-          " :ref="(el: any) => componentManager.setComponentRef(component.id, el)" />
+          " :ref="(el: any) => setComponentRef(component.id, el)" />

        <!-- Fallback if component module not loaded yet -->
        <div v-else
@@ -99,7 +98,6 @@
          <div class="flex flex-col items-center">
            <div class="loading loading-spinner loading-xs mb-1"></div>
            <span>Loading {{ component.type }}...</span>
-            <small class="mt-1 text-xs">{{ componentManager.componentModules.value[component.type] ? 'Module loaded but invalid' : 'Module not found' }}</small>
          </div>
        </div>
      </div>
@@ -138,8 +136,7 @@ import {
  watch,
  provide,
 } from "vue";
-import { useEventListener } from "@vueuse/core";
-import WireComponent from "@/components/equipments/Wire.vue";
+import WireComponent from "./equipments/Wire.vue";

 // 导入 diagram 管理器
 import {
@@ -152,17 +149,16 @@ import {
  parseConnectionPin,
  connectionArrayToWireItem,
  validateDiagramData,
-} from "./composable/diagramManager";
+} from "./diagramManager";

 import type {
  DiagramData,
  DiagramPart,
  ConnectionArray,
  WireItem,
-} from "./composable/diagramManager";
+} from "./diagramManager";

-import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
-import { useComponentManager } from "./composable/componentManager";
+import { CanvasCurrentSelectedComponentID } from "./InjectKeys";

 // 右键菜单处理函数
 function handleContextMenu(e: MouseEvent) {
@@ -172,23 +168,22 @@ function handleContextMenu(e: MouseEvent) {
 // 定义组件发出的事件
 const emit = defineEmits([
  "diagram-updated",
+  "component-selected",
+  "component-moved",
+  "component-delete",
  "toggle-doc-panel",
  "wire-created",
  "wire-deleted",
+  "load-component-module",
  "open-components",
 ]);

 // 定义组件接受的属性
 const props = defineProps<{
+  componentModules: Record<string, any>;
  showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
 }>();

-// 获取componentManager实例
-const componentManager = useComponentManager();
-if (!componentManager) {
-  throw new Error("DiagramCanvas must be used within a component manager provider");
-}
-
 // --- 画布状态 ---
 const canvasContainer = ref<HTMLElement | null>(null);
 const canvas = ref<HTMLElement | null>(null);
@@ -214,8 +209,8 @@ const diagramData = ref<DiagramData>({
  connections: [],
 });

-// 组件引用跟踪（保留以便向后兼容）
-const componentRefs = computed(() => componentManager?.componentRefs.value || {});
+// 组件引用跟踪
+const componentRefs = ref<Record<string, any>>({});

 // 计算属性：从 diagramData 中提取组件列表，并按index属性排序
 const diagramParts = computed<DiagramPart[]>(() => {
@@ -259,7 +254,7 @@ const wireItems = computed<WireItem[]>(() => {
      startPos.y = startComp.y;

      // 尝试获取引脚精确位置（如果有实现）
-      const startCompRef = componentManager?.getComponentRef(startCompId);
+      const startCompRef = componentRefs.value?.[startCompId];
      if (startCompRef && typeof startCompRef.getPinPosition === "function") {
        try {
          const pinPos = startCompRef.getPinPosition(startPinId);
@@ -285,7 +280,7 @@ const wireItems = computed<WireItem[]>(() => {
      endPos.y = endComp.y;

      // 尝试获取引脚精确位置
-      const endCompRef = componentManager?.getComponentRef(endCompId);
+      const endCompRef = componentRefs.value?.[endCompId];
      if (endCompRef && typeof endCompRef.getPinPosition === "function") {
        try {
          const pinPos = endCompRef.getPinPosition(endPinId);
@@ -330,37 +325,6 @@ const toastTimers: number[] = [];
 // 文件选择引用
 const fileInput = ref<HTMLInputElement | null>(null);

-// VueUse事件监听器状态管理
-const isDragEventActive = ref(false);
-const isComponentDragEventActive = ref(false);
-const isWireCreationEventActive = ref(false);
-
-// 使用VueUse设置事件监听器
-// 画布拖拽事件
-useEventListener(document, 'mousemove', (e: MouseEvent) => {
-  if (isDragEventActive.value) {
-    onDrag(e);
-  }
-  if (isComponentDragEventActive.value) {
-    onComponentDrag(e);
-  }
-  if (isWireCreationEventActive.value) {
-    onCreatingWireMouseMove(e);
-  }
-});
-
-useEventListener(document, 'mouseup', () => {
-  if (isDragEventActive.value) {
-    stopDrag();
-  }
-  if (isComponentDragEventActive.value) {
-    stopComponentDrag();
-  }
-});
-
-// 键盘事件
-useEventListener(window, 'keydown', handleKeyDown);
-
 // --- 缩放功能 ---
 const MIN_SCALE = 0.2;
 const MAX_SCALE = 10.0;
@@ -398,16 +362,73 @@ function onZoom(e: WheelEvent) {
  scale.value = newScale;
 }

+// --- 动态组件渲染 ---
+const getComponentDefinition = (type: string) => {
+  const module = props.componentModules[type];
+  if (!module) return null;
+
+  // 确保我们返回一个有效的组件定义
+  if (module.default) {
+    return module.default;
+  } else if (module.__esModule && module.default) {
+    // 有时 Vue 的动态导入会将默认导出包装在 __esModule 属性下
+    return module.default;
+  } else {
+    console.warn(
+      `Module for ${type} found but default export is missing`,
+      module,
+    );
+    return null;
+  }
+};
+
+function prepareComponentProps(
+  attrs: Record<string, any>,
+  componentId?: string,
+): Record<string, any> {
+  const result: Record<string, any> = { ...attrs };
+  if (componentId) {
+    result.componentId = componentId;
+  }
+  // console.log(`组件属性 ID: ${componentId}`, result);
+  return result;
+}
+
+// 设置组件引用
+function setComponentRef(componentId: string, el: any) {
+  if (componentRefs.value) {
+    if (el) {
+      componentRefs.value[componentId] = el;
+    } else {
+      delete componentRefs.value[componentId];
+    }
+  }
+}
+
+// 重置组件引用缓存
+function resetComponentRefs() {
+  componentRefs.value = {};
+}
+
+// 加载组件模块
+async function loadComponentModule(type: string) {
+  if (!props.componentModules[type]) {
+    try {
+      // 通知父组件需要加载此类型的组件
+      emit("load-component-module", type);
+    } catch (error) {
+      console.error(`Failed to request component module ${type}:`, error);
+    }
+  }
+}
+
 // --- 画布交互逻辑 ---
 function handleCanvasMouseDown(e: MouseEvent) {
  // 如果是直接点击画布（而不是元器件），清除选中状态
  if (e.target === canvasContainer.value || e.target === canvas.value) {
    if (selectedComponentId.value !== null) {
      selectedComponentId.value = null;
-      // 直接通过componentManager选择组件
-      if (componentManager) {
-        componentManager.selectComponent(null);
-      }
+      emit("component-selected", null);
    }
  }

@@ -429,7 +450,8 @@ function startDrag(e: MouseEvent) {
  dragStart.x = e.clientX - position.x;
  dragStart.y = e.clientY - position.y;

-  isDragEventActive.value = true;
+  document.addEventListener("mousemove", onDrag);
+  document.addEventListener("mouseup", stopDrag);
  e.preventDefault();
 }

@@ -444,7 +466,8 @@ function startMiddleDrag(e: MouseEvent) {
  dragStart.x = e.clientX - position.x;
  dragStart.y = e.clientY - position.y;

-  isDragEventActive.value = true;
+  document.addEventListener("mousemove", onDrag);
+  document.addEventListener("mouseup", stopDrag);
  e.preventDefault();
 }

@@ -460,7 +483,9 @@ function onDrag(e: MouseEvent) {
 function stopDrag() {
  isDragging.value = false;
  isMiddleDragging.value = false;
-  isDragEventActive.value = false;
+
+  document.removeEventListener("mousemove", onDrag);
+  document.removeEventListener("mouseup", stopDrag);
 }

 // --- 组件拖拽交互 ---
@@ -480,10 +505,7 @@ function startComponentDrag(e: MouseEvent, component: DiagramPart) {
  // 仍然选中组件，无论是否为交互元素
  if (selectedComponentId.value !== component.id) {
    selectedComponentId.value = component.id;
-    // 直接通过componentManager选择组件
-    if (componentManager) {
-      componentManager.selectComponent(component);
-    }
+    emit("component-selected", component);
  }

  // 如果组件锁定位置或是交互元素，则不启动拖拽
@@ -515,8 +537,9 @@ function startComponentDrag(e: MouseEvent, component: DiagramPart) {
  componentDragOffset.x = mouseX_canvas - component.x;
  componentDragOffset.y = mouseY_canvas - component.y;

-  // 激活组件拖拽事件监听
-  isComponentDragEventActive.value = true;
+  // 添加全局监听器
+  document.addEventListener("mousemove", onComponentDrag);
+  document.addEventListener("mouseup", stopComponentDrag);
 }

 // 拖拽组件过程
@@ -545,6 +568,14 @@ function onComponentDrag(e: MouseEvent) {
  );
  if (!draggedComponent) return;

+  // 更新组件位置
+  // diagramData.value = updatePartPosition(
+  //   diagramData.value,
+  //   draggingComponentId.value,
+  //   Math.round(newX),
+  //   Math.round(newY),
+  // );
+
  // 如果组件属于组，移动组内所有其他组件
  if (draggedComponent.group) {
    const deltaX = Math.round(newX) - draggedComponent.x;
@@ -569,14 +600,12 @@ function onComponentDrag(e: MouseEvent) {
    }
  }

-  // 通知componentManager位置已更新
-  if (componentManager) {
-    componentManager.moveComponent({
-      id: draggingComponentId.value,
-      x: Math.round(newX),
-      y: Math.round(newY),
-    });
-  }
+  // 通知父组件位置已更新
+  emit("component-moved", {
+    id: draggingComponentId.value,
+    x: Math.round(newX),
+    y: Math.round(newY),
+  });

  // 通知图表已更新
  emit("diagram-updated", diagramData.value);
@@ -586,7 +615,7 @@ function onComponentDrag(e: MouseEvent) {
 function stopComponentDrag() {
  // 如果有组件被拖拽，保存当前状态
  if (draggingComponentId.value) {
-    console.log(`组件拖拽结束: ${draggingComponentId.value}`);
+    // console.log(`组件拖拽结束: ${draggingComponentId.value}`);

    // 保存图表数据
    saveDiagramData(diagramData.value);
@@ -595,7 +624,8 @@ function stopComponentDrag() {
    draggingComponentId.value = null;
  }

-  isComponentDragEventActive.value = false;
+  document.removeEventListener("mousemove", onComponentDrag);
+  document.removeEventListener("mouseup", stopComponentDrag);
 }

 // 更新组件属性
@@ -604,20 +634,14 @@ function updateComponentProp(
  propName: string,
  value: any,
 ) {
-  // 直接通过componentManager更新组件属性
-  if (componentManager) {
-    componentManager.updateComponentProp(componentId, propName, value);
-  } else {
-    // 后备方案：直接更新数据
-    diagramData.value = updatePartAttribute(
-      diagramData.value,
-      componentId,
-      propName,
-      value,
-    );
-    emit("diagram-updated", diagramData.value);
-    saveDiagramData(diagramData.value);
-  }
+  diagramData.value = updatePartAttribute(
+    diagramData.value,
+    componentId,
+    propName,
+    value,
+  );
+  emit("diagram-updated", diagramData.value);
+  saveDiagramData(diagramData.value);
 }

 // --- 连线操作 ---
@@ -647,6 +671,8 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
  console.log("鼠标位置:", mousePosition);

  if (!isCreatingWire.value) {
+    // 开始创建连线
+    const containerRect = canvasContainer.value.getBoundingClientRect();
    // 获取初始位置信息
    let pinPosition = pinInfo.position;
    console.log("Pin信息:", pinInfo);
@@ -655,7 +681,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
    console.log("引脚ID:", pinId);

    // 从组件引用中获取组件实例
-    const component = componentManager?.getComponentRef(componentId);
+    const component = componentRefs.value[componentId];
    console.log("组件引用:", component);

    // 查找组件部件对象以获取组件位置
@@ -716,7 +742,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
      pinId,
      pinInfo.constraint,
    );
-    isWireCreationEventActive.value = true;
+    document.addEventListener("mousemove", onCreatingWireMouseMove);
  } else {
    // 完成连线创建
    if (
@@ -731,7 +757,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
    // 获取终点引脚位置
    let endPosition = { x: 0, y: 0 };
    const componentPart = diagramParts.value.find((p) => p.id === componentId);
-    const endComponent = componentManager?.getComponentRef(componentId);
+    const endComponent = componentRefs.value[componentId];

    console.log("终点组件部件:", componentPart);
    console.log("终点组件引用:", endComponent);
@@ -793,7 +819,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {

    // 重置连线创建状态
    resetWireCreation();
-    isWireCreationEventActive.value = false;
+    document.removeEventListener("mousemove", onCreatingWireMouseMove);
  }
 }

@@ -826,7 +852,7 @@ function resetWireCreation() {
 // 取消连线创建
 function cancelWireCreation() {
  resetWireCreation();
-  isWireCreationEventActive.value = false;
+  document.removeEventListener("mousemove", onCreatingWireMouseMove);
 }

 // 连线创建过程中的鼠标移动
@@ -845,10 +871,7 @@ function deleteWire(wireIndex: number) {
 // 删除组件
 function deleteComponent(componentId: string) {
  diagramData.value = deletePart(diagramData.value, componentId);
-  // 直接通过componentManager删除组件
-  if (componentManager) {
-    componentManager.deleteComponent(componentId);
-  }
+  emit("component-delete", componentId);
  emit("diagram-updated", diagramData.value);
  saveDiagramData(diagramData.value);

@@ -998,23 +1021,8 @@ function showToast(

 // --- 生命周期钩子 ---
 onMounted(async () => {
-  // 设置componentManager的画布引用
-  if (componentManager) {
-    // 创建一个包含必要方法的画布API对象
-    const canvasAPI = {
-      getDiagramData: () => diagramData.value,
-      updateDiagramDataDirectly: (data: DiagramData) => {
-        diagramData.value = data;
-        saveDiagramData(data);
-        emit("diagram-updated", data);
-      },
-      getCanvasPosition: () => ({ x: position.x, y: position.y }),
-      getScale: () => scale.value,
-      $el: canvasContainer.value,
-      showToast
-    };
-    componentManager.setCanvasRef(canvasAPI);
-  }
+  // 重置组件引用
+  resetComponentRefs();

  // 加载图表数据
  try {
@@ -1031,10 +1039,12 @@ onMounted(async () => {
      Array.from(componentTypes),
    );

-    // 直接通过componentManager预加载组件模块
-    if (componentManager) {
-      await componentManager.preloadComponentModules(Array.from(componentTypes));
-    }
+    // 通知父组件需要加载组件模块
+    componentTypes.forEach((type) => {
+      if (!props.componentModules[type]) {
+        emit("load-component-module", type);
+      }
+    });
  } catch (error) {
    console.error("加载图表数据失败:", error);
  }
@@ -1044,6 +1054,9 @@ onMounted(async () => {
    position.x = canvasContainer.value.clientWidth / 2 - 5000; // 画布宽度的一半
    position.y = canvasContainer.value.clientHeight / 2 - 5000; // 画布高度的一半
  }
+
+  // 添加键盘事件监听器
+  window.addEventListener("keydown", handleKeyDown);
 });

 // 处理键盘事件
@@ -1062,15 +1075,32 @@ function handleKeyDown(e: KeyboardEvent) {
 }

 onUnmounted(() => {
+  // 清理事件监听器
+  document.removeEventListener("mousemove", onComponentDrag);
+  document.removeEventListener("mouseup", stopComponentDrag);
+  document.removeEventListener("mousemove", onDrag);
+  document.removeEventListener("mouseup", stopDrag);
+  document.removeEventListener("mousemove", onCreatingWireMouseMove);
+
+  // 移除键盘事件监听器
+  window.removeEventListener("keydown", handleKeyDown);
+
  // 清除所有toast定时器
  toastTimers.forEach((timerId) => clearTimeout(timerId));
-  
-  // 重置事件状态
-  isDragEventActive.value = false;
-  isComponentDragEventActive.value = false;
-  isWireCreationEventActive.value = false;
 });

+// --- 对外API ---
+// 获取当前图表数据
+function getDiagramData() {
+  return diagramData.value;
+}
+
+// 设置图表数据
+function setDiagramData(data: DiagramData) {
+  diagramData.value = data;
+  emit("diagram-updated", data);
+}
+
 // 无加载动画的数据更新方法
 function updateDiagramDataDirectly(data: DiagramData) {
  // 检查组件是否仍然挂载
@@ -1085,7 +1115,7 @@ function updateDiagramDataDirectly(data: DiagramData) {
  emit("diagram-updated", data);
 }

-// 暴露方法给父组件 - 简化版本，主要用于数据访问
+// 暴露方法给父组件
 defineExpose({
  // 基本数据操作
  getDiagramData: () => diagramData.value,
@@ -1124,6 +1154,23 @@ defineExpose({
    });
  },

+  // 文件操作
+  openDiagramFileSelector,
+  exportDiagram,
+
+  // 组件操作
+  getSelectedComponent: () => {
+    if (!selectedComponentId.value) return null;
+    return (
+      diagramParts.value.find((p) => p.id === selectedComponentId.value) || null
+    );
+  },
+  deleteSelectedComponent: () => {
+    if (selectedComponentId.value) {
+      deleteComponent(selectedComponentId.value);
+    }
+  },
+
  // 画布状态
  getCanvasPosition: () => ({ x: position.x, y: position.y }),
  getScale: () => scale.value,
@@ -1140,6 +1187,15 @@ watch(
  },
  { deep: true },
 );
+
+// 当组件模块加载完成后，确保组件引用正确建立
+watch(
+  () => props.componentModules,
+  () => {
+    // 这里不需要特别处理，Vue 会自动通过 setComponentRef 函数更新引用
+  },
+  { deep: true },
+);
 </script>

 <style scoped>
--- a/src/components/LabCanvas/composable/componentManager.ts
+++ b/src/components/LabCanvas/composable/componentManager.ts
@@ -1,646 +0,0 @@
-import { ref, shallowRef, computed } from "vue";
-import { createInjectionState } from "@vueuse/core";
-import type { DiagramData, DiagramPart } from "./diagramManager";
-import type { PropertyConfig } from "@/components/equipments/componentConfig";
-import {
-  generatePropertyConfigs,
-  generatePropsFromDefault,
-  generatePropsFromAttrs,
-} from "@/components/equipments/componentConfig";
-
-// 存储动态导入的组件模块
-interface ComponentModule {
-  default: any;
-  getDefaultProps?: () => Record<string, any>;
-  config?: {
-    props?: Array<PropertyConfig>;
-  };
-  __esModule?: boolean; // 添加 __esModule 属性
-}
-
-// 定义组件管理器的状态和方法
-const [useProvideComponentManager, useComponentManager] = createInjectionState(
-  () => {
-    // --- 状态管理 ---
-    const componentModules = ref<Record<string, ComponentModule>>({});
-    const selectedComponentId = ref<string | null>(null);
-    const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(null);
-    const diagramCanvas = ref<any>(null);
-    const componentRefs = ref<Record<string, any>>({});
-
-    // 计算当前选中的组件数据
-    const selectedComponentData = computed(() => {
-      if (!diagramCanvas.value || !selectedComponentId.value) return null;
-      
-      const canvasInstance = diagramCanvas.value as any;
-      if (canvasInstance && canvasInstance.getDiagramData) {
-        const data = canvasInstance.getDiagramData();
-        return data.parts.find((p: DiagramPart) => p.id === selectedComponentId.value) || null;
-      }
-      return null;
-    });
-
-    // --- 组件模块管理 ---
-    
-    /**
-     * 动态加载组件模块
-     */
-    async function loadComponentModule(type: string) {
-      console.log(`尝试加载组件模块: ${type}`);
-      console.log(`当前已加载的模块:`, Object.keys(componentModules.value));
-      
-      if (!componentModules.value[type]) {
-        try {
-          console.log(`正在动态导入模块: @/components/equipments/${type}.vue`);
-          const module = await import(`@/components/equipments/${type}.vue`);
-          console.log(`成功导入模块 ${type}:`, module);
-          
-          // 直接设置新的对象引用以触发响应性
-          componentModules.value = {
-            ...componentModules.value,
-            [type]: module,
-          };
-          console.log(`模块 ${type} 已添加到 componentModules`);
-          console.log(`更新后的模块列表:`, Object.keys(componentModules.value));
-        } catch (error) {
-          console.error(`Failed to load component module ${type}:`, error);
-          return null;
-        }
-      } else {
-        console.log(`模块 ${type} 已经存在`);
-      }
-      return componentModules.value[type];
-    }
-
-    /**
-     * 预加载所有组件模块
-     */
-    async function preloadComponentModules(componentTypes: string[]) {
-      console.log("Preloading component modules:", componentTypes);
-      await Promise.all(
-        componentTypes.map((type) => loadComponentModule(type))
-      );
-      console.log("All component modules loaded");
-    }
-
-    // --- 组件操作 ---
-
-    /**
-     * 添加新组件到画布
-     */
-    async function addComponent(componentData: {
-      type: string;
-      name: string;
-      props: Record<string, any>;
-    }) {
-      console.log("=== 开始添加组件 ===");
-      console.log("组件数据:", componentData);
-      
-      const canvasInstance = diagramCanvas.value as any;
-      if (!canvasInstance) {
-        console.error("没有可用的画布实例");
-        return;
-      }
-
-      // 预加载组件模块，确保组件能正常渲染
-      console.log(`预加载组件模块: ${componentData.type}`);
-      const componentModule = await loadComponentModule(componentData.type);
-      if (!componentModule) {
-        console.error(`无法加载组件模块: ${componentData.type}`);
-        return;
-      }
-      console.log(`组件模块加载成功: ${componentData.type}`, componentModule);
-
-      // 获取画布位置信息
-      let position = { x: 100, y: 100 };
-      let scale = 1;
-
-      try {
-        if (canvasInstance.getCanvasPosition && canvasInstance.getScale) {
-          position = canvasInstance.getCanvasPosition();
-          scale = canvasInstance.getScale();
-
-          const canvasContainer = canvasInstance.$el as HTMLElement;
-          if (canvasContainer) {
-            const viewportWidth = canvasContainer.clientWidth;
-            const viewportHeight = canvasContainer.clientHeight;
-
-            position.x = (viewportWidth / 2 - position.x) / scale;
-            position.y = (viewportHeight / 2 - position.y) / scale;
-          }
-        }
-      } catch (error) {
-        console.error("获取画布位置时出错:", error);
-      }
-
-      // 添加随机偏移
-      const offsetX = Math.floor(Math.random() * 100) - 50;
-      const offsetY = Math.floor(Math.random() * 100) - 50;
-
-      // 获取组件能力页面
-      let capsPage = null;
-      if (
-        componentModule &&
-        componentModule.default &&
-        typeof componentModule.default.getCapabilities === "function"
-      ) {
-        try {
-          capsPage = componentModule.default.getCapabilities();
-          console.log(`获取到${componentData.type}组件的能力页面`);
-        } catch (error) {
-          console.error(`获取${componentData.type}组件能力页面失败:`, error);
-        }
-      }
-
-      // 创建新组件
-      const newComponent: DiagramPart = {
-        id: `component-${Date.now()}`,
-        type: componentData.type,
-        x: Math.round(position.x + offsetX),
-        y: Math.round(position.y + offsetY),
-        attrs: componentData.props,
-        rotate: 0,
-        group: "",
-        positionlock: false,
-        hidepins: true,
-        isOn: true,
-        index: 0,
-      };
-
-      // 通过画布实例添加组件
-      if (canvasInstance.getDiagramData && canvasInstance.updateDiagramDataDirectly) {
-        const currentData = canvasInstance.getDiagramData();
-        currentData.parts.push(newComponent);
-        
-        // 使用 updateDiagramDataDirectly 避免触发加载状态
-        canvasInstance.updateDiagramDataDirectly(currentData);
-        
-        console.log("组件添加完成:", newComponent);
-        
-        // 等待Vue的下一个tick，确保组件模块已经更新
-        await new Promise(resolve => setTimeout(resolve, 50));
-      }
-    }
-
-    /**
-     * 添加模板到画布
-     */
-    async function addTemplate(templateData: {
-      id: string;
-      name: string;
-      template: any;
-    }) {
-      console.log("添加模板:", templateData);
-      
-      const canvasInstance = diagramCanvas.value as any;
-      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
-        console.error("没有可用的画布实例添加模板");
-        return;
-      }
-
-      const currentData = canvasInstance.getDiagramData();
-      console.log("=== 当前图表组件数量:", currentData.parts.length);
-
-      // 生成唯一ID前缀
-      const idPrefix = `template-${Date.now()}-`;
-
-      if (templateData.template?.parts) {
-        // 获取视口中心位置
-        let viewportCenter = { x: 300, y: 200 };
-        try {
-          if (canvasInstance.getCanvasPosition && canvasInstance.getScale) {
-            const position = canvasInstance.getCanvasPosition();
-            const scale = canvasInstance.getScale();
-            const canvasContainer = canvasInstance.$el as HTMLElement;
-            
-            if (canvasContainer) {
-              const viewportWidth = canvasContainer.clientWidth;
-              const viewportHeight = canvasContainer.clientHeight;
-              viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
-              viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
-            }
-          }
-        } catch (error) {
-          console.error("获取视口中心位置时出错:", error);
-        }
-
-        const mainPart = templateData.template.parts[0];
-
-        // 创建新组件
-        const newParts = await Promise.all(
-          templateData.template.parts.map(async (part: any) => {
-            const newPart = JSON.parse(JSON.stringify(part));
-            newPart.id = `${idPrefix}${part.id}`;
-
-            // 加载组件模块并获取能力页面
-            try {
-              const componentModule = await loadComponentModule(part.type);
-              if (
-                componentModule?.default &&
-                typeof componentModule.default.getCapabilities === "function"
-              ) {
-                newPart.capsPage = componentModule.default.getCapabilities();
-                console.log(`加载模板组件${part.type}组件的能力页面成功`);
-              }
-            } catch (error) {
-              console.error(`加载模板组件${part.type}的能力页面失败:`, error);
-            }
-
-            // 计算新位置
-            if (typeof newPart.x === "number" && typeof newPart.y === "number") {
-              const relativeX = part.x - mainPart.x;
-              const relativeY = part.y - mainPart.y;
-              newPart.x = viewportCenter.x + relativeX;
-              newPart.y = viewportCenter.y + relativeY;
-            }
-
-            return newPart;
-          })
-        );
-
-        currentData.parts.push(...newParts);
-
-        // 处理连接关系
-        if (templateData.template.connections) {
-          const idMap: Record<string, string> = {};
-          templateData.template.parts.forEach((part: any) => {
-            idMap[part.id] = `${idPrefix}${part.id}`;
-          });
-
-          const newConnections = templateData.template.connections.map((conn: any) => {
-            if (Array.isArray(conn)) {
-              const [from, to, type, path] = conn;
-              const fromParts = from.split(":");
-              const toParts = to.split(":");
-
-              if (fromParts.length === 2 && toParts.length === 2) {
-                const fromComponentId = fromParts[0];
-                const fromPinId = fromParts[1];
-                const toComponentId = toParts[0];
-                const toPinId = toParts[1];
-
-                const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
-                const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
-
-                return [newFrom, newTo, type, path];
-              }
-            }
-            return conn;
-          });
-
-          currentData.connections.push(...newConnections);
-        }
-
-        canvasInstance.updateDiagramDataDirectly(currentData);
-        console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
-
-        return { success: true, message: `已添加 ${templateData.name} 模板` };
-      } else {
-        console.error("模板格式错误，缺少parts数组");
-        return { success: false, message: "模板格式错误" };
-      }
-    }
-
-    /**
-     * 删除组件
-     */
-    function deleteComponent(componentId: string) {
-      const canvasInstance = diagramCanvas.value as any;
-      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
-        return;
-      }
-
-      const currentData = canvasInstance.getDiagramData();
-      const component = currentData.parts.find((p: DiagramPart) => p.id === componentId);
-      
-      if (!component) return;
-
-      const componentsToDelete: string[] = [componentId];
-
-      // 处理组件组
-      if (component.group && component.group !== "") {
-        const groupMembers = currentData.parts.filter(
-          (p: DiagramPart) => p.group === component.group && p.id !== componentId
-        );
-        componentsToDelete.push(...groupMembers.map((p: DiagramPart) => p.id));
-        console.log(`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`);
-      }
-
-      // 删除组件
-      currentData.parts = currentData.parts.filter(
-        (p: DiagramPart) => !componentsToDelete.includes(p.id)
-      );
-
-      // 删除相关连接
-      currentData.connections = currentData.connections.filter((connection: any) => {
-        for (const id of componentsToDelete) {
-          if (connection[0].startsWith(`${id}:`) || connection[1].startsWith(`${id}:`)) {
-            return false;
-          }
-        }
-        return true;
-      });
-
-      // 清除选中状态
-      if (selectedComponentId.value && componentsToDelete.includes(selectedComponentId.value)) {
-        selectedComponentId.value = null;
-        selectedComponentConfig.value = null;
-      }
-
-      canvasInstance.updateDiagramDataDirectly(currentData);
-    }
-
-    /**
-     * 选中组件
-     */
-    async function selectComponent(componentData: DiagramPart | null) {
-      selectedComponentId.value = componentData ? componentData.id : null;
-      selectedComponentConfig.value = null;
-
-      if (componentData) {
-        const moduleRef = await loadComponentModule(componentData.type);
-
-        if (moduleRef) {
-          try {
-            const propConfigs: PropertyConfig[] = [];
-            const addedProps = new Set<string>();
-
-            // 从 getDefaultProps 方法获取默认配置
-            if (typeof moduleRef.getDefaultProps === "function") {
-              const defaultProps = moduleRef.getDefaultProps();
-              const defaultPropConfigs = generatePropsFromDefault(defaultProps);
-              defaultPropConfigs.forEach((config) => {
-                propConfigs.push(config);
-                addedProps.add(config.name);
-              });
-            }
-
-            // 添加组件直接属性
-            const directPropConfigs = generatePropertyConfigs(componentData);
-            const newDirectProps = directPropConfigs.filter(
-              (config) => !addedProps.has(config.name)
-            );
-            propConfigs.push(...newDirectProps);
-
-            // 添加 attrs 中的属性
-            if (componentData.attrs) {
-              const attrPropConfigs = generatePropsFromAttrs(componentData.attrs);
-              attrPropConfigs.forEach((attrConfig) => {
-                const existingIndex = propConfigs.findIndex(
-                  (p) => p.name === attrConfig.name
-                );
-                if (existingIndex >= 0) {
-                  propConfigs[existingIndex] = attrConfig;
-                } else {
-                  propConfigs.push(attrConfig);
-                }
-              });
-            }
-
-            selectedComponentConfig.value = { props: propConfigs };
-            console.log(`Built config for ${componentData.type}:`, selectedComponentConfig.value);
-          } catch (error) {
-            console.error(`Error building config for ${componentData.type}:`, error);
-            selectedComponentConfig.value = { props: [] };
-          }
-        } else {
-          console.warn(`Module for component ${componentData.type} not found.`);
-          selectedComponentConfig.value = { props: [] };
-        }
-      }
-    }
-
-    /**
-     * 更新组件属性
-     */
-    function updateComponentProp(componentId: string, propName: string, value: any) {
-      const canvasInstance = diagramCanvas.value as any;
-      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
-        console.error("没有可用的画布实例进行属性更新");
-        return;
-      }
-
-      // 检查值格式
-      if (value !== null && typeof value === "object" && "value" in value) {
-        value = value.value;
-      }
-
-      const currentData = canvasInstance.getDiagramData();
-      const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
-
-      if (part) {
-        if (propName in part) {
-          (part as any)[propName] = value;
-        } else {
-          if (!part.attrs) {
-            part.attrs = {};
-          }
-          part.attrs[propName] = value;
-        }
-
-        canvasInstance.updateDiagramDataDirectly(currentData);
-        console.log(`更新组件${componentId}的属性${propName}为:`, value, typeof value);
-      }
-    }
-
-    /**
-     * 更新组件直接属性
-     */
-    function updateComponentDirectProp(componentId: string, propName: string, value: any) {
-      const canvasInstance = diagramCanvas.value as any;
-      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
-        console.error("没有可用的画布实例进行属性更新");
-        return;
-      }
-
-      const currentData = canvasInstance.getDiagramData();
-      const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
-
-      if (part) {
-        (part as any)[propName] = value;
-        canvasInstance.updateDiagramDataDirectly(currentData);
-        console.log(`更新组件${componentId}的直接属性${propName}为:`, value, typeof value);
-      }
-    }
-
-    /**
-     * 移动组件
-     */
-    function moveComponent(moveData: { id: string; x: number; y: number }) {
-      const canvasInstance = diagramCanvas.value as any;
-      if (!canvasInstance?.getDiagramData || !canvasInstance?.updateDiagramDataDirectly) {
-        return;
-      }
-
-      const currentData = canvasInstance.getDiagramData();
-      const part = currentData.parts.find((p: DiagramPart) => p.id === moveData.id);
-      if (part) {
-        part.x = moveData.x;
-        part.y = moveData.y;
-        canvasInstance.updateDiagramDataDirectly(currentData);
-      }
-    }
-
-    /**
-     * 设置画布实例引用
-     */
-    function setCanvasRef(canvasRef: any) {
-      diagramCanvas.value = canvasRef;
-    }
-
-    /**
-     * 设置组件DOM引用
-     */
-    function setComponentRef(componentId: string, el: any) {
-      if (el) {
-        componentRefs.value[componentId] = el;
-      } else {
-        delete componentRefs.value[componentId];
-      }
-    }
-
-    /**
-     * 获取组件DOM引用
-     */
-    function getComponentRef(componentId: string) {
-      return componentRefs.value[componentId];
-    }
-
-    /**
-     * 获取当前图表数据
-     */
-    function getDiagramData() {
-      const canvasInstance = diagramCanvas.value;
-      if (canvasInstance && canvasInstance.getDiagramData) {
-        return canvasInstance.getDiagramData();
-      }
-      return { parts: [], connections: [], version: 1, author: "admin", editor: "me" };
-    }
-
-    /**
-     * 更新图表数据
-     */
-    function updateDiagramData(data: any) {
-      const canvasInstance = diagramCanvas.value;
-      if (canvasInstance && canvasInstance.updateDiagramDataDirectly) {
-        canvasInstance.updateDiagramDataDirectly(data);
-      }
-    }
-
-    /**
-     * 获取画布位置和缩放信息
-     */
-    function getCanvasInfo() {
-      const canvasInstance = diagramCanvas.value;
-      if (!canvasInstance) return { position: { x: 0, y: 0 }, scale: 1 };
-      
-      const position = canvasInstance.getCanvasPosition ? canvasInstance.getCanvasPosition() : { x: 0, y: 0 };
-      const scale = canvasInstance.getScale ? canvasInstance.getScale() : 1;
-      
-      return { position, scale };
-    }
-
-    /**
-     * 显示通知
-     */
-    function showToast(message: string, type: "success" | "error" | "info" = "info") {
-      const canvasInstance = diagramCanvas.value;
-      if (canvasInstance && canvasInstance.showToast) {
-        canvasInstance.showToast(message, type);
-      }
-    }
-
-    /**
-     * 获取组件定义
-     */
-    function getComponentDefinition(type: string) {
-      const module = componentModules.value[type];
-      
-      if (!module) {
-        console.warn(`No module found for component type: ${type}`);
-        // 尝试异步加载组件模块
-        loadComponentModule(type);
-        return null;
-      }
-
-      // 确保我们返回一个有效的组件定义
-      if (module.default) {
-        return module.default;
-      } else if (module.__esModule && module.default) {
-        // 有时 Vue 的动态导入会将默认导出包装在 __esModule 属性下
-        return module.default;
-      } else {
-        console.warn(
-          `Module for ${type} found but default export is missing`,
-          module,
-        );
-        return null;
-      }
-    }
-
-    /**
-     * 准备组件属性
-     */
-    function prepareComponentProps(
-      attrs: Record<string, any>,
-      componentId?: string,
-    ): Record<string, any> {
-      const result: Record<string, any> = { ...attrs };
-      if (componentId) {
-        result.componentId = componentId;
-      }
-      return result;
-    }
-
-    /**
-     * 初始化组件管理器
-     */
-    async function initialize() {
-      const canvasInstance = diagramCanvas.value as any;
-      if (canvasInstance?.getDiagramData) {
-        const diagramData = canvasInstance.getDiagramData();
-        
-        // 收集所有组件类型
-        const componentTypes = new Set<string>();
-        diagramData.parts.forEach((part: DiagramPart) => {
-          componentTypes.add(part.type);
-        });
-
-        // 预加载组件模块
-        await preloadComponentModules(Array.from(componentTypes));
-      }
-    }
-
-    return {
-      // 状态
-      componentModules,
-      selectedComponentId,
-      selectedComponentData,
-      selectedComponentConfig,
-      componentRefs,
-      
-      // 方法
-      loadComponentModule,
-      preloadComponentModules,
-      addComponent,
-      addTemplate,
-      deleteComponent,
-      selectComponent,
-      updateComponentProp,
-      updateComponentDirectProp,
-      moveComponent,
-      setCanvasRef,
-      setComponentRef,
-      getComponentRef,
-      getDiagramData,
-      updateDiagramData,
-      getCanvasInfo,
-      showToast,
-      getComponentDefinition,
-      prepareComponentProps,
-      initialize,
-    };
-  }
-);
-
-export { useProvideComponentManager, useComponentManager };
--- a/src/components/LabCanvas/index.ts
+++ b/src/components/LabCanvas/index.ts
@@ -1,8 +0,0 @@
-// 导出组件管理器服务
-export { useProvideComponentManager, useComponentManager } from './composable/componentManager';
-
-// 导出图表管理器
-export type { DiagramData, DiagramPart } from './composable/diagramManager';
-
-// 导出连线管理器
-export type { WireItem } from './composable/wireManager';
--- a/src/components/PropertyEditor.vue
+++ b/src/components/PropertyEditor.vue
@@ -128,7 +128,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import CollapsibleSection from "./CollapsibleSection.vue";
-import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager";
+import { type DiagramPart } from "@/components/diagramManager";
 import {
  type PropertyConfig,
  getPropValue,
--- a/src/components/PropertyPanel.vue
+++ b/src/components/PropertyPanel.vue
@@ -68,7 +68,7 @@

 <script setup lang="ts">
 // 导入所需的类型和组件
-import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager"; // 图表部件类型定义
+import { type DiagramPart } from "@/components/diagramManager"; // 图表部件类型定义
 import { type PropertyConfig } from "@/components/equipments/componentConfig"; // 属性配置类型定义
 import CollapsibleSection from "./CollapsibleSection.vue"; // 可折叠区域组件
 import PropertyEditor from "./PropertyEditor.vue"; // 属性编辑器组件
--- a/src/components/LabCanvas/composable/diagramManager.ts
+++ b/src/components/LabCanvas/composable/diagramManager.ts
--- a/src/components/equipments/DDSPropertyEditor.vue
+++ b/src/components/equipments/DDSPropertyEditor.vue
@@ -385,6 +385,7 @@ const currentWaveformPath = computed(() => {
 function selectWaveform(index: number) {
  currentWaveformIndex.value = index;
  updateModelValue();
+  applyOutputWave();
 }

 async function applyOutputWave() {
@@ -408,7 +409,7 @@ async function applyOutputWave() {
        eqps.boardPort,
        0,
        currentWaveformIndex.value,
-        toInteger(frequency.value * Math.pow(2, 32 - 20)),
+        toInteger((frequency.value * Math.pow(2, 32 - 20)) / 10),
      );
      if (!ret) {
        dialog.error("应用失败");
@@ -424,7 +425,7 @@ async function applyOutputWave() {
        toInteger((phase.value * 4096) / 360),
      );
      if (ret) {
-        dialog.info("应用成功");
+        // dialog.info("应用成功");
      } else {
        dialog.error("应用失败");
      }
@@ -455,6 +456,7 @@ function increaseFrequency() {
  frequency.value = parseFloat(frequency.value.toFixed(1)); // 修复浮点数精度问题
  frequencyInput.value = formatFrequency(frequency.value);
  updateModelValue();
+  applyOutputWave();
 }

 function decreaseFrequency() {
@@ -475,6 +477,7 @@ function decreaseFrequency() {
  frequency.value = parseFloat(frequency.value.toFixed(1)); // 修复浮点数精度问题
  frequencyInput.value = formatFrequency(frequency.value);
  updateModelValue();
+  applyOutputWave();
 }

 function applyFrequencyInput() {
@@ -505,6 +508,7 @@ function increasePhase() {
  }
  phaseInput.value = phase.value.toString();
  updateModelValue();
+  applyOutputWave();
 }

 function decreasePhase() {
@@ -514,6 +518,7 @@ function decreasePhase() {
  }
  phaseInput.value = phase.value.toString();
  updateModelValue();
+  applyOutputWave();
 }

 function applyPhaseInput() {
--- a/src/components/equipments/MotherBoardCaps.vue
+++ b/src/components/equipments/MotherBoardCaps.vue
@@ -9,24 +9,40 @@
          IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0").toUpperCase() }}
        </p>
        <button class="btn btn-circle w-6 h-6" :onclick="getIDCode">
-          <svg class="icon opacity-70 fill-primary" viewBox="0 0 1024 1024" version="1.1"
-            xmlns="http://www.w3.org/2000/svg" p-id="4865" width="200" height="200">
+          <svg
+            class="icon opacity-70 fill-primary"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="4865"
+            width="200"
+            height="200"
+          >
            <path
              d="M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z"
-              p-id="4866"></path>
+              p-id="4866"
+            ></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="divider"></div>
-    <UploadCard class="bg-base-200" :upload-event="eqps.jtagUploadBitstream"
-      :download-event="eqps.jtagDownloadBitstream" :bitstream-file="eqps.jtagBitstream"
-      @update:bitstream-file="handleBitstreamChange">
+    <UploadCard
+      class="bg-base-200"
+      :upload-event="eqps.jtagUploadBitstream"
+      :download-event="eqps.jtagDownloadBitstream"
+      :bitstream-file="eqps.jtagBitstream"
+      @update:bitstream-file="handleBitstreamChange"
+    >
    </UploadCard>
    <div class="divider"></div>
    <div class="w-full">
      <legend class="fieldset-legend text-sm mb-0.3">Jtag运行频率</legend>
-      <select class="select w-full" @change="handleSelectJtagSpeed" :value="props.jtagFreq">
+      <select
+        class="select w-full"
+        @change="handleSelectJtagSpeed"
+        :value="props.jtagFreq"
+      >
        <option v-for="option in selectJtagSpeedOptions" :value="option.id">
          {{ option.text }}
        </option>
@@ -35,12 +51,23 @@
    <div class="flex flex-row items-center">
      <fieldset class="fieldset w-70">
        <legend class="fieldset-legend text-sm">边界扫描刷新率 / Hz</legend>
-        <input type="number" class="input validator" required placeholder="Type a number between 1 to 1000" min="1"
-          max="1000" v-model="jtagBoundaryScanFreq" title="Type a number between 1 to 1000" />
+        <input
+          type="number"
+          class="input validator"
+          required
+          placeholder="Type a number between 1 to 1000"
+          min="1"
+          max="1000"
+          v-model="jtagBoundaryScanFreq"
+          title="Type a number between 1 to 1000"
+        />
        <p class="validator-hint">输入一个1 ~ 1000的数</p>
      </fieldset>
-      <button class="btn btn-primary grow mx-4" :class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
-        :onclick="toggleJtagBoundaryScan">
+      <button
+        class="btn btn-primary grow mx-4"
+        :class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
+        :onclick="toggleJtagBoundaryScan"
+      >
        {{ eqps.enableJtagBoundaryScan ? "关闭边界扫描" : "启动边界扫描" }}
      </button>
    </div>
@@ -48,12 +75,21 @@
    <h1 class="font-bold text-center text-2xl">外设</h1>
    <div class="flex flex-row justify-around">
      <div class="flex flex-row">
-        <input type="checkbox" class="checkbox" :checked="eqps.enableMatrixKey"
-          @change="handleMatrixkeyCheckboxChange" />
+        <input
+          type="checkbox"
+          class="checkbox"
+          :checked="eqps.enableMatrixKey"
+          @change="handleMatrixkeyCheckboxChange"
+        />
        <p class="mx-2">启用矩阵键盘</p>
      </div>
      <div class="flex flex-row">
-        <input type="checkbox" class="checkbox" :checked="eqps.enablePower" @change="handlePowerCheckboxChange" />
+        <input
+          type="checkbox"
+          class="checkbox"
+          :checked="eqps.enablePower"
+          @change="handlePowerCheckboxChange"
+        />
        <p class="mx-2">启用电源</p>
      </div>
    </div>
@@ -65,7 +101,7 @@ import z from "zod";
 import UploadCard from "@/components/UploadCard.vue";
 import { useDialogStore } from "@/stores/dialog";
 import { useEquipments } from "@/stores/equipments";
-import { computed, ref, watchEffect, watchPostEffect } from "vue";
+import { computed, ref, watchEffect } from "vue";

 interface CapsProps {
  jtagAddr?: string;
@@ -137,11 +173,6 @@ async function handlePowerCheckboxChange(event: Event) {
 }

 async function toggleJtagBoundaryScan() {
-  if (eqps.jtagClientMutex.isLocked()) {
-    dialog.warn("Jtag正在被占用");
-    return;
-  }
-
  eqps.enableJtagBoundaryScan = !eqps.enableJtagBoundaryScan;
 }

--- a/src/components/equipments/SMT_LED.vue
+++ b/src/components/equipments/SMT_LED.vue
@@ -177,26 +177,26 @@ defineExpose({
  getPinPosition: (pinId: string) => {
    // 如果是自定义的引脚ID
    if (props.pins && props.pins.length > 0) {
-      console.log('SMT_LED查找Pin ID:', pinId);
-      console.log('SMT_LED组件尺寸:', props.size, '宽高:', width.value, 'x', height.value);
+      // console.log('SMT_LED查找Pin ID:', pinId);
+      // console.log('SMT_LED组件尺寸:', props.size, '宽高:', width.value, 'x', height.value);
      const customPin = props.pins.find(p => p.pinId === pinId);
-      console.log('找到的引脚配置:', customPin);
+      // console.log('找到的引脚配置:', customPin);
      
      if (customPin) {
        // 考虑组件尺寸的缩放
        const scaledX = customPin.x * props.size;
        const scaledY = customPin.y * props.size;
        
-        console.log('使用Pin缩放后的坐标:', scaledX, scaledY);
+        // console.log('使用Pin缩放后的坐标:', scaledX, scaledY);
        return {
          x: scaledX,
          y: scaledY
        };
      }
-      console.log('未找到匹配的引脚');
+      // console.log('未找到匹配的引脚');
      return null;
    }
-    console.log('没有引脚配置');
+    // console.log('没有引脚配置');
    return null;
  }
 });
--- a/src/components/equipments/componentConfig.ts
+++ b/src/components/equipments/componentConfig.ts
@@ -1,5 +1,5 @@
 // componentConfig.ts 提供通用的组件配置功能
-import type { DiagramPart } from '../LabCanvas/composable/diagramManager';
+import type { DiagramPart } from '../diagramManager';

 // 属性配置接口
 export interface PropertyConfig {
--- a/src/components/LabCanvas/composable/wireManager.ts
+++ b/src/components/LabCanvas/composable/wireManager.ts
@@ -83,3 +83,4 @@ export function setMousePosition(x: number, y: number) {
  mousePosition.y = y;
 }

+// 其它Wire相关操作可继续扩展...
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,10 +2,13 @@ import './assets/main.css'

 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import VueKonva from "vue-konva"

 import App from '@/App.vue'
 import router from './router'
+// import { Client } from './APIClient'

-const app = createApp(App).use(router).use(createPinia()).use(VueKonva).mount('#app')
+const app = createApp(App).use(router).use(createPinia()).mount('#app')
+
+// 初始化约束通信
+// initConstraintCommunication();

--- a/src/stores/equipments.ts
+++ b/src/stores/equipments.ts
@@ -1,7 +1,7 @@
 import { ref, reactive, watchPostEffect } from 'vue'
 import { defineStore } from 'pinia'
 import { isString, toNumber } from 'lodash';
-import { Common } from '@/utils/Common';
+import { Common } from '@/Common';
 import z from "zod"
 import { isNumber } from 'mathjs';
 import { JtagClient, MatrixKeyClient, PowerClient } from "@/APIClient";
--- a/src/utils/VueKonvaType.ts
+++ b/src/utils/VueKonvaType.ts
@@ -1,30 +0,0 @@
-import Konva from "konva";
-import type { VueElement } from "vue";
-
-interface VNode extends VueElement {
-  getNode(): Konva.Node
-}
-
-interface VLayer extends VueElement {
-  getNode(): Konva.Layer
-}
-
-interface VGroup extends VueElement {
-  getNode(): Konva.Group
-}
-
-interface VStage extends VueElement {
-  getNode(): Konva.Stage
-}
-
-interface VTransformer extends VueElement {
-  getNode(): Konva.Transformer
-}
-
-export type {
-  VNode,
-  VLayer,
-  VGroup,
-  VStage,
-  VTransformer,
-}
--- a/src/views/AdminView.vue
+++ b/src/views/AdminView.vue
@@ -115,7 +115,7 @@ import { isNull, isUndefined } from "lodash";
 import { ref } from "vue";
 import {  RemoteUpdateClient } from "@/APIClient";
 import { useDialogStore } from "@/stores/dialog";
-import { Common } from "@/utils/Common";
+import { Common } from "@/Common";

 const dialog = useDialogStore();

--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -1,37 +1,31 @@
 <template>
  <div class="h-screen flex flex-col overflow-hidden">
    <div class="flex flex-1 overflow-hidden relative">
-      <SplitterGroup id="splitter-group" direction="horizontal" class="w-full h-full">
-        <!-- 左侧图形化区域 -->
-        <SplitterPanel
-          id="splitter-group-panel-canvas"
-          :default-size="60"
-          :min-size="30"
-          class="relative bg-base-200 overflow-hidden h-full"
-        >
-          <DiagramCanvas ref="diagramCanvas" :showDocPanel="showDocPanel"
-            @diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
-            @toggle-doc-panel="toggleDocPanel" />
-        </SplitterPanel>
-        <!-- 拖拽分割线 -->
-        <SplitterResizeHandle id="splitter-group-resize-handle" class="w-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors" />
-        <!-- 右侧编辑区域 -->
-        <SplitterPanel
-          id="splitter-group-panel-properties"
-          :min-size="20"
-          class="bg-base-200 h-full overflow-hidden flex flex-col"
-        >
-          <div class="overflow-y-auto flex-1">
-            <!-- 使用条件渲染显示不同的面板 -->
-            <PropertyPanel v-show="!showDocPanel" :componentData="componentManager.selectedComponentData.value"
-              :componentConfig="componentManager.selectedComponentConfig.value" @updateProp="updateComponentProp"
-              @updateDirectProp="updateComponentDirectProp" />
-            <div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
-              <MarkdownRenderer :content="documentContent" />
-            </div>
+      <!-- 左侧图形化区域 -->
+      <div class="relative bg-base-200 overflow-hidden h-full" :style="{ width: leftPanelWidth + '%' }">
+        <DiagramCanvas ref="diagramCanvas" :componentModules="componentModules" :showDocPanel="showDocPanel"
+          @component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
+          @component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deleted="handleWireDeleted"
+          @diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
+          @load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
+      </div>
+
+      <!-- 拖拽分割线 -->
+      <div
+        class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
+        @mousedown="startResize"></div>
+      <!-- 右侧编辑区域 -->
+      <div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
+        <div class="overflow-y-auto flex-1">
+          <!-- 使用条件渲染显示不同的面板 -->
+          <PropertyPanel v-show="!showDocPanel" :componentData="selectedComponentData"
+            :componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
+            @updateDirectProp="updateComponentDirectProp" />
+          <div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
+            <MarkdownRenderer :content="documentContent" />
          </div>
-        </SplitterPanel>
-      </SplitterGroup>
+        </div>
+      </div>
    </div>
    <!-- 元器件选择组件 -->
    <ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
@@ -40,26 +34,29 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
-import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
-import DiagramCanvas from "@/components/LabCanvas/DiagramCanvas.vue";
-import ComponentSelector from "@/components/LabCanvas/ComponentSelector.vue";
+// 引入wokwi-elements和组件
+// import "@wokwi/elements"; // 不再需要全局引入 wokwi
+import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
+import DiagramCanvas from "@/components/DiagramCanvas.vue";
+import ComponentSelector from "@/components/ComponentSelector.vue";
 import PropertyPanel from "@/components/PropertyPanel.vue";
 import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
-import { useProvideComponentManager } from "@/components/LabCanvas";
-import type { DiagramData, DiagramPart } from "@/components/LabCanvas";
-
-// 获取路由参数
-import { useRoute } from "vue-router";
-const route = useRoute();
-
-// 提供组件管理服务
-const componentManager = useProvideComponentManager();
+import type { DiagramData, DiagramPart } from "@/components/diagramManager";
+import {
+  type PropertyConfig,
+  generatePropertyConfigs,
+  generatePropsFromDefault,
+  generatePropsFromAttrs,
+} from "@/components/equipments/componentConfig"; // 引入组件配置工具

 // --- 文档面板控制 ---
 const showDocPanel = ref(false);
 const documentContent = ref("");

+// 获取路由参数
+import { useRoute } from "vue-router";
+const route = useRoute();
+
 // 切换文档面板和属性面板
 async function toggleDocPanel() {
  showDocPanel.value = !showDocPanel.value;
@@ -102,11 +99,610 @@ async function loadDocumentContent() {
  }
 }

-// --- UI 状态管理 ---
+// 检查是否有例程参数，如果有则自动打开文档面板
+onMounted(async () => {
+  if (route.query.tutorial) {
+    showDocPanel.value = true;
+    await loadDocumentContent();
+  }
+});
+
+// --- 元器件管理 ---
 const showComponentsMenu = ref(false);
+const diagramData = ref<DiagramData>({
+  version: 1,
+  author: "admin",
+  editor: "me",
+  parts: [],
+  connections: [],
+});
+
+const selectedComponentId = ref<string | null>(null);
+const selectedComponentData = computed(() => {
+  return (
+    diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
+    null
+  );
+});
 const diagramCanvas = ref(null);

-// --- 页面动画和通知 ---
+// 存储动态导入的组件模块
+interface ComponentModule {
+  default: any;
+  getDefaultProps?: () => Record<string, any>;
+  config?: {
+    props?: Array<PropertyConfig>;
+  };
+}
+
+const componentModules = shallowRef<Record<string, ComponentModule>>({});
+const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
+  null,
+); // 存储选中组件的配置
+
+// 动态加载组件定义
+async function loadComponentModule(type: string) {
+  if (!componentModules.value[type]) {
+    try {
+      // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
+      const module = await import(`../components/equipments/${type}.vue`);
+
+      // 使用 markRaw 包装模块，避免不必要的响应式处理
+      componentModules.value = {
+        ...componentModules.value,
+        [type]: module,
+      };
+
+      // console.log(`Loaded module for ${type}:`, module);
+    } catch (error) {
+      console.error(`Failed to load component module ${type}:`, error);
+      return null;
+    }
+  }
+  return componentModules.value[type];
+}
+
+// 处理组件模块加载请求
+async function handleLoadComponentModule(type: string) {
+  // console.log("Handling load component module request for:", type);
+  await loadComponentModule(type);
+}
+
+// --- 分割面板 ---
+const leftPanelWidth = ref(60);
+const isResizing = ref(false);
+
+// 分割面板拖拽相关函数
+function startResize(e: MouseEvent) {
+  isResizing.value = true;
+  document.addEventListener("mousemove", onResize);
+  document.addEventListener("mouseup", stopResize);
+  e.preventDefault(); // 防止文本选择
+}
+
+function onResize(e: MouseEvent) {
+  if (!isResizing.value) return;
+
+  // 获取容器宽度和鼠标位置
+  const container = document.querySelector(
+    ".flex-1.overflow-hidden",
+  ) as HTMLElement;
+  if (!container) return;
+
+  const containerWidth = container.clientWidth;
+  const mouseX = e.clientX;
+
+  // 计算左侧面板应占的百分比
+  let newWidth = (mouseX / containerWidth) * 100;
+
+  // 限制最小宽度和最大宽度
+  newWidth = Math.max(20, Math.min(newWidth, 80));
+
+  // 更新宽度
+  leftPanelWidth.value = newWidth;
+}
+
+function stopResize() {
+  isResizing.value = false;
+  document.removeEventListener("mousemove", onResize);
+  document.removeEventListener("mouseup", stopResize);
+}
+
+// --- 元器件操作 ---
+function openComponentsMenu() {
+  showComponentsMenu.value = true;
+}
+
+// 处理 ComponentSelector 组件添加元器件事件
+async function handleAddComponent(componentData: {
+  type: string;
+  name: string;
+  props: Record<string, any>;
+}) {
+  // 加载组件模块以便后续使用
+  const componentModule = await loadComponentModule(componentData.type);
+
+  // 获取画布容器和位置信息
+  const canvasInstance = diagramCanvas.value as any;
+
+  // 获取当前画布的位置信息
+  let position = { x: 100, y: 100 };
+  let scale = 1;
+
+  try {
+    if (
+      canvasInstance &&
+      canvasInstance.getCanvasPosition &&
+      canvasInstance.getScale
+    ) {
+      position = canvasInstance.getCanvasPosition();
+      scale = canvasInstance.getScale();
+
+      // 获取画布容器
+      const canvasContainer = canvasInstance.$el as HTMLElement;
+      if (canvasContainer) {
+        // 计算可视区域中心点在画布坐标系中的位置
+        const viewportWidth = canvasContainer.clientWidth;
+        const viewportHeight = canvasContainer.clientHeight;
+
+        // 计算画布中心点的坐标
+        position.x = (viewportWidth / 2 - position.x) / scale;
+        position.y = (viewportHeight / 2 - position.y) / scale;
+      }
+    }
+  } catch (error) {
+    console.error("获取画布位置时出错:", error);
+  }
+
+  // 添加一些随机偏移，避免元器件重叠
+  const offsetX = Math.floor(Math.random() * 100) - 50;
+  const offsetY = Math.floor(Math.random() * 100) - 50;
+
+  // 获取组件的能力页面
+  let capsPage = null;
+  if (
+    componentModule &&
+    componentModule.default &&
+    typeof componentModule.default.getCapabilities === "function"
+  ) {
+    try {
+      capsPage = componentModule.default.getCapabilities();
+      // console.log(`获取到${componentData.type}组件的能力页面`);
+    } catch (error) {
+      // console.error(`获取${componentData.type}组件能力页面失败:`, error);
+    }
+  }
+
+  // 创建新组件，使用diagramManager接口定义
+  const newComponent: DiagramPart = {
+    id: `component-${Date.now()}`,
+    type: componentData.type,
+    x: Math.round(position.x + offsetX),
+    y: Math.round(position.y + offsetY),
+    attrs: componentData.props,
+    rotate: 0,
+    group: "",
+    positionlock: false,
+    hidepins: true,
+    isOn: true,
+    index: 0,
+  };
+
+  console.log("添加新组件:", newComponent);
+  // 通过画布实例添加组件
+  if (
+    canvasInstance &&
+    canvasInstance.getDiagramData &&
+    canvasInstance.updateDiagramDataDirectly
+  ) {
+    const currentData = canvasInstance.getDiagramData();
+    currentData.parts.push(newComponent);
+    canvasInstance.updateDiagramDataDirectly(currentData);
+  }
+}
+
+// 处理模板添加事件
+async function handleAddTemplate(templateData: {
+  id: string;
+  name: string;
+  template: any;
+}) {
+  console.log("添加模板:", templateData);
+  console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
+  // 获取画布实例
+  const canvasInstance = diagramCanvas.value as any;
+  if (
+    !canvasInstance ||
+    !canvasInstance.getDiagramData ||
+    !canvasInstance.updateDiagramDataDirectly
+  ) {
+    console.error("没有可用的画布实例添加模板");
+    return;
+  }
+
+  // 获取当前图表数据
+  const currentData = canvasInstance.getDiagramData();
+  console.log("=== 当前图表组件数量:", currentData.parts.length);
+
+  // 生成唯一ID前缀，以确保添加的组件ID不重复
+  const idPrefix = `template-${Date.now()}-`;
+  // 处理模板组件并添加到图表
+  if (templateData.template && templateData.template.parts) {
+    // 获取当前视口中心位置
+    let viewportCenter = { x: 300, y: 200 }; // 默认值
+    try {
+      if (
+        canvasInstance &&
+        canvasInstance.getCanvasPosition &&
+        canvasInstance.getScale
+      ) {
+        const position = canvasInstance.getCanvasPosition();
+        const scale = canvasInstance.getScale();
+
+        // 获取画布容器
+        const canvasContainer = canvasInstance.$el as HTMLElement;
+        if (canvasContainer) {
+          // 计算可视区域中心点在画布坐标系中的位置
+          const viewportWidth = canvasContainer.clientWidth;
+          const viewportHeight = canvasContainer.clientHeight;
+
+          // 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
+          viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
+          viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
+          // console.log(
+          //   `=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
+          // );
+        }
+      }
+    } catch (error) {
+      console.error("获取视口中心位置时出错:", error);
+    }
+
+    // console.log("=== 使用视口中心添加模板组件:", viewportCenter);
+
+    // 找到模板中的主要组件（假设是第一个组件）
+    const mainPart = templateData.template.parts[0];
+
+    // 创建带有新位置的组件
+    const newParts = await Promise.all(
+      templateData.template.parts.map(async (part: any) => {
+        // 创建组件副本并分配新ID
+        const newPart = JSON.parse(JSON.stringify(part));
+        newPart.id = `${idPrefix}${part.id}`;
+
+        // 尝试加载组件模块并获取能力页面
+        try {
+          const componentModule = await loadComponentModule(part.type);
+          if (
+            componentModule &&
+            componentModule.default &&
+            typeof componentModule.default.getCapabilities === "function"
+          ) {
+            newPart.capsPage = componentModule.default.getCapabilities();
+            console.log(`加载模板组件${part.type}组件的能力页面成功`);
+          }
+        } catch (error) {
+          console.error(`加载模板组件${part.type}的能力页面失败:`, error);
+        }
+
+        // 计算相对于主要组件的偏移量，保持模板内部组件的相对位置关系
+        if (typeof newPart.x === "number" && typeof newPart.y === "number") {
+          const oldX = newPart.x;
+          const oldY = newPart.y;
+
+          // 计算相对位置（相对于主要组件）
+          const relativeX = part.x - mainPart.x;
+          const relativeY = part.y - mainPart.y;
+
+          // 应用到视口中心位置
+          newPart.x = viewportCenter.x + relativeX;
+          newPart.y = viewportCenter.y + relativeY;
+
+          // console.log(
+          //   `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
+          // );
+        }
+
+        return newPart;
+      }),
+    );
+
+    // 向图表添加新组件
+    currentData.parts.push(...newParts);
+
+    // 处理连接关系
+    if (templateData.template.connections) {
+      // 创建一个映射表用于转换旧组件ID到新组件ID
+      const idMap: Record<string, string> = {};
+      templateData.template.parts.forEach((part: any) => {
+        idMap[part.id] = `${idPrefix}${part.id}`;
+      });
+
+      // 添加连接，更新组件ID引用
+      const newConnections = templateData.template.connections.map(
+        (conn: any) => {
+          // 处理连接数据 (格式为 [from, to, type, path])
+          if (Array.isArray(conn)) {
+            const [from, to, type, path] = conn;
+
+            // 从连接字符串中提取组件ID和引脚ID
+            const fromParts = from.split(":");
+            const toParts = to.split(":");
+
+            if (fromParts.length === 2 && toParts.length === 2) {
+              const fromComponentId = fromParts[0];
+              const fromPinId = fromParts[1];
+              const toComponentId = toParts[0];
+              const toPinId = toParts[1];
+
+              // 创建新的连接字符串，使用新的组件ID
+              const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
+              const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
+
+              return [newFrom, newTo, type, path];
+            }
+          }
+          return conn; // 如果格式不匹配，保持原样
+        },
+      );
+
+      // 添加到当前连接列表
+      currentData.connections.push(...newConnections);
+    }
+    // 更新图表数据
+    canvasInstance.updateDiagramDataDirectly(currentData);
+    console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
+
+    // 显示成功消息
+    showToast(`已添加 ${templateData.name} 模板`, "success");
+  } else {
+    console.error("模板格式错误，缺少parts数组");
+    showToast("模板格式错误", "error");
+  }
+}
+
+// 处理组件选中事件
+async function handleComponentSelected(componentData: DiagramPart | null) {
+  selectedComponentId.value = componentData ? componentData.id : null;
+  selectedComponentConfig.value = null; // 重置配置
+
+  if (componentData) {
+    // 先加载组件模块
+    const moduleRef = await loadComponentModule(componentData.type);
+
+    if (moduleRef) {
+      try {
+        // 创建属性配置数组
+        const propConfigs: PropertyConfig[] = [];
+
+        // 创建一个映射来跟踪已添加的属性名
+        const addedProps = new Set<string>();
+
+        // 1. 首先从getDefaultProps方法获取默认配置
+        if (typeof moduleRef.getDefaultProps === "function") {
+          const defaultProps = moduleRef.getDefaultProps();
+          const defaultPropConfigs = generatePropsFromDefault(defaultProps);
+
+          // 添加默认配置并记录属性名
+          defaultPropConfigs.forEach((config) => {
+            propConfigs.push(config);
+            addedProps.add(config.name);
+          });
+        }
+
+        // 2. 添加组件直接属性，这些属性会覆盖默认配置
+        const directPropConfigs = generatePropertyConfigs(componentData);
+
+        // 过滤掉已经添加过的属性名
+        const newDirectProps = directPropConfigs.filter(
+          (config) => !addedProps.has(config.name),
+        );
+        propConfigs.push(...newDirectProps);
+
+        // 3. 最后添加attrs中的属性
+        if (componentData.attrs) {
+          const attrs = componentData.attrs;
+          const attrPropConfigs = generatePropsFromAttrs(attrs);
+
+          // 更新已存在的属性值，或添加新属性
+          attrPropConfigs.forEach((attrConfig) => {
+            const existingIndex = propConfigs.findIndex(
+              (p) => p.name === attrConfig.name,
+            );
+            if (existingIndex >= 0) {
+              // 更新已存在的属性值
+              propConfigs[existingIndex] = attrConfig;
+            } else {
+              // 添加新属性
+              propConfigs.push(attrConfig);
+            }
+          });
+        }
+
+        selectedComponentConfig.value = { props: propConfigs };
+        console.log(
+          `Built config for ${componentData.type}:`,
+          selectedComponentConfig.value,
+        );
+      } catch (error) {
+        console.error(
+          `Error building config for ${componentData.type}:`,
+          error,
+        );
+        selectedComponentConfig.value = { props: [] };
+      }
+    } else {
+      console.warn(`Module for component ${componentData.type} not found.`);
+      selectedComponentConfig.value = { props: [] };
+    }
+  }
+}
+
+// 处理图表数据更新事件
+function handleDiagramUpdated(data: DiagramData) {
+  diagramData.value = data;
+}
+
+// 处理组件移动事件
+function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
+  const part = diagramData.value.parts.find((p) => p.id === moveData.id);
+  if (part) {
+    part.x = moveData.x;
+    part.y = moveData.y;
+  }
+}
+
+// 处理组件删除事件
+function handleComponentDelete(componentId: string) {
+  // 查找要删除的组件
+  const component = diagramData.value.parts.find((p) => p.id === componentId);
+  if (!component) return;
+
+  // 收集需要删除的组件ID列表（包括当前组件和同组组件）
+  const componentsToDelete: string[] = [componentId];
+
+  // 如果组件属于一个组，则找出所有同组的组件
+  if (component.group && component.group !== "") {
+    const groupMembers = diagramData.value.parts.filter(
+      (p) => p.group === component.group && p.id !== componentId,
+    );
+
+    // 将同组组件ID添加到删除列表
+    componentsToDelete.push(...groupMembers.map((p) => p.id));
+    console.log(
+      `删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
+    );
+  }
+
+  // 删除所有标记的组件
+  diagramData.value.parts = diagramData.value.parts.filter(
+    (p) => !componentsToDelete.includes(p.id),
+  );
+
+  // 同时删除与这些组件相关的所有连接
+  diagramData.value.connections = diagramData.value.connections.filter(
+    (connection) => {
+      for (const id of componentsToDelete) {
+        if (
+          connection[0].startsWith(`${id}:`) ||
+          connection[1].startsWith(`${id}:`)
+        ) {
+          return false;
+        }
+      }
+      return true;
+    },
+  );
+
+  // 如果删除的是当前选中的组件，清除选中状态
+  if (
+    selectedComponentId.value &&
+    componentsToDelete.includes(selectedComponentId.value)
+  ) {
+    selectedComponentId.value = null;
+    selectedComponentConfig.value = null;
+  }
+}
+
+// 更新组件属性的方法
+function updateComponentProp(
+  componentId: string,
+  propName: string,
+  value: any,
+) {
+  const canvasInstance = diagramCanvas.value as any;
+  if (
+    !canvasInstance ||
+    !canvasInstance.getDiagramData ||
+    !canvasInstance.updateDiagramDataDirectly
+  ) {
+    console.error("没有可用的画布实例进行属性更新");
+    return;
+  }
+
+  // 检查值是否为对象，如果是对象并有value属性，则使用该属性值
+  if (value !== null && typeof value === "object" && "value" in value) {
+    value = value.value;
+  }
+
+  const currentData = canvasInstance.getDiagramData();
+  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
+
+  if (part) {
+    // 检查是否为基本属性
+    if (propName in part) {
+      (part as any)[propName] = value;
+    } else {
+      // 否则当作attrs中的属性处理
+      if (!part.attrs) {
+        part.attrs = {};
+      }
+      part.attrs[propName] = value;
+    }
+
+    canvasInstance.updateDiagramDataDirectly(currentData);
+    console.log(
+      `更新组件${componentId}的属性${propName}为:`,
+      value,
+      typeof value,
+    );
+  }
+}
+
+// 更新组件的直接属性
+function updateComponentDirectProp(
+  componentId: string,
+  propName: string,
+  value: any,
+) {
+  const canvasInstance = diagramCanvas.value as any;
+  if (
+    !canvasInstance ||
+    !canvasInstance.getDiagramData ||
+    !canvasInstance.updateDiagramDataDirectly
+  ) {
+    console.error("没有可用的画布实例进行属性更新");
+    return;
+  }
+
+  const currentData = canvasInstance.getDiagramData();
+  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
+
+  if (part) {
+    // @ts-ignore: 动态属性赋值
+    part[propName] = value;
+
+    canvasInstance.updateDiagramDataDirectly(currentData);
+    console.log(
+      `更新组件${componentId}的直接属性${propName}为:`,
+      value,
+      typeof value,
+    );
+  }
+}
+
+// 专门用于更新组件的显示层级 - 这个方法可以删除，直接使用updateComponentProp即可
+
+// 处理连线创建事件
+function handleWireCreated(wireData: any) {
+  console.log("Wire created:", wireData);
+}
+
+// 处理连线删除事件
+function handleWireDeleted(wireId: string) {
+  console.log("Wire deleted:", wireId);
+}
+
+// 导出当前diagram数据
+function exportDiagram() {
+  // 直接使用DiagramCanvas组件提供的导出功能
+  const canvasInstance = diagramCanvas.value as any;
+  if (canvasInstance && canvasInstance.exportDiagram) {
+    canvasInstance.exportDiagram();
+  }
+}
+
+// --- 消息提示 ---
 const showNotification = ref(false);
 const notificationMessage = ref("");
 const notificationType = ref<"success" | "error" | "info">("info");
@@ -131,68 +727,41 @@ function showToast(
    }, duration);
  }
 }
+// 显示通知

-// --- 事件处理器（委托给组件管理器） ---
-
-function openComponentsMenu() {
-  showComponentsMenu.value = true;
-}
-
-// 处理 ComponentSelector 组件添加元器件事件
-async function handleAddComponent(componentData: {
-  type: string;
-  name: string;
-  props: Record<string, any>;
-}) {
-  await componentManager.addComponent(componentData);
-}
-
-// 处理模板添加事件
-async function handleAddTemplate(templateData: {
-  id: string;
-  name: string;
-  template: any;
-}) {
-  const result = await componentManager.addTemplate(templateData);
-  if (result) {
-    showToast(result.message, result.success ? "success" : "error");
-  }
-}
-
-// 处理图表数据更新事件
-function handleDiagramUpdated(data: DiagramData) {
-  console.log("Diagram data updated:", data);
-}
-
-// 更新组件属性的方法 - 委托给componentManager
-function updateComponentProp(
-  componentId: string,
-  propName: string,
-  value: any,
-) {
-  componentManager.updateComponentProp(componentId, propName, value);
-}
-
-// 更新组件的直接属性 - 委托给componentManager
-function updateComponentDirectProp(
-  componentId: string,
-  propName: string,
-  value: any,
-) {
-  componentManager.updateComponentDirectProp(componentId, propName, value);
-}
+// --- 组件属性处理辅助函数 ---
+// 直接使用 componentConfig.ts 中导入的 getPropValue 函数

 // --- 生命周期钩子 ---
 onMounted(async () => {
-  // 检查是否有例程参数，如果有则自动打开文档面板
-  if (route.query.tutorial) {
-    showDocPanel.value = true;
-    await loadDocumentContent();
-  }
+  // 初始化画布设置
+  console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);

-  // 设置画布引用并初始化组件管理器
-  componentManager.setCanvasRef(diagramCanvas.value);
-  await componentManager.initialize();
+  // 获取初始图表数据
+  const canvasInstance = diagramCanvas.value as any;
+  if (canvasInstance && canvasInstance.getDiagramData) {
+    diagramData.value = canvasInstance.getDiagramData();
+
+    // 预加载所有使用的组件模块，以确保它们在渲染时可用
+    const componentTypes = new Set<string>();
+    diagramData.value.parts.forEach((part) => {
+      componentTypes.add(part.type);
+    });
+
+    console.log("Preloading component modules:", Array.from(componentTypes));
+
+    // 并行加载所有组件模块
+    await Promise.all(
+      Array.from(componentTypes).map((type) => loadComponentModule(type)),
+    );
+
+    console.log("All component modules loaded");
+  }
+});
+
+onUnmounted(() => {
+  document.removeEventListener("mousemove", onResize);
+  document.removeEventListener("mouseup", stopResize);
 });
 </script>

@@ -200,6 +769,26 @@ onMounted(async () => {
 /* 样式保持不变 */
@import "../assets/main.css";

+/* 分割线样式 */
+.resizer {
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  transition: background-color 0.3s;
+  z-index: 10;
+}
+
+.resizer:hover,
+.resizer:active {
+  width: 6px;
+}
+
+/* 调整大小时应用全局样式 */
+:global(body.resizing) {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .animate-slideRight {
  animation: slideRight 0.3s ease-out forwards;
 }
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -1,5 +1,99 @@
 <template>
+  <div class="flex w-screen h-screen justify-center">
+    <div class="flex flex-col w-3/5 h-screen shadow-2xl p-10">
+      <div class="flex justify-center">
+        <h1 class="font-bold text-3xl">Jtag 下载</h1>
+      </div>
+      <div class="divider"></div>
+      <div class="w-full">
+        <div class="collapse bg-primary">
+          <input type="checkbox" />
+          <div class="collapse-title font-semibold text-lg text-white">
+            自定义开发板参数
+          </div>
+          <div class="collapse-content bg-primary-content text-sm">
+            <div class="form-control w-full my-3">
+              <label class="label">
+                <span class="label-text text-gray-700">开发板IP地址</span>
+              </label>
+              <label class="input w-full">
+                <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
+                <input type="text" class="grow" placeholder="IP地址" v-model="boardAddress" />
+              </label>
+            </div>
+            <div class="form-control w-full my-3">
+              <label class="label">
+                <span class="label-text text-gray-700">开发板端口号</span>
+              </label>
+              <label class="input w-full">
+                <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
+                <input type="text" class="grow" placeholder="端口号" v-model="boardPort" />
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <UploadCard :upload-event="uploadBitstream" :download-event="downloadBitstream">
+      </UploadCard>
+    </div>
+  </div>
 </template>

 <script setup lang="ts">
-</script>
+import { JtagClient, type FileParameter } from "@/APIClient";
+import UploadCard from "@/components/UploadCard.vue";
+import { useDialogStore } from "@/stores/dialog";
+import { Common } from "@/Common";
+import { toNumber, isUndefined } from "lodash";
+import { ref } from "vue";
+
+const jtagController = new JtagClient();
+const dialog = useDialogStore();
+
+// Models with default values
+const boardAddress = ref("127.0.0.1"); // 默认IP地址
+const boardPort = ref("1234"); // 默认端口号
+
+async function uploadBitstream(bitstream: File): Promise<boolean> {
+  if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
+    dialog.error("开发板地址或端口空缺");
+    return false;
+  }
+
+  try {
+    const resp = await jtagController.uploadBitstream(
+      boardAddress.value,
+      Common.toFileParameterOrNull(bitstream),
+    );
+    return resp;
+  } catch (e) {
+    dialog.error("上传错误");
+    console.error(e);
+    return false;
+  }
+}
+
+async function downloadBitstream(): Promise<boolean> {
+  if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
+    dialog.error("开发板地址或端口空缺");
+    return false;
+  }
+
+  try {
+    const resp = await jtagController.downloadBitstream(
+      boardAddress.value,
+      toNumber(boardPort.value),
+    );
+    return resp;
+  } catch (e) {
+    dialog.error("上传错误");
+    console.error(e);
+    return false;
+  }
+}
+</script>
+
+<style scoped lang="postcss">
+@import "../assets/main.css";
+</style>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,8 +6,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import tailwindcss from '@tailwindcss/postcss'
 import autoprefixer from 'autoprefixer'
-import Components from 'unplugin-vue-components/vite'
-import RekaResolver from 'reka-ui/resolver'

 // https://vite.dev/config/
 export default defineConfig({
@@ -22,18 +20,6 @@ export default defineConfig({
    }),
    vueJsx(),
    vueDevTools(),
-    Components(
-      {
-      dts: true,
-      resolvers: [
-        RekaResolver()
-
-        // RekaResolver({
-        //   prefix: '' // use the prefix option to add Prefix to the imported components
-        // })
-      ],
-    }
-    )
  ],
  resolve: {
    alias: {
Author	SHA1	Message	Date
SikongJueluo	81f91b2b71	fix: boundary scan could not close and jtag scan failed	2025-05-20 20:31:52 +08:00
alivender	bbfe06822d	Merge branch 'master' of ssh://git.swordlost.top:222/SikongJueluo/FPGA_WebLab	2025-05-20 20:19:09 +08:00
alivender	d73166187a	Merge branch 'master' of ssh://git.swordlost.top:222/SikongJueluo/FPGA_WebLab	2025-05-20 20:18:58 +08:00
alivender	2eabb79d0f	Merge branch 'master' of ssh://git.swordlost.top:222/SikongJueluo/FPGA_WebLab	2025-05-20 20:09:42 +08:00
alivender	a865cfc950	fix: 注释掉调试日志以清理控制台输出	2025-05-20 20:09:39 +08:00
SikongJueluo	fa7c947351	feat: backend add task id to reduce conflict	2025-05-20 20:08:20 +08:00