feat: 更新api，并更新了串流页面

TODO.md

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

flake.lock

@@ -2,12 +2,12 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1741246872,
-        "narHash": "sha256-Q6pMP4a9ed636qilcYX8XUguvKl/0/LGXhHcRI91p0U=",
-        "rev": "10069ef4cf863633f57238f179a0297de84bd8d3",
-        "revCount": 763342,
+        "lastModified": 1748929857,
+        "narHash": "sha256-lcZQ8RhsmhsK8u7LIFsJhsLh/pzR9yZ8yqpTzyGdj+Q=",
+        "rev": "c2a03962b8e24e669fb37b7df10e7c79531ff1a4",
+        "revCount": 810143,
         "type": "tarball",
-        "url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.763342%2Brev-10069ef4cf863633f57238f179a0297de84bd8d3/01956ed4-f66c-7a87-98e4-b7e58f4aa591/source.tar.gz"
+        "url": "https://api.flakehub.com/f/pinned/NixOS/nixpkgs/0.1.810143%2Brev-c2a03962b8e24e669fb37b7df10e7c79531ff1a4/01973914-8b42-7168-9ee2-4d6ea6946695/source.tar.gz"
       },
       "original": {
         "type": "tarball",

package.json

@@ -16,17 +16,23 @@
   "dependencies": {
     "@svgdotjs/svg.js": "^3.2.4",
     "@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",
     "marked": "^12.0.0",
     "mathjs": "^14.4.0",
     "pinia": "^3.0.1",
-    "tinypool": "^1.0.2",
+    "reka-ui": "^2.3.1",
     "ts-log": "^2.2.7",
     "ts-results-es": "^5.0.1",
     "vue": "^3.5.13",
+    "vue-echarts": "^7.0.3",
+    "vue-konva": "^3.2.1",
     "vue-router": "4",
     "yocto-queue": "^1.2.1",
     "zod": "^3.24.2"
@@ -45,6 +51,7 @@
     "postcss": "^8.5.3",
     "tailwindcss": "^4.0.12",
     "typescript": "~5.7.3",
+    "unplugin-vue-components": "^28.8.0",
     "vite": "^6.1.0",
     "vite-plugin-vue-devtools": "^7.7.2",
     "vue-tsc": "^2.2.2"

server/Program.cs

@@ -4,6 +4,8 @@ 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()
@@ -57,7 +59,6 @@ try
     });
 
     // Add Swagger
-    builder.Services.AddControllers();
     builder.Services.AddOpenApiDocument(options =>
     {
         options.PostProcess = document =>
@@ -82,6 +83,10 @@ try
         };
     });
 
+    // 添加 HTTP 视频流服务
+    builder.Services.AddSingleton<HttpVideoStreamService>();
+    builder.Services.AddHostedService(provider => provider.GetRequiredService<HttpVideoStreamService>());
+
     // Application Settings
     var app = builder.Build();
     // Configure the HTTP request pipeline.
@@ -95,12 +100,14 @@ 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")))
         {
@@ -113,7 +120,7 @@ try
         });
         app.MapFallbackToFile("index.html");
     }
-    // Add logs
+
     app.UseHttpsRedirection();
     app.UseRouting();
     app.UseCors();

server/server.csproj

@@ -25,6 +25,7 @@
     <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,392 +0,0 @@
-using System.Collections;
-using DotNext;
-
-namespace Common
-{
-    /// <summary>
-    /// 数字处理工具
-    /// </summary>
-    public class Number
-    {
-        private static readonly byte[] BitReverseTable = new byte[] {
-            0x00, 0x80, 0x40, 0xc0, 0x20, 0xa0, 0x60, 0xe0,
-            0x10, 0x90, 0x50, 0xd0, 0x30, 0xb0, 0x70, 0xf0,
-            0x08, 0x88, 0x48, 0xc8, 0x28, 0xa8, 0x68, 0xe8,
-            0x18, 0x98, 0x58, 0xd8, 0x38, 0xb8, 0x78, 0xf8,
-            0x04, 0x84, 0x44, 0xc4, 0x24, 0xa4, 0x64, 0xe4,
-            0x14, 0x94, 0x54, 0xd4, 0x34, 0xb4, 0x74, 0xf4,
-            0x0c, 0x8c, 0x4c, 0xcc, 0x2c, 0xac, 0x6c, 0xec,
-            0x1c, 0x9c, 0x5c, 0xdc, 0x3c, 0xbc, 0x7c, 0xfc,
-            0x02, 0x82, 0x42, 0xc2, 0x22, 0xa2, 0x62, 0xe2,
-            0x12, 0x92, 0x52, 0xd2, 0x32, 0xb2, 0x72, 0xf2,
-            0x0a, 0x8a, 0x4a, 0xca, 0x2a, 0xaa, 0x6a, 0xea,
-            0x1a, 0x9a, 0x5a, 0xda, 0x3a, 0xba, 0x7a, 0xfa,
-            0x06, 0x86, 0x46, 0xc6, 0x26, 0xa6, 0x66, 0xe6,
-            0x16, 0x96, 0x56, 0xd6, 0x36, 0xb6, 0x76, 0xf6,
-            0x0e, 0x8e, 0x4e, 0xce, 0x2e, 0xae, 0x6e, 0xee,
-            0x1e, 0x9e, 0x5e, 0xde, 0x3e, 0xbe, 0x7e, 0xfe,
-            0x01, 0x81, 0x41, 0xc1, 0x21, 0xa1, 0x61, 0xe1,
-            0x11, 0x91, 0x51, 0xd1, 0x31, 0xb1, 0x71, 0xf1,
-            0x09, 0x89, 0x49, 0xc9, 0x29, 0xa9, 0x69, 0xe9,
-            0x19, 0x99, 0x59, 0xd9, 0x39, 0xb9, 0x79, 0xf9,
-            0x05, 0x85, 0x45, 0xc5, 0x25, 0xa5, 0x65, 0xe5,
-            0x15, 0x95, 0x55, 0xd5, 0x35, 0xb5, 0x75, 0xf5,
-            0x0d, 0x8d, 0x4d, 0xcd, 0x2d, 0xad, 0x6d, 0xed,
-            0x1d, 0x9d, 0x5d, 0xdd, 0x3d, 0xbd, 0x7d, 0xfd,
-            0x03, 0x83, 0x43, 0xc3, 0x23, 0xa3, 0x63, 0xe3,
-            0x13, 0x93, 0x53, 0xd3, 0x33, 0xb3, 0x73, 0xf3,
-            0x0b, 0x8b, 0x4b, 0xcb, 0x2b, 0xab, 0x6b, 0xeb,
-            0x1b, 0x9b, 0x5b, 0xdb, 0x3b, 0xbb, 0x7b, 0xfb,
-            0x07, 0x87, 0x47, 0xc7, 0x27, 0xa7, 0x67, 0xe7,
-            0x17, 0x97, 0x57, 0xd7, 0x37, 0xb7, 0x77, 0xf7,
-            0x0f, 0x8f, 0x4f, 0xcf, 0x2f, 0xaf, 0x6f, 0xef,
-            0x1f, 0x9f, 0x5f, 0xdf, 0x3f, 0xbf, 0x7f, 0xff
-        };
-
-        /// <summary>
-        /// 整数转成二进制字节数组
-        /// </summary>
-        /// <param name="num">整数</param>
-        /// <param name="length">整数长度</param>
-        /// <param name="isLowNumHigh">是否高位在数组索引低</param>
-        /// <returns>二进制字节数组</returns>
-        public static Result<byte[]> NumberToBytes(ulong num, uint length, bool isLowNumHigh = false)
-        {
-            if (length > 8)
-            {
-                return new(new ArgumentException(
-                    "Unsigned long number can't over 8 bytes(64 bits).",
-                    nameof(length)
-                ));
-            }
-
-            var arr = new byte[length];
-
-            if (isLowNumHigh)
-            {
-                for (var i = 0; i < length; i++)
-                {
-                    arr[length - 1 - i] = Convert.ToByte((num >> (i << 3)) & (0xFF));
-                }
-            }
-            else
-            {
-                for (var i = 0; i < length; i++)
-                {
-                    arr[i] = Convert.ToByte((num >> ((int)(length - 1 - i) << 3)) & (0xFF));
-                }
-            }
-            return arr;
-        }
-
-        /// <summary>
-        /// 二进制字节数组转成64bits整数
-        /// </summary>
-        /// <param name="bytes">二进制字节数组</param>
-        /// <param name="isLowNumHigh">是否高位在数组索引低</param>
-        /// <returns>整数</returns>
-        public static Result<UInt64> BytesToUInt64(byte[] bytes, bool isLowNumHigh = false)
-        {
-            if (bytes.Length > 8)
-            {
-                return new(new ArgumentException(
-                    "Unsigned long number can't over 8 bytes(64 bits).",
-                    nameof(bytes)
-                ));
-            }
-
-            UInt64 num = 0;
-            int len = bytes.Length;
-
-            try
-            {
-                if (isLowNumHigh)
-                {
-                    for (var i = 0; i < len; i++)
-                    {
-                        num += Convert.ToUInt64((UInt64)bytes[len - 1 - i] << (i << 3));
-                    }
-                }
-                else
-                {
-                    for (var i = 0; i < len; i++)
-                    {
-                        num += Convert.ToUInt64((UInt64)bytes[i] << ((int)(len - 1 - i) << 3));
-                    }
-                }
-
-                return num;
-            }
-            catch (Exception error)
-            {
-                return new(error);
-            }
-        }
-
-        /// <summary>
-        /// 二进制字节数组转成32bits整数
-        /// </summary>
-        /// <param name="bytes">二进制字节数组</param>
-        /// <param name="isLowNumHigh">是否高位在数组索引低</param>
-        /// <returns>整数</returns>
-        public static Result<UInt32> BytesToUInt32(byte[] bytes, bool isLowNumHigh = false)
-        {
-            if (bytes.Length > 4)
-            {
-                return new(new ArgumentException(
-                    "Unsigned long number can't over 4 bytes(32 bits).",
-                    nameof(bytes)
-                ));
-            }
-
-            UInt32 num = 0;
-            int len = bytes.Length;
-
-            try
-            {
-                if (isLowNumHigh)
-                {
-                    for (var i = 0; i < len; i++)
-                    {
-                        num += Convert.ToUInt32((UInt32)bytes[len - 1 - i] << (i << 3));
-                    }
-                }
-                else
-                {
-                    for (var i = 0; i < len; i++)
-                    {
-                        num += Convert.ToUInt32((UInt32)bytes[i] << ((int)(len - 1 - i) << 3));
-                    }
-                }
-
-                return num;
-            }
-            catch (Exception error)
-            {
-                return new(error);
-            }
-
-        }
-
-        /// <summary>
-        /// [TODO:description]
-        /// </summary>
-        /// <param name="uintArray">[TODO:parameter]</param>
-        /// <returns>[TODO:return]</returns>
-        public static Result<byte[]> UInt32ArrayToBytes(UInt32[] uintArray)
-        {
-            byte[] byteArray = new byte[uintArray.Length * 4];
-            try
-            {
-                Buffer.BlockCopy(uintArray, 0, byteArray, 0, uintArray.Length * 4);
-                return byteArray;
-            }
-            catch (Exception error)
-            {
-                return new(error);
-            }
-        }
-
-
-
-        /// <summary>
-        /// 比特合并成二进制字节
-        /// </summary>
-        /// <param name="bits1">第一个比特值</param>
-        /// <param name="bits1Len">第一个比特值的长度（位数）</param>
-        /// <param name="bits2">第二个比特值</param>
-        /// <param name="bits2Len">第二个比特值的长度（位数）</param>
-        /// <returns>合并后的二进制字节数组</returns>
-        public static Result<byte[]> MultiBitsToBytes(ulong bits1, uint bits1Len, ulong bits2, uint bits2Len)
-        {
-            return NumberToBytes(MultiBitsToNumber(bits1, bits1Len, bits2, bits2Len).Value,
-                        (bits1Len + bits2Len) % 8 != 0 ? (bits1Len + bits2Len) / 8 + 1 : (bits1Len + bits2Len) / 8);
-        }
-
-        /// <summary>
-        /// 比特合并成整型
-        /// </summary>
-        /// <param name="bits1">第一个比特值</param>
-        /// <param name="bits1Len">第一个比特值的长度（位数）</param>
-        /// <param name="bits2">第二个比特值</param>
-        /// <param name="bits2Len">第二个比特值的长度（位数）</param>
-        /// <returns>合并后的整型值</returns>
-        public static Result<ulong> MultiBitsToNumber(ulong bits1, uint bits1Len, ulong bits2, uint bits2Len)
-        {
-            if (bits1Len + bits2Len > 64) return new(new ArgumentException("Two Bits is more than 64 bits"));
-
-            ulong num = (bits1 << Convert.ToInt32(bits2Len)) | bits2;
-            return num;
-        }
-
-        /// <summary>
-        /// 比特合并成整型
-        /// </summary>
-        /// <param name="bits1">第一个比特值</param>
-        /// <param name="bits1Len">第一个比特值的长度（位数）</param>
-        /// <param name="bits2">第二个比特值</param>
-        /// <param name="bits2Len">第二个比特值的长度（位数）</param>
-        /// <returns>合并后的整型值</returns>
-        public static Result<uint> MultiBitsToNumber(uint bits1, uint bits1Len, uint bits2, uint bits2Len)
-        {
-            if (bits1Len + bits2Len > 64) return new(new ArgumentException("Two Bits is more than 64 bits"));
-
-            uint num = (bits1 << Convert.ToInt32(bits2Len)) | bits2;
-            return num;
-        }
-
-        /// <summary>
-        /// 比特位检查
-        /// </summary>
-        /// <param name="srcBits">源比特值</param>
-        /// <param name="dstBits">目标比特值</param>
-        /// <param name="mask">掩码（默认为全1）</param>
-        /// <returns>检查结果（是否匹配）</returns>
-        public static bool BitsCheck(ulong srcBits, ulong dstBits, ulong mask = 0xFFFF_FFFF_FFFF_FFFF)
-        {
-            return (srcBits & mask) == dstBits;
-        }
-
-        /// <summary>
-        /// 比特位检查
-        /// </summary>
-        /// <param name="srcBits">源比特值</param>
-        /// <param name="dstBits">目标比特值</param>
-        /// <param name="mask">掩码（默认为全1）</param>
-        /// <returns>检查结果（是否匹配）</returns>
-        public static bool BitsCheck(uint srcBits, uint dstBits, uint mask = 0xFFFF_FFFF)
-        {
-            return (srcBits & mask) == dstBits;
-        }
-
-        /// <summary>
-        /// 获取整型对应位置的比特
-        /// </summary>
-        /// <param name="srcBits">整型数字</param>
-        /// <param name="location">位置</param>
-        /// <returns>比特</returns>
-        public static Result<bool> ToBit(UInt32 srcBits, int location)
-        {
-            if (location < 0)
-                return new(new ArgumentException(
-                    "Location can't be negetive", nameof(location)));
-
-            return ((srcBits >> location) & ((UInt32)0b1)) == 1;
-        }
-
-        /// <summary>
-        /// 将BitArray转化为32bits无符号整型
-        /// </summary>
-        /// <param name="bits">BitArray比特数组</param>
-        /// <returns>32bits无符号整型</returns>
-        public static Result<UInt32> BitsToNumber(BitArray bits)
-        {
-            if (bits.Length > 32)
-                throw new ArgumentException("Argument length shall be at most 32 bits.");
-
-            var array = new UInt32[1];
-            bits.CopyTo(array, 0);
-            return array[0];
-        }
-
-
-        /// <summary>
-        /// 字符串转二进制字节数组
-        /// </summary>
-        /// <param name="str">输入的字符串</param>
-        /// <param name="numBase">进制（默认为16进制）</param>
-        /// <returns>转换后的二进制字节数组</returns>
-        public static byte[] StringToBytes(string str, int numBase = 16)
-        {
-            var len = str.Length;
-            var bytesLen = len / 2;
-            var bytes = new byte[bytesLen];
-
-            for (var i = 0; i < bytesLen; i++)
-            {
-                bytes[i] = Convert.ToByte(str.Substring(i * 2, 2), 16);
-            }
-
-            return bytes;
-        }
-
-        /// <summary>
-        /// 反转字节数组中的子数组
-        /// </summary>
-        /// <param name="srcBytes">源字节数组</param>
-        /// <param name="distance">子数组的长度（反转的步长）</param>
-        /// <returns>反转后的字节数组</returns>
-        public static Result<byte[]> ReverseBytes(byte[] srcBytes, int distance)
-        {
-            if (distance <= 0)
-                return new(new ArgumentException("Distance can't be negetive", nameof(distance)));
-
-            var srcBytesLen = srcBytes.Length;
-            if (distance > srcBytesLen)
-                return new(new ArgumentException(
-                    "Distance is larger than bytesArray", nameof(distance)));
-            if (srcBytesLen % distance != 0)
-                return new(new ArgumentException(
-                    "The length of bytes can't be divided by distance without reminder", nameof(distance)));
-
-            var dstBytes = new byte[srcBytesLen];
-            var buffer = new byte[distance];
-
-            for (int i = 0; i < srcBytesLen; i += distance)
-            {
-                var end = i + distance;
-                buffer = srcBytes[i..end];
-                Array.Reverse(buffer);
-                Array.Copy(buffer, 0, dstBytes, i, distance);
-            }
-
-            return dstBytes;
-        }
-
-        /// <summary>
-        /// 反转字节内比特顺序（使用查找表的方法）
-        /// </summary>
-        /// <param name="srcByte">字节</param>
-        /// <returns>反转后的字节</returns>
-        public static byte ReverseBits(byte srcByte)
-        {
-            return BitReverseTable[srcByte];
-        }
-
-        /// <summary>
-        /// 反转字节数组的字节内比特顺序（使用查找表的方法）
-        /// </summary>
-        /// <param name="srcBytes">字节数组</param>
-        /// <returns>反转后的字节字节数组</returns>
-        public static byte[] ReverseBits(byte[] srcBytes)
-        {
-            var bytesLen = srcBytes.Length;
-            var dstBytes = new byte[bytesLen];
-            for (int i = 0; i < bytesLen; i++)
-            {
-                dstBytes[i] = BitReverseTable[srcBytes[i]];
-            }
-            return dstBytes;
-        }
-    }
-
-    /// <summary>
-    /// 字符串处理工具
-    /// </summary>
-    public class String
-    {
-        /// <summary>
-        /// 反转字符串
-        /// </summary>
-        /// <param name="s">输入的字符串</param>
-        /// <returns>反转后的字符串</returns>
-        public static string Reverse(string s)
-        {
-            char[] charArray = s.ToCharArray();
-            Array.Reverse(charArray);
-            return new string(charArray);
-        }
-
-    }
-
-}

