From a8782c7f1cedccaa4f27b06301a116b384b11d4f Mon Sep 17 00:00:00 2001
From: shenghang <shenghang@apache.org>
Date: Tue, 7 Jan 2025 22:25:39 +0800
Subject: [PATCH] init

---
 seatunnel-ui/src/assets/styles/default.scss    |  4 +---
 seatunnel-ui/src/locales/en_US/index.ts        |  5 ++++-
 seatunnel-ui/src/locales/zh_CN/index.ts        |  5 ++++-
 .../synchronization-definition/dag/index.tsx   | 18 ++++++++++++++++--
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/seatunnel-ui/src/assets/styles/default.scss b/seatunnel-ui/src/assets/styles/default.scss
index 2dd19ee5f..ccfefb061 100644
--- a/seatunnel-ui/src/assets/styles/default.scss
+++ b/seatunnel-ui/src/assets/styles/default.scss
@@ -15,8 +15,6 @@
  * limitations under the License.
  */
 
- $box-node-content: "Double click to configure. After configure, Connect each node ends to another.";
-
 .x6-graph-scroller {
   overflow: hidden !important;
   &:hover {
@@ -35,7 +33,7 @@
 .x6-widget-selection-box.x6-widget-selection-box-node:hover {
   position: relative;
   &::before {
-    content: $box-node-content;
+    content: var(--node-config-hint);
     width: 210px;
     height: 40px;
     background: #eeecec;
diff --git a/seatunnel-ui/src/locales/en_US/index.ts b/seatunnel-ui/src/locales/en_US/index.ts
index 2e81a36de..245ad35b1 100644
--- a/seatunnel-ui/src/locales/en_US/index.ts
+++ b/seatunnel-ui/src/locales/en_US/index.ts
@@ -46,5 +46,8 @@ export default {
   theme,
   project,
   hook,
-  transforms
+  transforms,
+  dag: {
+    nodeConfigHint: 'Double click to configure. After configure, Connect each node ends to another.'
+  }
 }
diff --git a/seatunnel-ui/src/locales/zh_CN/index.ts b/seatunnel-ui/src/locales/zh_CN/index.ts
index a46f901bd..e96819c0b 100644
--- a/seatunnel-ui/src/locales/zh_CN/index.ts
+++ b/seatunnel-ui/src/locales/zh_CN/index.ts
@@ -46,5 +46,8 @@ export default {
   theme,
   project,
   hook,
-  transforms
+  transforms,
+  dag: {
+    nodeConfigHint: '双击节点进行配置。配置完成后，连接每个节点的端点到其他节点。'
+  }
 }
diff --git a/seatunnel-ui/src/views/task/synchronization-definition/dag/index.tsx b/seatunnel-ui/src/views/task/synchronization-definition/dag/index.tsx
index 0ee3b7d20..563d0f6ad 100644
--- a/seatunnel-ui/src/views/task/synchronization-definition/dag/index.tsx
+++ b/seatunnel-ui/src/views/task/synchronization-definition/dag/index.tsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { defineComponent, ref, onMounted } from 'vue'
+import { defineComponent, ref, onMounted, watch } from 'vue'
 import { DagSidebar } from './sidebar'
 import { DagCanvas } from './canvas'
 import { DagToolbar } from './toolbar'
@@ -32,7 +32,7 @@ const SynchronizationDefinitionDag = defineComponent({
       type: '',
       name: ''
     }
-    const { t } = useI18n()
+    const { t, locale } = useI18n()
     const { state, detailInit, onDelete, onSave } = useDagDetail()
     const handelDragstart = (type: any, name: any) => {
       tempNode.type = type
@@ -85,8 +85,22 @@ const SynchronizationDefinitionDag = defineComponent({
           result.nodesAndEdges.edges
         )
       }
+      document.documentElement.style.setProperty(
+        '--node-config-hint',
+        `"${t('dag.nodeConfigHint')}"`
+      )
     })
 
+    watch(
+      () => locale.value,
+      () => {
+        document.documentElement.style.setProperty(
+          '--node-config-hint',
+          `"${t('dag.nodeConfigHint')}"`
+        )
+      }
+    )
+
     return () => (
       <NSpin show={state.loading}>
         <NSpace vertical>