api-render-ui 1.0.0

package/api-render-ui.css

@@ -0,0 +1,238 @@
+.codigma-apioperatorlist {
+    align-items: flex-start;
+    background: white;
+    display: inline-flex;
+    flex-direction: column;
+    gap: 5px;
+    height: 100%;
+    justify-content: flex-start;
+    width: 100%
+}
+.codigma-apioperator {
+    align-items: center;
+    align-self: stretch;
+    background: #F0F1F4;
+    display: inline-flex;
+    gap: 10px;
+    height: 48px;
+    justify-content: flex-start
+}
+.codigma-apioperator:hover {
+    cursor: pointer;
+}
+.codigma-method {
+    align-items: center;
+    display: flex;
+    gap: 5px;
+    height: 48px;
+    justify-content: center;
+    width: 64px
+}
+.codigma-methodtype {
+    align-items: center;
+    display: flex;
+    gap: 10px;
+    justify-content: center
+}
+.codigma-get {
+    color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 400;
+    word-wrap: break-word
+}
+.codigma-requrl {
+    color: black;
+    flex: 1 1 0;
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 400;
+    word-wrap: break-word
+}
+/**********************apiunit css style*************************/
+.codigma-apiunit {
+    align-items: flex-start;
+    background: white;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    display: inline-flex;
+    flex-direction: column;
+    gap: 8px;
+    height: 100%;
+    justify-content: flex-start;
+    width: 100%
+}
+.codigma-apiunit-apioperator {
+    align-items: center;
+    align-self: stretch;
+    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    border-top: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    display: inline-flex;
+    gap: 10px;
+    height: 48px;
+    justify-content: flex-start
+}
+.codigma-apiunit-method {
+    align-items: center;
+    display: flex;
+    gap: 5px;
+    height: 48px;
+    justify-content: center;
+    width: 64px
+}
+.codigma-apiunit-methodtype {
+    align-items: center;
+    display: flex;
+    gap: 10px;
+    justify-content: center
+}
+.codigma-apiunit-post {
+    color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 400;
+    word-wrap: break-word
+}
+.codigma-apiunit-requrl {
+    color: black;
+    flex: 1 1 0;
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 400;
+    word-wrap: break-word
+}
+.codigma-apiunit-send-button {
+    align-items: center;
+    display: flex;
+    gap: 10px;
+    height: 48px;
+    justify-content: center;
+    width: 88px
+}
+.codigma-apiunit-send {
+    color: black;
+    font-family: Inter;
+    font-size: 16px;
+    font-weight: 400;
+    word-wrap: break-word
+}
+.codigma-apiunit-reqcontent {
+    align-items: flex-start;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    gap: 5px;
+    justify-content: flex-start
+}
+.codigma-apiunit-paramters-section {
+    align-items: center;
+    align-self: stretch;
+    display: inline-flex;
+    flex: 1 1 0;
+    justify-content: flex-start
+}
+.codigma-apiunit-parameters-cnr {
+    align-items: center;
+    background: white;
+    display: flex;
+    height: 42px;
+    justify-content: space-between;
+    width: 122px
+}
+.codigma-apiunit-parakeyvalues {
+    align-items: flex-start;
+    align-self: stretch;
+    background: white;
+    display: inline-flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start;
+    overflow: hidden;
+    padding: 10px
+}
+.codigma-apiunit-keyvalue {
+    align-items: center;
+    display: inline-flex;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start
+}
+.codigma-apiunit-valuetext {
+    align-self: stretch;
+    background: white;
+    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    padding: 10px;
+    width: 161px
+}
+/* .codigma-apiunit-keyvalue {
+    align-items: center;
+    display: inline-flex;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start;
+    width: 211px
+} */
+.codigma-apiunit-request-body-section {
+    align-items: center;
+    align-self: stretch;
+    display: inline-flex;
+    height: 114px;
+    justify-content: flex-start;
+    padding-right: 5px
+}
+.codigma-apiunit-parakeyvalues {
+    align-items: flex-start;
+    align-self: stretch;
+    background: white;
+    display: flex;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start;
+    outline-offset: -1px;
+    outline: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    overflow: hidden;
+    padding: 10px
+}
+.codigma-apiunit-reqresponse {
+    align-items: flex-start;
+    align-self: stretch;
+    background: white;
+    border-top: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    gap: 10px;
+    justify-content: flex-start;
+    padding-left: 5px;
+    padding-right: 5px
+}
+.codigma-apiunit-responsedesc {
+    align-items: center;
+    align-self: stretch;
+    display: inline-flex;
+    justify-content: space-between;
+    padding-right: 32px
+}
+.codigma-apiunit-responsetitle {
+    align-items: center;
+    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    display: flex;
+    height: 42px;
+    justify-content: space-between;
+    width: 122px
+}
+.codigma-apiunit-response-cnr {
+    align-items: center;
+    align-self: stretch;
+    background: white;
+    display: flex;
+    justify-content: space-between;
+    padding-top: 2px;
+    width: 122px
+}
+.codigma-apiunit-responsebody {
+    align-self: stretch;
+    flex: 1 1 0;
+    padding: 10px
+}

