Merge pull request #13 from aliyun/feat/webview-style-upgrade

Optimized the UI interface of webview

Author: yini-chen

.prettierrc

@@ -0,0 +1,37 @@
+module.exports = {
+  plugins: ['prettier-plugin-tailwindcss'],
+  // 一行最多 120 字符
+  printWidth: 120,
+  // 使用 2 个空格缩进
+  tabWidth: 2,
+  // 不使用缩进符，而使用空格
+  useTabs: false,
+  // 行尾需要有分号
+  semi: true,
+  // 使用单引号
+  singleQuote: false,
+  // 对象的 key 仅在必要时用引号
+  quoteProps: 'as-needed',
+  // jsx 不使用单引号，而使用双引号
+  jsxSingleQuote: false,
+  // 末尾需要有逗号
+  trailingComma: 'all',
+  // 大括号内的首尾需要空格
+  bracketSpacing: true,
+  // 箭头函数，只有一个参数的时候，也需要括号
+  arrowParens: 'always',
+  // 不需要写文件开头的 @prettier
+  requirePragma: false,
+  // 不需要自动在文件开头插入 @prettier
+  insertPragma: false,
+  // 使用默认的折行标准
+  proseWrap: 'preserve',
+  // 根据显示样式决定 html 要不要折行
+  htmlWhitespaceSensitivity: 'css',
+  // vue 文件中的 script 和 style 内不用缩进
+  vueIndentScriptAndStyle: false,
+  // 换行符使用 lf
+  endOfLine: 'lf',
+  // 格式化内嵌代码
+  embeddedLanguageFormatting: 'auto',
+};

.prettierrc.js

@@ -0,0 +1,8 @@
+{
+  "editor.formatOnSave": true,
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit"
+  }
+}

.vscode/settings.json

@@ -82,6 +82,10 @@ Submit bug reports and feature requests on [our Github repository](https://githu
 
 ## Release Notes
 
+### 0.0.8
+- Fixed some Windows compatibility issues.
+- Optimized the UI interface of webview.
+
 ### 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).

README.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,45 @@ 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.8
+- Fixed some Windows compatibility issues.
+- Optimized the UI interface of webview.
+
 ### 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).

README.zh_CN.md

@@ -37,15 +37,23 @@
   "version": "0.3.70",
   "repository": "[email protected]:aliyun/alibabacloud-api-vscode-toolkit.git",
   "devDependencies": {
-    "less": "^4.2.0",
-    "@vitejs/plugin-react": "^1.3.2",
-    "vite": "^2.9.7",
+    "@types/blueimp-md5": "^2.7.0",
     "@types/fs-extra": "^5.1.0",
     "@types/lodash": "^4.14.182",
+    "@types/node": "^20",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/vscode": "^1.47.0",
     "@types/vscode-webview": "^1.57.0",
-    "@types/blueimp-md5": "^2.7.0"
+    "@vitejs/plugin-react": "^1.3.2",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.4",
+    "less": "^4.2.0",
+    "postcss": "^8",
+    "prettier": "^3.2.5",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5",
+    "vite": "^2.9.7"
   }
 }

media/package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

media/postcss.config.js

@@ -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;
+  }
 }
-