chore: replace all cn comments of fe to en version by volc api (#320)

frontend/packages/components/json-viewer/src/components/json-field/index.tsx

@@ -29,7 +29,7 @@ import { LogObjSpecialKey, LogValueStyleType } from '../../constants';
 
 import styles from './json-field.module.less';
 
-/* JSON 类型数据渲染 */
+/* JSON type data rendering */
 const FieldValue: React.FC<{
   value: Field['value'];
 }> = ({ value }) => {

frontend/packages/components/json-viewer/src/constants.ts

@@ -14,13 +14,13 @@
  * limitations under the License.
  */
  
-/** 预置的特殊的 key */
+/** Preset special key */
 export enum LogObjSpecialKey {
   Error = '$error',
   Warning = '$warning',
 }
 
-/** log 中 value 的显示样式类型 */
+/** Display style type of value in log */
 export enum LogValueStyleType {
   Default,
   Number,

frontend/packages/components/json-viewer/src/context.tsx

@@ -36,7 +36,7 @@ interface JsonViewerProviderProps {
 }
 
 /**
- * 根只有一项且其可以下钻时，默认展开它
+ * When the root has only one item and it can be drilled down, it is expanded by default
  */
 const generateInitialExpandValue = (fields: Field[], expandAll?: boolean) => {
   if (expandAll) {
@@ -68,7 +68,7 @@ export const JsonViewerContext = createContext<JsonViewerContextType>({
 export const JsonViewerProvider: React.FC<
   PropsWithChildren<JsonViewerProviderProps>
 > = ({ fields, children, defaultExpandAllFields }) => {
-  /** 因为存在不属于单项的逻辑，所以集中管理展开折叠的状态 */
+  /** Because there is logic that does not belong to a single item, the state of unfolding and folding is managed centrally */
   const [expand, setExpand] = useState<JsonViewerContextType['expand'] | null>(
     null,
   );
@@ -78,8 +78,8 @@ export const JsonViewerProvider: React.FC<
   );
 
   /**
-   * fields 是动态更新的，这里要注意固化 expand 数据，因为 fields 总是由少增多
-   * 由于存在自动展开逻辑，所以从 0 => 1 变化时需要赋值
+   * Fields are dynamically updated, pay attention to solidifying expand data here, because fields are always increased by less
+   * Due to the existence of automatic expansion logic, assignment is required when changing from 0 = > 1
    */
   useEffect(() => {
     if (!expand) {

frontend/packages/components/json-viewer/src/hooks/use-value.tsx

@@ -32,7 +32,7 @@ export const useValue = (value: Field['value']) => {
         type: LogValueStyleType.Default,
       };
     } else if (isObject(value)) {
-      // 大数字返回数字类型，值用字符串
+      // Large number Returns the numeric type, and the value is a string.
       if (isBigNumber(value)) {
         return {
           value: bigNumbertoString(value),
@@ -64,7 +64,7 @@ export const useValue = (value: Field['value']) => {
       }
       return {
         value: generateStrAvoidEscape(value),
-        // value: generateStr2Link(value, avoidEscape), 先取消做 link 解析
+        // Value: generateStr2Link (value, avoidEscape), cancel the link parsing first
         type: LogValueStyleType.Default,
       };
     } else if (isNumber(value)) {

frontend/packages/components/json-viewer/src/index.module.less

@@ -6,7 +6,7 @@
   width: 100%;
   min-height: 32px;
 
-  /** 高度限制 */
+  /** height limit */
   max-height: 272px;
   padding: 6px 12px;
 

frontend/packages/components/json-viewer/src/index.tsx

@@ -30,10 +30,10 @@ import styles from './index.module.less';
 export type { JsonValueType };
 
 export interface JsonViewerProps {
-  /** 支持对象或者纯文本渲染 */
+  /** Supports object or plain text rendering */
   data: JsonValueType;
   className?: React.HTMLAttributes<HTMLDivElement>['className'];
-  /** 默认展开所有字段 */
+  /** Expand all fields by default */
   defaultExpandAllFields?: boolean;
 }
 
@@ -43,7 +43,7 @@ export const JsonViewer: React.FC<JsonViewerProps> = ({
   defaultExpandAllFields,
 }) => {
   const render = () => {
-    // 兜底展示 null
+    // Bottom display null
     if (isNil(data)) {
       return (
         <JsonField
@@ -59,13 +59,13 @@ export const JsonViewer: React.FC<JsonViewerProps> = ({
       );
     }
 
-    // 文本类结果展示
+    // Text class result display
     const isStr = isString(data);
     if (isStr) {
       return <TextField text={data} />;
     }
 
-    // 其他json类型数据展示
+    // Other JSON data display
     const fields = generateFields(data);
     return (
       <JsonViewerProvider

frontend/packages/components/json-viewer/src/types.ts

@@ -15,21 +15,21 @@
  */
  
 /*******************************************************************************
- * log 相关的类型
+ * Log related types
  */
-/** 线可能存在的几种状态 */
+/** The possible states of a line */
 export enum LineStatus {
-  /** 完全隐藏，最后一个父属性嵌套的子属性同列将不会有线 */
+  /** Completely hidden, the last parent attribute nested child attribute will not be wired in the same column */
   Hidden,
-  /** 完全显示，仅出现在属性相邻的线 */
+  /** Full display, appearing only on adjacent lines of properties */
   Visible,
-  /** 半显示，非相邻的线 */
+  /** Semi-display, non-adjacent lines */
   Half,
-  /** 最后属性的相邻线 */
+  /** Adjacent line of last property */
   Last,
 }
 
-/** JsonViewer 中的 value 可能值 */
+/** Possible values in JsonViewer */
 export type JsonValueType =
   | string
   | null
@@ -39,12 +39,12 @@ export type JsonValueType =
   | undefined;
 
 export interface Field {
-  /** 使用数组而不是 'a.b.c' 是因为可能存在 key='a.b' 会产生错误嵌套 */
+  /** The use of arrays instead of'a.b.c 'is due to the possibility that key =' a.b 'will generate false nesting */
   path: string[];
   lines: LineStatus[];
-  /** 这里 value 可能是任意值，这里是不完全枚举 */
+  /** Here value can be any value, here is an incomplete enumeration */
   value: JsonValueType;
   children: Field[];
-  /** 是否是可下钻的对象（包含数组） */
+  /** Whether it is a drillable object (containing an array) */
   isObj: boolean;
 }

frontend/packages/components/json-viewer/src/utils/big-number.ts

@@ -17,7 +17,7 @@
 import BigNumber from 'bignumber.js';
 
 /**
- * 是不是大数字
+ * Is it a big number?
  * @param value
  * @returns
  */
@@ -26,7 +26,7 @@ export function isBigNumber(value: unknown): value is BigNumber {
 }
 
 /**
- * 大数字转字符串
+ * Large number to string
  * @param value
  * @returns
  */

frontend/packages/components/json-viewer/src/utils/generate-field.ts

@@ -20,29 +20,29 @@ import { LineStatus, type JsonValueType, type Field } from '../types';
 import { isBigNumber } from './big-number';
 
 /**
- * 通过父元素的线条状态推到子元素的线条状态
+ * Push through the line state of the parent element to the line state of the child element
  */
 const getLineByParent2Child = (pLine: LineStatus): LineStatus => {
   switch (pLine) {
-    /** 表示父节点也是从父父节点下钻而来，此处的子节点只需要把线延续下去即可 */
+    /** It means that the parent node is also drilled from the parent node, and the sub-node here only needs to continue the line. */
     case LineStatus.Visible:
       return LineStatus.Half;
-    /** 表示父节点是父父节点的最后一个节点，子节点无需再延续，渲染空白即可 */
+    /** Indicates that the parent node is the last node of the parent node, and the sub-node does not need to continue, just render blank. */
     case LineStatus.Last:
       return LineStatus.Hidden;
-    /** 其他的情况完全继承父节点的线 */
+    /** Other cases fully inherit the line of the parent node */
     default:
       return pLine;
   }
 };
 
 /**
- * 将 object 解析成可以循环渲染的 fields
- * 1. 若 object 非复杂类型，则返回长度为 1 的 fields 只渲染一项
- * 2. 若 object = {}，则返回长度为 0 的 fields，渲染层需要做好兜底
+ * Parse objects into fields that can be cycled
+ * 1. If object is not a complex type, fields of length 1 are returned to render only one item
+ * 2. If object = {}, fields of length 0 are returned, and the rendering layer needs to be well covered
  */
 const generateFields = (object: JsonValueType): Field[] => {
-  /** 若 object 非复杂类型 */
+  /** If the object is not a complex type */
   if (!isObject(object) || isBigNumber(object)) {
     return [
       {
@@ -55,17 +55,17 @@ const generateFields = (object: JsonValueType): Field[] => {
     ];
   }
 
-  /** 递归计算时缓存一下计算好的线，没别的意义，降低一些时间复杂度 */
+  /** Cache the calculated line during recursive calculation, which is meaningless and reduces some time complexity */
   const lineMap = new Map<string[], LineStatus[]>();
 
-  /** 递归解析 object 为 fields */
+  /** Recursive parsing of object as fields */
   const dfs = ($object: object, $parentPath: string[] = []): Field[] => {
-    // 如果不是对象，直接返回空数组，兜底异常情况
+    // If it is not an object, return an empty array directly to cover the exception
     if (!isObject($object)) {
       return [];
     }
 
-    // 如果是大数字，直接返回空数组
+    // If it is a large number, return an empty array directly
     if (isBigNumber($object)) {
       return [];
     }
@@ -79,12 +79,12 @@ const generateFields = (object: JsonValueType): Field[] => {
       const path = $parentPath.concat(key);
       const last = idx === keys.length - 1;
       /**
-       * 根据父节点的线推导子节点的线
+       * Derive the sub-node's line from the parent's line
        */
       const lines = parentLines
         .map<LineStatus>(getLineByParent2Child)
         /**
-         * 最后拼接上子节点自己的线，最后一个节点和普通的节点有样式区分
+         * Finally, splice the sub-node's own line, and the last node is distinguished from the ordinary node by style.
          */
         .concat(last ? LineStatus.Last : LineStatus.Visible);
       lineMap.set(path, lines);

frontend/packages/components/json-viewer/src/utils/generate-str-avoid-escape.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
  
-// 对象中的文本，避免字符被转译
+// Text in the object to avoid characters being translated
 export const generateStrAvoidEscape = (str: string) => {
   const characters = {
     '\\': '\\\\',

frontend/packages/components/json-viewer/src/utils/generate-str-to-link.tsx

@@ -33,11 +33,11 @@ export const generateStr2Link = (str: string, avoidEscape?: boolean) => {
   }
 
   /**
-   * 更严格的 url 匹配规则，防止过度匹配
-   * 协议：http、https
-   * 域名：允许使用 -、a-z、A-Z、0-9，其中 - 不能开头，每一级域名长度不会超过 63
-   * 端口：支持带端口 0 - 65535
-   * URL：严格型不匹配中文等转译前的文字，否则一旦命中将会识别整段字符串
+   * Stricter URL matching rules to prevent over-matching
+   * Protocol: http, https
+   * Domain names: -, a-z, A-Z, 0-9 are allowed, where - cannot start, and the length of each level of domain name will not exceed 63.
+   * Port: Support with port 0 - 65535
+   * URL: Strict does not match the text before translation such as Chinese, otherwise the entire string will be recognized once hit
    */
   const urlReg = new RegExp(
     'http(s)?://' +
@@ -48,12 +48,12 @@ export const generateStr2Link = (str: string, avoidEscape?: boolean) => {
   );
   const matches = [...str.matchAll(urlReg)];
   /**
-   * 切割字符串，url 嵌套为 link 的样式，切割步骤：
-   * 1. 匹配字符串中所有的 url
-   * 2. 倒序 matches，从末尾开始切，原因是 match.index 是从头开始计数，从头切增加计算量
-   * 3. 每一个 match 切两刀成三段，头尾是普通字符串，中间为 url
-   * 4. 按照 end、url、start 的顺序 push 到栈中，下次 match 会直接取 start 继续切
-   * 5. 切割完成后做一次倒序
+   * Cut string, url nested as link style, cutting steps:
+   * 1. Match all URLs in the string
+   * 2. Reverse matches, cut from the end, the reason is that match.index counts from scratch, and cut from scratch increases the amount of calculation
+   * 3. Each match is cut into three sections, the head and tail are ordinary strings, and the middle is url.
+   * 4. Push to the stack in the order of end, url, and start, and the next match will directly take start and continue to cut
+   * 5. Do a reverse sequence after the cutting is completed
    */
   return matches
     .reverse()