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

frontend/packages/project-ide/framework/src/components/ide-client.tsx

@@ -59,8 +59,8 @@ export const ProjectIDEClient: React.FC<
   return (
     <IDEClient
       options={options}
-      // 兼容 mnt e2e 环境，在 e2e 环境下，高度会被坍缩成 0
-      // 因此需要额外的样式兼容
+      // Compatible with mnt e2e environment, in e2e environment, the height will collapse to 0
+      // Therefore, additional style compatibility is required
       // className={(window as any)._mnt_e2e_testing_ ? 'e2e-flow-container' : ''}
       className="e2e-flow-container"
     >

frontend/packages/project-ide/framework/src/components/resource-folder/constant.ts

@@ -38,7 +38,7 @@ const MAX_DEEP = 5;
 const RESOURCE_FOLDER_CONTEXT_KEY = 'resourceFolderContextKey';
 
 /**
- * 乐观 ui 创建文件的 ID 默认前缀
+ * Optimistic UI creates the default prefix for the ID of the file
  */
 const OPTIMISM_ID_PREFIX = 'resource-folder-optimism-id-';
 
@@ -48,7 +48,7 @@ const MORE_TOOLS_CLASS_NAME = 'more-tools-class-name';
 
 enum ItemStatus {
   Normal = 'normal',
-  Disabled = 'disabled', // 禁止操作
+  Disabled = 'disabled', // Prohibited operation
 }
 
 const COLOR_CONFIG = {

frontend/packages/project-ide/framework/src/components/resource-folder/hooks/use-create-edit-resource/index.tsx

@@ -103,9 +103,9 @@ const useCreateEditResource = ({
 
   const [createResourceInfo, setCreateResourceInfo] = useState<{
     /**
-     * 用于定位渲染位置的 index
-     * 资源在文件夹后面，所有资源前面
-     * 文件夹在当前文件夹下最前面
+     * The index used to locate the render position
+     * Resources are behind folders and in front of all resources
+     * The folder is at the front of the current folder
      */
     index: number;
     parentId: IdType;
@@ -196,7 +196,7 @@ const useCreateEditResource = ({
     }
 
     /**
-     * 同名检测
+     * same name test
      */
     // if (editResourceRef.current) {
     //   const parentFolder = createResourceInfoRef.current
@@ -237,7 +237,7 @@ const useCreateEditResource = ({
 
     if (createResourceInfoRef?.current) {
       /**
-       * 新建资源
+       * new resource
        */
       const parentPath =
         resourceMap.current[createResourceInfoRef?.current?.parentId]?.path;
@@ -251,7 +251,7 @@ const useCreateEditResource = ({
       });
     } else if (editResourceRef?.current) {
       /**
-       * 编辑资源
+       * editing resources
        */
       const path = editResourceRef?.current?.path || [];
       const parentPath = path.slice(0, path?.length - 1);
@@ -287,7 +287,7 @@ const useCreateEditResource = ({
     }
 
     if (selectResource.type !== 'folder' && selectResource?.path) {
-      // 如果不是 folder 则选中父亲 folder
+      // If it is not a folder, select the parent folder.
       selectResource =
         resourceMap.current[
           selectResource.path[selectResource.path.length - 2]

frontend/packages/project-ide/framework/src/components/resource-folder/hooks/use-focus-resource/index.ts

@@ -57,7 +57,7 @@ const useFocusResource = ({
       itemHeight: config?.itemHeight || ITEM_HEIGHT,
     });
 
-    // 如果在视图内， 则不滚
+    // If in view, do not roll
     if (
       scrollTop > scrollWrapper.current.scrollTop &&
       scrollTop <

frontend/packages/project-ide/framework/src/components/resource-folder/hooks/use-mouse-event/index.tsx

@@ -70,7 +70,7 @@ const useMouseEvent = ({
   iconRender,
   config,
 }: {
-  draggable: boolean; // 是否可以拖拽
+  draggable: boolean; // Can you drag and drop?
   uniqId: string;
   updateId: () => void;
   resourceTreeWrapperRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -100,7 +100,7 @@ const useMouseEvent = ({
   const isFocusRef = useRef(false);
   const dragService = useIDEService<DragService>(DragService);
   /**
-   * 存储拖拽过程中是否合法的字段
+   * Store legal fields during drag and drop
    */
   const [draggingError, setDraggingError] = useState<string>('');
 
@@ -114,7 +114,7 @@ const useMouseEvent = ({
   });
 
   /**
-   * 用于开启拖拽到 mainPanel 下打开资源的方法
+   * The method used to open resources by dragging and dropping to mainPanel
    */
   const dragAndOpenResource = e => {
     if (!config?.resourceUriHandler) {
@@ -140,7 +140,7 @@ const useMouseEvent = ({
       },
       backdropTransform: {
         /**
-         * 通过边缘检测的方式，阻止  lm-cursor-backdrop  元素进入树组件内
+         * Prevent lm-cursor-backdrop elements from entering the tree component through edge detection
          */
         clientX: (eventX: number) =>
           Math.max(
@@ -180,11 +180,11 @@ const useMouseEvent = ({
   );
 
   /**
-   * 用于记录拖拽过程中，当前 hover 元素的 父元素 id。
+   * Used to record the parent ID of the current hover element during drag and drop.
    */
   const hoverItemParentId = useRef<string | null>(null);
   /**
-   * 用于记录拖拽过程中，当前 hover 元素的 父元素及其下钻所有节点的id表
+   * The ID table used to record the parent element of the current hover element and all nodes drilled down during the drag and drop process
    */
   const [highlightItemMap, setHighlightItemMap] = useState<ResourceMapType>({});
 
@@ -238,7 +238,7 @@ const useMouseEvent = ({
     );
 
     /**
-     * 将文件夹下的文件给过滤掉，防止拖拽之后失去层级结构
+     * Filter out the files in the folder to prevent the hierarchy from being lost after dragging
      */
     resourceList = resourceList.filter(resource => {
       const { type, path } = resourceMap.current[resource.id];
@@ -273,7 +273,7 @@ const useMouseEvent = ({
       };
     }
 
-    // 这里要选中一次是保证拖动前选中正确的 item
+    // This should be selected once to ensure that the correct item is selected before dragging.
     if (typeof target === 'object' && !e.shiftKey && !e.metaKey) {
       let currentSelected: ResourceType | null = null;
 
@@ -306,7 +306,7 @@ const useMouseEvent = ({
       return;
     }
 
-    // 点到右键的 panel 中 啥也别操作
+    // Click on the right-click panel and don't operate anything.
     if (target === CLICK_CONTEXT_MENU) {
       return;
     }
@@ -329,7 +329,7 @@ const useMouseEvent = ({
       }
 
       /**
-       * 如果点击了 more tools 三颗点，那需要先将临时选中表重置为只选中该 item。 用于右键菜单的消费。
+       * If you click the more tools three dots, you need to reset the temporary selection table to select only this item first. For right-click menu consumption.
        */
       if (target.customTag === MORE_TOOLS_CLASS_NAME) {
         const nextSelected = { [currentSelected.id]: currentSelected };
@@ -337,7 +337,7 @@ const useMouseEvent = ({
         return;
       }
 
-      // 如果右键， 并且点击在已经被选中的资源上，则不再做操作，因为要弹操作栏
+      // If you right-click and click on a resource that has already been selected, you will no longer do the operation because the action bar will pop up.
       if (
         e.ctrlKey ||
         (e.button === 2 &&
@@ -358,7 +358,7 @@ const useMouseEvent = ({
           return;
         }
 
-        // 批量一下子多选
+        // multiple selection in batches
         let nextSelected: any = getResourceListFromIdToId({
           resourceTree: resourceTreeRef.current,
           from: firstSelectedId,
@@ -379,7 +379,7 @@ const useMouseEvent = ({
         }
         changeTempSelectedMap(nextSelected);
       } else if (e.metaKey) {
-        // 挑着多选
+        // Choose more
         let nextSelected = { ...tempSelectedMapRef.current };
         if (currentSelected?.id) {
           if (nextSelected[currentSelected.id]) {
@@ -452,7 +452,7 @@ const useMouseEvent = ({
     }
 
     /**
-     * 开始拖拽
+     * Start dragging
      */
     if (!isDraggingRef.current) {
       startDrag(e);
@@ -469,7 +469,7 @@ const useMouseEvent = ({
       uniqId,
     });
 
-    // 点到右键的 panel 中 啥也别操作
+    // Click on the right-click panel and don't operate anything.
     if (target === CLICK_CONTEXT_MENU) {
       return;
     }
@@ -516,7 +516,7 @@ const useMouseEvent = ({
         uniqId,
       });
 
-      // 点到右键的 panel 中 啥也别操作
+      // Click on the right-click panel and don't operate anything.
       if (target === CLICK_CONTEXT_MENU || !target) {
         return;
       }

frontend/packages/project-ide/framework/src/components/resource-folder/hooks/use-mouse-event/utils.ts

@@ -47,10 +47,10 @@ const isPointInRect = (
   point.y > rect.y &&
   point.y < rect.y + rect.height;
 
-const BORDER_GAP = 8; // 默认边缘阈值
+const BORDER_GAP = 8; // Default edge threshold
 /**
- * 相对于 findTargetElement ，增加了边缘检测功能。
- * 当鼠标在 资源目录边缘， 会算作聚焦在 root 节点
+ * Compared with findTargetElement, the edge detection function is added.
+ * When the mouse is on the edge of the resource directory, it will be regarded as focusing on the root node
  */
 const getElementByXY = ({
   e,
@@ -96,7 +96,7 @@ const findTargetElement = (
   elm: HTMLElement | null,
   uniqueId: string,
   /**
-   * 遇到该 className 会进行记录，并且返回 id 的时候会带上该 className
+   * The className will be recorded when encountered, and the className will be included when the id is returned.
    */
   customClassName?: string,
 ): TargetType | string => {
@@ -176,7 +176,7 @@ const validateDrag = (
   const { name, path, id } = target;
 
   /**
-   * 只要有一个文件是自己层级挪动到自己层级的则 return
+   * As long as there is a file that is moved to its own level, it will be returned.
    */
   const selfList = resourceList.filter(resource => {
     const resourcePath = resource.path || [];
@@ -189,7 +189,7 @@ const validateDrag = (
       .join(', ')} into ${name}`;
   }
 
-  // 校验是不是爹移到儿子
+  // Check if the father moved to the son.
   const notAllowedList = resourceList.filter(resource =>
     (path || []).includes(String(resource.id)),
   );
@@ -200,7 +200,7 @@ const validateDrag = (
       .join(', ')} into ${name}`;
   }
 
-  // 校验移动之后层级是不是过深
+  // Check if the level is too deep after the move
   const maxDeep = resourceList.reduce(
     (max, resource) => Math.max(max, (resource?.maxDeep || 0) + 1),
     0,

frontend/packages/project-ide/framework/src/components/resource-folder/hooks/use-register-command/index.ts

@@ -77,7 +77,7 @@ const useRegisterCommand = ({
           });
         }
       } else if (command.execute) {
-        // 如果有自定义的 execute 函数才会需要重新注册
+        // If there is a custom execute function, it will only need to be re-registered.
         if (commandRegistry.getCommand(command.id)) {
           commandRegistry.unregisterCommand(command.id);
         }

frontend/packages/project-ide/framework/src/components/resource-folder/hooks/use-right-click-panel/util.ts

@@ -18,8 +18,8 @@ import { type RightPanelConfigType } from '../../type';
 import { ContextMenuConfigMap } from './constant';
 
 /**
- * 主要替换资源树默认支持的 右键菜单配置，
- * 并且对三方注入的右键菜单的 id 进行包装
+ * The main replacement resource tree is supported by default, right-click menu configuration,
+ * And wraps the id of the right-click menu injected by the three parties.
  */
 export const handleConfig = (
   baseConfig: RightPanelConfigType[],

frontend/packages/project-ide/framework/src/components/resource-folder/hooks/use-selected-change.ts

@@ -37,7 +37,7 @@ const useSelectedChange = ({
 
     updateContext({ currentSelectedId: selected });
 
-    // 将聚焦的 path 上的文件夹都展开
+    // Expand folders on the focused path
     const path = resourceMap.current[selected]?.path || [];
     path.forEach(pathKey => {
       delete collapsedMapRef.current[pathKey];

frontend/packages/project-ide/framework/src/components/resource-folder/index.tsx

@@ -69,35 +69,35 @@ import s from './index.module.less';
 
 interface RefType {
   /**
-   * 创建文件夹
+   * Create Folder
    */
   createFolder: () => void;
   /**
-   * 创建资源
+   * Create a resource
    */
   createResource: (type: string) => void;
   /**
-   * 重命名资源
+   * rename resource
    */
   renameResource: (id: IdType) => void;
   /**
-   * 手动关闭右键菜单
+   * Close the right-click menu manually
    */
   closeContextMenu: () => void;
   /**
-   * 收起所有文件夹
+   * Close all folders
    */
   collapseAll: () => void;
   /**
-   * 展开所有文件夹
+   * Expand all folders
    */
   expandAll: () => void;
   /**
-   * 手动聚焦
+   * manual focus
    */
   focus: () => void;
   /**
-   * 手动失焦
+   * Manual out of focus
    */
   blur: () => void;
 }
@@ -110,16 +110,16 @@ interface Props {
   disabled?: boolean;
 
   /**
-   * 主要的资源类型，非必填。
-   * 主要用于快捷键创建资源的默认类型。
+   * Main resource type, optional.
+   * Mainly used to shortcut the default type for creating resources.
    */
   defaultResourceType?: string;
   /**
-   * 是否使用乐观 ui;
-   * false 时，onChange 失效;
+   * Whether to use optimistic UI;
+   * When false, onChange is invalid;
    * default = true
    *
-   * 传入 loadingRender 时，会对乐观保存的 item 尾部增加一个渲染块，由外部控制渲染
+   * When passing in loadingRender, a render block will be added to the tail of the optimistically saved item, which will be rendered by external control
    */
   useOptimismUI?:
     | boolean
@@ -128,22 +128,22 @@ interface Props {
       };
 
   /**
-   * 当前选中的资源 id， 受控的
+   * The currently selected resource id, controlled
    */
   selected?: string;
 
   /**
-   * 是否渲染每个 item 末尾的 more 按钮，hover 等同于 右键
+   * Whether to render the more button at the end of each item, hover is equivalent to right click
    */
   renderMoreSuffix?: RenderMoreSuffixType;
 
   /**
-   * 用于 name 校验的配置
+   * Configuration for name validation
    */
   validateConfig?: ValidatorConfigType;
 
   /**
-   * 支持搜索, 高亮展示
+   * Support search, highlight
    */
   searchConfig?: {
     searchKey?: string;
@@ -151,84 +151,84 @@ interface Props {
   };
 
   /**
-   * 可选。
-   * 传入则是受控的收起展开树。
-   * 不传则内部自己维护树
+   * Optional.
+   * The incoming is a controlled retract expansion tree.
+   * If you don't pass it on, you will maintain the tree internally.
    */
   collapsedMap?: Record<string, boolean>;
   setCollapsedMap?: (v: Record<string, boolean>) => void;
 
   /**
-   * 树变更的回调函数，依赖 useOptimismUI 为 true。
+   * Callback function for tree changes, depending on useOptimismUI to be true.
    */
   onChange?: (resource: ResourceType[]) => void;
 
   /**
-   * 单击选中资源的回调，仅支持非 folder 类型资源
+   * Click the callback for the selected resource, only non-folder type resources are supported
    */
   onSelected?: (id: string | number, resource: ResourceType) => void;
   /**
-   * 拖拽完成之后的回调
+   * Callback after dragging is complete
    */
   onDrag?: (v: DragPropType) => void;
   /**
-   * 修改 name 之后的回调
+   * Callback after modifying name
    */
   onChangeName?: (v: ChangeNameType) => void;
   /**
-   * 创建资源的回调
+   * Create a callback for a resource
    */
   onCreate?: (v: CreateResourcePropType) => void;
   /**
-   * 删除的回调。该方法不会被乐观 ui 逻辑改写，最好业务层加一个二次确认逻辑，删除之后走数据更新的方式来更新树组件
+   * Deleted callback. This method will not be overwritten by optimistic ui logic. It is best to add a secondary confirmation logic to the business layer. After deletion, take the data update method to update the tree component.
    */
   onDelete?: (ids: ResourceType[]) => void;
 
   /**
-   * 用于自定义配置渲染资源的 icon
-   * @returns react 节点
+   * Icons for customizing configuration rendering resources
+   * @returns react node
    */
   iconRender?: (v: CommonRenderProps) => React.ReactElement | undefined;
 
   /**
-   * 用于自定义配置每一项末尾的元素
+   * Use to customize the elements at the end of each item
    */
   suffixRender?: {
-    width: number; // 用于文本超长的 tooltip 偏移量计算的，是一个必填字段
+    width: number; // Used for the calculation of the tooltip offset for very long text, is a required field
     render: (v: CommonRenderProps) => React.ReactElement | undefined;
   };
 
   /**
-   * 用于自定义配置每一个资源的文本渲染器。
-   * 如果采用自定义渲染，则需要自己实现搜索高亮能力
-   * @returns react 节点
+   * Text renderer for custom configuration of each resource.
+   * If you use custom rendering, you need to implement the search highlighting capability yourself
+   * @returns react node
    */
   textRender?: (v: CommonRenderProps) => React.ReactElement | undefined;
 
   /**
-   * 右键菜单配置
-   * @param v 当前临时选中的资源列表。 可以通过 id 判断是否是根文件。（ROOT_KEY: 根文件 id）
-   * @returns 组件内置注册好的命令和菜单，详见 BaseResourceContextMenuBtnType 枚举
+   * right-click menu configuration
+   * @Param v List of currently temporarily selected resources. You can determine whether it is a root file by id. (ROOT_KEY: root file id)
+   * @Returns component built-in registered commands and menus, see BaseResourceContextMenuBtnType enumeration
    */
   contextMenuHandler?: (v: ResourceType[]) => RightPanelConfigType[];
 
   /**
-   * 右键菜单弹窗展示和隐藏的回调。
+   * Right-click menu pop-ups to show and hide callbacks.
    */
   onContextMenuVisibleChange?: (v: boolean) => void;
 
   /**
-   * 禁用右键菜单，主要是兼容在 popover 的场景内
+   * Disable the right-click menu, mainly compatible in the popover scene
    */
   contextMenuDisabled?: boolean;
 
   /**
-   * 一些用于杂七杂八的配置项
+   * Some configuration items for miscellaneous purposes
    */
   config?: ConfigType;
 
   /**
-   * 能力黑名单
+   * ability blacklist
    */
   powerBlackMap?: {
     dragAndDrop?: boolean;
@@ -236,7 +236,7 @@ interface Props {
   };
 
   /**
-   * 列表为空的渲染组件
+   * Rendering component with empty list
    */
   empty?: React.ReactElement;
 }
@@ -288,7 +288,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
     const renderMoreSuffix = contextMenuDisabled ? false : _renderMoreSuffix;
 
     /**
-     * 临时选中的表
+     * Temporarily selected table
      */
     const [tempSelectedMapRef, setTempSelectedMap] = useStateRef<
       Record<string, ResourceType>
@@ -297,12 +297,12 @@ const ResourceFolder = forwardRef<RefType, Props>(
     });
 
     /**
-     * 打平的树
+     * Flattened Tree
      */
     const resourceMap = useRef<ResourceMapType>(_resourceMap || {});
     const changeResourceMap = nextMap => {
       resourceMap.current = nextMap;
-      // 变更之后维护临时选中表
+      // Maintain the temporary selection table after the change
       tempSelectedMapRef.current = Object.keys(
         tempSelectedMapRef.current,
       ).reduce((pre, cur) => {
@@ -321,7 +321,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
     }, [_resourceMap]);
 
     /**
-     * 处理一系列收起展开的 hook
+     * Handle a series of retracted and unfolded hooks
      */
     const { collapsedMapRef, handleCollapse, setCollapsed, collapsedState } =
       useCollapsedMap({
@@ -331,7 +331,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
       });
 
     /**
-     * 用于渲染的树
+     * Tree for rendering
      */
     const [resourceTreeRef, setResourceTree] = useStateRef<ResourceType>(
       {
@@ -376,7 +376,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
     }, [disabled]);
 
     /**
-     * 用于收敛树组件的滚动，聚焦逻辑的 hook
+     * Hooks for scrolling, focusing logic of convergent tree components
      */
     const { scrollInView, scrollWrapper, tempDisableScroll } = useFocusResource(
       {
@@ -418,7 +418,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
     }, [_resourceTree]);
 
     /**
-     * 处理选中的资源变更之后的副作用
+     * Handling side effects after changes to selected resources
      */
     const selectedIdRef = useSelectedChange({
       selected,
@@ -606,7 +606,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
       const list = renderResourceList || [];
 
       /**
-       * 为空数组，或者数组中只有一个 root 节点
+       * Is an empty array, or there is only one root node in the array
        */
       if (
         (list.length === 0 ||
@@ -672,7 +672,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
 
               const isExpand = !collapsedMapRef.current[resource.id];
               const highlightItem =
-                !powerBlackMap?.folder && // 不支持文件夹则不需支持拖拽时候的高亮
+                !powerBlackMap?.folder && // If folders are not supported, there is no need to support highlighting when dragging.
                 !!dragAndDropContext.highlightItemMap[resource.id];
               const preHighlightItem =
                 resourceList.current[i - 1]?.id !== ROOT_KEY &&
@@ -686,7 +686,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
 
               const extraClassName = [
                 /**
-                 * 拖拽过程中的样式
+                 * Styles during drag and drop
                  */
                 ...(highlightItem
                   ? [
@@ -700,7 +700,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
                   : []),
                 isSelected ? 'item-is-selected' : '',
                 /**
-                 * 拖拽过程中的 hover 态优先级 大于 临时选中态的优先级
+                 * The priority of the hover state during the dragging process is greater than the priority of the temporarily selected state
                  */
                 ...(isTempSelected && !highlightItem
                   ? [
@@ -740,7 +740,7 @@ const ResourceFolder = forwardRef<RefType, Props>(
               );
             })}
             {emptyRender()}
-            {/* 添加 24px 底部间距，标识加载完全 */}
+            {/* Add 24px bottom spacing to identify fully loaded */}
             <div style={{ padding: 12 }}></div>
           </div>
         </div>

frontend/packages/project-ide/framework/src/components/resource-folder/render-components/components/more-tools.tsx

@@ -35,7 +35,7 @@ const MoreTools = ({
 }) => {
   const handleClick = e => {
     /**
-     * 这里将 event 的 currentTarget 设置成树组件的 wrapper 元素，保证 contextMenu 的 matchItems 方法可以正常遍历。
+     * Here, the currentTarget of the event is set to the wrapper element of the tree component to ensure that the matchItems method of the contextMenu can be traversed normally.
      */
     e.currentTarget = resourceTreeWrapperRef.current;
     contextMenuCallback(e, [resource]);

frontend/packages/project-ide/framework/src/components/resource-folder/type.ts

@@ -37,9 +37,9 @@ export enum ResourceTypeEnum {
 export type ItemType = ResourceTypeEnum | string;
 
 export interface ResourceStatusType {
-  // 是否是草稿态
+  // Is it a draft?
   draft?: boolean;
-  // 错误内容 & 个数
+  // Error content & number
   problem?: {
     status?: 'normal' | 'error' | 'warning';
     number?: number;
@@ -110,7 +110,7 @@ export interface CommonComponentProps {
   isDragging: boolean;
   isExpand?: boolean;
   /**
-   * 是否处于乐观 ui 的保存阶段
+   * Is it in the preservation stage of optimistic UI?
    */
   isOptimismSaving?: boolean;
   useOptimismUI?:
@@ -172,7 +172,7 @@ export interface CommonRenderProps {
   resource: ResourceType;
   isSelected?: boolean;
   isTempSelected?: boolean;
-  isExpand?: boolean /** 只有 resource.type === folder 的时候才会有该字段 */;
+  isExpand?: boolean /** This field is only available when resource.type === folder */;
 }
 
 export interface ContextType {
@@ -222,9 +222,9 @@ export interface CustomValidatorPropsType {
 
 export interface ValidatorConfigType {
   /**
-   * @param label 当前输入框的文本
-   * @param parentPath 从 root 开始到 父级的路径
-   * @param resourceTree 当前的资源树
+   * @param label the text of the current text box
+   * @Param parentPath, path from root to parent
+   * @Param resourceTree The current resource tree
    * @returns Promise<string>
    */
   /** */
@@ -233,8 +233,8 @@ export interface ValidatorConfigType {
   ) => string | Promise<string>;
 
   /**
-   * 默认: absolute;
-   * absolute: 不占用树的文档流，错误文案覆盖上去;
+   * Default: absolute;
+   * Absolute: document flow that does not occupy the tree, and error copy is overwritten;
    */
   errorMsgPosition?: 'absolute';
   errorMsgStyle?: React.CSSProperties;
@@ -268,12 +268,12 @@ export interface CommandOption {
   onClick?: () => void;
 }
 
-/** 内置的顶部工具栏的按钮组 */
+/** Built-in button group for top toolbar */
 export enum BuildInToolOperations {
-  /** 搜索过滤按钮 */
+  /** Search filter button */
   CreateFile = 'CreateFile',
   CreateFolder = 'CreateFolder',
-  /** 展开收起文件夹 */
+  /** Expand Collapse Folder */
   ExpandFolder = 'ExpandFolder',
 }
 
@@ -287,41 +287,41 @@ export type RightPanelConfigType =
       tooltip?: string;
 
       /**
-       * 这里有两类 命令。
-       * 1. 不在外部插件中提前注册好的，需要组件内部动态注册的。往往是该组件树定制化的菜单项。比如 校验并运行该资源
-       *   那这个 execute 字段是一个必填项
-       * 2. 在外部插件中提前注册好的，往往是需要配合快捷键一起使用的，并且具有一定的普适性的命令。比如创建资源，复制资源等。
-       *   那这个 execute 不需要配置，的回调在 plugin 中注册的地方触发
-       *   上下文可以通过 RESOURCE_FOLDER_CONTEXT_KEY 这个 key 从 ide 上下文中获取
+       * Here are two categories of orders.
+       * 1. If it is not registered in advance in the external plug-in, it needs to be dynamically registered inside the component. Often it is a menu item customized by the component tree. For example, check and run the resource
+       *   Then this execute field is a required field
+       * 2. Registered in advance in external plugins, often need to be used with shortcuts, and have certain universal commands. Such as creating resources, copying resources, etc.
+       *   Then this execute does not need to be configured, and the callback is triggered where it is registered in the plugin.
+       *   The context can be obtained from the IDE context by RESOURCE_FOLDER_CONTEXT_KEY this key
        */
       execute?: () => void;
     }
   | {
-      // 分割线
+      // dividing line
       type: 'separator';
     };
 
 export interface ConfigType {
   /**
-   * 每个资源的高度
+   * The height of each resource
    */
   itemHeight?: number;
   /**
-   * 半个 icon 的宽度，用于左侧折线的计算。
+   * The width of half an icon is used for the calculation of the left polyline.
    */
   halfIconWidth?: number;
   /**
-   * 每个文件夹下缩进的宽度
+   * The width of indentation under each folder
    */
   tabSize?: number;
 
   /**
-   * 文件夹下钻最大的深度
+   * Folder drill down to maximum depth
    */
   maxDeep?: number;
 
   /**
-   * 资源 name 输入框配置
+   * Resource name text box configuration
    */
   input?: {
     className?: string;
@@ -330,14 +330,14 @@ export interface ConfigType {
   };
 
   /**
-   * 拖拽过程中的预览框配置项
+   * Preview box configuration items during drag and drop
    */
   dragUi?: {
     disable?: boolean;
     wrapperClassName?: string;
 
     /**
-     * 特别说明： 可以通过配置这里的 top 和 left 来设置相对鼠标的偏移量
+     * Special note: You can set the offset relative to the mouse by configuring top and left here
      */
     wrapperStyle?: React.CSSProperties;
   };
@@ -346,9 +346,9 @@ export interface ConfigType {
 }
 
 export interface ResourceFolderContextType {
-  id?: string; // folder 组件唯一的 id
-  currentSelectedId?: IdType; // 当前选中的资源 id
-  tempSelectedMap?: Record<string, ResourceType>; // 当前临时选中的资源 map
+  id?: string; // Folder component unique id
+  currentSelectedId?: IdType; // The currently selected resource ID.
+  tempSelectedMap?: Record<string, ResourceType>; // Currently temporarily selected resource map
   onEnter?: () => void;
   onDelete?: () => void;
   onCreateFolder?: () => void;

frontend/packages/project-ide/framework/src/components/resource-folder/utils/index.ts

@@ -102,7 +102,7 @@ export const getResourceById = (
 };
 
 /**
- * 用 shift 修饰键的时候， 从 from 的到 to 的中间全部选中，包括下钻文件。  dfs
+ * When modifying keys with shift, select all the middle from from to to, including the drill-down files. dfs
  */
 export const getResourceListFromIdToId = ({
   resourceTree,
@@ -200,7 +200,7 @@ export const sortResourceList = (
   return folderList.concat(sourceList) as ResourceType[];
 };
 
-// 后续要优化算法的话 ，得在树打平的算法中，记录每个文件夹的高度，这样在 change 的时候不需要重复计算。 packages/api-builder/base/src/utils/resource-folder/index.ts  mapResourceTree
+// If you want to optimize the algorithm in the future, you have to record the height of each folder in the tree leveling algorithm, so that you don't need to repeatedly calculate when changing. packages/api-builder/base/src/utils/resource-folder/index.ts mapResourceTree
 export const calcOffsetTopByCollapsedMap = (props: {
   selectedId: string;
   resourceTree: ResourceType;
@@ -209,7 +209,7 @@ export const calcOffsetTopByCollapsedMap = (props: {
 }) => {
   const { selectedId, resourceTree, collapsedMap, itemHeight } = props;
 
-  let num = -1; // 因为从 root 开始， root 不展示，所以从 -1 开始算
+  let num = -1; // Because starting from root, root does not display, it starts from -1
   let finish = false;
 
   const dfs = (resource: ResourceType) => {
@@ -267,12 +267,12 @@ export const getResourceTravelIds = (ctx: {
   travelResource(resource, item => {
     const info = resourceMap[item.id];
 
-    // 被删除的资源、文件夹不展示
+    // Deleted resources and folders are not displayed
     if (!info || info.status === 'deprecated') {
       return false;
     }
 
-    // 折叠的文件夹折叠后，不遍历只节点
+    // Folding folders after folding, do not traverse only nodes
     if (info.type === ResourceTypeEnum.Folder && collapsedMap[info.id]) {
       ids.push(item.id);
       return false;
@@ -381,10 +381,10 @@ export const mapResourceTree = (resourceTree): ResourceMapType => {
       return { maxDeep: path.length - 1 };
     }
 
-    // 文件夹要加一，因为能加文件
+    // You need to add one to the folder, because you can add files.
     let maxDeep = path.length + (resource.type === 'folder' ? 1 : 0);
 
-    // 当前资源是否处于提交状态
+    // Is the current resource in a committed state?
     let editDraft = resource.edit_status === 'draft';
 
     if (resource.children) {
@@ -395,7 +395,7 @@ export const mapResourceTree = (resourceTree): ResourceMapType => {
         ]);
         maxDeep = Math.max(maxDeep, deep);
 
-        // 文件夹 editDraft 跟随草稿走，只要内部有一个为草稿，本文件夹也为草稿
+        // Folder editDraft follows the draft, as long as there is one inside as a draft, this folder is also a draft
         editDraft = !!(editDraft || status);
       });
     }
@@ -405,7 +405,7 @@ export const mapResourceTree = (resourceTree): ResourceMapType => {
       path,
       maxDeep: maxDeep - path.length,
       /**
-       * 随业务放开
+       * release with business
        */
       // draft: editDraft,
       // problem: {
@@ -462,9 +462,9 @@ export const flatTree = (
 };
 
 /**
- * 计算当前文件夹下，新建的资源所处的位置。
- * 文件夹：在当前文件夹下顶部
- * 资源：在当前文件夹下的文件夹末尾，所有资源顶部
+ * Calculates the location of the newly created resource in the current folder.
+ * Folder: under the current folder top
+ * Resources: At the end of the folder under the current folder, at the top of all resources
  */
 export const getCreateResourceIndex = ({
   resourceList,
@@ -510,9 +510,9 @@ export function baseValidateNames(props: { label: string; nameTitle: string }) {
 
   const simple = true;
 
-  // 设定默认值，避免 propExtra 只传入一个配置
+  // Set the default value to avoid propExtra passing only one configuration
 
-  // 检测 name 是否空
+  // Check if name is empty
   if (!label) {
     return simple ? 'Empty Key' : `${nameTitle} name can not be empty`;
   }
@@ -521,14 +521,14 @@ export function baseValidateNames(props: { label: string; nameTitle: string }) {
     return simple ? 'Length exceeds' : `${nameTitle} name length exceeds limit`;
   }
 
-  // 必须由字母开头
+  // Must begin with a letter
   if (!/^[A-Za-z]/.test(label)) {
     return simple
       ? 'Must start with letter'
       : `${nameTitle} name must start with a letter`;
   }
 
-  // 检测 name 的命名规则
+  // Detection of naming rules for names
   if (!/^[A-Za-z][0-9a-zA-Z_]*$/.test(label)) {
     return simple
       ? 'only ASCII letters, digits, and _'