fix: 修复普通用户无法正常读取用户信息的问题

TODO.md

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

components.d.ts

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

flake.lock

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

package.json

@@ -9,24 +9,29 @@
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
-    "pregen-api": "cd server && dotnet run --property:Configuration=Release &",
+    "gen-api": "npx tsx scripts/GenerateWebAPI.ts"
-    "gen-api": "npx nswag openapi2tsclient /input:http://localhost:5000/swagger/v1/swagger.json /output:src/APIClient.ts",
-    "postgen-api": "pkill server"
   },
   "dependencies": {
     "@svgdotjs/svg.js": "^3.2.4",
+    "@tanstack/vue-table": "^8.21.3",
     "@types/lodash": "^4.17.16",
+    "@vueuse/core": "^13.5.0",
     "async-mutex": "^0.5.0",
+    "echarts": "^5.6.0",
     "highlight.js": "^11.11.1",
+    "konva": "^9.3.20",
     "lodash": "^4.17.21",
     "log-symbols": "^7.0.0",
+    "lucide-vue-next": "^0.525.0",
     "marked": "^12.0.0",
     "mathjs": "^14.4.0",
     "pinia": "^3.0.1",
-    "tinypool": "^1.0.2",
+    "reka-ui": "^2.3.1",
     "ts-log": "^2.2.7",
     "ts-results-es": "^5.0.1",
     "vue": "^3.5.13",
+    "vue-echarts": "^7.0.3",
+    "vue-konva": "^3.2.1",
     "vue-router": "4",
     "yocto-queue": "^1.2.1",
     "zod": "^3.24.2"
@@ -40,11 +45,15 @@
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.20",
     "daisyui": "^5.0.0",
+    "node-fetch": "^3.3.2",
     "npm-run-all2": "^7.0.2",
     "nswag": "^14.3.0",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.0.12",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.20.3",
     "typescript": "~5.7.3",
+    "unplugin-vue-components": "^28.8.0",
     "vite": "^6.1.0",
     "vite-plugin-vue-devtools": "^7.7.2",
     "vue-tsc": "^2.2.2"

scripts/GenerateWebAPI.ts

@@ -0,0 +1,335 @@
+import { spawn, exec, ChildProcess } from 'child_process';
+import { promisify } from 'util';
+import fetch from 'node-fetch';
+
+const execAsync = promisify(exec);
+
+async function waitForServer(url: string, maxRetries: number = 30, interval: number = 1000): Promise<boolean> {
+  for (let i = 0; i < maxRetries; i++) {
+    try {
+      const response = await fetch(url);
+      if (response.ok) {
+        console.log('✓ Server is ready');
+        return true;
+      }
+    } catch (error) {
+      // Server not ready yet
+    }
+    console.log(`Waiting for server... (${i + 1}/${maxRetries})`);
+    await new Promise(resolve => setTimeout(resolve, interval));
+  }
+  return false;
+}
+
+// 改进全局变量类型
+let serverProcess: ChildProcess | null = null;
+let webProcess: ChildProcess | null = null;
+
+async function startWeb(): Promise<ChildProcess> {
+  console.log('Starting Vite frontend...');
+  return new Promise((resolve, reject) => {
+    const process = spawn('npm', ['run', 'dev'], {
+      stdio: 'pipe'
+    });
+
+    let webStarted = false;
+
+    process.stdout?.on('data', (data) => {
+      const output = data.toString();
+      console.log(`Web: ${output}`);
+      
+      // 检查 Vite 是否已启动
+      if ((output.includes('Local:') || output.includes('ready in')) && !webStarted) {
+        webStarted = true;
+        resolve(process);
+      }
+    });
+
+    process.stderr?.on('data', (data) => {
+      console.error(`Web Error: ${data}`);
+    });
+
+    process.on('error', (error) => {
+      reject(error);
+    });
+
+    process.on('exit', (code, signal) => {
+      console.log(`Web process exited with code ${code} and signal ${signal}`);
+      if (!webStarted) {
+        reject(new Error(`Web process exited unexpectedly with code ${code}`));
+      }
+    });
+
+    // 存储进程引用
+    webProcess = process;
+    
+    // 超时处理
+    setTimeout(() => {
+      if (!webStarted) {
+        reject(new Error('Web server failed to start within timeout'));
+      }
+    }, 30000); // 30秒超时
+  });
+}
+
+async function startServer(): Promise<ChildProcess> {
+  console.log('Starting .NET server...');
+  return new Promise((resolve, reject) => {
+    const process = spawn('dotnet', ['run', '--property:Configuration=Release'], {
+      cwd: 'server',
+      stdio: 'pipe'
+    });
+
+    let serverStarted = false;
+
+    process.stdout?.on('data', (data) => {
+      const output = data.toString();
+      console.log(`Server: ${output}`);
+      
+      // 检查服务器是否已启动
+      if (output.includes('Now listening on:') && !serverStarted) {
+        serverStarted = true;
+        resolve(process);
+      }
+    });
+
+    process.stderr?.on('data', (data) => {
+      console.error(`Server Error: ${data}`);
+    });
+
+    process.on('error', (error) => {
+      reject(error);
+    });
+
+    process.on('exit', (code, signal) => {
+      console.log(`Server process exited with code ${code} and signal ${signal}`);
+      if (!serverStarted) {
+        reject(new Error(`Server process exited unexpectedly with code ${code}`));
+      }
+    });
+
+    // 存储进程引用
+    serverProcess = process;
+    
+    // 超时处理
+    setTimeout(() => {
+      if (!serverStarted) {
+        reject(new Error('Server failed to start within timeout'));
+      }
+    }, 30000); // 30秒超时
+  });
+}
+
+async function stopServer(): Promise<void> {
+  console.log('Stopping server...');
+  
+  if (!serverProcess) {
+    console.log('No server process to stop');
+    return;
+  }
+
+  try {
+    // 检查进程是否还存在
+    if (serverProcess.killed || serverProcess.exitCode !== null) {
+      console.log('✓ Server process already terminated');
+      serverProcess = null;
+      return;
+    }
+
+    // 发送 SIGTERM 信号
+    const killed = serverProcess.kill('SIGTERM');
+    if (!killed) {
+      console.warn('Failed to send SIGTERM to server process');
+      return;
+    }
+
+    // 等待进程优雅退出
+    const exitPromise = new Promise<void>((resolve) => {
+      if (serverProcess) {
+        serverProcess.on('exit', () => {
+          console.log('✓ Server stopped gracefully');
+          resolve();
+        });
+      } else {
+        resolve();
+      }
+    });
+
+    // 设置超时，如果 5 秒内没有退出则强制终止
+    const timeoutPromise = new Promise<void>((resolve) => {
+      setTimeout(() => {
+        if (serverProcess && !serverProcess.killed && serverProcess.exitCode === null) {
+          console.log('Force killing server process...');
+          serverProcess.kill('SIGKILL');
+        }
+        resolve();
+      }, 5000);
+    });
+
+    await Promise.race([exitPromise, timeoutPromise]);
+    
+  } catch (error) {
+    console.warn('Warning: Could not stop server process:', error);
+  } finally {
+    serverProcess = null;
+    
+    // 额外清理：确保没有遗留的 dotnet 进程
+    try {
+      if (process.platform !== 'win32') {
+        // 只清理与我们项目相关的进程
+        await execAsync('pkill -f "dotnet.*run.*--property:Configuration=Release"').catch(() => {
+          // 忽略错误，可能没有匹配的进程
+        });
+      }
+    } catch (cleanupError) {
+      // 忽略清理错误
+    }
+  }
+}
+
+async function stopWeb(): Promise<void> {
+  console.log('Stopping web server...');
+  
+  if (!webProcess) {
+    console.log('No web process to stop');
+    return;
+  }
+
+  try {
+    // 检查进程是否还存在
+    if (webProcess.killed || webProcess.exitCode !== null) {
+      console.log('✓ Web process already terminated');
+      webProcess = null;
+      return;
+    }
+
+    // 发送 SIGTERM 信号
+    const killed = webProcess.kill('SIGTERM');
+    if (!killed) {
+      console.warn('Failed to send SIGTERM to web process');
+      return;
+    }
+
+    // 等待进程优雅退出
+    const exitPromise = new Promise<void>((resolve) => {
+      if (webProcess) {
+        webProcess.on('exit', () => {
+          console.log('✓ Web server stopped gracefully');
+          resolve();
+        });
+      } else {
+        resolve();
+      }
+    });
+
+    // 设置超时，如果 5 秒内没有退出则强制终止
+    const timeoutPromise = new Promise<void>((resolve) => {
+      setTimeout(() => {
+        if (webProcess && !webProcess.killed && webProcess.exitCode === null) {
+          console.log('Force killing web process...');
+          webProcess.kill('SIGKILL');
+        }
+        resolve();
+      }, 5000);
+    });
+
+    await Promise.race([exitPromise, timeoutPromise]);
+    
+  } catch (error) {
+    console.warn('Warning: Could not stop web process:', error);
+  } finally {
+    webProcess = null;
+    
+    // 额外清理：确保没有遗留的 npm/node 进程
+    try {
+      if (process.platform !== 'win32') {
+        // 清理可能的 vite 进程
+        await execAsync('pkill -f "vite"').catch(() => {
+          // 忽略错误，可能没有匹配的进程
+        });
+      }
+    } catch (cleanupError) {
+      // 忽略清理错误
+    }
+  }
+}
+
+async function generateApiClient(): Promise<void> {
+  console.log('Generating API client...');
+  try {
+    await execAsync('npx nswag openapi2tsclient /input:http://localhost:5000/swagger/v1/swagger.json /output:src/APIClient.ts');
+    console.log('✓ API client generated successfully');
+  } catch (error) {
+    throw new Error(`Failed to generate API client: ${error}`);
+  }
+}
+
+async function main(): Promise<void> {
+  try {
+    // Start web frontend first
+    await startWeb();
+    console.log('✓ Frontend started');
+    
+    // Wait a bit for frontend to fully initialize
+    await new Promise(resolve => setTimeout(resolve, 3000));
+    
+    // Start server
+    await startServer();
+    console.log('✓ Backend started');
+    
+    // Wait for server to be ready (给服务器额外时间完全启动)
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    
+    // Check if swagger endpoint is available
+    const serverReady = await waitForServer('http://localhost:5000/swagger/v1/swagger.json');
+    
+    if (!serverReady) {
+      throw new Error('Server failed to start within the expected time');
+    }
+    
+    // Generate API client
+    await generateApiClient();
+    
+    console.log('✓ API generation completed successfully');
+  } catch (error) {
+    console.error('❌ Error:', error);
+    process.exit(1);
+  } finally {
+    // Always try to stop processes in order: server first, then web
+    await stopServer();
+    await stopWeb();
+  }
+}
+
+// 改进的进程终止处理
+const cleanup = async (signal: string) => {
+  console.log(`\nReceived ${signal}, cleaning up...`);
+  await stopServer();
+  await stopWeb();
+  process.exit(0);
+};
+
+process.on('SIGINT', () => cleanup('SIGINT'));
+process.on('SIGTERM', () => cleanup('SIGTERM'));
+
+// 处理未捕获的异常
+process.on('uncaughtException', async (error) => {
+  console.error('❌ Uncaught exception:', error);
+  await stopServer();
+  await stopWeb();
+  process.exit(1);
+});
+
+process.on('unhandledRejection', async (reason, promise) => {
+  console.error('❌ Unhandled rejection at:', promise, 'reason:', reason);
+  await stopServer();
+  await stopWeb();
+  process.exit(1);
+});
+
+main().catch(async (error) => {
+  console.error('❌ Unhandled error:', error);
+  await stopServer();
+  await stopWeb();
+  process.exit(1);
+});

server/Program.cs

@@ -1,12 +1,14 @@
-using System.Net;
+using System.Security.Claims;
-using System.Net.Sockets;
+using System.Text;
+using Microsoft.AspNetCore.Authentication.JwtBearer;
 using Microsoft.AspNetCore.Http.Features;
 using Microsoft.Extensions.FileProviders;
-using Microsoft.Extensions.Hosting;
+using Microsoft.IdentityModel.Tokens;
 using Newtonsoft.Json;
 using NLog;
 using NLog.Web;
-using server.src;
+using NSwag.Generation.Processors.Security;
+using server.Services;
 
 // Early init of NLog to allow startup and exception logging, before host is built
 var logger = NLog.LogManager.Setup()
@@ -38,7 +40,40 @@ try
         // Configure Newtonsoft.Json options here
         options.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
         options.SerializerSettings.NullValueHandling = NullValueHandling.Ignore;
-    });    // Add CORS policy
+    });
+
+    // Add JWT Token Authorization
+    builder.Services
+        .AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
+        .AddJwtBearer(options =>
+        {
+            options.TokenValidationParameters = new TokenValidationParameters
+            {
+                ValidateIssuer = true,
+                ValidateAudience = true,
+                ValidateLifetime = true,
+                ValidateIssuerSigningKey = true,
+                RequireExpirationTime = true,
+                ValidIssuer = "dlut.edu.cn",
+                ValidAudience = "dlut.edu.cn",
+                IssuerSigningKey = new SymmetricSecurityKey(
+                    Encoding.UTF8.GetBytes("my secret key 1234567890my secret key 1234567890")),
+            };
+            options.Authority = "http://localhost:5000";
+            options.RequireHttpsMetadata = false;
+        });
+    // Add JWT Token Authorization Policy
+    builder.Services.AddAuthorization(options =>
+    {
+        options.AddPolicy("Admin", policy =>
+        {
+            policy.RequireClaim(ClaimTypes.Role, new string[] {
+                Database.User.UserPermission.Admin.ToString(),
+            });
+        });
+    });
+
+    // Add CORS policy
     if (builder.Environment.IsDevelopment())
     {
         builder.Services.AddCors(options =>
@@ -54,10 +89,13 @@ try
     {
         options.AddPolicy("Users", policy => policy
             .AllowAnyOrigin()
+            .AllowAnyMethod()
             .AllowAnyHeader()
         );
-    });    // Add Swagger
+    });
-    builder.Services.AddOpenApiDocument(options =>
+
+    // Add Swagger
+    builder.Services.AddSwaggerDocument(options =>
     {
         options.PostProcess = document =>
         {
@@ -78,8 +116,21 @@ try
                 //     Url = "https://example.com/license"
                 // }
             };
-        };    });    
+        };
-    // 添加 HTTP 视频流服务 - 使用简化的类型引用
+
+        // Authorization
+        options.AddSecurity("Bearer", new NSwag.OpenApiSecurityScheme
+        {
+            Description = "请输入token,格式为 Bearer xxxxxxxx（注意中间必须有空格）",
+            Name = "Authorization",
+            In = NSwag.OpenApiSecurityApiKeyLocation.Header,
+            Type = NSwag.OpenApiSecuritySchemeType.ApiKey,
+        });
+        options.OperationProcessors.Add(new OperationSecurityScopeProcessor("Bearer"));
+    });
+
+
+    // 添加 HTTP 视频流服务
     builder.Services.AddSingleton<HttpVideoStreamService>();
     builder.Services.AddHostedService(provider => provider.GetRequiredService<HttpVideoStreamService>());
 
@@ -96,12 +147,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")))
         {
@@ -114,10 +167,11 @@ try
         });
         app.MapFallbackToFile("index.html");
     }
-    // Add logs
+
     app.UseHttpsRedirection();
     app.UseRouting();
     app.UseCors();
+    app.UseAuthentication();
     app.UseAuthorization();
 
     // Swagger

server/server.csproj

@@ -18,6 +18,7 @@
     <PackageReference Include="DotNext.Threading" Version="5.19.1" />
     <PackageReference Include="Honoo.IO.Hashing.Crc" Version="1.3.3" />
     <PackageReference Include="linq2db.AspNet" Version="5.4.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="9.0.7" />
     <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="9.0.4" />
     <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="9.0.4" />
     <PackageReference Include="Microsoft.OpenApi" Version="1.6.23" />

server/src/Common.cs

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

server/src/Common/Image.cs

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

server/src/Common/Number.cs

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

server/src/Common/SemaphorePool.cs

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

server/src/Common/String.cs

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

server/src/Controllers/DataController.cs

@@ -1,5 +1,10 @@
+using System.IdentityModel.Tokens.Jwt;
+using System.Security.Claims;
+using System.Text;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Cors;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.IdentityModel.Tokens;
 
 namespace server.Controllers;
 
@@ -13,57 +18,363 @@ public class DataController : ControllerBase
     private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
 
     /// <summary>
-    /// 创建数据库表
+    /// [TODO:description]
     /// </summary>
-    /// <returns>插入的记录数</returns>
+    public class UserInfo
-    [EnableCors("Development")]
-    [HttpPost("CreateTable")]
-    public IResult CreateTables()
     {
-        using var db = new Database.AppDataConnection();
+        /// <summary>
-        db.CreateAllTables();
+        /// 用户的唯一标识符
-        return TypedResults.Ok();
+        /// </summary>
+        public Guid ID { get; set; }
+
+        /// <summary>
+        /// 用户的名称
+        /// </summary>
+        public required string Name { get; set; }
+
+        /// <summary>
+        /// 用户的电子邮箱
+        /// </summary>
+        public required string EMail { get; set; }
+
+        /// <summary>
+        /// 用户关联的板卡ID
+        /// </summary>
+        public Guid BoardID { get; set; }
+
+        /// <summary>
+        /// 用户绑定板子的过期时间
+        /// </summary>
+        public DateTime? BoardExpireTime { get; set; }
     }
 
     /// <summary>
-    /// 删除数据库表
+    /// 用户登录，获取 JWT 令牌
     /// </summary>
-    /// <returns>插入的记录数</returns>
+    /// <param name="name">用户名</param>
-    [EnableCors("Development")]
+    /// <param name="password">用户密码</param>
-    [HttpDelete("DropTables")]
+    /// <returns>JWT 令牌字符串</returns>
-    public IResult DropTables()
+    [HttpPost("Login")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(string), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public IActionResult Login(string name, string password)
     {
+        // 验证用户密码
         using var db = new Database.AppDataConnection();
-        db.DropAllTables();
+        var ret = db.CheckUserPassword(name, password);
-        return TypedResults.Ok();
+        if (!ret.IsSuccessful) return StatusCode(StatusCodes.Status500InternalServerError, "数据库操作失败");
+        if (!ret.Value.HasValue) return BadRequest("用户名或密码错误");
+        var user = ret.Value.Value;
+
+        // 生成 JWT
+        var tokenHandler = new JwtSecurityTokenHandler();
+        var key = Encoding.ASCII.GetBytes("my secret key 1234567890my secret key 1234567890");
+        var tokenDescriptor = new SecurityTokenDescriptor
+        {
+            Subject = new ClaimsIdentity(new Claim[]
+            {
+                new Claim(ClaimTypes.Name, user.Name),
+                new Claim(ClaimTypes.Email, user.EMail),
+                new Claim(ClaimTypes.Role, user.Permission.ToString())
+            }),
+            Expires = DateTime.UtcNow.AddHours(1),
+            SigningCredentials = new SigningCredentials(
+                new SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature),
+            Audience = "dlut.edu.cn",
+            Issuer = "dlut.edu.cn",
+        };
+        var token = tokenHandler.CreateToken(tokenDescriptor);
+        var jwt = tokenHandler.WriteToken(token);
+
+        return Ok(jwt);
     }
 
     /// <summary>
-    /// 获取所有用户
+    /// 测试用户认证，需携带有效 JWT
     /// </summary>
-    /// <returns>用户列表</returns>
+    /// <returns>认证成功信息</returns>
-    [HttpGet("AllUsers")]
+    [Authorize]
-    public IResult AllUsers()
+    [HttpGet("TestAuth")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(string), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
+    public IActionResult TestAuth()
     {
+        return Ok("认证成功！");
+    }
+
+    /// <summary>
+    /// 测试管理员用户认证，需携带有效 JWT
+    /// </summary>
+    /// <returns>认证成功信息</returns>
+    [Authorize("Admin")]
+    [HttpGet("TestAdminAuth")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(string), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
+    public IActionResult TestAdminAuth()
+    {
+        return Ok("认证成功！");
+    }
+
+    /// <summary>
+    /// 获取当前用户信息
+    /// </summary>
+    /// <returns>用户信息，包括ID、用户名、邮箱和板卡ID</returns>
+    [Authorize]
+    [HttpGet("GetUserInfo")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(UserInfo), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
+    public IActionResult GetUserInfo()
+    {
+        // Get User Name
+        var userName = User.Identity?.Name;
+        if (string.IsNullOrEmpty(userName))
+            return Unauthorized("未找到用户名信息");
+
+        // Get User Info
         using var db = new Database.AppDataConnection();
-        var ret = db.User.ToList();
+        var ret = db.GetUserByName(userName);
-        return TypedResults.Ok(ret);
+        if (!ret.IsSuccessful)
+            return StatusCode(StatusCodes.Status500InternalServerError, "数据库操作失败");
+
+        if (!ret.Value.HasValue)
+            return BadRequest("用户不存在");
+
+        var user = ret.Value.Value;
+        return Ok(new UserInfo
+        {
+            ID = user.ID,
+            Name = user.Name,
+            EMail = user.EMail,
+            BoardID = user.BoardID,
+            BoardExpireTime = user.BoardExpireTime,
+        });
     }
 
     /// <summary>
     /// 注册新用户
     /// </summary>
-    /// <param name="name">用户名</param>
+    /// <param name="name">用户名（不超过255个字符）</param>
-    /// <returns>操作结果</returns>
+    /// <param name="email">邮箱地址</param>
+    /// <param name="password">用户密码</param>
+    /// <returns>操作结果，成功返回 true，失败返回错误信息</returns>
     [HttpPost("SignUpUser")]
-    public IResult SignUpUser(string name)
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public IActionResult SignUpUser(string name, string email, string password)
     {
+        // 验证输入参数
+        if (string.IsNullOrWhiteSpace(name))
+            return BadRequest("用户名不能为空");
+
         if (name.Length > 255)
-            return TypedResults.BadRequest("Name Couln't over 255 characters");
+            return BadRequest("用户名不能超过255个字符");
+
+        if (string.IsNullOrWhiteSpace(email))
+            return BadRequest("邮箱不能为空");
+
+        if (string.IsNullOrWhiteSpace(password))
+            return BadRequest("密码不能为空");
+
+        try
+        {
+            using var db = new Database.AppDataConnection();
+            var ret = db.AddUser(name, email, password);
+            return Ok(ret);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "注册用户时发生异常");
+            return StatusCode(StatusCodes.Status500InternalServerError, "注册失败，请稍后重试");
+        }
+    }
+
+    /// <summary>
+    /// 获取一个空闲的实验板（普通用户权限）
+    /// </summary>
+    /// <param name="durationHours">绑定持续时间（小时），默认为1小时</param>
+    [Authorize]
+    [HttpGet("GetAvailableBoard")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(Database.Board), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public IActionResult GetAvailableBoard(int durationHours = 1)
+    {
+        try
+        {
+            var userName = User.Identity?.Name;
+            if (string.IsNullOrEmpty(userName))
+                return Unauthorized("未找到用户名信息");
 
             using var db = new Database.AppDataConnection();
-        var ret = db.AddUser(name);
+            var userRet = db.GetUserByName(userName);
-        return TypedResults.Ok(ret);
+            if (!userRet.IsSuccessful || !userRet.Value.HasValue)
+                return BadRequest("用户不存在");
+
+            var user = userRet.Value.Value;
+            var expireTime = DateTime.UtcNow.AddHours(durationHours);
+            
+            var boardOpt = db.GetAvailableBoard(user.ID, expireTime);
+            if (!boardOpt.HasValue)
+                return NotFound("没有可用的实验板");
+
+            return Ok(boardOpt.Value);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "获取空闲实验板时发生异常");
+            return StatusCode(StatusCodes.Status500InternalServerError, "获取失败，请稍后重试");
+        }
+    }
+
+    /// <summary>
+    /// 解除当前用户绑定的实验板（普通用户权限）
+    /// </summary>
+    [Authorize]
+    [HttpPost("UnbindBoard")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public IActionResult UnbindBoard()
+    {
+        try
+        {
+            var userName = User.Identity?.Name;
+            if (string.IsNullOrEmpty(userName))
+                return Unauthorized("未找到用户名信息");
+
+            using var db = new Database.AppDataConnection();
+            var userRet = db.GetUserByName(userName);
+            if (!userRet.IsSuccessful || !userRet.Value.HasValue)
+                return BadRequest("用户不存在");
+
+            var user = userRet.Value.Value;
+            var result = db.UnbindUserFromBoard(user.ID);
+            return Ok(result > 0);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "解除实验板绑定时发生异常");
+            return StatusCode(StatusCodes.Status500InternalServerError, "解除失败，请稍后重试");
+        }
+    }
+
+    /// <summary>
+    /// 用户根据实验板ID获取实验板信息（普通用户权限）
+    /// </summary>
+    [Authorize]
+    [HttpGet("GetBoardByID")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(Database.Board), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status404NotFound)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public IActionResult GetBoardByID(Guid id)
+    {
+        try
+        {
+            using var db = new Database.AppDataConnection();
+            var ret = db.GetBoardByID(id);
+            if (!ret.IsSuccessful)
+                return StatusCode(StatusCodes.Status500InternalServerError, "数据库操作失败");
+            if (!ret.Value.HasValue)
+                return NotFound("未找到对应的实验板");
+            return Ok(ret.Value.Value);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "获取实验板信息时发生异常");
+            return StatusCode(StatusCodes.Status500InternalServerError, "获取失败，请稍后重试");
+        }
+    }
+
+    /// <summary>
+    /// 新增板子（管理员权限）
+    /// </summary>
+    [Authorize("Admin")]
+    [HttpPost("AddBoard")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(int), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public IActionResult AddBoard(string name, string ipAddr, int port)
+    {
+        if (string.IsNullOrWhiteSpace(name))
+            return BadRequest("板子名称不能为空");
+        if (string.IsNullOrWhiteSpace(ipAddr))
+            return BadRequest("IP地址不能为空");
+        if (port <= 0 || port > 65535)
+            return BadRequest("端口号不合法");
+        try
+        {
+            using var db = new Database.AppDataConnection();
+            var ret = db.AddBoard(name, ipAddr, port);
+            return Ok(ret);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "新增板子时发生异常");
+            return StatusCode(StatusCodes.Status500InternalServerError, "新增失败，请稍后重试");
+        }
+    }
+
+    /// <summary>
+    /// 删除板子（管理员权限）
+    /// </summary>
+    [Authorize("Admin")]
+    [HttpDelete("DeleteBoard")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(int), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public IActionResult DeleteBoard(Guid id)
+    {
+        if (id == Guid.Empty)
+            return BadRequest("板子Guid不能为空");
+
+        try
+        {
+            using var db = new Database.AppDataConnection();
+            var ret = db.DeleteBoardByID(id);
+            return Ok(ret);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "删除板子时发生异常");
+            return StatusCode(StatusCodes.Status500InternalServerError, "删除失败，请稍后重试");
+        }
+    }
+
+    /// <summary>
+    /// 获取全部板子（管理员权限）
+    /// </summary>
+    [Authorize("Admin")]
+    [HttpGet("GetAllBoards")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(Database.Board[]), StatusCodes.Status200OK)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    public IActionResult GetAllBoards()
+    {
+        try
+        {
+            using var db = new Database.AppDataConnection();
+            var boards = db.GetAllBoard();
+            return Ok(boards);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "获取全部板子时发生异常");
+            return StatusCode(StatusCodes.Status500InternalServerError, "获取失败，请稍后重试");
+        }
     }
 }
 

server/src/Controllers/JtagController.cs

@@ -1,13 +1,15 @@
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Cors;
 using Microsoft.AspNetCore.Mvc;
 
 namespace server.Controllers;
 
 /// <summary>
-/// Jtag API
+/// JTAG 控制器 - 提供 JTAG 相关的 API 操作
 /// </summary>
 [ApiController]
 [Route("api/[controller]")]
+[Authorize] // 添加用户认证要求
 public class JtagController : ControllerBase
 {
     private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
@@ -15,58 +17,81 @@ public class JtagController : ControllerBase
     private const string BITSTREAM_PATH = "bitstream/Jtag";
 
     /// <summary>
-    /// 页面
+    /// 控制器首页信息
     /// </summary>
+    /// <returns>控制器描述信息</returns>
     [HttpGet]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(string), StatusCodes.Status200OK)]
     public string Index()
     {
+        logger.Info($"User {User.Identity?.Name} accessed Jtag controller index");
         return "This is Jtag Controller";
     }
 
     /// <summary>
-    /// 获取Jtag ID Code
+    /// 获取 JTAG 设备的 ID Code
     /// </summary>