package/api-render-ui.js

@@ -0,0 +1,408 @@
+// 第三方库形式封装 (codigma-api-renderer.js)
+(function(global) {
+    function ApiRenderer(options) {
+        this.options = Object.assign({
+            mountPoint: document.body, // 默认挂载到body
+            className: 'Apioperatorlist codigma-apioperatorlist',
+            layerName: 'apioperatorlist'
+        }, options);
+        
+        this.container = null;
+    }
+
+    ApiRenderer.prototype.render = function(openapiSpec) {
+        // 创建主容器
+        this.container = document.createElement('div');
+        this.container.setAttribute('data-layer', this.options.layerName);
+        this.container.className = this.options.className;
+        // 存储原始元素与对应新元素的映射
+        const elementMap = new Map();
+
+        // 获取实际挂载点
+        const mountElement = typeof this.options.mountPoint === 'string' ? 
+            document.querySelector(this.options.mountPoint) : 
+            this.options.mountPoint;
+
+        if (!mountElement) {
+            throw new Error('Invalid mount point specified');
+        }
+
+
+        // 解析OpenAPI规范并构建API操作列表
+        function parseOpenAPI(openapiSpec) {
+            const apiOperatorList = [];
+
+            // 遍历所有路径
+            Object.entries(openapiSpec.paths).forEach(([path, pathItem]) => {
+                // 遍历路径下的所有方法
+                Object.entries(pathItem).forEach(([method, operation]) => {
+                    // 初始化当前API操作对象
+                    const apiOperator = {
+                        method: method.toUpperCase(),
+                        url: path,
+                        parametersQueryOrPath: [],
+                        parametersBody: null
+                    };
+
+                    // 处理参数
+                    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;
+                            }
+                        });
+                    }
+
+                    // 添加到结果列表
+                    apiOperatorList.push(apiOperator);
+                });
+            });
+
+            return apiOperatorList;
+        }
+
+        // 示例使用
+        const apiOperatorList = parseOpenAPI(openapiSpec);
+        console.log('解析结果:', apiOperatorList);
+
+        // 生成内容
+        apiOperatorList.forEach(item => {
+            const reqOperator = document.createElement('div');
+            reqOperator.setAttribute('data-layer', 'apioperator');
+            reqOperator.className = 'Apioperator codigma-apioperator';
+
+            // 创建method部分
+            const methodContainer = document.createElement('div');
+            methodContainer.setAttribute('data-layer', 'method');
+            methodContainer.className = 'Method codigma-method';
+
+            const methodType = document.createElement('div');
+            methodType.setAttribute('data-layer', 'methodtype');
+            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;
+
+            methodType.appendChild(methodValue);
+            methodContainer.appendChild(methodType);
+            reqOperator.appendChild(methodContainer);
+
+            // 创建URL部分
+            const urlElement = document.createElement('div');
+            urlElement.setAttribute('data-layer', 'requrl');
+            urlElement.className = 'Requrl codigma-requrl';
+            urlElement.textContent = item.url;
+            reqOperator.appendChild(urlElement);
+
+            this.container.appendChild(reqOperator);
+
+            // 添加点击事件
+            reqOperator.addEventListener('click', renderApiUnit(item, this.container, elementMap));
+        });
+
+        // 清空挂载点并插入新内容
+        mountElement.innerHTML = '';
+        mountElement.appendChild(this.container);
+
+        function renderApiUnit(item, containerRef, elementMap) {
+            return function (evt) {
+                console.log('点击的API操作：');
+                console.log('方法:', item.method);
+                console.log('URL:', item.url);
+                console.log('------------------------');
+
+              const currentTarget = evt.currentTarget;
+                // 检查是否已存在对应的新元素
+                if (elementMap.has(currentTarget)) {
+                    const newElement = elementMap.get(currentTarget);
+                    newElement.remove();          // 移除新元素
+                    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 = document.createElement('div');
+                reqOperator.setAttribute('data-layer', 'apioperator');
+                reqOperator.className = 'Reqoperator codigma-apiunit-apioperator';
+                // 方法类型
+                const methodType = document.createElement('div');
+                methodType.setAttribute('data-layer', 'method');
+                methodType.className = 'Method codigma-apiunit-method';
+                const methodTypeInner = document.createElement('div');
+                methodTypeInner.setAttribute('data-layer', 'methodtype');
+                methodTypeInner.className = 'Methodtype codigma-apiunit-methodtype';
+                methodTypeInner.textContent = method;
+                methodType.appendChild(methodTypeInner);
+                // 方法选项图标 - 使用内联SVG
+                const methodOpt = document.createElement('div');
+                methodOpt.setAttribute('data-svg-wrapper', '');
+                methodOpt.setAttribute('data-layer', 'methodopt');
+                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);
+                methodOpt.appendChild(svg);
+                methodType.appendChild(methodOpt);
+                reqOperator.appendChild(methodType);
+                // 请求URL
+                const reqUrl = document.createElement('div');
+                reqUrl.setAttribute('data-layer', 'requrl');
+                reqUrl.className = 'Requrl codigma-apiunit-requrl';
+                reqUrl.textContent = url;
+                reqOperator.appendChild(reqUrl);
+                // 发送按钮
+                const sendButton = document.createElement('div');
+                sendButton.setAttribute('data-layer', 'send-button');
+                sendButton.className = 'SendButton codigma-apiunit-send-button';
+                const sendText = document.createElement('div');
+                sendText.setAttribute('data-layer', 'Send');
+                sendText.className = 'Send codigma-apiunit-send';
+                sendText.textContent = 'Send';
+                sendButton.appendChild(sendText);
+                reqOperator.appendChild(sendButton);
+                apiContainer.appendChild(reqOperator);
+                // 请求内容区
+                const reqContent = document.createElement('div');
+                reqContent.setAttribute('data-layer', 'reqcontent');
+                reqContent.className = 'Reqcontent codigma-apiunit-reqcontent';
+                // 参数部分
+                const paramSection = document.createElement('div');
+                paramSection.setAttribute('data-layer', 'paramters-section');
+                paramSection.className = 'ParamtersSection codigma-apiunit-paramters-section';
+                // 参数容器头
+                const paramCnr = document.createElement('div');
+                paramCnr.setAttribute('data-layer', 'parameters-cnr');
+                paramCnr.className = 'ParametersCnr codigma-apiunit-parameters-cnr';
+                const paramText = document.createElement('div');
+                paramText.setAttribute('data-layer', 'parameters');
+                paramText.className = 'Parameters codigma-apiunit-send';
+                paramText.textContent = 'Parameters';
+                paramCnr.appendChild(paramText);
+                paramSection.appendChild(paramCnr);
+                // 参数键值对
+                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"))
+                paramValues.append(...parameterRows);
+                paramSection.append(paramCnr, paramValues);
+                // 头部部分
+                const headerSection = document.createElement('div');
+                headerSection.setAttribute('data-layer', 'headers-section');
+                headerSection.className = 'HeadersSection codigma-apiunit-paramters-section';
+                // 头部容器头
+                const headerCnr = document.createElement('div');
+                headerCnr.setAttribute('data-layer', 'headers-cnr');
+                headerCnr.className = 'HeadersCnr codigma-apiunit-parameters-cnr';
+                const headerText = document.createElement('div');
+                headerText.setAttribute('data-layer', 'headers');
+                headerText.className = 'Headers codigma-apiunit-send';
+                headerText.textContent = 'Headers';
+                headerCnr.appendChild(headerText);
+                headerSection.appendChild(headerCnr);
+                // 头部键值对
+                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);
+                headerSection.append(headerCnr, headerValues);
+                // 授权部分
+                const authSection = document.createElement('div');
+                authSection.setAttribute('data-layer', 'authorization-section');
+                authSection.className = 'AuthorizationSection codigma-apiunit-paramters-section';
+                // 授权容器头
+                const authCnr = document.createElement('div');
+                authCnr.setAttribute('data-layer', 'authorization-cnr');
+                authCnr.className = 'AuthorizationCnr codigma-apiunit-parameters-cnr';
+                const authText = document.createElement('div');
+                authText.setAttribute('data-layer', 'authorization');
+                authText.className = 'Authorization codigma-apiunit-send';
+                authText.textContent = 'Authorization';
+                authCnr.appendChild(authText);
+                authSection.appendChild(authCnr);
+                // 授权键值对
+                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);
+                authSection.append(authCnr, authValues);
+                // 请求体部分
+                const bodySection = document.createElement('div');
+                bodySection.setAttribute('data-layer', 'request-body-section');
+                bodySection.className = 'RequestBodySection codigma-apiunit-request-body-section';
+                // 请求体容器头
+                const bodyCnr = document.createElement('div');
+                bodyCnr.setAttribute('data-layer', 'body-cnr');
+                bodyCnr.className = 'BodyCnr codigma-apiunit-parameters-cnr';
+                const bodyText = document.createElement('div');
+                bodyText.setAttribute('data-layer', 'body');
+                bodyText.className = 'Body codigma-apiunit-send';
+                bodyText.textContent = 'Body';
+                bodyCnr.appendChild(bodyText);
+                bodySection.appendChild(bodyCnr);
+                // 请求体内容
+                const bodyValue = document.createElement('div');
+                bodyValue.setAttribute('data-layer', 'bodyTextValue');
+                bodyValue.className = 'Id0CategoryId0NameNamePhotourlsTagsId0NameStatusAvailable codigma-apiunit-requrl';
+                bodyValue.textContent = JSON.stringify(parametersBody);
+                bodySection.appendChild(bodyValue);
+
+                reqContent.append(paramSection, headerSection, authSection, bodySection);
+                apiContainer.appendChild(reqContent);
+                // 响应部分
+                const responseSection = document.createElement('div');
+                responseSection.setAttribute('data-layer', 'reqresponse');
+                responseSection.className = 'Reqresponse codigma-apiunit-reqresponse';
+                // 响应描述
+                const responseDesc = document.createElement('div');
+                responseDesc.setAttribute('data-layer', 'responsedesc');
+                responseDesc.className = 'Responsedesc codigma-apiunit-responsedesc';
+                // 响应标题
+                const responseTitle = document.createElement('div');
+                responseTitle.setAttribute('data-layer', 'responsetitle');
+                responseTitle.className = 'Responsetitle codigma-apiunit-responsetitle';
+                const responseCnr = document.createElement('div');
+                responseCnr.setAttribute('data-layer', 'response-cnr');
+                responseCnr.className = 'ResponseCnr codigma-apiunit-response-cnr';
+                const responseText = document.createElement('div');
+                responseText.setAttribute('data-layer', 'response');
+                responseText.className = 'Response codigma-apiunit-send';
+                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 responseBody = document.createElement('div');
+                responseBody.setAttribute('data-layer', 'responsebody');
+                responseBody.className = 'Responsebody codigma-apiunit-responsebody';
+                responseSection.append(responseDesc, responseBody);
+                apiContainer.appendChild(responseSection);
+
+                // 添加到文档
+                // 插入到当前元素后面
+                if (currentTarget.nextSibling) {
+                    containerRef.insertBefore(apiContainer, currentTarget.nextSibling);
+                } else {
+                    containerRef.appendChild(apiContainer);
+                }
+
+                // 存储映射关系
+                elementMap.set(currentTarget, apiContainer);
+
+                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;
+                }
+            }
+        }
+    };
+
+    // 导出到全局或模块系统
+    if (typeof module !== 'undefined' && module.exports) {
+        module.exports = ApiRenderer;
+    } else {
+        global.ApiRenderer = ApiRenderer;
+    }
+})(window);

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "api-render-ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "api-render-ui.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/test.html

