api-render-ui 1.0.0 → 1.0.2

package/api-render-ui.js

@@ -27,6 +27,37 @@
             throw new Error('Invalid mount point specified');
         }
 
+        // 默认值生成器函数
+        function getDefaultValues(fieldSchema) {
+            // 优先使用schema中定义的默认值
+            if ('default' in fieldSchema) {
+                return fieldSchema.default;
+            }
+
+            // 处理类型数组（如anyOf情况）
+            const types = Array.isArray(fieldSchema.type) ? fieldSchema.type : [fieldSchema.type];
+
+            for (const type of types) {
+                switch (type) {
+                    case 'string':
+                    case 'string': case 'password': case 'email':
+                        return '';
+                    case 'number': case 'float': case 'double': case 'integer':
+                        return 0;
+                    case 'boolean':
+                        return false;
+                    case 'array':
+                        return [];
+                    case 'object':
+                        return {};
+                    case 'null':
+                        return null;
+                }
+            }
+
+            // 默认返回null（安全处理）
+            return null;
+        }
 
         // 解析OpenAPI规范并构建API操作列表
         function parseOpenAPI(openapiSpec) {
@@ -40,24 +71,53 @@
                     const apiOperator = {
                         method: method.toUpperCase(),
                         url: path,
-                        parametersQueryOrPath: [],
-                        parametersBody: null
+                        apiDetailInfo: null,
+                        requestBody: null,
+                        response: {},
+                        auths: [
+                            {
+                                type: "No Auth"
+                            },
+                            {
+                                type: "Basic Auth",
+                                parameters: [
+                                    {
+                                        name: "userName",
+                                        value: ""
+                                    },
+                                    {
+                                        name: "password",
+                                        value: ""
+                                    }
+                                ]
+                            }
+                        ]
                     };
 
-                    // 处理参数
-                    if (operation.parameters) {
-                        operation.parameters.forEach(param => {
-                            // 处理path/query参数
-                            if (param.in === 'path' || param.in === 'query') {
-                                apiOperator.parametersQueryOrPath.push(param);
-                            }
-                            // 处理body参数
-                            else if (param.in === 'body') {
-                                apiOperator.parametersBody = param;
+                    // requestBody
+                    if (operation.requestBody) {
+
+                        const content = operation.requestBody.content['application/json'];
+                        if (!content) return;
+
+                        const schema = content.schema;
+                        if (schema.$ref) {
+                            const modelName = schema.$ref.split('/').pop();
+                            const modelSchema = openapiSpec.components.schemas[modelName];
+
+                            if (modelSchema) {
+                                const model = {};
+
+                                // 处理所有属性
+                                Object.entries(modelSchema.properties).forEach(([field, fieldSchema]) => {
+                                    model[field] = getDefaultValues(fieldSchema);
+                                });
+
+                                apiOperator.requestBody = model;
                             }
-                        });
+                        }
                     }
-
+                    apiOperator.apiDetailInfo = operation;
                     // 添加到结果列表
                     apiOperatorList.push(apiOperator);
                 });
@@ -71,7 +131,7 @@
         console.log('解析结果:', apiOperatorList);
 
         // 生成内容
-        apiOperatorList.forEach(item => {
+        apiOperatorList.forEach(apiOperator => {
             const reqOperator = document.createElement('div');
             reqOperator.setAttribute('data-layer', 'apioperator');
             reqOperator.className = 'Apioperator codigma-apioperator';
@@ -86,9 +146,9 @@
             methodType.className = 'Methodtype codigma-methodtype';
 
             const methodValue = document.createElement('div');
-            methodValue.setAttribute('data-layer', item.method.toLowerCase());
-            methodValue.className = `${item.method} codigma-${item.method.toLowerCase()}`;
-            methodValue.textContent = item.method;
+            methodValue.setAttribute('data-layer', apiOperator.method.toLowerCase());
+            methodValue.className = `${apiOperator.method} codigma-${apiOperator.method.toLowerCase()}`;
+            methodValue.textContent = apiOperator.method;
 
             methodType.appendChild(methodValue);
             methodContainer.appendChild(methodType);
@@ -98,24 +158,25 @@
             const urlElement = document.createElement('div');
             urlElement.setAttribute('data-layer', 'requrl');
             urlElement.className = 'Requrl codigma-requrl';
-            urlElement.textContent = item.url;
+            urlElement.textContent = apiOperator.url;
             reqOperator.appendChild(urlElement);
 
             this.container.appendChild(reqOperator);
 
             // 添加点击事件
-            reqOperator.addEventListener('click', renderApiUnit(item, this.container, elementMap));
+            reqOperator.addEventListener('click', renderApiUnit(apiOperator, this.container, elementMap));
         });
 
         // 清空挂载点并插入新内容
         mountElement.innerHTML = '';
         mountElement.appendChild(this.container);
 
-        function renderApiUnit(item, containerRef, elementMap) {
+        function renderApiUnit(apiOperator, containerRef, elementMap) {
+            let responseSectionRef = null;
             return function (evt) {
                 console.log('点击的API操作：');
-                console.log('方法:', item.method);
-                console.log('URL:', item.url);
+                console.log('方法:', apiOperator.method);
+                console.log('URL:', apiOperator.url);
                 console.log('------------------------');
 
               const currentTarget = evt.currentTarget;
@@ -126,22 +187,47 @@
                     elementMap.delete(currentTarget); // 清除映射
                     return;
                 }
-                
-                // 示例变量赋值（根据实际需要使用）
-                let method = item.method;
-                let url = item.url;
-                let parametersQueryOrPath = item.parametersQueryOrPath;
-                let parametersBody = item.parametersBody;
-                let contentType = 'application/json';
-                let acceptType = 'application/json';
-                let userName = 'admin';
-                let password = 'secret';
 
                 // 创建根容器
                 const apiContainer = document.createElement('div');
                 apiContainer.setAttribute('data-layer', 'apiunit');
                 apiContainer.className = 'Requnit codigma-apiunit';
                 // 请求操作区
+                const reqOperator = createReqOperator();
+                apiContainer.appendChild(reqOperator);
+                // 请求内容区
+                const reqContent = document.createElement('div');
+                reqContent.setAttribute('data-layer', 'reqcontent');
+                reqContent.className = 'Reqcontent codigma-apiunit-reqcontent';
+                // 参数部分
+                const paramSection = createSection(apiOperator);
+                // 头部部分
+                const headerSection = createSectionHeader(apiOperator);
+                // 授权部分
+                const authSection = createSectionAuth(apiOperator);
+                // 请求体部分
+                const bodySection = createSectionRequestBody(apiOperator.requestBody);
+
+                reqContent.append(paramSection, headerSection, authSection, bodySection);
+                apiContainer.appendChild(reqContent);
+                // 响应部分
+                const responseSection = createSectionResponse(apiOperator);
+                responseSectionRef = responseSection
+                apiContainer.appendChild(responseSection);
+
+                // 添加到文档
+                // 插入到当前元素后面
+                if (currentTarget.nextSibling) {
+                    containerRef.insertBefore(apiContainer, currentTarget.nextSibling);
+                } else {
+                    containerRef.appendChild(apiContainer);
+                }
+
+                // 存储映射关系
+                elementMap.set(currentTarget, apiContainer);
+            }
+
+            function createReqOperator() {
                 const reqOperator = document.createElement('div');
                 reqOperator.setAttribute('data-layer', 'apioperator');
                 reqOperator.className = 'Reqoperator codigma-apiunit-apioperator';
@@ -152,7 +238,7 @@
                 const methodTypeInner = document.createElement('div');
                 methodTypeInner.setAttribute('data-layer', 'methodtype');
                 methodTypeInner.className = 'Methodtype codigma-apiunit-methodtype';
-                methodTypeInner.textContent = method;
+                methodTypeInner.textContent = apiOperator.method;
                 methodType.appendChild(methodTypeInner);
                 // 方法选项图标 - 使用内联SVG
                 const methodOpt = document.createElement('div');
@@ -161,29 +247,21 @@
                 methodOpt.className = 'Methodopt';
 
                 // 创建内联SVG
-                const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-                svg.setAttribute('width', '21');
-                svg.setAttribute('height', '22');
-                svg.setAttribute('viewBox', '0 0 21 22');
-                svg.setAttribute('fill', 'none');
-                svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-
-                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-                path.setAttribute('d', 'M5.5 8.5L10.5 13.5L15.5 8.5');
-                path.setAttribute('stroke', 'var(--Labels---Vibrant---Controls-Primary--, #404040)');
-                path.setAttribute('stroke-width', '2');
-                path.setAttribute('stroke-linecap', 'round');
-                path.setAttribute('stroke-linejoin', 'round');
-
-                svg.appendChild(path);
+                const svg = createSvg();
                 methodOpt.appendChild(svg);
                 methodType.appendChild(methodOpt);
                 reqOperator.appendChild(methodType);
                 // 请求URL
-                const reqUrl = document.createElement('div');
+                const reqUrl = createInputElement();
                 reqUrl.setAttribute('data-layer', 'requrl');
                 reqUrl.className = 'Requrl codigma-apiunit-requrl';
-                reqUrl.textContent = url;
+                reqUrl.value = apiOperator.url; // 绑定初始值
+                // 可选：添加输入事件监听（根据需求）
+                reqUrl.addEventListener('input', (e) => {
+                    console.log('当前值:', e.target.value);
+                    // 这里可以添加保存逻辑（如更新状态/发送请求
+                    apiOperator.url = e.target.value
+                });
                 reqOperator.appendChild(reqUrl);
                 // 发送按钮
                 const sendButton = document.createElement('div');
@@ -194,23 +272,28 @@
                 sendText.className = 'Send codigma-apiunit-send';
                 sendText.textContent = 'Send';
                 sendButton.appendChild(sendText);
+
+                sendButton.addEventListener('click', (e) => {
+                    console.log('当前值:', e.target.value);
+                    // 这里可以添加保存逻辑（如更新状态/发送请求
+                    sendRequest(apiOperator, responseSectionRef)
+                });
+
                 reqOperator.appendChild(sendButton);
-                apiContainer.appendChild(reqOperator);
-                // 请求内容区
-                const reqContent = document.createElement('div');
-                reqContent.setAttribute('data-layer', 'reqcontent');
-                reqContent.className = 'Reqcontent codigma-apiunit-reqcontent';
-                // 参数部分
+                return reqOperator;
+            }
+
+            function createSection(apiOperator) {
                 const paramSection = document.createElement('div');
                 paramSection.setAttribute('data-layer', 'paramters-section');
-                paramSection.className = 'ParamtersSection codigma-apiunit-paramters-section';
+                paramSection.className = 'codigma-apiunit-paramters-section';
                 // 参数容器头
                 const paramCnr = document.createElement('div');
                 paramCnr.setAttribute('data-layer', 'parameters-cnr');
-                paramCnr.className = 'ParametersCnr codigma-apiunit-parameters-cnr';
+                paramCnr.className = 'codigma-apiunit-parameters-cnr';
                 const paramText = document.createElement('div');
                 paramText.setAttribute('data-layer', 'parameters');
-                paramText.className = 'Parameters codigma-apiunit-send';
+                paramText.className = 'codigma-apiunit-send';
                 paramText.textContent = 'Parameters';
                 paramCnr.appendChild(paramText);
                 paramSection.appendChild(paramCnr);
@@ -218,20 +301,25 @@
                 const paramValues = document.createElement('div');
                 paramValues.setAttribute('data-layer', 'paraKeyValues');
                 paramValues.className = 'Parakeyvalues codigma-apiunit-parakeyvalues';
-                const parameterRows = parametersQueryOrPath.map(parameterQueryOrPath => createRow(parameterQueryOrPath['name'], "000"))
+                let parameters = apiOperator.apiDetailInfo.parameters || [];
+                const parameterRows = parameters.filter(parameter => isPathOrQueryParam(parameter))
+                    .map(parameter => createRow(parameter));
                 paramValues.append(...parameterRows);
                 paramSection.append(paramCnr, paramValues);
-                // 头部部分
+                return paramSection;
+            }
+
+            function createSectionHeader(apiOperator) {
                 const headerSection = document.createElement('div');
                 headerSection.setAttribute('data-layer', 'headers-section');
-                headerSection.className = 'HeadersSection codigma-apiunit-paramters-section';
+                headerSection.className = 'codigma-apiunit-paramters-section';
                 // 头部容器头
                 const headerCnr = document.createElement('div');
                 headerCnr.setAttribute('data-layer', 'headers-cnr');
-                headerCnr.className = 'HeadersCnr codigma-apiunit-parameters-cnr';
+                headerCnr.className = 'codigma-apiunit-parameters-cnr';
                 const headerText = document.createElement('div');
                 headerText.setAttribute('data-layer', 'headers');
-                headerText.className = 'Headers codigma-apiunit-send';
+                headerText.className = 'codigma-apiunit-send';
                 headerText.textContent = 'Headers';
                 headerCnr.appendChild(headerText);
                 headerSection.appendChild(headerCnr);
@@ -239,35 +327,15 @@
                 const headerValues = document.createElement('div');
                 headerValues.setAttribute('data-layer', 'paraKeyValues');
                 headerValues.className = 'Parakeyvalues codigma-apiunit-parakeyvalues';
-                // Content-Type
-                const contentTypeRow = document.createElement('div');
-                contentTypeRow.setAttribute('data-layer', 'keyValue1');
-                contentTypeRow.className = 'Keyvalue1 codigma-apiunit-keyvalue';
-                const contentTypeLabel = document.createElement('div');
-                contentTypeLabel.setAttribute('data-layer', 'Content-Type:');
-                contentTypeLabel.className = 'ContentType codigma-apiunit-send';
-                contentTypeLabel.textContent = 'Content-Type:';
-                const contentTypeValue = document.createElement('div');
-                contentTypeValue.setAttribute('data-layer', 'valueText');
-                contentTypeValue.className = 'Valuetext codigma-apiunit-valuetext';
-                contentTypeValue.textContent = contentType;
-                contentTypeRow.append(contentTypeLabel, contentTypeValue);
-                // Accept
-                const acceptRow = document.createElement('div');
-                acceptRow.setAttribute('data-layer', 'keyValue2');
-                acceptRow.className = 'Keyvalue2 codigma-apiunit-keyvalue';
-                const acceptLabel = document.createElement('div');
-                acceptLabel.setAttribute('data-layer', 'Accept:');
-                acceptLabel.className = 'Accept codigma-apiunit-send';
-                acceptLabel.textContent = 'Accept:';
-                const acceptValue = document.createElement('div');
-                acceptValue.setAttribute('data-layer', 'valueText');
-                acceptValue.className = 'Valuetext codigma-apiunit-valuetext';
-                acceptValue.textContent = acceptType;
-                acceptRow.append(acceptLabel, acceptValue);
-                headerValues.append(contentTypeRow, acceptRow);
+                let parameters = apiOperator.apiDetailInfo.parameters || [];
+                const headerRows =  parameters.filter(parameter => isHeaderParam(parameter))
+                    .map(parameter => createRow(parameter));
+                headerValues.append(...headerRows);
                 headerSection.append(headerCnr, headerValues);
-                // 授权部分
+                return headerSection;
+            }
+
+            function createSectionAuth(apiOperator) {
                 const authSection = document.createElement('div');
                 authSection.setAttribute('data-layer', 'authorization-section');
                 authSection.className = 'AuthorizationSection codigma-apiunit-paramters-section';
@@ -285,35 +353,20 @@
                 const authValues = document.createElement('div');
                 authValues.setAttribute('data-layer', 'paraKeyValues');
                 authValues.className = 'Parakeyvalues codigma-apiunit-parakeyvalues';
-                // 用户名
-                const userRow = document.createElement('div');
-                userRow.setAttribute('data-layer', 'keyValue1');
-                userRow.className = 'Keyvalue1 codigma-apiunit-keyvalue';
-                const userLabel = document.createElement('div');
-                userLabel.setAttribute('data-layer', 'Username:');
-                userLabel.className = 'Username codigma-apiunit-send';
-                userLabel.textContent = 'Username:';
-                const userValue = document.createElement('div');
-                userValue.setAttribute('data-layer', 'valueText');
-                userValue.className = 'Valuetext codigma-apiunit-valuetext';
-                userValue.textContent = userName;
-                userRow.append(userLabel, userValue);
-                // 密码
-                const passRow = document.createElement('div');
-                passRow.setAttribute('data-layer', 'keyValue2');
-                passRow.className = 'Keyvalue2 codigma-apiunit-keyvalue';
-                const passLabel = document.createElement('div');
-                passLabel.setAttribute('data-layer', 'Password:');
-                passLabel.className = 'Password codigma-apiunit-send';
-                passLabel.textContent = 'Password:';
-                const passValue = document.createElement('div');
-                passValue.setAttribute('data-layer', 'valueText');
-                passValue.className = 'Valuetext codigma-apiunit-valuetext';
-                passValue.textContent = password;
-                passRow.append(passLabel, passValue);
-                authValues.append(userRow, passRow);
+
+                let auths = apiOperator.auths || []
+                const authTypeRow = createSelectRow(auths, authValues)
+                if(auths.length > 0) {
+                    let parameters = apiOperator.auths[0].parameters || [];
+                    const authRows = parameters.map(parameter => createRow(parameter));
+                    authValues.append(authTypeRow, ...authRows);
+                }
+
                 authSection.append(authCnr, authValues);
-                // 请求体部分
+                return authSection;
+            }
+
+            function createSectionRequestBody(requestBody) {
                 const bodySection = document.createElement('div');
                 bodySection.setAttribute('data-layer', 'request-body-section');
                 bodySection.className = 'RequestBodySection codigma-apiunit-request-body-section';
@@ -328,15 +381,15 @@
                 bodyCnr.appendChild(bodyText);
                 bodySection.appendChild(bodyCnr);
                 // 请求体内容
-                const bodyValue = document.createElement('div');
+                const bodyValue = document.createElement('textarea');
                 bodyValue.setAttribute('data-layer', 'bodyTextValue');
-                bodyValue.className = 'Id0CategoryId0NameNamePhotourlsTagsId0NameStatusAvailable codigma-apiunit-requrl';
-                bodyValue.textContent = JSON.stringify(parametersBody);
+                bodyValue.className = 'Id0CategoryId0NameNamePhotourlsTagsId0NameStatusAvailable codigma-apiunit-parakeyvalues';
+                bodyValue.value = JSON.stringify(requestBody);
                 bodySection.appendChild(bodyValue);
+                return bodySection;
+            }
 
-                reqContent.append(paramSection, headerSection, authSection, bodySection);
-                apiContainer.appendChild(reqContent);
-                // 响应部分
+            function createSectionResponse(apiOperator) {
                 const responseSection = document.createElement('div');
                 responseSection.setAttribute('data-layer', 'reqresponse');
                 responseSection.className = 'Reqresponse codigma-apiunit-reqresponse';
@@ -357,44 +410,95 @@
                 responseText.textContent = 'Response';
                 responseCnr.appendChild(responseText);
                 responseTitle.appendChild(responseCnr);
-                const timeStatus = document.createElement('div');
-                timeStatus.setAttribute('data-layer', 'Time Status：0');
-                timeStatus.className = 'TimeStatus0 codigma-apiunit-send';
-                timeStatus.textContent = 'Time Status：0';
-                responseDesc.append(responseTitle, timeStatus);
+                const timeStatusElement = createTimeStatusElement(apiOperator);
+                responseDesc.append(responseTitle, timeStatusElement);
                 // 响应体
                 const responseBody = document.createElement('div');
                 responseBody.setAttribute('data-layer', 'responsebody');
                 responseBody.className = 'Responsebody codigma-apiunit-responsebody';
                 responseSection.append(responseDesc, responseBody);
-                apiContainer.appendChild(responseSection);
+                return responseSection;
+            }
 
-                // 添加到文档
-                // 插入到当前元素后面
-                if (currentTarget.nextSibling) {
-                    containerRef.insertBefore(apiContainer, currentTarget.nextSibling);
-                } else {
-                    containerRef.appendChild(apiContainer);
-                }
+            function createTimeStatusElement(apiOperator) {
+                const timeStatus = document.createElement('div');
+                timeStatus.setAttribute('data-layer', 'TimeStatus');
+                timeStatus.className = 'TimeStatus0 codigma-apiunit-send';
+                updateTimeStatus(timeStatus, apiOperator);
+                return timeStatus;
+            }
 
-                // 存储映射关系
-                elementMap.set(currentTarget, apiContainer);
+            function createRow(parameter) {
+                const petIdRow = document.createElement('div');
+                petIdRow.setAttribute('data-layer', 'keyValue');
+                petIdRow.className = 'Keyvalue codigma-apiunit-keyvalue';
+                const petIdLabel = document.createElement('div');
+                petIdLabel.setAttribute('data-layer', parameter["name"]);
+                petIdLabel.className = parameter["name"] + ' codigma-apiunit-send';
+                petIdLabel.textContent = parameter["name"] + ':';
+                const petIdValue = createInputElement();
+                petIdValue.setAttribute('data-layer', 'valueText');
+                petIdValue.className = 'Valuetext codigma-apiunit-valuetext';
+                petIdValue.value = parameter["value"] || "";
 
-                function createRow(parameterName, parameter) {
-                    const petIdRow = document.createElement('div');
-                    petIdRow.setAttribute('data-layer', 'keyValue');
-                    petIdRow.className = 'Keyvalue codigma-apiunit-keyvalue';
-                    const petIdLabel = document.createElement('div');
-                    petIdLabel.setAttribute('data-layer', parameterName);
-                    petIdLabel.className = parameterName + ' codigma-apiunit-send';
-                    petIdLabel.textContent = parameterName + ':';
-                    const petIdValue = document.createElement('div');
-                    petIdValue.setAttribute('data-layer', 'valueText');
-                    petIdValue.className = 'Valuetext codigma-apiunit-valuetext';
-                    petIdValue.textContent = parameter;
-                    petIdRow.append(petIdLabel, petIdValue);
-                    return petIdRow;
-                }
+                // 可选：添加输入事件监听（根据需求）
+                petIdValue.addEventListener('input', (e) => {
+                    console.log('当前值:', e.target.value);
+                    // 这里可以添加保存逻辑（如更新状态/发送请求
+                    parameter["value"] = e.target.value
+                });
+                petIdRow.append(petIdLabel, petIdValue);
+                return petIdRow;
+            }
+
+            function createInputElement() {
+                const inputText = document.createElement('input');
+                inputText.setAttribute('type', 'text');
+                inputText.setAttribute('name', 'text-input');
+                inputText.setAttribute('label', 'text-input');
+                inputText.setAttribute('autocomplete', 'off');
+                return inputText;
+            }
+
+            function createSelectRow(auths, authValues) {
+                // 创建外层容器div
+                const container = document.createElement('div');
+                container.setAttribute('data-layer', 'keyValue');
+                container.className = 'Keyvalue codigma-apiunit-keyvalue';
+
+                // 创建type显示div
+                const typeLabel = document.createElement('div');
+                typeLabel.setAttribute('data-layer', "type");
+                typeLabel.className = 'type codigma-apiunit-send';
+                typeLabel.textContent = 'Type:';
+
+                // 创建select元素
+                const selectElement = document.createElement('select');
+                selectElement.name = 'text-select';
+                selectElement.label = 'text-select';
+                selectElement.setAttribute('data-layer', 'valueText');
+
+                // 示例选项（可根据实际需求添加
+                auths.forEach(auth => {
+                    const option1 = document.createElement('option');
+                    option1.value = auth["type"];
+                    option1.textContent = auth["type"];
+                    selectElement.appendChild(option1);
+                })
+
+                // 添加选择事件监听
+                selectElement.addEventListener('change', function (event) {
+                    //切换前先移除掉原来的元素
+                    authValues && Array.from(authValues.children).slice(1).forEach(el => el.remove());
+                    const auth = auths[event.target.selectedIndex];
+                    let parameters = auth.parameters || [];
+                    const authRows = parameters.map(parameter => createRow(parameter));
+                    authValues.append(...authRows);
+                });
+                // 组装DOM结构
+                container.appendChild(typeLabel);
+                container.appendChild(selectElement);
+                return container;
             }
         }
     };
@@ -405,4 +509,364 @@
     } else {
         global.ApiRenderer = ApiRenderer;
     }
-})(window);
+})(window);
+
+function isPathOrQueryParam(param) {
+    return param.in === 'path' || param.in === 'query';
+}
+
+function isHeaderParam(param) {
+    return param.in === 'header';
+}
+
+/**
+ * 
+ *const apiDetailInfo: any = {
+      customQueryparameters: [
+        {
+          name: '',
+          value: ''
+        }
+      ],
+      customHeaderparameters: [
+        {
+          name: '',
+          value: ''
+        }
+      ],
+      bodyModel: ""
+    };
+
+    const apiInfo: any = {
+      index: this.getRandomInt(10000, 20000),
+      id: this.uuid(),
+      serviceName: "",
+      method: "get",
+      symbol: "GET",
+      path: "",
+      apiUrl: "",
+      summary: "",
+      label: "Untitle",
+      tabLabel: "Untitle",
+      apiDetailInfo: apiDetailInfo,
+      server: "",
+      symbolColor: "green",
+      custom: true,
+      isActive: true,
+      response: {}
+    }
+ * 
+ * 
+ * const apiOperator = {
+     method: method.toUpperCase(),
+     url: path,
+     apiDetailInfo: null,
+     requestBody: null
+   }
+
+ * @param {*} apiOperator
+ * @param {*} apiInfo 
+ */
+
+function sendRequest(apiOperator, responseSectionRef) {
+    let reuqestUrl = getRequestUrl(apiOperator);
+    const result = checkIfParameter(apiOperator);
+
+    let header = result.hasRequestBody ? 'application/json' :
+        (result.hasRequestFormData ? 'application/x-www-form-urlencoded' : 'application/json');
+    let headers = {
+        'Content-Type': header
+    }
+
+    //TODO
+    if (apiOperator.custom) {
+        for (let index = 0; index < apiOperator.apiDetailInfo.customHeaderparameters.length; index++) {
+            const paras = apiOperator.apiDetailInfo.customHeaderparameters[index];
+            if (paras.name != '' && paras.value != '' && paras.name != null && paras.value != null) {
+                headers[paras.name] = paras.value
+            }
+        }
+    }
+
+    let body = result.hasRequestBody ? apiOperator.requestBody :
+        (result.hasRequestFormData ? getRequestFormData(apiOperator.apiDetailInfo) : null);
+
+    //TODO
+    if (apiOperator.custom) {
+        if (apiOperator.method.toUpperCase() == "POST" || apiOperator.method.toUpperCase() == "PUT") {
+            body = apiOperator.apiDetailInfo.bodyModel;
+        }
+    }
+
+    apiOperator.ifSendingRequest = true;
+    const startTime = Date.now(); // 记录开始时间
+
+    apiOperator.controller = new AbortController();
+    const signal = apiOperator.controller.signal;
+
+    //正在发送请求时创建遮罩层
+    const overlayLayerContainer = createRequestOverlayLayer(apiOperator, responseSectionRef);
+
+    // 使用 fetch 发送请求，并传递 signal  
+    fetch(reuqestUrl, {
+        method: apiOperator.method.toUpperCase(),
+        headers: headers,
+        body: body != null ? JSON.stringify(body) : null,
+        signal: signal
+    })
+        .then(response => {
+            if (!response.ok) {
+                apiOperator.response = {
+                    status: response.status,
+                    statusText: response.statusText
+                }
+
+                const endTime = Date.now(); // 即使在错误的情况下也记录结束时间  
+                apiOperator.requestDuration = formatDuration(endTime - startTime);
+                apiOperator.ifSendingRequest = false;
+                // apiOperator.responseJsoneditor.value = "";
+                throw new Error('Network response was not ok.');
+            }
+            const endTime = Date.now(); // 记录结束时间  
+            apiOperator.requestDuration = formatDuration(endTime - startTime);   // 计算耗时
+
+            const responsebodyElement = responseSectionRef.querySelector('[data-layer="responsebody"]');
+            responsebodyElement.removeChild(overlayLayerContainer);
+
+            apiOperator.ifSendingRequest = false;
+            apiOperator.response = {
+                status: response.status,
+                statusText: response.statusText
+            }
+
+            // 在responseSectionRef元素范围内查找TimeStatus元素
+            const timeStatusElement = responseSectionRef.querySelector('[data-layer="TimeStatus"]');
+            if (timeStatusElement) {
+                updateTimeStatus(timeStatusElement, apiOperator);
+            } else {
+                console.log("在reqresponse范围内未找到TimeStatus元素");
+            }
+
+            let responseClone = response.clone();
+            return response.json()   // 解析为json 
+                .catch(error => {
+                    // 如果解析 JSON 失败，则回退到文本解析
+                    return responseClone.text();
+                });
+        })
+        .then(data => {
+            apiOperator.gotResponse = true;
+            // 此时 data 可能是 JSON 对象，也可能是文本字符串  
+            if (typeof data === 'object') {
+                // 假设 data 是 JSON 对象，你可以在这里处理它  
+                console.log('Received JSON:', data);
+                 const responsebodyElement = responseSectionRef.querySelector('[data-layer="responsebody"]');
+                 responsebodyElement.textContent = JSON.stringify(data, null, 4)
+            } else {
+                // 假设 data 是文本字符串，你可以在这里处理它  
+                console.log('Received text:', data);
+                responsebodyElement.textContent = data;
+            }
+        })
+        .catch(error => {
+            // 错误处理  
+            console.error('There has been a problem with your fetch operation:', error);
+        });
+}
+
+function updateTimeStatus(timeStatus, apiOperator) {
+    timeStatus.textContent
+        = `Status: ${apiOperator.response.status || ""} ${apiOperator.response.statusText || ""}  Time: ${apiOperator.requestDuration || ""}`;
+}
+
+function createRequestOverlayLayer(apiOperator, responseSectionRef) {
+    // 创建主容器  
+    const container = document.createElement('div');
+    Object.assign(container.style, {
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgb(255, 255, 255)',
+        opacity: 0.8
+    });
+
+    // 创建内容容器  
+    const contentDiv = document.createElement('div');
+    Object.assign(contentDiv.style, {
+        display: 'flex',
+        gap: '5px',
+        alignItems: 'center',
+    });
+
+    // 创建文本div  
+    const textDiv = document.createElement('div');
+    textDiv.textContent = 'Sending request...';
+
+    // 创建取消按钮  
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className = 'request-cancel-btn';
+    Object.assign(cancelBtn.style, {
+        border: '0px'
+    });
+    cancelBtn.textContent = 'Cancel';
+
+    const responsebodyElement = responseSectionRef.querySelector('[data-layer="responsebody"]');
+    // 组装DOM结构  
+    contentDiv.appendChild(textDiv);
+    contentDiv.appendChild(cancelBtn);
+    container.appendChild(contentDiv);
+    responsebodyElement.appendChild(container);
+
+    // 添加点击事件
+    cancelBtn.addEventListener('click', (e) => {
+        // 如果你想取消请求，调用 controller 的 abort 方法
+        if (apiOperator.controller) {
+            apiOperator.controller.abort();
+            apiOperator.ifSendingRequest = false;
+            container.style.display = 'none';
+            responsebodyElement.removeChild(container);
+        }
+    });
+
+    return container
+}
+
+function checkIfParameter(apiOperator) {
+    let hasRequestBody = false;
+    let hasRequestFormData = false;
+    const parameters = apiOperator.apiDetailInfo.parameters;
+    if (parameters) {
+        for (let index = 0; index < parameters.length; index++) {
+            const parameter = parameters[index];
+            if (parameter.in == "query" || parameter.in == "path") {
+            } else if (parameter.in == "body") {
+                hasRequestBody = true;
+                parameter.name = parameter.name.charAt(0).toUpperCase() + parameter.name.slice(1);
+            } else if (parameter.in == "formData") {
+                hasRequestFormData = true;
+            }
+        }
+    }
+
+    //support openapi 3.0
+    const requestBody = apiOperator.apiDetailInfo.requestBody;
+    if (requestBody) {
+        hasRequestBody = true;
+    }
+    // 返回包含两个状态的对象
+    return { hasRequestBody, hasRequestFormData };
+}
+
+function formatDuration(milliseconds) {
+    let totalSeconds = Math.floor(milliseconds / 1000);
+    let seconds = totalSeconds % 60;
+    let minutes = Math.floor(totalSeconds / 60) % 60;
+    let hours = Math.floor(totalSeconds / (60 * 60));
+
+    // 毫秒部分  
+    let millisecondsPart = Math.floor(milliseconds % 1000);
+    // 毫秒不足三位时前面补0  
+    millisecondsPart = millisecondsPart.toString().padStart(3, '0');
+
+    // 时分秒不足两位时前面补0  
+    hours = hours.toString().padStart(2, '0');
+    minutes = minutes.toString().padStart(2, '0');
+    seconds = seconds.toString().padStart(2, '0');
+
+    // 返回格式化的字符串  
+    return `${hours}h${minutes}m${seconds}s${millisecondsPart}ms`;
+}
+
+function getRequestUrl(apiOperator) {
+    let reuqestUrl = apiOperator.url;
+
+    const requestParameters = apiOperator.apiDetailInfo.parameters || [];
+    if (requestParameters == null) {
+        return reuqestUrl;
+    }
+
+    for (const element of requestParameters) {
+        if (element.in == "path") {
+            reuqestUrl = reuqestUrl.replace("{" + element.name + "}", element.value);
+        }
+    }
+
+    let queryParams = getQueryParams(apiOperator, requestParameters);
+    reuqestUrl = queryParams.length > 0 ? (reuqestUrl + "?" + queryParams.join("&")) : reuqestUrl;
+
+    return reuqestUrl;
+}
+
+function getQueryParams(apiOperator, requestParameters) {
+    let queryParams = [];
+    for (const element of requestParameters) {
+        if (element.in == "query") {
+            if (element.type == "array" || (element.schema != null && element.schema.type == 'array')) {
+                if (element.value != null) {
+                    for (let index = 0; index < element.value.length; index++) {
+                        queryParams.push(element.name + "=" + element.value[index].value);
+                    }
+                }
+            } else {
+                queryParams.push(element.name + "=" + element.value);
+            }
+        }
+    }
+
+    if (apiOperator.custom) {
+        for (let index = 0; index < apiOperator.apiDetailInfo.customQueryparameters.length; index++) {
+            const paras = apiOperator.apiDetailInfo.customQueryparameters[index];
+            if (paras.name != '' && paras.value != '' && paras.name != null && paras.value != null) {
+                queryParams.push(paras.name + "=" + paras.value)
+            }
+        }
+    }
+
+    return queryParams;
+}
+
+function getRequestFormData(apiDetailInfo) {
+    let formData = '';
+    const requestParameters = apiDetailInfo.parameters;
+    if (requestParameters == null) {
+        return "";
+    }
+
+    let first = 0;
+    for (const element of requestParameters) {
+        if (element.in == "formData") {
+            if (first == 0) {
+                formData = element.name + "=" + element.value;
+            } else {
+                formData = formData + "&" + element.name + "=" + element.value;
+            }
+            first++;
+        }
+    }
+    return formData;
+}
+
+
+
+function createSvg() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('width', '21');
+    svg.setAttribute('height', '22');
+    svg.setAttribute('viewBox', '0 0 21 22');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', 'M5.5 8.5L10.5 13.5L15.5 8.5');
+    path.setAttribute('stroke', 'var(--Labels---Vibrant---Controls-Primary--, #404040)');
+    path.setAttribute('stroke-width', '2');
+    path.setAttribute('stroke-linecap', 'round');
+    path.setAttribute('stroke-linejoin', 'round');
+
+    svg.appendChild(path);
+    return svg;
+}