From 1a6dbc9485ad968b5c8bac8a1860491d935c3eb6 Mon Sep 17 00:00:00 2001
From: hardy <2545433047@qq.com>
Date: Mon, 19 Oct 2026 10:32:09 +0800
Subject: [PATCH] fix(js-processor): keep JSON braces out of Mongo filter i18n
 message

vue-i18n compiles messages at runtime and throws on `{"status": ...}` in
production builds, so the filter query dialog rendered only its mask.
Move the hint into an info tooltip beside the dialog title and keep the
$find JSON example as a code constant. Remove the unused
mock_json_placeholder message, which had the same problem.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/form/js-processor/index.tsx    | 55 +++++++++++++++----
 packages/form/src/locale/lang/en.js           |  6 +-
 packages/form/src/locale/lang/zh-CN.js        |  6 +-
 packages/form/src/locale/lang/zh-TW.js        |  6 +-
 4 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/packages/dag/src/components/form/js-processor/index.tsx b/packages/dag/src/components/form/js-processor/index.tsx
index 06c0a5b4c..6f2861efe 100644
--- a/packages/dag/src/components/form/js-processor/index.tsx
+++ b/packages/dag/src/components/form/js-processor/index.tsx
@@ -35,6 +35,15 @@ import AiCodeDialog from './AiCodeDialog.vue'
 import { useVirtualLogScroller } from './useVirtualLogScroller'
 import './style.scss'
 