@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>API Renderer Demo</title>
+    <link rel="stylesheet" href="./api-render-ui.css">
+</head>
+
+<body>
+    <!-- 挂载点容器 -->
+    <div id="apiContainer"></div>
+
+    <!-- 引入库代码（假设库文件为api-render-ui.js） -->
+    <script src="./api-render-ui.js"></script>
+
+    <script type="module">
+        // 初始化渲染器（ES6模块方式）
+        // import ApiRenderer from './api-render-ui.js';
+
+        // 创建实例并配置挂载点
+        const apiRenderer = new ApiRenderer({
+            mountPoint: '#apiContainer', // 可以是选择器字符串
+        });
+
+        // 示例数据
+        const openapiSpec = {
+            "openapi": "3.1.0",
+            "info": {
+                "title": "ChimichangApp",
+                "summary": "Deadpool's favorite app. Nuff said.",
+                "description": "\nChimichangApp API helps you do awesome stuff. 🚀\n\n## Items\n\nYou can **read items**.\n\n## Users\n\nYou will be able to:\n\n* **Create users** (_not implemented_).\n* **Read users** (_not implemented_).\n",
+                "termsOfService": "http://example.com/terms/",
+                "contact": {
+                    "name": "Deadpoolio the Amazing",
+                    "url": "http://x-force.example.com/contact/",
+                    "email": "dp@x-force.example.com"
+                },
+                "license": {
+                    "name": "Apache 2.0",
+                    "url": "https://www.apache.org/licenses/LICENSE-2.0.html"
+                },
+                "version": "0.0.1"
+            },
+            "paths": {
+                "/items/": {
+                    "get": {
+                        "summary": "Read Items",
+                        "operationId": "read_items_items__get",
+                        "responses": {
+                            "200": {
+                                "description": "Successful Response",
+                                "content": {
+                                    "application/json": {
+                                        "schema": {}
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    "post": {
+                        "summary": "Create Item",
+                        "operationId": "create_item_items__post",
+                        "requestBody": {
+                            "content": {
+                                "application/json": {
+                                    "schema": {
+                                        "$ref": "#/components/schemas/Item"
+                                    }
+                                }
+                            },
+                            "required": true
+                        },
+                        "responses": {
+                            "200": {
+                                "description": "Successful Response",
+                                "content": {
+                                    "application/json": {
+                                        "schema": {}
+                                    }
+                                }
+                            },
+                            "422": {
+                                "description": "Validation Error",
+                                "content": {
+                                    "application/json": {
+                                        "schema": {
+                                            "$ref": "#/components/schemas/HTTPValidationError"
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+                "/items/{item_id}": {
+                    "get": {
+                        "summary": "Read Root",
+                        "operationId": "read_root_items__item_id__get",
+                        "parameters": [
+                            {
+                                "name": "item_id",
+                                "in": "path",
+                                "required": true,
+                                "schema": {
+                                    "type": "string",
+                                    "title": "Item Id"
+                                }
+                            }
+                        ],
+                        "responses": {
+                            "200": {
+                                "description": "Successful Response",
+                                "content": {
+                                    "application/json": {
+                                        "schema": {}
+                                    }
+                                }
+                            },
+                            "422": {
+                                "description": "Validation Error",
+                                "content": {
+                                    "application/json": {
+                                        "schema": {
+                                            "$ref": "#/components/schemas/HTTPValidationError"
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+                "/": {
+                    "get": {
+                        "summary": "Root",
+                        "operationId": "root__get",
+                        "responses": {
+                            "200": {
+                                "description": "Successful Response",
+                                "content": {
+                                    "application/json": {
+                                        "schema": {}
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+                "/legacy/": {
+                    "get": {
+                        "summary": "Get Legacy Data",
+                        "operationId": "get_legacy_data_legacy__get",
+                        "responses": {
+                            "200": {
+                                "description": "Successful Response",
+                                "content": {
+                                    "application/json": {
+                                        "schema": {}
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "components": {
+                "schemas": {
+                    "HTTPValidationError": {
+                        "properties": {
+                            "detail": {
+                                "items": {
+                                    "$ref": "#/components/schemas/ValidationError"
+                                },
+                                "type": "array",
+                                "title": "Detail"
+                            }
+                        },
+                        "type": "object",
+                        "title": "HTTPValidationError"
+                    },
+                    "Item": {
+                        "properties": {
+                            "name": {
+                                "type": "string",
+                                "title": "Name"
+                            },
+                            "price": {
+                                "type": "number",
+                                "title": "Price"
+                            },
+                            "description": {
+                                "anyOf": [
+                                    {
+                                        "type": "string"
+                                    },
+                                    {
+                                        "type": "null"
+                                    }
+                                ],
+                                "title": "Description"
+                            },
+                            "tax": {
+                                "anyOf": [
+                                    {
+                                        "type": "number"
+                                    },
+                                    {
+                                        "type": "null"
+                                    }
+                                ],
+                                "title": "Tax"
+                            }
+                        },
+                        "type": "object",
+                        "required": [
+                            "name",
+                            "price"
+                        ],
+                        "title": "Item"
+                    },
+                    "ValidationError": {
+                        "properties": {
+                            "loc": {
+                                "items": {
+                                    "anyOf": [
+                                        {
+                                            "type": "string"
+                                        },
+                                        {
+                                            "type": "integer"
+                                        }
+                                    ]
+                                },
+                                "type": "array",
+                                "title": "Location"
+                            },
+                            "msg": {
+                                "type": "string",
+                                "title": "Message"
+                            },
+                            "type": {
+                                "type": "string",
+                                "title": "Error Type"
+                            }
+                        },
+                        "type": "object",
+                        "required": [
+                            "loc",
+                            "msg",
+                            "type"
+                        ],
+                        "title": "ValidationError"
+                    }
+                }
+            }
+        };
+
+        // 执行渲染
+        apiRenderer.render(openapiSpec);
+    </script>
+</body>
+
+</html>