add track pages

Components/Layout/NavMenu.razor

@@ -1,6 +1,6 @@
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">TargetService</a>
+        <a class="navbar-brand" href="">靶机设备管理系统</a>
     </div>
 </div>
 
@@ -10,7 +10,7 @@
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> 主页
             </NavLink>
         </div>
 
@@ -21,8 +21,13 @@
         </div>
 
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
+            <NavLink class="nav-link" href="paramSetting">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> 参数设置
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="control">
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> 空轨控制
             </NavLink>
         </div>
     </nav>

Components/Pages/Control.razor

@@ -0,0 +1,365 @@
+@page "/control"
+@using Pages
+@using System.Numerics
+@using EGFramework
+@implements IEGFramework
+@rendermode InteractiveServer
+
+<PageTitle>空轨控制</PageTitle>
+
+<h1>空轨控制</h1>
+
+<div class="control-panel">
+    <div class="status-display">
+        <p>当前位置: <strong>@dataActionStatus.Position</strong> / 25</p>
+        <p>旋转角度: <strong>@dataActionStatus.Rotate</strong>°</p>
+        <p>当前定位点: <strong>@(currentLocationName ?? "无")</strong></p>
+    </div>
+
+    <div class="control-section">
+        <h3>位置控制</h3>
+        <div class="slider-container">
+            <div class="position-markers">
+                @foreach (var marker in locationMarkers)
+                {
+                    <div class="position-marker" 
+                         style="left: @((marker.Key / 25.0) * 100)%; 
+                                 background-color: @GetMarkerColor(marker.Value)"
+                         title="@marker.Key - @GetLocationName(marker.Key)">
+                    </div>
+                }
+            </div>
+            <input type="range" 
+                   class="form-range location-slider" 
+                   min="0" 
+                   max="25" 
+                   step="1" 
+                   value="@dataActionStatus.Position" 
+                   @oninput="OnPositionSliderInput"
+                   disabled="@isMoving" />
+            <span class="slider-value">@dataActionStatus.Position</span>
+        </div>
+        <button class="btn btn-secondary mt-2" @onclick="MoveToPosition" disabled="@isMoving">
+            @(isMoving ? "移动中..." : "开始移动")
+        </button>
+        <br />
+        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.EnableTrack" >启用通讯
+        </button>
+        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.StartTrack" >前进
+        </button>
+        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.BackTrack" >后退
+        </button>
+        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.StartSlowTrack" >缓速前进
+        </button>
+        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.BackSlowTrack" >缓速后退
+        </button>
+        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.StopTrack" >停止
+        </button>
+        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.BreakTrack" >刹车
+        </button>
+        <br />
+        <button class="btn btn-secondary mt-2" @onclick="StartScanColor" >开启扫描
+        </button>
+        <button class="btn btn-secondary mt-2" @onclick="@ModelTrackControl.StopScanColor" >结束扫描
+        </button>
+        
+
+    </div>
+
+    <div class="control-section">
+        <h3>快速定位</h3>
+        <div class="location-buttons">
+            @foreach (var location in locationMarkers)
+            {
+                <button class="btn location-btn" 
+                        style="background-color: @GetMarkerColor(location.Value); color: white"
+                        @onclick="e => MoveToLocation(location.Key)"
+                        disabled="@isMoving">
+                    @GetLocationName(location.Key)
+                </button>
+            }
+        </div>
+    </div>
+
+    <div class="control-section">
+        <h3>颜色显示</h3>
+        <div class="color-display" style="background-color: @GetColorValue(CurrentColor)">
+            <span>RGB: @((int)(CurrentColor.X * 255)), @((int)(CurrentColor.Y * 255)), @((int)(CurrentColor.Z * 255))
+            HSV: @((int)(CurrentHSV.X)), @((int)(CurrentHSV.Y)), @((int)(CurrentHSV.Z))
+            </span>
+        </div>
+    </div>
+
+    <div class="control-section">
+        <h3>靶机控制</h3>
+        <button class="btn @(isTargetActive ? "btn-danger" : "btn-success")" 
+                @onclick="ToggleTarget"
+                disabled="@isTargetOperationInProgress">
+            @if (isTargetOperationInProgress)
+            {
+                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                <span>@(isTargetActive ? "停止中..." : "启动中...")</span>
+            }
+            else
+            {
+                <span>@(isTargetActive ? "停止靶机" : "启动靶机")</span>
+            }
+        </button>
+    </div>
+
+    @if (isMoving)
+    {
+        <div class="moving-overlay">
+            <div class="spinner-border text-primary" role="status">
+                <span class="visually-hidden">移动中...</span>
+            </div>
+            <p>空轨移动中，请等待...</p>
+        </div>
+    }
+</div>
+
+@code {
+    private DataActionStatus dataActionStatus = new DataActionStatus { Position = 0, Rotate = 0 };
+    private bool isMoving = false;
+    private bool isTargetActive = false;
+    private bool isTargetOperationInProgress = false;
+    private int targetPosition;
+    private string? currentLocationName;
+    private Vector3 CurrentColor = new Vector3(0.5f, 0.5f, 0.5f); // 默认灰色
+    private Vector3 CurrentHSV = new Vector3();
+
+    public ModelTrackControl ModelTrackControl { set; get; }
+
+    // 定义定位点字典
+    private Dictionary<int, Vector3> locationMarkers = new Dictionary<int, Vector3>
+    {
+        { 0, new Vector3(0.3f, 0.8f, 0.12f) },     // 浅绿 - 起点
+        { 7, new Vector3(0.1f, 0.5f, 0.2f) },    // 深绿色 - 中间点1
+        { 10, new Vector3(0.0f, 0.5f, 1.0f) },   // 蓝色 - 中间点2
+        { 15, new Vector3(0.5f, 0.2f, 0.75f) },   // 紫色 - 中间点3
+        { 25, new Vector3(0.8f, 0.2f, 0.5f) }    // 洋红色 - 终点
+    };
+
+    protected override void OnInitialized()
+    {
+        UpdateCurrentLocationName();
+        ModelTrackControl = this.GetModule<ModelTrackControl>();
+    }
+
+    private void OnPositionSliderInput(ChangeEventArgs e)
+    {
+        if (int.TryParse(e.Value?.ToString(), out int value))
+        {
+            // 寻找最近的定位点
+            var nearestLocation = locationMarkers.Keys
+                .OrderBy(x => Math.Abs(x - value))
+                .First();
+            
+            targetPosition = nearestLocation;
+            UpdateCurrentLocationName(targetPosition);
+        }
+    }
+
+    
+    private async Task StartScanColor(){
+        if(ModelTrackControl.IsScanning) return;
+        ModelTrackControl.StartScanColor();
+        StateHasChanged();
+        while(ModelTrackControl.IsScanning){
+            // 更新颜色显示
+            UpdateCurrentColor();
+            
+            StateHasChanged();
+            await Task.Delay(50);
+        }
+    }
+
+    private async Task MoveToPosition()
+    {
+        if (isMoving) return;
+        
+        isMoving = true;
+        StateHasChanged();
+        
+        // 模拟移动过程
+        int steps = Math.Abs(targetPosition - dataActionStatus.Position);
+        int direction = targetPosition > dataActionStatus.Position ? 1 : -1;
+        
+        while(ModelTrackControl.MoveStatus != StatusTrack.Stop)
+        {
+            if(targetPosition!=dataActionStatus.Position){
+                dataActionStatus.Position += direction;
+            }
+            
+            // 更新颜色显示
+            UpdateCurrentColor();
+            
+            StateHasChanged();
+            await Task.Delay(50);
+        }
+        
+        UpdateCurrentLocationName();
+        isMoving = false;
+    }
+
+    private async Task MoveToLocation(int position)
+    {
+        targetPosition = position;
+        this.ModelTrackControl.MoveToPosition(position);
+        await MoveToPosition();
+    }
+
+    private async Task ToggleTarget()
+    {
+        if (isTargetOperationInProgress) return;
+        
+        isTargetOperationInProgress = true;
+        StateHasChanged();
+        
+        
+        
+        isTargetActive = !isTargetActive;
+        if(isTargetActive){
+            this.ModelTrackControl.StartTarget();
+        }else{
+            this.ModelTrackControl.RevertTarget();
+        }
+        // 模拟靶机操作延迟
+        await Task.Delay(2000);
+        
+        dataActionStatus.Rotate = isTargetActive ? 90 : 0;
+        
+        isTargetOperationInProgress = false;
+        StateHasChanged();
+    }
+
+    private string GetMarkerColor(Vector3 colorVector)
+    {
+        // 将Vector3转换为CSS颜色值
+        return $"rgb({(int)(colorVector.X * 255)}, {(int)(colorVector.Y * 255)}, {(int)(colorVector.Z * 255)})";
+    }
+    
+    private string GetColorValue(Vector3 colorVector)
+    {
+        // 将Vector3转换为CSS颜色值
+        return $"rgb({(int)(colorVector.X * 255)}, {(int)(colorVector.Y * 255)}, {(int)(colorVector.Z * 255)})";
+    }
+
+    private string GetLocationName(int position)
+    {
+        return locationMarkers.ContainsKey(position) ? 
+            $"定位点 {position}" : 
+            position.ToString();
+    }
+
+    private void UpdateCurrentLocationName(int? position = null)
+    {
+        int pos = position ?? dataActionStatus.Position;
+        currentLocationName = locationMarkers.ContainsKey(pos) ? 
+            $"定位点 {pos}" : 
+            null;
+    }
+    
+    private void UpdateCurrentColor()
+    {
+        // 根据传感器检测到的颜色进行更新
+        CurrentColor = this.ModelTrackControl.GetColor();
+        CurrentHSV = this.ModelTrackControl.GetColorHSV();
+    }
+}
+
+<style>
+    .control-panel {
+        position: relative;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+        border: 1px solid #dee2e6;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    .control-section {
+        margin-bottom: 25px;
+    }
+
+    .slider-container {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        position: relative;
+        margin-bottom: 15px;
+    }
+
+    .position-markers {
+        position: relative;
+        height: 20px;
+        width: 100%;
+    }
+
+    .position-marker {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        transform: translateX(-50%);
+        top: 4px;
+        border: 2px solid white;
+        box-shadow: 0 0 2px rgba(0,0,0,0.5);
+    }
+
+    .location-slider {
+        width: 100%;
+    }
+
+    .slider-value {
+        text-align: center;
+        font-weight: bold;
+        margin-top: 5px;
+    }
+
+    .location-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        justify-content: center;
+    }
+
+    .location-btn {
+        flex: 1;
+        min-width: 120px;
+        border: none;
+    }
+
+    .color-display {
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 5px;
+        color: white;
+        text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
+        font-weight: bold;
+    }
+
+    .status-display {
+        background-color: #f8f9fa;
+        padding: 15px;
+        border-radius: 5px;
+        margin-bottom: 20px;
+    }
+
+    .moving-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(255, 255, 255, 0.8);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        z-index: 100;
+    }
+</style>

