rm：去除konva

TODO.md

@@ -1,13 +0,0 @@
-# TODO
-
-1. 后端HTTP视频流
-
-640*480, RGB565
-0x0000_0000 + 25800
-
-
-2. 信号发生器界面导入.dat文件
-3. 示波器后端交互、前端界面
-4. 逻辑分析仪后端交互、前端界面
-5. 前端重构
-6. 数据库 —— 用户登录、板卡资源分配、板卡IP地址分配

components.d.ts

@@ -0,0 +1,56 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    BaseBoard: typeof import('./src/components/equipments/BaseBoard.vue')['default']
+    Canvas: typeof import('./src/components/Canvas.vue')['default']
+    CollapsibleSection: typeof import('./src/components/CollapsibleSection.vue')['default']
+    ComponentSelector: typeof import('./src/components/LabCanvas/ComponentSelector.vue')['default']
+    DDR: typeof import('./src/components/equipments/DDR.vue')['default']
+    DDS: typeof import('./src/components/equipments/DDS.vue')['default']
+    DDSPropertyEditor: typeof import('./src/components/equipments/DDSPropertyEditor.vue')['default']
+    DiagramCanvas: typeof import('./src/components/LabCanvas/DiagramCanvas.vue')['default']
+    Dialog: typeof import('./src/components/Dialog.vue')['default']
+    ETH: typeof import('./src/components/equipments/ETH.vue')['default']
+    HDMI: typeof import('./src/components/equipments/HDMI.vue')['default']
+    LabCanvas: typeof import('./src/components/LabCanvasNew/LabCanvas.vue')['default']
+    LabCanvasNew: typeof import('./src/components/LabCanvas/LabCanvasNew.vue')['default']
+    LabComponentsDrawer: typeof import('./src/components/LabCanvasNew/LabComponentsDrawer.vue')['default']
+    LabComponentsDrawerNew: typeof import('./src/components/LabCanvas/LabComponentsDrawerNew.vue')['default']
+    LoginCard: typeof import('./src/components/LoginCard.vue')['default']
+    MarkdownRenderer: typeof import('./src/components/MarkdownRenderer.vue')['default']
+    MechanicalButton: typeof import('./src/components/equipments/MechanicalButton.vue')['default']
+    MotherBoard: typeof import('./src/components/equipments/MotherBoard.vue')['default']
+    MotherBoardCaps: typeof import('./src/components/equipments/MotherBoardCaps.vue')['default']
+    Navbar: typeof import('./src/components/Navbar.vue')['default']
+    PG2L100H_FBG676: typeof import('./src/components/equipments/PG2L100H_FBG676.vue')['default']
+    Pin: typeof import('./src/components/equipments/Pin.vue')['default']
+    PopButton: typeof import('./src/components/PopButton.vue')['default']
+    PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
+    PropertyPanel: typeof import('./src/components/PropertyPanel.vue')['default']
+    RekaSplitterGroup: typeof import('reka-ui')['SplitterGroup']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SD: typeof import('./src/components/equipments/SD.vue')['default']
+    SevenSegmentDisplay: typeof import('./src/components/equipments/SevenSegmentDisplay.vue')['default']
+    SFP: typeof import('./src/components/equipments/SFP.vue')['default']
+    Sidebar: typeof import('./src/components/Sidebar.vue')['default']
+    SMA: typeof import('./src/components/equipments/SMA.vue')['default']
+    SMT_LED: typeof import('./src/components/equipments/SMT_LED.vue')['default']
+    SplitterGroup: typeof import('reka-ui')['SplitterGroup']
+    SplitterPanel: typeof import('reka-ui')['SplitterPanel']
+    SplitterResizeHandle: typeof import('reka-ui')['SplitterResizeHandle']
+    Switch: typeof import('./src/components/equipments/Switch.vue')['default']
+    ThemeControlButton: typeof import('./src/components/ThemeControlButton.vue')['default']
+    ThemeControlToggle: typeof import('./src/components/ThemeControlToggle.vue')['default']
+    TutorialCarousel: typeof import('./src/components/TutorialCarousel.vue')['default']
+    UploadCard: typeof import('./src/components/UploadCard.vue')['default']
+    Wire: typeof import('./src/components/equipments/Wire.vue')['default']
+  }
+}

package-lock.json

@@ -12,9 +12,7 @@
         "@types/lodash": "^4.17.16",
         "@vueuse/core": "^13.5.0",
         "async-mutex": "^0.5.0",
-        "echarts": "^5.6.0",
         "highlight.js": "^11.11.1",
-        "konva": "^9.3.20",
         "lodash": "^4.17.21",
         "log-symbols": "^7.0.0",
         "lucide-vue-next": "^0.525.0",
@@ -25,8 +23,6 @@
         "ts-log": "^2.2.7",
         "ts-results-es": "^5.0.1",
         "vue": "^3.5.13",
-        "vue-echarts": "^7.0.3",
-        "vue-konva": "^3.2.1",
         "vue-router": "4",
         "yocto-queue": "^1.2.1",
         "zod": "^3.24.2"
@@ -2620,22 +2616,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/echarts": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
-      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "2.3.0",
-        "zrender": "5.6.1"
-      }
-    },
-    "node_modules/echarts/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "license": "0BSD"
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.140",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.140.tgz",
@@ -3192,26 +3172,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/konva": {
-      "version": "9.3.20",
-      "resolved": "https://registry.npmjs.org/konva/-/konva-9.3.20.tgz",
-      "integrity": "sha512-7XPD/YtgfzC8b1c7z0hhY5TF1IO/pBYNa29zMTA2PeBaqI0n5YplUeo4JRuRcljeAF8lWtW65jePZZF7064c8w==",
-      "funding": [
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/lavrton"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/konva"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/lavrton"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/lightningcss": {
       "version": "1.29.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
@@ -4678,79 +4638,6 @@
         }
       }
     },
-    "node_modules/vue-demi": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
-      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
-      "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/vue-echarts": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-7.0.3.tgz",
-      "integrity": "sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==",
-      "license": "MIT",
-      "dependencies": {
-        "vue-demi": "^0.13.11"
-      },
-      "peerDependencies": {
-        "@vue/runtime-core": "^3.0.0",
-        "echarts": "^5.5.1",
-        "vue": "^2.7.0 || ^3.1.1"
-      },
-      "peerDependenciesMeta": {
-        "@vue/runtime-core": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/vue-konva": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/vue-konva/-/vue-konva-3.2.1.tgz",
-      "integrity": "sha512-gLF+VYnlrBfwtaN3NkgzzEqlj9nyCll80VZv2DdvLUM3cisUsdcRJJuMwGTBJOTebcnn6MB22r33IFd2m+m/ig==",
-      "funding": [
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/lavrton"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/konva"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/lavrton"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.0.0",
-        "npm": ">= 3.0.0"
-      },
-      "peerDependencies": {
-        "konva": ">7",
-        "vue": "^3"
-      }
-    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
@@ -4851,21 +4738,6 @@
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
-    },
-    "node_modules/zrender": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
-      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "tslib": "2.3.0"
-      }
-    },
-    "node_modules/zrender/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "license": "0BSD"
     }
   }
 }

package.json

@@ -18,9 +18,7 @@
     "@types/lodash": "^4.17.16",
     "@vueuse/core": "^13.5.0",
     "async-mutex": "^0.5.0",
-    "echarts": "^5.6.0",
     "highlight.js": "^11.11.1",
-    "konva": "^9.3.20",
     "lodash": "^4.17.21",
     "log-symbols": "^7.0.0",
     "lucide-vue-next": "^0.525.0",
@@ -31,8 +29,6 @@
     "ts-log": "^2.2.7",
     "ts-results-es": "^5.0.1",
     "vue": "^3.5.13",
-    "vue-echarts": "^7.0.3",
-    "vue-konva": "^3.2.1",
     "vue-router": "4",
     "yocto-queue": "^1.2.1",
     "zod": "^3.24.2"

server/Program.cs

@@ -4,8 +4,6 @@ using Newtonsoft.Json;
 using NLog;
 using NLog.Web;
 
-using server.Services;
-
 // Early init of NLog to allow startup and exception logging, before host is built
 var logger = NLog.LogManager.Setup()
                       .LoadConfigurationFromAppSettings()
@@ -59,6 +57,7 @@ try
     });
 
     // Add Swagger
+    builder.Services.AddControllers();
     builder.Services.AddOpenApiDocument(options =>
     {
         options.PostProcess = document =>
@@ -83,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.
@@ -100,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")))
         {
@@ -120,7 +113,7 @@ try
         });
         app.MapFallbackToFile("index.html");
     }
-
+    // Add logs
     app.UseHttpsRedirection();
     app.UseRouting();
     app.UseCors();

server/server.csproj

@@ -25,7 +25,6 @@
     <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>
 

server/src/Common.cs

@@ -1,9 +1,5 @@
 using System.Collections;
 using DotNext;
-using SixLabors.ImageSharp;
-using SixLabors.ImageSharp.Formats.Jpeg;
-using SixLabors.ImageSharp.PixelFormats;
-using System.Text;
 
 namespace Common
 {
@@ -393,339 +389,4 @@ namespace Common
 
     }
 
