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

frontend/packages/studio/autosave/__tests__/core/manager.test.ts

@@ -94,7 +94,7 @@ describe('AutosaveManager', () => {
     manager.start();
     expect(manager.observerList.length).toBe(1);
 
-    manager.start(); // 再次调用 start
+    manager.start(); // Call start again.
     expect(manager.observerList.length).toBe(1);
   });
 
@@ -188,7 +188,7 @@ describe('AutosaveManager', () => {
     });
 
     const observer = manager.getObserver('testKey');
-    // 确保所有异步操作完成
+    // Make sure all asynchronous operations are completed
     await Promise.resolve();
 
     expect(observer.lock).toBe(false);

frontend/packages/studio/autosave/__tests__/core/observer.test.ts

@@ -64,7 +64,7 @@ describe('AutosaveObserver', () => {
   };
 
   beforeEach(() => {
-    vi.useFakeTimers(); // 使用假定时器
+    vi.useFakeTimers(); // Use a hypothetical timer
 
     observer = new AutosaveObserver({
       store: mockStore,
@@ -74,7 +74,7 @@ describe('AutosaveObserver', () => {
 
   afterEach(() => {
     vi.resetAllMocks();
-    vi.useRealTimers(); // 恢复真实的定时器
+    vi.useRealTimers(); // Restore the real timer
   });
 
   it('should initialize and set initial values correctly', () => {
@@ -119,9 +119,9 @@ describe('AutosaveObserver', () => {
 
     expect(observer.debouncedSaveFunc).toBeInstanceOf(Function);
 
-    vi.runAllTimers(); // 手动推进定时器时间以触发防抖函数
+    vi.runAllTimers(); // Manually advance the timer time to trigger the stabilization function
 
-    await vi.runAllTimersAsync(); // 确保所有异步操作完成
+    await vi.runAllTimersAsync(); // Make sure all asynchronous operations are completed
 
     expect(saveRequest).toHaveBeenCalledWith(nextState, 'testKey', diffChange);
   });

frontend/packages/studio/autosave/src/core/manager.ts

@@ -56,7 +56,7 @@ export class AutosaveManager<StoreType, ScopeKey, ScopeStateType> {
   }
 
   /**
-   * 注册数据源和定义对应的 Observer 配置
+   * Register the data source and define the corresponding Observer configuration
    * @param _config
    */
   public register = (
@@ -80,7 +80,7 @@ export class AutosaveManager<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 启动 Manager 模块
+   * Launch Manager Module
    */
   public start = () => {
     if (this.observerList.length > 0) {
@@ -96,7 +96,7 @@ export class AutosaveManager<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 关闭 Manager 模块下的所有属性监听
+   * Turn off all property listeners under the Manager module
    */
   public close = () => {
     this.observerList.forEach(observer => observer.close());
@@ -104,7 +104,7 @@ export class AutosaveManager<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 手动保存
+   * save manually
    * @param params
    */
   public manualSave = async (key: ScopeKey, params: ScopeStateType) => {
@@ -127,7 +127,7 @@ export class AutosaveManager<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 回调过程中关闭自动保存
+   * Turn off autosave during a callback
    * @param params
    */
   public handleWithoutAutosave = async (params: {
@@ -145,7 +145,7 @@ export class AutosaveManager<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 立即触发保存
+   * Trigger save immediately
    * @param key
    */
   public saveFlush = (key: ScopeKey) => {
@@ -154,7 +154,7 @@ export class AutosaveManager<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 立即触发所有保存
+   * Trigger all saves immediately
    * @param key
    */
   public saveFlushAll = () => {
@@ -164,14 +164,14 @@ export class AutosaveManager<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 获取目标 observer 配置
+   * Get target observer configuration
    * @param key
    */
   private getObserver = (key: ScopeKey) =>
     this.observerList.find(i => i.config.key === key);
 
   /**
-   * 获取目标配置项
+   * Get target configuration item
    * @param key
    */
   private getConfig = (key: ScopeKey) =>

frontend/packages/studio/autosave/src/core/observer.ts

@@ -49,7 +49,7 @@ export class AutosaveObserver<StoreType, ScopeKey, ScopeStateType> {
     this.lock = false;
     this.config = config;
 
-    // 订阅字段初始化
+    // Subscription field initialization
     this.initSubscribe();
   }
 
@@ -65,7 +65,7 @@ export class AutosaveObserver<StoreType, ScopeKey, ScopeStateType> {
     if (typeof this.config.selector === 'function') {
       return this.config.selector;
     } else {
-      // 使用createSelector创建可记忆化的选择器
+      // Create a memorable selector with createSelector
       const { deps, transformer } = this.config.selector;
       return createSelector(deps, transformer);
     }
@@ -75,7 +75,7 @@ export class AutosaveObserver<StoreType, ScopeKey, ScopeStateType> {
     console.log('nextState :>> ', nextState);
     console.log('prevState :>> ', prevState);
 
-    // selector 返回的 state
+    // The state returned by the selector
     this.nextState = nextState;
     this.prevState = prevState;
 
@@ -110,12 +110,12 @@ export class AutosaveObserver<StoreType, ScopeKey, ScopeStateType> {
   };
 
   private parsedSaveFunc = async () => {
-    // 中间件-保存前
+    // Middleware - Before saving
     const beforeSavePayload = await getPayloadByFormatter<ScopeStateType>(
       this.nextState,
       this.config?.middleware?.onBeforeSave,
     );
-    // 生命周期-保存前
+    // Life cycle - before saving
     await this.config?.eventCallBacks?.onBeforeSave?.({
       key: this.config.key,
       data: beforeSavePayload,
@@ -129,21 +129,21 @@ export class AutosaveObserver<StoreType, ScopeKey, ScopeStateType> {
         this.diff,
       );
 
-      // 中间件-保存后
+      // Middleware - after saving
       const afterSavePayload = await getPayloadByFormatter<ScopeStateType>(
         this.nextState,
         this.config?.middleware?.onAfterSave,
       );
       console.log('afterSavePayload:>>', afterSavePayload);
 
-      // 生命周期-保存后
+      // Life cycle - after saving
       await this.config?.eventCallBacks?.onAfterSave?.({
         key: this.config.key,
         data: afterSavePayload,
       });
     } catch (error) {
       console.log('error:>>', error);
-      // 生命周期-异常
+      // Life Cycle - Abnormal
       this.config?.eventCallBacks?.onError?.({
         key: this.config.key,
         error: error as Error,
@@ -152,7 +152,7 @@ export class AutosaveObserver<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 取消订阅
+   * unsubscribe
    */
   public close = () => {
     this.debouncedSaveFunc?.flush();
@@ -161,10 +161,10 @@ export class AutosaveObserver<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 获取状态变更带来的触发延时时间
-   * @param prevState selector 选择的 store 的内容
-   * @param diffChange 前后比对的diff
-   * @returns 延时时间
+   * Get the trigger delay time caused by the state change
+   * @param prevState selector to store content
+   * @param diffChange the diff before and after comparison
+   * @returns delay time
    */
   private getTriggerDelayTime = (
     prevState?: ScopeStateType,
@@ -232,7 +232,7 @@ export class AutosaveObserver<StoreType, ScopeKey, ScopeStateType> {
   };
 
   /**
-   * 获取变更与 trigger 声明配置对应的 key
+   * Gets the key that changes the configuration corresponding to the trigger declaration
    * @param changePath diff path
    * @returns path key
    */

frontend/packages/studio/autosave/src/type/index.ts

@@ -20,23 +20,23 @@ import { type StoreApi, type UseBoundStore } from 'zustand';
 import type { Diff } from 'deep-diff';
 
 /**
- * 防抖延迟时间
+ * stabilization delay time
  * @readonly
  * @enum {number}
  */
 export enum DebounceTime {
-  /** 用于需要立即响应的保存操作，如按钮或下拉选择等操作  */
+  /** For saving operations that require an immediate response, such as buttons or drop-down selections  */
   Immediate = 0,
-  /** 用于需要较短时间响应的保存操作，如拖拽等操作 */
+  /** For saving operations that require a short response time, such as dragging and dropping */
   Medium = 500,
-  /** 适合于文本输入等操作 */
+  /** Suitable for operations such as text input */
   Long = 1000,
 }
 
-/** trigger 配置声明时的函数形式，用于在运行时指定字段触发时机 */
+/** Functional form when the trigger configuration is declared, used to specify when the field will trigger at runtime */
 export type FunctionDebounceTime = () => DebounceTime;
 
-/** trigger 配置声明时的数组形式，用于分别指定数组内容变化时的触发时机 */
+/** The array form when the trigger configuration is declared, which is used to specify the trigger timing when the array content changes */
 export interface ArrayDebounceTime {
   arrayType: boolean;
   action:
@@ -48,7 +48,7 @@ export interface ArrayDebounceTime {
       };
 }
 
-/** trigger 配置声明时的对象形式，用于分别指定多字段触发时机 */
+/** The object form when the trigger configuration declaration is used to specify the triggering time of multiple fields separately */
 export interface ObjectDebounceTime {
   default: DebounceTime;
   [index: string]: DebounceTime | ArrayDebounceTime;
@@ -79,21 +79,21 @@ export type SelectorType<StoreType, ScopeStateType> =
     };
 
 export interface AutosaveObserverConfig<StoreType, ScopeKey, ScopeStateType> {
-  /** 被托管的数据字段的类型 */
+  /** The type of data field being hosted */
   key: ScopeKey;
-  /** 防抖延迟时间 */
+  /** stabilization delay time */
   debounce?: DebounceConfig;
-  /** store 需要被监听的属性选择器，支持配置依赖 */
+  /** Store property selectors that need to be listened to, support configuration dependencies */
   selector: SelectorType<StoreType, ScopeStateType>;
-  /** 中间件 支持业务链式处理监听数据 */
+  /** Middleware, which supports business chain processing of monitoring data */
   middleware?: MiddlewareHanderMap<ScopeStateType>;
-  /** 是否立即保存当前字段 */
+  /** Whether to save the current field immediately */
   immediate?: boolean;
-  /** 保存的请求 */
+  /** saved request */
   saveRequest: SaveRequest<ScopeStateType, ScopeKey>;
-  /** 被托管的数据取消订阅时进行的回调 */
+  /** Callbacks when hosted data is unsubscribed */
   unobserver?: () => void;
-  /** 生命周期 */
+  /** Life Cycle */
   eventCallBacks?: EventCallBacks<ScopeStateType, ScopeKey>;
 }
 
@@ -108,28 +108,28 @@ export type SaveMiddlewareHander<ScopeStateType> = (
 ) => Promise<FlexibleState<ScopeStateType>> | FlexibleState<ScopeStateType>;
 
 export interface MiddlewareHanderMap<ScopeStateType> {
-  /** 生命周期-检测变更后 */
+  /** Lifecycle - After detecting changes */
   onBeforeSave?: SaveMiddlewareHander<ScopeStateType>;
-  /** 生命周期-成功保存后 */
+  /** Lifecycle - after successful saving */
   onAfterSave?: SaveMiddlewareHander<ScopeStateType>;
 }
 
 export interface EventCallBacks<ScopeStateType, ScopeKey> {
-  /** 生命周期-检测变更后 */
+  /** Lifecycle - After detecting changes */
   onBeforeSave?: (params: {
     data: FlexibleState<ScopeStateType>;
     key: ScopeKey;
   }) => void | Promise<void>;
-  /** 生命周期-成功保存后 */
+  /** Lifecycle - after successful saving */
   onAfterSave?: (params: {
     data: FlexibleState<ScopeStateType>;
     key: ScopeKey;
   }) => void | Promise<void>;
-  /** 生命周期-异常 */
+  /** Life Cycle - Abnormal */
   onError?: (params: { error: Error; key: ScopeKey }) => void;
 }
 
-// 比对出来的被变化的 key 的 path， number 形式对应数组
+// The path of the changed key compared, corresponding to the array in the form of number
 export type PathType = string | number;
 
 export interface UseStoreType<StoreType, ScopeStateType> {

frontend/packages/studio/autosave/src/utils/index.ts

@@ -37,7 +37,7 @@ export function isObject(value: DebounceConfig): value is ObjectDebounceTime {
 }
 
 /**
- * 获取保存接口调用时候需要的参数
+ * Get the parameters required to save the interface call
  */
 export const getPayloadByFormatter = async <T>(
   state: T,