-    /// <param name="address"> 设备地址 </param>
+    /// <param name="address">JTAG 设备地址</param>
-    /// <param name="port"> 设备端口 </param>
+    /// <param name="port">JTAG 设备端口</param>
+    /// <returns>设备的 ID Code</returns>
     [HttpGet("GetDeviceIDCode")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(uint), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
     public async ValueTask<IResult> GetDeviceIDCode(string address, int port)
     {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
+        logger.Info($"User {User.Identity?.Name} requesting device ID code from {address}:{port}");
+
+        try
+        {
+            var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
             var ret = await jtagCtrl.ReadIDCode();
 
             if (ret.IsSuccessful)
             {
-            logger.Info($"Get device {address} ID code: 0x{ret.Value:X4}");
+                logger.Info($"User {User.Identity?.Name} successfully got device {address} ID code: 0x{ret.Value:X8}");
                 return TypedResults.Ok(ret.Value);
             }
             else
             {
-            logger.Error(ret.Error);
+                logger.Error($"User {User.Identity?.Name} failed to get device {address} ID code: {ret.Error}");
                 return TypedResults.InternalServerError(ret.Error);
             }
         }
+        catch (Exception ex)
+        {
+            logger.Error(ex, $"User {User.Identity?.Name} encountered exception while getting device {address} ID code");
+            return TypedResults.InternalServerError(ex);
+        }
+    }
 
     /// <summary>
-    /// 获取状态寄存器
+    /// 读取 JTAG 设备的状态寄存器
     /// </summary>
-    /// <param name="address"> 设备地址 </param>
+    /// <param name="address">JTAG 设备地址</param>
-    /// <param name="port"> 设备端口 </param>
+    /// <param name="port">JTAG 设备端口</param>
+    /// <returns>状态寄存器的原始值、二进制表示和解码值</returns>
     [HttpGet("ReadStatusReg")]
+    [EnableCors("Users")]
     [ProducesResponseType(StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status500InternalServerError)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
     public async ValueTask<IResult> ReadStatusReg(string address, int port)
     {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
+        logger.Info($"User {User.Identity?.Name} requesting status register from {address}:{port}");
+
+        try
+        {
+            var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
             var ret = await jtagCtrl.ReadStatusReg();
 
             if (ret.IsSuccessful)
             {
                 var binaryValue = Common.String.Reverse(Convert.ToString(ret.Value, 2).PadLeft(32, '0'));
-            var decodeValue = new JtagClient.JtagStatusReg(ret.Value);
+                var decodeValue = new Peripherals.JtagClient.JtagStatusReg(ret.Value);
-            logger.Info($"Read device {address} Status Register: \n\t 0b{binaryValue} \n\t {decodeValue}");
+                logger.Info($"User {User.Identity?.Name} successfully read device {address} Status Register: \n\t 0b{binaryValue} \n\t {decodeValue}");
                 return TypedResults.Ok(new
                 {
                     original = ret.Value,
@@ -76,25 +101,41 @@ public class JtagController : ControllerBase
             }
             else
             {
-            logger.Error(ret.Error);
+                logger.Error($"User {User.Identity?.Name} failed to read device {address} status register: {ret.Error}");
                 return TypedResults.InternalServerError(ret.Error);
             }
         }
+        catch (Exception ex)
+        {
+            logger.Error(ex, $"User {User.Identity?.Name} encountered exception while reading device {address} status register");
+            return TypedResults.InternalServerError(ex);
+        }
+    }
 
     /// <summary>
-    /// 上传比特流文件
+    /// 上传比特流文件到服务器
     /// </summary>
-    /// <param name="address"> 设备地址 </param>
+    /// <param name="address">目标设备地址</param>
     /// <param name="file">比特流文件</param>
+    /// <returns>上传结果</returns>
     [HttpPost("UploadBitstream")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
+    [ProducesResponseType(StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> UploadBitstream(string address, IFormFile file)
     {
-        if (file == null || file.Length == 0)
+        logger.Info($"User {User.Identity?.Name} uploading bitstream for device {address}");
-            return TypedResults.BadRequest("未选择文件");
 
+        if (file == null || file.Length == 0)
+        {
+            logger.Warn($"User {User.Identity?.Name} attempted to upload empty file for device {address}");
+            return TypedResults.BadRequest("未选择文件");
+        }
+
+        try
+        {
             // 生成安全的文件名（避免路径遍历攻击）
             var fileName = Path.GetRandomFileName();
             var uploadsFolder = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
@@ -103,6 +144,7 @@ public class JtagController : ControllerBase
             if (Directory.Exists(uploadsFolder))
             {
                 Directory.Delete(uploadsFolder, true);
+                logger.Info($"User {User.Identity?.Name} removed existing bitstream folder for device {address}");
             }
             Directory.CreateDirectory(uploadsFolder);
 
@@ -113,36 +155,55 @@ public class JtagController : ControllerBase
                 await file.CopyToAsync(stream);
             }
 
-        logger.Info($"Device {address} Upload Bitstream Successfully");
+            logger.Info($"User {User.Identity?.Name} successfully uploaded bitstream for device {address}, file size: {file.Length} bytes");
             return TypedResults.Ok(true);
         }
+        catch (Exception ex)
+        {
+            logger.Error(ex, $"User {User.Identity?.Name} failed to upload bitstream for device {address}");
+            return TypedResults.InternalServerError(ex);
+        }
+    }
 
     /// <summary>
-    /// 通过Jtag下载比特流文件
+    /// 通过 JTAG 下载比特流文件到 FPGA 设备
     /// </summary>
-    /// <param name="address"> 设备地址 </param>
+    /// <param name="address">JTAG 设备地址</param>
-    /// <param name="port"> 设备端口 </param>
+    /// <param name="port">JTAG 设备端口</param>
+    /// <returns>下载结果</returns>
     [HttpPost("DownloadBitstream")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
     public async ValueTask<IResult> DownloadBitstream(string address, int port)
     {
+        logger.Info($"User {User.Identity?.Name} initiating bitstream download to device {address}:{port}");
+
         // 检查文件
         var fileDir = Path.Combine(Environment.CurrentDirectory, $"{BITSTREAM_PATH}/{address}");
         if (!Directory.Exists(fileDir))
+        {
+            logger.Warn($"User {User.Identity?.Name} attempted to download non-existent bitstream for device {address}");
             return TypedResults.BadRequest("Empty bitstream, Please upload it first");
+        }
 
         try
         {
             // 读取文件
             var filePath = Directory.GetFiles(fileDir)[0];
+            logger.Info($"User {User.Identity?.Name} reading bitstream file: {filePath}");
 
             using (var fileStream = System.IO.File.Open(filePath, System.IO.FileMode.Open))
             {
                 if (fileStream is null || fileStream.Length <= 0)
+                {
+                    logger.Warn($"User {User.Identity?.Name} found invalid bitstream file for device {address}");
                     return TypedResults.BadRequest("Wrong bitstream, Please upload it again");
+                }
+
+                logger.Info($"User {User.Identity?.Name} processing bitstream file of size: {fileStream.Length} bytes");
 
                 // 定义缓冲区大小: 32KB
                 byte[] buffer = new byte[32 * 1024];
@@ -158,7 +219,10 @@ public class JtagController : ControllerBase
                         // 反转 32bits
                         var retBuffer = Common.Number.ReverseBytes(buffer, 4);
                         if (!retBuffer.IsSuccessful)
+                        {
+                            logger.Error($"User {User.Identity?.Name} failed to reverse bytes: {retBuffer.Error}");
                             return TypedResults.InternalServerError(retBuffer.Error);
+                        }
                         revBuffer = retBuffer.Value;
 
                         for (int i = 0; i < revBuffer.Length; i++)
@@ -172,107 +236,148 @@ public class JtagController : ControllerBase
 
                     // 将所有数据转换为字节数组（注意：如果文件非常大，可能不适合完全加载到内存）
                     var fileBytes = memoryStream.ToArray();
+                    logger.Info($"User {User.Identity?.Name} processed {totalBytesRead} bytes for device {address}");
 
                     // 下载比特流
-                    var jtagCtrl = new JtagClient.Jtag(address, port);
+                    var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
                     var ret = await jtagCtrl.DownloadBitstream(fileBytes);
 
                     if (ret.IsSuccessful)
                     {
-                        logger.Info($"Device {address} dowload bitstream successfully");
+                        logger.Info($"User {User.Identity?.Name} successfully downloaded bitstream to device {address}");
                         return TypedResults.Ok(ret.Value);
                     }
                     else
                     {
-                        logger.Error(ret.Error);
+                        logger.Error($"User {User.Identity?.Name} failed to download bitstream to device {address}: {ret.Error}");
                         return TypedResults.InternalServerError(ret.Error);
                     }
                 }
-
             }
-
         }
-        catch (Exception error)
+        catch (Exception ex)
         {
-            return TypedResults.InternalServerError(error);
+            logger.Error(ex, $"User {User.Identity?.Name} encountered exception while downloading bitstream to device {address}");
-        }
+            return TypedResults.InternalServerError(ex);
-        finally
-        {
-
         }
     }
 
     /// <summary>
-    /// [TODO:description]
+    /// 执行边界扫描，获取所有端口状态
     /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="address">JTAG 设备地址</param>
-    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="port">JTAG 设备端口</param>
-    /// <returns>[TODO:return]</returns>
+    /// <returns>边界扫描结果</returns>
     [HttpPost("BoundaryScanAllPorts")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(string), StatusCodes.Status400BadRequest)]
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
     public async ValueTask<IResult> BoundaryScanAllPorts(string address, int port)
     {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
+        logger.Info($"User {User.Identity?.Name} initiating boundary scan for all ports on device {address}:{port}");
+
+        try
+        {
+            var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
             var ret = await jtagCtrl.BoundaryScan();
+
             if (!ret.IsSuccessful)
             {
+                logger.Error($"User {User.Identity?.Name} boundary scan failed for device {address}: {ret.Error}");
                 if (ret.Error is ArgumentException)
                     return TypedResults.BadRequest(ret.Error);
-            else return TypedResults.InternalServerError(ret.Error);
+                else
+                    return TypedResults.InternalServerError(ret.Error);
             }
 
+            logger.Info($"User {User.Identity?.Name} successfully completed boundary scan for device {address}");
             return TypedResults.Ok(ret.Value);
         }
+        catch (Exception ex)
+        {
+            logger.Error(ex, $"User {User.Identity?.Name} encountered exception during boundary scan for device {address}");
+            return TypedResults.InternalServerError(ex);
+        }
+    }
 
     /// <summary>
-    /// [TODO:description]
+    /// 执行逻辑端口边界扫描
     /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="address">JTAG 设备地址</param>
-    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="port">JTAG 设备端口</param>
-    /// <returns>[TODO:return]</returns>
+    /// <returns>逻辑端口状态字典</returns>
     [HttpPost("BoundaryScanLogicalPorts")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(Dictionary<string, bool>), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
     public async ValueTask<IResult> BoundaryScanLogicalPorts(string address, int port)
     {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
+        logger.Info($"User {User.Identity?.Name} initiating logical ports boundary scan on device {address}:{port}");
+
+        try
+        {
+            var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
             var ret = await jtagCtrl.BoundaryScanLogicalPorts();
+
             if (!ret.IsSuccessful)
             {
+                logger.Error($"User {User.Identity?.Name} logical ports boundary scan failed for device {address}: {ret.Error}");
                 if (ret.Error is ArgumentException)
                     return TypedResults.BadRequest(ret.Error);
-            else return TypedResults.InternalServerError(ret.Error);
+                else
+                    return TypedResults.InternalServerError(ret.Error);
             }
 
+            logger.Info($"User {User.Identity?.Name} successfully completed logical ports boundary scan for device {address}, found {ret.Value?.Count} ports");
             return TypedResults.Ok(ret.Value);
         }
+        catch (Exception ex)
+        {
+            logger.Error(ex, $"User {User.Identity?.Name} encountered exception during logical ports boundary scan for device {address}");
+            return TypedResults.InternalServerError(ex);
+        }
+    }
 
     /// <summary>
-    /// [TODO:description]
+    /// 设置 JTAG 时钟速度
     /// </summary>
-    /// <param name="address">[TODO:parameter]</param>
+    /// <param name="address">JTAG 设备地址</param>
-    /// <param name="port">[TODO:parameter]</param>
+    /// <param name="port">JTAG 设备端口</param>
-    /// <param name="speed">[TODO:parameter]</param>
+    /// <param name="speed">时钟速度 (Hz)</param>
-    /// <returns>[TODO:return]</returns>
+    /// <returns>设置结果</returns>
     [HttpPost("SetSpeed")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    [ProducesResponseType(StatusCodes.Status401Unauthorized)]
     public async ValueTask<IResult> SetSpeed(string address, int port, UInt32 speed)
     {
-        var jtagCtrl = new JtagClient.Jtag(address, port);
+        logger.Info($"User {User.Identity?.Name} setting JTAG speed to {speed} Hz for device {address}:{port}");
+
+        try
+        {
+            var jtagCtrl = new Peripherals.JtagClient.Jtag(address, port);
             var ret = await jtagCtrl.SetSpeed(speed);
+
             if (!ret.IsSuccessful)
             {
+                logger.Error($"User {User.Identity?.Name} failed to set speed for device {address}: {ret.Error}");
                 if (ret.Error is ArgumentException)
                     return TypedResults.BadRequest(ret.Error);
-            else return TypedResults.InternalServerError(ret.Error);
+                else
+                    return TypedResults.InternalServerError(ret.Error);
             }
 
+            logger.Info($"User {User.Identity?.Name} successfully set JTAG speed to {speed} Hz for device {address}");
             return TypedResults.Ok(ret.Value);
         }
+        catch (Exception ex)
+        {
+            logger.Error(ex, $"User {User.Identity?.Name} encountered exception while setting speed for device {address}");
+            return TypedResults.InternalServerError(ex);
+        }
+    }
 }

server/src/Controllers/RemoteUpdateController.cs

@@ -1,4 +1,5 @@
 using DotNext;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Cors;
 using Microsoft.AspNetCore.Mvc;
 
@@ -24,6 +25,7 @@ public class RemoteUpdateController : ControllerBase
     /// <param name="bitstream2">比特流文件2</param>
     /// <param name="bitstream3">比特流文件3</param>
     /// <returns>上传结果</returns>
+    [Authorize("Admin")]
     [HttpPost("UploadBitstream")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
@@ -129,6 +131,7 @@ public class RemoteUpdateController : ControllerBase
     /// <param name="address"> 设备地址 </param>
     /// <param name="port"> 设备端口 </param>
     /// <param name="bitstreamNum"> 比特流位号 </param>
+    [Authorize("Admin")]
     [HttpPost("DownloadBitstream")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
@@ -150,7 +153,7 @@ public class RemoteUpdateController : ControllerBase
             if (!fileBytes.IsSuccessful) return TypedResults.InternalServerError(fileBytes.Error);
 
             // 下载比特流
-            var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
+            var remoteUpdater = new Peripherals.RemoteUpdateClient.RemoteUpdater(address, port);
             var ret = await remoteUpdater.UpdateBitstream(bitstreamNum, fileBytes.Value);
 
             if (ret.IsSuccessful)
@@ -179,6 +182,7 @@ public class RemoteUpdateController : ControllerBase
     /// <param name="port">设备端口</param>
     /// <param name="bitstreamNum">比特流编号</param>
     /// <returns>总共上传比特流的数量</returns>
+    [Authorize("Admin")]
     [HttpPost("DownloadMultiBitstreams")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(int), StatusCodes.Status200OK)]
@@ -210,7 +214,7 @@ public class RemoteUpdateController : ControllerBase
             }
 
             // 下载比特流
-            var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
+            var remoteUpdater = new Peripherals.RemoteUpdateClient.RemoteUpdater(address, port);
             {
                 var ret = await remoteUpdater.UploadBitstreams(bitstreams[0], bitstreams[1], bitstreams[2], bitstreams[3]);
                 if (!ret.IsSuccessful) return TypedResults.InternalServerError(ret.Error);
@@ -239,6 +243,7 @@ public class RemoteUpdateController : ControllerBase
     /// <param name="port">设备端口</param>
     /// <param name="bitstreamNum">比特流编号</param>
     /// <returns>操作结果</returns>
+    [Authorize("Admin")]
     [HttpPost("HotResetBitstream")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(bool), StatusCodes.Status200OK)]
@@ -246,7 +251,7 @@ public class RemoteUpdateController : ControllerBase
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> HotResetBitstream(string address, int port, int bitstreamNum)
     {
-        var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
+        var remoteUpdater = new Peripherals.RemoteUpdateClient.RemoteUpdater(address, port);
         var ret = await remoteUpdater.HotResetBitstream(bitstreamNum);
 
         if (ret.IsSuccessful)
@@ -267,6 +272,7 @@ public class RemoteUpdateController : ControllerBase
     /// <param name="address">[TODO:parameter]</param>
     /// <param name="port">[TODO:parameter]</param>
     /// <returns>[TODO:return]</returns>
+    [Authorize("Admin")]
     [HttpPost("GetFirmwareVersion")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(UInt32), StatusCodes.Status200OK)]
@@ -274,7 +280,7 @@ public class RemoteUpdateController : ControllerBase
     [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
     public async ValueTask<IResult> GetFirmwareVersion(string address, int port)
     {
-        var remoteUpdater = new RemoteUpdateClient.RemoteUpdater(address, port);
+        var remoteUpdater = new Peripherals.RemoteUpdateClient.RemoteUpdater(address, port);
         var ret = await remoteUpdater.GetVersion();
 
         if (ret.IsSuccessful)

server/src/Controllers/TutorialController.cs

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

server/src/Controllers/UDPController.cs

@@ -109,6 +109,7 @@ public class UDPController : ControllerBase
     /// 获取指定IP地址接收的数据列表
     /// </summary>
     /// <param name="address">IP地址</param>
+    /// <param name="taskID">任务ID</param>
     [HttpGet("GetRecvDataArray")]
     [ProducesResponseType(typeof(List<UDPData>), StatusCodes.Status200OK)]
     [ProducesResponseType(StatusCodes.Status500InternalServerError)]

server/src/Controllers/VideoStreamController.cs

@@ -1,29 +1,57 @@
+using System.ComponentModel.DataAnnotations;
+using System.Threading.Tasks;
 using Microsoft.AspNetCore.Cors;
 using Microsoft.AspNetCore.Mvc;
 
-namespace server.src.Controllers;    /// <summary>
+/// <summary>
-    /// HTTP 视频流控制器
+/// 视频流控制器，支持动态配置摄像头连接
+/// </summary>
+[ApiController]
+[Route("api/[controller]")]
+public class VideoStreamController : ControllerBase
+{
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+    private readonly server.Services.HttpVideoStreamService _videoStreamService;
+
+    /// <summary>
+    /// 摄像头配置请求模型
     /// </summary>
-    [ApiController]
+    public class CameraConfigRequest
-    [Route("api/[controller]")]
+    {
-    public class VideoStreamController : ControllerBase
+        /// <summary>
-    {    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+        /// 摄像头地址
-    private readonly server.src.HttpVideoStreamService _videoStreamService;    /// <summary>
+        /// </summary>
+        [Required]
+        [RegularExpression(@"^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$", ErrorMessage = "请输入有效的IP地址")]
+        public string Address { get; set; } = "";
+
+        /// <summary>
+        /// 摄像头端口
+        /// </summary>
+        [Required]
+        [Range(1, 65535, ErrorMessage = "端口必须在1-65535范围内")]
+        public int Port { get; set; }
+    }
+
+    /// <summary>
     /// 初始化HTTP视频流控制器
     /// </summary>
     /// <param name="videoStreamService">HTTP视频流服务</param>
-    public VideoStreamController(server.src.HttpVideoStreamService videoStreamService)
+    public VideoStreamController(server.Services.HttpVideoStreamService videoStreamService)
     {
         logger.Info("创建VideoStreamController，命名空间：{Namespace}", this.GetType().Namespace);
         _videoStreamService = videoStreamService;
-    }    /// <summary>
+    }
+
+    /// <summary>
     /// 获取 HTTP 视频流服务状态
     /// </summary>
     /// <returns>服务状态信息</returns>
     [HttpGet("Status")]
     [EnableCors("Users")]
     [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
-    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]    public IResult GetStatus()
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public IResult GetStatus()
     {
         try
         {
@@ -33,19 +61,12 @@ namespace server.src.Controllers;    /// <summary>
             var status = _videoStreamService.GetServiceStatus();
 
             // 转换为小写首字母的JSON属性（符合前端惯例）
-            return TypedResults.Ok(new 
+            return TypedResults.Ok(status);
+        }
+        catch (Exception ex)
         {
-                isRunning = true, // HTTP视频流服务作为后台服务始终运行
+            logger.Error(ex, "获取 HTTP 视频流服务状态失败");
-                serverPort = _videoStreamService.ServerPort,
+            return TypedResults.InternalServerError(ex.Message);
-                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);
         }
     }
 
@@ -70,15 +91,102 @@ namespace server.src.Controllers;    /// <summary>
                 format = "MJPEG",
                 htmlUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-feed.html",
                 mjpegUrl = $"http://localhost:{_videoStreamService.ServerPort}/video-stream",
-                snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot"
+                snapshotUrl = $"http://localhost:{_videoStreamService.ServerPort}/snapshot",
             });
         }
         catch (Exception ex)
         {
-            logger.Error(ex, "获取 HTTP 视频流信息失败");            return TypedResults.InternalServerError(ex.Message);
+            logger.Error(ex, "获取 HTTP 视频流信息失败");
+            return TypedResults.InternalServerError(ex.Message);
         }
     }
 
+    /// <summary>
+    /// 配置摄像头连接参数
+    /// </summary>
+    /// <param name="config">摄像头配置</param>
+    /// <returns>配置结果</returns>
+    [HttpPost("ConfigureCamera")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(object), StatusCodes.Status400BadRequest)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async Task<IResult> ConfigureCamera([FromBody] CameraConfigRequest config)
+    {
+        try
+        {
+            logger.Info("配置摄像头连接: {Address}:{Port}", config.Address, config.Port);
+
+            var success = await _videoStreamService.ConfigureCameraAsync(config.Address, config.Port);
+
+            if (success)
+            {
+                return TypedResults.Ok(new
+                {
+                    success = true,
+                    message = "摄像头配置成功",
+                    cameraAddress = config.Address,
+                    cameraPort = config.Port
+                });
+            }
+            else
+            {
+                return TypedResults.BadRequest(new
+                {
+                    success = false,
+                    message = "摄像头配置失败",
+                    cameraAddress = config.Address,
+                    cameraPort = config.Port
+                });
+            }
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "配置摄像头连接失败");
+            return TypedResults.InternalServerError(ex.Message);
+        }
+    }
+
+    /// <summary>
+    /// 获取当前摄像头配置
+    /// </summary>
+    /// <returns>摄像头配置信息</returns>
+    [HttpGet("CameraConfig")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public IResult GetCameraConfig()
+    {
+        try
+        {
+            logger.Info("获取摄像头配置");
+            var cameraStatus = _videoStreamService.GetCameraStatus();
+
+            return TypedResults.Ok(cameraStatus);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "获取摄像头配置失败");
+            return TypedResults.InternalServerError(ex.Message);
+        }
+    }
+
+    /// <summary>
+    /// 控制 HTTP 视频流服务开关
+    /// </summary>
+    /// <param name="enabled">是否启用服务</param>
+    /// <returns>操作结果</returns>
+    [HttpPost("SetEnabled")]
+    [EnableCors("Users")]
+    [ProducesResponseType(typeof(object), StatusCodes.Status200OK)]
+    [ProducesResponseType(typeof(Exception), StatusCodes.Status500InternalServerError)]
+    public async Task<IResult> SetEnabled([FromQuery] bool enabled)
+    {
+        logger.Info("设置视频流服务开关: {Enabled}", enabled);
+        await _videoStreamService.SetEnable(enabled);
+        return TypedResults.Ok();
+    }
+
     /// <summary>
     /// 测试 HTTP 视频流连接
     /// </summary>
@@ -94,16 +202,29 @@ namespace server.src.Controllers;    /// <summary>
             logger.Info("测试 HTTP 视频流连接");
 
             // 尝试通过HTTP请求检查视频流服务是否可访问
+            bool isConnected = false;
             using (var httpClient = new HttpClient())
             {
                 httpClient.Timeout = TimeSpan.FromSeconds(2); // 设置较短的超时时间
                 var response = await httpClient.GetAsync($"http://localhost:{_videoStreamService.ServerPort}/");
 
                 // 只要能连接上就认为成功，不管返回状态
-                bool isConnected = response.IsSuccessStatusCode;
+                isConnected = response.IsSuccessStatusCode;
-                
-                return TypedResults.Ok(isConnected);
             }
+
+            logger.Info("测试摄像头连接");
+
+            var (isSuccess, message) = await _videoStreamService.TestCameraConnectionAsync();
+
+            return TypedResults.Ok(new
+            {
+                isConnected = isConnected,
+                success = isSuccess,
+                message = message,
+                cameraAddress = _videoStreamService.CameraAddress,
+                cameraPort = _videoStreamService.CameraPort,
+                timestamp = DateTime.Now
+            });
         }
         catch (Exception ex)
         {

server/src/Database.cs

@@ -1,3 +1,4 @@
+using DotNext;
 using LinqToDB;
 using LinqToDB.Data;
 using LinqToDB.Mapping;
@@ -20,6 +21,52 @@ public class User
     /// </summary>
     [NotNull]
     public required string Name { get; set; }
+
+    /// <summary>
+    /// 用户的电子邮箱
+    /// </summary>
+    [NotNull]
+    public required string EMail { get; set; }
+
+    /// <summary>
+    /// 用户的密码（应该进行哈希处理）
+    /// </summary>
+    [NotNull]
+    public required string Password { get; set; }
+
+    /// <summary>
+    /// 用户权限等级
+    /// </summary>
+    [NotNull]
+    public required UserPermission Permission { get; set; }
+
+    /// <summary>
+    /// 绑定的实验板ID，如果未绑定则为空
+    /// </summary>
+    [Nullable]
+    public Guid BoardID { get; set; }
+
+    /// <summary>
+    /// 用户绑定板子的过期时间
+    /// </summary>
+    [Nullable]
+    public DateTime? BoardExpireTime { get; set; }
+
+    /// <summary>
+    /// 用户权限枚举
+    /// </summary>
+    public enum UserPermission
+    {
+        /// <summary>
+        /// 管理员权限，可以管理用户和实验板
+        /// </summary>
+        Admin,
+
+        /// <summary>
+        /// 普通用户权限，只能使用实验板
+        /// </summary>
+        Normal,
+    }
 }
 
 /// <summary>
@@ -31,13 +78,65 @@ public class Board
     /// FPGA 板子的唯一标识符
     /// </summary>
     [PrimaryKey]
-    public Guid Id { get; set; } = Guid.NewGuid();
+    public Guid ID { get; set; } = Guid.NewGuid();
 
     /// <summary>
     /// FPGA 板子的名称
     /// </summary>
     [NotNull]
     public required string BoardName { get; set; }
+
+    /// <summary>
+    /// FPGA 板子的IP地址
+    /// </summary>
+    [NotNull]
+    public required string IpAddr { get; set; }
+
+    /// <summary>
+    /// FPGA 板子的通信端口
+    /// </summary>
+    [NotNull]
+    public required int Port { get; set; }
+
+    /// <summary>
+    /// FPGA 板子的当前状态
+    /// </summary>
+    [NotNull]
+    public required BoardStatus Status { get; set; }
+
+    /// <summary>
+    /// 占用该板子的用户的唯一标识符
+    /// </summary>
+    [Nullable]
+    public Guid OccupiedUserID { get; set; }
+
+    /// <summary>
+    /// 占用该板子的用户的用户名
+    /// </summary>
+    [Nullable]
+    public string? OccupiedUserName { get; set; }
+
+    /// <summary>
+    /// FPGA 板子的固件版本号
+    /// </summary>
+    [NotNull]
+    public string FirmVersion { get; set; } = "1.0.0";
+
+    /// <summary>
+    /// FPGA 板子状态枚举
+    /// </summary>
+    public enum BoardStatus
+    {
+        /// <summary>
+        /// 繁忙状态，正在被用户使用
+        /// </summary>
+        Busy,
+
+        /// <summary>
+        /// 可用状态，可以被分配给用户
+        /// </summary>
+        Available,
+    }
 }
 
 /// <summary>
@@ -45,14 +144,38 @@ public class Board
 /// </summary>
 public class AppDataConnection : DataConnection
 {
+    private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    static readonly string DATABASE_FILEPATH = $"{Environment.CurrentDirectory}/Database.sqlite";
+
     static readonly LinqToDB.DataOptions options =
-        new LinqToDB.DataOptions()
+        new LinqToDB.DataOptions().UseSQLite($"Data Source={DATABASE_FILEPATH}");
-            .UseSQLite($"Data Source={Environment.CurrentDirectory}/Database.sqlite");
 
     /// <summary>
     /// 初始化应用程序数据连接
     /// </summary>
-    public AppDataConnection() : base(options) { }
+    public AppDataConnection() : base(options)
+    {
+        if (!Path.Exists(DATABASE_FILEPATH))
+        {
+            logger.Info($"数据库文件不存在，正在创建新数据库: {DATABASE_FILEPATH}");
+            LinqToDB.DataProvider.SQLite.SQLiteTools.CreateDatabase(DATABASE_FILEPATH);
+            this.CreateAllTables();
+            var user = new User()
+            {
+                Name = "Admin",
+                EMail = "selfconfusion@gmail.com",
+                Password = "12345678",
+                Permission = Database.User.UserPermission.Admin,
+            };
+            this.Insert(user);
+            logger.Info("默认管理员用户已创建");
+        }
+        else
+        {
+            logger.Info($"数据库连接已建立: {DATABASE_FILEPATH}");
+        }
+    }
 
 
     /// <summary>
@@ -60,8 +183,10 @@ public class AppDataConnection : DataConnection
     /// </summary>
     public void CreateAllTables()
     {
+        logger.Info("正在创建数据库表...");
         this.CreateTable<User>();
         this.CreateTable<Board>();
+        logger.Info("数据库表创建完成");
     }
 
     /// <summary>
@@ -69,45 +194,361 @@ public class AppDataConnection : DataConnection
     /// </summary>
     public void DropAllTables()
     {
+        logger.Warn("正在删除所有数据库表...");
         this.DropTable<User>();
         this.DropTable<Board>();
+        logger.Warn("所有数据库表已删除");
     }
 
     /// <summary>
     /// 添加一个新的用户到数据库
     /// </summary>
     /// <param name="name">用户的名称</param>
+    /// <param name="email">用户的电子邮箱地址</param>
+    /// <param name="password">用户的密码</param>
     /// <returns>插入的记录数</returns>
-    public int AddUser(string name)
+    public int AddUser(string name, string email, string password)
     {
         var user = new User()
         {
-            Name = name
+            Name = name,
+            EMail = email,
+            Password = password,
+            Permission = Database.User.UserPermission.Normal,
         };
-        return this.Insert(user);
+        var result = this.Insert(user);
+        logger.Info($"新用户已添加: {name} ({email})");
+        return result;
+    }
+
+    /// <summary>
+    /// 根据用户名获取用户信息
+    /// </summary>
+    /// <param name="name">用户名</param>
+    /// <returns>包含用户信息的结果，如果未找到或出错则返回相应状态</returns>
+    public Result<Optional<User>> GetUserByName(string name)
+    {
+        var user = this.UserTable.Where((user) => user.Name == name).ToArray();
+
+        if (user.Length > 1)
+        {
+            logger.Error($"数据库中存在多个同名用户: {name}");
+            return new(new Exception($"数据库中存在多个同名用户: {name}"));
+        }
+
+        if (user.Length == 0)
+        {
+            logger.Info($"未找到用户: {name}");
+            return new(Optional<User>.None);
+        }
+
+        logger.Debug($"成功获取用户信息: {name}");
+        return new(user[0]);
+    }
+
+    /// <summary>
+    /// 根据电子邮箱获取用户信息
+    /// </summary>
+    /// <param name="email">用户的电子邮箱地址</param>
+    /// <returns>包含用户信息的结果，如果未找到或出错则返回相应状态</returns>
+    public Result<Optional<User>> GetUserByEMail(string email)
+    {
+        var user = this.UserTable.Where((user) => user.EMail == email).ToArray();
+
+        if (user.Length > 1)
+        {
+            logger.Error($"数据库中存在多个相同邮箱的用户: {email}");
+            return new(new Exception($"数据库中存在多个相同邮箱的用户: {email}"));
+        }
+
+        if (user.Length == 0)
+        {
+            logger.Info($"未找到邮箱对应的用户: {email}");
+            return new(Optional<User>.None);
+        }
+
+        logger.Debug($"成功获取用户信息: {email}");
+        return new(user[0]);
+    }
+
+    /// <summary>
+    /// 验证用户密码
+    /// </summary>
+    /// <param name="name">用户名</param>
+    /// <param name="password">用户密码</param>
+    /// <returns>如果密码正确返回用户信息，否则返回空</returns>
+    public Result<Optional<User>> CheckUserPassword(string name, string password)
+    {
+        var ret = this.GetUserByName(name);
+        if (!ret.IsSuccessful)
+            return new(ret.Error);
+
+        if (!ret.Value.HasValue)
+            return new(Optional<User>.None);
+
+        var user = ret.Value.Value;
+
+        if (user.Password == password)
+        {
+            logger.Info($"用户 {name} 密码验证成功");
+            return new(user);
+        }
+        else
+        {
+            logger.Warn($"用户 {name} 密码验证失败");
+            return new(Optional<User>.None);
+        }
+    }
+
+    /// <summary>
+    /// 绑定用户与实验板
+    /// </summary>
+    /// <param name="userId">用户的唯一标识符</param>
+    /// <param name="boardId">实验板的唯一标识符</param>
+    /// <param name="expireTime">绑定过期时间</param>
+    /// <returns>更新的记录数</returns>
+    public int BindUserToBoard(Guid userId, Guid boardId, DateTime expireTime)
+    {
+        // 获取用户信息
+        var user = this.UserTable.Where(u => u.ID == userId).FirstOrDefault();
+        if (user == null)
+        {
+            logger.Error($"未找到用户: {userId}");
+            return 0;
+        }
+
+        // 更新用户的板子绑定信息
+        var userResult = this.UserTable
+            .Where(u => u.ID == userId)
+            .Set(u => u.BoardID, boardId)
+            .Set(u => u.BoardExpireTime, expireTime)
+            .Update();
+
+        // 更新板子的用户绑定信息
+        var boardResult = this.BoardTable
+            .Where(b => b.ID == boardId)
+            .Set(b => b.Status, Board.BoardStatus.Busy)
+            .Set(b => b.OccupiedUserID, userId)
+            .Set(b => b.OccupiedUserName, user.Name)
+            .Update();
+
+        logger.Info($"用户 {userId} ({user.Name}) 已绑定到实验板 {boardId}，过期时间: {expireTime}");
+        return userResult + boardResult;
+    }
+
+    /// <summary>
+    /// 解除用户与实验板的绑定
+    /// </summary>
+    /// <param name="userId">用户的唯一标识符</param>
+    /// <returns>更新的记录数</returns>
+    public int UnbindUserFromBoard(Guid userId)
+    {
+        // 获取用户当前绑定的板子ID
+        var user = this.UserTable.Where(u => u.ID == userId).FirstOrDefault();
+        Guid boardId = user?.BoardID ?? Guid.Empty;
+
+        // 清空用户的板子绑定信息
+        var userResult = this.UserTable
+            .Where(u => u.ID == userId)
+            .Set(u => u.BoardID, Guid.Empty)
+            .Set(u => u.BoardExpireTime, (DateTime?)null)
+            .Update();
+
+        // 如果用户原本绑定了板子，则清空板子的用户绑定信息
+        int boardResult = 0;
+        if (boardId != Guid.Empty)
+        {
+            boardResult = this.BoardTable
+                .Where(b => b.ID == boardId)
+                .Set(b => b.Status, Board.BoardStatus.Available)
+                .Set(b => b.OccupiedUserID, Guid.Empty)
+                .Set(b => b.OccupiedUserName, (string?)null)
+                .Update();
+            logger.Info($"实验板 {boardId} 状态已设置为空闲，用户绑定信息已清空");
+        }
+
+        logger.Info($"用户 {userId} 已解除实验板绑定");
+        return userResult + boardResult;
     }
 
     /// <summary>
     /// 添加一块新的 FPGA 板子到数据库
     /// </summary>
     /// <param name="name">FPGA 板子的名称</param>
+    /// <param name="ipAddr">FPGA 板子的IP地址</param>
+    /// <param name="port">FPGA 板子的通信端口</param>
     /// <returns>插入的记录数</returns>
-    public int AddBoard(string name)
+    public int AddBoard(string name, string ipAddr, int port)
     {
         var board = new Board()
         {
-            BoardName = name
+            BoardName = name,
+            IpAddr = ipAddr,
+            Port = port,
+            Status = Database.Board.BoardStatus.Available,
         };
-        return this.Insert(board);
+        var result = this.Insert(board);
+        logger.Info($"新实验板已添加: {name} ({ipAddr}:{port})");
+        return result;
+    }
+
+    /// <summary>
+    /// 根据名称删除实验板
+    /// </summary>
+    /// <param name="name">实验板的名称</param>
+    /// <returns>删除的记录数</returns>
+    public int DeleteBoardByName(string name)
+    {
+        // 先获取要删除的板子信息
+        var board = this.BoardTable.Where(b => b.BoardName == name).FirstOrDefault();
+        if (board == null)
+        {
+            logger.Warn($"未找到名称为 {name} 的实验板");
+            return 0;
+        }
+
+        // 如果板子被占用，先解除绑定
+        if (board.OccupiedUserID != Guid.Empty)
+        {
+            this.UserTable
+                .Where(u => u.ID == board.OccupiedUserID)
+                .Set(u => u.BoardID, Guid.Empty)
+                .Set(u => u.BoardExpireTime, (DateTime?)null)
+                .Update();
+            logger.Info($"已解除用户 {board.OccupiedUserID} 与实验板 {name} 的绑定");
+        }
+
+        var result = this.BoardTable.Where(b => b.BoardName == name).Delete();
+        logger.Info($"实验板已删除: {name}，删除记录数: {result}");
+        return result;
+    }
+
+    /// <summary>
+    /// 根据ID删除实验板
+    /// </summary>
+    /// <param name="id">实验板的唯一标识符</param>
+    /// <returns>删除的记录数</returns>
+    public int DeleteBoardByID(Guid id)
+    {
+        // 先获取要删除的板子信息
+        var board = this.BoardTable.Where(b => b.ID == id).FirstOrDefault();
+        if (board == null)
+        {
+            logger.Warn($"未找到ID为 {id} 的实验板");
+            return 0;
+        }
+
+        // 如果板子被占用，先解除绑定
+        if (board.OccupiedUserID != Guid.Empty)
+        {
+            this.UserTable
+                .Where(u => u.ID == board.OccupiedUserID)
+                .Set(u => u.BoardID, Guid.Empty)
+                .Set(u => u.BoardExpireTime, (DateTime?)null)
+                .Update();
+            logger.Info($"已解除用户 {board.OccupiedUserID} 与实验板 {id} 的绑定");
+        }
+
+        var result = this.BoardTable.Where(b => b.ID == id).Delete();
+        logger.Info($"实验板已删除: {id}，删除记录数: {result}");
+        return result;
+    }
+
+    /// <summary>
+    /// 根据实验板ID获取实验板信息
+    /// </summary>
+    /// <param name="id">实验板的唯一标识符</param>
+    /// <returns>包含实验板信息的结果，如果未找到则返回空</returns>
+    public Result<Optional<Board>> GetBoardByID(Guid id)
+    {
+        var boards = this.BoardTable.Where(board => board.ID == id).ToArray();
+
+        if (boards.Length > 1)
+        {
+            logger.Error($"数据库中存在多个相同ID的实验板: {id}");
+            return new(new Exception($"数据库中存在多个相同ID的实验板: {id}"));
+        }
+
+        if (boards.Length == 0)
+        {
+            logger.Info($"未找到ID对应的实验板: {id}");
+            return new(Optional<Board>.None);
+        }
+
+        logger.Debug($"成功获取实验板信息: {id}");
+        return new(boards[0]);
+    }
+
+    /// <summary>
+    /// 获取所有实验板信息
+    /// </summary>
+    /// <returns>所有实验板的数组</returns>
+    public Board[] GetAllBoard()
+    {
+        var boards = this.BoardTable.ToArray();
+        logger.Debug($"获取所有实验板，共 {boards.Length} 块");
+        return boards;
+    }
+
+    /// <summary>
+    /// 获取一块可用的实验板并将其状态设置为繁忙
+    /// </summary>
+    /// <param name="userId">要分配板子的用户ID</param>
+    /// <param name="expireTime">绑定过期时间</param>
+    /// <returns>可用的实验板，如果没有可用的板子则返回空</returns>
+    public Optional<Board> GetAvailableBoard(Guid userId, DateTime expireTime)
+    {
+        var boards = this.BoardTable.Where(
+                (board) => board.Status == Database.Board.BoardStatus.Available
+            ).ToArray();
+
+        if (boards.Length == 0)
+        {
+            logger.Warn("没有可用的实验板");
+            return new(null);
+        }
+        else
+        {
+            var board = boards[0];
+            var user = this.UserTable.Where(u => u.ID == userId).FirstOrDefault();
+            
+            if (user == null)
+            {
+                logger.Error($"未找到用户: {userId}");
+                return new(null);
+            }
+
+            // 更新板子状态和用户绑定信息
+            this.BoardTable
+                .Where(target => target.ID == board.ID)
+                .Set(target => target.Status, Board.BoardStatus.Busy)
+                .Set(target => target.OccupiedUserID, userId)
+                .Set(target => target.OccupiedUserName, user.Name)
+                .Update();
+
+            // 更新用户的板子绑定信息
+            this.UserTable
+                .Where(u => u.ID == userId)
+                .Set(u => u.BoardID, board.ID)
+                .Set(u => u.BoardExpireTime, expireTime)
+                .Update();
+
+            board.Status = Database.Board.BoardStatus.Busy;
+            board.OccupiedUserID = userId;
+            board.OccupiedUserName = user.Name;
+
+            logger.Info($"实验板 {board.BoardName} ({board.ID}) 已分配给用户 {user.Name} ({userId})，过期时间: {expireTime}");
+            return new(board);
+        }
     }
 
     /// <summary>
     /// 用户表
     /// </summary>
-    public ITable<User> User => this.GetTable<User>();
+    public ITable<User> UserTable => this.GetTable<User>();
 
     /// <summary>
     /// FPGA 板子表
     /// </summary>
-    public ITable<Board> Board => this.GetTable<Board>();
+    public ITable<Board> BoardTable => this.GetTable<Board>();
 }

server/src/HttpVideoStreamService.cs

@@ -1,583 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Net;
-using System.Net.Sockets;
-using System.Threading;
-using System.Threading.Tasks;
-using Microsoft.Extensions.Hosting;
-using Microsoft.Extensions.Logging;
-using SixLabors.ImageSharp;
-using SixLabors.ImageSharp.Formats.Jpeg;
-using SixLabors.ImageSharp.PixelFormats;
-using System.Text;
-
-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/Peripherals/CameraClient.cs

@@ -0,0 +1,363 @@
+using System.Net;
+using DotNext;
+
+namespace Peripherals.CameraClient;
+
+static class CameraAddr
+{
+    public const UInt32 BASE = 0x7000_0000;
+
+    public const UInt32 STORE_ADDR = BASE + 0x12;
+    public const UInt32 STORE_NUM = BASE + 0x13;
+    public const UInt32 EXPECTED_VH = BASE + 0x14;
+    public const UInt32 CAPTURE_ON = BASE + 0x15;
+}
+
+class Camera
+{
+    private static readonly NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    readonly int timeout = 2000;
+    readonly int taskID;
+    readonly int port;
+    readonly string address;
+    private IPEndPoint ep;
+
+
+    const uint CAM_I2C_ADDR = 0x3C;
+    const Peripherals.I2cClient.I2cProtocol CAM_PROTO = Peripherals.I2cClient.I2cProtocol.SCCB;
+    const UInt16 H_START = 0;      //default: 0
+    const UInt16 V_START = 0;      //default: 0
+    const UInt16 DVPHO = 640;      //default: 2592 (0xA20)
+    const UInt16 DVPVO = 480;      //default: 1944 (0x798)
+    const UInt16 H_END = H_START + 1500 - 1; //default: 2624-1 (0xA3F)
+    const UInt16 V_END = V_START + 1300 - 1; //default: 1951-1 (0x79F)
+    const UInt16 HTS = 1700;       //default: 2844 (0xB1C)
+    const UInt16 VTS = 1500;       //default: 1968 (0x7B0)
+    const UInt16 H_OFFSET = 16;    //default: 16 (0x10)
+    const UInt16 V_OFFSET = 4;     //default: 4 (0x04)
+    const byte PLL_MUX = 10;
+    const UInt32 FrameAddr = 0x00;
+    const UInt32 FrameLength = DVPHO * DVPVO * 16 / 32;
+
+    static byte[][] InitCmdData = new byte[][] {
+        // Stop streaming
+        new byte[] { 0x30, 0x08, 0x82 }, //82是复位
+        // delay 5ms
+        new byte[] { 0x30, 0x08, 0x42 }, //42是休眠
+        new byte[] { 0x31, 0x03, 0x02 },
+        new byte[] { 0x30, 0x17, 0xff },
+        new byte[] { 0x30, 0x18, 0xff },
+        new byte[] { 0x30, 0x37, 0x13 },
+        new byte[] { 0x31, 0x08, 0x01 },
+        new byte[] { 0x36, 0x30, 0x36 },
+        new byte[] { 0x36, 0x31, 0x0e },
+        new byte[] { 0x36, 0x32, 0xe2 },
+        new byte[] { 0x36, 0x33, 0x12 },
+        new byte[] { 0x36, 0x21, 0xe0 },
+        new byte[] { 0x37, 0x04, 0xa0 },
+        new byte[] { 0x37, 0x03, 0x5a },
+        new byte[] { 0x37, 0x15, 0x78 },
+        new byte[] { 0x37, 0x17, 0x01 },
+        new byte[] { 0x37, 0x0b, 0x60 },
+        new byte[] { 0x37, 0x05, 0x1a },
+        new byte[] { 0x39, 0x05, 0x02 },
+        new byte[] { 0x39, 0x06, 0x10 },
+        new byte[] { 0x39, 0x01, 0x0a },
+        new byte[] { 0x37, 0x31, 0x12 },
+        new byte[] { 0x36, 0x00, 0x08 },
+        new byte[] { 0x36, 0x01, 0x33 },
+        new byte[] { 0x30, 0x2d, 0x60 },
+        new byte[] { 0x36, 0x20, 0x52 },
+        new byte[] { 0x37, 0x1b, 0x20 },
+        new byte[] { 0x47, 0x1c, 0x50 },
+        new byte[] { 0x3a, 0x13, 0x43 },
+        new byte[] { 0x3a, 0x18, 0x00 },
+        new byte[] { 0x3a, 0x19, 0xf8 },
+        new byte[] { 0x36, 0x35, 0x13 },
+        new byte[] { 0x36, 0x36, 0x03 },
+        new byte[] { 0x36, 0x34, 0x40 },
+        new byte[] { 0x36, 0x22, 0x01 },
+        new byte[] { 0x3c, 0x01, 0x34 },
+        new byte[] { 0x3c, 0x04, 0x28 },
+        new byte[] { 0x3c, 0x05, 0x98 },
+        new byte[] { 0x3c, 0x06, 0x00 },
+        new byte[] { 0x3c, 0x07, 0x08 },
+        new byte[] { 0x3c, 0x08, 0x00 },
+        new byte[] { 0x3c, 0x09, 0x1c },
+        new byte[] { 0x3c, 0x0a, 0x9c },
+        new byte[] { 0x3c, 0x0b, 0x40 },
+        // H_OFFSET/V_OFFSET
+        new byte[] { 0x38, 0x10, unchecked((byte)((H_OFFSET >> 8) & 0xFF)) },
+        new byte[] { 0x38, 0x11, unchecked((byte)(H_OFFSET & 0xFF)) }, //0010
+        new byte[] { 0x38, 0x12, unchecked((byte)((V_OFFSET >> 8) & 0xFF)) },
+        new byte[] { 0x37, 0x08, 0x64 },
+        new byte[] { 0x40, 0x01, 0x02 },
+        new byte[] { 0x40, 0x05, 0x1a },
+        new byte[] { 0x30, 0x00, 0x00 },
+        new byte[] { 0x30, 0x04, 0xff },
+        new byte[] { 0x43, 0x00, 0x6F }, // RGB565:first byte:{g[2:0],b[4:0]],second byte:{r[4:0],g[5:3]}
+        new byte[] { 0x50, 0x1f, 0x01 }, // Format: ISP RGB
+        new byte[] { 0x44, 0x0e, 0x00 },
+        new byte[] { 0x50, 0x00, 0xA7 }, //ISP控制
+        new byte[] { 0x3a, 0x0f, 0x30 }, //AEC控制;stable range in high
+        new byte[] { 0x3a, 0x10, 0x28 }, //AEC控制;stable range in low
+        new byte[] { 0x3a, 0x1b, 0x30 }, //AEC控制;stable range out high
+        new byte[] { 0x3a, 0x1e, 0x26 }, //AEC控制;stable range out low
+        new byte[] { 0x3a, 0x11, 0x60 }, //AEC控制; fast zone high
+        new byte[] { 0x3a, 0x1f, 0x14 }, //AEC控制; fast zone low
+        // LENC
+        new byte[] { 0x58, 0x00, 0x23 }, new byte[] { 0x58, 0x01, 0x14 }, new byte[] { 0x58, 0x02, 0x0f },
+        new byte[] { 0x58, 0x03, 0x0f }, new byte[] { 0x58, 0x04, 0x12 }, new byte[] { 0x58, 0x05, 0x26 },
+        new byte[] { 0x58, 0x06, 0x0c }, new byte[] { 0x58, 0x07, 0x08 }, new byte[] { 0x58, 0x08, 0x05 },
+        new byte[] { 0x58, 0x09, 0x05 }, new byte[] { 0x58, 0x0a, 0x08 }, new byte[] { 0x58, 0x0b, 0x0d },
+        new byte[] { 0x58, 0x0c, 0x08 }, new byte[] { 0x58, 0x0d, 0x03 }, new byte[] { 0x58, 0x0e, 0x00 },
+        new byte[] { 0x58, 0x0f, 0x00 }, new byte[] { 0x58, 0x10, 0x03 }, new byte[] { 0x58, 0x11, 0x09 },
+        new byte[] { 0x58, 0x12, 0x07 }, new byte[] { 0x58, 0x13, 0x03 }, new byte[] { 0x58, 0x14, 0x00 },
+        new byte[] { 0x58, 0x15, 0x01 }, new byte[] { 0x58, 0x16, 0x03 }, new byte[] { 0x58, 0x17, 0x08 },
+        new byte[] { 0x58, 0x18, 0x0d }, new byte[] { 0x58, 0x19, 0x08 }, new byte[] { 0x58, 0x1a, 0x05 },
+        new byte[] { 0x58, 0x1b, 0x06 }, new byte[] { 0x58, 0x1c, 0x08 }, new byte[] { 0x58, 0x1d, 0x0e },
+        new byte[] { 0x58, 0x1e, 0x29 }, new byte[] { 0x58, 0x1f, 0x17 }, new byte[] { 0x58, 0x20, 0x11 },
+        new byte[] { 0x58, 0x21, 0x11 }, new byte[] { 0x58, 0x22, 0x15 }, new byte[] { 0x58, 0x23, 0x28 },
+        new byte[] { 0x58, 0x24, 0x46 }, new byte[] { 0x58, 0x25, 0x26 }, new byte[] { 0x58, 0x26, 0x08 },
+        new byte[] { 0x58, 0x27, 0x26 }, new byte[] { 0x58, 0x28, 0x64 }, new byte[] { 0x58, 0x29, 0x26 },
+        new byte[] { 0x58, 0x2a, 0x24 }, new byte[] { 0x58, 0x2b, 0x22 }, new byte[] { 0x58, 0x2c, 0x24 },
+        new byte[] { 0x58, 0x2d, 0x24 }, new byte[] { 0x58, 0x2e, 0x06 }, new byte[] { 0x58, 0x2f, 0x22 },
+        new byte[] { 0x58, 0x30, 0x40 }, new byte[] { 0x58, 0x31, 0x42 }, new byte[] { 0x58, 0x32, 0x24 },
+        new byte[] { 0x58, 0x33, 0x26 }, new byte[] { 0x58, 0x34, 0x24 }, new byte[] { 0x58, 0x35, 0x22 },
+        new byte[] { 0x58, 0x36, 0x22 }, new byte[] { 0x58, 0x37, 0x26 }, new byte[] { 0x58, 0x38, 0x44 },
+        new byte[] { 0x58, 0x39, 0x24 }, new byte[] { 0x58, 0x3a, 0x26 }, new byte[] { 0x58, 0x3b, 0x28 },
+        new byte[] { 0x58, 0x3c, 0x42 }, new byte[] { 0x58, 0x3d, 0xce },
+        // AWB
+        new byte[] { 0x51, 0x80, 0xff }, new byte[] { 0x51, 0x81, 0xf2 }, new byte[] { 0x51, 0x82, 0x00 },
+        new byte[] { 0x51, 0x83, 0x14 }, new byte[] { 0x51, 0x84, 0x25 }, new byte[] { 0x51, 0x85, 0x24 },
+        new byte[] { 0x51, 0x86, 0x09 }, new byte[] { 0x51, 0x87, 0x09 }, new byte[] { 0x51, 0x88, 0x09 },
+        new byte[] { 0x51, 0x89, 0x75 }, new byte[] { 0x51, 0x8a, 0x54 }, new byte[] { 0x51, 0x8b, 0xe0 },
+        new byte[] { 0x51, 0x8c, 0xb2 }, new byte[] { 0x51, 0x8d, 0x42 }, new byte[] { 0x51, 0x8e, 0x3d },
+        new byte[] { 0x51, 0x8f, 0x56 }, new byte[] { 0x51, 0x90, 0x46 }, new byte[] { 0x51, 0x91, 0xf8 },
+        new byte[] { 0x51, 0x92, 0x04 }, new byte[] { 0x51, 0x93, 0x70 }, new byte[] { 0x51, 0x94, 0xf0 },
+        new byte[] { 0x51, 0x95, 0xf0 }, new byte[] { 0x51, 0x96, 0x03 }, new byte[] { 0x51, 0x97, 0x01 },
+        new byte[] { 0x51, 0x98, 0x04 }, new byte[] { 0x51, 0x99, 0x12 }, new byte[] { 0x51, 0x9a, 0x04 },
+        new byte[] { 0x51, 0x9b, 0x00 }, new byte[] { 0x51, 0x9c, 0x06 }, new byte[] { 0x51, 0x9d, 0x82 },
+        new byte[] { 0x51, 0x9e, 0x38 },
+        // Gamma
+        new byte[] { 0x54, 0x80, 0x01 }, new byte[] { 0x54, 0x81, 0x08 }, new byte[] { 0x54, 0x82, 0x14 },
+        new byte[] { 0x54, 0x83, 0x28 }, new byte[] { 0x54, 0x84, 0x51 }, new byte[] { 0x54, 0x85, 0x65 },
+        new byte[] { 0x54, 0x86, 0x71 }, new byte[] { 0x54, 0x87, 0x7d }, new byte[] { 0x54, 0x88, 0x87 },
+        new byte[] { 0x54, 0x89, 0x91 }, new byte[] { 0x54, 0x8a, 0x9a }, new byte[] { 0x54, 0x8b, 0xaa },
+        new byte[] { 0x54, 0x8c, 0xb8 }, new byte[] { 0x54, 0x8d, 0xcd }, new byte[] { 0x54, 0x8e, 0xdd },
+        new byte[] { 0x54, 0x8f, 0xea }, new byte[] { 0x54, 0x90, 0x1d },
+        // CMX
+        new byte[] { 0x53, 0x81, 0x1e }, new byte[] { 0x53, 0x82, 0x5b }, new byte[] { 0x53, 0x83, 0x08 },
+        new byte[] { 0x53, 0x84, 0x0a }, new byte[] { 0x53, 0x85, 0x7e }, new byte[] { 0x53, 0x86, 0x88 },
+        new byte[] { 0x53, 0x87, 0x7c }, new byte[] { 0x53, 0x88, 0x6c }, new byte[] { 0x53, 0x89, 0x10 },
+        new byte[] { 0x53, 0x8a, 0x01 }, new byte[] { 0x53, 0x8b, 0x98 },
+        // SDE
+        new byte[] { 0x55, 0x80, 0x06 }, new byte[] { 0x55, 0x83, 0x40 }, new byte[] { 0x55, 0x84, 0x10 },
+        new byte[] { 0x55, 0x89, 0x10 }, new byte[] { 0x55, 0x8a, 0x00 }, new byte[] { 0x55, 0x8b, 0xf8 },
+        new byte[] { 0x50, 0x1d, 0x40 },
+        // CIP
+        new byte[] { 0x53, 0x00, 0x08 }, new byte[] { 0x53, 0x01, 0x30 }, new byte[] { 0x53, 0x02, 0x10 },
+        new byte[] { 0x53, 0x03, 0x00 }, new byte[] { 0x53, 0x04, 0x08 }, new byte[] { 0x53, 0x05, 0x30 },
+        new byte[] { 0x53, 0x06, 0x08 }, new byte[] { 0x53, 0x07, 0x16 }, new byte[] { 0x53, 0x09, 0x08 },
+        new byte[] { 0x53, 0x0a, 0x30 }, new byte[] { 0x53, 0x0b, 0x04 }, new byte[] { 0x53, 0x0c, 0x06 },
+        new byte[] { 0x50, 0x25, 0x00 },
+        // 系统时钟分频
+        new byte[] { 0x30, 0x35, 0x11 }, // 30fps
+        new byte[] { 0x30, 0x36, PLL_MUX }, // PLL倍频
+        new byte[] { 0x3c, 0x07, 0x08 },
+        // 时序控制
+        new byte[] { 0x38, 0x20, 0x46 }, // vflip
+        new byte[] { 0x38, 0x21, 0x01 }, // mirror
+        new byte[] { 0x38, 0x14, 0x31 }, // timing X inc
+        new byte[] { 0x38, 0x15, 0x31 }, // timing Y inc
+        // H_START/Y
+        new byte[] { 0x38, 0x00, unchecked((byte)((H_START >> 8) & 0xFF)) },
+        new byte[] { 0x38, 0x01, unchecked((byte)(H_START & 0xFF)) },
+        new byte[] { 0x38, 0x02, unchecked((byte)((V_START >> 8) & 0xFF)) },
+        new byte[] { 0x38, 0x03, unchecked((byte)(V_START & 0xFF)) },
+        // H_END/Y
+        new byte[] { 0x38, 0x04, unchecked((byte)((H_END >> 8) & 0xFF)) },
+        new byte[] { 0x38, 0x05, unchecked((byte)(H_END & 0xFF)) },
+        new byte[] { 0x38, 0x06, unchecked((byte)((V_END >> 8) & 0xFF)) },
+        new byte[] { 0x38, 0x07, unchecked((byte)(V_END & 0xFF)) },
+        // 输出像素个数
+        new byte[] { 0x38, 0x08, unchecked((byte)((DVPHO >> 8) & 0xFF)) },
+        new byte[] { 0x38, 0x09, unchecked((byte)(DVPHO & 0xFF)) },
+        new byte[] { 0x38, 0x0A, unchecked((byte)((DVPVO >> 8) & 0xFF)) },
+        new byte[] { 0x38, 0x0B, unchecked((byte)(DVPVO & 0xFF)) },
+        // 总像素
+        new byte[] { 0x38, 0x0C, unchecked((byte)((HTS >> 8) & 0xFF)) },
+        new byte[] { 0x38, 0x0D, unchecked((byte)(HTS & 0xFF)) },
+        new byte[] { 0x38, 0x0E, unchecked((byte)((VTS >> 8) & 0xFF)) },
+        new byte[] { 0x38, 0x0F, unchecked((byte)(VTS & 0xFF)) },
+        new byte[] { 0x38, 0x13, unchecked((byte)(V_OFFSET & 0xFF)) }, // Timing Voffset
+        new byte[] { 0x36, 0x18, 0x00 },
+        new byte[] { 0x36, 0x12, 0x29 },
+        new byte[] { 0x37, 0x09, 0x52 },
+        new byte[] { 0x37, 0x0c, 0x03 },
+        new byte[] { 0x3a, 0x02, 0x17 }, //60Hz max exposure
+        new byte[] { 0x3a, 0x03, 0x10 }, //60Hz max exposure
+        new byte[] { 0x3a, 0x14, 0x17 }, //50Hz max exposure
+        new byte[] { 0x3a, 0x15, 0x10 }, //50Hz max exposure
+        new byte[] { 0x40, 0x04, 0x02 }, //BLC(背光) 2 lines
+        new byte[] { 0x47, 0x13, 0x03 }, //JPEG mode 3
+        new byte[] { 0x44, 0x07, 0x04 }, //量化标度
+        new byte[] { 0x46, 0x0c, 0x20 },
+        new byte[] { 0x48, 0x37, 0x22 }, //DVP CLK divider
+        new byte[] { 0x38, 0x24, 0x02 }, //DVP CLK divider
+        new byte[] { 0x50, 0x01, 0xA3 }, //ISP 控制
+        new byte[] { 0x3b, 0x07, 0x0a }, //帧曝光模式  
+        // 彩条测试使能
+        new byte[] { 0x50, 0x3d, 0x00 },
+        new byte[] { 0x47, 0x41, 0x00 },
+        // 闪光灯禁用
+        new byte[] { 0x30, 0x16, 0x02 },
+        new byte[] { 0x30, 0x1c, 0x02 },
+        new byte[] { 0x30, 0x19, 0x02 }, //开启闪光灯
+        new byte[] { 0x30, 0x19, 0x00 }, //关闭闪光灯
+        // new byte[] { 0x30, 0x2c, 0xC2 }, //控制驱动能力的
+        // new byte[] { 0x46, 0x00, 0xA0 },
+        // for subsample=OFF
+        // new byte[] { 0x36, 0x18, 0x04 },
+        // new byte[] { 0x36, 0x12, 0x2b },
+        // new byte[] { 0x37, 0x09, 0x12 },
+        // new byte[] { 0x37, 0x0c, 0x00 },
+        // Start streaming
+        new byte[] { 0x30, 0x08, 0x02 }
+    };
+
+
+    /// <summary>
+    /// 初始化摄像头客户端
+    /// </summary>
+    /// <param name="address">摄像头设备IP地址</param>
+    /// <param name="port">摄像头设备端口</param>
+    /// <param name="timeout">超时时间（毫秒）</param>
+    public Camera(string address, int port, int timeout = 2000)
+    {
+        if (timeout < 0)
+            throw new ArgumentException("Timeout couldn't be negative", nameof(timeout));
+        this.address = address;
+        this.port = port;
+        this.ep = new IPEndPoint(IPAddress.Parse(address), port);
+        this.timeout = timeout;
+    }
+
+    public async ValueTask<Result<bool>> Init()
+    {
+        {
+            var ret = await UDPClientPool.WriteAddr(this.ep, this.taskID, CameraAddr.STORE_ADDR, FrameAddr);
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to write STORE_ADDR to camera at {this.address}:{this.port}, error: {ret.Error}");
+                return new(ret.Error);
+            }
+            if (!ret.Value)
+            {
+                logger.Error($"STORE_ADDR write returned false for camera at {this.address}:{this.port}");
+                return new(new Exception($"STORE_ADDR write returned false for camera at {this.address}:{this.port}"));
+            }
+        }
+
+        {
+            var ret = await UDPClientPool.WriteAddr(this.ep, this.taskID, CameraAddr.STORE_NUM, FrameLength);
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to write STORE_NUM to camera at {this.address}:{this.port}, error: {ret.Error}");
+                return new(ret.Error);
+            }
+            if (!ret.Value)
+            {
+                logger.Error($"STORE_NUM write returned false for camera at {this.address}:{this.port}");
+                return new(new Exception($"STORE_NUM write returned false for camera at {this.address}:{this.port}"));
+            }
+        }
+
+        {
+            var ret = await UDPClientPool.WriteAddr(this.ep, this.taskID, CameraAddr.EXPECTED_VH, (DVPVO)<<16 | (DVPHO*2));
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"Failed to write EXPECTED_VH to camera at {this.address}:{this.port}, error: {ret.Error}");
+                return new(ret.Error);
+            }
+            if (!ret.Value)
+            {
+                logger.Error($"EXPECTED_VH write returned false for camera at {this.address}:{this.port}");
+                return new(new Exception($"EXPECTED_VH write returned false for camera at {this.address}:{this.port}"));
+            }
+        }
+
+        var i2c = new Peripherals.I2cClient.I2c(this.address, this.port, this.taskID, this.timeout);
+
+        foreach (var cmd in InitCmdData)
+        {
+            var ret = await i2c.WriteData(CAM_I2C_ADDR, cmd, CAM_PROTO);
+
+            if (!ret.IsSuccessful)
+            {
+                logger.Error($"I2C write 0x{CAM_I2C_ADDR.ToString("X")} failed: {BitConverter.ToString(cmd)} error: {ret.Error}");
+                return new(ret.Error);
+            }
+
+            if (!ret.Value)
+            {
+                logger.Error($"I2C write 0x{CAM_I2C_ADDR.ToString("X")} returned false: {BitConverter.ToString(cmd)}");
+                return false;
+            }
+            if (cmd[0] == 0x30 && cmd[1] == 0x08 && cmd[2] == 0x82)
+            {
+                // 复位命令，等待5MS
+                await Task.Delay(5);
+            }
+            else await Task.Delay(5); // 其他命令延时1ms
+        }
+
+        return true;
+    }
+
+    public async ValueTask<Result<bool>> EnableCamera(bool isEnable)
+    {
+        var ret = await UDPClientPool.WriteAddr(this.ep, this.taskID, CameraAddr.CAPTURE_ON, Convert.ToUInt32(isEnable));
+        if (!ret.IsSuccessful)
+        {
+            logger.Error($"Failed to write CAPTURE_ON to camera at {this.address}:{this.port}, error: {ret.Error}");
+            return new(ret.Error);
+        }
+        if (!ret.Value)
+        {
+            logger.Error($"CAPTURE_ON write returned false for camera at {this.address}:{this.port}");
+            return false;
+        }
+        return true;
+    }
+
+    /// <summary>
+    /// 读取一帧图像数据
+    /// </summary>
+    /// <returns>包含图像数据的字节数组</returns>
+    public async ValueTask<Result<byte[]>> ReadFrame()
+    {
+        // 清除UDP服务器接收缓冲区
+        await MsgBus.UDPServer.ClearUDPData(this.address, this.taskID);
+
+        logger.Trace($"Clear up udp server {this.address} receive data");
+
+        // 使用UDPClientPool读取图像帧数据
+        var result = await UDPClientPool.ReadAddr4Bytes(
+            this.ep,
+            this.taskID, // taskID
+            FrameAddr,
+            ((int)FrameLength),
+            this.timeout);
+
+        if (!result.IsSuccessful)
+        {
+            logger.Error($"Failed to read frame from camera {this.address}:{this.port}, error: {result.Error}");
+            return new(result.Error);
+        }
+
+        logger.Debug($"Successfully read frame from camera {this.address}:{this.port}, data length: {result.Value.Length} bytes");
+        return result.Value;
+    }
+}

