UAV-CO2/frontend_integration_example.js

// GasFlux前端配置下拉选项集成示例
// 使用方法：将 frontend_config_options.json 加载到前端应用中

// 示例：React组件集成
import React, { useState, useEffect } from 'react';
import configOptions from './frontend_config_options.json';

const GasFluxConfigForm = () => {
  const [config, setConfig] = useState({});
  const [configOptionsData, setConfigOptionsData] = useState(null);

  useEffect(() => {
    // 加载配置选项
    setConfigOptionsData(configOptions);
  }, []);

  const handleSelectChange = (categoryId, optionKey, value) => {
    setConfig(prev => ({
      ...prev,
      [categoryId]: {
        ...prev[categoryId],
        [optionKey]: value
      }
    }));

    // 应用空间模式默认值
    if (categoryId === 'strategies' && optionKey === 'spatial') {
      applySpatialModeDefaults(value);
    }
  };

  const applySpatialModeDefaults = (spatialMode) => {
    const defaults = configOptionsData?.validation?.spatial_mode_defaults?.[spatialMode];
    if (defaults) {
      setConfig(prev => ({
        ...prev,
        semivariogram_settings: {
          ...prev.semivariogram_settings,
          ...defaults.semivariogram_settings
        },
        ordinary_kriging_settings: {
          ...prev.ordinary_kriging_settings,
          ...defaults.ordinary_kriging_settings
        }
      }));
    }
  };

  const renderSelect = (category, option) => {
    const currentValue = config[category.id]?.[option.key] || option.default;

    return (
      <div key={option.key} className="config-option">
        <label>
          {option.name} ({option.nameEn})
          {option.required && <span className="required">*</span>}
        </label>
        <select
          value={currentValue}
          onChange={(e) => handleSelectChange(category.id, option.key, e.target.value)}
          required={option.required}
        >
          <option value="">请选择...</option>
          {option.options.map(opt => (
            <option key={opt.value} value={opt.value}>
              {opt.label} - {opt.labelEn}
            </option>
          ))}
        </select>
        <div className="option-description">
          {option.description} ({option.descriptionEn})
        </div>
        {option.options.find(opt => opt.value === currentValue)?.description && (
          <div className="value-description">
            {option.options.find(opt => opt.value === currentValue).description}
          </div>
        )}
      </div>
    );
  };

  const renderBoolean = (category, option) => {
    const currentValue = config[category.id]?.[option.key] ?? option.default;

    return (
      <div key={option.key} className="config-option">
        <label>
          {option.name} ({option.nameEn})
          {option.required && <span className="required">*</span>}
        </label>
        <div className="boolean-options">
          {option.options.map(opt => (
            <label key={opt.value} className="radio-label">
              <input
                type="radio"
                name={`${category.id}_${option.key}`}
                value={opt.value}
                checked={currentValue === opt.value}
                onChange={(e) => handleSelectChange(category.id, option.key, JSON.parse(e.target.value))}
              />
              {opt.label} - {opt.labelEn}
              <div className="option-desc">{opt.description}</div>
            </label>
          ))}
        </div>
      </div>
    );
  };

  if (!configOptionsData) {
    return <div>加载配置选项中...</div>;
  }

  return (
    <div className="gasflux-config-form">
      <h2>GasFlux 配置设置</h2>

      {configOptionsData.categories.map(category => (
        <div key={category.id} className="config-category">
          <h3>{category.name} ({category.nameEn})</h3>
          <p className="category-description">{category.description}</p>

          {category.options.map(option => {
            if (option.type === 'select') {
              return renderSelect(category, option);
            } else if (option.type === 'boolean') {
              return renderBoolean(category, option);
            }
            return null;
          })}
        </div>
      ))}

      <div className="config-preview">
        <h3>当前配置预览</h3>
        <pre>{JSON.stringify(config, null, 2)}</pre>
      </div>

      <button
        type="button"
        onClick={() => console.log('保存配置:', config)}
        className="save-config-btn"
      >
        保存配置
      </button>
    </div>
  );
};

export default GasFluxConfigForm;

// CSS样式示例
const styles = `
.gasflux-config-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.config-category {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.config-option {
  margin-bottom: 20px;
}

.config-option label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
}

.config-option select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.boolean-options {
  display: flex;
  gap: 20px;
}

.radio-label {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.option-description, .value-description {
  margin-top: 5px;
  font-size: 0.9em;
  color: #666;
}

.required {
  color: red;
}

.config-preview {
  margin-top: 30px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.config-preview pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.save-config-btn {
  background: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

.save-config-btn:hover {
  background: #0056b3;
}
`;

// 使用说明：
// 1. 将 frontend_config_options.json 放在项目中
// 2. 在React组件中导入并使用
// 3. 根据需要调整样式和布局
// 4. 添加表单验证逻辑
// 5. 实现配置保存和加载功能