-    /// <summary>
-    /// 图像处理工具
-    /// </summary>
-    public class Image
-    {
-        /// <summary>
-        /// 将 RGB565 格式转换为 RGB24 格式
-        /// RGB565: 5位红色 + 6位绿色 + 5位蓝色 = 16位 (2字节)
-        /// RGB24: 8位红色 + 8位绿色 + 8位蓝色 = 24位 (3字节)
-        /// </summary>
-        /// <param name="rgb565Data">RGB565格式的原始数据</param>
-        /// <param name="width">图像宽度</param>
-        /// <param name="height">图像高度</param>
-        /// <param name="isLittleEndian">是否为小端序（默认为true）</param>
-        /// <returns>RGB24格式的转换后数据</returns>
-        public static Result<byte[]> ConvertRGB565ToRGB24(byte[] rgb565Data, int width, int height, bool isLittleEndian = true)
-        {
-            if (rgb565Data == null)
-                return new(new ArgumentNullException(nameof(rgb565Data)));
-
-            if (width <= 0 || height <= 0)
-                return new(new ArgumentException("Width and height must be positive"));
-
-            // 计算像素数量
-            var expectedPixelCount = width * height;
-            var actualPixelCount = rgb565Data.Length / 2;
-
-            if (actualPixelCount < expectedPixelCount)
-            {
-                return new(new ArgumentException(
-                    $"RGB565 data length insufficient. Expected: {expectedPixelCount * 2} bytes, Actual: {rgb565Data.Length} bytes"));
-            }
-
-            try
-            {
-                var pixelCount = Math.Min(actualPixelCount, expectedPixelCount);
-                var rgb24Data = new byte[pixelCount * 3];
-
-                for (int i = 0; i < pixelCount; i++)
-                {
-                    // 读取 RGB565 数据
-                    var rgb565Index = i * 2;
-                    if (rgb565Index + 1 >= rgb565Data.Length) break;
-
-                    // 组合成16位值
-                    UInt16 rgb565;
-                    if (isLittleEndian)
-                    {
-                        rgb565 = (UInt16)(rgb565Data[rgb565Index] | (rgb565Data[rgb565Index + 1] << 8));
-                    }
-                    else
-                    {
-                        rgb565 = (UInt16)((rgb565Data[rgb565Index] << 8) | rgb565Data[rgb565Index + 1]);
-                    }
-
-                    // 提取各颜色分量
-                    var r5 = (rgb565 >> 11) & 0x1F;  // 高5位为红色
-                    var g6 = (rgb565 >> 5) & 0x3F;   // 中间6位为绿色
-                    var b5 = rgb565 & 0x1F;          // 低5位为蓝色
-
-                    // 转换为8位颜色值
-                    var r8 = (byte)((r5 * 255) / 31);  // 5位扩展到8位
-                    var g8 = (byte)((g6 * 255) / 63);  // 6位扩展到8位
-                    var b8 = (byte)((b5 * 255) / 31);  // 5位扩展到8位
-
-                    // 存储到 RGB24 数组
-                    var rgb24Index = i * 3;
-                    rgb24Data[rgb24Index] = r8;     // R
-                    rgb24Data[rgb24Index + 1] = g8; // G
-                    rgb24Data[rgb24Index + 2] = b8; // B
-                }
-
-                return rgb24Data;
-            }
-            catch (Exception ex)
-            {
-                return new(ex);
-            }
-        }
-
-        /// <summary>
-        /// 将 RGB24 格式转换为 RGB565 格式
-        /// RGB24: 8位红色 + 8位绿色 + 8位蓝色 = 24位 (3字节)
-        /// RGB565: 5位红色 + 6位绿色 + 5位蓝色 = 16位 (2字节)
-        /// </summary>
-        /// <param name="rgb24Data">RGB24格式的原始数据</param>
-        /// <param name="width">图像宽度</param>
-        /// <param name="height">图像高度</param>
-        /// <param name="isLittleEndian">是否为小端序（默认为true）</param>
-        /// <returns>RGB565格式的转换后数据</returns>
-        public static Result<byte[]> ConvertRGB24ToRGB565(byte[] rgb24Data, int width, int height, bool isLittleEndian = true)
-        {
-            if (rgb24Data == null)
-                return new(new ArgumentNullException(nameof(rgb24Data)));
-
-            if (width <= 0 || height <= 0)
-                return new(new ArgumentException("Width and height must be positive"));
-
-            var expectedPixelCount = width * height;
-            var actualPixelCount = rgb24Data.Length / 3;
-
-            if (actualPixelCount < expectedPixelCount)
-            {
-                return new(new ArgumentException(
-                    $"RGB24 data length insufficient. Expected: {expectedPixelCount * 3} bytes, Actual: {rgb24Data.Length} bytes"));
-            }
-
-            try
-            {
-                var pixelCount = Math.Min(actualPixelCount, expectedPixelCount);
-                var rgb565Data = new byte[pixelCount * 2];
-
-                for (int i = 0; i < pixelCount; i++)
-                {
-                    var rgb24Index = i * 3;
-                    if (rgb24Index + 2 >= rgb24Data.Length) break;
-
-                    // 读取 RGB24 数据
-                    var r8 = rgb24Data[rgb24Index];
-                    var g8 = rgb24Data[rgb24Index + 1];
-                    var b8 = rgb24Data[rgb24Index + 2];
-
-                    // 转换为5位、6位、5位
-                    var r5 = (UInt16)((r8 * 31) / 255);
-                    var g6 = (UInt16)((g8 * 63) / 255);
-                    var b5 = (UInt16)((b8 * 31) / 255);
-
-                    // 组合成16位值
-                    var rgb565 = (UInt16)((r5 << 11) | (g6 << 5) | b5);
-
-                    // 存储到 RGB565 数组
-                    var rgb565Index = i * 2;
-                    if (isLittleEndian)
-                    {
-                        rgb565Data[rgb565Index] = (byte)(rgb565 & 0xFF);
-                        rgb565Data[rgb565Index + 1] = (byte)(rgb565 >> 8);
-                    }
-                    else
-                    {
-                        rgb565Data[rgb565Index] = (byte)(rgb565 >> 8);
-                        rgb565Data[rgb565Index + 1] = (byte)(rgb565 & 0xFF);
-                    }
-                }
-
-                return rgb565Data;
-            }
-            catch (Exception ex)
-            {
-                return new(ex);
-            }
-        }
-
-        /// <summary>
-        /// 将 RGB24 数据转换为 JPEG 格式
-        /// </summary>
-        /// <param name="rgb24Data">RGB24格式的图像数据</param>
-        /// <param name="width">图像宽度</param>
-        /// <param name="height">图像高度</param>
-        /// <param name="quality">JPEG质量（1-100，默认80）</param>
-        /// <returns>JPEG格式的字节数组</returns>
-        public static Result<byte[]> ConvertRGB24ToJpeg(byte[] rgb24Data, int width, int height, int quality = 80)
-        {
-            if (rgb24Data == null)
-                return new(new ArgumentNullException(nameof(rgb24Data)));
-
-            if (width <= 0 || height <= 0)
-                return new(new ArgumentException("Width and height must be positive"));
-
-            if (quality < 1 || quality > 100)
-                return new(new ArgumentException("Quality must be between 1 and 100"));
-
-            var expectedDataLength = width * height * 3;
-            if (rgb24Data.Length < expectedDataLength)
-            {
-                return new(new ArgumentException(
-                    $"RGB24 data length insufficient. Expected: {expectedDataLength} bytes, Actual: {rgb24Data.Length} bytes"));
-            }
-
-            try
-            {
-                using var image = new SixLabors.ImageSharp.Image<Rgb24>(width, height);
-
-                // 将 RGB 数据复制到 ImageSharp 图像
-                for (int y = 0; y < height; y++)
-                {
-                    for (int x = 0; x < width; x++)
-                    {
-                        int index = (y * width + x) * 3;
-                        if (index + 2 < rgb24Data.Length)
-                        {
-                            var pixel = new Rgb24(rgb24Data[index], rgb24Data[index + 1], rgb24Data[index + 2]);
-                            image[x, y] = pixel;
-                        }
-                    }
-                }
-
-                using var stream = new MemoryStream();
-                image.SaveAsJpeg(stream, new JpegEncoder { Quality = quality });
-                return stream.ToArray();
-            }
-            catch (Exception ex)
-            {
-                return new(ex);
-            }
-        }
-
-        /// <summary>
-        /// 将 RGB565 数据直接转换为 JPEG 格式
-        /// </summary>
-        /// <param name="rgb565Data">RGB565格式的图像数据</param>
-        /// <param name="width">图像宽度</param>
-        /// <param name="height">图像高度</param>
-        /// <param name="quality">JPEG质量（1-100，默认80）</param>
-        /// <param name="isLittleEndian">是否为小端序（默认为true）</param>
-        /// <returns>JPEG格式的字节数组</returns>
-        public static Result<byte[]> ConvertRGB565ToJpeg(byte[] rgb565Data, int width, int height, int quality = 80, bool isLittleEndian = true)
-        {
-            // 先转换为RGB24
-            var rgb24Result = ConvertRGB565ToRGB24(rgb565Data, width, height, isLittleEndian);
-            if (!rgb24Result.IsSuccessful)
-            {
-                return new(rgb24Result.Error);
-            }
-
-            // 再转换为JPEG
-            return ConvertRGB24ToJpeg(rgb24Result.Value, width, height, quality);
-        }
-
-        /// <summary>
-        /// 创建 MJPEG 帧头部
-        /// </summary>
-        /// <param name="frameDataLength">帧数据长度</param>
-        /// <param name="boundary">边界字符串（默认为"--boundary"）</param>
-        /// <returns>MJPEG帧头部字节数组</returns>
-        public static byte[] CreateMjpegFrameHeader(int frameDataLength, string boundary = "--boundary")
-        {
-            var header = $"{boundary}\r\nContent-Type: image/jpeg\r\nContent-Length: {frameDataLength}\r\n\r\n";
-            return Encoding.ASCII.GetBytes(header);
-        }
-
-        /// <summary>
-        /// 创建 MJPEG 帧尾部
-        /// </summary>
-        /// <returns>MJPEG帧尾部字节数组</returns>
-        public static byte[] CreateMjpegFrameFooter()
-        {
-            return Encoding.ASCII.GetBytes("\r\n");
-        }
-
-        /// <summary>
-        /// 创建完整的 MJPEG 帧数据
-        /// </summary>
-        /// <param name="jpegData">JPEG数据</param>
-        /// <param name="boundary">边界字符串（默认为"--boundary"）</param>
-        /// <returns>完整的MJPEG帧数据</returns>
-        public static Result<byte[]> CreateMjpegFrame(byte[] jpegData, string boundary = "--boundary")
-        {
-            if (jpegData == null)
-                return new(new ArgumentNullException(nameof(jpegData)));
-
-            try
-            {
-                var header = CreateMjpegFrameHeader(jpegData.Length, boundary);
-                var footer = CreateMjpegFrameFooter();
-
-                var totalLength = header.Length + jpegData.Length + footer.Length;
-                var frameData = new byte[totalLength];
-
-                var offset = 0;
-                Array.Copy(header, 0, frameData, offset, header.Length);
-                offset += header.Length;
-
-                Array.Copy(jpegData, 0, frameData, offset, jpegData.Length);
-                offset += jpegData.Length;
-
-                Array.Copy(footer, 0, frameData, offset, footer.Length);
-
-                return frameData;
-            }
-            catch (Exception ex)
-            {
-                return new(ex);
-            }
-        }
-
-        /// <summary>
-        /// 验证图像数据长度是否正确
-        /// </summary>
-        /// <param name="data">图像数据</param>
-        /// <param name="width">图像宽度</param>
-        /// <param name="height">图像高度</param>
-        /// <param name="bytesPerPixel">每像素字节数</param>
-        /// <returns>验证结果</returns>
-        public static bool ValidateImageDataLength(byte[] data, int width, int height, int bytesPerPixel)
-        {
-            if (data == null || width <= 0 || height <= 0 || bytesPerPixel <= 0)
-                return false;
-
-            var expectedLength = width * height * bytesPerPixel;
-            return data.Length >= expectedLength;
-        }
-
-        /// <summary>
-        /// 获取图像格式信息
-        /// </summary>
-        /// <param name="format">图像格式枚举</param>
-        /// <returns>格式信息</returns>
-        public static ImageFormatInfo GetImageFormatInfo(ImageFormat format)
-        {
-            return format switch
-            {
-                ImageFormat.RGB565 => new ImageFormatInfo("RGB565", 2, "16-bit RGB format (5R+6G+5B)"),
-                ImageFormat.RGB24 => new ImageFormatInfo("RGB24", 3, "24-bit RGB format (8R+8G+8B)"),
-                ImageFormat.RGBA32 => new ImageFormatInfo("RGBA32", 4, "32-bit RGBA format (8R+8G+8B+8A)"),
-                ImageFormat.Grayscale8 => new ImageFormatInfo("Grayscale8", 1, "8-bit grayscale format"),
-                _ => new ImageFormatInfo("Unknown", 0, "Unknown image format")
-            };
-        }
-    }
-
-    /// <summary>
-    /// 图像格式枚举
-    /// </summary>
-    public enum ImageFormat
-    {
-        RGB565,
-        RGB24,
-        RGBA32,
-        Grayscale8
-    }
-
-    /// <summary>
-    /// 图像格式信息
-    /// </summary>
-    public record ImageFormatInfo(string Name, int BytesPerPixel, string Description);
 }

server/src/Controllers/JtagController.cs