server/src/Common/Image.cs

@@ -0,0 +1,358 @@
+using System.Text;
+using DotNext;
+using SixLabors.ImageSharp;
+using SixLabors.ImageSharp.Formats.Jpeg;
+using SixLabors.ImageSharp.PixelFormats;
+
+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
+{
+    /// <summary>
+    /// RGB565
+    /// </summary>
+    RGB565,
+
+    /// <summary>
+    /// RGB888 / RGB24
+    /// </summary>
+    RGB24,
+
+    /// <summary>
+    /// RGBA8888 / RGBA32
+    /// </summary>
+    RGBA32,
+
+    /// <summary>
+    /// 灰度图
+    /// </summary>
+    Grayscale8
+}
+
+/// <summary>
+/// 图像格式信息
+/// </summary>
+public record ImageFormatInfo(string Name, int BytesPerPixel, string Description);

server/src/Common/Number.cs

@@ -0,0 +1,370 @@
+using System.Collections;
+using DotNext;
+
+namespace Common;
+/// <summary>
+/// 数字处理工具
+/// </summary>
+public class Number
+{
+    private static readonly byte[] BitReverseTable = new byte[] {
+            0x00, 0x80, 0x40, 0xc0, 0x20, 0xa0, 0x60, 0xe0,
+            0x10, 0x90, 0x50, 0xd0, 0x30, 0xb0, 0x70, 0xf0,
+            0x08, 0x88, 0x48, 0xc8, 0x28, 0xa8, 0x68, 0xe8,
+            0x18, 0x98, 0x58, 0xd8, 0x38, 0xb8, 0x78, 0xf8,
+            0x04, 0x84, 0x44, 0xc4, 0x24, 0xa4, 0x64, 0xe4,
+            0x14, 0x94, 0x54, 0xd4, 0x34, 0xb4, 0x74, 0xf4,
+            0x0c, 0x8c, 0x4c, 0xcc, 0x2c, 0xac, 0x6c, 0xec,
+            0x1c, 0x9c, 0x5c, 0xdc, 0x3c, 0xbc, 0x7c, 0xfc,
+            0x02, 0x82, 0x42, 0xc2, 0x22, 0xa2, 0x62, 0xe2,
+            0x12, 0x92, 0x52, 0xd2, 0x32, 0xb2, 0x72, 0xf2,
+            0x0a, 0x8a, 0x4a, 0xca, 0x2a, 0xaa, 0x6a, 0xea,
+            0x1a, 0x9a, 0x5a, 0xda, 0x3a, 0xba, 0x7a, 0xfa,
+            0x06, 0x86, 0x46, 0xc6, 0x26, 0xa6, 0x66, 0xe6,
+            0x16, 0x96, 0x56, 0xd6, 0x36, 0xb6, 0x76, 0xf6,
+            0x0e, 0x8e, 0x4e, 0xce, 0x2e, 0xae, 0x6e, 0xee,
+            0x1e, 0x9e, 0x5e, 0xde, 0x3e, 0xbe, 0x7e, 0xfe,
+            0x01, 0x81, 0x41, 0xc1, 0x21, 0xa1, 0x61, 0xe1,
+            0x11, 0x91, 0x51, 0xd1, 0x31, 0xb1, 0x71, 0xf1,
+            0x09, 0x89, 0x49, 0xc9, 0x29, 0xa9, 0x69, 0xe9,
+            0x19, 0x99, 0x59, 0xd9, 0x39, 0xb9, 0x79, 0xf9,
+            0x05, 0x85, 0x45, 0xc5, 0x25, 0xa5, 0x65, 0xe5,
+            0x15, 0x95, 0x55, 0xd5, 0x35, 0xb5, 0x75, 0xf5,
+            0x0d, 0x8d, 0x4d, 0xcd, 0x2d, 0xad, 0x6d, 0xed,
+            0x1d, 0x9d, 0x5d, 0xdd, 0x3d, 0xbd, 0x7d, 0xfd,
+            0x03, 0x83, 0x43, 0xc3, 0x23, 0xa3, 0x63, 0xe3,
+            0x13, 0x93, 0x53, 0xd3, 0x33, 0xb3, 0x73, 0xf3,
+            0x0b, 0x8b, 0x4b, 0xcb, 0x2b, 0xab, 0x6b, 0xeb,
+            0x1b, 0x9b, 0x5b, 0xdb, 0x3b, 0xbb, 0x7b, 0xfb,
+            0x07, 0x87, 0x47, 0xc7, 0x27, 0xa7, 0x67, 0xe7,
+            0x17, 0x97, 0x57, 0xd7, 0x37, 0xb7, 0x77, 0xf7,
+            0x0f, 0x8f, 0x4f, 0xcf, 0x2f, 0xaf, 0x6f, 0xef,
+            0x1f, 0x9f, 0x5f, 0xdf, 0x3f, 0xbf, 0x7f, 0xff
+        };
+
+    /// <summary>
+    /// 整数转成二进制字节数组
+    /// </summary>
+    /// <param name="num">整数</param>
+    /// <param name="length">整数长度</param>
+    /// <param name="isLowNumHigh">是否高位在数组索引低</param>
+    /// <returns>二进制字节数组</returns>
+    public static Result<byte[]> NumberToBytes(ulong num, uint length, bool isLowNumHigh = false)
+    {
+        if (length > 8)
+        {
+            return new(new ArgumentException(
+                "Unsigned long number can't over 8 bytes(64 bits).",
+                nameof(length)
+            ));
+        }
+
+        var arr = new byte[length];
+
+        if (isLowNumHigh)
+        {
+            for (var i = 0; i < length; i++)
+            {
+                arr[length - 1 - i] = Convert.ToByte((num >> (i << 3)) & (0xFF));
+            }
+        }
+        else
+        {
+            for (var i = 0; i < length; i++)
+            {
+                arr[i] = Convert.ToByte((num >> ((int)(length - 1 - i) << 3)) & (0xFF));
+            }
+        }
+        return arr;
+    }
+
+    /// <summary>
+    /// 二进制字节数组转成64bits整数
+    /// </summary>
+    /// <param name="bytes">二进制字节数组</param>
+    /// <param name="isLowNumHigh">是否高位在数组索引低</param>
+    /// <returns>整数</returns>
+    public static Result<UInt64> BytesToUInt64(byte[] bytes, bool isLowNumHigh = false)
+    {
+        if (bytes.Length > 8)
+        {
+            return new(new ArgumentException(
+                "Unsigned long number can't over 8 bytes(64 bits).",
+                nameof(bytes)
+            ));
+        }
+
+        UInt64 num = 0;
+        int len = bytes.Length;
+
+        try
+        {
+            if (isLowNumHigh)
+            {
+                for (var i = 0; i < len; i++)
+                {
+                    num += Convert.ToUInt64((UInt64)bytes[len - 1 - i] << (i << 3));
+                }
+            }
+            else
+            {
+                for (var i = 0; i < len; i++)
+                {
+                    num += Convert.ToUInt64((UInt64)bytes[i] << ((int)(len - 1 - i) << 3));
+                }
+            }
+
+            return num;
+        }
+        catch (Exception error)
+        {
+            return new(error);
+        }
+    }
+
+    /// <summary>
+    /// 二进制字节数组转成32bits整数
+    /// </summary>
+    /// <param name="bytes">二进制字节数组</param>
+    /// <param name="isLowNumHigh">是否高位在数组索引低</param>
+    /// <returns>整数</returns>
+    public static Result<UInt32> BytesToUInt32(byte[] bytes, bool isLowNumHigh = false)
+    {
+        if (bytes.Length > 4)
+        {
+            return new(new ArgumentException(
+                "Unsigned long number can't over 4 bytes(32 bits).",
+                nameof(bytes)
+            ));
+        }
+
+        UInt32 num = 0;
+        int len = bytes.Length;
+
+        try
+        {
+            if (isLowNumHigh)
+            {
+                for (var i = 0; i < len; i++)
+                {
+                    num += Convert.ToUInt32((UInt32)bytes[len - 1 - i] << (i << 3));
+                }
+            }
+            else
+            {
+                for (var i = 0; i < len; i++)
+                {
+                    num += Convert.ToUInt32((UInt32)bytes[i] << ((int)(len - 1 - i) << 3));
+                }
+            }
+
+            return num;
+        }
+        catch (Exception error)
+        {
+            return new(error);
+        }
+
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="uintArray">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    public static Result<byte[]> UInt32ArrayToBytes(UInt32[] uintArray)
+    {
+        byte[] byteArray = new byte[uintArray.Length * 4];
+        try
+        {
+            Buffer.BlockCopy(uintArray, 0, byteArray, 0, uintArray.Length * 4);
+            return byteArray;
+        }
+        catch (Exception error)
+        {
+            return new(error);
+        }
+    }
+
+
+
+    /// <summary>
+    /// 比特合并成二进制字节
+    /// </summary>
+    /// <param name="bits1">第一个比特值</param>
+    /// <param name="bits1Len">第一个比特值的长度（位数）</param>
+    /// <param name="bits2">第二个比特值</param>
+    /// <param name="bits2Len">第二个比特值的长度（位数）</param>
+    /// <returns>合并后的二进制字节数组</returns>
+    public static Result<byte[]> MultiBitsToBytes(ulong bits1, uint bits1Len, ulong bits2, uint bits2Len)
+    {
+        return NumberToBytes(MultiBitsToNumber(bits1, bits1Len, bits2, bits2Len).Value,
+                    (bits1Len + bits2Len) % 8 != 0 ? (bits1Len + bits2Len) / 8 + 1 : (bits1Len + bits2Len) / 8);
+    }
+
+    /// <summary>
+    /// 比特合并成整型
+    /// </summary>
+    /// <param name="bits1">第一个比特值</param>
+    /// <param name="bits1Len">第一个比特值的长度（位数）</param>
+    /// <param name="bits2">第二个比特值</param>
+    /// <param name="bits2Len">第二个比特值的长度（位数）</param>
+    /// <returns>合并后的整型值</returns>
+    public static Result<ulong> MultiBitsToNumber(ulong bits1, uint bits1Len, ulong bits2, uint bits2Len)
+    {
+        if (bits1Len + bits2Len > 64) return new(new ArgumentException("Two Bits is more than 64 bits"));
+
+        ulong num = (bits1 << Convert.ToInt32(bits2Len)) | bits2;
+        return num;
+    }
+
+    /// <summary>
+    /// 比特合并成整型
+    /// </summary>
+    /// <param name="bits1">第一个比特值</param>
+    /// <param name="bits1Len">第一个比特值的长度（位数）</param>
+    /// <param name="bits2">第二个比特值</param>
+    /// <param name="bits2Len">第二个比特值的长度（位数）</param>
+    /// <returns>合并后的整型值</returns>
+    public static Result<uint> MultiBitsToNumber(uint bits1, uint bits1Len, uint bits2, uint bits2Len)
+    {
+        if (bits1Len + bits2Len > 64) return new(new ArgumentException("Two Bits is more than 64 bits"));
+
+        uint num = (bits1 << Convert.ToInt32(bits2Len)) | bits2;
+        return num;
+    }
+
+    /// <summary>
+    /// 比特位检查
+    /// </summary>
+    /// <param name="srcBits">源比特值</param>
+    /// <param name="dstBits">目标比特值</param>
+    /// <param name="mask">掩码（默认为全1）</param>
+    /// <returns>检查结果（是否匹配）</returns>
+    public static bool BitsCheck(ulong srcBits, ulong dstBits, ulong mask = 0xFFFF_FFFF_FFFF_FFFF)
+    {
+        return (srcBits & mask) == dstBits;
+    }
+
+    /// <summary>
+    /// 比特位检查
+    /// </summary>
+    /// <param name="srcBits">源比特值</param>
+    /// <param name="dstBits">目标比特值</param>
+    /// <param name="mask">掩码（默认为全1）</param>
+    /// <returns>检查结果（是否匹配）</returns>
+    public static bool BitsCheck(uint srcBits, uint dstBits, uint mask = 0xFFFF_FFFF)
+    {
+        return (srcBits & mask) == dstBits;
+    }
+
+    /// <summary>
+    /// 获取整型对应位置的比特
+    /// </summary>
+    /// <param name="srcBits">整型数字</param>
+    /// <param name="location">位置</param>
+    /// <returns>比特</returns>
+    public static Result<bool> ToBit(UInt32 srcBits, int location)
+    {
+        if (location < 0)
+            return new(new ArgumentException(
+                "Location can't be negetive", nameof(location)));
+
+        return ((srcBits >> location) & ((UInt32)0b1)) == 1;
+    }
+
+    /// <summary>
+    /// 将BitArray转化为32bits无符号整型
+    /// </summary>
+    /// <param name="bits">BitArray比特数组</param>
+    /// <returns>32bits无符号整型</returns>
+    public static Result<UInt32> BitsToNumber(BitArray bits)
+    {
+        if (bits.Length > 32)
+            throw new ArgumentException("Argument length shall be at most 32 bits.");
+
+        var array = new UInt32[1];
+        bits.CopyTo(array, 0);
+        return array[0];
+    }
+
+
+    /// <summary>
+    /// 字符串转二进制字节数组
+    /// </summary>
+    /// <param name="str">输入的字符串</param>
+    /// <param name="numBase">进制（默认为16进制）</param>
+    /// <returns>转换后的二进制字节数组</returns>
+    public static byte[] StringToBytes(string str, int numBase = 16)
+    {
+        var len = str.Length;
+        var bytesLen = len / 2;
+        var bytes = new byte[bytesLen];
+
+        for (var i = 0; i < bytesLen; i++)
+        {
+            bytes[i] = Convert.ToByte(str.Substring(i * 2, 2), 16);
+        }
+
+        return bytes;
+    }
+
+    /// <summary>
+    /// 反转字节数组中的子数组
+    /// </summary>
+    /// <param name="srcBytes">源字节数组</param>
+    /// <param name="distance">子数组的长度（反转的步长）</param>
+    /// <returns>反转后的字节数组</returns>
+    public static Result<byte[]> ReverseBytes(byte[] srcBytes, int distance)
+    {
+        if (distance <= 0)
+            return new(new ArgumentException("Distance can't be negetive", nameof(distance)));
+
+        var srcBytesLen = srcBytes.Length;
+        if (distance > srcBytesLen)
+            return new(new ArgumentException(
+                "Distance is larger than bytesArray", nameof(distance)));
+        if (srcBytesLen % distance != 0)
+            return new(new ArgumentException(
+                "The length of bytes can't be divided by distance without reminder", nameof(distance)));
+
+        var dstBytes = new byte[srcBytesLen];
+        var buffer = new byte[distance];
+
+        for (int i = 0; i < srcBytesLen; i += distance)
+        {
+            var end = i + distance;
+            buffer = srcBytes[i..end];
+            Array.Reverse(buffer);
+            Array.Copy(buffer, 0, dstBytes, i, distance);
+        }
+
+        return dstBytes;
+    }
+
+    /// <summary>
+    /// 反转字节内比特顺序（使用查找表的方法）
+    /// </summary>
+    /// <param name="srcByte">字节</param>
+    /// <returns>反转后的字节</returns>
+    public static byte ReverseBits(byte srcByte)
+    {
+        return BitReverseTable[srcByte];
+    }
+
+    /// <summary>
+    /// 反转字节数组的字节内比特顺序（使用查找表的方法）
+    /// </summary>
+    /// <param name="srcBytes">字节数组</param>
+    /// <returns>反转后的字节字节数组</returns>
+    public static byte[] ReverseBits(byte[] srcBytes)
+    {
+        var bytesLen = srcBytes.Length;
+        var dstBytes = new byte[bytesLen];
+        for (int i = 0; i < bytesLen; i++)
+        {
+            dstBytes[i] = BitReverseTable[srcBytes[i]];
+        }
+        return dstBytes;
+    }
+}

server/src/Common/SemaphorePool.cs

@@ -0,0 +1,116 @@
+using System.Collections.Concurrent;
+using DotNext;
+
+namespace Common;
+
+/// <summary>
+/// [TODO:description]
+/// </summary>
+public class SemaphorePool
+{
+    private SemaphoreSlim semaphore;
+    private ConcurrentQueue<int> queue;
+    private int beginNum;
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    public int RemainingCount { get; }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    public int MaxCount { get; }
+
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="initialCount">[TODO:parameter]</param>
+    /// <param name="beginNum">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    public SemaphorePool(int initialCount, int beginNum = 0)
+    {
+        semaphore = new SemaphoreSlim(initialCount);
+        queue = new ConcurrentQueue<int>();
+        this.beginNum = beginNum;
+        this.RemainingCount = initialCount;
+        this.MaxCount = initialCount;
+        for (int i = 0; i < initialCount; i++)
+        {
+            queue.Enqueue(beginNum + i);
+        }
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="initialCount">[TODO:parameter]</param>
+    /// <param name="maxCount">[TODO:parameter]</param>
+    /// <param name="beginNum">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    public SemaphorePool(int initialCount, int maxCount, int beginNum = 0)
+    {
+        semaphore = new SemaphoreSlim(initialCount, maxCount);
+        queue = new ConcurrentQueue<int>();
+        this.beginNum = beginNum;
+        this.RemainingCount = initialCount;
+        this.MaxCount = maxCount;
+        for (int i = 0; i < initialCount; i++)
+        {
+            queue.Enqueue(beginNum + i);
+        }
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <returns>[TODO:return]</returns>
+    public Result<int> Wait()
+    {
+        semaphore.Wait();
+
+        int pop;
+        if (queue.TryDequeue(out pop))
+        {
+            return pop;
+        }
+        else
+        {
+            return new(new Exception($"TODO"));
+        }
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <returns>[TODO:return]</returns>
+    public async ValueTask<Result<int>> WaitAsync()
+    {
+        await semaphore.WaitAsync();
+
+        int pop;
+        if (queue.TryDequeue(out pop))
+        {
+            return pop;
+        }
+        else
+        {
+            return new(new Exception($"TODO"));
+        }
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <returns>[TODO:return]</returns>
+    public void Release()
+    {
+        semaphore.Release();
+        queue.Clear();
+        for (int i = 0; i < MaxCount; i++)
+        {
+            queue.Enqueue(beginNum + i);
+        }
+    }
+}

server/src/Common/String.cs

@@ -0,0 +1,20 @@
+namespace Common;
+
+/// <summary>
+/// 字符串处理工具
+/// </summary>
+public class String
+{
+    /// <summary>
+    /// 反转字符串
+    /// </summary>
+    /// <param name="s">输入的字符串</param>
+    /// <returns>反转后的字符串</returns>
+    public static string Reverse(string s)
+    {
+        char[] charArray = s.ToCharArray();
+        Array.Reverse(charArray);
+        return new string(charArray);
+    }
+
+}

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 JtagClient.Jtag(address, port);
+        var jtagCtrl = new Peripherals.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 JtagClient.Jtag(address, port);
+        var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
         var ret = await jtagCtrl.ReadStatusReg();
 
         if (ret.IsSuccessful)
         {
             var binaryValue = Common.String.Reverse(Convert.ToString(ret.Value, 2).PadLeft(32, '0'));
-            var decodeValue = new JtagClient.JtagStatusReg(ret.Value);
+            var decodeValue = new Peripherals.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 JtagClient.Jtag(address, port);
+                    var jtagCtrl = new Peripherals.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 JtagClient.Jtag(address, port);
+        var jtagCtrl = new Peripherals.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 JtagClient.Jtag(address, port);
+        var jtagCtrl = new Peripherals.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 JtagClient.Jtag(address, port);
+        var jtagCtrl = new Peripherals.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 RemoteUpdateClient.RemoteUpdater(address, port);
+            var remoteUpdater = new Peripherals.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 RemoteUpdateClient.RemoteUpdater(address, port);
+            var remoteUpdater = new Peripherals.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 RemoteUpdateClient.RemoteUpdater(address, port);
+        var remoteUpdater = new Peripherals.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 RemoteUpdateClient.RemoteUpdater(address, port);
+        var remoteUpdater = new Peripherals.RemoteUpdateClient.RemoteUpdater(address, port);
         var ret = await remoteUpdater.GetVersion();
 
         if (ret.IsSuccessful)

server/src/Controllers/TutorialController.cs

@@ -14,6 +14,11 @@ public class TutorialController : ControllerBase
     private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
     private readonly IWebHostEnvironment _environment;
 
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="environment">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
     public TutorialController(IWebHostEnvironment environment)
     {
         _environment = environment;

server/src/Controllers/UDPController.cs

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

server/src/Controllers/VideoStreamController.cs

@@ -0,0 +1,245 @@
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Cors;
+using Microsoft.AspNetCore.Mvc;
+
+/// <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
+    {
+        /// <summary>
+        /// 摄像头地址
+        /// </summary>
+        [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; } = "";
+
+        /// <summary>
+        /// 摄像头端口
+        /// </summary>
+        [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(status);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "获取 HTTP 视频流服务状态失败");
+            return TypedResults.InternalServerError(ex.Message);
+        }
+    }
+
+    /// <summary>
+    /// 获取 HTTP 视频流信息
+    /// </summary>
+    /// <returns>流信息</returns>
+    [HttpGet("StreamInfo")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public IResult GetStreamInfo()
+    {
+        try
+        {
+            logger.Info("获取 HTTP 视频流信息");
+            return TypedResults.Ok(new
+            {
+                frameRate = _videoStreamService.FrameRate,
+                frameWidth = _videoStreamService.FrameWidth,
+                frameHeight = _videoStreamService.FrameHeight,
+                format = "MJPEG",
+                htmlUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-feed.html",
+                mjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream",
+                snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot",
+            });
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "获取 HTTP 视频流信息失败");
+            return TypedResults.InternalServerError(ex.Message);
+        }
+    }
+
+    /// <summary>
+    /// 配置摄像头连接参数
+    /// </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>
+    /// 控制 HTTP 视频流服务开关
+    /// </summary>
+    /// <param name="enabled">是否启用服务</param>
+    /// <returns>操作结果</returns>
+    [HttpPost("SetEnabled")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public IResult SetEnabled([FromQuery] bool enabled)
+    {
+        logger.Info("设置视频流服务开关: {Enabled}", enabled);
+        _videoStreamService.Enabled = enabled;
+        return TypedResults.Ok(new
+        {
+            success = true,
+            enabled = _videoStreamService.Enabled
+        });
+    }
+
+    /// <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请求检查视频流服务是否可访问
+            bool isConnected = false;
+            using (var httpClient = new HttpClient())
+            {
+                httpClient.Timeout = TimeSpan.FromSeconds(2); // 设置较短的超时时间
+                var response = await httpClient.GetAsync($"http://localhost:{_videoStreamService.ServerPort}/");
+
+                // 只要能连接上就认为成功，不管返回状态
+                isConnected = response.IsSuccessStatusCode;
+            }
+
+            logger.Info("测试摄像头连接");
+
+            var (isSuccess, message) = await _videoStreamService.TestCameraConnectionAsync();
+
+            return TypedResults.Ok(new
+            {
+                isConnected = isConnected,
+                success = isSuccess,
+                message = message,
+                cameraAddress = _videoStreamService.CameraAddress,
+                cameraPort = _videoStreamService.CameraPort,
+                timestamp = DateTime.Now
+            });
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "HTTP 视频流连接测试失败");
+            // 连接失败但不抛出异常，而是返回连接失败的结果
+            return TypedResults.Ok(false);
+        }
+    }
+}

server/src/Peripherals/CameraClient.cs

@@ -0,0 +1,85 @@
+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;
+    }
+
+    public async ValueTask<Result<bool>> Init()
+    {
+        var i2c = new Peripherals.I2cClient.I2c(this.address, this.port, this.timeout);
+        var ret = await i2c.WriteData(0x78, new byte[] { 0x30, 0x08, 0x02 }, Peripherals.I2cClient.I2cProtocol.I2c);
+        if (!ret.IsSuccessful)
+        {
+            logger.Error($"I2C write failed during camera initialization for {this.address}:{this.port}, error: {ret.Error}");
+            return new(ret.Error);
+        }
+
+        if (!ret.Value)
+        {
+            logger.Error($"I2C write returned unsuccessful result during camera initialization for {this.address}:{this.port}");
+            return false;
+        }
+
+        return true;
+    }
+
+    /// <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.ReadAddr4Bytes(
+            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);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 1);
         logger.Trace("Clear udp data finished");
 
         var ret = await UDPClientPool.WriteAddr(
-                this.ep, DDSAddr.Channel[channelNum].WaveSelect, (UInt32)waveNum, this.timeout);
+                this.ep, 1, DDSAddr.Channel[channelNum].WaveSelect, (UInt32)waveNum, this.timeout);
         if (!ret.IsSuccessful)
             return new(ret.Error);
         return ret.Value;
