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,41 +61,43 @@ const BasicLayout = defineComponent({
     });
 
     return () => (
-      <RouteContextProvider value={state}>
-        <ProLayout
-          i18n={(key: string) => key}
-          layout={state.layout}
-          navTheme={state.navTheme}
-          contentWidth={'Fixed'}
-          primaryColor={'#1890ff'}
-          contentStyle={{ minHeight: '300px' }}
-          siderWidth={state.sideWidth}
-          splitMenus={state.splitMenus}
-          collapsed={state.collapsed}
-          openKeys={state.openKeys}
-          selectedKeys={state.selectedKeys}
-          {...{
-            'onUpdate:collapsed': $event => (state.collapsed = $event),
-            'onUpdate:openKeys': $event => (state.openKeys = $event),
-            'onUpdate:selectedKeys': updateSelectedMenu,
-          }}
-          v-slots={{
-            rightContentRender: () => (
-              <div style={{ marginRight: '16px' }}>
-                <Avatar icon={<UserOutlined />} /> Sendya
-              </div>
-            ),
-            menuHeaderRender: () => (
-              <a>
-                <img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" />
-                {state.collapsed && state.layout !== 'mix' ? null : <h1>Pro Preview</h1>}
-              </a>
-            ),
-          }}
-        >
-          <router-view />
-        </ProLayout>
-      </RouteContextProvider>
+      <ProLayout
+        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}
+        {...{
+          'onUpdate:collapsed': $event => (state.collapsed = $event),
+          'onUpdate:openKeys': $event => (state.openKeys = $event),
+          'onUpdate:selectedKeys': updateSelectedMenu,
+        }}
+        v-slots={{
+          rightContentRender: () => (
+            <div style={{ marginRight: '16px' }}>
+              <Avatar icon={<UserOutlined />} /> Sendya
+            </div>
+          ),
+          menuHeaderRender: () => (
+            <a>
+              <img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg" />
+              {state.collapsed && state.layout !== 'mix' ? null : <h1>Pro Preview</h1>}
+            </a>
+          ),
+        }}
+      >
+        <router-view />
+      </ProLayout>
     );
   },
 });

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 {