@@ -34,7 +34,7 @@ public class JtagController : ControllerBase
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> GetDeviceIDCode(string address, int port)
     {
-        var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
+        var jtagCtrl = new JtagClient.Jtag(address, port);
         var ret = await jtagCtrl.ReadIDCode();
 
         if (ret.IsSuccessful)
@@ -59,13 +59,13 @@ public class JtagController : ControllerBase
     [ProducesResponseType(StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> ReadStatusReg(string address, int port)
     {
-        var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
+        var jtagCtrl = new JtagClient.Jtag(address, port);
         var ret = await jtagCtrl.ReadStatusReg();
 
         if (ret.IsSuccessful)
         {
             var binaryValue = Common.String.Reverse(Convert.ToString(ret.Value, 2).PadLeft(32, '0'));
-            var decodeValue = new Peripherals.JtagClient.JtagStatusReg(ret.Value);
+            var decodeValue = new JtagClient.JtagStatusReg(ret.Value);
             logger.Info($"Read device {address} Status Register: \n\t 0b{binaryValue} \n\t {decodeValue}");
             return TypedResults.Ok(new
             {
@@ -174,7 +174,7 @@ public class JtagController : ControllerBase
                     var fileBytes = memoryStream.ToArray();
 
                     // 下载比特流
-                    var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
+                    var jtagCtrl = new JtagClient.Jtag(address, port);
                     var ret = await jtagCtrl.DownloadBitstream(fileBytes);
 
                     if (ret.IsSuccessful)
@@ -215,7 +215,7 @@ public class JtagController : ControllerBase
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> BoundaryScanAllPorts(string address, int port)
     {
-        var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
+        var jtagCtrl = new JtagClient.Jtag(address, port);
         var ret = await jtagCtrl.BoundaryScan();
         if (!ret.IsSuccessful)
         {
@@ -239,7 +239,7 @@ public class JtagController : ControllerBase
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> BoundaryScanLogicalPorts(string address, int port)
     {
-        var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
+        var jtagCtrl = new JtagClient.Jtag(address, port);
         var ret = await jtagCtrl.BoundaryScanLogicalPorts();
         if (!ret.IsSuccessful)
         {
@@ -264,7 +264,7 @@ public class JtagController : ControllerBase
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> SetSpeed(string address, int port, UInt32 speed)
     {
-        var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
+        var jtagCtrl = new JtagClient.Jtag(address, port);
         var ret = await jtagCtrl.SetSpeed(speed);
         if (!ret.IsSuccessful)
         {

server/src/Controllers/RemoteUpdateController.cs

@@ -150,7 +150,7 @@ public class RemoteUpdateController : ControllerBase
             if (!fileBytes.IsSuccessful) return TypedResults.InternalServerError(fileBytes.Error);
 
             // 下载比特流
-            var remoteUpdater = new Peripherals.RemoteUpdateClient.RemoteUpdater(address, port);
+            var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
             var ret = await remoteUpdater.UpdateBitstream(bitstreamNum, fileBytes.Value);
 
             if (ret.IsSuccessful)
@@ -210,7 +210,7 @@ public class RemoteUpdateController : ControllerBase
             }
 
             // 下载比特流
-            var remoteUpdater = new Peripherals.RemoteUpdateClient.RemoteUpdater(address, port);
+            var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
             {
                 var ret = await remoteUpdater.UploadBitstreams(bitstreams[0], bitstreams[1], bitstreams[2], bitstreams[3]);
                 if (!ret.IsSuccessful) return TypedResults.InternalServerError(ret.Error);
@@ -246,7 +246,7 @@ public class RemoteUpdateController : ControllerBase
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> HotResetBitstream(string address, int port, int bitstreamNum)
     {
-        var remoteUpdater = new Peripherals.RemoteUpdateClient.RemoteUpdater(address, port);
+        var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
         var ret = await remoteUpdater.HotResetBitstream(bitstreamNum);
 
         if (ret.IsSuccessful)
@@ -274,7 +274,7 @@ public class RemoteUpdateController : ControllerBase
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> GetFirmwareVersion(string address, int port)
     {
-        var remoteUpdater = new Peripherals.RemoteUpdateClient.RemoteUpdater(address, port);
+        var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
         var ret = await remoteUpdater.GetVersion();
 
         if (ret.IsSuccessful)

server/src/Controllers/UDPController.cs

@@ -106,15 +106,15 @@ public class UDPController : ControllerBase
     }
 
     /// <summary>
-    /// 获取指定IP地址接收的数据列表
+    /// 获取指定IP地址接受的数据列表
     /// </summary>
     /// <param name="address">IP地址</param>
     [HttpGet("GetRecvDataArray")]
     [ProducesResponseType(typeof(List<UDPData>), StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status500InternalServerError)]
-    public async ValueTask<IResult> GetRecvDataArray(string address, 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)
         {

server/src/Controllers/VideoStreamController.cs

@@ -1,250 +0,0 @@
-using Microsoft.AspNetCore.Cors;
-using Microsoft.AspNetCore.Mvc;
-using System.ComponentModel.DataAnnotations;
-
-/// <summary>
-/// 视频流控制器，支持动态配置摄像头连接
-/// </summary>
-[ApiController]
-[Route("api/[controller]")]
-public class VideoStreamController : ControllerBase
-{
-    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
-    private readonly server.Services.HttpVideoStreamService _videoStreamService;
-
-    /// <summary>
-    /// 摄像头配置请求模型
-    /// </summary>
-    public class CameraConfigRequest
-    {
-        [Required]
-        [RegularExpression(@"^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$", ErrorMessage = "请输入有效的IP地址")]
-        public string Address { get; set; } = "";
-
-        [Required]
-        [Range(1, 65535, ErrorMessage = "端口必须在1-65535范围内")]
-        public int Port { get; set; }
-    }
-
-    /// <summary>
-    /// 初始化HTTP视频流控制器
-    /// </summary>
-    /// <param name="videoStreamService">HTTP视频流服务</param>
-    public VideoStreamController(server.Services.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(),
-                cameraStatus = _videoStreamService.GetCameraStatus()
-            });
-        }
-        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",
-                cameraAddress = _videoStreamService.CameraAddress,
-                cameraPort = _videoStreamService.CameraPort
-            });
-        }
-        catch (Exception ex)
-        {
-            logger.Error(ex, "获取 HTTP 视频流信息失败"); 
-            return TypedResults.InternalServerError(ex.Message);
-        }
-    }
-
-    /// <summary>
-    /// 配置摄像头连接参数
-    /// </summary>
-    /// <param name="config">摄像头配置</param>
-    /// <returns>配置结果</returns>
-    [HttpPost("ConfigureCamera")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(object), StatusCodes.Status400BadRequest)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async Task<IResult> ConfigureCamera([FromBody] CameraConfigRequest config)
-    {
-        try
-        {
-            logger.Info("配置摄像头连接: {Address}:{Port}", config.Address, config.Port);
-
-            var success = await _videoStreamService.ConfigureCameraAsync(config.Address, config.Port);
-            
-            if (success)
-            {
-                return TypedResults.Ok(new
-                {
-                    success = true,
-                    message = "摄像头配置成功",
-                    cameraAddress = config.Address,
-                    cameraPort = config.Port
-                });
-            }
-            else
-            {
-                return TypedResults.BadRequest(new
-                {
-                    success = false,
-                    message = "摄像头配置失败",
-                    cameraAddress = config.Address,
-                    cameraPort = config.Port
-                });
-            }
-        }
-        catch (Exception ex)
-        {
-            logger.Error(ex, "配置摄像头连接失败");
-            return TypedResults.InternalServerError(ex.Message);
-        }
-    }
-
-    /// <summary>
-    /// 获取当前摄像头配置
-    /// </summary>
-    /// <returns>摄像头配置信息</returns>
-    [HttpGet("CameraConfig")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public IResult GetCameraConfig()
-    {
-        try
-        {
-            logger.Info("获取摄像头配置");
-            var cameraStatus = _videoStreamService.GetCameraStatus();
-            
-            return TypedResults.Ok(new
-            {
-                address = _videoStreamService.CameraAddress,
-                port = _videoStreamService.CameraPort,
-                isConfigured = cameraStatus.GetType().GetProperty("IsConfigured")?.GetValue(cameraStatus),
-                connectionString = $"{_videoStreamService.CameraAddress}:{_videoStreamService.CameraPort}"
-            });
-        }
-        catch (Exception ex)
-        {
-            logger.Error(ex, "获取摄像头配置失败");
-            return TypedResults.InternalServerError(ex.Message);
-        }
-    }
-
-    /// <summary>
-    /// 测试摄像头连接
-    /// </summary>
-    /// <returns>连接测试结果</returns>
-    [HttpPost("TestCameraConnection")]
-    [EnableCors("Users")]
-    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
-    public async Task<IResult> TestCameraConnection()
-    {
-        try
-        {
-            logger.Info("测试摄像头连接");
-            
-            var (isSuccess, message) = await _videoStreamService.TestCameraConnectionAsync();
-            
-            return TypedResults.Ok(new
-            {
-                success = isSuccess,
-                message = message,
-                cameraAddress = _videoStreamService.CameraAddress,
-                cameraPort = _videoStreamService.CameraPort,
-                timestamp = DateTime.Now
-            });
-        }
-        catch (Exception ex)
-        {
-            logger.Error(ex, "测试摄像头连接失败");
-            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);
-        }
-    }
-}

server/src/JtagClient.cs

@@ -1,10 +1,11 @@
 using System.Collections;
 using System.Net;
+using BsdlParser;
 using DotNext;
 using Newtonsoft.Json;
 using WebProtocol;
 
-namespace Peripherals.JtagClient;
+namespace JtagClient;
 
 /// <summary>
 /// Global Constant Jtag Address
@@ -421,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"));
 
@@ -440,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"));
         }
@@ -449,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;
         }
@@ -459,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"));
         }
@@ -468,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;
         }
@@ -626,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;
 
@@ -664,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;
 
@@ -701,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;
 
@@ -785,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;
 
@@ -852,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,

server/src/Peripherals/CameraClient.cs

@@ -1,66 +0,0 @@
-using System.Net;
-using DotNext;
-
-namespace Peripherals.CameraClient;
-
-static class CameraAddr
-{
-    public const UInt32 Base = 0x0000_0000;
-    public const UInt32 FrameLength = 0x25800;
-}
-
-class Camera
-{
-    private static readonly NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
-
-    readonly int timeout = 2000;
-
-    readonly int port;
-    readonly string address;
-    private IPEndPoint ep;
-
-    /// <summary>
-    /// 初始化摄像头客户端
-    /// </summary>
-    /// <param name="address">摄像头设备IP地址</param>
-    /// <param name="port">摄像头设备端口</param>
-    /// <param name="timeout">超时时间（毫秒）</param>
-    public Camera(string address, int port, int timeout = 2000)
-    {
-        if (timeout < 0)
-            throw new ArgumentException("Timeout couldn't be negative", nameof(timeout));
-        this.address = address;
-        this.port = port;
-        this.ep = new IPEndPoint(IPAddress.Parse(address), port);
-        this.timeout = timeout;
-    }
-
-    /// <summary>
-    /// 读取一帧图像数据
-    /// </summary>
-    /// <returns>包含图像数据的字节数组</returns>
-    public async ValueTask<Result<byte[]>> ReadFrame()
-    {
-        // 清除UDP服务器接收缓冲区
-        await MsgBus.UDPServer.ClearUDPData(this.address, 2);
-
-        logger.Trace($"Clear up udp server {this.address} receive data");
-
-        // 使用UDPClientPool读取图像帧数据
-        var result = await UDPClientPool.ReadAddrBytes(
-            this.ep,
-            2, // taskID
-            CameraAddr.Base,
-            (int)CameraAddr.FrameLength,
-            this.timeout);
-
-        if (!result.IsSuccessful)
-        {
-            logger.Error($"Failed to read frame from camera {this.address}:{this.port}, error: {result.Error}");
-            return new(result.Error);
-        }
-
-        logger.Debug($"Successfully read frame from camera {this.address}:{this.port}, data length: {result.Value.Length} bytes");
-        return result.Value;
-    }
-}

server/src/Peripherals/DDSClient.cs

@@ -108,11 +108,11 @@ public class DDS
         if (waveNum < 0 || waveNum > 3) return new(new ArgumentException(
             $"Wave number should be 0 ~ 3 instead of {waveNum}", nameof(waveNum)));
 
-        await MsgBus.UDPServer.ClearUDPData(this.address, 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;

server/src/Peripherals/MatrixKeyClient.cs

@@ -44,10 +44,10 @@ public class MatrixKey
     public async ValueTask<Result<bool>> EnableControl()
     {
         if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address, 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;
     }

server/src/Peripherals/PowerClient.cs

@@ -45,10 +45,10 @@ public class Power
     public async ValueTask<Result<bool>> SetPowerOnOff(bool enable)
     {
         if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address, 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;
     }

server/src/RemoteUpdateClient.cs

@@ -1,7 +1,6 @@
 using System.Net;
 using DotNext;
-
+namespace RemoteUpdateClient;
-namespace Peripherals.RemoteUpdateClient;
 
 static class RemoteUpdaterAddr
 {
@@ -143,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"));
@@ -151,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(
@@ -159,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;
@@ -315,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);
@@ -331,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(
@@ -339,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;
@@ -369,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;
@@ -382,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");
 
         {
@@ -412,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++)
@@ -463,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");
 
         {
@@ -539,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;

server/src/Services/HttpVideoStreamService.cs

@@ -1,745 +0,0 @@
-using System.Net;
-using System.Text;
-using Peripherals.CameraClient; // 添加摄像头客户端引用
-
-namespace server.Services;
-
-/// <summary>
-/// HTTP 视频流服务，用于从 FPGA 获取图像数据并推送到前端网页
-/// 支持动态配置摄像头地址和端口
-/// </summary>
-public class HttpVideoStreamService : BackgroundService
-{
-    private static readonly NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
-    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;
-
-    // 摄像头客户端
-    private Camera? _camera;
-    private string _cameraAddress = "192.168.1.100"; // 默认FPGA地址
-    private int _cameraPort = 8888; // 默认端口
-    private readonly object _cameraLock = new object();
-
-    // 模拟 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 { 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>
-    /// 获取当前摄像头地址
-    /// </summary>
-    public string CameraAddress { get { return _cameraAddress; } }
-
-    /// <summary>
-    /// 获取当前摄像头端口
-    /// </summary>
-    public int CameraPort { get { return _cameraPort; } }
-
-    /// <summary>
-    /// 初始化 HttpVideoStreamService
-    /// </summary>
-    public HttpVideoStreamService()
-    {
-        // 延迟初始化摄像头客户端，直到配置完成
-        logger.Info("HttpVideoStreamService 初始化完成，默认摄像头地址: {Address}:{Port}", _cameraAddress, _cameraPort);
-    }
-
-    /// <summary>
-    /// 配置摄像头连接参数
-    /// </summary>
-    /// <param name="address">摄像头IP地址</param>
-    /// <param name="port">摄像头端口</param>
-    /// <returns>配置是否成功</returns>
-    public async Task<bool> ConfigureCameraAsync(string address, int port)
-    {
-        if (string.IsNullOrWhiteSpace(address))
-        {
-            logger.Error("摄像头地址不能为空");
-            return false;
-        }
-
-        if (port <= 0 || port > 65535)
-        {
-            logger.Error("摄像头端口必须在1-65535范围内");
-            return false;
-        }
-
-        try
-        {
-            await Task.Run(() =>
-            {
-                lock (_cameraLock)
-                {
-                    // 如果地址和端口没有变化，直接返回成功
-                    if (_cameraAddress == address && _cameraPort == port && _camera != null)
-                    {
-                        logger.Info("摄像头配置未变化，保持当前连接");
-                        return;
-                    }
-
-                    // 关闭现有连接
-                    if (_camera != null)
-                    {
-                        logger.Info("关闭现有摄像头连接");
-                        // Camera doesn't have Dispose method, set to null
-                        _camera = null;
-                    }
-
-                    // 更新配置
-                    _cameraAddress = address;
-                    _cameraPort = port;
-
-                    // 创建新的摄像头客户端
-                    _camera = new Camera(_cameraAddress, _cameraPort);
-
-                    logger.Info("摄像头配置已更新: {Address}:{Port}", _cameraAddress, _cameraPort);
-                }
-            });
-            return true;
-        }
-        catch (Exception ex)
-        {
-            logger.Error(ex, "配置摄像头连接时发生错误");
-            return false;
-        }
-    }
-
-    /// <summary>
-    /// 测试摄像头连接
-    /// </summary>
-    /// <returns>连接测试结果</returns>
-    public async Task<(bool IsSuccess, string Message)> TestCameraConnectionAsync()
-    {
-        try
-        {
-            Camera? testCamera = null;
-
-            lock (_cameraLock)
-            {
-                if (_camera == null)
-                {
-                    return (false, "摄像头未配置");
-                }
-                testCamera = _camera;
-            }
-
-            // 尝试读取一帧数据来测试连接
-            var result = await testCamera.ReadFrame();
-
-            if (result.IsSuccessful)
-            {
-                logger.Info("摄像头连接测试成功: {Address}:{Port}", _cameraAddress, _cameraPort);
-                return (true, "连接成功");
-            }
-            else
-            {
-                logger.Warn("摄像头连接测试失败: {Error}", result.Error);
-                return (false, result.Error.ToString());
-            }
-        }
-        catch (Exception ex)
-        {
-            logger.Error(ex, "摄像头连接测试出错");
-            return (false, ex.Message);
-        }
-    }
-
-    /// <summary>
-    /// 获取摄像头连接状态
-    /// </summary>
-    /// <returns>连接状态信息</returns>
-    public object GetCameraStatus()
-    {
-        lock (_cameraLock)
-        {
-            return new
-            {
-                Address = _cameraAddress,
-                Port = _cameraPort,
-                IsConfigured = _camera != null,
-                ConnectionString = $"{_cameraAddress}:{_cameraPort}"
-            };
-        }
-    }
-
-    /// <summary>
-    /// 执行 HTTP 视频流服务
-    /// </summary>
-    /// <param name="stoppingToken">取消令牌</param>
-    /// <returns>任务</returns>
-    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
-    {
-        try
-        {
-            logger.Info("启动 HTTP 视频流服务，端口: {Port}", _serverPort);
-
-            // 初始化默认摄像头连接
-            await ConfigureCameraAsync(_cameraAddress, _cameraPort);
-
-            // 创建 HTTP 监听器
-            _httpListener = new HttpListener();
-            _httpListener.Prefixes.Add($"http://localhost:{_serverPort}/");
-            _httpListener.Start();
-
-            logger.Info("HTTP 视频流服务已启动，监听端口: {Port}", _serverPort);
-
-            // 开始接受客户端连接
-            _ = Task.Run(() => AcceptClientsAsync(stoppingToken), stoppingToken);
-
-            // 开始生成视频帧
-            await GenerateVideoFrames(stoppingToken);
-        }
-        catch (HttpListenerException ex)
-        {
-            logger.Error(ex, "HTTP 视频流服务启动失败，请确保您有管理员权限或使用netsh配置URL前缀权限");
-        }
-        catch (Exception ex)
-        {
-            logger.Error(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.Info("新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.Error(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.Debug("已启动MJPEG流，客户端: {RemoteEndPoint}", response.OutputStream?.GetHashCode() ?? 0);
-
-            // 保持连接直到取消或出错
-            try
-            {
-                while (!cancellationToken.IsCancellationRequested)
-                {
-                    await Task.Delay(100, cancellationToken); // 简单的保活循环
-                }
-            }
-            catch (TaskCanceledException)
-            {
-                // 预期的取消
-            }
-
-            logger.Debug("MJPEG流已结束，客户端: {ClientId}", response.OutputStream?.GetHashCode() ?? 0);
-        }
-        catch (Exception ex)
-        {
-            logger.Error(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();
-
-            // 直接使用Common.Image.ConvertRGB24ToJpeg进行转换
-            var jpegResult = Common.Image.ConvertRGB24ToJpeg(imageData, _frameWidth, _frameHeight, 80);
-            if (!jpegResult.IsSuccessful)
-            {
-                logger.Error("RGB24转JPEG失败: {Error}", jpegResult.Error);
-                response.StatusCode = 500;
-                response.Close();
-                return;
-            }
-
-            var jpegData = jpegResult.Value;
-
-            // 设置响应头
-            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.Debug("已发送快照图像，大小：{Size} 字节", jpegData.Length);
-        }
-        catch (Exception ex)
-        {
-            logger.Error(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();
-
-                // 向所有连接的客户端发送帧
-                await BroadcastFrameAsync(imageData, cancellationToken);
-
-                _frameCounter++;
-
-                // 等待下一帧
-                await Task.Delay(frameInterval, cancellationToken);
-            }
-            catch (OperationCanceledException)
-            {
-                break;
-            }
-            catch (Exception ex)
-            {
-                logger.Error(ex, "生成视频帧时发生错误");
-                await Task.Delay(1000, cancellationToken); // 错误恢复延迟
-            }
-        }
-    }
-
-    /// <summary>
-    /// 从 FPGA 获取图像数据
-    /// 实际从摄像头读取 RGB565 格式数据并转换为 RGB24
-    /// </summary>
-    private async Task<byte[]> GetFPGAImageData()
-    {
-        Camera? currentCamera = null;
-
-        lock (_cameraLock)
-        {
-            currentCamera = _camera;
-        }
-
-        if (currentCamera == null)
-        {
-            logger.Error("摄像头客户端未初始化");
-            return new byte[0];
-        }
-
-        try
-        {
-            // 从摄像头读取帧数据
-            var result = await currentCamera.ReadFrame();
-
-            if (!result.IsSuccessful)
-            {
-                logger.Error("读取摄像头帧数据失败: {Error}", result.Error);
-                return new byte[0];
-            }
-
-            var rgb565Data = result.Value;
-
-            // 验证数据长度是否正确
-            if (!Common.Image.ValidateImageDataLength(rgb565Data, _frameWidth, _frameHeight, 2))
-            {
-                logger.Warn("摄像头数据长度不匹配，期望: {Expected}, 实际: {Actual}",
-                    _frameWidth * _frameHeight * 2, rgb565Data.Length);
-            }
-
-            // 将 RGB565 转换为 RGB24
-            var rgb24Result = Common.Image.ConvertRGB565ToRGB24(rgb565Data, _frameWidth, _frameHeight);
-            if (!rgb24Result.IsSuccessful)
-            {
-                logger.Error("RGB565转RGB24失败: {Error}", rgb24Result.Error);
-                return new byte[0];
-            }
-
-            if (_frameCounter % 30 == 0) // 每秒更新一次日志
-            {
-                logger.Debug("成功获取第 {FrameNumber} 帧，RGB565大小: {RGB565Size} 字节, RGB24大小: {RGB24Size} 字节",
-                    _frameCounter, rgb565Data.Length, rgb24Result.Value.Length);
-            }
-
-            return rgb24Result.Value;
-        }
-        catch (Exception ex)
-        {
-            logger.Error(ex, "获取FPGA图像数据时发生错误");
-            return new byte[0];
-        }
-    }
-
-    /// <summary>
-    /// 向所有连接的客户端广播帧数据
-    /// </summary>
-    private async Task BroadcastFrameAsync(byte[] frameData, CancellationToken cancellationToken)
-    {
-        if (frameData == null || frameData.Length == 0)
-        {
-            logger.Warn("尝试广播空帧数据");
-            return;
-        }
-
-        // 直接使用Common.Image.ConvertRGB24ToJpeg进行转换
-        var jpegResult = Common.Image.ConvertRGB24ToJpeg(frameData, _frameWidth, _frameHeight, 80);
-        if (!jpegResult.IsSuccessful)
-        {
-            logger.Error("RGB24转JPEG失败: {Error}", jpegResult.Error);
-            return;
-        }
-
-        var jpegData = jpegResult.Value;
-
-        // 使用Common中的方法准备MJPEG帧数据
-        var mjpegFrameHeader = Common.Image.CreateMjpegFrameHeader(jpegData.Length);
-        var mjpegFrameFooter = Common.Image.CreateMjpegFrameFooter();
-
-        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(mjpegFrameHeader, 0, mjpegFrameHeader.Length, cancellationToken);
-
-                // 发送JPEG数据
-                await client.OutputStream.WriteAsync(jpegData, 0, jpegData.Length, cancellationToken);
-
-                // 发送结尾换行符
-                await client.OutputStream.WriteAsync(mjpegFrameFooter, 0, mjpegFrameFooter.Length, cancellationToken);
-
-                // 确保数据立即发送
-                await client.OutputStream.FlushAsync(cancellationToken);
-
-                if (_frameCounter % 30 == 0) // 每秒记录一次日志
-                {
-                    logger.Debug("已向客户端 {ClientId} 发送第 {FrameNumber} 帧，大小：{Size} 字节",
-                        client.OutputStream.GetHashCode(), _frameCounter, jpegData.Length);
-                }
-            }
-            catch (Exception ex)
-            {
-                logger.Debug("发送帧数据时出错: {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.Info("已移除 {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()
-    {
-        var cameraStatus = GetCameraStatus();
-
-        return new
-        {
-            IsRunning = _httpListener?.IsListening ?? false,
-            ServerPort = _serverPort,
-            FrameRate = _frameRate,
-            Resolution = $"{_frameWidth}x{_frameHeight}",
-            ConnectedClients = ConnectedClientsCount,
-            ClientEndpoints = GetConnectedClientEndpoints(),
-            CameraStatus = cameraStatus
-        };
-    }
-
-    /// <summary>
-    /// 停止 HTTP 视频流服务
-    /// </summary>
-    public override async Task StopAsync(CancellationToken cancellationToken)
-    {
-        logger.Info("正在停止 HTTP 视频流服务...");
-
-        if (_httpListener != null && _httpListener.IsListening)
-        {
-            _httpListener.Stop();
-            _httpListener.Close();
-        }
-
-        // 关闭所有客户端连接
-        lock (_clientsLock)
-        {
-            foreach (var client in _activeClients)
-            {
-                try { client.Close(); }
-                catch { /* 忽略关闭错误 */ }
-            }
-            _activeClients.Clear();
-        }
-
-        // 关闭摄像头连接
-        lock (_cameraLock)
-        {
-            _camera = null;
-        }
-
-        await base.StopAsync(cancellationToken);
-
-        logger.Info("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();
-        }
-
-        lock (_cameraLock)
-        {
-            _camera = null;
-        }
-
-        base.Dispose();
-    }
-}

server/src/TutorialService.ts

@@ -0,0 +1,30 @@
+// 此接口提供获取例程目录服务
+// GET /api/tutorials 返回所有可用的例程目录
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { Request, Response } from 'express';
+
+// 获取当前文件的目录
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const publicDir = path.resolve(__dirname, '../public');
+
+export function getTutorials(req: Request, res: Response) {
+  try {
+    const docDir = path.join(publicDir, 'doc');
+    
+    // 读取doc目录下的所有文件夹
+    const entries = fs.readdirSync(docDir, { withFileTypes: true });
+    const dirs = entries
+      .filter(dirent => dirent.isDirectory())
+      .map(dirent => dirent.name);
+    
+    // 返回文件夹列表
+    res.json({ tutorials: dirs });
+  } catch (error) {
+    console.error('获取例程目录失败:', error);
+    res.status(500).json({ error: '无法读取例程目录' });
+  }
+}

server/src/UdpClientPool.cs

@@ -177,22 +177,21 @@ public class UDPClientPool
     }
 
     /// <summary>
-    /// 读取设备地址数据
+    /// [TODO:description]
     /// </summary>
-    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="devAddr">设备地址</param>
+    /// <param name="timeout">[TODO:parameter]</param>
-    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>[TODO:return]</returns>
-    /// <returns>读取结果，包含接收到的数据包</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"));
@@ -218,21 +217,20 @@ public class UDPClientPool
     }
 
     /// <summary>
-    /// 读取设备地址数据并校验结果
+    /// [TODO:description]
     /// </summary>
-    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="devAddr">设备地址</param>
+    /// <param name="result">[TODO:parameter]</param>
-    /// <param name="result">期望的结果值</param>
+    /// <param name="resultMask">[TODO:parameter]</param>
-    /// <param name="resultMask">结果掩码，用于位校验</param>
+    /// <param name="timeout">[TODO:parameter]</param>
-    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>[TODO:return]</returns>
-    /// <returns>校验结果，true表示数据匹配期望值</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"));
@@ -257,17 +255,16 @@ public class UDPClientPool
     }
 
     /// <summary>
-    /// 读取设备地址数据并等待直到结果匹配或超时
+    /// [TODO:description]
     /// </summary>
-    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="devAddr">设备地址</param>
+    /// <param name="result">[TODO:parameter]</param>
-    /// <param name="result">期望的结果值</param>
+    /// <param name="resultMask">[TODO:parameter]</param>
-    /// <param name="resultMask">结果掩码，用于位校验</param>
+    /// <param name="timeout">[TODO:parameter]</param>
-    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>[TODO:return]</returns>
-    /// <returns>校验结果，true表示在超时前数据匹配期望值</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"));
@@ -305,99 +302,24 @@ public class UDPClientPool
         return false;
     }
 
-    /// <summary>
-    /// 从设备地址读取字节数组数据（支持大数据量分段传输）
-    /// </summary>
-    /// <param name="endPoint">IP端点（IP地址与端口）</param>
-    /// <param name="taskID">任务ID</param>
-    /// <param name="devAddr">设备地址</param>
-    /// <param name="dataLength">要读取的数据长度（字节）</param>
-    /// <param name="timeout">超时时间（毫秒）</param>
-    /// <returns>读取结果，包含接收到的字节数组</returns>
-    public static async ValueTask<Result<byte[]>> ReadAddrBytes(
-        IPEndPoint endPoint, int taskID, UInt32 devAddr, int dataLength, int timeout = 1000)
-    {
-        var ret = false;
-        var opts = new SendAddrPackOptions();
-        var resultData = new List<byte>();
-
-        opts.BurstType = BurstType.FixedBurst;
-        opts.CommandID = Convert.ToByte(taskID);
-        opts.IsWrite = false;
-
-        // Check Msg Bus
-        if (!MsgBus.IsRunning)
-            return new(new Exception("Message bus not working!"));
-
-        // Calculate read times and segments
-        var max4BytesPerRead = 0x80; // 1024 bytes per read
-        var rest4Bytes = dataLength % max4BytesPerRead;
-        var readTimes = (rest4Bytes != 0) ?
-            (dataLength / max4BytesPerRead + 1) :
-            (dataLength / max4BytesPerRead);
-
-        for (var i = 0; i < readTimes; i++)
-        {
-            // Calculate current segment size
-            var isLastSegment = i == readTimes - 1;
-            var currentSegmentSize = (isLastSegment && rest4Bytes != 0) ? rest4Bytes : max4BytesPerRead;
-
-            // Set burst length (in 32-bit words)
-            opts.BurstLength = (byte)(currentSegmentSize - 1);
-
-            // Update address for current segment
-            opts.Address = devAddr + (uint)(i * max4BytesPerRead);
-
-            // Send read address package
-            ret = await UDPClientPool.SendAddrPackAsync(endPoint, new SendAddrPackage(opts));
-            if (!ret) return new(new Exception($"Send address package failed at segment {i}!"));
-
-            // Wait for data response
-            var retPack = await MsgBus.UDPServer.WaitForDataAsync(
-                endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
-            if (!retPack.IsSuccessful) return new(retPack.Error);
-
-            if (!retPack.Value.IsSuccessful)
-                return new(new Exception($"Read address package failed at segment {i}"));
-
-            var retPackOpts = retPack.Value.Options;
-            if (retPackOpts.Data is null)
-                return new(new Exception($"Data is null at segment {i}, package: {retPackOpts.ToString()}"));
-
-            // Validate received data length
-            if (retPackOpts.Data.Length != currentSegmentSize * 4)
-                return new(new Exception($"Expected {currentSegmentSize * 4} bytes but received {retPackOpts.Data.Length} bytes at segment {i}"));
-
-            // Add received data to result
-            resultData.AddRange(retPackOpts.Data);
-        }
-
-        // Validate total data length
-        if (resultData.Count != dataLength * 4)
-            return new(new Exception($"Expected total {dataLength * 4} bytes but received {resultData.Count} bytes"));
-
-        return resultData.ToArray();
-    }
-
 
     /// <summary>
-    /// 向设备地址写入32位数据
+    /// [TODO:description]
     /// </summary>
-    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="devAddr">设备地址</param>
+    /// <param name="data">[TODO:parameter]</param>
-    /// <param name="data">要写入的32位数据</param>
+    /// <param name="timeout">[TODO:parameter]</param>
-    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>[TODO:return]</returns>
-    /// <returns>写入结果，true表示写入成功</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
@@ -415,30 +337,28 @@ 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;
     }
 
     /// <summary>
-    /// 向设备地址写入字节数组数据（支持大数据量分段传输）
+    /// [TODO:description]
     /// </summary>
-    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="devAddr">设备地址</param>
+    /// <param name="dataArray">[TODO:parameter]</param>
-    /// <param name="dataArray">要写入的字节数组</param>
+    /// <param name="timeout">[TODO:parameter]</param>
-    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>[TODO:return]</returns>
-    /// <returns>写入结果，true表示写入成功</returns>
+    public static async ValueTask<Result<bool>> WriteAddr(IPEndPoint endPoint, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
-    public static async ValueTask<Result<bool>> WriteAddr(
-        IPEndPoint endPoint, int taskID, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
     {
         var ret = false;
         var opts = new SendAddrPackOptions();
 
 
         opts.BurstType = BurstType.FixedBurst;
-        opts.CommandID = Convert.ToByte(taskID);
+        opts.CommandID = 0;
         opts.Address = devAddr;
 
         // Check Msg Bus
@@ -469,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)
@@ -478,4 +398,5 @@ public class UDPClientPool
 
         return true;
     }
+
 }

server/src/UdpServer.cs

@@ -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}") &&
+                if (udpData.ContainsKey(ipAddr) &&
-                    udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
+                    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}") &&
+                if (udpData.ContainsKey(ipAddr) &&
-                    udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
+                    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}") &&
+            if (udpData.ContainsKey(remoteAddress) && udpData.TryGetValue(remoteAddress, out var dataQueue))
-                udpData.TryGetValue($"{remoteAddress}-{taskID}", 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}") &&
+            if (udpData.ContainsKey(ipAddr) &&
-                udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
+                udpData.TryGetValue(ipAddr, out var dataQueue) &&
                 dataQueue.Count > 0)
             {
                 dataQueue.Clear();

src/APIClient.ts

@@ -8,306 +8,6 @@
 /* eslint-disable */
 // ReSharper disable InconsistentNaming
 
-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 服务状态信息
-     */
-    getStatus(): 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.processGetStatus(_response);
-        });
-    }
-
-    protected processGetStatus(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;
-            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-                result200 = resultData200 !== undefined ? resultData200 : <any>null;
-    
-            return result200;
-            });
-        } else if (status === 500) {
-            return response.text().then((_responseText) => {
-            let result500: any = null;
-            let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-            result500 = Exception.fromJS(resultData500);
-            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
-            });
-        } else if (status !== 200 && status !== 204) {
-            return response.text().then((_responseText) => {
-            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
-            });
-        }
-        return Promise.resolve<any>(null as any);
-    }
-
-    /**
-     * 获取 HTTP 视频流信息
-     * @return 流信息
-     */
-    getStreamInfo(): 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.processGetStreamInfo(_response);
-        });
-    }
-
-    protected processGetStreamInfo(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;
-            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-                result200 = resultData200 !== undefined ? resultData200 : <any>null;
-    
-            return result200;
-            });
-        } else if (status === 500) {
-            return response.text().then((_responseText) => {
-            let result500: any = null;
-            let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-            result500 = Exception.fromJS(resultData500);
-            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
-            });
-        } else if (status !== 200 && status !== 204) {
-            return response.text().then((_responseText) => {
-            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
-            });
-        }
-        return Promise.resolve<any>(null as any);
-    }
-
-    /**
-     * 配置摄像头连接参数
-     * @param config 摄像头配置
-     * @return 配置结果
-     */
-    configureCamera(config: CameraConfigRequest): Promise<any> {
-        let url_ = this.baseUrl + "/api/VideoStream/ConfigureCamera";
-        url_ = url_.replace(/[?&]$/, "");
-
-        const content_ = JSON.stringify(config);
-
-        let options_: RequestInit = {
-            body: content_,
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                "Accept": "application/json"
-            }
-        };
-
-        return this.http.fetch(url_, options_).then((_response: Response) => {
-            return this.processConfigureCamera(_response);
-        });
-    }
-
-    protected processConfigureCamera(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;
-            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-                result200 = resultData200 !== undefined ? resultData200 : <any>null;
-    
-            return result200;
-            });
-        } else if (status === 400) {
-            return response.text().then((_responseText) => {
-            let result400: any = null;
-            let resultData400 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-                result400 = resultData400 !== undefined ? resultData400 : <any>null;
-    
-            return throwException("A server side error occurred.", status, _responseText, _headers, result400);
-            });
-        } else if (status === 500) {
-            return response.text().then((_responseText) => {
-            let result500: any = null;
-            let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-            result500 = Exception.fromJS(resultData500);
-            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
-            });
-        } else if (status !== 200 && status !== 204) {
-            return response.text().then((_responseText) => {
-            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
-            });
-        }
-        return Promise.resolve<any>(null as any);
-    }
-
-    /**
-     * 获取当前摄像头配置
-     * @return 摄像头配置信息
-     */
-    getCameraConfig(): Promise<any> {
-        let url_ = this.baseUrl + "/api/VideoStream/CameraConfig";
-        url_ = url_.replace(/[?&]$/, "");
-
-        let options_: RequestInit = {
-            method: "GET",
-            headers: {
-                "Accept": "application/json"
-            }
-        };
-
-        return this.http.fetch(url_, options_).then((_response: Response) => {
-            return this.processGetCameraConfig(_response);
-        });
-    }
-
-    protected processGetCameraConfig(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;
-            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-                result200 = resultData200 !== undefined ? resultData200 : <any>null;
-    
-            return result200;
-            });
-        } else if (status === 500) {
-            return response.text().then((_responseText) => {
-            let result500: any = null;
-            let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-            result500 = Exception.fromJS(resultData500);
-            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
-            });
-        } else if (status !== 200 && status !== 204) {
-            return response.text().then((_responseText) => {
-            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
-            });
-        }
-        return Promise.resolve<any>(null as any);
-    }
-
-    /**
-     * 测试摄像头连接
-     * @return 连接测试结果
-     */
-    testCameraConnection(): Promise<any> {
-        let url_ = this.baseUrl + "/api/VideoStream/TestCameraConnection";
-        url_ = url_.replace(/[?&]$/, "");
-
-        let options_: RequestInit = {
-            method: "POST",
-            headers: {
-                "Accept": "application/json"
-            }
-        };
-
-        return this.http.fetch(url_, options_).then((_response: Response) => {
-            return this.processTestCameraConnection(_response);
-        });
-    }
-
-    protected processTestCameraConnection(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;
-            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-                result200 = resultData200 !== undefined ? resultData200 : <any>null;
-    
-            return result200;
-            });
-        } else if (status === 500) {
-            return response.text().then((_responseText) => {
-            let result500: any = null;
-            let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-            result500 = Exception.fromJS(resultData500);
-            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
-            });
-        } else if (status !== 200 && status !== 204) {
-            return response.text().then((_responseText) => {
-            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
-            });
-        }
-        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;
-            let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-                result200 = resultData200 !== undefined ? resultData200 : <any>null;
-    
-            return result200;
-            });
-        } else if (status === 500) {
-            return response.text().then((_responseText) => {
-            let result500: any = null;
-            let resultData500 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
-            result500 = Exception.fromJS(resultData500);
-            return throwException("A server side error occurred.", status, _responseText, _headers, result500);
-            });
-        } else if (status !== 200 && status !== 204) {
-            return response.text().then((_responseText) => {
-            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
-            });
-        }
-        return Promise.resolve<boolean>(null as any);
-    }
-}
-
 export class BsdlParserClient {
     private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
     private baseUrl: string;
@@ -1842,55 +1542,6 @@ export class RemoteUpdateClient {
     }
 }
 
