@oinone/kunlun-vue-admin-layout 6.2.0

package/src/component/debug/view/service/impl/runtime-context/DebugRuntimeMaskService.ts

@@ -0,0 +1,30 @@
+import { RuntimeContext, RuntimeContextServiceToken } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult } from '../../../../typing';
+import { DebugUtils } from '../../../debug-utils';
+import { DebugRuntimeContextService, DebugRuntimeContextServiceToken } from '../../DebugRuntimeContextService';
+
+@SPI.Service(DebugRuntimeContextServiceToken, { priority: 60 })
+export class DebugRuntimeMaskService implements DebugRuntimeContextService {
+  public analysis(runtimeContext: RuntimeContext): DebugErrorAnalysisResult | undefined {
+    if (!runtimeContext.viewAction) {
+      return undefined;
+    }
+    try {
+      const maskTemplate = SPI.RawInstantiate(RuntimeContextServiceToken)?.seekViewMask(
+        runtimeContext.viewAction,
+        DebugUtils.getPageParameters()?.module
+      );
+      if (!maskTemplate) {
+        return undefined;
+      }
+      return {
+        title: '运行时Mask',
+        message: '运行时上下文Mask',
+        stackInfo: DebugUtils.toJSONString(maskTemplate)
+      };
+    } catch (e) {
+      console.error('Runtime mask analysis error.', e);
+    }
+  }
+}

package/src/component/debug/view/service/impl/runtime-context/DebugRuntimeTemplateService.ts

@@ -0,0 +1,16 @@
+import { RuntimeContext } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult } from '../../../../typing';
+import { DebugUtils } from '../../../debug-utils';
+import { DebugRuntimeContextService, DebugRuntimeContextServiceToken } from '../../DebugRuntimeContextService';
+
+@SPI.Service(DebugRuntimeContextServiceToken, { priority: 70 })
+export class DebugRuntimeTemplateService implements DebugRuntimeContextService {
+  public analysis(runtimeContext: RuntimeContext): DebugErrorAnalysisResult | undefined {
+    return {
+      title: '运行时渲染模板',
+      message: '合并Layout和DSL后的Template',
+      stackInfo: DebugUtils.toJSONString(runtimeContext.viewTemplate)
+    };
+  }
+}

package/src/component/debug/view/service/impl/runtime-context/DebugRuntimeViewService.ts

@@ -0,0 +1,16 @@
+import { RuntimeContext } from '@oinone/kunlun-engine';
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult } from '../../../../typing';
+import { DebugUtils } from '../../../debug-utils';
+import { DebugRuntimeContextService, DebugRuntimeContextServiceToken } from '../../DebugRuntimeContextService';
+
+@SPI.Service(DebugRuntimeContextServiceToken, { priority: 30 })
+export class DebugRuntimeViewService implements DebugRuntimeContextService {
+  public analysis(runtimeContext: RuntimeContext): DebugErrorAnalysisResult | undefined {
+    return {
+      title: '运行时视图',
+      message: '运行时上下文视图',
+      stackInfo: DebugUtils.toJSONString(runtimeContext.view)
+    };
+  }
+}

package/src/component/debug/view/service/impl/stack-info/DebugBizStackService.ts

@@ -0,0 +1,19 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult, DebugResponseError } from '../../../../typing';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'bizStack', priority: 0 })
+export class DebugBizStackService extends DebugDefaultStackInfoService implements DebugStackInfoService {
+  public analysis(error: DebugResponseError): DebugErrorAnalysisResult | undefined {
+    const stackInfo = this.getStackInfo(error);
+    if (!stackInfo) {
+      return undefined;
+    }
+    return {
+      title: '业务与Oinone堆栈',
+      message: error.message,
+      stackInfo: this.beautifyJSON(stackInfo)
+    };
+  }
+}

package/src/component/debug/view/service/impl/stack-info/DebugConfigureService.ts

@@ -0,0 +1,6 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'configure', priority: 0 })
+export class DebugConfigureService extends DebugDefaultStackInfoService implements DebugStackInfoService {}

package/src/component/debug/view/service/impl/stack-info/DebugDefaultStackInfoService.ts

