TargetService/Components/Pages/ParamSetting.razor

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