-export class TutorialClient {
-    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";
-    }
-
-    /**
-     * 获取所有可用的教程目录
-     * @return 教程目录列表
-     */
-    getTutorials(): Promise<void> {
-        let url_ = this.baseUrl + "/api/Tutorial";
-        url_ = url_.replace(/[?&]$/, "");
-
-        let options_: RequestInit = {
-            method: "GET",
-            headers: {
-            }
-        };
-
-        return this.http.fetch(url_, options_).then((_response: Response) => {
-            return this.processGetTutorials(_response);
-        });
-    }
-
-    protected processGetTutorials(response: Response): Promise<void> {
-        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) => {
-            return;
-            });
-        } else if (status === 500) {
-            return response.text().then((_responseText) => {
-            return throwException("A server side error occurred.", status, _responseText, _headers);
-            });
-        } else if (status !== 200 && status !== 204) {
-            return response.text().then((_responseText) => {
-            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
-            });
-        }
-        return Promise.resolve<void>(null as any);
-    }
-}
-
 export class UDPClient {
     private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
     private baseUrl: string;
@@ -2149,20 +1800,15 @@ export class UDPClient {
     }
 
     /**
-     * 获取指定IP地址接收的数据列表
+     * 获取指定IP地址接受的数据列表
      * @param address (optional) IP地址
-     * @param taskID (optional) 
      */
-    getRecvDataArray(address: string | undefined, taskID: number | undefined): Promise<UDPData[]> {
+    getRecvDataArray(address: string | undefined): Promise<UDPData[]> {
         let url_ = this.baseUrl + "/api/UDP/GetRecvDataArray?";
         if (address === null)
             throw new Error("The parameter 'address' cannot be null.");
         else if (address !== undefined)
             url_ += "address=" + encodeURIComponent("" + address) + "&";
-        if (taskID === null)
-            throw new Error("The parameter 'taskID' cannot be null.");
-        else if (taskID !== undefined)
-            url_ += "taskID=" + encodeURIComponent("" + taskID) + "&";
         url_ = url_.replace(/[?&]$/, "");
 
         let options_: RequestInit = {
@@ -2207,6 +1853,55 @@ export class UDPClient {
     }
 }
 
+export class TutorialClient {
+    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";
+    }
+
+    /**
+     * 获取所有可用的教程目录
+     * @return 教程目录列表
+     */
+    getTutorials(): Promise<void> {
+        let url_ = this.baseUrl + "/api/Tutorial";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processGetTutorials(_response);
+        });
+    }
+
+    protected processGetTutorials(response: Response): Promise<void> {
+        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) => {
+            return;
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+            return throwException("A server side error occurred.", status, _responseText, _headers);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+            return throwException("An unexpected server error occurred.", status, _responseText, _headers);
+            });
+        }
+        return Promise.resolve<void>(null as any);
+    }
+}
+
 export class Exception implements IException {
     message?: string;
     innerException?: Exception | undefined;
@@ -2255,48 +1950,6 @@ export interface IException {
     stackTrace?: string | undefined;
 }
 
-/** 摄像头配置请求模型 */
-export class CameraConfigRequest implements ICameraConfigRequest {
-    address!: string;
-    port!: number;
-
-    constructor(data?: ICameraConfigRequest) {
-        if (data) {
-            for (var property in data) {
-                if (data.hasOwnProperty(property))
-                    (<any>this)[property] = (<any>data)[property];
-            }
-        }
-    }
-
-    init(_data?: any) {
-        if (_data) {
-            this.address = _data["address"];
-            this.port = _data["port"];
-        }
-    }
-
-    static fromJS(data: any): CameraConfigRequest {
-        data = typeof data === 'object' ? data : {};
-        let result = new CameraConfigRequest();
-        result.init(data);
-        return result;
-    }
-
-    toJSON(data?: any) {
-        data = typeof data === 'object' ? data : {};
-        data["address"] = this.address;
-        data["port"] = this.port;
-        return data;
-    }
-}
-
-/** 摄像头配置请求模型 */
-export interface ICameraConfigRequest {
-    address: string;
-    port: number;
-}
-
 export class SystemException extends Exception implements ISystemException {
 
     constructor(data?: ISystemException) {
@@ -2438,8 +2091,6 @@ export class UDPData implements IUDPData {
     address?: string;
     /** 发送来源的端口号 */
     port?: number;
-    /** 任务ID */
-    taskID?: number;
     /** 接受到的数据 */
     data?: string;
     /** 是否被读取过 */
@@ -2459,7 +2110,6 @@ export class UDPData implements IUDPData {
             this.dateTime = _data["dateTime"] ? new Date(_data["dateTime"].toString()) : <any>undefined;
             this.address = _data["address"];
             this.port = _data["port"];
-            this.taskID = _data["taskID"];
             this.data = _data["data"];
             this.hasRead = _data["hasRead"];
         }
@@ -2477,7 +2127,6 @@ export class UDPData implements IUDPData {
         data["dateTime"] = this.dateTime ? this.dateTime.toISOString() : <any>undefined;
         data["address"] = this.address;
         data["port"] = this.port;
-        data["taskID"] = this.taskID;
         data["data"] = this.data;
         data["hasRead"] = this.hasRead;
         return data;
@@ -2492,8 +2141,6 @@ export interface IUDPData {
     address?: string;
     /** 发送来源的端口号 */
     port?: number;
-    /** 任务ID */
-    taskID?: number;
     /** 接受到的数据 */
     data?: string;
     /** 是否被读取过 */

src/assets/base.css

@@ -0,0 +1,10 @@
+@import "tailwindcss";
+
+@plugin "daisyui" {
+  themes: winter --default, night --prefersdark;
+}
+
+@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
+@custom-variant light (&:where([data-theme=winter], [data-theme=winter] *));
+
+

src/assets/main.css

@@ -1,11 +1,4 @@
-@import "tailwindcss";
+@import "base.css";
-
-@plugin "daisyui" {
-  themes: winter --default, night --prefersdark;
-}
-
-@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));
-@custom-variant light (&:where([data-theme=winter], [data-theme=winter] *));
 
 /* 禁止所有图像和SVG选择 */
 img, svg {

src/components/InputField/BaseInputField.vue

@@ -1,94 +0,0 @@
-<template>
-  <div class="form-control">
-    <label class="label" v-if="label || icon">
-      <component :is="icon" class="w-4 h-4" v-if="icon" />
-      <span class="label-text" v-if="label">{{ label }}</span>
-    </label>
-    
-    <div class="input-group">
-      <input
-        :type="type"
-        :placeholder="placeholder"
-        :class="inputClasses"
-        :value="modelValue"
-        @input="handleInput"
-        @blur="handleBlur"
-        v-bind="$attrs"
-      />
-      <slot name="suffix"></slot>
-    </div>
-    
-    <label class="label" v-if="error">
-      <span class="label-text-alt text-error">{{ error }}</span>
-    </label>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  modelValue?: string | number
-  label?: string
-  placeholder?: string
-  error?: string
-  type?: 'text' | 'number' | 'email' | 'password'
-  size?: 'xs' | 'sm' | 'md' | 'lg'
-  variant?: 'default' | 'bordered' | 'ghost'
-  icon?: any
-  disabled?: boolean
-  readonly?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'text',
-  size: 'md',
-  variant: 'bordered'
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number]
-  'blur': [event: FocusEvent]
-}>()
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const inputClasses = computed(() => {
-  const baseClasses = ['input', 'flex-1']
-  
-  // 添加变体样式
-  if (props.variant === 'bordered') baseClasses.push('input-bordered')
-  else if (props.variant === 'ghost') baseClasses.push('input-ghost')
-  
-  // 添加尺寸样式
-  if (props.size === 'xs') baseClasses.push('input-xs')
-  else if (props.size === 'sm') baseClasses.push('input-sm')
-  else if (props.size === 'lg') baseClasses.push('input-lg')
-  
-  // 添加错误样式
-  if (props.error) baseClasses.push('input-error')
-  
-  // 添加状态样式
-  if (props.disabled) baseClasses.push('input-disabled')
-  
-  return baseClasses
-})
-
-const handleInput = (event: Event) => {
-  const target = event.target as HTMLInputElement
-  let value: string | number = target.value
-  
-  // 如果是数字类型，转换为数字
-  if (props.type === 'number' && value !== '') {
-    value = Number(value)
-  }
-  
-  emit('update:modelValue', value)
-}
-
-const handleBlur = (event: FocusEvent) => {
-  emit('blur', event)
-}
-</script>

src/components/InputField/IpInputField.vue

@@ -1,75 +0,0 @@
-<template>
-  <BaseInputField
-    v-model="value"
-    :label="label"
-    :placeholder="placeholder || '192.168.1.100'"
-    :error="validationError"
-    :icon="icon || Globe"
-    type="text"
-    v-bind="$attrs"
-    @blur="validateOnBlur"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { z } from 'zod'
-import { Globe } from 'lucide-vue-next'
-import BaseInputField from './BaseInputField.vue'
-
-interface Props {
-  modelValue: string
-  label?: string
-  placeholder?: string
-  icon?: any
-  required?: boolean
-  validateOnBlur?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: 'IP 地址',
-  validateOnBlur: true
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const hasBlurred = ref(false)
-
-const value = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
-
-// IP地址验证模式
-const ipSchema = z.string().ip({ 
-  version: 'v4', 
-  message: '请输入有效的IPv4地址' 
-})
-
-const validationError = computed(() => {
-  // 如果是必填且为空
-  if (props.required && !props.modelValue) {
-    return '请输入IP地址'
-  }
-  
-  // 如果有值但格式不正确，并且设置了在失焦时验证且已经失焦过
-  if (props.modelValue && (!props.validateOnBlur || hasBlurred.value)) {
-    const result = ipSchema.safeParse(props.modelValue)
-    return result.success ? '' : result.error.errors[0]?.message || '无效的IP地址'
-  }
-  
-  return ''
-})
-
-const validateOnBlur = () => {
-  if (props.validateOnBlur) {
-    hasBlurred.value = true
-  }
-}
-</script>

src/components/InputField/PortInputField.vue

@@ -1,81 +0,0 @@
-<template>
-  <BaseInputField
-    v-model="value"
-    :label="label"
-    :placeholder="placeholder || '8080'"
-    :error="validationError"
-    :icon="icon || Network"
-    type="number"
-    v-bind="$attrs"
-    @blur="validateOnBlur"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { z } from 'zod'
-import { Network } from 'lucide-vue-next'
-import BaseInputField from './BaseInputField.vue'
-
-interface Props {
-  modelValue: number
-  label?: string
-  placeholder?: string
-  icon?: any
-  required?: boolean
-  validateOnBlur?: boolean
-  min?: number
-  max?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: '端口',
-  validateOnBlur: true,
-  min: 1,
-  max: 65535
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: number]
-}>()
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const hasBlurred = ref(false)
-
-const value = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', Number(val))
-})
-
-// 端口验证模式
-const portSchema = computed(() => 
-  z.number()
-    .int('端口必须是整数')
-    .min(props.min, `端口必须大于等于${props.min}`)
-    .max(props.max, `端口必须小于等于${props.max}`)
-)
-
-const validationError = computed(() => {
-  // 如果是必填且为空
-  if (props.required && (!props.modelValue && props.modelValue !== 0)) {
-    return '请输入端口号'
-  }
-  
-  // 如果有值但格式不正确，并且设置了在失焦时验证且已经失焦过
-  if ((props.modelValue || props.modelValue === 0) && (!props.validateOnBlur || hasBlurred.value)) {
-    const result = portSchema.value.safeParse(props.modelValue)
-    return result.success ? '' : result.error.errors[0]?.message || '无效的端口号'
-  }
-  
-  return ''
-})
-
-const validateOnBlur = () => {
-  if (props.validateOnBlur) {
-    hasBlurred.value = true
-  }
-}
-</script>

src/components/InputField/index.ts

@@ -1,3 +0,0 @@
-export { default as BaseInputField } from './BaseInputField.vue'
-export { default as IpInputField } from './IpInputField.vue'
-export { default as PortInputField } from './PortInputField.vue'

src/components/LabCanvas/ComponentSelector.vue

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

src/components/LabCanvas/DiagramCanvas.vue

@@ -83,14 +83,15 @@
           }
         ">
         <!-- 动态渲染组件 -->
