micro-app/packages/icpx-file/src/App.vue

<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>