style: 重新调整一下后端的结构，并通过csharpier格式化

TODO.md

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

server/Program.cs

@@ -3,6 +3,7 @@ using Microsoft.Extensions.FileProviders;
 using Newtonsoft.Json;
 using NLog;
 using NLog.Web;
+using server.src;
 
 // Early init of NLog to allow startup and exception logging, before host is built
 var logger = NLog.LogManager.Setup()
@@ -57,7 +58,6 @@ try
     });
 
     // Add Swagger
-    builder.Services.AddControllers();
     builder.Services.AddOpenApiDocument(options =>
     {
         options.PostProcess = document =>
@@ -82,6 +82,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 +99,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 +119,7 @@ try
         });
         app.MapFallbackToFile("index.html");
     }
-    // Add logs
+
     app.UseHttpsRedirection();
     app.UseRouting();
     app.UseCors();

server/server.csproj

@@ -22,9 +22,10 @@
     <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="9.0.4" />
     <PackageReference Include="Microsoft.OpenApi" Version="1.6.23" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
-    <PackageReference Include="NLog" Version="5.4.0" />
+    <PackageReference Include="NLog" Version="5.4.0" />    
     <PackageReference Include="NLog.Web.AspNetCore" Version="5.4.0" />
     <PackageReference Include="NSwag.AspNetCore" Version="14.3.0" />
+    <PackageReference Include="SixLabors.ImageSharp" Version="3.1.10" />
     <PackageReference Include="System.Data.SQLite.Core" Version="1.0.119" />
   </ItemGroup>
 

server/src/Controllers/UDPController.cs

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

server/src/Controllers/VideoStreamController.cs

@@ -0,0 +1,115 @@
+using Microsoft.AspNetCore.Cors;
+using Microsoft.AspNetCore.Mvc;
+
+namespace server.src.Controllers;    /// <summary>
+    /// HTTP 视频流控制器
+    /// </summary>
+    [ApiController]
+    [Route("api/[controller]")]
+    public class VideoStreamController : ControllerBase
+    {    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+    private readonly server.src.HttpVideoStreamService _videoStreamService;    /// <summary>
+    /// 初始化HTTP视频流控制器
+    /// </summary>
+    /// <param name="videoStreamService">HTTP视频流服务</param>
+    public VideoStreamController(server.src.HttpVideoStreamService videoStreamService)
+    {
+        logger.Info("创建VideoStreamController，命名空间：{Namespace}", this.GetType().Namespace);
+        _videoStreamService = videoStreamService;
+    }    /// <summary>
+    /// 获取 HTTP 视频流服务状态
+    /// </summary>
+    /// <returns>服务状态信息</returns>
+    [HttpGet("Status")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]    public IResult GetStatus()
+    {
+        try
+        {
+            logger.Info("GetStatus方法被调用，控制器：{Controller}，路径：api/VideoStream/Status", this.GetType().Name);
+            
+            // 使用HttpVideoStreamService提供的状态信息
+            var status = _videoStreamService.GetServiceStatus();
+            
+            // 转换为小写首字母的JSON属性（符合前端惯例）
+            return TypedResults.Ok(new 
+            { 
+                isRunning = true, // HTTP视频流服务作为后台服务始终运行
+                serverPort = _videoStreamService.ServerPort,
+                streamUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-feed.html",
+                mjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream",
+                snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot",
+                connectedClients = _videoStreamService.ConnectedClientsCount,
+                clientEndpoints = _videoStreamService.GetConnectedClientEndpoints()
+            });
+        }        catch (Exception ex)
+        {
+            logger.Error(ex, "获取 HTTP 视频流服务状态失败");            return TypedResults.InternalServerError(ex.Message);
+        }
+    }
+    
+    /// <summary>
+    /// 获取 HTTP 视频流信息
+    /// </summary>
+    /// <returns>流信息</returns>
+    [HttpGet("StreamInfo")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public IResult GetStreamInfo()
+    {
+        try
+        {
+            logger.Info("获取 HTTP 视频流信息");
+            return TypedResults.Ok(new 
+            { 
+                frameRate = _videoStreamService.FrameRate,
+                frameWidth = _videoStreamService.FrameWidth,
+                frameHeight = _videoStreamService.FrameHeight,
+                format = "MJPEG",
+                htmlUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-feed.html",
+                mjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream",
+                snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot"
+            });
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "获取 HTTP 视频流信息失败");            return TypedResults.InternalServerError(ex.Message);
+        }
+    }
+    
+    /// <summary>
+    /// 测试 HTTP 视频流连接
+    /// </summary>
+    /// <returns>连接测试结果</returns>
+    [HttpPost("TestConnection")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async Task<IResult> TestConnection()
+    {
+        try
+        {
+            logger.Info("测试 HTTP 视频流连接");
+            
+            // 尝试通过HTTP请求检查视频流服务是否可访问
+            using (var httpClient = new HttpClient())
+            {
+                httpClient.Timeout = TimeSpan.FromSeconds(2); // 设置较短的超时时间
+                var response = await httpClient.GetAsync($"http://localhost:{_videoStreamService.ServerPort}/");
+                
+                // 只要能连接上就认为成功，不管返回状态
+                bool isConnected = response.IsSuccessStatusCode;
+                
+                return TypedResults.Ok(isConnected);
+            }
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "HTTP 视频流连接测试失败");
+            // 连接失败但不抛出异常，而是返回连接失败的结果
+            return TypedResults.Ok(false);
+        }
+    }
+}

server/src/HttpVideoStreamService.cs