-        <component :is="getComponentDefinition(component.type)" v-if="props.componentModules[component.type]"
+        <component :is="componentManager.getComponentDefinition(component.type)" 
-          v-bind="prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
+          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);
+  isDragEventActive.value = true;
-  document.addEventListener("mouseup", stopDrag);
   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);
+  isDragEventActive.value = true;
-  document.addEventListener("mouseup", stopDrag);
   e.preventDefault();
 }
 
@@ -483,9 +460,7 @@ function onDrag(e: MouseEvent) {
 function stopDrag() {
   isDragging.value = false;
   isMiddleDragging.value = false;
-
+  isDragEventActive.value = false;
-  document.removeEventListener("mousemove", onDrag);
-  document.removeEventListener("mouseup", stopDrag);
 }
 
 // --- 组件拖拽交互 ---
@@ -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);
+  isComponentDragEventActive.value = true;
-  document.addEventListener("mouseup", stopComponentDrag);
 }
 
 // 拖拽组件过程
@@ -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) {
     }
   }
 
-  // 通知父组件位置已更新
+  // 通知componentManager位置已更新
-  emit("component-moved", {
+  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);
+  isComponentDragEventActive.value = false;
-  document.removeEventListener("mouseup", stopComponentDrag);
 }
 
 // 更新组件属性