@@ -0,0 +1,62 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { isArray } from 'lodash-es';
+import { DebugErrorAnalysisResult, DebugResponseError } from '../../../../typing';
+import { DebugUtils } from '../../../debug-utils';
+import {
+  DebugDefaultStackInfoServiceType,
+  DebugStackInfoService,
+  DebugStackInfoServiceToken,
+  DebugUnhandledExceptionTitle
+} from '../../DebugStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: DebugDefaultStackInfoServiceType, priority: 0 })
+export class DebugDefaultStackInfoService implements DebugStackInfoService {
+  public analysis(error: DebugResponseError, errors: DebugResponseError[]): DebugErrorAnalysisResult | undefined {
+    const stackInfo = this.getStackInfo(error);
+    if (!stackInfo) {
+      return undefined;
+    }
+    return {
+      title: error.message || DebugUnhandledExceptionTitle,
+      message: error.message,
+      stackInfo: this.beautifyJSON(stackInfo)
+    };
+  }
+
+  public parseStackInfo(error: DebugResponseError, errors: DebugResponseError[]): Record<string, unknown> | undefined {
+    const stackInfo = this.getStackInfo(error);
+    if (!stackInfo) {
+      return undefined;
+    }
+    try {
+      return JSON.parse(stackInfo);
+    } catch (e) {
+      console.error('Invalid json data.', e);
+    }
+  }
+
+  protected getStackInfo(error: DebugResponseError): string | undefined {
+    const stackInfo = error.extensions?.stackTraceMsg;
+    if (!stackInfo || stackInfo === 'null') {
+      return undefined;
+    }
+    return stackInfo;
+  }
+
+  protected beautifyJSON(stackInfo: unknown): string {
+    if (typeof stackInfo === 'string') {
+      try {
+        const jsonData = JSON.parse(stackInfo);
+        if (isArray(jsonData)) {
+          if (jsonData.every((v) => typeof v === 'string')) {
+            return jsonData.join('\n');
+          }
+        }
+        return DebugUtils.toJSONString(jsonData);
+      } catch (e) {
+        return stackInfo;
+      }
+    }
+    return DebugUtils.toJSONString(stackInfo);
+  }
+}

package/src/component/debug/view/service/impl/stack-info/DebugExceptionStackService.ts

@@ -0,0 +1,19 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult, DebugResponseError } from '../../../../typing';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'exception', priority: 0 })
+export class DebugExceptionStackService extends DebugDefaultStackInfoService implements DebugStackInfoService {
+  public analysis(error: DebugResponseError): DebugErrorAnalysisResult | undefined {
+    const stackInfo = this.getStackInfo(error);
+    if (!stackInfo) {
+      return undefined;
+    }
+    return {
+      title: '全部堆栈',
+      message: error.message,
+      stackInfo: this.beautifyJSON(stackInfo)
+    };
+  }
+}

package/src/component/debug/view/service/impl/stack-info/DebugFunctionService.ts

@@ -0,0 +1,6 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'function', priority: 0 })
+export class DebugFunctionService extends DebugDefaultStackInfoService implements DebugStackInfoService {}

package/src/component/debug/view/service/impl/stack-info/DebugHalfBizStackService.ts

@@ -0,0 +1,19 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult, DebugResponseError } from '../../../../typing';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'halfPureBizStack', priority: 0 })
+export class DebugHalfPureBizStackService extends DebugDefaultStackInfoService implements DebugStackInfoService {
+  public analysis(error: DebugResponseError): DebugErrorAnalysisResult | undefined {
+    const stackInfo = this.getStackInfo(error);
+    if (!stackInfo) {
+      return undefined;
+    }
+    return {
+      title: '业务堆栈',
+      message: error.message,
+      stackInfo: this.beautifyJSON(stackInfo)
+    };
+  }
+}

package/src/component/debug/view/service/impl/stack-info/DebugModelService.ts

@@ -0,0 +1,6 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'model', priority: 0 })
+export class DebugModelService extends DebugDefaultStackInfoService implements DebugStackInfoService {}

package/src/component/debug/view/service/impl/stack-info/DebugPureBizStackService.ts

@@ -0,0 +1,19 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult, DebugResponseError } from '../../../../typing';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'pureBizStack', priority: 0 })
+export class DebugPureBizStackService extends DebugDefaultStackInfoService implements DebugStackInfoService {
+  public analysis(error: DebugResponseError): DebugErrorAnalysisResult | undefined {
+    const stackInfo = this.getStackInfo(error);
+    if (!stackInfo) {
+      return undefined;
+    }
+    return {
+      title: '异常抛出栈',
+      message: error.message,
+      stackInfo: this.beautifyJSON(stackInfo)
+    };
+  }
+}

package/src/component/debug/view/service/impl/stack-info/DebugStacktraceGqlRequestContextService.ts

