Compare commits
19 Commits
7ffb15c722
...
refactor
| Author | SHA1 | Date | |
|---|---|---|---|
| de28471f87 | |||
| 3a292c0a98 | |||
| 91b00a977c | |||
| c5ce246caf | |||
| c3bd61ed51 | |||
| 14d8499f77 | |||
| d18cf82813 | |||
| f1e2dbd9d8 | |||
| 262c5e4003 | |||
| fbd13f8f2f | |||
| 6cf7ef02ac | |||
| 8207c37e12 | |||
| db71681bdf | |||
| 2270022bbe | |||
| dcadb97a7f | |||
| 1538bb9d07 | |||
| f340c86a41 | |||
| b6fb7e05fa | |||
| e0db12e0eb |
13
TODO.md
13
TODO.md
@@ -1,13 +0,0 @@
|
||||
# TODO
|
||||
|
||||
1. 后端HTTP视频流
|
||||
|
||||
640*480, RGB565
|
||||
0x0000_0000 + 25800
|
||||
|
||||
|
||||
2. 信号发生器界面导入.dat文件
|
||||
3. 示波器后端交互、前端界面
|
||||
4. 逻辑分析仪后端交互、前端界面
|
||||
5. 前端重构
|
||||
6. 数据库 —— 用户登录、板卡资源分配、板卡IP地址分配
|
||||
56
components.d.ts
vendored
Normal file
56
components.d.ts
vendored
Normal file
@@ -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']
|
||||
}
|
||||
}
|
||||
10
flake.lock
generated
10
flake.lock
generated
@@ -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",
|
||||
|
||||
660
package-lock.json
generated
660
package-lock.json
generated
@@ -10,14 +10,16 @@
|
||||
"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",
|
||||
@@ -39,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"
|
||||
@@ -960,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",
|
||||
@@ -1352,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",
|
||||
@@ -1620,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",
|
||||
@@ -1650,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",
|
||||
@@ -1990,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",
|
||||
@@ -2010,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",
|
||||
@@ -2064,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",
|
||||
@@ -2074,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",
|
||||
@@ -2153,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",
|
||||
@@ -2166,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",
|
||||
@@ -2250,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": {
|
||||
@@ -2316,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",
|
||||
@@ -2459,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",
|
||||
@@ -2490,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",
|
||||
@@ -2561,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",
|
||||
@@ -2613,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",
|
||||
@@ -2629,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",
|
||||
@@ -2648,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",
|
||||
@@ -3042,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",
|
||||
@@ -3074,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",
|
||||
@@ -3162,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",
|
||||
@@ -3211,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",
|
||||
@@ -3301,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",
|
||||
@@ -3416,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",
|
||||
@@ -3467,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",
|
||||
@@ -3481,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",
|
||||
@@ -3687,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": {
|
||||
@@ -3703,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": {
|
||||
@@ -3763,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",
|
||||
@@ -3793,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",
|
||||
@@ -4053,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",
|
||||
|
||||
@@ -16,14 +16,16 @@
|
||||
"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",
|
||||
@@ -45,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"
|
||||
|
||||
@@ -3,7 +3,6 @@ using Microsoft.Extensions.FileProviders;
|
||||
using Newtonsoft.Json;
|
||||
using NLog;
|
||||
using NLog.Web;
|
||||
using server.src;
|
||||
|
||||
// Early init of NLog to allow startup and exception logging, before host is built
|
||||
var logger = NLog.LogManager.Setup()
|
||||
@@ -58,6 +57,7 @@ try
|
||||
});
|
||||
|
||||
// Add Swagger
|
||||
builder.Services.AddControllers();
|
||||
builder.Services.AddOpenApiDocument(options =>
|
||||
{
|
||||
options.PostProcess = document =>
|
||||
@@ -82,10 +82,6 @@ try
|
||||
};
|
||||
});
|
||||
|
||||
// 添加 HTTP 视频流服务
|
||||
builder.Services.AddSingleton<HttpVideoStreamService>();
|
||||
builder.Services.AddHostedService(provider => provider.GetRequiredService<HttpVideoStreamService>());
|
||||
|
||||
// Application Settings
|
||||
var app = builder.Build();
|
||||
// Configure the HTTP request pipeline.
|
||||
@@ -99,14 +95,12 @@ try
|
||||
logger.Info($"Use Static Files : {Path.Combine(Directory.GetCurrentDirectory(), "wwwroot")}");
|
||||
app.UseDefaultFiles();
|
||||
app.UseStaticFiles(); // Serves files from wwwroot by default
|
||||
|
||||
// Assets Files
|
||||
app.UseStaticFiles(new StaticFileOptions
|
||||
{
|
||||
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "assets")),
|
||||
RequestPath = "/assets"
|
||||
});
|
||||
|
||||
// Log Files
|
||||
if (!Directory.Exists(Path.Combine(Directory.GetCurrentDirectory(), "log")))
|
||||
{
|
||||
@@ -119,7 +113,7 @@ try
|
||||
});
|
||||
app.MapFallbackToFile("index.html");
|
||||
}
|
||||
|
||||
// Add logs
|
||||
app.UseHttpsRedirection();
|
||||
app.UseRouting();
|
||||
app.UseCors();
|
||||
|
||||
@@ -22,10 +22,9 @@
|
||||
<PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="9.0.4" />
|
||||
<PackageReference Include="Microsoft.OpenApi" Version="1.6.23" />
|
||||
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
|
||||
<PackageReference Include="NLog" Version="5.4.0" />
|
||||
<PackageReference Include="NLog" Version="5.4.0" />
|
||||
<PackageReference Include="NLog.Web.AspNetCore" Version="5.4.0" />
|
||||
<PackageReference Include="NSwag.AspNetCore" Version="14.3.0" />
|
||||
<PackageReference Include="SixLabors.ImageSharp" Version="3.1.10" />
|
||||
<PackageReference Include="System.Data.SQLite.Core" Version="1.0.119" />
|
||||
</ItemGroup>
|
||||
|
||||
|
||||
@@ -106,15 +106,15 @@ public class UDPController : ControllerBase
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获取指定IP地址接收的数据列表
|
||||
/// 获取指定IP地址接受的数据列表
|
||||
/// </summary>
|
||||
/// <param name="address">IP地址</param>
|
||||
[HttpGet("GetRecvDataArray")]
|
||||
[ProducesResponseType(typeof(List<UDPData>), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(StatusCodes.Status500InternalServerError)]
|
||||
public async ValueTask<IResult> GetRecvDataArray(string address, int taskID)
|
||||
public async ValueTask<IResult> GetRecvDataArray(string address)
|
||||
{
|
||||
var ret = await MsgBus.UDPServer.GetDataArrayAsync(address, taskID);
|
||||
var ret = await MsgBus.UDPServer.GetDataArrayAsync(address);
|
||||
|
||||
if (ret.HasValue)
|
||||
{
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
using Microsoft.AspNetCore.Cors;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
|
||||
namespace server.src.Controllers; /// <summary>
|
||||
/// HTTP 视频流控制器
|
||||
/// </summary>
|
||||
[ApiController]
|
||||
[Route("api/[controller]")]
|
||||
public class VideoStreamController : ControllerBase
|
||||
{ private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
|
||||
private readonly server.src.HttpVideoStreamService _videoStreamService; /// <summary>
|
||||
/// 初始化HTTP视频流控制器
|
||||
/// </summary>
|
||||
/// <param name="videoStreamService">HTTP视频流服务</param>
|
||||
public VideoStreamController(server.src.HttpVideoStreamService videoStreamService)
|
||||
{
|
||||
logger.Info("创建VideoStreamController，命名空间：{Namespace}", this.GetType().Namespace);
|
||||
_videoStreamService = videoStreamService;
|
||||
} /// <summary>
|
||||
/// 获取 HTTP 视频流服务状态
|
||||
/// </summary>
|
||||
/// <returns>服务状态信息</returns>
|
||||
[HttpGet("Status")]
|
||||
[EnableCors("Users")]
|
||||
[ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)] public IResult GetStatus()
|
||||
{
|
||||
try
|
||||
{
|
||||
logger.Info("GetStatus方法被调用，控制器：{Controller}，路径：api/VideoStream/Status", this.GetType().Name);
|
||||
|
||||
// 使用HttpVideoStreamService提供的状态信息
|
||||
var status = _videoStreamService.GetServiceStatus();
|
||||
|
||||
// 转换为小写首字母的JSON属性（符合前端惯例）
|
||||
return TypedResults.Ok(new
|
||||
{
|
||||
isRunning = true, // HTTP视频流服务作为后台服务始终运行
|
||||
serverPort = _videoStreamService.ServerPort,
|
||||
streamUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-feed.html",
|
||||
mjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream",
|
||||
snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot",
|
||||
connectedClients = _videoStreamService.ConnectedClientsCount,
|
||||
clientEndpoints = _videoStreamService.GetConnectedClientEndpoints()
|
||||
});
|
||||
} catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "获取 HTTP 视频流服务状态失败"); return TypedResults.InternalServerError(ex.Message);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获取 HTTP 视频流信息
|
||||
/// </summary>
|
||||
/// <returns>流信息</returns>
|
||||
[HttpGet("StreamInfo")]
|
||||
[EnableCors("Users")]
|
||||
[ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
|
||||
public IResult GetStreamInfo()
|
||||
{
|
||||
try
|
||||
{
|
||||
logger.Info("获取 HTTP 视频流信息");
|
||||
return TypedResults.Ok(new
|
||||
{
|
||||
frameRate = _videoStreamService.FrameRate,
|
||||
frameWidth = _videoStreamService.FrameWidth,
|
||||
frameHeight = _videoStreamService.FrameHeight,
|
||||
format = "MJPEG",
|
||||
htmlUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-feed.html",
|
||||
mjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream",
|
||||
snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot"
|
||||
});
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "获取 HTTP 视频流信息失败"); return TypedResults.InternalServerError(ex.Message);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 测试 HTTP 视频流连接
|
||||
/// </summary>
|
||||
/// <returns>连接测试结果</returns>
|
||||
[HttpPost("TestConnection")]
|
||||
[EnableCors("Users")]
|
||||
[ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
|
||||
[ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
|
||||
public async Task<IResult> TestConnection()
|
||||
{
|
||||
try
|
||||
{
|
||||
logger.Info("测试 HTTP 视频流连接");
|
||||
|
||||
// 尝试通过HTTP请求检查视频流服务是否可访问
|
||||
using (var httpClient = new HttpClient())
|
||||
{
|
||||
httpClient.Timeout = TimeSpan.FromSeconds(2); // 设置较短的超时时间
|
||||
var response = await httpClient.GetAsync($"http://localhost:{_videoStreamService.ServerPort}/");
|
||||
|
||||
// 只要能连接上就认为成功，不管返回状态
|
||||
bool isConnected = response.IsSuccessStatusCode;
|
||||
|
||||
return TypedResults.Ok(isConnected);
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
logger.Error(ex, "HTTP 视频流连接测试失败");
|
||||
// 连接失败但不抛出异常，而是返回连接失败的结果
|
||||
return TypedResults.Ok(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,575 +0,0 @@
|
||||
using System.Net;
|
||||
using System.Text;
|
||||
using SixLabors.ImageSharp;
|
||||
using SixLabors.ImageSharp.Formats.Jpeg;
|
||||
using SixLabors.ImageSharp.PixelFormats;
|
||||
|
||||
namespace server.src
|
||||
{
|
||||
/// <summary>
|
||||
/// HTTP 视频流服务，用于从 FPGA 获取图像数据并推送到前端网页
|
||||
/// 简化版本实现，先建立基础框架
|
||||
/// </summary>
|
||||
public class HttpVideoStreamService : BackgroundService
|
||||
{
|
||||
private readonly ILogger<HttpVideoStreamService> _logger;
|
||||
private HttpListener? _httpListener;
|
||||
private readonly int _serverPort = 8080;
|
||||
private readonly int _frameRate = 30; // 30 FPS
|
||||
private readonly int _frameWidth = 640;
|
||||
private readonly int _frameHeight = 480;
|
||||
|
||||
// 模拟 FPGA 图像数据
|
||||
private int _frameCounter = 0;
|
||||
private readonly List<HttpListenerResponse> _activeClients = new List<HttpListenerResponse>();
|
||||
private readonly object _clientsLock = new object();
|
||||
|
||||
/// <summary>
|
||||
/// 获取当前连接的客户端数量
|
||||
/// </summary>
|
||||
public int ConnectedClientsCount
|
||||
{
|
||||
get
|
||||
{
|
||||
lock (_clientsLock)
|
||||
{
|
||||
return _activeClients.Count;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获取服务端口
|
||||
/// </summary>
|
||||
public int ServerPort => _serverPort;
|
||||
|
||||
/// <summary>
|
||||
/// 获取帧宽度
|
||||
/// </summary>
|
||||
public int FrameWidth => _frameWidth;
|
||||
|
||||
/// <summary>
|
||||
/// 获取帧高度
|
||||
/// </summary>
|
||||
public int FrameHeight => _frameHeight;
|
||||
|
||||
/// <summary>
|
||||
/// 获取帧率
|
||||
/// </summary>
|
||||
public int FrameRate => _frameRate;
|
||||
|
||||
/// <summary>
|
||||
/// 初始化 HttpVideoStreamService
|
||||
/// </summary>
|
||||
/// <param name="logger">日志记录器</param>
|
||||
public HttpVideoStreamService(ILogger<HttpVideoStreamService> logger)
|
||||
{
|
||||
_logger = logger;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 执行 HTTP 视频流服务
|
||||
/// </summary>
|
||||
/// <param name="stoppingToken">取消令牌</param>
|
||||
/// <returns>任务</returns>
|
||||
protected override async Task ExecuteAsync(CancellationToken stoppingToken)
|
||||
{
|
||||
try
|
||||
{
|
||||
_logger.LogInformation("启动 HTTP 视频流服务，端口: {Port}", _serverPort);
|
||||
// 创建 HTTP 监听器
|
||||
_httpListener = new HttpListener();
|
||||
_httpListener.Prefixes.Add($"http://localhost:{_serverPort}/");
|
||||
_httpListener.Start();
|
||||
|
||||
_logger.LogInformation("HTTP 视频流服务已启动，监听端口: {Port}", _serverPort);
|
||||
|
||||
// 开始接受客户端连接
|
||||
_ = Task.Run(() => AcceptClientsAsync(stoppingToken), stoppingToken);
|
||||
|
||||
// 开始生成视频帧
|
||||
await GenerateVideoFrames(stoppingToken);
|
||||
}
|
||||
catch (HttpListenerException ex)
|
||||
{
|
||||
_logger.LogError(ex, "HTTP 视频流服务启动失败，请确保您有管理员权限或使用netsh配置URL前缀权限");
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogError(ex, "HTTP 视频流服务启动失败");
|
||||
}
|
||||
}
|
||||
|
||||
private async Task AcceptClientsAsync(CancellationToken cancellationToken)
|
||||
{
|
||||
while (!cancellationToken.IsCancellationRequested && _httpListener != null && _httpListener.IsListening)
|
||||
{
|
||||
try
|
||||
{
|
||||
// 等待客户端连接
|
||||
var context = await _httpListener.GetContextAsync();
|
||||
var request = context.Request;
|
||||
var response = context.Response;
|
||||
|
||||
_logger.LogInformation("新HTTP客户端连接: {RemoteEndPoint}", request.RemoteEndPoint);
|
||||
// 处理不同的请求路径
|
||||
var requestPath = request.Url?.AbsolutePath ?? "/";
|
||||
|
||||
if (requestPath == "/video-stream")
|
||||
{
|
||||
// MJPEG 流请求
|
||||
_ = Task.Run(() => HandleMjpegStreamAsync(response, cancellationToken), cancellationToken);
|
||||
}
|
||||
else if (requestPath == "/snapshot")
|
||||
{
|
||||
// 单帧图像请求
|
||||
await HandleSnapshotRequestAsync(response, cancellationToken);
|
||||
}
|
||||
else if (requestPath == "/video-feed.html")
|
||||
{
|
||||
// HTML页面请求
|
||||
await SendVideoHtmlPageAsync(response);
|
||||
}
|
||||
else
|
||||
{
|
||||
// 默认返回简单的HTML页面，提供链接到视频页面
|
||||
await SendIndexHtmlPageAsync(response);
|
||||
}
|
||||
}
|
||||
catch (HttpListenerException)
|
||||
{
|
||||
// HTTP监听器可能已停止
|
||||
break;
|
||||
}
|
||||
catch (ObjectDisposedException)
|
||||
{
|
||||
// 对象可能已被释放
|
||||
break;
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogError(ex, "接受HTTP客户端连接时发生错误");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async Task HandleMjpegStreamAsync(HttpListenerResponse response, CancellationToken cancellationToken)
|
||||
{
|
||||
try
|
||||
{
|
||||
// 设置MJPEG流的响应头
|
||||
response.ContentType = "multipart/x-mixed-replace; boundary=--boundary";
|
||||
response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
|
||||
response.Headers.Add("Pragma", "no-cache");
|
||||
response.Headers.Add("Expires", "0");
|
||||
|
||||
// 跟踪活跃的客户端
|
||||
lock (_clientsLock)
|
||||
{
|
||||
_activeClients.Add(response);
|
||||
}
|
||||
|
||||
_logger.LogDebug("已启动MJPEG流，客户端: {RemoteEndPoint}", response.OutputStream?.GetHashCode() ?? 0);
|
||||
|
||||
// 保持连接直到取消或出错
|
||||
try
|
||||
{
|
||||
while (!cancellationToken.IsCancellationRequested)
|
||||
{
|
||||
await Task.Delay(100, cancellationToken); // 简单的保活循环
|
||||
}
|
||||
}
|
||||
catch (TaskCanceledException)
|
||||
{
|
||||
// 预期的取消
|
||||
}
|
||||
|
||||
_logger.LogDebug("MJPEG流已结束，客户端: {ClientId}", response.OutputStream?.GetHashCode() ?? 0);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogError(ex, "处理MJPEG流时出错");
|
||||
}
|
||||
finally
|
||||
{
|
||||
lock (_clientsLock)
|
||||
{
|
||||
_activeClients.Remove(response);
|
||||
}
|
||||
|
||||
try
|
||||
{
|
||||
response.Close();
|
||||
}
|
||||
catch
|
||||
{
|
||||
// 忽略关闭时的错误
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async Task HandleSnapshotRequestAsync(HttpListenerResponse response, CancellationToken cancellationToken)
|
||||
{
|
||||
try
|
||||
{
|
||||
// 获取当前帧
|
||||
var imageData = await GetFPGAImageData();
|
||||
var jpegData = ConvertToJpeg(imageData);
|
||||
|
||||
// 设置响应头
|
||||
response.ContentType = "image/jpeg";
|
||||
response.ContentLength64 = jpegData.Length;
|
||||
response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
|
||||
|
||||
// 发送JPEG数据
|
||||
await response.OutputStream.WriteAsync(jpegData, 0, jpegData.Length, cancellationToken);
|
||||
await response.OutputStream.FlushAsync(cancellationToken);
|
||||
|
||||
_logger.LogDebug("已发送快照图像，大小：{Size} 字节", jpegData.Length);
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogError(ex, "处理快照请求时出错");
|
||||
}
|
||||
finally
|
||||
{
|
||||
response.Close();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task SendVideoHtmlPageAsync(HttpListenerResponse response)
|
||||
{
|
||||
string html = $@"<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>FPGA 视频流</title>
|
||||
<meta charset=""utf-8"">
|
||||
<style>
|
||||
body {{ font-family: Arial, sans-serif; text-align: center; margin: 20px; }}
|
||||
h1 {{ color: #333; }}
|
||||
.video-container {{ margin: 20px auto; max-width: 800px; }}
|
||||
.controls {{ margin: 10px 0; }}
|
||||
img {{ max-width: 100%; border: 1px solid #ddd; }}
|
||||
button {{ padding: 8px 16px; margin: 0 5px; cursor: pointer; }}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>FPGA 实时视频流</h1>
|
||||
<div class=""video-container"">
|
||||
<img id=""videoStream"" src=""/video-stream"" alt=""FPGA视频流"" />
|
||||
</div>
|
||||
<div class=""controls"">
|
||||
<button onclick=""document.getElementById('videoStream').src='/snapshot?t=' + new Date().getTime()"">刷新快照</button>
|
||||
<button onclick=""document.getElementById('videoStream').src='/video-stream'"">开始流媒体</button>
|
||||
<span id=""status"">状态: 连接中...</span>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('videoStream').onload = function() {{
|
||||
document.getElementById('status').textContent = '状态: 已连接';
|
||||
}};
|
||||
document.getElementById('videoStream').onerror = function() {{
|
||||
document.getElementById('status').textContent = '状态: 连接错误';
|
||||
}};
|
||||
</script>
|
||||
</body>
|
||||
</html>";
|
||||
|
||||
response.ContentType = "text/html";
|
||||
response.ContentEncoding = Encoding.UTF8;
|
||||
byte[] buffer = Encoding.UTF8.GetBytes(html);
|
||||
response.ContentLength64 = buffer.Length;
|
||||
|
||||
await response.OutputStream.WriteAsync(buffer, 0, buffer.Length);
|
||||
response.Close();
|
||||
}
|
||||
|
||||
private async Task SendIndexHtmlPageAsync(HttpListenerResponse response)
|
||||
{
|
||||
string html = $@"<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>FPGA WebLab 视频服务</title>
|
||||
<meta charset=""utf-8"">
|
||||
<style>
|
||||
body {{ font-family: Arial, sans-serif; text-align: center; margin: 20px; }}
|
||||
h1 {{ color: #333; }}
|
||||
.links {{ margin: 20px; }}
|
||||
a {{ padding: 10px 15px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; margin: 5px; display: inline-block; }}
|
||||
a:hover {{ background-color: #45a049; }}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>FPGA WebLab 视频服务</h1>
|
||||
<div class=""links"">
|
||||
<a href=""/video-feed.html"">观看实时视频</a>
|
||||
<a href=""/snapshot"" target=""_blank"">获取当前快照</a>
|
||||
</div>
|
||||
<p>HTTP流媒体服务端口: {_serverPort}</p>
|
||||
</body>
|
||||
</html>";
|
||||
|
||||
response.ContentType = "text/html";
|
||||
response.ContentEncoding = Encoding.UTF8;
|
||||
byte[] buffer = Encoding.UTF8.GetBytes(html);
|
||||
response.ContentLength64 = buffer.Length;
|
||||
|
||||
await response.OutputStream.WriteAsync(buffer, 0, buffer.Length);
|
||||
response.Close();
|
||||
}
|
||||
|
||||
private async Task GenerateVideoFrames(CancellationToken cancellationToken)
|
||||
{
|
||||
var frameInterval = TimeSpan.FromMilliseconds(1000.0 / _frameRate);
|
||||
|
||||
while (!cancellationToken.IsCancellationRequested)
|
||||
{
|
||||
try
|
||||
{
|
||||
// 从 FPGA 获取图像数据（模拟）
|
||||
var imageData = await GetFPGAImageData();
|
||||
|
||||
// 将图像数据转换为 JPEG
|
||||
var jpegData = ConvertToJpeg(imageData);
|
||||
|
||||
// 向所有连接的客户端发送帧
|
||||
await BroadcastFrameAsync(jpegData, cancellationToken);
|
||||
|
||||
_frameCounter++;
|
||||
|
||||
// 等待下一帧
|
||||
await Task.Delay(frameInterval, cancellationToken);
|
||||
}
|
||||
catch (OperationCanceledException)
|
||||
{
|
||||
break;
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogError(ex, "生成视频帧时发生错误");
|
||||
await Task.Delay(1000, cancellationToken); // 错误恢复延迟
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 模拟从 FPGA 获取图像数据的函数
|
||||
/// 实际实现时，这里应该通过 UDP 连接读取 FPGA 特定地址范围的数据
|
||||
/// </summary>
|
||||
private async Task<byte[]> GetFPGAImageData()
|
||||
{
|
||||
// 模拟异步 FPGA 数据读取
|
||||
await Task.Delay(1);
|
||||
|
||||
// 简化的模拟图像数据生成
|
||||
var random = new Random(_frameCounter);
|
||||
var imageData = new byte[_frameWidth * _frameHeight * 3]; // RGB24 格式
|
||||
|
||||
// 生成简单的彩色噪声图案
|
||||
for (int i = 0; i < imageData.Length; i += 3)
|
||||
{
|
||||
// 基于帧计数器和位置生成颜色
|
||||
var baseColor = (_frameCounter + i / 3) % 256;
|
||||
imageData[i] = (byte)((baseColor + random.Next(0, 50)) % 256); // R
|
||||
imageData[i + 1] = (byte)((baseColor * 2 + random.Next(0, 50)) % 256); // G
|
||||
imageData[i + 2] = (byte)((baseColor * 3 + random.Next(0, 50)) % 256); // B
|
||||
}
|
||||
|
||||
if (_frameCounter % 30 == 0) // 每秒更新一次日志
|
||||
{
|
||||
_logger.LogDebug("生成第 {FrameNumber} 帧", _frameCounter);
|
||||
}
|
||||
|
||||
return imageData;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 将 RGB 图像数据转换为 JPEG 格式
|
||||
/// </summary>
|
||||
private byte[] ConvertToJpeg(byte[] rgbData)
|
||||
{
|
||||
using var image = new Image<Rgb24>(_frameWidth, _frameHeight);
|
||||
|
||||
// 将 RGB 数据复制到 ImageSharp 图像
|
||||
for (int y = 0; y < _frameHeight; y++)
|
||||
{
|
||||
for (int x = 0; x < _frameWidth; x++)
|
||||
{
|
||||
int index = (y * _frameWidth + x) * 3;
|
||||
var pixel = new Rgb24(rgbData[index], rgbData[index + 1], rgbData[index + 2]);
|
||||
image[x, y] = pixel;
|
||||
}
|
||||
}
|
||||
|
||||
using var stream = new MemoryStream();
|
||||
image.SaveAsJpeg(stream, new JpegEncoder { Quality = 80 });
|
||||
return stream.ToArray();
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 向所有连接的客户端广播帧数据
|
||||
/// </summary>
|
||||
private async Task BroadcastFrameAsync(byte[] frameData, CancellationToken cancellationToken)
|
||||
{
|
||||
if (frameData == null || frameData.Length == 0)
|
||||
{
|
||||
_logger.LogWarning("尝试广播空帧数据");
|
||||
return;
|
||||
}
|
||||
|
||||
// 准备MJPEG帧数据
|
||||
var mjpegFrameHeader = $"--boundary\r\nContent-Type: image/jpeg\r\nContent-Length: {frameData.Length}\r\n\r\n";
|
||||
var headerBytes = Encoding.ASCII.GetBytes(mjpegFrameHeader);
|
||||
|
||||
var clientsToRemove = new List<HttpListenerResponse>();
|
||||
var clientsToProcess = new List<HttpListenerResponse>();
|
||||
|
||||
// 获取当前连接的客户端列表
|
||||
lock (_clientsLock)
|
||||
{
|
||||
clientsToProcess.AddRange(_activeClients);
|
||||
}
|
||||
|
||||
if (clientsToProcess.Count == 0)
|
||||
{
|
||||
return; // 没有活跃客户端
|
||||
}
|
||||
|
||||
// 向每个活跃的客户端发送帧
|
||||
foreach (var client in clientsToProcess)
|
||||
{
|
||||
try
|
||||
{
|
||||
// 发送帧头部
|
||||
await client.OutputStream.WriteAsync(headerBytes, 0, headerBytes.Length, cancellationToken);
|
||||
|
||||
// 发送JPEG数据
|
||||
await client.OutputStream.WriteAsync(frameData, 0, frameData.Length, cancellationToken);
|
||||
|
||||
// 发送结尾换行符
|
||||
await client.OutputStream.WriteAsync(Encoding.ASCII.GetBytes("\r\n"), 0, 2, cancellationToken);
|
||||
|
||||
// 确保数据立即发送
|
||||
await client.OutputStream.FlushAsync(cancellationToken);
|
||||
|
||||
if (_frameCounter % 30 == 0) // 每秒记录一次日志
|
||||
{
|
||||
_logger.LogDebug("已向客户端 {ClientId} 发送第 {FrameNumber} 帧，大小：{Size} 字节",
|
||||
client.OutputStream.GetHashCode(), _frameCounter, frameData.Length);
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogDebug("发送帧数据时出错: {Error}", ex.Message);
|
||||
clientsToRemove.Add(client);
|
||||
}
|
||||
}
|
||||
|
||||
// 移除断开连接的客户端
|
||||
if (clientsToRemove.Count > 0)
|
||||
{
|
||||
lock (_clientsLock)
|
||||
{
|
||||
foreach (var client in clientsToRemove)
|
||||
{
|
||||
_activeClients.Remove(client);
|
||||
try { client.Close(); }
|
||||
catch { /* 忽略关闭错误 */ }
|
||||
}
|
||||
}
|
||||
|
||||
_logger.LogInformation("已移除 {Count} 个断开连接的客户端，当前连接数: {ActiveCount}",
|
||||
clientsToRemove.Count, _activeClients.Count);
|
||||
}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获取连接的客户端端点列表
|
||||
/// </summary>
|
||||
public List<string> GetConnectedClientEndpoints()
|
||||
{
|
||||
List<string> endpoints = new List<string>();
|
||||
|
||||
lock (_clientsLock)
|
||||
{
|
||||
foreach (var client in _activeClients)
|
||||
{
|
||||
endpoints.Add($"Client-{client.OutputStream?.GetHashCode() ?? 0}");
|
||||
}
|
||||
}
|
||||
|
||||
return endpoints;
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 获取服务状态信息
|
||||
/// </summary>
|
||||
public object GetServiceStatus()
|
||||
{
|
||||
return new
|
||||
{
|
||||
IsRunning = _httpListener?.IsListening ?? false,
|
||||
ServerPort = _serverPort,
|
||||
FrameRate = _frameRate,
|
||||
Resolution = $"{_frameWidth}x{_frameHeight}",
|
||||
ConnectedClients = ConnectedClientsCount,
|
||||
ClientEndpoints = GetConnectedClientEndpoints()
|
||||
};
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 停止 HTTP 视频流服务
|
||||
/// </summary>
|
||||
public override async Task StopAsync(CancellationToken cancellationToken)
|
||||
{
|
||||
_logger.LogInformation("正在停止 HTTP 视频流服务...");
|
||||
|
||||
if (_httpListener != null && _httpListener.IsListening)
|
||||
{
|
||||
_httpListener.Stop();
|
||||
_httpListener.Close();
|
||||
}
|
||||
|
||||
// 关闭所有客户端连接
|
||||
lock (_clientsLock)
|
||||
{
|
||||
foreach (var client in _activeClients)
|
||||
{
|
||||
try { client.Close(); }
|
||||
catch { /* 忽略关闭错误 */ }
|
||||
}
|
||||
_activeClients.Clear();
|
||||
}
|
||||
|
||||
await base.StopAsync(cancellationToken);
|
||||
|
||||
_logger.LogInformation("HTTP 视频流服务已停止");
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
/// 释放资源
|
||||
/// </summary>
|
||||
public override void Dispose()
|
||||
{
|
||||
if (_httpListener != null)
|
||||
{
|
||||
if (_httpListener.IsListening)
|
||||
{
|
||||
_httpListener.Stop();
|
||||
}
|
||||
_httpListener.Close();
|
||||
}
|
||||
|
||||
lock (_clientsLock)
|
||||
{
|
||||
foreach (var client in _activeClients)
|
||||
{
|
||||
try { client.Close(); }
|
||||
catch { /* 忽略关闭错误 */ }
|
||||
}
|
||||
_activeClients.Clear();
|
||||
}
|
||||
|
||||
base.Dispose();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -422,7 +422,7 @@ public class Jtag
|
||||
if (!MsgBus.IsRunning)
|
||||
return new(new Exception("Message Bus not Working!"));
|
||||
|
||||
var retPack = await MsgBus.UDPServer.WaitForDataAsync(address, 0, port);
|
||||
var retPack = await MsgBus.UDPServer.WaitForDataAsync(address, port);
|
||||
if (!retPack.IsSuccessful || !retPack.Value.IsSuccessful)
|
||||
return new(new Exception("Send address package failed"));
|
||||
|
||||
@@ -441,7 +441,7 @@ public class Jtag
|
||||
(UInt32 devAddr, UInt32 data, UInt32 result, UInt32 resultMask = 0xFF_FF_FF_FF, UInt32 delayMilliseconds = 0)
|
||||
{
|
||||
{
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, 0, devAddr, data, this.timeout);
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, devAddr, data, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
if (!ret.Value) return new(new Exception("Write FIFO failed"));
|
||||
}
|
||||
@@ -450,7 +450,7 @@ public class Jtag
|
||||
await Task.Delay(TimeSpan.FromMilliseconds(delayMilliseconds));
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.ReadAddrWithWait(this.ep, 0, JtagAddr.STATE, result, resultMask, this.timeout);
|
||||
var ret = await UDPClientPool.ReadAddrWithWait(this.ep, JtagAddr.STATE, result, resultMask, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
return ret.Value;
|
||||
}
|
||||
@@ -460,7 +460,7 @@ public class Jtag
|
||||
(UInt32 devAddr, byte[] data, UInt32 result, UInt32 resultMask = 0xFF_FF_FF_FF, UInt32 delayMilliseconds = 0)
|
||||
{
|
||||
{
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, 0, devAddr, data, this.timeout);
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, devAddr, data, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
if (!ret.Value) return new(new Exception("Write FIFO failed"));
|
||||
}
|
||||
@@ -469,7 +469,7 @@ public class Jtag
|
||||
await Task.Delay(TimeSpan.FromMilliseconds(delayMilliseconds));
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.ReadAddrWithWait(this.ep, 0, JtagAddr.STATE, result, resultMask, this.timeout);
|
||||
var ret = await UDPClientPool.ReadAddrWithWait(this.ep, JtagAddr.STATE, result, resultMask, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
return ret.Value;
|
||||
}
|
||||
@@ -627,9 +627,9 @@ public class Jtag
|
||||
public async ValueTask<Result<uint>> ReadIDCode()
|
||||
{
|
||||
// Clear Data
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 0);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
|
||||
logger.Trace($"Clear up udp server {this.address,0} receive data");
|
||||
logger.Trace($"Clear up udp server {this.address} receive data");
|
||||
|
||||
Result<bool> ret;
|
||||
|
||||
@@ -665,9 +665,9 @@ public class Jtag
|
||||
public async ValueTask<Result<uint>> ReadStatusReg()
|
||||
{
|
||||
// Clear Data
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 0);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
|
||||
logger.Trace($"Clear up udp server {this.address,0} receive data");
|
||||
logger.Trace($"Clear up udp server {this.address} receive data");
|
||||
|
||||
Result<bool> ret;
|
||||
|
||||
@@ -702,9 +702,9 @@ public class Jtag
|
||||
public async ValueTask<Result<bool>> DownloadBitstream(byte[] bitstream)
|
||||
{
|
||||
// Clear Data
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 0);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
|
||||
logger.Trace($"Clear up udp server {this.address,0} receive data");
|
||||
logger.Trace($"Clear up udp server {this.address} receive data");
|
||||
|
||||
Result<bool> ret;
|
||||
|
||||
@@ -786,9 +786,9 @@ public class Jtag
|
||||
logger.Debug($"Get boundar scan registers number: {portNum}");
|
||||
|
||||
// Clear Data
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 0);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
|
||||
logger.Trace($"Clear up udp server {this.address,0} receive data");
|
||||
logger.Trace($"Clear up udp server {this.address} receive data");
|
||||
|
||||
Result<bool> ret;
|
||||
|
||||
@@ -853,9 +853,9 @@ public class Jtag
|
||||
public async ValueTask<Result<bool>> SetSpeed(UInt32 speed)
|
||||
{
|
||||
// Clear Data
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 0);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
|
||||
logger.Trace($"Clear up udp server {this.address,0} receive data");
|
||||
logger.Trace($"Clear up udp server {this.address} receive data");
|
||||
|
||||
var ret = await WriteFIFO(
|
||||
JtagAddr.SPEED_CTRL, (speed << 16) | speed,
|
||||
|
||||
@@ -108,11 +108,11 @@ public class DDS
|
||||
if (waveNum < 0 || waveNum > 3) return new(new ArgumentException(
|
||||
$"Wave number should be 0 ~ 3 instead of {waveNum}", nameof(waveNum)));
|
||||
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 1);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
logger.Trace("Clear udp data finished");
|
||||
|
||||
var ret = await UDPClientPool.WriteAddr(
|
||||
this.ep, 1, DDSAddr.Channel[channelNum].WaveSelect, (UInt32)waveNum, this.timeout);
|
||||
this.ep, DDSAddr.Channel[channelNum].WaveSelect, (UInt32)waveNum, this.timeout);
|
||||
if (!ret.IsSuccessful)
|
||||
return new(ret.Error);
|
||||
return ret.Value;
|
||||
@@ -132,11 +132,11 @@ public class DDS
|
||||
if (waveNum < 0 || waveNum > 3) return new(new ArgumentException(
|
||||
$"Wave number should be 0 ~ 3 instead of {waveNum}", nameof(waveNum)));
|
||||
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 1);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
logger.Trace("Clear udp data finished");
|
||||
|
||||
var ret = await UDPClientPool.WriteAddr(
|
||||
this.ep, 1, DDSAddr.Channel[channelNum].FreqCtrl[waveNum], step, this.timeout);
|
||||
this.ep, DDSAddr.Channel[channelNum].FreqCtrl[waveNum], step, this.timeout);
|
||||
if (!ret.IsSuccessful)
|
||||
return new(ret.Error);
|
||||
return ret.Value;
|
||||
@@ -158,11 +158,11 @@ public class DDS
|
||||
if (phase < 0 || phase > 4096) return new(new ArgumentException(
|
||||
$"Phase should be 0 ~ 4096 instead of {phase}", nameof(phase)));
|
||||
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 1);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
logger.Trace("Clear udp data finished");
|
||||
|
||||
var ret = await UDPClientPool.WriteAddr(
|
||||
this.ep, 1, DDSAddr.Channel[channelNum].PhaseCtrl[waveNum], (UInt32)phase, this.timeout);
|
||||
this.ep, DDSAddr.Channel[channelNum].PhaseCtrl[waveNum], (UInt32)phase, this.timeout);
|
||||
if (!ret.IsSuccessful)
|
||||
return new(ret.Error);
|
||||
return ret.Value;
|
||||
|
||||
@@ -44,10 +44,10 @@ public class MatrixKey
|
||||
public async ValueTask<Result<bool>> EnableControl()
|
||||
{
|
||||
if (MsgBus.IsRunning)
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 1);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
else return new(new Exception("Message Bus not work!"));
|
||||
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, 1, MatrixKeyAddr.KEY_ENABLE, 1, this.timeout);
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, MatrixKeyAddr.KEY_ENABLE, 1, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
return ret.Value;
|
||||
}
|
||||
@@ -59,10 +59,10 @@ public class MatrixKey
|
||||
public async ValueTask<Result<bool>> DisableControl()
|
||||
{
|
||||
if (MsgBus.IsRunning)
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 1);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
else return new(new Exception("Message Bus not work!"));
|
||||
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, 1, MatrixKeyAddr.KEY_ENABLE, 0, this.timeout);
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, MatrixKeyAddr.KEY_ENABLE, 0, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
return ret.Value;
|
||||
}
|
||||
@@ -75,14 +75,14 @@ public class MatrixKey
|
||||
public async ValueTask<Result<bool>> ControlKey(BitArray keyStates)
|
||||
{
|
||||
if (MsgBus.IsRunning)
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 1);
|
||||
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, 1, MatrixKeyAddr.KEY_CTRL, Common.Number.BitsToNumber(keyStates).Value, this.timeout);
|
||||
this.ep, MatrixKeyAddr.KEY_CTRL, Common.Number.BitsToNumber(keyStates).Value, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
return ret.Value;
|
||||
}
|
||||
|
||||
@@ -45,10 +45,10 @@ public class Power
|
||||
public async ValueTask<Result<bool>> SetPowerOnOff(bool enable)
|
||||
{
|
||||
if (MsgBus.IsRunning)
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 1);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
else return new(new Exception("Message Bus not work!"));
|
||||
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, 1, PowerAddr.PowerCtrl, Convert.ToUInt32(enable), this.timeout);
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, PowerAddr.PowerCtrl, Convert.ToUInt32(enable), this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
return ret.Value;
|
||||
}
|
||||
|
||||
@@ -142,7 +142,7 @@ public class RemoteUpdater
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.WriteAddr(
|
||||
this.ep, 0, RemoteUpdaterAddr.WriteCtrl,
|
||||
this.ep, RemoteUpdaterAddr.WriteCtrl,
|
||||
Convert.ToUInt32((writeSectorNum << 16) | (1 << 15) | Convert.ToInt32(flashAddr / 4096)), this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
if (!ret.Value) return new(new Exception("Enable write flash failed"));
|
||||
@@ -150,7 +150,7 @@ public class RemoteUpdater
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.ReadAddrWithWait(
|
||||
this.ep, 0, RemoteUpdaterAddr.WriteSign,
|
||||
this.ep, RemoteUpdaterAddr.WriteSign,
|
||||
0x00_00_00_01, 0x00_00_00_01, this.timeoutForWait);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
if (!ret.Value) return new(new Exception(
|
||||
@@ -158,14 +158,14 @@ public class RemoteUpdater
|
||||
}
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, 0, RemoteUpdaterAddr.WriteFIFO, bytesData, this.timeout);
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, RemoteUpdaterAddr.WriteFIFO, bytesData, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
if (!ret.Value) return new(new Exception("Send data to flash failed"));
|
||||
}
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.ReadAddrWithWait(
|
||||
this.ep, 0, RemoteUpdaterAddr.WriteSign,
|
||||
this.ep, RemoteUpdaterAddr.WriteSign,
|
||||
0x00_00_01_00, 0x00_00_01_00, this.timeoutForWait);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
return ret.Value;
|
||||
@@ -314,14 +314,14 @@ public class RemoteUpdater
|
||||
private async ValueTask<Result<bool>> CheckBitstreamCRC(int bitstreamNum, int bitstreamLen, UInt32 checkSum)
|
||||
{
|
||||
{
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, 0, RemoteUpdaterAddr.ReadCtrl2, 0x00_00_00_00, this.timeout);
|
||||
var ret = await UDPClientPool.WriteAddr(this.ep, RemoteUpdaterAddr.ReadCtrl2, 0x00_00_00_00, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
if (!ret.Value) return new(new Exception("Write read control 2 failed"));
|
||||
}
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.WriteAddr(
|
||||
this.ep, 0, RemoteUpdaterAddr.ReadCtrl1,
|
||||
this.ep, RemoteUpdaterAddr.ReadCtrl1,
|
||||
Convert.ToUInt32((bitstreamLen << 16) | (1 << 15) | Convert.ToInt32(FlashAddr.Bitstream[bitstreamNum] / 4096)),
|
||||
this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
@@ -330,7 +330,7 @@ public class RemoteUpdater
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.ReadAddrWithWait(
|
||||
this.ep, 0, RemoteUpdaterAddr.ReadSign,
|
||||
this.ep, RemoteUpdaterAddr.ReadSign,
|
||||
0x00_00_01_00, 0x00_00_01_00, this.timeoutForWait);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
if (!ret.Value) return new(new Exception(
|
||||
@@ -338,7 +338,7 @@ public class RemoteUpdater
|
||||
}
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.ReadAddr(this.ep, 0, RemoteUpdaterAddr.ReadCRC, this.timeout);
|
||||
var ret = await UDPClientPool.ReadAddr(this.ep, RemoteUpdaterAddr.ReadCRC, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
|
||||
var bytes = ret.Value.Options.Data;
|
||||
@@ -368,7 +368,7 @@ public class RemoteUpdater
|
||||
$"Bitsteam num should be 0 ~ 3 for HotRest, but given {bitstreamNum}", nameof(bitstreamNum)));
|
||||
|
||||
var ret = await UDPClientPool.WriteAddr(
|
||||
this.ep, 0, RemoteUpdaterAddr.HotResetCtrl,
|
||||
this.ep, RemoteUpdaterAddr.HotResetCtrl,
|
||||
((FlashAddr.Bitstream[bitstreamNum] << 8) | 1), this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
return ret.Value;
|
||||
@@ -381,7 +381,7 @@ public class RemoteUpdater
|
||||
/// <returns>[TODO:return]</returns>
|
||||
public async ValueTask<Result<bool>> HotResetBitstream(int bitstreamNum)
|
||||
{
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 0);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
logger.Trace("Clear udp data finished");
|
||||
|
||||
{
|
||||
@@ -411,7 +411,7 @@ public class RemoteUpdater
|
||||
byte[]? bitstream2,
|
||||
byte[]? bitstream3)
|
||||
{
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 0);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
logger.Trace("Clear udp data finished");
|
||||
|
||||
for (int bitstreamNum = 0; bitstreamNum < 4; bitstreamNum++)
|
||||
@@ -462,7 +462,7 @@ public class RemoteUpdater
|
||||
$"The length of data should be divided by 4096, bug given {bytesData.Length}", nameof(bytesData)));
|
||||
var bitstreamBlockNum = bytesData.Length / (4 * 1024);
|
||||
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 0);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
logger.Trace("Clear udp data finished");
|
||||
|
||||
{
|
||||
@@ -538,11 +538,11 @@ public class RemoteUpdater
|
||||
/// <returns>[TODO:return]</returns>
|
||||
public async ValueTask<Result<UInt32>> GetVersion()
|
||||
{
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address, 0);
|
||||
await MsgBus.UDPServer.ClearUDPData(this.address);
|
||||
logger.Trace("Clear udp data finished");
|
||||
|
||||
{
|
||||
var ret = await UDPClientPool.ReadAddr(this.ep, 0, RemoteUpdaterAddr.Version, this.timeout);
|
||||
var ret = await UDPClientPool.ReadAddr(this.ep, RemoteUpdaterAddr.Version, this.timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
|
||||
var retData = ret.Value.Options.Data;
|
||||
|
||||
30
server/src/TutorialService.ts
Normal file
30
server/src/TutorialService.ts
Normal file
@@ -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: '无法读取例程目录' });
|
||||
}
|
||||
}
|
||||
@@ -180,19 +180,18 @@ public class UDPClientPool
|
||||
/// [TODO:description]
|
||||
/// </summary>
|
||||
/// <param name="endPoint">[TODO:parameter]</param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <param name="devAddr">[TODO:parameter]</param>
|
||||
/// <param name="timeout">[TODO:parameter]</param>
|
||||
/// <returns>[TODO:return]</returns>
|
||||
public static async ValueTask<Result<RecvDataPackage>> ReadAddr(
|
||||
IPEndPoint endPoint, int taskID, uint devAddr, int timeout = 1000)
|
||||
IPEndPoint endPoint, uint devAddr, int timeout = 1000)
|
||||
{
|
||||
var ret = false;
|
||||
var opts = new SendAddrPackOptions();
|
||||
|
||||
opts.BurstType = BurstType.FixedBurst;
|
||||
opts.BurstLength = 0;
|
||||
opts.CommandID = Convert.ToByte(taskID);
|
||||
opts.CommandID = 0;
|
||||
opts.Address = devAddr;
|
||||
|
||||
// Read Jtag State Register
|
||||
@@ -205,7 +204,7 @@ public class UDPClientPool
|
||||
return new(new Exception("Message Bus not Working!"));
|
||||
|
||||
var retPack = await MsgBus.UDPServer.WaitForDataAsync(
|
||||
endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
|
||||
endPoint.Address.ToString(), endPoint.Port, timeout);
|
||||
if (!retPack.IsSuccessful) return new(retPack.Error);
|
||||
else if (!retPack.Value.IsSuccessful)
|
||||
return new(new Exception("Send address package failed"));
|
||||
@@ -221,18 +220,17 @@ public class UDPClientPool
|
||||
/// [TODO:description]
|
||||
/// </summary>
|
||||
/// <param name="endPoint">[TODO:parameter]</param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <param name="devAddr">[TODO:parameter]</param>
|
||||
/// <param name="result">[TODO:parameter]</param>
|
||||
/// <param name="resultMask">[TODO:parameter]</param>
|
||||
/// <param name="timeout">[TODO:parameter]</param>
|
||||
/// <returns>[TODO:return]</returns>
|
||||
public static async ValueTask<Result<bool>> ReadAddr(
|
||||
IPEndPoint endPoint, int taskID, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
|
||||
IPEndPoint endPoint, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
|
||||
{
|
||||
var address = endPoint.Address.ToString();
|
||||
|
||||
var ret = await ReadAddr(endPoint, taskID, devAddr, timeout);
|
||||
var ret = await ReadAddr(endPoint, devAddr, timeout);
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
if (!ret.Value.IsSuccessful)
|
||||
return new(new Exception($"Read device {address} address {devAddr} failed"));
|
||||
@@ -260,14 +258,13 @@ public class UDPClientPool
|
||||
/// [TODO:description]
|
||||
/// </summary>
|
||||
/// <param name="endPoint">[TODO:parameter]</param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <param name="devAddr">[TODO:parameter]</param>
|
||||
/// <param name="result">[TODO:parameter]</param>
|
||||
/// <param name="resultMask">[TODO:parameter]</param>
|
||||
/// <param name="timeout">[TODO:parameter]</param>
|
||||
/// <returns>[TODO:return]</returns>
|
||||
public static async ValueTask<Result<bool>> ReadAddrWithWait(
|
||||
IPEndPoint endPoint, int taskID, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
|
||||
IPEndPoint endPoint, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
|
||||
{
|
||||
var address = endPoint.Address.ToString();
|
||||
|
||||
@@ -280,7 +277,7 @@ public class UDPClientPool
|
||||
|
||||
try
|
||||
{
|
||||
var ret = await ReadAddr(endPoint, taskID, devAddr, Convert.ToInt32(timeleft.TotalMilliseconds));
|
||||
var ret = await ReadAddr(endPoint, devAddr, Convert.ToInt32(timeleft.TotalMilliseconds));
|
||||
if (!ret.IsSuccessful) return new(ret.Error);
|
||||
if (!ret.Value.IsSuccessful)
|
||||
return new(new Exception($"Read device {address} address {devAddr} failed"));
|
||||
@@ -310,20 +307,19 @@ public class UDPClientPool
|
||||
/// [TODO:description]
|
||||
/// </summary>
|
||||
/// <param name="endPoint">[TODO:parameter]</param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <param name="devAddr">[TODO:parameter]</param>
|
||||
/// <param name="data">[TODO:parameter]</param>
|
||||
/// <param name="timeout">[TODO:parameter]</param>
|
||||
/// <returns>[TODO:return]</returns>
|
||||
public static async ValueTask<Result<bool>> WriteAddr(
|
||||
IPEndPoint endPoint, int taskID, UInt32 devAddr, UInt32 data, int timeout = 1000)
|
||||
IPEndPoint endPoint, UInt32 devAddr, UInt32 data, int timeout = 1000)
|
||||
{
|
||||
var ret = false;
|
||||
var opts = new SendAddrPackOptions();
|
||||
|
||||
opts.BurstType = BurstType.FixedBurst;
|
||||
opts.BurstLength = 0;
|
||||
opts.CommandID = Convert.ToByte(taskID);
|
||||
opts.CommandID = 0;
|
||||
opts.Address = devAddr;
|
||||
|
||||
// Write Jtag State Register
|
||||
@@ -341,7 +337,7 @@ public class UDPClientPool
|
||||
|
||||
// Wait for Write Ack
|
||||
var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(
|
||||
endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
|
||||
endPoint.Address.ToString(), endPoint.Port, timeout);
|
||||
if (!udpWriteAck.IsSuccessful) return new(udpWriteAck.Error);
|
||||
|
||||
return udpWriteAck.Value.IsSuccessful;
|
||||
@@ -351,20 +347,18 @@ public class UDPClientPool
|
||||
/// [TODO:description]
|
||||
/// </summary>
|
||||
/// <param name="endPoint">[TODO:parameter]</param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <param name="devAddr">[TODO:parameter]</param>
|
||||
/// <param name="dataArray">[TODO:parameter]</param>
|
||||
/// <param name="timeout">[TODO:parameter]</param>
|
||||
/// <returns>[TODO:return]</returns>
|
||||
public static async ValueTask<Result<bool>> WriteAddr(
|
||||
IPEndPoint endPoint, int taskID, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
|
||||
public static async ValueTask<Result<bool>> WriteAddr(IPEndPoint endPoint, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
|
||||
{
|
||||
var ret = false;
|
||||
var opts = new SendAddrPackOptions();
|
||||
|
||||
|
||||
opts.BurstType = BurstType.FixedBurst;
|
||||
opts.CommandID = Convert.ToByte(taskID);
|
||||
opts.CommandID = 0;
|
||||
opts.Address = devAddr;
|
||||
|
||||
// Check Msg Bus
|
||||
@@ -395,7 +389,7 @@ public class UDPClientPool
|
||||
if (!ret) return new(new Exception("Send data package failed!"));
|
||||
|
||||
// Wait for Write Ack
|
||||
var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
|
||||
var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(endPoint.Address.ToString(), endPoint.Port, timeout);
|
||||
if (!udpWriteAck.IsSuccessful) return new(udpWriteAck.Error);
|
||||
|
||||
if (!udpWriteAck.Value.IsSuccessful)
|
||||
|
||||
@@ -22,11 +22,6 @@ public class UDPData
|
||||
/// 发送来源的端口号
|
||||
/// </summary>
|
||||
public required int Port { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// 任务ID
|
||||
/// </summary>
|
||||
public required int TaskID { get; set; }
|
||||
/// <summary>
|
||||
/// 接受到的数据
|
||||
/// </summary>
|
||||
@@ -49,7 +44,6 @@ public class UDPData
|
||||
DateTime = this.DateTime,
|
||||
Address = new string(this.Address),
|
||||
Port = this.Port,
|
||||
TaskID = this.TaskID,
|
||||
Data = cloneData,
|
||||
HasRead = this.HasRead
|
||||
};
|
||||
@@ -125,7 +119,6 @@ public class UDPServer
|
||||
/// 异步寻找目标发送的内容
|
||||
/// </summary>
|
||||
/// <param name="ipAddr"> 目标IP地址 </param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <param name="timeout">超时时间</param>
|
||||
/// <param name="cycle">延迟时间</param>
|
||||
/// <param name="callerName">调用函数名称</param>
|
||||
@@ -136,14 +129,13 @@ public class UDPServer
|
||||
/// Optional 存在时，为最先收到的数据
|
||||
/// </returns>
|
||||
public async ValueTask<Optional<UDPData>> FindDataAsync(
|
||||
string ipAddr, int taskID, int timeout = 1000, int cycle = 0,
|
||||
string ipAddr, int timeout = 1000, int cycle = 0,
|
||||
[CallerMemberName] string callerName = "",
|
||||
[CallerLineNumber] int callerLineNum = 0
|
||||
)
|
||||
[CallerLineNumber] int callerLineNum = 0)
|
||||
{
|
||||
UDPData? data = null;
|
||||
|
||||
logger.Debug($"Caller \"{callerName}|{callerLineNum}\": Try to find {ipAddr}-{taskID} UDP Data");
|
||||
logger.Debug($"Caller \"{callerName}|{callerLineNum}\": Try to find {ipAddr} UDP Data");
|
||||
|
||||
var startTime = DateTime.Now;
|
||||
var isTimeout = false;
|
||||
@@ -157,8 +149,8 @@ public class UDPServer
|
||||
timeleft = TimeSpan.FromMilliseconds(timeout) - elapsed;
|
||||
using (await udpData.AcquireWriteLockAsync(timeleft))
|
||||
{
|
||||
if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
|
||||
udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
|
||||
if (udpData.ContainsKey(ipAddr) &&
|
||||
udpData.TryGetValue(ipAddr, out var dataQueue) &&
|
||||
dataQueue.Count > 0)
|
||||
{
|
||||
data = dataQueue.Dequeue();
|
||||
@@ -185,11 +177,10 @@ public class UDPServer
|
||||
/// 获取还未被读取的数据列表
|
||||
/// </summary>
|
||||
/// <param name="ipAddr">IP地址</param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <param name="timeout">超时时间</param>
|
||||
/// <param name="cycle">延迟时间</param>
|
||||
/// <returns>数据列表</returns>
|
||||
public async ValueTask<Optional<List<UDPData>>> GetDataArrayAsync(string ipAddr, int taskID, int timeout = 1000, int cycle = 0)
|
||||
public async ValueTask<Optional<List<UDPData>>> GetDataArrayAsync(string ipAddr, int timeout = 1000, int cycle = 0)
|
||||
{
|
||||
List<UDPData>? data = null;
|
||||
|
||||
@@ -205,8 +196,8 @@ public class UDPServer
|
||||
timeleft = TimeSpan.FromMilliseconds(timeout) - elapsed;
|
||||
using (await udpData.AcquireReadLockAsync(timeleft))
|
||||
{
|
||||
if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
|
||||
udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
|
||||
if (udpData.ContainsKey(ipAddr) &&
|
||||
udpData.TryGetValue(ipAddr, out var dataQueue) &&
|
||||
dataQueue.Count > 0)
|
||||
{
|
||||
data = dataQueue.ToList();
|
||||
@@ -231,14 +222,13 @@ public class UDPServer
|
||||
/// 异步等待写响应
|
||||
/// </summary>
|
||||
/// <param name="address">IP地址</param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <param name="port">UDP 端口</param>
|
||||
/// <param name="timeout">超时时间范围</param>
|
||||
/// <returns>接收响应包</returns>
|
||||
public async ValueTask<Result<WebProtocol.RecvRespPackage>> WaitForAckAsync
|
||||
(string address, int taskID, int port = -1, int timeout = 1000)
|
||||
(string address, int port = -1, int timeout = 1000)
|
||||
{
|
||||
var data = await FindDataAsync(address, taskID, timeout);
|
||||
var data = await FindDataAsync(address, timeout);
|
||||
if (!data.HasValue)
|
||||
return new(new Exception("Get None even after time out!"));
|
||||
|
||||
@@ -257,14 +247,13 @@ public class UDPServer
|
||||
/// 异步等待数据
|
||||
/// </summary>
|
||||
/// <param name="address">IP地址</param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <param name="port">UDP 端口</param>
|
||||
/// <param name="timeout">超时时间范围</param>
|
||||
/// <returns>接收数据包</returns>
|
||||
public async ValueTask<Result<RecvDataPackage>> WaitForDataAsync
|
||||
(string address, int taskID, int port = -1, int timeout = 1000)
|
||||
(string address, int port = -1, int timeout = 1000)
|
||||
{
|
||||
var data = await FindDataAsync(address, taskID, timeout);
|
||||
var data = await FindDataAsync(address, timeout);
|
||||
if (!data.HasValue)
|
||||
return new(new Exception("Get None even after time out!"));
|
||||
|
||||
@@ -295,7 +284,7 @@ public class UDPServer
|
||||
|
||||
|
||||
// Handle Package
|
||||
var udpData = RecordUDPData(bytes, remoteEP, Convert.ToInt32(bytes[1]));
|
||||
var udpData = RecordUDPData(bytes, remoteEP);
|
||||
PrintData(udpData);
|
||||
|
||||
BEGIN_RECEIVE:
|
||||
@@ -319,7 +308,7 @@ public class UDPServer
|
||||
else { return false; }
|
||||
}
|
||||
|
||||
private UDPData RecordUDPData(byte[] bytes, IPEndPoint remoteEP, int taskID)
|
||||
private UDPData RecordUDPData(byte[] bytes, IPEndPoint remoteEP)
|
||||
{
|
||||
var remoteAddress = remoteEP.Address.ToString();
|
||||
var remotePort = remoteEP.Port;
|
||||
@@ -327,7 +316,6 @@ public class UDPServer
|
||||
{
|
||||
Address = remoteAddress,
|
||||
Port = remotePort,
|
||||
TaskID = taskID,
|
||||
Data = bytes,
|
||||
DateTime = DateTime.Now,
|
||||
HasRead = false,
|
||||
@@ -336,8 +324,7 @@ public class UDPServer
|
||||
using (udpData.AcquireWriteLock())
|
||||
{
|
||||
// Record UDP Receive Data
|
||||
if (udpData.ContainsKey($"{remoteAddress}-{taskID}") &&
|
||||
udpData.TryGetValue($"{remoteAddress}-{taskID}", out var dataQueue))
|
||||
if (udpData.ContainsKey(remoteAddress) && udpData.TryGetValue(remoteAddress, out var dataQueue))
|
||||
{
|
||||
dataQueue.Enqueue(data);
|
||||
logger.Trace("Receive data from old client");
|
||||
@@ -346,7 +333,7 @@ public class UDPServer
|
||||
{
|
||||
var queue = new Queue<UDPData>();
|
||||
queue.Enqueue(data);
|
||||
udpData.Add($"{remoteAddress}-{taskID}", queue);
|
||||
udpData.Add(remoteAddress, queue);
|
||||
logger.Trace("Receive data from new client");
|
||||
}
|
||||
}
|
||||
@@ -422,14 +409,13 @@ public class UDPServer
|
||||
/// 清空指定IP地址的数据
|
||||
/// </summary>
|
||||
/// <param name="ipAddr">IP地址</param>
|
||||
/// <param name="taskID">[TODO:parameter]</param>
|
||||
/// <returns>无</returns>
|
||||
public async Task ClearUDPData(string ipAddr, int taskID)
|
||||
public async Task ClearUDPData(string ipAddr)
|
||||
{
|
||||
using (await udpData.AcquireWriteLockAsync())
|
||||
{
|
||||
if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
|
||||
udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
|
||||
if (udpData.ContainsKey(ipAddr) &&
|
||||
udpData.TryGetValue(ipAddr, out var dataQueue) &&
|
||||
dataQueue.Count > 0)
|
||||
{
|
||||
dataQueue.Clear();
|
||||
|
||||
141
src/APIClient.ts
141
src/APIClient.ts
@@ -2189,144 +2189,3 @@ function throwException(message: string, status: number, response: string, heade
|
||||
else
|
||||
throw new ApiException(message, status, response, headers, null);
|
||||
}
|
||||
|
||||
// VideoStreamClient - 手动添加，用于HTTP视频流控制
|
||||
export class VideoStreamClient {
|
||||
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
|
||||
private baseUrl: string;
|
||||
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
|
||||
|
||||
constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
|
||||
this.http = http ? http : window as any;
|
||||
this.baseUrl = baseUrl ?? "http://localhost:5000";
|
||||
} /**
|
||||
* 获取HTTP视频流服务状态
|
||||
* @return HTTP视频流服务状态信息
|
||||
*/
|
||||
status(): Promise<any> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/Status";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processStatus(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processStatus(response: Response): Promise<any> {
|
||||
const status = response.status;
|
||||
let _headers: any = {};
|
||||
if (response.headers && response.headers.forEach) {
|
||||
response.headers.forEach((v: any, k: any) => _headers[k] = v);
|
||||
}
|
||||
|
||||
if (status === 200) {
|
||||
return response.text().then((_responseText) => {
|
||||
let result200: any = null;
|
||||
result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
|
||||
return result200;
|
||||
});
|
||||
} else if (status === 500) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error(_responseText);
|
||||
});
|
||||
} else if (status !== 200 && status !== 204) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error("未知的响应状态码: " + status + ", 响应文本: " + _responseText);
|
||||
});
|
||||
}
|
||||
return Promise.resolve<any>(null as any);
|
||||
} /**
|
||||
* 获取HTTP视频流信息
|
||||
* @return HTTP视频流信息
|
||||
*/
|
||||
streamInfo(): Promise<any> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/StreamInfo";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processStreamInfo(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processStreamInfo(response: Response): Promise<any> {
|
||||
const status = response.status;
|
||||
let _headers: any = {};
|
||||
if (response.headers && response.headers.forEach) {
|
||||
response.headers.forEach((v: any, k: any) => _headers[k] = v);
|
||||
}
|
||||
|
||||
if (status === 200) {
|
||||
return response.text().then((_responseText) => {
|
||||
let result200: any = null;
|
||||
result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
|
||||
return result200;
|
||||
});
|
||||
} else if (status === 500) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error(_responseText);
|
||||
});
|
||||
} else if (status !== 200 && status !== 204) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error("未知的响应状态码: " + status + ", 响应文本: " + _responseText);
|
||||
});
|
||||
}
|
||||
return Promise.resolve<any>(null as any);
|
||||
} /**
|
||||
* 测试HTTP视频流连接
|
||||
* @return 测试结果
|
||||
*/
|
||||
testConnection(): Promise<boolean> {
|
||||
let url_ = this.baseUrl + "/api/VideoStream/TestConnection";
|
||||
url_ = url_.replace(/[?&]$/, "");
|
||||
|
||||
let options_: RequestInit = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Accept": "application/json"
|
||||
}
|
||||
};
|
||||
|
||||
return this.http.fetch(url_, options_).then((_response: Response) => {
|
||||
return this.processTestConnection(_response);
|
||||
});
|
||||
}
|
||||
|
||||
protected processTestConnection(response: Response): Promise<boolean> {
|
||||
const status = response.status;
|
||||
let _headers: any = {};
|
||||
if (response.headers && response.headers.forEach) {
|
||||
response.headers.forEach((v: any, k: any) => _headers[k] = v);
|
||||
}
|
||||
|
||||
if (status === 200) {
|
||||
return response.text().then((_responseText) => {
|
||||
let result200: any = null;
|
||||
result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
|
||||
return result200;
|
||||
});
|
||||
} else if (status === 500) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error(_responseText);
|
||||
});
|
||||
} else if (status !== 200 && status !== 204) {
|
||||
return response.text().then((_responseText) => {
|
||||
throw new Error("未知的响应状态码: " + status + ", 响应文本: " + _responseText);
|
||||
});
|
||||
}
|
||||
return Promise.resolve<boolean>(false);
|
||||
}
|
||||
}
|
||||
|
||||
10
src/assets/base.css
Normal file
10
src/assets/base.css
Normal file
@@ -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] *));
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -181,8 +181,8 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, shallowRef, onMounted } from "vue";
|
||||
import motherboardSvg from "../components/equipments/svg/motherboard.svg";
|
||||
import buttonSvg from "../components//equipments/svg/button.svg";
|
||||
import motherboardSvg from "@/components/equipments/svg/motherboard.svg";
|
||||
import buttonSvg from "@/components//equipments/svg/button.svg";
|
||||
|
||||
// Props 定义
|
||||
interface Props {
|
||||
@@ -258,7 +258,7 @@ async function loadComponentModule(type: string) {
|
||||
if (!componentModules.value[type]) {
|
||||
try {
|
||||
// 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
|
||||
const module = await import(`../components/equipments/${type}.vue`);
|
||||
const module = await import(`@/components/equipments/${type}.vue`);
|
||||
|
||||
// 将模块添加到缓存中
|
||||
componentModules.value = {
|
||||
@@ -83,14 +83,15 @@
|
||||
}
|
||||
">
|
||||
<!-- 动态渲染组件 -->
|
||||
<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
|
||||
@@ -98,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>
|
||||
@@ -136,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 {
|
||||
@@ -149,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) {
|
||||
@@ -168,22 +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; // 添加属性接收文档面板的显示状态
|
||||
}>();
|
||||
|
||||
// 获取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);
|
||||
@@ -209,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[]>(() => {
|
||||
@@ -254,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);
|
||||
@@ -280,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);
|
||||
@@ -325,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;
|
||||
@@ -362,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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -450,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();
|
||||
}
|
||||
|
||||
@@ -466,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();
|
||||
}
|
||||
|
||||
@@ -483,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;
|
||||
}
|
||||
|
||||
// --- 组件拖拽交互 ---
|
||||
@@ -505,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);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果组件锁定位置或是交互元素，则不启动拖拽
|
||||
@@ -537,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;
|
||||
}
|
||||
|
||||
// 拖拽组件过程
|
||||
@@ -568,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;
|
||||
@@ -600,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);
|
||||
@@ -615,7 +586,7 @@ function onComponentDrag(e: MouseEvent) {
|
||||
function stopComponentDrag() {
|
||||
// 如果有组件被拖拽，保存当前状态
|
||||
if (draggingComponentId.value) {
|
||||
// console.log(`组件拖拽结束: ${draggingComponentId.value}`);
|
||||
console.log(`组件拖拽结束: ${draggingComponentId.value}`);
|
||||
|
||||
// 保存图表数据
|
||||
saveDiagramData(diagramData.value);
|
||||
@@ -624,8 +595,7 @@ function stopComponentDrag() {
|
||||
draggingComponentId.value = null;
|
||||
}
|
||||
|
||||
document.removeEventListener("mousemove", onComponentDrag);
|
||||
document.removeEventListener("mouseup", stopComponentDrag);
|
||||
isComponentDragEventActive.value = false;
|
||||
}
|
||||
|
||||
// 更新组件属性
|
||||
@@ -634,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);
|
||||
}
|
||||
}
|
||||
|
||||
// --- 连线操作 ---
|
||||
@@ -671,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);
|
||||
@@ -681,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);
|
||||
|
||||
// 查找组件部件对象以获取组件位置
|
||||
@@ -742,7 +716,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
|
||||
pinId,
|
||||
pinInfo.constraint,
|
||||
);
|
||||
document.addEventListener("mousemove", onCreatingWireMouseMove);
|
||||
isWireCreationEventActive.value = true;
|
||||
} else {
|
||||
// 完成连线创建
|
||||
if (
|
||||
@@ -757,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);
|
||||
@@ -819,7 +793,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
|
||||
|
||||
// 重置连线创建状态
|
||||
resetWireCreation();
|
||||
document.removeEventListener("mousemove", onCreatingWireMouseMove);
|
||||
isWireCreationEventActive.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -852,7 +826,7 @@ function resetWireCreation() {
|
||||
// 取消连线创建
|
||||
function cancelWireCreation() {
|
||||
resetWireCreation();
|
||||
document.removeEventListener("mousemove", onCreatingWireMouseMove);
|
||||
isWireCreationEventActive.value = false;
|
||||
}
|
||||
|
||||
// 连线创建过程中的鼠标移动
|
||||
@@ -871,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);
|
||||
|
||||
@@ -1021,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 {
|
||||
@@ -1039,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);
|
||||
}
|
||||
@@ -1054,9 +1044,6 @@ onMounted(async () => {
|
||||
position.x = canvasContainer.value.clientWidth / 2 - 5000; // 画布宽度的一半
|
||||
position.y = canvasContainer.value.clientHeight / 2 - 5000; // 画布高度的一半
|
||||
}
|
||||
|
||||
// 添加键盘事件监听器
|
||||
window.addEventListener("keydown", handleKeyDown);
|
||||
});
|
||||
|
||||
// 处理键盘事件
|
||||
@@ -1075,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) {
|
||||
// 检查组件是否仍然挂载
|
||||
@@ -1115,7 +1085,7 @@ function updateDiagramDataDirectly(data: DiagramData) {
|
||||
emit("diagram-updated", data);
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
// 暴露方法给父组件 - 简化版本，主要用于数据访问
|
||||
defineExpose({
|
||||
// 基本数据操作
|
||||
getDiagramData: () => diagramData.value,
|
||||
@@ -1154,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,
|
||||
@@ -1187,15 +1140,6 @@ watch(
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
// 当组件模块加载完成后，确保组件引用正确建立
|
||||
watch(
|
||||
() => props.componentModules,
|
||||
() => {
|
||||
// 这里不需要特别处理，Vue 会自动通过 setComponentRef 函数更新引用
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
646
src/components/LabCanvas/composable/componentManager.ts
Normal file
646
src/components/LabCanvas/composable/componentManager.ts
Normal file
@@ -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 };
|
||||
@@ -83,4 +83,3 @@ export function setMousePosition(x: number, y: number) {
|
||||
mousePosition.y = y;
|
||||
}
|
||||
|
||||
// 其它Wire相关操作可继续扩展...
|
||||
8
src/components/LabCanvas/index.ts
Normal file
8
src/components/LabCanvas/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
// 导出组件管理器服务
|
||||
export { useProvideComponentManager, useComponentManager } from './composable/componentManager';
|
||||
|
||||
// 导出图表管理器
|
||||
export type { DiagramData, DiagramPart } from './composable/diagramManager';
|
||||
|
||||
// 导出连线管理器
|
||||
export type { WireItem } from './composable/wireManager';
|
||||
@@ -39,7 +39,8 @@
|
||||
</svg>
|
||||
工程界面
|
||||
</router-link>
|
||||
</li> <li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/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">
|
||||
@@ -48,14 +49,6 @@
|
||||
测试功能
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="my-1 hover:translate-x-1 transition-all duration-300">
|
||||
<router-link to="/video-stream" 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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
HTTP视频流 </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"
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import CollapsibleSection from "./CollapsibleSection.vue";
|
||||
import { type DiagramPart } from "@/components/diagramManager";
|
||||
import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager";
|
||||
import {
|
||||
type PropertyConfig,
|
||||
getPropValue,
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
// 导入所需的类型和组件
|
||||
import { type DiagramPart } from "@/components/diagramManager"; // 图表部件类型定义
|
||||
import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager"; // 图表部件类型定义
|
||||
import { type PropertyConfig } from "@/components/equipments/componentConfig"; // 属性配置类型定义
|
||||
import CollapsibleSection from "./CollapsibleSection.vue"; // 可折叠区域组件
|
||||
import PropertyEditor from "./PropertyEditor.vue"; // 属性编辑器组件
|
||||
|
||||
@@ -385,7 +385,6 @@ const currentWaveformPath = computed(() => {
|
||||
function selectWaveform(index: number) {
|
||||
currentWaveformIndex.value = index;
|
||||
updateModelValue();
|
||||
applyOutputWave();
|
||||
}
|
||||
|
||||
async function applyOutputWave() {
|
||||
@@ -409,7 +408,7 @@ async function applyOutputWave() {
|
||||
eqps.boardPort,
|
||||
0,
|
||||
currentWaveformIndex.value,
|
||||
toInteger((frequency.value * Math.pow(2, 32 - 20)) / 10),
|
||||
toInteger(frequency.value * Math.pow(2, 32 - 20)),
|
||||
);
|
||||
if (!ret) {
|
||||
dialog.error("应用失败");
|
||||
@@ -425,7 +424,7 @@ async function applyOutputWave() {
|
||||
toInteger((phase.value * 4096) / 360),
|
||||
);
|
||||
if (ret) {
|
||||
// dialog.info("应用成功");
|
||||
dialog.info("应用成功");
|
||||
} else {
|
||||
dialog.error("应用失败");
|
||||
}
|
||||
@@ -456,7 +455,6 @@ function increaseFrequency() {
|
||||
frequency.value = parseFloat(frequency.value.toFixed(1)); // 修复浮点数精度问题
|
||||
frequencyInput.value = formatFrequency(frequency.value);
|
||||
updateModelValue();
|
||||
applyOutputWave();
|
||||
}
|
||||
|
||||
function decreaseFrequency() {
|
||||
@@ -477,7 +475,6 @@ function decreaseFrequency() {
|
||||
frequency.value = parseFloat(frequency.value.toFixed(1)); // 修复浮点数精度问题
|
||||
frequencyInput.value = formatFrequency(frequency.value);
|
||||
updateModelValue();
|
||||
applyOutputWave();
|
||||
}
|
||||
|
||||
function applyFrequencyInput() {
|
||||
@@ -508,7 +505,6 @@ function increasePhase() {
|
||||
}
|
||||
phaseInput.value = phase.value.toString();
|
||||
updateModelValue();
|
||||
applyOutputWave();
|
||||
}
|
||||
|
||||
function decreasePhase() {
|
||||
@@ -518,7 +514,6 @@ function decreasePhase() {
|
||||
}
|
||||
phaseInput.value = phase.value.toString();
|
||||
updateModelValue();
|
||||
applyOutputWave();
|
||||
}
|
||||
|
||||
function applyPhaseInput() {
|
||||
|
||||
@@ -9,40 +9,24 @@
|
||||
IDCode: 0x{{ jtagIDCode.toString(16).padStart(8, "0").toUpperCase() }}
|
||||
</p>
|
||||
<button class="btn btn-circle w-6 h-6" :onclick="getIDCode">
|
||||
<svg
|
||||
class="icon opacity-70 fill-primary"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4865"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<svg class="icon opacity-70 fill-primary" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="4865" width="200" height="200">
|
||||
<path
|
||||
d="M894.481158 505.727133c0 49.589418-9.711176 97.705276-28.867468 143.007041-18.501376 43.74634-44.98454 83.031065-78.712713 116.759237-33.728172 33.728172-73.012897 60.211337-116.759237 78.712713-45.311998 19.156292-93.417623 28.877701-143.007041 28.877701s-97.695043-9.721409-142.996808-28.877701c-43.756573-18.501376-83.031065-44.98454-116.76947-78.712713-33.728172-33.728172-60.211337-73.012897-78.712713-116.759237-19.156292-45.301765-28.867468-93.417623-28.867468-143.007041 0-49.579185 9.711176-97.695043 28.867468-142.996808 18.501376-43.74634 44.98454-83.031065 78.712713-116.759237 33.738405-33.728172 73.012897-60.211337 116.76947-78.712713 45.301765-19.166525 93.40739-28.877701 142.996808-28.877701 52.925397 0 104.008842 11.010775 151.827941 32.745798 46.192042 20.977777 86.909395 50.79692 121.016191 88.608084 4.389984 4.860704 8.646937 9.854439 12.781094 14.97097l0-136.263453c0-11.307533 9.168824-20.466124 20.466124-20.466124 11.307533 0 20.466124 9.15859 20.466124 20.466124l0 183.64253c0 5.433756-2.148943 10.632151-5.986341 14.46955-3.847631 3.837398-9.046027 5.996574-14.479783 5.996574l-183.64253-0.020466c-11.307533 0-20.466124-9.168824-20.466124-20.466124 0-11.307533 9.168824-20.466124 20.466124-20.466124l132.293025 0.020466c-3.960195-4.952802-8.063653-9.782807-12.289907-14.479783-30.320563-33.605376-66.514903-60.098773-107.549481-78.753645-42.467207-19.289322-87.850837-29.072129-134.902456-29.072129-87.195921 0-169.172981 33.9533-230.816946 95.597265-61.654198 61.654198-95.597265 143.621025-95.597265 230.816946s33.943067 169.172981 95.597265 230.816946c61.643965 61.654198 143.621025 95.607498 230.816946 95.607498s169.172981-33.9533 230.816946-95.607498c61.654198-61.643965 95.597265-143.621025 95.597265-230.816946 0-11.2973 9.168824-20.466124 20.466124-20.466124C885.322567 485.261009 894.481158 494.429833 894.481158 505.727133z"
|
||||
p-id="4866"
|
||||
></path>
|
||||
p-id="4866"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<UploadCard
|
||||
class="bg-base-200"
|
||||
:upload-event="eqps.jtagUploadBitstream"
|
||||
:download-event="eqps.jtagDownloadBitstream"
|
||||
:bitstream-file="eqps.jtagBitstream"
|
||||
@update:bitstream-file="handleBitstreamChange"
|
||||
>
|
||||
<UploadCard class="bg-base-200" :upload-event="eqps.jtagUploadBitstream"
|
||||
:download-event="eqps.jtagDownloadBitstream" :bitstream-file="eqps.jtagBitstream"
|
||||
@update:bitstream-file="handleBitstreamChange">
|
||||
</UploadCard>
|
||||
<div class="divider"></div>
|
||||
<div class="w-full">
|
||||
<legend class="fieldset-legend text-sm mb-0.3">Jtag运行频率</legend>
|
||||
<select
|
||||
class="select w-full"
|
||||
@change="handleSelectJtagSpeed"
|
||||
:value="props.jtagFreq"
|
||||
>
|
||||
<select class="select w-full" @change="handleSelectJtagSpeed" :value="props.jtagFreq">
|
||||
<option v-for="option in selectJtagSpeedOptions" :value="option.id">
|
||||
{{ option.text }}
|
||||
</option>
|
||||
@@ -51,23 +35,12 @@
|
||||
<div class="flex flex-row items-center">
|
||||
<fieldset class="fieldset w-70">
|
||||
<legend class="fieldset-legend text-sm">边界扫描刷新率 / Hz</legend>
|
||||
<input
|
||||
type="number"
|
||||
class="input validator"
|
||||
required
|
||||
placeholder="Type a number between 1 to 1000"
|
||||
min="1"
|
||||
max="1000"
|
||||
v-model="jtagBoundaryScanFreq"
|
||||
title="Type a number between 1 to 1000"
|
||||
/>
|
||||
<input type="number" class="input validator" required placeholder="Type a number between 1 to 1000" min="1"
|
||||
max="1000" v-model="jtagBoundaryScanFreq" title="Type a number between 1 to 1000" />
|
||||
<p class="validator-hint">输入一个1 ~ 1000的数</p>
|
||||
</fieldset>
|
||||
<button
|
||||
class="btn btn-primary grow mx-4"
|
||||
:class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
|
||||
:onclick="toggleJtagBoundaryScan"
|
||||
>
|
||||
<button class="btn btn-primary grow mx-4" :class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
|
||||
:onclick="toggleJtagBoundaryScan">
|
||||
{{ eqps.enableJtagBoundaryScan ? "关闭边界扫描" : "启动边界扫描" }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -75,21 +48,12 @@
|
||||
<h1 class="font-bold text-center text-2xl">外设</h1>
|
||||
<div class="flex flex-row justify-around">
|
||||
<div class="flex flex-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
:checked="eqps.enableMatrixKey"
|
||||
@change="handleMatrixkeyCheckboxChange"
|
||||
/>
|
||||
<input type="checkbox" class="checkbox" :checked="eqps.enableMatrixKey"
|
||||
@change="handleMatrixkeyCheckboxChange" />
|
||||
<p class="mx-2">启用矩阵键盘</p>
|
||||
</div>
|
||||
<div class="flex flex-row">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
:checked="eqps.enablePower"
|
||||
@change="handlePowerCheckboxChange"
|
||||
/>
|
||||
<input type="checkbox" class="checkbox" :checked="eqps.enablePower" @change="handlePowerCheckboxChange" />
|
||||
<p class="mx-2">启用电源</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,7 +65,7 @@ import z from "zod";
|
||||
import UploadCard from "@/components/UploadCard.vue";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { useEquipments } from "@/stores/equipments";
|
||||
import { computed, ref, watchEffect } from "vue";
|
||||
import { computed, ref, watchEffect, watchPostEffect } from "vue";
|
||||
|
||||
interface CapsProps {
|
||||
jtagAddr?: string;
|
||||
@@ -173,6 +137,11 @@ async function handlePowerCheckboxChange(event: Event) {
|
||||
}
|
||||
|
||||
async function toggleJtagBoundaryScan() {
|
||||
if (eqps.jtagClientMutex.isLocked()) {
|
||||
dialog.warn("Jtag正在被占用");
|
||||
return;
|
||||
}
|
||||
|
||||
eqps.enableJtagBoundaryScan = !eqps.enableJtagBoundaryScan;
|
||||
}
|
||||
|
||||
|
||||
@@ -177,26 +177,26 @@ defineExpose({
|
||||
getPinPosition: (pinId: string) => {
|
||||
// 如果是自定义的引脚ID
|
||||
if (props.pins && props.pins.length > 0) {
|
||||
// console.log('SMT_LED查找Pin ID:', pinId);
|
||||
// console.log('SMT_LED组件尺寸:', props.size, '宽高:', width.value, 'x', height.value);
|
||||
console.log('SMT_LED查找Pin ID:', pinId);
|
||||
console.log('SMT_LED组件尺寸:', props.size, '宽高:', width.value, 'x', height.value);
|
||||
const customPin = props.pins.find(p => p.pinId === pinId);
|
||||
// console.log('找到的引脚配置:', customPin);
|
||||
console.log('找到的引脚配置:', customPin);
|
||||
|
||||
if (customPin) {
|
||||
// 考虑组件尺寸的缩放
|
||||
const scaledX = customPin.x * props.size;
|
||||
const scaledY = customPin.y * props.size;
|
||||
|
||||
// console.log('使用Pin缩放后的坐标:', scaledX, scaledY);
|
||||
console.log('使用Pin缩放后的坐标:', scaledX, scaledY);
|
||||
return {
|
||||
x: scaledX,
|
||||
y: scaledY
|
||||
};
|
||||
}
|
||||
// console.log('未找到匹配的引脚');
|
||||
console.log('未找到匹配的引脚');
|
||||
return null;
|
||||
}
|
||||
// console.log('没有引脚配置');
|
||||
console.log('没有引脚配置');
|
||||
return null;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// componentConfig.ts 提供通用的组件配置功能
|
||||
import type { DiagramPart } from '../diagramManager';
|
||||
import type { DiagramPart } from '../LabCanvas/composable/diagramManager';
|
||||
|
||||
// 属性配置接口
|
||||
export interface PropertyConfig {
|
||||
|
||||
@@ -2,13 +2,10 @@ import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import VueKonva from "vue-konva"
|
||||
|
||||
import App from '@/App.vue'
|
||||
import router from './router'
|
||||
// import { Client } from './APIClient'
|
||||
|
||||
const app = createApp(App).use(router).use(createPinia()).mount('#app')
|
||||
|
||||
// 初始化约束通信
|
||||
// initConstraintCommunication();
|
||||
const app = createApp(App).use(router).use(createPinia()).use(VueKonva).mount('#app')
|
||||
|
||||
|
||||
@@ -6,7 +6,6 @@ import ProjectView from '../views/ProjectView.vue'
|
||||
import TestView from '../views/TestView.vue'
|
||||
import UserView from '../views/UserView.vue'
|
||||
import AdminView from '../views/AdminView.vue'
|
||||
import VideoStreamView from '../views/VideoStreamView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@@ -17,7 +16,7 @@ const router = createRouter({
|
||||
{path: '/project',name: 'project',component: ProjectView},
|
||||
{path: '/test', name: 'test', component: TestView},
|
||||
{path: '/user', name: 'user', component: UserView},
|
||||
{path: '/admin', name: 'admin', component: AdminView}, {path: '/video-stream',name: 'video-stream',component: VideoStreamView}]
|
||||
{path: '/admin', name: 'admin', component: AdminView}]
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ref, reactive, watchPostEffect } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import { isString, toNumber } from 'lodash';
|
||||
import { Common } from '@/Common';
|
||||
import { Common } from '@/utils/Common';
|
||||
import z from "zod"
|
||||
import { isNumber } from 'mathjs';
|
||||
import { JtagClient, MatrixKeyClient, PowerClient } from "@/APIClient";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { type FileParameter } from "./APIClient";
|
||||
import { type FileParameter } from "@/APIClient";
|
||||
import { isNull, isUndefined } from "lodash";
|
||||
|
||||
export namespace Common {
|
||||
30
src/utils/VueKonvaType.ts
Normal file
30
src/utils/VueKonvaType.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import Konva from "konva";
|
||||
import type { VueElement } from "vue";
|
||||
|
||||
interface VNode extends VueElement {
|
||||
getNode(): Konva.Node
|
||||
}
|
||||
|
||||
interface VLayer extends VueElement {
|
||||
getNode(): Konva.Layer
|
||||
}
|
||||
|
||||
interface VGroup extends VueElement {
|
||||
getNode(): Konva.Group
|
||||
}
|
||||
|
||||
interface VStage extends VueElement {
|
||||
getNode(): Konva.Stage
|
||||
}
|
||||
|
||||
interface VTransformer extends VueElement {
|
||||
getNode(): Konva.Transformer
|
||||
}
|
||||
|
||||
export type {
|
||||
VNode,
|
||||
VLayer,
|
||||
VGroup,
|
||||
VStage,
|
||||
VTransformer,
|
||||
}
|
||||
@@ -115,7 +115,7 @@ import { isNull, isUndefined } from "lodash";
|
||||
import { ref } from "vue";
|
||||
import { RemoteUpdateClient } from "@/APIClient";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { Common } from "@/Common";
|
||||
import { Common } from "@/utils/Common";
|
||||
|
||||
const dialog = useDialogStore();
|
||||
|
||||
|
||||
@@ -1,31 +1,37 @@
|
||||
<template>
|
||||
<div class="h-screen flex flex-col overflow-hidden">
|
||||
<div class="flex flex-1 overflow-hidden relative">
|
||||
<!-- 左侧图形化区域 -->
|
||||
<div class="relative bg-base-200 overflow-hidden h-full" :style="{ width: leftPanelWidth + '%' }">
|
||||
<DiagramCanvas ref="diagramCanvas" :componentModules="componentModules" :showDocPanel="showDocPanel"
|
||||
@component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
|
||||
@component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deleted="handleWireDeleted"
|
||||
@diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
|
||||
@load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
|
||||
</div>
|
||||
|
||||
<!-- 拖拽分割线 -->
|
||||
<div
|
||||
class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
|
||||
@mousedown="startResize"></div>
|
||||
<!-- 右侧编辑区域 -->
|
||||
<div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<!-- 使用条件渲染显示不同的面板 -->
|
||||
<PropertyPanel v-show="!showDocPanel" :componentData="selectedComponentData"
|
||||
:componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
|
||||
@updateDirectProp="updateComponentDirectProp" />
|
||||
<div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
|
||||
<MarkdownRenderer :content="documentContent" />
|
||||
<SplitterGroup id="splitter-group" direction="horizontal" class="w-full h-full">
|
||||
<!-- 左侧图形化区域 -->
|
||||
<SplitterPanel
|
||||
id="splitter-group-panel-canvas"
|
||||
:default-size="60"
|
||||
:min-size="30"
|
||||
class="relative bg-base-200 overflow-hidden h-full"
|
||||
>
|
||||
<DiagramCanvas ref="diagramCanvas" :showDocPanel="showDocPanel"
|
||||
@diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
|
||||
@toggle-doc-panel="toggleDocPanel" />
|
||||
</SplitterPanel>
|
||||
<!-- 拖拽分割线 -->
|
||||
<SplitterResizeHandle id="splitter-group-resize-handle" class="w-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors" />
|
||||
<!-- 右侧编辑区域 -->
|
||||
<SplitterPanel
|
||||
id="splitter-group-panel-properties"
|
||||
:min-size="20"
|
||||
class="bg-base-200 h-full overflow-hidden flex flex-col"
|
||||
>
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<!-- 使用条件渲染显示不同的面板 -->
|
||||
<PropertyPanel v-show="!showDocPanel" :componentData="componentManager.selectedComponentData.value"
|
||||
:componentConfig="componentManager.selectedComponentConfig.value" @updateProp="updateComponentProp"
|
||||
@updateDirectProp="updateComponentDirectProp" />
|
||||
<div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
|
||||
<MarkdownRenderer :content="documentContent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SplitterPanel>
|
||||
</SplitterGroup>
|
||||
</div>
|
||||
<!-- 元器件选择组件 -->
|
||||
<ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
|
||||
@@ -34,29 +40,26 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 引入wokwi-elements和组件
|
||||
// import "@wokwi/elements"; // 不再需要全局引入 wokwi
|
||||
import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
|
||||
import DiagramCanvas from "@/components/DiagramCanvas.vue";
|
||||
import ComponentSelector from "@/components/ComponentSelector.vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
|
||||
import DiagramCanvas from "@/components/LabCanvas/DiagramCanvas.vue";
|
||||
import ComponentSelector from "@/components/LabCanvas/ComponentSelector.vue";
|
||||
import PropertyPanel from "@/components/PropertyPanel.vue";
|
||||
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
|
||||
import type { DiagramData, DiagramPart } from "@/components/diagramManager";
|
||||
import {
|
||||
type PropertyConfig,
|
||||
generatePropertyConfigs,
|
||||
generatePropsFromDefault,
|
||||
generatePropsFromAttrs,
|
||||
} from "@/components/equipments/componentConfig"; // 引入组件配置工具
|
||||
|
||||
// --- 文档面板控制 ---
|
||||
const showDocPanel = ref(false);
|
||||
const documentContent = ref("");
|
||||
import { useProvideComponentManager } from "@/components/LabCanvas";
|
||||
import type { DiagramData, DiagramPart } from "@/components/LabCanvas";
|
||||
|
||||
// 获取路由参数
|
||||
import { useRoute } from "vue-router";
|
||||
const route = useRoute();
|
||||
|
||||
// 提供组件管理服务
|
||||
const componentManager = useProvideComponentManager();
|
||||
|
||||
// --- 文档面板控制 ---
|
||||
const showDocPanel = ref(false);
|
||||
const documentContent = ref("");
|
||||
|
||||
// 切换文档面板和属性面板
|
||||
async function toggleDocPanel() {
|
||||
showDocPanel.value = !showDocPanel.value;
|
||||
@@ -99,610 +102,11 @@ async function loadDocumentContent() {
|
||||
}
|
||||
}
|
||||
|
||||
// 检查是否有例程参数，如果有则自动打开文档面板
|
||||
onMounted(async () => {
|
||||
if (route.query.tutorial) {
|
||||
showDocPanel.value = true;
|
||||
await loadDocumentContent();
|
||||
}
|
||||
});
|
||||
|
||||
// --- 元器件管理 ---
|
||||
// --- UI 状态管理 ---
|
||||
const showComponentsMenu = ref(false);
|
||||
const diagramData = ref<DiagramData>({
|
||||
version: 1,
|
||||
author: "admin",
|
||||
editor: "me",
|
||||
parts: [],
|
||||
connections: [],
|
||||
});
|
||||
|
||||
const selectedComponentId = ref<string | null>(null);
|
||||
const selectedComponentData = computed(() => {
|
||||
return (
|
||||
diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
|
||||
null
|
||||
);
|
||||
});
|
||||
const diagramCanvas = ref(null);
|
||||
|
||||
// 存储动态导入的组件模块
|
||||
interface ComponentModule {
|
||||
default: any;
|
||||
getDefaultProps?: () => Record<string, any>;
|
||||
config?: {
|
||||
props?: Array<PropertyConfig>;
|
||||
};
|
||||
}
|
||||
|
||||
const componentModules = shallowRef<Record<string, ComponentModule>>({});
|
||||
const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
|
||||
null,
|
||||
); // 存储选中组件的配置
|
||||
|
||||
// 动态加载组件定义
|
||||
async function loadComponentModule(type: string) {
|
||||
if (!componentModules.value[type]) {
|
||||
try {
|
||||
// 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
|
||||
const module = await import(`../components/equipments/${type}.vue`);
|
||||
|
||||
// 使用 markRaw 包装模块，避免不必要的响应式处理
|
||||
componentModules.value = {
|
||||
...componentModules.value,
|
||||
[type]: module,
|
||||
};
|
||||
|
||||
// console.log(`Loaded module for ${type}:`, module);
|
||||
} catch (error) {
|
||||
console.error(`Failed to load component module ${type}:`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return componentModules.value[type];
|
||||
}
|
||||
|
||||
// 处理组件模块加载请求
|
||||
async function handleLoadComponentModule(type: string) {
|
||||
// console.log("Handling load component module request for:", type);
|
||||
await loadComponentModule(type);
|
||||
}
|
||||
|
||||
// --- 分割面板 ---
|
||||
const leftPanelWidth = ref(60);
|
||||
const isResizing = ref(false);
|
||||
|
||||
// 分割面板拖拽相关函数
|
||||
function startResize(e: MouseEvent) {
|
||||
isResizing.value = true;
|
||||
document.addEventListener("mousemove", onResize);
|
||||
document.addEventListener("mouseup", stopResize);
|
||||
e.preventDefault(); // 防止文本选择
|
||||
}
|
||||
|
||||
function onResize(e: MouseEvent) {
|
||||
if (!isResizing.value) return;
|
||||
|
||||
// 获取容器宽度和鼠标位置
|
||||
const container = document.querySelector(
|
||||
".flex-1.overflow-hidden",
|
||||
) as HTMLElement;
|
||||
if (!container) return;
|
||||
|
||||
const containerWidth = container.clientWidth;
|
||||
const mouseX = e.clientX;
|
||||
|
||||
// 计算左侧面板应占的百分比
|
||||
let newWidth = (mouseX / containerWidth) * 100;
|
||||
|
||||
// 限制最小宽度和最大宽度
|
||||
newWidth = Math.max(20, Math.min(newWidth, 80));
|
||||
|
||||
// 更新宽度
|
||||
leftPanelWidth.value = newWidth;
|
||||
}
|
||||
|
||||
function stopResize() {
|
||||
isResizing.value = false;
|
||||
document.removeEventListener("mousemove", onResize);
|
||||
document.removeEventListener("mouseup", stopResize);
|
||||
}
|
||||
|
||||
// --- 元器件操作 ---
|
||||
function openComponentsMenu() {
|
||||
showComponentsMenu.value = true;
|
||||
}
|
||||
|
||||
// 处理 ComponentSelector 组件添加元器件事件
|
||||
async function handleAddComponent(componentData: {
|
||||
type: string;
|
||||
name: string;
|
||||
props: Record<string, any>;
|
||||
}) {
|
||||
// 加载组件模块以便后续使用
|
||||
const componentModule = await loadComponentModule(componentData.type);
|
||||
|
||||
// 获取画布容器和位置信息
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
|
||||
// 获取当前画布的位置信息
|
||||
let position = { x: 100, y: 100 };
|
||||
let scale = 1;
|
||||
|
||||
try {
|
||||
if (
|
||||
canvasInstance &&
|
||||
canvasInstance.getCanvasPosition &&
|
||||
canvasInstance.getScale
|
||||
) {
|
||||
position = canvasInstance.getCanvasPosition();
|
||||
scale = canvasInstance.getScale();
|
||||
|
||||
// 获取画布容器
|
||||
const canvasContainer = canvasInstance.$el as HTMLElement;
|
||||
if (canvasContainer) {
|
||||
// 计算可视区域中心点在画布坐标系中的位置
|
||||
const viewportWidth = canvasContainer.clientWidth;
|
||||
const viewportHeight = canvasContainer.clientHeight;
|
||||
|
||||
// 计算画布中心点的坐标
|
||||
position.x = (viewportWidth / 2 - position.x) / scale;
|
||||
position.y = (viewportHeight / 2 - position.y) / scale;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取画布位置时出错:", error);
|
||||
}
|
||||
|
||||
// 添加一些随机偏移，避免元器件重叠
|
||||
const offsetX = Math.floor(Math.random() * 100) - 50;
|
||||
const offsetY = Math.floor(Math.random() * 100) - 50;
|
||||
|
||||
// 获取组件的能力页面
|
||||
let capsPage = null;
|
||||
if (
|
||||
componentModule &&
|
||||
componentModule.default &&
|
||||
typeof componentModule.default.getCapabilities === "function"
|
||||
) {
|
||||
try {
|
||||
capsPage = componentModule.default.getCapabilities();
|
||||
// console.log(`获取到${componentData.type}组件的能力页面`);
|
||||
} catch (error) {
|
||||
// console.error(`获取${componentData.type}组件能力页面失败:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// 创建新组件，使用diagramManager接口定义
|
||||
const newComponent: DiagramPart = {
|
||||
id: `component-${Date.now()}`,
|
||||
type: componentData.type,
|
||||
x: Math.round(position.x + offsetX),
|
||||
y: Math.round(position.y + offsetY),
|
||||
attrs: componentData.props,
|
||||
rotate: 0,
|
||||
group: "",
|
||||
positionlock: false,
|
||||
hidepins: true,
|
||||
isOn: true,
|
||||
index: 0,
|
||||
};
|
||||
|
||||
console.log("添加新组件:", newComponent);
|
||||
// 通过画布实例添加组件
|
||||
if (
|
||||
canvasInstance &&
|
||||
canvasInstance.getDiagramData &&
|
||||
canvasInstance.updateDiagramDataDirectly
|
||||
) {
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
currentData.parts.push(newComponent);
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理模板添加事件
|
||||
async function handleAddTemplate(templateData: {
|
||||
id: string;
|
||||
name: string;
|
||||
template: any;
|
||||
}) {
|
||||
console.log("添加模板:", templateData);
|
||||
console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
|
||||
// 获取画布实例
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (
|
||||
!canvasInstance ||
|
||||
!canvasInstance.getDiagramData ||
|
||||
!canvasInstance.updateDiagramDataDirectly
|
||||
) {
|
||||
console.error("没有可用的画布实例添加模板");
|
||||
return;
|
||||
}
|
||||
|
||||
// 获取当前图表数据
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
console.log("=== 当前图表组件数量:", currentData.parts.length);
|
||||
|
||||
// 生成唯一ID前缀，以确保添加的组件ID不重复
|
||||
const idPrefix = `template-${Date.now()}-`;
|
||||
// 处理模板组件并添加到图表
|
||||
if (templateData.template && templateData.template.parts) {
|
||||
// 获取当前视口中心位置
|
||||
let viewportCenter = { x: 300, y: 200 }; // 默认值
|
||||
try {
|
||||
if (
|
||||
canvasInstance &&
|
||||
canvasInstance.getCanvasPosition &&
|
||||
canvasInstance.getScale
|
||||
) {
|
||||
const position = canvasInstance.getCanvasPosition();
|
||||
const scale = canvasInstance.getScale();
|
||||
|
||||
// 获取画布容器
|
||||
const canvasContainer = canvasInstance.$el as HTMLElement;
|
||||
if (canvasContainer) {
|
||||
// 计算可视区域中心点在画布坐标系中的位置
|
||||
const viewportWidth = canvasContainer.clientWidth;
|
||||
const viewportHeight = canvasContainer.clientHeight;
|
||||
|
||||
// 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
|
||||
viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
|
||||
viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
|
||||
// console.log(
|
||||
// `=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
|
||||
// );
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取视口中心位置时出错:", error);
|
||||
}
|
||||
|
||||
// console.log("=== 使用视口中心添加模板组件:", viewportCenter);
|
||||
|
||||
// 找到模板中的主要组件（假设是第一个组件）
|
||||
const mainPart = templateData.template.parts[0];
|
||||
|
||||
// 创建带有新位置的组件
|
||||
const newParts = await Promise.all(
|
||||
templateData.template.parts.map(async (part: any) => {
|
||||
// 创建组件副本并分配新ID
|
||||
const newPart = JSON.parse(JSON.stringify(part));
|
||||
newPart.id = `${idPrefix}${part.id}`;
|
||||
|
||||
// 尝试加载组件模块并获取能力页面
|
||||
try {
|
||||
const componentModule = await loadComponentModule(part.type);
|
||||
if (
|
||||
componentModule &&
|
||||
componentModule.default &&
|
||||
typeof componentModule.default.getCapabilities === "function"
|
||||
) {
|
||||
newPart.capsPage = componentModule.default.getCapabilities();
|
||||
console.log(`加载模板组件${part.type}组件的能力页面成功`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`加载模板组件${part.type}的能力页面失败:`, error);
|
||||
}
|
||||
|
||||
// 计算相对于主要组件的偏移量，保持模板内部组件的相对位置关系
|
||||
if (typeof newPart.x === "number" && typeof newPart.y === "number") {
|
||||
const oldX = newPart.x;
|
||||
const oldY = newPart.y;
|
||||
|
||||
// 计算相对位置（相对于主要组件）
|
||||
const relativeX = part.x - mainPart.x;
|
||||
const relativeY = part.y - mainPart.y;
|
||||
|
||||
// 应用到视口中心位置
|
||||
newPart.x = viewportCenter.x + relativeX;
|
||||
newPart.y = viewportCenter.y + relativeY;
|
||||
|
||||
// console.log(
|
||||
// `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
|
||||
// );
|
||||
}
|
||||
|
||||
return newPart;
|
||||
}),
|
||||
);
|
||||
|
||||
// 向图表添加新组件
|
||||
currentData.parts.push(...newParts);
|
||||
|
||||
// 处理连接关系
|
||||
if (templateData.template.connections) {
|
||||
// 创建一个映射表用于转换旧组件ID到新组件ID
|
||||
const idMap: Record<string, string> = {};
|
||||
templateData.template.parts.forEach((part: any) => {
|
||||
idMap[part.id] = `${idPrefix}${part.id}`;
|
||||
});
|
||||
|
||||
// 添加连接，更新组件ID引用
|
||||
const newConnections = templateData.template.connections.map(
|
||||
(conn: any) => {
|
||||
// 处理连接数据 (格式为 [from, to, type, path])
|
||||
if (Array.isArray(conn)) {
|
||||
const [from, to, type, path] = conn;
|
||||
|
||||
// 从连接字符串中提取组件ID和引脚ID
|
||||
const fromParts = from.split(":");
|
||||
const toParts = to.split(":");
|
||||
|
||||
if (fromParts.length === 2 && toParts.length === 2) {
|
||||
const fromComponentId = fromParts[0];
|
||||
const fromPinId = fromParts[1];
|
||||
const toComponentId = toParts[0];
|
||||
const toPinId = toParts[1];
|
||||
|
||||
// 创建新的连接字符串，使用新的组件ID
|
||||
const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
|
||||
const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
|
||||
|
||||
return [newFrom, newTo, type, path];
|
||||
}
|
||||
}
|
||||
return conn; // 如果格式不匹配，保持原样
|
||||
},
|
||||
);
|
||||
|
||||
// 添加到当前连接列表
|
||||
currentData.connections.push(...newConnections);
|
||||
}
|
||||
// 更新图表数据
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
|
||||
|
||||
// 显示成功消息
|
||||
showToast(`已添加 ${templateData.name} 模板`, "success");
|
||||
} else {
|
||||
console.error("模板格式错误，缺少parts数组");
|
||||
showToast("模板格式错误", "error");
|
||||
}
|
||||
}
|
||||
|
||||
// 处理组件选中事件
|
||||
async function handleComponentSelected(componentData: DiagramPart | null) {
|
||||
selectedComponentId.value = componentData ? componentData.id : null;
|
||||
selectedComponentConfig.value = null; // 重置配置
|
||||
|
||||
if (componentData) {
|
||||
// 先加载组件模块
|
||||
const moduleRef = await loadComponentModule(componentData.type);
|
||||
|
||||
if (moduleRef) {
|
||||
try {
|
||||
// 创建属性配置数组
|
||||
const propConfigs: PropertyConfig[] = [];
|
||||
|
||||
// 创建一个映射来跟踪已添加的属性名
|
||||
const addedProps = new Set<string>();
|
||||
|
||||
// 1. 首先从getDefaultProps方法获取默认配置
|
||||
if (typeof moduleRef.getDefaultProps === "function") {
|
||||
const defaultProps = moduleRef.getDefaultProps();
|
||||
const defaultPropConfigs = generatePropsFromDefault(defaultProps);
|
||||
|
||||
// 添加默认配置并记录属性名
|
||||
defaultPropConfigs.forEach((config) => {
|
||||
propConfigs.push(config);
|
||||
addedProps.add(config.name);
|
||||
});
|
||||
}
|
||||
|
||||
// 2. 添加组件直接属性，这些属性会覆盖默认配置
|
||||
const directPropConfigs = generatePropertyConfigs(componentData);
|
||||
|
||||
// 过滤掉已经添加过的属性名
|
||||
const newDirectProps = directPropConfigs.filter(
|
||||
(config) => !addedProps.has(config.name),
|
||||
);
|
||||
propConfigs.push(...newDirectProps);
|
||||
|
||||
// 3. 最后添加attrs中的属性
|
||||
if (componentData.attrs) {
|
||||
const attrs = componentData.attrs;
|
||||
const attrPropConfigs = generatePropsFromAttrs(attrs);
|
||||
|
||||
// 更新已存在的属性值，或添加新属性
|
||||
attrPropConfigs.forEach((attrConfig) => {
|
||||
const existingIndex = propConfigs.findIndex(
|
||||
(p) => p.name === attrConfig.name,
|
||||
);
|
||||
if (existingIndex >= 0) {
|
||||
// 更新已存在的属性值
|
||||
propConfigs[existingIndex] = attrConfig;
|
||||
} else {
|
||||
// 添加新属性
|
||||
propConfigs.push(attrConfig);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
selectedComponentConfig.value = { props: propConfigs };
|
||||
console.log(
|
||||
`Built config for ${componentData.type}:`,
|
||||
selectedComponentConfig.value,
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(
|
||||
`Error building config for ${componentData.type}:`,
|
||||
error,
|
||||
);
|
||||
selectedComponentConfig.value = { props: [] };
|
||||
}
|
||||
} else {
|
||||
console.warn(`Module for component ${componentData.type} not found.`);
|
||||
selectedComponentConfig.value = { props: [] };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理图表数据更新事件
|
||||
function handleDiagramUpdated(data: DiagramData) {
|
||||
diagramData.value = data;
|
||||
}
|
||||
|
||||
// 处理组件移动事件
|
||||
function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
|
||||
const part = diagramData.value.parts.find((p) => p.id === moveData.id);
|
||||
if (part) {
|
||||
part.x = moveData.x;
|
||||
part.y = moveData.y;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理组件删除事件
|
||||
function handleComponentDelete(componentId: string) {
|
||||
// 查找要删除的组件
|
||||
const component = diagramData.value.parts.find((p) => p.id === componentId);
|
||||
if (!component) return;
|
||||
|
||||
// 收集需要删除的组件ID列表（包括当前组件和同组组件）
|
||||
const componentsToDelete: string[] = [componentId];
|
||||
|
||||
// 如果组件属于一个组，则找出所有同组的组件
|
||||
if (component.group && component.group !== "") {
|
||||
const groupMembers = diagramData.value.parts.filter(
|
||||
(p) => p.group === component.group && p.id !== componentId,
|
||||
);
|
||||
|
||||
// 将同组组件ID添加到删除列表
|
||||
componentsToDelete.push(...groupMembers.map((p) => p.id));
|
||||
console.log(
|
||||
`删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
|
||||
);
|
||||
}
|
||||
|
||||
// 删除所有标记的组件
|
||||
diagramData.value.parts = diagramData.value.parts.filter(
|
||||
(p) => !componentsToDelete.includes(p.id),
|
||||
);
|
||||
|
||||
// 同时删除与这些组件相关的所有连接
|
||||
diagramData.value.connections = diagramData.value.connections.filter(
|
||||
(connection) => {
|
||||
for (const id of componentsToDelete) {
|
||||
if (
|
||||
connection[0].startsWith(`${id}:`) ||
|
||||
connection[1].startsWith(`${id}:`)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
);
|
||||
|
||||
// 如果删除的是当前选中的组件，清除选中状态
|
||||
if (
|
||||
selectedComponentId.value &&
|
||||
componentsToDelete.includes(selectedComponentId.value)
|
||||
) {
|
||||
selectedComponentId.value = null;
|
||||
selectedComponentConfig.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新组件属性的方法
|
||||
function updateComponentProp(
|
||||
componentId: string,
|
||||
propName: string,
|
||||
value: any,
|
||||
) {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (
|
||||
!canvasInstance ||
|
||||
!canvasInstance.getDiagramData ||
|
||||
!canvasInstance.updateDiagramDataDirectly
|
||||
) {
|
||||
console.error("没有可用的画布实例进行属性更新");
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查值是否为对象，如果是对象并有value属性，则使用该属性值
|
||||
if (value !== null && typeof value === "object" && "value" in value) {
|
||||
value = value.value;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
|
||||
|
||||
if (part) {
|
||||
// 检查是否为基本属性
|
||||
if (propName in part) {
|
||||
(part as any)[propName] = value;
|
||||
} else {
|
||||
// 否则当作attrs中的属性处理
|
||||
if (!part.attrs) {
|
||||
part.attrs = {};
|
||||
}
|
||||
part.attrs[propName] = value;
|
||||
}
|
||||
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
console.log(
|
||||
`更新组件${componentId}的属性${propName}为:`,
|
||||
value,
|
||||
typeof value,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新组件的直接属性
|
||||
function updateComponentDirectProp(
|
||||
componentId: string,
|
||||
propName: string,
|
||||
value: any,
|
||||
) {
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (
|
||||
!canvasInstance ||
|
||||
!canvasInstance.getDiagramData ||
|
||||
!canvasInstance.updateDiagramDataDirectly
|
||||
) {
|
||||
console.error("没有可用的画布实例进行属性更新");
|
||||
return;
|
||||
}
|
||||
|
||||
const currentData = canvasInstance.getDiagramData();
|
||||
const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
|
||||
|
||||
if (part) {
|
||||
// @ts-ignore: 动态属性赋值
|
||||
part[propName] = value;
|
||||
|
||||
canvasInstance.updateDiagramDataDirectly(currentData);
|
||||
console.log(
|
||||
`更新组件${componentId}的直接属性${propName}为:`,
|
||||
value,
|
||||
typeof value,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 专门用于更新组件的显示层级 - 这个方法可以删除，直接使用updateComponentProp即可
|
||||
|
||||
// 处理连线创建事件
|
||||
function handleWireCreated(wireData: any) {
|
||||
console.log("Wire created:", wireData);
|
||||
}
|
||||
|
||||
// 处理连线删除事件
|
||||
function handleWireDeleted(wireId: string) {
|
||||
console.log("Wire deleted:", wireId);
|
||||
}
|
||||
|
||||
// 导出当前diagram数据
|
||||
function exportDiagram() {
|
||||
// 直接使用DiagramCanvas组件提供的导出功能
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (canvasInstance && canvasInstance.exportDiagram) {
|
||||
canvasInstance.exportDiagram();
|
||||
}
|
||||
}
|
||||
|
||||
// --- 消息提示 ---
|
||||
// --- 页面动画和通知 ---
|
||||
const showNotification = ref(false);
|
||||
const notificationMessage = ref("");
|
||||
const notificationType = ref<"success" | "error" | "info">("info");
|
||||
@@ -727,41 +131,68 @@ function showToast(
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
// 显示通知
|
||||
|
||||
// --- 组件属性处理辅助函数 ---
|
||||
// 直接使用 componentConfig.ts 中导入的 getPropValue 函数
|
||||
// --- 事件处理器（委托给组件管理器） ---
|
||||
|
||||
function openComponentsMenu() {
|
||||
showComponentsMenu.value = true;
|
||||
}
|
||||
|
||||
// 处理 ComponentSelector 组件添加元器件事件
|
||||
async function handleAddComponent(componentData: {
|
||||
type: string;
|
||||
name: string;
|
||||
props: Record<string, any>;
|
||||
}) {
|
||||
await componentManager.addComponent(componentData);
|
||||
}
|
||||
|
||||
// 处理模板添加事件
|
||||
async function handleAddTemplate(templateData: {
|
||||
id: string;
|
||||
name: string;
|
||||
template: any;
|
||||
}) {
|
||||
const result = await componentManager.addTemplate(templateData);
|
||||
if (result) {
|
||||
showToast(result.message, result.success ? "success" : "error");
|
||||
}
|
||||
}
|
||||
|
||||
// 处理图表数据更新事件
|
||||
function handleDiagramUpdated(data: DiagramData) {
|
||||
console.log("Diagram data updated:", data);
|
||||
}
|
||||
|
||||
// 更新组件属性的方法 - 委托给componentManager
|
||||
function updateComponentProp(
|
||||
componentId: string,
|
||||
propName: string,
|
||||
value: any,
|
||||
) {
|
||||
componentManager.updateComponentProp(componentId, propName, value);
|
||||
}
|
||||
|
||||
// 更新组件的直接属性 - 委托给componentManager
|
||||
function updateComponentDirectProp(
|
||||
componentId: string,
|
||||
propName: string,
|
||||
value: any,
|
||||
) {
|
||||
componentManager.updateComponentDirectProp(componentId, propName, value);
|
||||
}
|
||||
|
||||
// --- 生命周期钩子 ---
|
||||
onMounted(async () => {
|
||||
// 初始化画布设置
|
||||
console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);
|
||||
|
||||
// 获取初始图表数据
|
||||
const canvasInstance = diagramCanvas.value as any;
|
||||
if (canvasInstance && canvasInstance.getDiagramData) {
|
||||
diagramData.value = canvasInstance.getDiagramData();
|
||||
|
||||
// 预加载所有使用的组件模块，以确保它们在渲染时可用
|
||||
const componentTypes = new Set<string>();
|
||||
diagramData.value.parts.forEach((part) => {
|
||||
componentTypes.add(part.type);
|
||||
});
|
||||
|
||||
console.log("Preloading component modules:", Array.from(componentTypes));
|
||||
|
||||
// 并行加载所有组件模块
|
||||
await Promise.all(
|
||||
Array.from(componentTypes).map((type) => loadComponentModule(type)),
|
||||
);
|
||||
|
||||
console.log("All component modules loaded");
|
||||
// 检查是否有例程参数，如果有则自动打开文档面板
|
||||
if (route.query.tutorial) {
|
||||
showDocPanel.value = true;
|
||||
await loadDocumentContent();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener("mousemove", onResize);
|
||||
document.removeEventListener("mouseup", stopResize);
|
||||
// 设置画布引用并初始化组件管理器
|
||||
componentManager.setCanvasRef(diagramCanvas.value);
|
||||
await componentManager.initialize();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -769,26 +200,6 @@ onUnmounted(() => {
|
||||
/* 样式保持不变 */
|
||||
@import "../assets/main.css";
|
||||
|
||||
/* 分割线样式 */
|
||||
.resizer {
|
||||
width: 6px;
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
transition: background-color 0.3s;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.resizer:hover,
|
||||
.resizer:active {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
/* 调整大小时应用全局样式 */
|
||||
:global(body.resizing) {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.animate-slideRight {
|
||||
animation: slideRight 0.3s ease-out forwards;
|
||||
}
|
||||
|
||||
@@ -1,99 +1,5 @@
|
||||
<template>
|
||||
<div class="flex w-screen h-screen justify-center">
|
||||
<div class="flex flex-col w-3/5 h-screen shadow-2xl p-10">
|
||||
<div class="flex justify-center">
|
||||
<h1 class="font-bold text-3xl">Jtag 下载</h1>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="w-full">
|
||||
<div class="collapse bg-primary">
|
||||
<input type="checkbox" />
|
||||
<div class="collapse-title font-semibold text-lg text-white">
|
||||
自定义开发板参数
|
||||
</div>
|
||||
<div class="collapse-content bg-primary-content text-sm">
|
||||
<div class="form-control w-full my-3">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-700">开发板IP地址</span>
|
||||
</label>
|
||||
<label class="input w-full">
|
||||
<img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
|
||||
<input type="text" class="grow" placeholder="IP地址" v-model="boardAddress" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-control w-full my-3">
|
||||
<label class="label">
|
||||
<span class="label-text text-gray-700">开发板端口号</span>
|
||||
</label>
|
||||
<label class="input w-full">
|
||||
<img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
|
||||
<input type="text" class="grow" placeholder="端口号" v-model="boardPort" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<UploadCard :upload-event="uploadBitstream" :download-event="downloadBitstream">
|
||||
</UploadCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { JtagClient, type FileParameter } from "@/APIClient";
|
||||
import UploadCard from "@/components/UploadCard.vue";
|
||||
import { useDialogStore } from "@/stores/dialog";
|
||||
import { Common } from "@/Common";
|
||||
import { toNumber, isUndefined } from "lodash";
|
||||
import { ref } from "vue";
|
||||
|
||||
const jtagController = new JtagClient();
|
||||
const dialog = useDialogStore();
|
||||
|
||||
// Models with default values
|
||||
const boardAddress = ref("127.0.0.1"); // 默认IP地址
|
||||
const boardPort = ref("1234"); // 默认端口号
|
||||
|
||||
async function uploadBitstream(bitstream: File): Promise<boolean> {
|
||||
if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
|
||||
dialog.error("开发板地址或端口空缺");
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await jtagController.uploadBitstream(
|
||||
boardAddress.value,
|
||||
Common.toFileParameterOrNull(bitstream),
|
||||
);
|
||||
return resp;
|
||||
} catch (e) {
|
||||
dialog.error("上传错误");
|
||||
console.error(e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadBitstream(): Promise<boolean> {
|
||||
if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
|
||||
dialog.error("开发板地址或端口空缺");
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await jtagController.downloadBitstream(
|
||||
boardAddress.value,
|
||||
toNumber(boardPort.value),
|
||||
);
|
||||
return resp;
|
||||
} catch (e) {
|
||||
dialog.error("上传错误");
|
||||
console.error(e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="postcss">
|
||||
@import "../assets/main.css";
|
||||
</style>
|
||||
</script>
|
||||
@@ -1,505 +0,0 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-base-100">
|
||||
<!-- 标题栏 -->
|
||||
<div class="bg-base-200 p-4 border-b border-base-300">
|
||||
<h1 class="text-2xl font-bold text-base-content">HTTP 视频流</h1>
|
||||
<p class="text-base-content/70 mt-1">FPGA WebLab 视频流传输功能</p>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-6 space-y-6">
|
||||
<!-- 控制面板 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"/>
|
||||
</svg>
|
||||
控制面板
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<!-- 服务状态 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-primary">
|
||||
<div class="badge" :class="statusInfo.isRunning ? 'badge-success' : 'badge-error'">
|
||||
{{ statusInfo.isRunning ? '运行中' : '已停止' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-title">服务状态</div>
|
||||
<div class="stat-value text-primary">HTTP</div>
|
||||
<div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 流信息 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-secondary">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">视频规格</div>
|
||||
<div class="stat-value text-secondary">{{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}</div>
|
||||
<div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 连接数 -->
|
||||
<div class="stats shadow">
|
||||
<div class="stat">
|
||||
<div class="stat-figure text-accent">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-title">连接数</div>
|
||||
<div class="stat-value text-accent">{{ statusInfo.connectedClients }}</div>
|
||||
<div class="stat-desc">
|
||||
<div class="dropdown dropdown-hover">
|
||||
<div tabindex="0" role="button" class="text-xs underline cursor-help">查看客户端</div>
|
||||
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
|
||||
<li v-for="(client, index) in statusInfo.clientEndpoints" :key="index" class="text-xs">
|
||||
<a>{{ client }}</a>
|
||||
</li>
|
||||
<li v-if="!statusInfo.clientEndpoints || statusInfo.clientEndpoints.length === 0">
|
||||
<a class="text-xs opacity-50">无活跃连接</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="card-actions justify-end mt-4">
|
||||
<button
|
||||
class="btn btn-outline btn-primary"
|
||||
@click="refreshStatus"
|
||||
:disabled="loading"
|
||||
>
|
||||
<svg v-if="loading" class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
{{ loading ? '刷新中...' : '刷新状态' }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="testConnection"
|
||||
:disabled="testing"
|
||||
>
|
||||
<svg v-if="testing" class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
{{ testing ? '测试中...' : '测试连接' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频预览区域 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
视频预览
|
||||
</h2>
|
||||
|
||||
<div class="relative bg-black rounded-lg overflow-hidden" style="aspect-ratio: 4/3;">
|
||||
<!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
|
||||
<div v-show="isPlaying" class="w-full h-full flex items-center justify-center">
|
||||
<img
|
||||
:src="currentVideoSource"
|
||||
alt="视频流"
|
||||
class="max-w-full max-h-full object-contain"
|
||||
@error="handleVideoError"
|
||||
@load="handleVideoLoad"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 错误信息显示 -->
|
||||
<div v-if="hasVideoError" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70">
|
||||
<div class="card bg-error text-white shadow-lg w-full max-w-lg">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
视频流加载失败
|
||||
</h3>
|
||||
<p>无法连接到视频服务器，请检查以下内容：</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>视频流服务是否已启动</li>
|
||||
<li>网络连接是否正常</li>
|
||||
<li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
|
||||
</ul>
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button class="btn btn-sm btn-outline btn-primary" @click="tryReconnect">重试连接</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 占位符 -->
|
||||
<div
|
||||
v-show="!isPlaying && !hasVideoError"
|
||||
class="absolute inset-0 flex items-center justify-center text-white"
|
||||
>
|
||||
<div class="text-center">
|
||||
<svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<p class="text-lg opacity-75">{{ videoStatus }}</p>
|
||||
<p class="text-sm opacity-60 mt-2">点击"播放视频流"按钮开始查看实时视频</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频控制 -->
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
<div class="text-sm text-base-content/70">
|
||||
流地址: <code class="bg-base-300 px-2 py-1 rounded">{{ streamInfo.mjpegUrl }}</code>
|
||||
</div>
|
||||
<div class="space-x-2">
|
||||
<div class="dropdown dropdown-hover dropdown-top dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-sm btn-outline btn-accent">
|
||||
<svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
更多功能
|
||||
</div>
|
||||
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
|
||||
<li><a @click="openInNewTab(streamInfo.htmlUrl)">在新标签打开视频页面</a></li>
|
||||
<li><a @click="takeSnapshot">获取并下载快照</a></li>
|
||||
<li><a @click="copyToClipboard(streamInfo.mjpegUrl)">复制MJPEG地址</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-success btn-sm"
|
||||
@click="startStream"
|
||||
:disabled="isPlaying"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
播放视频流
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-error btn-sm"
|
||||
@click="stopStream"
|
||||
:disabled="!isPlaying"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
|
||||
</svg>
|
||||
停止视频流
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日志区域 -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-primary">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
操作日志
|
||||
</h2>
|
||||
|
||||
<div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
|
||||
<div v-for="(log, index) in logs" :key="index" class="text-sm font-mono mb-1">
|
||||
<span class="text-base-content/50">[{{ formatTime(log.time) }}]</span>
|
||||
<span :class="getLogClass(log.level)">{{ log.message }}</span>
|
||||
</div>
|
||||
<div v-if="logs.length === 0" class="text-base-content/50 text-center py-8">
|
||||
暂无日志记录
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-2">
|
||||
<button class="btn btn-outline btn-sm" @click="clearLogs">
|
||||
清空日志
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { VideoStreamClient } from '@/APIClient'
|
||||
|
||||
// 状态管理
|
||||
const loading = ref(false)
|
||||
const testing = ref(false)
|
||||
const isPlaying = ref(false)
|
||||
const hasVideoError = ref(false)
|
||||
const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频')
|
||||
|
||||
// 数据
|
||||
const statusInfo = ref({
|
||||
isRunning: false,
|
||||
serverPort: 8080,
|
||||
streamUrl: '',
|
||||
mjpegUrl: '',
|
||||
snapshotUrl: '',
|
||||
connectedClients: 0,
|
||||
clientEndpoints: [] as string[]
|
||||
})
|
||||
|
||||
const streamInfo = ref({
|
||||
frameRate: 30,
|
||||
frameWidth: 640,
|
||||
frameHeight: 480,
|
||||
format: 'MJPEG',
|
||||
htmlUrl: '',
|
||||
mjpegUrl: '',
|
||||
snapshotUrl: ''
|
||||
})
|
||||
|
||||
const currentVideoSource = ref('')
|
||||
const logs = ref<Array<{time: Date, level: string, message: string}>>([])
|
||||
|
||||
// API 客户端
|
||||
const videoClient = new VideoStreamClient()
|
||||
|
||||
// 添加日志
|
||||
const addLog = (level: string, message: string) => {
|
||||
logs.value.push({
|
||||
time: new Date(),
|
||||
level,
|
||||
message
|
||||
})
|
||||
// 限制日志数量
|
||||
if (logs.value.length > 100) {
|
||||
logs.value.shift()
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time: Date) => {
|
||||
return time.toLocaleTimeString()
|
||||
}
|
||||
|
||||
// 获取日志样式
|
||||
const getLogClass = (level: string) => {
|
||||
switch (level) {
|
||||
case 'error': return 'text-error'
|
||||
case 'warning': return 'text-warning'
|
||||
case 'success': return 'text-success'
|
||||
default: return 'text-base-content'
|
||||
}
|
||||
}
|
||||
|
||||
// 清空日志
|
||||
const clearLogs = () => {
|
||||
logs.value = []
|
||||
addLog('info', '日志已清空')
|
||||
}
|
||||
|
||||
// 复制到剪贴板
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text)
|
||||
.then(() => {
|
||||
addLog('success', '已复制到剪贴板');
|
||||
})
|
||||
.catch((err) => {
|
||||
addLog('error', `复制失败: ${err}`);
|
||||
});
|
||||
}
|
||||
|
||||
// 在新标签中打开视频页面
|
||||
const openInNewTab = (url: string) => {
|
||||
window.open(url, '_blank');
|
||||
addLog('info', `已在新标签打开视频页面: ${url}`);
|
||||
}
|
||||
|
||||
// 获取并下载快照
|
||||
const takeSnapshot = async () => {
|
||||
try {
|
||||
addLog('info', '正在获取快照...');
|
||||
|
||||
// 使用当前的快照URL
|
||||
const snapshotUrl = streamInfo.value.snapshotUrl;
|
||||
if (!snapshotUrl) {
|
||||
addLog('error', '快照URL不可用');
|
||||
return;
|
||||
}
|
||||
|
||||
// 添加时间戳防止缓存
|
||||
const urlWithTimestamp = `${snapshotUrl}?t=${new Date().getTime()}`;
|
||||
|
||||
// 创建一个临时链接下载图片
|
||||
const a = document.createElement('a');
|
||||
a.href = urlWithTimestamp;
|
||||
a.download = `fpga-snapshot-${new Date().toISOString().replace(/:/g, '-')}.jpg`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
|
||||
addLog('success', '快照已下载');
|
||||
} catch (error) {
|
||||
addLog('error', `获取快照失败: ${error}`);
|
||||
console.error('获取快照失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新状态
|
||||
const refreshStatus = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
addLog('info', '正在获取服务状态...')
|
||||
|
||||
const status = await videoClient.status()
|
||||
statusInfo.value = status
|
||||
|
||||
const info = await videoClient.streamInfo()
|
||||
streamInfo.value = info
|
||||
|
||||
addLog('success', '服务状态获取成功')
|
||||
} catch (error) {
|
||||
addLog('error', `获取状态失败: ${error}`)
|
||||
console.error('获取状态失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 测试连接
|
||||
const testConnection = async () => {
|
||||
testing.value = true
|
||||
try {
|
||||
addLog('info', '正在测试视频流连接...')
|
||||
|
||||
const result = await videoClient.testConnection()
|
||||
|
||||
if (result) {
|
||||
addLog('success', '视频流连接测试成功')
|
||||
} else {
|
||||
addLog('error', '视频流连接测试失败')
|
||||
}
|
||||
} catch (error) {
|
||||
addLog('error', `连接测试失败: ${error}`)
|
||||
console.error('连接测试失败:', error)
|
||||
} finally {
|
||||
testing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 视频错误处理
|
||||
const handleVideoError = () => {
|
||||
if (isPlaying.value) {
|
||||
hasVideoError.value = true
|
||||
addLog('error', '视频流加载失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 视频加载成功处理
|
||||
const handleVideoLoad = () => {
|
||||
hasVideoError.value = false
|
||||
addLog('success', '视频流加载成功')
|
||||
}
|
||||
|
||||
// 尝试重新连接
|
||||
const tryReconnect = () => {
|
||||
addLog('info', '尝试重新连接视频流...')
|
||||
hasVideoError.value = false
|
||||
|
||||
// 重新设置视频源，添加时间戳避免缓存问题
|
||||
currentVideoSource.value = `${streamInfo.value.mjpegUrl}?t=${new Date().getTime()}`
|
||||
}
|
||||
|
||||
// 启动视频流
|
||||
const startStream = async () => {
|
||||
try {
|
||||
addLog('info', '正在启动视频流...')
|
||||
videoStatus.value = '正在连接视频流...'
|
||||
|
||||
// 刷新状态
|
||||
await refreshStatus()
|
||||
|
||||
// 设置视频源
|
||||
currentVideoSource.value = streamInfo.value.mjpegUrl
|
||||
|
||||
// 设置播放状态
|
||||
isPlaying.value = true
|
||||
hasVideoError.value = false
|
||||
|
||||
addLog('success', '视频流已启动')
|
||||
} catch (error) {
|
||||
addLog('error', `启动视频流失败: ${error}`)
|
||||
videoStatus.value = '启动视频流失败'
|
||||
console.error('启动视频流失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 停止视频流
|
||||
const stopStream = () => {
|
||||
try {
|
||||
addLog('info', '正在停止视频流...')
|
||||
|
||||
// 清除视频源
|
||||
currentVideoSource.value = ''
|
||||
|
||||
// 更新状态
|
||||
isPlaying.value = false
|
||||
hasVideoError.value = false
|
||||
videoStatus.value = '点击"播放视频流"按钮开始查看实时视频'
|
||||
|
||||
addLog('success', '视频流已停止')
|
||||
} catch (error) {
|
||||
addLog('error', `停止视频流失败: ${error}`)
|
||||
console.error('停止视频流失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(async () => {
|
||||
addLog('info', 'HTTP 视频流页面已加载')
|
||||
await refreshStatus()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopStream()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 自定义样式 */
|
||||
.stats {
|
||||
background-color: var(--b1);
|
||||
color: var(--bc); /* 添加适配文本颜色 */
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
img {
|
||||
/* 确保视频流居中显示 */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
* {
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
</style>
|
||||
@@ -6,6 +6,8 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
import tailwindcss from '@tailwindcss/postcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import RekaResolver from 'reka-ui/resolver'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
@@ -20,6 +22,18 @@ export default defineConfig({
|
||||
}),
|
||||
vueJsx(),
|
||||
vueDevTools(),
|
||||
Components(
|
||||
{
|
||||
dts: true,
|
||||
resolvers: [
|
||||
RekaResolver()
|
||||
|
||||
// RekaResolver({
|
||||
// prefix: '' // use the prefix option to add Prefix to the imported components
|
||||
// })
|
||||
],
|
||||
}
|
||||
)
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
|
||||
Reference in New Issue
Block a user