fix: locale inject route-context

examples/index.tsx

@@ -3,7 +3,7 @@ import { createApp, defineComponent, watch, ref, watchEffect, onMounted } from '
 import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router';
 import { Avatar, Button, Space, Select, Switch } from 'ant-design-vue';
 import { UserOutlined } from '@ant-design/icons-vue';
-import { default as ProLayout, FooterToolbar, WaterMark } from '../src/';
+import { default as ProLayout, FooterToolbar, WaterMark, FormatMessage } from '../src/';
 import { globalState as state } from './state';
 import './demo.less';
 
@@ -18,6 +18,15 @@ import ChildPage from './demo/child/child-page';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const noop = () => {};
 
+const locales: Record<string, string> = {
+  home: '首页',
+  'views.dashboard.title': '页面1',
+};
+
+const i18n = (key: string): string => {
+  return locales[key] || key;
+};
+
 const getMenuData = (routes: RouteRecord[]) => {
   const childrenRoute = routes.find(route => route.path === '/');
   return childrenRoute?.children || [];
@@ -63,7 +72,7 @@ const BasicLayout = defineComponent({
       <ProLayout
         layout={state.layout}
         navTheme={state.navTheme}
-        i18n={(key: string) => key}
+        locale={i18n}
         isMobile={state.isMobile}
         fixSiderbar={state.fixSiderbar}
         fixedHeader={state.fixedHeader}
@@ -186,7 +195,7 @@ const routes = [
   {
     path: '/dashboard',
     name: 'dashboard',
-    meta: { title: 'dashboard', icon: 'SmileOutlined' },
+    meta: { title: 'views.dashboard.title', icon: 'SmileOutlined' },
     redirect: '/dashboard/analysis',
     component: RouteView,
     children: [

src/BasicLayout.tsx

@@ -254,7 +254,7 @@ ProLayout.props = {
   /* 使用 IconFont 的图标配置 */
   iconfontUrl: PropTypes.string,
   /* 当前 layout 的语言设置 */
-  locale: PropTypes.func.def((key: string) => key),
+  locale: PropTypes.func,
   // settings
   /* 侧边菜单宽度 */
   siderWidth: PropTypes.number.def(208),

src/PageContainer/index.tsx

@@ -6,6 +6,7 @@ import { PageHeaderProps } from './interfaces/PageHeader';
 import { AffixProps } from './interfaces/Affix';
 /* replace antd ts define end */
 import { useRouteContext, RouteContextProps } from '../RouteContext';
+import { withInstall } from 'ant-design-vue/es/_util/type';
 import 'ant-design-vue/es/affix/style';
 import Affix from 'ant-design-vue/es/affix';
 import 'ant-design-vue/es/page-header/style';
@@ -164,7 +165,7 @@ const defaultPageHeaderRender = (
   );
 };
 
-export const PageContainer: FunctionalComponent<PageContainerProps> = (props, { slots }) => {
+const PageContainer: FunctionalComponent<PageContainerProps> = (props, { slots }) => {
   const { loading, footer, affixProps, ghost, fixedHeader } = props; // toRefs(props);
   const value = useRouteContext();
   const { getPrefixCls } = value;
@@ -217,3 +218,5 @@ export const PageContainer: FunctionalComponent<PageContainerProps> = (props, {
     </div>
   );
 };
+
+export default withInstall(PageContainer);

src/SiderMenu/SiderMenu.tsx

@@ -4,7 +4,7 @@ import Layout from 'ant-design-vue/es/layout';
 import 'ant-design-vue/es/menu/style';
 import Menu from 'ant-design-vue/es/menu';
 import BaseMenu, { BaseMenuProps } from './BaseMenu';
-import { WithFalse, CustomRender } from '../typings';
+import { FormatMessage, WithFalse, CustomRender } from '../typings';
 import { SiderProps } from './typings';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { useRouteContext } from '../RouteContext';
@@ -101,7 +101,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
     onSelect,
   } = props;
   const context = useRouteContext();
-  const { getPrefixCls } = context;
+  const { getPrefixCls, i18n } = context;
   const baseClassName = getPrefixCls('sider');
   // const isMix = computed(() => props.layout === 'mix');
   // const fixed = computed(() => context.fixSiderbar);
@@ -130,6 +130,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   const defaultMenuDom = (
     <BaseMenu
       prefixCls={getPrefixCls()}
+      i18n={i18n as FormatMessage}
       theme={runtimeTheme.value === 'realDark' ? 'dark' : runtimeTheme.value}
       mode="inline"
       menuData={hasSide.value ? flatMenuData.value : context.menuData}

src/TopNavHeader/index.tsx

@@ -7,6 +7,7 @@ import {
 import BaseMenu from '../SiderMenu/BaseMenu';
 import { GlobalHeaderProps } from '../GlobalHeader';
 import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
+import { FormatMessage } from '../typings';
 
 import './index.less';
 import { useRouteContext } from '../RouteContext';
@@ -86,6 +87,7 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => {
         <div style={{ flex: 1 }} class={`${prefixCls}-menu`}>
           <BaseMenu
             prefixCls={propPrefixCls}
+            i18n={context.i18n as FormatMessage}
             theme={props.theme === 'realDark' ? 'dark' : props.theme}
             mode={props.mode}
             collapsed={props.collapsed}

src/index.ts

 export * from './RouteContext';
+export * from './typings';
 export { createContext, useContext, ContextType, CreateContext } from './hooks/context';
 export { default as FooterToolbar } from './FooterToolbar';
 export { default as GlobalFooter } from './GlobalFooter';
@@ -10,7 +11,7 @@ export { WrapContent } from './WrapContent';
 //   useProProvider,
 //   ProProviderData,
 // } from './ProProvider';
-export { PageContainer } from './PageContainer';
+export { default as PageContainer } from './PageContainer';
 export { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu/index';
 export {
   default as BaseMenu,