fix: UI issues & add experience questionnaire entries

media/src/components/APIPage/API.tsx

@@ -3,7 +3,7 @@
  * @description
  */
 import { Tab, Tag } from "@alicloud/console-components";
-import { Segmented } from "antd";
+import { Segmented, notification } from "antd";
 import _ from "lodash";
 import * as PontSpec from "pontx-spec";
 import * as React from "react";
@@ -19,6 +19,7 @@ import { ApiParamsDoc } from "./APIDocument/ApiParamsDoc";
 import { TryAPI } from "./TryAPI/TryAPI";
 import TrySDK from "./TrySDK/TrySDK";
 import { APIPageContext } from "./context";
+import { PontUIService } from "../../service/UIService";
 
 export class APIProps {
   selectedApi?: PontSpec.PontAPI;
@@ -141,7 +142,7 @@ export const API: React.FC<APIProps> = (props) => {
   const renderContent = React.useMemo(() => {
     const documentComp = (
       <div>
-        {selectedApi?.description ? (
+        {selectedApi?.description && selectedApi?.description !== selectedApi?.summary ? (
           <div className="mb-4 bg-white p-4">
             <SemixMarkdown source={selectedApi?.description} />
           </div>
@@ -226,6 +227,31 @@ export const API: React.FC<APIProps> = (props) => {
     }
   }, [mode, boxWidth, isExpand]);
 
+  const openNotification = () => {
+    notification.open({
+      message: "体验调研",
+      duration: null,
+      description: (
+        <span>
+          您对插件的使用体验满意吗？点击
+          <a href="https://g.alicdn.com/aes/tracker-survey-preview/0.0.13/survey.html?pid=fePxMy&id=3486">体验问卷</a>
+          进行吐槽或夸赞，您的反馈对我们十分重要！
+        </span>
+      ),
+      onClose: () => {
+        PontUIService.updateQuestionnaireExpiration(14);
+      },
+    });
+  };
+
+  React.useEffect(() => {
+    PontUIService.getNoticeFlag().then((res) => {
+      if (res === true) {
+        openNotification();
+      }
+    });
+  }, []);
+
   return (
     <div className="bg-gray-100 pb-4" ref={pageEl}>
       {/*  */}
@@ -262,7 +288,7 @@ export const API: React.FC<APIProps> = (props) => {
                       </div>
                     </div>
                     {selectedApi?.summary ? (
-                      <div className="py-2 text-sm font-normal text-gray-500" style={{ width: "100%" }}>
+                      <div className="ml-2 py-2 text-sm font-normal text-gray-500" style={{ width: "100%" }}>
                         {selectedApi?.summary}
                       </div>
                     ) : null}

media/src/components/main.tsx

@@ -37,7 +37,7 @@ export const App: React.FC<AppProps> = (props) => {
   const [appMeta, setAppMeta] = React.useState(props.routerMeta);
   const { pageType, schemaType, specName, modName, name, spec: metaSpec, remoteSpec } = appMeta || {};
 
-  const {product:popcode,version} = getSpecInfoFromName(specName || "");
+  const { product: popcode, version } = getSpecInfoFromName(specName || "");
 
   const [itemMeta, setItemMeta] = React.useState(metaSpec);
   const [defs, setDefs] = React.useState({});

media/src/pages/_app.tsx

@@ -2,7 +2,7 @@ import type { AppProps } from "next/app";
 import "./document/index.module.scss";
 import "./document/index.scss";
 import "../styles/globals.css";
-import "../main.css"
+import "../main.css";
 import "@alicloud/console-components/dist/wind.css";
 import React from "react";
 

media/src/service/UIService.ts

@@ -4,67 +4,71 @@ import { MakeCodeResponse, OpenAPIResponse } from "../types/openAPI";
 /** 不同使用场景，各自注册服务来源 */
 const defaultSpecs: any[] = [];
 export const PontUIService = {
-    /** 获取本地元数据列表 */
-    requestPontSpecs: async () => {
-      return {
-        localSpecs: defaultSpecs as any[] as PontSpec[],
-        remoteSpecs: defaultSpecs as any[] as PontSpec[],
-        currentOriginName: "",
-      };
-    },
-
-    requestDefinitions: async (specName: string) => {
-      return {} as any;
-    },
-
-    /** 获取 本地/远程 的diff信息 */
-    requestDiffs: async () => {
-      return [] as any;
-    },
-
-    /** 重新生成SDK */
-    requestGenerateSdk: async (): Promise<void> => {},
-
-    /** 重新拉取远程数据源 */
-    syncRemoteSpec: async (specNames = ""): Promise<void> => {},
-
-    updateLocalSpec: async (spec: PontSpec): Promise<void> => {},
-
-    /** 更新本地数据源 */
-    updateSpecBySpecNames: async (specNames = ""): Promise<void> => {},
-
-    /** 更新本地模块  */
-    updateMod: async (modName: string, specName = ""): Promise<void> => {},
-
-    /** 更新本地 API */
-    updateAPI: async (modName: string, apiName: string, specName = ""): Promise<void> => {},
-
-    /** 更新类 */
-    updateBaseClass: async (className: string, specName = ""): Promise<void> => {},
-
-    openMeta: async (meta: {
-      name: string;
-      specName: string;
-      modName?: string;
-      type: string;
-      spec: any;
-    }): Promise<void> => {},
+  /** 获取本地元数据列表 */
+  requestPontSpecs: async () => {
+    return {
+      localSpecs: defaultSpecs as any[] as PontSpec[],
+      remoteSpecs: defaultSpecs as any[] as PontSpec[],
+      currentOriginName: "",
+    };
+  },
 
-    /** request openapi */
-    openAPIRequest: async (params = {}): Promise<OpenAPIResponse> => new OpenAPIResponse,
+  requestDefinitions: async (specName: string) => {
+    return {} as any;
+  },
 
-    /** get endpoints list */
-    requestEndpoints: async (product: string) => {
-      return [] as any;
-    },
-    /** get sdk demo */
-    makeCodeRequest: async (params = {}): Promise<MakeCodeResponse> => new MakeCodeResponse,
-    /** get local language */
-    getLocalLanguage : async () => "",
-    /** update local language */
-    updateLocalLanguage : async (language:string) => "",
-    /** open in ide */
-    openInCode: async (codeInfo:{code:string,language:string}): Promise<void> => {},
-    /** save to file */
-    saveToFile: async (code:string): Promise<void> => {},
-  };
+  /** 获取 本地/远程 的diff信息 */
+  requestDiffs: async () => {
+    return [] as any;
+  },
+
+  /** 重新生成SDK */
+  requestGenerateSdk: async (): Promise<void> => {},
+
+  /** 重新拉取远程数据源 */
+  syncRemoteSpec: async (specNames = ""): Promise<void> => {},
+
+  updateLocalSpec: async (spec: PontSpec): Promise<void> => {},
+
+  /** 更新本地数据源 */
+  updateSpecBySpecNames: async (specNames = ""): Promise<void> => {},
+
+  /** 更新本地模块  */
+  updateMod: async (modName: string, specName = ""): Promise<void> => {},
+
+  /** 更新本地 API */
+  updateAPI: async (modName: string, apiName: string, specName = ""): Promise<void> => {},
+
+  /** 更新类 */
+  updateBaseClass: async (className: string, specName = ""): Promise<void> => {},
+
+  openMeta: async (meta: {
+    name: string;
+    specName: string;
+    modName?: string;
+    type: string;
+    spec: any;
+  }): Promise<void> => {},
+
+  /** request openapi */
+  openAPIRequest: async (params = {}): Promise<OpenAPIResponse> => new OpenAPIResponse(),
+
+  /** get endpoints list */
+  requestEndpoints: async (product: string) => {
+    return [] as any;
+  },
+  /** get sdk demo */
+  makeCodeRequest: async (params = {}): Promise<MakeCodeResponse> => new MakeCodeResponse(),
+  /** get local language */
+  getLocalLanguage: async () => "",
+  /** update local language */
+  updateLocalLanguage: async (language: string) => "",
+  /** open in ide */
+  openInCode: async (codeInfo: { code: string; language: string }): Promise<void> => {},
+  /** save to file */
+  saveToFile: async (code: string): Promise<void> => {},
+  /** 是否弹出通知框 */
+  getNoticeFlag: async (): Promise<boolean> => true,
+  /** 更新体验弹窗弹出的时间 */
+  updateQuestionnaireExpiration: async (days: number): Promise<void> => {},
+};

package.json

@@ -25,10 +25,15 @@
         "title": "导入依赖"
       },
       {
-        "command": "alicloud.api.githubIssue",
-        "title": "feedback",
+        "command": "alicloud.api.feedback",
+        "title": "反馈",
         "icon": "$(feedback)"
       },
+      {
+        "command": "alicloud.api.githubIssue",
+        "title": "Issues",
+        "icon": "$(issues)"
+      },
       {
         "command": "alicloud.api.findInterface",
         "title": "查找 API",
@@ -178,6 +183,11 @@
           "command": "alicloud.api.githubIssue",
           "when": "view == alicloudApiExplorer",
           "group": "navigation@4"
+        },
+        {
+          "command": "alicloud.api.feedback",
+          "when": "view == alicloudApiExplorer",
+          "group": "navigation@5"
         }
       ],
       "view/item/context": [