@@ -634,6 +604,11 @@ function updateComponentProp(
   propName: string,
   value: any,
 ) {
+  // 直接通过componentManager更新组件属性
+  if (componentManager) {
+    componentManager.updateComponentProp(componentId, propName, value);
+  } else {
+    // 后备方案：直接更新数据
     diagramData.value = updatePartAttribute(
       diagramData.value,
       componentId,
@@ -642,6 +617,7 @@ function updateComponentProp(
     );
     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 () => {
-  // 重置组件引用
+  // 设置componentManager的画布引用
-  resetComponentRefs();
+  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),
     );
 
-    // 通知父组件需要加载组件模块
+    // 直接通过componentManager预加载组件模块
-    componentTypes.forEach((type) => {
+    if (componentManager) {
-      if (!props.componentModules[type]) {
+      await componentManager.preloadComponentModules(Array.from(componentTypes));
-        emit("load-component-module", type);
     }
-    });
   } 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>

src/components/LabCanvas/composable/componentManager.ts

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

src/components/LabCanvas/composable/wireManager.ts

@@ -83,4 +83,3 @@ export function setMousePosition(x: number, y: number) {
   mousePosition.y = y;
 }
 
-// 其它Wire相关操作可继续扩展...

src/components/LabCanvas/index.ts

@@ -0,0 +1,8 @@
+// 导出组件管理器服务
+export { useProvideComponentManager, useComponentManager } from './composable/componentManager';
+
+// 导出图表管理器
+export type { DiagramData, DiagramPart } from './composable/diagramManager';
+
+// 导出连线管理器
+export type { WireItem } from './composable/wireManager';

src/components/Navbar.vue

@@ -2,80 +2,74 @@
   <div class="navbar bg-base-100 shadow-xl">
     <div class="navbar-start">
       <div class="dropdown">
-        <div
+        <div tabindex="0" role="button"
-          tabindex="0"
+          class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300">
-          role="button"
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300"
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M4 6h16M4 12h8m-8 6h16"
-            />
           </svg>
         </div>
-        <ul
+        <ul tabindex="0"
-          tabindex="0"
+          class="menu menu-sm dropdown-content bg-base-100 rounded-lg z-50 mt-3 w-52 p-2 shadow-lg transition-all duration-300 ease-in-out">
-          class="menu menu-sm dropdown-content bg-base-200 rounded-lg z-50 mt-3 w-52 p-2 shadow-lg transition-all duration-300 ease-in-out"
-        >
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/" class="text-base font-medium">
-              <House class="icon" />
+              <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="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                <polyline points="9 22 9 12 15 12 15 22" />
+              </svg>
               首页
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/user" class="text-base font-medium">
-              <User class="icon" />
+              <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="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                <circle cx="12" cy="7" r="4"></circle>
+              </svg>
               用户界面
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/project" class="text-base font-medium">
-              <PencilRuler class="icon" />
+              <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="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+              </svg>
               工程界面
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/test" class="text-base font-medium">
-              <FlaskConical class="icon" />
+              <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="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+              </svg>
               测试功能
             </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">
-              <Video class="icon" />
-              HTTP视频流
-            </router-link>
-          </li>
-          <li class="my-1 hover:translate-x-1 transition-all duration-300">
-            <router-link to="/oscilloscope" class="text-base font-medium">
-              <SquareActivity class="icon" />
-              示波器
-            </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">
-              <FileText class="icon" />
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                <polyline points="14 2 14 8 20 8"></polyline>
+                <line x1="16" y1="13" x2="8" y2="13"></line>
+                <line x1="16" y1="17" x2="8" y2="17"></line>
+                <polyline points="10 9 9 9 8 9"></polyline>
+              </svg>
               Markdown测试
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
-            <a
+            <a href="http://localhost:5000/swagger" target="_self" rel="noopener noreferrer"
-              href="http://localhost:5000/swagger"
+              class="text-base font-medium">
-              target="_self"
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
-              rel="noopener noreferrer"
+                stroke="currentColor" stroke-width="2">
-              class="text-base font-medium"
+                <path d="M3 3h18v18H3z"></path>
-            >
+                <path d="M8 8h8v8H8z" fill="currentColor"></path>
-              <BookOpenText class="icon" />
+              </svg>
               OpenAPI文档
             </a>
           </li>
@@ -83,18 +77,13 @@
       </div>
     </div>
     <div class="navbar-center lg:flex">
-      <router-link
+      <router-link to="/" class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105">
-        to="/"
-        class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105"
-      >
         <span class="text-primary">FPGA</span> Web Lab
       </router-link>
     </div>
     <div class="navbar-end">
-      <router-link
+      <router-link to="/login"
-        to="/login"
+        class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3">
-        class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3"
-      >
         登录
       </router-link>
       <div class="ml-2 transition-all duration-500 hover:rotate-12">
@@ -106,22 +95,8 @@
 
 <script setup lang="ts">
 import ThemeControlButton from "./ThemeControlButton.vue";
-import {
-  SquareActivity,
-  FileText,
-  BookOpenText,
-  Video,
-  FlaskConical,
-  House,
-  User,
-  PencilRuler,
-} from "lucide-vue-next";
 </script>
 
 <style scoped>
 @import "../assets/main.css";
-
-.icon {
-  @apply h-5 w-5 opacity-70;
-}
 </style>

src/components/Oscilloscope/WaveformDisplay.vue

@@ -1,178 +0,0 @@
-<template>
-  <div class="w-full h-100">
-    <v-chart v-if="true" class="w-full h-full" :option="option" autoresize />
-    <div
-      v-else
-      class="w-full h-full flex items-center justify-center text-gray-500"
-    >
-      暂无数据
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, withDefaults } from "vue";
-import { forEach } from "lodash";
-import VChart from "vue-echarts";
-import { type WaveformDataType } from "./index";
-
-// Echarts
-import { use } from "echarts/core";
-import { LineChart } from "echarts/charts";
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-  ToolboxComponent,
-  DataZoomComponent,
-  GridComponent,
-} from "echarts/components";
-import { CanvasRenderer } from "echarts/renderers";
-import type { ComposeOption } from "echarts/core";
-import type { LineSeriesOption } from "echarts/charts";
-import type {
-  TitleComponentOption,
-  TooltipComponentOption,
-  LegendComponentOption,
-  ToolboxComponentOption,
-  DataZoomComponentOption,
-  GridComponentOption,
-} from "echarts/components";
-
-use([
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-  ToolboxComponent,
-  DataZoomComponent,
-  GridComponent,
-  LineChart,
-  CanvasRenderer,
-]);
-
-type EChartsOption = ComposeOption<
-  | TitleComponentOption
-  | TooltipComponentOption
-  | LegendComponentOption
-  | ToolboxComponentOption
-  | DataZoomComponentOption
-  | GridComponentOption
-  | LineSeriesOption
->;
-
-const props = withDefaults(
-  defineProps<{
-    data?: WaveformDataType;
-  }>(),
-  {
-    data: () => ({
-      x: [],
-      y: [],
-      xUnit: "s",
-      yUnit: "V",
-    }),
-  },
-);
-
-const hasData = computed(() => {
-  return (
-    props.data &&
-    props.data.x &&
-    props.data.y &&
-    props.data.x.length > 0 &&
-    props.data.y.length > 0 &&
-    props.data.y.some((channel) => channel.length > 0)
-  );
-});
-
-const option = computed((): EChartsOption => {
-  const series: LineSeriesOption[] = [];
-
-  forEach(props.data.y, (yData, index) => {
-    // 将 x 和 y 数据组合成 [x, y] 格式
-    const seriesData = props.data.x.map((xValue, i) => [xValue, yData[i] || 0]);
-
-    series.push({
-      type: "line",
-      name: `通道 ${index + 1}`,
-      data: seriesData,
-      smooth: false, // 示波器通常显示原始波形
-      symbol: "none", // 不显示数据点标记
-      lineStyle: {
-        width: 2,
-      },
-    });
-  });
-
-  return {
-    grid: {
-      left: "10%",
-      right: "10%",
-      top: "15%",
-      bottom: "25%",
-    },
-    tooltip: {
-      trigger: "axis",
-      formatter: (params: any) => {
-        let result = `时间: ${params[0].data[0].toFixed(2)} ${props.data.xUnit}<br/>`;
-        params.forEach((param: any) => {
-          result += `${param.seriesName}: ${param.data[1].toFixed(3)} ${props.data.yUnit}<br/>`;
-        });
-        return result;
-      },
-    },
-    legend: {
-      top: "5%",
-      data: series.map((s) => s.name) as string[],
-    },
-    toolbox: {
-      feature: {
-        restore: {},
-        saveAsImage: {},
-      },
-    },
-    dataZoom: [
-      {
-        type: "inside",
-        start: 0,
-        end: 100,
-      },
-      {
-        start: 0,
-        end: 100,
-      },
-    ],
-    xAxis: {
-      type: "value",
-      name: `时间 (${props.data.xUnit})`,
-      nameLocation: "middle",
-      nameGap: 30,
-      axisLine: {
-        show: true,
-      },
-      axisTick: {
-        show: true,
-      },
-      splitLine: {
-        show: false,
-      },
-    },
-    yAxis: {
-      type: "value",
-      name: `电压 (${props.data.yUnit})`,
-      nameLocation: "middle",
-      nameGap: 40,
-      axisLine: {
-        show: true,
-      },
-      axisTick: {
-        show: true,
-      },
-      splitLine: {
-        show: false,
-      },
-    },
-    series: series,
-  };
-});
-</script>