server/src/Peripherals/I2cClient.cs

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

server/src/Peripherals/JtagClient.cs

@@ -1,11 +1,11 @@
 using System.Collections;
 using System.Net;
-using BsdlParser;
 using DotNext;
 using Newtonsoft.Json;
+using server;
 using WebProtocol;
 
-namespace JtagClient;
+namespace Peripherals.JtagClient;
 
 /// <summary>
 /// Global Constant Jtag Address

server/src/Peripherals/OscilloscopeClient.cs

@@ -0,0 +1,36 @@
+using System.Net;
+using DotNext;
+
+namespace Peripherals.OscilloscopeClient;
+
+static class OscilloscopeAddr
+{
+    public const UInt32 Base = 0x0000_0000;
+}
+
+class Oscilloscope
+{
+    private static readonly NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+
+    readonly int timeout = 2000;
+
+    readonly int port;
+    readonly string address;
+    private IPEndPoint ep;
+
+    /// <summary>
+    /// 初始化示波器客户端
+    /// </summary>
+    /// <param name="address">示波器设备IP地址</param>
+    /// <param name="port">示波器设备端口</param>
+    /// <param name="timeout">超时时间（毫秒）</param>
+    public Oscilloscope(string address, int port, int timeout = 2000)
+    {
+        if (timeout < 0)
+            throw new ArgumentException("Timeout couldn't be negative", nameof(timeout));
+        this.address = address;
+        this.port = port;
+        this.ep = new IPEndPoint(IPAddress.Parse(address), port);
+        this.timeout = timeout;
+    }
+}

server/src/Peripherals/RemoteUpdateClient.cs

@@ -1,6 +1,7 @@
 using System.Net;
 using DotNext;
