aliyun · jasonHzq · Jun 24, 2024 · Jun 19, 2024 · Jun 19, 2024 · Jun 20, 2024
diff --git a/README.md b/README.md
@@ -22,11 +22,13 @@ English | [简体中文](./README.zh_CN.md)
 
 - **Code Snippets:** You can use the code snippets to quickly generate the code.
 
+- **Profiles Management :** Manage your Alibaba Cloud profiles.
+
 - More features are under development, please stay tuned.
 
 ## Extension UI Guide
 
-![VSCode Extension Guide](https://img.alicdn.com/imgextra/i2/O1CN01t993u81InC3xh7RVU_!!6000000000937-0-tps-2328-1646.jpg)
+![VSCode Extension Guide](https://gw.alicdn.com/imgextra/i4/O1CN01tkB2bT2AAFeiOYZm6_!!6000000008162-0-tps-2372-1594.jpg)
 
 ### Product Searching `ctrl+cmd+k`
 
@@ -38,28 +40,11 @@ English | [简体中文](./README.zh_CN.md)
 
 ### Call the API
 
-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' ...
-Aliyun Access Key ID [None]: <Your AccessKey ID>
-Aliyun Access Key Secret [None]: <Your AccessKey Secret>
-Default Region Id [None]: cn-hangzhou
-Default output format [json]: json
-Default Language [zh]: zh
-```
+![API debugging](https://gw.alicdn.com/imgextra/i2/O1CN01fsuDBE1CLMJaBJj32_!!6000000000064-0-tps-3238-1920.jpg)
 
-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)
-   More information please refer to the [Alibaba Cloud CLI Documentation](https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#configure).
+> Note that the debugging needs to configure your AK credentials, click the left identity icon, you can add and switch the current AK credentials configuration.
 
-![API debug](https://img.alicdn.com/imgextra/i3/O1CN01yfMcHl1i6lNdjzmzs_!!6000000004364-2-tps-2688-1820.png)
+![manage profiles](https://gw.alicdn.com/imgextra/i2/O1CN01HzFhxH20gdVF4MIfq_!!6000000006879-0-tps-1938-378.jpg)
 
 ### SDK Code Sample
 
@@ -84,6 +69,12 @@ When writing SDK code, you can get more code sample references by viewing the Op
 
 ![Document enhancement](https://img.alicdn.com/imgextra/i4/O1CN01jedn431D1Uk8MEhM3_!!6000000000156-0-tps-2562-654.jpg)
 
+### Profiles Management
+
+Add and switch your Alibaba Cloud profiles.
+
+![](https://img.alicdn.com/imgextra/i1/O1CN01NN667S1skk7vLbhr1_!!6000000005805-0-tps-2912-1596.jpg)
+
 ## Feedback
 
 - Submit bug reports and feature requests on [our Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues).

diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -22,11 +22,13 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具，支持在
 
 - **Code Snippets:** 支持代码片段功能，帮助你快速编写 SDK 代码。
 
+- **profiles 管理:** 管理你的阿里云 profiles。
+
 - 更多功能正在开发中，敬请期待...
 
 ## 插件 UI 导览
 
-![VSCode Extension Guide](https://img.alicdn.com/imgextra/i1/O1CN01tlXFtt1mj0vE1ZrhR_!!6000000004989-0-tps-2498-1768.jpg)
+![VSCode Extension Guide](https://gw.alicdn.com/imgextra/i2/O1CN013GxzFK21jDLZNFaos_!!6000000007020-0-tps-2704-1808.jpg)
 
 ### 产品搜索 `ctrl+cmd+k`
 
@@ -38,28 +40,11 @@ Alibaba Cloud API Toolkit 是一个轻量化的阿里云 API 工具，支持在
 
 ### API 调试
 
-调试功能需要配置你的 AK/SK 信息，配置方法如下：
-
-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` 命令，按照提示进行配置，
-
-```
-$ aliyun configure
-Configuring profile 'default' ...
-Aliyun Access Key ID [None]: <Your AccessKey ID>
-Aliyun Access Key Secret [None]: <Your AccessKey Secret>
-Default Region Id [None]: cn-hangzhou
-Default output format [json]: json
-Default Language [zh]: zh
-```
+![API debug](https://gw.alicdn.com/imgextra/i2/O1CN01fsuDBE1CLMJaBJj32_!!6000000000064-0-tps-3238-1920.jpg)
 
-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)
-   更多信息请参考 [Alibaba Cloud CLI Documentation](https://github.com/aliyun/aliyun-cli?tab=readme-ov-file#configure)。
+> 注意，调试功能需要配置你的 AK 凭证，点击左侧身份图标，可以新增和切换当前的 AK 凭证配置。
 
-![API debug](https://img.alicdn.com/imgextra/i3/O1CN01yfMcHl1i6lNdjzmzs_!!6000000004364-2-tps-2688-1820.png)
+![](https://img.alicdn.com/imgextra/i2/O1CN01HzFhxH20gdVF4MIfq_!!6000000006879-0-tps-1938-378.jpg)
 
 ### SDK 示例
 
@@ -85,6 +70,12 @@ Default Language [zh]: zh
 
 ![Document enhancement](https://img.alicdn.com/imgextra/i4/O1CN01jedn431D1Uk8MEhM3_!!6000000000156-0-tps-2562-654.jpg)
 
+### Profiles 管理
+
+新增和切换你的阿里云 profiles。
+
+![](https://img.alicdn.com/imgextra/i1/O1CN01NN667S1skk7vLbhr1_!!6000000005805-0-tps-2912-1596.jpg)
+
 ## 反馈
 
 - 欢迎在我们的 [Github repository](https://github.com/aliyun/alibabacloud-api-vscode-toolkit/issues) 上提交你的问题和建议。

diff --git a/media/src/components/APIPage/APIDebugger/utils.ts b/media/src/components/APIPage/APIDebugger/utils.ts
@@ -1,34 +1,34 @@
 export const getCustomWidget = (schema): string => {
-  if (schema?.type === 'array') {
+  if (schema?.type === "array") {
     // if (schema.items?.type === 'string' && schema?.widget === 'stringList') {
     //   return 'stringList';
     // }
-    return 'list';
+    return "list";
   }
-  if (schema?.type === 'string') {
+  if (schema?.type === "string") {
     if (schema?.isFileTransferUrl) {
-      return 'fileTypeSelect';
+      return "file";
     }
-    if (schema?.format === 'binary') {
-      return 'file';
+    if (schema?.format === "binary") {
+      return "file";
     }
     if (schema?.enum || schema?.enumValueTitles) {
-      return 'enum';
+      return "enum";
     }
-    return 'string';
-  } else if (schema?.type === 'boolean') {
-    return 'booleanSwitch';
-  } else if (schema?.type === 'object' && schema?.additionalProperties) {
-    return 'map';
-  } else if (schema?.type === 'object' && !schema?.properties) {
-    return 'json';
-  } else if (schema?.type === 'any') {
-    return 'typeSelect';
+    return "string";
+  } else if (schema?.type === "boolean") {
+    return "booleanSwitch";
+  } else if (schema?.type === "object" && schema?.additionalProperties) {
+    return "map";
+  } else if (schema?.type === "object" && !schema?.properties) {
+    return "json";
+  } else if (schema?.type === "any") {
+    return "typeSelect";
   } else if ((schema?.ref || schema?.$ref) && !schema?.properties && !schema?.items) {
-    return 'struct';
+    return "struct";
   }
   // else if (schema?.type === 'number' || (schema?.type === 'integer' && schema?.format === 'int64')){
   //   return "string"
   // }
-  return '';
-};
+  return "";
+};
diff --git a/media/src/components/APIPage/TryAPI/TryAPI.tsx b/media/src/components/APIPage/TryAPI/TryAPI.tsx
@@ -12,6 +12,7 @@ import { EditorLanguages } from "../../../types/EditorLanguages";
 import I18N from "../../../utils/I18N";
 import { getEditorMenuItems, parseXml } from "../../utils";
 import { APIPageContext } from "../context";
+import { PontUIService } from "../../../service/UIService";
 
 export class TryAPIProps {}
 
@@ -31,7 +32,8 @@ const TAB_PANES = [
 ];
 
 export const TryAPI: React.FC<TryAPIProps> = (props) => {
-  const { openAPIResponses, isApiResultLoading, version, apiMeta, product, mode } = APIPageContext.useContainer();
+  const { openAPIResponses, isApiResultLoading, version, apiMeta, product, mode, profileInfo } =
+    APIPageContext.useContainer();
   const doc = `${product}::${version}::${apiMeta.name}`;
   const [tab, setTab] = React.useState(TAB_PANES[0].value);
   const apiResult = openAPIResponses?.[doc];
@@ -138,18 +140,15 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
       <Alert
         message={
           <div>
-            调试需要
-            <a href="https://help.aliyun.com/zh/cli/installation-guide/" target="_blank">
-              安装
-            </a>
-            阿里云 CLI 并
-            <a
-              href="https://help.aliyun.com/zh/cli/interactive-configuration-or-fast-configuration#section-5pj-p7j-06z"
-              target="_blank"
-            >
-              配置
-            </a>
-            您的 AK/SK 信息。{I18N.main.explorer.AKTip}
+            {profileInfo?.current?.length ? null : (
+              <span>
+                调试需要配置您的 AK/SK 信息，
+                <a onClick={() => PontUIService.openProfileManager()} className="text-blue-500">
+                  点击配置。
+                </a>
+              </span>
+            )}
+            {I18N.main.explorer.AKTip}
           </div>
         }
         type="warning"
@@ -165,14 +164,16 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
           ) : null}
 
           <div className="api-res-header">
-            <div className="title mb-4 text-gray-900 text-sm font-medium">{I18N.main.explorer.overview}</div>
+            <div className="title mb-4 text-sm font-medium text-gray-900">{I18N.main.explorer.overview}</div>
             {/* {apiResult?.result || props.isApiResultLoading ? ( */}
             <div className="res-info mb-4 flex">
-              <div className="item mr-6 mx-1 inline-block">
+              <div className="item mx-1 mr-6 inline-block">
                 <div className="debug-res flex">
                   <div
                     className={`codicon codicon-${
-                      String(statusCode).startsWith("2") ? "pass-filled success text-green-600" : "error error-red text-red-700"
+                      String(statusCode).startsWith("2")
+                        ? "pass-filled success text-green-600"
+                        : "error error-red text-red-700"
                     }`}
                   ></div>
                   <div className="value">
@@ -181,21 +182,21 @@ export const TryAPI: React.FC<TryAPIProps> = (props) => {
                 </div>
               </div>
               {apiResult && statusCode ? (
-                <div className="item mr-6 mx-1">
+                <div className="item mx-1 mr-6">
                   {/* {httpStatusMessageMap[statusCode] || statusCode} */}
-                  <span className="label font-medium mr-1 text-gray-500">{I18N.main.explorer.statusCode}</span>
+                  <span className="label mr-1 font-medium text-gray-500">{I18N.main.explorer.statusCode}</span>
                   <span
                     className={`value result-status font-medium ${
-                      String(statusCode).startsWith("2") ? "text-green-600 success" : "error error-red text-red-700"
+                      String(statusCode).startsWith("2") ? "success text-green-600" : "error error-red text-red-700"
                     }`}
                   >
                     {statusCode}
                   </span>
                 </div>
               ) : null}
               {apiResult ? (
-                <div className="item mr-6 mx-1">
-                  <span className="label font-medium mr-1 text-gray-500">{I18N.main.explorer.time}</span>
+                <div className="item mx-1 mr-6">
+                  <span className="label mr-1 font-medium text-gray-500">{I18N.main.explorer.time}</span>
                   <span className="value">{apiResult.cost}ms</span>
                 </div>
               ) : null}

diff --git a/media/src/components/APIPage/context.ts b/media/src/components/APIPage/context.ts
@@ -1,58 +1,63 @@
 /**
  * @author yini-chen
  */
-import { createContainer } from 'unstated-next';
-import { SemixFormProps } from '../SemixFormRender';
-import React from 'react';
-import { PontUIService } from '../../service/UIService';
-import { OpenAPIResponse, OpenAPIRequestResult } from '../../types/openAPI';
-import { endpointsMocks } from '../../mocks/endpoints';
-import { getVSCode } from '../../utils/utils';
+import { createContainer } from "unstated-next";
+import { SemixFormProps } from "../SemixFormRender";
+import React from "react";
+import { PontUIService } from "../../service/UIService";
+import { OpenAPIResponse, OpenAPIRequestResult } from "../../types/openAPI";
+import { endpointsMocks } from "../../mocks/endpoints";
+import { getVSCode } from "../../utils/utils";
 
-export class APIPageState  {
+export class APIPageState {
   /**
    * apiMeta
    */
   apiMeta: any;
   /**
    * schemaForm
    */
-  schemaForm: SemixFormProps['form'];
+  schemaForm: SemixFormProps["form"];
   product: string;
-  version:string;
+  version: string;
   /**
    * openapi sdk 响应组
    */
-  openAPIResponses?= {};
+  openAPIResponses? = {};
   /**
    * 发起调试
    */
-  onDebug?:(value:any)=>void;
+  onDebug?: (value: any) => void;
   /**
    * 发起调用loading
    */
-  isApiResultLoading? = false
+  isApiResultLoading? = false;
   /**
    * 模式选择
    */
-  mode: 'debug' | 'doc' |'sdk' = 'debug';
-  changeMode: (mode: 'debug' | 'doc' | 'sdk') => void;
+  mode: "debug" | "doc" | "sdk" = "debug";
+  changeMode: (mode: "debug" | "doc" | "sdk") => void;
   /**
    * 服务地址
    */
   endpoints?: any[];
   /**
    * regionId
    */
-  regionId? = 'cn-hangzhou';
+  regionId? = "cn-hangzhou";
   setRegionId?: (regionId: string) => void;
+  /**
+   * profileInfo
+   */
+  profileInfo?: any;
 }
 
 export const useAPIPageContext = (initialState = {} as APIPageState): APIPageState => {
   const [openAPIResponses, setOpenAPIResponse] = React.useState(null);
   const [isApiResultLoading, setIsApiResultLoading] = React.useState(false);
   const [endpoints, setEndpoints] = React.useState([]);
   const [regionId, setRegionId] = React.useState<string>("cn-hangzhou");
+  const [profileInfo, setProfileInfo] = React.useState({});
 
   React.useEffect(() => {
     if (endpoints.length === 0) {
@@ -63,17 +68,32 @@ export const useAPIPageContext = (initialState = {} as APIPageState): APIPageSta
     }
   }, [initialState.product]);
 
-  const onDebug = (value) =>{
+  React.useEffect(() => {
+    PontUIService.requestProfiles().then((res) => {
+      setProfileInfo(res || {});
+    });
+  }, []);
+
+  const onDebug = (value) => {
     setIsApiResultLoading(true);
-    PontUIService.openAPIRequest(value).then(res=>{
+    PontUIService.openAPIRequest(value).then((res) => {
       setIsApiResultLoading(false);
       const responses = {};
       // 根据文档名存储响应，切换API文档时展示对应的响应
-      responses[res.doc] = res.response
+      responses[res.doc] = res.response;
       setOpenAPIResponse(responses);
     });
-  }
-  return { ...initialState, openAPIResponses, onDebug, isApiResultLoading, endpoints, regionId, setRegionId };
+  };
+  return {
+    ...initialState,
+    openAPIResponses,
+    onDebug,
+    isApiResultLoading,
+    endpoints,
+    regionId,
+    setRegionId,
+    profileInfo,
+  };
 };
 
-export const APIPageContext = createContainer(useAPIPageContext);
+export const APIPageContext = createContainer(useAPIPageContext);