Components/Pages/Home.razor

@@ -1,7 +1,82 @@
 @page "/"
 
-<PageTitle>Home</PageTitle>
+<PageTitle>博裕空轨管理平台</PageTitle>
 
-<h1>Hello, world!</h1>
+<div class="container mt-4">
+    <div class="row">
+        <div class="col-12">
+            <div class="jumbotron bg-primary text-white p-4 rounded">
+                <h1 class="display-4">欢迎使用</h1>
+                <h2>博裕空轨设备管理系统</h2>
+                <p class="lead">高效、精准的空轨设备控制与监控解决方案</p>
+            </div>
+        </div>
+    </div>
 
-Welcome to your new app.
+    <div class="row mt-4">
+        <div class="col-md-12">
+            <div class="card">
+                <div class="card-header bg-light">
+                    <h3><i class="fas fa-info-circle"></i>系统功能简介</h3>
+                </div>
+                <div class="card-body">
+                    <p>博裕空轨设备管理系统是一款先进的自动化控制解决方案，专为工业空轨设备设计。系统提供精确的位置控制、靶机角度调节、运动参数配置和实时状态监控功能。</p>
+                    
+                    <div class="row mt-4">
+                        <div class="col-md-12">
+                            <h5>位置控制功能</h5>
+                            <p>系统可以精确控制空轨设备前进和后退到指定位置，实现毫米级精确定位，满足各种工业场景的定位需求。</p>
+                        </div>
+                        <div class="col-md-12">
+                            <h5>靶机测转功能</h5>
+                            <p>空轨下方的靶机可以进行0-90度的精确测转，用户可通过系统界面直观地设置和监控靶机角度。</p>
+                        </div>
+                        <div class="col-md-12">
+                            <h5>运动参数配置</h5>
+                            <p>系统提供完善的运动参数配置功能，包括速度、加速度、减速度等参数设置，用户可根据实际需求灵活调整。</p>
+                        </div>
+                        <div class="col-md-12">
+                            <h5>色标传感器监控</h5>
+                            <p>实时查看空轨当前色标传感器的颜色状态，系统提供直观的颜色显示和状态提示功能。</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mt-4">
+        <div class="col-md-12 text-center">
+            <div class="alert alert-info">
+                <h5>立即开始使用系统</h5>
+                <p>请使用右侧导航菜单访问各个功能模块，或联系山东博裕获取相关帮助。</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    .jumbotron {
+        background: linear-gradient(135deg, #2c3e50, #3498db) !important;
+    }
+    
+    .card {
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        border: none;
+        border-radius: 8px;
+    }
+    
+    .card-header {
+        border-radius: 8px 8px 0 0 !important;
+    }
+    
+    h5 {
+        color: #2c3e50;
+        margin-bottom: 15px;
+    }
+    
+    h5 i {
+        color: #3498db;
+        margin-right: 10px;
+    }
+</style>

Components/Pages/ParamSetting.razor

@@ -0,0 +1,386 @@
+@page "/paramSetting"
+@using EGFramework
+@using Pages
+@using System.Numerics
+@implements IEGFramework
+@rendermode InteractiveServer
+
+<PageTitle>参数设置</PageTitle>
+<h1>参数设置</h1>
+
+<EditForm Model="@DataSettings" OnValidSubmit="@HandleValidSubmit" Context="EditContext">
+    <DataAnnotationsValidator />
+    <ValidationSummary />
+
+    <div class="settings-container">
+
+        <h2>基本设置</h2>
+
+        <div class="form-group">
+            <label for="deviceId">设备编号:</label>
+            <InputNumber id="deviceId" class="form-control" @bind-Value="@DataSettings.DeviceID" />
+            <ValidationMessage For="@(() => DataSettings.DeviceID)" />
+        </div>
+
+        <div class="form-group">
+            <label for="moveSpeed">移动速度 (0-1000):</label>
+            <InputNumber id="moveSpeed" class="form-control" @bind-Value="@DataSettings.MoveSpeed" />
+            <ValidationMessage For="@(() => DataSettings.MoveSpeed)" />
+        </div>
+
+        <div class="form-group">
+            <label for="moveLowSpeed">低速移动速度 (0-500):</label>
+            <InputNumber id="moveLowSpeed" class="form-control" @bind-Value="@DataSettings.MoveLowSpeed" />
+            <ValidationMessage For="@(() => DataSettings.MoveLowSpeed)" />
+        </div>
+
+        <div class="form-group">
+            <label for="rotateSpeed">旋转速度 (0-360):</label>
+            <InputNumber id="rotateSpeed" class="form-control" @bind-Value="@DataSettings.RotateSpeed" />
+            <ValidationMessage For="@(() => DataSettings.RotateSpeed)" />
+        </div>
+
+        <div class="form-group">
+            <label for="timeoutStop">超时停止 (毫秒):</label>
+            <InputNumber id="timeoutStop" class="form-control" @bind-Value="@DataSettings.TimeoutStop" />
+            <ValidationMessage For="@(() => DataSettings.TimeoutStop)" />
+        </div>
+
+        <div class="form-group">
+            <label for="colorOffset">颜色偏移量 (0.0-5.0):</label>
+            <InputNumber id="colorOffset" class="form-control" @bind-Value="@DataSettings.ColorOffset" step="0.01" />
+            <ValidationMessage For="@(() => DataSettings.ColorOffset)" />
+        </div>
+
+            <div class="color-mapping-container">
+            <h3>颜色映射设置</h3>
+            
+            <div class="color-mapping-list">
+                <!-- 现有颜色映射项 -->
+                @foreach (var color in DataSettings.ColorMapping)
+                {
+                    <div class="color-mapping-item">
+                        <div class="form-group">
+                            <label>位置ID</label>
+                            <input type="number" class="form-control" value="@color.Key" readonly />
+                        </div>
+                        <div class="form-group">
+                            <label>色相0-360</label>
+                            <input type="number" class="form-control" value="@color.Value.X" min="0" max="360" />
+                        </div>
+                        <div class="form-group">
+                            <label>饱和度</label>
+                            <input type="number" class="form-control" value="@color.Value.Y" min="0" max="100" />
+                        </div>
+                        <div class="form-group">
+                            <label>明度</label>
+                            <input type="number" class="form-control" value="@color.Value.Z" min="0" max="100" />
+                        </div>
+                        <button type="button" class="btn btn-danger delete-btn" title="删除" @onclick="e=>RemoveColorMapping(color.Key)">
+                            <i class="delete-icon">×</i>
+                        </button>
+                    </div>
+                }
+            </div>
+
+            <!-- 添加新项目按钮 -->
+            <div class="add-color-mapping">
+                <InputNumber type="number" class="form-control" @bind-Value="@newColorKey" min="0" max="200" />
+                <button type="button" class="btn btn-primary add-btn" @onclick="AddColorMapping">
+                    <i class="add-icon">+</i> 添加颜色映射
+                </button>
+            </div>
+        </div>
+
+        <h2>动作状态</h2>
+        
+        <div class="form-group">
+            <label for="position">位置 (0-25):</label>
+            <input id="position" class="form-control" value="@DataActionStatus.Position" readonly />
+            <ValidationMessage For="@(() => DataActionStatus.Position)" />
+        </div>
+
+        <div class="form-group">
+            <label for="rotate">旋转角度 (0-90):</label>
+            <input id="rotate" class="form-control" value="@DataActionStatus.Rotate" readonly />
+            <ValidationMessage For="@(() => DataActionStatus.Rotate)" />
+        </div>
+
+        <div class="form-actions">
+            <button type="submit" class="btn btn-primary">保存设置</button>
+            <button type="button" class="btn btn-secondary" @onclick="ResetToDefaults">恢复默认</button>
+        </div>
+    </div>
+</EditForm>
+
+@code {
+    private DataSetting DataSettings { get; set; }
+    private DataActionStatus DataActionStatus { get; set; } 
+    public int newColorKey { set; get; }
+    private EditContext? EditContext;
+
+    protected override void OnInitialized()
+    {
+        // 这里应该从数据存储加载设置
+        LoadSettings();
+        EditContext = new EditContext(DataSettings);
+    }
+
+    private void LoadSettings()
+    {
+        // 模拟加载设置数据
+        DataSettings = this.GetModule<ModelParamSetting>().Setting;
+        DataActionStatus = this.GetModule<ModelActionStatus>().Status;
+    }
+
+    private void HandleValidSubmit()
+    {
+        // 这里应该保存设置到数据存储
+        this.GetModule<ModelParamSetting>().Save(DataSettings);
+        Console.WriteLine("设置已保存");
+        // 显示成功消息或导航到其他页面
+    }
+
+    private void ResetToDefaults()
+    {
+        DataSettings = this.GetModule<ModelParamSetting>().CreateDefault();
+        EditContext = new EditContext(DataSettings);
+    }
+
+    private void AddColorMapping()
+    {
+        if (!DataSettings.ColorMapping.ContainsKey(newColorKey))
+        {
+            DataSettings.ColorMapping[newColorKey] = new Vector3(0, 0, 0);
+            StateHasChanged();
+        }
+    }
+
+    private void RemoveColorMapping(int key)
+    {
+        if (DataSettings.ColorMapping.ContainsKey(key))
+        {
+            DataSettings.ColorMapping.Remove(key);
+            StateHasChanged();
+        }
+    }
+}
+
+<style>
+    .settings-container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+        background-color: #f8f9fa;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    .form-group {
+        margin-bottom: 1.5rem;
+    }
+
+    .form-group label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 0.5rem;
+        border: 1px solid #ced4da;
+        border-radius: 0.25rem;
+    }
+
+    .small-input {
+        width: 80px;
+        display: inline-block;
+        margin-right: 0.5rem;
+    }
+
+    .color-mapping-container {
+        margin-bottom: 1.5rem;
+    }
+
+    .color-mapping-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        padding: 0.5rem;
+        background-color: white;
+        border-radius: 0.25rem;
+    }
+
+    .color-mapping-item span {
+        margin-right: 1rem;
+        min-width: 60px;
+    }
+
+    .add-color-mapping {
+        display: flex;
+        align-items: center;
+        margin-top: 1rem;
+    }
+
+    .add-color-mapping input {
+        width: 100px;
+        margin-right: 1rem;
+    }
+
+    .form-actions {
+        margin-top: 2rem;
+        display: flex;
+        gap: 1rem;
+    }
+
+    .btn {
+        padding: 0.5rem 1rem;
+        border: none;
+        border-radius: 0.25rem;
+        cursor: pointer;
+    }
+
+    .btn-primary {
+        background-color: #007bff;
+        color: white;
+    }
+
+    .btn-secondary {
+        background-color: #6c757d;
+        color: white;
+    }
+
+    .btn-danger {
+        background-color: #dc3545;
+        color: white;
+    }
+
+    h2 {
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid #dee2e6;
+    }
+
+    .color-mapping-container {
+        margin: 20px 0;
+        padding: 20px;
+        background-color: #f8f9fa;
+        border-radius: 8px;
+        border: 1px solid #dee2e6;
+    }
+
+    .color-mapping-container h3 {
+        margin-bottom: 20px;
+        color: #495057;
+        font-size: 1.25rem;
+        font-weight: 600;
+    }
+
+    .color-mapping-list {
+        margin-bottom: 20px;
+    }
+
+    .color-mapping-item {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr auto;
+        gap: 12px;
+        align-items: end;
+        padding: 15px;
+        margin-bottom: 12px;
+        background-color: white;
+        border-radius: 6px;
+        border: 1px solid #e9ecef;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+    }
+
+    .form-group {
+        margin-bottom: 0;
+    }
+
+    .form-group label {
+        display: block;
+        margin-bottom: 5px;
+        font-size: 0.875rem;
+        color: #6c757d;
+        font-weight: 500;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #ced4da;
+        border-radius: 4px;
+        font-size: 0.875rem;
+        transition: border-color 0.15s ease-in-out;
+    }
+
+    .form-control:focus {
+        border-color: #007bff;
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+    }
+
+    .delete-btn {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: none;
+        border-radius: 4px;
+        background-color: #dc3545;
+        color: white;
+        cursor: pointer;
+        transition: background-color 0.15s ease-in-out;
+    }
+
+    .delete-btn:hover {
+        background-color: #c82333;
+    }
+
+    .delete-icon {
+        font-size: 1.25rem;
+        font-weight: bold;
+        line-height: 1;
+    }
+
+    .add-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 6px;
+        background-color: #007bff;
+        color: white;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background-color 0.15s ease-in-out;
+    }
+
+    .add-btn:hover {
+        background-color: #0056b3;
+    }
+
+    .add-icon {
+        font-size: 1.1rem;
+        font-weight: bold;
+        line-height: 1;
+    }
+
+    /* 响应式设计 */
+    @@media (max-width: 768px) {
+        .color-mapping-item {
+            grid-template-columns: 1fr;
+            gap: 8px;
+        }
+        
+        .delete-btn {
+            width: 100%;
+            margin-top: 10px;
+        }
+    }
+</style>

Program.cs

@@ -1,4 +1,10 @@
 using TargetService.Components;
+using EGFramework;
+
+EGBlazorController MainApp = new EGBlazorController();
+MainApp.Init();
+MainApp.Start();
+
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -12,12 +18,17 @@ var app = builder.Build();
 if (!app.Environment.IsDevelopment())
 {
     app.UseExceptionHandler("/Error", createScopeForErrors: true);
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
 }
 
+app.UseHttpsRedirection();
+
 app.UseStaticFiles();
 app.UseAntiforgery();
 
 app.MapRazorComponents<App>()
     .AddInteractiveServerRenderMode();
 
-app.Run();
+app.Run("http://0.0.0.0:6556");
+

Properties/launchSettings.json

@@ -13,7 +13,7 @@
         "commandName": "Project",
         "dotnetRunMessages": true,
         "launchBrowser": true,
-        "applicationUrl": "http://localhost:5257",
+        "applicationUrl": "http://localhost:6556",
         "environmentVariables": {
           "ASPNETCORE_ENVIRONMENT": "Development"
         }