-namespace RemoteUpdateClient;
+
+namespace Peripherals.RemoteUpdateClient;
 
 static class RemoteUpdaterAddr
 {

server/src/Services/HttpVideoStreamService.cs

@@ -0,0 +1,845 @@
+using System.Net;
+using System.Text;
+using System.Threading.Tasks;
+using Peripherals.CameraClient; // 添加摄像头客户端引用
+
+namespace server.Services;
+
+/// <summary>
+/// 表示摄像头连接状态信息
+/// </summary>
+public class CameraStatus
+{
+    /// <summary>
+    /// 摄像头的IP地址
+    /// </summary>
+    public string Address { get; set; } = string.Empty;
+
+    /// <summary>
+    /// 摄像头的端口号
+    /// </summary>
+    public int Port { get; set; }
+
+    /// <summary>
+    /// 是否已配置摄像头
+    /// </summary>
+    public bool IsConfigured { get; set; }
+
+    /// <summary>
+    /// 摄像头连接字符串（IP:端口）
+    /// </summary>
+    public string ConnectionString { get; set; } = string.Empty;
+}
+
+/// <summary>
+/// 表示视频流服务的运行状态
+/// </summary>
+public class ServiceStatus
+{
+    /// <summary>
+    /// 服务是否正在运行
+    /// </summary>
+    public bool IsRunning { get; set; }
+
+    /// <summary>
+    /// 服务监听的端口号
+    /// </summary>
+    public int ServerPort { get; set; }
+
+    /// <summary>
+    /// 视频流的帧率（FPS）
+    /// </summary>
+    public int FrameRate { get; set; }
+
+    /// <summary>
+    /// 视频分辨率（如 640x480）
+    /// </summary>
+    public string Resolution { get; set; } = string.Empty;
+
+    /// <summary>
+    /// 当前连接的客户端数量
+    /// </summary>
+    public int ConnectedClients { get; set; }
+
+    /// <summary>
+    /// 当前连接的客户端端点列表
+    /// </summary>
+    public List<string> ClientEndpoints { get; set; } = new();
+
+    /// <summary>
+    /// 摄像头连接状态信息
+    /// </summary>
+    public CameraStatus CameraStatus { get; set; } = new();
+}
+
+/// <summary>
+/// HTTP 视频流服务，用于从 FPGA 获取图像数据并推送到前端网页
+/// 支持动态配置摄像头地址和端口
+/// </summary>
+public class HttpVideoStreamService : BackgroundService
+{
+    private static readonly NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
+    private HttpListener? _httpListener;
+    private readonly int _serverPort = 8080;
+    private readonly int _frameRate = 30; // 30 FPS
+    private readonly int _frameWidth = 640;
+    private readonly int _frameHeight = 480;
+
+    // 摄像头客户端
+    private Camera? _camera;
+    private bool _cameraEnable = false;
+    private string _cameraAddress = "192.168.1.100"; // 默认FPGA地址
+    private int _cameraPort = 8888; // 默认端口
+    private readonly object _cameraLock = new object();
+
+    // 模拟 FPGA 图像数据
+    private int _frameCounter = 0;
+    private readonly List<HttpListenerResponse> _activeClients = new List<HttpListenerResponse>();
+    private readonly object _clientsLock = new object();
+
+    /// <summary>
+    /// 获取当前连接的客户端数量
+    /// </summary>
+    public int ConnectedClientsCount { get { return _activeClients.Count; } }
+
+    /// <summary>
+    /// 获取服务端口
+    /// </summary>
+    public int ServerPort => _serverPort;
+
+    /// <summary>
+    /// 获取帧宽度
+    /// </summary>
+    public int FrameWidth => _frameWidth;
+
+    /// <summary>
+    /// 获取帧高度
+    /// </summary>
+    public int FrameHeight => _frameHeight;
+
+    /// <summary>
+    /// 获取帧率
+    /// </summary>
+    public int FrameRate => _frameRate;
+
+    /// <summary>
+    /// 获取当前摄像头地址
+    /// </summary>
+    public string CameraAddress { get { return _cameraAddress; } }
+
+    /// <summary>
+    /// 获取当前摄像头端口
+    /// </summary>
+    public int CameraPort { get { return _cameraPort; } }
+
+    /// <summary>
+    /// 初始化 HttpVideoStreamService
+    /// </summary>
+    public HttpVideoStreamService()
+    {
+        // 延迟初始化摄像头客户端，直到配置完成
+        logger.Info("HttpVideoStreamService 初始化完成，默认摄像头地址: {Address}:{Port}", _cameraAddress, _cameraPort);
+    }
+
+    /// <summary>
+    /// [TODO:description]
+    /// </summary>
+    /// <param name="isEnabled">[TODO:parameter]</param>
+    /// <returns>[TODO:return]</returns>
+    public async Task SetEnable(bool isEnabled)
+    {
+        if (_camera == null)
+        {
+            throw new Exception("Please config camera first");
+        }
+        _cameraEnable = isEnabled;
+        await _camera.EnableCamera(_cameraEnable);
+    }
+
+    /// <summary>
+    /// 配置摄像头连接参数
+    /// </summary>
+    /// <param name="address">摄像头IP地址</param>
+    /// <param name="port">摄像头端口</param>
+    /// <returns>配置是否成功</returns>
+    public async Task<bool> ConfigureCameraAsync(string address, int port)
+    {
+        if (string.IsNullOrWhiteSpace(address))
+        {
+            logger.Error("摄像头地址不能为空");
+            return false;
+        }
+
+        if (port <= 0 || port > 65535)
+        {
+            logger.Error("摄像头端口必须在1-65535范围内");
+            return false;
+        }
+
+        try
+        {
+            lock (_cameraLock)
+            {
+                // 关闭现有连接
+                if (_camera != null)
+                {
+                    logger.Info("关闭现有摄像头连接");
+                    // Camera doesn't have Dispose method, set to null
+                    _camera = null;
+                }
+
+                // 更新配置
+                _cameraAddress = address;
+                _cameraPort = port;
+
+                // 创建新的摄像头客户端
+                _camera = new Camera(_cameraAddress, _cameraPort);
+
+                logger.Info("摄像头配置已更新: {Address}:{Port}", _cameraAddress, _cameraPort);
+            }
+
+            // Init Camera
+            {
+                var ret = await _camera.Init();
+                if (!ret.IsSuccessful)
+                {
+                    logger.Error(ret.Error);
+                    throw ret.Error;
+                }
+
+                if (!ret.Value)
+                {
+                    logger.Error($"Camera Init Failed!");
+                    throw new Exception($"Camera Init Failed!");
+                }
+            }
+            return true;
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "配置摄像头连接时发生错误");
+            return false;
+        }
+    }
+
+    /// <summary>
+    /// 测试摄像头连接
+    /// </summary>
+    /// <returns>连接测试结果</returns>
+    public async Task<(bool IsSuccess, string Message)> TestCameraConnectionAsync()
+    {
+        try
+        {
+            Camera? testCamera = null;
+
+            lock (_cameraLock)
+            {
+                if (_camera == null)
+                {
+                    return (false, "摄像头未配置");
+                }
+                testCamera = _camera;
+            }
+
+            // 尝试读取一帧数据来测试连接
+            var result = await testCamera.ReadFrame();
+
+            if (result.IsSuccessful)
+            {
+                logger.Info("摄像头连接测试成功: {Address}:{Port}", _cameraAddress, _cameraPort);
+                return (true, "连接成功");
+            }
+            else
+            {
+                logger.Warn("摄像头连接测试失败: {Error}", result.Error);
+                return (false, result.Error.ToString());
+            }
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "摄像头连接测试出错");
+            return (false, ex.Message);
+        }
+    }
+
+    /// <summary>
+    /// 获取摄像头连接状态
+    /// </summary>
+    /// <returns>连接状态信息</returns>
+    public CameraStatus GetCameraStatus()
+    {
+        return new CameraStatus
+        {
+            Address = _cameraAddress,
+            Port = _cameraPort,
+            IsConfigured = _camera != null,
+            ConnectionString = $"{_cameraAddress}:{_cameraPort}"
+        };
+    }
+
+    /// <summary>
+    /// 执行 HTTP 视频流服务
+    /// </summary>
+    /// <param name="stoppingToken">取消令牌</param>
+    /// <returns>任务</returns>
+    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
+    {
+        try
+        {
+            logger.Info("启动 HTTP 视频流服务，端口: {Port}", _serverPort);
+
+            // 初始化默认摄像头连接
+            await ConfigureCameraAsync(_cameraAddress, _cameraPort);
+
+            // 创建 HTTP 监听器
+            _httpListener = new HttpListener();
+            _httpListener.Prefixes.Add($"http://localhost:{_serverPort}/");
+            _httpListener.Start();
+
+            logger.Info("HTTP 视频流服务已启动，监听端口: {Port}", _serverPort);
+
+            // 开始接受客户端连接
+            _ = Task.Run(() => AcceptClientsAsync(stoppingToken), stoppingToken);
+
+            // 开始生成视频帧
+            while (!stoppingToken.IsCancellationRequested)
+            {
+                if (_cameraEnable)
+                {
+                    await GenerateVideoFrames(stoppingToken);
+                }
+                else
+                {
+                    await Task.Delay(500, stoppingToken);
+                }
+            }
+        }
+        catch (HttpListenerException ex)
+        {
+            logger.Error(ex, "HTTP 视频流服务启动失败，请确保您有管理员权限或使用netsh配置URL前缀权限");
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "HTTP 视频流服务启动失败");
+        }
+    }
+
+    private async Task AcceptClientsAsync(CancellationToken cancellationToken)
+    {
+        while (!cancellationToken.IsCancellationRequested && _httpListener != null && _httpListener.IsListening)
+        {
+            try
+            {
+                // 等待客户端连接
+                var context = await _httpListener.GetContextAsync();
+                var request = context.Request;
+                var response = context.Response;
+
+                logger.Info("新HTTP客户端连接: {RemoteEndPoint}", request.RemoteEndPoint);
+                // 处理不同的请求路径
+                var requestPath = request.Url?.AbsolutePath ?? "/";
+
+                if (requestPath == "/video-stream")
+                {
+                    // MJPEG 流请求
+                    _ = Task.Run(() => HandleMjpegStreamAsync(response, cancellationToken), cancellationToken);
+                }
+                else if (requestPath == "/snapshot")
+                {
+                    // 单帧图像请求
+                    await HandleSnapshotRequestAsync(response, cancellationToken);
+                }
+                else if (requestPath == "/video-feed.html")
+                {
+                    // HTML页面请求
+                    await SendVideoHtmlPageAsync(response);
+                }
+                else
+                {
+                    // 默认返回简单的HTML页面，提供链接到视频页面
+                    await SendIndexHtmlPageAsync(response);
+                }
+            }
+            catch (HttpListenerException)
+            {
+                // HTTP监听器可能已停止
+                break;
+            }
+            catch (ObjectDisposedException)
+            {
+                // 对象可能已被释放
+                break;
+            }
+            catch (Exception ex)
+            {
+                logger.Error(ex, "接受HTTP客户端连接时发生错误");
+            }
+        }
+    }
+
+    private async Task HandleMjpegStreamAsync(HttpListenerResponse response, CancellationToken cancellationToken)
+    {
+        try
+        {
+            // 设置MJPEG流的响应头
+            response.ContentType = "multipart/x-mixed-replace; boundary=--boundary";
+            response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
+            response.Headers.Add("Pragma", "no-cache");
+            response.Headers.Add("Expires", "0");
+
+            // 跟踪活跃的客户端
+            lock (_clientsLock)
+            {
+                _activeClients.Add(response);
+            }
+
+            logger.Debug("已启动MJPEG流，客户端: {RemoteEndPoint}", response.OutputStream?.GetHashCode() ?? 0);
+
+            // 保持连接直到取消或出错
+            try
+            {
+                while (!cancellationToken.IsCancellationRequested)
+                {
+                    await Task.Delay(100, cancellationToken); // 简单的保活循环
+                }
+            }
+            catch (TaskCanceledException)
+            {
+                // 预期的取消
+            }
+
+            logger.Debug("MJPEG流已结束，客户端: {ClientId}", response.OutputStream?.GetHashCode() ?? 0);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "处理MJPEG流时出错");
+        }
+        finally
+        {
+            lock (_clientsLock)
+            {
+                _activeClients.Remove(response);
+            }
+
+            try
+            {
+                response.Close();
+            }
+            catch
+            {
+                // 忽略关闭时的错误
+            }
+        }
+    }
+
+    private async Task HandleSnapshotRequestAsync(HttpListenerResponse response, CancellationToken cancellationToken)
+    {
+        try
+        {
+            // 获取当前帧
+            var imageData = await GetFPGAImageData();
+
+            // 直接使用Common.Image.ConvertRGB24ToJpeg进行转换
+            var jpegResult = Common.Image.ConvertRGB24ToJpeg(imageData, _frameWidth, _frameHeight, 80);
+            if (!jpegResult.IsSuccessful)
+            {
+                logger.Error("RGB24转JPEG失败: {Error}", jpegResult.Error);
+                response.StatusCode = 500;
+                response.Close();
+                return;
+            }
+
+            var jpegData = jpegResult.Value;
+
+            // 设置响应头
+            response.ContentType = "image/jpeg";
+            response.ContentLength64 = jpegData.Length;
+            response.Headers.Add("Cache-Control", "no-cache, no-store, must-revalidate");
+
+            // 发送JPEG数据
+            await response.OutputStream.WriteAsync(jpegData, 0, jpegData.Length, cancellationToken);
+            await response.OutputStream.FlushAsync(cancellationToken);
+
+            logger.Debug("已发送快照图像，大小：{Size} 字节", jpegData.Length);
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "处理快照请求时出错");
+        }
+        finally
+        {
+            response.Close();
+        }
+    }
+
+    private async Task SendVideoHtmlPageAsync(HttpListenerResponse response)
+    {
+        string html = $@"
+                <!DOCTYPE html>
+                <html>
+                <head>
+                    <title>FPGA 视频流</title>
+                    <meta charset=""utf-8"">
+                    <style>
+                        body {{ font-family: Arial, sans-serif; text-align: center; margin: 20px; }}
+                        h1 {{ color: #333; }}
+                        .video-container {{ margin: 20px auto; max-width: 800px; }}
+                        .controls {{ margin: 10px 0; }}
+                        img {{ max-width: 100%; border: 1px solid #ddd; }}
+                        button {{ padding: 8px 16px; margin: 0 5px; cursor: pointer; }}
+                    </style>
+                </head>
+                <body>
+                    <h1>FPGA 实时视频流</h1>
+                    <div class=""video-container"">
+                        <img id=""videoStream"" src=""/video-stream"" alt=""FPGA视频流"" />
+                    </div>
+                    <div class=""controls"">
+                        <button onclick=""document.getElementById('videoStream').src='/snapshot?t=' + new Date().getTime()"">刷新快照</button>
+                        <button onclick=""document.getElementById('videoStream').src='/video-stream'"">开始流媒体</button>
+                        <span id=""status"">状态: 连接中...</span>
+                    </div>
+                    <script>
+                        document.getElementById('videoStream').onload = function() {{
+                            document.getElementById('status').textContent = '状态: 已连接';
+                        }};
+                        document.getElementById('videoStream').onerror = function() {{
+                            document.getElementById('status').textContent = '状态: 连接错误';
+                        }};
+                    </script>
+                </body>
+                </html>
+            ";
+
+        response.ContentType = "text/html";
+        response.ContentEncoding = Encoding.UTF8;
+        byte[] buffer = Encoding.UTF8.GetBytes(html);
+        response.ContentLength64 = buffer.Length;
+
+        await response.OutputStream.WriteAsync(buffer, 0, buffer.Length);
+        response.Close();
+    }
+
+    private async Task SendIndexHtmlPageAsync(HttpListenerResponse response)
+    {
+        string html = $@"
+                <!DOCTYPE html>
+                <html>
+                <head>
+                    <title>FPGA WebLab 视频服务</title>
+                    <meta charset=""utf-8"">
+                    <style>
+                        body {{ font-family: Arial, sans-serif; text-align: center; margin: 20px; }}
+                        h1 {{ color: #333; }}
+                        .links {{ margin: 20px; }}
+                        a {{ padding: 10px 15px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; margin: 5px; display: inline-block; }}
+                        a:hover {{ background-color: #45a049; }}
+                    </style>
+                </head>
+                <body>
+                    <h1>FPGA WebLab 视频服务</h1>
+                    <div class=""links"">
+                        <a href=""/video-feed.html"">观看实时视频</a>
+                        <a href=""/snapshot"" target=""_blank"">获取当前快照</a>
+                    </div>
+                    <p>HTTP流媒体服务端口: {_serverPort}</p>
+                </body>
+                </html>
+            ";
+
+        response.ContentType = "text/html";
+        response.ContentEncoding = Encoding.UTF8;
+        byte[] buffer = Encoding.UTF8.GetBytes(html);
+        response.ContentLength64 = buffer.Length;
+
+        await response.OutputStream.WriteAsync(buffer, 0, buffer.Length);
+        response.Close();
+    }
+
+    private async Task GenerateVideoFrames(CancellationToken cancellationToken)
+    {
+        var frameInterval = TimeSpan.FromMilliseconds(1000.0 / _frameRate);
+
+        while (!cancellationToken.IsCancellationRequested && _cameraEnable)
+        {
+            try
+            {
+                // 从 FPGA 获取图像数据（模拟）
+                var imageData = await GetFPGAImageData();
+
+                // 向所有连接的客户端发送帧
+                await BroadcastFrameAsync(imageData, cancellationToken);
+
+                _frameCounter++;
+
+                // 等待下一帧
+                await Task.Delay(frameInterval, cancellationToken);
+            }
+            catch (OperationCanceledException)
+            {
+                break;
+            }
+            catch (Exception ex)
+            {
+                logger.Error(ex, "生成视频帧时发生错误");
+                await Task.Delay(1000, cancellationToken); // 错误恢复延迟
+            }
+        }
+    }
+
+    /// <summary>
+    /// 从 FPGA 获取图像数据
+    /// 实际从摄像头读取 RGB565 格式数据并转换为 RGB24
+    /// </summary>
+    private async Task<byte[]> GetFPGAImageData()
+    {
+        Camera? currentCamera = null;
+
+        lock (_cameraLock)
+        {
+            currentCamera = _camera;
+        }
+
+        if (currentCamera == null)
+        {
+            logger.Error("摄像头客户端未初始化");
+            return new byte[0];
+        }
+
+        try
+        {
+            // 从摄像头读取帧数据
+            var result = await currentCamera.ReadFrame();
+
+            if (!result.IsSuccessful)
+            {
+                logger.Error("读取摄像头帧数据失败: {Error}", result.Error);
+                return new byte[0];
+            }
+
+            var rgb565Data = result.Value;
+
+            // 验证数据长度是否正确
+            if (!Common.Image.ValidateImageDataLength(rgb565Data, _frameWidth, _frameHeight, 2))
+            {
+                logger.Warn("摄像头数据长度不匹配，期望: {Expected}, 实际: {Actual}",
+                    _frameWidth * _frameHeight * 2, rgb565Data.Length);
+            }
+
+            // 将 RGB565 转换为 RGB24
+            var rgb24Result = Common.Image.ConvertRGB565ToRGB24(rgb565Data, _frameWidth, _frameHeight, isLittleEndian: false);
+            if (!rgb24Result.IsSuccessful)
+            {
+                logger.Error("RGB565转RGB24失败: {Error}", rgb24Result.Error);
+                return new byte[0];
+            }
+
+            if (_frameCounter % 30 == 0) // 每秒更新一次日志
+            {
+                logger.Debug("成功获取第 {FrameNumber} 帧，RGB565大小: {RGB565Size} 字节, RGB24大小: {RGB24Size} 字节",
+                    _frameCounter, rgb565Data.Length, rgb24Result.Value.Length);
+            }
+
+            return rgb24Result.Value;
+        }
+        catch (Exception ex)
+        {
+            logger.Error(ex, "获取FPGA图像数据时发生错误");
+            return new byte[0];
+        }
+    }
+
+    /// <summary>
+    /// 向所有连接的客户端广播帧数据
+    /// </summary>
+    private async Task BroadcastFrameAsync(byte[] frameData, CancellationToken cancellationToken)
+    {
+        if (frameData == null || frameData.Length == 0)
+        {
+            logger.Warn("尝试广播空帧数据");
+            return;
+        }
+
+        // 直接使用Common.Image.ConvertRGB24ToJpeg进行转换
+        var jpegResult = Common.Image.ConvertRGB24ToJpeg(frameData, _frameWidth, _frameHeight, 80);
+        if (!jpegResult.IsSuccessful)
+        {
+            logger.Error("RGB24转JPEG失败: {Error}", jpegResult.Error);
+            return;
+        }
+
+        var jpegData = jpegResult.Value;
+
+        // 使用Common中的方法准备MJPEG帧数据
+        var mjpegFrameHeader = Common.Image.CreateMjpegFrameHeader(jpegData.Length);
+        var mjpegFrameFooter = Common.Image.CreateMjpegFrameFooter();
+
+        var clientsToRemove = new List<HttpListenerResponse>();
+        var clientsToProcess = new List<HttpListenerResponse>();
+
+        // 获取当前连接的客户端列表
+        lock (_clientsLock)
+        {
+            clientsToProcess.AddRange(_activeClients);
+        }
+
+        if (clientsToProcess.Count == 0)
+        {
+            return; // 没有活跃客户端
+        }
+
+        // 向每个活跃的客户端发送帧
+        foreach (var client in clientsToProcess)
+        {
+            try
+            {
+                // 发送帧头部
+                await client.OutputStream.WriteAsync(mjpegFrameHeader, 0, mjpegFrameHeader.Length, cancellationToken);
+
+                // 发送JPEG数据
+                await client.OutputStream.WriteAsync(jpegData, 0, jpegData.Length, cancellationToken);
+
+                // 发送结尾换行符
+                await client.OutputStream.WriteAsync(mjpegFrameFooter, 0, mjpegFrameFooter.Length, cancellationToken);
+
+                // 确保数据立即发送
+                await client.OutputStream.FlushAsync(cancellationToken);
+
+                if (_frameCounter % 30 == 0) // 每秒记录一次日志
+                {
+                    logger.Debug("已向客户端 {ClientId} 发送第 {FrameNumber} 帧，大小：{Size} 字节",
+                        client.OutputStream.GetHashCode(), _frameCounter, jpegData.Length);
+                }
+            }
+            catch (Exception ex)
+            {
+                logger.Debug("发送帧数据时出错: {Error}", ex.Message);
+                clientsToRemove.Add(client);
+            }
+        }
+
+        // 移除断开连接的客户端
+        if (clientsToRemove.Count > 0)
+        {
+            lock (_clientsLock)
+            {
+                foreach (var client in clientsToRemove)
+                {
+                    _activeClients.Remove(client);
+                    try { client.Close(); }
+                    catch { /* 忽略关闭错误 */ }
+                }
+            }
+
+            logger.Info("已移除 {Count} 个断开连接的客户端，当前连接数: {ActiveCount}",
+                clientsToRemove.Count, _activeClients.Count);
+        }
+    }
+
+    /// <summary>
+    /// 获取连接的客户端端点列表
+    /// </summary>
+    public List<string> GetConnectedClientEndpoints()
+    {
+        List<string> endpoints = new List<string>();
+
+        lock (_clientsLock)
+        {
+            foreach (var client in _activeClients)
+            {
+                endpoints.Add($"Client-{client.OutputStream?.GetHashCode() ?? 0}");
+            }
+        }
+
+        return endpoints;
+    }
+
+    /// <summary>
+    /// 获取服务状态信息
+    /// </summary>
+    public ServiceStatus GetServiceStatus()
+    {
+        var cameraStatus = GetCameraStatus();
+
+        return new ServiceStatus
+        {
+            IsRunning = (_httpListener?.IsListening ?? false) && _cameraEnable,
+            ServerPort = _serverPort,
+            FrameRate = _frameRate,
+            Resolution = $"{_frameWidth}x{_frameHeight}",
+            ConnectedClients = ConnectedClientsCount,
+            ClientEndpoints = GetConnectedClientEndpoints(),
+            CameraStatus = cameraStatus
+        };
+    }
+
+
+    /// <summary>
+    /// 停止 HTTP 视频流服务
+    /// </summary>
+    public override async Task StopAsync(CancellationToken cancellationToken)
+    {
+        logger.Info("正在停止 HTTP 视频流服务...");
+
+        _cameraEnable = false;
+
+        if (_httpListener != null && _httpListener.IsListening)
+        {
+            _httpListener.Stop();
+            _httpListener.Close();
+        }
+
+        // 关闭所有客户端连接
+        lock (_clientsLock)
+        {
+            foreach (var client in _activeClients)
+            {
+                try { client.Close(); }
+                catch { /* 忽略关闭错误 */ }
+            }
+            _activeClients.Clear();
+        }
+
+        // 关闭摄像头连接
+        lock (_cameraLock)
+        {
+            _camera = null;
+        }
+
+        await base.StopAsync(cancellationToken);
+
+        logger.Info("HTTP 视频流服务已停止");
+    }
+
+    /// <summary>
+    /// 释放资源
+    /// </summary>
+    public override void Dispose()
+    {
+        if (_httpListener != null)
+        {
+            if (_httpListener.IsListening)
+            {
+                _httpListener.Stop();
+            }
+            _httpListener.Close();
+        }
+
+        lock (_clientsLock)
+        {
+            foreach (var client in _activeClients)
+            {
+                try { client.Close(); }
+                catch { /* 忽略关闭错误 */ }
+            }
+            _activeClients.Clear();
+        }
+
+        lock (_cameraLock)
+        {
+            _camera = null;
+        }
+
+        base.Dispose();
+    }
+}

server/src/TutorialService.ts

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

server/src/UdpClientPool.cs

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

server/src/UdpServer.cs

@@ -72,7 +72,9 @@ public class UDPServer
 {
     private static NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
 
-    private static Dictionary<string, Queue<UDPData>> udpData = new Dictionary<string, Queue<UDPData>>();
+    private Dictionary<string, Queue<UDPData>> udpData = new Dictionary<string, Queue<UDPData>>();
+
+    private Semaphore taskPool = new Semaphore(3, 3);
 
     private int listenPort;
     private UdpClient listener;
@@ -231,6 +233,7 @@ 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>
@@ -256,6 +259,7 @@ 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>
@@ -420,6 +424,7 @@ public class UDPServer
     /// 清空指定IP地址的数据
     /// </summary>
     /// <param name="ipAddr">IP地址</param>
+    /// <param name="taskID">[TODO:parameter]</param>
     /// <returns>无</returns>
     public async Task ClearUDPData(string ipAddr, int taskID)
     {

server/src/WebProtocol.cs

@@ -269,6 +269,9 @@ namespace WebProtocol
             if (bodyData.Length > 256 * (32 / 8))
                 throw new Exception("The data of SendDataPackage can't over 256 * 32bits");
 
+            if (bodyData.Length % 4 != 0)
+                throw new Exception("The data of SendDataPackage should be divided by 4");
+
             this.bodyData = bodyData;
 
             _ = _reserved;

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Navbar from "./components/Navbar.vue";
 import Dialog from "./components/Dialog.vue";
+import { Alert, useAlertProvider } from "./components/Alert";
 import { ref, provide, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 
@@ -49,19 +50,26 @@ provide("theme", {
 const currentRoutePath = computed(() => {
   return router.currentRoute.value.path;
 });
+
+useAlertProvider();
 </script>
 
 <template>
   <div>
     <header class="relative">
-      <Navbar></Navbar>
+      <Navbar />
-      <Dialog></Dialog>
+      <Dialog />
+      <Alert />
     </header>
 
     <main>
       <RouterView />
     </main>
-    <footer v-if="currentRoutePath != '/project'" class="footer footer-center p-4 bg-base-300 text-base-content">
+
+    <footer
+      v-if="currentRoutePath != '/project'"
+      class="footer footer-center p-4 bg-base-300 text-base-content"
+    >
       <div>
         <p>Copyright © 2023 - All right reserved by OurEDA</p>
       </div>

src/assets/base.css

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

src/assets/main.css

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

src/assets/menu.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741694797806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2622" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M192 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2623"></path><path d="M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2624"></path><path d="M192 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2625"></path><path d="M864 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 480H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 800H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32z" p-id="2626"></path></svg>

src/assets/pwd.svg

@@ -1 +0,0 @@
-<svg t="1741522876251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3628" width="200" height="200"><path d="M327.04 85.333333h369.92C841.472 85.333333 938.666667 186.794667 938.666667 337.749333v348.501334C938.666667 837.205333 841.472 938.666667 696.874667 938.666667h-229.546667a32 32 0 0 1 0-64h229.546667c107.989333 0 177.792-73.941333 177.792-188.416V337.749333c0-114.474667-69.802667-188.416-177.749334-188.416H327.04C219.093333 149.333333 149.333333 223.274667 149.333333 337.749333v348.501334c0 114.474667 69.76 188.416 177.706667 188.416a32 32 0 0 1 0 64C182.442667 938.666667 85.333333 837.205333 85.333333 686.250667V337.749333C85.333333 186.794667 182.442667 85.333333 327.04 85.333333z m-51.114667 381.098667a31.914667 31.914667 0 0 1 42.325334-16.042667 31.914667 31.914667 0 0 1 16.042666 42.282667A47.061333 47.061333 0 1 0 424.192 512c0-25.898667-21.077333-46.933333-47.018667-46.933333a32 32 0 0 1 0-64c50.048 0 91.904 33.408 105.728 78.933333h242.858667a32 32 0 0 1 32 32v79.018667a32 32 0 0 1-64 0V544h-56.704v47.018667a32 32 0 0 1-64 0V544h-90.154667a110.72 110.72 0 0 1-105.728 79.018667 111.104 111.104 0 0 1-101.248-156.544z" fill="#200E32" p-id="3629"></path></svg>

src/assets/user.svg

@@ -1 +0,0 @@
-<svg t="1741522263287" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200"><path d="M511.913993 941.605241c-255.612968 0-385.311608-57.452713-385.311608-170.810012 0-80.846632 133.654964-133.998992 266.621871-151.88846L393.224257 602.049387c-79.986561-55.904586-118.86175-153.436587-118.86175-297.240383 0-139.33143 87.211154-222.586259 233.423148-222.586259l7.912649 0c146.211994 0 233.423148 83.254829 233.423148 222.586259 0 54.184445 0 214.67361-117.829666 297.412397l-0.344028 16.685369c132.966907 18.061482 266.105829 71.041828 266.105829 151.716445C897.225601 884.152528 767.526961 941.605241 511.913993 941.605241zM507.957668 141.567613c-79.470519 0-174.250294 28.382328-174.250294 163.241391 0 129.698639 34.230808 213.469511 104.584579 255.784982 8.944734 5.332437 14.277171 14.965228 14.277171 25.286074l0 59.344868c0 15.309256-11.524945 28.0383-26.662187 29.414413-144.319839 14.449185-239.959684 67.429531-239.959684 95.983874 0 92.199563 177.346548 111.637158 325.966739 111.637158 148.792206 0 325.966739-19.26558 325.966739-111.637158 0-28.726356-95.639845-81.534688-239.959684-95.983874-15.48127-1.548127-27.006215-14.621199-26.662187-30.102469l1.376113-59.344868c0.172014-10.148833 5.676466-19.437594 14.277171-24.770032 70.525785-42.487485 103.208466-123.678145 103.208466-255.784982 0-135.031077-94.779775-163.241391-174.250294-163.241391L507.957668 141.567613 507.957668 141.567613z" fill="#575B66" p-id="2627"></path></svg>

src/components/Alert/Alert.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="fixed left-1/2 top-30 z-50 -translate-x-1/2">
+    <transition
+      name="alert"
+      enter-active-class="alert-enter-active"
+      leave-active-class="alert-leave-active"
+      enter-from-class="alert-enter-from"
+      enter-to-class="alert-enter-to"
+      leave-from-class="alert-leave-from"
+      leave-to-class="alert-leave-to"
+    >
+      <div
+        v-if="alertStore?.alertState.value.visible"
+        :class="alertClasses"
+        class="alert"
+      >
+        <div class="flex items-center gap-2">
+          <!-- Icons for different alert types -->
+          <CheckCircle
+            v-if="alertStore?.alertState.value.type === 'success'"
+            class="h-6 w-6 shrink-0 stroke-current"
+          />
+          <XCircle
+            v-else-if="alertStore?.alertState.value.type === 'error'"
+            class="h-6 w-6 shrink-0 stroke-current"
+          />
+          <AlertTriangle
+            v-else-if="alertStore?.alertState.value.type === 'warning'"
+            class="h-6 w-6 shrink-0 stroke-current"
+          />
+          <Info v-else class="h-6 w-6 shrink-0 stroke-current" />
+          <span>{{ alertStore?.alertState.value.message }}</span>
+        </div>
+        <div class="flex-none">
+          <button
+            class="btn btn-sm btn-circle btn-ghost"
+            @click="alertStore?.hide"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { CheckCircle, XCircle, AlertTriangle, Info, X } from "lucide-vue-next";
+import { useAlertStore } from ".";
+
+const alertStore = useAlertStore();
+
+// Computed classes for different alert types
+const alertClasses = computed(() => {
+  const baseClasses = "shadow-lg max-w-sm";
+
+  switch (alertStore?.alertState.value.type) {
+    case "success":
+      return `${baseClasses} alert-success`;
+    case "error":
+      return `${baseClasses} alert-error`;
+    case "warning":
+      return `${baseClasses} alert-warning`;
+    case "info":
+    default:
+      return `${baseClasses} alert-info`;
+  }
+});
+</script>
+
+<style scoped>
+/* 进入和离开的过渡动画持续时间 */
+.alert-enter-active,
+.alert-leave-active {
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* 进入的起始状态 */
+.alert-enter-from {
+  opacity: 0;
+  transform: translateY(-20px) scale(0.95);
+}
+
+/* 进入的结束状态 */
+.alert-enter-to {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* 离开的起始状态 */
+.alert-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* 离开的结束状态 */
+.alert-leave-to {
+  opacity: 0;
+  transform: translateY(-10px) scale(0.98);
+}
+</style>

src/components/Alert/index.ts

@@ -0,0 +1,82 @@
+import { ref, computed } from "vue";
+import Alert from "./Alert.vue";
+import { createInjectionState } from "@vueuse/core";
+
+export interface AlertState {
+  visible: boolean;
+  message: string;
+  type: "success" | "error" | "warning" | "info";
+}
+
+// create injectivon state using vueuse
+const [useAlertProvider, useAlertStore] = createInjectionState(() => {
+  const alertState = ref<AlertState>({
+    visible: false,
+    message: "",
+    type: "info",
+  });
+
+  let timeoutId: number | null = null;
+
+  function show(
+    message: string,
+    type: AlertState["type"] = "info",
+    duration = 2000,
+  ) {
+    // Clear existing timeout
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+    }
+
+    alertState.value = {
+      visible: true,
+      message,
+      type,
+    };
+
+    // Auto hide after duration
+    if (duration > 0) {
+      timeoutId = window.setTimeout(() => {
+        hide();
+      }, duration);
+    }
+  }
+
+  function hide() {
+    alertState.value.visible = false;
+    if (timeoutId) {
+      window.clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  }
+
+  // Convenience methods for different alert types
+  function error(message: string, duration = 2000) {
+    show(message, "error", duration);
+  }
+
+  function info(message: string, duration = 2000) {
+    show(message, "info", duration);
+  }
+
+  function warn(message: string, duration = 2000) {
+    show(message, "warning", duration);
+  }
+
+  function success(message: string, duration = 2000) {
+    show(message, "success", duration);
+  }
+
+  return {
+    alertState,
+    show,
+    hide,
+    error,
+    info,
+    warn,
+    success,
+  };
+});
+
+
+export { Alert, useAlertProvider, useAlertStore };

src/components/InputField/BaseInputField.vue

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

src/components/InputField/IpInputField.vue

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

src/components/InputField/PortInputField.vue

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

src/components/InputField/index.ts

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

src/components/LabCanvas/ComponentSelector.vue

@@ -181,8 +181,8 @@
 
 <script setup lang="ts">
 import { ref, computed, shallowRef, onMounted } from "vue";
-import motherboardSvg from "../components/equipments/svg/motherboard.svg";
+import motherboardSvg from "@/components/equipments/svg/motherboard.svg";
-import buttonSvg from "../components//equipments/svg/button.svg";
+import buttonSvg from "@/components//equipments/svg/button.svg";
 
 // Props 定义
 interface Props {
@@ -258,7 +258,7 @@ async function loadComponentModule(type: string) {
   if (!componentModules.value[type]) {
     try {
       // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
-      const module = await import(`../components/equipments/${type}.vue`);
+      const module = await import(`@/components/equipments/${type}.vue`);
 
       // 将模块添加到缓存中
       componentModules.value = {

src/components/LabCanvas/DiagramCanvas.vue

@@ -1,70 +1,148 @@
 <template>
-  <div class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container" ref="canvasContainer"
+  <div
-    @mousedown="handleCanvasMouseDown" @mousedown.middle.prevent="startMiddleDrag" @wheel.prevent="onZoom"
+    class="flex-1 h-full w-full bg-base-200 relative overflow-hidden diagram-container"
-    @contextmenu.prevent="handleContextMenu">
+    ref="canvasContainer"
+    @mousedown="handleCanvasMouseDown"
+    @mousedown.middle.prevent="startMiddleDrag"
+    @wheel.prevent="onZoom"
+    @contextmenu.prevent="handleContextMenu"
+  >
     <!-- 工具栏 -->
     <div class="absolute top-2 right-2 flex gap-2 z-30">
       <button class="btn btn-sm btn-primary" @click="openDiagramFileSelector">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
+        <svg
-          stroke="currentColor">
+          xmlns="http://www.w3.org/2000/svg"
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          class="h-4 w-4 mr-1"
-            d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"
+          />
         </svg>
         导入
       </button>
       <button class="btn btn-sm btn-primary" @click="exportDiagram">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
+        <svg
-          stroke="currentColor">
+          xmlns="http://www.w3.org/2000/svg"
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          class="h-4 w-4 mr-1"
-            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+          />
         </svg>
         导出
       </button>
       <button class="btn btn-sm btn-primary" @click="emit('open-components')">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
+        <svg
-          stroke="currentColor">
+          xmlns="http://www.w3.org/2000/svg"
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+          class="h-4 w-4 mr-1"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 4v16m8-8H4"
+          />
         </svg>
         添加组件
       </button>
       <button class="btn btn-sm btn-primary" @click="emit('toggle-doc-panel')">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24"
+        <svg
-          stroke="currentColor">
+          xmlns="http://www.w3.org/2000/svg"
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          class="h-4 w-4 mr-1"
-            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" />
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
         </svg>
         {{ props.showDocPanel ? "属性面板" : "文档" }}
       </button>
     </div>
 
     <!-- 隐藏的文件输入 -->
-    <input type="file" ref="fileInput" class="hidden" accept=".json" @change="handleFileSelected" />
+    <input
+      type="file"
+      ref="fileInput"
+      class="hidden"
+      accept=".json"
+      @change="handleFileSelected"
+    />
 
-    <div ref="canvas" class="diagram-canvas" :style="{
+    <div
+      ref="canvas"
+      class="diagram-canvas"
+      :style="{
         transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
-    }">
+      }"
+    >
       <!-- 渲染连线 -->
       <svg class="wires-layer" width="10000" height="10000">
         <!-- 已完成的连线 -->
-        <WireComponent v-for="(wire, index) in wireItems" :key="wire.id" :id="wire.id" :start-x="wire.startX"
+        <WireComponent
-          :start-y="wire.startY" :end-x="wire.endX" :end-y="wire.endY" :stroke-color="wire.color || '#4a5568'"
+          v-for="(wire, index) in wireItems"
-          :stroke-width="wire.strokeWidth" :is-active="false" :start-component-id="wire.startComponentId"
+          :key="wire.id"
-          :start-pin-id="wire.startPinId" :end-component-id="wire.endComponentId" :end-pin-id="wire.endPinId"
+          :id="wire.id"
-          :routing-mode="wire.routingMode" :path-commands="wire.pathCommands" />
+          :start-x="wire.startX"
+          :start-y="wire.startY"
+          :end-x="wire.endX"
+          :end-y="wire.endY"
+          :stroke-color="wire.color || '#4a5568'"
+          :stroke-width="wire.strokeWidth"
+          :is-active="false"
+          :start-component-id="wire.startComponentId"
+          :start-pin-id="wire.startPinId"
+          :end-component-id="wire.endComponentId"
+          :end-pin-id="wire.endPinId"
+          :routing-mode="wire.routingMode"
+          :path-commands="wire.pathCommands"
+        />
 
         <!-- 正在创建的连线 -->
-        <WireComponent v-if="isCreatingWire" id="temp-wire" :start-x="creatingWireStart.x"
+        <WireComponent
-          :start-y="creatingWireStart.y" :end-x="mousePosition.x" :end-y="mousePosition.y" stroke-color="#3182ce"
+          v-if="isCreatingWire"
-          :stroke-width="2" :is-active="true" />
+          id="temp-wire"
+          :start-x="creatingWireStart.x"
+          :start-y="creatingWireStart.y"
+          :end-x="mousePosition.x"
+          :end-y="mousePosition.y"
+          stroke-color="#3182ce"
+          :stroke-width="2"
+          :is-active="true"
+        />
       </svg>
 
       <!-- 渲染画布上的组件 -->
-      <div v-for="component in diagramParts" :key="component.id" class="component-wrapper" :class="{
+      <div
+        v-for="component in diagramParts"
+        :key="component.id"
+        class="component-wrapper"
+        :class="{
           'component-hover': hoveredComponent === component.id,
           'component-selected': selectedComponentId === component.id,
           'component-disabled': !component.isOn,
           'component-hidepins': component.hidepins,
-      }" :style="{
+        }"
+        :style="{
           top: component.y + 'px',
           left: component.x + 'px',
           zIndex: component.index ?? 0,
@@ -73,54 +151,74 @@
             : 'none',
           opacity: component.isOn ? 1 : 0.6,
           display: 'block',
-        }" @mousedown.left.stop="startComponentDrag($event, component)" @mouseover="
+        }"
+        @mousedown.left.stop="startComponentDrag($event, component)"
+        @mouseover="
           (event) => {
             hoveredComponent = component.id;
           }
-        " @mouseleave="
+        "
+        @mouseleave="
           (event) => {
             hoveredComponent = null;
           }
-        ">
+        "
+      >
         <!-- 动态渲染组件 -->
-        <component :is="getComponentDefinition(component.type)" v-if="props.componentModules[component.type]"
+        <component
-          v-bind="prepareComponentProps(component.attrs || {}, component.id)" @update:bindKey="
+          :is="componentManager.getComponentDefinition(component.type)"
+          v-if="
+            componentManager.componentModules.value[component.type] &&
+            componentManager.getComponentDefinition(component.type)
+          "
+          v-bind="
+            componentManager.prepareComponentProps(
+              component.attrs || {},
+              component.id,
+            )
+          "
+          @update:bindKey="
             (value: string) =>
               updateComponentProp(component.id, 'bindKey', value)
-          " @pin-click="
+          "
+          @pin-click="
             (pinInfo: any) =>
               handlePinClick(component.id, pinInfo, pinInfo.originalEvent)
-          " :ref="(el: any) => setComponentRef(component.id, el)" />
+          "
+          :ref="(el: any) => componentManager.setComponentRef(component.id, el)"
+        />
 
         <!-- Fallback if component module not loaded yet -->
-        <div v-else
+        <div
-          class="p-2 text-xs text-gray-400 border border-dashed border-gray-400 flex items-center justify-center">
+          v-else
+          class="p-2 text-xs text-gray-400 border border-dashed border-gray-400 flex items-center justify-center"
+        >
           <div class="flex flex-col items-center">
             <div class="loading loading-spinner loading-xs mb-1"></div>
             <span>Loading {{ component.type }}...</span>
+            <small class="mt-1 text-xs">{{
+              componentManager.componentModules.value[component.type]
+                ? "Module loaded but invalid"
+                : "Module not found"
+            }}</small>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- 通知组件 -->
-    <div v-if="showNotification" class="toast toast-top toast-center z-50 w-fit-content">
-      <div :class="`alert ${notificationType === 'success'
-          ? 'alert-success'
-          : notificationType === 'error'
-            ? 'alert-error'
-            : 'alert-info'
-        }`">
-        <span>{{ notificationMessage }}</span>
-      </div>
-    </div>
     <!-- 加载指示器 -->
-    <div v-if="isLoading" class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
+    <div
+      v-if="isLoading"
+      class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50"
+    >
       <div class="loading loading-spinner loading-lg text-primary"></div>
     </div>
 
     <!-- 缩放指示器 -->
-    <div class="absolute bottom-4 right-4 bg-base-100 px-3 py-1.5 rounded-md shadow-md z-20" style="opacity: 0.9">
+    <div
+      class="absolute bottom-4 right-4 bg-base-100 px-3 py-1.5 rounded-md shadow-md z-20"
+      style="opacity: 0.9"
+    >
       <span class="text-sm font-medium">{{ Math.round(scale * 100) }}%</span>
     </div>
   </div>
@@ -136,7 +234,9 @@ import {
   watch,
   provide,
 } from "vue";
-import WireComponent from "./equipments/Wire.vue";
+import { useEventListener } from "@vueuse/core";
+import WireComponent from "@/components/equipments/Wire.vue";
+import { useAlertStore } from "@/components/Alert";
 
 // 导入 diagram 管理器
 import {
@@ -149,16 +249,17 @@ import {
   parseConnectionPin,
   connectionArrayToWireItem,
   validateDiagramData,
-} from "./diagramManager";
+} from "./composable/diagramManager";
 
 import type {
   DiagramData,
   DiagramPart,
   ConnectionArray,
   WireItem,
-} from "./diagramManager";
+} from "./composable/diagramManager";
 
-import { CanvasCurrentSelectedComponentID } from "./InjectKeys";
+import { CanvasCurrentSelectedComponentID } from "../InjectKeys";
+import { useComponentManager } from "./composable/componentManager";
 
 // 右键菜单处理函数
 function handleContextMenu(e: MouseEvent) {
@@ -168,22 +269,28 @@ function handleContextMenu(e: MouseEvent) {
 // 定义组件发出的事件
 const emit = defineEmits([
   "diagram-updated",
-  "component-selected",
-  "component-moved",
-  "component-delete",
   "toggle-doc-panel",
   "wire-created",
   "wire-deleted",
-  "load-component-module",
   "open-components",
 ]);
 
 // 定义组件接受的属性
 const props = defineProps<{
-  componentModules: Record<string, any>;
   showDocPanel?: boolean; // 添加属性接收文档面板的显示状态
 }>();
 
+// 获取componentManager实例
+const componentManager = useComponentManager();
+if (!componentManager) {
+  throw new Error(
+    "DiagramCanvas must be used within a component manager provider",
+  );
+}
+
+// 获取Alert store实例
+const alertStore = useAlertStore();
+
 // --- 画布状态 ---
 const canvasContainer = ref<HTMLElement | null>(null);
 const canvas = ref<HTMLElement | null>(null);
@@ -209,8 +316,10 @@ const diagramData = ref<DiagramData>({
   connections: [],
 });
 
-// 组件引用跟踪
+// 组件引用跟踪（保留以便向后兼容）
-const componentRefs = ref<Record<string, any>>({});
+const componentRefs = computed(
+  () => componentManager?.componentRefs.value || {},
+);
 
 // 计算属性：从 diagramData 中提取组件列表，并按index属性排序
 const diagramParts = computed<DiagramPart[]>(() => {
@@ -254,7 +363,7 @@ const wireItems = computed<WireItem[]>(() => {
       startPos.y = startComp.y;
 
       // 尝试获取引脚精确位置（如果有实现）
-      const startCompRef = componentRefs.value?.[startCompId];
+      const startCompRef = componentManager?.getComponentRef(startCompId);
       if (startCompRef && typeof startCompRef.getPinPosition === "function") {
         try {
           const pinPos = startCompRef.getPinPosition(startPinId);
@@ -280,7 +389,7 @@ const wireItems = computed<WireItem[]>(() => {
       endPos.y = endComp.y;
 
       // 尝试获取引脚精确位置
-      const endCompRef = componentRefs.value?.[endCompId];
+      const endCompRef = componentManager?.getComponentRef(endCompId);
       if (endCompRef && typeof endCompRef.getPinPosition === "function") {
         try {
           const pinPos = endCompRef.getPinPosition(endPinId);
@@ -315,16 +424,40 @@ const mousePosition = reactive({ x: 0, y: 0 });
 // 加载状态
 const isLoading = ref(false);
 
-// 通知状态
-const showNotification = ref(false);
-const notificationMessage = ref("");
-const notificationType = ref<"success" | "error" | "info">("info");
-// 保存toast定时器ID
-const toastTimers: number[] = [];
-
 // 文件选择引用
 const fileInput = ref<HTMLInputElement | null>(null);
 
+// VueUse事件监听器状态管理
+const isDragEventActive = ref(false);
+const isComponentDragEventActive = ref(false);
+const isWireCreationEventActive = ref(false);
+
+// 使用VueUse设置事件监听器
+// 画布拖拽事件
+useEventListener(document, "mousemove", (e: MouseEvent) => {
+  if (isDragEventActive.value) {
+    onDrag(e);
+  }
+  if (isComponentDragEventActive.value) {
+    onComponentDrag(e);
+  }
+  if (isWireCreationEventActive.value) {
+    onCreatingWireMouseMove(e);
+  }
+});
+
+useEventListener(document, "mouseup", () => {
+  if (isDragEventActive.value) {
+    stopDrag();
+  }
+  if (isComponentDragEventActive.value) {
+    stopComponentDrag();
+  }
+});
+
+// 键盘事件
+useEventListener(window, "keydown", handleKeyDown);
+
 // --- 缩放功能 ---
 const MIN_SCALE = 0.2;
 const MAX_SCALE = 10.0;
@@ -362,73 +495,16 @@ function onZoom(e: WheelEvent) {
   scale.value = newScale;
 }
 
-// --- 动态组件渲染 ---
-const getComponentDefinition = (type: string) => {
-  const module = props.componentModules[type];
-  if (!module) return null;
-
-  // 确保我们返回一个有效的组件定义
-  if (module.default) {
-    return module.default;
-  } else if (module.__esModule && module.default) {
-    // 有时 Vue 的动态导入会将默认导出包装在 __esModule 属性下
-    return module.default;
-  } else {
-    console.warn(
-      `Module for ${type} found but default export is missing`,
-      module,
-    );
-    return null;
-  }
-};
-
-function prepareComponentProps(
-  attrs: Record<string, any>,
-  componentId?: string,
-): Record<string, any> {
-  const result: Record<string, any> = { ...attrs };
-  if (componentId) {
-    result.componentId = componentId;
-  }
-  // console.log(`组件属性 ID: ${componentId}`, result);
-  return result;
-}
-
-// 设置组件引用
-function setComponentRef(componentId: string, el: any) {
-  if (componentRefs.value) {
-    if (el) {
-      componentRefs.value[componentId] = el;
-    } else {
-      delete componentRefs.value[componentId];
-    }
-  }
-}
-
-// 重置组件引用缓存
-function resetComponentRefs() {
-  componentRefs.value = {};
-}
-
-// 加载组件模块
-async function loadComponentModule(type: string) {
-  if (!props.componentModules[type]) {
-    try {
-      // 通知父组件需要加载此类型的组件
-      emit("load-component-module", type);
-    } catch (error) {
-      console.error(`Failed to request component module ${type}:`, error);
-    }
-  }
-}
-
 // --- 画布交互逻辑 ---
 function handleCanvasMouseDown(e: MouseEvent) {
   // 如果是直接点击画布（而不是元器件），清除选中状态
   if (e.target === canvasContainer.value || e.target === canvas.value) {
     if (selectedComponentId.value !== null) {
       selectedComponentId.value = null;
-      emit("component-selected", null);
+      // 直接通过componentManager选择组件
+      if (componentManager) {
+        componentManager.selectComponent(null);
+      }
     }
   }
 
@@ -450,8 +526,7 @@ function startDrag(e: MouseEvent) {
   dragStart.x = e.clientX - position.x;
   dragStart.y = e.clientY - position.y;
 
-  document.addEventListener("mousemove", onDrag);
+  isDragEventActive.value = true;
-  document.addEventListener("mouseup", stopDrag);
   e.preventDefault();
 }
 
@@ -466,8 +541,7 @@ function startMiddleDrag(e: MouseEvent) {
   dragStart.x = e.clientX - position.x;
   dragStart.y = e.clientY - position.y;
 
-  document.addEventListener("mousemove", onDrag);
+  isDragEventActive.value = true;
-  document.addEventListener("mouseup", stopDrag);
   e.preventDefault();
 }
 
@@ -483,9 +557,7 @@ function onDrag(e: MouseEvent) {
 function stopDrag() {
   isDragging.value = false;
   isMiddleDragging.value = false;
-
+  isDragEventActive.value = false;
-  document.removeEventListener("mousemove", onDrag);
-  document.removeEventListener("mouseup", stopDrag);
 }
 
 // --- 组件拖拽交互 ---
@@ -505,7 +577,10 @@ function startComponentDrag(e: MouseEvent, component: DiagramPart) {
   // 仍然选中组件，无论是否为交互元素
   if (selectedComponentId.value !== component.id) {
     selectedComponentId.value = component.id;
-    emit("component-selected", component);
+    // 直接通过componentManager选择组件
+    if (componentManager) {
+      componentManager.selectComponent(component);
+    }
   }
 
   // 如果组件锁定位置或是交互元素，则不启动拖拽
@@ -537,9 +612,8 @@ function startComponentDrag(e: MouseEvent, component: DiagramPart) {
   componentDragOffset.x = mouseX_canvas - component.x;
   componentDragOffset.y = mouseY_canvas - component.y;
 
-  // 添加全局监听器
+  // 激活组件拖拽事件监听
-  document.addEventListener("mousemove", onComponentDrag);
+  isComponentDragEventActive.value = true;
-  document.addEventListener("mouseup", stopComponentDrag);
 }
 
 // 拖拽组件过程
@@ -568,14 +642,6 @@ function onComponentDrag(e: MouseEvent) {
   );
   if (!draggedComponent) return;
 
-  // 更新组件位置
-  // diagramData.value = updatePartPosition(
-  //   diagramData.value,
-  //   draggingComponentId.value,
-  //   Math.round(newX),
-  //   Math.round(newY),
-  // );
-
   // 如果组件属于组，移动组内所有其他组件
   if (draggedComponent.group) {
     const deltaX = Math.round(newX) - draggedComponent.x;
@@ -600,12 +666,14 @@ function onComponentDrag(e: MouseEvent) {
     }
   }
 
-  // 通知父组件位置已更新
+  // 通知componentManager位置已更新
-  emit("component-moved", {
+  if (componentManager) {
+    componentManager.moveComponent({
       id: draggingComponentId.value,
       x: Math.round(newX),
       y: Math.round(newY),
     });
+  }
 
   // 通知图表已更新
   emit("diagram-updated", diagramData.value);
@@ -624,8 +692,7 @@ function stopComponentDrag() {
     draggingComponentId.value = null;
   }
 
-  document.removeEventListener("mousemove", onComponentDrag);
+  isComponentDragEventActive.value = false;
-  document.removeEventListener("mouseup", stopComponentDrag);
 }
 
 // 更新组件属性
@@ -634,6 +701,11 @@ function updateComponentProp(
   propName: string,
   value: any,
 ) {
+  // 直接通过componentManager更新组件属性
+  if (componentManager) {
+    componentManager.updateComponentProp(componentId, propName, value);
+  } else {
+    // 后备方案：直接更新数据
     diagramData.value = updatePartAttribute(
       diagramData.value,
       componentId,
@@ -642,6 +714,7 @@ function updateComponentProp(
     );
     emit("diagram-updated", diagramData.value);
     saveDiagramData(diagramData.value);
+  }
 }
 
 // --- 连线操作 ---
@@ -671,8 +744,6 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
   console.log("鼠标位置:", mousePosition);
 
   if (!isCreatingWire.value) {
-    // 开始创建连线
-    const containerRect = canvasContainer.value.getBoundingClientRect();
     // 获取初始位置信息
     let pinPosition = pinInfo.position;
     console.log("Pin信息:", pinInfo);
@@ -681,7 +752,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
     console.log("引脚ID:", pinId);
 
     // 从组件引用中获取组件实例
-    const component = componentRefs.value[componentId];
+    const component = componentManager?.getComponentRef(componentId);
     console.log("组件引用:", component);
 
     // 查找组件部件对象以获取组件位置
@@ -742,7 +813,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
       pinId,
       pinInfo.constraint,
     );
-    document.addEventListener("mousemove", onCreatingWireMouseMove);
+    isWireCreationEventActive.value = true;
   } else {
     // 完成连线创建
     if (
@@ -757,7 +828,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
     // 获取终点引脚位置
     let endPosition = { x: 0, y: 0 };
     const componentPart = diagramParts.value.find((p) => p.id === componentId);
-    const endComponent = componentRefs.value[componentId];
+    const endComponent = componentManager?.getComponentRef(componentId);
 
     console.log("终点组件部件:", componentPart);
     console.log("终点组件引用:", endComponent);
@@ -819,7 +890,7 @@ function handlePinClick(componentId: string, pinInfo: any, event: MouseEvent) {
 
     // 重置连线创建状态
     resetWireCreation();
-    document.removeEventListener("mousemove", onCreatingWireMouseMove);
+    isWireCreationEventActive.value = false;
   }
 }
 
@@ -852,7 +923,7 @@ function resetWireCreation() {
 // 取消连线创建
 function cancelWireCreation() {
   resetWireCreation();
-  document.removeEventListener("mousemove", onCreatingWireMouseMove);
+  isWireCreationEventActive.value = false;
 }
 
 // 连线创建过程中的鼠标移动
@@ -871,7 +942,10 @@ function deleteWire(wireIndex: number) {
 // 删除组件
 function deleteComponent(componentId: string) {
   diagramData.value = deletePart(diagramData.value, componentId);
-  emit("component-delete", componentId);
+  // 直接通过componentManager删除组件
+  if (componentManager) {
+    componentManager.deleteComponent(componentId);
+  }
   emit("diagram-updated", diagramData.value);
   saveDiagramData(diagramData.value);
 
@@ -916,7 +990,7 @@ function handleFileSelected(event: Event) {
       const validation = validateDiagramData(parsed);
 
       if (!validation.isValid) {
-        showToast(
+        alertStore?.show(
           `不是有效的diagram.json格式: ${validation.errors.join("; ")}`,
           "error",
         );
@@ -933,11 +1007,11 @@ function handleFileSelected(event: Event) {
       // 发出更新事件
       emit("diagram-updated", diagramData.value);
 
-      showToast(`成功导入diagram文件`, "success");
+      alertStore?.show(`成功导入diagram文件`, "success");
     } catch (error) {
       console.error("解析JSON文件出错:", error);
       if (document.body.contains(canvasContainer.value)) {
-        showToast("解析文件出错，请确认是有效的JSON格式", "error");
+        alertStore?.show("解析文件出错，请确认是有效的JSON格式", "error");
       }
     } finally {
       // 检查组件是否仍然挂载
@@ -953,7 +1027,7 @@ function handleFileSelected(event: Event) {
   reader.onerror = () => {
     // 检查组件是否仍然挂载
     if (document.body.contains(canvasContainer.value)) {
-      showToast("读取文件时出错", "error");
+      alertStore?.show("读取文件时出错", "error");
       isLoading.value = false;
     }
     // 清除文件输入
@@ -979,50 +1053,39 @@ function exportDiagram() {
     a.download = "diagram.json";
     a.click();
     // 释放URL对象
-    const timerId = setTimeout(() => {
+    setTimeout(() => {
       URL.revokeObjectURL(url);
       // 检查组件是否仍然挂载
       if (document.body.contains(canvasContainer.value)) {
         isLoading.value = false;
-        showToast("成功导出diagram文件", "success");
+        alertStore?.show("成功导出diagram文件", "success");
       }
     }, 100);
-
-    // 将定时器ID保存起来，以便在组件卸载时清除
-    toastTimers.push(timerId);
   } catch (error) {
     console.error("导出diagram文件时出错:", error);
-    showToast("导出diagram文件时出错", "error");
+    alertStore?.show("导出diagram文件时出错", "error");
     isLoading.value = false;
   }
 }
 
-// 显示通知
-function showToast(
-  message: string,
-  type: "success" | "error" | "info" = "info",
-  duration = 3000,
-) {
-  notificationMessage.value = message;
-  notificationType.value = type;
-  showNotification.value = true;
-
-  // 保存定时器ID以便清除
-  const timerId = setTimeout(() => {
-    // 检查组件是否仍然挂载
-    if (document.body.contains(canvasContainer.value)) {
-      showNotification.value = false;
-    }
-  }, duration);
-
-  // 将定时器ID保存起来，以便在组件卸载时清除
-  toastTimers.push(timerId);
-}
-
 // --- 生命周期钩子 ---
 onMounted(async () => {
-  // 重置组件引用
+  // 设置componentManager的画布引用
-  resetComponentRefs();
+  if (componentManager) {
+    // 创建一个包含必要方法的画布API对象
+    const canvasAPI = {
+      getDiagramData: () => diagramData.value,
+      updateDiagramDataDirectly: (data: DiagramData) => {
+        diagramData.value = data;
+        saveDiagramData(data);
+        emit("diagram-updated", data);
+      },
+      getCanvasPosition: () => ({ x: position.x, y: position.y }),
+      getScale: () => scale.value,
+      $el: canvasContainer.value,
+    };
+    componentManager.setCanvasRef(canvasAPI);
+  }
 
   // 加载图表数据
   try {
@@ -1039,12 +1102,12 @@ onMounted(async () => {
       Array.from(componentTypes),
     );
 
-    // 通知父组件需要加载组件模块
+    // 直接通过componentManager预加载组件模块
-    componentTypes.forEach((type) => {
+    if (componentManager) {
-      if (!props.componentModules[type]) {
+      await componentManager.preloadComponentModules(
-        emit("load-component-module", type);
+        Array.from(componentTypes),
+      );
     }
-    });
   } catch (error) {
     console.error("加载图表数据失败:", error);
   }
@@ -1054,9 +1117,6 @@ onMounted(async () => {
     position.x = canvasContainer.value.clientWidth / 2 - 5000; // 画布宽度的一半
     position.y = canvasContainer.value.clientHeight / 2 - 5000; // 画布高度的一半
   }
-
-  // 添加键盘事件监听器
-  window.addEventListener("keydown", handleKeyDown);
 });
 
 // 处理键盘事件
@@ -1074,33 +1134,6 @@ function handleKeyDown(e: KeyboardEvent) {
   }
 }
 
-onUnmounted(() => {
-  // 清理事件监听器
-  document.removeEventListener("mousemove", onComponentDrag);
-  document.removeEventListener("mouseup", stopComponentDrag);
-  document.removeEventListener("mousemove", onDrag);
-  document.removeEventListener("mouseup", stopDrag);
-  document.removeEventListener("mousemove", onCreatingWireMouseMove);
-
-  // 移除键盘事件监听器
-  window.removeEventListener("keydown", handleKeyDown);
-
-  // 清除所有toast定时器
-  toastTimers.forEach((timerId) => clearTimeout(timerId));
-});
-
-// --- 对外API ---
-// 获取当前图表数据
-function getDiagramData() {
-  return diagramData.value;
-}
-
-// 设置图表数据
-function setDiagramData(data: DiagramData) {
-  diagramData.value = data;
-  emit("diagram-updated", data);
-}
-
 // 无加载动画的数据更新方法
 function updateDiagramDataDirectly(data: DiagramData) {
   // 检查组件是否仍然挂载
@@ -1142,41 +1175,18 @@ defineExpose({
       emit("diagram-updated", data);
 
       // 短暂延迟后结束加载状态，以便UI能更新
-      const timerId = setTimeout(() => {
+      setTimeout(() => {
         // 检查组件是否仍然挂载
         if (document.body.contains(canvasContainer.value)) {
           isLoading.value = false;
         }
       }, 200);
-
-      // 将定时器ID保存起来，以便在组件卸载时清除
-      toastTimers.push(timerId);
     });
   },
 
-  // 文件操作
-  openDiagramFileSelector,
-  exportDiagram,
-
-  // 组件操作
-  getSelectedComponent: () => {
-    if (!selectedComponentId.value) return null;
-    return (
-      diagramParts.value.find((p) => p.id === selectedComponentId.value) || null
-    );
-  },
-  deleteSelectedComponent: () => {
-    if (selectedComponentId.value) {
-      deleteComponent(selectedComponentId.value);
-    }
-  },
-
   // 画布状态
   getCanvasPosition: () => ({ x: position.x, y: position.y }),
   getScale: () => scale.value,
-
-  // 通知系统
-  showToast,
 });
 
 // 监视器 - 当图表数据更改时保存
@@ -1187,15 +1197,6 @@ watch(
   },
   { deep: true },
 );
-
-// 当组件模块加载完成后，确保组件引用正确建立
-watch(
-  () => props.componentModules,
-  () => {
-    // 这里不需要特别处理，Vue 会自动通过 setComponentRef 函数更新引用
-  },
-  { deep: true },
-);
 </script>
 
 <style scoped>
@@ -1310,7 +1311,13 @@ watch(
   -ms-user-select: none;
 }
 
-.component-wrapper :deep(svg *:not([class*="interactive"]):not(rect.glow):not(circle[fill-opacity]):not([fill-opacity])) {
+.component-wrapper
+  :deep(
+    svg
+      *:not([class*="interactive"]):not(rect.glow):not(
+        circle[fill-opacity]
+      ):not([fill-opacity])
+  ) {
   pointer-events: none;
   /* 非交互元素不接收鼠标事件 */
 }

src/components/LabCanvas/composable/componentManager.ts

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

src/components/LabCanvas/composable/wireManager.ts

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

src/components/LabCanvas/index.ts

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

src/components/LoginCard.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="card card-dash h-80 w-100 shadow-xl">
-    <div class="card-body">
-      <h1 class="card-title place-self-center my-3 text-2xl">User Login</h1>
-      <div class="flex flex-col w-full h-full">
-        <label class="input w-full my-3">
-          <img class="h-[1em] opacity-50" src="@/assets/user.svg" alt="User img" />
-          <input type="text" class="grow" placeholder="用户名" />
-        </label>
-        <label class="input w-full my-3">
-          <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
-          <input type="text" class="grow" placeholder="密码" />
-        </label>
-      </div>
-      <div>
-        <RouterLink class="flex justify-end mx-3" to="/">忘记密码?</RouterLink>
-      </div>
-      <div class="card-actions flex items-end my-3">
-        <button class="btn flex-1">注册</button>
-        <button class="btn btn-primary flex-3">登录</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped>
-@import "@/assets/main.css";
-</style>

src/components/Navbar.vue

@@ -2,81 +2,55 @@
   <div class="navbar bg-base-100 shadow-xl">
     <div class="navbar-start">
       <div class="dropdown">
-        <div tabindex="0" role="button"
+        <div
-          class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300">
+          tabindex="0"
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          role="button"
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
+          class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300"
-          </svg>
+        >
+          <MenuIcon />
         </div>
-        <ul tabindex="0"
+        <ul
-          class="menu menu-sm dropdown-content bg-base-100 rounded-lg z-50 mt-3 w-52 p-2 shadow-lg transition-all duration-300 ease-in-out">
+          tabindex="0"
+          class="menu menu-sm dropdown-content bg-base-200 rounded-lg z-50 mt-3 w-52 p-2 shadow-lg transition-all duration-300 ease-in-out"
+        >
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/" class="text-base font-medium">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
+              <House class="icon" />
-                stroke="currentColor" stroke-width="2">
-                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-                <polyline points="9 22 9 12 15 12 15 22" />
-              </svg>
               首页
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/user" class="text-base font-medium">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
+              <User class="icon" />
-                stroke="currentColor" stroke-width="2">
-                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                <circle cx="12" cy="7" r="4"></circle>
-              </svg>
               用户界面
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
             <router-link to="/project" class="text-base font-medium">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
+              <PencilRuler class="icon" />
-                stroke="currentColor" stroke-width="2">
-                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
-                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
-              </svg>
               工程界面
             </router-link>
-          </li>          <li class="my-1 hover:translate-x-1 transition-all duration-300">
+          </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"
+              <FlaskConical class="icon" />
-                stroke="currentColor" stroke-width="2">
-                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
-              </svg>
               测试功能
             </router-link>
           </li>
-          <li class="my-1 hover:translate-x-1 transition-all duration-300">
-            <router-link to="/video-stream" class="text-base font-medium">
-              <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"
+              <FileText class="icon" />
-                stroke="currentColor" stroke-width="2">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
-                <polyline points="14 2 14 8 20 8"></polyline>
-                <line x1="16" y1="13" x2="8" y2="13"></line>
-                <line x1="16" y1="17" x2="8" y2="17"></line>
-                <polyline points="10 9 9 9 8 9"></polyline>
-              </svg>
               Markdown测试
             </router-link>
           </li>
           <li class="my-1 hover:translate-x-1 transition-all duration-300">
-            <a href="http://localhost:5000/swagger" target="_self" rel="noopener noreferrer"
+            <a
-              class="text-base font-medium">
+              href="http://localhost:5000/swagger"
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 opacity-70" viewBox="0 0 24 24" fill="none"
+              target="_self"
-                stroke="currentColor" stroke-width="2">
+              rel="noopener noreferrer"
-                <path d="M3 3h18v18H3z"></path>
+              class="text-base font-medium"
-                <path d="M8 8h8v8H8z" fill="currentColor"></path>
+            >
-              </svg>
+              <BookOpenText class="icon" />
               OpenAPI文档
             </a>
           </li>
@@ -84,15 +58,64 @@
       </div>
     </div>
     <div class="navbar-center lg:flex">
-      <router-link to="/" class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105">
+      <router-link
+        to="/"
+        class="btn btn-ghost text-xl font-bold transition-all duration-300 hover:scale-105"
+      >
         <span class="text-primary">FPGA</span> Web Lab
       </router-link>
     </div>
     <div class="navbar-end">
-      <router-link to="/login"
+      <!-- 未登录状态 -->
-        class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3">
+      <template v-if="!isLoggedIn">
+        <router-link
+          to="/login"
+          class="btn btn-primary text-base-100 transition-all duration-300 hover:scale-105 hover:shadow-lg mr-3"
+        >
           登录
         </router-link>
+      </template>
+
+      <!-- 已登录状态 -->
+      <template v-else>
+        <div class="dropdown dropdown-end mr-3">
+          <div
+            tabindex="0"
+            role="button"
+            class="btn btn-ghost hover:bg-primary hover:bg-opacity-20 transition-all duration-300 flex items-center gap-2"
+          >
+            <User class="h-5 w-5" />
+            <span class="font-medium">{{ userName }}</span>
+            <ChevronDownIcon
+              class="icon transition-transform duration-300 dropdown-icon"
+            />
+          </div>
+          <ul
+            tabindex="0"
+            class="menu menu-sm dropdown-content bg-base-200 rounded-lg z-50 mt-3 w-48 p-2 shadow-lg transition-all duration-300 ease-in-out"
+          >
+            <li class="my-1 hover:translate-x-1 transition-all duration-300">
+              <router-link
+                to="/user"
+                class="text-base font-medium flex items-center gap-2"
+              >
+                <User class="icon" />
+                用户中心
+              </router-link>
+            </li>
+            <li class="my-1 hover:translate-x-1 transition-all duration-300">
+              <button
+                @click="handleLogout"
+                class="text-base font-medium flex items-center gap-2 w-full text-left hover:bg-error hover:text-error-content"
+              >
+                <LogOutIcon class="icon" />
+                退出登录
+              </button>
+            </li>
+          </ul>
+        </div>
+      </template>
+
       <div class="ml-2 transition-all duration-500 hover:rotate-12">
         <ThemeControlButton />
       </div>
@@ -101,9 +124,78 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { onBeforeRouteUpdate, useRouter } from "vue-router";
 import ThemeControlButton from "./ThemeControlButton.vue";
+import {
+  MenuIcon,
+  FileText,
+  BookOpenText,
+  FlaskConical,
+  House,
+  User,
+  PencilRuler,
+  LogOutIcon,
+  ChevronDownIcon,
+} from "lucide-vue-next";
+import { AuthManager } from "@/utils/AuthManager";
+
+const router = useRouter();
+
+// 响应式数据
+const userName = ref<string>("");
+const isUserMenuOpen = ref<boolean>(false);
+const isLoggedIn = ref<boolean>(false); // 改为响应式变量
+
+// 方法
+const loadUserInfo = async () => {
+  try {
+    const authenticated = await AuthManager.isAuthenticated();
+    if (authenticated) {
+      const client = AuthManager.createAuthenticatedDataClient();
+      const userInfo = await client.getUserInfo();
+      userName.value = userInfo.name;
+      isLoggedIn.value = true;
+    } else {
+      userName.value = "";
+      isLoggedIn.value = false;
+    }
+  } catch (error) {
+    console.error("Failed to load user info:", error);
+    // 如果获取用户信息失败，清除token
+    AuthManager.clearToken();
+    userName.value = "";
+    isLoggedIn.value = false;
+  }
+};
+
+const handleLogout = () => {
+  AuthManager.logout();
+  userName.value = "";
+  isLoggedIn.value = false;
+  router.push("/");
+};
+
+// 生命周期钩子
+onMounted(() => {
+  loadUserInfo();
+
+  // 监听路由变化
+  router.afterEach(() => {
+    loadUserInfo();
+  });
+});
 </script>
 
-<style scoped>
+<style scoped lang="postcss">
 @import "../assets/main.css";
+
+.icon {
+  @apply h-5 w-5 opacity-70;
+}
+
+.dropdown[open] .dropdown-icon,
+.dropdown:focus-within .dropdown-icon {
+  transform: rotate(180deg);
+}
 </style>

src/components/Oscilloscope/WaveformDisplay.vue

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

src/components/Oscilloscope/index.ts

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

src/components/PropertyEditor.vue

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

src/components/PropertyPanel.vue

@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 // 导入所需的类型和组件
-import { type DiagramPart } from "@/components/diagramManager"; // 图表部件类型定义
+import { type DiagramPart } from "@/components/LabCanvas/composable/diagramManager"; // 图表部件类型定义
 import { type PropertyConfig } from "@/components/equipments/componentConfig"; // 属性配置类型定义
 import CollapsibleSection from "./CollapsibleSection.vue"; // 可折叠区域组件
 import PropertyEditor from "./PropertyEditor.vue"; // 属性编辑器组件

src/components/equipments/componentConfig.ts

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

src/main.ts

@@ -5,10 +5,6 @@ import { createPinia } from 'pinia'
 
 import App from '@/App.vue'
 import router from './router'
-// import { Client } from './APIClient'
 
 const app = createApp(App).use(router).use(createPinia()).mount('#app')
 
-// 初始化约束通信
-// initConstraintCommunication();
-

src/router/index.ts

@@ -1,23 +1,19 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
-import HomeView from '../views/HomeView.vue'
+import HomeView from "../views/HomeView.vue";
-import LoginView from '../views/LoginView.vue'
+import AuthView from "../views/AuthView.vue";
-import LabView from '../views/LabView.vue'
+import ProjectView from "../views/Project/Index.vue";
-import ProjectView from '../views/ProjectView.vue'
+import TestView from "../views/TestView.vue";
-import TestView from '../views/TestView.vue'
+import UserView from "@/views/User/Index.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),
   routes: [
-    {path: '/',       name: 'home',   component: HomeView},
+    { path: "/", name: "home", component: HomeView },
-    {path: '/login',  name: 'login',  component: LoginView},
+    { path: "/login", name: "login", component: AuthView },
-    {path: '/lab/:id',name: 'lab',    component: LabView},
+    { path: "/project", name: "project", component: ProjectView },
-    {path: '/project',name: 'project',component: ProjectView},
+    { path: "/test", name: "test", component: TestView },
-    {path: '/test',   name: 'test',   component: TestView},
+    { path: "/user", name: "user", component: UserView },
-    {path: '/user',   name: 'user',   component: UserView},
+  ],
-    {path: '/admin',  name: 'admin',  component: AdminView},    {path: '/video-stream',name: 'video-stream',component: VideoStreamView}]
+});
-})
 
-export default router
+export default router;

src/stores/equipments.ts

@@ -1,7 +1,8 @@
 import { ref, reactive, watchPostEffect } from 'vue'
 import { defineStore } from 'pinia'
+import { useLocalStorage } from '@vueuse/core'
 import { isString, toNumber } from 'lodash';
-import { Common } from '@/Common';
+import { Common } from '@/utils/Common';
 import z from "zod"
 import { isNumber } from 'mathjs';
 import { JtagClient, MatrixKeyClient, PowerClient } from "@/APIClient";
@@ -14,9 +15,8 @@ export const useEquipments = defineStore('equipments', () => {
   const constrainsts = useConstraintsStore();
   const dialog = useDialogStore();
 
-  // Basic Info
+  const boardAddr = useLocalStorage('fpga-board-addr', "127.0.0.1");
-  const boardAddr = ref("127.0.0.1");
+  const boardPort = useLocalStorage('fpga-board-port', 1234);
-  const boardPort = ref(1234);
 
   // Jtag
   const jtagBitstream = ref<File>();

src/utils/AuthManager.ts

@@ -0,0 +1,239 @@
+import {
+  DataClient,
+  VideoStreamClient,
+  BsdlParserClient,
+  DDSClient,
+  JtagClient,
+  MatrixKeyClient,
+  PowerClient,
+  RemoteUpdateClient,
+  TutorialClient,
+  UDPClient,
+} from "@/APIClient";
+
+// 支持的客户端类型联合类型
+type SupportedClient =
+  | DataClient
+  | VideoStreamClient
+  | BsdlParserClient
+  | DDSClient
+  | JtagClient
+  | MatrixKeyClient
+  | PowerClient
+  | RemoteUpdateClient
+  | TutorialClient
+  | UDPClient;
+
+export class AuthManager {
+  // 存储token到localStorage
+  public static setToken(token: string): void {
+    localStorage.setItem("authToken", token);
+  }
+
+  // 从localStorage获取token
+  public static getToken(): string | null {
+    return localStorage.getItem("authToken");
+  }
+
+  // 清除token
+  public static clearToken(): void {
+    localStorage.removeItem("authToken");
+  }
+
+  // 检查是否已认证
+  public static async isAuthenticated(): Promise<boolean> {
+    return await AuthManager.verifyToken();
+  }
+
+  // 通用的为HTTP请求添加Authorization header的方法
+  public static addAuthHeader(client: SupportedClient): void {
+    const token = AuthManager.getToken();
+    if (token) {
+      // 创建一个自定义的 http 对象，包装原有的 fetch 方法
+      const customHttp = {
+        fetch: (url: RequestInfo, init?: RequestInit) => {
+          if (!init) init = {};
+          if (!init.headers) init.headers = {};
+
+          // 添加Authorization header
+          if (typeof init.headers === "object" && init.headers !== null) {
+            (init.headers as any)["Authorization"] = `Bearer ${token}`;
+          }
+
+          // 使用全局 fetch 或 window.fetch
+          return (window as any).fetch(url, init);
+        },
+      };
+
+      // 重新构造客户端，传入自定义的 http 对象
+      const ClientClass = client.constructor as new (
+        baseUrl?: string,
+        http?: any,
+      ) => SupportedClient;
+      const newClient = new ClientClass(undefined, customHttp);
+
+      // 将新客户端的属性复制到原客户端（这是一个 workaround）
+      // 更好的做法是返回新的客户端实例
+      Object.setPrototypeOf(client, Object.getPrototypeOf(newClient));
+      Object.assign(client, newClient);
+    }
+  }
+
+  // 私有方法：创建带认证的HTTP客户端
+  private static createAuthenticatedHttp() {
+    const token = AuthManager.getToken();
+    if (!token) {
+      return null;
+    }
+
+    return {
+      fetch: (url: RequestInfo, init?: RequestInit) => {
+        if (!init) init = {};
+        if (!init.headers) init.headers = {};
+
+        if (typeof init.headers === "object" && init.headers !== null) {
+          (init.headers as any)["Authorization"] = `Bearer ${token}`;
+        }
+
+        return (window as any).fetch(url, init);
+      },
+    };
+  }
+
+  // 通用的创建已认证客户端的方法（使用泛型）
+  public static createAuthenticatedClient<T extends SupportedClient>(
+    ClientClass: new (baseUrl?: string, http?: any) => T,
+  ): T {
+    const customHttp = AuthManager.createAuthenticatedHttp();
+    return customHttp
+      ? new ClientClass(undefined, customHttp)
+      : new ClientClass();
+  }
+
+  // 便捷方法：创建已配置认证的各种客户端
+  public static createAuthenticatedDataClient(): DataClient {
+    return AuthManager.createAuthenticatedClient(DataClient);
+  }
+
+  public static createAuthenticatedVideoStreamClient(): VideoStreamClient {
+    return AuthManager.createAuthenticatedClient(VideoStreamClient);
+  }
+
+  public static createAuthenticatedBsdlParserClient(): BsdlParserClient {
+    return AuthManager.createAuthenticatedClient(BsdlParserClient);
+  }
+
+  public static createAuthenticatedDDSClient(): DDSClient {
+    return AuthManager.createAuthenticatedClient(DDSClient);
+  }
+
+  public static createAuthenticatedJtagClient(): JtagClient {
+    return AuthManager.createAuthenticatedClient(JtagClient);
+  }
+
+  public static createAuthenticatedMatrixKeyClient(): MatrixKeyClient {
+    return AuthManager.createAuthenticatedClient(MatrixKeyClient);
+  }
+
+  public static createAuthenticatedPowerClient(): PowerClient {
+    return AuthManager.createAuthenticatedClient(PowerClient);
+  }
+
+  public static createAuthenticatedRemoteUpdateClient(): RemoteUpdateClient {
+    return AuthManager.createAuthenticatedClient(RemoteUpdateClient);
+  }
+
+  public static createAuthenticatedTutorialClient(): TutorialClient {
+    return AuthManager.createAuthenticatedClient(TutorialClient);
+  }
+
+  public static createAuthenticatedUDPClient(): UDPClient {
+    return AuthManager.createAuthenticatedClient(UDPClient);
+  }
+
+  // 登录函数
+  public static async login(
+    username: string,
+    password: string,
+  ): Promise<boolean> {
+    try {
+      const client = new DataClient();
+      const token = await client.login(username, password);
+
+      if (token) {
+        AuthManager.setToken(token);
+
+        // 验证token
+        const authClient = AuthManager.createAuthenticatedDataClient();
+        await authClient.testAuth();
+
+        return true;
+      }
+      return false;
+    } catch (error) {
+      AuthManager.clearToken();
+      throw error;
+    }
+  }
+
+  // 登出函数
+  public static logout(): void {
+    AuthManager.clearToken();
+  }
+
+  // 验证当前token是否有效
+  public static async verifyToken(): Promise<boolean> {
+    try {
+      const token = AuthManager.getToken();
+      if (!token) {
+        return false;
+      }
+
+      const client = AuthManager.createAuthenticatedDataClient();
+      await client.testAuth();
+      return true;
+    } catch (error) {
+      AuthManager.clearToken();
+      return false;
+    }
+  }
+
+  // 验证管理员权限
+  public static async verifyAdminAuth(): Promise<boolean> {
+    try {
+      const token = AuthManager.getToken();
+      if (!token) {
+        return false;
+      }
+
+      const client = AuthManager.createAuthenticatedDataClient();
+      await client.testAdminAuth();
+      return true;
+    } catch (error) {
+      // 只有在token完全无效的情况下才清除token
+      // 401错误表示token有效但权限不足，不应清除token
+      if (
+        error &&
+        typeof error === "object" &&
+        "status" in error
+      ) {
+        // 如果是403 (Forbidden) 或401 (Unauthorized)，说明token有效但权限不足
+        if (error.status === 401 || error.status === 403) {
+          return false;
+        }
+        // 其他状态码可能表示token无效，清除token
+        AuthManager.clearToken();
+      } else {
+        // 网络错误等，不清除token
+        console.error('管理员权限验证失败:', error);
+      }
+      return false;
+    }
+  }
+
+  // 检查客户端是否已配置认证
+  public static isClientAuthenticated(client: SupportedClient): boolean {
+    const token = AuthManager.getToken();
+    return !!token;
+  }
+}

src/utils/BoardManager.ts

@@ -0,0 +1,272 @@
+import { ref } from "vue";
+import { createInjectionState } from "@vueuse/core";
+import { RemoteUpdateClient, DataClient, Board } from "@/APIClient";
+import { Common } from "@/utils/Common";
+import { isUndefined } from "lodash";
+import { AuthManager } from "@/utils/AuthManager";
+
+// 统一的板卡数据接口，扩展原有的Board类型
+export interface BoardData extends Board {
+  defaultBitstream: string;
+  goldBitstreamFile?: File;
+  appBitstream1File?: File;
+  appBitstream2File?: File;
+  appBitstream3File?: File;
+}
+
+const [useProvideBoardManager, useBoardManager] = createInjectionState(() => {
+  // 远程升级相关参数
+  const devPort = 1234;
+  const remoteUpdater = new RemoteUpdateClient();
+
+  // 统一的板卡数据
+  const boards = ref<BoardData[]>([]);
+
+  // 获取位流编号
+  function getSelectedBitstreamNum(bitstreamName: string): number {
+    if (bitstreamName === "黄金位流") return 0;
+    if (bitstreamName === "应用位流1") return 1;
+    if (bitstreamName === "应用位流2") return 2;
+    if (bitstreamName === "应用位流3") return 3;
+    return 0;
+  }
+
+  // 获取所有板卡信息（管理员权限）
+  async function getAllBoards(): Promise<{ success: boolean; error?: string }> {
+    try {
+      // 验证管理员权限
+      const hasAdminAuth = await AuthManager.verifyAdminAuth();
+      if (!hasAdminAuth) {
+        console.error("权限验证失败");
+        return { success: false, error: "权限不足" };
+      }
+
+      const client = AuthManager.createAuthenticatedDataClient();
+      const result = await client.getAllBoards();
+
+      if (result) {
+        // 将Board类型转换为BoardData类型，添加默认值
+        boards.value = result.map((board) => {
+          return {
+            ...board,
+            defaultBitstream: "黄金位流", // 设置默认位流
+            goldBitstreamFile: undefined,
+            appBitstream1File: undefined,
+            appBitstream2File: undefined,
+            appBitstream3File: undefined,
+            // Ensure methods from Board are present
+            init: board.init?.bind(board),
+            toJSON: board.toJSON?.bind(board),
+          };
+        });
+        console.log("获取板卡信息成功", result.length);
+        return { success: true };
+      } else {
+        console.error("获取板卡信息失败：返回结果为空");
+        return { success: false, error: "获取板卡信息失败" };
+      }
+    } catch (e: any) {
+      console.error("获取板卡信息异常:", e);
+      return { success: false, error: e.message || "获取板卡信息异常" };
+    }
+  }
+
+  // 新增板卡（管理员权限）
+  async function addBoard(
+    name: string,
+    ipAddr: string,
+    port: number,
+  ): Promise<{ success: boolean; error?: string; boardId?: string }> {
+    try {
+      // 验证管理员权限
+      const hasAdminAuth = await AuthManager.verifyAdminAuth();
+      if (!hasAdminAuth) {
+        console.error("权限验证失败");
+        return { success: false, error: "权限不足" };
+      }
+
+      // 验证输入参数
+      if (!name || !ipAddr || !port) {
+        console.error("参数验证失败", { name, ipAddr, port });
+        return { success: false, error: "参数不完整" };
+      }
+
+      const client = AuthManager.createAuthenticatedDataClient();
+      const boardId = await client.addBoard(name, ipAddr, port);
+
+      if (boardId) {
+        console.log("新增板卡成功", { boardId, name, ipAddr, port });
+        // 刷新板卡列表
+        await getAllBoards();
+        return { success: true};
+      } else {
+        console.error("新增板卡失败：返回ID为空");
+        return { success: false, error: "新增板卡失败" };
+      }
+    } catch (e: any) {
+      console.error("新增板卡异常:", e);
+      if (e.status === 401) {
+        return { success: false, error: "权限不足" };
+      } else if (e.status === 400) {
+        return { success: false, error: "输入参数错误" };
+      } else {
+        return { success: false, error: e.message || "新增板卡异常" };
+      }
+    }
+  }
+
+  // 删除板卡（管理员权限）
+  async function deleteBoard(boardId: string): Promise<{ success: boolean; error?: string }> {
+    try {
+      // 验证管理员权限
+      const hasAdminAuth = await AuthManager.verifyAdminAuth();
+      if (!hasAdminAuth) {
+        console.error("权限验证失败");
+        return { success: false, error: "权限不足" };
+      }
+
+      if (!boardId) {
+        console.error("板卡ID为空");
+        return { success: false, error: "板卡ID不能为空" };
+      }
+
+      const client = AuthManager.createAuthenticatedDataClient();
+      const result = await client.deleteBoard(boardId);
+
+      if (result > 0) {
+        console.log("删除板卡成功", { boardId, deletedCount: result });
+        // 刷新板卡列表
+        await getAllBoards();
+        return { success: true };
+      } else {
+        console.error("删除板卡失败：影响行数为0");
+        return { success: false, error: "删除板卡失败" };
+      }
+    } catch (e: any) {
+      console.error("删除板卡异常:", e);
+      if (e.status === 401) {
+        return { success: false, error: "权限不足" };
+      } else if (e.status === 400) {
+        return { success: false, error: "输入参数错误" };
+      } else {
+        return { success: false, error: e.message || "删除板卡异常" };
+      }
+    }
+  }
+
+  // 上传并固化位流
+  async function uploadAndDownloadBitstreams(
+    board: BoardData,
+    goldBitstream?: File,
+    appBitstream1?: File,
+    appBitstream2?: File,
+    appBitstream3?: File,
+  ): Promise<{ success: boolean; error?: string }> {
+    let cnt = 0;
+    if (!isUndefined(goldBitstream)) cnt++;
+    if (!isUndefined(appBitstream1)) cnt++;
+    if (!isUndefined(appBitstream2)) cnt++;
+    if (!isUndefined(appBitstream3)) cnt++;
+    
+    if (cnt === 0) {
+      console.error("未选择比特流文件");
+      return { success: false, error: "未选择比特流文件" };
+    }
+
+    try {
+      console.log("开始上传比特流", { boardIp: board.ipAddr, fileCount: cnt });
+      
+      const uploadResult = await remoteUpdater.uploadBitstreams(
+        board.ipAddr,
+        Common.toFileParameterOrNull(goldBitstream),
+        Common.toFileParameterOrNull(appBitstream1),
+        Common.toFileParameterOrNull(appBitstream2),
+        Common.toFileParameterOrNull(appBitstream3),
+      );
+
+      if (!uploadResult) {
+        console.error("上传比特流失败");
+        return { success: false, error: "上传比特流失败" };
+      }
+
+      console.log("比特流上传成功，开始固化");
+
+      const downloadResult = await remoteUpdater.downloadMultiBitstreams(
+        board.ipAddr,
+        board.port,
+        getSelectedBitstreamNum(board.defaultBitstream),
+      );
+
+      if (downloadResult != cnt) {
+        console.error("固化比特流失败", { expected: cnt, actual: downloadResult });
+        return { success: false, error: "固化比特流失败" };
+      } else {
+        console.log("固化比特流成功", { count: downloadResult });
+        return { success: true };
+      }
+    } catch (e: any) {
+      console.error("比特流操作异常:", e);
+      return { success: false, error: e.message || "比特流操作异常" };
+    }
+  }
+
+  // 热启动位流
+  async function hotresetBitstream(
+    board: BoardData, 
+    bitstreamNum: number
+  ): Promise<{ success: boolean; error?: string }> {
+    try {
+      console.log("开始热启动比特流", { boardIp: board.ipAddr, bitstreamNum });
+      
+      const ret = await remoteUpdater.hotResetBitstream(
+        board.ipAddr,
+        board.port,
+        bitstreamNum,
+      );
+      
+      if (ret) {
+        console.log("热启动比特流成功");
+        return { success: true };
+      } else {
+        console.error("热启动比特流失败");
+        return { success: false, error: "热启动比特流失败" };
+      }
+    } catch (e: any) {
+      console.error("热启动比特流异常:", e);
+      return { success: false, error: e.message || "热启动比特流异常" };
+    }
+  }
+
+  // 处理文件上传
+  function handleFileChange(
+    event: Event,
+    board: BoardData,
+    fileKey: keyof Pick<
+      BoardData,
+      | "goldBitstreamFile"
+      | "appBitstream1File"
+      | "appBitstream2File"
+      | "appBitstream3File"
+    >,
+  ) {
+    const target = event.target as HTMLInputElement;
+    const file = target.files?.[0];
+    if (file) {
+      (board as any)[fileKey] = file;
+      console.log(`文件选择成功`, { boardIp: board.ipAddr, fileKey, fileName: file.name });
+    }
+  }
+
+  return {
+    boards,
+    uploadAndDownloadBitstreams,
+    hotresetBitstream,
+    handleFileChange,
+    getSelectedBitstreamNum,
+    getAllBoards,
+    addBoard,
+    deleteBoard,
+  };
+});
+
+export { useProvideBoardManager, useBoardManager };

src/utils/Common.ts

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

src/views/AdminView.vue

@@ -1,253 +0,0 @@
-<template>
-  <div class="bg-base-200 min-h-screen p-6">
-    <div class="flex flex-row justify-between items-center">
-      <h1 class="text-3xl font-bold mb-6">FPGA 设备管理</h1>
-      <button class="btn btn-ghost text-error hover:underline" @click="
-        () => {
-          isEditMode = !isEditMode;
-        }
-      ">
-        编辑
-      </button>
-    </div>
-
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <div class="flex flex-row justify-between items-center">
-          <h2 class="card-title mb-4">IP 地址列表</h2>
-          <button class="btn btn-ghost" @click="">刷新</button>
-        </div>
-
-        <div class="overflow-x-auto">
-          <table class="table w-full">
-            <!-- 表头 -->
-            <thead>
-              <tr class="bg-base-300">
-                <th class="w-50">IP 地址</th>
-                <th class="w-30">版本号</th>
-                <th class="w-50">默认启动位流</th>
-                <th class="w-80">黄金位流</th>
-                <th class="w-80">应用位流1</th>
-                <th class="w-80">应用位流2</th>
-                <th class="w-80">应用位流3</th>
-                <th>操作</th>
-              </tr>
-            </thead>
-
-            <!-- 表格内容 -->
-            <tbody>
-              <tr class="hover">
-                <td class="font-medium">
-                  <input v-if="isEditMode" type="text" placeholder="Type here" class="input m-0" v-model="devAddr" />
-                  <span v-else>{{ devAddr }}</span>
-                </td>
-                <td>v1.2.3</td>
-                <td>
-                  <select class="select select-bordered w-full max-w-xs" v-model="selectBitstream">
-                    <option selected>黄金位流</option>
-                    <option>应用位流1</option>
-                    <option>应用位流2</option>
-                    <option>应用位流3</option>
-                  </select>
-                </td>
-                <!-- 黄金位流上传区 -->
-                <td>
-                  <div class="flex flex-col items-center gap-2">
-                    <input type="file" class="file-input file-input-primary" @change="handleFileChange($event, 0)" />
-                  </div>
-                </td>
-                <!-- 应用位流1上传区 -->
-                <td>
-                  <div class="flex flex-col items-center gap-2">
-                    <input type="file" class="file-input file-input-secondary" @change="handleFileChange($event, 1)" />
-                  </div>
-                </td>
-                <!-- 应用位流2上传区 -->
-                <td>
-                  <div class="flex flex-col items-center gap-2">
-                    <input type="file" class="file-input file-input-accent" @change="handleFileChange($event, 2)" />
-                  </div>
-                </td>
-                <!-- 应用位流3上传区 -->
-                <td>
-                  <div class="flex flex-col items-center gap-2">
-                    <input type="file" class="file-input file-input-info" @change="handleFileChange($event, 3)" />
-                  </div>
-                </td>
-
-                <!-- 操作按钮 -->
-                <td class="flex gap-2">
-                  <button class="btn grow btn-warning" @click="
-                    uploadAndDownloadBitstreams(
-                      devAddr,
-                      goldBitstreamFile,
-                      appBitstream1File,
-                      appBitstream2File,
-                      appBitstream3File,
-                    )
-                    ">
-                    固化
-                  </button>
-                  <button class="btn grow btn-success" @click="
-                    hotresetBitstream(devAddr, getSelectedBitstreamNum())
-                    ">
-                    切换并热启动
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <div class="mt-6 bg-base-300 p-4 rounded-lg">
-          <p class="text-sm opacity-80">
-            <span class="font-semibold text-error">提示：</span>
-            请谨慎操作FPGA固化和热启动功能，确保上传的位流文件无误，以避免设备损坏。
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { isNull, isUndefined } from "lodash";
-import { ref } from "vue";
-import {  RemoteUpdateClient } from "@/APIClient";
-import { useDialogStore } from "@/stores/dialog";
-import { Common } from "@/Common";
-
-const dialog = useDialogStore();
-
-// 编辑状态
-const isEditMode = ref(false);
-
-// 选择热切换的比特流
-const selectBitstream = ref("黄金位流");
-
-// 存储上传文件的信息
-const goldBitstreamFile = ref<File>();
-const appBitstream1File = ref<File>();
-const appBitstream2File = ref<File>();
-const appBitstream3File = ref<File>();
-
-// 远程升级相关参数
-const devAddr = ref("192.168.1.100");
-const devPort = 1234;
-const remoteUpdater = new RemoteUpdateClient();
-
-// 处理文件上传
-function handleFileChange(event: Event, bistreamNum: number) {
-  const target = event.target as HTMLInputElement;
-  const file = target.files?.[0]; // 获取选中的第一个文件
-
-  if (!file) {
-    return;
-  }
-
-  if (bistreamNum === 0) {
-    goldBitstreamFile.value = file;
-  } else if (bistreamNum === 1) {
-    appBitstream1File.value = file;
-  } else if (bistreamNum === 2) {
-    appBitstream2File.value = file;
-  } else if (bistreamNum === 3) {
-    appBitstream3File.value = file;
-  } else {
-    goldBitstreamFile.value = file;
-  }
-}
-
-function getSelectedBitstreamNum(): number {
-  if (selectBitstream.value == "黄金位流") {
-    return 0;
-  } else if (selectBitstream.value == "应用位流1") {
-    return 1;
-  } else if (selectBitstream.value == "应用位流2") {
-    return 2;
-  } else if (selectBitstream.value == "应用位流3") {
-    return 3;
-  }
-  return 0;
-}
-
-async function uploadAndDownloadBitstreams(
-  devAddr: string,
-  goldBitstream?: File,
-  appBitstream1?: File,
-  appBitstream2?: File,
-  appBitstream3?: File,
-) {
-  let cnt = 0;
-  if (!isUndefined(goldBitstream)) cnt++;
-  if (!isUndefined(appBitstream1)) cnt++;
-  if (!isUndefined(appBitstream2)) cnt++;
-  if (!isUndefined(appBitstream3)) cnt++;
-  if (cnt === 0) {
-    dialog.error("未选择比特流");
-    return;
-  }
-
-  try {
-    {
-      const ret = await remoteUpdater.uploadBitstreams(
-        devAddr,
-        Common.toFileParameterOrNull(goldBitstream),
-        Common.toFileParameterOrNull(appBitstream1),
-        Common.toFileParameterOrNull(appBitstream2),
-        Common.toFileParameterOrNull(appBitstream3),
-      );
-      if (!ret) {
-        dialog.warn("上传比特流出错");
-        return;
-      }
-    }
-    {
-      const ret = await remoteUpdater.downloadMultiBitstreams(
-        devAddr,
-        devPort,
-        getSelectedBitstreamNum(),
-      );
-      if (ret != cnt) {
-        dialog.warn("固化比特流出错");
-      } else {
-        dialog.info("固化比特流成功");
-      }
-    }
-  } catch (e) {
-    dialog.error("比特流上传错误");
-    console.error(e);
-  }
-}
-
-async function hotresetBitstream(devAddr: string, bitstreamNum: number) {
-  try {
-    const ret = await remoteUpdater.hotResetBitstream(
-      devAddr,
-      devPort,
-      bitstreamNum,
-    );
-    if (ret) {
-      dialog.info("切换比特流成功");
-    } else {
-      dialog.error("切换比特流失败");
-    }
-  } catch (e) {
-    dialog.error("切换比特流失败");
-    console.error(e);
-  }
-}
-
-async function refreshData() {
-  try {
-    const ret = await remoteUpdater.getFirmwareVersion(devAddr.value, devPort);
-  } catch (e) {
-    dialog.error("获取数据失败");
-    console.error(e);
-  }
-}
-</script>
-
-<style scoped lang="postcss">
-@import "../assets/main.css";
-</style>

src/views/AuthView.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="flex items-center justify-center min-h-screen bg-base-200">
+    <div class="relative w-full max-w-md">
+      <!-- Login Card -->
+      <div v-if="!showSignUp" class="card card-dash h-80 w-100 shadow-xl bg-base-100">
+        <div class="card-body">
+          <h1 class="card-title place-self-center my-3 text-2xl">用户登录</h1>
+          <div class="flex flex-col w-full h-full">
+            <label class="input w-full my-3">
+              <User class="h-[1em] opacity-50" />
+              <input
+                type="text"
+                class="grow"
+                placeholder="用户名"
+                v-model="username"
+                @keyup.enter="handleLogin"
+              />
+            </label>
+            <label class="input w-full my-3">
+              <Lock class="h-[1em] opacity-50" />
+              <input
+                type="password"
+                class="grow"
+                placeholder="密码"
+                v-model="password"
+                @keyup.enter="handleLogin"
+              />
+            </label>
+          </div>
+          <div class="flex justify-end mx-3">
+            <RouterLink to="/">忘记密码?</RouterLink>
+          </div>
+          <div class="card-actions flex items-end my-3">
+            <button class="btn flex-1" @click="handleRegister">注册</button>
+            <button
+              class="btn btn-primary flex-3"
+              @click="handleLogin"
+              :disabled="isLoading"
+            >
+              {{ isLoading ? "登录中..." : "登录" }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sign Up Card -->
+      <div v-if="showSignUp" class="card card-dash h-96 w-100 shadow-xl bg-base-100">
+        <div class="card-body">
+          <h1 class="card-title place-self-center my-3 text-2xl">用户注册</h1>
+          <div class="flex flex-col w-full h-full">
+            <label class="input w-full my-2">
+              <User class="h-[1em] opacity-50" />
+              <input
+                type="text"
+                class="grow"
+                placeholder="用户名"
+                v-model="signUpData.username"
+                @keyup.enter="handleSignUp"
+              />
+            </label>
+            <label class="input w-full my-2">
+              <Mail class="h-[1em] opacity-50" />
+              <input
+                type="email"
+                class="grow"
+                placeholder="邮箱"
+                v-model="signUpData.email"
+                @keyup.enter="handleSignUp"
+              />
+            </label>
+            <label class="input w-full my-2">
+              <Lock class="h-[1em] opacity-50" />
+              <input
+                type="password"
+                class="grow"
+                placeholder="密码"
+                v-model="signUpData.password"
+                @keyup.enter="handleSignUp"
+              />
+            </label>
+          </div>
+          <div class="card-actions flex items-end my-3">
+            <button class="btn flex-1" @click="backToLogin">返回登录</button>
+            <button
+              class="btn btn-primary flex-3"
+              @click="handleSignUp"
+              :disabled="isSignUpLoading"
+            >
+              {{ isSignUpLoading ? "注册中..." : "注册" }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { AuthManager } from "@/utils/AuthManager";
+import { useAlertStore } from "@/components/Alert";
+import { User, Lock, Mail } from "lucide-vue-next";
+import { DataClient } from "@/APIClient";
+
+const router = useRouter();
+
+// 获取Alert store
+const alertStore = useAlertStore();
+
+// 创建API客户端实例
+const dataClient = new DataClient();
+
+// 响应式数据
+const username = ref("");
+const password = ref("");
+const isLoading = ref(false);
+
+// 注册相关数据
+const showSignUp = ref(false);
+const isSignUpLoading = ref(false);
+const signUpData = ref({
+  username: "",
+  email: "",
+  password: ""
+});
+
+// 登录处理函数
+const handleLogin = async () => {
+  // 验证输入
+  if (!username.value.trim()) {
+    alertStore?.show("请输入用户名", "error");
+    return;
+  }
+
+  if (!password.value.trim()) {
+    alertStore?.show("请输入密码", "error");
+    return;
+  }
+
+  isLoading.value = true;
+
+  try {
+    // 调用AuthManager的登录函数
+    await AuthManager.login(username.value.trim(), password.value.trim());
+
+    // 登录成功，显示成功消息并跳转
+    alertStore?.show("登录成功", "success", 1000);
+
+    // 短暂延迟后跳转到project页面
+    setTimeout(async () => {
+      await router.push("/project");
+    }, 1000);
+  } catch (error: any) {
+    console.error("Login error:", error);
+
+    // 处理不同类型的错误
+    let errorMessage = "登录失败，请检查网络连接";
+
+    if (error.status === 400) {
+      errorMessage = "用户名或密码错误";
+    } else if (error.status === 401) {
+      errorMessage = "用户名或密码错误";
+    } else if (error.status === 500) {
+      errorMessage = "服务器错误，请稍后重试";
+    } else if (error.message) {
+      errorMessage = error.message;
+    }
+
+    alertStore?.show(errorMessage, "error");
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 注册处理函数
+const handleRegister = () => {
+  showSignUp.value = true;
+  // 清空注册表单
+  signUpData.value = {
+    username: "",
+    email: "",
+    password: ""
+  };
+};
+
+// 返回登录页面
+const backToLogin = () => {
+  showSignUp.value = false;
+};
+
+// 注册提交处理函数
+const handleSignUp = async () => {
+  // 验证输入
+  if (!signUpData.value.username.trim()) {
+    alertStore?.show("请输入用户名", "error");
+    return;
+  }
+
+  if (!signUpData.value.email.trim()) {
+    alertStore?.show("请输入邮箱", "error");
+    return;
+  }
+
+  // 简单的邮箱格式验证
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(signUpData.value.email.trim())) {
+    alertStore?.show("请输入有效的邮箱地址", "error");
+    return;
+  }
+
+  if (!signUpData.value.password.trim()) {
+    alertStore?.show("请输入密码", "error");
+    return;
+  }
+
+  // 密码长度验证
+  if (signUpData.value.password.length < 6) {
+    alertStore?.show("密码长度至少6位", "error");
+    return;
+  }
+
+  isSignUpLoading.value = true;
+
+  try {
+    // 调用注册API
+    const result = await dataClient.signUpUser(
+      signUpData.value.username.trim(),
+      signUpData.value.email.trim(),
+      signUpData.value.password.trim()
+    );
+
+    if (result) {
+      // 注册成功
+      alertStore?.show("注册成功！请登录", "success", 2000);
+      
+      // 延迟后返回登录页面
+      setTimeout(() => {
+        backToLogin();
+      }, 2000);
+    } else {
+      alertStore?.show("注册失败，请重试", "error");
+    }
+  } catch (error: any) {
+    console.error("Sign up error:", error);
+
+    let errorMessage = "注册失败，请检查网络连接";
+
+    if (error.status === 400) {
+      // 检查是否有详细的错误信息
+      if (error.result && error.result.detail) {
+        errorMessage = error.result.detail;
+      } else {
+        errorMessage = "注册信息无效，请检查输入";
+      }
+    } else if (error.status === 500) {
+      errorMessage = "服务器错误，请稍后重试";
+    } else if (error.message) {
+      errorMessage = error.message;
+    }
+
+    alertStore?.show(errorMessage, "error");
+  } finally {
+    isSignUpLoading.value = false;
+  }
+};
+
+// 页面初始化时检查是否已有有效token
+const checkExistingToken = async () => {
+  try {
+    const isValid = await AuthManager.verifyToken();
+    if (isValid) {
+      // 如果token仍然有效，直接跳转到project页面
+      await router.push("/project");
+    }
+  } catch (error) {
+    // token无效或验证失败，继续显示登录页面
+    console.log("Token verification failed, showing login page");
+  }
+};
+
+// 组件挂载时检查已存在的token
+onMounted(() => {
+  checkExistingToken();
+});
+</script>
+
+<style scoped></style>

src/views/HomeView.vue

@@ -1,19 +1,27 @@
 <template>
   <div class="bg-base-200 min-h-screen">
     <main class="hero min-h-screen bg-base-200">
-      <div class="hero-content flex-col xl:flex-row-reverse gap-8 xl:gap-12 py-10 px-4">        <!-- 例程轮播容器 -->
+      <div
-        <div class="w-full flex justify-center" style="min-width: 650px;">
+        class="hero-content flex-col xl:flex-row-reverse gap-8 xl:gap-12 py-10 px-4"
+      >
+        <!-- 例程轮播容器 -->
+        <div class="w-full flex justify-center" style="min-width: 650px">
           <TutorialCarousel :autoRotationInterval="3000" />
         </div>
         <!-- 内容容器 -->
-        <div class="content-container max-w-md lg:max-w-2xl transform transition-all duration-500 ease-in-out">
+        <div
+          class="content-container max-w-md lg:max-w-2xl transform transition-all duration-500 ease-in-out"
+        >
           <h1 class="text-4xl md:text-5xl font-bold mb-3 relative group">
-            <span class="relative z-10 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+            <span
+              class="relative z-10 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"
+            >
               Welcome to
             </span>
             <span class="text-base-content">FPGA Web Lab!</span>
             <span
-              class="absolute bottom-0 left-0 w-0 h-1 bg-primary transition-all duration-500 ease-in-out group-hover:w-3/4"></span>
+              class="absolute bottom-0 left-0 w-0 h-1 bg-primary transition-all duration-500 ease-in-out group-hover:w-3/4"
+            ></span>
           </h1>
 
           <p class="py-6 text-lg opacity-80 leading-relaxed">
@@ -22,59 +30,17 @@
             designs seamlessly.
           </p>
           <div class="flex flex-wrap gap-4 actions-container">
-            <router-link to="/project"
+            <router-link
-              class="btn btn-primary text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
+              to="/project"
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
+              class="btn btn-primary text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1"
-                stroke="currentColor" stroke-width="2">
+            >
-                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+              <BookOpen class="h-5 w-5 mr-2" />
-                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
-              </svg>
               进入工程界面
             </router-link>
-
-            <router-link to="/login"
-              class="btn btn-secondary text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2">
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-              </svg>
-              登录
-            </router-link>
-
-            <router-link to="/user"
-              class="btn btn-accent text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2">
-                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                <circle cx="12" cy="7" r="4"></circle>
-              </svg>
-              用户中心
-            </router-link>
-            <router-link to="/test"
-              class="btn btn-info text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2">
-                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
-                <polyline points="17 21 17 13 7 13 7 21"></polyline>
-                <polyline points="7 3 7 8 15 8"></polyline>
-              </svg>
-              测试功能
-            </router-link>
-
-            <router-link to="/admin"
-              class="btn btn-error text-base-100 shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl hover:-translate-y-1">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none"
-                stroke="currentColor" stroke-width="2">
-                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5z">
-                </path>
-                <circle cx="12" cy="12" r="3"></circle>
-              </svg>
-              管理控制台
-            </router-link>
           </div>
           <div
-            class="mt-8 p-4 bg-base-300 rounded-lg shadow-inner opacity-80 transition-all duration-300 hover:opacity-100 hover:shadow-md">
+            class="mt-8 p-4 bg-base-300 rounded-lg shadow-inner opacity-80 transition-all duration-300 hover:opacity-100 hover:shadow-md"
+          >
             <p class="text-sm">
               <span class="font-semibold text-primary">提示：</span>
               您可以在工程界面中创建、编辑和测试您的FPGA项目，使用我们简洁直观的界面轻松进行硬件设计。
@@ -89,6 +55,7 @@
 <script lang="ts" setup>
 import "@/router";
 import TutorialCarousel from "@/components/TutorialCarousel.vue";
+import { BookOpen } from "lucide-vue-next";
 </script>
 
 <style scoped lang="postcss">

src/views/LabView.vue

@@ -1,11 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="postcss"></style>

src/views/LoginView.vue

@@ -1,15 +0,0 @@
-<template>
-  <main>
-    <div class="flex items-center justify-center min-h-screen">
-      <div class="relative w-full max-w-md">
-        <LoginCard />
-      </div>
-    </div>
-  </main>
-</template>
-
-<script setup lang="ts">
-import LoginCard from "@/components/LoginCard.vue";
-</script>
-
-<style scoped></style>

src/views/Project/BottomBar.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="h-full flex flex-col gap-7">
+    <div class="tabs tabs-box flex-shrink-0 shadow-xl">
+      <label class="tab">
+        <input
+          type="radio"
+          name="function-bar"
+          id="1"
+          checked
+          @change="handleTabChange"
+        />
+        <TerminalIcon class="icon" />
+        日志终端
+      </label>
+      <label class="tab">
+        <input
+          type="radio"
+          name="function-bar"
+          id="2"
+          @change="handleTabChange"
+        />
+        <VideoIcon class="icon" />
+        HTTP视频流
+      </label>
+      <label class="tab">
+        <input
+          type="radio"
+          name="function-bar"
+          id="3"
+          @change="handleTabChange"
+        />
+        <SquareActivityIcon class="icon" />
+        示波器
+      </label>
+      <!-- 全屏按钮 -->
+      <button
+        class="fullscreen-btn ml-auto btn btn-ghost btn-sm"
+        @click="toggleFullscreen"
+        :title="isFullscreen ? '退出全屏' : '全屏'"
+      >
+        <MaximizeIcon v-if="!isFullscreen" class="icon" />
+        <MinimizeIcon v-else class="icon" />
+      </button>
+    </div>
+    <!-- 主页面 -->
+    <div class="flex-1 overflow-hidden">
+      <div v-if="checkID === 1" class="h-full overflow-y-auto"></div>
+      <div v-else-if="checkID === 2" class="h-full overflow-y-auto">
+        <VideoStreamView />
+      </div>
+      <div v-else-if="checkID === 3" class="h-full overflow-y-auto">
+        <OscilloscopeView />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  VideoIcon,
+  SquareActivityIcon,
+  TerminalIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+} from "lucide-vue-next";
+import VideoStreamView from "@/views/Project/VideoStream.vue";
+import OscilloscopeView from "@/views/Project/Oscilloscope.vue";
+import { isNull, toNumber } from "lodash";
+import { ref, watch } from "vue";
+
+const checkID = ref(1);
+
+// 定义事件
+const emit = defineEmits<{
+  toggleFullscreen: [];
+}>();
+
+// 接收父组件传递的全屏状态
+const props = defineProps<{
+  isFullscreen?: boolean;
+}>();
+
+const isFullscreen = ref(props.isFullscreen || false);
+
+// 监听props变化
+watch(
+  () => props.isFullscreen,
+  (newVal) => {
+    isFullscreen.value = newVal || false;
+  },
+);
+
+function handleTabChange(event: Event) {
+  const target = event.currentTarget as HTMLInputElement;
+  if (isNull(target)) return;
+
+  checkID.value = toNumber(target.id);
+}
+
+function toggleFullscreen() {
+  emit("toggleFullscreen");
+}
+</script>
+
+<style scoped lang="postcss">
+@import "@/assets/main.css";
+
+.icon {
+  @apply h-4 w-4 opacity-70 mr-1.5;
+}
+
+.tabs {
+  @apply relative flex items-center;
+}
+
+.fullscreen-btn {
+  @apply flex items-center justify-center p-2 rounded-lg transition-colors;
+}
+
+.fullscreen-btn .icon {
+  @apply mr-0;
+}
+</style>

src/views/Project/Index.vue

@@ -0,0 +1,408 @@
+<template>
+  <div class="h-screen flex flex-col overflow-hidden">
+    <div class="flex flex-1 overflow-hidden relative">
+      <SplitterGroup
+        id="splitter-group-v"
+        direction="vertical"
+        class="w-full h-full"
+        @layout="handleVerticalSplitterResize"
+      >
+        <!-- 使用 v-show 替代 v-if -->
+        <SplitterPanel 
+          v-show="!isBottomBarFullscreen"
+          id="splitter-group-v-panel-project"
+          :default-size="verticalSplitterSize"
+        >
+          <SplitterGroup
+            id="splitter-group-h"
+            direction="horizontal"
+            class="w-full h-full"
+            @layout="handleHorizontalSplitterResize"
+          >
+            <!-- 左侧图形化区域 -->
+            <SplitterPanel
+              id="splitter-group-h-panel-canvas"
+              :default-size="horizontalSplitterSize"
+              :min-size="30"
+              class="relative bg-base-200 overflow-hidden h-full"
+            >
+              <DiagramCanvas
+                ref="diagramCanvas"
+                :showDocPanel="showDocPanel"
+                @diagram-updated="handleDiagramUpdated"
+                @open-components="openComponentsMenu"
+                @toggle-doc-panel="toggleDocPanel"
+              />
+            </SplitterPanel>
+            <!-- 拖拽分割线 -->
+            <SplitterResizeHandle
+              id="splitter-group-h-resize-handle"
+              class="w-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors"
+            />
+            <!-- 右侧编辑区域 -->
+            <SplitterPanel
+              id="splitter-group-h-panel-properties"
+              :min-size="20"
+              class="bg-base-200 h-full overflow-hidden flex flex-col"
+            >
+              <div class="overflow-y-auto flex-1">
+                <!-- 使用条件渲染显示不同的面板 -->
+                <PropertyPanel
+                  v-show="!showDocPanel"
+                  :componentData="componentManager.selectedComponentData.value"
+                  :componentConfig="
+                    componentManager.selectedComponentConfig.value
+                  "
+                  @updateProp="updateComponentProp"
+                  @updateDirectProp="updateComponentDirectProp"
+                />
+                <div
+                  v-show="showDocPanel"
+                  class="doc-panel overflow-y-auto h-full"
+                >
+                  <MarkdownRenderer :content="documentContent" />
+                </div>
+              </div>
+            </SplitterPanel>
+          </SplitterGroup>
+        </SplitterPanel>
+
+        <!-- 分割线也使用 v-show -->
+        <SplitterResizeHandle
+          v-show="!isBottomBarFullscreen"
+          id="splitter-group-v-resize-handle"
+          class="h-2 bg-base-100 hover:bg-primary hover:opacity-70 transition-colors"
+        />
+
+        <!-- 功能底栏 -->
+        <SplitterPanel
+          id="splitter-group-v-panel-bar"
+          :default-size="isBottomBarFullscreen ? 100 : (100 - verticalSplitterSize)"
+          :min-size="isBottomBarFullscreen ? 100 : 15"
+          class="w-full overflow-hidden px-5 pt-3"
+        >
+          <BottomBar 
+            :isFullscreen="isBottomBarFullscreen"
+            @toggle-fullscreen="handleToggleBottomBarFullscreen"
+          />
+        </SplitterPanel>
+      </SplitterGroup>
+    </div>
+    <!-- 元器件选择组件 -->
+    <ComponentSelector
+      :open="showComponentsMenu"
+      @update:open="showComponentsMenu = $event"
+      @add-component="handleAddComponent"
+      @add-template="handleAddTemplate"
+      @close="showComponentsMenu = false"
+    />
+
+    <!-- 实验板申请对话框 -->
+    <RequestBoardDialog
+      :open="showRequestBoardDialog"
+      @close="handleRequestBoardClose"
+      @success="handleRequestBoardSuccess"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useLocalStorage } from '@vueuse/core'; // 添加VueUse导入
+import { SplitterGroup, SplitterPanel, SplitterResizeHandle } from "reka-ui";
+import DiagramCanvas from "@/components/LabCanvas/DiagramCanvas.vue";
+import ComponentSelector from "@/components/LabCanvas/ComponentSelector.vue";
+import PropertyPanel from "@/components/PropertyPanel.vue";
+import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
+import BottomBar from "@/views/Project/BottomBar.vue";
+import RequestBoardDialog from "@/views/Project/RequestBoardDialog.vue";
+import { useProvideComponentManager } from "@/components/LabCanvas";
+import type { DiagramData } from "@/components/LabCanvas";
+import { useAlertStore } from "@/components/Alert";
+import { AuthManager } from "@/utils/AuthManager";
+import { useEquipments } from "@/stores/equipments";
+import type { Board } from "@/APIClient";
+
+import { useRoute } from "vue-router";
+const route = useRoute();
+const router = useRouter();
+
+// 提供组件管理服务
+const componentManager = useProvideComponentManager();
+
+// 设备管理store
+const equipments = useEquipments();
+
+const alert = useAlertStore();
+
+// --- 使用VueUse保存分栏状态 ---
+// 左右分栏比例（默认60%）
+const horizontalSplitterSize = useLocalStorage('project-horizontal-splitter-size', 60);
+// 上下分栏比例（默认80%）
+const verticalSplitterSize = useLocalStorage('project-vertical-splitter-size', 80);
+// 底栏全屏状态
+const isBottomBarFullscreen = useLocalStorage('project-bottom-bar-fullscreen', false);
+// 文档面板显示状态
+const showDocPanel = useLocalStorage('project-show-doc-panel', false);
+
+function handleToggleBottomBarFullscreen() {
+  isBottomBarFullscreen.value = !isBottomBarFullscreen.value;
+}
+
+// --- 处理分栏大小变化 ---
+function handleHorizontalSplitterResize(sizes: number[]) {
+  if (sizes && sizes.length > 0) {
+    horizontalSplitterSize.value = sizes[0];
+  }
+}
+
+function handleVerticalSplitterResize(sizes: number[]) {
+  if (sizes && sizes.length > 0) {
+    verticalSplitterSize.value = sizes[0];
+  }
+}
+
+// --- 实验板申请对话框 ---
+const showRequestBoardDialog = ref(false);
+
+// --- 文档面板控制 ---
+const documentContent = ref("");
+
+// 切换文档面板和属性面板
+async function toggleDocPanel() {
+  showDocPanel.value = !showDocPanel.value;
+
+  // 如果切换到文档面板，则获取文档内容
+  if (showDocPanel.value) {
+    await loadDocumentContent();
+  }
+}
+
+// 加载文档内容
+async function loadDocumentContent() {
+  try {
+    // 从路由参数中获取教程ID
+    const tutorialId = (route.query.tutorial as string) || "02"; // 默认加载02例程
+
+    // 构建文档路径
+    let docPath = `/doc/${tutorialId}/doc.md`;
+
+    // 检查当前路径是否包含下划线（例如 02_key 格式）
+    // 如果不包含，那么使用更新的命名格式
+    if (!tutorialId.includes("_")) {
+      docPath = `/doc/${tutorialId}/doc.md`;
+    }
+
+    // 获取文档内容
+    const response = await fetch(docPath);
+    if (!response.ok) {
+      throw new Error(`Failed to load document: ${response.status}`);
+    }
+
+    // 更新文档内容，并替换图片路径
+    documentContent.value = (await response.text()).replace(
+      /.\/images/gi,
+      `/doc/${tutorialId}/images`,
+    );
+  } catch (error) {
+    console.error("加载文档失败:", error);
+    documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
+  }
+}
+
+// --- UI 状态管理 ---
+const showComponentsMenu = ref(false);
+const diagramCanvas = ref(null);
+
+function openComponentsMenu() {
+  showComponentsMenu.value = true;
+}
+
+// 处理 ComponentSelector 组件添加元器件事件
+async function handleAddComponent(componentData: {
+  type: string;
+  name: string;
+  props: Record<string, any>;
+}) {
+  await componentManager.addComponent(componentData);
+}
+
+// 处理模板添加事件
+async function handleAddTemplate(templateData: {
+  id: string;
+  name: string;
+  template: any;
+}) {
+  const result = await componentManager.addTemplate(templateData);
+  if (result) {
+    alert?.show(result.message, result.success ? "success" : "error");
+  }
+}
+
+// 处理图表数据更新事件
+function handleDiagramUpdated(data: DiagramData) {
+  console.log("Diagram data updated:", data);
+}
+
+// 更新组件属性的方法 - 委托给componentManager
+function updateComponentProp(
+  componentId: string,
+  propName: string,
+  value: any,
+) {
+  componentManager.updateComponentProp(componentId, propName, value);
+}
+
+// 更新组件的直接属性 - 委托给componentManager
+function updateComponentDirectProp(
+  componentId: string,
+  propName: string,
+  value: any,
+) {
+  componentManager.updateComponentDirectProp(componentId, propName, value);
+}
+
+// --- 实验板管理 ---
+// 检查并初始化用户实验板
+async function checkAndInitializeBoard() {
+  try {
+    const client = AuthManager.createAuthenticatedDataClient();
+    const userInfo = await client.getUserInfo();
+    
+    if (userInfo.boardID && userInfo.boardID.trim() !== '') {
+      // 用户已绑定实验板，获取实验板信息并更新到equipment
+      try {
+        const board = await client.getBoardByID(userInfo.boardID);
+        updateEquipmentFromBoard(board);
+        alert?.show(`实验板 ${board.boardName} 已连接`, "success");
+      } catch (boardError) {
+        console.error('获取实验板信息失败:', boardError);
+        alert?.show("获取实验板信息失败", "error");
+        showRequestBoardDialog.value = true;
+      }
+    } else {
+      // 用户未绑定实验板，显示申请对话框
+      showRequestBoardDialog.value = true;
+    }
+  } catch (error) {
+    console.error('检查用户实验板失败:', error);
+    alert?.show("检查用户信息失败", "error");
+    showRequestBoardDialog.value = true;
+  }
+}
+
+// 根据实验板信息更新equipment store
+function updateEquipmentFromBoard(board: Board) {
+  equipments.setAddr(board.ipAddr);
+  equipments.setPort(board.port);
+  
+  console.log(`实验板信息已更新到equipment store:`, {
+    address: board.ipAddr,
+    port: board.port,
+    boardName: board.boardName,
+    boardId: board.id
+  });
+}
+
+// 处理申请实验板对话框关闭
+function handleRequestBoardClose() {
+  showRequestBoardDialog.value = false;
+  // 如果用户取消申请，可以选择返回上一页或显示警告
+  router.push('/');
+}
+
+// 处理申请实验板成功
+function handleRequestBoardSuccess(board: Board) {
+  showRequestBoardDialog.value = false;
+  updateEquipmentFromBoard(board);
+  alert?.show(`实验板 ${board.boardName} 申请成功！`, "success");
+}
+
+// --- 生命周期钩子 ---
+onMounted(async () => {
+  // 验证用户身份
+  try {
+    const isAuthenticated = await AuthManager.isAuthenticated();
+    if (!isAuthenticated) {
+      // 验证失败，跳转到登录页面
+      router.push('/login');
+      return;
+    }
+  } catch (error) {
+    console.error('身份验证失败:', error);
+    router.push('/login');
+    return;
+  }
+
+  // 检查并初始化用户实验板
+  await checkAndInitializeBoard();
+
+  // 检查是否有例程参数，如果有则自动打开文档面板
+  if (route.query.tutorial) {
+    showDocPanel.value = true;
+    await loadDocumentContent();
+  }
+
+  // 设置画布引用并初始化组件管理器
+  componentManager.setCanvasRef(diagramCanvas.value);
+  await componentManager.initialize();
+});
+</script>
+
+<style scoped lang="postcss">
+/* 样式保持不变 */
+@import "@/assets/main.css";
+
+.animate-slideRight {
+  animation: slideRight 0.3s ease-out forwards;
+}
+
+@keyframes slideRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 确保滚动行为仅在需要时出现 */
+html,
+body {
+  overflow: hidden;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/* 文档面板样式 */
+.doc-panel {
+  padding: 1.5rem;
+  max-width: 100%;
+  margin: 0;
+  background-color: transparent;
+  /* 使用透明背景 */
+  border: none;
+  /* 确保没有边框 */
+}
+
+/* 文档切换按钮样式 */
+.doc-toggle-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 50;
+}
+
+/* Markdown渲染样式调整 */
+:deep(.markdown-content) {
+  padding: 1rem;
+  background-color: hsl(var(--b1));
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+</style>

src/views/Project/Oscilloscope.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="bg-base-100 flex flex-col">
+    <!-- 波形展示 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title">
+          <Activity class="w-5 h-5" />
+          波形显示
+        </h2>
+        <WaveformDisplay :data="generateTestData()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Activity } from "lucide-vue-next";
+import { WaveformDisplay, generateTestData } from "@/components/Oscilloscope";
+import { useEquipments } from "@/stores/equipments";
+
+// 使用全局设备配置
+const equipments = useEquipments();
+</script>

src/views/Project/RequestBoardDialog.vue

@@ -0,0 +1,163 @@
+<template>
+  <div
+    v-if="open"
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+  >
+    <div class="bg-base-100 rounded-lg shadow-xl max-w-md w-full mx-4">
+      <div class="p-6">
+        <h2 class="text-xl font-bold mb-4">申请实验板</h2>
+
+        <div v-if="!loading && !hasBoard" class="space-y-4">
+          <p class="text-base-content">
+            检测到您尚未绑定实验板，请申请一个可用的实验板以继续实验。
+          </p>
+
+          <div class="flex justify-end space-x-2">
+            <button
+              @click="$emit('close')"
+              class="btn btn-ghost"
+              :disabled="requesting"
+            >
+              取消
+            </button>
+            <button
+              @click="requestBoard"
+              class="btn btn-primary"
+              :disabled="requesting"
+            >
+              <span
+                v-if="requesting"
+                class="loading loading-spinner loading-sm"
+              ></span>
+              {{ requesting ? "申请中..." : "申请实验板" }}
+            </button>
+          </div>
+        </div>
+
+        <div v-else-if="loading" class="text-center py-8">
+          <span class="loading loading-spinner loading-lg"></span>
+          <p class="mt-2">检查实验板状态中...</p>
+        </div>
+
+        <div v-else-if="hasBoard" class="space-y-4">
+          <div class="bg-base-200 p-4 rounded">
+            <h3 class="font-semibold mb-2">实验板信息</h3>
+            <div class="space-y-1 text-sm">
+              <p>
+                <span class="font-medium">名称:</span>
+                {{ boardInfo?.boardName }}
+              </p>
+              <p><span class="font-medium">ID:</span> {{ boardInfo?.id }}</p>
+              <p>
+                <span class="font-medium">地址:</span>
+                {{ boardInfo?.ipAddr }}:{{ boardInfo?.port }}
+              </p>
+            </div>
+          </div>
+
+          <div class="flex justify-end">
+            <button
+              v-if="boardInfo"
+              @click="$emit('success', boardInfo)"
+              class="btn btn-primary"
+            >
+              开始实验
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { CheckCircle } from "lucide-vue-next";
+import { AuthManager } from "@/utils/AuthManager";
+import { useAlertStore } from "@/components/Alert";
+import type { Board } from "@/APIClient";
+
+interface Props {
+  open: boolean;
+}
+
+interface Emits {
+  (e: "close"): void;
+  (e: "success", board: Board): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const alert = useAlertStore();
+
+const loading = ref(false);
+const requesting = ref(false);
+const hasBoard = ref(false);
+const boardInfo = ref<Board | null>(null);
+
+// 监听对话框打开状态，自动检查用户信息
+watch(
+  () => props.open,
+  async (newOpen) => {
+    if (newOpen) {
+      await checkUserBoard();
+    }
+  },
+);
+
+// 检查用户是否已绑定实验板
+async function checkUserBoard() {
+  loading.value = true;
+  hasBoard.value = false;
+  boardInfo.value = null;
+
+  try {
+    const client = AuthManager.createAuthenticatedDataClient();
+    const userInfo = await client.getUserInfo();
+
+    if (userInfo.boardID && userInfo.boardID.trim() !== "") {
+      // 用户已绑定实验板，获取实验板信息
+      try {
+        const board = await client.getBoardByID(userInfo.boardID);
+        boardInfo.value = board;
+        hasBoard.value = true;
+      } catch (boardError) {
+        console.error("获取实验板信息失败:", boardError);
+        alert?.error("获取实验板信息失败，请重试");
+      }
+    }
+  } catch (err) {
+    console.error("检查用户信息失败:", err);
+    alert?.error("检查用户信息失败，请重试");
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 申请实验板
+async function requestBoard() {
+  requesting.value = true;
+
+  try {
+    const client = AuthManager.createAuthenticatedDataClient();
+    const board = await client.getAvailableBoard(undefined);
+
+    if (board) {
+      boardInfo.value = board;
+      hasBoard.value = true;
+    } else {
+      alert?.error("当前没有可用的实验板，请稍后重试");
+    }
+  } catch (err: any) {
+    console.error("申请实验板失败:", err);
+    if (err.status === 404) {
+      alert?.error("当前没有可用的实验板，请稍后重试");
+    } else {
+      alert?.error("申请实验板失败，请重试");
+    }
+  } finally {
+    requesting.value = false;
+  }
+}
+</script>

src/views/Project/VideoStream.vue

@@ -0,0 +1,604 @@
+<template>
+  <div class="bg-base-100 flex flex-col gap-7">
+    <!-- 控制面板 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title text-primary">
+          <Settings class="w-6 h-6" />
+          控制面板
+        </h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <!-- 服务状态 -->
+          <div class="stats shadow">
+            <div class="stat bg-base-100">
+              <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 bg-base-100">
+              <div class="stat-figure text-secondary">
+                <Video class="w-8 h-8" />
+              </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 bg-base-100 relative">
+              <div class="stat-figure text-accent">
+                <Users class="w-8 h-8" />
+              </div>
+              <div class="stat-title">连接数</div>
+              <div class="stat-value text-accent">
+                {{ statusInfo.connectedClients }}
+              </div>
+              <div class="stat-desc">
+                <div class="dropdown dropdown-hover dropdown-top">
+                  <div
+                    tabindex="0"
+                    role="button"
+                    class="text-xs underline cursor-help"
+                  >
+                    查看客户端
+                  </div>
+                  <ul
+                    tabindex="0"
+                    class="dropdown-content z-20 menu p-2 shadow bg-base-200 rounded-box w-64 max-h-48 overflow-y-auto"
+                  >
+                    <li
+                      v-for="(client, index) in statusInfo.clientEndpoints"
+                      :key="index"
+                      class="text-xs"
+                    >
+                      <a class="break-all">{{ 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="configCamera"
+            :dsiabled="configing"
+          >
+            <RefreshCw v-if="configing" class="animate-spin h-4 w-4 mr-2" />
+            <CogIcon v-else class="h-4 w-4 mr-2" />
+            {{ configing ? "配置中..." : "配置摄像头" }}
+          </button>
+          <button
+            class="btn btn-outline btn-primary"
+            @click="refreshStatus"
+            :disabled="loading"
+          >
+            <RefreshCw v-if="loading" class="animate-spin h-4 w-4 mr-2" />
+            <RefreshCw v-else class="h-4 w-4 mr-2" />
+            {{ loading ? "刷新中..." : "刷新状态" }}
+          </button>
+          <button
+            class="btn btn-primary"
+            @click="testConnection"
+            :disabled="testing"
+          >
+            <RefreshCw v-if="testing" class="animate-spin h-4 w-4 mr-2" />
+            <TestTube v-else class="h-4 w-4 mr-2" />
+            {{ testing ? "测试中..." : "测试连接" }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 视频预览区域 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title text-primary">
+          <Video class="w-6 h-6" />
+          视频预览
+        </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">
+                  <AlertTriangle class="h-6 w-6" />
+                  视频流加载失败
+                </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">
+              <Video class="w-16 h-16 mx-auto mb-4 opacity-50" />
+              <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"
+              >
+                <MoreHorizontal class="w-4 h-4 mr-1" />
+                更多功能
+              </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)">
+                    <ExternalLink class="w-4 h-4" />
+                    在新标签打开视频页面
+                  </a>
+                </li>
+                <li>
+                  <a @click="takeSnapshot">
+                    <Camera class="w-4 h-4" />
+                    获取并下载快照
+                  </a>
+                </li>
+                <li>
+                  <a @click="copyToClipboard(streamInfo.mjpegUrl)">
+                    <Copy class="w-4 h-4" />
+                    复制MJPEG地址
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <button
+              class="btn btn-success btn-sm"
+              @click="startStream"
+              :disabled="isPlaying"
+            >
+              <Play class="w-4 h-4 mr-1" />
+              播放视频流
+            </button>
+            <button
+              class="btn btn-error btn-sm"
+              @click="stopStream"
+              :disabled="!isPlaying"
+            >
+              <Square class="w-4 h-4 mr-1" />
+              停止视频流
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 日志区域 -->
+    <div class="card bg-base-200 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title text-primary">
+          <FileText class="w-6 h-6" />
+          操作日志
+        </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>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import {
+  CogIcon,
+  Settings,
+  Video,
+  Users,
+  RefreshCw,
+  TestTube,
+  Play,
+  Square,
+  ExternalLink,
+  Camera,
+  Copy,
+  FileText,
+  AlertTriangle,
+  MoreHorizontal,
+} from "lucide-vue-next";
+import { VideoStreamClient, CameraConfigRequest } from "@/APIClient";
+import { useEquipments } from "@/stores/equipments";
+
+const eqps = useEquipments();
+
+// 状态管理
+const loading = ref(false);
+const configing = 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);
+  }
+};
+
+async function configCamera() {
+  configing.value = true;
+  try {
+    addLog("info", "正在配置并初始化摄像头...");
+    const boardconfig = new CameraConfigRequest({
+      address: eqps.boardAddr,
+      port: eqps.boardPort,
+    });
+    await videoClient.configureCamera(boardconfig);
+
+    const status = await videoClient.getCameraConfig();
+    if (status.isConfigured) {
+      addLog("success", "摄像头已配置并初始化");
+    } else {
+      addLog("error", "摄像头配置失败，请检查地址和端口");
+    }
+  } catch (error) {
+    addLog("error", `摄像头配置失败: ${error}`);
+    console.error("摄像头配置失败:", error);
+  } finally {
+    configing.value = false;
+  }
+}
+
+// 刷新状态
+const refreshStatus = async () => {
+  loading.value = true;
+  try {
+    addLog("info", "正在获取服务状态...");
+
+    // 使用新的API方法名称
+    const status = await videoClient.getStatus();
+    statusInfo.value = status;
+
+    const info = await videoClient.getStreamInfo();
+    streamInfo.value = info;
+
+    addLog("success", "服务状态获取成功");
+  } catch (error) {
+    addLog("error", `获取状态失败: ${error}`);
+    console.error("获取状态失败:", error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 测试连接
+const testConnection = async () => {
+  testing.value = true;
+  try {
+    addLog("info", "正在测试视频流连接...");
+
+    const result = await videoClient.testConnection();
+
+    if (result) {
+      addLog("success", "视频流连接测试成功");
+    } else {
+      addLog("error", "视频流连接测试失败");
+    }
+  } catch (error) {
+    addLog("error", `连接测试失败: ${error}`);
+    console.error("连接测试失败:", error);
+  } finally {
+    testing.value = false;
+  }
+};
+
+// 视频错误处理
+const handleVideoError = () => {
+  if (isPlaying.value) {
+    hasVideoError.value = true;
+    addLog("error", "视频流加载失败");
+  }
+};
+
+// 视频加载成功处理
+const handleVideoLoad = () => {
+  hasVideoError.value = false;
+  addLog("success", "视频流加载成功");
+};
+
+// 尝试重新连接
+const tryReconnect = () => {
+  addLog("info", "尝试重新连接视频流...");
+  hasVideoError.value = false;
+
+  // 重新设置视频源，添加时间戳避免缓存问题
+  currentVideoSource.value = `${streamInfo.value.mjpegUrl}?t=${new Date().getTime()}`;
+};
+
+// 启动视频流
+const startStream = async () => {
+  try {
+    addLog("info", "正在启动视频流...");
+    videoStatus.value = "正在连接视频流...";
+    videoClient.setEnabled(true);
+
+    // 刷新状态
+    await refreshStatus();
+
+    // 设置视频源
+    currentVideoSource.value = streamInfo.value.mjpegUrl;
+
+    // 设置播放状态
+    isPlaying.value = true;
+    hasVideoError.value = false;
+
+    addLog("success", "视频流已启动");
+  } catch (error) {
+    addLog("error", `启动视频流失败: ${error}`);
+    videoStatus.value = "启动视频流失败";
+    console.error("启动视频流失败:", error);
+  }
+};
+
+// 停止视频流
+const stopStream = () => {
+  try {
+    addLog("info", "正在停止视频流...");
+    videoClient.setEnabled(false);
+
+    // 清除视频源
+    currentVideoSource.value = "";
+
+    // 更新状态
+    isPlaying.value = false;
+    hasVideoError.value = false;
+    videoStatus.value = '点击"播放视频流"按钮开始查看实时视频';
+
+    addLog("success", "视频流已停止");
+  } catch (error) {
+    addLog("error", `停止视频流失败: ${error}`);
+    console.error("停止视频流失败:", error);
+  }
+};
+
+// 生命周期
+onMounted(async () => {
+  addLog("info", "HTTP 视频流页面已加载");
+  await 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>

src/views/ProjectView.vue

@@ -1,843 +0,0 @@
-<template>
-  <div class="h-screen flex flex-col overflow-hidden">
-    <div class="flex flex-1 overflow-hidden relative">
-      <!-- 左侧图形化区域 -->
-      <div class="relative bg-base-200 overflow-hidden h-full" :style="{ width: leftPanelWidth + '%' }">
-        <DiagramCanvas ref="diagramCanvas" :componentModules="componentModules" :showDocPanel="showDocPanel"
-          @component-selected="handleComponentSelected" @component-moved="handleComponentMoved"
-          @component-delete="handleComponentDelete" @wire-created="handleWireCreated" @wire-deleted="handleWireDeleted"
-          @diagram-updated="handleDiagramUpdated" @open-components="openComponentsMenu"
-          @load-component-module="handleLoadComponentModule" @toggle-doc-panel="toggleDocPanel" />
-      </div>
-
-      <!-- 拖拽分割线 -->
-      <div
-        class="resizer bg-base-100 hover:bg-primary hover:opacity-70 active:bg-primary active:opacity-90 transition-colors"
-        @mousedown="startResize"></div>
-      <!-- 右侧编辑区域 -->
-      <div class="bg-base-200 h-full overflow-hidden flex flex-col" :style="{ width: 100 - leftPanelWidth + '%' }">
-        <div class="overflow-y-auto flex-1">
-          <!-- 使用条件渲染显示不同的面板 -->
-          <PropertyPanel v-show="!showDocPanel" :componentData="selectedComponentData"
-            :componentConfig="selectedComponentConfig" @updateProp="updateComponentProp"
-            @updateDirectProp="updateComponentDirectProp" />
-          <div v-show="showDocPanel" class="doc-panel overflow-y-auto h-full">
-            <MarkdownRenderer :content="documentContent" />
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 元器件选择组件 -->
-    <ComponentSelector :open="showComponentsMenu" @update:open="showComponentsMenu = $event"
-      @add-component="handleAddComponent" @add-template="handleAddTemplate" @close="showComponentsMenu = false" />
-  </div>
-</template>
-
-<script setup lang="ts">
-// 引入wokwi-elements和组件
-// import "@wokwi/elements"; // 不再需要全局引入 wokwi
-import { ref, computed, onMounted, onUnmounted, shallowRef } from "vue"; // 引入 defineAsyncComponent 和 shallowRef
-import DiagramCanvas from "@/components/DiagramCanvas.vue";
-import ComponentSelector from "@/components/ComponentSelector.vue";
-import PropertyPanel from "@/components/PropertyPanel.vue";
-import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
-import type { DiagramData, DiagramPart } from "@/components/diagramManager";
-import {
-  type PropertyConfig,
-  generatePropertyConfigs,
-  generatePropsFromDefault,
-  generatePropsFromAttrs,
-} from "@/components/equipments/componentConfig"; // 引入组件配置工具
-
-// --- 文档面板控制 ---
-const showDocPanel = ref(false);
-const documentContent = ref("");
-
-// 获取路由参数
-import { useRoute } from "vue-router";
-const route = useRoute();
-
-// 切换文档面板和属性面板
-async function toggleDocPanel() {
-  showDocPanel.value = !showDocPanel.value;
-
-  // 如果切换到文档面板，则获取文档内容
-  if (showDocPanel.value) {
-    await loadDocumentContent();
-  }
-}
-
-// 加载文档内容
-async function loadDocumentContent() {
-  try {
-    // 从路由参数中获取教程ID
-    const tutorialId = (route.query.tutorial as string) || "02"; // 默认加载02例程
-
-    // 构建文档路径
-    let docPath = `/doc/${tutorialId}/doc.md`;
-
-    // 检查当前路径是否包含下划线（例如 02_key 格式）
-    // 如果不包含，那么使用更新的命名格式
-    if (!tutorialId.includes("_")) {
-      docPath = `/doc/${tutorialId}/doc.md`;
-    }
-
-    // 获取文档内容
-    const response = await fetch(docPath);
-    if (!response.ok) {
-      throw new Error(`Failed to load document: ${response.status}`);
-    }
-
-    // 更新文档内容，并替换图片路径
-    documentContent.value = (await response.text()).replace(
-      /.\/images/gi,
-      `/doc/${tutorialId}/images`,
-    );
-  } catch (error) {
-    console.error("加载文档失败:", error);
-    documentContent.value = "# 文档加载失败\n\n无法加载请求的文档。";
-  }
-}
-
-// 检查是否有例程参数，如果有则自动打开文档面板
-onMounted(async () => {
-  if (route.query.tutorial) {
-    showDocPanel.value = true;
-    await loadDocumentContent();
-  }
-});
-
-// --- 元器件管理 ---
-const showComponentsMenu = ref(false);
-const diagramData = ref<DiagramData>({
-  version: 1,
-  author: "admin",
-  editor: "me",
-  parts: [],
-  connections: [],
-});
-
-const selectedComponentId = ref<string | null>(null);
-const selectedComponentData = computed(() => {
-  return (
-    diagramData.value.parts.find((p) => p.id === selectedComponentId.value) ||
-    null
-  );
-});
-const diagramCanvas = ref(null);
-
-// 存储动态导入的组件模块
-interface ComponentModule {
-  default: any;
-  getDefaultProps?: () => Record<string, any>;
-  config?: {
-    props?: Array<PropertyConfig>;
-  };
-}
-
-const componentModules = shallowRef<Record<string, ComponentModule>>({});
-const selectedComponentConfig = shallowRef<{ props: PropertyConfig[] } | null>(
-  null,
-); // 存储选中组件的配置
-
-// 动态加载组件定义
-async function loadComponentModule(type: string) {
-  if (!componentModules.value[type]) {
-    try {
-      // 假设组件都在 src/components/equipments/ 目录下，且文件名与 type 相同
-      const module = await import(`../components/equipments/${type}.vue`);
-
-      // 使用 markRaw 包装模块，避免不必要的响应式处理
-      componentModules.value = {
-        ...componentModules.value,
-        [type]: module,
-      };
-
-      // console.log(`Loaded module for ${type}:`, module);
-    } catch (error) {
-      console.error(`Failed to load component module ${type}:`, error);
-      return null;
-    }
-  }
-  return componentModules.value[type];
-}
-
-// 处理组件模块加载请求
-async function handleLoadComponentModule(type: string) {
-  // console.log("Handling load component module request for:", type);
-  await loadComponentModule(type);
-}
-
-// --- 分割面板 ---
-const leftPanelWidth = ref(60);
-const isResizing = ref(false);
-
-// 分割面板拖拽相关函数
-function startResize(e: MouseEvent) {
-  isResizing.value = true;
-  document.addEventListener("mousemove", onResize);
-  document.addEventListener("mouseup", stopResize);
-  e.preventDefault(); // 防止文本选择
-}
-
-function onResize(e: MouseEvent) {
-  if (!isResizing.value) return;
-
-  // 获取容器宽度和鼠标位置
-  const container = document.querySelector(
-    ".flex-1.overflow-hidden",
-  ) as HTMLElement;
-  if (!container) return;
-
-  const containerWidth = container.clientWidth;
-  const mouseX = e.clientX;
-
-  // 计算左侧面板应占的百分比
-  let newWidth = (mouseX / containerWidth) * 100;
-
-  // 限制最小宽度和最大宽度
-  newWidth = Math.max(20, Math.min(newWidth, 80));
-
-  // 更新宽度
-  leftPanelWidth.value = newWidth;
-}
-
-function stopResize() {
-  isResizing.value = false;
-  document.removeEventListener("mousemove", onResize);
-  document.removeEventListener("mouseup", stopResize);
-}
-
-// --- 元器件操作 ---
-function openComponentsMenu() {
-  showComponentsMenu.value = true;
-}
-
-// 处理 ComponentSelector 组件添加元器件事件
-async function handleAddComponent(componentData: {
-  type: string;
-  name: string;
-  props: Record<string, any>;
-}) {
-  // 加载组件模块以便后续使用
-  const componentModule = await loadComponentModule(componentData.type);
-
-  // 获取画布容器和位置信息
-  const canvasInstance = diagramCanvas.value as any;
-
-  // 获取当前画布的位置信息
-  let position = { x: 100, y: 100 };
-  let scale = 1;
-
-  try {
-    if (
-      canvasInstance &&
-      canvasInstance.getCanvasPosition &&
-      canvasInstance.getScale
-    ) {
-      position = canvasInstance.getCanvasPosition();
-      scale = canvasInstance.getScale();
-
-      // 获取画布容器
-      const canvasContainer = canvasInstance.$el as HTMLElement;
-      if (canvasContainer) {
-        // 计算可视区域中心点在画布坐标系中的位置
-        const viewportWidth = canvasContainer.clientWidth;
-        const viewportHeight = canvasContainer.clientHeight;
-
-        // 计算画布中心点的坐标
-        position.x = (viewportWidth / 2 - position.x) / scale;
-        position.y = (viewportHeight / 2 - position.y) / scale;
-      }
-    }
-  } catch (error) {
-    console.error("获取画布位置时出错:", error);
-  }
-
-  // 添加一些随机偏移，避免元器件重叠
-  const offsetX = Math.floor(Math.random() * 100) - 50;
-  const offsetY = Math.floor(Math.random() * 100) - 50;
-
-  // 获取组件的能力页面
-  let capsPage = null;
-  if (
-    componentModule &&
-    componentModule.default &&
-    typeof componentModule.default.getCapabilities === "function"
-  ) {
-    try {
-      capsPage = componentModule.default.getCapabilities();
-      // console.log(`获取到${componentData.type}组件的能力页面`);
-    } catch (error) {
-      // console.error(`获取${componentData.type}组件能力页面失败:`, error);
-    }
-  }
-
-  // 创建新组件，使用diagramManager接口定义
-  const newComponent: DiagramPart = {
-    id: `component-${Date.now()}`,
-    type: componentData.type,
-    x: Math.round(position.x + offsetX),
-    y: Math.round(position.y + offsetY),
-    attrs: componentData.props,
-    rotate: 0,
-    group: "",
-    positionlock: false,
-    hidepins: true,
-    isOn: true,
-    index: 0,
-  };
-
-  console.log("添加新组件:", newComponent);
-  // 通过画布实例添加组件
-  if (
-    canvasInstance &&
-    canvasInstance.getDiagramData &&
-    canvasInstance.updateDiagramDataDirectly
-  ) {
-    const currentData = canvasInstance.getDiagramData();
-    currentData.parts.push(newComponent);
-    canvasInstance.updateDiagramDataDirectly(currentData);
-  }
-}
-
-// 处理模板添加事件
-async function handleAddTemplate(templateData: {
-  id: string;
-  name: string;
-  template: any;
-}) {
-  console.log("添加模板:", templateData);
-  console.log("=== 模板组件数量:", templateData.template?.parts?.length || 0);
-  // 获取画布实例
-  const canvasInstance = diagramCanvas.value as any;
-  if (
-    !canvasInstance ||
-    !canvasInstance.getDiagramData ||
-    !canvasInstance.updateDiagramDataDirectly
-  ) {
-    console.error("没有可用的画布实例添加模板");
-    return;
-  }
-
-  // 获取当前图表数据
-  const currentData = canvasInstance.getDiagramData();
-  console.log("=== 当前图表组件数量:", currentData.parts.length);
-
-  // 生成唯一ID前缀，以确保添加的组件ID不重复
-  const idPrefix = `template-${Date.now()}-`;
-  // 处理模板组件并添加到图表
-  if (templateData.template && templateData.template.parts) {
-    // 获取当前视口中心位置
-    let viewportCenter = { x: 300, y: 200 }; // 默认值
-    try {
-      if (
-        canvasInstance &&
-        canvasInstance.getCanvasPosition &&
-        canvasInstance.getScale
-      ) {
-        const position = canvasInstance.getCanvasPosition();
-        const scale = canvasInstance.getScale();
-
-        // 获取画布容器
-        const canvasContainer = canvasInstance.$el as HTMLElement;
-        if (canvasContainer) {
-          // 计算可视区域中心点在画布坐标系中的位置
-          const viewportWidth = canvasContainer.clientWidth;
-          const viewportHeight = canvasContainer.clientHeight;
-
-          // 计算视口中心点的坐标 (与handleAddComponent函数中的方法相同)
-          viewportCenter.x = (viewportWidth / 2 - position.x) / scale;
-          viewportCenter.y = (viewportHeight / 2 - position.y) / scale;
-          // console.log(
-          //   `=== 计算的视口中心: x=${viewportCenter.x}, y=${viewportCenter.y}, scale=${scale}`,
-          // );
-        }
-      }
-    } catch (error) {
-      console.error("获取视口中心位置时出错:", error);
-    }
-
-    // console.log("=== 使用视口中心添加模板组件:", viewportCenter);
-
-    // 找到模板中的主要组件（假设是第一个组件）
-    const mainPart = templateData.template.parts[0];
-
-    // 创建带有新位置的组件
-    const newParts = await Promise.all(
-      templateData.template.parts.map(async (part: any) => {
-        // 创建组件副本并分配新ID
-        const newPart = JSON.parse(JSON.stringify(part));
-        newPart.id = `${idPrefix}${part.id}`;
-
-        // 尝试加载组件模块并获取能力页面
-        try {
-          const componentModule = await loadComponentModule(part.type);
-          if (
-            componentModule &&
-            componentModule.default &&
-            typeof componentModule.default.getCapabilities === "function"
-          ) {
-            newPart.capsPage = componentModule.default.getCapabilities();
-            console.log(`加载模板组件${part.type}组件的能力页面成功`);
-          }
-        } catch (error) {
-          console.error(`加载模板组件${part.type}的能力页面失败:`, error);
-        }
-
-        // 计算相对于主要组件的偏移量，保持模板内部组件的相对位置关系
-        if (typeof newPart.x === "number" && typeof newPart.y === "number") {
-          const oldX = newPart.x;
-          const oldY = newPart.y;
-
-          // 计算相对位置（相对于主要组件）
-          const relativeX = part.x - mainPart.x;
-          const relativeY = part.y - mainPart.y;
-
-          // 应用到视口中心位置
-          newPart.x = viewportCenter.x + relativeX;
-          newPart.y = viewportCenter.y + relativeY;
-
-          // console.log(
-          //   `=== 组件[${newPart.id}]位置调整: (${oldX},${oldY}) -> (${newPart.x},${newPart.y})`,
-          // );
-        }
-
-        return newPart;
-      }),
-    );
-
-    // 向图表添加新组件
-    currentData.parts.push(...newParts);
-
-    // 处理连接关系
-    if (templateData.template.connections) {
-      // 创建一个映射表用于转换旧组件ID到新组件ID
-      const idMap: Record<string, string> = {};
-      templateData.template.parts.forEach((part: any) => {
-        idMap[part.id] = `${idPrefix}${part.id}`;
-      });
-
-      // 添加连接，更新组件ID引用
-      const newConnections = templateData.template.connections.map(
-        (conn: any) => {
-          // 处理连接数据 (格式为 [from, to, type, path])
-          if (Array.isArray(conn)) {
-            const [from, to, type, path] = conn;
-
-            // 从连接字符串中提取组件ID和引脚ID
-            const fromParts = from.split(":");
-            const toParts = to.split(":");
-
-            if (fromParts.length === 2 && toParts.length === 2) {
-              const fromComponentId = fromParts[0];
-              const fromPinId = fromParts[1];
-              const toComponentId = toParts[0];
-              const toPinId = toParts[1];
-
-              // 创建新的连接字符串，使用新的组件ID
-              const newFrom = `${idMap[fromComponentId] || fromComponentId}:${fromPinId}`;
-              const newTo = `${idMap[toComponentId] || toComponentId}:${toPinId}`;
-
-              return [newFrom, newTo, type, path];
-            }
-          }
-          return conn; // 如果格式不匹配，保持原样
-        },
-      );
-
-      // 添加到当前连接列表
-      currentData.connections.push(...newConnections);
-    }
-    // 更新图表数据
-    canvasInstance.updateDiagramDataDirectly(currentData);
-    console.log("=== 更新图表数据完成，新组件数量:", currentData.parts.length);
-
-    // 显示成功消息
-    showToast(`已添加 ${templateData.name} 模板`, "success");
-  } else {
-    console.error("模板格式错误，缺少parts数组");
-    showToast("模板格式错误", "error");
-  }
-}
-
-// 处理组件选中事件
-async function handleComponentSelected(componentData: DiagramPart | null) {
-  selectedComponentId.value = componentData ? componentData.id : null;
-  selectedComponentConfig.value = null; // 重置配置
-
-  if (componentData) {
-    // 先加载组件模块
-    const moduleRef = await loadComponentModule(componentData.type);
-
-    if (moduleRef) {
-      try {
-        // 创建属性配置数组
-        const propConfigs: PropertyConfig[] = [];
-
-        // 创建一个映射来跟踪已添加的属性名
-        const addedProps = new Set<string>();
-
-        // 1. 首先从getDefaultProps方法获取默认配置
-        if (typeof moduleRef.getDefaultProps === "function") {
-          const defaultProps = moduleRef.getDefaultProps();
-          const defaultPropConfigs = generatePropsFromDefault(defaultProps);
-
-          // 添加默认配置并记录属性名
-          defaultPropConfigs.forEach((config) => {
-            propConfigs.push(config);
-            addedProps.add(config.name);
-          });
-        }
-
-        // 2. 添加组件直接属性，这些属性会覆盖默认配置
-        const directPropConfigs = generatePropertyConfigs(componentData);
-
-        // 过滤掉已经添加过的属性名
-        const newDirectProps = directPropConfigs.filter(
-          (config) => !addedProps.has(config.name),
-        );
-        propConfigs.push(...newDirectProps);
-
-        // 3. 最后添加attrs中的属性
-        if (componentData.attrs) {
-          const attrs = componentData.attrs;
-          const attrPropConfigs = generatePropsFromAttrs(attrs);
-
-          // 更新已存在的属性值，或添加新属性
-          attrPropConfigs.forEach((attrConfig) => {
-            const existingIndex = propConfigs.findIndex(
-              (p) => p.name === attrConfig.name,
-            );
-            if (existingIndex >= 0) {
-              // 更新已存在的属性值
-              propConfigs[existingIndex] = attrConfig;
-            } else {
-              // 添加新属性
-              propConfigs.push(attrConfig);
-            }
-          });
-        }
-
-        selectedComponentConfig.value = { props: propConfigs };
-        console.log(
-          `Built config for ${componentData.type}:`,
-          selectedComponentConfig.value,
-        );
-      } catch (error) {
-        console.error(
-          `Error building config for ${componentData.type}:`,
-          error,
-        );
-        selectedComponentConfig.value = { props: [] };
-      }
-    } else {
-      console.warn(`Module for component ${componentData.type} not found.`);
-      selectedComponentConfig.value = { props: [] };
-    }
-  }
-}
-
-// 处理图表数据更新事件
-function handleDiagramUpdated(data: DiagramData) {
-  diagramData.value = data;
-}
-
-// 处理组件移动事件
-function handleComponentMoved(moveData: { id: string; x: number; y: number }) {
-  const part = diagramData.value.parts.find((p) => p.id === moveData.id);
-  if (part) {
-    part.x = moveData.x;
-    part.y = moveData.y;
-  }
-}
-
-// 处理组件删除事件
-function handleComponentDelete(componentId: string) {
-  // 查找要删除的组件
-  const component = diagramData.value.parts.find((p) => p.id === componentId);
-  if (!component) return;
-
-  // 收集需要删除的组件ID列表（包括当前组件和同组组件）
-  const componentsToDelete: string[] = [componentId];
-
-  // 如果组件属于一个组，则找出所有同组的组件
-  if (component.group && component.group !== "") {
-    const groupMembers = diagramData.value.parts.filter(
-      (p) => p.group === component.group && p.id !== componentId,
-    );
-
-    // 将同组组件ID添加到删除列表
-    componentsToDelete.push(...groupMembers.map((p) => p.id));
-    console.log(
-      `删除组件 ${componentId} 及其组 ${component.group} 中的 ${groupMembers.length} 个组件`,
-    );
-  }
-
-  // 删除所有标记的组件
-  diagramData.value.parts = diagramData.value.parts.filter(
-    (p) => !componentsToDelete.includes(p.id),
-  );
-
-  // 同时删除与这些组件相关的所有连接
-  diagramData.value.connections = diagramData.value.connections.filter(
-    (connection) => {
-      for (const id of componentsToDelete) {
-        if (
-          connection[0].startsWith(`${id}:`) ||
-          connection[1].startsWith(`${id}:`)
-        ) {
-          return false;
-        }
-      }
-      return true;
-    },
-  );
-
-  // 如果删除的是当前选中的组件，清除选中状态
-  if (
-    selectedComponentId.value &&
-    componentsToDelete.includes(selectedComponentId.value)
-  ) {
-    selectedComponentId.value = null;
-    selectedComponentConfig.value = null;
-  }
-}
-
-// 更新组件属性的方法
-function updateComponentProp(
-  componentId: string,
-  propName: string,
-  value: any,
-) {
-  const canvasInstance = diagramCanvas.value as any;
-  if (
-    !canvasInstance ||
-    !canvasInstance.getDiagramData ||
-    !canvasInstance.updateDiagramDataDirectly
-  ) {
-    console.error("没有可用的画布实例进行属性更新");
-    return;
-  }
-
-  // 检查值是否为对象，如果是对象并有value属性，则使用该属性值
-  if (value !== null && typeof value === "object" && "value" in value) {
-    value = value.value;
-  }
-
-  const currentData = canvasInstance.getDiagramData();
-  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
-
-  if (part) {
-    // 检查是否为基本属性
-    if (propName in part) {
-      (part as any)[propName] = value;
-    } else {
-      // 否则当作attrs中的属性处理
-      if (!part.attrs) {
-        part.attrs = {};
-      }
-      part.attrs[propName] = value;
-    }
-
-    canvasInstance.updateDiagramDataDirectly(currentData);
-    console.log(
-      `更新组件${componentId}的属性${propName}为:`,
-      value,
-      typeof value,
-    );
-  }
-}
-
-// 更新组件的直接属性
-function updateComponentDirectProp(
-  componentId: string,
-  propName: string,
-  value: any,
-) {
-  const canvasInstance = diagramCanvas.value as any;
-  if (
-    !canvasInstance ||
-    !canvasInstance.getDiagramData ||
-    !canvasInstance.updateDiagramDataDirectly
-  ) {
-    console.error("没有可用的画布实例进行属性更新");
-    return;
-  }
-
-  const currentData = canvasInstance.getDiagramData();
-  const part = currentData.parts.find((p: DiagramPart) => p.id === componentId);
-
-  if (part) {
-    // @ts-ignore: 动态属性赋值
-    part[propName] = value;
-
-    canvasInstance.updateDiagramDataDirectly(currentData);
-    console.log(
-      `更新组件${componentId}的直接属性${propName}为:`,
-      value,
-      typeof value,
-    );
-  }
-}
-
-// 专门用于更新组件的显示层级 - 这个方法可以删除，直接使用updateComponentProp即可
-
-// 处理连线创建事件
-function handleWireCreated(wireData: any) {
-  console.log("Wire created:", wireData);
-}
-
-// 处理连线删除事件
-function handleWireDeleted(wireId: string) {
-  console.log("Wire deleted:", wireId);
-}
-
-// 导出当前diagram数据
-function exportDiagram() {
-  // 直接使用DiagramCanvas组件提供的导出功能
-  const canvasInstance = diagramCanvas.value as any;
-  if (canvasInstance && canvasInstance.exportDiagram) {
-    canvasInstance.exportDiagram();
-  }
-}
-
-// --- 消息提示 ---
-const showNotification = ref(false);
-const notificationMessage = ref("");
-const notificationType = ref<"success" | "error" | "info">("info");
-
-function showToast(
-  message: string,
-  type: "success" | "error" | "info" = "info",
-  duration = 3000,
-) {
-  const canvasInstance = diagramCanvas.value as any;
-  if (canvasInstance && canvasInstance.showToast) {
-    canvasInstance.showToast(message, type, duration);
-  } else {
-    // 后备方案：使用原来的通知系统
-    notificationMessage.value = message;
-    notificationType.value = type;
-    showNotification.value = true;
-
-    // 设置自动消失
-    setTimeout(() => {
-      showNotification.value = false;
-    }, duration);
-  }
-}
-// 显示通知
-
-// --- 组件属性处理辅助函数 ---
-// 直接使用 componentConfig.ts 中导入的 getPropValue 函数
-
-// --- 生命周期钩子 ---
-onMounted(async () => {
-  // 初始化画布设置
-  console.log("ProjectView mounted, diagram canvas ref:", diagramCanvas.value);
-
-  // 获取初始图表数据
-  const canvasInstance = diagramCanvas.value as any;
-  if (canvasInstance && canvasInstance.getDiagramData) {
-    diagramData.value = canvasInstance.getDiagramData();
-
-    // 预加载所有使用的组件模块，以确保它们在渲染时可用
-    const componentTypes = new Set<string>();
-    diagramData.value.parts.forEach((part) => {
-      componentTypes.add(part.type);
-    });
-
-    console.log("Preloading component modules:", Array.from(componentTypes));
-
-    // 并行加载所有组件模块
-    await Promise.all(
-      Array.from(componentTypes).map((type) => loadComponentModule(type)),
-    );
-
-    console.log("All component modules loaded");
-  }
-});
-
-onUnmounted(() => {
-  document.removeEventListener("mousemove", onResize);
-  document.removeEventListener("mouseup", stopResize);
-});
-</script>
-
-<style scoped lang="postcss">
-/* 样式保持不变 */
-@import "../assets/main.css";
-
-/* 分割线样式 */
-.resizer {
-  width: 6px;
-  height: 100%;
-  cursor: col-resize;
-  transition: background-color 0.3s;
-  z-index: 10;
-}
-
-.resizer:hover,
-.resizer:active {
-  width: 6px;
-}
-
-/* 调整大小时应用全局样式 */
-:global(body.resizing) {
-  cursor: col-resize;
-  user-select: none;
-}
-
-.animate-slideRight {
-  animation: slideRight 0.3s ease-out forwards;
-}
-
-@keyframes slideRight {
-  from {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-/* 确保滚动行为仅在需要时出现 */
-html,
-body {
-  overflow: hidden;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-/* 文档面板样式 */
-.doc-panel {
-  padding: 1.5rem;
-  max-width: 100%;
-  margin: 0;
-  background-color: transparent;
-  /* 使用透明背景 */
-  border: none;
-  /* 确保没有边框 */
-}
-
-/* 文档切换按钮样式 */
-.doc-toggle-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  z-index: 50;
-}
-
-/* Markdown渲染样式调整 */
-:deep(.markdown-content) {
-  padding: 1rem;
-  background-color: hsl(var(--b1));
-  border-radius: 0.5rem;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-</style>

src/views/TestView.vue

@@ -1,99 +1,5 @@
 <template>
-  <div class="flex w-screen h-screen justify-center">
-    <div class="flex flex-col w-3/5 h-screen shadow-2xl p-10">
-      <div class="flex justify-center">
-        <h1 class="font-bold text-3xl">Jtag 下载</h1>
-      </div>
-      <div class="divider"></div>
-      <div class="w-full">
-        <div class="collapse bg-primary">
-          <input type="checkbox" />
-          <div class="collapse-title font-semibold text-lg text-white">
-            自定义开发板参数
-          </div>
-          <div class="collapse-content bg-primary-content text-sm">
-            <div class="form-control w-full my-3">
-              <label class="label">
-                <span class="label-text text-gray-700">开发板IP地址</span>
-              </label>
-              <label class="input w-full">
-                <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
-                <input type="text" class="grow" placeholder="IP地址" v-model="boardAddress" />
-              </label>
-            </div>
-            <div class="form-control w-full my-3">
-              <label class="label">
-                <span class="label-text text-gray-700">开发板端口号</span>
-              </label>
-              <label class="input w-full">
-                <img class="h-[1em] opacity-50" src="@/assets/pwd.svg" alt="User img" />
-                <input type="text" class="grow" placeholder="端口号" v-model="boardPort" />
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="divider"></div>
-      <UploadCard :upload-event="uploadBitstream" :download-event="downloadBitstream">
-      </UploadCard>
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
-import { JtagClient, type FileParameter } from "@/APIClient";
-import UploadCard from "@/components/UploadCard.vue";
-import { useDialogStore } from "@/stores/dialog";
-import { Common } from "@/Common";
-import { toNumber, isUndefined } from "lodash";
-import { ref } from "vue";
-
-const jtagController = new JtagClient();
-const dialog = useDialogStore();
-
-// Models with default values
-const boardAddress = ref("127.0.0.1"); // 默认IP地址
-const boardPort = ref("1234"); // 默认端口号
-
-async function uploadBitstream(bitstream: File): Promise<boolean> {
-  if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
-    dialog.error("开发板地址或端口空缺");
-    return false;
-  }
-
-  try {
-    const resp = await jtagController.uploadBitstream(
-      boardAddress.value,
-      Common.toFileParameterOrNull(bitstream),
-    );
-    return resp;
-  } catch (e) {
-    dialog.error("上传错误");
-    console.error(e);
-    return false;
-  }
-}
-
-async function downloadBitstream(): Promise<boolean> {
-  if (isUndefined(boardAddress.value) || isUndefined(boardPort.value)) {
-    dialog.error("开发板地址或端口空缺");
-    return false;
-  }
-
-  try {
-    const resp = await jtagController.downloadBitstream(
-      boardAddress.value,
-      toNumber(boardPort.value),
-    );
-    return resp;
-  } catch (e) {
-    dialog.error("上传错误");
-    console.error(e);
-    return false;
-  }
-}
 </script>
-
-<style scoped lang="postcss">
-@import "../assets/main.css";
-</style>

src/views/User/AddBoardDialog.vue

@@ -0,0 +1,251 @@
+<template>
+  <dialog class="modal" :class="{ 'modal-open': visible }">
+    <div class="modal-box w-96 max-w-md">
+      <h3 class="text-lg font-bold mb-4">新增实验板</h3>
+      
+      <form @submit.prevent="handleSubmit" class="space-y-4">
+        <!-- 实验板名称 -->
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">实验板名称 <span class="text-error">*</span></span>
+          </label>
+          <input
+            v-model="form.name"
+            type="text"
+            placeholder="请输入实验板名称"
+            class="input input-bordered"
+            :class="{ 'input-error': errors.name }"
+            required
+          />
+          <label v-if="errors.name" class="label">
+            <span class="label-text-alt text-error">{{ errors.name }}</span>
+          </label>
+        </div>
+
+        <!-- IP 地址 -->
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">IP 地址 <span class="text-error">*</span></span>
+          </label>
+          <input
+            v-model="form.ipAddr"
+            type="text"
+            placeholder="例如：192.168.1.100"
+            class="input input-bordered"
+            :class="{ 'input-error': errors.ipAddr }"
+            required
+          />
+          <label v-if="errors.ipAddr" class="label">
+            <span class="label-text-alt text-error">{{ errors.ipAddr }}</span>
+          </label>
+        </div>
+
+        <!-- 端口号 -->
+        <div class="form-control">
+          <label class="label">
+            <span class="label-text">端口号 <span class="text-error">*</span></span>
+          </label>
+          <input
+            v-model.number="form.port"
+            type="number"
+            placeholder="例如：1234"
+            min="1"
+            max="65535"
+            class="input input-bordered"
+            :class="{ 'input-error': errors.port }"
+            required
+          />
+          <label v-if="errors.port" class="label">
+            <span class="label-text-alt text-error">{{ errors.port }}</span>
+          </label>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-ghost"
+            @click="handleCancel"
+            :disabled="isSubmitting"
+          >
+            取消
+          </button>
+          <button
+            type="submit"
+            class="btn btn-primary"
+            :class="{ 'loading': isSubmitting }"
+            :disabled="isSubmitting"
+          >
+            {{ isSubmitting ? '添加中...' : '确认添加' }}
+          </button>
+        </div>
+      </form>
+    </div>
+    
+    <!-- 点击背景关闭 -->
+    <form method="dialog" class="modal-backdrop">
+      <button type="button" @click="handleCancel">close</button>
+    </form>
+  </dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch } from 'vue';
+import { useBoardManager } from '../../utils/BoardManager';
+
+// Props 和 Emits
+interface Props {
+  visible: boolean;
+}
+
+interface Emits {
+  (e: 'update:visible', value: boolean): void;
+  (e: 'success'): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 使用 BoardManager
+const boardManager = useBoardManager()!;
+
+// 表单数据
+const form = reactive({
+  name: '',
+  ipAddr: '',
+  port: 1234
+});
+
+// 表单错误
+const errors = reactive({
+  name: '',
+  ipAddr: '',
+  port: ''
+});
+
+// 提交状态
+const isSubmitting = ref(false);
+
+// IP地址验证正则
+const IP_REGEX = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+
+// 验证表单
+function validateForm(): boolean {
+  // 清空之前的错误
+  errors.name = '';
+  errors.ipAddr = '';
+  errors.port = '';
+
+  let isValid = true;
+
+  // 验证名称
+  if (!form.name.trim()) {
+    errors.name = '请输入实验板名称';
+    isValid = false;
+  } else if (form.name.trim().length < 2) {
+    errors.name = '实验板名称至少需要2个字符';
+    isValid = false;
+  } else if (form.name.trim().length > 50) {
+    errors.name = '实验板名称不能超过50个字符';
+    isValid = false;
+  }
+
+  // 验证IP地址
+  if (!form.ipAddr.trim()) {
+    errors.ipAddr = '请输入IP地址';
+    isValid = false;
+  } else if (!IP_REGEX.test(form.ipAddr.trim())) {
+    errors.ipAddr = '请输入有效的IP地址格式';
+    isValid = false;
+  }
+
+  // 验证端口号
+  if (!form.port) {
+    errors.port = '请输入端口号';
+    isValid = false;
+  } else if (form.port < 1 || form.port > 65535) {
+    errors.port = '端口号必须在1-65535之间';
+    isValid = false;
+  } else if (!Number.isInteger(form.port)) {
+    errors.port = '端口号必须是整数';
+    isValid = false;
+  }
+
+  return isValid;
+}
+
+// 重置表单
+function resetForm() {
+  form.name = '';
+  form.ipAddr = '';
+  form.port = 1234;
+  errors.name = '';
+  errors.ipAddr = '';
+  errors.port = '';
+}
+
+// 处理取消
+function handleCancel() {
+  if (!isSubmitting.value) {
+    emit('update:visible', false);
+    resetForm();
+  }
+}
+
+// 处理提交
+async function handleSubmit() {
+  if (!validateForm()) {
+    return;
+  }
+
+  isSubmitting.value = true;
+
+  try {
+    const success = await boardManager.addBoard(
+      form.name.trim(),
+      form.ipAddr.trim(),
+      form.port
+    );
+
+    if (success) {
+      emit('success');
+      resetForm();
+    }
+  } catch (error) {
+    console.error('添加实验板失败:', error);
+  } finally {
+    isSubmitting.value = false;
+  }
+}
+
+// 监听对话框显示状态，重置表单
+watch(() => props.visible, (newVisible) => {
+  if (newVisible) {
+    resetForm();
+  }
+});
+</script>
+
+<style scoped lang="postcss">
+@import "@/assets/main.css";
+
+.form-control {
+  @apply w-full;
+}
+
+.label-text {
+  @apply font-medium;
+}
+
+.input-error {
+  @apply border-error;
+}
+
+.text-error {
+  @apply text-red-500;
+}
+
+.loading {
+  @apply opacity-50 cursor-not-allowed;
+}
+</style>

src/views/User/BoardTable.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="flex flex-row justify-between items-center">
+    <h1 class="text-3xl font-bold mb-6">FPGA 设备管理</h1>
+    <div>
+      <button 
+        class="btn btn-ghost group" 
+        @click="tableManager.getAllBoards"
+      >
+        <RefreshCw class="w-4 h-4 mr-2 transition-transform duration-300 group-hover:rotate-180" />
+        刷新
+      </button>
+      <button
+        class="btn btn-ghost text-error hover:underline group"
+        @click="tableManager.toggleEditMode"
+      >
+        <Edit class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110" />
+        编辑
+      </button>
+    </div>
+  </div>
+
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <!-- 搜索和列控制 -->
+      <div class="flex items-center my-2 gap-4">
+        <input
+          type="text"
+          placeholder="筛选 IP 地址..."
+          class="input input-bordered max-w-sm"
+          :value="
+            tableManager.getColumnByKey('devAddr')?.getFilterValue() as string
+          "
+          @input="
+            tableManager
+              .getColumnByKey('devAddr')
+              ?.setFilterValue(($event.target as HTMLInputElement).value)
+          "
+        />
+
+        <div class="dropdown dropdown-end">
+          <div tabindex="0" role="button" class="btn btn-outline">
+            列显示
+            <svg
+              class="w-4 h-4 ml-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="m19 9-7 7-7-7"
+              ></path>
+            </svg>
+          </div>
+          <ul
+            tabindex="0"
+            class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
+          >
+            <li
+              v-for="column in tableManager.getAllHideableColumns()"
+              :key="column.id"
+            >
+              <label class="label cursor-pointer">
+                <span class="label-text capitalize">{{ column.id }}</span>
+                <input
+                  type="checkbox"
+                  class="checkbox checkbox-sm"
+                  :checked="column.getIsVisible()"
+                  @change="
+                    column.toggleVisibility(
+                      !!($event.target as HTMLInputElement).checked,
+                    )
+                  "
+                />
+              </label>
+            </li>
+          </ul>
+        </div>
+
+        <div class="flex gap-2 ml-auto">
+          <button
+            class="btn btn-primary group"
+            :disabled="!tableManager.isEditMode.value"
+            @click="showAddBoardDialog = true"
+          >
+            <Plus class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110" />
+            新增实验板
+          </button>
+
+          <button
+            class="btn btn-error group"
+            :disabled="!tableManager.isEditMode.value"
+            @click="tableManager.deleteSelectedBoards"
+          >
+            <Trash2 class="w-4 h-4 mr-2 transition-transform duration-200 group-hover:scale-110 group-hover:animate-pulse" />
+            删除选中
+          </button>
+        </div>
+      </div>
+
+      <!-- 表格 -->
+      <div class="overflow-x-auto border border-base-300 rounded-lg">
+        <table class="table w-full">
+          <thead>
+            <tr
+              v-for="headerGroup in tableManager.getHeaderGroups()"
+              :key="headerGroup.id"
+              class="bg-base-300"
+            >
+              <th v-for="header in headerGroup.headers" :key="header.id">
+                <FlexRender
+                  v-if="!header.isPlaceholder"
+                  :render="header.column.columnDef.header"
+                  :props="header.getContext()"
+                />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="tableManager.getRowModel().rows?.length">
+              <template
+                v-for="row in tableManager.getRowModel().rows"
+                :key="row.id"
+              >
+                <tr
+                  class="hover"
+                  :class="{ 'bg-primary/10': row.getIsSelected() }"
+                >
+                  <td v-for="cell in row.getVisibleCells()" :key="cell.id">
+                    <FlexRender
+                      :render="cell.column.columnDef.cell"
+                      :props="cell.getContext()"
+                    />
+                  </td>
+                </tr>
+                <tr v-if="row.getIsExpanded()">
+                  <td :colspan="row.getAllCells().length" class="bg-base-200">
+                    <div class="p-4">
+                      <pre class="text-sm">{{
+                        JSON.stringify(row.original, null, 2)
+                      }}</pre>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </template>
+            <tr v-else>
+              <td
+                :colspan="tableManager.columns.length"
+                class="h-24 text-center text-base-content/60"
+              >
+                暂无数据
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 分页控制 -->
+      <div class="flex items-center justify-between py-4">
+        <div class="text-sm text-base-content/60">
+          已选择 {{ tableManager.getSelectedRows().length }} /
+          {{ tableManager.getAllRows().length }} 行
+        </div>
+        <div class="flex gap-2">
+          <button
+            class="btn btn-outline btn-sm"
+            :disabled="!tableManager.canPreviousPage()"
+            @click="tableManager.previousPage()"
+          >
+            上一页
+          </button>
+          <button
+            class="btn btn-outline btn-sm"
+            :disabled="!tableManager.canNextPage()"
+            @click="tableManager.nextPage()"
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+
+      <div class="mt-6 bg-base-300 p-4 rounded-lg">
+        <p class="text-sm opacity-80">
+          <span class="font-semibold text-error">提示：</span>
+          请谨慎操作FPGA固化和热启动功能，确保上传的位流文件无误，以避免设备损坏。
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <!-- 新增实验板对话框 -->
+  <AddBoardDialog
+    v-model:visible="showAddBoardDialog"
+    @success="handleAddBoardSuccess"
+  />
+</template>
+
+<script lang="ts" setup>
+import { FlexRender } from "@tanstack/vue-table";
+import { onMounted, ref } from "vue";
+import { RefreshCw, Edit, Plus, Trash2 } from "lucide-vue-next";
+import { useProvideBoardManager } from "../../utils/BoardManager";
+import { useProvideBoardTableManager } from "./BoardTableManager";
+import AddBoardDialog from "./AddBoardDialog.vue";
+
+// 使用 BoardManager
+const boardManager = useProvideBoardManager()!;
+
+// 使用表格管理器（不再需要参数）
+const tableManager = useProvideBoardTableManager()!;
+
+// 新增实验板对话框显示状态
+const showAddBoardDialog = ref(false);
+
+// 处理新增实验板成功事件
+const handleAddBoardSuccess = () => {
+  showAddBoardDialog.value = false;
+  // 刷新数据在 BoardManager.addBoard 中已经处理
+};
+
+onMounted(() => {
+  // 初始化数据
+  boardManager.getAllBoards();
+});
+</script>
+
+<style scoped lang="postcss">
+@import "@/assets/main.css";
+</style>

src/views/User/BoardTableManager.ts

@@ -0,0 +1,544 @@
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  ExpandedState,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/vue-table";
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from "@tanstack/vue-table";
+import { h, ref, computed, version } from "vue";
+import { createInjectionState } from "@vueuse/core";
+import type { BoardData } from "../../utils/BoardManager";
+import { useBoardManager } from "../../utils/BoardManager";
+import { useDialogStore } from "@/stores/dialog";
+
+const [useProvideBoardTableManager, useBoardTableManager] =
+  createInjectionState(() => {
+    // 从BoardManager获取数据和方法
+    const boardManager = useBoardManager()!;
+  
+    const dialog = useDialogStore();
+
+    // 编辑状态
+    const isEditMode = ref(false);
+
+    // 表格状态管理
+    const sorting = ref<SortingState>([]);
+    const columnFilters = ref<ColumnFiltersState>([]);
+    const columnVisibility = ref<VisibilityState>({
+      // 默认隐藏端口、ID、状态列和板卡名称列
+      port: false,
+      id: false,
+      status: false,
+      version: false,
+    });
+    const rowSelection = ref({});
+    const expanded = ref<ExpandedState>({});
+
+    // 表格列定义
+    const columns: ColumnDef<BoardData>[] = [
+      {
+        id: "select",
+        header: ({ table }) =>
+          h("input", {
+            type: "checkbox",
+            class: "checkbox",
+            checked:
+              table.getIsAllPageRowsSelected() ||
+              (table.getIsSomePageRowsSelected() ? "indeterminate" : false),
+            onChange: (event: Event) =>
+              table.toggleAllPageRowsSelected(
+                !!(event.target as HTMLInputElement).checked,
+              ),
+          }),
+        cell: ({ row }) =>
+          h("input", {
+            type: "checkbox",
+            class: "checkbox",
+            checked: row.getIsSelected(),
+            onChange: (event: Event) =>
+              row.toggleSelected(!!(event.target as HTMLInputElement).checked),
+          }),
+        enableSorting: false,
+        enableHiding: false,
+      },
+      {
+        accessorKey: "boardName",
+        header: "板卡名称",
+        cell: ({ row }) => {
+          const device = row.original;
+          return isEditMode.value
+            ? h("input", {
+                type: "text",
+                class: "input input-sm w-full",
+                value: device.boardName,
+                onInput: (e: Event) => {
+                  device.boardName = (e.target as HTMLInputElement).value;
+                },
+              })
+            : h("span", { class: "font-medium" }, device.boardName);
+        },
+        enableHiding: true,
+      },
+      {
+        accessorKey: "devAddr",
+        header: "IP 地址",
+        cell: ({ row }) => {
+          const device = row.original;
+          return isEditMode.value
+            ? h("input", {
+                type: "text",
+                class: "input input-sm w-full",
+                value: device.ipAddr,
+                onInput: (e: Event) => {
+                  device.ipAddr = (e.target as HTMLInputElement).value;
+                },
+              })
+            : h("span", { class: "font-medium" }, device.ipAddr);
+        },
+      },
+      {
+        accessorKey: "port",
+        header: "端口",
+        cell: ({ row }) => {
+          const device = row.original;
+          return isEditMode.value
+            ? h("input", {
+                type: "number",
+                class: "input input-sm w-full",
+                value: device.port,
+                onInput: (e: Event) => {
+                  device.port = parseInt((e.target as HTMLInputElement).value);
+                },
+              })
+            : h("span", { class: "font-mono" }, device.port.toString());
+        },
+        enableHiding: true,
+      },
+      {
+        accessorKey: "id",
+        header: "设备ID",
+        cell: ({ row }) =>
+          h("span", { class: "font-mono text-xs" }, row.original.id),
+        enableHiding: true,
+      },
+      {
+        accessorKey: "status",
+        header: "状态",
+        cell: ({ row }) => {
+          const device = row.original;
+          const statusText = device.status === 0 ? "忙碌" : "可用";
+          const statusClass =
+            device.status === 0 ? "badge-warning" : "badge-success";
+          return h(
+            "span",
+            {
+              class: `badge ${statusClass} min-w-15`,
+            },
+            statusText,
+          );
+        },
+        enableHiding: true,
+      },
+      {
+        accessorKey: "version",
+        header: "版本号",
+        cell: ({ row }) =>
+          h("span", { class: "font-mono" }, row.original.firmVersion),
+      },
+      {
+        accessorKey: "defaultBitstream",
+        header: "默认启动位流",
+        cell: ({ row }) => {
+          const device = row.original;
+          return h(
+            "select",
+            {
+              class: "select select-bordered select-sm w-full",
+              value: device.defaultBitstream,
+              onChange: (e: Event) => {
+                device.defaultBitstream = (e.target as HTMLSelectElement).value;
+              },
+            },
+            [
+              h("option", { value: "黄金位流" }, "黄金位流"),
+              h("option", { value: "应用位流1" }, "应用位流1"),
+              h("option", { value: "应用位流2" }, "应用位流2"),
+              h("option", { value: "应用位流3" }, "应用位流3"),
+            ],
+          );
+        },
+      },
+      {
+        id: "goldBitstream",
+        header: "黄金位流",
+        cell: ({ row }) => {
+          const device = row.original;
+          return h("input", {
+            type: "file",
+            class: "file-input file-input-primary file-input-sm",
+            onChange: (e: Event) =>
+              boardManager.handleFileChange(e, device, "goldBitstreamFile"),
+          });
+        },
+      },
+      {
+        id: "appBitstream1",
+        header: "应用位流1",
+        cell: ({ row }) => {
+          const device = row.original;
+          return h("input", {
+            type: "file",
+            class: "file-input file-input-secondary file-input-sm",
+            onChange: (e: Event) =>
+              boardManager.handleFileChange(e, device, "appBitstream1File"),
+          });
+        },
+      },
+      {
+        id: "appBitstream2",
+        header: "应用位流2",
+        cell: ({ row }) => {
+          const device = row.original;
+          return h("input", {
+            type: "file",
+            class: "file-input file-input-accent file-input-sm",
+            onChange: (e: Event) =>
+              boardManager.handleFileChange(e, device, "appBitstream2File"),
+          });
+        },
+      },
+      {
+        id: "appBitstream3",
+        header: "应用位流3",
+        cell: ({ row }) => {
+          const device = row.original;
+          return h("input", {
+            type: "file",
+            class: "file-input file-input-info file-input-sm",
+            onChange: (e: Event) =>
+              boardManager.handleFileChange(e, device, "appBitstream3File"),
+          });
+        },
+      },
+      {
+        id: "actions",
+        header: "操作",
+        cell: ({ row }) => {
+          const device = row.original;
+
+          // 根据编辑模式显示不同的按钮
+          if (isEditMode.value) {
+            return h(
+              "div",
+              {
+                class: ["flex gap-2", { "min-w-30": !isEditMode.value }],
+              },
+              [
+                h(
+                  "button",
+                  {
+                    class: "btn btn-error btn-sm",
+                    onClick: async () => {
+                      const confirmed = confirm(
+                        `确定要删除设备 ${device.ipAddr} 吗？`,
+                      );
+                      if (confirmed) {
+                        await deleteBoard(device.id);
+                      }
+                    },
+                  },
+                  "删除",
+                ),
+              ],
+            );
+          } else {
+            return h("div", { class: "flex gap-2 min-w-30" }, [
+              h(
+                "button",
+                {
+                  class: "btn btn-warning btn-sm",
+                  onClick: () =>
+                    uploadAndDownloadBitstreams(
+                      device,
+                      device.goldBitstreamFile,
+                      device.appBitstream1File,
+                      device.appBitstream2File,
+                      device.appBitstream3File,
+                    ),
+                },
+                "固化",
+              ),
+              h(
+                "button",
+                {
+                  class: "btn btn-success btn-sm",
+                  onClick: () =>
+                    hotresetBitstream(
+                      device,
+                      boardManager.getSelectedBitstreamNum(
+                        device.defaultBitstream,
+                      ),
+                    ),
+                },
+                "热启动",
+              ),
+            ]);
+          }
+        },
+        enableHiding: false,
+      },
+    ];
+
+    // 创建表格实例
+    const table = useVueTable({
+      get data() {
+        return boardManager.boards.value;
+      },
+      get columns() {
+        return columns;
+      },
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getExpandedRowModel: getExpandedRowModel(),
+      onSortingChange: (updaterOrValue) => {
+        if (typeof updaterOrValue === "function") {
+          sorting.value = updaterOrValue(sorting.value);
+        } else {
+          sorting.value = updaterOrValue;
+        }
+      },
+      onColumnFiltersChange: (updaterOrValue) => {
+        if (typeof updaterOrValue === "function") {
+          columnFilters.value = updaterOrValue(columnFilters.value);
+        } else {
+          columnFilters.value = updaterOrValue;
+        }
+      },
+      onColumnVisibilityChange: (updaterOrValue) => {
+        if (typeof updaterOrValue === "function") {
+          columnVisibility.value = updaterOrValue(columnVisibility.value);
+        } else {
+          columnVisibility.value = updaterOrValue;
+        }
+      },
+      onRowSelectionChange: (updaterOrValue) => {
+        if (typeof updaterOrValue === "function") {
+          rowSelection.value = updaterOrValue(rowSelection.value);
+        } else {
+          rowSelection.value = updaterOrValue;
+        }
+      },
+      onExpandedChange: (updaterOrValue) => {
+        if (typeof updaterOrValue === "function") {
+          expanded.value = updaterOrValue(expanded.value);
+        } else {
+          expanded.value = updaterOrValue;
+        }
+      },
+      state: {
+        get sorting() {
+          return sorting.value;
+        },
+        get columnFilters() {
+          return columnFilters.value;
+        },
+        get columnVisibility() {
+          return columnVisibility.value;
+        },
+        get rowSelection() {
+          return rowSelection.value;
+        },
+        get expanded() {
+          return expanded.value;
+        },
+      },
+    });
+
+    // UI层的API封装方法 - 添加dialog提示
+    
+    // 获取所有板卡信息
+    async function getAllBoards(): Promise<boolean> {
+      const result = await boardManager.getAllBoards();
+      if (result.success) {
+        dialog?.info("获取板卡信息成功");
+      } else {
+        dialog?.error(result.error || "获取板卡信息失败");
+      }
+      return result.success;
+    }
+
+    // 新增板卡
+    async function addBoard(name: string, ipAddr: string, port: number): Promise<boolean> {
+      const result = await boardManager.addBoard(name, ipAddr, port);
+      if (result.success) {
+        dialog?.info("新增板卡成功");
+      } else {
+        dialog?.error(result.error || "新增板卡失败");
+      }
+      return result.success;
+    }
+
+    // 删除板卡
+    async function deleteBoard(boardId: string): Promise<boolean> {
+      const result = await boardManager.deleteBoard(boardId);
+      if (result.success) {
+        dialog?.info("删除板卡成功");
+      } else {
+        dialog?.error(result.error || "删除板卡失败");
+      }
+      return result.success;
+    }
+
+    // 上传并固化位流
+    async function uploadAndDownloadBitstreams(
+      board: BoardData,
+      goldBitstream?: File,
+      appBitstream1?: File,
+      appBitstream2?: File,
+      appBitstream3?: File,
+    ): Promise<boolean> {
+      const result = await boardManager.uploadAndDownloadBitstreams(
+        board,
+        goldBitstream,
+        appBitstream1,
+        appBitstream2,
+        appBitstream3,
+      );
+      if (result.success) {
+        dialog?.info("固化比特流成功");
+      } else {
+        dialog?.error(result.error || "固化比特流失败");
+      }
+      return result.success;
+    }
+
+    // 热启动位流
+    async function hotresetBitstream(board: BoardData, bitstreamNum: number): Promise<boolean> {
+      const result = await boardManager.hotresetBitstream(board, bitstreamNum);
+      if (result.success) {
+        dialog?.info("切换比特流成功");
+      } else {
+        dialog?.error(result.error || "切换比特流失败");
+      }
+      return result.success;
+    }
+
+    // 表格操作方法
+    const getSelectedRows = () => table.getFilteredSelectedRowModel().rows;
+    const getAllRows = () => table.getFilteredRowModel().rows;
+    const getColumnByKey = (key: string) => table.getColumn(key);
+    const getAllHideableColumns = () =>
+      table.getAllColumns().filter((column) => column.getCanHide());
+    const getHeaderGroups = () => table.getHeaderGroups();
+    const getRowModel = () => table.getRowModel();
+    const canPreviousPage = () => table.getCanPreviousPage();
+    const canNextPage = () => table.getCanNextPage();
+    const previousPage = () => table.previousPage();
+    const nextPage = () => table.nextPage();
+
+    // 编辑模式控制
+    const toggleEditMode = () => {
+      isEditMode.value = !isEditMode.value;
+    };
+
+    // 删除选中的实验板
+    const deleteSelectedBoards = async () => {
+      const selectedRows = getSelectedRows();
+
+      if (selectedRows.length === 0) {
+        dialog?.warn("请先选择要删除的实验板");
+        return false;
+      }
+
+      const boardNames = selectedRows
+        .map((row) => row.original.boardName || row.original.ipAddr)
+        .join("、");
+      const confirmed = confirm(
+        `确定要删除以下 ${selectedRows.length} 个实验板吗？\n${boardNames}`,
+      );
+
+      if (!confirmed) {
+        return false;
+      }
+
+      let successCount = 0;
+      let failCount = 0;
+
+      // 批量删除
+      for (const row of selectedRows) {
+        const board = row.original;
+        const result = await boardManager.deleteBoard(board.id);
+        if (result.success) {
+          successCount++;
+        } else {
+          failCount++;
+        }
+      }
+
+      // 清空选择状态
+      rowSelection.value = {};
+
+      // 显示结果提示
+      if (failCount === 0) {
+        dialog?.info(`成功删除 ${successCount} 个实验板`);
+      } else if (successCount === 0) {
+        dialog?.error(
+          `删除失败，共 ${failCount} 个实验板删除失败`,
+        );
+      } else {
+        dialog?.warn(
+          `部分删除成功：成功 ${successCount} 个，失败 ${failCount} 个`,
+        );
+      }
+
+      return successCount > 0;
+    };
+
+    return {
+      // 表格实例
+      table,
+      // 列定义
+      columns,
+      // 表格操作方法
+      getSelectedRows,
+      getAllRows,
+      getColumnByKey,
+      getAllHideableColumns,
+      getHeaderGroups,
+      getRowModel,
+      canPreviousPage,
+      canNextPage,
+      previousPage,
+      nextPage,
+      deleteSelectedBoards,
+      // 状态
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      expanded,
+      // 编辑模式
+      isEditMode,
+      toggleEditMode,
+      // UI层封装的API方法
+      getAllBoards,
+      addBoard,
+      deleteBoard,
+      uploadAndDownloadBitstreams,
+      hotresetBitstream,
+      // BoardManager 的引用
+      boardManager,
+    };
+  });
+
+export { useProvideBoardTableManager, useBoardTableManager };

src/views/User/Index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    class="min-h-screen bg-base-100 container mx-auto p-6 space-y-6 flex flex-row"
+  >
+    <ul class="menu bg-base-200 w-56 gap-2 rounded-2xl p-5">
+      <li id="1" @click="setActivePage">
+        <a :class="{ 'menu-active': activePage === 1 }">用户信息</a>
+      </li>
+      <li id="2" @click="setActivePage">
+        <a :class="{ 'menu-active': activePage === 2 }">Item 2</a>
+      </li>
+      <li v-if="isAdmin" id="100" @click="setActivePage">
+        <a :class="{ 'menu-active': activePage === 100 }">实验板控制台</a>
+      </li>
+    </ul>
+    <div class="divider divider-horizontal h-full"></div>
+    <div class="card bg-base-300 w-300 rounded-2xl p-7">
+      <div v-if="activePage === 1">
+        <UserInfo />
+      </div>
+      <div v-else-if="activePage === 2">
+        <!-- 添加对应的组件或内容 -->
+        <div>Item 2 内容</div>
+      </div>
+      <div v-else-if="activePage === 100">
+        <BoardTable />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BoardTable from "./BoardTable.vue";
+import { toNumber } from "lodash";
+import { onMounted, ref } from "vue";
+import { AuthManager } from "@/utils/AuthManager";
+import UserInfo from "./UserInfo.vue";
+
+const activePage = ref(1);
+const isAdmin = ref(false);
+
+function setActivePage(event: Event) {
+  const target = event.currentTarget as HTMLLinkElement;
+  const newPage = toNumber(target.id);
+  
+  // 如果用户不是管理员但试图访问管理员页面，则忽略
+  if (newPage === 100 && !isAdmin.value) {
+    return;
+  }
+  
+  activePage.value = newPage;
+}
+
+onMounted(async () => {
+  try {
+    // 首先验证用户是否已登录
+    const isAuthenticated = await AuthManager.isAuthenticated();
+    if (!isAuthenticated) {
+      // 如果未登录，重定向到登录页面
+      // 这里可以使用路由跳转
+      return;
+    }
+    
+    // 验证管理员权限
+    isAdmin.value = await AuthManager.verifyAdminAuth();
+    
+    // 如果当前页面是管理员页面但用户不是管理员，切换到用户信息页面
+    if (activePage.value === 100 && !isAdmin.value) {
+      activePage.value = 1;
+    }
+  } catch (error) {
+    console.error('用户认证检查失败:', error);
+    // 可以在这里处理错误，比如显示错误信息或重定向到登录页面
+  }
+});
+</script>
+
+<style scoped>
+.menu-active {
+  position: relative;
+}
+
+.menu-active::before {
+  content: "";
+  position: absolute;
+  left: -12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 80%;
+  background-color: var(--color-primary);
+  border-radius: 2px;
+}
+</style>

src/views/User/UserInfo.vue

@@ -0,0 +1,590 @@
+<template>
+  <div class="space-y-6">
+    <!-- 页面标题 -->
+    <div class="flex items-center gap-3">
+      <User class="w-8 h-8 text-primary" />
+      <h1 class="text-3xl font-bold">用户信息</h1>
+      <!-- 刷新按钮图标 -->
+      <button
+        @click="refreshAllInfo"
+        class="btn btn-ghost btn-sm ml-auto"
+        :disabled="loading"
+        title="刷新信息"
+      >
+        <RefreshCw class="w-5 h-5" :class="{ 'animate-spin': loading }" />
+      </button>
+    </div>
+
+    <!-- 全局加载状态 -->
+    <div v-if="loading" class="flex justify-center items-center py-12">
+      <span class="loading loading-spinner loading-lg text-primary m-2"> </span>
+      加载中...
+    </div>
+
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="alert alert-error">
+      <AlertCircle class="w-5 h-5" />
+      <span>{{ error }}</span>
+      <button @click="refreshAllInfo" class="btn btn-sm btn-outline">
+        <RefreshCw class="w-4 h-4" />
+        重试
+      </button>
+    </div>
+
+    <!-- 用户信息内容 -->
+    <div v-else class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- 用户基本信息卡片 -->
+      <div class="card bg-base-200 shadow-lg">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-4">
+            <UserCircle class="w-6 h-6 text-primary" />
+            <h2 class="card-title">基本信息</h2>
+          </div>
+
+          <div class="space-y-4">
+            <!-- 用户ID -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <IdCard class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">用户ID</div>
+                <div class="font-mono text-sm">{{ userInfo?.id || "N/A" }}</div>
+              </div>
+              <button
+                @click="copyToClipboard(userInfo?.id)"
+                class="btn btn-ghost btn-sm"
+                title="复制ID"
+              >
+                <Copy class="w-4 h-4" />
+              </button>
+            </div>
+
+            <!-- 用户名 -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <User class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">用户名</div>
+                <div class="font-semibold">{{ userInfo?.name || "N/A" }}</div>
+              </div>
+            </div>
+
+            <!-- 邮箱 -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <Mail class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">邮箱地址</div>
+                <div class="font-mono text-sm">
+                  {{ userInfo?.eMail || "N/A" }}
+                </div>
+              </div>
+              <button
+                @click="copyToClipboard(userInfo?.eMail)"
+                class="btn btn-ghost btn-sm"
+                title="复制邮箱"
+              >
+                <Copy class="w-4 h-4" />
+              </button>
+            </div>
+
+            <!-- 账户状态 -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <Shield class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">账户状态</div>
+                <div class="badge badge-success">已认证</div>
+              </div>
+            </div>
+
+            <!-- 绑定过期时间 -->
+            <div
+              v-if="userInfo?.boardExpireTime"
+              class="flex items-center gap-3 p-3 bg-base-100 rounded-lg"
+            >
+              <Clock class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">绑定过期时间</div>
+                <div class="font-mono text-sm">
+                  {{ formatExpireTime(userInfo.boardExpireTime) }}
+                </div>
+                <div
+                  class="text-xs mt-1"
+                  :class="getExpireTimeStatusClass(userInfo.boardExpireTime)"
+                >
+                  {{ getExpireTimeStatus(userInfo.boardExpireTime) }}
+                </div>
+              </div>
+              <div
+                class="badge badge-sm"
+                :class="getExpireTimeBadgeClass(userInfo.boardExpireTime)"
+              >
+                {{ getTimeRemaining(userInfo.boardExpireTime) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 实验板信息卡片 -->
+      <div class="card bg-base-200 shadow-lg">
+        <div class="card-body">
+          <div class="flex items-center justify-between gap-3 mb-4">
+            <div class="flex items-center gap-3">
+              <Cpu class="w-6 h-6 text-primary" />
+              <h2 class="card-title">绑定实验板</h2>
+            </div>
+            <!-- 操作按钮 - 只有在有绑定实验板时才显示 -->
+            <div v-if="boardInfo" class="flex items-center gap-3">
+              <button
+                @click="testBoardConnection"
+                class="btn btn-secondary btn-sm"
+                :disabled="testingConnection"
+              >
+                <Zap
+                  class="w-4 h-4"
+                  :class="{ 'animate-pulse': testingConnection }"
+                />
+                {{ testingConnection ? "测试中..." : "测试连接" }}
+              </button>
+              <button
+                @click="unbindBoard"
+                class="btn btn-error btn-outline btn-sm"
+                :disabled="unbindingBoard"
+              >
+                <Unlink2
+                  class="w-4 h-4"
+                  :class="{ 'animate-pulse': unbindingBoard }"
+                />
+                {{ unbindingBoard ? "解绑中..." : "解绑实验板" }}
+              </button>
+            </div>
+          </div>
+
+          <!-- 无实验板绑定 -->
+          <div v-if="!boardInfo" class="text-center py-8">
+            <Unlink class="w-12 h-12 text-base-content/50 mx-auto mb-4" />
+            <div class="text-base-content/70 mb-4">暂无绑定的实验板</div>
+            <!-- 申请实验板按钮 -->
+            <button
+              @click="applyBoard"
+              class="btn btn-primary"
+              :disabled="applyingBoard"
+            >
+              <Plus
+                class="w-4 h-4"
+                :class="{ 'animate-pulse': applyingBoard }"
+              />
+              {{ applyingBoard ? "申请中..." : "申请实验板" }}
+            </button>
+          </div>
+
+          <!-- 实验板信息 -->
+          <div v-else class="space-y-4">
+            <!-- 实验板ID -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <IdCard class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">实验板ID</div>
+                <div class="font-mono text-sm">
+                  {{ boardInfo?.id || "N/A" }}
+                </div>
+              </div>
+              <button
+                @click="copyToClipboard(boardInfo?.id)"
+                class="btn btn-ghost btn-sm"
+                title="复制ID"
+              >
+                <Copy class="w-4 h-4" />
+              </button>
+            </div>
+
+            <!-- 实验板名称 -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <Tag class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">实验板名称</div>
+                <div class="font-semibold">
+                  {{ boardInfo?.boardName || "N/A" }}
+                </div>
+              </div>
+            </div>
+
+            <!-- IP地址 -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <Globe class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">IP地址</div>
+                <div class="font-mono text-sm">
+                  {{ boardInfo?.ipAddr || "N/A" }}
+                </div>
+              </div>
+              <button
+                @click="copyToClipboard(boardInfo?.ipAddr)"
+                class="btn btn-ghost btn-sm"
+                title="复制IP地址"
+              >
+                <Copy class="w-4 h-4" />
+              </button>
+            </div>
+
+            <!-- 端口 -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <Server class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">端口</div>
+                <div class="font-mono text-sm">
+                  {{ boardInfo?.port || "N/A" }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 状态 -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <Activity class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">状态</div>
+                <div
+                  class="badge"
+                  :class="getBoardStatusClass(boardInfo?.status)"
+                >
+                  {{ getBoardStatusText(boardInfo?.status) }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 固件版本 -->
+            <div class="flex items-center gap-3 p-3 bg-base-100 rounded-lg">
+              <Settings class="w-5 h-5 text-secondary" />
+              <div class="flex-1">
+                <div class="text-sm text-base-content/70">固件版本</div>
+                <div class="font-mono text-sm">
+                  {{ boardInfo?.firmVersion || "N/A" }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 使用自定义 Alert 组件 -->
+    <Alert />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { AuthManager } from "@/utils/AuthManager";
+import { UserInfo, Board, BoardStatus } from "@/APIClient";
+import { Alert, useAlertStore } from "@/components/Alert";
+import {
+  User,
+  UserCircle,
+  Mail,
+  IdCard,
+  Copy,
+  Shield,
+  Cpu,
+  Globe,
+  Server,
+  Activity,
+  Settings,
+  Tag,
+  RefreshCw,
+  AlertCircle,
+  Unlink,
+  Unlink2,
+  Zap,
+  Plus,
+  Clock,
+} from "lucide-vue-next";
+
+// 响应式数据
+const loading = ref(false);
+const error = ref("");
+const userInfo = ref<UserInfo | null>(null);
+const boardInfo = ref<Board | null>(null);
+
+// 操作状态
+const testingConnection = ref(false);
+const unbindingBoard = ref(false);
+const applyingBoard = ref(false);
+
+// 使用自定义 Alert
+const alertStore = useAlertStore();
+
+// 加载实验板信息
+const loadBoardInfo = async () => {
+  if (!userInfo.value?.boardID) {
+    boardInfo.value = null;
+    return;
+  }
+
+  try {
+    const client = AuthManager.createAuthenticatedDataClient();
+    boardInfo.value = await client.getBoardByID(userInfo.value.boardID);
+  } catch (err) {
+    console.error("加载实验板信息失败:", err);
+    boardInfo.value = null;
+  }
+};
+
+// 统一的信息加载函数（合并了原来的 loadUserInfo 和 refreshAllInfo）
+const loadUserInfo = async (showSuccessMessage = false) => {
+  loading.value = true;
+  error.value = "";
+
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    const client = AuthManager.createAuthenticatedDataClient();
+    userInfo.value = await client.getUserInfo();
+
+    // 如果有绑定的实验板ID，加载实验板信息
+    if (userInfo.value?.boardID) {
+      await loadBoardInfo();
+    } else {
+      boardInfo.value = null;
+    }
+
+    if (showSuccessMessage) {
+      alertStore?.success("信息刷新成功");
+    }
+  } catch (err) {
+    console.error("加载用户信息失败:", err);
+    error.value = "加载用户信息失败，请检查网络连接或重新登录";
+    if (showSuccessMessage) {
+      alertStore?.error("刷新信息失败，请检查网络连接");
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 刷新所有信息（调用统一的加载函数，显示成功消息）
+const refreshAllInfo = async () => {
+  await loadUserInfo(true);
+};
+
+// 申请实验板
+const applyBoard = async () => {
+  applyingBoard.value = true;
+  alertStore?.info("正在申请实验板...");
+
+  try {
+    const client = AuthManager.createAuthenticatedDataClient();
+
+    // 获取可用的实验板
+    const availableBoard = await client.getAvailableBoard(undefined);
+
+    if (availableBoard) {
+      alertStore?.success(`成功申请到实验板: ${availableBoard.boardName}`);
+
+      // 重新加载用户信息以获取最新的绑定状态
+      await loadUserInfo();
+    } else {
+      alertStore?.warn("当前没有可用的实验板，请稍后再试");
+    }
+  } catch (err: any) {
+    console.error("申请实验板失败:", err);
+
+    // 根据错误状态码提供更友好的错误信息
+    if (err?.status === 404) {
+      alertStore?.warn("当前没有可用的实验板，请稍后再试");
+    } else if (err?.status === 400) {
+      alertStore?.error("您已经绑定了实验板，无需重复申请");
+    } else {
+      alertStore?.error("申请实验板失败，请检查网络连接或稍后重试");
+    }
+  } finally {
+    applyingBoard.value = false;
+  }
+};
+
+// 测试实验板连接
+const testBoardConnection = async () => {
+  if (!boardInfo.value) return;
+
+  testingConnection.value = true;
+  alertStore?.info("正在测试连接...");
+
+  try {
+    const jtagClient = AuthManager.createAuthenticatedJtagClient();
+
+    // 使用JTAG客户端读取设备ID Code
+    const idCode = await jtagClient.getDeviceIDCode(
+      boardInfo.value.ipAddr,
+      boardInfo.value.port,
+    );
+
+    // 检查ID Code是否有效（非0xFFFFFFFF表示连接成功）
+    if (idCode !== 0xffffffff && idCode !== 0) {
+      alertStore?.success(
+        `连接测试成功，设备ID: 0x${idCode.toString(16).toUpperCase()}`,
+      );
+    } else {
+      alertStore?.warn("连接测试失败，未检测到有效设备");
+    }
+  } catch (err) {
+    console.error("连接测试失败:", err);
+    alertStore?.error("连接测试失败，请检查实验板是否在线");
+  } finally {
+    testingConnection.value = false;
+  }
+};
+
+// 解绑实验板
+const unbindBoard = async () => {
+  if (!boardInfo.value) return;
+
+  // 确认对话框
+  if (!confirm("确定要解绑当前实验板吗？解绑后需要重新绑定才能使用。")) {
+    return;
+  }
+
+  unbindingBoard.value = true;
+  alertStore?.info("正在解绑实验板...");
+
+  try {
+    const client = AuthManager.createAuthenticatedDataClient();
+    const success = await client.unbindBoard();
+
+    if (success) {
+      alertStore?.success("实验板解绑成功");
+      // 清空实验板信息并重新加载用户信息
+      boardInfo.value = null;
+      await loadUserInfo();
+    } else {
+      alertStore?.error("实验板解绑失败");
+    }
+  } catch (err) {
+    console.error("解绑实验板失败:", err);
+    alertStore?.error("解绑实验板失败，请稍后重试");
+  } finally {
+    unbindingBoard.value = false;
+  }
+};
+
+// 复制到剪贴板
+const copyToClipboard = async (text?: string) => {
+  if (!text) return;
+
+  try {
+    await navigator.clipboard.writeText(text);
+    alertStore?.success("已复制到剪贴板");
+  } catch (err) {
+    alertStore?.error("复制失败");
+  }
+};
+
+// 时间相关的工具函数
+const formatExpireTime = (expireTime: Date) => {
+  return new Date(expireTime).toLocaleString("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+};
+
+const getTimeRemaining = (expireTime: Date) => {
+  const now = new Date();
+  const expire = new Date(expireTime);
+  const timeDiff = expire.getTime() - now.getTime();
+
+  if (timeDiff <= 0) {
+    return "已过期";
+  }
+
+  const hours = Math.floor(timeDiff / (1000 * 60 * 60));
+  const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
+
+  if (hours > 0) {
+    return `剩余 ${hours}小时${minutes}分钟`;
+  } else {
+    return `剩余 ${minutes}分钟`;
+  }
+};
+
+// 获取过期时间相关状态的统一函数
+const getExpireTimeInfo = (expireTime: Date) => {
+  const now = new Date();
+  const expire = new Date(expireTime);
+  const timeDiff = expire.getTime() - now.getTime();
+
+  if (timeDiff <= 0) {
+    return {
+      status: "已过期",
+      statusClass: "text-error",
+      badgeClass: "badge-error",
+    };
+  } else if (timeDiff <= 30 * 60 * 1000) {
+    return {
+      status: "即将过期",
+      statusClass: "text-warning",
+      badgeClass: "badge-warning",
+    };
+  } else if (timeDiff <= 60 * 60 * 1000) {
+    return {
+      status: "临近过期",
+      statusClass: "text-warning",
+      badgeClass: "badge-warning",
+    };
+  } else {
+    return {
+      status: "正常",
+      statusClass: "text-success",
+      badgeClass: "badge-success",
+    };
+  }
+};
+
+// 使用统一函数的便捷方法
+const getExpireTimeStatus = (expireTime: Date) =>
+  getExpireTimeInfo(expireTime).status;
+const getExpireTimeStatusClass = (expireTime: Date) =>
+  getExpireTimeInfo(expireTime).statusClass;
+const getExpireTimeBadgeClass = (expireTime: Date) =>
+  getExpireTimeInfo(expireTime).badgeClass;
+
+// 获取实验板状态相关信息的统一函数
+const getBoardStatusInfo = (status?: BoardStatus) => {
+  switch (status) {
+    case BoardStatus.Available:
+      return { text: "可用", class: "badge-success" };
+    case BoardStatus.Busy:
+      return { text: "使用中", class: "badge-warning" };
+    default:
+      return { text: "未知", class: "badge-neutral" };
+  }
+};
+
+// 使用统一函数的便捷方法
+const getBoardStatusClass = (status?: BoardStatus) =>
+  getBoardStatusInfo(status).class;
+const getBoardStatusText = (status?: BoardStatus) =>
+  getBoardStatusInfo(status).text;
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadUserInfo();
+});
+</script>
+
+<style scoped>
+/* 添加一些自定义样式优化 */
+.card {
+  transition: all 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+  .grid-cols-1.lg\:grid-cols-2 {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/views/UserView.vue

@@ -1,16 +0,0 @@
-<template>
-  <header></header>
-  <main class="relative">
-    <div class="w-screen h-screen flex items-center justify-center">
-      <UploadCard />
-    </div>
-  </main>
-</template>
-
-<script setup lang="ts">
-import UploadCard from "@/components/UploadCard.vue";
-</script>
-
-<style scoped>
-@import "../assets/main.css";
-</style>

src/views/VideoStreamView.vue

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

tsconfig.app.json

@@ -2,7 +2,8 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": [
     "env.d.ts",
-    "src/**/*",
+    "src/**/*.ts",
+    "src/**/*.tsx",
     "src/**/*.vue"
   ],
   "exclude": [

vite.config.ts

@@ -6,6 +6,8 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import tailwindcss from '@tailwindcss/postcss'
 import autoprefixer from 'autoprefixer'
+import Components from 'unplugin-vue-components/vite'
+import RekaResolver from 'reka-ui/resolver'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -20,6 +22,18 @@ export default defineConfig({
     }),
     vueJsx(),
     vueDevTools(),
+    Components(
+      {
+      dts: true,
+      resolvers: [
+        RekaResolver()
+
+        // RekaResolver({
+        //   prefix: '' // use the prefix option to add Prefix to the imported components
+        // })
+      ],
+    }
+    )
   ],
   resolve: {
     alias: {