@@ -132,11 +132,11 @@ public class DDS
         if (waveNum < 0 || waveNum > 3) return new(new ArgumentException(
             $"Wave number should be 0 ~ 3 instead of {waveNum}", nameof(waveNum)));
 
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 1);
         logger.Trace("Clear udp data finished");
 
         var ret = await UDPClientPool.WriteAddr(
-                this.ep, DDSAddr.Channel[channelNum].FreqCtrl[waveNum], step, this.timeout);
+                this.ep, 1, DDSAddr.Channel[channelNum].FreqCtrl[waveNum], step, this.timeout);
         if (!ret.IsSuccessful)
             return new(ret.Error);
         return ret.Value;
@@ -158,11 +158,11 @@ public class DDS
         if (phase < 0 || phase > 4096) return new(new ArgumentException(
             $"Phase should be 0 ~ 4096 instead of {phase}", nameof(phase)));
 
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 1);
         logger.Trace("Clear udp data finished");
 
         var ret = await UDPClientPool.WriteAddr(
-                this.ep, DDSAddr.Channel[channelNum].PhaseCtrl[waveNum], (UInt32)phase, this.timeout);
+                this.ep, 1, DDSAddr.Channel[channelNum].PhaseCtrl[waveNum], (UInt32)phase, this.timeout);
         if (!ret.IsSuccessful)
             return new(ret.Error);
         return ret.Value;

