update UI

Author: yini-chen

.prettierrc.js

@@ -9,7 +9,7 @@ module.exports = {
   // 行尾需要有分号
   semi: true,
   // 使用单引号
-  singleQuote: true,
+  singleQuote: false,
   // 对象的 key 仅在必要时用引号
   quoteProps: 'as-needed',
   // jsx 不使用单引号，而使用双引号

README.zh_CN.md

@@ -11,19 +11,18 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具，支持在
 
 ## 功能
 
-* **阿里云产品订阅：** 插件提供了一键订阅阿里云产品的功能，你可以通过 `ctrl+cmd+k` 搜索和订阅阿里云产品。
+- **阿里云产品订阅：** 插件提供了一键订阅阿里云产品的功能，你可以通过 `ctrl+cmd+k` 搜索和订阅阿里云产品。
 
-* **API 搜索:** 你可以通过 `ctrl+cmd+l` 搜索并查看已订阅的 API 文档。
+- **API 搜索:** 你可以通过 `ctrl+cmd+l` 搜索并查看已订阅的 API 文档。
 
-* **API 文档预览:** 点击 API 可以打开一个新的标签页，并显示对应的 API 文档，包括描述、请求参数、响应参数和错误码。
+- **API 文档预览:** 点击 API 可以打开一个新的标签页，并显示对应的 API 文档，包括描述、请求参数、响应参数和错误码。
 
-* **API 调试:** 你可以在插件中使用表单的方式调试阿里云 API，并查看结果。
-  
-* **SDK 代码示例:** 你可以在插件中获得 SDK 代码示例，并在编辑器中快速打开对应的 SDK 代码。
+- **API 调试:** 你可以在插件中使用表单的方式调试阿里云 API，并查看结果。
+- **SDK 代码示例:** 你可以在插件中获得 SDK 代码示例，并在编辑器中快速打开对应的 SDK 代码。
 
-* **Code Snippets:** 支持代码片段功能，帮助你快速编写 SDK 代码。
+- **Code Snippets:** 支持代码片段功能，帮助你快速编写 SDK 代码。
 
-* 更多功能正在开发中，敬请期待...
+- 更多功能正在开发中，敬请期待...
 
 ## 插件 UI 导览
 
@@ -37,12 +36,14 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具，支持在
 
 ![API Serching](https://img.alicdn.com/imgextra/i1/O1CN01KaWkBF1UfCUkY0N3v_!!6000000002544-0-tps-1286-518.jpg)
 
-### API 调试 
+### 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` 命令，按照提示进行配置，
+
 ```
 $ aliyun configure
 Configuring profile 'default' ...
@@ -52,19 +53,24 @@ Default Region Id [None]: cn-hangzhou
 Default output format [json]: json
 Default Language [zh]: zh
 ```
+
 4. 点击 VS Code 状态栏中的阿里云图标，管理你的 profiles，
-![](https://img.alicdn.com/imgextra/i1/O1CN0144NU9N1L4G1cq89Uf_!!6000000001245-0-tps-248-46.jpg)
-![](https://img.alicdn.com/imgextra/i2/O1CN01btLUkc1ldEHJQ0w4S_!!6000000004841-0-tps-1206-190.jpg)
+   ![](https://img.alicdn.com/imgextra/i1/O1CN0144NU9N1L4G1cq89Uf_!!6000000001245-0-tps-248-46.jpg)
+   ![](https://img.alicdn.com/imgextra/i2/O1CN01btLUkc1ldEHJQ0w4S_!!6000000004841-0-tps-1206-190.jpg)
 1. 更多信息请参考 [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)
 
+![API debug](https://learn.microsoft.com/zh-cn/visualstudio/ide/media/vs-2022/copilot-chat-visual-studio.gif?view=vs-2022#lightbox)
+
 ### SDK 示例
+
 你能够通过调试表单生成 SDK 代码示例，并在编辑器中打开对应的 SDK 代码。
 
 ![sdk demo](https://img.alicdn.com/imgextra/i1/O1CN01GVhWTl1waRdYmCn7E_!!6000000006324-0-tps-2630-2038.jpg)
 
 ### Code Snippets
+
 你能通过代码片段快速生成 SDK 代码示例。
 
 在编辑器输入你已订阅的 API 即可搜索到对应 API 的代码段。
@@ -76,33 +82,41 @@ Default Language [zh]: zh
 ![code snippets](https://img.alicdn.com/imgextra/i3/O1CN01dmGwmX1ZyVHozyKx4_!!6000000003263-1-tps-842-468.gif)
 
 ## 反馈
+
 欢迎在我们的 [Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues) 上提交你的问题和建议。
 
 ## Requirements
+
 - Need VS Code 1.75.0 or above.
 
 ## Release Notes
 
 ### 0.0.7
+
 - Launch experience satisfaction questionnaire survey.
 - You are welcome to submit your questions and suggestions on the [experience questionnaire](https://g.alicdn.com/aes/tracker-survey-preview/0.0.13/survey.html?pid=fePxMy&id=3486).
 
 ### 0.0.6
+
 - Surpport code snippets.
 
 ### 0.0.5
+
 - Added aliyun-cli installation instructions.
 
 ### 0.0.3
+
 - Support API calling.
 - Support SDK code sample.
 
-### 0.0.1 
+### 0.0.1
+
 Initial release
+
 - Support product searching and subscription.
 - Support API searching.
 - Support API Document View.
 
 ## License
 
-See the [Apache License 2.0](./LICENSE).
+See the [Apache License 2.0](./LICENSE).

media/src/components/APIPage/API.module.css

@@ -1,76 +1,21 @@
-.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;
-        } */
-      }
-    }
+.expand-arrow {
+  position: absolute;
+  top: 256px;
+  left: 413px;
+  z-index: 999;
+  width: 12px;
+  height: 82px;
+  line-height: 36px;
+  background-color: #fff;
+  border: 1px solid rgb(229, 229, 229);
+  border-radius: 0 2px 2px 0;
+  cursor: pointer;
+  .codicon {
+    position: relative !important;
+    line-height: 79px !important;
+    right: 3px !important;
+  }
+  &:hover {
+    background-color: #f5f5f5;
+  }
 }
-