rm：去除konva

refactor：持续解耦合
refactor: 给Canvas解耦合
2025-07-09 17:05:29 +08:00 · 2025-07-09 16:32:17 +08:00 · 2025-07-09 15:55:49 +08:00 · 2025-07-09 14:42:29 +08:00 · 2025-07-03 21:56:58 +08:00 · 2025-07-02 21:16:18 +08:00
120 changed files with 8430 additions and 2843 deletions
--- a/.justfile
+++ b/.justfile
@@ -24,6 +24,9 @@ update:
 gen-api:
  npm run gen-api

+gen-api-from-server:
+  npx nswag openapi2tsclient /input:http://localhost:5000/swagger/v1/swagger.json /output:src/APIClient.ts
+
 # 构建服务器，包含win与linux平台
 [working-directory: "server"]
 build-server self-contained=isSelfContained: _show-dir
--- a/components.d.ts
+++ b/components.d.ts
@@ -0,0 +1,56 @@
+/* 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": 1741246872,
-        "narHash": "sha256-Q6pMP4a9ed636qilcYX8XUguvKl/0/LGXhHcRI91p0U=",
-        "rev": "10069ef4cf863633f57238f179a0297de84bd8d3",
-        "revCount": 763342,
+        "lastModified": 1748929857,
+        "narHash": "sha256-lcZQ8RhsmhsK8u7LIFsJhsLh/pzR9yZ8yqpTzyGdj+Q=",
+        "rev": "c2a03962b8e24e669fb37b7df10e7c79531ff1a4",
+        "revCount": 810143,
        "type": "tarball",
-        "url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.763342%2Brev-10069ef4cf863633f57238f179a0297de84bd8d3/01956ed4-f66c-7a87-98e4-b7e58f4aa591/source.tar.gz"
+        "url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.810143%2Brev-c2a03962b8e24e669fb37b7df10e7c79531ff1a4/01973914-8b42-7168-9ee2-4d6ea6946695/source.tar.gz"
      },
      "original": {
        "type": "tarball",
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,17 +10,21 @@
      "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",
-        "tinypool": "^1.0.2",
+        "reka-ui": "^2.3.1",
        "ts-log": "^2.2.7",
        "ts-results-es": "^5.0.1",
        "vue": "^3.5.13",
        "vue-router": "4",
+        "yocto-queue": "^1.2.1",
        "zod": "^3.24.2"
      },
      "devDependencies": {
@@ -37,6 +41,7 @@
        "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"
@@ -958,6 +963,86 @@
        "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",
@@ -1350,6 +1435,15 @@
        "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",
@@ -1618,6 +1712,32 @@
        "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",
@@ -1648,6 +1768,12 @@
        "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",
@@ -1988,6 +2114,69 @@
        }
      }
    },
+    "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",
@@ -2008,6 +2197,45 @@
        "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",
@@ -2062,6 +2290,19 @@
      "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",
@@ -2072,15 +2313,28 @@
      }
    },
    "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
      "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",
@@ -2151,6 +2405,31 @@
      ],
      "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",
@@ -2164,6 +2443,13 @@
        "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",
@@ -2248,9 +2534,9 @@
      "license": "MIT"
    },
    "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -2314,6 +2600,12 @@
        "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",
@@ -2457,6 +2749,13 @@
        "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",
@@ -2488,6 +2787,19 @@
        "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",
@@ -2559,6 +2871,19 @@
        "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",
@@ -2586,6 +2911,15 @@
        "he": "bin/he"
      }
    },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/hookable": {
      "version": "5.5.3",
      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -2602,6 +2936,19 @@
        "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",
@@ -2618,6 +2965,29 @@
        "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",
@@ -2637,6 +3007,16 @@
        "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",
@@ -3031,6 +3411,24 @@
        "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",
@@ -3063,6 +3461,15 @@
        "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",
@@ -3151,6 +3558,38 @@
      "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",
@@ -3200,6 +3639,16 @@
      "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",
@@ -3290,6 +3739,12 @@
        "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",
@@ -3405,6 +3860,18 @@
        }
      }
    },
+    "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",
@@ -3456,6 +3923,23 @@
        "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",
@@ -3470,6 +3954,77 @@
        "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",
@@ -3676,9 +4231,9 @@
      "license": "MIT"
    },
    "node_modules/tinyglobby": {
-      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
-      "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -3692,13 +4247,17 @@
        "url": "https://github.com/sponsors/SuperchupuDev"
      }
    },
-    "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==",
+    "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,
      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": ">=8.0"
      }
    },
    "node_modules/totalist": {
@@ -3752,6 +4311,13 @@
        "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",
@@ -3782,6 +4348,74 @@
        "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",
@@ -4042,6 +4676,13 @@
        "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",
@@ -4065,6 +4706,18 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/yocto-queue": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.1.tgz",
+      "integrity": "sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/yoctocolors": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -16,17 +16,21 @@
  "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",
-    "tinypool": "^1.0.2",
+    "reka-ui": "^2.3.1",
    "ts-log": "^2.2.7",
    "ts-results-es": "^5.0.1",
    "vue": "^3.5.13",
    "vue-router": "4",
+    "yocto-queue": "^1.2.1",
    "zod": "^3.24.2"
  },
  "devDependencies": {
@@ -43,6 +47,7 @@
    "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/public/EquipmentTemplates/MatrixKey.json
+++ b/public/EquipmentTemplates/MatrixKey.json
@@ -0,0 +1,314 @@
+{
+  "version": 1,
+  "author": "template",
+  "editor": "system",
+  "parts": [
+    {
+      "id": "board",
+      "type": "BaseBoard",
+      "x": 0,
+      "y": 0,
+      "attrs": {
+        "size": 1.2,
+        "width": 400,
+        "height": 400,
+        "roundCorner": 20
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": false,
+      "isOn": true,
+      "index": 0
+    },
+    {
+      "id": "key_0_0",
+      "type": "MechanicalButton",
+      "x": 50,
+      "y": 50,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "1",
+        "bindMatrixKey": "0",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 0
+    },
+    {
+      "id": "key_0_1",
+      "type": "MechanicalButton",
+      "x": 150,
+      "y": 50,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "2",
+        "bindMatrixKey": "1",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 1
+    },
+    {
+      "id": "key_0_2",
+      "type": "MechanicalButton",
+      "x": 250,
+      "y": 50,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "3",
+        "bindMatrixKey": "2",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 2
+    },
+    {
+      "id": "key_0_3",
+      "type": "MechanicalButton",
+      "x": 350,
+      "y": 50,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "A",
+        "bindMatrixKey": "3",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 3
+    },
+    {
+      "id": "key_1_0",
+      "type": "MechanicalButton",
+      "x": 50,
+      "y": 150,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "4",
+        "bindMatrixKey": "4",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 4
+    },
+    {
+      "id": "key_1_1",
+      "type": "MechanicalButton",
+      "x": 150,
+      "y": 150,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "5",
+        "bindMatrixKey": "5",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 5
+    },
+    {
+      "id": "key_1_2",
+      "type": "MechanicalButton",
+      "x": 250,
+      "y": 150,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "6",
+        "bindMatrixKey": "6",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 6
+    },
+    {
+      "id": "key_1_3",
+      "type": "MechanicalButton",
+      "x": 350,
+      "y": 150,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "B",
+        "bindMatrixKey": "7",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 7
+    },
+    {
+      "id": "key_2_0",
+      "type": "MechanicalButton",
+      "x": 50,
+      "y": 250,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "7",
+        "bindMatrixKey": "8",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 8
+    },
+    {
+      "id": "key_2_1",
+      "type": "MechanicalButton",
+      "x": 150,
+      "y": 250,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "8",
+        "bindMatrixKey": "9",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 9
+    },
+    {
+      "id": "key_2_2",
+      "type": "MechanicalButton",
+      "x": 250,
+      "y": 250,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "9",
+        "bindMatrixKey": "10",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 10
+    },
+    {
+      "id": "key_2_3",
+      "type": "MechanicalButton",
+      "x": 350,
+      "y": 250,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "C",
+        "bindMatrixKey": "11",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 11
+    },
+    {
+      "id": "key_3_0",
+      "type": "MechanicalButton",
+      "x": 50,
+      "y": 350,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "*",
+        "bindMatrixKey": "12",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 12
+    },
+    {
+      "id": "key_3_1",
+      "type": "MechanicalButton",
+      "x": 150,
+      "y": 350,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "0",
+        "bindMatrixKey": "13",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 13
+    },
+    {
+      "id": "key_3_2",
+      "type": "MechanicalButton",
+      "x": 250,
+      "y": 350,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "#",
+        "bindMatrixKey": "14",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 14
+    },
+    {
+      "id": "key_3_3",
+      "type": "MechanicalButton",
+      "x": 350,
+      "y": 350,
+      "attrs": {
+        "size": 0.5,
+        "bindKey": "D",
+        "bindMatrixKey": "15",
+        "pins": []
+      },
+      "rotate": 0,
+      "group": "MatrixKeypad",
+      "positionlock": false,
+      "hidepins": true,
+      "isOn": false,
+      "index": 15
+    }
+  ],
+  "connections": []
+}
--- a/public/doc/01/cover.png
+++ b/public/doc/01/cover.png
--- a/public/doc/01_water_led/water_led.md
+++ b/public/doc/01_water_led/water_led.md
--- a/public/doc/01_water_led/images/1.png
+++ b/public/doc/01_water_led/images/1.png
--- a/public/doc/01_water_led/images/2.png
+++ b/public/doc/01_water_led/images/2.png
--- a/public/doc/01_water_led/images/3.png
+++ b/public/doc/01_water_led/images/3.png
--- a/public/doc/01_water_led/images/4.png
+++ b/public/doc/01_water_led/images/4.png
--- a/public/doc/02/cover.png
+++ b/public/doc/02/cover.png
--- a/public/doc/02_key/key.md
+++ b/public/doc/02_key/key.md
--- a/public/doc/02_key/images/1.png
+++ b/public/doc/02_key/images/1.png
--- a/public/doc/02_key/images/2.png
+++ b/public/doc/02_key/images/2.png
--- a/public/doc/02_key/images/3.png
+++ b/public/doc/02_key/images/3.png
--- a/public/doc/02_key/images/4.png
+++ b/public/doc/02_key/images/4.png
--- a/public/doc/02_key/images/5.png
+++ b/public/doc/02_key/images/5.png
--- a/public/doc/02_key/images/6.png
+++ b/public/doc/02_key/images/6.png
--- a/public/doc/02_key/images/7.png
+++ b/public/doc/02_key/images/7.png
--- a/public/doc/03/cover.png
+++ b/public/doc/03/cover.png
--- a/public/doc/03/doc.md
+++ b/public/doc/03/doc.md
@@ -0,0 +1,244 @@
+# 基础-3-数码管实验
+
+---
+
+在许多项目设计中，我们通常需要一些显示设备来显示我们需要的信息，可以选择的显示设备有很多，而数码管是使用最多，最简单的显示设备之一。
+
+## 3.1 章节导读
+本章将通过数码管驱动实验讲解FPGA数字系统中重要的"选通控制"概念。读者将学习到：
+1. 数码管工作原理与动态扫描技术
+2. 多路复用（Multiplexing）设计方法
+3. 参数化模块设计技巧
+4. 外设驱动时序规划
+5. ASCII到段码的转换原理
+
+实验将使用Verilog HDL实现一个支持8位数码管显示、包含字符动态滚动和选通控制的完整系统。
+
+
+## 3.2 理论学习
+### 3.2.1 数码管结构
+- 7段数码管组成：A-G段+DP小数点
+- 共阳/共阴类型区分（本实验采用共阳型，低电平有效）
+
+### 3.2.2 动态扫描原理
+```
+显示周期 = 刷新周期 × 数码管数量
+人眼视觉暂留效应（>60Hz）
+扫描频率计算公式：f_scan = f_clk / CLK_CYCLE
+```
+
+### 3.2.3 关键技术
+- 时分复用：分时选通数码管
+- 段码生成：ASCII字符到七段码转换
+- 消隐处理：消除切换时的视觉残留
+
+### 3.2.4 设计指标
+| 参数 | 值 | 说明 |
+|-------|-----|-------------------|
+| 位数 | 8   | 数码管数量        |
+| 频率 | 200Hz | 单管刷新频率     |
+| 分辨率 | 8bit | 段码控制（含小数点）|
+
+
+## 3.2 实战演练
+### 3.3.1 系统架构
+```verilog
+系统框图：
+[Top模块] → [显示驱动模块] → [选通控制模块]
+           ↖ ASCII数据生成 ↙ 时钟分频
+```
+
+### 3.3.2 模块设计
+#### led_display_selector
+```verilog
+module led_display_selector #(
+    parameter NUM = 4,
+    parameter VALID_SIGNAL = 1'b0,
+    parameter CLK_CYCLE = 1000
+)(
+    input  wire             clk,
+    input  wire             rstn,
+    input  wire [NUM*8-1:0] led_in,
+    output  reg [7:0]       led_display_seg,//[DP,G,F,E,D,C,B,A]
+    output  reg [NUM-1:0]   led_display_sel
+);
+
+reg [31:0] clk_cnt;
+always @(posedge clk or negedge rstn) begin
+    if (!rstn) clk_cnt <= 0;
+    else if(clk_cnt == CLK_CYCLE) clk_cnt <= 0;
+    else clk_cnt <= clk_cnt + 1;
+end
+
+wire seg_change = (clk_cnt == CLK_CYCLE) ? 1'b1 : 1'b0;
+
+always @(posedge clk or negedge rstn) begin
+    if(!rstn) led_display_sel <= {{(NUM-1){~VALID_SIGNAL}}, VALID_SIGNAL};
+    else if (seg_change) led_display_sel <= {led_display_sel[NUM-2:0], led_display_sel[NUM-1]};
+    else led_display_sel <= led_display_sel;
+end
+
+integer i;
+always @(*) begin
+    for(i=0;i<NUM;i=i+1) begin
+        if(led_display_sel[NUM-1-i] == VALID_SIGNAL)
+            led_display_seg = led_in[i*8 +: 8] ^ ({8{~VALID_SIGNAL}});
+    end
+end
+
+endmodule //led_display_ctrl
+```
+
+#### led_display_driver
+```verilog
+module led_display_driver(// 8个数码管显示，阳极管（在selector中已经做了阴阳处理）
+    input wire           clk,
+    input wire           rstn,
+    input wire [8*8-1:0] assic_seg, //ASSIC coding
+    input wire [7:0]     seg_point, //显示小数点
+
+    output wire [7:0]    led_display_seg,
+    output wire [7:0]    led_display_sel
+);
+
+reg [8*8-1:0] led_in;
+
+integer i;
+always @(*) begin
+    led_in = 0;
+    for(i=0;i<8;i=i+1) begin //led_in[i*8 +: 8] <---> assic_seg[i*8 +: 8]
+        case (assic_seg[i*8 +: 8])
+            "0":     led_in[i*8 +: 8] = (8'h3f) | {seg_point[i],7'b0};
+            "1":     led_in[i*8 +: 8] = (8'h06) | {seg_point[i],7'b0};
+            "2":     led_in[i*8 +: 8] = (8'h5b) | {seg_point[i],7'b0};
+            "3":     led_in[i*8 +: 8] = (8'h4f) | {seg_point[i],7'b0};
+            "4":     led_in[i*8 +: 8] = (8'h66) | {seg_point[i],7'b0};
+            "5":     led_in[i*8 +: 8] = (8'h6d) | {seg_point[i],7'b0};
+            "6":     led_in[i*8 +: 8] = (8'h7d) | {seg_point[i],7'b0};
+            "7":     led_in[i*8 +: 8] = (8'h07) | {seg_point[i],7'b0};
+            "8":     led_in[i*8 +: 8] = (8'h7f) | {seg_point[i],7'b0};
+            "9":     led_in[i*8 +: 8] = (8'h6f) | {seg_point[i],7'b0};
+            "A","a": led_in[i*8 +: 8] = (8'h77) | {seg_point[i],7'b0};
+            "B","b": led_in[i*8 +: 8] = (8'h7c) | {seg_point[i],7'b0};
+            "C","c": led_in[i*8 +: 8] = (8'h39) | {seg_point[i],7'b0};
+            "D","d": led_in[i*8 +: 8] = (8'h5e) | {seg_point[i],7'b0};
+            "E","e": led_in[i*8 +: 8] = (8'h79) | {seg_point[i],7'b0};
+            "F","f": led_in[i*8 +: 8] = (8'h71) | {seg_point[i],7'b0};
+            "G","g": led_in[i*8 +: 8] = (8'h3d) | {seg_point[i],7'b0};
+            "H","h": led_in[i*8 +: 8] = (8'h76) | {seg_point[i],7'b0};
+            "I","i": led_in[i*8 +: 8] = (8'h0f) | {seg_point[i],7'b0};
+            "J","j": led_in[i*8 +: 8] = (8'h0e) | {seg_point[i],7'b0};
+            "K","k": led_in[i*8 +: 8] = (8'h75) | {seg_point[i],7'b0};
+            "L","l": led_in[i*8 +: 8] = (8'h38) | {seg_point[i],7'b0};
+            "M","m": led_in[i*8 +: 8] = (8'h37) | {seg_point[i],7'b0};
+            "N","n": led_in[i*8 +: 8] = (8'h54) | {seg_point[i],7'b0};
+            "O","o": led_in[i*8 +: 8] = (8'h5c) | {seg_point[i],7'b0};
+            "P","p": led_in[i*8 +: 8] = (8'h73) | {seg_point[i],7'b0};
+            "Q","q": led_in[i*8 +: 8] = (8'h67) | {seg_point[i],7'b0};
+            "R","r": led_in[i*8 +: 8] = (8'h31) | {seg_point[i],7'b0};
+            "S","s": led_in[i*8 +: 8] = (8'h49) | {seg_point[i],7'b0};
+            "T","t": led_in[i*8 +: 8] = (8'h78) | {seg_point[i],7'b0};
+            "U","u": led_in[i*8 +: 8] = (8'h3e) | {seg_point[i],7'b0};
+            "V","v": led_in[i*8 +: 8] = (8'h1c) | {seg_point[i],7'b0};
+            "W","w": led_in[i*8 +: 8] = (8'h7e) | {seg_point[i],7'b0};
+            "X","x": led_in[i*8 +: 8] = (8'h64) | {seg_point[i],7'b0};
+            "Y","y": led_in[i*8 +: 8] = (8'h6e) | {seg_point[i],7'b0};
+            "Z","z": led_in[i*8 +: 8] = (8'h59) | {seg_point[i],7'b0};
+            " ":     led_in[i*8 +: 8] = (8'h00) | {seg_point[i],7'b0};
+            "-":     led_in[i*8 +: 8] = (8'h40) | {seg_point[i],7'b0};
+            "_":     led_in[i*8 +: 8] = (8'h08) | {seg_point[i],7'b0};
+            "=":     led_in[i*8 +: 8] = (8'h48) | {seg_point[i],7'b0};
+            "+":     led_in[i*8 +: 8] = (8'h5c) | {seg_point[i],7'b0};
+            "(":     led_in[i*8 +: 8] = (8'h39) | {seg_point[i],7'b0};
+            ")":     led_in[i*8 +: 8] = (8'h0F) | {seg_point[i],7'b0};
+            default: led_in[i*8 +: 8] = (8'h00) | {seg_point[i],7'b0};
+        endcase
+    end
+end
+
+led_display_selector #(
+	.NUM          	( 8     ),
+	.VALID_SIGNAL 	( 1'b0  ), //阳极管，低电平亮
+	.CLK_CYCLE    	( 5000 ))
+u_led_display_selector(
+	.clk             	( clk              ),
+	.rstn            	( rstn             ),
+	.led_in          	( led_in           ),
+	.led_display_seg 	( led_display_seg  ),
+	.led_display_sel 	( led_display_sel  )
+);
+
+endmodule //moduleName
+```
+
+#### led_display_top
+```verilog
+
+module led_diaplay_top(
+    //system io
+    input  wire       external_clk ,
+    input  wire       external_rstn,
+    //led display io
+    output wire [7:0] led_display_seg,
+    output wire [7:0] led_display_sel
+);
+
+reg [43*8-1:0] assic_seg;
+reg [7:0]     seg_point;
+
+reg [31:0] clk_cnt;
+always @(posedge external_clk or negedge external_rstn) begin
+    if(!external_rstn) clk_cnt <= 0;
+    else clk_cnt <= clk_cnt + 1;
+end
+
+always @(posedge external_clk or negedge external_rstn) begin
+    if(!external_rstn) begin
+        assic_seg <= "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ -_=+()";
+        seg_point <= 8'b00000001;
+    end else if({clk_cnt[24]==1'b1} && (clk_cnt[23:0]==25'b0))begin
+        assic_seg <= {assic_seg[8*43-8-1:0], assic_seg[8*43-1 -: 8]};
+        seg_point <= {seg_point[6:0], seg_point[7]};
+    end else begin
+        assic_seg <= assic_seg;
+        seg_point <= seg_point;
+    end
+end
+
+led_display_driver u_led_display_driver(
+	.clk             	( external_clk             ),
+	.rstn            	( external_rstn            ),
+	.assic_seg       	( assic_seg[8*43-1 -: 8*8] ),
+	.seg_point       	( seg_point                ),
+	.led_display_seg 	( led_display_seg          ),
+	.led_display_sel 	( led_display_sel          )
+);
+
+endmodule //led_diaplay_top
+```
+
+### 3.3.3 上板验证步骤
+1. 设置参数：CLK_CYCLE=5000（对应200Hz扫描频率）
+2. 绑定管脚：连接数码管段选/位选信号
+3. 观察现象：字符"01234567"应稳定显示
+4. 修改assic_seg初始值验证滚动功能
+
+---
+
+## 3.4 章末总结
+**关键收获：**
+1. 掌握动态扫描消除器件闪烁的原理
+2. 理解参数化设计（NUM/VALID_SIGNAL）的优势
+3. 学习时序控制中计数器的重要作用
+4. 实践ASCII到硬件编码的转换方法
+
+**设计亮点：**
+- 支持阴阳极自动适配（通过VALID_SIGNAL参数）
+- 字符环形缓冲区实现无缝滚动
+- 参数化设计增强模块复用性
+
+---
+
+## 3.5 拓展训练
+
+结合流水灯实验和数码管实验：数码管显示数字，标识出当前流水到了哪一个灯
--- a/public/doc/04/cover.png
+++ b/public/doc/04/cover.png
--- a/public/doc/04/doc.md
+++ b/public/doc/04/doc.md
@@ -0,0 +1,212 @@
+# 基础-4-矩阵键盘实验
+
+## 4.1 章节导读
+本章将介绍**矩阵键盘检测电路的设计与实现方法**，通过Verilog HDL语言完成4×4矩阵键盘的扫描识别模块，掌握**多键输入设备的行列扫描原理、消抖机制以及按键编码处理方式**。
+
+矩阵键盘作为常见的人机交互接口之一，广泛应用于嵌入式系统、数字电路和微控制器项目中。与独立按键不同，矩阵键盘在节省IO资源的同时，对扫描逻辑和时序处理提出了更高的要求。实验中我们将采用**逐行扫描法**，结合状态机与延时消抖手段，确保按键信息的准确采集。
+
+
+## 4.2 理论学习
+### 4.2.1 矩阵键盘结构
+<div>           <!--块级封装-->
+    <center>    <!--将图片和文字居中-->
+    <img src="./images/1.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:80%"/>
+    <br>        <!--换行-->
+    图1.矩阵键盘原理图 <!--标题-->
+    </center>
+</div>
+
+实验板8个引脚分别连接矩阵键盘的KEY1~KEY8，该矩阵键盘的原理如下：将KEY1~KEY4脚设置为输出引脚，KEY5~KEY8设置为输入引脚。以KEY1和KEY5为例，当没有按键按下时，KEY1和VCC之间是断路，此时R1为上拉电阻，电路几乎没有电流流过，KEY5检测到的电压恰好是VCC，为1。**所以按键不按下，KEY5~KEY8检测到1。**
+
+如果按键按下。此时KEY5~KEY8检测到的值与KEY1~KEY4的输出电压有关。以KEY1和KEY5为例，如果KEY1输出为0，按键1按下，VCC和KEY1之间形成通路，KEY5检测到0。但如果KEY1输出为1，此时即使按键按下，VCC和KEY1之间也几乎没有电流，此时KEY5检测到高阻态，也就是1。所以，**如果行输出电平为0，并且按键按下，KEY5~8会检测到0；如果行输出电平为1，按键按下，KEY5~8检测到1。**
+
+现在我们看懂了原理图就可以开始设计verilog，根据原理图我们知道，只有行电平（KEY1~4的输出电平）为0时，按键按下，KEY5~8才会检测到0。那么我们可以用行扫描的逻辑设计：
+
+1. FPGA按顺序将1到4行中的一行输出为低电平，其余3行为高电平（或高阻态）。
+2. FPGA逐个读取每列引脚（KEY5~8）的电平，若某列为低电平，则说明该行和该列交汇处的按键被按下。
+3. 可以在没有按键按下时，把所有行的输出电平都拉低，直到有按键按下时，重复1~2的步骤扫描。
+
+
+## 4.2 实战演练
+### 4.3.1 系统架构
+``` verilog
+系统框图：
+[Top模块] = {矩阵键盘扫描模块 → 按键上升沿检测模块}
+```
+
+### 4.3.2 模块设计
+
+根据上述原理，设计行扫描矩阵键盘检测模块如下：
+
+#### matrix_key
+```verilog
+module matrix_key #(
+    parameter ROW_NUM = 4,
+    parameter COL_NUM = 4,
+    parameter DEBOUNCE_TIME = 2000,
+    parameter DELAY_TIME = 200
+) (
+    input  wire clk,
+    input  wire rstn,
+    output  reg [ROW_NUM-1:0] row,
+    input  wire [COL_NUM-1:0] col,
+    output  reg [ROW_NUM*COL_NUM-1:0] key_out
+);
+
+    localparam ROW_ACTIVE = 1'b0;   // 行有效电平
+    localparam ROW_INACTIVE = 1'b1; // 行无效电平
+    localparam COL_PRESSED = 1'b0;  // 列按下电平
+    localparam COL_RELEASED = 1'b1; // 列释放电平
+    
+    reg [ROW_NUM-1:0][COL_NUM-1:0] key; // 按键状态寄存器
+
+    reg [2:0] cu_st, nt_st;
+    localparam [2:0] ST_IDLE = 3'b001;
+    localparam [2:0] ST_SCAN = 3'b010;
+    localparam [2:0] ST_DEBOUNCE = 3'b100;
+
+    wire btn_pressed = ((|(~(col ^ {COL_NUM{COL_PRESSED}}))) && (cu_st == ST_IDLE)) || (key_out != 0); // 只要有一个按键按下，btn_pressed为1
+    reg [31:0] delay_cnt; // 延时计数器
+    reg [31:0] debounce_cnt; // 消抖计数器
+    reg [ROW_NUM-1:0] row_cnt; // 行计数器
+
+    always @(posedge clk or negedge rstn) begin
+        if(!rstn) delay_cnt <= 0;
+        else if(cu_st == ST_SCAN) begin
+            if(delay_cnt == DELAY_TIME) delay_cnt <= 0;
+            else delay_cnt <= delay_cnt + 1;
+        end else delay_cnt <= 0;
+    end
+
+    always @(posedge clk or negedge rstn) begin
+        if(!rstn) row_cnt <= 0;
+        else if(cu_st == ST_SCAN) begin
+            if(delay_cnt == DELAY_TIME) row_cnt <= row_cnt + 1;
+            else row_cnt <= row_cnt;
+        end else row_cnt <= 0;
+    end
+
+    always @(posedge clk or negedge rstn) begin
+        if(!rstn) debounce_cnt <= 0;
+        else if(cu_st == ST_DEBOUNCE) begin
+            if(debounce_cnt == DEBOUNCE_TIME) debounce_cnt <= 0;
+            else debounce_cnt <= debounce_cnt + 1;
+        end else debounce_cnt <= 0;
+    end
+
+    /*
+    处理逻辑
+    ROW作为输出，COL作为输入
+    1. ST_IDLE状态，所有ROW都拉至有效电平
+    2. 若没有按键按下，所有COL都为释放电平
+    3. 若有按键按下，按下的按键所在的COL会变为按下电平
+    4. 进入ST_SCAN状态，启动扫描，ROW全部置为无效电平，并逐次改变为有效电平。（此时，COL会都变成列释放电平）
+    5. 如果某一个ROW行有效电平时，COL变成了列按下电平，则说明该ROW和COL交点的按键被按下
+    6. 每一行都扫描一遍。
+    7. 进入ST_DEBOUNCE状态，所有ROW都拉至行有效电平，在此期间不进行扫描。
+    8. DEBOUNCE时间到后，进入IDLE状态。
+    */
+
+    always @(posedge clk or negedge rstn) begin
+        if(!rstn) cu_st <= ST_IDLE;
+        else cu_st <= nt_st;
+    end
+
+    always @(*) begin
+        if(!rstn) nt_st <= ST_IDLE;
+        else case(cu_st)
+            ST_IDLE: begin
+                if(btn_pressed) nt_st <= ST_SCAN;
+                else nt_st <= ST_IDLE;
+            end
+            ST_SCAN: begin
+                if((delay_cnt == DELAY_TIME) && (row_cnt == ROW_NUM-1)) nt_st <= ST_DEBOUNCE;
+                else nt_st <= ST_SCAN;
+            end
+            ST_DEBOUNCE: begin
+                if(debounce_cnt == DEBOUNCE_TIME) nt_st <= ST_IDLE;
+                else nt_st <= ST_DEBOUNCE;
+            end
+            default: nt_st <= ST_IDLE;
+        endcase
+    end
+
+    integer i, j;
+    always @(posedge clk or negedge rstn) begin
+        if(!rstn) key <= 0;
+        else for(i=0; i<ROW_NUM; i=i+1) 
+                for(j=0; j<COL_NUM; j=j+1)
+                    if((cu_st == ST_SCAN) && (delay_cnt == DELAY_TIME) && (row_cnt == i)) key[i][j] <= (col[j] == COL_PRESSED)?(1'b1):(1'b0);
+                    else key[i][j] <= key[i][j]; // 其他情况不变
+    end
+
+    always @(*) begin
+        for(i=0;i<ROW_NUM;i=i+1) begin
+            for(j=0;j<COL_NUM;j=j+1) begin
+                key_out[i*COL_NUM+j] <= key[i][j];
+            end
+        end
+    end
+
+    always @(posedge clk or negedge rstn) begin
+        if(!rstn) row <= {ROW_NUM{ROW_ACTIVE}};
+        else if(cu_st == ST_IDLE && nt_st == ST_SCAN) row <= {{(ROW_NUM-1){ROW_INACTIVE}}, ROW_ACTIVE};
+        else if(cu_st == ST_SCAN) begin
+            if(delay_cnt == DELAY_TIME) row <= {row[ROW_NUM-1:0],ROW_INACTIVE};
+            else row <= row;
+        end else row <= {ROW_NUM{ROW_ACTIVE}};
+    end
+endmodule //matrix_key
+```
+
+为了能够观察到现象，使用板载8个led和实验箱8个led进行显示，按下矩阵键盘的按键，对应led就会亮，顶层文件如下所示：
+
+#### matrix_key_top
+
+```verilog
+module matrix_key_top(
+//system io
+input  wire       external_clk ,
+input  wire       external_rstn,
+
+input  wire [ 3:0] col,
+output wire [ 3:0] row,
+output wire [15:0] led
+);
+
+wire [15:0] key_out;
+
+assign led = key_out;
+matrix_key #(
+	.ROW_NUM       	( 4     ),
+	.COL_NUM       	( 4     ),
+	.DEBOUNCE_TIME 	( 10000 ),
+	.DELAY_TIME    	( 2000  ))
+u_matrix_key(
+	.clk     	( external_clk  ),
+	.rstn    	( external_rstn ),
+	.row     	( row           ),
+	.col     	( col           ),
+	.key_out 	( key_out       )
+);
+endmodule
+```
+
+### 4.3.3 上板验证步骤
+1. 设置参数：CLK_CYCLE=5000（对应200Hz扫描频率）
+2. 绑定管脚：连接led和矩阵键盘管脚
+
+---
+
+## 4.4 章末总结
+**关键收获：**
+1. 掌握矩阵键盘行扫描原理，能看懂原理图
+3. 学习时序控制中计数器的重要作用
+
+---
+
+## 4.5 拓展训练
+
+可以将数码管与矩阵键盘相结合
--- a/public/doc/04/images/1.png
+++ b/public/doc/04/images/1.png
--- a/public/doc/05/cover.png
+++ b/public/doc/05/cover.png
--- a/public/doc/05/doc.md
+++ b/public/doc/05/doc.md
@@ -0,0 +1,194 @@
+# 基础-5-PWM呼吸灯
+
+## 5.1 章节导读
+
+本章将实现 PWM（脉宽调制）呼吸灯效果，即控制 LED 灯的亮度在一个周期内从暗到亮再从亮到暗，形成如人呼吸般的灯光变化。通过该实验可以掌握 PWM 占空比调节以及 FPGA 控制 LED 的基本方法。
+
+## 5.2 理论学习
+
+呼吸灯在我们的生活中很常见，在电脑上多作为消息提醒指示灯而被广泛使用，其效果是小灯在一段时间内从完全熄灭的状态逐渐变到最亮，再在同样的时间段内逐渐达到完全熄灭的状态，并循环往复。这种效果就像“呼吸”一样。而实现”呼吸“的方法就是PWM技术。
+
+PWM（Pulse Width Modulation）是一种常用的控制技术，其核心思想是通过控制一个周期内信号为高电平的时间比例（占空比）来实现输出电压或亮度的变化。也就是说只要我们在小时间段内，led灯的亮度依次增加，然后依次减小，即可实现”呼吸“的效果。
+
+
+
+## 5.3 实战演练
+
+### 5.3.1 实验目标
+
+实现 LED 呼吸灯效果，亮度逐渐变亮再逐渐变暗，周而复始，整体周期约为2秒，视觉上更加自然流畅。
+
+### 5.3.2 硬件资源
+
+实验板提供 32 颗 LED 灯，本实验选用其中的 1 颗绿色 LED 进行 PWM 控制
+
+<div>           <!--块级封装-->
+    <center>    <!--将图片和文字居中-->
+    <img src="./images/1.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:30%"/>
+    <br>        <!--换行-->
+    图1.LED扩展板   <!--标题-->
+    </center>
+</div>
+
+通过原理图可以得知，本试验箱的LED灯为高电平时点亮。
+
+<div>           <!--块级封装-->
+    <center>    <!--将图片和文字居中-->
+    <img src="./images/2.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:40%"/>
+    <br>        <!--换行-->
+    图2.LED扩展板原理图    <!--标题-->
+    </center>
+</div>
+### 5.3.3 程序设计
+
+本模块的设计事实上是两个计数器，所以肯定需要时钟信号sysclk，也需要一个rstn复位信号，同时需要一个IO口驱动LED。所以模块的端口如下表所示：
+
+| 端口名称 | 端口位宽               | 端口类型           |功能描述|
+|:----------:|:----:|:----:|:--------------------:|
+| sysclk | 1Bit | Input | 输入时钟，频率27M |
+| rstn | 1Bit | Input | 复位信号，低电平有效 |
+| led | 1Bit | Output | LED控制信号 |
+
+为了实现一个视觉上柔和自然的 LED 呼吸效果，我们设定完整的呼吸周期为 2 秒，即 LED 亮度在 1 秒内逐渐增强，接着在另 1 秒内逐渐减弱。整个过程由占空比（duty cycle）的变化来控制 PWM 输出的高电平持续时间。
+
+在本设计中，使用实验板的 27MHz 系统时钟。为了获得合适的 PWM 控制精度，我们将一个 PWM 周期设定为 1ms，这对应 27000 个时钟周期（27M ÷ 1000）。通过一个名为 `pwm_cnt` 的计数器来实现这一周期性计数，当 `pwm_cnt` 小于占空比 `duty` 的值时，LED 输出高电平，从而控制亮度。
+
+为了实现“呼吸”变化，我们再设计另一个计数器 `duty`，它每 1ms（即 `pwm_cnt` 计满一次）更新一次。前 1000ms 内占空比逐渐增加，即 `duty` 每次增加，从而输出高电平的时间逐步变长，LED 亮度逐渐增强；后 1000ms 内占空比逐渐减小，每次减小，LED 亮度逐渐变弱。如此循环往复，即可实现 LED 的“柔和呼吸”效果。
+
+那么，占空比 duty 的变化步长如何选择？考虑到：一个 1ms是 27000 个时钟；如果我们希望1ms内led亮的时间为1us的倍数，那么我们可以将27000分成1000份，一份是27。如果duty的每次增减是27，那么也就对应了led每次亮灭的时间增减了1us。也就是说当duty为27时，led亮的时间为1us，1ms过后，duty变为54，led亮的时间为2us，以此类推，当duty为27000时，led亮满1ms。这样就实现了led亮的时间逐渐增加的效果。
+
+模块的参考代码如下所示（`pwm.v`）：
+
+```verilog
+module pwm(
+    input wire sysclk,     // 27MHz 系统时钟
+    input wire rstn,    // 低有效复位
+    output wire led     // PWM 控制LED输出
+);
+
+parameter PWM_PERIOD = 16'd27000;//1ms
+// 单一PWM周期，1ms
+// duty上升的次数是1000次，下降的次数也是1000次，说明pwm的半周期是 1ms * 1000 = 1s
+// pwm的一次全周期是 1s * 2 = 2s
+reg [15:0] pwm_cnt;
+reg [15:0] duty;
+reg inc_dec_flag;//0表示duty+ ，1表示duty-
+//计数器1，不断累加
+always @(posedge sysclk or negedge rstn) begin
+    if (!rstn)
+        pwm_cnt <= 0;
+    else if (pwm_cnt < PWM_PERIOD - 1)
+        pwm_cnt <= pwm_cnt + 1;
+    else
+        pwm_cnt <= 0;
+end
+//计数器2，控制占空比，单一周期结束进行一次累加或者减
+always @(posedge sysclk or negedge rstn) begin
+    if (!rstn)
+        duty <= 0;
+    else if (pwm_cnt == PWM_PERIOD - 1)begin
+        if(inc_dec_flag == 0)
+            duty <= duty + 27;
+        else 
+            duty <= duty - 27;
+    end
+    else duty <= duty;
+end
+//加减的标志位，半周期结束后反转。
+always @(posedge sysclk or negedge rstn) begin
+    if(~rstn)
+        inc_dec_flag <= 0;
+    else if(duty == PWM_PERIOD)
+        inc_dec_flag <= 1;
+    else if(duty == 0)
+        inc_dec_flag <= 0;
+    else 
+        inc_dec_flag <= inc_dec_flag;
+end
+
+assign led = (pwm_cnt < duty) ? 1'b1 : 1'b0;
+endmodule
+```
+
+
+
+### 5.3.4 仿真验证
+
+为了验证模块功能，我们可以编写仿真模块，并将 `PWM_PERIOD` 等比例缩小为270，以便快速验证。以下为仿真文件（`pwm_tb.v`）：
+
+```verilog
+`timescale 1ns/1ns
+module pwm_tb;
+
+    reg sysclk;
+    reg rstn;
+    wire led;
+
+    // 实例化待测试模块
+    pwm #(
+        .PWM_PERIOD(270)//为了减少仿真时间，将单一pwm周期从27000等比例缩小为270
+    ) pwm_inst (
+        .sysclk(sysclk),
+        .rstn(rstn),
+        .led(led)
+      );
+    // 产生系统时钟：周期约为 27Mhz
+    initial begin
+        sysclk = 0;
+        forever #(500/27) sysclk = ~sysclk;
+    end
+
+    // 初始化和复位过程
+    initial begin
+        // 初始化
+        rstn = 0;
+        #100;           // 保持复位100ns
+        rstn = 1;       // 释放复位
+    end
+
+endmodule
+```
+
+同时为了便于仿真，可以直接点击sim文件夹下hebav文件夹中的do.bat文件即可利用ModuleSim对模块进行仿真，仿真波形如下：
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/3.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:60%"/>
+    <br>		<!--换行-->
+    图3.呼吸灯仿真波形（一）	<!--标题-->
+    </center>
+</div>
+
+<div>           <!--块级封装-->
+    <center>    <!--将图片和文字居中-->
+    <img src="./images/4.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:60%"/>
+    <br>        <!--换行-->
+    图4.呼吸灯仿真波形（二）   <!--标题-->
+    </center>
+</div>
+
+通过观察波形我们发现led输出为1的时间在逐步增加之后逐步减小，duty的值从0增加到270后减小，符合设计预期，可以进行下一步上板验证。
+
+### 5.3.5 上板验证
+
+仿真验证通过后，即可进行上板测试。在实际使用时需要进行管脚约束。以下为参考端口与分配示例：
+
+| 端口名称 | 信号类型 | 对应管脚 | 功能               |
+| -------- | -------- | -------- | ------------------ |
+| clk      | Input    |          | 27MHz时钟          |
+| rstn     | Input    |          | 复位               |
+| led      | Output   |          | 输出PWM信号连接LED |
+
+完成管脚绑定后生成 `.sbit` 文件，上传到实验平台后进行烧录，即可在摄像头画面中看到 LED 呼吸闪烁效果。
+
+## 5.4 章末总结
+
+本章我们学习了 PWM 控制的基本原理及其在 LED 呼吸灯上的应用，同时通过不断改变PWM占空比方式使呼吸过程更加平滑自然。该方法不仅适用于视觉灯效控制，还广泛应用于马达调速、音量控制等模拟量调节领域。你可以进一步尝试调整占空比范围、节奏速度，甚至扩展到多个 LED 同步/异步呼吸控制，实现更加炫酷的视觉效果。
--- a/public/doc/05/images/1.png
+++ b/public/doc/05/images/1.png
--- a/public/doc/05/images/2.png
+++ b/public/doc/05/images/2.png
--- a/public/doc/05/images/3.png
+++ b/public/doc/05/images/3.png
--- a/public/doc/05/images/4.png
+++ b/public/doc/05/images/4.png
--- a/public/doc/06/cover.png
+++ b/public/doc/06/cover.png
--- a/public/doc/06/doc.md
+++ b/public/doc/06/doc.md
@@ -0,0 +1,650 @@
+# 基础-6-HDMI显示
+
+## 6.1 章节导读
+
+随着多媒体技术的快速发展，高清显示已成为嵌入式系统与FPGA应用中不可或缺的一部分。HDMI（High-Definition Multimedia Interface）作为目前最主流的视频数字传输标准，广泛应用于电视、显示器、笔记本、摄像头等各类终端设备中。相比传统的模拟VGA接口，HDMI具有传输带宽高、支持音视频同步、无压缩信号传输等优点，能更好地满足现代图像处理和显示系统的需求。
+
+在FPGA开发中，掌握HDMI显示技术不仅是实现图像/视频输出的基础能力，更是后续图像识别、视频监控、图形用户界面（GUI）等复杂系统设计的前提。因此，本实验以HDMI显示为核心内容，带领大家从零开始构建一个完整的视频输出链路。通过配置显示参数、生成时序控制信号、输出RGB图像数据等关键步骤，最终实现在HDMI接口上稳定输出画面。
+
+在本次实验中我们将学习利用实验板的HDMI接口和MS7210芯片，进行HDMI显示实验的设计。
+
+## 6.2 理论学习
+
+### 6.2.1 VGA时序
+
+VGA显示是在行同步和帧同步（场同步）的信号同步下，按照从上到下，从左到右的顺序，扫描到显示屏上。VGA扫描方式见下图所示：
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/1.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:50%"/>
+    <br>		<!--换行-->
+    图1.VGA扫描顺序	<!--标题-->
+    </center>
+</div>
+
+如上图所示，每一帧图像都是从左上角开始，逐行扫描形成，所以规定最左上角的像素点为第一个像素点，坐标是（0，0），以这个像素为起点，向右x坐标逐渐增大，向下y坐标逐渐增大，重复若干次后扫描到右下角完成一帧图像的扫描，扫描完成后进行图像消隐，随后指针跳回左上角重新进行新一帧的扫描。
+
+ 在扫描的过程中会对每一个像素点进行单独赋值，使每个像素点显示对应色彩信息，当扫描速度足够快，加之人眼的视觉暂留特性，我们会看到一幅完整的图片，这就是VGA 显示的原理。
+
+VGA显示除了要有像素点的信息，还需要有行同步（HSync）和场同步（VSync）两个信号辅助显示。行同步信号规定了一行像素的开始与结束，场同步信号规定了一帧图像的开始与结束。在VESA DMT 1.12版本的标准文档中给出的VGA时序图如下图所示：
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/2.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图2.VGA标准时序	<!--标题-->
+    </center>
+</div>
+
+行同步时序如下图所示：
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/3.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图3.行同步时序	<!--标题-->
+    </center>
+</div>
+
+行同步的一个扫周期要经过6个部分，分别是Sync（同步）、 Back Porch（后沿）、 Left Border（左边框）、 “Addressable” Video（有效图像）、 Right Border（右边框）、 Front Porch（前沿），这些过程的长度都是以像素为单位的，也就是以像素时钟为单位，例如Sync的值为96，也就意味着Sync阶段要经历96个像素时钟。HSync信号会在Sync同步阶段拉高（不同的芯片可能有不同标准）以确定新一行的开始与上一行的结束。而完整的一行像素很多，但有效的真正能显示在屏幕上的像素只有 “Addressable” Video（有效图像）部分的像素，其他阶段的像素均无效，无法显示在屏幕中。
+
+场同步时序如下图所示：
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/4.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图4.场同步时序	<!--标题-->
+    </center>
+</div>
+
+场同步时序与行同步时序相同，也是分为6个部分，在Sync同步阶段拉高，标志着一帧的结束和新一帧的开始，其中像素只有在“Addressable” Video（有效图像）阶段才有效，其他阶段均无效。而场同步信号的基本单位是行，比如Sync的值为2，也就意味着Sync同步阶段要经历两行。
+
+那么我们将行同步和场同步信号结合起来，遍可以得到一帧图像的样貌，如下图所示：
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/5.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图5.一帧图像组成示意图	<!--标题-->
+    </center>
+</div>
+
+可以看到在行场同步信号构成了一个二维坐标系，原点在左上方，中间遍形成了一帧图像，而真正能显示在屏幕中的图像只有 “Addressable” Video（有效图像）部分。
+
+现在我们知道了行同步和场同步都要经历6个部分，那么这些部分的长度都是如何规定的呢？VGA 行时序对行同步时间、 消隐时间、 行视频有效时间和行前肩时间有特定的规范， 场时序也是如此。 常用VGA 分辨率时序参数如下表所示：
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/6.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图6.常用VGA分辨率时序参数	<!--标题-->
+    </center>
+</div>
+
+### 6.2.2 MS7210芯片
+
+MS7210是一款HD发送芯片，支持4K@30Hz的视频3D传输格式。可以支持的最高分辨率高达4K@30Hz，最高采样率达到300MHz。MS7210支持YUV和RGB 之间的色彩空间转换，数字接口支持YUV以及RGB格式输入。MS7210的IIS接口以及S/PDIF 接口支持高清音频的传输，其中S/PDIF接口既可以兼容IEC61937标准下的压缩音频传输，同时还支持高比特音频（HBR）的传输，在高比特音频（HBR）模式下，音频采样率最高为768KHz。MS7210的IIC 地址可以根据SA引脚进行选择。当 SA引脚上拉到电源电压或者悬空时，地址为 OxB2。当 SA 引脚连接到 GND 时，地址为0x56。
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/7.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图7.MS7210芯片	<!--标题-->
+    </center>
+</div>
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/8.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:50%"/>
+    <br>		<!--换行-->
+    图8.MS7210功能框图	<!--标题-->
+    </center>
+</div>
+
+MS7210芯片可以通过IIC协议对内部寄存器进行配置，有关芯片寄存器配置需要向芯片厂家进行申请。
+
+## 6.3 实战演练
+
+### 6.3.1实验目标
+
+### 6.3.2硬件资源
+
+实验板共有一个HDMI-OUT接口，由MS7210驱动，一个HDMI-IN接口，由MS7200驱动。
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/9.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:30%"/>
+    <br>		<!--换行-->
+    图9.板载HDMI芯片	<!--标题-->
+    </center>
+</div>
+
+
+实验箱配备一个小型HDMI显示器，该显示器HDMI接口与HDMI-OUT接口连接，图像可以显示在显示屏中，通过摄像头可以在网站观察现象
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/xxx.png"
+         alt="实验箱显示器"
+         style="zoom:40%"/>
+    <br>		<!--换行-->
+    图10.实验箱显示器	<!--标题-->
+    </center>
+</div>
+
+
+### 6.3.3程序设计
+
+在设计程序时，我们先对本实验工程有一个整体认知，首先来看一下HDMI彩条显示实验的整体框图。
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/xxxx.png"
+         alt="实验箱显示器"
+         style="zoom:40%"/>
+    <br>		<!--换行-->
+    图11.HDMI彩条显示整体框图	<!--标题-->
+    </center>
+</div>
+
+可见整个实验一共由好多个模块组成，下面是各个模块简介
+| 模块名称 |功能描述| 备注 |
+|:----:|:----:|:----:|
+| hdmi_top | 顶层模块 ||
+| ms7210_ctrl_iic_top | ms7210芯片配置和iic顶层模块 |参考小眼睛例程|
+| ms7210_ctl | ms7210芯片配置和时序控制模块 |使用小眼睛例程|
+| iic_dri | iic驱动模块 |使用小眼睛例程|
+| vga_ctrl | vga时序信号生成模块 |参考野火例程|
+| vga_pic | vga像素数据生成模块 |参考野火例程|
+
+本次实验主要完成vga_ctrl和vga_pic模块的设计。
+
+对于vga_ctrl模块，我们主要完成hsync，vsync信号，xy坐标，数据有效rgb_valid信号的设计。经过我们前面的学习已经对vga时序有了一定的了解，我们可以想象到这几个信号也只是一种计数器而已。
+
+本实验要实现640x480的彩条显示，相关参数如下所示：
+
+```Verilog
+//parameter define
+parameter H_SYNC    =   10'd96  ,   //行同步
+          H_BACK    =   10'd40  ,   //行时序后沿
+          H_LEFT    =   10'd8   ,   //行时序左边框
+          H_VALID   =   10'd640 ,   //行有效数据
+          H_RIGHT   =   10'd8   ,   //行时序右边框
+          H_FRONT   =   10'd8   ,   //行时序前沿
+          H_TOTAL   =   10'd800 ;   //行扫描周期
+parameter V_SYNC    =   10'd2   ,   //场同步
+          V_BACK    =   10'd25  ,   //场时序后沿
+          V_TOP     =   10'd8   ,   //场时序上边框
+          V_VALID   =   10'd480 ,   //场有效数据
+          V_BOTTOM  =   10'd8   ,   //场时序下边框
+          V_FRONT   =   10'd2   ,   //场时序前沿
+          V_TOTAL   =   10'd525 ;   //场扫描周期
+```
+
+首先设计两个计数器`cnt_h`和`cnt_v`分别对像素和行进行计数，一个像素时钟过后`cnt_h`加一，一行过后`cnt_v`加一，扫描完一帧之后，计数器归零。
+
+而其他的状态信号则可以根据计数器的计数进行设计。hsync信号只要`cnt_h < H_SYNC`就拉高，vsync信号类似。当计数到有效数据部分数据有效信号rgb_valid就可以拉高，注意，由于时序逻辑有一个时钟周期的反应时间，所以xy的坐标变化比rgb_valid提前一个时钟周期。参考代码如下所示：
+
+```verilog
+`timescale  1ns/1ns
+////////////////////////////////////////////////////////////////////////
+// Author        : EmbedFire
+// 实验平台: 野火FPGA系列开发板
+// 公司    : http://www.embedfire.com
+// 论坛    : http://www.firebbs.cn
+// 淘宝    : https://fire-stm32.taobao.com
+////////////////////////////////////////////////////////////////////////
+
+module  vga_ctrl
+(
+    input   wire            vga_clk     ,   //输入工作时钟,频率25MHz
+    input   wire            sys_rst_n   ,   //输入复位信号,低电平有效
+    input   wire    [15:0]  pix_data    ,   //输入像素点色彩信息
+
+    output  wire    [11:0]  pix_x       ,   //输出VGA有效显示区域像素点X轴坐标
+    output  wire    [11:0]  pix_y       ,   //输出VGA有效显示区域像素点Y轴坐标
+    output  wire            hsync       ,   //输出行同步信号
+    output  wire            vsync       ,   //输出场同步信号
+    output  wire            rgb_valid   ,
+    output  wire    [15:0]  rgb             //输出像素点色彩信息
+);
+
+//********************************************************************//
+//****************** Parameter and Internal Signal *******************//
+//********************************************************************//
+//parameter define
+parameter H_SYNC    =   10'd96  ,   //行同步
+          H_BACK    =   10'd40  ,   //行时序后沿
+          H_LEFT    =   10'd8   ,   //行时序左边框
+          H_VALID   =   10'd640 ,   //行有效数据
+          H_RIGHT   =   10'd8   ,   //行时序右边框
+          H_FRONT   =   10'd8   ,   //行时序前沿
+          H_TOTAL   =   10'd800 ;   //行扫描周期
+parameter V_SYNC    =   10'd2   ,   //场同步
+          V_BACK    =   10'd25  ,   //场时序后沿
+          V_TOP     =   10'd8   ,   //场时序上边框
+          V_VALID   =   10'd480 ,   //场有效数据
+          V_BOTTOM  =   10'd8   ,   //场时序下边框
+          V_FRONT   =   10'd2   ,   //场时序前沿
+          V_TOTAL   =   10'd525 ;   //场扫描周期
+
+//wire  define
+wire            pix_data_req    ;   //像素点色彩信息请求信号
+
+//reg   define
+reg     [11:0]  cnt_h           ;   //行同步信号计数器
+reg     [11:0]  cnt_v           ;   //场同步信号计数器
+
+//********************************************************************//
+//***************************** Main Code ****************************//
+//********************************************************************//
+
+//cnt_h:行同步信号计数器
+always@(posedge vga_clk or negedge sys_rst_n)
+    if(sys_rst_n == 1'b0)
+        cnt_h   <=  12'd0   ;
+    else    if(cnt_h == H_TOTAL - 1'd1)
+        cnt_h   <=  12'd0   ;
+    else
+        cnt_h   <=  cnt_h + 1'd1   ;
+
+//hsync:行同步信号
+assign  hsync = (cnt_h  <=  H_SYNC - 1'd1) ? 1'b1 : 1'b0  ;
+
+//cnt_v:场同步信号计数器
+always@(posedge vga_clk or negedge sys_rst_n)
+    if(sys_rst_n == 1'b0)
+        cnt_v   <=  12'd0 ;
+    else    if((cnt_v == V_TOTAL - 1'd1) &&  (cnt_h == H_TOTAL-1'd1))
+        cnt_v   <=  12'd0 ;
+    else    if(cnt_h == H_TOTAL - 1'd1)
+        cnt_v   <=  cnt_v + 1'd1 ;
+    else
+        cnt_v   <=  cnt_v ;
+
+//vsync:场同步信号
+assign  vsync = (cnt_v  <=  V_SYNC - 1'd1) ? 1'b1 : 1'b0  ;
+
+//rgb_valid:VGA有效显示区域
+assign  rgb_valid = (((cnt_h >= H_SYNC + H_BACK + H_LEFT)
+                    && (cnt_h < H_SYNC + H_BACK + H_LEFT + H_VALID))
+                    &&((cnt_v >= V_SYNC + V_BACK + V_TOP)
+                    && (cnt_v < V_SYNC + V_BACK + V_TOP + V_VALID)))
+                    ? 1'b1 : 1'b0;
+
+//pix_data_req:像素点色彩信息请求信号,超前rgb_valid信号一个时钟周期
+assign  pix_data_req = (((cnt_h >= H_SYNC + H_BACK + H_LEFT - 1'b1)
+                    && (cnt_h < H_SYNC + H_BACK + H_LEFT + H_VALID - 1'b1))
+                    &&((cnt_v >= V_SYNC + V_BACK + V_TOP)
+                    && (cnt_v < V_SYNC + V_BACK + V_TOP + V_VALID)))
+                    ? 1'b1 : 1'b0;
+
+//pix_x,pix_y:VGA有效显示区域像素点坐标
+assign  pix_x = (pix_data_req == 1'b1)
+                ? (cnt_h - (H_SYNC + H_BACK + H_LEFT - 1'b1)) : 12'hfff;
+assign  pix_y = (pix_data_req == 1'b1)
+                ? (cnt_v - (V_SYNC + V_BACK + V_TOP)) : 12'hfff;
+
+//rgb:输出像素点色彩信息
+assign  rgb = (rgb_valid == 1'b1) ? pix_data : 16'b0 ;
+
+endmodule
+```
+
+对于vga_pic模块，我们可以根据x坐标范围（0~639）分成十份，每一份输出不同的颜色。参考代码如下所示：
+
+```verilog
+`timescale  1ns/1ns
+////////////////////////////////////////////////////////////////////////
+// Author        : EmbedFire
+// 实验平台: 野火FPGA系列开发板
+// 公司    : http://www.embedfire.com
+// 论坛    : http://www.firebbs.cn
+// 淘宝    : https://fire-stm32.taobao.com
+////////////////////////////////////////////////////////////////////////
+
+module  vga_pic
+(
+    input   wire            vga_clk     ,   //输入工作时钟,频率25MHz
+    input   wire            sys_rst_n   ,   //输入复位信号,低电平有效
+    input   wire    [11:0]  pix_x       ,   //输入VGA有效显示区域像素点X轴坐标
+    input   wire    [11:0]  pix_y       ,   //输入VGA有效显示区域像素点Y轴坐标
+
+    output  reg     [15:0]  pix_data        //输出像素点色彩信息
+);
+
+//********************************************************************//
+//****************** Parameter and Internal Signal *******************//
+//********************************************************************//
+//parameter define
+parameter   H_VALID =   12'd640 ,   //行有效数据
+            V_VALID =   12'd480 ;   //场有效数据
+
+parameter   RED     =   16'hF800,   //红色
+            ORANGE  =   16'hFC00,   //橙色
+            YELLOW  =   16'hFFE0,   //黄色
+            GREEN   =   16'h07E0,   //绿色
+            CYAN    =   16'h07FF,   //青色
+            BLUE    =   16'h001F,   //蓝色
+            PURPPLE =   16'hF81F,   //紫色
+            BLACK   =   16'h0000,   //黑色
+            WHITE   =   16'hFFFF,   //白色
+            GRAY    =   16'hD69A;   //灰色
+
+//********************************************************************//
+//***************************** Main Code ****************************//
+//********************************************************************//
+//pix_data:输出像素点色彩信息,根据当前像素点坐标指定当前像素点颜色数据
+always@(posedge vga_clk or negedge sys_rst_n)
+    if(sys_rst_n == 1'b0)
+        pix_data    <= 16'd0;
+    else    if((pix_x >= 0) && (pix_x < (H_VALID/10)*1))
+        pix_data    <=  RED;
+    else    if((pix_x >= (H_VALID/10)*1) && (pix_x < (H_VALID/10)*2))
+        pix_data    <=  ORANGE;
+    else    if((pix_x >= (H_VALID/10)*2) && (pix_x < (H_VALID/10)*3))
+        pix_data    <=  YELLOW;
+    else    if((pix_x >= (H_VALID/10)*3) && (pix_x < (H_VALID/10)*4))
+        pix_data    <=  GREEN;
+    else    if((pix_x >= (H_VALID/10)*4) && (pix_x < (H_VALID/10)*5))
+        pix_data    <=  CYAN;
+    else    if((pix_x >= (H_VALID/10)*5) && (pix_x < (H_VALID/10)*6))
+        pix_data    <=  BLUE;
+    else    if((pix_x >= (H_VALID/10)*6) && (pix_x < (H_VALID/10)*7))
+        pix_data    <=  PURPPLE;
+    else    if((pix_x >= (H_VALID/10)*7) && (pix_x < (H_VALID/10)*8))
+        pix_data    <=  BLACK;
+    else    if((pix_x >= (H_VALID/10)*8) && (pix_x < (H_VALID/10)*9))
+        pix_data    <=  WHITE;
+    else    if((pix_x >= (H_VALID/10)*9) && (pix_x < H_VALID))
+        pix_data    <=  GRAY;
+    else
+        pix_data    <=  BLACK;
+
+endmodule
+```
+
+在顶层模块，我们首先要利用PLL ip核生成iic的驱动时钟进行初始化，由于ms7210芯片的需要，我们通过计数设置一个延迟复位信号，由于我们的彩条颜色是按照RGB565格式生成的，所以需要向RGB888进行转换，只需要填0补位即可，同时由于板载时钟是27M与25.175M相差不大，所以直接使用板载时钟作为像素时钟输出。然后我们将输出的行场同步信号，像素时钟，像素数据，像素数据有效信号等与模块相连接即可完成设计。顶层模块参考代码如下：
+
+```Verilog
+`timescale 1ns / 1ns
+module hdmi_top(
+    input wire          sys_clk       ,// input system clock 50MHz   
+    input               rstn_in       , 
+    output              rstn_out      ,
+    output              hd_scl        ,
+    inout               hd_sda        ,
+    output              led_int       ,
+
+//hdmi_out 
+    output              pixclk_out    ,//pixclk                           
+    output  wire        vs_out        , 
+    output  wire        hs_out        , 
+    output  wire        de_out        ,
+    output  wire [7:0]  r_out         , 
+    output  wire [7:0]  g_out         , 
+    output  wire [7:0]  b_out         
+
+);
+wire                        cfg_clk    ;
+wire                        locked     ;
+wire                        rstn       ;
+wire                        init_over  ;
+reg  [15:0]                 rstn_1ms   ;
+//**********************************************//
+//*****************MS7210初始化******************//
+//**********************************************//
+//**************仿真时不编译此部分***************//
+`ifndef SIM
+//初始化成功标志
+assign    led_int    =     init_over;
+//生成10M IIC时钟
+PLL u_pll (
+  .clkout0(cfg_clk),    // output
+  .lock(locked),          // output
+  .clkin1(sys_clk)       // input
+);
+//ms7210初始化模块
+ms7210_ctrl_iic_top ms7210_ctrl_iic_top_inst(
+    .clk         (  cfg_clk    ), //input       clk,
+    .rst_n       (  rstn_out   ), //input       rstn,
+                        
+    .init_over   (  init_over  ), //output      init_over,
+    .iic_scl     (  hd_scl    ), //output      iic_scl,
+    .iic_sda     (  hd_sda    )  //inout       iic_sda
+);
+//延迟复位
+always @(posedge cfg_clk)
+begin
+	if(!locked)
+	    rstn_1ms <= 16'd0;
+	else
+	begin
+		if(rstn_1ms == 16'h2710)
+		    rstn_1ms <= rstn_1ms;
+		else
+		    rstn_1ms <= rstn_1ms + 1'b1;
+	end
+end
+assign rstn_out = (rstn_1ms == 16'h2710) && rstn_in;
+//**********************************************//
+`else
+assign led_int  =     1;
+assign rstn_out = rstn_in;
+
+`endif
+//**********************************************//
+//**********************************************//
+//**********************************************//
+//**********************************************//
+wire [15:0] rgb565;
+wire [15:0] pix_data ;
+wire [11:0] pix_x;
+wire [11:0] pix_y;
+//vga行场同步控制模块
+vga_ctrl  vga_ctrl_inst (
+    .vga_clk        (sys_clk        ),
+    .sys_rst_n      (rstn_out       ),
+    .pix_data       (pix_data       ),
+    .pix_x          (pix_x          ),
+    .pix_y          (pix_y          ),
+    .hsync          (hs_out         ),
+    .vsync          (vs_out         ),
+    .rgb_valid      (de_out         ),
+    .rgb            (rgb565         )
+  );
+//彩条数据生成模块
+vga_pic  vga_pic_inst (
+    .vga_clk        (sys_clk        ),
+    .sys_rst_n      (rstn_out       ),
+    .pix_x          (pix_x          ),
+    .pix_y          (pix_y          ),
+    .pix_data_out   (pix_data       )
+  );
+//RGB565转RGB888
+    assign pixclk_out   =  sys_clk    ;//直接使用27M时钟，与25.175相差不大
+    assign r_out = {rgb565[15:11],3'b0};
+    assign g_out = {rgb565[10: 5],2'b0};
+    assign b_out = {rgb565[ 4: 0],3'b0};
+endmodule
+```
+
+
+
+### 6.3.4仿真验证
+
+由于仿真不需要对MS7210芯片进行初始化，所以我们在top文件中加入条件编译指令，并且在仿真文件中定义SIM宏，那么就可以在仿真中不编译ms7210初始化相关代码，只对vga时序进行仿真。我们只需要提供时钟和复位，即可对模块进行仿真。仿真文件如下所示：
+
+```verilog
+`timescale 1ns / 1ns
+`define SIM
+module hdmi_top_tb;
+
+  // Parameters
+
+  //Ports
+  reg  sys_clk;
+  reg rstn_in;
+  wire rstn_out;
+  wire hd_scl;
+  wire hd_sda;
+  wire led_int;
+  wire pixclk_out;
+  wire  vs_out;
+  wire  hs_out;
+  wire  de_out;
+  wire [7:0] r_out;
+  wire [7:0] g_out;
+  wire [7:0] b_out;
+
+  initial begin
+    sys_clk = 0;
+    rstn_in = 0;
+    #100
+    rstn_in = 1;
+  end
+  always #(500/27) sys_clk = ~sys_clk;
+  hdmi_top  hdmi_top_inst (
+    .sys_clk(sys_clk),
+    .rstn_in(rstn_in),
+    .rstn_out(rstn_out),
+    .hd_scl(hd_scl),
+    .hd_sda(hd_sda),
+    .led_int(led_int),
+    .pixclk_out(pixclk_out),
+    .vs_out(vs_out),
+    .hs_out(hs_out),
+    .de_out(de_out),
+    .r_out(r_out),
+    .g_out(g_out),
+    .b_out(b_out)
+  );
+
+endmodule
+```
+
+直接点击sim文件夹下hebav文件夹中的do.bat文件即可利用ModuleSim对模块进行仿真，仿真波形如下：
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/10.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图10.仿真波形（一）	<!--标题-->
+    </center>
+</div>
+
+从上图我们可以发现vsync信号拉高了两个行同步信号的长度，与设计相符
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/11.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图11.仿真波形（二）	<!--标题-->
+    </center>
+</div>
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/12.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图12.仿真波形（三）	<!--标题-->
+    </center>
+</div>
+
+从图11和12中我们可以看到当cnt_h信号计数结束后会恢复0，cnt_v会加一，hsync信号会拉高96个像素时钟（0~95）cnt_h和hsync与设计相符。
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/13.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图13.仿真波形（四）	<!--标题-->
+    </center>
+</div>
+
+如图13所示，当cnt_h计数到H_SYNC + H_BACK + H_LEFT，也就是144时，rgb_valid拉高，xy轴坐标比rgb_valid提前一个时钟周期，以便pix_data准备好数据，符合设计。
+
+<div>			<!--块级封装-->
+    <center>	<!--将图片和文字居中-->
+    <img src="./images/14.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>		<!--换行-->
+    图14.仿真波形（五）	<!--标题-->
+    </center>
+</div>
+
+从每一行看，每一行被分成了10个部分，每部分像素数据分别对应不同颜色，符合设计要求。可以进行下一步上板验证。
+
+### 6.3.5上板验证
+
+仿真已经通过，可以进行上板验证，上板前要先进行管脚约束。端口与对应管脚如下表所示：
+| 端口名称 |信号类型| 对应管脚|功能|
+|:----:|:----:|:----:|:----:|
+| sysclk | Input | D18 | 27M时钟 |
+|  rstn_in   | Input | C22 | 外部输入复位 |
+| rstn_out | Output | G25 | 输出ms7210复位 |
+| hd_scl | Output | K22 | iic SCL信号 |
+| hd_sda | Output | K23 | iic SDA信号 |
+| led_int | Output | A20 | 配置完成信号 |
+| pixclk_out | Output | G25 | 像素时钟输出 |
+| vs_out | Output | R21 | Vsync输出 |
+| hs_out | Output | R20 | Hsync输出 |
+| de_out | Output | N19 | RGB_valid输出 |
+| r_out[0] | Output | N21 | RGB888输出 |
+| r_out[1] | Output | L23 | RGB888输出 |
+| r_out[2] | Output | L22 | RGB888输出 |
+| r_out[3] | Output | L25 | RGB888输出 |
+| r_out[4] | Output | L24 | RGB888输出 |
+| r_out[5] | Output | K26 | RGB888输出 |
+| r_out[6] | Output | K25 | RGB888输出 |
+| r_out[7] | Output | P16 | RGB888输出 |
+| g_out[0] | Output | T25 | RGB888输出 |
+| g_out[1] | Output | P25 | RGB888输出 |
+| g_out[2] | Output | R25 | RGB888输出 |
+| g_out[3] | Output | P24 | RGB888输出 |
+| g_out[4] | Output | P23 | RGB888输出 |
+| g_out[5] | Output | N24 | RGB888输出 |
+| g_out[6] | Output | N23 | RGB888输出 |
+| g_out[7] | Output | N22 | RGB888输出 |
+| b_out[0] | Output | P19 | RGB888输出 |
+| b_out[1] | Output | P21 | RGB888输出 |
+| b_out[2] | Output | P20 | RGB888输出 |
+| b_out[3] | Output | M22 | RGB888输出 |
+| b_out[4] | Output | M21 | RGB888输出 |
+| b_out[5] | Output | N18 | RGB888输出 |
+| b_out[6] | Output | R22 | RGB888输出 |
+| b_out[7] | Output | T22 | RGB888输出 |
+
+
+管脚分配可以直接编写.fdc文件，也可以使用PDS内置的工具进行分配。完成管脚分配之后就可以生成sbit文件，将文件提交到网站后点击烧录，即可将sbit下载到实验板中，在摄像头页面即可观察到显示屏中显示出彩条。
+
+## 6.4 章末总结
+
+本次实验主要学习VGA时序的相关知识，并使用HD硬核进行HDMI显示，感兴趣的同学可以尝试使用HDMI显示其他图像。
--- a/public/doc/06/images/1.png
+++ b/public/doc/06/images/1.png
--- a/public/doc/06/images/10.png
+++ b/public/doc/06/images/10.png
--- a/public/doc/06/images/11.png
+++ b/public/doc/06/images/11.png
--- a/public/doc/06/images/12.png
+++ b/public/doc/06/images/12.png
--- a/public/doc/06/images/13.png
+++ b/public/doc/06/images/13.png
--- a/public/doc/06/images/14.png
+++ b/public/doc/06/images/14.png
--- a/public/doc/06/images/2.png
+++ b/public/doc/06/images/2.png
--- a/public/doc/06/images/3.png
+++ b/public/doc/06/images/3.png
--- a/public/doc/06/images/4.png
+++ b/public/doc/06/images/4.png
--- a/public/doc/06/images/5.png
+++ b/public/doc/06/images/5.png
--- a/public/doc/06/images/6.png
+++ b/public/doc/06/images/6.png
--- a/public/doc/06/images/7.png
+++ b/public/doc/06/images/7.png
--- a/public/doc/06/images/8.png
+++ b/public/doc/06/images/8.png
--- a/public/doc/06/images/9.png
+++ b/public/doc/06/images/9.png
--- a/public/doc/11/cover.png
+++ b/public/doc/11/cover.png
--- a/public/doc/11/doc.md
+++ b/public/doc/11/doc.md
@@ -0,0 +1,400 @@
+# 进阶-1-密码锁实验
+
+## 1.1 章节导读
+本章作为进阶的第一个实验，主要学习状态机的写法和使用，同时联系前面所学的数码管和矩阵键盘，完成一个密码锁的设计。
+
+
+## 1.2 理论学习
+### 1.2.1 FSM状态机
+
+在数字逻辑设计中，**有限状态机（FSM, Finite State Machine）**是一种根据输入和当前状态决定下一个状态和输出的模型，广泛用于顺序逻辑电路的控制部分。
+
+在本实验中，我们将使用 FSM 构建密码锁的控制逻辑，用于管理**按键输入过程、密码比对、开锁显示、错误处理等多个步骤**。
+
+FSM 通常包含以下几个组成部分：
+
+- **状态定义（State）**：用来描述系统当前所处的逻辑阶段。例如：待输入、输入中、校验中、成功、失败等。
+
+- **状态转移条件（Transition）**：根据输入信号（如按键、定时器、复位）从一个状态跳转到另一个状态。
+
+- **输出控制（Output）**：每个状态下系统应有的行为，比如更新数码管、检测密码、拉高开锁信号等。
+
+常见的 FSM 类型包括：
+
+- **Moore 状态机：**输出只与当前状态有关，结构更稳定；
+- **Mealy 状态机：**输出与当前状态和输入有关，反应更灵敏。
+
+在本例中我们要设计一个状态机去对密码锁进行控制。首先我们应该先给密码锁分一下他会处于什么状态，每个状态有什么输出（本例中将密码锁设计成下述4个状态）：
+
+1. SETUP状态：该状态下可以设置4位密码，输入4位数字后按#键设置密码有效，*清空设置，数码管输出4位数字输入
+2. LOCK状态：锁定状态，可以输入密码解锁，按#确定，*键清空输入，数码管输出4位数字输入
+3. ERROR状态：如果输入密码错误，或者操作错误，进入此状态，数码管输出ERROR
+4. UNLOCK状态：解锁状态，可以按*重设密码，也可以按#重新锁定，数码管输出UNLOCK
+
+然后确定状态之间如何进行转移：
+
+1. SETUP状态：输入4位数字后按#键设置密码有效，有效后进入LOCK状态
+2. LOCK状态：输入密码，按#确定后如果密码正确进入UNLOCK状态，如果错误进入ERROR状态
+3. ERROR状态：按下任意按键后进入LOCK状态
+4. UNLOCK状态：按下#键进入LOCK状态，按*键进入SETUP状态重设密码
+
+根据上述状态转移逻辑，我们可以画出状态转移图，状态转移图如下图所示：
+
+<div>           <!--块级封装-->
+    <center>    <!--将图片和文字居中-->
+    <img src="./images/1.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:100%"/>
+    <br>        <!--换行-->
+    图1.状态转移图  <!--标题-->
+    </center>
+</div>
+
+我们已经了解了本次实验所使用的状态机，那么如何使用verilog编写状态机呢？主要有三种方法，分别是：三段式状态机，二段式状态机，一段式状态机。
+
+三段式状态机写法如下：
+
+- 状态机第一段，时序逻辑，非阻塞赋值，传递寄存器的状态。
+- 状态机第二段，组合逻辑，阻塞赋值，根据当前状态和当前输入，确定下一个状态机的状态。
+- 状态机第三代，时序逻辑，非阻塞赋值，因为是 Mealy 型状态机，根据当前状态和当前输入，确定输出信号。
+
+二段式状态机将三段式状态机二三段糅合在一起，一段式状态机则将三段式状态机三段融合。推荐使用三段式状态机，只有在状态转移逻辑非常简单，状态很少时会采用一段式状态机。
+
+### 1.2.2 数码管
+
+见基础实验3
+
+### 1.2.3 矩阵键盘
+
+见基础实验4
+
+## 1.3 实战演练
+### 1.3.1 系统架构
+``` verilog
+系统框图：
+```
+
+### 1.3.2 模块设计
+首先是密码锁状态机逻辑，本例采用三段式状态机写法。代码如下：
+
+#### password_lock
+
+```verilog
+module password_lock(
+    input  wire clk,
+    input  wire rstn,
+    input  wire [15:0] key_trigger,
+    output  reg [8*8-1:0] assic_seg,
+    output wire [7:0] seg_point
+);
+
+/*
+    K00   K01   K02   K03   |   1   2   3   A
+                            |
+    K04   K05   K06   K07   |   4   5   6   B   
+                            |
+    K08   K09   K10   K11   |   7   8   9   C
+                            |
+    K12   K13   K14   K15   |   *   0   #   D
+*/
+
+/*
+密码锁状态机设定：
+1. SETUP状态 ：设置密码，按*清空输入，按#确认输入进入LOCK状态，不足4位#键无效
+2. LOCK状态  ：锁定状态，按*清空输入，按#确认输入，不足4位#键无效，密码正确解锁，错误则进入ERROR状态
+3. ERROR状态 ：密码错误状态，按任意键返回LCOK状态
+4. UNLOCK状态：解锁状态，按*重设密码，按#重新锁定，其余键无效
+
+1-D键为输入
+*为清空之前的输入
+#为确认输入
+
+*/
+
+wire flag_setup_password;
+wire flag_input_pass;
+wire flag_input_confirm;
+wire flag_error_return;
+wire flag_relock;
+wire flag_reset;
+
+localparam [2:0] ST_SETUP  = 3'b001;
+localparam [2:0] ST_LOCK   = 3'b010;
+localparam [2:0] ST_ERROR  = 3'b100;
+localparam [2:0] ST_UNLOCK = 3'b101;
+
+reg [2:0] cu_st, nt_st;
+reg [4*4-1:0] password, input_password;
+reg [2:0] input_num;
+
+assign flag_setup_password = (cu_st == ST_SETUP) && (key_trigger[14]) && (input_num == 3'b100);
+assign flag_input_confirm  = (cu_st == ST_LOCK) && (key_trigger[14]) && (input_num == 3'b100);
+assign flag_input_pass     = (cu_st == ST_LOCK) && (password == input_password) && (input_num == 3'b100);
+assign flag_error_return   = (cu_st == ST_ERROR) && (|key_trigger);
+assign flag_relock         = (cu_st == ST_UNLOCK) && (key_trigger[14]);
+assign flag_reset          = (cu_st == ST_UNLOCK) && (key_trigger[12]);
+//状态机第一段，传递寄存器状态
+always @(posedge clk or negedge rstn) begin
+    if(~rstn) cu_st <= ST_SETUP;
+    else cu_st <= nt_st;
+end
+//状态机第二段，确定下一个状态机状态
+always @(*) begin
+    case(cu_st)
+        ST_SETUP : nt_st <= (flag_setup_password)?(ST_LOCK):(ST_SETUP);
+        ST_LOCK  : nt_st <= (flag_input_confirm)?((flag_input_pass)?(ST_UNLOCK):(ST_ERROR)):(ST_LOCK);
+        ST_ERROR : nt_st <= (flag_error_return)?(ST_LOCK):(ST_ERROR);
+        ST_UNLOCK: nt_st <= (flag_relock)?(ST_LOCK):((flag_reset)?(ST_SETUP):(ST_UNLOCK));
+        default  : nt_st <= ST_SETUP;
+    endcase
+end
+//状态机第三段，根据状态和输入确定输出，这里由于信号较多，分了多个always块，也可以用case语句写在同一个always块中
+always @(posedge clk or negedge rstn) begin
+    if(~rstn) password <= 0;
+    else if((cu_st == ST_SETUP) && (input_num != 3'b100)) begin
+             if(key_trigger[00]) password <= {password[0+:3*4], 4'h1};
+        else if(key_trigger[01]) password <= {password[0+:3*4], 4'h2};
+        else if(key_trigger[02]) password <= {password[0+:3*4], 4'h3};
+        else if(key_trigger[03]) password <= {password[0+:3*4], 4'hA};
+        else if(key_trigger[04]) password <= {password[0+:3*4], 4'h4};
+        else if(key_trigger[05]) password <= {password[0+:3*4], 4'h5};
+        else if(key_trigger[06]) password <= {password[0+:3*4], 4'h6};
+        else if(key_trigger[07]) password <= {password[0+:3*4], 4'hB};
+        else if(key_trigger[08]) password <= {password[0+:3*4], 4'h7};
+        else if(key_trigger[09]) password <= {password[0+:3*4], 4'h8};
+        else if(key_trigger[10]) password <= {password[0+:3*4], 4'h9};
+        else if(key_trigger[11]) password <= {password[0+:3*4], 4'hC};
+        else if(key_trigger[12]) password <= 0;
+        else if(key_trigger[13]) password <= {password[0+:3*4], 4'h0};
+        else if(key_trigger[14]) password <= password;
+        else if(key_trigger[15]) password <= {password[0+:3*4], 4'hD};
+        else password <= password;
+    end else password <= password;
+end
+
+always @(posedge clk or negedge rstn) begin
+    if(~rstn) input_password <= 0;
+    else if(cu_st == ST_LOCK) begin
+        if(input_num == 3'b100) input_password <= input_password;
+        else if(key_trigger[00]) input_password <= {input_password[0+:3*4], 4'h1};
+        else if(key_trigger[01]) input_password <= {input_password[0+:3*4], 4'h2};
+        else if(key_trigger[02]) input_password <= {input_password[0+:3*4], 4'h3};
+        else if(key_trigger[03]) input_password <= {input_password[0+:3*4], 4'hA};
+        else if(key_trigger[04]) input_password <= {input_password[0+:3*4], 4'h4};
+        else if(key_trigger[05]) input_password <= {input_password[0+:3*4], 4'h5};
+        else if(key_trigger[06]) input_password <= {input_password[0+:3*4], 4'h6};
+        else if(key_trigger[07]) input_password <= {input_password[0+:3*4], 4'hB};
+        else if(key_trigger[08]) input_password <= {input_password[0+:3*4], 4'h7};
+        else if(key_trigger[09]) input_password <= {input_password[0+:3*4], 4'h8};
+        else if(key_trigger[10]) input_password <= {input_password[0+:3*4], 4'h9};
+        else if(key_trigger[11]) input_password <= {input_password[0+:3*4], 4'hC};
+        else if(key_trigger[12]) input_password <= 0;
+        else if(key_trigger[13]) input_password <= {input_password[0+:3*4], 4'h0};
+        else if(key_trigger[14]) input_password <= input_password;
+        else if(key_trigger[15]) input_password <= {input_password[0+:3*4], 4'hD};
+        else input_password <= input_password;
+    end else input_password <= 0;
+end
+
+always @(posedge clk or negedge rstn) begin
+    if(~rstn) input_num <= 0;
+    else if(cu_st == ST_SETUP || cu_st == ST_LOCK) begin
+        if(flag_setup_password || flag_input_confirm) input_num <= 0;
+        else if(key_trigger[00] || key_trigger[01] || key_trigger[02] || key_trigger[03] ||
+           key_trigger[04] || key_trigger[05] || key_trigger[06] || key_trigger[07] ||
+           key_trigger[08] || key_trigger[09] || key_trigger[10] || key_trigger[11] ||
+                              key_trigger[13]                    || key_trigger[15])
+            input_num <= (input_num < 3'b100)?(input_num + 1):(input_num);
+        else if(key_trigger[12]) input_num <= 0;
+        else input_num <= input_num;
+    end else input_num <= 0;
+end
+
+assign seg_point = 8'b0;
+always @(posedge clk or negedge rstn) begin
+    if(~rstn) assic_seg <= "12345678";
+    else case(cu_st)
+        ST_SETUP :begin
+            assic_seg[0+:8] <= "-";
+            assic_seg[8+:8] <= "-";
+            assic_seg[16+:8] <= (input_num > 0)?(hex2assic(password[0+:4])):("_");
+            assic_seg[24+:8] <= (input_num > 1)?(hex2assic(password[4+:4])):("_");
+            assic_seg[32+:8] <= (input_num > 2)?(hex2assic(password[8+:4])):("_");
+            assic_seg[40+:8] <= (input_num > 3)?(hex2assic(password[12+:4])):("_");
+            assic_seg[48+:8] <= "-";
+            assic_seg[56+:8] <= "-";
+        end
+        ST_LOCK  :begin
+            assic_seg[0+:8] <= "=";
+            assic_seg[8+:8] <= "=";
+            assic_seg[16+:8] <= (input_num > 0)?(hex2assic(input_password[0+:4])):("-");
+            assic_seg[24+:8] <= (input_num > 1)?(hex2assic(input_password[4+:4])):("-");
+            assic_seg[32+:8] <= (input_num > 2)?(hex2assic(input_password[8+:4])):("-");
+            assic_seg[40+:8] <= (input_num > 3)?(hex2assic(input_password[12+:4])):("-");
+            assic_seg[48+:8] <= "=";
+            assic_seg[56+:8] <= "=";
+        end
+        ST_ERROR : assic_seg <= "  ERROR ";
+        ST_UNLOCK: assic_seg <= " unlock ";
+        default  : assic_seg <= "12345678";
+    endcase
+end
+
+
+function [7:0] hex2assic;
+    input [3:0] hex;
+    case(hex)
+        4'h0: hex2assic = "0"; // 0
+        4'h1: hex2assic = "1"; // 1
+        4'h2: hex2assic = "2"; // 2
+        4'h3: hex2assic = "3"; // 3
+        4'h4: hex2assic = "4"; // 4
+        4'h5: hex2assic = "5"; // 5
+        4'h6: hex2assic = "6"; // 6
+        4'h7: hex2assic = "7"; // 7
+        4'h8: hex2assic = "8"; // 8
+        4'h9: hex2assic = "9"; // 9
+        4'hA: hex2assic = "A"; // A
+        4'hB: hex2assic = "B"; // B
+        4'hC: hex2assic = "C"; // C
+        4'hD: hex2assic = "D"; // D
+        4'hE: hex2assic = "E"; // E
+        4'hF: hex2assic = "F"; // F
+        default: hex2assic = " ";
+    endcase
+endfunction
+
+endmodule //password_lock
+```
+
+矩阵键盘行扫描模块在前面基础实验已经介绍过，但这次实验还需要为矩阵键盘添加按键上升沿检测模块，代码如下：
+
+#### matrix_key_trigger
+
+```verilog
+module matrix_key_trigger(
+    input  wire clk,
+    input  wire rstn,
+    input  wire [15:0] key,
+    output wire [15:0] key_trigger
+);
+
+// 按键上升沿捕获模块
+
+reg [15:0] key_d; // 上一时钟周期的按键状态
+reg [15:0] key_d2; // 上两时钟周期的按键状态
+
+assign key_trigger = (key_d) & (~key_d2);
+
+always @(posedge clk or negedge rstn) begin
+    if (!rstn) begin
+        key_d <= 0;
+        key_d2 <= 0;
+    end else begin
+        key_d <= key;
+        key_d2 <= key_d;
+    end
+end
+
+endmodule //matrix_key_decode
+```
+
+至于数码管模块，为了方便，在led_display_driver模块添加了参数定义，并未进行其他修改。
+
+最后将几个模块例化在顶层，将端口相连接，代码如下所示：
+
+#### password_lock_top
+
+```verilog
+
+module password_lock_top #(
+    parameter VALID_SIGNAL = 1'b0,
+    parameter CLK_CYCLE = 5000
+)(
+//system io
+input  wire       external_clk ,
+input  wire       external_rstn,
+
+output wire [7:0] led_display_seg,
+output wire [7:0] led_display_sel,
+
+input  wire [3:0] col,
+output wire [3:0] row
+);
+
+wire [15:0] key_out;
+wire [15:0] key_trigger;
+wire [8*8-1:0] assic_seg;
+wire [7:0] seg_point;
+
+led_display_driver #(
+    .VALID_SIGNAL (VALID_SIGNAL),
+    .CLK_CYCLE (CLK_CYCLE)
+)u_led_display_driver(
+	.clk             	( external_clk    ),
+	.rstn            	( external_rstn   ),
+	.assic_seg       	( assic_seg       ),
+	.seg_point       	( seg_point       ),
+	.led_display_seg 	( led_display_seg ),
+	.led_display_sel 	( led_display_sel )
+);
+
+matrix_key #(
+	.ROW_NUM       	( 4     ),
+	.COL_NUM       	( 4     ),
+	.DEBOUNCE_TIME 	( 10000 ),
+	.DELAY_TIME    	( 2000  ))
+u_matrix_key(
+	.clk     	( external_clk  ),
+	.rstn    	( external_rstn ),
+	.row     	( row           ),
+	.col     	( col           ),
+	.key_out 	( key_out       )
+);
+
+matrix_key_trigger u_matrix_key_trigger(
+	.clk         	( external_clk ),
+	.rstn        	( external_rstn),
+	.key         	( key_out      ),
+	.key_trigger 	( key_trigger  )
+);
+
+password_lock u_password_lock(
+    .clk         	( external_clk ),
+    .rstn        	( external_rstn),
+    .key_trigger 	( key_trigger  ),
+    .assic_seg   	( assic_seg    ),
+	.seg_point   	( seg_point    )
+);
+
+endmodule //led_diaplay_top
+
+```
+
+### 1.3.3 上板验证步骤
+
+---
+
+可以直接将矩阵键盘，数码管的管脚约束文件中的约束复制到本次实验的管脚约束文件中。
+
+将生成的sbit文件烧录好后，即可使用网页界面的虚拟按键进行使用。
+
+## 1.4 章末总结
+
+本章通过设计一个简易密码锁系统，综合运用了前面基础实验中学习的**矩阵键盘扫描**、**数码管显示**等知识，并引入了**有限状态机（FSM）**的设计方法，完成了一个具有较强工程实用性的综合实验。
+
+通过本实验，你应该掌握了以下几点核心能力：
+
+- 理解并运用 状态机进行系统流程控制；
+- 将多个功能模块（键盘、数码管、比较器）整合为一个完整系统；
+- 设计基于状态的控制逻辑，实现密码输入、校验、反馈显示等功能；
+- 理解数字电路系统中控制与数据路径的分离思想。
+
+密码锁系统虽然逻辑简单，但已经具备了完整嵌入式控制系统的基本结构，是后续更复杂项目设计的重要基础。
+
+## 1.5 拓展训练
+
+为了进一步加深对本实验内容的理解，并锻炼系统设计与工程实现能力，你可以尝试完成以下拓展任务：
+
+1. **增加防爆破机制**：限定密码错误尝试次数，例如连续三次错误后锁定一段时间，并在数码管上提示“Err”。
+2. **利用按键实现简易菜单系统**拓展状态机结构，允许通过矩阵键盘导航菜单，如“输入密码”、“查看状态”、“设置新密码”等。
--- a/public/doc/11/images/1.png
+++ b/public/doc/11/images/1.png
--- a/public/doc/11/images/UDP.png
+++ b/public/doc/11/images/UDP.png
--- a/public/doc/12/doc.md
+++ b/public/doc/12/doc.md
--- a/public/doc/12/images/1.jfif
+++ b/public/doc/12/images/1.jfif
--- a/public/doc/12/images/2.png
+++ b/public/doc/12/images/2.png
--- a/public/doc/12/images/3.jpg
+++ b/public/doc/12/images/3.jpg
--- a/public/doc/12/images/4.png
+++ b/public/doc/12/images/4.png
--- a/public/doc/12/images/5.jpg
+++ b/public/doc/12/images/5.jpg
--- a/public/doc/12/images/6.png
+++ b/public/doc/12/images/6.png
--- a/public/doc/12/images/7.png
+++ b/public/doc/12/images/7.png
--- a/public/doc/12/images/8.png
+++ b/public/doc/12/images/8.png
--- a/public/doc/13/cover.png
+++ b/public/doc/13/cover.png
--- a/public/doc/13/doc.md
+++ b/public/doc/13/doc.md
@@ -0,0 +1,350 @@
+# 进阶-3-频率计
+
+## 3.1 章节导读
+
+本实验将基于实验平台设计并实现一个简易频率计，用于测量输入信号的频率值，并通过数码管进行实时显示。实验核心是掌握ADC模块的使用方法，被测信号频率的获取方法及其在数字系统中的处理流程。
+
+## 3.2 理论学习
+
+### 3.2.1 ADC模块
+
+实验平台有一块8bit高速ADDA模块，其中ADC模块使用AD9280芯片，支持最高32MSPS的速率，模拟电压输入范围为-5~+5V，ADC模块可以根据输入电压的大小将其转换为0~255（2的8次方）的数值。模块有一个clk管脚和8个data管脚，data的输入速率和驱动时钟有关，给clk管脚的驱动时钟越快，采样率越高，data的输入速率越高。
+
+<div>           <!--块级封装-->
+    <center>    <!--将图片和文字居中-->
+    <img src="./images/1.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:30%"/>
+    <br>        <!--换行-->
+    图1.ADDA模块示意图   <!--标题-->
+    </center>
+</div>
+
+### 3.2.2 数码管模块
+
+数码管模块在前面基础实验3已经介绍过，这里不再赘述。
+
+## 3.3 实战演练
+
+### 3.3.1实验目标
+
+能够驱动板载ADC模块，对ADC模块的输入数据进行测试，计算输入信号的频率值，并在数码管模块中显示。
+
+### 3.3.2硬件资源
+
+实验所需的信号源来自我们的实验平台，实验平台集成一个以FPGA为基础的dds信号发生器，该dds信号发生器可以输出频率可调的方波，正弦波，三角波，锯齿波等，用户可以在web平台使用并且改变输出波形和频率。
+
+<div>           <!--块级封装-->
+    <center>    <!--将图片和文字居中-->
+    <img src="./images/2.png"
+         alt="无法显示图片时显示的文字"
+         style="zoom:30%"/>
+    <br>        <!--换行-->
+    图2.ADDA实验示意图   <!--标题-->
+    </center>
+</div>
+
+用户接收到信号源之后需自行设计逻辑处理数据并显示。
+
+### 3.3.3程序设计
+
+#### pulse_gen.v
+
+首先用户接收到的是8bit波形数据，要直接利用波形数据计算频率不是很方便，计算频率数据，我们只需要计算其脉冲的个数即可，所以我们设计一个模块，通过设计一个脉冲阈值trig_level，高于阈值的就计算为一次脉冲，输出一个周期的高电平方便后续模块计数，模块代码如下：
+
+```verilog
+module pulse_gen(
+    input           rstn,      //系统复位，低电平有效
+    
+    input  [7:0]    trig_level,
+    input           ad_clk,     //AD9280驱动时钟
+    input  [7:0]    ad_data,    //AD输入数据
+    
+    output          ad_pulse    //输出的脉冲信号
+);
+//因为可能会有抖动，设置一个范围值避免反复触发
+parameter THR_DATA = 3;
+
+//reg define
+reg          pulse;
+reg          pulse_delay;
+
+//*****************************************************
+//**                    main code
+//*****************************************************
+
+assign ad_pulse = pulse & pulse_delay;
+
+//根据触发电平，将输入的AD采样值转换成高低电平
+always @ (posedge ad_clk or negedge rstn)begin
+    if(!rstn)
+        pulse <= 1'b0;
+    else begin
+        if((trig_level >= THR_DATA) && (ad_data < trig_level - THR_DATA))
+            pulse <= 1'b0;
+        else if(ad_data > trig_level + THR_DATA)
+            pulse <= 1'b1;
+    end    
+end
+
+//延时一个时钟周期，用于消除抖动
+always @ (posedge ad_clk or negedge rstn)begin
+    if(!rstn)
+        pulse_delay <= 1'b0;
+    else
+        pulse_delay <= pulse;
+end
+
+endmodule 
+```
+
+#### cymometer.v
+
+下面根据pulse_gen信号生成的脉冲数据进行计数，计算其频率。我们这里采用门控时钟法，用 `clk_fs`（参考时钟）作为时间基准，测量 `clk_fx`（被测信号）的频率。
+
+门控时钟法的原理很简单，也就是在一个**固定时间窗内**（即门控时间 `GATE_TIME`），**计数被测时钟 clk_fx 的上升沿次数**，再结合参考时钟 `clk_fs` 的计数值，就可以算出频率：
+$$
+\text{频率} = \frac{\text{被测脉冲数量}}{\text{门控时间（秒）}} = \frac{fx\_cnt}{fs\_cnt / \text{CLK\_FS}} = \frac{\text{CLK\_FS} \times fx\_cnt}{fs\_cnt}
+$$
+
+| 步骤 | 描述                                                         |
+| ---- | ------------------------------------------------------------ |
+| **1**    | 使用 `clk_fx` 作为计数时钟，控制一个门控时间 `gate` 信号     |
+|  **2**     | 当 `gate` 为高电平时，`fx_cnt_temp` 开始统计 `clk_fx` 的脉冲个数 |
+|  **3**      | 同时将 `gate` 同步到参考时钟 `clk_fs`，并计数 `fs_cnt_temp`，记录 `gate` 高电平持续期间 `clk_fs` 的个数 |
+|  **4**     | 一旦 `gate` 下降沿到来（通过打拍检测），将计数值冻结到 `fx_cnt` 和 `fs_cnt` 中 |
+|  **5**     | 最后用上述表达式计算频率输出。                          |
+
+代码设计如下：
+
+```verilog
+module cymometer
+   #(parameter    CLK_FS = 26'd50_000_000) // 基准时钟频率值
+    (   //system clock
+        input                 clk_fs ,     // 基准时钟信号
+        input                 rstn  ,     // 复位信号
+
+        //cymometer interface
+        input                 clk_fx ,     // 被测时钟信号
+        output   reg [19:0]   data_fx      // 被测时钟频率输出
+);
+
+//parameter define
+localparam   MAX       =  30;              // 定义fs_cnt、fx_cnt的最大位宽
+localparam   GATE_TIME = 16'd2_000;        // 门控时间设置
+
+//reg define
+reg                gate        ;           // 门控信号
+reg                gate_fs     ;           // 同步到基准时钟的门控信号
+reg                gate_fs_r   ;           // 用于同步gate信号的寄存器
+reg                gate_fs_d0  ;           // 用于采集基准时钟下gate下降沿
+reg                gate_fs_d1  ;           // 
+reg                gate_fx_d0  ;           // 用于采集被测时钟下gate下降沿
+reg                gate_fx_d1  ;           // 
+reg    [   58:0]   data_fx_t    ;          // 
+reg    [   15:0]   gate_cnt    ;           // 门控计数
+reg    [MAX-1:0]   fs_cnt      ;           // 门控时间内基准时钟的计数值
+reg    [MAX-1:0]   fs_cnt_temp ;           // fs_cnt 临时值
+reg    [MAX-1:0]   fx_cnt      ;           // 门控时间内被测时钟的计数值
+reg    [MAX-1:0]   fx_cnt_temp ;           // fx_cnt 临时值
+
+//wire define
+wire               neg_gate_fs;            // 基准时钟下门控信号下降沿
+wire               neg_gate_fx;            // 被测时钟下门控信号下降沿
+
+//*****************************************************
+//**                    main code
+//*****************************************************
+
+//边沿检测，捕获信号下降沿
+assign neg_gate_fs = gate_fs_d1 & (~gate_fs_d0);
+assign neg_gate_fx = gate_fx_d1 & (~gate_fx_d0);
+
+//门控信号计数器，使用被测时钟计数
+always @(posedge clk_fx or negedge rstn) begin
+    if(!rstn)
+        gate_cnt <= 16'd0; 
+    else if(gate_cnt == GATE_TIME + 5'd20)
+        gate_cnt <= 16'd0;
+    else
+        gate_cnt <= gate_cnt + 1'b1;
+end
+
+//门控信号，拉高时间为GATE_TIME个实测时钟周期
+always @(posedge clk_fx or negedge rstn) begin
+    if(!rstn)
+        gate <= 1'b0;
+    else if(gate_cnt < 4'd10)
+        gate <= 1'b0;     
+    else if(gate_cnt < GATE_TIME + 4'd10)
+        gate <= 1'b1;
+    else if(gate_cnt <= GATE_TIME + 5'd20)
+        gate <= 1'b0;
+    else 
+        gate <= 1'b0;
+end
+
+//将门控信号同步到基准时钟下
+always @(posedge clk_fs or negedge rstn) begin
+    if(!rstn) begin
+        gate_fs_r <= 1'b0;
+        gate_fs   <= 1'b0;
+    end
+    else begin
+        gate_fs_r <= gate;
+        gate_fs   <= gate_fs_r;
+    end
+end
+
+//打拍采门控信号的下降沿（被测时钟下）
+always @(posedge clk_fx or negedge rstn) begin
+    if(!rstn) begin
+        gate_fx_d0 <= 1'b0;
+        gate_fx_d1 <= 1'b0;
+    end
+    else begin
+        gate_fx_d0 <= gate;
+        gate_fx_d1 <= gate_fx_d0;
+    end
+end
+
+//打拍采门控信号的下降沿（基准时钟下）
+always @(posedge clk_fs or negedge rstn) begin
+    if(!rstn) begin
+        gate_fs_d0 <= 1'b0;
+        gate_fs_d1 <= 1'b0;
+    end
+    else begin
+        gate_fs_d0 <= gate_fs;
+        gate_fs_d1 <= gate_fs_d0;
+    end
+end
+
+ //门控时间内对被测时钟计数
+always @(posedge clk_fx or negedge rstn) begin
+    if(!rstn) begin
+        fx_cnt_temp <= 32'd0;
+        fx_cnt <= 32'd0;
+    end
+    else if(gate)
+        fx_cnt_temp <= fx_cnt_temp + 1'b1;
+    else if(neg_gate_fx) begin
+        fx_cnt_temp <= 32'd0;
+        fx_cnt   <= fx_cnt_temp;
+    end
+end 
+
+//门控时间内对基准时钟计数
+always @(posedge clk_fs or negedge rstn) begin
+    if(!rstn) begin
+        fs_cnt_temp <= 32'd0;
+        fs_cnt <= 32'd0;
+    end
+    else if(gate_fs)
+        fs_cnt_temp <= fs_cnt_temp + 1'b1;
+    else if(neg_gate_fs) begin
+        fs_cnt_temp <= 32'd0;
+        fs_cnt <= fs_cnt_temp;
+    end
+end
+
+//计算被测信号频率
+always @(posedge clk_fs or negedge rstn) begin
+    if(!rstn) begin
+        data_fx_t <= 1'b0;
+    end
+    else if(gate_fs == 1'b0)
+        data_fx_t <= CLK_FS * fx_cnt ;
+end
+
+always @(posedge clk_fs or negedge rstn) begin
+    if(!rstn) begin
+        data_fx <= 20'd0;
+    end
+    else if(gate_fs == 1'b0)
+        data_fx <= data_fx_t / fs_cnt ;
+end
+
+endmodule 
+```
+
+#### frequency_meter.v
+
+由于之前基础实验设计过数码管显示模块，本次实验不在赘述，但因为数码管模块是输入ascii码进行显示的，而现在输出频率数据是一个20bit的二进制数，所以我们应该先想办法将二进制转成ascii码再连接数码管模块进行显示。BCD转ascii码通过查表的方式即可完成。但二进制转BCD码的算法不是特别简单，之后会在基础实验部分讲解。
+
+顶层模块代码如下：
+
+```verilog
+module frequency_meter(
+    input         clk,
+    input         rstn,       // 复位信号
+    output        ad_clk,     // AD时钟
+    input  [7:0]  ad_data,    // AD输入数据
+    output [7:0]  led_display_seg,
+    output wire [7:0] led_display_sel
+);
+wire ad_pulse;
+wire [19:0] data_fx;
+wire [25:0] bcd;
+wire [31:0] data_bcd;
+wire [63:0] asciidata;
+assign data_bcd = {6'b00,bcd};
+//生成ad驱动时钟，由于使用杜邦线连接，ad_clk不要超过10M
+PLL PLLinst(
+    .clkout0(ad_clk),    // output 10M
+    .lock(),
+    .clkin1(clk)       // input
+);
+
+pulse_gen  pulse_gen_inst (
+    .rstn(rstn),
+    .trig_level(8'd128),
+    .ad_clk(ad_clk),
+    .ad_data(ad_data),
+    .ad_pulse(ad_pulse)
+  );
+
+cymometer # (
+    .CLK_FS(32'd27_000_000)
+  )
+  cymometer_inst (
+    .clk_fs(clk),
+    .rstn(rstn),
+    .clk_fx(ad_pulse),
+    .data_fx(data_fx)
+  );
+//二进制转bcd码模块
+bin2bcd # (
+    .W(20)
+  )
+  bin2bcd_inst (
+    .bin(data_fx),
+    .bcd(bcd)
+  );
+//4位BCD码转ascii模块，例化8次使8个bcd同时输出ascii
+genvar i;
+generate
+  for (i = 0; i < 8; i = i + 1) begin : generate_module
+    bcd2ascii  bcd2ascii_inst (
+        .bcd(data_bcd[i*4 +:4]),
+        .asciidata(asciidata[i*8 +: 8])
+      );
+  end
+endgenerate
+//数码管显示模块
+led_display_driver  led_display_driver_inst (
+    .clk(clk),
+    .rstn(rstn),
+    .assic_seg(asciidata),
+    .seg_point(8'b00000000),
+    .led_display_seg(led_display_seg),
+    .led_display_sel(led_display_sel)
+  );
+endmodule
+```
+
+### 3.3.4仿真验证
+
+### 3.3.5上板验证
+
+## 3.4 章末总结
--- a/public/doc/13/images/1.jpg
+++ b/public/doc/13/images/1.jpg
--- a/public/doc/13/images/1.png
+++ b/public/doc/13/images/1.png
--- a/public/doc/13/images/2.png
+++ b/public/doc/13/images/2.png
--- a/server/Program.cs
+++ b/server/Program.cs
@@ -52,6 +52,7 @@ try
    {
        options.AddPolicy("Users", policy => policy
            .AllowAnyOrigin()
+            .AllowAnyHeader()
        );
    });

@@ -100,12 +101,6 @@ try
            FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "assets")),
            RequestPath = "/assets"
        });
-        // Public Files
-        app.UseStaticFiles(new StaticFileOptions
-        {
-            FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "EquipmentTemplates")),
-            RequestPath = "/public/EquipmentTemplates"
-        });
        // Log Files
        if (!Directory.Exists(Path.Combine(Directory.GetCurrentDirectory(), "log")))
        {
--- a/server/src/BsdlParser.cs
+++ b/server/src/BsdlParser.cs
@@ -26,7 +26,7 @@ public class BoundaryScanRegs
        /// </summary>
        [JsonProperty("cell_name")]
        [JsonRequired]
-        public string CellName { get; set; }
+        public string CellName { get; set; } = "UnknownCellName";

        /// <summary>
        /// [TODO:description]
@@ -146,7 +146,8 @@ public class Parser
    /// <returns>[TODO:return]</returns>
    public Optional<List<BoundaryScanRegs.CellEntry>> GetBoundaryLogicalPorts()
    {
-        var registers = this.BoundaryRegsDesp["registers"]?.ToList().Where((item)=>{
+        var registers = this.BoundaryRegsDesp["registers"]?.ToList().Where((item) =>
+        {
            return item["port_id"] is not null;
        });
        if (registers is null) return new();
--- a/server/src/Common.cs
+++ b/server/src/Common.cs
@@ -1,3 +1,4 @@
+using System.Collections;
 using DotNext;

 namespace Common
@@ -273,6 +274,21 @@ namespace Common
            return ((srcBits >> location) & ((UInt32)0b1)) == 1;
        }

+        /// <summary>
+        /// 将BitArray转化为32bits无符号整型
+        /// </summary>
+        /// <param name="bits">BitArray比特数组</param>
+        /// <returns>32bits无符号整型</returns>
+        public static Result<UInt32> BitsToNumber(BitArray bits)
+        {
+            if (bits.Length > 32)
+                throw new ArgumentException("Argument length shall be at most 32 bits.");
+
+            var array = new UInt32[1];
+            bits.CopyTo(array, 0);
+            return array[0];
+        }
+

        /// <summary>
        /// 字符串转二进制字节数组
--- a/server/src/Controllers.cs
+++ b/server/src/Controllers.cs
@@ -1,887 +0,0 @@
-using System.Net;
-using Common;
-using DotNext;
-using Microsoft.AspNetCore.Cors;
-using Microsoft.AspNetCore.Mvc;
-using Newtonsoft.Json;
-using WebProtocol;
-
-namespace server.Controllers;
-
-/// <summary>
-/// UDP API 
-/// </summary>
-[ApiController]
-[Route("api/[controller]")]
-public class UDPController : ControllerBase
-{
-    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
-
-    private const string LOCALHOST = "127.0.0.1";
-
-    /// <summary>
-    /// 页面
-    /// </summary>
-    [HttpGet]
-    public string Index()
-    {
-        return "This is UDP Controller";
-    }
-
-    /// <summary>
-    /// 发送字符串
-    /// </summary>
-    /// <param name="address">IPV4 或者 IPV6 地址</param>
-    /// <param name="port">设备端口号</param>
-    /// <param name="text">发送的文本</param>
-    /// <response code="200">发送成功</response>
-    /// <response code="500">发送失败</response>
-    [HttpPost("SendString")]
-    [ProducesResponseType(StatusCodes.Status200OK)]
-    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> SendString(string address = LOCALHOST, int port = 1234, string text = "Hello Server!")
-    {
-        var endPoint = new IPEndPoint(IPAddress.Parse(address), port);
-        var ret = await UDPClientPool.SendStringAsync(endPoint, [text]);
-
-        if (ret) { return TypedResults.Ok(); }
-        else { return TypedResults.InternalServerError(); }
-    }
-
-    /// <summary>
-    /// 发送二进制数据
-    /// </summary>
-    /// <param name="address" example="127.0.0.1">IPV4 或者 IPV6 地址</param>
-    /// <param name="port" example="1234">设备端口号</param>
-    /// <param name="bytes" example="FFFFAAAA">16进制文本</param>
-    [HttpPost("SendBytes")]
-    [ProducesResponseType(StatusCodes.Status200OK)]
-    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> SendBytes(string address, int port, string bytes)
-    {
-        var endPoint = new IPEndPoint(IPAddress.Parse(address), port);
-        var ret = await UDPClientPool.SendBytesAsync(endPoint, Number.StringToBytes(bytes));
-
-        if (ret) { return TypedResults.Ok(); }
-        else { return TypedResults.InternalServerError(); }
-    }
-
-
-    /// <summary>
-    /// 发送地址包
-    /// </summary>
-    /// <param name="address">IP地址</param>
-    /// <param name="port">UDP 端口号</param>
-    /// <param name="opts">地址包选项</param>
-    [HttpPost("SendAddrPackage")]
-    [ProducesResponseType(StatusCodes.Status200OK)]
-    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> SendAddrPackage(
-        string address,
-        int port,
-        [FromBody] SendAddrPackOptions opts)
-    {
-        var endPoint = new IPEndPoint(IPAddress.Parse(address), port);
-        var ret = await UDPClientPool.SendAddrPackAsync(endPoint, new WebProtocol.SendAddrPackage(opts));
-
-        if (ret) { return TypedResults.Ok(); }
-        else { return TypedResults.InternalServerError(); }
-    }
-
-    /// <summary>
-    /// 发送数据包
-    /// </summary>
-    /// <param name="address">IP地址</param>
-    /// <param name="port">UDP 端口号</param>
-    /// <param name="data">16进制数据</param>
-    [HttpPost("SendDataPackage")]
-    [ProducesResponseType(StatusCodes.Status200OK)]
-    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> SendDataPackage(string address, int port, string data)
-    {
-        var endPoint = new IPEndPoint(IPAddress.Parse(address), port);
-        var ret = await UDPClientPool.SendDataPackAsync(endPoint,
-            new WebProtocol.SendDataPackage(Number.StringToBytes(data)));
-
-        if (ret) { return TypedResults.Ok(); }
-        else { return TypedResults.InternalServerError(); }
-    }
-
-    /// <summary>
-    /// 获取指定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)
-    {
-        var ret = await MsgBus.UDPServer.GetDataArrayAsync(address);
-
-        if (ret.HasValue)
-        {
-            var dataJson = JsonConvert.SerializeObject(ret.Value);
-            logger.Debug($"Get Receive Successfully: {dataJson}");
-
-            return TypedResults.Ok(ret.Value);
-        }
-        else
-        {
-            logger.Debug("Get Receive Failed");
-            return TypedResults.InternalServerError();
-        }
-    }
-
-}
-
-/// <summary>
-/// Jtag API
-/// </summary>
-[ApiController]
-[Route("api/[controller]")]
-public class JtagController : ControllerBase
-{
-    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
-
-    private const string BITSTREAM_PATH = "bitstream/Jtag";
-
-    /// <summary>
-    /// 页面
-    /// </summary>
-    [HttpGet]
-    public string Index()
-    {
-        return "This is Jtag Controller";
-    }
-
-    /// <summary>
-    /// 获取Jtag ID Code
-    /// </summary>
-    /// <param name="address"> 设备地址 </param>
-    /// <param name="port"> 设备端口 </param>
-    [HttpGet("GetDeviceIDCode")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(uint), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> GetDeviceIDCode(string address, int port)
-    {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
-        var ret = await jtagCtrl.ReadIDCode();
-
-        if (ret.IsSuccessful)
-        {
-            logger.Info($"Get device {address} ID code: 0x{ret.Value:X4}");
-            return TypedResults.Ok(ret.Value);
-        }
-        else
-        {
-            logger.Error(ret.Error);
-            return TypedResults.InternalServerError(ret.Error);
-        }
-    }
-
-    /// <summary>
-    /// 获取状态寄存器
-    /// </summary>
-    /// <param name="address"> 设备地址 </param>
-    /// <param name="port"> 设备端口 </param>
-    [HttpGet("ReadStatusReg")]
-    [ProducesResponseType(StatusCodes.Status200OK)]
-    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> ReadStatusReg(string address, int port)
-    {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
-        var ret = await jtagCtrl.ReadStatusReg();
-
-        if (ret.IsSuccessful)
-        {
-            var binaryValue = Common.String.Reverse(Convert.ToString(ret.Value, 2).PadLeft(32, '0'));
-            var decodeValue = new JtagClient.JtagStatusReg(ret.Value);
-            logger.Info($"Read device {address} Status Register: \n\t 0b{binaryValue} \n\t {decodeValue}");
-            return TypedResults.Ok(new
-            {
-                original = ret.Value,
-                binaryValue,
-                decodeValue,
-            });
-        }
-        else
-        {
-            logger.Error(ret.Error);
-            return TypedResults.InternalServerError(ret.Error);
-        }
-    }
-
-    /// <summary>
-    /// 上传比特流文件
-    /// </summary>
-    /// <param name="address"> 设备地址 </param>
-    /// <param name="file">比特流文件</param>
-    [HttpPost("UploadBitstream")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
-    public async ValueTask<IResult> UploadBitstream(string address, IFormFile file)
-    {
-        if (file == null || file.Length == 0)
-            return TypedResults.BadRequest("未选择文件");
-
-        // 生成安全的文件名（避免路径遍历攻击）
-        var fileName = Path.GetRandomFileName();
-        var uploadsFolder = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
-
-        // 如果存在文件，则删除原文件再上传
-        if (Directory.Exists(uploadsFolder))
-        {
-            Directory.Delete(uploadsFolder, true);
-        }
-        Directory.CreateDirectory(uploadsFolder);
-
-        var filePath = Path.Combine(uploadsFolder, fileName);
-
-        using (var stream = new FileStream(filePath, FileMode.Create))
-        {
-            await file.CopyToAsync(stream);
-        }
-
-        logger.Info($"Device {address} Upload Bitstream Successfully");
-        return TypedResults.Ok(true);
-    }
-
-    /// <summary>
-    /// 通过Jtag下载比特流文件
-    /// </summary>
-    /// <param name="address"> 设备地址 </param>
-    /// <param name="port"> 设备端口 </param>
-    [HttpPost("DownloadBitstream")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> DownloadBitstream(string address, int port)
-    {
-        // 检查文件
-        var fileDir = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
-        if (!Directory.Exists(fileDir))
-            return TypedResults.BadRequest("Empty bitstream, Please upload it first");
-
-        try
-        {
-            // 读取文件
-            var filePath = Directory.GetFiles(fileDir)[0];
-
-            using (var fileStream = System.IO.File.Open(filePath, System.IO.FileMode.Open))
-            {
-                if (fileStream is null || fileStream.Length <= 0)
-                    return TypedResults.BadRequest("Wrong bitstream, Please upload it again");
-
-                // 定义缓冲区大小: 32KB
-                byte[] buffer = new byte[32 * 1024];
-                byte[] revBuffer = new byte[32 * 1024];
-                long totalBytesRead = 0;
-
-                // 使用异步流读取文件
-                using (var memoryStream = new MemoryStream())
-                {
-                    int bytesRead;
-                    while ((bytesRead = await fileStream.ReadAsync(buffer, 0, buffer.Length)) > 0)
-                    {
-                        // 反转 32bits
-                        var retBuffer = Common.Number.ReverseBytes(buffer, 4);
-                        if (!retBuffer.IsSuccessful)
-                            return TypedResults.InternalServerError(retBuffer.Error);
-                        revBuffer = retBuffer.Value;
-
-                        for (int i = 0; i < revBuffer.Length; i++)
-                        {
-                            revBuffer[i] = Common.Number.ReverseBits(revBuffer[i]);
-                        }
-
-                        await memoryStream.WriteAsync(revBuffer, 0, bytesRead);
-                        totalBytesRead += bytesRead;
-                    }
-
-                    // 将所有数据转换为字节数组（注意：如果文件非常大，可能不适合完全加载到内存）
-                    var fileBytes = memoryStream.ToArray();
-
-                    // 下载比特流
-                    var jtagCtrl = new JtagClient.Jtag(address, port);
-                    var ret = await jtagCtrl.DownloadBitstream(fileBytes);
-
-                    if (ret.IsSuccessful)
-                    {
-                        logger.Info($"Device {address} dowload bitstream successfully");
-                        return TypedResults.Ok(ret.Value);
-                    }
-                    else
-                    {
-                        logger.Error(ret.Error);
-                        return TypedResults.InternalServerError(ret.Error);
-                    }
-                }
-
-            }
-
-        }
-        catch (Exception error)
-        {
-            return TypedResults.InternalServerError(error);
-        }
-        finally
-        {
-
-        }
-    }
-
-    /// <summary>
-    /// [TODO:description]
-    /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
-    /// <param name="port">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
-    [HttpPost("BoundaryScanAllPorts")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> BoundaryScanAllPorts(string address, int port)
-    {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
-        var ret = await jtagCtrl.BoundaryScan();
-        if (!ret.IsSuccessful)
-        {
-            if (ret.Error is ArgumentException)
-                return TypedResults.BadRequest(ret.Error);
-            else return TypedResults.InternalServerError(ret.Error);
-        }
-
-        return TypedResults.Ok(ret.Value);
-    }
-
-    /// <summary>
-    /// [TODO:description]
-    /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
-    /// <param name="port">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
-    [HttpPost("BoundaryScanLogicalPorts")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(Dictionary<string, bool>), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> BoundaryScanLogicalPorts(string address, int port)
-    {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
-        var ret = await jtagCtrl.BoundaryScanLogicalPorts();
-        if (!ret.IsSuccessful)
-        {
-            if (ret.Error is ArgumentException)
-                return TypedResults.BadRequest(ret.Error);
-            else return TypedResults.InternalServerError(ret.Error);
-        }
-
-        return TypedResults.Ok(ret.Value);
-    }
-
-    /// <summary>
-    /// [TODO:description]
-    /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
-    /// <param name="port">[TODO:parameter]</param>
-    /// <param name="speed">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
-    [HttpPost("SetSpeed")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> SetSpeed(string address, int port, UInt32 speed)
-    {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
-        var ret = await jtagCtrl.SetSpeed(speed);
-        if (!ret.IsSuccessful)
-        {
-            if (ret.Error is ArgumentException)
-                return TypedResults.BadRequest(ret.Error);
-            else return TypedResults.InternalServerError(ret.Error);
-        }
-
-        return TypedResults.Ok(ret.Value);
-    }
-}
-
-/// <summary>
-/// 远程更新
-/// </summary>
-[ApiController]
-[Route("api/[controller]")]
-public class RemoteUpdateController : ControllerBase
-{
-    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
-
-    private const string BITSTREAM_PATH = "bitstream/RemoteUpdate";
-
-    /// <summary>
-    /// 上传远程更新比特流文件
-    /// </summary>
-    /// <param name="address"> 设备地址 </param>
-    /// <param name="goldenBitream">黄金比特流文件</param>
-    /// <param name="bitstream1">比特流文件1</param>
-    /// <param name="bitstream2">比特流文件2</param>
-    /// <param name="bitstream3">比特流文件3</param>
-    /// <returns>上传结果</returns>
-    [HttpPost("UploadBitstream")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
-    public async ValueTask<IResult> UploadBitstreams(
-        string address,
-        IFormFile? goldenBitream,
-        IFormFile? bitstream1,
-        IFormFile? bitstream2,
-        IFormFile? bitstream3)
-    {
-        if ((goldenBitream is null || goldenBitream.Length == 0) &&
-            (bitstream1 is null || bitstream1.Length == 0) &&
-            (bitstream2 is null || bitstream2.Length == 0) &&
-            (bitstream3 is null || bitstream3.Length == 0))
-            return TypedResults.BadRequest("未选择文件");
-
-        // 生成安全的文件名（避免路径遍历攻击）
-        var fileName = Path.GetRandomFileName();
-        var uploadsFolder = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
-
-        // 如果存在文件，则删除原文件再上传
-        if (Directory.Exists(uploadsFolder))
-        {
-            Directory.Delete(uploadsFolder, true);
-        }
-        Directory.CreateDirectory(uploadsFolder);
-
-        for (int bitstreamNum = 0; bitstreamNum < 4; bitstreamNum++)
-        {
-            IFormFile file;
-            if (bitstreamNum == 0 && goldenBitream is not null)
-                file = goldenBitream;
-            else if (bitstreamNum == 1 && bitstream1 is not null)
-                file = bitstream1;
-            else if (bitstreamNum == 2 && bitstream2 is not null)
-                file = bitstream2;
-            else if (bitstreamNum == 3 && bitstream3 is not null)
-                file = bitstream3;
-            else continue;
-
-            var fileFolder = Path.Combine(uploadsFolder, bitstreamNum.ToString());
-            Directory.CreateDirectory(fileFolder);
-
-            var filePath = Path.Combine(fileFolder, fileName);
-
-            using (var stream = new FileStream(filePath, FileMode.Create))
-            {
-                await file.CopyToAsync(stream);
-            }
-        }
-
-        logger.Info($"Device {address} Upload Bitstream Successfully");
-        return TypedResults.Ok(true);
-    }
-
-    private async ValueTask<Result<byte[]>> ProcessBitstream(string filePath)
-    {
-        using (var fileStream = System.IO.File.Open(filePath, System.IO.FileMode.Open))
-        {
-            if (fileStream is null || fileStream.Length <= 0)
-                return new(new ArgumentException("Wrong bitstream path"));
-
-            // 定义缓冲区大小: 32KB
-            byte[] buffer = new byte[32 * 1024];
-            byte[] revBuffer = new byte[32 * 1024];
-            long totalBytesRead = 0;
-
-            // 使用异步流读取文件
-            using (var memoryStream = new MemoryStream())
-            {
-                int bytesRead;
-                while ((bytesRead = await fileStream.ReadAsync(buffer, 0, buffer.Length)) > 0)
-                {
-                    // 反转 32bits
-                    var retBuffer = Common.Number.ReverseBytes(buffer, 4);
-                    if (!retBuffer.IsSuccessful)
-                        return new(retBuffer.Error);
-                    revBuffer = retBuffer.Value;
-
-                    await memoryStream.WriteAsync(revBuffer, 0, bytesRead);
-                    totalBytesRead += bytesRead;
-                }
-
-                // 将所有数据转换为字节数组（注意：如果文件非常大，可能不适合完全加载到内存）
-                var restStreamLen = memoryStream.Length % (4 * 1024);
-                if (restStreamLen != 0)
-                {
-                    var appendLen = ((int)(4 * 1024 - restStreamLen));
-                    var bytesAppend = new byte[appendLen];
-                    Array.Fill<byte>(bytesAppend, 0xFF);
-                    await memoryStream.WriteAsync(bytesAppend, 0, appendLen);
-                }
-
-                return new(memoryStream.ToArray());
-            }
-        }
-    }
-
-    /// <summary>
-    /// 远程更新单个比特流文件
-    /// </summary>
-    /// <param name="address"> 设备地址 </param>
-    /// <param name="port"> 设备端口 </param>
-    /// <param name="bitstreamNum"> 比特流位号 </param>
-    [HttpPost("DownloadBitstream")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> UpdateBitstream(string address, int port, int bitstreamNum)
-    {
-        // 检查文件
-        var fileDir = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}/{bitstreamNum}");
-        if (!Directory.Exists(fileDir))
-            return TypedResults.BadRequest("Empty bitstream, Please upload it first");
-
-        try
-        {
-            // 读取文件
-            var filePath = Directory.GetFiles(fileDir)[0];
-
-            var fileBytes = await ProcessBitstream(filePath);
-            if (!fileBytes.IsSuccessful) return TypedResults.InternalServerError(fileBytes.Error);
-
-            // 下载比特流
-            var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
-            var ret = await remoteUpdater.UpdateBitstream(bitstreamNum, fileBytes.Value);
-
-            if (ret.IsSuccessful)
-            {
-                logger.Info($"Device {address} Update bitstream successfully");
-                return TypedResults.Ok(ret.Value);
-            }
-            else
-            {
-                logger.Error(ret.Error);
-                return TypedResults.InternalServerError(ret.Error);
-            }
-
-        }
-        catch (Exception error)
-        {
-            return TypedResults.InternalServerError(error);
-        }
-    }
-
-
-    /// <summary>
-    /// 下载多个比特流文件
-    /// </summary>
-    /// <param name="address">设备地址</param>
-    /// <param name="port">设备端口</param>
-    /// <param name="bitstreamNum">比特流编号</param>
-    /// <returns>总共上传比特流的数量</returns>
-    [HttpPost("DownloadMultiBitstreams")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(int), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> DownloadMultiBitstreams(string address, int port, int? bitstreamNum)
-    {
-        // 检查文件
-        var bitstreamsFolder = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
-        if (!Directory.Exists(bitstreamsFolder))
-            return TypedResults.BadRequest("Empty bitstream, Please upload it first");
-
-        try
-        {
-            var bitstreams = new List<byte[]?>() { null, null, null, null };
-            int cnt = 0; // 上传比特流数量
-            for (int i = 0; i < 4; i++)
-            {
-                var bitstreamDir = Path.Combine(bitstreamsFolder, i.ToString());
-                if (!Directory.Exists(bitstreamDir))
-                    continue;
-                cnt++;
-
-                // 读取文件
-                var filePath = Directory.GetFiles(bitstreamDir)[0];
-                var fileBytes = await ProcessBitstream(filePath);
-                if (!fileBytes.IsSuccessful) return TypedResults.InternalServerError(fileBytes.Error);
-                bitstreams[i] = fileBytes.Value;
-            }
-
-            // 下载比特流
-            var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
-            {
-                var ret = await remoteUpdater.UploadBitstreams(bitstreams[0], bitstreams[1], bitstreams[2], bitstreams[3]);
-                if (!ret.IsSuccessful) return TypedResults.InternalServerError(ret.Error);
-                if (!ret.Value) return TypedResults.InternalServerError("Upload MultiBitstreams failed");
-            }
-
-            if (bitstreamNum is not null)
-            {
-                var ret = await remoteUpdater.HotResetBitstream(bitstreamNum ?? 0);
-                if (!ret.IsSuccessful) return TypedResults.InternalServerError(ret.Error);
-                if (!ret.Value) return TypedResults.InternalServerError("Hot reset failed");
-            }
-            return TypedResults.Ok(cnt);
-        }
-        catch (Exception error)
-        {
-            return TypedResults.InternalServerError(error);
-        }
-    }
-
-
-    /// <summary>
-    /// 热复位比特流文件
-    /// </summary>
-    /// <param name="address">设备地址</param>
-    /// <param name="port">设备端口</param>
-    /// <param name="bitstreamNum">比特流编号</param>
-    /// <returns>操作结果</returns>
-    [HttpPost("HotResetBitstream")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> HotResetBitstream(string address, int port, int bitstreamNum)
-    {
-        var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
-        var ret = await remoteUpdater.HotResetBitstream(bitstreamNum);
-
-        if (ret.IsSuccessful)
-        {
-            logger.Info($"Device {address} Update bitstream successfully");
-            return TypedResults.Ok(ret.Value);
-        }
-        else
-        {
-            logger.Error(ret.Error);
-            return TypedResults.InternalServerError(ret.Error);
-        }
-    }
-
-    /// <summary>
-    /// [TODO:description]
-    /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
-    /// <param name="port">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
-    [HttpPost("GetFirmwareVersion")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(UInt32), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> GetFirmwareVersion(string address, int port)
-    {
-        var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
-        var ret = await remoteUpdater.GetVersion();
-
-        if (ret.IsSuccessful)
-        {
-            logger.Info($"Device {address} get firmware version successfully");
-            return TypedResults.Ok(ret.Value);
-        }
-        else
-        {
-            logger.Error(ret.Error);
-            return TypedResults.InternalServerError(ret.Error);
-        }
-    }
-
-}
-
-/// <summary>
-/// [TODO:description]
-/// </summary>
-[ApiController]
-[Route("api/[controller]")]
-public class DDSController : ControllerBase
-{
-    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
-
-    /// <summary>
-    /// [TODO:description]
-    /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
-    /// <param name="port">[TODO:parameter]</param>
-    /// <param name="channelNum">[TODO:parameter]</param>
-    /// <param name="waveNum">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
-    [HttpPost("SetWaveNum")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> SetWaveNum(string address, int port, int channelNum, int waveNum)
-    {
-        var dds = new DDSClient.DDS(address, port);
-
-        var ret = await dds.SetWaveNum(channelNum, waveNum);
-        if (ret.IsSuccessful)
-        {
-            logger.Info($"Device {address} set output wave num successfully");
-            return TypedResults.Ok(ret.Value);
-        }
-        else
-        {
-            logger.Error(ret.Error);
-            return TypedResults.InternalServerError(ret.Error);
-        }
-    }
-
-    /// <summary>
-    /// [TODO:description]
-    /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
-    /// <param name="port">[TODO:parameter]</param>
-    /// <param name="channelNum">[TODO:parameter]</param>
-    /// <param name="waveNum">[TODO:parameter]</param>
-    /// <param name="step">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
-    [HttpPost("SetFreq")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> SetFreq(string address, int port, int channelNum, int waveNum, UInt32 step)
-    {
-        var dds = new DDSClient.DDS(address, port);
-
-        var ret = await dds.SetFreq(channelNum, waveNum, step);
-        if (ret.IsSuccessful)
-        {
-            logger.Info($"Device {address} set output freqency successfully");
-            return TypedResults.Ok(ret.Value);
-        }
-        else
-        {
-            logger.Error(ret.Error);
-            return TypedResults.InternalServerError(ret.Error);
-        }
-    }
-
-    /// <summary>
-    /// [TODO:description]
-    /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
-    /// <param name="port">[TODO:parameter]</param>
-    /// <param name="channelNum">[TODO:parameter]</param>
-    /// <param name="waveNum">[TODO:parameter]</param>
-    /// <param name="phase">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
-    [HttpPost("SetPhase")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> SetPhase(string address, int port, int channelNum, int waveNum, int phase)
-    {
-        var dds = new DDSClient.DDS(address, port);
-
-        var ret = await dds.SetPhase(channelNum, waveNum, phase);
-        if (ret.IsSuccessful)
-        {
-            logger.Info($"Device {address} set output phase successfully");
-            return TypedResults.Ok(ret.Value);
-        }
-        else
-        {
-            logger.Error(ret.Error);
-            return TypedResults.InternalServerError(ret.Error);
-        }
-
-    }
-
-}
-
-
-/// <summary>
-/// [TODO:description]
-/// </summary>
-[ApiController]
-[Route("api/[controller]")]
-public class BsdlParserController : ControllerBase
-{
-    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
-
-    [EnableCors("Development")]
-    [HttpGet("GetBoundaryLogicalPorts")]
-    public IResult GetBoundaryLogicalPorts()
-    {
-        var parser = new BsdlParser.Parser();
-        var ret = parser.GetBoundaryLogicalPorts();
-        if (ret.IsNull) return TypedResults.InternalServerError("Get Null");
-        return TypedResults.Ok(ret.Value);
-    }
-}
-
-
-/// <summary>
-/// 数据控制器
-/// </summary>
-[ApiController]
-[Route("api/[controller]")]
-public class DataController : ControllerBase
-{
-    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
-
-    /// <summary>
-    /// 创建数据库表
-    /// </summary>
-    /// <returns>插入的记录数</returns>
-    [EnableCors("Development")]
-    [HttpPost("CreateTable")]
-    public IResult CreateTables()
-    {
-        using var db = new Database.AppDataConnection();
-        db.CreateAllTables();
-        return TypedResults.Ok();
-    }
-
-    /// <summary>
-    /// 删除数据库表
-    /// </summary>
-    /// <returns>插入的记录数</returns>
-    [EnableCors("Development")]
-    [HttpDelete("DropTables")]
-    public IResult DropTables()
-    {
-        using var db = new Database.AppDataConnection();
-        db.DropAllTables();
-        return TypedResults.Ok();
-    }
-
-    /// <summary>
-    /// 获取所有用户
-    /// </summary>
-    /// <returns>用户列表</returns>
-    [HttpGet("AllUsers")]
-    public IResult AllUsers()
-    {
-        using var db = new Database.AppDataConnection();
-        var ret = db.User.ToList();
-        return TypedResults.Ok(ret);
-    }
-
-    /// <summary>
-    /// 注册新用户
-    /// </summary>
-    /// <param name="name">用户名</param>
-    /// <returns>操作结果</returns>
-    [HttpPost("SignUpUser")]
-    public IResult SignUpUser(string name)
-    {
-        if (name.Length > 255)
-            return TypedResults.BadRequest("Name Couln't over 255 characters");
-
-        using var db = new Database.AppDataConnection();
-        var ret = db.AddUser(name);
-        return TypedResults.Ok(ret);
-    }
-}
-
--- a/server/src/Controllers/BsdlParserController.cs
+++ b/server/src/Controllers/BsdlParserController.cs
@@ -0,0 +1,30 @@
+using Microsoft.AspNetCore.Cors;
+using Microsoft.AspNetCore.Mvc;
+
+namespace server.Controllers;
+
+/// <summary>
+/// [TODO:description]
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class BsdlParserController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <returns>[TODO:return]</returns>
+    [EnableCors("Development")]
+    [HttpGet("GetBoundaryLogicalPorts")]
+    public IResult GetBoundaryLogicalPorts()
+    {
+        var parser = new BsdlParser.Parser();
+        var ret = parser.GetBoundaryLogicalPorts();
+        if (ret.IsNull) return TypedResults.InternalServerError("Get Null");
+        return TypedResults.Ok(ret.Value);
+    }
+}
+
+
--- a/server/src/Controllers/DDSController.cs
+++ b/server/src/Controllers/DDSController.cs
@@ -0,0 +1,108 @@
+using Microsoft.AspNetCore.Cors;
+using Microsoft.AspNetCore.Mvc;
+
+namespace server.Controllers;
+
+/// <summary>
+/// [TODO:description]
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class DDSController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="channelNum">[TODO:parameter]</param>
+    /// <param name="waveNum">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    [HttpPost("SetWaveNum")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SetWaveNum(string address, int port, int channelNum, int waveNum)
+    {
+        var dds = new Peripherals.DDSClient.DDS(address, port);
+
+        var ret = await dds.SetWaveNum(channelNum, waveNum);
+        if (ret.IsSuccessful)
+        {
+            logger.Info($"Device {address} set output wave num successfully");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="channelNum">[TODO:parameter]</param>
+    /// <param name="waveNum">[TODO:parameter]</param>
+    /// <param name="step">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    [HttpPost("SetFreq")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SetFreq(string address, int port, int channelNum, int waveNum, UInt32 step)
+    {
+        var dds = new Peripherals.DDSClient.DDS(address, port);
+
+        var ret = await dds.SetFreq(channelNum, waveNum, step);
+        if (ret.IsSuccessful)
+        {
+            logger.Info($"Device {address} set output freqency successfully");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="channelNum">[TODO:parameter]</param>
+    /// <param name="waveNum">[TODO:parameter]</param>
+    /// <param name="phase">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    [HttpPost("SetPhase")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SetPhase(string address, int port, int channelNum, int waveNum, int phase)
+    {
+        var dds = new Peripherals.DDSClient.DDS(address, port);
+
+        var ret = await dds.SetPhase(channelNum, waveNum, phase);
+        if (ret.IsSuccessful)
+        {
+            logger.Info($"Device {address} set output phase successfully");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+
+    }
+
+}
--- a/server/src/Controllers/DataController.cs
+++ b/server/src/Controllers/DataController.cs
@@ -0,0 +1,69 @@
+using Microsoft.AspNetCore.Cors;
+using Microsoft.AspNetCore.Mvc;
+
+namespace server.Controllers;
+
+/// <summary>
+/// 数据控制器
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class DataController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    /// <summary>
+    /// 创建数据库表
+    /// </summary>
+    /// <returns>插入的记录数</returns>
+    [EnableCors("Development")]
+    [HttpPost("CreateTable")]
+    public IResult CreateTables()
+    {
+        using var db = new Database.AppDataConnection();
+        db.CreateAllTables();
+        return TypedResults.Ok();
+    }
+
+    /// <summary>
+    /// 删除数据库表
+    /// </summary>
+    /// <returns>插入的记录数</returns>
+    [EnableCors("Development")]
+    [HttpDelete("DropTables")]
+    public IResult DropTables()
+    {
+        using var db = new Database.AppDataConnection();
+        db.DropAllTables();
+        return TypedResults.Ok();
+    }
+
+    /// <summary>
+    /// 获取所有用户
+    /// </summary>
+    /// <returns>用户列表</returns>
+    [HttpGet("AllUsers")]
+    public IResult AllUsers()
+    {
+        using var db = new Database.AppDataConnection();
+        var ret = db.User.ToList();
+        return TypedResults.Ok(ret);
+    }
+
+    /// <summary>
+    /// 注册新用户
+    /// </summary>
+    /// <param name="name">用户名</param>
+    /// <returns>操作结果</returns>
+    [HttpPost("SignUpUser")]
+    public IResult SignUpUser(string name)
+    {
+        if (name.Length > 255)
+            return TypedResults.BadRequest("Name Couln't over 255 characters");
+
+        using var db = new Database.AppDataConnection();
+        var ret = db.AddUser(name);
+        return TypedResults.Ok(ret);
+    }
+}
+
--- a/server/src/Controllers/JtagController.cs
+++ b/server/src/Controllers/JtagController.cs
@@ -0,0 +1,278 @@
+using Microsoft.AspNetCore.Cors;
+using Microsoft.AspNetCore.Mvc;
+
+namespace server.Controllers;
+
+/// <summary>
+/// Jtag API
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class JtagController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    private const string BITSTREAM_PATH = "bitstream/Jtag";
+
+    /// <summary>
+    /// 页面
+    /// </summary>
+    [HttpGet]
+    public string Index()
+    {
+        return "This is Jtag Controller";
+    }
+
+    /// <summary>
+    /// 获取Jtag ID Code
+    /// </summary>
+    /// <param name="address"> 设备地址 </param>
+    /// <param name="port"> 设备端口 </param>
+    [HttpGet("GetDeviceIDCode")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(uint), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> GetDeviceIDCode(string address, int port)
+    {
+        var jtagCtrl = new JtagClient.Jtag(address, port);
+        var ret = await jtagCtrl.ReadIDCode();
+
+        if (ret.IsSuccessful)
+        {
+            logger.Info($"Get device {address} ID code: 0x{ret.Value:X4}");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+
+    /// <summary>
+    /// 获取状态寄存器
+    /// </summary>
+    /// <param name="address"> 设备地址 </param>
+    /// <param name="port"> 设备端口 </param>
+    [HttpGet("ReadStatusReg")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> ReadStatusReg(string address, int port)
+    {
+        var jtagCtrl = new JtagClient.Jtag(address, port);
+        var ret = await jtagCtrl.ReadStatusReg();
+
+        if (ret.IsSuccessful)
+        {
+            var binaryValue = Common.String.Reverse(Convert.ToString(ret.Value, 2).PadLeft(32, '0'));
+            var decodeValue = new JtagClient.JtagStatusReg(ret.Value);
+            logger.Info($"Read device {address} Status Register: \n\t 0b{binaryValue} \n\t {decodeValue}");
+            return TypedResults.Ok(new
+            {
+                original = ret.Value,
+                binaryValue,
+                decodeValue,
+            });
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+
+    /// <summary>
+    /// 上传比特流文件
+    /// </summary>
+    /// <param name="address"> 设备地址 </param>
+    /// <param name="file">比特流文件</param>
+    [HttpPost("UploadBitstream")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
+    public async ValueTask<IResult> UploadBitstream(string address, IFormFile file)
+    {
+        if (file == null || file.Length == 0)
+            return TypedResults.BadRequest("未选择文件");
+
+        // 生成安全的文件名（避免路径遍历攻击）
+        var fileName = Path.GetRandomFileName();
+        var uploadsFolder = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
+
+        // 如果存在文件，则删除原文件再上传
+        if (Directory.Exists(uploadsFolder))
+        {
+            Directory.Delete(uploadsFolder, true);
+        }
+        Directory.CreateDirectory(uploadsFolder);
+
+        var filePath = Path.Combine(uploadsFolder, fileName);
+
+        using (var stream = new FileStream(filePath, FileMode.Create))
+        {
+            await file.CopyToAsync(stream);
+        }
+
+        logger.Info($"Device {address} Upload Bitstream Successfully");
+        return TypedResults.Ok(true);
+    }
+
+    /// <summary>
+    /// 通过Jtag下载比特流文件
+    /// </summary>
+    /// <param name="address"> 设备地址 </param>
+    /// <param name="port"> 设备端口 </param>
+    [HttpPost("DownloadBitstream")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> DownloadBitstream(string address, int port)
+    {
+        // 检查文件
+        var fileDir = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
+        if (!Directory.Exists(fileDir))
+            return TypedResults.BadRequest("Empty bitstream, Please upload it first");
+
+        try
+        {
+            // 读取文件
+            var filePath = Directory.GetFiles(fileDir)[0];
+
+            using (var fileStream = System.IO.File.Open(filePath, System.IO.FileMode.Open))
+            {
+                if (fileStream is null || fileStream.Length <= 0)
+                    return TypedResults.BadRequest("Wrong bitstream, Please upload it again");
+
+                // 定义缓冲区大小: 32KB
+                byte[] buffer = new byte[32 * 1024];
+                byte[] revBuffer = new byte[32 * 1024];
+                long totalBytesRead = 0;
+
+                // 使用异步流读取文件
+                using (var memoryStream = new MemoryStream())
+                {
+                    int bytesRead;
+                    while ((bytesRead = await fileStream.ReadAsync(buffer, 0, buffer.Length)) > 0)
+                    {
+                        // 反转 32bits
+                        var retBuffer = Common.Number.ReverseBytes(buffer, 4);
+                        if (!retBuffer.IsSuccessful)
+                            return TypedResults.InternalServerError(retBuffer.Error);
+                        revBuffer = retBuffer.Value;
+
+                        for (int i = 0; i < revBuffer.Length; i++)
+                        {
+                            revBuffer[i] = Common.Number.ReverseBits(revBuffer[i]);
+                        }
+
+                        await memoryStream.WriteAsync(revBuffer, 0, bytesRead);
+                        totalBytesRead += bytesRead;
+                    }
+
+                    // 将所有数据转换为字节数组（注意：如果文件非常大，可能不适合完全加载到内存）
+                    var fileBytes = memoryStream.ToArray();
+
+                    // 下载比特流
+                    var jtagCtrl = new JtagClient.Jtag(address, port);
+                    var ret = await jtagCtrl.DownloadBitstream(fileBytes);
+
+                    if (ret.IsSuccessful)
+                    {
+                        logger.Info($"Device {address} dowload bitstream successfully");
+                        return TypedResults.Ok(ret.Value);
+                    }
+                    else
+                    {
+                        logger.Error(ret.Error);
+                        return TypedResults.InternalServerError(ret.Error);
+                    }
+                }
+
+            }
+
+        }
+        catch (Exception error)
+        {
+            return TypedResults.InternalServerError(error);
+        }
+        finally
+        {
+
+        }
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    [HttpPost("BoundaryScanAllPorts")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> BoundaryScanAllPorts(string address, int port)
+    {
+        var jtagCtrl = new JtagClient.Jtag(address, port);
+        var ret = await jtagCtrl.BoundaryScan();
+        if (!ret.IsSuccessful)
+        {
+            if (ret.Error is ArgumentException)
+                return TypedResults.BadRequest(ret.Error);
+            else return TypedResults.InternalServerError(ret.Error);
+        }
+
+        return TypedResults.Ok(ret.Value);
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    [HttpPost("BoundaryScanLogicalPorts")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(Dictionary<string, bool>), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> BoundaryScanLogicalPorts(string address, int port)
+    {
+        var jtagCtrl = new JtagClient.Jtag(address, port);
+        var ret = await jtagCtrl.BoundaryScanLogicalPorts();
+        if (!ret.IsSuccessful)
+        {
+            if (ret.Error is ArgumentException)
+                return TypedResults.BadRequest(ret.Error);
+            else return TypedResults.InternalServerError(ret.Error);
+        }
+
+        return TypedResults.Ok(ret.Value);
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="speed">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    [HttpPost("SetSpeed")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SetSpeed(string address, int port, UInt32 speed)
+    {
+        var jtagCtrl = new JtagClient.Jtag(address, port);
+        var ret = await jtagCtrl.SetSpeed(speed);
+        if (!ret.IsSuccessful)
+        {
+            if (ret.Error is ArgumentException)
+                return TypedResults.BadRequest(ret.Error);
+            else return TypedResults.InternalServerError(ret.Error);
+        }
+
+        return TypedResults.Ok(ret.Value);
+    }
+}
--- a/server/src/Controllers/MatrixKeyController.cs
+++ b/server/src/Controllers/MatrixKeyController.cs
@@ -0,0 +1,101 @@
+using System.Collections;
+using Microsoft.AspNetCore.Cors;
+using Microsoft.AspNetCore.Mvc;
+
+namespace server.Controllers;
+
+/// <summary>
+/// 矩阵键控制器，用于管理矩阵键的启用、禁用和状态设置
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class MatrixKeyController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    /// <summary>
+    /// 启用矩阵键控制。
+    /// </summary>
+    /// <param name="address">设备的IP地址</param>
+    /// <param name="port">设备的端口号</param>
+    /// <returns>返回操作结果的状态码</returns>
+    [HttpPost("EnabelMatrixKey")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> EnabelMatrixKey(string address, int port)
+    {
+        var matrixKeyCtrl = new Peripherals.MatrixKeyClient.MatrixKey(address, port);
+        var ret = await matrixKeyCtrl.EnableControl();
+
+        if (ret.IsSuccessful)
+        {
+            logger.Info($"Enable device {address}:{port.ToString()} matrix key finished: {ret.Value}.");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+
+    /// <summary>
+    /// 禁用矩阵键控制。
+    /// </summary>
+    /// <param name="address">设备的IP地址</param>
+    /// <param name="port">设备的端口号</param>
+    /// <returns>返回操作结果的状态码</returns>
+    [HttpPost("DisableMatrixKey")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> DisableMatrixKey(string address, int port)
+    {
+        var matrixKeyCtrl = new Peripherals.MatrixKeyClient.MatrixKey(address, port);
+        var ret = await matrixKeyCtrl.DisableControl();
+
+        if (ret.IsSuccessful)
+        {
+            logger.Info($"Disable device {address}:{port.ToString()} matrix key finished: {ret.Value}.");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+
+    /// <summary>
+    /// 设置矩阵键的状态。
+    /// </summary>
+    /// <param name="address">设备的IP地址</param>
+    /// <param name="port">设备的端口号</param>
+    /// <param name="keyStates">矩阵键的状态数组，长度应为16</param>
+    /// <returns>返回操作结果的状态码</returns>
+    [HttpPost("SetMatrixKeyStatus")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SetMatrixKeyStatus(string address, int port, [FromBody] bool[] keyStates)
+    {
+        if (keyStates.Length != 16)
+            return TypedResults.BadRequest($"The length of key states should be 16 instead of {keyStates.Length}");
+
+        var matrixKeyCtrl = new Peripherals.MatrixKeyClient.MatrixKey(address, port);
+        var ret = await matrixKeyCtrl.ControlKey(new BitArray(keyStates));
+
+        if (ret.IsSuccessful)
+        {
+            logger.Info($"Set device {address}:{port.ToString()} matrix key finished: {ret.Value}.");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+}
+
--- a/server/src/Controllers/PowerController.cs
+++ b/server/src/Controllers/PowerController.cs
@@ -0,0 +1,46 @@
+using System.Collections;
+using Microsoft.AspNetCore.Cors;
+using Microsoft.AspNetCore.Mvc;
+
+namespace server.Controllers;
+
+/// <summary>
+/// 矩阵键控制器，用于管理矩阵键的启用、禁用和状态设置
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class PowerController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="enable">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    [HttpPost("SetPowerOnOff")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SetPowerOnOff(string address, int port, bool enable)
+    {
+        var powerCtrl = new Peripherals.PowerClient.Power(address, port);
+        var ret = await powerCtrl.SetPowerOnOff(enable);
+
+        if (ret.IsSuccessful)
+        {
+            var powerStatus = enable ? "ON" : "OFF";
+            logger.Info($"Set device {address}:{port.ToString()} power {powerStatus} finished: {ret.Value}.");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+
+}
+
--- a/server/src/Controllers/RemoteUpdateController.cs
+++ b/server/src/Controllers/RemoteUpdateController.cs
@@ -0,0 +1,292 @@
+using DotNext;
+using Microsoft.AspNetCore.Cors;
+using Microsoft.AspNetCore.Mvc;
+
+namespace server.Controllers;
+
+/// <summary>
+/// 远程更新
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class RemoteUpdateController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    private const string BITSTREAM_PATH = "bitstream/RemoteUpdate";
+
+    /// <summary>
+    /// 上传远程更新比特流文件
+    /// </summary>
+    /// <param name="address"> 设备地址 </param>
+    /// <param name="goldenBitream">黄金比特流文件</param>
+    /// <param name="bitstream1">比特流文件1</param>
+    /// <param name="bitstream2">比特流文件2</param>
+    /// <param name="bitstream3">比特流文件3</param>
+    /// <returns>上传结果</returns>
+    [HttpPost("UploadBitstream")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
+    public async ValueTask<IResult> UploadBitstreams(
+        string address,
+        IFormFile? goldenBitream,
+        IFormFile? bitstream1,
+        IFormFile? bitstream2,
+        IFormFile? bitstream3)
+    {
+        if ((goldenBitream is null || goldenBitream.Length == 0) &&
+            (bitstream1 is null || bitstream1.Length == 0) &&
+            (bitstream2 is null || bitstream2.Length == 0) &&
+            (bitstream3 is null || bitstream3.Length == 0))
+            return TypedResults.BadRequest("未选择文件");
+
+        // 生成安全的文件名（避免路径遍历攻击）
+        var fileName = Path.GetRandomFileName();
+        var uploadsFolder = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
+
+        // 如果存在文件，则删除原文件再上传
+        if (Directory.Exists(uploadsFolder))
+        {
+            Directory.Delete(uploadsFolder, true);
+        }
+        Directory.CreateDirectory(uploadsFolder);
+
+        for (int bitstreamNum = 0; bitstreamNum < 4; bitstreamNum++)
+        {
+            IFormFile file;
+            if (bitstreamNum == 0 && goldenBitream is not null)
+                file = goldenBitream;
+            else if (bitstreamNum == 1 && bitstream1 is not null)
+                file = bitstream1;
+            else if (bitstreamNum == 2 && bitstream2 is not null)
+                file = bitstream2;
+            else if (bitstreamNum == 3 && bitstream3 is not null)
+                file = bitstream3;
+            else continue;
+
+            var fileFolder = Path.Combine(uploadsFolder, bitstreamNum.ToString());
+            Directory.CreateDirectory(fileFolder);
+
+            var filePath = Path.Combine(fileFolder, fileName);
+
+            using (var stream = new FileStream(filePath, FileMode.Create))
+            {
+                await file.CopyToAsync(stream);
+            }
+        }
+
+        logger.Info($"Device {address} Upload Bitstream Successfully");
+        return TypedResults.Ok(true);
+    }
+
+    private async ValueTask<Result<byte[]>> ProcessBitstream(string filePath)
+    {
+        using (var fileStream = System.IO.File.Open(filePath, System.IO.FileMode.Open))
+        {
+            if (fileStream is null || fileStream.Length <= 0)
+                return new(new ArgumentException("Wrong bitstream path"));
+
+            // 定义缓冲区大小: 32KB
+            byte[] buffer = new byte[32 * 1024];
+            byte[] revBuffer = new byte[32 * 1024];
+            long totalBytesRead = 0;
+
+            // 使用异步流读取文件
+            using (var memoryStream = new MemoryStream())
+            {
+                int bytesRead;
+                while ((bytesRead = await fileStream.ReadAsync(buffer, 0, buffer.Length)) > 0)
+                {
+                    // 反转 32bits
+                    var retBuffer = Common.Number.ReverseBytes(buffer, 4);
+                    if (!retBuffer.IsSuccessful)
+                        return new(retBuffer.Error);
+                    revBuffer = retBuffer.Value;
+
+                    await memoryStream.WriteAsync(revBuffer, 0, bytesRead);
+                    totalBytesRead += bytesRead;
+                }
+
+                // 将所有数据转换为字节数组（注意：如果文件非常大，可能不适合完全加载到内存）
+                var restStreamLen = memoryStream.Length % (4 * 1024);
+                if (restStreamLen != 0)
+                {
+                    var appendLen = ((int)(4 * 1024 - restStreamLen));
+                    var bytesAppend = new byte[appendLen];
+                    Array.Fill<byte>(bytesAppend, 0xFF);
+                    await memoryStream.WriteAsync(bytesAppend, 0, appendLen);
+                }
+
+                return new(memoryStream.ToArray());
+            }
+        }
+    }
+
+    /// <summary>
+    /// 远程更新单个比特流文件
+    /// </summary>
+    /// <param name="address"> 设备地址 </param>
+    /// <param name="port"> 设备端口 </param>
+    /// <param name="bitstreamNum"> 比特流位号 </param>
+    [HttpPost("DownloadBitstream")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> UpdateBitstream(string address, int port, int bitstreamNum)
+    {
+        // 检查文件
+        var fileDir = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}/{bitstreamNum}");
+        if (!Directory.Exists(fileDir))
+            return TypedResults.BadRequest("Empty bitstream, Please upload it first");
+
+        try
+        {
+            // 读取文件
+            var filePath = Directory.GetFiles(fileDir)[0];
+
+            var fileBytes = await ProcessBitstream(filePath);
+            if (!fileBytes.IsSuccessful) return TypedResults.InternalServerError(fileBytes.Error);
+
+            // 下载比特流
+            var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
+            var ret = await remoteUpdater.UpdateBitstream(bitstreamNum, fileBytes.Value);
+
+            if (ret.IsSuccessful)
+            {
+                logger.Info($"Device {address} Update bitstream successfully");
+                return TypedResults.Ok(ret.Value);
+            }
+            else
+            {
+                logger.Error(ret.Error);
+                return TypedResults.InternalServerError(ret.Error);
+            }
+
+        }
+        catch (Exception error)
+        {
+            return TypedResults.InternalServerError(error);
+        }
+    }
+
+
+    /// <summary>
+    /// 下载多个比特流文件
+    /// </summary>
+    /// <param name="address">设备地址</param>
+    /// <param name="port">设备端口</param>
+    /// <param name="bitstreamNum">比特流编号</param>
+    /// <returns>总共上传比特流的数量</returns>
+    [HttpPost("DownloadMultiBitstreams")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(int), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> DownloadMultiBitstreams(string address, int port, int? bitstreamNum)
+    {
+        // 检查文件
+        var bitstreamsFolder = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
+        if (!Directory.Exists(bitstreamsFolder))
+            return TypedResults.BadRequest("Empty bitstream, Please upload it first");
+
+        try
+        {
+            var bitstreams = new List<byte[]?>() { null, null, null, null };
+            int cnt = 0; // 上传比特流数量
+            for (int i = 0; i < 4; i++)
+            {
+                var bitstreamDir = Path.Combine(bitstreamsFolder, i.ToString());
+                if (!Directory.Exists(bitstreamDir))
+                    continue;
+                cnt++;
+
+                // 读取文件
+                var filePath = Directory.GetFiles(bitstreamDir)[0];
+                var fileBytes = await ProcessBitstream(filePath);
+                if (!fileBytes.IsSuccessful) return TypedResults.InternalServerError(fileBytes.Error);
+                bitstreams[i] = fileBytes.Value;
+            }
+
+            // 下载比特流
+            var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
+            {
+                var ret = await remoteUpdater.UploadBitstreams(bitstreams[0], bitstreams[1], bitstreams[2], bitstreams[3]);
+                if (!ret.IsSuccessful) return TypedResults.InternalServerError(ret.Error);
+                if (!ret.Value) return TypedResults.InternalServerError("Upload MultiBitstreams failed");
+            }
+
+            if (bitstreamNum is not null)
+            {
+                var ret = await remoteUpdater.HotResetBitstream(bitstreamNum ?? 0);
+                if (!ret.IsSuccessful) return TypedResults.InternalServerError(ret.Error);
+                if (!ret.Value) return TypedResults.InternalServerError("Hot reset failed");
+            }
+            return TypedResults.Ok(cnt);
+        }
+        catch (Exception error)
+        {
+            return TypedResults.InternalServerError(error);
+        }
+    }
+
+
+    /// <summary>
+    /// 热复位比特流文件
+    /// </summary>
+    /// <param name="address">设备地址</param>
+    /// <param name="port">设备端口</param>
+    /// <param name="bitstreamNum">比特流编号</param>
+    /// <returns>操作结果</returns>
+    [HttpPost("HotResetBitstream")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> HotResetBitstream(string address, int port, int bitstreamNum)
+    {
+        var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
+        var ret = await remoteUpdater.HotResetBitstream(bitstreamNum);
+
+        if (ret.IsSuccessful)
+        {
+            logger.Info($"Device {address} Update bitstream successfully");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    [HttpPost("GetFirmwareVersion")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(UInt32), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(ArgumentException), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> GetFirmwareVersion(string address, int port)
+    {
+        var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
+        var ret = await remoteUpdater.GetVersion();
+
+        if (ret.IsSuccessful)
+        {
+            logger.Info($"Device {address} get firmware version successfully");
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Error(ret.Error);
+            return TypedResults.InternalServerError(ret.Error);
+        }
+    }
+
+}
--- a/server/src/Controllers/UDPController.cs
+++ b/server/src/Controllers/UDPController.cs
@@ -0,0 +1,133 @@
+using System.Net;
+using Common;
+using Microsoft.AspNetCore.Mvc;
+using Newtonsoft.Json;
+using WebProtocol;
+
+namespace server.Controllers;
+
+/// <summary>
+/// UDP API 
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class UDPController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    private const string LOCALHOST = "127.0.0.1";
+
+    /// <summary>
+    /// 页面
+    /// </summary>
+    [HttpGet]
+    public string Index()
+    {
+        return "This is UDP Controller";
+    }
+
+    /// <summary>
+    /// 发送字符串
+    /// </summary>
+    /// <param name="address">IPV4 或者 IPV6 地址</param>
+    /// <param name="port">设备端口号</param>
+    /// <param name="text">发送的文本</param>
+    /// <response code="200">发送成功</response>
+    /// <response code="500">发送失败</response>
+    [HttpPost("SendString")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SendString(string address = LOCALHOST, int port = 1234, string text = "Hello Server!")
+    {
+        var endPoint = new IPEndPoint(IPAddress.Parse(address), port);
+        var ret = await UDPClientPool.SendStringAsync(endPoint, [text]);
+
+        if (ret) { return TypedResults.Ok(); }
+        else { return TypedResults.InternalServerError(); }
+    }
+
+    /// <summary>
+    /// 发送二进制数据
+    /// </summary>
+    /// <param name="address" example="127.0.0.1">IPV4 或者 IPV6 地址</param>
+    /// <param name="port" example="1234">设备端口号</param>
+    /// <param name="bytes" example="FFFFAAAA">16进制文本</param>
+    [HttpPost("SendBytes")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SendBytes(string address, int port, string bytes)
+    {
+        var endPoint = new IPEndPoint(IPAddress.Parse(address), port);
+        var ret = await UDPClientPool.SendBytesAsync(endPoint, Number.StringToBytes(bytes));
+
+        if (ret) { return TypedResults.Ok(); }
+        else { return TypedResults.InternalServerError(); }
+    }
+
+
+    /// <summary>
+    /// 发送地址包
+    /// </summary>
+    /// <param name="address">IP地址</param>
+    /// <param name="port">UDP 端口号</param>
+    /// <param name="opts">地址包选项</param>
+    [HttpPost("SendAddrPackage")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SendAddrPackage(
+        string address,
+        int port,
+        [FromBody] SendAddrPackOptions opts)
+    {
+        var endPoint = new IPEndPoint(IPAddress.Parse(address), port);
+        var ret = await UDPClientPool.SendAddrPackAsync(endPoint, new WebProtocol.SendAddrPackage(opts));
+
+        if (ret) { return TypedResults.Ok(); }
+        else { return TypedResults.InternalServerError(); }
+    }
+
+    /// <summary>
+    /// 发送数据包
+    /// </summary>
+    /// <param name="address">IP地址</param>
+    /// <param name="port">UDP 端口号</param>
+    /// <param name="data">16进制数据</param>
+    [HttpPost("SendDataPackage")]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public async ValueTask<IResult> SendDataPackage(string address, int port, string data)
+    {
+        var endPoint = new IPEndPoint(IPAddress.Parse(address), port);
+        var ret = await UDPClientPool.SendDataPackAsync(endPoint,
+            new WebProtocol.SendDataPackage(Number.StringToBytes(data)));
+
+        if (ret) { return TypedResults.Ok(); }
+        else { return TypedResults.InternalServerError(); }
+    }
+
+    /// <summary>
+    /// 获取指定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)
+    {
+        var ret = await MsgBus.UDPServer.GetDataArrayAsync(address);
+
+        if (ret.HasValue)
+        {
+            var dataJson = JsonConvert.SerializeObject(ret.Value);
+            logger.Debug($"Get Receive Successfully: {dataJson}");
+
+            return TypedResults.Ok(ret.Value);
+        }
+        else
+        {
+            logger.Debug("Get Receive Failed");
+            return TypedResults.InternalServerError();
+        }
+    }
+
+}
--- a/server/src/H264Encoder.cs
+++ b/server/src/H264Encoder.cs
--- a/server/src/H264MediaSource.cs
+++ b/server/src/H264MediaSource.cs
--- a/server/src/JtagClient.cs
+++ b/server/src/JtagClient.cs
@@ -776,9 +776,9 @@ public class Jtag


    /// <summary>
-    /// [TODO:description]
+    /// 边界扫描
    /// </summary>
-    /// <returns>[TODO:return]</returns>
+    /// <returns>返回所有引脚边界扫描结果</returns>
    public async ValueTask<Result<BitArray>> BoundaryScan()
    {
        var paser = new BsdlParser.Parser();
@@ -824,9 +824,9 @@ public class Jtag
    }

    /// <summary>
-    /// [TODO:description]
+    /// 执行边界扫描并返回逻辑端口的状态
    /// </summary>
-    /// <returns>[TODO:return]</returns>
+    /// <returns>包含逻辑端口状态的字典，键为端口ID，值为布尔状态</returns>
    public async ValueTask<Result<Dictionary<string, bool>>> BoundaryScanLogicalPorts()
    {
        var bitArray = await BoundaryScan();
@@ -845,18 +845,23 @@ public class Jtag
        return portStatus;
    }

+    /// <summary>
+    /// 设置JTAG的运行速度。
+    /// </summary>
+    /// <param name="speed">运行速度值。</param>
+    /// <returns>指示操作是否成功的异步结果。</returns>
    public async ValueTask<Result<bool>> SetSpeed(UInt32 speed)
    {
        // Clear Data
        await MsgBus.UDPServer.ClearUDPData(this.address);

        logger.Trace($"Clear up udp server {this.address} receive data");
-        
+
        var ret = await WriteFIFO(
            JtagAddr.SPEED_CTRL, (speed << 16) | speed,
            JtagState.CMD_EXEC_FINISH, JtagState.CMD_EXEC_FINISH);
-        
-        if (!ret.IsSuccessful) return new (ret.Error);
+
+        if (!ret.IsSuccessful) return new(ret.Error);
        return ret.Value;
    }
 }
--- a/server/src/Peripherals/DDSClient.cs
+++ b/server/src/Peripherals/DDSClient.cs
@@ -1,7 +1,7 @@
 using System.Net;
 using DotNext;

-namespace DDSClient;
+namespace Peripherals.DDSClient;

 static class DDSAddr
 {
--- a/server/src/Peripherals/MatrixKeyClient.cs
+++ b/server/src/Peripherals/MatrixKeyClient.cs
@@ -0,0 +1,89 @@
+using System.Collections;
+using System.Net;
+using DotNext;
+
+namespace Peripherals.MatrixKeyClient;
+
+class MatrixKeyAddr
+{
+    public const UInt32 BASE = 0x10_00_00_00;
+    public const UInt32 KEY_ENABLE = BASE + 5;
+    public const UInt32 KEY_CTRL = BASE + 6;
+}
+
+/// <summary>
+/// 矩阵键盘外设类，用于控制和管理矩阵键盘的功能。
+/// </summary>
+public class MatrixKey
+{
+    readonly int timeout;
+
+    readonly int port;
+    readonly string address;
+    private IPEndPoint ep;
+
+    /// <summary>
+    /// 构造函数，用于初始化矩阵键盘外设实例。
+    /// </summary>
+    /// <param name="address">设备的IP地址</param>
+    /// <param name="port">设备的端口号</param>
+    /// <param name="timeout">操作的超时时间（毫秒），默认为1000</param>
+    /// <returns>无返回值。</returns>
+    public MatrixKey(string address, int port, int timeout = 1000)
+    {
+        this.address = address;
+        this.port = port;
+        this.ep = new IPEndPoint(IPAddress.Parse(address), port);
+        this.timeout = timeout;
+    }
+
+    /// <summary>
+    /// 启用矩阵键盘的控制功能。
+    /// </summary>
+    /// <returns>返回一个包含操作结果的异步任务</returns>
+    public async ValueTask<Result<bool>> EnableControl()
+    {
+        if (MsgBus.IsRunning)
+            await MsgBus.UDPServer.ClearUDPData(this.address);
+        else return new(new Exception("Message Bus not work!"));
+
+        var ret = await UDPClientPool.WriteAddr(this.ep, MatrixKeyAddr.KEY_ENABLE, 1, this.timeout);
+        if (!ret.IsSuccessful) return new(ret.Error);
+        return ret.Value;
+    }
+
+    /// <summary>
+    /// 禁用矩阵键盘的控制功能。
+    /// </summary>
+    /// <returns>返回一个包含操作结果的异步任务</returns>
+    public async ValueTask<Result<bool>> DisableControl()
+    {
+        if (MsgBus.IsRunning)
+            await MsgBus.UDPServer.ClearUDPData(this.address);
+        else return new(new Exception("Message Bus not work!"));
+
+        var ret = await UDPClientPool.WriteAddr(this.ep, MatrixKeyAddr.KEY_ENABLE, 0, this.timeout);
+        if (!ret.IsSuccessful) return new(ret.Error);
+        return ret.Value;
+    }
+
+    /// <summary>
+    /// 控制矩阵键盘的按键状态。
+    /// </summary>
+    /// <param name="keyStates">表示按键状态的位数组，长度必须为16</param>
+    /// <returns>返回一个包含操作结果的异步任务</returns>
+    public async ValueTask<Result<bool>> ControlKey(BitArray keyStates)
+    {
+        if (MsgBus.IsRunning)
+            await MsgBus.UDPServer.ClearUDPData(this.address);
+        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);
+        if (!ret.IsSuccessful) return new(ret.Error);
+        return ret.Value;
+    }
+}
--- a/server/src/Peripherals/PowerClient.cs
+++ b/server/src/Peripherals/PowerClient.cs
@@ -0,0 +1,56 @@
+using System.Net;
+using DotNext;
+
+namespace Peripherals.PowerClient;
+
+class PowerAddr
+{
+    public const UInt32 Base = 0x10_00_00_00;
+    public const UInt32 PowerCtrl = Base + 7;
+}
+
+/// <summary>
+/// [TODO:description]
+/// </summary>
+public class Power
+{
+    private static readonly NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    readonly int timeout;
+
+    readonly int port;
+    readonly string address;
+    private IPEndPoint ep;
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="timeout">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    public Power(string address, int port, int timeout = 1000)
+    {
+        this.address = address;
+        this.port = port;
+        this.ep = new IPEndPoint(IPAddress.Parse(address), port);
+        this.timeout = timeout;
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="enable">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    public async ValueTask<Result<bool>> SetPowerOnOff(bool enable)
+    {
+        if (MsgBus.IsRunning)
+            await MsgBus.UDPServer.ClearUDPData(this.address);
+        else return new(new Exception("Message Bus not work!"));
+
+        var ret = await UDPClientPool.WriteAddr(this.ep, PowerAddr.PowerCtrl, Convert.ToUInt32(enable), this.timeout);
+        if (!ret.IsSuccessful) return new(ret.Error);
+        return ret.Value;
+    }
+}
+
--- a/server/src/TutorialController.cs
+++ b/server/src/TutorialController.cs
@@ -0,0 +1,55 @@
+using System.IO;
+using System.Collections.Generic;
+using Microsoft.AspNetCore.Mvc;
+
+namespace server.Controllers;
+
+/// <summary>
+/// 教程 API
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class TutorialController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+    private readonly IWebHostEnvironment _environment;
+
+    public TutorialController(IWebHostEnvironment environment)
+    {
+        _environment = environment;
+    }
+
+    /// <summary>
+    /// 获取所有可用的教程目录
+    /// </summary>
+    /// <returns>教程目录列表</returns>
+    [HttpGet]
+    [ProducesResponseType(StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public IActionResult GetTutorials()
+    {
+        try
+        {
+            // 获取文档目录
+            string docPath = Path.Combine(_environment.WebRootPath, "doc");
+            
+            if (!Directory.Exists(docPath))
+            {
+                return Ok(new { tutorials = new List<string>() });
+            }
+
+            // 获取所有子目录
+            var directories = Directory.GetDirectories(docPath)
+                .Select(Path.GetFileName)
+                .Where(dir => !string.IsNullOrEmpty(dir))
+                .ToList();
+
+            return Ok(new { tutorials = directories });
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "获取教程目录失败");
+            return StatusCode(500, new { error = "无法读取教程目录" });
+        }
+    }
+}
--- a/server/src/TutorialService.ts
+++ b/server/src/TutorialService.ts
@@ -0,0 +1,30 @@
+// 此接口提供获取例程目录服务
+// GET /api/tutorials 返回所有可用的例程目录
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { Request, Response } from 'express';
+
+// 获取当前文件的目录
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const publicDir = path.resolve(__dirname, '../public');
+
+export function getTutorials(req: Request, res: Response) {
+  try {
+    const docDir = path.join(publicDir, 'doc');
+    
+    // 读取doc目录下的所有文件夹
+    const entries = fs.readdirSync(docDir, { withFileTypes: true });
+    const dirs = entries
+      .filter(dirent => dirent.isDirectory())
+      .map(dirent => dirent.name);
+    
+    // 返回文件夹列表
+    res.json({ tutorials: dirs });
+  } catch (error) {
+    console.error('获取例程目录失败:', error);
+    res.status(500).json({ error: '无法读取例程目录' });
+  }
+}
--- a/server/src/UdpClientPool.cs
+++ b/server/src/UdpClientPool.cs
@@ -9,6 +9,8 @@ using WebProtocol;
 /// </summary>
 public class UDPClientPool
 {
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
    private static IPAddress localhost = IPAddress.Parse("127.0.0.1");

    /// <summary>
@@ -58,6 +60,9 @@ public class UDPClientPool
        var sendLen = socket.SendTo(buf, endPoint);
        socket.Close();

+        logger.Debug($"UDP socket send bytes to device {endPoint.Address.ToString()}:{endPoint.Port.ToString()}:");
+        logger.Debug($"  Original Data: {BitConverter.ToString(buf).Replace("-", " ")}");
+
        if (sendLen == buf.Length) { return true; }
        else { return false; }
    }
@@ -86,6 +91,10 @@ public class UDPClientPool
        var sendLen = socket.SendTo(sendBytes, endPoint);
        socket.Close();

+        logger.Debug($"UDP socket send address package to device {endPoint.Address.ToString()}:{endPoint.Port.ToString()}:");
+        logger.Debug($"  Original Data: {BitConverter.ToString(pkg.ToBytes()).Replace("-", " ")}");
+        logger.Debug($"  Decoded  Data: {pkg.ToString()}");
+
        if (sendLen == sendBytes.Length) { return true; }
        else { return false; }
    }
@@ -115,6 +124,9 @@ public class UDPClientPool
        var sendLen = socket.SendTo(sendBytes, endPoint);
        socket.Close();

+        logger.Debug($"UDP socket send data package to device {endPoint.Address.ToString()}:{endPoint.Port.ToString()}:");
+        logger.Debug($"  Original Data: {BitConverter.ToString(pkg.ToBytes()).Replace("-", " ")}");
+
        if (sendLen == sendBytes.Length) { return true; }
        else { return false; }
    }
--- a/server/src/VideoStreamService.cs
+++ b/server/src/VideoStreamService.cs
--- a/src/APIClient.ts
+++ b/src/APIClient.ts
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -0,0 +1,10 @@
+@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,11 +1,4 @@
-@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] *));
+@import "base.css";

 /* 禁止所有图像和SVG选择 */
 img, svg {
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -13,6 +13,7 @@
 <script lang="ts" setup>
 import { useDialogStore } from "@/stores/dialog";
 const dialog = useDialogStore();
+dialog.enableDialog = true;
 </script>

 <style scoped lang="postcss">
--- a/src/components/LabCanvas/ComponentSelector.vue
+++ b/src/components/LabCanvas/ComponentSelector.vue
@@ -181,7 +181,8 @@

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

 // Props 定义
 interface Props {
@@ -219,6 +220,7 @@ const availableComponents = [
  { type: "SMA", name: "SMA连接器" },
  { type: "MotherBoard", name: "主板" },
  { type: "PG2L100H_FBG676", name: "PG2L100H FBG676芯片" },
+  { type: "BaseBoard", name: "通用底板" },
 ];

 // --- 可用虚拟外设列表 ---
@@ -230,9 +232,16 @@ const availableTemplates = ref([
    name: "PG2L100H 基础开发板",
    id: "PG2L100H_Pango100pro",
    description: "包含主板和两个LED的基本设置",
-    path: "/public/EquipmentTemplates/PG2L100H_Pango100pro.json",
+    path: "/EquipmentTemplates/PG2L100H_Pango100pro.json",
    thumbnailUrl: motherboardSvg,
  },
+  {
+    name: "矩阵键盘",
+    id: "MatrixKey",
+    description: "包含4x4，共16个按键的矩阵键盘",
+    path: "/EquipmentTemplates/MatrixKey.json",
+    thumbnailUrl: buttonSvg,
+  },
 ]);

 // 显示/隐藏组件菜单
@@ -249,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 = {
@@ -372,6 +381,7 @@ async function addTemplate(template: any) {
      id: template.id,
      name: template.name,
      template: templateData,
+      capsPage: template.capsPage
    });

    // 关闭菜单
--- a/src/components/LabCanvas/DiagramCanvas.vue
+++ b/src/components/LabCanvas/DiagramCanvas.vue
@@ -1,9 +1,8 @@
 <template>
  <div class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container" ref="canvasContainer"
-      @mousedown="handleCanvasMouseDown"
-      @mousedown.middle.prevent="startMiddleDrag"
-      @wheel.prevent="onZoom"
-      @contextmenu.prevent="handleContextMenu">    <!-- 工具栏 -->
+    @mousedown="handleCanvasMouseDown" @mousedown.middle.prevent="startMiddleDrag" @wheel.prevent="onZoom"
+    @contextmenu.prevent="handleContextMenu">
+    <!-- 工具栏 -->
    <div class="absolute top-2 right-2 flex gap-2 z-30">
      <button class="btn btn-sm btn-primary" @click="openDiagramFileSelector">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
@@ -27,11 +26,14 @@
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        添加组件
-      </button>      <button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </button>
+      <button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
+          stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
-        {{ props.showDocPanel ? '属性面板' : '文档' }}
+        {{ props.showDocPanel ? "属性面板" : "文档" }}
      </button>
    </div>

@@ -71,17 +73,25 @@
            : 'none',
          opacity: component.isOn ? 1 : 0.6,
          display: 'block',
-        }" @mousedown.left.stop="startComponentDrag($event, component)" @mouseover="hoveredComponent = component.id"
-        @mouseleave="hoveredComponent = null">
+        }" @mousedown.left.stop="startComponentDrag($event, component)" @mouseover="
+          (event) => {
+            hoveredComponent = component.id;
+          }
+        " @mouseleave="
+          (event) => {
+            hoveredComponent = null;
+          }
+        ">
        <!-- 动态渲染组件 -->
-        <component :is="getComponentDefinition(component.type)" v-if="props.componentModules[component.type]"
-          v-bind="prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
+        <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="
            (value: string) =>
              updateComponentProp(component.id, 'bindKey', value)
          " @pin-click="
            (pinInfo: any) =>
              handlePinClick(component.id, pinInfo, pinInfo.originalEvent)
-          " :ref="(el: any) => setComponentRef(component.id, el)" />
+          " :ref="(el: any) => componentManager.setComponentRef(component.id, el)" />

        <!-- Fallback if component module not loaded yet -->
        <div v-else
@@ -89,6 +99,7 @@
          <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>
@@ -127,7 +138,8 @@ import {
  watch,
  provide,
 } from "vue";
-import WireComponent from "./equipments/Wire.vue";
+import { useEventListener } from "@vueuse/core";
+import WireComponent from "@/components/equipments/Wire.vue";

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

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

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

 // 右键菜单处理函数
 function handleContextMenu(e: MouseEvent) {
@@ -159,21 +172,23 @@ 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;  // 添加属性接收文档面板的显示状态
+  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);
@@ -199,8 +214,8 @@ const diagramData = ref<DiagramData>({
  connections: [],
 });

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

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

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

      // 尝试获取引脚精确位置
-      const endCompRef = componentRefs.value?.[endCompId];
+      const endCompRef = componentManager?.getComponentRef(endCompId);
      if (endCompRef && typeof endCompRef.getPinPosition === "function") {
        try {
          const pinPos = endCompRef.getPinPosition(endPinId);
@@ -315,6 +330,37 @@ 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;
@@ -352,73 +398,16 @@ 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;
-      emit("component-selected", null);
+      // 直接通过componentManager选择组件
+      if (componentManager) {
+        componentManager.selectComponent(null);
+      }
    }
  }

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

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

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

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

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

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

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

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

 // 拖拽组件过程
@@ -558,14 +545,6 @@ 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;
@@ -590,12 +569,14 @@ function onComponentDrag(e: MouseEvent) {
    }
  }

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

  // 通知图表已更新
  emit("diagram-updated", diagramData.value);
@@ -614,8 +595,7 @@ function stopComponentDrag() {
    draggingComponentId.value = null;
  }

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

 // 更新组件属性
@@ -624,14 +604,20 @@ function updateComponentProp(
  propName: string,
  value: any,
 ) {
-  diagramData.value = updatePartAttribute(
-    diagramData.value,
-    componentId,
-    propName,
-    value,
-  );
-  emit("diagram-updated", diagramData.value);
-  saveDiagramData(diagramData.value);
+  // 直接通过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);
+  }
 }

 // --- 连线操作 ---
@@ -661,8 +647,6 @@ 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);
@@ -671,7 +655,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
    console.log("引脚ID:", pinId);

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

    // 查找组件部件对象以获取组件位置
@@ -732,7 +716,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
      pinId,
      pinInfo.constraint,
    );
-    document.addEventListener("mousemove", onCreatingWireMouseMove);
+    isWireCreationEventActive.value = true;
  } else {
    // 完成连线创建
    if (
@@ -747,7 +731,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 = componentRefs.value[componentId];
+    const endComponent = componentManager?.getComponentRef(componentId);

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

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

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

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

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

 // --- 生命周期钩子 ---
 onMounted(async () => {
-  // 重置组件引用
-  resetComponentRefs();
+  // 设置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);
+  }

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

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

 // 处理键盘事件
@@ -1065,32 +1062,15 @@ 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) {
  // 检查组件是否仍然挂载
@@ -1105,7 +1085,7 @@ function updateDiagramDataDirectly(data: DiagramData) {
  emit("diagram-updated", data);
 }

-// 暴露方法给父组件
+// 暴露方法给父组件 - 简化版本，主要用于数据访问
 defineExpose({
  // 基本数据操作
  getDiagramData: () => diagramData.value,
@@ -1144,23 +1124,6 @@ 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,
@@ -1177,15 +1140,6 @@ 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
@@ -0,0 +1,646 @@
+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/composable/diagramManager.ts
+++ b/src/components/LabCanvas/composable/diagramManager.ts
--- a/src/components/LabCanvas/composable/wireManager.ts
+++ b/src/components/LabCanvas/composable/wireManager.ts
@@ -83,4 +83,3 @@ export function setMousePosition(x: number, y: number) {
  mousePosition.y = y;
 }

-// 其它Wire相关操作可继续扩展...
--- a/src/components/LabCanvas/index.ts
+++ b/src/components/LabCanvas/index.ts
@@ -0,0 +1,8 @@
+// 导出组件管理器服务
+export { useProvideComponentManager, useComponentManager } from './composable/componentManager';
+
+// 导出图表管理器
+export type { DiagramData, DiagramPart } from './composable/diagramManager';
+
+// 导出连线管理器
+export type { WireItem } from './composable/wireManager';
--- a/src/components/MarkdownRenderer.vue
+++ b/src/components/MarkdownRenderer.vue
@@ -1,30 +1,90 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { marked } from 'marked';
+import hljs from 'highlight.js';
+// 导入亮色主题样式
+import 'highlight.js/styles/github.css'; // 亮色主题
+// 导入主题存储
+import { useThemeStore } from '@/stores/theme';

 const props = defineProps({
    content: {
        type: String,
        required: true
+    },
+    removeFirstH1: {
+        type: Boolean,
+        default: false
    }
 });

+// 使用主题存储
+const themeStore = useThemeStore();
+// 使用 isDarkTheme 函数来检查当前是否为暗色主题
+const isDarkMode = computed(() => themeStore.isDarkTheme());
+
+// 监听主题变化
+watch(() => themeStore.currentTheme, () => {
+    // 主题变化时更新代码高亮样式
+    updateCodeBlocksTheme();
+});
+
+// 更新代码块主题样式
+const updateCodeBlocksTheme = () => {
+    // 这个函数可以在需要时手动更新代码块的样式
+    // 由于我们使用CSS变量控制样式，可能不需要特定实现
+    // 但如果需要，可以在这里添加额外逻辑
+};
+
 const renderedContent = computed(() => {
    if (!props.content) return '<p>没有内容</p>';
+    
    let processedContent = props.content;
-    // 设置 marked 选项
+    
+    // 如果需要，移除第一个一级标题
+    if (props.removeFirstH1) {
+        const lines = processedContent.split('\n');
+        const firstH1Index = lines.findIndex(line => line.startsWith('# '));
+        
+        if (firstH1Index !== -1) {
+            processedContent = lines.slice(firstH1Index + 1).join('\n');
+        }
+    }
+    
+    // 创建自定义渲染器
    const renderer = new marked.Renderer();
-    marked.setOptions({
+    
+    // 重写代码块渲染方法，添加语言信息
+    renderer.code = (code, incomingLanguage) => {
+        // 确保语言参数是字符串
+        const language = incomingLanguage || 'plaintext';
+        // 验证语言
+        const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
+        // 高亮代码
+        const highlightedCode = hljs.highlight(code, { language: validLanguage }).value;
+        
+        // 添加语言标签到代码块
+        return `<pre class="hljs" data-language="${validLanguage}"><code class="language-${validLanguage}">${highlightedCode}</code></pre>`;
+    };
+    
+    // 设置 marked 选项
+    marked.use({
        renderer: renderer,
        gfm: true,
        breaks: true
    });
+    
    return marked(processedContent);
 });
+
+// 页面挂载后，确保应用正确的主题样式
+onMounted(() => {
+    updateCodeBlocksTheme();
+});
 </script>

 <template>
-    <div class="markdown-content" v-html="renderedContent"></div>
+    <div class="markdown-content" :data-theme="themeStore.currentTheme" v-html="renderedContent"></div>
 </template>

 <style scoped>
@@ -33,6 +93,8 @@ const renderedContent = computed(() => {
  line-height: 1.6;
  padding: 1rem 1.5rem;
  max-width: 100%;
+  background-color: inherit; /* 继承父元素的背景色 */
+  height: 100%;
 }

 .markdown-content :deep(img) {
@@ -45,47 +107,64 @@ const renderedContent = computed(() => {
 }

 .markdown-content :deep(h1) {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
+  margin-top: 2.5rem;
+  margin-bottom: 1.5rem;
  color: hsl(var(--bc));
  font-weight: 700;
-  font-size: 2rem;
+  font-size: 2.2rem;
  line-height: 1.3;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid hsl(var(--b2));
+  padding-bottom: 0.7rem;
+  border-bottom: 2px solid hsl(var(--p) / 0.7);
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
 }

 .markdown-content :deep(h2) {
-  margin-top: 1.8rem;
-  margin-bottom: 0.8rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
  color: hsl(var(--bc));
  font-weight: 600;
-  font-size: 1.5rem;
+  font-size: 1.7rem;
  line-height: 1.4;
-  padding-left: 0.5rem;
-  border-left: 4px solid hsl(var(--p));
+  padding: 0.5rem 1rem;
+  border-left: 5px solid hsl(var(--p));
+  background: linear-gradient(to right, hsl(var(--b2) / 0.5), transparent);
+  border-radius: 0.3rem;
 }

 .markdown-content :deep(h3) {
-  margin-top: 1.5rem;
-  margin-bottom: 0.75rem;
+  margin-top: 1.8rem;
+  margin-bottom: 0.9rem;
  color: hsl(var(--bc));
  font-weight: 600;
-  font-size: 1.25rem;
+  font-size: 1.4rem;
  line-height: 1.4;
  padding-left: 1rem;
+  border-left: 3px solid hsl(var(--s));
+  padding-top: 0.3rem;
+  padding-bottom: 0.3rem;
 }

 .markdown-content :deep(h4),
 .markdown-content :deep(h5),
 .markdown-content :deep(h6) {
-  margin-top: 1.2rem;
-  margin-bottom: 0.6rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0.7rem;
  color: hsl(var(--bc));
  font-weight: 600;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
  line-height: 1.5;
  padding-left: 1.5rem;
+  position: relative;
+}
+
+.markdown-content :deep(h4::before),
+.markdown-content :deep(h5::before),
+.markdown-content :deep(h6::before) {
+  content: '▶';
+  color: hsl(var(--p) / 0.7);
+  position: absolute;
+  left: 0.2rem;
+  font-size: 0.9em;
 }

 .markdown-content :deep(p) {
@@ -97,21 +176,31 @@ const renderedContent = computed(() => {

 .markdown-content :deep(ul),
 .markdown-content :deep(ol) {
-  padding-left: 2em;
-  margin: 0.75rem 0;
+  padding-left: 2.5em;
+  margin: 1.25rem 0;
  color: hsl(var(--bc) / 0.8);
+  background-color: hsl(var(--b1) / 0.3);
+  border-radius: 0.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-right: 1rem;
+  border-left: 3px solid hsl(var(--p) / 0.7);
 }

 .markdown-content :deep(li) {
-  margin: 0.4rem 0;
+  margin: 0.5rem 0;
  position: relative;
+  padding-left: 0.5rem;
 }

 .markdown-content :deep(ul ul),
 .markdown-content :deep(ul ol),
 .markdown-content :deep(ol ul),
 .markdown-content :deep(ol ol) {
-  margin: 0.4rem 0 0.4rem 1rem;
+  margin: 0.5rem 0 0.5rem 0.5rem;
+  padding-left: 1.5rem;
+  border-left: 2px solid hsl(var(--s) / 0.5);
+  background-color: transparent;
 }

 .markdown-content :deep(ul) {
@@ -134,45 +223,142 @@ const renderedContent = computed(() => {
  color: hsl(var(--p));
 }

+.markdown-content :deep(ol li::marker) {
+  color: hsl(var(--s));
+}
+
+/* 代码块样式增强 - 响应主题 */
 .markdown-content :deep(pre) {
-  background-color: hsl(var(--b3));
+  background-color: var(--code-bg, hsl(var(--b2)));
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  border: 1px solid hsl(var(--b2));
-  margin: 1rem 0;
+  margin: 1.5rem 0;
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  position: relative;
+  color: var(--code-color, hsl(var(--bc)));
 }

+.markdown-content :deep(pre::before) {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, hsl(var(--p)), hsl(var(--s)));
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+/* 代码语言标签 */
+.markdown-content :deep(pre.hljs::after) {
+  content: attr(data-language);
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: var(--code-label-color, hsl(var(--bc) / 0.7));
+  font-size: 0.75rem;
+  background-color: var(--code-label-bg, hsl(var(--b3)));
+  padding: 0.2rem 0.5rem;
+  border-radius: 0 0.3rem 0 0.3rem;
+  opacity: 0.8;
+}
+
+/* 内联代码样式 */
 .markdown-content :deep(code) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  background-color: hsl(var(--b3));
-  padding: 2px 0.5rem;
+  background-color: var(--inline-code-bg, hsl(var(--b3) / 0.7));
+  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.9em;
-  color: hsl(var(--p));
+  color: var(--inline-code-color, hsl(var(--p)));
+  border: 1px solid hsl(var(--b2) / 0.5);
+}
+
+/* 确保代码块内的代码不受内联代码样式影响 */
+.markdown-content :deep(pre code) {
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  color: inherit;
+  font-size: 0.95em;
+  line-height: 1.5;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+/* 为常见语言添加一些特殊的高亮效果 */
+.markdown-content :deep(.hljs-keyword),
+.markdown-content :deep(.hljs-tag),
+.markdown-content :deep(.hljs-selector-tag) {
+  color: #cc99cd; /* 紫色，用于关键字 */
+}
+
+.markdown-content :deep(.hljs-string),
+.markdown-content :deep(.hljs-regexp),
+.markdown-content :deep(.hljs-template-tag) {
+  color: #7ec699; /* 绿色，用于字符串 */
+}
+
+.markdown-content :deep(.hljs-number),
+.markdown-content :deep(.hljs-literal) {
+  color: #f08d49; /* 橙色，用于数字 */
+}
+
+.markdown-content :deep(.hljs-comment) {
+  color: #999999; /* 灰色，用于注释 */
+  font-style: italic;
+}
+
+.markdown-content :deep(.hljs-name),
+.markdown-content :deep(.hljs-attribute),
+.markdown-content :deep(.hljs-selector-id),
+.markdown-content :deep(.hljs-selector-class) {
+  color: #e2777a; /* 红色，用于HTML标签名和属性 */
+}
+
+.markdown-content :deep(.hljs-built_in),
+.markdown-content :deep(.hljs-builtin-name) {
+  color: #6196cc; /* 蓝色，用于内置函数 */
+}
+
+.markdown-content :deep(.hljs-title),
+.markdown-content :deep(.hljs-function) {
+  color: #f8c555; /* 金色，用于函数名和类名 */
 }

 .markdown-content :deep(table) {
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
  width: 100%;
-  margin: 1rem 0;
+  margin: 1.5rem 0;
  background-color: hsl(var(--b1));
  border-radius: 0.5rem;
  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  border: 1px solid hsl(var(--b2));
 }

 .markdown-content :deep(th),
 .markdown-content :deep(td) {
  border: 1px solid hsl(var(--b2));
-  padding: 0.75rem;
+  padding: 0.75rem 1rem;
  text-align: left;
 }

 .markdown-content :deep(th) {
-  background-color: hsl(var(--b2));
-  font-weight: 500;
+  background-color: hsl(var(--p) / 0.15);
+  font-weight: 600;
  color: hsl(var(--bc));
+  border-bottom: 2px solid hsl(var(--p) / 0.5);
+}
+
+.markdown-content :deep(tr:nth-child(even)) {
+  background-color: hsl(var(--b2) / 0.3);
+}
+
+.markdown-content :deep(tr:hover) {
+  background-color: hsl(var(--b2) / 0.5);
 }

 .markdown-content :deep(td) {
@@ -180,12 +366,29 @@ const renderedContent = computed(() => {
 }

 .markdown-content :deep(blockquote) {
-  margin: 1rem 0;
-  padding: 0.5rem 1rem;
+  margin: 1.5rem 0;
+  padding: 1rem 1.5rem;
  border-left: 4px solid hsl(var(--p));
-  background-color: hsl(var(--b2));
-  color: hsl(var(--bc) / 0.8);
+  background-color: hsl(var(--b2) / 0.3);
+  color: hsl(var(--bc) / 0.9);
  font-style: italic;
+  border-radius: 0 0.5rem 0.5rem 0;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
+  position: relative;
+}
+
+.markdown-content :deep(blockquote::before) {
+  content: '"';
+  font-size: 2rem;
+  color: hsl(var(--p) / 0.3);
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  font-family: serif;
+}
+
+.markdown-content :deep(blockquote p) {
+  margin-top: 0.5rem;
 }

 .markdown-content :deep(hr) {
@@ -204,4 +407,245 @@ const renderedContent = computed(() => {
  color: hsl(var(--pf));
  text-decoration: underline;
 }
+
+/* 亮色主题下的代码样式 */
+:root[data-theme="winter"] .markdown-content :deep(.hljs),
+.markdown-content[data-theme="winter"] :deep(.hljs),
+[data-theme="winter"] .markdown-content :deep(.hljs) {
+  --code-bg: #f5f7ff;
+  --code-color: #333;
+  --inline-code-bg: #f0f2fa;
+  --inline-code-color: #d32f2f;
+  --code-label-bg: #e6e9f5;
+  --code-label-color: #666;
+}
+
+/* 亮色主题下的语法高亮 */
+:root[data-theme="winter"] .markdown-content :deep(.hljs-keyword),
+.markdown-content[data-theme="winter"] :deep(.hljs-keyword),
+[data-theme="winter"] .markdown-content :deep(.hljs-keyword),
+:root[data-theme="winter"] .markdown-content :deep(.hljs-tag),
+.markdown-content[data-theme="winter"] :deep(.hljs-tag),
+[data-theme="winter"] .markdown-content :deep(.hljs-tag),
+:root[data-theme="winter"] .markdown-content :deep(.hljs-selector-tag),
+.markdown-content[data-theme="winter"] :deep(.hljs-selector-tag),
+[data-theme="winter"] .markdown-content :deep(.hljs-selector-tag) {
+  color: #8959a8; /* 紫色，用于关键字 */
+}
+
+:root[data-theme="winter"] .markdown-content :deep(.hljs-string),
+.markdown-content[data-theme="winter"] :deep(.hljs-string),
+[data-theme="winter"] .markdown-content :deep(.hljs-string),
+:root[data-theme="winter"] .markdown-content :deep(.hljs-regexp),
+.markdown-content[data-theme="winter"] :deep(.hljs-regexp),
+[data-theme="winter"] .markdown-content :deep(.hljs-regexp) {
+  color: #2e7d32; /* 绿色，用于字符串 */
+}
+
+:root[data-theme="winter"] .markdown-content :deep(.hljs-number),
+.markdown-content[data-theme="winter"] :deep(.hljs-number),
+[data-theme="winter"] .markdown-content :deep(.hljs-number),
+:root[data-theme="winter"] .markdown-content :deep(.hljs-literal),
+.markdown-content[data-theme="winter"] :deep(.hljs-literal),
+[data-theme="winter"] .markdown-content :deep(.hljs-literal) {
+  color: #f5871f; /* 橙色，用于数字 */
+}
+
+:root[data-theme="winter"] .markdown-content :deep(.hljs-comment),
+.markdown-content[data-theme="winter"] :deep(.hljs-comment),
+[data-theme="winter"] .markdown-content :deep(.hljs-comment) {
+  color: #8e908c; /* 灰色，用于注释 */
+  font-style: italic;
+}
+
+:root[data-theme="winter"] .markdown-content :deep(.hljs-built_in),
+.markdown-content[data-theme="winter"] :deep(.hljs-built_in),
+[data-theme="winter"] .markdown-content :deep(.hljs-built_in) {
+  color: #3e999f; /* 青色，用于内置函数 */
+}
+
+:root[data-theme="winter"] .markdown-content :deep(.hljs-title),
+.markdown-content[data-theme="winter"] :deep(.hljs-title),
+[data-theme="winter"] .markdown-content :deep(.hljs-title),
+:root[data-theme="winter"] .markdown-content :deep(.hljs-function),
+.markdown-content[data-theme="winter"] :deep(.hljs-function),
+[data-theme="winter"] .markdown-content :deep(.hljs-function) {
+  color: #4271ae; /* 蓝色，用于函数名 */
+}
+
+:root[data-theme="winter"] .markdown-content :deep(.hljs-name),
+.markdown-content[data-theme="winter"] :deep(.hljs-name),
+[data-theme="winter"] .markdown-content :deep(.hljs-name),
+:root[data-theme="winter"] .markdown-content :deep(.hljs-attribute),
+.markdown-content[data-theme="winter"] :deep(.hljs-attribute),
+[data-theme="winter"] .markdown-content :deep(.hljs-attribute) {
+  color: #c82829; /* 红色，用于HTML标签和属性 */
+}
+
+/* 暗黑主题下的代码样式 */
+:root[data-theme="night"] .markdown-content :deep(.hljs),
+.markdown-content[data-theme="night"] :deep(.hljs),
+[data-theme="night"] .markdown-content :deep(.hljs) {
+  --code-bg: #1e1e2e;
+  --code-color: #f8f8f2;
+  --inline-code-bg: #282a36;
+  --inline-code-color: #ff79c6;
+  --code-label-bg: #282a36;
+  --code-label-color: #bd93f9;
+}
+
+/* 暗黑主题下的语法高亮 */
+:root[data-theme="night"] .markdown-content :deep(.hljs-keyword),
+.markdown-content[data-theme="night"] :deep(.hljs-keyword),
+[data-theme="night"] .markdown-content :deep(.hljs-keyword),
+:root[data-theme="night"] .markdown-content :deep(.hljs-tag),
+.markdown-content[data-theme="night"] :deep(.hljs-tag),
+[data-theme="night"] .markdown-content :deep(.hljs-tag),
+:root[data-theme="night"] .markdown-content :deep(.hljs-selector-tag),
+.markdown-content[data-theme="night"] :deep(.hljs-selector-tag),
+[data-theme="night"] .markdown-content :deep(.hljs-selector-tag) {
+  color: #cc99cd; /* 紫色，用于关键字 */
+}
+
+:root[data-theme="night"] .markdown-content :deep(.hljs-string),
+.markdown-content[data-theme="night"] :deep(.hljs-string),
+[data-theme="night"] .markdown-content :deep(.hljs-string),
+:root[data-theme="night"] .markdown-content :deep(.hljs-regexp),
+.markdown-content[data-theme="night"] :deep(.hljs-regexp),
+[data-theme="night"] .markdown-content :deep(.hljs-regexp) {
+  color: #7ec699; /* 绿色，用于字符串 */
+}
+
+:root[data-theme="night"] .markdown-content :deep(.hljs-number),
+.markdown-content[data-theme="night"] :deep(.hljs-number),
+[data-theme="night"] .markdown-content :deep(.hljs-number),
+:root[data-theme="night"] .markdown-content :deep(.hljs-literal),
+.markdown-content[data-theme="night"] :deep(.hljs-literal),
+[data-theme="night"] .markdown-content :deep(.hljs-literal) {
+  color: #f08d49; /* 橙色，用于数字 */
+}
+
+:root[data-theme="night"] .markdown-content :deep(.hljs-comment),
+.markdown-content[data-theme="night"] :deep(.hljs-comment),
+[data-theme="night"] .markdown-content :deep(.hljs-comment) {
+  color: #999999; /* 灰色，用于注释 */
+  font-style: italic;
+}
+
+:root[data-theme="night"] .markdown-content :deep(.hljs-built_in),
+.markdown-content[data-theme="night"] :deep(.hljs-built_in),
+[data-theme="night"] .markdown-content :deep(.hljs-built_in) {
+  color: #6196cc; /* 蓝色，用于内置函数 */
+}
+
+:root[data-theme="night"] .markdown-content :deep(.hljs-title),
+.markdown-content[data-theme="night"] :deep(.hljs-title),
+[data-theme="night"] .markdown-content :deep(.hljs-title),
+:root[data-theme="night"] .markdown-content :deep(.hljs-function),
+.markdown-content[data-theme="night"] :deep(.hljs-function),
+[data-theme="night"] .markdown-content :deep(.hljs-function) {
+  color: #f8c555; /* 金色，用于函数名 */
+}
+
+:root[data-theme="night"] .markdown-content :deep(.hljs-name),
+.markdown-content[data-theme="night"] :deep(.hljs-name),
+[data-theme="night"] .markdown-content :deep(.hljs-name),
+:root[data-theme="night"] .markdown-content :deep(.hljs-attribute),
+.markdown-content[data-theme="night"] :deep(.hljs-attribute),
+[data-theme="night"] .markdown-content :deep(.hljs-attribute) {
+  color: #e2777a; /* 红色，用于HTML标签和属性 */
+}
+
+.markdown-content :deep(table) {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  margin: 1.5rem 0;
+  background-color: hsl(var(--b1));
+  border-radius: 0.5rem;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  border: 1px solid hsl(var(--b2));
+}
+
+.markdown-content :deep(th),
+.markdown-content :deep(td) {
+  border: 1px solid hsl(var(--b2));
+  padding: 0.75rem 1rem;
+  text-align: left;
+}
+
+.markdown-content :deep(th) {
+  background-color: hsl(var(--p) / 0.15);
+  font-weight: 600;
+  color: hsl(var(--bc));
+  border-bottom: 2px solid hsl(var(--p) / 0.5);
+}
+
+.markdown-content :deep(tr:nth-child(even)) {
+  background-color: hsl(var(--b2) / 0.3);
+}
+
+.markdown-content :deep(tr:hover) {
+  background-color: hsl(var(--b2) / 0.5);
+}
+
+.markdown-content :deep(td) {
+  color: hsl(var(--bc) / 0.8);
+}
+
+.markdown-content :deep(blockquote) {
+  margin: 1.5rem 0;
+  padding: 1rem 1.5rem;
+  border-left: 4px solid hsl(var(--p));
+  background-color: hsl(var(--b2) / 0.3);
+  color: hsl(var(--bc) / 0.9);
+  font-style: italic;
+  border-radius: 0 0.5rem 0.5rem 0;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
+  position: relative;
+}
+
+.markdown-content :deep(blockquote::before) {
+  content: '"';
+  font-size: 2rem;
+  color: hsl(var(--p) / 0.3);
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  font-family: serif;
+}
+
+.markdown-content :deep(blockquote p) {
+  margin-top: 0.5rem;
+}
+
+.markdown-content :deep(hr) {
+  border: none;
+  border-top: 1px solid hsl(var(--b2));
+  margin: 1.5rem 0;
+}
+
+.markdown-content :deep(a) {
+  color: hsl(var(--p));
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.markdown-content :deep(a:hover) {
+  color: hsl(var(--pf));
+  text-decoration: underline;
+}
+
+/* 暗黑模式下的代码高亮调整 */
+@media (prefers-color-scheme: dark) {
+  .markdown-content :deep(pre) {
+    background-color: hsl(var(--b3));
+    border-color: hsl(var(--b1) / 0.7);
+  }
+  
+  .markdown-content :deep(code) {
+    background-color: hsl(var(--b2) / 0.7);
+  }
+}
 </style>
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -49,6 +49,19 @@
              测试功能
            </router-link>
          </li>
+          <li class="my-1 hover:translate-x-1 transition-all duration-300">
+            <router-link to="/markdown-test" class="text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                <polyline points="14 2 14 8 20 8"></polyline>
+                <line x1="16" y1="13" x2="8" y2="13"></line>
+                <line x1="16" y1="17" x2="8" y2="17"></line>
+                <polyline points="10 9 9 9 8 9"></polyline>
+              </svg>
+              Markdown测试
+            </router-link>
+          </li>
          <li class="my-1 hover:translate-x-1 transition-all duration-300">
            <a href="http://localhost:5000/swagger" target="_self" rel="noopener noreferrer"
              class="text-base font-medium">
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
SikongJueluo	de28471f87	rm：去除konva	2025-07-09 17:05:29 +08:00
SikongJueluo	3a292c0a98	refactor：持续解耦合	2025-07-09 16:32:17 +08:00
SikongJueluo	91b00a977c	refactor: 给Canvas解耦合	2025-07-09 15:55:49 +08:00
SikongJueluo	c5ce246caf	refactor: 重构projectview页面结构	2025-07-09 14:42:29 +08:00
SikongJueluo	c3bd61ed51	refactor: 重构canvas	2025-07-03 21:56:58 +08:00
SikongJueluo	14d8499f77	refactor: try to rewrite component manager	2025-07-02 21:16:18 +08:00
SikongJueluo	d18cf82813	feat: right mouse down to drag canvas	2025-07-02 20:27:35 +08:00
SikongJueluo	f1e2dbd9d8	feat: add components drawer	2025-07-01 21:08:58 +08:00
SikongJueluo	262c5e4003	fix: select not work	2025-07-01 20:12:39 +08:00
SikongJueluo	fbd13f8f2f	fix: select rect wrong after zoom in / out	2025-06-30 21:48:41 +08:00
SikongJueluo	6cf7ef02ac	feat: add resizer and add zoom in / out for canvas	2025-06-30 21:39:08 +08:00
SikongJueluo	8207c37e12	fix: box select failed	2025-06-14 10:58:00 +08:00
SikongJueluo	db71681bdf	try to fix box select	2025-06-13 22:05:09 +08:00
SikongJueluo	2270022bbe	feat: auto hide rect bounding when not hover	2025-06-13 21:05:44 +08:00
SikongJueluo	dcadb97a7f	fix: correct calculate rect bounding	2025-06-13 20:08:46 +08:00
SikongJueluo	1538bb9d07	add boarder	2025-06-12 21:49:23 +08:00
SikongJueluo	f340c86a41	feat: add rect select but have some problems	2025-06-11 21:25:15 +08:00
SikongJueluo	b6fb7e05fa	refactor: rewrite basic canvas using konva	2025-06-06 21:05:46 +08:00
SikongJueluo	e0db12e0eb	update flake and add konva	2025-06-06 20:28:17 +08:00
SikongJueluo	dc64a65702	feat: add power control	2025-05-20 19:11:29 +08:00
SikongJueluo	46621fdb40	fix: jam when doc panel open	2025-05-20 18:34:44 +08:00
SikongJueluo	970a537391	Merge branch 'master' into csharp	2025-05-20 18:14:00 +08:00
SikongJueluo	3883cd8304	fix: matrix key not work	2025-05-20 18:13:52 +08:00
SikongJueluo	2aa2f1dc37	fix: matrix key not work	2025-05-20 18:13:52 +08:00
SikongJueluo	1bdcb672ab	feat: frontend add virtual matrix key	2025-05-20 18:13:52 +08:00
SikongJueluo	7b1d1a5e87	fix: backend change matrix key api to post to fix set failed	2025-05-20 18:13:52 +08:00
SikongJueluo	5bb011e685	feag: backend add matrix key peripheral with its web api	2025-05-20 18:13:52 +08:00
SikongJueluo	e3826f0ff6	feat: add logger to udpclient	2025-05-20 18:13:52 +08:00
SikongJueluo	f8163be98b	fix: matrix key not work	2025-05-20 18:11:04 +08:00
alivender	ea7c2d425a	add: more exp	2025-05-20 18:04:25 +08:00
SikongJueluo	e4791b41a8	fix: matrix key not work	2025-05-20 17:23:00 +08:00
SikongJueluo	bea1c7e5ae	feat: frontend add virtual matrix key	2025-05-20 17:09:57 +08:00
alivender	b6d8612e8c	feat: optimize segment	2025-05-20 16:25:02 +08:00
SikongJueluo	b68d8eaf11	fix: backend change matrix key api to post to fix set failed	2025-05-20 11:21:12 +08:00
SikongJueluo	390ce8250d	feag: backend add matrix key peripheral with its web api	2025-05-20 11:14:00 +08:00
alivender	09b8f676ba	add: more exp markdown	2025-05-20 10:51:38 +08:00
alivender	cc83133a6c	feat: code block dark mode	2025-05-20 10:15:42 +08:00
alivender	6d640e8049	add: home select exp	2025-05-20 09:35:29 +08:00
SikongJueluo	07eb606324	feat: add logger to udpclient	2025-05-20 09:34:26 +08:00
alivender	8eefed92a8	Merge branch 'master' of ssh://git.swordlost.top:222/SikongJueluo/FPGA_WebLab into dpp	2025-05-19 23:08:38 +08:00
alivender	8f2f90ef1d	add: segment afterglow effect	2025-05-19 23:08:22 +08:00
SikongJueluo	487e7c114a	chore: fix build failure refactor: delete /public/equiments api	2025-05-19 22:29:28 +08:00