@@ -0,0 +1,22 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult, DebugResponseError } from '../../../../typing';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'stacktraceGqlRequestContext', priority: 0 })
+export class DebugStacktraceGqlRequestContextService
+  extends DebugDefaultStackInfoService
+  implements DebugStackInfoService
+{
+  public analysis(error: DebugResponseError): DebugErrorAnalysisResult | undefined {
+    const stackInfo = this.getStackInfo(error);
+    if (!stackInfo) {
+      return undefined;
+    }
+    return {
+      title: 'GQL上下文',
+      message: error.message,
+      stackInfo: this.beautifyJSON(stackInfo)
+    };
+  }
+}

package/src/component/debug/view/service/impl/stack-info/DebugStacktraceSceneAnalysisService.ts

@@ -0,0 +1,35 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult, DebugResponseError } from '../../../../typing';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'stacktraceSceneAnalysis', priority: 0 })
+export class DebugStacktraceSceneAnalysisService extends DebugDefaultStackInfoService implements DebugStackInfoService {
+  public analysis(error: DebugResponseError, errors: DebugResponseError[]): DebugErrorAnalysisResult | undefined {
+    const stackInfo = this.getStackInfo(error);
+    if (!stackInfo) {
+      return undefined;
+    }
+    const scene = this.getTitle(error);
+    let stackInfoString: string | undefined;
+    if (scene) {
+      const jsonData = this.parseStackInfo(error, errors);
+      if (jsonData) {
+        stackInfoString = this.beautifyJSON(jsonData[scene]);
+      }
+    }
+    return {
+      title: scene || '场景追踪堆栈',
+      message: error.message,
+      stackInfo: stackInfoString || this.beautifyJSON(stackInfo)
+    };
+  }
+
+  protected getTitle(error: DebugResponseError): string | undefined {
+    const match = error.message?.match(/\[(.*)]/);
+    if (!match) {
+      return undefined;
+    }
+    return match[1];
+  }
+}

package/src/component/debug/view/service/impl/stack-info/DebugStacktraceSessionService.ts

@@ -0,0 +1,19 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { DebugErrorAnalysisResult, DebugResponseError } from '../../../../typing';
+import { DebugStackInfoService, DebugStackInfoServiceToken } from '../../DebugStackInfoService';
+import { DebugDefaultStackInfoService } from './DebugDefaultStackInfoService';
+
+@SPI.Service(DebugStackInfoServiceToken, { name: 'stacktraceSession', priority: 0 })
+export class DebugStacktraceSessionService extends DebugDefaultStackInfoService implements DebugStackInfoService {
+  public analysis(error: DebugResponseError): DebugErrorAnalysisResult | undefined {
+    const stackInfo = this.getStackInfo(error);
+    if (!stackInfo) {
+      return undefined;
+    }
+    return {
+      title: '会话上下文',
+      message: error.message,
+      stackInfo: this.beautifyJSON(stackInfo)
+    };
+  }
+}

package/src/component/debug/view/service/index.ts

@@ -0,0 +1,22 @@
+export * from './DebugStackInfoService';
+
+export * from './impl/runtime-context/DebugDefaultRuntimeContextService';
+export * from './impl/runtime-context/DebugRuntimeActionService';
+export * from './impl/runtime-context/DebugRuntimeDslService';
+export * from './impl/runtime-context/DebugRuntimeFieldService';
+export * from './impl/runtime-context/DebugRuntimeLayoutService';
+export * from './impl/runtime-context/DebugRuntimeMaskService';
+export * from './impl/runtime-context/DebugRuntimeTemplateService';
+export * from './impl/runtime-context/DebugRuntimeViewService';
+
+export * from './impl/stack-info/DebugBizStackService';
+export * from './impl/stack-info/DebugConfigureService';
+export * from './impl/stack-info/DebugDefaultStackInfoService';
+export * from './impl/stack-info/DebugExceptionStackService';
+export * from './impl/stack-info/DebugFunctionService';
+export * from './impl/stack-info/DebugHalfBizStackService';
+export * from './impl/stack-info/DebugModelService';
+export * from './impl/stack-info/DebugPureBizStackService';
+export * from './impl/stack-info/DebugStacktraceGqlRequestContextService';
+export * from './impl/stack-info/DebugStacktraceSceneAnalysisService';
+export * from './impl/stack-info/DebugStacktraceSessionService';

package/src/component/debug/view/storage.ts

