From d96719dddf9dc406601d1af7f59b33af0c626e64 Mon Sep 17 00:00:00 2001
From: likunming <likunming@163.com>
Date: Tue, 23 Apr 2024 17:32:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E4=BC=98=E5=8C=96=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/platform/components/form/WForm.vue    |  32 +++-
 .../src/platform/components/grid/WGrid.vue    | 172 ++++++++++--------
 .../platform/components/toolbar/WToolbar.vue  |  76 +++++---
 .../src/platform/i18n/messages.json           |   2 +
 .../src/platform/i18n/messages_tw_CN.json     |   2 +
 .../src/platform/i18n/messages_zh_CN.json     |   2 +
 6 files changed, 186 insertions(+), 100 deletions(-)

diff --git a/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue b/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
index 13862ca1..238ac981 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/WForm.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <q-form ref="formRef" :autofocus="false" :greedy="true" v-bind="attrs">
-      <div class="grid" :class="formLayoutComputed">
-        <template v-for="(field, index) in fields_ as any" :key="String(index)">
+      <div v-if="fieldsComputed.value.length > 0" class="grid" :class="formLayoutComputed">
+        <template v-for="(field, index) in fieldsComputed.value as any" :key="String(index)">
           <component
             :is="fiedType[field.type] || field.type"
             v-if="field.name"
@@ -42,9 +42,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, computed, toRaw, defineProps, useAttrs, getCurrentInstance } from 'vue';
+import { ref, reactive, watch, computed, toRaw, defineProps, useAttrs, getCurrentInstance, nextTick, onUpdated } from 'vue';
 import { useQuasar } from 'quasar';
-import { VueTools, Tools } from '@/platform';
+import { VueTools, Tools, eventBus } from '@/platform';
 import { PageStatusEnum } from '@/platform/components/utils';
 
 const $q = useQuasar();
@@ -67,6 +67,7 @@ const props = defineProps({
   },
 });
 
+const localFlag = ref(false);
 const formRef = ref();
 const formStatus = ref(PageStatusEnum.新增);
 const formModel: any = {};
@@ -130,6 +131,29 @@ watch(
   },
 );
 
