@tuoyuan/gateway-api-select-config 1.2.1

package/src/components/SchemaFieldEditor.vue

@@ -0,0 +1,572 @@
+<template>
+  <div class="schema-field-editor">
+    <a-empty v-if="fields.length === 0" description="未定义输出字段">
+      <template #image>
+        <icon-file />
+      </template>
+      <div class="empty-desc">
+        此 API 的 schema 定义不完整（缺少 items.properties）。<br>
+        保存后将自动返回完整的原始数据，无需配置字段映射。
+      </div>
+    </a-empty>
+    
+    <div v-else class="field-list">
+      <div
+        v-for="field in fields"
+        :key="field.key"
+        class="field-item"
+      >
+        <!-- 两列布局：左侧标签，右侧值 -->
+        <a-row :gutter="8" class="field-row">
+          <!-- 左侧：字段信息 -->
+          <a-col :span="5" class="field-label-col">
+            <!-- 字段名和标签在同一行 -->
+            <div class="field-header">
+              <span class="field-name">{{ field.label || field.name }}</span>
+              <div class="field-tags">
+                <a-tag color="arcoblue" size="small" class="type-tag">
+                  {{ field.type }}
+                </a-tag>
+                <a-tag v-if="field.required" color="red" size="mini" class="required-tag">
+                  必填
+                </a-tag>
+              </div>
+            </div>
+          </a-col>
+          
+          <!-- 右侧：输入和选择区域 - 统一容器 -->
+          <a-col :span="19" class="field-value-col">
+            <div class="value-container">
+              <!-- 路径输入 -->
+              <div class="input-wrapper">
+                <a-input
+                  :model-value="fieldPaths[field.key] || ''"
+                  @input="handleInput(field.key, $event)"
+                  :placeholder="getPlaceholder(field)"
+                  allow-clear
+                  class="path-input"
+                >
+                  <template #prefix>
+                    <icon-link />
+                  </template>
+                  <template #suffix>
+                    <a-button
+                      v-if="getExamples(field).length > 0"
+                      @click="showExamples(field)"
+                      type="text"
+                      size="small"
+                      class="example-trigger-btn"
+                    >
+                      <template #icon>
+                        <icon-bulb />
+                      </template>
+                    </a-button>
+                  </template>
+                </a-input>
+              </div>
+              
+              <!-- 格式化配置 -->
+              <a-row v-if="shouldShowFormat(field)" :gutter="12" align="center" class="format-row">
+                <a-col :span="4">
+                  <div class="format-label">格式化</div>
+                </a-col>
+                <a-col :span="20">
+                  <a-select
+                    :model-value="fieldFormats[field.key] || ''"
+                    @change="handleFormatChange(field.key, $event)"
+                    placeholder="选择格式化方式"
+                    allow-clear
+                    size="small"
+                    class="format-select"
+                  >
+                    <a-option value="">无</a-option>
+                    <a-optgroup v-if="isDateField(field)" 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="isNumberField(field)" label="数字格式">
+                      <a-option value="number">数字</a-option>
+                      <a-option value="integer">整数</a-option>
+                      <a-option value="currency">货币</a-option>
+                      <a-option value="percent">百分比</a-option>
+                    </a-optgroup>
+                    <a-optgroup label="通用格式">
+                      <a-option value="string">字符串</a-option>
+                      <a-option value="boolean">布尔值</a-option>
+                      <a-option value="json">JSON</a-option>
+                    </a-optgroup>
+                  </a-select>
+                </a-col>
+              </a-row>
+            </div>
+          </a-col>
+        </a-row>
+        
+        <!-- 示例栏：单独一行，浅灰背景 -->
+        <div v-if="activeExampleField === field.key" class="examples-section">
+          <div class="examples-header">
+            <icon-bulb class="examples-icon" />
+            <span class="examples-title">常用路径示例</span>
+          </div>
+          <div class="examples-list">
+            <div
+              v-for="(example, idx) in getExamples(field)"
+              :key="idx"
+              class="example-item"
+              @click="applyExample(field.key, example.path)"
+            >
+              <code class="example-code">{{ example.path }}</code>
+              <span class="example-desc">{{ example.desc }}</span>
+            </div>
+          </div>
+          <div class="examples-footer">
+            点击示例可直接应用
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, ref } from 'vue';
+import { 
+  Empty as AEmpty,
+  Space as ASpace,
+  Tag as ATag,
+  Input as AInput,
+  Button as AButton,
+  Select as ASelect,
+  Option as AOption,
+  Optgroup as AOptgroup,
+  Row as ARow,
+  Col as ACol
+} from '@arco-design/web-vue';
+import { 
+  IconFile, 
+  IconLink, 
+  IconBulb
+} from '@arco-design/web-vue/es/icon';
+import { extractSchemaFields } from '../utils/schemaUtils';
+
+export default {
+  name: 'SchemaFieldEditor',
+  components: {
+    AEmpty,
+    ASpace,
+    ATag,
+    AInput,
+    AButton,
+    ASelect,
+    AOption,
+    AOptgroup,
+    ARow,
+    ACol,
+    IconFile,
+    IconLink,
+    IconBulb
+  },
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    },
+    fieldPaths: {
+      type: Object,
+      default: () => ({})
+    },
+    fieldFormats: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ['update', 'updateFormat'],
+  setup(props, { emit }) {
+    const fields = computed(() => {
+      return extractSchemaFields(props.schema);
+    });
+
+    const activeExampleField = ref(null);
+
+    const handleInput = (key, value) => {
+      emit('update', { key, path: value });
+    };
+
+    const handleFormatChange = (key, format) => {
+      emit('updateFormat', { key, format });
+    };
+
+    const shouldShowFormat = (field) => {
+      return !['array', 'object'].includes(field.type);
+    };
+
+    const isDateField = (field) => {
+      const name = field.name.toLowerCase();
+      return name.includes('time') || name.includes('date') || 
+             name.includes('created') || name.includes('updated') ||
+             field.type === 'string' && (field.format === 'date' || field.format === 'date-time');
+    };
+
+    const isNumberField = (field) => {
+      return field.type === 'number' || field.type === 'integer';
+    };
+
+    const getPlaceholder = (field) => {
+      return `例如：@.${field.name}`;
+    };
+
+    const getExamples = (field) => {
+      const examples = [];
+      const fieldName = field.name;
+      
+      if (field.type !== 'array' && field.type !== 'object') {
+        examples.push(
+          { path: `@.${fieldName}`, desc: '直接取当前对象的字段' },
+          { path: `@.data.${fieldName}`, desc: '取 data 对象中的字段' },
+          { path: `@.result.${fieldName}`, desc: '取 result 对象中的字段' }
+        );
+        
+        if (fieldName.toLowerCase().includes('id')) {
+          examples.push({ path: `@.${fieldName}`, desc: 'ID 字段（推荐）' });
+        }
+        if (fieldName.toLowerCase().includes('name')) {
+          examples.push({ path: `@.${fieldName}`, desc: '名称字段（推荐）' });
+        }
+      } 
+      else if (field.type === 'array') {
+        examples.push(
+          { path: `@.${fieldName}`, desc: '直接取当前对象的数组' },
+          { path: `@.data.${fieldName}`, desc: '取 data 中的数组' },
+          { path: '@.data.list', desc: '取 data.list 数组' }
+        );
+      }
+      else if (field.type === 'object') {
+        examples.push(
+          { path: `@.${fieldName}`, desc: '直接取当前对象的子对象' },
+          { path: `@.data.${fieldName}`, desc: '取 data 中的子对象' }
+        );
+      }
+      
+      return examples;
+    };
+
+    const showExamples = (field) => {
+      if (activeExampleField.value === field.key) {
+        activeExampleField.value = null;
+      } else {
+        activeExampleField.value = field.key;
+      }
+    };
+
+    const applyExample = (key, path) => {
+      emit('update', { key, path });
+      activeExampleField.value = null;
+    };
+
+    return {
+      fields,
+      activeExampleField,
+      handleInput,
+      handleFormatChange,
+      shouldShowFormat,
+      isDateField,
+      isNumberField,
+      getPlaceholder,
+      getExamples,
+      showExamples,
+      applyExample
+    };
+  }
+};
+</script>
+
+<style scoped>
+.schema-field-editor {
+  width: 100%;
+}
+
+.empty-desc {
+  margin-top: 12px;
+  font-size: 14px;
+  color: #86909c;
+  line-height: 1.6;
+}
+
+/* 字段列表 */
+.field-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* 字段项 */
+.field-item {
+  background: #ffffff;
+  border-bottom: 1px solid #e5e6eb;
+  transition: all 0.3s ease;
+}
+
+.field-item:last-child {
+  border-bottom: none;
+}
+
+.field-item:hover {
+  background: #f7f8fa;
+}
+
+/* 字段行 */
+.field-row {
+  padding: 20px 0;
+}
+
+/* 左侧：字段信息列 */
+.field-label-col {
+  display: flex;
+  align-items: center;
+}
+
+/* 字段头部 - 字段名和标签在同一行 */
+.field-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+/* 字段名称 - 第一优先级 */
+.field-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1d2129;
+  line-height: 1.4;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+}
+
+/* 字段标签组 */
+.field-tags {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: nowrap;
+}
+
+/* 类型标签 - 浅蓝背景 */
+.type-tag {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/* 必填标签 - 红色，小字号 */
+.required-tag {
+  font-size: 11px;
+  font-weight: 500;
+}
+
+/* 右侧：值列 */
+.field-value-col {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 统一容器 - 给输入和格式化区域统一背景 */
+.value-container {
+  background: #f7f8fa;
+  border: 1px solid #e5e6eb;
+  border-radius: 6px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  transition: all 0.3s ease;
+}
+
+.value-container:hover {
+  border-color: #c9cdd4;
+  background: #fafbfc;
+}
+
+/* 输入框包装 */
+.input-wrapper {
+  width: 100%;
+}
+
+/* 路径输入框 - 增强交互 */
+.path-input {
+  transition: all 0.3s ease;
+  background: #ffffff;
+}
+
+.path-input:hover {
+  border-color: #4080ff;
+  box-shadow: 0 0 0 2px rgba(64, 128, 255, 0.1);
+}
+
+.path-input:focus-within {
+  border-color: #4080ff;
+  box-shadow: 0 0 0 3px rgba(64, 128, 255, 0.15);
+}
+
+/* 示例触发按钮 */
+.example-trigger-btn {
+  color: #f7ba1e;
+  transition: all 0.2s ease;
+}
+
+.example-trigger-btn:hover {
+  color: #f7ba1e;
+  transform: scale(1.1);
+}
+
+/* 格式化行 */
+.format-row {
+  margin-top: 0;
+}
+
+/* 格式化标签 */
+.format-label {
+  font-size: 13px;
+  color: #4e5969;
+  font-weight: 500;
+  line-height: 32px;
+}
+
+/* 格式化选择器 - 增强交互 */
+.format-select {
+  transition: all 0.3s ease;
+  background: #ffffff;
+}
+
+.format-select:hover {
+  border-color: #4080ff;
+}
+
+.format-select:focus-within {
+  border-color: #4080ff;
+  box-shadow: 0 0 0 2px rgba(64, 128, 255, 0.1);
+}
+
+/* 示例区域 - 浅灰背景，单独一行 */
+.examples-section {
+  background: #f2f3f5;
+  border-top: 1px solid #e5e6eb;
+  padding: 20px 24px;
+  margin: 0;
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    max-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  to {
+    opacity: 1;
+    max-height: 500px;
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+}
+
+/* 示例头部 */
+.examples-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #e5e6eb;
+}
+
+.examples-icon {
+  color: #f7ba1e;
+  font-size: 16px;
+}
+
+.examples-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #4e5969;
+}
+
+/* 示例列表 */
+.examples-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+/* 示例项 */
+.example-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background: #ffffff;
+  border: 1px solid #e5e6eb;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.example-item:hover {
+  border-color: #4080ff;
+  background: #f2f7ff;
+  transform: translateX(4px);
+  box-shadow: 0 2px 8px rgba(64, 128, 255, 0.1);
+}
+
+/* 示例代码 - 等宽字体，浅灰背景 */
+.example-code {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
+  font-size: 13px;
+  font-weight: 500;
+  color: #165dff;
+  background: #e8f3ff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+  border: 1px solid #bedaff;
+}
+
+/* 示例描述 */
+.example-desc {
+  font-size: 13px;
+  color: #86909c;
+  flex: 1;
+}
+
+/* 示例底部提示 */
+.examples-footer {
+  font-size: 12px;
+  color: #86909c;
+  text-align: center;
+  padding-top: 8px;
+  border-top: 1px solid #e5e6eb;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .field-row {
+    flex-direction: column;
+  }
+  
+  .field-label-col,
+  .field-value-col {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+  
+  .field-label-col {
+    margin-bottom: 12px;
+  }
+}
+</style>

