@tuoyuan/gateway-api-select-config 1.2.1

package/src/components/ApiConfig.vue

@@ -0,0 +1,2264 @@
+<template>
+  <div class="api-config-component">
+    <!-- 左侧：API 树选择器 -->
+    <div class="left-panel">
+      <div class="panel-header">
+        <h3>网关接口配置</h3>
+      </div>
+
+      <!-- API 搜索框 -->
+      <div class="search-box">
+        <input
+          v-model="searchKeyword"
+          type="text"
+          placeholder="搜索接口名称或路径..."
+          class="search-input"
+          @input="handleSearch"
+        />
+        <span class="search-icon">🔍</span>
+      </div>
+
+      <!-- API 树形菜单 -->
+      <div class="section-title">选择 API 接口</div>
+      <div class="api-tree-container">
+        <div v-if="loading" class="loading">加载中...</div>
+        <div v-else-if="error" class="error">{{ error }}</div>
+        <div v-else-if="filteredApiTree.length === 0" class="empty">
+          {{ searchKeyword ? '未找到匹配的接口' : '暂无可用接口' }}
+        </div>
+        <a-tree
+          v-else
+          :data="treeData"
+          :default-expand-all="false"
+          :expanded-keys="expandedKeys"
+          :selected-keys="selectedKeys"
+          :show-line="false"
+          @select="handleTreeSelect"
+          @expand="handleTreeExpand"
+        >
+          <template #title="nodeData">
+            <div class="tree-node-content">
+              <span class="node-name">{{ nodeData.name }}</span>
+              <span v-if="nodeData.apiPath" class="node-path">{{ nodeData.apiPath }}</span>
+              
+            </div>
+          </template>
+    
+        </a-tree>
+      </div>
+    </div>
+
+    <!-- 右侧：配置区域 -->
+    <div class="right-panel">
+      <div v-if="!selectedApi" class="empty-state">
+        <div class="empty-icon">📋</div>
+        <div class="empty-text">请先选择一个 API 接口</div>
+      </div>
+
+      <div v-else class="config-container">
+        <!-- 当前选中的 API 信息 -->
+        <div class="selected-api-info">
+          <div class="section-title">当前选中接口</div>
+          <div class="api-info-card">
+            <div class="info-row">
+              <span class="label">接口名称：</span>
+              <span class="value">{{ selectedApi.name }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">接口路径：</span>
+              <span class="value code">{{ selectedApi.apiPath }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 入参配置区 -->
+        <div class="req-mapping-section">
+          <div class="section-title">
+            入参配置
+            <span class="section-subtitle">（可选）</span>
+          </div>
+          
+          <!-- 显示 API 的请求参数结构 -->
+          <div v-if="currentReqSchema" class="req-schema-hint">
+            <div class="hint-title">📋 接口请求参数：</div>
+            <div class="req-params-list">
+              <div v-for="param in reqSchemaFields" :key="param.key" class="param-item">
+                <span class="param-name">{{ param.name }}</span>
+                <span class="param-type">{{ param.type }}</span>
+                <span v-if="param.required" class="param-required">必填</span>
+                <span v-else class="param-optional">可选</span>
+                <span v-if="param.description" class="param-desc">{{ param.description }}</span>
+              </div>
+            </div>
+            <div v-if="missingRequiredParams.length > 0" class="missing-params-warning">
+              <div class="warning-icon">⚠️</div>
+              <div class="warning-content">
+                <div class="warning-title">缺少必填参数</div>
+                <div class="warning-text">
+                  以下参数是必填的，但未在入参配置中提供：
+                  <strong>{{ missingRequiredParams.join('、') }}</strong>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div class="req-mapping-container">
+            <div class="req-mode-selector">
+              <label title="直接填写固定的参数值，适合不需要动态变化的场景">
+                <input type="radio" v-model="reqMappingMode" value="fixed" />
+                <span>固定值</span>
+                <span class="mode-hint">直接填写固定参数</span>
+              </label>
+              <label title="使用 ${变量名} 语法引用外部变量，适合需要动态传参的场景">
+                <input type="radio" v-model="reqMappingMode" value="template" />
+                <span>模板字符串</span>
+                <span class="mode-hint">支持 ${变量} 语法</span>
+              </label>
+              <label title="使用函数处理参数，可以进行复杂的数据转换和逻辑处理">
+                <input type="radio" v-model="reqMappingMode" value="function" />
+                <span>函数</span>
+                <span class="mode-hint">支持复杂逻辑处理</span>
+              </label>
+            </div>
+
+            <div class="req-mapping-editor">
+              <textarea
+                v-model="reqMappingText"
+                :placeholder="reqMappingPlaceholder"
+                class="json-editor"
+                rows="8"
+              ></textarea>
+              <div v-if="reqMappingError" class="error-message">
+                {{ reqMappingError }}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 数据提取配置 -->
+        <div class="filter-mode-section">
+          <div class="section-title">
+            数据提取配置
+            <span class="section-subtitle">（配置如何从接口数据中提取和映射字段）</span>
+          </div>
+          
+          <!-- 测试接口按钮 -->
+          <div class="test-api-section">
+            <a-button 
+              type="outline" 
+              @click="handleTestApi"
+              :loading="testingApi"
+              status="success"
+            >
+              🔬 测试接口（查看返回数据）
+            </a-button>
+            <span class="test-hint">点击测试接口，查看实际返回的字段结构</span>
+          </div>
+
+          <!-- 显示测试结果 -->
+          <div v-if="testApiResult" class="test-result-panel">
+            <div class="result-header">
+              <span class="result-title">📋 接口返回数据预览</span>
+              <a-button size="mini" type="text" @click="testApiResult = null">关闭</a-button>
+            </div>
+            
+            <!-- 检测到的数组路径 -->
+            <div v-if="detectedArrayPath" class="detected-path">
+              <div class="detected-label">✓ 检测到数据数组路径:</div>
+              <div class="detected-value">{{ detectedArrayPath }}</div>
+              <a-button size="mini" @click="applyDetectedPath">应用此路径</a-button>
+            </div>
+            
+            <!-- 检测到的字段列表 -->
+            <div v-if="detectedFields.length > 0" class="detected-fields">
+              <div class="detected-label">✓ 检测到以下字段（点击快速添加）:</div>
+              <div class="fields-grid">
+                <div 
+                  v-for="field in detectedFields" 
+                  :key="field"
+                  class="field-tag"
+                  @click="quickAddField(field)"
+                >
+                  {{ field }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 显示 Schema 字段（如果有） -->
+          <div v-if="resSchemaFields.length > 0" class="schema-fields-hint">
+            <div class="hint-title">📝 接口定义的字段:</div>
+            <div class="fields-grid">
+              <div 
+                v-for="field in resSchemaFields" 
+                :key="field"
+                class="field-tag clickable"
+                @click="quickAddField(field)"
+                :title="`点击添加 ${field} 字段映射`"
+              >
+                {{ field }}
+              </div>
+            </div>
+            <div class="hint-desc">点击字段名快速添加到映射配置</div>
+          </div>
+          
+          <!-- 数组路径配置 -->
+          <div class="filter-config-item">
+            <label class="config-label">
+              数据路径
+              <span class="label-hint">（可选，留空则自动推断）</span>
+            </label>
+            <input 
+              v-model="filterConfig.arrayPath" 
+              type="text"
+              class="config-input"
+              placeholder="例如: data.list 或 @.data.list（@表示根对象）"
+            />
+            <div class="config-hint">
+              💡 提示: 如果接口返回的数据结构是 { data: { list: [...] } }, 可以填写 "data.list" 或 "@.data.list"
+            </div>
+          </div>
+
+          <!-- 字段映射配置 -->
+          <div class="filter-config-item">
+            <div class="config-label-row">
+              <label class="config-label">字段映射规则</label>
+              <a-button size="mini" type="primary" @click="addFieldMapping">
+                + 添加字段
+              </a-button>
+            </div>
+            
+            <div v-if="filterFieldMappings.length === 0" class="empty-hint">
+              暂无字段映射，点击"添加字段"按钮开始配置，或先测试接口查看可用字段
+            </div>
+            
+            <div v-for="(mapping, index) in filterFieldMappings" :key="index" class="field-mapping-row">
+              <div class="mapping-col mapping-col-target">
+                <label class="col-label">目标字段名</label>
+                <input 
+                  v-model="mapping.target" 
+                  type="text"
+                  class="mapping-input"
+                  placeholder="例如: id, title, content"
+                />
+              </div>
+              <div class="mapping-arrow">→</div>
+              <div class="mapping-col mapping-col-source">
+                <label class="col-label">来源字段（支持多个,逗号分隔）</label>
+                <input 
+                  v-model="mapping.source" 
+                  type="text"
+                  class="mapping-input"
+                  placeholder="例如: content,title,message"
+                />
+              </div>
+              <div class="mapping-col mapping-col-type">
+                <label class="col-label">类型</label>
+                <a-select
+                  v-model="mapping.type"
+                  placeholder="类型"
+                  size="small"
+                  class="mapping-select"
+                >
+                  <a-option value="string">字符串</a-option>
+                  <a-option value="number">数字</a-option>
+                  <a-option value="integer">整数</a-option>
+                  <a-option value="boolean">布尔</a-option>
+                  <a-option value="date">日期</a-option>
+                </a-select>
+              </div>
+              <div class="mapping-col mapping-col-format">
+                <label class="col-label">格式化</label>
+                <a-select
+                  v-model="mapping.format"
+                  placeholder="选择格式化方式"
+                  size="small"
+                  class="mapping-select"
+                  allow-clear
+                >
+                  <a-option value="">无</a-option>
+                  <a-optgroup v-if="mapping.type === 'date'" label="日期格式">
+                    <a-option value="YYYY-MM-DD">YYYY-MM-DD</a-option>
+                    <a-option value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</a-option>
+                    <a-option value="YYYY/MM/DD">YYYY/MM/DD</a-option>
+                    <a-option value="timestamp">时间戳(毫秒)</a-option>
+                    <a-option value="timestamp_s">时间戳(秒)</a-option>
+                  </a-optgroup>
+                  <a-optgroup v-if="mapping.type === 'number' || mapping.type === 'integer'" label="数字格式">
+                    <a-option value="currency">货币(¥)</a-option>
+                    <a-option value="percent">百分比(%)</a-option>
+                  </a-optgroup>
+                  <a-optgroup v-if="mapping.type === 'string'" label="字符串格式">
+                    <a-option value="uppercase">大写</a-option>
+                    <a-option value="lowercase">小写</a-option>
+                    <a-option value="trim">去除空格</a-option>
+                  </a-optgroup>
+                  <a-optgroup label="通用格式">
+                    <a-option value="json">JSON字符串</a-option>
+                  </a-optgroup>
+                </a-select>
+              </div>
+              <a-button 
+                size="mini" 
+                type="text" 
+                status="danger" 
+                @click="removeFieldMapping(index)"
+                class="mapping-delete-btn"
+              >
+                删除
+              </a-button>
+            </div>
+            
+            <div class="config-hint">
+              💡 提示: 来源字段支持多个备选(逗号分隔),系统会自动选择第一个有值的字段。例如: "content,title,message"
+            </div>
+          </div>
+        </div>
+
+        <!-- 保存按钮 -->
+        <div class="action-section">
+          <button @click="handleReset" class="btn-secondary">
+            重置
+          </button>
+          <button @click="handleSave" class="btn-primary" :disabled="!canSave">
+            保存配置
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, watch, onMounted } from 'vue';
+import { Tree as ATree, Select as ASelect, Option as AOption, Optgroup as AOptgroup } from '@arco-design/web-vue';
+import '@arco-design/web-vue/es/tree/style/css.js';
+import '@arco-design/web-vue/es/select/style/css.js';
+import SchemaFieldEditor from './SchemaFieldEditor.vue';
+import { filterApiTree, matchesPattern } from '../utils/treeUtils';
+import { parseReqMapping, validateReqMapping } from '../utils/reqMappingUtils';
+import { extractSchemaFields, buildResSchema } from '../utils/schemaUtils';
+import { extractArray } from '../utils/dataFilters';
+
+// 默认的 API 加载函数
+const defaultApiLoader = async () => {
+  try {
+    // 尝试动态导入 @tuoyuan/gateway-request-lib
+    const { request } = await import('@tuoyuan/gateway-request-lib');
+    
+    const response = await request({
+      api: '/api/system.domain.get_func_tree',
+      params: {},
+      config: {
+        access_token: true
+      }
+    });
+    
+    // gateway-request-lib 会自动解包响应，直接返回 data 部分
+    if (Array.isArray(response)) {
+      return response;
+    } else if (response?.data) {
+      if (Array.isArray(response.data)) {
+        return response.data;
+      } else if (response.data?.list) {
+        return response.data.list;
+      }
+    }
+    
+    return [];
+  } catch (error) {
+    console.error('默认 API 加载器失败:', error);
+    // 返回 null 表示默认加载器不可用，让组件显示错误提示
+    return null;
+  }
+};
+
+export default {
+  name: 'ApiConfig',
+  components: {
+    ATree,
+    ASelect,
+    AOption,
+    AOptgroup,
+    SchemaFieldEditor
+  },
+  props: {
+    // 输出数据结构模板（可选，如果 API 有 res_schema 则使用 API 的）
+    resSchema: {
+      type: Object,
+      required: false,
+      default: null
+    },
+    // 只显示匹配规则的API
+    includePattern: {
+      type: Array,
+      default: () => []
+    },
+    // 排除匹配规则的API
+    excludePattern: {
+      type: Array,
+      default: () => []
+    },
+    // 网关 API 列表接口地址
+    apiListUrl: {
+      type: String,
+      default: ''
+    },
+    // 自定义 API 列表加载函数（可选，如果不提供则使用默认加载器）
+    apiLoader: {
+      type: Function,
+      default: defaultApiLoader
+    },
+    // 初始配置（编辑模式）
+    initialConfig: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ['save', 'change'],
+  setup(props, { emit }) {
+    // 状态
+    const loading = ref(false);
+    const error = ref('');
+    const apiTree = ref([]);
+    const searchKeyword = ref('');
+    const filteredApiTree = ref([]);
+    const selectedApi = ref(null);
+    const selectedKeys = ref([]);
+    const expandedKeys = ref([]);
+    
+    // 入参配置
+    const reqMappingMode = ref('fixed');
+    const reqMappingText = ref('{\n  "page_no": 1,\n  "page_size": 100\n}');
+    const reqMappingError = ref('');
+    
+    // 输出字段路径
+    const fieldPaths = ref({});
+    
+    // 输出字段格式化
+    const fieldFormats = ref({});
+    
+    // 过滤器配置
+    const filterConfig = ref({
+      arrayPath: '',  // 数组提取路径,如 'data.list'
+      fieldMapping: {}  // 字段映射规则
+    });
+    
+    // 字段映射的数组形式(用于界面展示和编辑)
+    const filterFieldMappings = ref([
+      // { target: 'id', source: 'id', type: 'string', format: '' }
+    ]);
+    
+    // 可用的字段类型
+    const fieldTypes = [
+      { value: 'string', label: '字符串' },
+      { value: 'number', label: '数字' },
+      { value: 'integer', label: '整数' },
+      { value: 'boolean', label: '布尔值' },
+      { value: 'date', label: '日期' }
+    ];
+    
+    // 根据类型获取格式化选项
+    const getFormatOptions = (type) => {
+      switch (type) {
+        case 'date':
+          return [
+            { value: '', label: '无' },
+            { value: 'YYYY-MM-DD', label: 'YYYY-MM-DD' },
+            { value: 'YYYY-MM-DD HH:mm:ss', label: 'YYYY-MM-DD HH:mm:ss' },
+            { value: 'YYYY/MM/DD', label: 'YYYY/MM/DD' },
+            { value: 'timestamp', label: '时间戳(毫秒)' },
+            { value: 'timestamp_s', label: '时间戳(秒)' }
+          ];
+        case 'number':
+        case 'integer':
+          return [
+            { value: '', label: '无' },
+            { value: 'currency', label: '货币' },
+            { value: 'percent', label: '百分比' }
+          ];
+        default:
+          return [{ value: '', label: '无' }];
+      }
+    };
+    
+    // 测试接口相关
+    const testingApi = ref(false);
+    const testApiResult = ref(null);
+    const detectedArrayPath = ref('');
+    const detectedFields = ref([]);
+    
+    // 从 res_schema 提取字段列表
+    const resSchemaFields = computed(() => {
+      if (!currentResSchema.value) return [];
+      
+      try {
+        // 如果是数组类型，提取 items.properties 的字段
+        if (currentResSchema.value.type === 'array' && currentResSchema.value.items) {
+          const props = currentResSchema.value.items.properties;
+          if (props && typeof props === 'object') {
+            return Object.keys(props);
+          }
+        }
+        
+        // 如果是对象类型，提取 properties 的字段
+        if (currentResSchema.value.properties && typeof currentResSchema.value.properties === 'object') {
+          return Object.keys(currentResSchema.value.properties);
+        }
+      } catch (err) {
+        console.warn('提取 Schema 字段失败:', err);
+      }
+      
+      return [];
+    });
+    
+    // 提取后的数组预览 (用于测试接口结果显示)
+    const extractedArrayPreview = computed(() => {
+      if (!testApiResult.value || !filterConfig.value.arrayPath) {
+        return null;
+      }
+      
+      try {
+        return extractArray(testApiResult.value, filterConfig.value.arrayPath);
+      } catch (err) {
+        console.error('提取数组失败:', err);
+        return null;
+      }
+    });
+    
+    // 测试接口
+    const handleTestApi = async () => {
+      if (!selectedApi.value) {
+        alert('请先选择一个 API');
+        return;
+      }
+      
+      testingApi.value = true;
+      testApiResult.value = null;
+      detectedArrayPath.value = '';
+      detectedFields.value = [];
+      
+      try {
+        const { request } = await import('@tuoyuan/gateway-request-lib');
+        
+        // 解析入参
+        let params = {};
+        try {
+          if (reqMappingText.value && reqMappingText.value.trim() !== '{}') {
+            const parsed = JSON.parse(reqMappingText.value);
+            // 只取固定值类型的参数用于测试
+            params = Object.fromEntries(
+              Object.entries(parsed).filter(([_, value]) => 
+                typeof value !== 'string' || !value.includes('=>')
+              )
+            );
+          }
+        } catch (err) {
+          console.warn('解析入参失败，使用空参数测试:', err);
+        }
+        
+        // 调用接口并提取业务数据
+        const response = await request({
+          api: selectedApi.value.apiPath,
+          params: params,
+          config: { access_token: true }
+        });
+        
+        const businessData = response.response || response.data || response;
+        testApiResult.value = businessData;
+        
+        // 自动检测数组路径和字段
+        detectArrayPathAndFields(businessData);
+        
+      } catch (error) {
+        console.error('测试接口失败:', error);
+        alert('测试接口失败: ' + error.message);
+      } finally {
+        testingApi.value = false;
+      }
+    };
+    
+    // 检测数组路径和字段（合并两个函数）
+    const detectArrayPathAndFields = (data) => {
+      const possiblePaths = [];
+      let targetArray = [];
+      
+      // 递归查找所有数组
+      const findArrays = (obj, path = '') => {
+        if (Array.isArray(obj)) {
+          possiblePaths.push({ path: path || '@', array: obj });
+          return;
+        }
+        if (obj && typeof obj === 'object') {
+          Object.keys(obj).forEach(key => {
+            findArrays(obj[key], path ? `${path}.${key}` : key);
+          });
+        }
+      };
+      
+      findArrays(data);
+      
+      // 优先选择包含 list, data, items 的路径
+      const bestMatch = possiblePaths.find(p => 
+        p.path.includes('list') || p.path.includes('data') || p.path.includes('items')
+      ) || possiblePaths[0];
+      
+      if (bestMatch) {
+        detectedArrayPath.value = bestMatch.path;
+        targetArray = bestMatch.array;
+      }
+      
+      // 从数组第一个元素提取字段
+      if (targetArray.length > 0 && typeof targetArray[0] === 'object') {
+        detectedFields.value = Object.keys(targetArray[0]);
+      }
+    };
+    
+    // 快速添加字段
+    const quickAddField = (fieldName) => {
+      if (filterFieldMappings.value.some(m => m.target === fieldName)) {
+        alert(`字段 "${fieldName}" 已存在`);
+        return;
+      }
+      filterFieldMappings.value.push({ 
+        target: fieldName, 
+        source: fieldName,
+        type: 'string',
+        format: ''
+      });
+    };
+    
+    // 应用检测到的路径
+    const applyDetectedPath = () => {
+      filterConfig.value.arrayPath = detectedArrayPath.value;
+    };
+    
+    // 格式化 JSON
+    const formatJson = (data) => {
+      try {
+        return JSON.stringify(data, null, 2);
+      } catch (err) {
+        return String(data);
+      }
+    };
+    
+    // 添加/移除字段映射
+    const addFieldMapping = () => {
+      filterFieldMappings.value.push({ 
+        target: '', 
+        source: '',
+        type: 'string',
+        format: ''
+      });
+    };
+    
+    const removeFieldMapping = (index) => {
+      filterFieldMappings.value.splice(index, 1);
+    };
+    
+    // 监听入参模式切换,自动更新示例
+    watch(reqMappingMode, (newMode) => {
+      // 使用默认示例(不依赖 req_schema,避免复杂性)
+      const examples = {
+        fixed: '{\n  "page_no": 1,\n  "page_size": 100\n}',
+        template: '{\n  "page_no": "{{pageNum}}",\n  "page_size": "{{pageSize}}"\n}',
+        function: '{\n  "page_no": "(ctx) => Number(ctx.pageNum) || 1",\n  "page_size": "(ctx) => Number(ctx.pageSize) || 10"\n}'
+      };
+      reqMappingText.value = examples[newMode];
+    });
+    
+    // 将 filterFieldMappings 转换为 filterConfig.fieldMapping
+    watch(filterFieldMappings, (mappings) => {
+      const fieldMapping = {};
+      const fieldTypes = {};
+      const fieldFormats = {};
+      
+      mappings.forEach(mapping => {
+        if (mapping.target && mapping.source) {
+          // 将逗号分隔的源字段转换为数组
+          const sources = mapping.source.split(',').map(s => s.trim()).filter(s => s);
+          if (sources.length === 1) {
+            fieldMapping[mapping.target] = sources[0];
+          } else if (sources.length > 1) {
+            fieldMapping[mapping.target] = sources;
+          }
+          
+          // 保存类型和格式化配置
+          if (mapping.type) {
+            fieldTypes[mapping.target] = mapping.type;
+          }
+          if (mapping.format) {
+            fieldFormats[mapping.target] = mapping.format;
+          }
+        }
+      });
+      
+      filterConfig.value.fieldMapping = fieldMapping;
+      filterConfig.value.fieldTypes = fieldTypes;
+      filterConfig.value.fieldFormats = fieldFormats;
+    }, { deep: true });
+    
+    // 转换为 Tree 组件数据格式
+    const treeData = computed(() => {
+      return convertToTreeData(filteredApiTree.value);
+    });
+    
+    // 转换树数据为 Arco Tree 格式
+    const convertToTreeData = (nodes, parentPath = '') => {
+      return nodes.map((node, index) => {
+        // 生成唯一的 key: 使用路径 + 索引 + id 确保唯一性
+        const uniqueKey = parentPath ? `${parentPath}-${index}-${node.id}` : `${index}-${node.id}`;
+        
+        return {
+          key: uniqueKey,
+          title: node.name,
+          name: node.name,
+          apiPath: node.apiPath,
+          isLeaf: node.isLeaf,
+          _raw: node._raw,
+          selectable: !!node.isLeaf,
+          // 不要禁用非叶子节点,否则无法展开
+          children: node.children && node.children.length > 0 
+            ? convertToTreeData(node.children, uniqueKey) 
+            : undefined
+        };
+      });
+    };
+    
+    // 收集所有节点的 key (用于搜索时全部展开)
+    const getAllNodeKeys = (nodes, parentPath = '', result = []) => {
+      nodes.forEach((node, index) => {
+        const uniqueKey = parentPath ? `${parentPath}-${index}-${node.id}` : `${index}-${node.id}`;
+        
+        if (!node.isLeaf) {
+          result.push(uniqueKey);
+        }
+        
+        if (node.children && node.children.length > 0) {
+          getAllNodeKeys(node.children, uniqueKey, result);
+        }
+      });
+      
+      return result;
+    };
+    
+    // 默认展开的节点：搜索时展开所有，否则只展开第一级
+    const defaultExpandedKeys = computed(() => {
+      if (searchKeyword.value) {
+        // 搜索时展开所有父节点
+        return getAllNodeKeys(filteredApiTree.value);
+      } else {
+        // 没有搜索时只展开第一级
+        return filteredApiTree.value.map(item => item.id);
+      }
+    });
+    
+    // 监听 filteredApiTree 和 searchKeyword 的变化,更新展开的节点
+    watch([filteredApiTree, searchKeyword], () => {
+      expandedKeys.value = defaultExpandedKeys.value;
+    }, { immediate: true });
+    
+    // 处理树节点选择
+    const handleTreeSelect = (selectedKeysList, data) => {
+      if (selectedKeysList.length === 0) return;
+      
+      const selectedKey = selectedKeysList[0];
+      const node = data.node;
+      
+      // 只处理叶子节点
+      if (node.isLeaf) {
+        selectedKeys.value = [selectedKey];
+        handleSelectApi(node);
+      }
+    };
+    
+    // 处理树节点展开/折叠
+    const handleTreeExpand = (expandedKeysList) => {
+      console.log('Tree expand event:', expandedKeysList);
+      expandedKeys.value = expandedKeysList;
+    };
+    
+    // 检测 schema 是否不完整
+    const isSchemaIncomplete = computed(() => {
+      if (!currentResSchema.value) return false;
+      
+      // 检查是否有 items 但 properties 为空
+      if (currentResSchema.value.items) {
+        const props = currentResSchema.value.items.properties;
+        return !props || Object.keys(props).length === 0;
+      }
+      
+      // 检查顶层 properties 是否为空
+      const props = currentResSchema.value.properties;
+      return !props || Object.keys(props).length === 0;
+    });
+    
+    // 当前使用的 resSchema（优先使用 API 的 res_schema，否则使用 props.resSchema）
+    const currentResSchema = ref(props.resSchema);
+    
+    // 当前使用的 reqSchema（从 API 的 req_schema 提取）
+    const currentReqSchema = ref(null);
+    
+    // 请求参数字段列表
+    const reqSchemaFields = computed(() => {
+      if (!currentReqSchema.value) return [];
+      return extractSchemaFields(currentReqSchema.value);
+    });
+
+    const reqMappingPlaceholder = computed(() => {
+      // 默认示例
+      const placeholders = {
+        fixed: '{\n  "page_no": 1,\n  "page_size": 100\n}',
+        template: '{\n  "page_no": "{{pageNum}}",\n  "page_size": "{{pageSize}}"\n}',
+        function: '{\n  "page_no": "(ctx) => Number(ctx.pageNum) || 1",\n  "page_size": "(ctx) => Number(ctx.pageSize) || 10"\n}'
+      };
+      return placeholders[reqMappingMode.value];
+    });
+
+    const canSave = computed(() => {
+      if (!selectedApi.value) return false;
+      
+      // 需要至少配置一个字段映射
+      return filterFieldMappings.value.some(m => m.target && m.source) && !reqMappingError.value;
+    });
+
+    // 检测缺少的必填参数
+    const missingRequiredParams = computed(() => {
+      if (!currentReqSchema.value || !reqSchemaFields.value.length) return [];
+      
+      // 解析当前的 reqMapping
+      let currentParams = {};
+      try {
+        if (reqMappingText.value && reqMappingText.value.trim() !== '{}') {
+          currentParams = JSON.parse(reqMappingText.value);
+        }
+      } catch (err) {
+        return [];
+      }
+      
+      // 找出缺少的必填参数
+      const missing = reqSchemaFields.value
+        .filter(field => field.required)
+        .filter(field => {
+          const value = currentParams[field.name];
+          return value === undefined || value === null || value === '';
+        })
+        .map(field => field.name);
+      
+      return missing;
+    });
+
+    // 加载 API 列表
+    const loadApiList = async () => {
+      loading.value = true;
+      error.value = '';
+      
+      try {
+        let data;
+        
+        // 优先使用 apiLoader（包括默认的）
+        if (props.apiLoader) {
+          data = await props.apiLoader();
+          
+          // 如果默认加载器返回 null，说明不可用
+          if (data === null) {
+            error.value = '请配置 apiListUrl 或提供 apiLoader 函数';
+            loading.value = false;
+            return;
+          }
+        } 
+        // 其次使用配置的 URL
+        else if (props.apiListUrl) {
+          const response = await fetch(props.apiListUrl);
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+          }
+          const result = await response.json();
+          
+          // 适配网关接口返回格式：{ code, msg, data: { list } }
+          if (result.code === 10000 && result.data && result.data.list) {
+            data = result.data.list;
+          } else if (Array.isArray(result)) {
+            // 如果直接返回数组
+            data = result;
+          } else if (result.data && Array.isArray(result.data)) {
+            // 如果 data 是数组
+            data = result.data;
+          } else {
+            throw new Error(result.msg || '接口返回数据格式错误');
+          }
+        }
+        
+        // 转换数据结构：将 funcs 数组转换为 children
+        const transformTree = (nodes) => {
+          return nodes.map(node => {
+            const transformed = {
+              id: String(node.id || node.func_id),
+              name: node.name || node.func_name,
+              children: [],
+              expanded: false
+            };
+            
+            // 处理子分类
+            if (node.children && node.children.length > 0) {
+              transformed.children.push(...transformTree(node.children));
+            }
+            
+            // 处理 funcs 数组 - 将其转换为子节点
+            if (node.funcs && node.funcs.length > 0) {
+              const funcNodes = node.funcs.map(func => {
+                // 构建显示用的路径（用于过滤和显示）
+                let displayPath = func.api || func.path || func.func_path || func.api_path;
+                
+                // 如果没有现成的路径，尝试构建
+                if (!displayPath && func.meta_domain && func.tag) {
+                  // 查找 meta_domain 对应的域名
+                  const findDomainName = (nodes, domainId) => {
+                    for (const n of nodes) {
+                      if (n.id === domainId) return n.name;
+                      if (n.children) {
+                        const found = findDomainName(n.children, domainId);
+                        if (found) return found;
+                      }
+                    }
+                    return null;
+                  };
+                  
+                  const domainName = findDomainName(data, func.meta_domain);
+                  displayPath = `/api/${func.tag}`;
+                }
+                
+                // 如果还是没有，使用名称
+                if (!displayPath) {
+                  displayPath = func.name || '(未知路径)';
+                }
+                
+                return {
+                  id: String(func.id || func.func_id),
+                  name: func.name || func.func_name || '(未命名)',
+                  apiPath: displayPath,  // 显示用路径
+                  isLeaf: true,
+                  _raw: func
+                };
+              });
+              
+              transformed.children.push(...funcNodes);
+            }
+            
+            // 如果没有子节点，也不是 func，标记为叶子
+            if (transformed.children.length === 0 && !node.funcs && !node.children) {
+              transformed.isLeaf = true;
+              transformed.apiPath = node.path || node.name;
+            }
+            
+            return transformed;
+          });
+        };
+        
+        apiTree.value = transformTree(data);
+        applyFilters();
+      } catch (err) {
+        error.value = '加载 API 列表失败：' + err.message;
+        console.error('加载 API 列表失败：', err);
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // 应用过滤规则
+    const applyFilters = () => {
+      let filtered = [...apiTree.value];
+      
+      // 应用 include 和 exclude 规则
+      if (props.includePattern.length > 0 || props.excludePattern.length > 0) {
+        filtered = filterByPatterns(filtered, props.includePattern, props.excludePattern);
+      }
+      
+      // 应用搜索关键词
+      if (searchKeyword.value) {
+        filtered = filterApiTree(filtered, searchKeyword.value);
+      }
+      
+      filteredApiTree.value = filtered;
+    };
+
+    // 根据 pattern 过滤（简化版）
+    const filterByPatterns = (tree, includePatterns, excludePatterns) => {
+      const filterNode = (node) => {
+        const isLeaf = node.isLeaf || node.apiPath;
+        
+        // 叶子节点：应用过滤规则
+        if (isLeaf && node.apiPath) {
+          // 先排除，再包含
+          if (excludePatterns.some(p => matchesPattern(node.apiPath, p))) return null;
+          if (includePatterns.length > 0 && !includePatterns.some(p => matchesPattern(node.apiPath, p))) return null;
+          return node;
+        }
+        
+        // 分类节点：递归过滤子节点
+        if (node.children?.length > 0) {
+          const filteredChildren = node.children.map(filterNode).filter(Boolean);
+          return filteredChildren.length > 0 ? { ...node, children: filteredChildren } : null;
+        }
+        
+        return null;
+      };
+      
+      return tree.map(filterNode).filter(Boolean);
+    };
+
+    // 搜索处理
+    const handleSearch = () => {
+      applyFilters();
+    };
+
+    // 提取 res_schema（简化复杂的嵌套逻辑）
+    const extractResSchema = (apiResSchema, apiPath) => {
+      if (!apiResSchema) return null;
+      
+      let targetSchema = apiResSchema;
+      let listPath = null;
+      
+      // 按优先级查找 list 路径
+      const paths = [
+        { check: () => apiResSchema.properties?.data?.properties?.list, path: '@.data.list', schema: () => apiResSchema.properties.data.properties.list },
+        { check: () => apiResSchema.properties?.list, path: '@.list', schema: () => apiResSchema.properties.list },
+        { check: () => apiResSchema.type === 'array', path: '@', schema: () => apiResSchema },
+      ];
+      
+      for (const { check, path, schema } of paths) {
+        if (check()) {
+          listPath = path;
+          targetSchema = schema();
+          break;
+        }
+      }
+      
+      // 如果没找到但是列表接口，推测结构
+      if (!listPath && apiPath?.includes('list') && apiResSchema.properties?.data) {
+        listPath = '@.data.list';
+        targetSchema = { type: 'array', items: { type: 'object', properties: {} } };
+      }
+      
+      // 构建最终 schema
+      if (listPath && targetSchema?.type === 'array') {
+        return {
+          type: 'array',
+          x_path: listPath,
+          items: targetSchema.items
+        };
+      } else if (listPath) {
+        return { ...targetSchema, x_path: listPath };
+      }
+      
+      return targetSchema;
+    };
+
+    // 选择 API
+    const handleSelectApi = (api) => {
+      selectedApi.value = api;
+      
+      // 重置所有配置
+      reqMappingText.value = '{\n  "page_no": 1,\n  "page_size": 100\n}';
+      reqMappingError.value = '';
+      fieldPaths.value = {};
+      fieldFormats.value = {};
+      filterConfig.value = { arrayPath: '', fieldMapping: {} };
+      filterFieldMappings.value = [];
+      testApiResult.value = null;
+      detectedArrayPath.value = '';
+      detectedFields.value = [];
+      
+      // 提取 schema
+      const apiResSchema = api._raw?.res_schema || api._raw?.schema?.res_schema || api.res_schema;
+      const apiReqSchema = api._raw?.req_schema || api._raw?.schema?.req_schema || api.req_schema;
+      
+      currentResSchema.value = extractResSchema(apiResSchema, api.apiPath) || props.resSchema;
+      currentReqSchema.value = apiReqSchema;
+      
+      // 自动设置 arrayPath
+      if (currentResSchema.value?.x_path) {
+        filterConfig.value.arrayPath = currentResSchema.value.x_path.replace(/^@\./, '');
+      }
+      
+      // 自动填充默认参数
+      if (apiReqSchema && reqSchemaFields.value.length > 0) {
+        const defaultParams = Object.fromEntries(
+          reqSchemaFields.value.map(f => [
+            f.name,
+            (f.type === 'number' || f.type === 'integer') ? (f.name.includes('page') ? 1 : 0) :
+            f.type === 'boolean' ? true : ''
+          ])
+        );
+        reqMappingText.value = JSON.stringify(defaultParams, null, 2);
+      }
+      
+      emit('change', { api, config: null, resSchema: currentResSchema.value });
+    };
+
+    // 更新字段路径
+    const handleUpdateFieldPath = ({ key, path }) => {
+      fieldPaths.value[key] = path;
+    };
+
+    // 更新字段格式化
+    const handleUpdateFieldFormat = ({ key, format }) => {
+      fieldFormats.value[key] = format;
+    };
+    
+    // 验证入参配置
+    watch([reqMappingText, reqMappingMode], () => {
+      try {
+        const parsed = parseReqMapping(reqMappingText.value, reqMappingMode.value);
+        const validation = validateReqMapping(parsed, reqMappingMode.value);
+        reqMappingError.value = validation.error || '';
+      } catch (err) {
+        reqMappingError.value = err.message;
+      }
+    });
+
+    // 保存配置
+    const handleSave = () => {
+      if (!canSave.value) return;
+      
+      try {
+        // 解析入参配置
+        let reqMapping = null;
+        if (reqMappingText.value.trim() !== '{}' && reqMappingText.value.trim() !== '') {
+          reqMapping = parseReqMapping(reqMappingText.value, reqMappingMode.value);
+        }
+        
+        // 直接使用 apiPath，不做任何转换
+        const realApiPath = selectedApi.value.apiPath;
+        
+        // 构建过滤器配置
+        const config = {
+          apiPath: realApiPath,
+          reqMapping: reqMapping,
+          mode: 'filter',
+          filterConfig: {
+            arrayPath: filterConfig.value.arrayPath || null,
+            fieldMapping: filterConfig.value.fieldMapping,
+            fieldTypes: filterConfig.value.fieldTypes || {},
+            fieldFormats: filterConfig.value.fieldFormats || {}
+          }
+        };
+        
+        emit('save', config);
+      } catch (err) {
+        alert('保存失败：' + err.message);
+        console.error('保存配置失败：', err);
+      }
+    };
+
+    // 重置
+    const handleReset = () => {
+      if (confirm('确定要重置所有配置吗？')) {
+        selectedApi.value = null;
+        reqMappingText.value = '{\n  "page_no": 1,\n  "page_size": 100\n}';
+        reqMappingError.value = '';
+        fieldPaths.value = {};
+        fieldFormats.value = {};
+        filterConfig.value = {
+          arrayPath: '',
+          fieldMapping: {},
+          fieldTypes: {},
+          fieldFormats: {}
+        };
+        filterFieldMappings.value = [];
+        searchKeyword.value = '';
+        applyFilters();
+      }
+    };
+
+    // 加载初始配置
+    const loadInitialConfig = () => {
+      if (!props.initialConfig) return;
+      
+      const config = props.initialConfig;
+      
+      // TODO: 根据 apiPath 查找并选中对应的 API
+      // 这需要在 API 列表加载完成后执行
+      
+      if (config.reqMapping) {
+        // 检测入参配置类型
+        const firstValue = Object.values(config.reqMapping)[0];
+        if (typeof firstValue === 'string' && firstValue.includes('${')) {
+          reqMappingMode.value = 'template';
+        } else if (typeof firstValue === 'string' && firstValue.includes('=>')) {
+          reqMappingMode.value = 'function';
+        } else {
+          reqMappingMode.value = 'fixed';
+        }
+        reqMappingText.value = JSON.stringify(config.reqMapping, null, 2);
+      }
+      
+      // 加载 Filter 配置
+      if (config.filterConfig) {
+        const fc = config.filterConfig;
+        filterConfig.value.arrayPath = fc.arrayPath || '';
+        filterConfig.value.fieldMapping = fc.fieldMapping || {};
+        filterConfig.value.fieldTypes = fc.fieldTypes || {};
+        filterConfig.value.fieldFormats = fc.fieldFormats || {};
+        
+        // 转换为数组形式用于编辑
+        filterFieldMappings.value = [];
+        Object.entries(fc.fieldMapping || {}).forEach(([target, source]) => {
+          const sourceStr = Array.isArray(source) ? source.join(',') : source;
+          filterFieldMappings.value.push({
+            target,
+            source: sourceStr,
+            type: fc.fieldTypes?.[target] || 'string',
+            format: fc.fieldFormats?.[target] || ''
+          });
+        });
+      }
+    };
+
+    // 生命周期
+    onMounted(() => {
+      loadApiList();
+      loadInitialConfig();
+    });
+
+    // 监听 props 变化
+    watch([() => props.includePattern, () => props.excludePattern], () => {
+      applyFilters();
+    }, { deep: true });
+
+    // 暴露给模板使用的状态和方法
+    return {
+      loading,                    // API 列表加载状态
+      error,                      // 错误信息
+      searchKeyword,              // 搜索关键词（双向绑定）
+      filteredApiTree,            // 过滤后的 API 树结构
+      treeData,                   // Tree 组件数据
+      defaultExpandedKeys,        // 默认展开的 keys
+      expandedKeys,               // 当前展开的 keys (受控)
+      selectedApi,                // 当前选中的 API
+      selectedKeys,               // 选中的 keys
+      filterConfig,               // 过滤器配置对象
+      filterFieldMappings,        // 字段映射数组（用于界面展示）
+      testingApi,                 // 测试接口中
+      testApiResult,              // 测试接口结果
+      extractedArrayPreview,      // 提取后的数组预览
+      detectedArrayPath,          // 检测到的数组路径
+      detectedFields,             // 检测到的字段列表
+      resSchemaFields,            // 从 res_schema 提取的字段
+      reqMappingMode,             // 入参配置模式：fixed/template/function
+      reqMappingText,             // 入参配置文本内容（双向绑定）
+      reqMappingError,            // 入参配置验证错误信息
+      reqMappingPlaceholder,      // 入参配置输入框占位符
+      fieldPaths,                 // 字段路径映射 { fieldKey: path }
+      fieldFormats,               // 字段格式化配置 { fieldKey: format }
+      currentResSchema,           // 当前使用的响应结构 schema
+      currentReqSchema,           // 当前使用的请求参数 schema
+      reqSchemaFields,            // 请求参数字段列表
+      isSchemaIncomplete,         // schema 是否不完整（用于显示警告）
+      canSave,                    // 是否可以保存（所有必填字段已配置）
+      missingRequiredParams,      // 缺少的必填参数列表
+      handleSearch,               // 搜索处理方法
+      handleTreeSelect,           // Tree 选择处理方法
+      handleTreeExpand,           // Tree 展开/折叠处理方法
+      handleUpdateFieldPath,      // 更新字段路径方法
+      handleUpdateFieldFormat,    // 更新字段格式化方法
+      handleTestApi,              // 测试接口方法
+      applyDetectedPath,          // 应用检测到的路径
+      quickAddField,              // 快速添加字段
+      formatJson,                 // 格式化 JSON
+      addFieldMapping,            // 添加字段映射
+      removeFieldMapping,         // 移除字段映射
+      handleSave,                 // 保存方法
+      handleReset                 // 重置方法
+    };
+  }
+};
+</script>
+
+<style scoped>
+.api-config-component {
+  display: flex;
+  gap: 24px;
+  height: 700px;
+  background: #f5f7fa;
+  border-radius: 12px;
+  padding: 24px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* 左侧面板 */
+.left-panel {
+  flex: 0 0 380px;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  height: 100%;
+  overflow: hidden;
+}
+
+.panel-header h3 {
+  margin: 0 0 20px 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1f2937;
+  letter-spacing: -0.3px;
+}
+
+/* 右侧面板 */
+.right-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  height: 100%;
+  overflow-y: auto;
+}
+
+.config-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+/* 空状态 */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #9ca3af;
+}
+
+.empty-icon {
+  font-size: 64px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-text {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+/* 标题样式 */
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-subtitle {
+  font-size: 12px;
+  font-weight: normal;
+  color: #9ca3af;
+  margin-left: 4px;
+}
+
+/* 搜索框 */
+.search-box {
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px 36px 10px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-size: 14px;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  background: #f9fafb;
+}
+
+.search-input:hover {
+  border-color: #d1d5db;
+  background: #ffffff;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: #667eea;
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.search-icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 16px;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* API 树容器 */
+.api-tree-container {
+  flex: 1;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #ffffff;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+}
+
+.loading,
+.error,
+.empty {
+  text-align: center;
+  padding: 40px 20px;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.error {
+  color: #ef4444;
+  background: #fef2f2;
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.empty {
+  color: #9ca3af;
+}
+
+/* 选中的 API 信息 */
+.selected-api-info {
+  margin-bottom: 0;
+}
+
+.api-info-card {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  color: #334155;
+}
+
+.info-row {
+  margin-bottom: 10px;
+  font-size: 13px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.info-row:last-child {
+  margin-bottom: 0;
+}
+
+.info-row .label {
+  font-weight: 600;
+  color: #64748b;
+  min-width: 70px;
+  flex-shrink: 0;
+}
+
+.info-row .value {
+  font-weight: 400;
+  flex: 1;
+  word-break: break-all;
+  color: #334155;
+}
+
+.info-row .value.code {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  background: #ffffff;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  border: 1px solid #e2e8f0;
+  color: #0f172a;
+}
+
+/* 入参配置 */
+.req-mapping-section {
+  margin-bottom: 0;
+}
+
+.req-schema-hint {
+  margin-bottom: 16px;
+  padding: 16px;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-radius: 8px;
+  border: 2px solid #bae6fd;
+}
+
+.hint-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0369a1;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.req-params-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.param-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #ffffff;
+  border-radius: 6px;
+  border: 1px solid #e0f2fe;
+  font-size: 13px;
+}
+
+.param-name {
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  font-weight: 600;
+  color: #0c4a6e;
+  min-width: 100px;
+}
+
+.param-type {
+  font-size: 11px;
+  color: #0284c7;
+  background: #e0f2fe;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  font-weight: 600;
+}
+
+.param-required {
+  font-size: 11px;
+  color: #dc2626;
+  background: #fee2e2;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.param-optional {
+  font-size: 11px;
+  color: #6b7280;
+  background: #f3f4f6;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.param-desc {
+  color: #64748b;
+  font-size: 12px;
+  flex: 1;
+}
+
+/* 缺少必填参数警告 */
+.missing-params-warning {
+  margin-top: 12px;
+  padding: 14px;
+  background: #fef3c7;
+  border-radius: 8px;
+  border: 2px solid #f59e0b;
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.warning-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.warning-content {
+  flex: 1;
+}
+
+.warning-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #92400e;
+  margin-bottom: 6px;
+}
+
+.warning-text {
+  font-size: 13px;
+  color: #78350f;
+  line-height: 1.6;
+}
+
+.warning-text strong {
+  color: #dc2626;
+  font-weight: 700;
+}
+
+.req-mode-selector {
+  margin-bottom: 12px;
+  display: flex;
+  gap: 8px;
+  background: #f9fafb;
+  padding: 6px;
+  border-radius: 8px;
+  border: 1px solid #e5e7eb;
+}
+
+.req-mode-selector label {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 10px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  color: #6b7280;
+  font-weight: 500;
+  position: relative;
+}
+
+.req-mode-selector label:hover {
+  background: #ffffff;
+  color: #374151;
+}
+
+.req-mode-selector label:has(input[type="radio"]:checked) {
+  background: #ffffff;
+  color: #667eea;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.req-mode-selector input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.req-mode-selector .mode-hint {
+  font-size: 11px;
+  color: #9ca3af;
+  font-weight: 400;
+  text-align: center;
+  line-height: 1.3;
+}
+
+.req-mode-selector label:has(input[type="radio"]:checked) .mode-hint {
+  color: #818cf8;
+}
+
+.json-editor {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  resize: vertical;
+  box-sizing: border-box;
+  background: #f9fafb;
+  transition: all 0.2s ease;
+}
+
+.json-editor:hover {
+  border-color: #d1d5db;
+  background: #ffffff;
+}
+
+.json-editor:focus {
+  outline: none;
+  border-color: #667eea;
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.error-message {
+  margin-top: 8px;
+  color: #ef4444;
+  font-size: 12px;
+  padding: 10px;
+  background: #fef2f2;
+  border-radius: 6px;
+  border-left: 3px solid #ef4444;
+}
+
+/* 输出结构配置 */
+.res-schema-section {
+  margin-bottom: 0;
+}
+
+.res-schema-container {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  background: #f9fafb;
+}
+
+/* 过滤器配置 */
+.filter-mode-section {
+  margin-bottom: 24px;
+}
+
+/* 操作按钮 */
+.action-section {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  padding-top: 8px;
+  margin-top: auto;
+}
+
+.btn-primary,
+.btn-secondary {
+  padding: 10px 24px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  letter-spacing: 0.2px;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-primary:disabled {
+  background: #d1d5db;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.btn-secondary {
+  background: #ffffff;
+  color: #6b7280;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.btn-secondary:hover {
+  color: #374151;
+  border-color: #d1d5db;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.btn-secondary:active {
+  transform: translateY(0);
+}
+
+/* 滚动条美化 */
+.api-tree-container::-webkit-scrollbar,
+.right-panel::-webkit-scrollbar {
+  width: 6px;
+}
+
+.api-tree-container::-webkit-scrollbar-track,
+.right-panel::-webkit-scrollbar-track {
+  background: #f3f4f6;
+  border-radius: 3px;
+}
+
+.api-tree-container::-webkit-scrollbar-thumb,
+.right-panel::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+  transition: background 0.2s ease;
+}
+
+.api-tree-container::-webkit-scrollbar-thumb:hover,
+.right-panel::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+/* 响应式 */
+@media (max-width: 1024px) {
+  .api-config-component {
+    flex-direction: column;
+  }
+
+  .left-panel {
+    flex: 0 0 auto;
+    max-height: 400px;
+  }
+
+  .right-panel {
+    flex: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .api-config-component {
+    padding: 16px;
+  }
+
+  .left-panel,
+  .right-panel {
+    padding: 16px;
+  }
+
+  .action-section {
+    flex-direction: column-reverse;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    width: 100%;
+  }
+}
+
+/* Arco Tree 自定义样式 */
+.api-tree-container :deep(.arco-tree) {
+  background: #ffffff;
+  padding: 8px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.api-tree-container :deep(.arco-tree-node) {
+  margin: 0;
+  padding: 0;
+}
+
+/* 默认节点样式 */
+.api-tree-container :deep(.arco-tree-node-title) {
+  padding: 8px 12px !important;
+  border-radius: 4px !important;
+  transition: all 0.2s ease !important;
+  background: #ffffff !important;
+  color: #6b7280 !important;
+  font-size: 13px !important;
+  min-height: 36px !important;
+  margin-bottom: 2px !important;
+  border: 1px solid #f3f4f6 !important;
+}
+
+/* 一级父节点 */
+.api-tree-container :deep(.arco-tree > .arco-tree-node > .arco-tree-node-title) {
+  background: #f9fafb !important;
+  font-weight: 700 !important;
+  font-size: 15px !important;
+  padding: 14px 16px !important;
+  margin-bottom: 6px !important;
+  border-radius: 8px !important;
+  color: #111827 !important;
+  border: 1px solid #e5e7eb !important;
+}
+
+/* hover 效果 */
+.api-tree-container :deep(.arco-tree-node-title:hover) {
+  background: #f3f4f6 !important;
+  border-color: #d1d5db !important;
+}
+
+.api-tree-container :deep(.arco-tree > .arco-tree-node > .arco-tree-node-title:hover) {
+  background: #f3f4f6 !important;
+}
+
+/* 选中状态 */
+.api-tree-container :deep(.arco-tree-node-selected > .arco-tree-node-title) {
+  background: #dbeafe !important;
+  color: #1e40af !important;
+  font-weight: 600 !important;
+  border-color: #93c5fd !important;
+}
+
+/* 展开/收起图标 */
+.api-tree-container :deep(.arco-tree-node-switcher) {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  color: #9ca3af;
+}
+
+.api-tree-container :deep(.arco-tree > .arco-tree-node .arco-tree-node-switcher) {
+  width: 20px !important;
+  height: 20px !important;
+  color: #374151 !important;
+}
+
+/* 一级节点的子节点容器 */
+.api-tree-container :deep(.arco-tree > .arco-tree-node > .arco-tree-node-children) {
+  padding: 12px !important;
+  margin: 8px 0 12px 24px !important;
+  background: #f8f9fa !important;
+  border-radius: 8px !important;
+  border: 2px solid #e9ecef !important;
+}
+
+/* 移除默认的选择框和缩进 */
+.api-tree-container :deep(.arco-tree-node-checkbox) {
+  display: none !important;
+}
+
+.api-tree-container :deep(.arco-tree-node-indent) {
+  width: 0 !important;
+}
+
+/* 树节点自定义内容 */
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 12px;
+  flex: 1;
+}
+
+.tree-node-content .node-name {
+  flex: 1;
+  font-size: inherit;
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-node-content .node-path {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: #6b7280;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  background: #f3f4f6;
+  padding: 3px 8px;
+  border-radius: 4px;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.api-tree-container :deep(.arco-tree-node-selected .node-path) {
+  background: #60a5fa;
+  color: #ffffff;
+  font-weight: 600;
+}
+
+/* 子节点容器 */
+.api-tree-container :deep(.arco-tree-node-children) {
+  padding-left: 0;
+  margin-top: 4px;
+}
+
+/* 过滤器配置样式 */
+.filter-config-item {
+  margin-bottom: 20px;
+}
+
+.config-label {
+  display: inline-block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+.config-label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.label-hint {
+  font-weight: normal;
+  color: #9ca3af;
+  font-size: 12px;
+  margin-left: 4px;
+}
+
+.config-input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+  background: #f9fafb;
+}
+
+.config-input:hover {
+  border-color: #d1d5db;
+  background: #ffffff;
+}
+
+.config-input:focus {
+  outline: none;
+  border-color: #667eea;
+  background: #ffffff;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.config-hint {
+  margin-top: 8px;
+  padding: 10px 12px;
+  background: #f0f9ff;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #0369a1;
+  line-height: 1.5;
+  border-left: 3px solid #38bdf8;
+}
+
+.empty-hint {
+  padding: 24px;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 13px;
+  background: #f9fafb;
+  border-radius: 6px;
+  border: 1px dashed #d1d5db;
+}
+
+.field-mapping-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 12px;
+  padding: 14px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.field-mapping-row:hover {
+  border-color: #93c5fd;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.mapping-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.mapping-col-target {
+  flex: 1.5;
+}
+
+.mapping-col-source {
+  flex: 2;
+}
+
+.mapping-col-type {
+  flex: 1;
+}
+
+.mapping-col-format {
+  flex: 1.2;
+}
+
+.mapping-select {
+  width: 100%;
+}
+
+.mapping-delete-btn {
+  padding-top: 24px !important;
+  flex-shrink: 0;
+}
+
+.col-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.mapping-input {
+  padding: 8px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
+
+.mapping-input:hover {
+  border-color: #d1d5db;
+}
+
+.mapping-input:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.mapping-arrow {
+  display: flex;
+  align-items: center;
+  font-size: 18px;
+  color: #9ca3af;
+  font-weight: bold;
+  padding-top: 24px;
+  flex-shrink: 0;
+}
+
+.field-mapping-row >>> .arco-btn,
+.field-mapping-row ::v-deep .arco-btn,
+.field-mapping-row :deep(.arco-btn) {
+  padding-top: 24px;
+  flex-shrink: 0;
+}
+
+/* 测试接口相关样式 */
+.test-api-section {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #f0fdf4;
+  border-radius: 8px;
+  border: 2px solid #86efac;
+}
+
+.test-hint {
+  font-size: 12px;
+  color: #15803d;
+  font-weight: 500;
+}
+
+.test-result-panel {
+  margin-bottom: 24px;
+  background: #ffffff;
+  border: 2px solid #93c5fd;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px;
+  background: #dbeafe;
+  border-bottom: 1px solid #93c5fd;
+}
+
+.result-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1e40af;
+}
+
+.detected-path {
+  padding: 14px 18px;
+  background: #fef3c7;
+  border-bottom: 1px solid #fbbf24;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.detected-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #92400e;
+  min-width: 140px;
+}
+
+.detected-value {
+  flex: 1;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  font-size: 13px;
+  color: #78350f;
+  background: #ffffff;
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid #fbbf24;
+}
+
+.detected-fields {
+  padding: 14px 18px;
+  background: #f0f9ff;
+  border-bottom: 1px solid #bae6fd;
+}
+
+.detected-fields .detected-label {
+  margin-bottom: 10px;
+  color: #0369a1;
+}
+
+.fields-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.field-tag {
+  padding: 6px 12px;
+  background: #ffffff;
+  border: 1px solid #93c5fd;
+  border-radius: 6px;
+  font-size: 12px;
+  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+  color: #1e40af;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+
+.field-tag.clickable {
+  cursor: pointer;
+}
+
+.field-tag.clickable:hover {
+  background: #dbeafe;
+  border-color: #3b82f6;
+  transform: translateY(-2px);
+}
+
+.schema-fields-hint {
+  margin-bottom: 20px;
+  padding: 14px;
+  background: #f0f9ff;
+  border-radius: 8px;
+  border: 2px solid #bae6fd;
+}
+
+.schema-fields-hint .hint-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #0369a1;
+  margin-bottom: 10px;
+}
+
+.schema-fields-hint .hint-desc {
+  font-size: 12px;
+  color: #0c4a6e;
+  margin-top: 8px;
+}
+</style>