fix: enhance localization handling and improve field refresh logic in data and index components

Author: wxg0103

ui/src/workflow/common/NodeCascader.vue

@@ -23,10 +23,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, inject } from 'vue'
+import { computed, inject, onMounted, ref } from 'vue'
 import { iconComponent } from '../icons/utils'
 import { t } from '@/locales'
 import { WorkflowMode } from '@/enums/application'
+
 const props = defineProps<{
   nodeModel: any
   modelValue: Array<any>
@@ -108,7 +109,7 @@ const getOptionsValue = () => {
         )
       : get_up_node_field_list(false, true).filter((v: any) => v.children && v.children.length > 0)
   } else {
-    const result = props.global
+    return props.global
       ? props.nodeModel
           .get_up_node_field_list(false, true)
           .filter(
@@ -118,7 +119,6 @@ const getOptionsValue = () => {
       : props.nodeModel
           .get_up_node_field_list(false, true)
           .filter((v: any) => v.children && v.children.length > 0)
-    return result
   }
 }
 const initOptions = () => {

ui/src/workflow/common/data.ts

@@ -1,6 +1,7 @@
 import { WorkflowKind } from './../../enums/application'
 import { WorkflowType, WorkflowMode } from '@/enums/application'
-import { t } from '@/locales'
+import i18n, { t } from '@/locales'
+import { watch } from 'vue'
 import call$ from 'dingtalk-jsapi/api/biz/telephone/call'
 
 export const startNode = {
@@ -1190,9 +1191,9 @@ function defineLocaleGetter(target: any, prop: string, key: string, fallback?: s
   Object.defineProperty(target, prop, {
     configurable: true,
     enumerable: true,
-    get: () => overrideValue ?? t(key, fallback as any),
+    get: () => overrideValue || t(key, fallback as any),
     set: (value) => {
-      overrideValue = value
+      overrideValue = value || undefined
     },
   })
 }
@@ -1207,7 +1208,15 @@ function bindLocale(target: any, path: string, key: string, fallback?: string) {
 }
 
 function bindFieldLabels(fields: Array<any> | undefined, keys: string[]) {
-  fields?.forEach((field, index) => defineLocaleGetter(field, 'label', keys[index]))
+  const refresh = () => {
+    fields?.forEach((field, index) => {
+      if (keys[index]) {
+        field.label = t(keys[index])
+      }
+    })
+  }
+  refresh()
+  watch(i18n.global.locale, refresh)
 }
 
 function bindNodeLocale(node: any, textKey: string, labelKey: string, stepNameKey = labelKey) {

ui/src/workflow/nodes/start-node/index.vue

@@ -48,36 +48,29 @@
 import { cloneDeep, set } from 'lodash'
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import { copyClick } from '@/utils/clipboard'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { t } from '@/locales'
+import { useI18n } from 'vue-i18n'
 const props = defineProps<{ nodeModel: any }>()
+const { locale } = useI18n({ useScope: 'global' })
 
 const showicon = ref(false)
-const globalFields = [
+const getGlobalFields = () => [
   { label: t('workflow.nodes.startNode.currentTime'), value: 'time' },
-  {
-    label: t('views.application.form.historyRecord.label'),
-    value: 'history_context',
-  },
+  { label: t('views.application.form.historyRecord.label'), value: 'history_context' },
   { label: t('aiChat.chatId'), value: 'chat_id' },
-  {
-    label: t('aiChat.chatUserId'),
-    value: 'chat_user_id',
-  },
-  {
-    label: t('aiChat.chatUserType'),
-    value: 'chat_user_type',
-  },
-  {
-    label: t('aiChat.chatUserGroup'),
-    value: 'chat_user_group',
-  },
-  {
-    label: t('views.chatUser.title'),
-    value: 'chat_user',
-  },
+  { label: t('aiChat.chatUserId'), value: 'chat_user_id' },
+  { label: t('aiChat.chatUserType'), value: 'chat_user_type' },
+  { label: t('aiChat.chatUserGroup'), value: 'chat_user_group' },
+  { label: t('views.chatUser.title'), value: 'chat_user' },
 ]
 
+const refreshStartQuestionField = () => {
+  const questionFields = [{ label: t('workflow.nodes.startNode.question'), value: 'question' }]
+  set(props.nodeModel.properties.config, 'fields', questionFields)
+  set(props.nodeModel.properties, 'fields', questionFields)
+}
+
 const getRefreshFieldList = () => {
   const user_input_fields = props.nodeModel.graphModel.nodes
     .filter((v: any) => v.id === 'base-node')
@@ -98,7 +91,7 @@ const getRefreshFieldList = () => {
 }
 const refreshFieldList = () => {
   const refreshFieldList = getRefreshFieldList()
-  set(props.nodeModel.properties.config, 'globalFields', [...globalFields, ...refreshFieldList])
+  set(props.nodeModel.properties.config, 'globalFields', [...getGlobalFields(), ...refreshFieldList])
 }
 
 const refreshChatFieldList = () => {
@@ -179,6 +172,15 @@ const refreshLongTermConfig = () => {
 props.nodeModel.graphModel.eventCenter.on('refreshLongTermConfig', refreshLongTermConfig)
 
 onMounted(() => {
+  refreshStartQuestionField()
+  refreshChatFieldList()
+  refreshFieldList()
+  refreshFileUploadConfig()
+  refreshLongTermConfig()
+})
+
+watch(locale, () => {
+  refreshStartQuestionField()
   refreshChatFieldList()
   refreshFieldList()
   refreshFileUploadConfig()