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

2025-07-31 10:32:15 +08:00
parent 716ec0cba8
commit 71f6245a01
2960 changed files with 15545 additions and 15545 deletions
--- a/frontend/packages/workflow/fabric-canvas/src/components/fabric-editor/const.ts
+++ b/frontend/packages/workflow/fabric-canvas/src/components/fabric-editor/const.ts
@@ -15,31 +15,31 @@
 */
 
 /**
- * 画布最大缩放
+ * Canvas Max Zoom
 */
 export const MAX_ZOOM = 3;
 /**
- * 画布最小缩放
+ * Canvas minimum zoom
 */
 export const MIN_ZOOM = 1;
 /**
- * 画布最大宽度
+ * Canvas maximum width
 */
 export const MAX_WIDTH = 10000;
 /**
- * 画布最小宽度
+ * Canvas minimum width
 */
 export const MIN_WIDTH = 1;
 /**
- * 画布最大高度
+ * Canvas maximum height
 */
 export const MAX_HEIGHT = 10000;
 /**
- * 画布最小高度
+ * minimum height of canvas
 */
 export const MIN_HEIGHT = 1;

 /**
- * 画布最大面积
+ * Canvas maximum area
 */
 export const MAX_AREA = 3840 * 2160;
--- a/frontend/packages/workflow/fabric-canvas/src/components/fabric-editor/fabric-editor.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/fabric-editor/fabric-editor.tsx
@@ -72,8 +72,8 @@ interface IProps {
  onChange: (schema: FabricSchema) => void;
  className?: string;
  /**
-   * 不强制，用来当做 redo/undo 操作栈保存到内存的 key
-   * 不传的话，不会保存操作栈到内存，表现：关闭侧拉窗，丢失操作栈
+   * Unforced, used as the key to save the redo/undo operation stack to memory
+   * If it is not passed, the operation stack will not be saved to memory. Performance: close the side pull window and lose the operation stack.
   */
  id?: string;
 }