+// Kept out of i18n messages: vue-i18n treats `{}` as interpolation and throws in production
+const MONGO_FILTER_EXAMPLE = `{
+  "$find": {
+    "filter": {"age": {"$gt": 10}},
+    "sort": {"age": -1},
+    "limit": 10
+  }
+}`
+
 export const JsProcessor = observer(
   defineComponent({
     props: ['value', 'disabled', 'isStandard'],
@@ -1201,25 +1210,47 @@ export const JsProcessor = observer(
                 {/* SQL / Mongo filter Query Dialog */}
                 <ElDialog
                   v-model={sqlDialogVisible.value}
-                  title={t(
-                    isMongoQuerySource.value
-                      ? 'packages_form_js_processor_mock_filter_dialog_title'
-                      : 'packages_form_js_processor_mock_sql_dialog_title',
-                  )}
                   width="80vw"
                   class="mock-sql-dialog"
                   append-to-body
                 >
                   {{
-                    default: () => (
-                      <>
+                    header: ({ titleId, titleClass }: any) => (
+                      <div class="flex align-center">
+                        <span id={titleId} class={[titleClass, 'mr-1']}>
+                          {t(
+                            isMongoQuerySource.value
+                              ? 'packages_form_js_processor_mock_filter_dialog_title'
+                              : 'packages_form_js_processor_mock_sql_dialog_title',
+                          )}
+                        </span>
                         {isMongoQuerySource.value && (
-                          <pre class="mb-2 font-color-light text-sm whitespace-pre-wrap">
-                            {t(
-                              'packages_form_js_processor_mock_filter_placeholder',
-                            )}
-                          </pre>
+                          <ElTooltip placement="bottom-start">
+                            {{
+                              default: () => (
+                                <VIcon size="14" class="color-primary">
+                                  info
+                                </VIcon>
+                              ),
+                              content: () => (
+                                <div>
+                                  <div>
+                                    {t(
+                                      'packages_form_js_processor_mock_filter_tip',
+                                    )}
+                                  </div>
+                                  <pre class="mt-1 mb-0">
+                                    {MONGO_FILTER_EXAMPLE}
+                                  </pre>
+                                </div>
+                              ),
+                            }}
+                          </ElTooltip>
                         )}
+                      </div>
+                    ),
+                    default: () => (
+                      <>
                         <VCodeEditor
                           class="border rounded-lg py-0"
                           value={sqlText.value}
diff --git a/packages/form/src/locale/lang/en.js b/packages/form/src/locale/lang/en.js
index 74d4b219e..3a5c789eb 100644
--- a/packages/form/src/locale/lang/en.js
+++ b/packages/form/src/locale/lang/en.js
@@ -170,8 +170,8 @@ export default {
   packages_form_js_processor_mock_get_sample: 'Get Sample',
   packages_form_js_processor_mock_sql_dialog_title: 'SQL Query Data',
   packages_form_js_processor_mock_filter_dialog_title: 'Filter Query Data',
-  packages_form_js_processor_mock_filter_placeholder:
-    'Enter a MongoDB filter, for example {"status": "PAID"}. To also sort or limit, wrap it in $find (at most 100 rows):\n{\n  "$find": {\n    "filter": {"age": {"$gt": 10}},\n    "sort": {"age": -1},\n    "limit": 10\n  }\n}',
+  packages_form_js_processor_mock_filter_tip:
+    'Enter a MongoDB filter object. To also sort or limit, wrap it in $find (at most 100 rows), for example:',
   packages_form_js_processor_mock_sql_preview: 'Preview',
   packages_form_js_processor_mock_sql_use_data: 'Use This Data',
   packages_form_js_processor_mock_json_valid: 'Valid',
@@ -183,8 +183,6 @@ export default {
     'Click "Test Run" to see log output',
   packages_form_js_processor_mock_items: '{val1} items',
   packages_form_js_processor_mock_run_time: '{val1}ms',
-  packages_form_js_processor_mock_json_placeholder:
-    'Enter test data in JSON array format, e.g.:\n[\n  {\n    "id": 1,\n    "name": "John"\n  }\n]',
   packages_form_js_processor_mock_js_editor: 'JS Node Editor',
   packages_form_js_processor_mock_js_code: 'JS Code',
   packages_form_js_processor_mock_log_start: 'Start executing JS code...',
diff --git a/packages/form/src/locale/lang/zh-CN.js b/packages/form/src/locale/lang/zh-CN.js
index 31172c6fb..d4ccee3ae 100644
--- a/packages/form/src/locale/lang/zh-CN.js
+++ b/packages/form/src/locale/lang/zh-CN.js
@@ -148,8 +148,8 @@ export default {
   packages_form_js_processor_mock_get_sample: '获取样本',
   packages_form_js_processor_mock_sql_dialog_title: 'SQL 查询获取数据',
   packages_form_js_processor_mock_filter_dialog_title: '条件查询获取数据',
-  packages_form_js_processor_mock_filter_placeholder:
-    '请输入 MongoDB 查询条件，例如 {"status": "PAID"}。如需排序或限制条数，请用 $find 包装（最多返回 100 条）：\n{\n  "$find": {\n    "filter": {"age": {"$gt": 10}},\n    "sort": {"age": -1},\n    "limit": 10\n  }\n}',
+  packages_form_js_processor_mock_filter_tip:
+    '请输入 MongoDB 查询条件（filter 对象）。如需排序或限制条数，请用 $find 包装（最多返回 100 条），示例：',
   packages_form_js_processor_mock_sql_preview: '执行预览',
   packages_form_js_processor_mock_sql_use_data: '使用此数据',
   packages_form_js_processor_mock_json_valid: '格式正确',
@@ -161,8 +161,6 @@ export default {
     '点击「试运行」执行代码后查看日志输出',
   packages_form_js_processor_mock_items: '{val1} 条',
   packages_form_js_processor_mock_run_time: '{val1}ms',
-  packages_form_js_processor_mock_json_placeholder:
-    '请输入 JSON 数组格式的测试数据，例如：\n[\n  {\n    "id": 1,\n    "name": "张三"\n  }\n]',
   packages_form_js_processor_mock_js_editor: 'JS 节点编辑器',
   packages_form_js_processor_mock_js_code: 'JS 代码',
   packages_form_js_processor_mock_log_start: '开始执行 JS 代码...',
diff --git a/packages/form/src/locale/lang/zh-TW.js b/packages/form/src/locale/lang/zh-TW.js
index 7d1d96d0a..8a64f4d25 100644
--- a/packages/form/src/locale/lang/zh-TW.js
+++ b/packages/form/src/locale/lang/zh-TW.js
@@ -148,8 +148,8 @@ export default {
   packages_form_js_processor_mock_get_sample: '獲取樣本',
   packages_form_js_processor_mock_sql_dialog_title: 'SQL 查詢獲取數據',
   packages_form_js_processor_mock_filter_dialog_title: '條件查詢獲取數據',
-  packages_form_js_processor_mock_filter_placeholder:
-    '請輸入 MongoDB 查詢條件，例如 {"status": "PAID"}。如需排序或限制條數，請用 $find 包裝（最多返回 100 條）：\n{\n  "$find": {\n    "filter": {"age": {"$gt": 10}},\n    "sort": {"age": -1},\n    "limit": 10\n  }\n}',
+  packages_form_js_processor_mock_filter_tip:
+    '請輸入 MongoDB 查詢條件（filter 物件）。如需排序或限制條數，請用 $find 包裝（最多返回 100 條），範例：',
   packages_form_js_processor_mock_sql_preview: '執行預覽',
   packages_form_js_processor_mock_sql_use_data: '使用此數據',
   packages_form_js_processor_mock_json_valid: '格式正確',
@@ -161,8 +161,6 @@ export default {
     '點擊「試運行」執行代碼後查看日誌輸出',
   packages_form_js_processor_mock_items: '{val1} 條',
   packages_form_js_processor_mock_run_time: '{val1}ms',
-  packages_form_js_processor_mock_json_placeholder:
-    '請輸入 JSON 陣列格式的測試數據，例如：\n[\n  {\n    "id": 1,\n    "name": "張三"\n  }\n]',
   packages_form_js_processor_mock_js_editor: 'JS 節點編輯器',
   packages_form_js_processor_mock_js_code: 'JS 代碼',
   packages_form_js_processor_mock_log_start: '開始執行 JS 代碼...',