src/components/Oscilloscope/index.ts

@@ -1,42 +0,0 @@
-import WaveformDisplay from "./WaveformDisplay.vue";
-
-type WaveformDataType = {
-  x: number[];
-  y: number[][];
-  xUnit: "s" | "ms" | "us";
-  yUnit: "V" | "mV" | "uV";
-};
-
-// Test data generator
-function generateTestData(): WaveformDataType {
-  const sampleRate = 1000; // 1kHz
-  const duration = 0.1; // 10ms
-  const points = Math.floor(sampleRate * duration);
-
-  const x = Array.from({ length: points }, (_, i) => (i / sampleRate) * 1000); // time in ms
-
-  // Generate multiple channels with different waveforms
-  const y = [
-    // Channel 1: Sine wave 50Hz
-    Array.from(
-      { length: points },
-      (_, i) => Math.sin((2 * Math.PI * 50 * i) / sampleRate) * 3.3,
-    ),
-    // Channel 2: Square wave 25Hz
-    Array.from(
-      { length: points },
-      (_, i) => Math.sign(Math.sin((2 * Math.PI * 25 * i) / sampleRate)) * 5,
-    ),
-    // Channel 3: Sawtooth wave 33Hz
-    Array.from(
-      { length: points },
-      (_, i) => (2 * (((33 * i) / sampleRate) % 1) - 1) * 2.5,
-    ),
-    // Channel 4: Noise + DC offset
-    Array.from({ length: points }, () => Math.random() * 0.5 + 1.5),
-  ];
-
-  return { x, y, xUnit: "ms", yUnit: "V" };
-}
-
-export { WaveformDisplay, generateTestData , type WaveformDataType };

src/components/PropertyEditor.vue

@@ -128,7 +128,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import CollapsibleSection from "./CollapsibleSection.vue";
-import { type DiagramPart } from "@/components/diagramManager";
+import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager";
 import {
   type PropertyConfig,
   getPropValue,

src/components/PropertyPanel.vue

@@ -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"; // 属性编辑器组件

src/components/equipments/DDSPropertyEditor.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() {

src/components/equipments/MotherBoardCaps.vue

@@ -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
+          <svg class="icon opacity-70 fill-primary" viewBox="0 0 1024 1024" version="1.1"
-            class="icon opacity-70 fill-primary"
+            xmlns="http://www.w3.org/2000/svg" p-id="4865" width="200" height="200">
-            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"
+              p-id="4866"></path>
-            ></path>
           </svg>
         </button>
       </div>
     </div>
     <div class="divider"></div>
-    <UploadCard
+    <UploadCard class="bg-base-200" :upload-event="eqps.jtagUploadBitstream"
-      class="bg-base-200"
+      :download-event="eqps.jtagDownloadBitstream" :bitstream-file="eqps.jtagBitstream"
-      :upload-event="eqps.jtagUploadBitstream"
+      @update:bitstream-file="handleBitstreamChange">
-      :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
+      <select class="select w-full" @change="handleSelectJtagSpeed" :value="props.jtagFreq">
-        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
+        <input type="number" class="input validator" required placeholder="Type a number between 1 to 1000" min="1"
-          type="number"
+          max="1000" v-model="jtagBoundaryScanFreq" title="Type a number between 1 to 1000" />
-          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
+      <button class="btn btn-primary grow mx-4" :class="eqps.enableJtagBoundaryScan ? '' : 'btn-soft'"
-        class="btn btn-primary grow mx-4"
+        :onclick="toggleJtagBoundaryScan">
-        :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
+        <input type="checkbox" class="checkbox" :checked="eqps.enableMatrixKey"
-          type="checkbox"
+          @change="handleMatrixkeyCheckboxChange" />
-          class="checkbox"
-          :checked="eqps.enableMatrixKey"
-          @change="handleMatrixkeyCheckboxChange"
-        />
         <p class="mx-2">启用矩阵键盘</p>
       </div>
       <div class="flex flex-row">
-        <input
+        <input type="checkbox" class="checkbox" :checked="eqps.enablePower" @change="handlePowerCheckboxChange" />
-          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;
 }
 

src/components/equipments/SMT_LED.vue

@@ -177,26 +177,26 @@ defineExpose({
   getPinPosition: (pinId: string) => {
     // 如果是自定义的引脚ID
     if (props.pins && props.pins.length > 0) {
-      // console.log('SMT_LED查找Pin ID:', pinId);
+      console.log('SMT_LED查找Pin ID:', pinId);
-      // console.log('SMT_LED组件尺寸:', props.size, '宽高:', width.value, 'x', height.value);
+      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;
   }
 });

src/components/equipments/componentConfig.ts

@@ -1,5 +1,5 @@
 // componentConfig.ts 提供通用的组件配置功能
-import type { DiagramPart } from '../diagramManager';
+import type { DiagramPart } from '../LabCanvas/composable/diagramManager';
 
 // 属性配置接口
 export interface PropertyConfig {

src/main.ts

@@ -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')
+const app = createApp(App).use(router).use(createPinia()).use(VueKonva).mount('#app')
-
-// 初始化约束通信
-// initConstraintCommunication();
 

src/router/index.ts

@@ -1,27 +1,22 @@
-import { createRouter, createWebHistory } from "vue-router";
+import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from "../views/HomeView.vue";
+import HomeView from '../views/HomeView.vue'
-import LoginView from "../views/LoginView.vue";
+import LoginView from '../views/LoginView.vue'
-import LabView from "../views/LabView.vue";
+import LabView from '../views/LabView.vue'
-import ProjectView from "../views/ProjectView.vue";
+import ProjectView from '../views/ProjectView.vue'
-import TestView from "../views/TestView.vue";
+import TestView from '../views/TestView.vue'
-import UserView from "../views/UserView.vue";
+import UserView from '../views/UserView.vue'
-import AdminView from "../views/AdminView.vue";
+import AdminView from '../views/AdminView.vue'
-import VideoStreamView from "../views/VideoStreamView.vue";
-import OscilloscopeView from "@/views/OscilloscopeView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    { path: "/", name: "home", component: HomeView },
+    {path: '/',       name: 'home',   component: HomeView},
-    { path: "/login", name: "login", component: LoginView },
+    {path: '/login',  name: 'login',  component: LoginView},
-    { path: "/lab/:id", name: "lab", component: LabView },
+    {path: '/lab/:id',name: 'lab',    component: LabView},
-    { path: "/project", name: "project", component: ProjectView },
+    {path: '/project',name: 'project',component: ProjectView},
-    { path: "/test", name: "test", component: TestView },
+    {path: '/test',   name: 'test',   component: TestView},
-    { path: "/user", name: "user", component: UserView },
+    {path: '/user',   name: 'user',   component: UserView},
-    { path: "/admin", name: "admin", component: AdminView },
+    {path: '/admin',  name: 'admin',  component: AdminView}]
-    { path: "/video-stream", name: "videoStream", component: VideoStreamView },
+})
-    { path: "/oscilloscope", name: "oscilloscope", component: OscilloscopeView },
-  ],
-});
 
