aliyun · yini-chen · Jan 19, 2024 · Jan 2, 2024 · Jan 2, 2024 · Jan 3, 2024
diff --git a/README.en-US.md b/README.en-US.md
@@ -16,6 +16,10 @@ The Alibaba Cloud API Toolkit for VSCode makes it easier to access Alibaba Cloud
 including descriptions, request parameters, response parameters and error codes.
 Click to debug, you can link to Aliyun OpenAPI portal for online API trial.
 
+* **Call the API:** You can use the form to call the Alibaba Cloud API and see the response.
+
+* **SDK Code Sample:** You can get the SDK code samples and quickly open the corresponding SDK code in VS Code.
+
 * More features are under development, please stay tuned.
 
 ## Extension UI Guide
@@ -30,3 +34,36 @@ Click to debug, you can link to Aliyun OpenAPI portal for online API trial.
 
 ![API Serching](https://img.alicdn.com/imgextra/i1/O1CN01KaWkBF1UfCUkY0N3v_!!6000000002544-0-tps-1286-518.jpg)
 
+* Call the API
+
+The feature requires you to configure your AK/SK information as follows: 
+1. Install [Alibaba Cloud CLI Tools](https://marketplace.visualstudio.com/items?itemName=alibabacloud-openapi.aliyuncli) extentions. 
+2. Open the command line to install aliyun-cli `brew install aliyun-cli`, 
+3. Enter `aliyun configure` and follow the prompts to configure it, 
+4. Click the Alibaba Cloud icon in VS Code status bar to manage your profiles, 
+5. More information please refer to the [Alibaba Cloud CLI Documentation] (https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#configure).
+
+![API debug](https://img.alicdn.com/imgextra/i4/O1CN01F1qI7S1BunIFJPiAt_!!6000000000006-0-tps-2618-2050.jpg)
+
+* SDK Code Sample
+
+![sdk demo](https://img.alicdn.com/imgextra/i1/O1CN01GVhWTl1waRdYmCn7E_!!6000000006324-0-tps-2630-2038.jpg)
+
+## Requirements
+- Need VS Code 1.75.0 or above.
+
+## Release Notes
+
+### 0.0.1 
+Initial release
+- Support product searching and subscription.
+- Support API searching.
+- Support API Document View.
+
+### 0.0.3
+- Support API calling.
+- Support SDK code sample.
+
+## License
+
+See the [Apache License 2.0](./LICENSE).
diff --git a/README.md b/README.md
@@ -17,11 +17,15 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具，支持在
 
 * **API 文档预览:** 点击 API 可以打开一个新的标签页，并显示对应的 API 文档，包括描述、请求参数、响应参数和错误码。在文档中点击调试按钮，可以链接到阿里云 OpenAPI 门户进行在线 API 试用。
 
+* **API 调试:** 你可以在插件中使用表单的方式调试阿里云 API，并查看结果。
+
+* **SDK 代码示例:** 你可以在插件中获得 SDK 代码示例，并在编辑器中快速打开对应的 SDK 代码。
+
 * 更多功能正在开发中，敬请期待...
 
 ## 插件 UI 导览
 
-![VSCode Extension Guide](https://img.alicdn.com/imgextra/i2/O1CN01VJNeqk1NKrbDtTotP_!!6000000001552-0-tps-2310-1524.jpg)
+![VSCode Extension Guide](https://img.alicdn.com/imgextra/i1/O1CN01o9s4TT1GTq3oggW7K_!!6000000000624-0-tps-2456-1446.jpg)
 
  * 产品搜索 `ctrl+cmd+k`
 
@@ -31,3 +35,36 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具，支持在
 
 ![API Serching](https://img.alicdn.com/imgextra/i1/O1CN01KaWkBF1UfCUkY0N3v_!!6000000002544-0-tps-1286-518.jpg)
 
+* API 调试 
+
+调试功能需要配置你的 AK/SK 信息，配置方法如下：
+1. 安装 [Alibaba Cloud CLI Tools](https://marketplace.visualstudio.com/items?itemName=alibabacloud-openapi.aliyuncli) 插件，
+2. 打开命令行安装 aliyun-cli `brew install aliyun-cli`，
+3. 输入 `aliyun configure` 命令，按照提示进行配置，
+4. 点击 VS Code 状态栏中的阿里云图标，管理你的 profiles，
+5. 更多信息请参考 [Alibaba Cloud CLI Documentation](https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#configure)。
+
+![API debug](https://img.alicdn.com/imgextra/i4/O1CN01F1qI7S1BunIFJPiAt_!!6000000000006-0-tps-2618-2050.jpg)
+
+* SDK 示例
+
+![sdk demo](https://img.alicdn.com/imgextra/i1/O1CN01GVhWTl1waRdYmCn7E_!!6000000006324-0-tps-2630-2038.jpg)
+
+## Requirements
+- Need VS Code 1.75.0 or above.
+
+## Release Notes
+
+### 0.0.1 
+Initial release
+- Support product searching and subscription.
+- Support API searching.
+- Support API Document View.
+
+### 0.0.3
+- Support API calling.
+- Support SDK code sample.
+
+## License
+
+See the [Apache License 2.0](./LICENSE).
diff --git a/media/package.json b/media/package.json
@@ -15,19 +15,21 @@
     "@alicloud/console-components": "^1.6.2",
     "@monaco-editor/react": "^4.6.0",
     "@vercel/ncc": "^0.38.1",
+    "@vscode-elements/elements": "^1.0.0-pre.10",
     "antd": "^5.12.3",
     "intl-format": "^1.2.0",
     "load-script": "^2.0.0",
+    "lodash": "^4.17.20",
     "next": "^14.0.4",
     "pontx-ui": "latest",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
+    "react-use-observer": "^2.2.4",
     "sass": "^1.69.5",
     "semix-schema-table": "^0.1.3",
     "styled-components": "^6.1.1",
-    "xml2js": "^0.6.2",
-    "lodash": "^4.17.20"
+    "xml2js": "^0.6.2"
   },
   "resolutions": {
     "semix-schema-table": "^0.1.3"
@@ -44,6 +46,6 @@
     "@types/react-dom": "^18.0.3",
     "@types/vscode": "^1.47.0",
     "@types/vscode-webview": "^1.57.0",
-    "@types/blueimp-md5":"^2.7.0"
+    "@types/blueimp-md5": "^2.7.0"
   }
 }
diff --git a/media/src/components/APIPage/API.module.css b/media/src/components/APIPage/API.module.css
@@ -0,0 +1,76 @@
+.pontx-ui-api {
+   min-width: 540px;
+    overflow: auto;
+   .web-debug{
+      margin: 12px 40px 12px;
+      float:right
+   }
+   .debug-comp-content{
+      display: flex;
+      flex-direction: row;
+   }
+   .debug-comp-content-column {
+      flex-direction: column;
+   }
+   .left-panel {
+      .head-content{
+        padding: 20px;
+        border-bottom: 1px #ccc solid;
+      }
+      .middle-content{
+        /* border: 1px #ccc solid;
+        border-top: 0px; */
+        padding: 20px;
+        height: calc(100vh - 370px);
+        overflow: auto;
+      }
+      .footer-content{
+        padding: 20px;
+        border-top: 1px #ccc solid;
+        display: flex;
+        justify-content: space-between;
+      }
+
+    }
+    .left-panel-column {
+      overflow: auto;
+      border: #ccc 1px solid;
+      .middle-content{
+         /* border: 1px #ccc solid;
+         border-top: 0px; */
+         padding: 20px;
+         height: 200px;
+         overflow: auto;
+       }
+    }
+    .right-panel {
+      min-width: 540px;
+      border-left: 1px #ccc solid;
+      .right-ops{
+        padding: 0 16px;
+        font-weight: 500;
+      }
+      .content{
+        padding: 0 0 16px 20px;
+        height: calc(100vh - 270px);
+        overflow: auto;
+        .api-params-doc{
+         overflow: auto;
+        }
+        .semix-schema-table{
+         table-layout: fixed;
+         .param-name {
+            width: 280px;
+         }
+         .param-name div > div{
+            display: flex;
+            flex-wrap: wrap;
+         }
+        }
+        /* .param-name.semix-table-td{
+         max-width: 280px;
+        } */
+      }
+    }
+}
+