@@ -98,10 +98,10 @@ export const FabricEditor: FC<IProps> = props => {
  }, [_variables]);

  /**
-   * props.onChange 是异步，这个异步导致 schema 的状态很难管理。
-   * 因此此处用 state 来管理 schema，后续消费 onChange 的地方可以当同步处理
+   * Props.onChange is asynchronous, which makes the state of the schema difficult to manage.
+   * Therefore, state is used to manage the schema here, and subsequent consumption of onChange can be handled synchronously
   *
-   * 副作用：外界引发的 schema 变化，不会同步到画布（暂时没这个场景）
+   * Side effect: Schema changes caused by the outside world will not be synchronized to the canvas (this scene is not available for now)
   */
  const [schema, setSchema] = useState<FabricSchema>(_schema);
  const onChange = useCallback(
@@ -115,26 +115,26 @@ export const FabricEditor: FC<IProps> = props => {
  const [id] = useState<string>(props.id ?? nanoid());
  const helpLineLayerId = `help-line-${id}`;

-  // 快捷点监听区域
+  // Shortcut the listening area
  const shortcutRef = useRef<HTMLDivElement>(null);

-  // Popover 渲染至 dom
+  // Popover rendering to dom
  const popRef = useRef(null);
-  // Popover 渲染至 dom，作用于 select ，dropdown 右对齐
+  // Popover render to dom, act on select, dropdown right align
  const popRefAlignRight = useRef<HTMLDivElement>(null);

-  // canvas 可渲染区域 dom
+  // Canvas renderable domain
  const sizeRef = useRef<HTMLDivElement>(null);
  const size = useSize(sizeRef);

-  // popover 渲染至 dom
+  // Popover render to dom
  const popoverRef = useRef<HTMLDivElement>(null);
  const popoverSize = useSize(popoverRef);

-  // fabric canvas 渲染 dom
+  // Fabric canvas rendering dom
  const canvasRef = useRef<HTMLCanvasElement>(null);

-  // 模式
+  // pattern
  const [drawMode, setDrawMode] = useState<Mode | undefined>();
  const latestDrawMode = useLatest(drawMode);

@@ -146,7 +146,7 @@ export const FabricEditor: FC<IProps> = props => {
    | undefined
  >();

-  // 监听鼠标是否处于按下状态，松手时才显示属性设置面板
+  // Monitor whether the mouse is pressed, and display the property settings panel when you let go
  const [isMousePressing, setIsMousePressing] = useState(false);

  const cancelContentMenu = useCallback(() => {
@@ -298,7 +298,7 @@ export const FabricEditor: FC<IProps> = props => {
    },
  };

-  // 针对画笔模式，达到上限后，主动退出绘画模式
+  // For brush mode, after reaching the upper limit, actively exit the painting mode
  useEffect(() => {
    if (drawMode && !couldAddNewObject) {
      modeSetting[drawMode]?.exitFn();
@@ -307,7 +307,7 @@ export const FabricEditor: FC<IProps> = props => {
  }, [couldAddNewObject, drawMode]);

  const zoomStartPointer = useRef<Point>();
-  // 鼠标滚轮缩放
+  // mouse wheel zoom
  const onWheelZoom = (e: WheelEvent, isFirst: boolean) => {
    if (!canvas) {
      return;
@@ -321,7 +321,7 @@ export const FabricEditor: FC<IProps> = props => {
      zoomStartPointer.current = pointer;
    }

-    // 根据滚轮方向确定是放大还是缩小
+    // Determine whether to zoom in or out according to the direction of the roller
    if (delta < 0) {
      zoomLevel += zoomStep;
    } else {
@@ -333,7 +333,7 @@ export const FabricEditor: FC<IProps> = props => {
    );
  };

-  // 鼠标位移
+  // mouse displacement
  const onWheelTransform = (deltaX: number, deltaY: number) => {
    const vpt: TMat2D = [...viewport];
    vpt[4] -= deltaX;
@@ -341,7 +341,7 @@ export const FabricEditor: FC<IProps> = props => {
    setViewport(vpt);
  };

-  // 触摸板手势缩放、位移
+  // Touchpad gesture zoom, shift
  const gestureBind = useGesture(
    {
      onPinch: state => {
@@ -380,7 +380,7 @@ export const FabricEditor: FC<IProps> = props => {
    },
  );

-  // 当用户编辑文本时，按删除键不应该执行删除元素操作
+  // When a user edits text, pressing the delete key should not perform a delete element operation
  const [isTextEditing, setIsTextEditing] = useState(false);
  useEffect(() => {
    let disposers: (() => void)[] = [];
@@ -426,7 +426,7 @@ export const FabricEditor: FC<IProps> = props => {
    };
  }, [sizeRef]);

-  // 点击画布外侧，取消选中
+  // Click on the outside of the canvas and uncheck it.
  useEffect(() => {
    const clickOutside = (e: MouseEvent) => {
      setContentMenuPosition(undefined);
@@ -438,7 +438,7 @@ export const FabricEditor: FC<IProps> = props => {
    };
  }, [discardActiveObject]);

-  // 注册快捷键
+  // Registration shortcut
  useShortcut({
    ref: shortcutRef,
    state: {
@@ -471,7 +471,7 @@ export const FabricEditor: FC<IProps> = props => {

  const isContentMenuShow = !readonly && contentMenuPosition;

-  // 选中元素是否为同一类型（包含框选）
+  // Whether the selected elements are of the same type (including box selection)
  const isSameActiveObjects =
    Array.from(
      new Set(
@@ -482,14 +482,14 @@ export const FabricEditor: FC<IProps> = props => {
    ).length === 1;

  /**
-   * 属性菜单没有展示 &&
-   * 鼠标右键没有按下（拖拽 ing）&&
+   * Properties menu not displayed & &
+   * The right mouse button is not pressed (drag and drop ing) & &
   * isSameActiveObjects &&
   */
  const isFormShow =
    !isContentMenuShow && !isMousePressing && isSameActiveObjects;

-  // 最大宽高有两层限制 1. 面积 2. 固定最大值
+  // There are two restrictions on the maximum width and height: 1. Area 2. Fixed maximum
  const { canvasMaxWidth, canvasMaxHeight } = useMemo(
    () => ({
      canvasMaxWidth: Math.min(MAX_AREA / schema.height, MAX_WIDTH),
@@ -708,7 +708,7 @@ export const FabricEditor: FC<IProps> = props => {
                    e.stopPropagation();
                  }}
                >
-                  {/* 引用 tag */}
+                  {/* Reference tag */}
                  <RefTitle visible={!isMousePressing} />
                  <div className="w-fit h-fit overflow-hidden">
                    <div
@@ -719,7 +719,7 @@ export const FabricEditor: FC<IProps> = props => {
                  </div>
                </div>
              </div>
-              {/* 右键菜单 */}
+              {/* right-click menu */}
              {isContentMenuShow ? (
                <ContentMenu
                  limitRect={popoverSize}
@@ -745,10 +745,10 @@ export const FabricEditor: FC<IProps> = props => {
                <></>
              )}

-              {/* 属性面板 */}
+              {/* properties panel */}
              {isFormShow ? (
                <Form
-                  // 文本切换时，涉及字号变化，需要 rerender form 同步状态
+                  // Text switching, involving font size changes, need to rerender form synchronization state
                  key={
                    (activeObjects as FabricObjectWithCustomProps[])?.[0]
                      ?.customType
--- a/frontend/packages/workflow/fabric-canvas/src/components/fabric-editor/use-shortcut.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/fabric-editor/use-shortcut.tsx
@@ -74,7 +74,7 @@ export const useShortcut = ({
    horizontalAverage: () => void;
  };
 }) => {
-  // 上下左右微调元素位置
+  // Fine-tune element positions up, down, left, right
  useKeyPress(
    ['uparrow', 'downarrow', 'leftarrow', 'rightarrow'],
    e => {
@@ -101,7 +101,7 @@ export const useShortcut = ({
    },
  );

-  // 删除元素
+  // Delete element
  useKeyPress(
    ['backspace', 'delete'],
    e => {
@@ -118,7 +118,7 @@ export const useShortcut = ({
  useKeyPress(
    ['ctrl.z', 'meta.z'],
    e => {
-      // 一定要加，否则会命中浏览器乱七八糟的默认行为
+      // Be sure to add it, otherwise it will hit the browser's messy default behavior.
      e.preventDefault();
      if (e.shiftKey) {
        redo();
@@ -133,7 +133,7 @@ export const useShortcut = ({
  );

  /**
-   * 功能开发暂停了，原因详见 packages/workflow/fabric-canvas/src/hooks/use-group.tsx
+   * Functional development has been suspended. For the reasons, see packages/workflow/fabricate-canvas/src/hooks/use-group.tsx
   */
  // useKeyPress(
  //   ['ctrl.g', 'meta.g'],
@@ -181,11 +181,11 @@ export const useShortcut = ({
    },
  );

-  // 生成副本
+  // make a copy
  useKeyPress(
    ['ctrl.d', 'meta.d'],
    async e => {
-      // 必须阻止默认行为，否则会触发添加标签
+      // The default behavior must be blocked or the add label will be triggered
      e.preventDefault();
      await copy(CopyMode.CtrlD);
      paste({
@@ -199,7 +199,7 @@ export const useShortcut = ({
    },
  );

-  // [ 下移一层
+  // [Move down one floor
  useKeyPress(
    ['openbracket'],
    e => {
@@ -214,7 +214,7 @@ export const useShortcut = ({
    },
  );

-  // ] 上移一层
+  // Move up one layer
  useKeyPress(
    ['closebracket'],
    e => {
@@ -228,7 +228,7 @@ export const useShortcut = ({
      target: ref,
    },
  );
-  // ⌘ + [、⌘ + ] 禁止浏览器默认行为 前进、后退
+  // ⌘ + [、⌘ + ] disable browser default behavior, forward and backward
  useKeyPress(
    ['meta.openbracket', 'meta.closebracket'],
    e => {
@@ -243,7 +243,7 @@ export const useShortcut = ({
    },
  );

-  // ⌘ + [ 置底
+  // < unk > +
  useKeyPress(
    ['meta.openbracket'],
    e => {
@@ -258,7 +258,7 @@ export const useShortcut = ({
    },
  );

-  // ⌘ + ] 置顶
+  // 🥰 +] top
  useKeyPress(
    ['meta.closebracket'],
    e => {
@@ -273,7 +273,7 @@ export const useShortcut = ({
    },
  );

-  // 水平居左
+  // Horizontal left
  useKeyPress(
    ['alt.a'],
    e => {
@@ -287,7 +287,7 @@ export const useShortcut = ({
    },
  );

-  // 水平居右
+  // Horizontal right
  useKeyPress(
    ['alt.d'],
    e => {
@@ -301,7 +301,7 @@ export const useShortcut = ({
    },
  );

-  // 水平居中
+  // centered text
  useKeyPress(
    ['alt.h'],
    e => {
@@ -315,7 +315,7 @@ export const useShortcut = ({
    },
  );

-  // 垂直居上
+  // vertical top
  useKeyPress(
    ['alt.w'],
    e => {
@@ -329,7 +329,7 @@ export const useShortcut = ({
    },
  );

-  // 垂直居下
+  // vertical
  useKeyPress(
    ['alt.s'],
    e => {
@@ -343,7 +343,7 @@ export const useShortcut = ({
    },
  );

-  // 垂直居中
+  // Vertically centered
  useKeyPress(
    ['alt.v'],
    e => {
@@ -357,7 +357,7 @@ export const useShortcut = ({
    },
  );

-  // 水平均分
+  // horizontal average fraction
  useKeyPress(
    ['alt.ctrl.h'],
    e => {
@@ -371,7 +371,7 @@ export const useShortcut = ({
    },
  );

-  // 垂直均分
+  // vertical equipartition
  useKeyPress(
    ['alt.ctrl.v'],
    e => {
--- a/frontend/packages/workflow/fabric-canvas/src/components/fabric-preview/fabric-preview.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/fabric-preview/fabric-preview.tsx
@@ -40,7 +40,7 @@ export const FabricPreview: FC<IFabricPreview> = props => {
      oldWidth.current = size?.width || 0;
    }

-    // 防止抖动，当宽度变化 > 20 时才更新宽度
+    // To prevent jitter, update the width when the width changes > 20
    if (size?.width && size.width - oldWidth.current > 20) {
      oldWidth.current = size?.width || 0;
    }
--- a/frontend/packages/workflow/fabric-canvas/src/components/form/index.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/form/index.tsx
@@ -84,7 +84,7 @@ const FormItem = memo(
    metaItem: FormMetaItem;
    isLast: boolean;
    isRow: boolean;
-    // 给图片上传组件特化的，需要根据是否为引用元素，设置不同的 label
+    // Specialized for the image upload component, you need to set different labels according to whether it is a reference element.
    isRefElement: boolean;
    formValue: Partial<FabricObjectSchema>;
    onChange: (v: Partial<FabricObjectSchema>, cacheSave?: boolean) => void;
@@ -236,7 +236,7 @@ export const Form: FC<IProps> = props => {
    [activeObjects],
  );

-  // 临时保存不需要保存到 schema 中的表单值
+  // Temporary saving of form values that do not need to be saved to the schema
  const [cacheFormValue, setCacheFormValue] = useState<
    Partial<FabricObjectSchema>
  >({});
--- a/frontend/packages/workflow/fabric-canvas/src/components/icon-button/index.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/icon-button/index.tsx
@@ -26,7 +26,7 @@ import {
 import styles from './index.module.less';

 /**
- * 在 size:small 的基础上，覆盖了 padding ，5px -> 4px
+ * On the basis of size: small, overlay padding, 5px - > 4px
 */
 export const MyIconButton = forwardRef<
  SemiButton,
--- a/frontend/packages/workflow/fabric-canvas/src/components/pop-in-screen/index.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/pop-in-screen/index.tsx
@@ -66,8 +66,8 @@ export const PopInScreen: FC<IProps> = props => {
  }

  /**
-   * ahooks useSize 初次执行会返回 undefined，导致组件位置计算错误
-   * 这里监听 childrenSize ，如果为 undefined 则延迟 100ms 再渲染，以修正组件位置
+   * ahooks useSize returns undefined on first execution, resulting in an error in component location evaluation
+   * This listens to childrenSize. If it is undefined, delay rendering by 100ms to correct the component position.
   */
  const [id, setId] = useState('');
  const timer = useRef<NodeJS.Timeout>();
@@ -109,7 +109,7 @@ export const PopInScreen: FC<IProps> = props => {
        transform,
      }}
    >
-      {/* 为了触发二次渲染 */}
+      {/* To trigger secondary rendering */}
      <div className="hidden" id={id} />
      {children}
    </div>
--- a/frontend/packages/workflow/fabric-canvas/src/components/setters/color-picker.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/setters/color-picker.tsx
@@ -138,13 +138,13 @@ export const ColorPicker: FC<IProps> = props => {
            })}
          </div>
          <Input
-            // 因为是不受控模式，当点击色块时，需要重置 input.value。所以这里以 color 为 key
+            // Because it is in uncontrolled mode, when clicking on the color block, you need to reset the input.value. So here color is the key
            key={`input-${color}`}
            disabled={readonly}
            prefix={<ColorRect color={color as string} size={16} />}
            type="text"
            className="w-[110px]"
-            // 为什么不使用受控模式？使用受控模式，用户输入过程中触发的格式校验处理起来比较麻烦
+            // Why not use controlled mode? With controlled mode, format checking triggered during user input is cumbersome to handle
            defaultValue={color}
            onChange={v => {
              if (isHexColor(v)) {
--- a/frontend/packages/workflow/fabric-canvas/src/components/setters/font-size.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/setters/font-size.tsx
@@ -64,8 +64,8 @@ export const FontSize: FC<IProps> = props => {
            <IconCozFontSize className="text-[16px] coz-fg-secondary m-[8px]" />
          }
          /**
-           * 因为开启了 allowCreate，所以 optionList 不会再响应动态变化
-           * 这里给个 key ，重新渲染 select，保证 optionList 符合预期
+           * Since allowCreate is enabled, the optionList will no longer respond to dynamic changes
+           * Give a key here, re-render select, and ensure that the optionList meets expectations
           */
          key={_optionsList.map(d => d.label).join()}
          value={value}
--- a/frontend/packages/workflow/fabric-canvas/src/components/setters/input-number.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/setters/input-number.tsx
@@ -30,8 +30,8 @@ export const InputNumber = forwardRef<InputNumberProps, InputNumberProps>(
        min={min}
        max={max}
        value={value}
-        // InputNumber 长按 + - 时，会一直触发变化。这里有 bug，有时定时器清不掉，会鬼畜（一直增加/减小）。
-        // 把 pressInterval 设置成 24h ，变相禁用长按增减
+        // InputNumber When long pressing + -, it will keep triggering changes. There are bugs here, and sometimes the timer can't be cleared, and it will be ghost (keep increasing/decreasing).
+        // Set pressInterval to 24h, and disable long press increase or decrease in disguise
        pressInterval={1000 * 60 * 60 * 24}
        onNumberChange={v => {
          if (Number.isFinite(v)) {
--- a/frontend/packages/workflow/fabric-canvas/src/components/setters/line-height.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/setters/line-height.tsx
@@ -71,8 +71,8 @@ export const LineHeight: FC<IProps> = props => {
          }
          {...rest}
          /**
-           * 因为开启了 allowCreate，所以 optionList 不会再响应动态变化
-           * 这里给个 key ，重新渲染 select，保证 optionList 符合预期
+           * Since allowCreate is enabled, the optionList will no longer respond to dynamic changes
+           * Give a key here, re-render select, and ensure that the optionList meets expectations
           */
          key={_optionsList.map(d => d.label).join()}
          filter
--- a/frontend/packages/workflow/fabric-canvas/src/components/topbar/align.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/topbar/align.tsx
@@ -61,7 +61,7 @@ export const Align: FC<IProps> = props => {
    </Select.Option>
  );
  return (
-    // 禁止冒泡，防止点击对齐时，canvas 的选中状态被清空
+    // Prohibit bubbling to prevent the selected state of canvas from being cleared when clicking align
    <div
      onClick={e => {
        e.stopPropagation();
--- a/frontend/packages/workflow/fabric-canvas/src/components/topbar/index.tsx
+++ b/frontend/packages/workflow/fabric-canvas/src/components/topbar/index.tsx
@@ -193,7 +193,7 @@ export const TopBar: FC<IProps> = props => {
    aligns,
  } = props;

-  // 点击已选中的，则取消选中
+  // Click on the selected one to unselect it.
  const onModeChange = useCallback(
    (m: Mode | undefined) => {
      if (m === mode) {
@@ -233,7 +233,7 @@ export const TopBar: FC<IProps> = props => {
        'flex justify-center items-center gap-[12px]',
      ])}
    >
-      {/* 引用变量 */}
+      {/* reference variable */}
      <Tooltip
        key="ref-variable"
        content={I18n.t('workflow_detail_condition_reference')}
@@ -317,7 +317,7 @@ export const TopBar: FC<IProps> = props => {
      </Tooltip>
      <SplitLine />

-      {/* 画布基础设置 */}
+      {/* canvas base settings */}
      <Tooltip
        key="canvas-setting"
        position="bottom"
@@ -407,7 +407,7 @@ export const TopBar: FC<IProps> = props => {
        />
      </Tooltip>

-      {/* 重置视图 */}
+      {/* Reset view */}
      <Tooltip
        key="reset-view"
        content={I18n.t('imageflow_canvas_restart')}
@@ -489,7 +489,7 @@ export const TopBar: FC<IProps> = props => {
      </Tooltip>
      <SplitLine />

-      {/* 置底 置顶 */}
+      {/* Bottom, top */}
      <Tooltip
        key="move-to-bottom"
        content={I18n.t('card_builder_move_to_bottom')}
@@ -512,12 +512,12 @@ export const TopBar: FC<IProps> = props => {
          icon={<IconCozMoveToTopFill className="text-[16px]" />}
        />
      </Tooltip>
-      {/* 对齐 */}
+      {/* align */}
      <div className="flex">
        <MyIconButton
          disabled={readonly}
          onClick={e => {
-            // 禁止冒泡，防止点击对齐时，canvas 的选中状态被清空
+            // Prohibit bubbling to prevent the selected state of canvas from being cleared when clicking align
            e.stopPropagation();
            aligns[alignType]();
          }}
@@ -534,7 +534,7 @@ export const TopBar: FC<IProps> = props => {
        />
      </div>

-      {/* 文本 */}
+      {/* Text */}
      <div className="flex">
        <Tooltip
          key="text"
@@ -583,7 +583,7 @@ export const TopBar: FC<IProps> = props => {
          }}
        />
      </div>
-      {/* 图片 */}
+      {/* picture */}

      <ImageUpload
        onChange={onAddImg}
@@ -595,7 +595,7 @@ export const TopBar: FC<IProps> = props => {
        />
      </ImageUpload>

-      {/* 形状 */}
+      {/* shape */}
      <div className="flex">
        <Tooltip
          key="shape"
@@ -656,7 +656,7 @@ export const TopBar: FC<IProps> = props => {
        />
      </div>

-      {/* 自由画笔 */}
+      {/* Free brush */}
      <Tooltip
        key="pencil"
        content={I18n.t('imageflow_canvas_draw')}