@@ -0,0 +1,35 @@
+import { RuntimeContext, RuntimeViewAction, ViewActionQueryParameter } from '@oinone/kunlun-engine';
+import { StandardEventManager } from '@oinone/kunlun-shared';
+import { DebugRequestInfo } from '../typing';
+
+enum EventKeys {
+  'update' = 'update'
+}
+
+type UpdateEventHandler = (storage: DebugInfoStorage) => void;
+
+export class DebugInfoStorage extends StandardEventManager<typeof EventKeys> {
+  public static INSTANCE = new DebugInfoStorage();
+
+  public pageParameters?: ViewActionQueryParameter;
+
+  public viewAction?: RuntimeViewAction;
+
+  public requestInfo?: DebugRequestInfo;
+
+  public responseData?: string;
+
+  public runtimeContext?: RuntimeContext;
+
+  public forceUpdate(): void {
+    this.notifyHandler(EventKeys.update);
+  }
+
+  public onUpdate(fn: UpdateEventHandler) {
+    this.on(EventKeys.update, fn);
+  }
+
+  public clearOnUpdate(fn: UpdateEventHandler) {
+    this.clearOn(EventKeys.update, fn);
+  }
+}

package/src/component/debug/view/useDebugRequestInfo.ts

@@ -0,0 +1,17 @@
+import { computed } from 'vue';
+import { DebugRequestInfo } from '../typing';
+
+export function useDebugRequestInfo(props: { requestInfo?: DebugRequestInfo }) {
+  const isShowResponseInfo = computed(() => {
+    return !!props.requestInfo?.allDuration;
+  });
+
+  const isShowError = computed(() => {
+    return isShowResponseInfo.value && !!props.requestInfo?.errorCode;
+  });
+
+  return {
+    isShowResponseInfo,
+    isShowError
+  };
+}

package/src/component/divider/Divider.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="divider-container">
+    <a-divider type="vertical" style="height: 16px; margin-top: 2px" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Divider } from 'ant-design-vue';
+
+export default defineComponent({
+  components: {
+    ADivider: Divider
+  }
+});
+</script>

package/src/component/divider/DividerWidget.ts

@@ -0,0 +1,12 @@
+import { SPI } from '@oinone/kunlun-spi';
+import { BaseMaskWidget, MaskWidget } from '../../basic';
+import DividerComponent from './Divider.vue';
+
+@SPI.ClassFactory(MaskWidget.Token({ widget: 'divider' }))
+export class DividerWidget extends BaseMaskWidget {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DividerComponent);
+    return this;
+  }
+}

package/src/component/divider/index.ts

@@ -0,0 +1 @@
+export * from './DividerWidget';

package/src/component/index.ts

@@ -0,0 +1,15 @@
+import './style/index.scss';
+
+export * from './app-switcher';
+export * from './breadcrumb';
+export * from './debug';
+export * from './divider';
+export * from './language';
+export * from './layout';
+export * from './menu';
+export * from './multi-tabs';
+export * from './notification';
+export * from './order-statistic';
+export * from './partner-switcher';
+export * from './quick-search';
+export * from './user';

package/src/component/language/DefaultLanguage.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-dropdown :trigger="['click']" placement="bottom">
+    <div v-if="currentLanguage" class="k-layout-lang">
+      <span>
+        <div
+          v-if="currentIsChinese"
+          class="country-logo"
+          :class="[currentLanguage.code]"
+          :style="{
+            'background-image': `url(${genStaticPath('country.png')})`
+          }"
+        ></div>
+        <oio-icon v-else :icon="currentLanguage.icon" size="18px" style="margin-right: 10px"></oio-icon>
+        {{ currentLanguage.name }}
+      </span>
+      <caret-down-outlined :style="{ fontSize: '12px', color: 'var(--oio-icon-color)' }" />
+    </div>
+    <template #overlay>
+      <a-menu class="k-language-dropdown">
+        <a-menu-item v-for="language of languages" :key="language.code" @click="onChange(language)">
+          <div style="display: flex; align-items: center">
+            <div
+              v-if="isChinese(language)"
+              class="country-logo"
+              :style="{
+                'background-image': `url(${genStaticPath('country.png')})`
+              }"
+              :class="[language.code]"
+            ></div>
+            <oio-icon
+              v-else
+              :icon="language.icon"
+              size="18px"
+              style="vertical-align: middle; margin-right: 6px"
+            ></oio-icon>
+            {{ language.name }}
+          </div>
+        </a-menu-item>
+      </a-menu>
+    </template>
+  </a-dropdown>
+</template>
+<script lang="ts">
+import { CaretDownOutlined } from '@ant-design/icons-vue';
+import { OioIcon } from '@oinone/kunlun-vue-ui-antd';
+import { Dropdown as ADropdown, Menu as AMenu, MenuItem as AMenuItem } from 'ant-design-vue';
+import { computed, defineComponent, PropType } from 'vue';
+import { RuntimeLanguage, ZH_CN_CODE } from '@oinone/kunlun-vue-ui-common';
+
+export default defineComponent({
+  name: 'DefaultLanguage',
+  inheritAttrs: false,
+  components: {
+    ADropdown,
+    AMenu,
+    AMenuItem,
+    CaretDownOutlined,
+    OioIcon
+  },
+  props: {
+    languages: {
+      type: Array as PropType<RuntimeLanguage[]>
+    },
+    currentLanguage: {
+      type: Object as PropType<RuntimeLanguage>
+    },
+    onChange: {
+      type: Function
+    },
+    genStaticPath: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const languages = computed(() => {
+      return props.languages || [];
+    });
+
+    const currentIsChinese = computed(() => {
+      return isChinese(props.currentLanguage);
+    });
+
+    const isChinese = (language: RuntimeLanguage | undefined) => {
+      return language?.code === ZH_CN_CODE;
+    };
+
+    return {
+      languages,
+      currentIsChinese,
+
+      isChinese
+    };
+  }
+});
+</script>
+
+<style lang="scss">
+.country-logo {
+  box-shadow: 0 0 1px 0 #888;
+  background-repeat: no-repeat;
+  background-color: #dbdbdb;
+  background-position: 20px 0;
+  width: 18px;
+  height: 12px;
+  margin-right: 6px;
+}
+
+.zh-CN {
+  background-position: -1049px 0;
+}
+</style>

