aliyun · jasonHzq · Oct 10, 2024 · Sep 23, 2024 · Sep 23, 2024 · Sep 24, 2024
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,7 @@ media/out/
 media/dist/assets
 
 *.local.js
+*.local.ts
+*.local.mjs
+
+scripts
diff --git a/.vscodeignore b/.vscodeignore
@@ -14,3 +14,5 @@ tsconfig.json
 *.md
 !README.md
 !CHANGELOG.md
+scripts
+coverage
diff --git a/media/next-env.d.ts b/media/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/media/package.json b/media/package.json
@@ -19,10 +19,9 @@
     "@vscode-elements/elements": "^1.3.0",
     "ahooks": "3.8.1",
     "antd": "^5.20.5",
-    "intl-format": "^1.2.0",
     "load-script": "^2.0.0",
     "lodash": "^4.17.20",
-    "next": "^14.2.6",
+    "next": "^14.2.13",
     "pontx-semix-table": "0.5.3",
     "pontx-ui": "latest",
     "react": "^18.3.1",
@@ -42,7 +41,7 @@
   "devDependencies": {
     "@types/blueimp-md5": "^2.7.0",
     "@types/fs-extra": "^5.1.0",
-    "@types/lodash": "^4.17.6",
+    "@types/lodash": "^4.17.10",
     "@types/node": "^20",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
@@ -56,8 +55,8 @@
     "postcss": "^8",
     "prettier": "^3.3.3",
     "react-syntax-highlighter": "^15.5.0",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.13",
     "typescript": "^5",
-    "vite": "^2.9.18"
+    "vite": "^5.4.8"
   }
 }
diff --git a/media/src/components/APIPage/API.tsx b/media/src/components/APIPage/API.tsx
@@ -22,6 +22,8 @@ import { APIPageContext } from "./context";
 import { PontUIService } from "../../service/UIService";
 import ApiResponseDoc from "./APIDocument/ApiResponseDoc";
 import Searcher from "../common/Searcher";