-export default router;
+export default router

src/stores/equipments.ts

@@ -1,7 +1,7 @@
 import { ref, reactive, watchPostEffect } from 'vue'
 import { defineStore } from 'pinia'
 import { isString, toNumber } from 'lodash';
-import { Common } from '@/Common';
+import { Common } from '@/utils/Common';
 import z from "zod"
 import { isNumber } from 'mathjs';
 import { JtagClient, MatrixKeyClient, PowerClient } from "@/APIClient";

src/utils/Common.ts

@@ -1,4 +1,4 @@
-import { type FileParameter } from "./APIClient";
+import { type FileParameter } from "@/APIClient";
 import { isNull, isUndefined } from "lodash";
 
 export namespace Common {

src/utils/VueKonvaType.ts

@@ -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,
+}

src/views/AdminView.vue

@@ -115,7 +115,7 @@ import { isNull, isUndefined } from "lodash";
 import { ref } from "vue";
 import {  RemoteUpdateClient } from "@/APIClient";
 import { useDialogStore } from "@/stores/dialog";
-import { Common } from "@/Common";
+import { Common } from "@/utils/Common";
 
 const dialog = useDialogStore();
 

src/views/OscilloscopeView.vue

@@ -1,184 +0,0 @@
-<template>
-  <div
-    class="min-h-screen bg-base-100 flex flex-col mx-auto p-6 space-y-6 container"
-  >
-    <!-- 设置 -->
-    <div class="card bg-base-200 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title">
-          <Settings class="w-5 h-5" />
-          示波器配置
-        </h2>
-
-        <div class="flex flex-row justify-around gap-4">
-          <div class="grow">
-            <IpInputField
-              v-model="tempConfig.ip"
-              required
-            />
-          </div>
-
-          <div class="grow">
-            <PortInputField
-              v-model="tempConfig.port"
-              required
-            />
-          </div>
-        </div>
-
-        <div class="card-actions justify-end mt-4">
-          <button
-            class="btn btn-ghost"
-            @click="resetConfig"
-            :disabled="isDefault"
-          >
-            <RotateCcw class="w-4 h-4" />
-            重置
-          </button>
-          <button
-            class="btn btn-primary"
-            @click="saveConfig"
-            :disabled="!isValidConfig || !hasChanges"
-            :class="{ loading: isSaving }"
-          >
-            <Save class="w-4 h-4" v-if="!isSaving" />
-            保存配置
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- 波形展示 -->
-    <div class="card bg-base-200 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title">
-          <Activity class="w-5 h-5" />
-          波形显示
-        </h2>
-        <WaveformDisplay :data="generateTestData()" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, reactive, watch } from "vue";
-import { useStorage } from "@vueuse/core";
-import { z } from "zod";
-import {
-  Settings,
-  Save,
-  RotateCcw,
-  Activity,
-} from "lucide-vue-next";
-import { WaveformDisplay, generateTestData } from "@/components/Oscilloscope";
-import { IpInputField, PortInputField } from "@/components/InputField";
-
-// 配置类型定义
-const configSchema = z.object({
-  ip: z
-    .string()
-    .ip({ version: "v4", message: "请输入有效的IPv4地址" })
-    .min(1, "请输入IP地址"),
-  port: z
-    .number()
-    .int("端口必须是整数")
-    .min(1, "端口必须大于0")
-    .max(65535, "端口必须小于等于65535"),
-});
-
-type OscilloscopeConfig = z.infer<typeof configSchema>;
-
-// 默认配置
-const defaultConfig: OscilloscopeConfig = {
-  ip: "192.168.1.100",
-  port: 8080,
-};
-
-// 使用 VueUse 存储配置
-const config = useStorage<OscilloscopeConfig>(
-  "oscilloscope-config",
-  defaultConfig,
-  localStorage,
-  {
-    serializer: {
-      read: (value: string) => {
-        try {
-          const parsed = JSON.parse(value);
-          const result = configSchema.safeParse(parsed);
-          return result.success ? result.data : defaultConfig;
-        } catch {
-          return defaultConfig;
-        }
-      },
-      write: (value: OscilloscopeConfig) => JSON.stringify(value),
-    },
-  },
-);
-
-// 临时配置（用于编辑）
-const tempConfig = reactive<OscilloscopeConfig>({
-  ip: config.value.ip,
-  port: config.value.port,
-});
-
-// 状态管理
-const isSaving = ref(false);
-
-// 检查配置是否有效 - 简化版本，因为验证现在在组件内部
-const isValidConfig = computed(() => {
-  return tempConfig.ip && tempConfig.port && 
-         tempConfig.port >= 1 && tempConfig.port <= 65535 &&
-         /^(\d{1,3}\.){3}\d{1,3}$/.test(tempConfig.ip);
-});
-
-// 检查是否有更改
-const hasChanges = computed(() => {
-  return (
-    tempConfig.ip !== config.value.ip || tempConfig.port !== config.value.port
-  );
-});
-
-const isDefault = computed(() => {
-  return (
-    defaultConfig.ip === tempConfig.ip && defaultConfig.port === tempConfig.port
-  );
-});
-
-// 保存配置
-const saveConfig = async () => {
-  if (!isValidConfig.value) return;
-
-  isSaving.value = true;
-
-  try {
-    // 模拟保存延迟
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    config.value = {
-      ip: tempConfig.ip,
-      port: tempConfig.port,
-    };
-  } catch (error) {
-    console.error("保存配置失败:", error);
-  } finally {
-    isSaving.value = false;
-  }
-};
-
-// 重置配置
-const resetConfig = () => {
-  tempConfig.ip = defaultConfig.ip;
-  tempConfig.port = defaultConfig.port;
-};
-
-// 监听存储的配置变化，同步到临时配置
-watch(
-  config,
-  (newConfig) => {
-    tempConfig.ip = newConfig.ip;
-    tempConfig.port = newConfig.port;
-  },
-  { deep: true },
-);
-</script>

src/views/ProjectView.vue

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

src/views/TestView.vue

@@ -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>

src/views/VideoStreamView.vue

@@ -1,896 +0,0 @@
-<template>
-  <div class="min-h-screen bg-base-100">
-    <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 bg-base-100 shadow-sm mt-4">
-            <div class="card-body">
-              <h3 class="card-title text-sm text-info">
-                <svg
-                  class="w-5 h-5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-                  />
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-                  />
-                </svg>
-                摄像头配置
-              </h3>
-              <div class="flex flex-row justify-between items-center gap-4">
-                <div class="form-control">
-                  <label class="label">
-                    <span class="label-text">IP地址</span>
-                  </label>
-                  <input
-                    type="text"
-                    v-model="cameraConfig.address"
-                    placeholder="例如: 192.168.1.100"
-                    class="input input-bordered input-sm"
-                  />
-                </div>
-                <div class="form-control">
-                  <label class="label">
-                    <span class="label-text">端口号</span>
-                  </label>
-                  <input
-                    type="number"
-                    v-model="cameraConfig.port"
-                    placeholder="例如: 8080"
-                    class="input input-bordered input-sm"
-                  />
-                </div>
-                <button
-                  class="btn btn-primary btn-sm"
-                  @click="confirmCameraConfig"
-                  :disabled="configuring"
-                >
-                  <svg
-                    v-if="configuring"
-                    class="animate-spin h-4 w-4 mr-1"
-                    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>
-                  <svg
-                    v-else
-                    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="M5 13l4 4L19 7"
-                    />
-                  </svg>
-                  {{ configuring ? "配置中..." : "确认" }}
-                </button>
-              </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, CameraConfigRequest } from "@/APIClient";
-
-// 状态管理
-const loading = ref(false);
-const testing = ref(false);
-const configuring = ref(false);
-const testingCamera = 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 cameraConfig = ref({
-  address: "192.168.1.100",
-  port: 8080,
-});
-
-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 loadCameraConfig = async () => {
-  try {
-    addLog("info", "正在加载摄像头配置...");
-
-    const config = await videoClient.getCameraConfig();
-    if (config && config.address && config.port) {
-      cameraConfig.value.address = config.address;
-      cameraConfig.value.port = config.port;
-      addLog("success", `摄像头配置加载成功: ${config.address}:${config.port}`);
-    } else {
-      addLog("warning", "未找到保存的摄像头配置，使用默认值");
-    }
-  } catch (error) {
-    addLog("error", `加载摄像头配置失败: ${error}`);
-    console.error("加载摄像头配置失败:", error);
-  }
-};
-
-// 确认摄像头配置
-const confirmCameraConfig = async () => {
-  if (!cameraConfig.value.address || !cameraConfig.value.port) {
-    addLog("error", "请填写完整的摄像头IP地址和端口号");
-    return;
-  }
-
-  configuring.value = true;
-  try {
-    addLog(
-      "info",
-      `正在配置摄像头: ${cameraConfig.value.address}:${cameraConfig.value.port}`,
-    );
-
-    const result = await videoClient.configureCamera(
-      CameraConfigRequest.fromJS(cameraConfig.value),
-    );
-
-    if (result) {
-      addLog("success", "摄像头配置保存成功");
-      // 配置成功后刷新状态
-      await refreshStatus();
-    } else {
-      addLog("error", "摄像头配置保存失败");
-    }
-  } catch (error) {
-    addLog("error", `配置摄像头失败: ${error}`);
-    console.error("配置摄像头失败:", error);
-  } finally {
-    configuring.value = false;
-  }
-};
-
-// 测试摄像头连接
-const testCameraConnection = async () => {
-  if (!cameraConfig.value.address || !cameraConfig.value.port) {
-    addLog("error", "请先配置摄像头IP地址和端口号");
-    return;
-  }
-
-  testingCamera.value = true;
-  try {
-    addLog(
-      "info",
-      `正在测试摄像头连接: ${cameraConfig.value.address}:${cameraConfig.value.port}`,
-    );
-
-    const result = await videoClient.testCameraConnection();
-
-    if (result && result.success) {
-      addLog("success", "摄像头连接测试成功");
-    } else {
-      addLog("error", `摄像头连接测试失败: ${result?.message || "未知错误"}`);
-    }
-  } catch (error) {
-    addLog("error", `摄像头连接测试失败: ${error}`);
-    console.error("摄像头连接测试失败:", error);
-  } finally {
-    testingCamera.value = false;
-  }
-};
-
-// 格式化时间
-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", "正在获取服务状态...");
-
-    // 使用新的API方法名称
-    const status = await videoClient.getStatus();
-    statusInfo.value = status;
-
-    const info = await videoClient.getStreamInfo();
-    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 loadCameraConfig();
-  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>

vite.config.ts

@@ -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: {