server/src/Peripherals/I2cClient.cs

@@ -0,0 +1,269 @@
+using System.Net;
+using DotNext;
+
+namespace Peripherals.I2cClient;
+
+static class I2cAddr
+{
+
+    const UInt32 Base = 0x6000_0000;
+
+    /// <summary> 
+    /// 0x0000_0000: 
+    /// [7:0] 本次传输的i2c地址(最高位总为0);
+    /// [8] 1为读，0为写;
+    /// [16] 1为SCCB协议，0为I2C协议;
+    /// [24] 1为开启本次传输，自动置零
+    /// </summary>
+    public const UInt32 BaseConfig = Base + 0x0000_0000;
+
+    /// <summary> 
+    /// 0x0000_0001:
+    /// [15:0] 本次传输的数据量（以字节为单位，0为传1个字节）;
+    /// [31:16] 若本次传输为读的DUMMY数据量（字节为单位，0为传1个字节）
+    /// </summary>
+    public const UInt32 TranConfig = Base + 0x0000_0001;
+
+    /// <summary> 
+    /// 0x0000_0002: [0] cmd_done; [8] cmd_error;
+    /// </summary>
+    public const UInt32 Flag = Base + 0x0000_0002;
+
+    /// <summary> 
+    /// 0x0000_0003: FIFO写入口，仅低8位有效，只写
+    /// </summary>
+    public const UInt32 Write = Base + 0x0000_0003;
+
+    /// <summary> 
+    /// 0x0000_0004: FIFO读出口，仅低8位有效，只读
+    /// </summary>
+    public const UInt32 Read = Base + 0x0000_0003;
+
+    /// <summary> 
+    /// 0x0000_0005: [0] FIFO写入口清空；[8] FIFO读出口清空；
+    /// </summary>
+    public const UInt32 Clear = Base + 0x0000_0003;
+}
+
+/// <summary> 
+/// [TODO:Enum]
+/// </summary>
+public enum I2cProtocol
+{
+    /// <summary> 
+    /// [TODO:Enum]
+    /// </summary>
+    I2c = 0,
+
+    /// <summary> 
+    /// [TODO:Enum]
+    /// </summary>
+    SCCB = 1
+}
+
+/// <summary>
+/// [TODO:description]
+/// </summary>
+public class I2c
+{
+    private static readonly NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    readonly int timeout = 2000;
+
+    readonly int port;
+    readonly string address;
+    private IPEndPoint ep;
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="timeout">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    public I2c(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>
+    /// 向指定I2C设备写入数据
+    /// </summary>
+    /// <param name="devAddr">I2C设备地址</param>
+    /// <param name="data">要写入的数据</param>
+    /// <param name="proto">I2C协议类型</param>
+    /// <returns>操作结果，成功返回true，否则返回异常信息</returns>
+    public async ValueTask<Result<bool>> WriteData(UInt32 devAddr, byte[] data, I2cProtocol proto)
+    {
+        if (data.Length > 0x0000_FFFF)
+        {
+            logger.Error($"Data length {data.Length} exceeds maximum allowed 0x0000_FFFF");
+            return new(new ArgumentException($"Data length {data.Length} exceeds maximum allowed 0x0000_FFFF"));
+        }
+
+        // 清除UDP服务器接收缓冲区
+        await MsgBus.UDPServer.ClearUDPData(this.address, 2);
+
+        logger.Trace($"Clear up udp server {this.address} receive data");
+
+        // 写入数据到I2C FIFO写入口
+        {
+            var ret = await UDPClientPool.WriteAddr(this.ep, 2, I2cAddr.Write, data);
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to write data to I2C FIFO: {ret.Error}");
+                return new(ret.Error);
+            }
+
+            if (!ret.Value)
+            {
+                logger.Error("WriteAddr to I2C FIFO returned false");
+                return new(new Exception("Failed to write data to I2C FIFO"));
+            }
+        }
+
+        // 配置本次传输数据量
+        {
+            var ret = await UDPClientPool.WriteAddr(this.ep, 2, I2cAddr.TranConfig, ((uint)(data.Length - 1)));
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to configure transfer length: {ret.Error}");
+                return new(ret.Error);
+            }
+
+            if (!ret.Value)
+            {
+                logger.Error("WriteAddr to TranConfig returned false");
+                return new(new Exception("Failed to configure transfer length"));
+            }
+        }
+
+        // 配置I2C地址、协议及启动传输
+        {
+            var ret = await UDPClientPool.WriteAddr(
+                this.ep, 2, I2cAddr.BaseConfig, (devAddr << 1) | (((uint)proto) << 16) | (1 << 24));
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to configure I2C address/protocol/start: {ret.Error}");
+                return new(ret.Error);
+            }
+
+            if (!ret.Value)
+            {
+                logger.Error("WriteAddr to BaseConfig returned false");
+                return new(new Exception("Failed to configure I2C address/protocol/start"));
+            }
+        }
+
+        // 等待I2C命令完成
+        {
+            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, 2, I2cAddr.Flag, 0x0000_0001, 0xFFFF_FFFF);
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to wait for I2C command completion: {ret.Error}");
+                return new(ret.Error);
+            }
+
+            if (!ret.Value)
+            {
+                logger.Error("ReadAddrWithWait for I2C command completion returned false");
+                return new(new Exception("I2C command did not complete successfully"));
+            }
+        }
+
+        return true;
+    }
+
+    /// <summary>
+    /// 从指定I2C设备读取数据
+    /// </summary>
+    /// <param name="devAddr">I2C设备地址</param>
+    /// <param name="length">要读取的数据长度</param>
+    /// <param name="proto">I2C协议类型</param>
+    /// <returns>操作结果，成功返回读取到的数据，否则返回异常信息</returns>
+    public async ValueTask<Result<byte[]>> ReadData(UInt32 devAddr, int length, I2cProtocol proto)
+    {
+        if (length <= 0 || length > 0x0000_FFFF)
+        {
+            logger.Error($"Read length {length} is invalid or exceeds maximum allowed 0x0000_FFFF");
+            return new(new ArgumentException($"Read length {length} is invalid or exceeds maximum allowed 0x0000_FFFF"));
+        }
+
+        // 清除UDP服务器接收缓冲区
+        await MsgBus.UDPServer.ClearUDPData(this.address, 2);
+
+        logger.Trace($"Clear up udp server {this.address} receive data");
+
+        // 配置本次传输数据量
+        {
+            var ret = await UDPClientPool.WriteAddr(this.ep, 2, I2cAddr.TranConfig, ((uint)(length - 1)));
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to configure transfer length: {ret.Error}");
+                return new(ret.Error);
+            }
+
+            if (!ret.Value)
+            {
+                logger.Error("WriteAddr to TranConfig returned false");
+                return new(new Exception("Failed to configure transfer length"));
+            }
+        }
+
+        // 配置I2C地址、协议及启动传输（读操作）
+        {
+            var ret = await UDPClientPool.WriteAddr(
+                this.ep, 2, I2cAddr.BaseConfig, (devAddr << 1) | (1 << 8) | (((uint)proto) << 16) | (1 << 24));
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to configure I2C address/protocol/start: {ret.Error}");
+                return new(ret.Error);
+            }
+
+            if (!ret.Value)
+            {
+                logger.Error("WriteAddr to BaseConfig returned false");
+                return new(new Exception("Failed to configure I2C address/protocol/start"));
+            }
+        }
+
+        // 等待I2C命令完成
+        {
+            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, 2, I2cAddr.Flag, 0x0000_0001, 0xFFFF_FFFF);
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to wait for I2C command completion: {ret.Error}");
+                return new(ret.Error);
+            }
+
+            if (!ret.Value)
+            {
+                logger.Error("ReadAddrWithWait for I2C command completion returned false");
+                return new(new Exception("I2C command did not complete successfully"));
+            }
+        }
+
+        // 读取数据
+        {
+            var ret = await UDPClientPool.ReadAddr(this.ep, 2, I2cAddr.Read, length);
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to read data from I2C FIFO: {ret.Error}");
+                return new(ret.Error);
+            }
+
+            if (ret.Value.Options.Data == null || ret.Value.Options.Data.Length != length)
+            {
+                logger.Error($"ReadAddr returned unexpected data length: {ret.Value.Options.Data?.Length ?? 0}");
+                return new(new Exception("Failed to read expected amount of data from I2C FIFO"));
+            }
+
+            return ret.Value.Options.Data;
+        }
+    }
+}