+import I18N from "../../utils/I18N";
+import { TableI18N } from "../../utils/utils";
 
 export class APIProps {
   selectedApi?: PontSpec.PontAPI;
@@ -48,6 +50,7 @@ export const API: React.FC<APIProps> = (props) => {
   const initValue = React.useMemo(() => {
     return {
       schemas: definitions as any,
+      I18N: new TableI18N(),
       getRefSchema: getSchema,
       renderTypeColAppendix: (node: any) => {
         if (node?.nodeValue?.schema.in) {
@@ -72,7 +75,7 @@ export const API: React.FC<APIProps> = (props) => {
         return (
           <tr>
             <td colSpan={2} style={{ padding: "15px 0", textAlign: "center" }}>
-              无出参定义
+              {I18N.ide.main.common.noOutputParameterDefinition}
             </td>
           </tr>
         );
@@ -122,9 +125,9 @@ export const API: React.FC<APIProps> = (props) => {
   });
 
   const tabs = [
-    { tab: "文档", key: "doc" },
-    { tab: "调试", key: "debug" },
-    { tab: "代码示例", key: "sdk" },
+    { tab: I18N.ide.main.home.document, key: "doc" },
+    { tab: I18N.ide.main.explorer.debug, key: "debug" },
+    { tab: I18N.ide.main.common.codeSample, key: "sdk" },
   ];
 
   const [pageEl, resizeObserverEntry] = useResizeObserver();
@@ -142,13 +145,13 @@ export const API: React.FC<APIProps> = (props) => {
         ) : null}
         <div className="mb-4 bg-[var(--vscode-editor-background)]">
           <div className="border-t border-gray-100 px-5 py-4 text-base font-medium text-[var(--vscode-foreground)]">
-            请求参数
+            {I18N.ide.main.explorer.requestParameter}
           </div>
           <ApiParamsDoc parameters={selectedApi?.parameters} apiName={selectedApi?.name} schemas={definitions as any} />
         </div>
         <div className="mb-4 bg-[var(--vscode-editor-background)]">
           <div className="border-t border-gray-100 px-5 py-4 text-base font-medium text-[var(--vscode-foreground)]">
-            出参
+            {I18N.ide.main.explorer.response}
           </div>
           <ApiResponseDoc selectedApi={selectedApi}></ApiResponseDoc>
         </div>
@@ -172,17 +175,17 @@ export const API: React.FC<APIProps> = (props) => {
               changeMode(key);
             }}
           >
-            <Tab.Item key="debug-doc" title="API 文档">
+            <Tab.Item key="debug-doc" title={I18N.ide.main.notFound.APIDoc}>
               <div className="grid h-[calc(100vh_-_177px)] w-full bg-[var(--vscode-editor-background)]">
                 <div className="scrollbar-custom overflow-scroll">{documentComp}</div>
               </div>
             </Tab.Item>
-            <Tab.Item key="sdk" title="示例代码">
+            <Tab.Item key="sdk" title={I18N.ide.main.common.codeSample}>
               <div className="content">
                 <TrySDK isExpand={isExpand}></TrySDK>
               </div>
             </Tab.Item>
-            <Tab.Item key="debug" title="调试结果">
+            <Tab.Item key="debug" title={I18N.ide.main.common.debugResult}>
               <div className="content">
                 <TryAPI></TryAPI>
               </div>
@@ -206,13 +209,15 @@ export const API: React.FC<APIProps> = (props) => {
 
   const openNotification = () => {
     notification.open({
-      message: "体验调研",
+      message: I18N.ide.main.common.experienceResearch,
       duration: null,
       description: (
         <span>
-          您对插件的使用体验满意吗？点击
-          <a href="https://g.alicdn.com/aes/tracker-survey-preview/0.0.13/survey.html?pid=fePxMy&id=3486">体验问卷</a>
-          进行吐槽或夸赞，您的反馈对我们十分重要！
+          {I18N.ide.main.common.noSatisfiedToClick}
+          <a href="https://g.alicdn.com/aes/tracker-survey-preview/0.0.13/survey.html?pid=fePxMy&id=3486">
+            {I18N.ide.main.common.experienceQuestionnaire}
+          </a>
+          {I18N.ide.main.common.feedbackIsImportant}
         </span>
       ),
       onClose: () => {

diff --git a/media/src/components/APIPage/APIDebugger/APIDebugger.tsx b/media/src/components/APIPage/APIDebugger/APIDebugger.tsx
@@ -4,13 +4,13 @@
  */
 import { Button } from "@alicloud/console-components";
 import React from "react";
-import I18N from "../../../utils/I18N";
 import { SemixForm } from "../../SemixFormRender";
 import { APIPageContext } from "../context";
 import { APIGuide } from "./APIGuide";
 import RegionSelector from "./RegionSelector";
 import { xconsoleWidgets } from "./widgets/xconsole";
 import { debugForbiddenProducts } from "../../../utils/utils";
+import I18N from "../../../utils/I18N";
 
 export class APIDebuggerProps {}
 
@@ -52,11 +52,11 @@ export const APIDebugger: React.FC<APIDebuggerProps> = (props) => {
             schemaForm.setFormData({});
           }}
         >
-          {I18N.main.explorer.empty}
+          {I18N.ide.main.explorer.empty}
         </Button>
         {debugForbiddenProducts?.includes(`${product}__${version}`) ? (
           <a href={apiMeta?.externalDocs?.url}>
-            <Button type="primary">去门户网页版调试</Button>
+            <Button type="primary">{I18N.ide.main.common.gotoPortal}</Button>
           </a>
         ) : (
           <Button
@@ -72,7 +72,7 @@ export const APIDebugger: React.FC<APIDebuggerProps> = (props) => {
               });
             }}
           >
-            {I18N.main.explorer.debug}
+            {I18N.ide.main.explorer.debug}
           </Button>
         )}
       </div>

diff --git a/media/src/components/APIPage/APIDebugger/APIGuide.tsx b/media/src/components/APIPage/APIDebugger/APIGuide.tsx
@@ -5,6 +5,7 @@
 import { Balloon, Tag } from "@alicloud/console-components";
 import React from "react";
 import { SemixMarkdown } from "semix-schema-table";
+import I18N from "../../../utils/I18N";
 
 export class APIGuideProps {
   schema?: any;
@@ -109,40 +110,40 @@ export const APIGuide = React.memo((props: APIGuideProps) => {
                       }
                     >
                       <div className="api-debugger-param-desc !text-xs">
-                        <span className="config-title-desc text-gray-500">描述</span>
+                        <span className="config-title-desc text-gray-500">{I18N.ide.main.explorer.description}</span>
                         <div className="!text-xs">
                           <SemixMarkdown source={description}></SemixMarkdown>
                         </div>
                         {props.schema?.example ? (
                           <>
-                            <div className="config-title mt-2  text-gray-500">
-                              <span>示例值</span>
+                            <div className="config-title mt-2 text-gray-500">
+                              <span>{I18N.ide.main.explorer.sampleValue}</span>
                             </div>
 
                             <div className="config-content">{props.schema?.example}</div>
                           </>
                         ) : null}
                         {props.schema?.maximum ? (
                           <>
-                            <div className="config-title mt-2  text-gray-500">最大值</div>
+                            <div className="config-title mt-2 text-gray-500">{I18N.ide.main.common.maximum}</div>
                             <div className="config-content">{props.schema?.maximum}</div>
                           </>
                         ) : null}
                         {props.schema?.minimum ? (
                           <>
-                            <div className="config-title mt-2 text-gray-500">最小值</div>
+                            <div className="config-title mt-2 text-gray-500">{I18N.ide.main.common.minimum}</div>
                             <div className="config-content">{props.schema?.minimum}</div>
                           </>
                         ) : null}
                         {props.schema?.format ? (
                           <>
-                            <div className="config-title mt-2 text-gray-500">格式</div>
+                            <div className="config-title mt-2 text-gray-500">{I18N.ide.main.common.format}</div>
                             <div className="config-content">{props.schema?.format}</div>
                           </>
                         ) : null}
                         {props.schema?.enum?.length ? (
                           <>
-                            <div className="config-title mt-2 text-gray-500">枚举值</div>
+                            <div className="config-title mt-2 text-gray-500">{I18N.ide.main.common.enum}</div>
                             {props.schema?.enum?.map((item) => (
                               <Tag size="small" type="normal" style={{ marginRight: "4px", borderRadius: "2px" }}>
                                 {item.value || item}
@@ -152,7 +153,7 @@ export const APIGuide = React.memo((props: APIGuideProps) => {
                         ) : null}
                         {props.schema?.pattern ? (
                           <>
-                            <div className="config-title mt-2 text-gray-500">正则</div>
+                            <div className="config-title mt-2 text-gray-500">{I18N.ide.main.common.regular}</div>
                             <div className="config-content">{props.schema?.pattern}</div>
                           </>
                         ) : null}

diff --git a/media/src/components/APIPage/APIDebugger/RegionSelector.tsx b/media/src/components/APIPage/APIDebugger/RegionSelector.tsx
@@ -37,7 +37,7 @@ export const RegionSelector: React.FC<RegionSelectorProps> = (props) => {
 
   return (
     <div className="flex">
-      <div className="m-auto w-16">{I18N.main.explorer.endPoint}:</div>
+      <div className="m-auto w-16">{I18N.ide.main.explorer.endPoint}:</div>
       <Select
         style={{ width: "300px" }}
         value={props.regionId?.length ? props.regionId : "cn-hangzhou"}

diff --git a/media/src/components/APIPage/APIDebugger/widgets/xconsole/JsonEdit.tsx b/media/src/components/APIPage/APIDebugger/widgets/xconsole/JsonEdit.tsx
@@ -8,6 +8,7 @@ import { CommonWidgetProps } from "../types";
 import { Editor } from "@monaco-editor/react";
 import { APIPageContext } from "../../../context";
 import { getMonacoTheme } from "../../../../utils";
+import I18N from "../../../../../utils/I18N";
 
 export class JsonEditProps extends CommonWidgetProps {}
 
@@ -34,7 +35,7 @@ export const JsonEdit: React.FC<JsonEditProps> = (props) => {
           const val = JSON.parse(curval);
           props.onChange(val);
         } catch {
-          setErrMsg("json 格式错误");
+          setErrMsg(I18N.xconsole.JsonEdit.formatError);
         }
       }}
     >

diff --git a/media/src/components/APIPage/APIDebugger/widgets/xconsole/Struct.tsx b/media/src/components/APIPage/APIDebugger/widgets/xconsole/Struct.tsx
@@ -5,8 +5,9 @@
 // import { AmpIcon } from '@ali/amp-base';
 // import { CommonWidgetProps } from '@ali/api-component';
 // import { LinkButton } from '@alicloud/console-components-actions';
-import React from 'react';
-import { CommonWidgetProps } from '../types';
+import React from "react";
+import { CommonWidgetProps } from "../types";
+import I18N from "../../../../../utils/I18N";
 // import { addParamStruct } from './utils';
 // import { addParamStruct } from '../utils';
 
@@ -17,7 +18,7 @@ export class StructProps extends CommonWidgetProps {
 
 export const Struct: React.FC<StructProps> = (props) => {
   if (props.value) {
-    if (typeof props.value === 'string') {
+    if (typeof props.value === "string") {
       let value = props.value;
       try {
         value = JSON.parse(props.value);
@@ -27,17 +28,17 @@ export const Struct: React.FC<StructProps> = (props) => {
     // addParamStruct(props.schemaPath, props.schema);
   }
   return (
-    <div style={{ marginBottom: '16px' }}>
+    <div style={{ marginBottom: "16px" }}>
       <a
         // href="javascript:;"
-        style={{ textDecoration: 'none' }}
+        style={{ textDecoration: "none" }}
         className="op"
         onClick={() => {
           // addParamStruct(props.schemaPath, props.schema);
         }}
       >
-        <div className='codicon codicon-add' style={{ marginRight: '5px', marginTop: '1px' }}></div>
-        添加数据结构
+        <div className="codicon codicon-add" style={{ marginRight: "5px", marginTop: "1px" }}></div>
+        {I18N.xconsole.Struct.addStruct}
       </a>
     </div>
   );

diff --git a/media/src/components/APIPage/APIDebugger/widgets/xconsole/UploadFile.tsx b/media/src/components/APIPage/APIDebugger/widgets/xconsole/UploadFile.tsx
@@ -3,24 +3,21 @@
  * @description 上传文件
  */
 
-import { Button, message, Upload } from 'antd';
-import { UploadOutlined } from '@ant-design/icons';
-import * as React from 'react';
-import { CommonWidgetProps } from '../types';
-import { APIPageContext } from '../../../context';
+import * as React from "react";
+import { CommonWidgetProps } from "../types";
+import { APIPageContext } from "../../../context";
+import I18N from "../../../../../utils/I18N";
 // import { CommonWidgetProps } from '@ali/api-component';
 // import { useLocation } from 'react-router-dom';
 
 export class UploadFileProps extends CommonWidgetProps {
-    onChange: (value: any) => void;
+  onChange: (value: any) => void;
 }
 
 export const UploadFile: React.FC<UploadFileProps> = (props) => {
   const [isUpload, changeIsUpload] = React.useState(false);
   const { apiMeta } = APIPageContext.useContainer();
-//   const location = useLocation();
-//   const [product, version, apiName] = location?.pathname?.replace('/api/', '').split('/');
-  const [fileInfo, setFileInfo] = React.useState({ fileName: '', mime: '' } as FileInfo);
+  const [fileInfo, setFileInfo] = React.useState({ fileName: "", mime: "" } as FileInfo);
 
   type FileInfo = {
     fileName: string;
@@ -36,7 +33,13 @@ export const UploadFile: React.FC<UploadFileProps> = (props) => {
   };
 
   return (
-    <div>暂不支持文件传输调试，您可以到<a href={apiMeta?.externalDocs?.url} target='_blank'>开发者门户网页版</a>进行调试</div>
+    <div>
+      {I18N.xconsole.UploadFile.notSupportDebug}
+      <a href={apiMeta?.externalDocs?.url} target="_blank">
+        {I18N.xconsole.UploadFile.explorerWebsite}
+      </a>
+      {I18N.xconsole.UploadFile.processDebug}
+    </div>
     // <Upload
     //   className="jsonschema-form-widget"
     //   action={getUploadPath(product, version, apiName, fileInfo)}