package/src/index.js

@@ -0,0 +1,70 @@
+/**
+ * 网关接口配置组件
+ * Gateway API Select Config Component
+ */
+
+import GatewayApiSelectConfig from './components/ApiConfig.vue';
+import { extractDataBySchema, executeReqMapping } from './utils/dataExtractor';
+import { extractOutputFields, formatConfig } from './utils/schemaUtils';
+import { 
+  extractArray, 
+  noticeFilter, 
+  newsFilter, 
+  menuFilter, 
+  userFilter,
+  applyFilter, 
+  applyFilterByName,
+  filters,
+  fetchGatewayData
+} from './utils/dataFilters';
+
+// 导出组件（保持旧名称作为别名以兼容）
+export { GatewayApiSelectConfig };
+export { GatewayApiSelectConfig as ApiConfig }; // 别名，向后兼容
+
+// 导出工具函数 - Schema 方式(原有的复杂方式)
+export { extractDataBySchema, executeReqMapping, extractOutputFields, formatConfig };
+
+// 导出过滤器 - Filter 方式(新的简单方式)
+export { 
+  extractArray,
+  noticeFilter, 
+  newsFilter, 
+  menuFilter, 
+  userFilter,
+  applyFilter, 
+  applyFilterByName,
+  filters,
+  fetchGatewayData  // 统一的数据获取函数
+};
+
+// 默认导出
+export default GatewayApiSelectConfig;
+
+// Vue 插件安装方法
+export const install = (app) => {
+  app.component('GatewayApiSelectConfig', GatewayApiSelectConfig);
+  app.component('ApiConfig', GatewayApiSelectConfig); // 别名，向后兼容
+};
+
+// 如果是直接通过 script 标签引入
+if (typeof window !== 'undefined' && window.Vue) {
+  window.GatewayApiSelectConfig = GatewayApiSelectConfig;
+  window.ApiConfig = GatewayApiSelectConfig; // 别名，向后兼容
+  window.GatewayApiSelectConfigUtils = { 
+    extractDataBySchema, 
+    executeReqMapping, 
+    extractOutputFields, 
+    formatConfig,
+    // 新增过滤器
+    extractArray,
+    noticeFilter, 
+    newsFilter, 
+    menuFilter, 
+    userFilter,
+    applyFilter, 
+    applyFilterByName,
+    filters,
+    fetchGatewayData
+  };
+}