api-render-ui 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "api-render-ui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "api-render-ui is a UI library that pursues simple and efficient data rendering for openapi.",
   "type": "module",
   "main": "./dist/index.js",

package/src/api-render-ui.css

@@ -1,12 +1,54 @@
 .codigma-apioperatorlist {
     align-items: flex-start;
-    background: white;
+    background: var(--surface, white);
     display: inline-flex;
     flex-direction: column;
     gap: 5px;
     justify-content: flex-start;
     width: 100%
 }
+/* Theme variables and mappings */
+:root {
+    --Labels---Vibrant---Controls-Primary-√: #404040;
+    --primary: #404040;
+    --main-color: #404040; /* main / primary color */
+    --aux-color: #a9c7ef;  /* auxiliary color for hover / accents */
+    --embellish-color: #ced8e7; /* embellishment color for active states */
+    --surface: white;
+    --text: black;
+    --even-bg: rgb(235, 239, 244);
+    --odd-bg: rgb(250, 246, 246);
+    --hover-bg: var(--aux-color, rgb(169, 199, 239));
+    --active-bg: var(--embellish-color, rgb(206, 216, 231));
+}
+
+.codigma-theme-light {
+    --main-color: #404040;
+    --aux-color: #a9c7ef;
+    --embellish-color: #ced8e7;
+    --primary: var(--main-color);
+    --Labels---Vibrant---Controls-Primary-√: var(--main-color);
+    --surface: white;
+    --text: black;
+    --even-bg: rgb(235, 239, 244);
+    --odd-bg: rgb(250, 246, 246);
+    --hover-bg: var(--aux-color);
+    --active-bg: var(--embellish-color);
+}
+
+.codigma-theme-dark {
+    --main-color: #9fb8ff;
+    --aux-color: #334155;
+    --embellish-color: #22303a;
+    --primary: var(--main-color);
+    --Labels---Vibrant---Controls-Primary-√: var(--main-color);
+    --surface: #1f1f1f;
+    --text: #e6e6e6;
+    --even-bg: #2a2a2a;
+    --odd-bg: #222222;
+    --hover-bg: var(--aux-color);
+    --active-bg: var(--embellish-color);
+}
 .codigma-apioperator {
     align-items: center;
     align-self: stretch;
@@ -17,18 +59,18 @@
     justify-content: flex-start
 }
 .codigma-apioperator:nth-child(even) {
-  background-color: rgb(235, 239, 244);
+    color: var(--main-color, var(--primary, #404040));
 }
 .codigma-apioperator:nth-child(odd) {
-  background-color: rgb(250, 246, 246);
+    color: var(--main-color, var(--primary, #404040));
 }
 
 .codigma-apioperator:hover {
     cursor: pointer;
-    background: rgb(169, 199, 239);
+    color: var(--main-color, var(--primary, #404040));
 }
 .codigma-apioperator:active {
-    background: rgb(206, 216, 231);
+    color: var(--main-color, var(--primary, #404040));
 }
 .codigma-method {
     align-items: center;
@@ -44,18 +86,18 @@
     justify-content: center
 }
 .codigma-get {
-    color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
+    color: var(--main-color, var(--primary, #404040));
     word-wrap: break-word
 }
 .codigma-requrl {
-    color: black;
+    color: var(--text, black);
     flex: 1 1 0;
     word-wrap: break-word
 }
 /**********************apiunit css style*************************/
 .codigma-apiunit {
     align-items: flex-start;
-    background: white;
+    background: var(--surface, white);
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     display: inline-flex;
     flex-direction: column;
@@ -66,8 +108,8 @@
 .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;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
+    border-top: 1px var(--main-color, var(--primary, #404040)) solid;
     display: inline-flex;
     gap: 10px;
     height: 48px;
@@ -88,17 +130,18 @@
     justify-content: center
 }
 .codigma-apiunit-post {
-    color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
+    color: var(--main-color, var(--primary, #404040));
     word-wrap: break-word
 }
 .codigma-apiunit-requrl {
-    color: black;
+    color: var(--text, black);
     flex: 1 1 0;
     word-wrap: break-word;
     border-left: 0;
     border-right: 0;
     border-top: 0;
-    border-bottom: 1px solid black;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
+    height: 70%;
 }
 .codigma-apiunit-send-button {
     align-items: center;
@@ -109,7 +152,7 @@
     width: 88px
 }
 .codigma-apiunit-send {
-    color: black;
+    color: var(--text, black);
     word-wrap: break-word
 }
 .codigma-apiunit-send-button:hover {
@@ -138,7 +181,7 @@
 }
 .codigma-apiunit-parameters-cnr {
     align-items: center;
-    background: white;
+    background: var(--surface, white);
     display: flex;
     height: 42px;
     justify-content: space-between;
@@ -147,7 +190,7 @@
 .codigma-apiunit-parakeyvalues {
     align-items: flex-start;
     align-self: stretch;
-    background: white;
+    background: var(--surface, white);
     display: inline-flex;
     flex-direction: column;
     flex: 1 1 0;
@@ -165,11 +208,11 @@
 }
 .codigma-apiunit-valuetext {
     align-self: stretch;
-    background: white;
+    background: var(--surface, white);
     border-left: 0;
     border-right: 0;
     border-top: 0;
-    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
     padding: 10px;
     width: 161px
 }
@@ -194,21 +237,21 @@
 .codigma-apiunit-parakeyvalues {
     align-items: flex-start;
     align-self: stretch;
-    background: white;
+    background: var(--surface, 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;
+    outline: 1px var(--main-color, var(--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;
+    background: var(--surface, white);
+    border-top: 1px var(--main-color, var(--primary, #404040)) solid;
     display: flex;
     flex-direction: column;
     flex: 1 1 0;
@@ -226,7 +269,7 @@
 }
 .codigma-apiunit-responsetitle {
     align-items: center;
-    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
     display: flex;
     height: 42px;
     justify-content: space-between;
@@ -235,7 +278,7 @@
 .codigma-apiunit-response-cnr {
     align-items: center;
     align-self: stretch;
-    background: white;
+    background: var(--surface, white);
     display: flex;
     justify-content: space-between;
     padding-top: 2px;

package/src/api-render-ui.ts

@@ -1,5 +1,6 @@
 import { GLOBAL_STYLES } from './inlined-styles';
 import { OpenAPIV3 } from 'openapi-types';
+import { AstTreeNode } from './model';
 
 type OpenAPIV3CustomDoc = OpenAPIV3.Document & { swagger: string; definitions: any } //Compatible with version 2.0
 
@@ -15,12 +16,15 @@ export class ApiRenderer {
             mountPoint: document?.body, // 默认挂载到body
             className: 'Apioperatorlist codigma-apioperatorlist',
             layerName: 'apioperatorlist'
+            ,
+            // theme: can be a string like 'light' or 'dark', or an object palette
+            theme: 'light'
         }, options);
 
         this.container = null;
     }
 
-    render(apiSpec: OpenAPIV3CustomDoc, renderUnit: boolean = false) {
+    render(apiSpec: OpenAPIV3CustomDoc, currentServer?: any, serviceName?: string, renderUnit: boolean = false) {
 
         const appendInlineStyle = (text: string) => {
             if (!ApiRenderer.globalStyleInjected) {
@@ -46,10 +50,58 @@ export class ApiRenderer {
             throw new Error('Invalid mount point specified');
         }
 
+        // Apply theme: string name -> add class; object -> set CSS variables on mount element
+        try {
+            const themeOpt = this.options.theme;
+            if (typeof themeOpt === 'string') {
+                mountElement.classList.add(`codigma-theme-${themeOpt}`);
+            } else if (themeOpt && typeof themeOpt === 'object') {
+                const palette = themeOpt as Record<string, any>;
+
+                const setVar = (key: string, value: any) => {
+                    if (value == null) return;
+                    const varName = key.startsWith('--') ? key : `--${key}`;
+                    try { mountElement.style.setProperty(varName, String(value)); } catch { }
+                }
+
+                // Support both short keys and direct CSS variable names
+                // Short keys: main, aux, embellish, surface, primary
+                if (palette.main) {
+                    setVar('--main-color', palette.main);
+                    setVar('--primary', palette.main);
+                    setVar('--Labels---Vibrant---Controls-Primary-√', palette.main);
+                }
+                if (palette.aux) {
+                    setVar('--aux-color', palette.aux);
+                    setVar('--hover-bg', palette.aux);
+                }
+                if (palette.embellish || palette.embellishment) {
+                    setVar('--embellish-color', palette.embellish || palette.embellishment);
+                    setVar('--active-bg', palette.embellish || palette.embellishment);
+                }
+                // fallbacks for previously used keys
+                if (palette.primary) {
+                    setVar('--primary', palette.primary);
+                    setVar('--Labels---Vibrant---Controls-Primary-√', palette.primary);
+                    setVar('--main-color', palette.primary);
+                }
+                if (palette['--even-bg']) setVar('--even-bg', palette['--even-bg']);
+                if (palette['--odd-bg']) setVar('--odd-bg', palette['--odd-bg']);
+                if (palette.surface) setVar('--surface', palette.surface);
+
+                // Allow direct CSS variable keys as well
+                Object.entries(palette).forEach(([k, v]) => {
+                    if (k.startsWith('--')) setVar(k, v);
+                });
+            }
+        } catch (e) {
+            // swallow theme errors
+        }
+
         if ((apiSpec["openapi"] && apiSpec["openapi"].startsWith("3."))
             || (apiSpec["swagger"] && apiSpec["swagger"].startsWith("2."))) {
             const countApi = countOpenAPI(apiSpec);
-            const apiOperatorList = parseOpenAPI(apiSpec);
+            const apiOperatorList = parseOpenApiSpec(apiSpec, currentServer, serviceName);
             // console.log('解析结果:', apiOperatorList);
             if (countApi == 1 && renderUnit) {
                 // If the count of api <=1, create the api unit only. 
@@ -1361,7 +1413,7 @@ function createSvg() {
 
     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', 'var(--main-color, var(--primary, #404040) )');
     path.setAttribute('stroke-width', '2');
     path.setAttribute('stroke-linecap', 'round');
     path.setAttribute('stroke-linejoin', 'round');
@@ -1521,8 +1573,8 @@ function isHttpMethod(method: string): method is HttpMethod {
 }
 
 // 解析OpenAPI规范并构建API操作列表
-function parseOpenAPI(openapiSpec: OpenAPIV3CustomDoc) {
-    const apiOperatorList: any = [];
+function parseOpenApiSpec(openapiSpec: OpenAPIV3CustomDoc, currentServer?: any, serviceName?: string) {
+    const apiOperatorList: AstTreeNode[] = [];
 
     const pathEntries: [string, OpenAPIV3.PathItemObject | undefined][] = [];
     for (const path in openapiSpec.paths) {
@@ -1549,9 +1601,19 @@ function parseOpenAPI(openapiSpec: OpenAPIV3CustomDoc) {
         // 遍历路径下的所有方法
         pathItemEntries.forEach(([method, operation]) => {
             // 初始化当前API操作对象
-            const apiOperator: any = {
+            let url = path
+            if (currentServer) {
+                url = currentServer.value + "/api/" + serviceName + "/v1" + path;
+            } else if (openapiSpec.servers && openapiSpec.servers.length > 0) {
+                url = openapiSpec.servers[0].url + path;
+            }
+
+            const apiOperator: AstTreeNode = {
+                id: uuid(),
+                label: path,
+                children: [],
                 method: method.toUpperCase(),
-                url: path,
+                url: url,
                 rawApiInfo: operation,
                 requestBody: null,
                 response: {},
@@ -1679,6 +1741,24 @@ function parseOpenAPI(openapiSpec: OpenAPIV3CustomDoc) {
     return apiOperatorList;
 }
 
+
+function uuid(): string {
+    let s: Array<any> = [];
+    const hexDigits = "0123456789abcdef";
+    for (let i = 0; i < 28; i++) {
+        const start = Math.floor(Math.random() * 0x10);
+        s[i] = hexDigits.substring(start, start + 1);
+    }
+    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
+    const start1 = (s[19] & 0x3) | 0x8;
+    s[19] = hexDigits.substring(start1, start1 + 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+    s[8] = s[13] = s[18] = s[23] = "-";
+    s[0] = "a";
+
+    var uuid = s.join("");
+    return uuid;
+}
+
 function countOpenAPI(openapiSpec: OpenAPIV3CustomDoc) {
     let apiCount = 0;
     const pathEntries: [string, OpenAPIV3.PathItemObject | undefined][] = [];

package/src/inlined-styles.ts

@@ -1,13 +1,55 @@
 // Auto-generated by inline-styles.mjs
 export const GLOBAL_STYLES = `.codigma-apioperatorlist {
     align-items: flex-start;
-    background: white;
+    background: var(--surface, white);
     display: inline-flex;
     flex-direction: column;
     gap: 5px;
     justify-content: flex-start;
     width: 100%
 }
+/* Theme variables and mappings */
+:root {
+    --Labels---Vibrant---Controls-Primary-√: #404040;
+    --primary: #404040;
+    --main-color: #404040; /* main / primary color */
+    --aux-color: #a9c7ef;  /* auxiliary color for hover / accents */
+    --embellish-color: #ced8e7; /* embellishment color for active states */
+    --surface: white;
+    --text: black;
+    --even-bg: rgb(235, 239, 244);
+    --odd-bg: rgb(250, 246, 246);
+    --hover-bg: var(--aux-color, rgb(169, 199, 239));
+    --active-bg: var(--embellish-color, rgb(206, 216, 231));
+}
+
+.codigma-theme-light {
+    --main-color: #404040;
+    --aux-color: #a9c7ef;
+    --embellish-color: #ced8e7;
+    --primary: var(--main-color);
+    --Labels---Vibrant---Controls-Primary-√: var(--main-color);
+    --surface: white;
+    --text: black;
+    --even-bg: rgb(235, 239, 244);
+    --odd-bg: rgb(250, 246, 246);
+    --hover-bg: var(--aux-color);
+    --active-bg: var(--embellish-color);
+}
+
+.codigma-theme-dark {
+    --main-color: #9fb8ff;
+    --aux-color: #334155;
+    --embellish-color: #22303a;
+    --primary: var(--main-color);
+    --Labels---Vibrant---Controls-Primary-√: var(--main-color);
+    --surface: #1f1f1f;
+    --text: #e6e6e6;
+    --even-bg: #2a2a2a;
+    --odd-bg: #222222;
+    --hover-bg: var(--aux-color);
+    --active-bg: var(--embellish-color);
+}
 .codigma-apioperator {
     align-items: center;
     align-self: stretch;
@@ -18,18 +60,18 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
     justify-content: flex-start
 }
 .codigma-apioperator:nth-child(even) {
-  background-color: rgb(235, 239, 244);
+    color: var(--main-color, var(--primary, #404040));
 }
 .codigma-apioperator:nth-child(odd) {
-  background-color: rgb(250, 246, 246);
+    color: var(--main-color, var(--primary, #404040));
 }
 
 .codigma-apioperator:hover {
     cursor: pointer;
-    background: rgb(169, 199, 239);
+    color: var(--main-color, var(--primary, #404040));
 }
 .codigma-apioperator:active {
-    background: rgb(206, 216, 231);
+    color: var(--main-color, var(--primary, #404040));
 }
 .codigma-method {
     align-items: center;
@@ -45,18 +87,18 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
     justify-content: center
 }
 .codigma-get {
-    color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
+    color: var(--main-color, var(--primary, #404040));
     word-wrap: break-word
 }
 .codigma-requrl {
-    color: black;
+    color: var(--text, black);
     flex: 1 1 0;
     word-wrap: break-word
 }
 /**********************apiunit css style*************************/
 .codigma-apiunit {
     align-items: flex-start;
-    background: white;
+    background: var(--surface, white);
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     display: inline-flex;
     flex-direction: column;
@@ -67,8 +109,8 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
 .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;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
+    border-top: 1px var(--main-color, var(--primary, #404040)) solid;
     display: inline-flex;
     gap: 10px;
     height: 48px;
@@ -89,17 +131,18 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
     justify-content: center
 }
 .codigma-apiunit-post {
-    color: var(--Labels---Vibrant---Controls-Primary-√, #404040);
+    color: var(--main-color, var(--primary, #404040));
     word-wrap: break-word
 }
 .codigma-apiunit-requrl {
-    color: black;
+    color: var(--text, black);
     flex: 1 1 0;
     word-wrap: break-word;
     border-left: 0;
     border-right: 0;
     border-top: 0;
-    border-bottom: 1px solid black;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
+    height: 70%;
 }
 .codigma-apiunit-send-button {
     align-items: center;
@@ -110,7 +153,7 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
     width: 88px
 }
 .codigma-apiunit-send {
-    color: black;
+    color: var(--text, black);
     word-wrap: break-word
 }
 .codigma-apiunit-send-button:hover {
@@ -139,7 +182,7 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
 }
 .codigma-apiunit-parameters-cnr {
     align-items: center;
-    background: white;
+    background: var(--surface, white);
     display: flex;
     height: 42px;
     justify-content: space-between;
@@ -148,7 +191,7 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
 .codigma-apiunit-parakeyvalues {
     align-items: flex-start;
     align-self: stretch;
-    background: white;
+    background: var(--surface, white);
     display: inline-flex;
     flex-direction: column;
     flex: 1 1 0;
@@ -166,11 +209,11 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
 }
 .codigma-apiunit-valuetext {
     align-self: stretch;
-    background: white;
+    background: var(--surface, white);
     border-left: 0;
     border-right: 0;
     border-top: 0;
-    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
     padding: 10px;
     width: 161px
 }
@@ -195,21 +238,21 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
 .codigma-apiunit-parakeyvalues {
     align-items: flex-start;
     align-self: stretch;
-    background: white;
+    background: var(--surface, 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;
+    outline: 1px var(--main-color, var(--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;
+    background: var(--surface, white);
+    border-top: 1px var(--main-color, var(--primary, #404040)) solid;
     display: flex;
     flex-direction: column;
     flex: 1 1 0;
@@ -227,7 +270,7 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
 }
 .codigma-apiunit-responsetitle {
     align-items: center;
-    border-bottom: 1px var(--Labels---Vibrant---Controls-Primary-√, #404040) solid;
+    border-bottom: 1px var(--main-color, var(--primary, #404040)) solid;
     display: flex;
     height: 42px;
     justify-content: space-between;
@@ -236,7 +279,7 @@ export const GLOBAL_STYLES = `.codigma-apioperatorlist {
 .codigma-apiunit-response-cnr {
     align-items: center;
     align-self: stretch;
-    background: white;
+    background: var(--surface, white);
     display: flex;
     justify-content: space-between;
     padding-top: 2px;

package/src/model.ts

@@ -0,0 +1,45 @@
+export type TreeNodeType = "folder" | "file" | "bookmark" | "api";
+export interface AstTreeNode {
+    id: string;
+    label: string;
+    children: Array<AstTreeNode>;
+    deepLevel?: number;
+    isExpanded?: boolean;
+    nodeType?: TreeNodeType;
+    isNewData?: boolean;
+    servers?: Array<string>;
+    folder?: string;
+    folderInfo?: {
+        servers: Array<any>
+    };
+    serviceName?: string;
+    method?: string;
+    symbol?: string;
+    path?: string;
+    url?: string;
+    summary?: string;
+    tabLabel?: string;
+    rawApiInfo?: any;
+    server?: any;
+    parentItem?: any,
+    symbolColor?: string;
+    consumes?: Array<any>;
+    produces?: Array<any>;
+    currentConsume?: string;
+    requestBody?: any; //适用于openapi 3.0
+    response?: {
+        status?: number | string;
+        statusText?: string;
+        body?: string;//响应体统一转换成字符串
+    };
+    parameterHasBody?: boolean;
+    parameterHasFormDataVer2?: boolean; //区分openapi 2.0
+    isActive?: boolean;
+    hideActiveStatus?: boolean;//当激活了其它的节点的类型为folder的节点被激活时，隐藏非folder节点的激活状态
+    custom?: boolean;
+    customQueryparameters?: Array<any>;
+    customHeaderparameters?: Array<any>;
+    sourceCodeText?: string;
+    auth?: any;
+    rename?: boolean
+}