feat: 常见请求头提示

frontend/src/business/components/api/test/components/ApiKeyValue.vue

@@ -6,8 +6,11 @@
     <div class="kv-row" v-for="(item, index) in items" :key="index">
       <el-row type="flex" :gutter="20" justify="space-between" align="middle">
         <el-col>
-          <el-input :disabled="isReadOnly" v-model="item.name" size="small" maxlength="100" @change="change"
+          <el-input v-if="!suggestions" :disabled="isReadOnly" v-model="item.name" size="small" maxlength="100" @change="change"
                     :placeholder="$t('api_test.key')" show-word-limit/>
+          <el-autocomplete :maxlength="100" v-if="suggestions" v-model="item.name" size="small"
+                           :fetch-suggestions="querySearch" @change="change" :placeholder="$t('api_test.key')" show-word-limit/>
+
         </el-col>
         <el-col>
           <el-input :disabled="isReadOnly" v-model="item.value" size="small" maxlength="500" @change="change"
@@ -34,7 +37,8 @@
       isReadOnly: {
         type: Boolean,
         default: false
-      }
+      },
+      suggestions: Array
     },
 
     methods: {
@@ -63,9 +67,18 @@
       },
       isDisable: function (index) {
         return this.items.length - 1 === index;
-      }
+      },
+      querySearch(queryString, cb) {
+        let suggestions = this.suggestions;
+        let results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (restaurant) => {
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
     },
-
     created() {
       if (this.items.length === 0) {
         this.items.push(new KeyValue());
@@ -86,4 +99,8 @@
   .kv-delete {
     width: 60px;
   }
+
+  .el-autocomplete {
+    width: 100%;
+  }
 </style>

frontend/src/business/components/api/test/components/ApiRequestForm.vue

@@ -44,7 +44,7 @@
                           :description="$t('api_test.request.parameters_desc')"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.request.headers')" name="headers">
-        <ms-api-key-value :is-read-only="isReadOnly" :items="request.headers"/>
+        <ms-api-key-value :is-read-only="isReadOnly" :suggestions="headerSuggestions" :items="request.headers"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.request.body')" name="body" v-if="isNotGet">
         <ms-api-body :is-read-only="isReadOnly" :body="request.body"/>
@@ -66,6 +66,7 @@
   import {KeyValue, Request} from "../model/ScenarioModel";
   import MsApiExtract from "./extract/ApiExtract";
   import ApiRequestMethodSelect from "./collapse/ApiRequestMethodSelect";
+  import {requestHeaders} from "../../../../../common/js/constants";
 
   export default {
     name: "MsApiRequestForm",
@@ -99,7 +100,8 @@
           path: [
             {max: 500, required: true, message: this.$t('commons.input_limit', [1, 500]), trigger: 'blur'},
           ]
-        }
+        },
+        headerSuggestions: requestHeaders
       }
     },
 

frontend/src/business/components/api/test/components/ApiScenarioForm.vue

@@ -25,7 +25,7 @@
         <ms-api-scenario-variables :is-read-only="isReadOnly" :items="scenario.variables" :description="$t('api_test.scenario.kv_description')"/>
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.scenario.headers')" name="headers">
-        <ms-api-key-value :is-read-only="isReadOnly" :items="scenario.headers" :description="$t('api_test.scenario.kv_description')"/>
+        <ms-api-key-value :is-read-only="isReadOnly" :items="scenario.headers" :suggestions="headerSuggestions" :description="$t('api_test.scenario.kv_description')"/>
       </el-tab-pane>
     </el-tabs>
 
@@ -40,6 +40,7 @@
   import {Scenario} from "../model/ScenarioModel";
   import MsApiScenarioVariables from "./ApiScenarioVariables";
   import ApiEnvironmentConfig from "./ApiEnvironmentConfig";
+  import {requestHeaders} from "../../../../../common/js/constants";
 
   export default {
     name: "MsApiScenarioForm",
@@ -62,12 +63,13 @@
         environments: [],
         rules: {
           name: [
-            {max: 100, message: this.$t('commons.input_limit', [0, 100]), trigger: 'blur'}
+            {max: 100, message: this.$t('commons.input_limit', [1, 100]), trigger: 'blur'}
           ],
           url: [
-            {max: 100, message: this.$t('commons.input_limit', [0, 100]), trigger: 'blur'}
+            {max: 100, message: this.$t('commons.input_limit', [1, 100]), trigger: 'blur'}
           ]
-        }
+        },
+        headerSuggestions: requestHeaders
       }
     },
     watch: {

frontend/src/common/js/constants.js

@@ -18,3 +18,37 @@ export const DEFAULT = 'default';
 export const ZH_CN = 'zh_CN';
 export const ZH_TW = 'zh_TW';
 export const EN_US = 'en_US';
+
+export const requestHeaders = [
+  {value: 'Accept'},
+  {value: 'Accept-Charset'},
+  {value: 'Accept-Language'},
+  {value: 'Accept-Datetime'},
+  {value: 'Authorization'},
+  {value: 'Cache-Control'},
+  {value: 'Connection'},
+  {value: 'Cookie'},
+  {value: 'Content-Length'},
+  {value: 'Content-MD5'},
+  {value: 'Content-Type'},
+  {value: 'Date'},
+  {value: 'Expect'},
+  {value: 'From'},
+  {value: 'Host'},
+  {value: 'If-Match'},
+  {value: 'If-Modified-Since'},
+  {value: 'If-None-Match'},
+  {value: 'If-Range'},
+  {value: 'If-Unmodified-Since'},
+  {value: 'Max-Forwards'},
+  {value: 'Origin'},
+  {value: 'Pragma'},
+  {value: 'Proxy-Authorization'},
+  {value: 'Range'},
+  {value: 'Referer'},
+  {value: 'TE'},
+  {value: 'User-Agent'},
+  {value: 'Upgrade'},
+  {value: 'Via'},
+  {value: 'Warning'}
+]