重构: 切换存储至SQLite，启用INI配置与API Key校验

frontend_integration_example.js

@@ -0,0 +1,237 @@
+// 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. 实现配置保存和加载功能