+// eventBus.on('localeChanged', (local) => {
+//   nextTick(() => {
+//     console.info('props.fields====', props.fields);
+//   });
+// });
+
+const fieldsComputed = computed(() => {
+  localFlag.value;
+  return fields_;
+});
+onUpdated(() => {
+  nextTick(() => {
+    localFlag.value = !localFlag.value;
+    fields_ = ref([...props.fields]);
+    for (const field of fields_.value as any) {
+      if (field.name) {
+        formModel[field.name] = defaultValueHandler(field);
+        formFields[field.name] = field;
+      }
+    }
+  });
+});
+
 for (const field of fields_.value as any) {
   if (field.name) {
     formModel[field.name] = defaultValueHandler(field);
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
index d8418416..7e9397cc 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
@@ -6,9 +6,9 @@
       v-model:pagination="state.pagination"
       flat
       binary-state-sort
-      :no-data-label="state.noDataLabel"
+      :no-data-label="$t('tip.noData')"
       :hide-no-data="true"
-      :loading-label="state.loadingLabel"
+      :loading-label="$t('tip.dataLoading')"
       v-bind="attrs"
       :selection="selectionComputed"
       separator="cell"
@@ -27,15 +27,15 @@
       <template #top="scope">
         <q-resize-observer debounce="100" @resize="onResize" />
         <div class="col">
-          <w-form ref="queryFormRef" v-bind="props.queryFormAttrs" :fields="table.queryFormFields" :cols-num="queryFormColsNum"></w-form>
+          <w-form ref="queryFormRef" v-bind="props.queryFormAttrs" :fields="queryFormFieldsComputed" :cols-num="queryFormColsNum"></w-form>
           <div
             v-if="title || buttons_.length > 0 || configButton || table.queryFormFields.length > 0"
             class="flex flex-nowrap items-end"
             :class="table.queryFormFields.length > 0 ? 'pt-2.5' : ''"
           >
-            <div class="flex-none">{{ title }}</div>
+            <div class="flex-none">{{ $t(title) }}</div>
             <div class="flex-1">
-              <w-toolbar :dense="denseToolbarComputed" v-bind="toolbarConfigure" :buttons="buttons_" :grid="instance"></w-toolbar>
+              <w-toolbar :dense="denseToolbarComputed" v-bind="toolbarConfigure" :buttons="toolbarButtonsComputed" :grid="instance"></w-toolbar>
             </div>
             <div v-if="configButton" class="flex-none pl-1">
               <q-btn round dense :size="denseToolbarComputed ? '13px' : undefined" icon="manage_accounts" unelevated outline>
@@ -74,7 +74,7 @@
             </q-th>
           </q-tr>
           <q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed" class="noDataTr">
-            <q-td :colspan="noDataTrColspanComputed" align="center" valian="middle"><q-icon size="2em" :name="IconEnum.提示" />{{ state.noDataLabel }}</q-td>
+            <q-td :colspan="noDataTrColspanComputed" align="center" valian="middle"><q-icon size="2em" :name="IconEnum.提示" />{{ $t('tip.noData') }}</q-td>
           </q-tr>
         </template>
         <template v-else>
@@ -99,7 +99,7 @@
             </template>
           </q-tr>
           <q-tr v-if="table.rows.length === 0" :style="noDataTrHeightComputed" class="noDataTr">
-            <q-td :colspan="noDataTrColspanComputed" align="center" valian="middle"><q-icon size="2em" :name="IconEnum.提示" />{{ state.noDataLabel }}</q-td>
+            <q-td :colspan="noDataTrColspanComputed" align="center" valian="middle"><q-icon size="2em" :name="IconEnum.提示" />{{ $t('tip.noData') }}</q-td>
           </q-tr>
         </template>
       </template>
@@ -221,12 +221,7 @@
         </div>
       </template> -->
     </q-table>
-    <w-dialog
-      ref="dialogRef"
-      v-bind="editor.dialog"
-      :title="dialog.dialogTitle"
-      :buttons="editor.dialog?.buttons ? [...editor.dialog.buttons, ...dialog.dialogButtons] : dialog.dialogButtons"
-    >
+    <w-dialog ref="dialogRef" v-bind="editor.dialog" :title="dialog.dialogTitle" :buttons="dialogButtonsComputed">
       <w-form ref="dialogFormRef" v-bind="editor.form" class="pt-1.5 px-1.5"></w-form>
     </w-dialog>
     <w-drawer ref="drawerRef" :title="$t('action.view')" v-bind="viewer.drawer">
@@ -238,9 +233,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted, onUpdated, nextTick, toRaw, useAttrs, getCurrentInstance, provide, watchEffect, watch } from 'vue';
+import { ref, reactive, computed, onMounted, nextTick, toRaw, useAttrs, getCurrentInstance, provide, watchEffect, watch, onUpdated } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { axios, Environment, NotifyManager, TreeBuilder, VueTools, Tools } from '@/platform';
+import { axios, Environment, NotifyManager, TreeBuilder, VueTools, Tools, eventBus } from '@/platform';
 import { useQuasar, getCssVar, exportFile } from 'quasar';
 import { IconEnum } from '@/platform/enums';
 import { arrayToMap, OperatorTypeEnum, isEmpty, PageStatusEnum } from '@/platform/components/utils';
@@ -427,6 +422,7 @@ const dialogFormRef = ref();
 const infoRef = ref();
 const tableColumns = ref(props.columns);
 const tableColumnsMap = ref(arrayToMap('name', tableColumns.value));
+const localFlag = ref(false);
 const columnStyle = (item: any) => {
   let style = '';
   if (Tools.hasOwnProperty(item, 'style')) {
@@ -481,6 +477,27 @@ watch(
     handlerMoreRowColumnTitle();
   },
 );
+eventBus.on('onLocaleChanged', (local) => {
+  nextTick(() => {
+    table.columns = extractTableColumns.value;
+    handlerQueryFormShowField();
+    localFlag.value = !localFlag.value;
+    // 重构内置按钮 label
+    Object.keys(buttonObj).forEach((btn) => {
+      if (typeof buttonObj[btn] === 'object' && buttonObj[btn].labelI18nKey) {
+        buttonObj[btn].label = t(buttonObj[btn].labelI18nKey);
+      }
+    });
+    handleToolbarActions();
+    // 重构内置新增编辑窗口中的按钮 label
+    dialog.dialogButtons[0].label = t(dialog.dialogButtons[0].labelI18nKey);
+  });
+});
+// onUpdated(() => {
+//   nextTick(() => {
+//     console.info('onupdated.buttonObj', buttonObj);
+//   });
+// });
 const queryFormFieldsMap = arrayToMap('name', props.queryFormFields);
 const rowKey_ = '_rowKey_'; // 行数据中前端附加的UUID字段名
 const url = {
@@ -502,6 +519,15 @@ const titleScopeHandler = (column: any, scope: any) => {
   return undefined;
 };
 
+const queryFormFieldsComputed = computed(() => {
+  localFlag.value;
+  return table.queryFormFields;
+});
+const toolbarButtonsComputed = computed(() => {
+  localFlag.value;
+  return buttons_;
+});
+
 const table = reactive({
   tickedField: props.tickedField,
   selectedField: props.selectedField,
@@ -525,37 +551,13 @@ const table = reactive({
 });
 provide('table', table);
 
-const expandIcon = computed(() => {
+const expandIconComputed = computed(() => {
   return table.treeExpand ? 'expand_less' : 'expand_more';
 });
-const expandLabel = computed(() => {
-  return table.treeExpand ? '全部收起' : '全部展开';
+const expandLabelI18nKeyComputed = computed(() => {
+  return table.treeExpand ? 'action.expandUp' : 'action.expandDown';
 });
 
-/**
- * 内置按钮枚举
- */
-enum ButtonEnum {
-  query = 'query', //查询
-  moreQuery = 'moreQuery', //更多查询
-  reset = 'reset', //重置
-  refresh = 'refresh', //刷新
-  add = 'add', //新增
-  edit = 'edit', //编辑
-  clone = 'clone', //复制
-  remove = 'remove', //删除
-  removeAll = 'removeAll', //删除全部
-  view = 'view', //查看
-  export = 'export', //导出
-  addTop = 'addTop', // 新增顶级节点
-  addChild = 'addChild', // 新增子节点
-  expand = 'expand', // 展开?收起 所有节点
-  resetDefaultValues = 'resetDefaultValues', // 恢复默认值
-}
-
-/**
- * 内置按钮
- */
 const remove = () => {
   const ids = <any>[];
   if (getTickedRowsComputed.value && getTickedRowsComputed.value.length > 0) {
@@ -597,19 +599,21 @@ const resetDefaultValues = () => {
       NotifyManager.error(t('tip.operationFailed'));
     });
 };
-const buttonObj = {
+const buttonObj = reactive({
   separator: 'separator',
   query: {
-    name: ButtonEnum.query,
+    name: 'query',
     icon: IconEnum.查询,
+    labelI18nKey: 'action.query',
     label: t('action.query'),
     click: () => {
       refresh();
     },
   },
   moreQuery: {
-    name: ButtonEnum.moreQuery,
+    name: 'moreQuery',
     icon: IconEnum.更多查询,
+    labelI18nKey: 'action.moreQueryConditions',
     label: t('action.moreQueryConditions'),
     enableIf: () => {
       if (props.queryFormFields.length <= table.queryFormFields.length && !table.moreQueryStatus) {
@@ -624,24 +628,27 @@ const buttonObj = {
     },
   },
   reset: {
-    name: ButtonEnum.reset,
+    name: 'reset',
     icon: IconEnum.重置,
+    labelI18nKey: 'action.reset',
     label: t('action.reset'),
     click: () => {
       queryFormRef.value.reset();
     },
   },
   refresh: {
-    name: ButtonEnum.refresh,
+    name: 'refresh',
     icon: IconEnum.刷新,
+    labelI18nKey: 'action.refresh',
     label: t('action.refresh'),
     click: () => {
       refresh();
     },
   },
   add: {
-    name: ButtonEnum.add,
+    name: 'add',
     icon: IconEnum.新增,
+    labelI18nKey: 'action.addNew',
     label: t('action.addNew'),
     click: () => {
       dialog.dialogTitle = t('action.addNew');
@@ -653,8 +660,9 @@ const buttonObj = {
     },
   },
   edit: {
-    name: ButtonEnum.edit,
+    name: 'edit',
     icon: IconEnum.编辑,
+    labelI18nKey: 'action.edit',
     label: t('action.edit'),
     enableIf: (args) => {
       if (args.selected) {
@@ -677,8 +685,9 @@ const buttonObj = {
     },
   },
   clone: {
-    name: ButtonEnum.clone,
+    name: 'clone',
     icon: 'content_copy',
+    labelI18nKey: 'action.copy',
     label: t('action.copy'),
     enableIf: (args) => {
       if (args.selected) {
@@ -700,8 +709,9 @@ const buttonObj = {
     },
   },
   remove: {
-    name: ButtonEnum.remove,
+    name: 'remove',
     icon: IconEnum.删除,
+    labelI18nKey: 'action.remove',
     label: t('action.remove'),
     enableIf: (args) => {
       if (args.ticked) {
@@ -727,8 +737,9 @@ const buttonObj = {
     },
   },
   view: {
-    name: ButtonEnum.view,
+    name: 'view',
     icon: IconEnum.查看,
+    labelI18nKey: 'action.view',
     label: t('action.view'),
     enableIf: (args) => {
       if (args.selected) {
@@ -741,8 +752,9 @@ const buttonObj = {
     },
   },
   export: {
-    name: ButtonEnum.export,
+    name: 'export',
     icon: 'file_download',
+    labelI18nKey: 'action.export',
     label: t('action.export'),
     click: () => {
       const content = [tableColumns.value.map((col) => wrapCsvValue(col.label))]
@@ -767,8 +779,9 @@ const buttonObj = {
     },
   },
   addTop: {
-    name: ButtonEnum.addTop,
+    name: 'addTop',
     icon: IconEnum.新增,
+    labelI18nKey: 'action.addTop',
     label: t('action.addTop'),
     click: () => {
       dialog.dialogTitle = t('action.addTop');
@@ -780,8 +793,9 @@ const buttonObj = {
     },
   },
   addChild: {
-    name: ButtonEnum.addChild,
+    name: 'addChild',
     icon: 'playlist_add',
+    labelI18nKey: 'action.addChild',
     label: t('action.addChild'),
     enableIf: (args) => {
       if (args.selected) {
@@ -799,17 +813,19 @@ const buttonObj = {
     },
   },
   expand: {
-    name: ButtonEnum.expand,
-    icon: expandIcon,
-    label: expandLabel,
+    name: 'expand',
+    icon: expandIconComputed,
+    labelI18nKey: expandLabelI18nKeyComputed,
+    label: t(expandLabelI18nKeyComputed.value),
     click: () => {
       expandFun(table.rows, table.treeExpand);
       table.treeExpand = !table.treeExpand;
     },
   },
   resetDefaultValues: {
-    name: ButtonEnum.resetDefaultValues,
+    name: 'resetDefaultValues',
     icon: 'bi-copy',
+    labelI18nKey: 'action.resetDefaultValues',
     label: t('action.resetDefaultValues'),
     click: (tips: boolean = true) => {
       if (!tips) {
@@ -826,7 +842,7 @@ const buttonObj = {
       }
     },
   },
-};
+});
 const expandFun = (arr, treeExpand) => {
   arr.forEach((item) => {
     if (props.tree && item.children && item.children.length > 0) {
@@ -857,18 +873,22 @@ const handleChildrenBtn = (arr) => {
   }
   return tempArr;
 };
-props.toolbarActions.forEach((btn: any, index) => {
-  if (typeof btn === 'string' && buttonObj[btn]) {
-    buttons_.push(buttonObj[btn]);
-  } else if (Array.isArray(btn) && btn.length > 0) {
-    buttons_.push(handleChildrenBtn(btn));
-  } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
-    // 继承内置按钮
-    buttons_.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
-  } else {
-    buttons_.push(btn);
-  }
-});
+const handleToolbarActions = () => {
+  buttons_.splice(0, buttons_.length);
+  props.toolbarActions.forEach((btn: any, index) => {
+    if (typeof btn === 'string' && buttonObj[btn]) {
+      buttons_.push(buttonObj[btn]);
+    } else if (Array.isArray(btn) && btn.length > 0) {
+      buttons_.push(handleChildrenBtn(btn));
+    } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
+      // 继承内置按钮
+      buttons_.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
+    } else {
+      buttons_.push(btn);
+    }
+  });
+};
+handleToolbarActions();
 
 const denseToolbarComputed = computed(() => {
   if (table.denseToolbar) {
@@ -988,6 +1008,7 @@ const dialog = reactive({
   dialogButtons: [
     {
       icon: IconEnum.提交,
+      labelI18nKey: 'action.submit',
       label: t('action.submit'),
       loading: false,
       click: () => {
@@ -996,6 +1017,12 @@ const dialog = reactive({
     },
   ],
 });
+const dialogButtonsComputed = computed(() => {
+  if (props.editor?.dialog?.buttons) {
+    return [...props.editor.dialog.buttons, ...dialog.dialogButtons];
+  }
+  return dialog.dialogButtons;
+});
 
 const viewInfo = reactive({
   infoArray: <any>[],
@@ -1792,7 +1819,6 @@ const stickyHeaderColumn = (time = 500) => {
   }
   tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableBodyPadding', bodyPadding);
   tableRef.value.$el.getElementsByTagName('table')[0].style.setProperty('--tableBodyHeight', (denseBodyComputed.value ? 24 : 48) + 'px');
-
   if (denseBottomComputed.value && (!Tools.hasOwnProperty(attrs, 'hide-bottom') || attrs['hide-bottom'] === false)) {
     if (tableRef.value.$el.getElementsByClassName('q-table__bottom').length > 0) {
       tableRef.value.$el.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 33 + 'px');
diff --git a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
index 277af4ce..6f403e54 100644
--- a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
@@ -5,7 +5,7 @@
       :class="'flex ' + (align === 'left' ? 'justify-start' : align === 'center' ? 'justify-center' : 'justify-end') + ' gap-x-[' + props.xGap + 'px]'"
     >
       <!-- buttons -->
-      <template v-for="(btn, index) in baseActions" :key="'button_' + index">
+      <template v-for="(btn, index) in baseActionsComputed" :key="'button_' + index">
         <q-separator v-if="typeof btn.data === 'string' && btn.data === 'separator'" vertical class="class-action-item" />
         <q-btn-dropdown
           v-else-if="Array.isArray(btn.data) && btn.data.length > 0"
@@ -106,7 +106,7 @@
 
       <!-- moreActions -->
       <q-btn-dropdown
-        v-if="moreActions && moreActions.length > 0"
+        v-if="moreActionsComputed && moreActionsComputed.length > 0"
         unelevated
         outline
         label=""
@@ -121,7 +121,7 @@
           </div>
         </template>
         <q-list>
-          <template v-for="(childrenBtn, childrenIndex) in moreActions" :key="'moreAction_' + childrenIndex">
+          <template v-for="(childrenBtn, childrenIndex) in moreActionsComputed" :key="'moreAction_' + childrenIndex">
             <q-separator v-if="typeof childrenBtn.data === 'string' && childrenBtn.data === 'separator'" />
             <ChildrenBtn
               v-else-if="Array.isArray(childrenBtn.data) && childrenBtn.data.length > 0"
@@ -161,7 +161,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, computed, nextTick } from 'vue';
+import { ref, reactive, computed, nextTick, onUpdated } from 'vue';
+import { eventBus } from '@/platform';
 import { Tools } from '@/platform/utils';
 import ChildrenBtn from './ChildrenBtn.vue';
 
@@ -185,6 +186,7 @@ const props = defineProps({
   },
 });
 const containerRef = ref();
+const localFlag = ref(false);
 
 // 将所有按钮根据 name 提取到 JSON 对象中
 const buttonsJson = {};
@@ -263,24 +265,29 @@ const handleChildrenSeparator = (arr) => {
   }
   return tempArr;
 };
-for (let i = 0; i < props.buttons.length; i++) {
-  const btn: any = props.buttons[i];
-  if (i === 0 && typeof btn === 'string' && btn === 'separator') {
-    // 按钮数组第一个元素为分割符时直接跳过
-    continue;
-  }
-  if (typeof btn === 'string' && btn === 'separator' && buttons_.length > 0 && buttons_[buttons_.length - 1].data === btn) {
-    // 连续的分割符直接跳过，避免出现重复的无意义分割符
-    continue;
-  }
-  if (Array.isArray(btn) && btn.length > 0) {
-    buttons_.push({ data: handleChildrenSeparator(btn) });
-  } else if (typeof btn === 'string' && btn === 'separator') {
-    buttons_.push({ data: btn });
-  } else {
-    buttons_.push({ data: buttonsJson[btn.name] });
+const handleButtons = () => {
+  buttons_.splice(0, buttons_.length);
+  for (let i = 0; i < props.buttons.length; i++) {
+    const btn: any = props.buttons[i];
+    if (i === 0 && typeof btn === 'string' && btn === 'separator') {
+      // 按钮数组第一个元素为分割符时直接跳过
+      continue;
+    }
+    if (typeof btn === 'string' && btn === 'separator' && buttons_.length > 0 && buttons_[buttons_.length - 1].data === btn) {
+      // 连续的分割符直接跳过，避免出现重复的无意义分割符
+      continue;
+    }
+    if (Array.isArray(btn) && btn.length > 0) {
+      buttons_.push({ data: handleChildrenSeparator(btn) });
+    } else if (typeof btn === 'string' && btn === 'separator') {
+      buttons_.push({ data: btn });
+    } else {
+      buttons_.push({ data: buttonsJson[btn.name] });
+    }
   }
-}
+};
+handleButtons();
+
 const baseActions = ref(buttons_);
 const moreActions: any = ref([]);
 const isActionWidthInitializedRef = ref(false);
@@ -289,7 +296,6 @@ const onResize = (size) => {
   if (Tools.isUndefinedOrNull(containerRef.value)) {
     return;
   }
-
   if (!isActionWidthInitializedRef.value) {
     const nodes = containerRef.value.getElementsByClassName('class-action-item');
     for (let i = 0; i < buttons_.length; i++) {
@@ -304,7 +310,6 @@ const onResize = (size) => {
   let availableWidth = size.width;
   let width = 0;
   let index = 0;
-
   for (; index < length; index++) {
     if (width + buttons_[index].width > availableWidth) {
       availableWidth -= moreActionWidth;
@@ -331,8 +336,33 @@ const onResize = (size) => {
 
   baseActions.value = _baseActions;
   moreActions.value = _moreActions;
+  localFlag.value = !localFlag.value;
 };
 
+const baseActionsComputed = computed(() => {
+  localFlag.value;
+  return baseActions.value;
+});
+const moreActionsComputed = computed(() => {
+  localFlag.value;
+  return moreActions.value;
+});
+
+// onUpdated(() => {
+//   nextTick(() => {
+//     console.info('buttons=====', props.buttons);
+//   });
+// });
+eventBus.on('onLocaleChanged', () => {
+  nextTick(() => {
+    extractButton(props.buttons);
+    handleButtons();
+    baseActions.value = buttons_;
+    localFlag.value = !localFlag.value;
+    isActionWidthInitializedRef.value = false;
+  });
+});
+
 const loadingComputed = computed(() => {
   return function (btn) {
     if (btn.loadingIf && typeof btn.loadingIf === 'function' && btn.loadingIf(selectedComputed.value, tickedComputed.value, props.grid)) {
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages.json b/io.sc.platform.core.frontend/src/platform/i18n/messages.json
index 8142f311..712545b8 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages.json
@@ -141,6 +141,8 @@
   "action.export": "Export",
   "action.export.failed": "Export Failed",
   "action.submit": "Submit",
+  "action.expandUp": "Expand Up",
+  "action.expandDown": "Expand Down",
 
   "tip.noData": "No Data",
   "tip.dataLoading": "Data Loading",
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json b/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
index 9b65c973..a08ea741 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
@@ -141,6 +141,8 @@
   "action.export": "導出",
   "action.export.failed": "導出失敗",
   "action.submit": "提交",
+  "action.expandUp": "全部收起",
+  "action.expandDown": "全部展开",
 
   "tip.noData": "未查找到任何數據",
   "tip.dataLoading": "數據加載中",
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json b/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
index 8b698d61..e6fdaf51 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
@@ -141,6 +141,8 @@
   "action.export": "导出",
   "action.export.failed": "导出失败",
   "action.submit": "提交",
+  "action.expandUp": "全部收起",
+  "action.expandDown": "全部展开",
 
   "tip.noData": "未查找到任何数据",
   "tip.dataLoading": "数据加载中",