@@ -0,0 +1,575 @@
+using System.Net;
+using System.Text;
+using SixLabors.ImageSharp;
+using SixLabors.ImageSharp.Formats.Jpeg;
+using SixLabors.ImageSharp.PixelFormats;
+
+namespace server.src
+{
+    /// <summary>
+    /// HTTP 视频流服务，用于从 FPGA 获取图像数据并推送到前端网页
+    /// 简化版本实现，先建立基础框架
+    /// </summary>
+    public class HttpVideoStreamService : BackgroundService
+    {
+        private readonly ILogger<HttpVideoStreamService> _logger;
+        private HttpListener? _httpListener;
+        private readonly int _serverPort = 8080;
+        private readonly int _frameRate = 30; // 30 FPS
+        private readonly int _frameWidth = 640;
+        private readonly int _frameHeight = 480;
+
+        // 模拟 FPGA 图像数据
+        private int _frameCounter = 0;
+        private readonly List<HttpListenerResponse> _activeClients = new List<HttpListenerResponse>();
+        private readonly object _clientsLock = new object();
+
+        /// <summary>
+        /// 获取当前连接的客户端数量
+        /// </summary>
+        public int ConnectedClientsCount
+        {
+            get
+            {
+                lock (_clientsLock)
+                {
+                    return _activeClients.Count;
+                }
+            }
+        }
+
+        /// <summary>
+        /// 获取服务端口
+        /// </summary>
+        public int ServerPort => _serverPort;
+
+        /// <summary>
+        /// 获取帧宽度
+        /// </summary>
+        public int FrameWidth => _frameWidth;
+
+        /// <summary>
+        /// 获取帧高度
+        /// </summary>
+        public int FrameHeight => _frameHeight;
+
+        /// <summary>
+        /// 获取帧率
+        /// </summary>
+        public int FrameRate => _frameRate;
+
+        /// <summary>
+        /// 初始化 HttpVideoStreamService
+        /// </summary>
+        /// <param name="logger">日志记录器</param>
+        public HttpVideoStreamService(ILogger<HttpVideoStreamService> logger)
+        {
+            _logger = logger;
+        }
+
+        /// <summary>
+        /// 执行 HTTP 视频流服务
+        /// </summary>
+        /// <param name="stoppingToken">取消令牌</param>
+        /// <returns>任务</returns>
+        protected override async Task ExecuteAsync(CancellationToken stoppingToken)
+        {
+            try
+            {
+                _logger.LogInformation("启动 HTTP 视频流服务，端口: {Port}", _serverPort);
+                // 创建 HTTP 监听器
+                _httpListener = new HttpListener();
+                _httpListener.Prefixes.Add($"http://localhost:{_serverPort}/");
+                _httpListener.Start();
+
+                _logger.LogInformation("HTTP 视频流服务已启动，监听端口: {Port}", _serverPort);
+
+                // 开始接受客户端连接
+                _ = Task.Run(() => AcceptClientsAsync(stoppingToken), stoppingToken);
+
+                // 开始生成视频帧
+                await GenerateVideoFrames(stoppingToken);
+            }
+            catch (HttpListenerException ex)
+            {
+                _logger.LogError(ex, "HTTP 视频流服务启动失败，请确保您有管理员权限或使用netsh配置URL前缀权限");
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "HTTP 视频流服务启动失败");
+            }
+        }
+
+        private async Task AcceptClientsAsync(CancellationToken cancellationToken)
+        {
+            while (!cancellationToken.IsCancellationRequested && _httpListener != null && _httpListener.IsListening)
+            {
+                try
+                {
+                    // 等待客户端连接
+                    var context = await _httpListener.GetContextAsync();
+                    var request = context.Request;
+                    var response = context.Response;
+
+                    _logger.LogInformation("新HTTP客户端连接: {RemoteEndPoint}", request.RemoteEndPoint);
+                    // 处理不同的请求路径
+                    var requestPath = request.Url?.AbsolutePath ?? "/";
+
+                    if (requestPath == "/video-stream")
+                    {
+                        // MJPEG 流请求
+                        _ = Task.Run(() => HandleMjpegStreamAsync(response, cancellationToken), cancellationToken);
+                    }
+                    else if (requestPath == "/snapshot")
+                    {
+                        // 单帧图像请求
+                        await HandleSnapshotRequestAsync(response, cancellationToken);
+                    }
+                    else if (requestPath == "/video-feed.html")
+                    {
+                        // HTML页面请求
+                        await SendVideoHtmlPageAsync(response);
+                    }
+                    else
+                    {
+                        // 默认返回简单的HTML页面，提供链接到视频页面
+                        await SendIndexHtmlPageAsync(response);
+                    }
+                }
+                catch (HttpListenerException)
+                {
+                    // HTTP监听器可能已停止
+                    break;
+                }
+                catch (ObjectDisposedException)
+                {
+                    // 对象可能已被释放
+                    break;
+                }
+                catch (Exception ex)
+                {
+                    _logger.LogError(ex, "接受HTTP客户端连接时发生错误");
+                }
+            }
+        }
+
+        private async Task HandleMjpegStreamAsync(HttpListenerResponse response, CancellationToken cancellationToken)
+        {
+            try
+            {
+                // 设置MJPEG流的响应头
+                response.ContentType = "multipart/x-mixed-replace; boundary=--boundary";
+                response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
+                response.Headers.Add("Pragma", "no-cache");
+                response.Headers.Add("Expires", "0");
+
+                // 跟踪活跃的客户端
+                lock (_clientsLock)
+                {
+                    _activeClients.Add(response);
+                }
+
+                _logger.LogDebug("已启动MJPEG流，客户端: {RemoteEndPoint}", response.OutputStream?.GetHashCode() ?? 0);
+
+                // 保持连接直到取消或出错
+                try
+                {
+                    while (!cancellationToken.IsCancellationRequested)
+                    {
+                        await Task.Delay(100, cancellationToken); // 简单的保活循环
+                    }
+                }
+                catch (TaskCanceledException)
+                {
+                    // 预期的取消
+                }
+
+                _logger.LogDebug("MJPEG流已结束，客户端: {ClientId}", response.OutputStream?.GetHashCode() ?? 0);
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "处理MJPEG流时出错");
+            }
+            finally
+            {
+                lock (_clientsLock)
+                {
+                    _activeClients.Remove(response);
+                }
+
+                try
+                {
+                    response.Close();
+                }
+                catch
+                {
+                    // 忽略关闭时的错误
+                }
+            }
+        }
+
+        private async Task HandleSnapshotRequestAsync(HttpListenerResponse response, CancellationToken cancellationToken)
+        {
+            try
+            {
+                // 获取当前帧
+                var imageData = await GetFPGAImageData();
+                var jpegData = ConvertToJpeg(imageData);
+
+                // 设置响应头
+                response.ContentType = "image/jpeg";
+                response.ContentLength64 = jpegData.Length;
+                response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
+
+                // 发送JPEG数据
+                await response.OutputStream.WriteAsync(jpegData, 0, jpegData.Length, cancellationToken);
+                await response.OutputStream.FlushAsync(cancellationToken);
+
+                _logger.LogDebug("已发送快照图像，大小：{Size} 字节", jpegData.Length);
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "处理快照请求时出错");
+            }
+            finally
+            {
+                response.Close();
+            }
+        }
+
+        private async Task SendVideoHtmlPageAsync(HttpListenerResponse response)
+        {
+            string html = $@"<!DOCTYPE html>
+<html>
+<head>
+    <title>FPGA 视频流</title>
+    <meta charset=""utf-8"">
+    <style>
+        body {{ font-family: Arial, sans-serif; text-align: center; margin: 20px; }}
+        h1 {{ color: #333; }}
+        .video-container {{ margin: 20px auto; max-width: 800px; }}
+        .controls {{ margin: 10px 0; }}
+        img {{ max-width: 100%; border: 1px solid #ddd; }}
+        button {{ padding: 8px 16px; margin: 0 5px; cursor: pointer; }}
+    </style>
+</head>
+<body>
+    <h1>FPGA 实时视频流</h1>
+    <div class=""video-container"">
+        <img id=""videoStream"" src=""/video-stream"" alt=""FPGA视频流"" />
+    </div>
+    <div class=""controls"">
+        <button onclick=""document.getElementById('videoStream').src='/snapshot?t=' + new Date().getTime()"">刷新快照</button>
+        <button onclick=""document.getElementById('videoStream').src='/video-stream'"">开始流媒体</button>
+        <span id=""status"">状态: 连接中...</span>
+    </div>
+    <script>
+        document.getElementById('videoStream').onload = function() {{
+            document.getElementById('status').textContent = '状态: 已连接';
+        }};
+        document.getElementById('videoStream').onerror = function() {{
+            document.getElementById('status').textContent = '状态: 连接错误';
+        }};
+    </script>
+</body>
+</html>";
+
+            response.ContentType = "text/html";
+            response.ContentEncoding = Encoding.UTF8;
+            byte[] buffer = Encoding.UTF8.GetBytes(html);
+            response.ContentLength64 = buffer.Length;
+
+            await response.OutputStream.WriteAsync(buffer, 0, buffer.Length);
+            response.Close();
+        }
+
+        private async Task SendIndexHtmlPageAsync(HttpListenerResponse response)
+        {
+            string html = $@"<!DOCTYPE html>
+<html>
+<head>
+    <title>FPGA WebLab 视频服务</title>
+    <meta charset=""utf-8"">
+    <style>
+        body {{ font-family: Arial, sans-serif; text-align: center; margin: 20px; }}
+        h1 {{ color: #333; }}
+        .links {{ margin: 20px; }}
+        a {{ padding: 10px 15px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; margin: 5px; display: inline-block; }}
+        a:hover {{ background-color: #45a049; }}
+    </style>
+</head>
+<body>
+    <h1>FPGA WebLab 视频服务</h1>
+    <div class=""links"">
+        <a href=""/video-feed.html"">观看实时视频</a>
+        <a href=""/snapshot"" target=""_blank"">获取当前快照</a>
+    </div>
+    <p>HTTP流媒体服务端口: {_serverPort}</p>
+</body>
+</html>";
+
+            response.ContentType = "text/html";
+            response.ContentEncoding = Encoding.UTF8;
+            byte[] buffer = Encoding.UTF8.GetBytes(html);
+            response.ContentLength64 = buffer.Length;
+
+            await response.OutputStream.WriteAsync(buffer, 0, buffer.Length);
+            response.Close();
+        }
+
+        private async Task GenerateVideoFrames(CancellationToken cancellationToken)
+        {
+            var frameInterval = TimeSpan.FromMilliseconds(1000.0 / _frameRate);
+
+            while (!cancellationToken.IsCancellationRequested)
+            {
+                try
+                {
+                    // 从 FPGA 获取图像数据（模拟）
+                    var imageData = await GetFPGAImageData();
+
+                    // 将图像数据转换为 JPEG
+                    var jpegData = ConvertToJpeg(imageData);
+
+                    // 向所有连接的客户端发送帧
+                    await BroadcastFrameAsync(jpegData, cancellationToken);
+
+                    _frameCounter++;
+
+                    // 等待下一帧
+                    await Task.Delay(frameInterval, cancellationToken);
+                }
+                catch (OperationCanceledException)
+                {
+                    break;
+                }
+                catch (Exception ex)
+                {
+                    _logger.LogError(ex, "生成视频帧时发生错误");
+                    await Task.Delay(1000, cancellationToken); // 错误恢复延迟
+                }
+            }
+        }
+
+        /// <summary>
+        /// 模拟从 FPGA 获取图像数据的函数
+        /// 实际实现时，这里应该通过 UDP 连接读取 FPGA 特定地址范围的数据
+        /// </summary>
+        private async Task<byte[]> GetFPGAImageData()
+        {
+            // 模拟异步 FPGA 数据读取
+            await Task.Delay(1);
+
+            // 简化的模拟图像数据生成
+            var random = new Random(_frameCounter);
+            var imageData = new byte[_frameWidth * _frameHeight * 3]; // RGB24 格式
+
+            // 生成简单的彩色噪声图案
+            for (int i = 0; i < imageData.Length; i += 3)
+            {
+                // 基于帧计数器和位置生成颜色
+                var baseColor = (_frameCounter + i / 3) % 256;
+                imageData[i] = (byte)((baseColor + random.Next(0, 50)) % 256);     // R
+                imageData[i + 1] = (byte)((baseColor * 2 + random.Next(0, 50)) % 256); // G
+                imageData[i + 2] = (byte)((baseColor * 3 + random.Next(0, 50)) % 256); // B
+            }
+
+            if (_frameCounter % 30 == 0) // 每秒更新一次日志
+            {
+                _logger.LogDebug("生成第 {FrameNumber} 帧", _frameCounter);
+            }
+
+            return imageData;
+        }
+
+        /// <summary>
+        /// 将 RGB 图像数据转换为 JPEG 格式
+        /// </summary>
+        private byte[] ConvertToJpeg(byte[] rgbData)
+        {
+            using var image = new Image<Rgb24>(_frameWidth, _frameHeight);
+
+            // 将 RGB 数据复制到 ImageSharp 图像
+            for (int y = 0; y < _frameHeight; y++)
+            {
+                for (int x = 0; x < _frameWidth; x++)
+                {
+                    int index = (y * _frameWidth + x) * 3;
+                    var pixel = new Rgb24(rgbData[index], rgbData[index + 1], rgbData[index + 2]);
+                    image[x, y] = pixel;
+                }
+            }
+
+            using var stream = new MemoryStream();
+            image.SaveAsJpeg(stream, new JpegEncoder { Quality = 80 });
+            return stream.ToArray();
+        }
+
+        /// <summary>
+        /// 向所有连接的客户端广播帧数据
+        /// </summary>
+        private async Task BroadcastFrameAsync(byte[] frameData, CancellationToken cancellationToken)
+        {
+            if (frameData == null || frameData.Length == 0)
+            {
+                _logger.LogWarning("尝试广播空帧数据");
+                return;
+            }
+
+            // 准备MJPEG帧数据
+            var mjpegFrameHeader = $"--boundary\r\nContent-Type: image/jpeg\r\nContent-Length: {frameData.Length}\r\n\r\n";
+            var headerBytes = Encoding.ASCII.GetBytes(mjpegFrameHeader);
+
+            var clientsToRemove = new List<HttpListenerResponse>();
+            var clientsToProcess = new List<HttpListenerResponse>();
+
+            // 获取当前连接的客户端列表
+            lock (_clientsLock)
+            {
+                clientsToProcess.AddRange(_activeClients);
+            }
+
+            if (clientsToProcess.Count == 0)
+            {
+                return; // 没有活跃客户端
+            }
+
+            // 向每个活跃的客户端发送帧
+            foreach (var client in clientsToProcess)
+            {
+                try
+                {
+                    // 发送帧头部
+                    await client.OutputStream.WriteAsync(headerBytes, 0, headerBytes.Length, cancellationToken);
+
+                    // 发送JPEG数据
+                    await client.OutputStream.WriteAsync(frameData, 0, frameData.Length, cancellationToken);
+
+                    // 发送结尾换行符
+                    await client.OutputStream.WriteAsync(Encoding.ASCII.GetBytes("\r\n"), 0, 2, cancellationToken);
+
+                    // 确保数据立即发送
+                    await client.OutputStream.FlushAsync(cancellationToken);
+
+                    if (_frameCounter % 30 == 0) // 每秒记录一次日志
+                    {
+                        _logger.LogDebug("已向客户端 {ClientId} 发送第 {FrameNumber} 帧，大小：{Size} 字节",
+                            client.OutputStream.GetHashCode(), _frameCounter, frameData.Length);
+                    }
+                }
+                catch (Exception ex)
+                {
+                    _logger.LogDebug("发送帧数据时出错: {Error}", ex.Message);
+                    clientsToRemove.Add(client);
+                }
+            }
+
+            // 移除断开连接的客户端
+            if (clientsToRemove.Count > 0)
+            {
+                lock (_clientsLock)
+                {
+                    foreach (var client in clientsToRemove)
+                    {
+                        _activeClients.Remove(client);
+                        try { client.Close(); }
+                        catch { /* 忽略关闭错误 */ }
+                    }
+                }
+
+                _logger.LogInformation("已移除 {Count} 个断开连接的客户端，当前连接数: {ActiveCount}",
+                    clientsToRemove.Count, _activeClients.Count);
+            }
+        }
+
+        /// <summary>
+        /// 获取连接的客户端端点列表
+        /// </summary>
+        public List<string> GetConnectedClientEndpoints()
+        {
+            List<string> endpoints = new List<string>();
+
+            lock (_clientsLock)
+            {
+                foreach (var client in _activeClients)
+                {
+                    endpoints.Add($"Client-{client.OutputStream?.GetHashCode() ?? 0}");
+                }
+            }
+
+            return endpoints;
+        }
+
+        /// <summary>
+        /// 获取服务状态信息
+        /// </summary>
+        public object GetServiceStatus()
+        {
+            return new
+            {
+                IsRunning = _httpListener?.IsListening ?? false,
+                ServerPort = _serverPort,
+                FrameRate = _frameRate,
+                Resolution = $"{_frameWidth}x{_frameHeight}",
+                ConnectedClients = ConnectedClientsCount,
+                ClientEndpoints = GetConnectedClientEndpoints()
+            };
+        }
+
+        /// <summary>
+        /// 停止 HTTP 视频流服务
+        /// </summary>
+        public override async Task StopAsync(CancellationToken cancellationToken)
+        {
+            _logger.LogInformation("正在停止 HTTP 视频流服务...");
+
+            if (_httpListener != null && _httpListener.IsListening)
+            {
+                _httpListener.Stop();
+                _httpListener.Close();
+            }
+
+            // 关闭所有客户端连接
+            lock (_clientsLock)
+            {
+                foreach (var client in _activeClients)
+                {
+                    try { client.Close(); }
+                    catch { /* 忽略关闭错误 */ }
+                }
+                _activeClients.Clear();
+            }
+
+            await base.StopAsync(cancellationToken);
+
+            _logger.LogInformation("HTTP 视频流服务已停止");
+        }
+
+        /// <summary>
+        /// 释放资源
+        /// </summary>
+        public override void Dispose()
+        {
+            if (_httpListener != null)
+            {
+                if (_httpListener.IsListening)
+                {
+                    _httpListener.Stop();
+                }
+                _httpListener.Close();
+            }
+
+            lock (_clientsLock)
+            {
+                foreach (var client in _activeClients)
+                {
+                    try { client.Close(); }
+                    catch { /* 忽略关闭错误 */ }
+                }
+                _activeClients.Clear();
+            }
+
+            base.Dispose();
+        }
+    }
+}

server/src/JtagClient.cs

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

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/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/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/RemoteUpdateClient.cs

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

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

@@ -180,18 +180,19 @@ public class UDPClientPool
     /// [TODO:description]
     /// </summary>
     /// <param name="endPoint">[TODO:parameter]</param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <param name="devAddr">[TODO:parameter]</param>
     /// <param name="timeout">[TODO:parameter]</param>
     /// <returns>[TODO:return]</returns>
     public static async ValueTask<Result<RecvDataPackage>> ReadAddr(
-            IPEndPoint endPoint, uint devAddr, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, uint devAddr, int timeout = 1000)
     {
         var ret = false;
         var opts = new SendAddrPackOptions();
 
         opts.BurstType = BurstType.FixedBurst;
         opts.BurstLength = 0;
-        opts.CommandID = 0;
+        opts.CommandID = Convert.ToByte(taskID);
         opts.Address = devAddr;
 
         // Read Jtag State Register
@@ -204,7 +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"));
@@ -220,17 +221,18 @@ public class UDPClientPool
     /// [TODO:description]
     /// </summary>
     /// <param name="endPoint">[TODO:parameter]</param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <param name="devAddr">[TODO:parameter]</param>
     /// <param name="result">[TODO:parameter]</param>
     /// <param name="resultMask">[TODO:parameter]</param>
     /// <param name="timeout">[TODO:parameter]</param>
     /// <returns>[TODO:return]</returns>
     public static async ValueTask<Result<bool>> ReadAddr(
-            IPEndPoint endPoint, 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"));
@@ -258,13 +260,14 @@ public class UDPClientPool
     /// [TODO:description]
     /// </summary>
     /// <param name="endPoint">[TODO:parameter]</param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <param name="devAddr">[TODO:parameter]</param>
     /// <param name="result">[TODO:parameter]</param>
     /// <param name="resultMask">[TODO:parameter]</param>
     /// <param name="timeout">[TODO:parameter]</param>
     /// <returns>[TODO:return]</returns>
     public static async ValueTask<Result<bool>> ReadAddrWithWait(
-            IPEndPoint endPoint, 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"));
@@ -307,19 +310,20 @@ public class UDPClientPool
     /// [TODO:description]
     /// </summary>
     /// <param name="endPoint">[TODO:parameter]</param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <param name="devAddr">[TODO:parameter]</param>
     /// <param name="data">[TODO:parameter]</param>
     /// <param name="timeout">[TODO:parameter]</param>
     /// <returns>[TODO:return]</returns>
     public static async ValueTask<Result<bool>> WriteAddr(
-            IPEndPoint endPoint, UInt32 devAddr, UInt32 data, int timeout = 1000)
+            IPEndPoint endPoint, int taskID, UInt32 devAddr, UInt32 data, int timeout = 1000)
     {
         var ret = false;
         var opts = new SendAddrPackOptions();
 
         opts.BurstType = BurstType.FixedBurst;
         opts.BurstLength = 0;
-        opts.CommandID = 0;
+        opts.CommandID = Convert.ToByte(taskID);
         opts.Address = devAddr;
 
         // Write Jtag State Register
@@ -337,7 +341,7 @@ public class UDPClientPool
 
         // Wait for Write Ack
         var udpWriteAck = await MsgBus.UDPServer.WaitForAckAsync(
-                endPoint.Address.ToString(), endPoint.Port, timeout);
+                endPoint.Address.ToString(), taskID, endPoint.Port, timeout);
         if (!udpWriteAck.IsSuccessful) return new(udpWriteAck.Error);
 
         return udpWriteAck.Value.IsSuccessful;
@@ -347,18 +351,20 @@ public class UDPClientPool
     /// [TODO:description]
     /// </summary>
     /// <param name="endPoint">[TODO:parameter]</param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <param name="devAddr">[TODO:parameter]</param>
     /// <param name="dataArray">[TODO:parameter]</param>
     /// <param name="timeout">[TODO:parameter]</param>
     /// <returns>[TODO:return]</returns>
-    public static async ValueTask<Result<bool>> WriteAddr(IPEndPoint endPoint, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
+    public static async ValueTask<Result<bool>> WriteAddr(
+        IPEndPoint endPoint, int taskID, UInt32 devAddr, byte[] dataArray, int timeout = 1000)
     {
         var ret = false;
         var opts = new SendAddrPackOptions();
 
 
         opts.BurstType = BurstType.FixedBurst;
-        opts.CommandID = 0;
+        opts.CommandID = Convert.ToByte(taskID);
         opts.Address = devAddr;
 
         // Check Msg Bus
@@ -389,7 +395,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)

server/src/UdpServer.cs

@@ -22,6 +22,11 @@ public class UDPData
     /// 发送来源的端口号
     /// </summary>
     public required int Port { get; set; }
+
+    /// <summary>
+    /// 任务ID
+    /// </summary>
+    public required int TaskID { get; set; }
     /// <summary>
     /// 接受到的数据
     /// </summary>
@@ -44,6 +49,7 @@ public class UDPData
             DateTime = this.DateTime,
             Address = new string(this.Address),
             Port = this.Port,
+            TaskID = this.TaskID,
             Data = cloneData,
             HasRead = this.HasRead
         };
@@ -119,6 +125,7 @@ public class UDPServer
     /// 异步寻找目标发送的内容
     /// </summary>
     /// <param name="ipAddr"> 目标IP地址 </param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <param name="timeout">超时时间</param>
     /// <param name="cycle">延迟时间</param>
     /// <param name="callerName">调用函数名称</param>
@@ -129,13 +136,14 @@ public class UDPServer
     /// Optional 存在时，为最先收到的数据
     /// </returns>
     public async ValueTask<Optional<UDPData>> FindDataAsync(
-         string ipAddr, int timeout = 1000, int cycle = 0,
+         string ipAddr, int taskID, int timeout = 1000, int cycle = 0,
          [CallerMemberName] string callerName = "",
-         [CallerLineNumber] int callerLineNum = 0)
+         [CallerLineNumber] int callerLineNum = 0
+         )
     {
         UDPData? data = null;
 
-        logger.Debug($"Caller \"{callerName}|{callerLineNum}\": Try to find {ipAddr} UDP Data");
+        logger.Debug($"Caller \"{callerName}|{callerLineNum}\": Try to find {ipAddr}-{taskID} UDP Data");
 
         var startTime = DateTime.Now;
         var isTimeout = false;
@@ -149,8 +157,8 @@ public class UDPServer
             timeleft = TimeSpan.FromMilliseconds(timeout) - elapsed;
             using (await udpData.AcquireWriteLockAsync(timeleft))
             {
-                if (udpData.ContainsKey(ipAddr) &&
-                    udpData.TryGetValue(ipAddr, out var dataQueue) &&
+                if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
+                    udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
                     dataQueue.Count > 0)
                 {
                     data = dataQueue.Dequeue();
@@ -177,10 +185,11 @@ public class UDPServer
     /// 获取还未被读取的数据列表
     /// </summary>
     /// <param name="ipAddr">IP地址</param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <param name="timeout">超时时间</param>
     /// <param name="cycle">延迟时间</param>
     /// <returns>数据列表</returns>
-    public async ValueTask<Optional<List<UDPData>>> GetDataArrayAsync(string ipAddr, int timeout = 1000, int cycle = 0)
+    public async ValueTask<Optional<List<UDPData>>> GetDataArrayAsync(string ipAddr, int taskID, int timeout = 1000, int cycle = 0)
     {
         List<UDPData>? data = null;
 
@@ -196,8 +205,8 @@ public class UDPServer
             timeleft = TimeSpan.FromMilliseconds(timeout) - elapsed;
             using (await udpData.AcquireReadLockAsync(timeleft))
             {
-                if (udpData.ContainsKey(ipAddr) &&
-                    udpData.TryGetValue(ipAddr, out var dataQueue) &&
+                if (udpData.ContainsKey($"{ipAddr}-{taskID}") &&
+                    udpData.TryGetValue($"{ipAddr}-{taskID}", out var dataQueue) &&
                     dataQueue.Count > 0)
                 {
                     data = dataQueue.ToList();
@@ -222,13 +231,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 +257,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 +295,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 +319,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 +327,7 @@ public class UDPServer
         {
             Address = remoteAddress,
             Port = remotePort,
+            TaskID = taskID,
             Data = bytes,
             DateTime = DateTime.Now,
             HasRead = false,
@@ -324,7 +336,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 +346,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 +422,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

@@ -2189,3 +2189,144 @@ function throwException(message: string, status: number, response: string, heade
     else
         throw new ApiException(message, status, response, headers, null);
 }
+
+// VideoStreamClient - 手动添加，用于HTTP视频流控制
+export class VideoStreamClient {
+    private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
+    private baseUrl: string;
+    protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;
+
+    constructor(baseUrl?: string, http?: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }) {
+        this.http = http ? http : window as any;
+        this.baseUrl = baseUrl ?? "http://localhost:5000";
+    }    /**
+     * 获取HTTP视频流服务状态
+     * @return HTTP视频流服务状态信息
+     */
+    status(): Promise<any> {
+        let url_ = this.baseUrl + "/api/VideoStream/Status";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processStatus(_response);
+        });
+    }
+
+    protected processStatus(response: Response): Promise<any> {
+        const status = response.status;
+        let _headers: any = {};
+        if (response.headers && response.headers.forEach) {
+            response.headers.forEach((v: any, k: any) => _headers[k] = v);
+        }
+
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+                let result200: any = null;
+                result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                return result200;
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+                throw new Error(_responseText);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+                throw new Error("未知的响应状态码: " + status + ", 响应文本: " + _responseText);
+            });
+        }
+        return Promise.resolve<any>(null as any);
+    }    /**
+     * 获取HTTP视频流信息
+     * @return HTTP视频流信息
+     */
+    streamInfo(): Promise<any> {
+        let url_ = this.baseUrl + "/api/VideoStream/StreamInfo";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processStreamInfo(_response);
+        });
+    }
+
+    protected processStreamInfo(response: Response): Promise<any> {
+        const status = response.status;
+        let _headers: any = {};
+        if (response.headers && response.headers.forEach) {
+            response.headers.forEach((v: any, k: any) => _headers[k] = v);
+        }
+
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+                let result200: any = null;
+                result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                return result200;
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+                throw new Error(_responseText);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+                throw new Error("未知的响应状态码: " + status + ", 响应文本: " + _responseText);
+            });
+        }
+        return Promise.resolve<any>(null as any);
+    }    /**
+     * 测试HTTP视频流连接
+     * @return 测试结果
+     */
+    testConnection(): Promise<boolean> {
+        let url_ = this.baseUrl + "/api/VideoStream/TestConnection";
+        url_ = url_.replace(/[?&]$/, "");
+
+        let options_: RequestInit = {
+            method: "POST",
+            headers: {
+                "Accept": "application/json"
+            }
+        };
+
+        return this.http.fetch(url_, options_).then((_response: Response) => {
+            return this.processTestConnection(_response);
+        });
+    }
+
+    protected processTestConnection(response: Response): Promise<boolean> {
+        const status = response.status;
+        let _headers: any = {};
+        if (response.headers && response.headers.forEach) {
+            response.headers.forEach((v: any, k: any) => _headers[k] = v);
+        }
+
+        if (status === 200) {
+            return response.text().then((_responseText) => {
+                let result200: any = null;
+                result200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
+                return result200;
+            });
+        } else if (status === 500) {
+            return response.text().then((_responseText) => {
+                throw new Error(_responseText);
+            });
+        } else if (status !== 200 && status !== 204) {
+            return response.text().then((_responseText) => {
+                throw new Error("未知的响应状态码: " + status + ", 响应文本: " + _responseText);
+            });
+        }
+        return Promise.resolve<boolean>(false);
+    }
+}

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/Navbar.vue

@@ -39,8 +39,7 @@
               </svg>
               工程界面
             </router-link>
-          </li>
-          <li class="my-1 hover:translate-x-1 transition-all duration-300">
+          </li>          <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/test" class="text-base font-medium">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2">
@@ -49,6 +48,14 @@
               测试功能
             </router-link>
           </li>
+          <li class="my-1 hover:translate-x-1 transition-all duration-300">
+            <router-link to="/video-stream" class="text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" stroke-width="2">
+                <path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+              </svg>
+              HTTP视频流            </router-link>
+          </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/markdown-test" class="text-base font-medium">
               <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"

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

@@ -6,6 +6,7 @@ import ProjectView from '../views/ProjectView.vue'
 import TestView from '../views/TestView.vue'
 import UserView from '../views/UserView.vue'
 import AdminView from '../views/AdminView.vue'
+import VideoStreamView from '../views/VideoStreamView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -16,7 +17,7 @@ const router = createRouter({
     {path: '/project',name: 'project',component: ProjectView},
     {path: '/test',   name: 'test',   component: TestView},
     {path: '/user',   name: 'user',   component: UserView},
-    {path: '/admin',  name: 'admin',  component: AdminView}]
+    {path: '/admin',  name: 'admin',  component: AdminView},    {path: '/video-stream',name: 'video-stream',component: VideoStreamView}]
 })
 
 export default router

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,505 @@
+<template>
+  <div class="min-h-screen bg-base-100">
+    <!-- 标题栏 -->
+    <div class="bg-base-200 p-4 border-b border-base-300">
+      <h1 class="text-2xl font-bold text-base-content">HTTP 视频流</h1>
+      <p class="text-base-content/70 mt-1">FPGA WebLab 视频流传输功能</p>
+    </div>
+
+    <div class="container mx-auto p-6 space-y-6">
+      <!-- 控制面板 -->
+      <div class="card bg-base-200 shadow-xl">
+        <div class="card-body">
+          <h2 class="card-title text-primary">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                    d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"/>
+            </svg>
+            控制面板
+          </h2>
+          
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <!-- 服务状态 -->
+            <div class="stats shadow">
+              <div class="stat">
+                <div class="stat-figure text-primary">
+                  <div class="badge" :class="statusInfo.isRunning ? 'badge-success' : 'badge-error'">
+                    {{ statusInfo.isRunning ? '运行中' : '已停止' }}
+                  </div>
+                </div>
+                <div class="stat-title">服务状态</div>
+                <div class="stat-value text-primary">HTTP</div>
+                <div class="stat-desc">端口: {{ statusInfo.serverPort }}</div>
+              </div>
+            </div>
+
+            <!-- 流信息 -->
+            <div class="stats shadow">
+              <div class="stat">
+                <div class="stat-figure text-secondary">
+                  <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                          d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                  </svg>
+                </div>
+                <div class="stat-title">视频规格</div>
+                <div class="stat-value text-secondary">{{ streamInfo.frameWidth }}×{{ streamInfo.frameHeight }}</div>
+                <div class="stat-desc">{{ streamInfo.frameRate }} FPS</div>
+              </div>
+            </div>
+            
+            <!-- 连接数 -->
+            <div class="stats shadow">
+              <div class="stat">
+                <div class="stat-figure text-accent">
+                  <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+                  </svg>
+                </div>
+                <div class="stat-title">连接数</div>
+                <div class="stat-value text-accent">{{ statusInfo.connectedClients }}</div>
+                <div class="stat-desc">
+                  <div class="dropdown dropdown-hover">
+                    <div tabindex="0" role="button" class="text-xs underline cursor-help">查看客户端</div>
+                    <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
+                      <li v-for="(client, index) in statusInfo.clientEndpoints" :key="index" class="text-xs">
+                        <a>{{ client }}</a>
+                      </li>
+                      <li v-if="!statusInfo.clientEndpoints || statusInfo.clientEndpoints.length === 0">
+                        <a class="text-xs opacity-50">无活跃连接</a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="card-actions justify-end mt-4">
+            <button 
+              class="btn btn-outline btn-primary"
+              @click="refreshStatus"
+              :disabled="loading"
+            >
+              <svg v-if="loading" class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              {{ loading ? '刷新中...' : '刷新状态' }}
+            </button>
+            <button 
+              class="btn btn-primary"
+              @click="testConnection"
+              :disabled="testing"
+            >
+              <svg v-if="testing" class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              {{ testing ? '测试中...' : '测试连接' }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 视频预览区域 -->
+      <div class="card bg-base-200 shadow-xl">
+        <div class="card-body">
+          <h2 class="card-title text-primary">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                    d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+            </svg>
+            视频预览
+          </h2>
+          
+          <div class="relative bg-black rounded-lg overflow-hidden" style="aspect-ratio: 4/3;">
+            <!-- 视频播放器 - 使用img标签直接显示MJPEG流 -->
+            <div v-show="isPlaying" class="w-full h-full flex items-center justify-center">
+              <img 
+                :src="currentVideoSource" 
+                alt="视频流" 
+                class="max-w-full max-h-full object-contain"
+                @error="handleVideoError" 
+                @load="handleVideoLoad"
+              />
+            </div>
+            
+            <!-- 错误信息显示 -->
+            <div v-if="hasVideoError" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-70">
+              <div class="card bg-error text-white shadow-lg w-full max-w-lg">
+                <div class="card-body">
+                  <h3 class="card-title flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                    视频流加载失败
+                  </h3>
+                  <p>无法连接到视频服务器，请检查以下内容：</p>
+                  <ul class="list-disc list-inside">
+                    <li>视频流服务是否已启动</li>
+                    <li>网络连接是否正常</li>
+                    <li>端口 {{ statusInfo.serverPort }} 是否可访问</li>
+                  </ul>
+                  <div class="card-actions justify-end mt-2">
+                    <button class="btn btn-sm btn-outline btn-primary" @click="tryReconnect">重试连接</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 占位符 -->
+            <div 
+              v-show="!isPlaying && !hasVideoError" 
+              class="absolute inset-0 flex items-center justify-center text-white"
+            >
+              <div class="text-center">
+                <svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                        d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                </svg>
+                <p class="text-lg opacity-75">{{ videoStatus }}</p>
+                <p class="text-sm opacity-60 mt-2">点击"播放视频流"按钮开始查看实时视频</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 视频控制 -->
+          <div class="flex justify-between items-center mt-4">
+            <div class="text-sm text-base-content/70">
+              流地址: <code class="bg-base-300 px-2 py-1 rounded">{{ streamInfo.mjpegUrl }}</code>
+            </div>
+            <div class="space-x-2">
+              <div class="dropdown dropdown-hover dropdown-top dropdown-end">
+                <div tabindex="0" role="button" class="btn btn-sm btn-outline btn-accent">
+                  <svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                  </svg>
+                  更多功能
+                </div>
+                <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-200 rounded-box w-52">
+                  <li><a @click="openInNewTab(streamInfo.htmlUrl)">在新标签打开视频页面</a></li>
+                  <li><a @click="takeSnapshot">获取并下载快照</a></li>
+                  <li><a @click="copyToClipboard(streamInfo.mjpegUrl)">复制MJPEG地址</a></li>
+                </ul>
+              </div>
+              <button 
+                class="btn btn-success btn-sm"
+                @click="startStream"
+                :disabled="isPlaying"
+              >
+                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                播放视频流
+              </button>
+              <button 
+                class="btn btn-error btn-sm"
+                @click="stopStream"
+                :disabled="!isPlaying"
+              >
+                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/>
+                </svg>
+                停止视频流
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 日志区域 -->
+      <div class="card bg-base-200 shadow-xl">
+        <div class="card-body">
+          <h2 class="card-title text-primary">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+            </svg>
+            操作日志
+          </h2>
+          
+          <div class="bg-base-300 rounded-lg p-4 h-48 overflow-y-auto">
+            <div v-for="(log, index) in logs" :key="index" class="text-sm font-mono mb-1">
+              <span class="text-base-content/50">[{{ formatTime(log.time) }}]</span>
+              <span :class="getLogClass(log.level)">{{ log.message }}</span>
+            </div>
+            <div v-if="logs.length === 0" class="text-base-content/50 text-center py-8">
+              暂无日志记录
+            </div>
+          </div>
+          
+          <div class="card-actions justify-end mt-2">
+            <button class="btn btn-outline btn-sm" @click="clearLogs">
+              清空日志
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { VideoStreamClient } from '@/APIClient'
+
+// 状态管理
+const loading = ref(false)
+const testing = ref(false)
+const isPlaying = ref(false)
+const hasVideoError = ref(false)
+const videoStatus = ref('点击"播放视频流"按钮开始查看实时视频')
+
+// 数据
+const statusInfo = ref({
+  isRunning: false,
+  serverPort: 8080,
+  streamUrl: '',
+  mjpegUrl: '',
+  snapshotUrl: '',
+  connectedClients: 0,
+  clientEndpoints: [] as string[]
+})
+
+const streamInfo = ref({
+  frameRate: 30,
+  frameWidth: 640,
+  frameHeight: 480,
+  format: 'MJPEG',
+  htmlUrl: '',
+  mjpegUrl: '',
+  snapshotUrl: ''
+})
+
+const currentVideoSource = ref('')
+const logs = ref<Array<{time: Date, level: string, message: string}>>([])
+
+// API 客户端
+const videoClient = new VideoStreamClient()
+
+// 添加日志
+const addLog = (level: string, message: string) => {
+  logs.value.push({
+    time: new Date(),
+    level,
+    message
+  })
+  // 限制日志数量
+  if (logs.value.length > 100) {
+    logs.value.shift()
+  }
+}
+
+// 格式化时间
+const formatTime = (time: Date) => {
+  return time.toLocaleTimeString()
+}
+
+// 获取日志样式
+const getLogClass = (level: string) => {
+  switch (level) {
+    case 'error': return 'text-error'
+    case 'warning': return 'text-warning'
+    case 'success': return 'text-success'
+    default: return 'text-base-content'
+  }
+}
+
+// 清空日志
+const clearLogs = () => {
+  logs.value = []
+  addLog('info', '日志已清空')
+}
+
+// 复制到剪贴板
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text)
+    .then(() => {
+      addLog('success', '已复制到剪贴板');
+    })
+    .catch((err) => {
+      addLog('error', `复制失败: ${err}`);
+    });
+}
+
+// 在新标签中打开视频页面
+const openInNewTab = (url: string) => {
+  window.open(url, '_blank');
+  addLog('info', `已在新标签打开视频页面: ${url}`);
+}
+
+// 获取并下载快照
+const takeSnapshot = async () => {
+  try {
+    addLog('info', '正在获取快照...');
+    
+    // 使用当前的快照URL
+    const snapshotUrl = streamInfo.value.snapshotUrl;
+    if (!snapshotUrl) {
+      addLog('error', '快照URL不可用');
+      return;
+    }
+    
+    // 添加时间戳防止缓存
+    const urlWithTimestamp = `${snapshotUrl}?t=${new Date().getTime()}`;
+    
+    // 创建一个临时链接下载图片
+    const a = document.createElement('a');
+    a.href = urlWithTimestamp;
+    a.download = `fpga-snapshot-${new Date().toISOString().replace(/:/g, '-')}.jpg`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    
+    addLog('success', '快照已下载');
+  } catch (error) {
+    addLog('error', `获取快照失败: ${error}`);
+    console.error('获取快照失败:', error);
+  }
+}
+
+// 刷新状态
+const refreshStatus = async () => {
+  loading.value = true
+  try {
+    addLog('info', '正在获取服务状态...')
+    
+    const status = await videoClient.status()
+    statusInfo.value = status
+    
+    const info = await videoClient.streamInfo()
+    streamInfo.value = info
+    
+    addLog('success', '服务状态获取成功')
+  } catch (error) {
+    addLog('error', `获取状态失败: ${error}`)
+    console.error('获取状态失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 测试连接
+const testConnection = async () => {
+  testing.value = true
+  try {
+    addLog('info', '正在测试视频流连接...')
+    
+    const result = await videoClient.testConnection()
+    
+    if (result) {
+      addLog('success', '视频流连接测试成功')
+    } else {
+      addLog('error', '视频流连接测试失败')
+    }
+  } catch (error) {
+    addLog('error', `连接测试失败: ${error}`)
+    console.error('连接测试失败:', error)
+  } finally {
+    testing.value = false
+  }
+}
+
+// 视频错误处理
+const handleVideoError = () => {
+  if (isPlaying.value) {
+    hasVideoError.value = true
+    addLog('error', '视频流加载失败')
+  }
+}
+
+// 视频加载成功处理
+const handleVideoLoad = () => {
+  hasVideoError.value = false
+  addLog('success', '视频流加载成功')
+}
+
+// 尝试重新连接
+const tryReconnect = () => {
+  addLog('info', '尝试重新连接视频流...')
+  hasVideoError.value = false
+  
+  // 重新设置视频源，添加时间戳避免缓存问题
+  currentVideoSource.value = `${streamInfo.value.mjpegUrl}?t=${new Date().getTime()}`
+}
+
+// 启动视频流
+const startStream = async () => {
+  try {
+    addLog('info', '正在启动视频流...')
+    videoStatus.value = '正在连接视频流...'
+    
+    // 刷新状态
+    await refreshStatus()
+    
+    // 设置视频源
+    currentVideoSource.value = streamInfo.value.mjpegUrl
+    
+    // 设置播放状态
+    isPlaying.value = true
+    hasVideoError.value = false
+    
+    addLog('success', '视频流已启动')
+  } catch (error) {
+    addLog('error', `启动视频流失败: ${error}`)
+    videoStatus.value = '启动视频流失败'
+    console.error('启动视频流失败:', error)
+  }
+}
+
+// 停止视频流
+const stopStream = () => {
+  try {
+    addLog('info', '正在停止视频流...')
+    
+    // 清除视频源
+    currentVideoSource.value = ''
+    
+    // 更新状态
+    isPlaying.value = false
+    hasVideoError.value = false
+    videoStatus.value = '点击"播放视频流"按钮开始查看实时视频'
+    
+    addLog('success', '视频流已停止')
+  } catch (error) {
+    addLog('error', `停止视频流失败: ${error}`)
+    console.error('停止视频流失败:', error)
+  }
+}
+
+// 生命周期
+onMounted(async () => {
+  addLog('info', 'HTTP 视频流页面已加载')
+  await refreshStatus()
+})
+
+onUnmounted(() => {
+  stopStream()
+})
+</script>
+
+<style scoped>
+/* 自定义样式 */
+.stats {
+  background-color: var(--b1);
+  color: var(--bc); /* 添加适配文本颜色 */
+}
+
+code {
+  font-size: 0.75rem;
+}
+
+img {
+  /* 确保视频流居中显示 */
+  margin: 0 auto;
+}
+
+* {
+  transition: all 500ms ease-in-out;
+}
+</style>