升级2.0.9

HGthecode · HGthecode · commit 954047b3ad33 · 2021-12-11T10:58:51.000+08:00
- 支持自定义配置，请求类型颜色。
- 支持接口注解`ContentType`指定调试时请求ContentType。
- 修正全局参数调试接口为formdata类型时的异常问题。
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "apidoc",
-  "version": "2.0.5",
+  "version": "2.0.9",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/public/config.js b/public/config.js
@@ -14,10 +14,19 @@ const config = {
     // 多个可切换的host
     HOSTS: [],
   },
+  // 菜单配置
   MENU: {
     SHOWURL: false,
     WIDTH: 300,
   },
+  // 请求类型的颜色
+  METHODCOLOR: {
+    GET: "#87d068",
+    POST: "#2db7f5",
+    PUT: "#ff9800",
+    DELETE: "#ff4d4f",
+    PATCH: "#802feb",
+  },
   // 多语言
   LANG: [
     {
diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <link rel="stylesheet" href="./icon/iconfont.css?t=<%= VUE_APP_VERSION %>">
-    <script src="./config.js?t=<%= VUE_APP_VERSION %>"></script>
+    <script src="./config.js?v=<%= VUE_APP_VERSION %>"></script>
   </head>
   <body>
     <noscript>
diff --git a/src/components/Menu/src/MenuItemContent.vue b/src/components/Menu/src/MenuItemContent.vue
@@ -7,9 +7,17 @@
     >
       <span class="method-icon_multiple">{{ item.method.split(",").length }} </span>
     </span>
-    <span v-else-if="item.method" :class="['api-method-icon', `method-color_${item.method}`]">{{
-      item.method
-    }}</span>
+    <span
+      v-else-if="item.method"
+      :class="['api-method-icon', `method-color_${item.method}`]"
+      :style="{
+        color:
+          feConfig.METHODCOLOR && feConfig.METHODCOLOR[item.method]
+            ? feConfig.METHODCOLOR[item.method]
+            : '',
+      }"
+      >{{ item.method }}</span
+    >
     <FileMarkdownOutlined v-else-if="item.path && item.type === 'md'" />
     <FolderOutlined v-else />
 
@@ -68,7 +76,7 @@ export default defineComponent({
 <style lang="less" scoped>
 .api-method-icon {
   display: inline-block;
-  width: 36px;
+  width: 40px;
   font-size: 12px;
 }
 .method-color_GET {
diff --git a/src/utils/http/index.ts b/src/utils/http/index.ts
@@ -37,6 +37,7 @@ if (localStorage.APIDOC_CONFIG) {
 const service = axios.create({
   baseURL: baseURL,
   timeout: timeout,
+  withCredentials: true,
 });
 
 // 请求拦截器
@@ -77,7 +78,6 @@ service.interceptors.request.use(
         }
       }
     }
-
     return config;
   },
   (error) => {
diff --git a/src/views/apiDetail/Title.vue b/src/views/apiDetail/Title.vue
@@ -23,7 +23,7 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .title {
-  margin-top: 24px;
+  margin-top: 5px;
   .title-extra {
     line-height: 32px;
   }
diff --git a/src/views/apiDetail/debug/Index.vue b/src/views/apiDetail/debug/Index.vue
@@ -2,7 +2,7 @@
   <div>
     <div v-if="headerData && headerData.length">
       <Title :title="t('apiPage.title.header')" />
-      <div class="api-param-table mb">
+      <div class="api-param-table mb-sm">
         <Table
           :columns="headersColumns"
           size="small"
@@ -92,7 +92,7 @@
         :eventData="eventData.after"
       />
     </Title>
-    <div v-if="returnData && returnData.status" class="mb">
+    <div v-if="returnData && returnData.status" class="mb-sm">
       <div class="mb-sm">
         <Alert
           :type="returnData.status >= 200 && returnData.status < 300 ? 'success' : 'error'"
@@ -292,12 +292,37 @@ export default defineComponent({
 
     watchEffect(() => {
       if (props.detail.param) {
-        const json = renderCodeJsonByParams(props.detail.param, true);
-        state.paramCode = formatJsonCode(json);
-        state.paramFormData = props.detail.param;
+        const paramFormData = handleParamData(props.detail.param);
+        if (props.detail.paramType === "formdata" || props.detail.paramType === "route") {
+          state.paramFormData = paramFormData;
+        } else {
+          const json = renderCodeJsonByParams(paramFormData, true);
+          state.paramCode = formatJsonCode(json);
+        }
       }
     });
 
+    function handleParamData(paramData: ParamItem[]): ParamItem[] {
+      const data = cloneDeep(paramData);
+      if (data && data.length) {
+        // 合并全局参数
+        const globalParams = state.globalParams;
+        if (globalParams && globalParams.params && globalParams.params.length) {
+          return data.map((item) => {
+            const globalParamFind = globalParams.params.find((p) => p.name === item.name);
+            if (globalParamFind && globalParamFind.value) {
+              item.default = globalParamFind.value;
+            }
+            return item;
+          });
+        } else {
+          return data;
+        }
+      }
+
+      return [];
+    }
+
     const tableScroll = {
       x: "700px",
       y: "100%",
@@ -409,9 +434,10 @@ export default defineComponent({
       }
 
       if (props.detail.paramType === "formdata") {
-        headers[method] = {
-          "Content-Type": "application/x-www-form-urlencoded",
-        };
+        headers["content-type"] = "application/x-www-form-urlencoded";
+      }
+      if (props.detail.contentType) {
+        headers["content-type"] = props.detail.contentType;
       }
       let json: any = {
         method,
@@ -445,7 +471,6 @@ export default defineComponent({
       if (appConfig && appConfig.host) {
         json.baseURL = appConfig.host;
       }
-
       Axios(url, json)
         .then((res) => {
           // 执行后置方法
diff --git a/src/views/apiDetail/debug/handleEvent.ts b/src/views/apiDetail/debug/handleEvent.ts
@@ -257,9 +257,7 @@ const events = {
           headers: {},
         };
         if (eventItem.contentType) {
-          ajaxOptions.headers[method] = {
-            "Content-Type": eventItem.contentType,
-          };
+          ajaxOptions.headers["content-type"] = eventItem.contentType;
         }
         // 执行前置生成请求参数
         let params: ObjectType = {};
diff --git a/src/views/apiDetail/index.less b/src/views/apiDetail/index.less
@@ -52,6 +52,9 @@
             background-color: var(--color-red);
             color:var(--text-color-light);
         }
+        &.dark{
+          color:var(--text-color-light);
+        }
       }
       .api-method-select {
         width: 105px;
diff --git a/src/views/apiDetail/index.vue b/src/views/apiDetail/index.vue
@@ -38,7 +38,20 @@
             }}</a-select-option>
           </a-select>
         </div>
-        <div v-else :class="['api-url-method', currentMethod]">
+        <div
+          v-else
+          :class="[
+            'api-url-method',
+            currentMethod,
+            { dark: feConfig.METHODCOLOR && feConfig.METHODCOLOR[detail.method] },
+          ]"
+          :style="{
+            backgroundColor:
+              feConfig.METHODCOLOR && feConfig.METHODCOLOR[detail.method]
+                ? feConfig.METHODCOLOR[detail.method]
+                : '',
+          }"
+        >
           {{ detail.method }}
         </div>
         <div :class="['api-url-input', { 'method-multiple': methodList.length > 0 }]">
@@ -116,6 +129,7 @@ export default defineComponent({
       config: computed(() => store.state.app.config),
       pageData: computed(() => store.state.app.pageData),
       apiObject: computed(() => store.state.apidoc.apiObject),
+      feConfig: computed(() => store.state.app.feConfig),
       detail: detail,
       currentKey: "",
       methodList: methodList,
diff --git a/src/views/apiDetail/interface.ts b/src/views/apiDetail/interface.ts
@@ -16,6 +16,7 @@ export interface ApiDetailState extends ApiItem {
   // param: ParamItem[];
   // return: ParamItem[];
   paramType?: string;
+  contentType?: string;
 }
 
 export interface UploadFileState {
diff --git a/src/views/home/home.less b/src/views/home/home.less
@@ -59,25 +59,35 @@
         padding-left: 0;
         list-style-type:none;
         &>li{
-            display: flex;
-            padding:5px 10px;
+            
+            
             margin-bottom: 5px;
             border-radius: 3px;
+            position: relative;
+            height: 36px;
+            line-height: 36px;
+            
             .name{
                 flex:1;
                 text-align: left;
             }
-            &.method-color_GET {
-                background-color:lighten(#87d068,30%);
+            .info{
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top:0;
+                left: 0;
+                z-index: 1;   
+                display: flex;
+                padding:0 10px;
             }
-            &.method-color_POST {
-                background-color:lighten(#2db7f5,30%);
-            }
-            &.method-color_PUT {
-                background-color: lighten(#ff9800,40%);
-            }
-            &.method-color_DELETE {
-                background-color: lighten(#ff4d4f,30%);
+            .bg{
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                top:0;
+                left: 0;
+                opacity: 0.3;
             }
         }
     }
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
@@ -48,13 +48,20 @@
             <template #title> {{ t("common.type") }} </template>
             <div v-if="Object.keys(apiAnalysis.apiMethodTotal).length" class="method-list">
               <ul>
-                <li
-                  v-for="(number, key) in apiAnalysis.apiMethodTotal"
-                  :key="key"
-                  :class="[`method-color_${key}`]"
-                >
-                  <div class="name">{{ key }}</div>
-                  <div class="value">{{ number }}</div>
+                <li v-for="(number, key) in apiAnalysis.apiMethodTotal" :key="key">
+                  <div class="info">
+                    <div class="name">{{ key }}</div>
+                    <div class="value">{{ number }}</div>
+                  </div>
+                  <div
+                    class="bg"
+                    :style="{
+                      backgroundColor:
+                        feConfig.METHODCOLOR && feConfig.METHODCOLOR[key]
+                          ? feConfig.METHODCOLOR[key]
+                          : '',
+                    }"
+                  ></div>
                 </li>
               </ul>
             </div>
@@ -146,6 +153,7 @@ export default defineComponent({
       apiAnalysis: computed(() => store.state.apidoc.apiAnalysis),
       currentApp: computed(() => store.state.apidoc.currentApp),
       config: computed(() => store.state.app.config),
+      feConfig: computed(() => store.state.app.feConfig),
       groupColumns: [
         {
           title: "名称",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "apidoc",`
`3`		`- "version": "2.0.5",`
	`3`	`+ "version": "2.0.9",`
`4`	`4`	`"private": true,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"serve": "vue-cli-service serve",`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,7 @@ if (localStorage.APIDOC_CONFIG) {`
`37`	`37`	`const service = axios.create({`
`38`	`38`	`baseURL: baseURL,`
`39`	`39`	`timeout: timeout,`
	`40`	`+ withCredentials: true,`
`40`	`41`	`});`
`41`	`42`
`42`	`43`	`// 请求拦截器`
`@@ -77,7 +78,6 @@ service.interceptors.request.use(`
`77`	`78`	`}`
`78`	`79`	`}`
`79`	`80`	`}`
`80`		`-`
`81`	`81`	`return config;`
`82`	`82`	`},`
`83`	`83`	`(error) => {`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export default defineComponent({`
`23`	`23`	`</script>`
`24`	`24`	`<style lang="less" scoped>`
`25`	`25`	`.title {`
`26`		`- margin-top: 24px;`
	`26`	`+ margin-top: 5px;`
`27`	`27`	`.title-extra {`
`28`	`28`	`line-height: 32px;`
`29`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,9 @@`
`52`	`52`	`background-color: var(--color-red);`
`53`	`53`	`color:var(--text-color-light);`
`54`	`54`	`}`
	`55`	`+ &.dark{`
	`56`	`+ color:var(--text-color-light);`
	`57`	`+ }`
`55`	`58`	`}`
`56`	`59`	`.api-method-select {`
`57`	`60`	`width: 105px;`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ export interface ApiDetailState extends ApiItem {`
`16`	`16`	`// param: ParamItem[];`
`17`	`17`	`// return: ParamItem[];`
`18`	`18`	`paramType?: string;`
	`19`	`+ contentType?: string;`
`19`	`20`	`}`
`20`	`21`
`21`	`22`	`export interface UploadFileState {`