server/src/Peripherals/JtagClient.cs

@@ -1,11 +1,11 @@
 using System.Collections;
 using System.Net;
-using BsdlParser;
 using DotNext;
 using Newtonsoft.Json;
+using server;
 using WebProtocol;
 
-namespace JtagClient;
+namespace Peripherals.JtagClient;
 
 /// <summary>
 /// Global Constant Jtag Address
@@ -422,7 +422,7 @@ public class Jtag
         if (!MsgBus.IsRunning)
             return new(new Exception("Message Bus not Working!"));
 
-        var retPack = await MsgBus.UDPServer.WaitForDataAsync(address, port);
+        var retPack = await MsgBus.UDPServer.WaitForDataAsync(address, 0, port);
         if (!retPack.IsSuccessful || !retPack.Value.IsSuccessful)
             return new(new Exception("Send address package failed"));
 
@@ -441,7 +441,7 @@ public class Jtag
         (UInt32 devAddr, UInt32 data, UInt32 result, UInt32 resultMask = 0xFF_FF_FF_FF, UInt32 delayMilliseconds = 0)
     {
         {
-            var ret = await UDPClientPool.WriteAddr(this.ep, devAddr, data, this.timeout);
+            var ret = await UDPClientPool.WriteAddr(this.ep, 0, devAddr, data, this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
             if (!ret.Value) return new(new Exception("Write FIFO failed"));
         }
@@ -450,7 +450,7 @@ public class Jtag
         await Task.Delay(TimeSpan.FromMilliseconds(delayMilliseconds));
 
         {
-            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, JtagAddr.STATE, result, resultMask, this.timeout);
+            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, 0, JtagAddr.STATE, result, resultMask, this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
             return ret.Value;
         }
@@ -460,7 +460,7 @@ public class Jtag
         (UInt32 devAddr, byte[] data, UInt32 result, UInt32 resultMask = 0xFF_FF_FF_FF, UInt32 delayMilliseconds = 0)
     {
         {
-            var ret = await UDPClientPool.WriteAddr(this.ep, devAddr, data, this.timeout);
+            var ret = await UDPClientPool.WriteAddr(this.ep, 0, devAddr, data, this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
             if (!ret.Value) return new(new Exception("Write FIFO failed"));
         }
@@ -469,7 +469,7 @@ public class Jtag
         await Task.Delay(TimeSpan.FromMilliseconds(delayMilliseconds));
 
         {
-            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, JtagAddr.STATE, result, resultMask, this.timeout);
+            var ret = await UDPClientPool.ReadAddrWithWait(this.ep, 0, JtagAddr.STATE, result, resultMask, this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
             return ret.Value;
         }
@@ -627,9 +627,9 @@ public class Jtag
     public async ValueTask<Result<uint>> ReadIDCode()
     {
         // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
 
-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");
 
         Result<bool> ret;
 
@@ -665,9 +665,9 @@ public class Jtag
     public async ValueTask<Result<uint>> ReadStatusReg()
     {
         // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
 
-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");
 
         Result<bool> ret;
 
@@ -702,9 +702,9 @@ public class Jtag
     public async ValueTask<Result<bool>> DownloadBitstream(byte[] bitstream)
     {
         // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
 
-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");
 
         Result<bool> ret;
 
@@ -786,9 +786,9 @@ public class Jtag
         logger.Debug($"Get boundar scan registers number: {portNum}");
 
         // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
 
-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");
 
         Result<bool> ret;
 
@@ -853,9 +853,9 @@ public class Jtag
     public async ValueTask<Result<bool>> SetSpeed(UInt32 speed)
     {
         // Clear Data
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
 
-        logger.Trace($"Clear up udp server {this.address} receive data");
+        logger.Trace($"Clear up udp server {this.address,0} receive data");
 
         var ret = await WriteFIFO(
             JtagAddr.SPEED_CTRL, (speed << 16) | speed,

server/src/Peripherals/MatrixKeyClient.cs

@@ -44,10 +44,10 @@ public class MatrixKey
     public async ValueTask<Result<bool>> EnableControl()
     {
         if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address);
+            await MsgBus.UDPServer.ClearUDPData(this.address, 1);
         else return new(new Exception("Message Bus not work!"));
 
-        var ret = await UDPClientPool.WriteAddr(this.ep, MatrixKeyAddr.KEY_ENABLE, 1, this.timeout);
+        var ret = await UDPClientPool.WriteAddr(this.ep, 1, MatrixKeyAddr.KEY_ENABLE, 1, this.timeout);
         if (!ret.IsSuccessful) return new(ret.Error);
         return ret.Value;
     }
@@ -59,10 +59,10 @@ public class MatrixKey
     public async ValueTask<Result<bool>> DisableControl()
     {
         if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address);
+            await MsgBus.UDPServer.ClearUDPData(this.address, 1);
         else return new(new Exception("Message Bus not work!"));
 
-        var ret = await UDPClientPool.WriteAddr(this.ep, MatrixKeyAddr.KEY_ENABLE, 0, this.timeout);
+        var ret = await UDPClientPool.WriteAddr(this.ep, 1, MatrixKeyAddr.KEY_ENABLE, 0, this.timeout);
         if (!ret.IsSuccessful) return new(ret.Error);
         return ret.Value;
     }
@@ -75,14 +75,14 @@ public class MatrixKey
     public async ValueTask<Result<bool>> ControlKey(BitArray keyStates)
     {
         if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address);
+            await MsgBus.UDPServer.ClearUDPData(this.address, 1);
         else return new(new Exception("Message Bus not work!"));
 
         if (keyStates.Length != 16) return new(new ArgumentException(
             $"The number of key should be 16 instead of {keyStates.Length}", nameof(keyStates)));
 
         var ret = await UDPClientPool.WriteAddr(
-            this.ep, MatrixKeyAddr.KEY_CTRL, Common.Number.BitsToNumber(keyStates).Value, this.timeout);
+            this.ep, 1, MatrixKeyAddr.KEY_CTRL, Common.Number.BitsToNumber(keyStates).Value, this.timeout);
         if (!ret.IsSuccessful) return new(ret.Error);
         return ret.Value;
     }

server/src/Peripherals/OscilloscopeClient.cs

@@ -0,0 +1,36 @@
+using System.Net;
+using DotNext;
+
+namespace Peripherals.OscilloscopeClient;
+
+static class OscilloscopeAddr
+{
+    public const UInt32 Base = 0x0000_0000;
+}
+
+class Oscilloscope
+{
+    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 Oscilloscope(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;
+    }
+}

server/src/Peripherals/PowerClient.cs

@@ -45,10 +45,10 @@ public class Power
     public async ValueTask<Result<bool>> SetPowerOnOff(bool enable)
     {
         if (MsgBus.IsRunning)
-            await MsgBus.UDPServer.ClearUDPData(this.address);
+            await MsgBus.UDPServer.ClearUDPData(this.address, 1);
         else return new(new Exception("Message Bus not work!"));
 
-        var ret = await UDPClientPool.WriteAddr(this.ep, PowerAddr.PowerCtrl, Convert.ToUInt32(enable), this.timeout);
+        var ret = await UDPClientPool.WriteAddr(this.ep, 1, PowerAddr.PowerCtrl, Convert.ToUInt32(enable), this.timeout);
         if (!ret.IsSuccessful) return new(ret.Error);
         return ret.Value;
     }

server/src/Peripherals/RemoteUpdateClient.cs

@@ -1,6 +1,7 @@
 using System.Net;
 using DotNext;
-namespace RemoteUpdateClient;
+
+namespace Peripherals.RemoteUpdateClient;
 
 static class RemoteUpdaterAddr
 {
@@ -142,7 +143,7 @@ public class RemoteUpdater
 
         {
             var ret = await UDPClientPool.WriteAddr(
-                this.ep, RemoteUpdaterAddr.WriteCtrl,
+                this.ep, 0, RemoteUpdaterAddr.WriteCtrl,
                 Convert.ToUInt32((writeSectorNum << 16) | (1 << 15) | Convert.ToInt32(flashAddr / 4096)), this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
             if (!ret.Value) return new(new Exception("Enable write flash failed"));
@@ -150,7 +151,7 @@ public class RemoteUpdater
 
         {
             var ret = await UDPClientPool.ReadAddrWithWait(
-                this.ep, RemoteUpdaterAddr.WriteSign,
+                this.ep, 0, RemoteUpdaterAddr.WriteSign,
                 0x00_00_00_01, 0x00_00_00_01, this.timeoutForWait);
             if (!ret.IsSuccessful) return new(ret.Error);
             if (!ret.Value) return new(new Exception(
@@ -158,14 +159,14 @@ public class RemoteUpdater
         }
 
         {
-            var ret = await UDPClientPool.WriteAddr(this.ep, RemoteUpdaterAddr.WriteFIFO, bytesData, this.timeout);
+            var ret = await UDPClientPool.WriteAddr(this.ep, 0, RemoteUpdaterAddr.WriteFIFO, bytesData, this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
             if (!ret.Value) return new(new Exception("Send data to flash failed"));
         }
 
         {
             var ret = await UDPClientPool.ReadAddrWithWait(
-                this.ep, RemoteUpdaterAddr.WriteSign,
+                this.ep, 0, RemoteUpdaterAddr.WriteSign,
                 0x00_00_01_00, 0x00_00_01_00, this.timeoutForWait);
             if (!ret.IsSuccessful) return new(ret.Error);
             return ret.Value;
@@ -314,14 +315,14 @@ public class RemoteUpdater
     private async ValueTask<Result<bool>> CheckBitstreamCRC(int bitstreamNum, int bitstreamLen, UInt32 checkSum)
     {
         {
-            var ret = await UDPClientPool.WriteAddr(this.ep, RemoteUpdaterAddr.ReadCtrl2, 0x00_00_00_00, this.timeout);
+            var ret = await UDPClientPool.WriteAddr(this.ep, 0, RemoteUpdaterAddr.ReadCtrl2, 0x00_00_00_00, this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
             if (!ret.Value) return new(new Exception("Write read control 2 failed"));
         }
 
         {
             var ret = await UDPClientPool.WriteAddr(
-                this.ep, RemoteUpdaterAddr.ReadCtrl1,
+                this.ep, 0, RemoteUpdaterAddr.ReadCtrl1,
                 Convert.ToUInt32((bitstreamLen << 16) | (1 << 15) | Convert.ToInt32(FlashAddr.Bitstream[bitstreamNum] / 4096)),
                 this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
@@ -330,7 +331,7 @@ public class RemoteUpdater
 
         {
             var ret = await UDPClientPool.ReadAddrWithWait(
-                this.ep, RemoteUpdaterAddr.ReadSign,
+                this.ep, 0, RemoteUpdaterAddr.ReadSign,
                 0x00_00_01_00, 0x00_00_01_00, this.timeoutForWait);
             if (!ret.IsSuccessful) return new(ret.Error);
             if (!ret.Value) return new(new Exception(
@@ -338,7 +339,7 @@ public class RemoteUpdater
         }
 
         {
-            var ret = await UDPClientPool.ReadAddr(this.ep, RemoteUpdaterAddr.ReadCRC, this.timeout);
+            var ret = await UDPClientPool.ReadAddr(this.ep, 0, RemoteUpdaterAddr.ReadCRC, this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
 
             var bytes = ret.Value.Options.Data;
@@ -368,7 +369,7 @@ public class RemoteUpdater
                 $"Bitsteam num should be 0 ~ 3 for HotRest, but given {bitstreamNum}", nameof(bitstreamNum)));
 
         var ret = await UDPClientPool.WriteAddr(
-            this.ep, RemoteUpdaterAddr.HotResetCtrl,
+            this.ep, 0, RemoteUpdaterAddr.HotResetCtrl,
             ((FlashAddr.Bitstream[bitstreamNum] << 8) | 1), this.timeout);
         if (!ret.IsSuccessful) return new(ret.Error);
         return ret.Value;
@@ -381,7 +382,7 @@ public class RemoteUpdater
     /// <returns>[TODO:return]</returns>
     public async ValueTask<Result<bool>> HotResetBitstream(int bitstreamNum)
     {
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
         logger.Trace("Clear udp data finished");
 
         {
@@ -411,7 +412,7 @@ public class RemoteUpdater
         byte[]? bitstream2,
         byte[]? bitstream3)
     {
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
         logger.Trace("Clear udp data finished");
 
         for (int bitstreamNum = 0; bitstreamNum < 4; bitstreamNum++)
@@ -462,7 +463,7 @@ public class RemoteUpdater
                 $"The length of data should be divided by 4096, bug given {bytesData.Length}", nameof(bytesData)));
         var bitstreamBlockNum = bytesData.Length / (4 * 1024);
 
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
         logger.Trace("Clear udp data finished");
 
         {
@@ -538,11 +539,11 @@ public class RemoteUpdater
     /// <returns>[TODO:return]</returns>
     public async ValueTask<Result<UInt32>> GetVersion()
     {
-        await MsgBus.UDPServer.ClearUDPData(this.address);
+        await MsgBus.UDPServer.ClearUDPData(this.address, 0);
         logger.Trace("Clear udp data finished");
 
         {
-            var ret = await UDPClientPool.ReadAddr(this.ep, RemoteUpdaterAddr.Version, this.timeout);
+            var ret = await UDPClientPool.ReadAddr(this.ep, 0, RemoteUpdaterAddr.Version, this.timeout);
             if (!ret.IsSuccessful) return new(ret.Error);
 
             var retData = ret.Value.Options.Data;

server/src/Services/HttpVideoStreamService.cs

@@ -0,0 +1,842 @@
+using System.Net;
+using System.Text;
+using Peripherals.CameraClient; // 添加摄像头客户端引用
+
+namespace server.Services;
+
+/// <summary>
+/// 表示摄像头连接状态信息
+/// </summary>
+public class CameraStatus
+{
+    /// <summary>
+    /// 摄像头的IP地址
+    /// </summary>
+    public string Address { get; set; } = string.Empty;
+
+    /// <summary>
+    /// 摄像头的端口号
+    /// </summary>
+    public int Port { get; set; }
+
+    /// <summary>
+    /// 是否已配置摄像头
+    /// </summary>
+    public bool IsConfigured { get; set; }
+
+    /// <summary>
+    /// 摄像头连接字符串（IP:端口）
+    /// </summary>
+    public string ConnectionString { get; set; } = string.Empty;
+}
+
+/// <summary>
+/// 表示视频流服务的运行状态
+/// </summary>
+public class ServiceStatus
+{
+    /// <summary>
+    /// 服务是否正在运行
+    /// </summary>
+    public bool IsRunning { get; set; }
+
+    /// <summary>
+    /// 服务监听的端口号
+    /// </summary>
+    public int ServerPort { get; set; }
+
+    /// <summary>
+    /// 视频流的帧率（FPS）
+    /// </summary>
+    public int FrameRate { get; set; }
+
+    /// <summary>
+    /// 视频分辨率（如 640x480）
+    /// </summary>
+    public string Resolution { get; set; } = string.Empty;
+
+    /// <summary>
+    /// 当前连接的客户端数量
+    /// </summary>
+    public int ConnectedClients { get; set; }
+
+    /// <summary>
+    /// 当前连接的客户端端点列表
+    /// </summary>
+    public List<string> ClientEndpoints { get; set; } = new();
+
+    /// <summary>
+    /// 摄像头连接状态信息
+    /// </summary>
+    public CameraStatus CameraStatus { get; set; } = new();
+}
+
+/// <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 bool Enabled { get; set; } = false;
+
+    /// <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(async () =>
+            {
+                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);
+                }
+
+                // Init Camera
+                {
+                    var ret = await _camera.Init();
+                    if (!ret.IsSuccessful)
+                    {
+                        logger.Error(ret.Error);
+                        throw ret.Error;
+                    }
+
+                    if (!ret.Value)
+                    {
+                        logger.Error($"Camera Init Failed!");
+                        throw new Exception($"Camera Init Failed!");
+                    }
+                }
+            });
+            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 CameraStatus GetCameraStatus()
+    {
+        return new CameraStatus
+        {
+            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);
+
+            // 开始生成视频帧
+            while (!stoppingToken.IsCancellationRequested)
+            {
+                if (Enabled)
+                {
+                    await GenerateVideoFrames(stoppingToken);
+                }
+                else
+                {
+                    await Task.Delay(500, 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 ServiceStatus GetServiceStatus()
+    {
+        var cameraStatus = GetCameraStatus();
+
+        return new ServiceStatus
+        {
+            IsRunning = (_httpListener?.IsListening ?? false) && Enabled,
+            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 视频流服务...");
+
+        Enabled = false;
+
+        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

@@ -1,30 +0,0 @@
-// 此接口提供获取例程目录服务
-// 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,21 +177,22 @@ public class UDPClientPool
     }
 
     /// <summary>
-    /// [TODO:description]
+    /// 读取设备地址数据
     /// </summary>
-    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="timeout">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
+    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">设备地址</param>
+    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>读取结果，包含接收到的数据包</returns>
     public static async ValueTask<Result<RecvDataPackage>> ReadAddr(
-            IPEndPoint endPoint, uint devAddr, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, uint devAddr, int timeout = 1000)
     {
         var ret = false;
         var opts = new SendAddrPackOptions();
 
         opts.BurstType = BurstType.FixedBurst;
         opts.BurstLength = 0;
-        opts.CommandID = 0;
+        opts.CommandID = Convert.ToByte(taskID);
         opts.Address = devAddr;
 
         // Read Jtag State Register
@@ -204,7 +205,7 @@ public class UDPClientPool
             return new(new Exception("Message Bus not Working!"));
 
         var retPack = await MsgBus.UDPServer.WaitForDataAsync(
-                endPoint.Address.ToString(), endPoint.Port, timeout);
+                endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
         if (!retPack.IsSuccessful) return new(retPack.Error);
         else if (!retPack.Value.IsSuccessful)
             return new(new Exception("Send address package failed"));
@@ -217,20 +218,21 @@ public class UDPClientPool
     }
 
     /// <summary>
-    /// [TODO:description]
+    /// 读取设备地址数据并校验结果
     /// </summary>
-    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="result">[TODO:parameter]</param>
-    /// <param name="resultMask">[TODO:parameter]</param>
-    /// <param name="timeout">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
+    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">设备地址</param>
+    /// <param name="result">期望的结果值</param>
+    /// <param name="resultMask">结果掩码，用于位校验</param>
+    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>校验结果，true表示数据匹配期望值</returns>
     public static async ValueTask<Result<bool>> ReadAddr(
-            IPEndPoint endPoint, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
     {
         var address = endPoint.Address.ToString();
 
-        var ret = await ReadAddr(endPoint, devAddr, timeout);
+        var ret = await ReadAddr(endPoint, taskID, devAddr, timeout);
         if (!ret.IsSuccessful) return new(ret.Error);
         if (!ret.Value.IsSuccessful)
             return new(new Exception($"Read device {address} address {devAddr} failed"));
@@ -255,16 +257,17 @@ public class UDPClientPool
     }
 
     /// <summary>
-    /// [TODO:description]
+    /// 读取设备地址数据并等待直到结果匹配或超时
     /// </summary>
-    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="result">[TODO:parameter]</param>
-    /// <param name="resultMask">[TODO:parameter]</param>
-    /// <param name="timeout">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
+    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">设备地址</param>
+    /// <param name="result">期望的结果值</param>
+    /// <param name="resultMask">结果掩码，用于位校验</param>
+    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>校验结果，true表示在超时前数据匹配期望值</returns>
     public static async ValueTask<Result<bool>> ReadAddrWithWait(
-            IPEndPoint endPoint, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, uint devAddr, UInt32 result, UInt32 resultMask, int timeout = 1000)
     {
         var address = endPoint.Address.ToString();
 
@@ -277,7 +280,7 @@ public class UDPClientPool
 
             try
             {
-                var ret = await ReadAddr(endPoint, devAddr, Convert.ToInt32(timeleft.TotalMilliseconds));
+                var ret = await ReadAddr(endPoint, taskID, devAddr, Convert.ToInt32(timeleft.TotalMilliseconds));
                 if (!ret.IsSuccessful) return new(ret.Error);
                 if (!ret.Value.IsSuccessful)
                     return new(new Exception($"Read device {address} address {devAddr} failed"));
@@ -302,24 +305,99 @@ 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">要读取的数据长度（4字节）</param>
+    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>读取结果，包含接收到的字节数组</returns>
+    public static async ValueTask<Result<byte[]>> ReadAddr4Bytes(
+        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; // 512 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>
-    /// [TODO:description]
+    /// 向设备地址写入32位数据
     /// </summary>
-    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="data">[TODO:parameter]</param>
-    /// <param name="timeout">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
+    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">设备地址</param>
+    /// <param name="data">要写入的32位数据</param>
+    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>写入结果，true表示写入成功</returns>
     public static async ValueTask<Result<bool>> WriteAddr(
-            IPEndPoint endPoint, UInt32 devAddr, UInt32 data, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, UInt32 devAddr, UInt32 data, int timeout = 1000)
     {
         var ret = false;
         var opts = new SendAddrPackOptions();
 
         opts.BurstType = BurstType.FixedBurst;
         opts.BurstLength = 0;
-        opts.CommandID = 0;
+        opts.CommandID = Convert.ToByte(taskID);
         opts.Address = devAddr;
 
         // Write Jtag State Register
@@ -337,28 +415,30 @@ public class UDPClientPool
 
         // Wait for Write Ack
         var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(
-                endPoint.Address.ToString(), endPoint.Port, timeout);
+                endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
         if (!udpWriteAck.IsSuccessful) return new(udpWriteAck.Error);
 
         return udpWriteAck.Value.IsSuccessful;
     }
 
     /// <summary>
-    /// [TODO:description]
+    /// 向设备地址写入字节数组数据（支持大数据量分段传输）
     /// </summary>
-    /// <param name="endPoint">[TODO:parameter]</param>
-    /// <param name="devAddr">[TODO:parameter]</param>
-    /// <param name="dataArray">[TODO:parameter]</param>
-    /// <param name="timeout">[TODO:parameter]</param>
-    /// <returns>[TODO:return]</returns>
-    public static async ValueTask<Result<bool>> WriteAddr(IPEndPoint endPoint, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
+    /// <param name="endPoint">IP端点（IP地址与端口）</param>
+    /// <param name="taskID">任务ID</param>
+    /// <param name="devAddr">设备地址</param>
+    /// <param name="dataArray">要写入的字节数组</param>
+    /// <param name="timeout">超时时间（毫秒）</param>
+    /// <returns>写入结果，true表示写入成功</returns>
+    public static async ValueTask<Result<bool>> WriteAddr(
+        IPEndPoint endPoint, int taskID, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
     {
         var ret = false;
         var opts = new SendAddrPackOptions();
 
 
         opts.BurstType = BurstType.FixedBurst;
-        opts.CommandID = 0;
+        opts.CommandID = Convert.ToByte(taskID);
         opts.Address = devAddr;
 
         // Check Msg Bus
@@ -389,7 +469,7 @@ public class UDPClientPool
             if (!ret) return new(new Exception("Send data package failed!"));
 
             // Wait for Write Ack
-            var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(endPoint.Address.ToString(), endPoint.Port, timeout);
+            var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
             if (!udpWriteAck.IsSuccessful) return new(udpWriteAck.Error);
 
             if (!udpWriteAck.Value.IsSuccessful)
@@ -398,5 +478,4 @@ public class UDPClientPool
 
         return true;
     }
-
 }

server/src/UdpServer.cs

@@ -22,6 +22,11 @@ public class UDPData
     /// 发送来源的端口号
     /// </summary>
     public required int Port { get; set; }
+
+    /// <summary>
+    /// 任务ID
+    /// </summary>
+    public required int TaskID { get; set; }
     /// <summary>
     /// 接受到的数据
     /// </summary>
@@ -44,6 +49,7 @@ public class UDPData
             DateTime = this.DateTime,
             Address = new string(this.Address),
             Port = this.Port,
+            TaskID = this.TaskID,
             Data = cloneData,
             HasRead = this.HasRead
         };
@@ -66,7 +72,9 @@ public class UDPServer
 {
     private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
 
-    private static Dictionary<string, Queue<UDPData>> udpData = new Dictionary<string, Queue<UDPData>>();
+    private Dictionary<string, Queue<UDPData>> udpData = new Dictionary<string, Queue<UDPData>>();
+
+    private Semaphore taskPool = new Semaphore(3, 3);
 
     private int listenPort;
     private UdpClient listener;
@@ -119,6 +127,7 @@ public class UDPServer
     /// 异步寻找目标发送的内容
     /// </summary>
     /// <param name="ipAddr"> 目标IP地址 </param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <param name="timeout">超时时间</param>
     /// <param name="cycle">延迟时间</param>
     /// <param name="callerName">调用函数名称</param>
@@ -129,13 +138,14 @@ public class UDPServer
     /// Optional 存在时，为最先收到的数据
     /// </returns>
     public async ValueTask<Optional<UDPData>> FindDataAsync(
-         string ipAddr, int timeout = 1000, int cycle = 0,
+         string ipAddr, int taskID, int timeout = 1000, int cycle = 0,
          [CallerMemberName] string callerName = "",
-         [CallerLineNumber] int callerLineNum = 0)
+         [CallerLineNumber] int callerLineNum = 0
+         )
     {
         UDPData? data = null;
 
-        logger.Debug($"Caller \"{callerName}|{callerLineNum}\": Try to find {ipAddr} UDP Data");
+        logger.Debug($"Caller \"{callerName}|{callerLineNum}\": Try to find {ipAddr}-{taskID} UDP Data");
 
         var startTime = DateTime.Now;
         var isTimeout = false;
@@ -149,8 +159,8 @@ public class UDPServer
             timeleft = TimeSpan.FromMilliseconds(timeout) - elapsed;
             using (await udpData.AcquireWriteLockAsync(timeleft))
             {
-                if (udpData.ContainsKey(ipAddr) &&
-                    udpData.TryGetValue(ipAddr, out var dataQueue) &&
+                if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
+                    udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
                     dataQueue.Count > 0)
                 {
                     data = dataQueue.Dequeue();
@@ -177,10 +187,11 @@ public class UDPServer
     /// 获取还未被读取的数据列表
     /// </summary>
     /// <param name="ipAddr">IP地址</param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <param name="timeout">超时时间</param>
     /// <param name="cycle">延迟时间</param>
     /// <returns>数据列表</returns>
-    public async ValueTask<Optional<List<UDPData>>> GetDataArrayAsync(string ipAddr, int timeout = 1000, int cycle = 0)
+    public async ValueTask<Optional<List<UDPData>>> GetDataArrayAsync(string ipAddr, int taskID, int timeout = 1000, int cycle = 0)
     {
         List<UDPData>? data = null;
 
@@ -196,8 +207,8 @@ public class UDPServer
             timeleft = TimeSpan.FromMilliseconds(timeout) - elapsed;
             using (await udpData.AcquireReadLockAsync(timeleft))
             {
-                if (udpData.ContainsKey(ipAddr) &&
-                    udpData.TryGetValue(ipAddr, out var dataQueue) &&
+                if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
+                    udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
                     dataQueue.Count > 0)
                 {
                     data = dataQueue.ToList();
@@ -222,13 +233,14 @@ 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 port = -1, int timeout = 1000)
+        (string address, int taskID, int port = -1, int timeout = 1000)
     {
-        var data = await FindDataAsync(address, timeout);
+        var data = await FindDataAsync(address, taskID, timeout);
         if (!data.HasValue)
             return new(new Exception("Get None even after time out!"));
 
@@ -247,13 +259,14 @@ 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 port = -1, int timeout = 1000)
+        (string address, int taskID, int port = -1, int timeout = 1000)
     {
-        var data = await FindDataAsync(address, timeout);
+        var data = await FindDataAsync(address, taskID, timeout);
         if (!data.HasValue)
             return new(new Exception("Get None even after time out!"));
 
@@ -284,7 +297,7 @@ public class UDPServer
 
 
         // Handle Package
-        var udpData = RecordUDPData(bytes, remoteEP);
+        var udpData = RecordUDPData(bytes, remoteEP, Convert.ToInt32(bytes[1]));
         PrintData(udpData);
 
     BEGIN_RECEIVE:
@@ -308,7 +321,7 @@ public class UDPServer
         else { return false; }
     }
 
-    private UDPData RecordUDPData(byte[] bytes, IPEndPoint remoteEP)
+    private UDPData RecordUDPData(byte[] bytes, IPEndPoint remoteEP, int taskID)
     {
         var remoteAddress = remoteEP.Address.ToString();
         var remotePort = remoteEP.Port;
@@ -316,6 +329,7 @@ public class UDPServer
         {
             Address = remoteAddress,
             Port = remotePort,
+            TaskID = taskID,
             Data = bytes,
             DateTime = DateTime.Now,
             HasRead = false,
@@ -324,7 +338,8 @@ public class UDPServer
         using (udpData.AcquireWriteLock())
         {
             // Record UDP Receive Data
-            if (udpData.ContainsKey(remoteAddress) && udpData.TryGetValue(remoteAddress, out var dataQueue))
+            if (udpData.ContainsKey($"{remoteAddress}-{taskID}") &&
+                udpData.TryGetValue($"{remoteAddress}-{taskID}", out var dataQueue))
             {
                 dataQueue.Enqueue(data);
                 logger.Trace("Receive data from old client");
@@ -333,7 +348,7 @@ public class UDPServer
             {
                 var queue = new Queue<UDPData>();
                 queue.Enqueue(data);
-                udpData.Add(remoteAddress, queue);
+                udpData.Add($"{remoteAddress}-{taskID}", queue);
                 logger.Trace("Receive data from new client");
             }
         }
@@ -409,13 +424,14 @@ public class UDPServer
     /// 清空指定IP地址的数据
     /// </summary>
     /// <param name="ipAddr">IP地址</param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <returns>无</returns>
-    public async Task ClearUDPData(string ipAddr)
+    public async Task ClearUDPData(string ipAddr, int taskID)
     {
         using (await udpData.AcquireWriteLockAsync())
         {
-            if (udpData.ContainsKey(ipAddr) &&
-                udpData.TryGetValue(ipAddr, out var dataQueue) &&
+            if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
+                udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
                 dataQueue.Count > 0)
             {
                 dataQueue.Clear();

src/APIClient.ts

@@ -8,6 +8,311 @@
 /* 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);
+    }
+
+    /**
+     * 控制 HTTP 视频流服务开关
+     * @param enabled (optional) 是否启用服务
+     * @return 操作结果
+     */
+    setEnabled(enabled: boolean | undefined): Promise<any> {
+        let url_ = this.baseUrl + "/api/VideoStream/SetEnabled?";
+        if (enabled === null)
+            throw new Error("The parameter 'enabled' cannot be null.");
+        else if (enabled !== undefined)
+            url_ += "enabled=" + encodeURIComponent("" + enabled) + "&";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "POST",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processSetEnabled(_response);
+        });
+    }
+
+    protected processSetEnabled(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;
@@ -1542,6 +1847,55 @@ 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;
@@ -1800,15 +2154,20 @@ export class UDPClient {
     }
 
     /**
-     * 获取指定IP地址接受的数据列表
+     * 获取指定IP地址接收的数据列表
      * @param address (optional) IP地址
+     * @param taskID (optional) 
      */
-    getRecvDataArray(address: string | undefined): Promise<UDPData[]> {
+    getRecvDataArray(address: string | undefined, taskID: number | 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 = {
@@ -1853,55 +2212,6 @@ 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;
@@ -1950,6 +2260,48 @@ 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) {
@@ -2091,6 +2443,8 @@ export class UDPData implements IUDPData {
     address?: string;
     /** 发送来源的端口号 */
     port?: number;
+    /** 任务ID */
+    taskID?: number;
     /** 接受到的数据 */
     data?: string;
     /** 是否被读取过 */
@@ -2110,6 +2464,7 @@ 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"];
         }
@@ -2127,6 +2482,7 @@ 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;
@@ -2141,6 +2497,8 @@ export interface IUDPData {
     address?: string;
     /** 发送来源的端口号 */
     port?: number;
+    /** 任务ID */
+    taskID?: number;
     /** 接受到的数据 */
     data?: string;
     /** 是否被读取过 */

src/components/DiagramCanvas.vue

@@ -615,7 +615,7 @@ function onComponentDrag(e: MouseEvent) {
 function stopComponentDrag() {
   // 如果有组件被拖拽，保存当前状态
   if (draggingComponentId.value) {
-    console.log(`组件拖拽结束: ${draggingComponentId.value}`);
+    // console.log(`组件拖拽结束: ${draggingComponentId.value}`);
 
     // 保存图表数据
     saveDiagramData(diagramData.value);

src/components/InputField/BaseInputField.vue

@@ -0,0 +1,94 @@
+<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

@@ -0,0 +1,75 @@
+<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

@@ -0,0 +1,81 @@
+<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

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

src/components/Navbar.vue

@@ -2,74 +2,80 @@
   <div class="navbar bg-base-100 shadow-xl">
     <div class="navbar-start">
       <div class="dropdown">
-        <div tabindex="0" role="button"
-          class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300">
-          <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" />
+        <div
+          tabindex="0"
+          role="button"
+          class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300"
+        >
+          <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 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">
+        <ul
+          tabindex="0"
+          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">
-              <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>
+              <House class="icon" />
               首页
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/user" class="text-base font-medium">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2">
-                <path d="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>
+              <User class="icon" />
               用户界面
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/project" class="text-base font-medium">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2">
-                <path d="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>
+              <PencilRuler class="icon" />
               工程界面
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/test" class="text-base font-medium">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2">
-                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
-              </svg>
+              <FlaskConical class="icon" />
               测试功能
             </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">
-              <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>
+              <FileText class="icon" />
               Markdown测试
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
-            <a href="http://localhost:5000/swagger" target="_self" rel="noopener noreferrer"
-              class="text-base font-medium">
-              <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 3h18v18H3z"></path>
-                <path d="M8 8h8v8H8z" fill="currentColor"></path>
-              </svg>
+            <a
+              href="http://localhost:5000/swagger"
+              target="_self"
+              rel="noopener noreferrer"
+              class="text-base font-medium"
+            >
+              <BookOpenText class="icon" />
               OpenAPI文档
             </a>
           </li>
@@ -77,13 +83,18 @@
       </div>
     </div>
     <div class="navbar-center lg:flex">
-      <router-link to="/" class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105">
+      <router-link
+        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 to="/login"
-        class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3">
+      <router-link
+        to="/login"
+        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">
@@ -95,8 +106,22 @@
 
 <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

@@ -0,0 +1,178 @@
+<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

@@ -0,0 +1,42 @@
+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/equipments/DDSPropertyEditor.vue

@@ -385,6 +385,7 @@ const currentWaveformPath = computed(() => {
 function selectWaveform(index: number) {
   currentWaveformIndex.value = index;
   updateModelValue();
+  applyOutputWave();
 }
 
 async function applyOutputWave() {
@@ -408,7 +409,7 @@ async function applyOutputWave() {
         eqps.boardPort,
         0,
         currentWaveformIndex.value,
-        toInteger(frequency.value * Math.pow(2, 32 - 20)),
+        toInteger((frequency.value * Math.pow(2, 32 - 20)) / 10),
       );
       if (!ret) {
         dialog.error("应用失败");
@@ -424,7 +425,7 @@ async function applyOutputWave() {
         toInteger((phase.value * 4096) / 360),
       );
       if (ret) {
-        dialog.info("应用成功");
+        // dialog.info("应用成功");
       } else {
         dialog.error("应用失败");
       }
@@ -455,6 +456,7 @@ function increaseFrequency() {
   frequency.value = parseFloat(frequency.value.toFixed(1)); // 修复浮点数精度问题
   frequencyInput.value = formatFrequency(frequency.value);
   updateModelValue();
+  applyOutputWave();
 }
 
 function decreaseFrequency() {
@@ -475,6 +477,7 @@ function decreaseFrequency() {
   frequency.value = parseFloat(frequency.value.toFixed(1)); // 修复浮点数精度问题
   frequencyInput.value = formatFrequency(frequency.value);
   updateModelValue();
+  applyOutputWave();
 }
 
 function applyFrequencyInput() {
@@ -505,6 +508,7 @@ function increasePhase() {
   }
   phaseInput.value = phase.value.toString();
   updateModelValue();
+  applyOutputWave();
 }
 
 function decreasePhase() {
@@ -514,6 +518,7 @@ function decreasePhase() {
   }
   phaseInput.value = phase.value.toString();
   updateModelValue();
+  applyOutputWave();
 }
 
 function applyPhaseInput() {

src/components/equipments/MotherBoardCaps.vue

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

src/components/equipments/SMT_LED.vue

@@ -177,26 +177,26 @@ defineExpose({
   getPinPosition: (pinId: string) => {
     // 如果是自定义的引脚ID
     if (props.pins && props.pins.length > 0) {
-      console.log('SMT_LED查找Pin ID:', pinId);
-      console.log('SMT_LED组件尺寸:', props.size, '宽高:', width.value, 'x', height.value);
+      // console.log('SMT_LED查找Pin ID:', pinId);
+      // console.log('SMT_LED组件尺寸:', props.size, '宽高:', width.value, 'x', height.value);
       const customPin = props.pins.find(p => p.pinId === pinId);
-      console.log('找到的引脚配置:', customPin);
+      // console.log('找到的引脚配置:', customPin);
       
       if (customPin) {
         // 考虑组件尺寸的缩放
         const scaledX = customPin.x * props.size;
         const scaledY = customPin.y * props.size;
         
-        console.log('使用Pin缩放后的坐标:', scaledX, scaledY);
+        // console.log('使用Pin缩放后的坐标:', scaledX, scaledY);
         return {
           x: scaledX,
           y: scaledY
         };
       }
-      console.log('未找到匹配的引脚');
+      // console.log('未找到匹配的引脚');
       return null;
     }
-    console.log('没有引脚配置');
+    // console.log('没有引脚配置');
     return null;
   }
 });

src/router/index.ts

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

src/views/OscilloscopeView.vue

@@ -0,0 +1,184 @@
+<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

@@ -153,7 +153,7 @@ async function loadComponentModule(type: string) {
         [type]: module,
       };
 
-      console.log(`Loaded module for ${type}:`, module);
+      // console.log(`Loaded module for ${type}:`, module);
     } catch (error) {
       console.error(`Failed to load component module ${type}:`, error);
       return null;
@@ -164,7 +164,7 @@ async function loadComponentModule(type: string) {
 
 // 处理组件模块加载请求
 async function handleLoadComponentModule(type: string) {
-  console.log("Handling load component module request for:", type);
+  // console.log("Handling load component module request for:", type);
   await loadComponentModule(type);
 }
 
@@ -267,9 +267,9 @@ async function handleAddComponent(componentData: {
   ) {
     try {
       capsPage = componentModule.default.getCapabilities();
-      console.log(`获取到${componentData.type}组件的能力页面`);
+      // console.log(`获取到${componentData.type}组件的能力页面`);
     } catch (error) {
-      console.error(`获取${componentData.type}组件能力页面失败:`, error);
+      // console.error(`获取${componentData.type}组件能力页面失败:`, error);
     }
   }
 
@@ -349,16 +349,16 @@ async function handleAddTemplate(templateData: {
           // 计算视口中心点的坐标 (与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}`,
-          );
+          // console.log(
+          //   `=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
+          // );
         }
       }
     } catch (error) {
       console.error("获取视口中心位置时出错:", error);
     }
 
-    console.log("=== 使用视口中心添加模板组件:", viewportCenter);
+    // console.log("=== 使用视口中心添加模板组件:", viewportCenter);
 
     // 找到模板中的主要组件（假设是第一个组件）
     const mainPart = templateData.template.parts[0];
@@ -398,9 +398,9 @@ async function handleAddTemplate(templateData: {
           newPart.x = viewportCenter.x + relativeX;
           newPart.y = viewportCenter.y + relativeY;
 
-          console.log(
-            `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
-          );
+          // console.log(
+          //   `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
+          // );
         }
 
         return newPart;
@@ -541,7 +541,6 @@ async function handleComponentSelected(componentData: DiagramPart | null) {
 // 处理图表数据更新事件
 function handleDiagramUpdated(data: DiagramData) {
   diagramData.value = data;
-  console.log("Diagram data updated:", data);
 }
 
 // 处理组件移动事件

src/views/VideoStreamView.vue

@@ -0,0 +1,940 @@
+<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-around gap-4">
+                <div class="grow">
+                  <IpInputField
+                    v-model="tempCameraConfig.address"
+                    required
+                  />
+                </div>
+
+                <div class="grow">
+                  <PortInputField
+                    v-model="tempCameraConfig.port"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div class="card-actions justify-end mt-4">
+                <button
+                  class="btn btn-ghost"
+                  @click="resetCameraConfig"
+                  :disabled="isDefaultCamera"
+                >
+                  <RotateCcw class="w-4 h-4" />
+                  重置
+                </button>
+                <button
+                  class="btn btn-primary"
+                  @click="confirmCameraConfig"
+                  :disabled="!isValidCameraConfig || !hasChangesCamera"
+                  :class="{ loading: configuring }"
+                >
+                  <Save class="w-4 h-4" v-if="!configuring" />
+                  {{ 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, computed, reactive, watch, onMounted, onUnmounted } from "vue";
+import { useStorage } from "@vueuse/core";
+import { z } from "zod";
+import {
+  Save,
+  RotateCcw,
+} from "lucide-vue-next";
+import { VideoStreamClient, CameraConfigRequest } from "@/APIClient";
+import { IpInputField, PortInputField } from "@/components/InputField";
+
+// 状态管理
+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 cameraConfigSchema = z.object({
+  address: z
+    .string()
+    .ip({ version: "v4", message: "请输入有效的IPv4地址" })
+    .min(1, "请输入IP地址"),
+  port: z
+    .number()
+    .int("端口必须是整数")
+    .min(1, "端口必须大于0")
+    .max(65535, "端口必须小于等于65535"),
+});
+
+type CameraConfig = z.infer<typeof cameraConfigSchema>;
+
+// 默认摄像头配置
+const defaultCameraConfig: CameraConfig = {
+  address: "192.168.1.100",
+  port: 8080,
+};
+
+// 使用 VueUse 存储摄像头配置
+const cameraConfig = useStorage<CameraConfig>(
+  "camera-config",
+  defaultCameraConfig,
+  localStorage,
+  {
+    serializer: {
+      read: (value: string) => {
+        try {
+          const parsed = JSON.parse(value);
+          const result = cameraConfigSchema.safeParse(parsed);
+          return result.success ? result.data : defaultCameraConfig;
+        } catch {
+          return defaultCameraConfig;
+        }
+      },
+      write: (value: CameraConfig) => JSON.stringify(value),
+    },
+  },
+);
+
+// 临时摄像头配置（用于编辑）
+const tempCameraConfig = reactive<CameraConfig>({
+  address: cameraConfig.value.address,
+  port: cameraConfig.value.port,
+});
+
+// 摄像头配置验证
+const isValidCameraConfig = computed(() => {
+  return tempCameraConfig.address && tempCameraConfig.port && 
+         tempCameraConfig.port >= 1 && tempCameraConfig.port <= 65535 &&
+         /^(\d{1,3}\.){3}\d{1,3}$/.test(tempCameraConfig.address);
+});
+
+// 检查摄像头配置是否有更改
+const hasChangesCamera = computed(() => {
+  return (
+    tempCameraConfig.address !== cameraConfig.value.address || 
+    tempCameraConfig.port !== cameraConfig.value.port
+  );
+});
+
+const isDefaultCamera = computed(() => {
+  return (
+    defaultCameraConfig.address === tempCameraConfig.address && 
+    defaultCameraConfig.port === tempCameraConfig.port
+  );
+});
+
+// 重置摄像头配置
+const resetCameraConfig = () => {
+  tempCameraConfig.address = defaultCameraConfig.address;
+  tempCameraConfig.port = defaultCameraConfig.port;
+};
+
+// 监听存储的摄像头配置变化，同步到临时配置
+watch(
+  cameraConfig,
+  (newConfig) => {
+    tempCameraConfig.address = newConfig.address;
+    tempCameraConfig.port = newConfig.port;
+  },
+  { deep: true },
+);
+
+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,
+        port: config.port,
+      };
+      addLog("success", `摄像头配置加载成功: ${config.address}:${config.port}`);
+    } else {
+      addLog("warning", "未找到保存的摄像头配置，使用默认值");
+    }
+  } catch (error) {
+    addLog("error", `加载摄像头配置失败: ${error}`);
+    console.error("加载摄像头配置失败:", error);
+  }
+};
+
+// 确认摄像头配置
+const confirmCameraConfig = async () => {
+  if (!isValidCameraConfig.value) return;
+
+  configuring.value = true;
+  try {
+    addLog(
+      "info",
+      `正在配置摄像头: ${tempCameraConfig.address}:${tempCameraConfig.port}`,
+    );
+
+    // 模拟保存延迟
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    // 保存配置
+    cameraConfig.value = {
+      address: tempCameraConfig.address,
+      port: tempCameraConfig.port,
+    };
+
+    // 使用新配置调用API
+    const result = await videoClient.configureCamera(
+      CameraConfigRequest.fromJS({
+        address: tempCameraConfig.address,
+        port: tempCameraConfig.port,
+      }),
+    );
+
+    if (result) {
+      addLog("success", "摄像头配置保存成功");
+      // 配置成功后刷新状态
+      await refreshStatus();
+    } else {
+      addLog("error", "摄像头配置保存失败");
+    }
+  } catch (error) {
+    addLog("error", `配置摄像头失败: ${error}`);
+    console.error("配置摄像头失败:", error);
+  } finally {
+    configuring.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 = "正在连接视频流...";
+    videoClient.setEnabled(true);
+
+    // 刷新状态
+    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", "正在停止视频流...");
+    videoClient.setEnabled(false);
+
+    // 清除视频源
+    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>