fix: 初始化

packages/icpx-workbench/src/App.vue

@@ -0,0 +1,168 @@
+<template>
+  <h-b-config-provider
+    :locale="locale"
+    :component-size="sizeType"
+    :pro-table="proTableGlobalConfig"
+    :form="formGlobalConfig"
+  >
+    <h-props-provider :datePicker="datePickerGlobalConfig">
+      <router-view />
+    </h-props-provider>
+  </h-b-config-provider>
+</template>
+<script lang="ts">
+import { computed, defineComponent, provide, watch, h, reactive, isRef, isShallow } from 'vue';
+import { useI18n, setI18nLanguage } from '@crami/locale';
+import { Icon } from '@crami/ui';
+import { defaultLang, langMap } from './locales';
+import type { ConfigProviderProps } from 'ant-design-vue/lib/config-provider';
+import { baseInfo } from '@/store/baseInfo';
+// 模块联邦：远程引入的多语言设置方法
+import { setLanguage, baseInfoHandle } from '@remote/icpx-platform/utils';
+
+// import { locales } from '@remote/icpx-platform/lang';
+
+// import { setLanguage } from '@/utils/localeUtils';
+
+export default defineComponent({
+  name: 'App',
+  setup() {
+    // 多语言
+    const { t } = useI18n();
+    const i18n = useI18n();
+
+    // 设置模块联邦引入的多语言
+    const setGlobleLang = async (lang = defaultLang) => {
+      const i18n = useI18n();
+      // 获取远程模块的多语言
+      let getLangObj = await import('@remote/icpx-platform/lang');
+      const langObj = await getLangObj.default(langMap[lang]);
+      // 合并多远程模块的多语言
+      i18n.mergeLocaleMessage(langMap[lang], langObj.default);
+    };
+
+    // 基座应用的数据处理
+    baseInfoHandle(baseInfo);
+    setLanguage(baseInfo.lang);
+    // 多语言多时区处理
+    setGlobleLang(baseInfo.lang);
+    localStorage.setItem('TIME_ZONE', baseInfo.timeZone);
+
+    const getLocal = computed(() => {
+      const local = i18n.locale;
+      if (isRef(local) || isShallow(local)) {
+        return local.value;
+      }
+      return local;
+    });
+    const locale = computed(() => {
+      return i18n.getLocaleMessage(getLocal.value).antd as ConfigProviderProps['locale'];
+    });
+
+    // 多时区
+    const datePickerGlobalConfig = reactive({
+      timeZone: baseInfo.timeZone,
+    });
+    // const sizeType = computed(() => store.getters['app/sizeType']);
+    const sizeType = computed(() => 'default');
+
+    // 全局表格配置
+    const proTableGlobalConfig = reactive({
+      toolbar: {
+        showSelectionTitle: true,
+        settingIcon: () => h(Icon, { name: 'icp-table-setting', width: '16px', height: '16px' }),
+      },
+      stripe: true,
+      showHeaderLine: true,
+      settingShowColumn: {
+        valueType: 'action',
+      },
+      headerAlign: 'start', // 排序图标跟随表头文字
+      pagination: {
+        showSizeChanger: true, // 显示可改变每页数量
+        showQuickJumper: true, //是否可以快速跳转至某页
+        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
+        // showTotal: (total, range) => `第 ${range[0]}~${range[1]} 条 / 共 ${total} 条`, // 显示总数
+        showTotal: (total, range) =>
+          t('pages.table.pagination', {
+            total,
+            number1: range[0],
+            number2: range[1],
+          }), // 显示总数
+      },
+    });
+
+    // 全局form配置,仅在dev分支使用
+    const formGlobalConfig = reactive({
+      // layout: 'vertical', // horizontal vertical
+      // title: '查询',
+      // submitter: {
+      //   actionButtonGroupPosition: 'top',
+      //   // 是否显示展开收起按钮
+      //   showAdvancedButton: true,
+      //   // 如果 showAdvancedButton 为 true，超过指定行数行默认折叠
+      //   autoAdvancedLine: 1,
+      //   // 	折叠时始终保持显示的行数
+      //   alwaysShowLines: 1,
+      // },
+      // 真对于查询全局配置
+      queryFormProps: {
+        layout: 'horizontal',
+        title: '',
+        labelCol: { style: { width: '150px' } }, //标签
+        // submitter: {
+        //   showActionButtonGroup: true,
+        //   actionButtonGroupPosition: 'bottom',
+        //   showAdvancedButton: true,
+        //   autoAdvancedLine: 2,
+        //   alwaysShowLines: 1,
+        // },
+      },
+    });
+
+    // 监听多语言的变化
+    watch(
+      () => baseInfo.lang,
+      async () => {
+        await setGlobleLang(baseInfo.lang);
+        setLanguage(baseInfo.lang);
+      },
+    );
+
+    // 监听时区的变化的变化
+    watch(
+      () => baseInfo.timeZone,
+      () => {
+        datePickerGlobalConfig.timeZone = baseInfo.timeZone;
+        localStorage.setItem('TIME_ZONE', baseInfo.timeZone);
+      },
+    );
+
+    return {
+      t,
+      i18n,
+      locale,
+      sizeType,
+      proTableGlobalConfig,
+      formGlobalConfig,
+      datePickerGlobalConfig,
+      baseInfo,
+      setGlobleLang,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>