fix: remove route-context-provider in user used

examples/index.tsx

 import 'ant-design-vue/dist/antd.less';
-import { createApp, defineComponent, watch, ref, watchEffect, onMounted } from 'vue';
+import { createApp, defineComponent, watch, ref, watchEffect, onMounted, reactive } from 'vue';
 import { createRouter, createWebHashHistory, useRoute, useRouter, RouteRecord } from 'vue-router';
 import { Avatar } from 'ant-design-vue';
 import { UserOutlined } from '@ant-design/icons-vue';
 import { default as ProLayout } from '../src/';
-import { createRouteContext } from '../src/RouteContext';
-import { globalState, globalState as state } from './state';
+import { globalState as state } from './state';
 
 import registerIcons from './_util/icons';
 
@@ -26,12 +25,11 @@ const BasicLayout = defineComponent({
   setup() {
     const { getRoutes } = useRouter();
     const route = useRoute();
-    const [RouteContextProvider] = createRouteContext();
 
     const menuData = getMenuData(getRoutes());
-    state.menuData = menuData;
 
     const updateSelectedMenu = () => {
+      console.log('updateSelectedMenu', state.selectedKeys);
       const matched = route.matched.concat().map(item => item.path);
       matched.shift();
       state.selectedKeys = matched;
@@ -63,16 +61,19 @@ const BasicLayout = defineComponent({
     });
 
     return () => (
-      <RouteContextProvider value={state}>
       <ProLayout
-          i18n={(key: string) => key}
         layout={state.layout}
         navTheme={state.navTheme}
+        i18n={(key: string) => key}
+        isMobile={state.isMobile}
+        fixSiderbar={state.fixSiderbar}
+        fixedHeader={state.fixedHeader}
         contentWidth={'Fixed'}
         primaryColor={'#1890ff'}
         contentStyle={{ minHeight: '300px' }}
         siderWidth={state.sideWidth}
         splitMenus={state.splitMenus}
+        menuData={menuData}
         collapsed={state.collapsed}
         openKeys={state.openKeys}
         selectedKeys={state.selectedKeys}
@@ -97,7 +98,6 @@ const BasicLayout = defineComponent({
       >
         <router-view />
       </ProLayout>
-      </RouteContextProvider>
     );
   },
 });

src/BasicLayout.tsx

-import { computed, FunctionalComponent, CSSProperties, unref } from 'vue';
+import {
+  computed,
+  FunctionalComponent,
+  CSSProperties,
+  reactive,
+  unref,
+  provide,
+  defineComponent,
+} from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import { withInstall } from 'ant-design-vue/es/_util/type';
-import { default as ProProvider, ProProviderData } from './ProProvider';
+import RouteContext, { RouteContextProps } from './RouteContext';
 import { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu';
 import { WrapContent } from './WrapContent';
 import { default as Header, HeaderViewProps } from './Header';
@@ -11,6 +19,8 @@ import { getCustomRender, PropRenderType, PropTypes } from './utils';
 import useMediaQuery from './hooks/useMediaQuery';
 import './BasicLayout.less';
 
+export const defaultPrefixCls = 'ant-pro';
+
 const defaultI18nRender = (key: string) => key;
 
 export type BasicLayoutProps = SiderMenuWrapperProps &
@@ -23,7 +33,7 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
 
     loading?: boolean;
 
-    i18n?: ProProviderData['i18n'];
+    i18n?: RouteContextProps['i18n'];
 
     defaultCollapsed?: boolean;
 
@@ -48,7 +58,8 @@ export type BasicLayoutProps = SiderMenuWrapperProps &
     disableContentMargin?: boolean;
   };
 
-const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }) => {
+const ProLayout = defineComponent({
+  setup(props: BasicLayoutProps, { emit, slots }) {
     const {
       onCollapse: propsOnCollapse,
       onOpenKeys: propsOnOpenKeys,
@@ -66,6 +77,7 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
     const isTop = computed(() => layout === 'top');
     // const isSide = computed(() => layout === 'side');
     // const isMix = computed(() => layout === 'mix');
+    const pure = computed(() => props.pure);
     // if on event and @event
     const onCollapse =
       (propsOnCollapse && propsOnCollapse) ||
@@ -143,9 +155,25 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
       matchMenuKeys,
     );
 
-  return (
-    <ProProvider i18n={defaultI18nRender}>
-      {props.pure ? (
+    const routeContext: RouteContextProps = {
+      getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
+        if (customizePrefixCls) return customizePrefixCls;
+        return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls;
+      },
+      i18n: (t: string): string => t,
+      contentWidth: 'Fluid',
+      menuData,
+      selectedKeys: props.selectedKeys || [],
+      openKeys: props.openKeys || [],
+    };
+
+    console.log('BasicLayout.routeContext', routeContext);
+    console.log('pure', pure.value);
+    provide('route-context', routeContext);
+
+    return () => (
+      <>
+        {pure.value ? (
           slots.default?.()
         ) : (
           <div class={className.value}>
@@ -173,9 +201,10 @@ const ProLayout: FunctionalComponent<BasicLayoutProps> = (props, { emit, slots }
             </Layout>
           </div>
         )}
-    </ProProvider>
+      </>
     );
-};
+  },
+});
 
 ProLayout.inheritAttrs = false;
 ProLayout.displayName = 'ProLayout';
@@ -237,10 +266,6 @@ ProLayout.props = {
   fixedHeader: PropTypes.bool,
   /* 触发响应式布局的断点 https://ant.design/components/grid-cn/#Col */
   breakpoint: PropTypes.string.def('lg'),
-  /* 关于 menu 的配置，暂时只有 locale,locale 可以关闭 menu 的自带的全球化 */
-  menu: PropTypes.object,
-  /* 传递到 antd menu 组件的 props */
-  menuProps: PropTypes.object,
   /* 使用 IconFont 的图标配置 */
   iconfontUrl: PropTypes.string,
   /* 当前 layout 的语言设置 */
@@ -250,8 +275,16 @@ ProLayout.props = {
   siderWidth: PropTypes.number.def(208),
   /* 侧边栏收起宽度 */
   collapsedWidth: PropTypes.number.def(48),
+  /* 关于 menu 的配置，暂时只有 locale,locale 可以关闭 menu 的自带的全球化 */
+  menu: PropTypes.object,
+  /* 传递到 antd menu 组件的 props */
+  menuProps: PropTypes.object,
+  /* 菜单数组 */
+  menuData: PropTypes.object,
   /* 是否分割菜单 (仅 mix 模式有效) */
   splitMenus: PropTypes.bool,
+  selectedKeys: PropTypes.array,
+  openKeys: PropTypes.array,
   /* 控制菜单的收起和展开 */
   collapsed: PropTypes.bool,
   /* 菜单的折叠收起事件 (collapsed: boolean) => void */

src/RouteContext.tsx

@@ -34,6 +34,9 @@ export interface MenuState {
 }
 
 export interface RouteContextProps extends Partial<PureSettings>, MenuState {
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
+  i18n: (t: string) => string;
+
   breadcrumb?: BreadcrumbListReturn;
   menuData?: MenuDataItem[];
   isMobile?: boolean;
@@ -49,8 +52,16 @@ export interface RouteContextProps extends Partial<PureSettings>, MenuState {
   [key: string]: any;
 }
 
-const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol();
+const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context');
+
+export const createRouteContext = () =>
+  createContext<RouteContextProps>(routeContextInjectKey, 'RouteContext.Provider');
+
+export const useRouteContext = () =>
+  useContext<RouteContextProps>('route-context' /* routeContextInjectKey */);
 
-export const createRouteContext = () => createContext<RouteContextProps>(routeContextInjectKey);
+const Provider = createRouteContext();
 
-export const useRouteContext = () => useContext<RouteContextProps>(routeContextInjectKey);
+export default {
+  Provider,
+};

src/SiderMenu/SiderMenu.tsx

-import { FunctionalComponent, computed } from 'vue';
+import { FunctionalComponent, computed, watch } from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import 'ant-design-vue/es/menu/style';
@@ -7,7 +7,6 @@ import BaseMenu, { BaseMenuProps } from './BaseMenu';
 import { WithFalse, VNodeType } from '../typings';
 import { SiderProps } from './typings';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
-import { useProProvider } from '../ProProvider';
 import { useRouteContext } from '../RouteContext';
 import { getMenuFirstChildren } from '../utils';
 import './index.less';
@@ -98,9 +97,10 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
     onOpenKeys,
     onSelect,
   } = props;
-  const { getPrefixCls } = useProProvider();
   const context = useRouteContext();
+  const { getPrefixCls } = context;
   const baseClassName = getPrefixCls('sider');
+  console.log('useRouteContext', context);
   // const isMix = computed(() => props.layout === 'mix');
   // const fixed = computed(() => context.fixSiderbar);
   const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme);
@@ -125,6 +125,12 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
   if (hasSide.value && flatMenuData.value.length === 0) {
     return null;
   }
+  watch(
+    () => context.selectedKeys,
+    n => {
+      console.log('watch:context', n);
+    },
+  );
   const defaultMenuDom = (
     <BaseMenu
       prefixCls={getPrefixCls()}

src/WrapContent.tsx

 import { FunctionalComponent, computed, toRefs, CSSProperties } from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
-import { useProProvider } from './ProProvider';
-import { ContentWidth } from './typings';
+import { useRouteContext } from './RouteContext';
+import type { ContentWidth } from './typings';
 
 const { Content } = Layout;
 
@@ -16,7 +16,7 @@ export interface WrapContentProps {
 }
 
 export const WrapContent: FunctionalComponent<WrapContentProps> = (props, { slots, attrs }) => {
-  const { getPrefixCls } = toRefs(useProProvider());
+  const { getPrefixCls } = toRefs(useRouteContext());
   const prefixCls = getPrefixCls.value('basicLayout');
   const classNames = computed(() => {
     return {

src/hooks/context/index.ts

@@ -12,21 +12,14 @@ import {
 
 export type ContextType<T> = any;
 
-export type CreateContext<T> = [
-  // UnwrapRef<T> | T,
-  DefineComponent<{}, () => VNode | VNode[] | undefined, any>,
-];
+export type CreateContext<T> = DefineComponent<{}, () => VNode | VNode[] | undefined, any>;
 
 export const createContext = <T>(
-  // context: ContextType<T>,
   contextInjectKey: InjectionKey<ContextType<T>> = Symbol(),
+  injectCompName: string = 'Context.Provider',
 ): CreateContext<T> => {
-  // const state = reactive<ContextType<T>>({
-  //   ...toRaw(context),
-  // });
-
   const ContextProvider = defineComponent({
-    name: 'ContextProvider',
+    name: injectCompName,
     props: {
       value: {
         type: Object as PropType<ContextType<T>>,
@@ -39,11 +32,11 @@ export const createContext = <T>(
     },
   });
 
-  return [ContextProvider];
+  return ContextProvider;
 };
 
 export const useContext = <T>(
-  contextInjectKey: InjectionKey<ContextType<T>> = Symbol(),
+  contextInjectKey: string | InjectionKey<ContextType<T>> = Symbol(),
   defaultValue?: ContextType<T>,
 ): T => {
   return inject(contextInjectKey, defaultValue || ({} as T));

src/index.ts

@@ -4,12 +4,12 @@ export { default as FooterToolbar } from './FooterToolbar';
 export { default as GlobalFooter } from './GlobalFooter';
 export { default as GridContent } from './GridContent';
 export { WrapContent } from './WrapContent';
-export {
-  default as ProProvider,
-  defaultProProviderProps,
-  useProProvider,
-  ProProviderData,
-} from './ProProvider';
+// export {
+//   default as ProProvider,
+//   defaultProProviderProps,
+//   useProProvider,
+//   ProProviderData,
+// } from './ProProvider';
 export { PageContainer } from './PageContainer';
 export { default as SiderMenuWrapper, SiderMenuWrapperProps } from './SiderMenu/index';
 export {