package/src/component/language/LanguageWidget.ts

@@ -0,0 +1,72 @@
+import { ClearCache, CurrentLanguage, ReloadMaskCallChainingParameters } from '@oinone/kunlun-engine';
+import { Matched, Router, useMatched } from '@oinone/kunlun-router';
+import { SPI } from '@oinone/kunlun-spi';
+import { useRouter } from '@oinone/kunlun-vue-router';
+import { Widget } from '@oinone/kunlun-vue-widget';
+import { EN_US_CODE, RuntimeLanguage, ZH_CN_CODE } from '@oinone/kunlun-vue-ui-common';
+import { MaskWidget } from '../../basic';
+import { TopBarService } from '../../service';
+import DefaultLanguage from './DefaultLanguage.vue';
+
+// 语言切换功能允许用户在不同的语言间进行快速切换，默认使用LanguageWidget.ts作为该功能的基类
+@SPI.ClassFactory(MaskWidget.Token({ widget: 'language' }))
+export class LanguageWidget extends MaskWidget {
+  protected router!: Router;
+
+  protected matched!: Matched;
+
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(DefaultLanguage);
+    return this;
+  }
+
+  @Widget.Reactive()
+  protected languages: RuntimeLanguage[] | undefined;
+
+  @Widget.Reactive()
+  protected currentLanguage: RuntimeLanguage | undefined;
+
+  @Widget.Method()
+  protected onChange(value: RuntimeLanguage) {
+    this.currentLanguage = value;
+    TopBarService.activeLang(value.id).then(() => {
+      ClearCache.clear();
+      window.location.reload();
+    });
+  }
+
+  protected async initLanguages(): Promise<void> {
+    if (!this.languages) {
+      const languages = await TopBarService.queryLanguageList();
+      this.languages = languages.map((v) => {
+        if (!v.icon) {
+          if (v.code === EN_US_CODE) {
+            v.icon = 'oinone-yingguo';
+          } else {
+            v.icon = 'oinone-zhongguo';
+          }
+        }
+        return v;
+      });
+    }
+  }
+
+  protected initCurrentLanguage(code: string) {
+    if (!this.currentLanguage || this.currentLanguage.code !== code) {
+      this.currentLanguage = this.languages!.find((v) => v.code === code);
+    }
+  }
+
+  protected reloadMaskProcess(reloadParameters: ReloadMaskCallChainingParameters) {
+    return this.initLanguages().then(async () => {
+      this.initCurrentLanguage(await CurrentLanguage.getCode());
+    });
+  }
+
+  protected $$mounted() {
+    super.$$mounted();
+    this.router = useRouter().router;
+    this.matched = useMatched().matched;
+  }
+}

package/src/component/language/index.ts

@@ -0,0 +1 @@
+export * from './LanguageWidget';

package/src/component/layout/BaseMaskLayoutWidget.ts

@@ -0,0 +1,12 @@
+import { BaseMaskWidget, BaseMaskWidgetProps } from '../../basic';
+import MaskBlock from './MaskBlock.vue';
+
+export class BaseMaskLayoutWidget<
+  Props extends BaseMaskWidgetProps = BaseMaskWidgetProps
+> extends BaseMaskWidget<Props> {
+  public initialize(props) {
+    super.initialize(props);
+    this.setComponent(MaskBlock);
+    return this;
+  }
+}