fix: Display the deprecated tag in the api directory. (#37)

* fix: add deprecated tag and update api search label. * fix: Display the deprecated flag in the api directory. * docs:update readme * docs:update readme * docs:update readme * fix:Remove the method in the title * fix: package.json scripts
aliyun · Apr 22, 2024 · 7ff2161 · 7ff2161
1 parent 6114f56
commit 7ff2161
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 197 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,36 @@
+# Release Notes
+
+## v0.0.9
+
+- The UI was optimized and a deprecated tag was added to indicate that the API is not recommended.
+
+## v0.0.8
+
+- Fixed some Windows compatibility issues.
+- Optimized the UI interface of webview.
+
+## v0.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).
+
+## v0.0.6
+
+- Surpport code snippets.
+
+## v0.0.5
+
+- Added aliyun-cli installation instructions.
+
+## v0.0.3
+
+- Support API calling.
+- Support SDK code sample.
+
+## v0.0.1
+
+Initial release
+
+- Support product searching and subscription.
+- Support API searching.
+- Support API Document View.
diff --git a/README.en-US.md b/README.en-US.md
diff --git a/README.md b/README.md
@@ -8,40 +8,42 @@ The Alibaba Cloud API Toolkit for VSCode makes it easier to access Alibaba Cloud
 
 English | [简体中文](./README.zh_CN.md)
 
-## Features                          
-* **Alicloud Product Subscription:** You can search for Alicloud products and subscribe to its APIs you want to use.
+## Features
 
-* **API Searching:** You can search the Open API of Alibaba Cloud products to which you are subscribed.
+- **Alicloud Product Subscription:** You can search for Alicloud products and subscribe to its APIs you want to use.
 
-* **API Document View:** Clicking on an API can navigate you to a new tab which displays the corresponding API document, 
-including descriptions, request parameters, response parameters and error codes.
+- **API Searching:** You can search the Open API of Alibaba Cloud products to which you are subscribed.
 
-* **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.
+- **API Document View:** Clicking on an API can navigate you to a new tab which displays the corresponding API document,
+  including descriptions, request parameters, response parameters and error codes.
 
-* **Code Snippets:** You can use the code snippets to quickly generate the code.
+- **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.
+- **Code Snippets:** You can use the code snippets to quickly generate the code.
+
+- More features are under development, please stay tuned.
 
 ## Extension UI Guide
 
-![VSCode Extension Guide](https://img.alicdn.com/imgextra/i1/O1CN01rOmqbK1pOoGtdWxFO_!!6000000005351-0-tps-2462-1440.jpg)
+![VSCode Extension Guide](https://img.alicdn.com/imgextra/i2/O1CN01t993u81InC3xh7RVU_!!6000000000937-0-tps-2328-1646.jpg)
 
 ### Product Searching `ctrl+cmd+k`
-  
+
 ![Product Searching](https://img.alicdn.com/imgextra/i1/O1CN01bcJ5DM1RpmnlOjDHK_!!6000000002161-0-tps-1202-798.jpg)
- 
+
 ### API Searching `ctrl+cmd+l`
 
-![API Serching](https://img.alicdn.com/imgextra/i1/O1CN01KaWkBF1UfCUkY0N3v_!!6000000002544-0-tps-1286-518.jpg)
+![API Serching](https://img.alicdn.com/imgextra/i4/O1CN01KCrc1a1vooTmC9a1h_!!6000000006220-0-tps-1986-542.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. Install [aliyun-cli](https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#installation).
-3. You can run the `aliyun configure` command for quick configuration. 
+The feature requires you to configure your AK/SK information as follows:
+
+1. Install Aliyun CLI: [Install guide](https://www.alibabacloud.com/help/en/cli/installation-guide).
+2. Install [Alibaba Cloud CLI Tools](https://marketplace.visualstudio.com/items?itemName=alibabacloud-openapi.aliyuncli) extentions.
+3. You can run the `aliyun configure` command for quick configuration.
+
 ```
 $ aliyun configure
 Configuring profile 'default' ...
@@ -51,20 +53,23 @@ Default Region Id [None]: cn-hangzhou
 Default output format [json]: json
 Default Language [zh]: zh
 ```
+
 4. Click the Alibaba Cloud icon in VS Code status bar to manage your 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)
-5. More information please refer to the [Alibaba Cloud CLI Documentation](https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#configure).
+   ![](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)
+   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)
+![API debug](https://img.alicdn.com/imgextra/i3/O1CN01yfMcHl1i6lNdjzmzs_!!6000000004364-2-tps-2688-1820.png)
 
 ### SDK Code Sample
+
 You can generate the SDK Sample by using the debugger form and then open it in your editor.
 
-![sdk demo](https://img.alicdn.com/imgextra/i1/O1CN01GVhWTl1waRdYmCn7E_!!6000000006324-0-tps-2630-2038.jpg)
+![sdk demo](https://img.alicdn.com/imgextra/i1/O1CN01C0vQDB29gTtW5erj4_!!6000000008097-0-tps-2638-1778.jpg)
 
 ### Code Snippets
-You can use the code snippets to quickly generate the code. 
+
+You can use the code snippets to quickly generate the code.
 
 Type your subscribed API into the editor and select the API snippet you want to generate.
 
@@ -74,38 +79,14 @@ Or use the keyboard shortcuts `ctrl+cmd+l` to search the API and select Insert s
 ![code snippets](https://img.alicdn.com/imgextra/i3/O1CN01dmGwmX1ZyVHozyKx4_!!6000000003263-1-tps-842-468.gif)
 
 ## Feedback
-Submit bug reports and feature requests on [our 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
+- Submit bug reports and feature requests on [our Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues).
 - 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.
+## Requirements
 
-### 0.0.1 
-Initial release
-- Support product searching and subscription.
-- Support API searching.
-- Support API Document View.
+- Need VS Code 1.75.0 or above.
 
 ## License
 
-See the [Apache License 2.0](./LICENSE).
+See the [Apache License 2.0](./LICENSE).
diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -26,22 +26,22 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具，支持在
 
 ## 插件 UI 导览
 
-![VSCode Extension Guide](https://img.alicdn.com/imgextra/i1/O1CN01o9s4TT1GTq3oggW7K_!!6000000000624-0-tps-2456-1446.jpg)
+![VSCode Extension Guide](https://img.alicdn.com/imgextra/i1/O1CN01tlXFtt1mj0vE1ZrhR_!!6000000004989-0-tps-2498-1768.jpg)
 
 ### 产品搜索 `ctrl+cmd+k`
 
 ![Product Searching](https://img.alicdn.com/imgextra/i1/O1CN01bcJ5DM1RpmnlOjDHK_!!6000000002161-0-tps-1202-798.jpg)
 
 ### API 搜索 `ctrl+cmd+l`
 
-![API Serching](https://img.alicdn.com/imgextra/i1/O1CN01KaWkBF1UfCUkY0N3v_!!6000000002544-0-tps-1286-518.jpg)
+![API Serching](https://img.alicdn.com/imgextra/i2/O1CN01ySJXt41c4ZnIbj51N_!!6000000003547-0-tps-1986-542.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`，
+1. 安装阿里云 CLI：[安装指南](https://help.aliyun.com/zh/cli/installation-guide)；
+2. 安装 [Alibaba Cloud CLI Tools](https://marketplace.visualstudio.com/items?；itemName=alibabacloud-openapi.aliyuncli) 插件；
 3. 输入 `aliyun configure` 命令，按照提示进行配置，
 
 ```
@@ -54,20 +54,18 @@ Default output format [json]: json
 Default Language [zh]: zh
 ```
 
-4. 点击 VS Code 状态栏中的阿里云图标，管理你的 profiles，
+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)
-1. 更多信息请参考 [Alibaba Cloud CLI Documentation](https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#configure)。
+   更多信息请参考 [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)
+![API debug](https://img.alicdn.com/imgextra/i3/O1CN01yfMcHl1i6lNdjzmzs_!!6000000004364-2-tps-2688-1820.png)
 
 ### SDK 示例
 
 你能够通过调试表单生成 SDK 代码示例，并在编辑器中打开对应的 SDK 代码。
 
-![sdk demo](https://img.alicdn.com/imgextra/i1/O1CN01GVhWTl1waRdYmCn7E_!!6000000006324-0-tps-2630-2038.jpg)
+![sdk demo](https://img.alicdn.com/imgextra/i1/O1CN01C0vQDB29gTtW5erj4_!!6000000008097-0-tps-2638-1778.jpg)
 
 ### Code Snippets
 
@@ -83,44 +81,13 @@ Default Language [zh]: zh
 
 ## 反馈
 
-欢迎在我们的 [Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues) 上提交你的问题和建议。
+- 欢迎在我们的 [Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues) 上提交你的问题和建议。
+- 您对插件的使用体验满意吗？点击 [体验问卷](https://g.alicdn.com/aes/tracker-survey-preview/0.0.13/survey.html?pid=fePxMy&id=3486) 进行吐槽或夸赞，您的反馈对我们十分重要！
 
 ## 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
-
-Initial release
-
-- Support product searching and subscription.
-- Support API searching.
-- Support API Document View.
-
 ## License
 
 See the [Apache License 2.0](./LICENSE).
diff --git a/media/src/components/APIPage/API.tsx b/media/src/components/APIPage/API.tsx
@@ -181,9 +181,9 @@ export const API: React.FC<APIProps> = (props) => {
       <div className="flex h-[calc(100vh_-_140px)] bg-white">
         <div className={`expand-arrow ${isExpand ? "" : "!left-1"}`} onClick={() => setIsExpand(!isExpand)}>
           {isExpand ? (
-            <div className="codicon codicon-chevron-left relative top-6 right-0.5"></div>
+            <div className="codicon codicon-chevron-left relative right-0.5 top-6"></div>
           ) : (
-            <div className="codicon codicon-chevron-right relative top-6 right-0.5"></div>
+            <div className="codicon codicon-chevron-right relative right-0.5 top-6"></div>
           )}
         </div>
         {isExpand && <div className="w-[25rem]">{isExpand && <APIDebugger></APIDebugger>}</div>}
@@ -246,11 +246,11 @@ export const API: React.FC<APIProps> = (props) => {
                 <div className="flex justify-between">
                   <div>
                     <div className="flex">
-                      {selectedApi.method ? (
+                      {/* {selectedApi.method ? (
                         <div className="h-6 w-16 rounded-sm border-2 border-solid border-emerald-100 bg-emerald-100 text-center text-base font-medium leading-5 text-teal-500 ">
                           {selectedApi.method?.toUpperCase()}
                         </div>
-                      ) : null}
+                      ) : null} */}
                       {selectedApi.deprecated ? (
                         <Tag className="my-auto ml-2">
                           <span className="text-gray-500">deprecated</span>

diff --git a/package.json b/package.json
@@ -214,7 +214,7 @@
     "reinstall": "rimraf node_modules && npm i",
     "afterinstall": "cd ../../ && lerna bootstrap",
     "build:ncc": "rimraf dist && ncc build ./src/extension.ts -o dist -m --license licenses.txt && mv dist/index.js dist/extension.js",
-    "vscode:prepublish": "npm run build:ncc",
+    "vscode:prepublish": "npm run build:media && npm run build:ncc",
     "esbuild-base": "esbuild ./src/extension.ts --bundle --outfile=dist/extension.js --external:vscode --format=cjs --platform=node --minify",
     "esbuild": "npm run esbuild-base -- --sourcemap",
     "esbuild-watch": "npm run esbuild-base -- --sourcemap --watch",

diff --git a/resources/deprecated.svg b/resources/deprecated.svg