fix: 增加碰撞框选的文字提示并支持国际化提示，框选距离增加最小阈值条件显示

Author: Littlefean

.trae/skills/manage-translations/SKILL.md

@@ -18,6 +18,7 @@ app/src/locales/
 ├── zh_CN.yml   # 简体中文
 ├── zh_TW.yml   # 繁体中文
 ├── zh_TWC.yml  # 接地气繁体中文
+├── ...         # 其他语言翻译文件
 └── README.md   # 翻译系统说明
 ```
 
@@ -28,97 +29,3 @@ app/src/locales/
 ```bash
 ls app/src/locales/*.yml
 ```
-
-## 添加新翻译
-
-### 1. 确定翻译键名
-
-翻译使用层级结构，通常按功能模块组织：
-
-```yaml
-# 基本结构
-moduleName:
-  featureName:
-    title: "标题文本"
-    description: "描述文本"
-```
-
-### 2. 在所有语言文件中添加
-
-为每个 `.yml` 文件添加对应的翻译。例如添加一个设置项的翻译：
-
-**zh_CN.yml:**
-
-```yaml
-settings:
-  enableNewFeature:
-    title: "启用新功能"
-    description: "开启后将启用新功能特性"
-    options:
-      option1: "选项一"
-      option2: "选项二"
-```
-
-**en.yml:**
-
-```yaml
-settings:
-  enableNewFeature:
-    title: "Enable New Feature"
-    description: "Enable to activate the new feature"
-    options:
-      option1: "Option 1"
-      option2: "Option 2"
-```
-
-**其他语言文件同理...**
-
-### 3. 翻译内容规范
-
-- **title**: 简短标题，3-10个字
-- **description**: 详细描述，可以包含多行（使用 `|`）
-- **options**: 仅枚举类型需要，列出所有选项的显示文本
-
-## 翻译使用方式
-
-### 在代码中使用
-
-```typescript
-import i18next from "i18next";
-
-// 简单翻译
-const title = i18next.t("settings.enableNewFeature.title");
-
-// 带参数的翻译
-const message = i18next.t("common.deleted", { count: 5 });
-
-// 指定命名空间（如 keyBinds）
-const keyBindTitle = i18next.t("saveFile.title", { ns: "keyBinds", defaultValue: "" });
-```
-
-### 在 React 组件中使用
-
-```tsx
-import { useTranslation } from "react-i18next";
-
-function MyComponent() {
-  const { t } = useTranslation();
-
-  return <div>{t("settings.enableNewFeature.title")}</div>;
-}
-```
-
-## 添加新语言
-
-1. 在 `app/src/locales/` 目录下创建新的 `.yml` 文件
-2. 复制现有语言文件（如 `en.yml`）作为模板
-3. 将所有值翻译为目标语言
-4. 在语言配置中添加新语言（如有语言选择功能）
-
-## 注意事项
-
-1. **保持键名一致**: 所有语言文件中的键名必须完全一致
-2. **不要遗漏**: 添加新翻译时，确保为所有语言文件都添加
-3. **使用英文作为后备**: 如果某个翻译缺失，系统会回退到英文
-4. **参数占位符**: 使用 `{{paramName}}` 语法添加可变参数
-5. **多行文本**: 使用 `|` 符号表示多行文本

app/src/core/render/canvas2d/renderer.tsx

@@ -11,6 +11,7 @@ import { isFrame, isMac } from "@/utils/platform";
 import { Color, mixColors, Vector } from "@graphif/data-structures";
 import { CubicBezierCurve, Rectangle } from "@graphif/shapes";
 import { GlobalMaskRenderer } from "./utilsRenderer/globalMaskRenderer";
+import i18next from "i18next";
 
 /**
  * 渲染器
@@ -215,6 +216,12 @@ export class Renderer {
           this.project.stageStyleManager.currentStyle.SelectRectangleBorder,
         );
       }
+
+      // 只有当移动距离超过阈值时才显示文字提示
+      const moveDistance = this.project.rectangleSelect.getSelectMoveDistance();
+      const minMoveDistance = 10; // 最小移动距离阈值
+      const shouldShowText = moveDistance > minMoveDistance;
+
       const selectMode = this.project.rectangleSelect.getSelectMode();
       if (selectMode === "intersect") {
         this.project.shapeRenderer.renderRect(
@@ -223,6 +230,16 @@ export class Renderer {
           this.project.stageStyleManager.currentStyle.SelectRectangleBorder,
           1,
         );
+        // 碰撞框选的提示
+        if (shouldShowText) {
+          const text = i18next.t("rectangleSelect.intersect", { ns: "renderer", defaultValue: "" });
+          this.project.textRenderer.renderText(
+            text,
+            this.transformWorld2View(rectangle.leftBottom).add(new Vector(20, 10)),
+            10,
+            this.project.stageStyleManager.currentStyle.SelectRectangleBorder,
+          );
+        }
       } else if (selectMode === "contain") {
         this.project.shapeRenderer.renderRect(
           this.transformWorld2View(rectangle),
@@ -236,12 +253,15 @@ export class Renderer {
           1,
         );
         // 完全覆盖框选的提示
-        this.project.textRenderer.renderText(
-          "完全覆盖框选",
-          this.transformWorld2View(rectangle.leftBottom).add(new Vector(20, 10)),
-          10,
-          this.project.stageStyleManager.currentStyle.SelectRectangleBorder,
-        );
+        if (shouldShowText) {
+          const text = i18next.t("rectangleSelect.contain", { ns: "renderer", defaultValue: "" });
+          this.project.textRenderer.renderText(
+            text,
+            this.transformWorld2View(rectangle.leftBottom).add(new Vector(20, 10)),
+            10,
+            this.project.stageStyleManager.currentStyle.SelectRectangleBorder,
+          );
+        }
       }
     }
     // if (Stage.selectMachine.isUsing && Stage.selectMachine.selectingRectangle) {

app/src/core/service/controlService/rectangleSelectEngine/rectangleSelectEngine.tsx

@@ -230,4 +230,9 @@ export class RectangleSelect {
       return Settings.rectangleSelectWhenLeft;
     }
   }
+
+  // 获取框选的移动距离
+  public getSelectMoveDistance(): number {
+    return this.selectStartLocation.distance(this.selectEndLocation);
+  }
 }

app/src/locales/en.yml

@@ -855,6 +855,11 @@ settings:
     description: |
       When enabled, matching keyboard shortcut hints will be displayed when pressing modifier keys (Ctrl/Alt/Shift/Win on Windows or ⌘/⌥/⇧/⌃ on Mac).
       Hold the modifier key to view the first page of shortcuts, release and press again to page through more.
+renderer:
+  rectangleSelect:
+    intersect: Intersection Select
+    contain: Contain Select
+
 plugins:
   welcome:
     title: Welcome to the Plugin System

app/src/locales/id.yml

@@ -946,6 +946,11 @@ settings:
       Saat diaktifkan, petunjuk tombol pintas yang cocok akan ditampilkan saat menekan tombol modifikasi (Ctrl/Alt/Shift/Win di Windows atau ⌘/⌥/⇧/⌃ di Mac).
       Tahan tombol modifikasi untuk melihat halaman pertama tombol pintas, lepaskan dan tekan lagi untuk melihat lebih banyak.
 
+renderer:
+  rectangleSelect:
+    intersect: Seleksi Tabrakan
+    contain: Seleksi Penuh
+
 effects:
   CircleChangeRadiusEffect:
     title: Efek Perubahan Radius Lingkaran

app/src/locales/zh_CN.yml

@@ -962,6 +962,11 @@ settings:
       按住修饰键不放可查看第一页快捷键，松开后再次按下可翻页查看更多。
 
 
+renderer:
+  rectangleSelect:
+    intersect: 碰撞框选
+    contain: 完全覆盖框选
+
 effects:
   CircleChangeRadiusEffect:
     title: 圆形变换半径效果

app/src/locales/zh_TW.yml

@@ -962,6 +962,11 @@ settings:
       按住修飾鍵不放可查看第一頁快捷鍵，鬆開後再次按下可翻頁查看更多。
 
 
+renderer:
+  rectangleSelect:
+    intersect: 碰撞框選
+    contain: 完全覆蓋框選
+
 effects:
   CircleChangeRadiusEffect:
     title: 圓形變換半徑效果

app/src/locales/zh_TWC.yml

@@ -969,6 +969,12 @@ settings:
     description: |
       開啟後，當按下 Ctrl/Alt/Shift/Win（Windows）或 ⌘/⌥/⇧/⌃（Mac）等修飾鍵時，會顯示匹配的快捷鍵提示。
       按住修飾鍵不放可查看第一頁快捷鍵，鬆開後再次按下可翻頁查看更多。
+
+renderer:
+  rectangleSelect:
+    intersect: 碰撞框選
+    contain: 完全覆蓋框選
+
 effects:
   CircleChangeRadiusEffect:
     title: 圆形变换半径效果