fix: menu

gweiguo · Jan 11, 2021 · 1cb1789 · 1cb1789
1 parent 91f5f09
commit 1cb1789
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 68 deletions.
diff --git a/examples/_util/icons.ts b/examples/_util/icons.ts
@@ -0,0 +1,12 @@
+import type { App } from 'vue';
+import * as Icons from '@ant-design/icons-vue';
+
+const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'];
+
+export default (app: App) => {
+  Object.keys(Icons)
+    .filter(k => !filterIcons.includes(k))
+    .forEach(k => {
+      app.component(Icons[k].displayName, Icons[k]);
+    });
+};
diff --git a/examples/demo/form.tsx b/examples/demo/form.tsx
@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return () => <div>Form1</div>;
+  },
+});
diff --git a/examples/demo/page1.tsx b/examples/demo/page1.tsx
@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return () => <div>Page1</div>;
+  },
+});
diff --git a/examples/demo/welcome.tsx b/examples/demo/welcome.tsx
@@ -0,0 +1,7 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  setup() {
+    return () => <div>Welcome</div>;
+  },
+});
diff --git a/examples/index.html b/examples/index.html
@@ -1,10 +1,21 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link href="index.css" type="text/css" rel="stylesheet">
+    <style>
+      #app {
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
     <div id="app">
-      <div></div>
     </div>
   </body>
   <script src="index.js"></script>

diff --git a/examples/index.tsx b/examples/index.tsx
@@ -1,11 +1,17 @@
 import 'ant-design-vue/dist/antd.less';
 import { createApp, defineComponent, onMounted, watch, ref, reactive } from 'vue';
-import { RouterLink } from './mock-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import { Button, Avatar, Space, message } from 'ant-design-vue';
+import { UserOutlined } from '@ant-design/icons-vue';
 import { default as ProLayout } from '../src/';
-import { menus } from './menus';
-import * as Icon from '@ant-design/icons-vue';
 import { createRouteContext, RouteContextProps } from '../src/RouteContext';
+import { menus } from './menus';
+import registerIcons from './_util/icons';
+
+// demo pages
+import Page1 from './demo/page1';
+import Welcome from './demo/welcome';
+import FormPage from './demo/form';
 
 const BasicLayout = defineComponent({
   name: 'BasicLayout',
@@ -70,7 +76,7 @@ const BasicLayout = defineComponent({
           v-slots={{
             rightContentRender: () => (
               <div style="margin-right: 16px;">
-                <Avatar icon={<Icon.UserOutlined />} /> Sendya
+                <Avatar icon={<UserOutlined />} /> Sendya
               </div>
             ),
             menuHeaderRender: () => (
@@ -81,24 +87,7 @@ const BasicLayout = defineComponent({
             ),
           }}
         >
-          <Space>
-            <Button
-              type="primary"
-              onClick={() => {
-                message.info('clicked.');
-              }}
-            >
-              Click Me!!
-            </Button>
-            <Button
-              onClick={() => {
-                state.navTheme = state.navTheme === 'light' ? 'dark' : 'light';
-              }}
-            >
-              Switch Theme
-            </Button>
-          </Space>
-
+          <router-view />
         </ProLayout>
       </RouteContextProvider>
     );
@@ -108,20 +97,95 @@ const BasicLayout = defineComponent({
 const SimpleDemo = {
   setup() {
     return () => (
-      <div class="components">
-         <BasicLayout />
+      <div style={{ height: '100%' }}>
+        <router-view />
       </div>
     );
   },
 };
 
+const RouteView = defineComponent({
+  setup() {
+    return () => <router-view />;
+  },
+});
+
+const routes = [
+  {
+    path: '/welcome',
+    name: 'welcome',
+    meta: { title: 'Welcome' },
+    component: Welcome,
+  },
+  {
+    path: '/dashboard',
+    name: 'dashboard',
+    meta: { title: 'dashboard' },
+    component: RouteView,
+    children: [
+      {
+        path: '/dashboard/analysis',
+        name: 'analysis',
+        meta: { icon: 'SmileOutlined', title: 'Analysis' },
+        component: Page1,
+      },
+      {
+        path: '/dashboard/monitor',
+        name: 'monitor',
+        meta: { icon: 'SmileOutlined', title: 'Monitor' },
+        component: Page1,
+      },
+      {
+        path: '/dashboard/workplace',
+        name: 'workplace',
+        meta: { icon: 'SmileOutlined', title: 'Workplace' },
+        component: Page1,
+      },
+    ],
+  },
+  {
+    path: '/form',
+    name: 'form',
+    meta: { title: 'Form', icon: 'SmileOutlined' },
+    component: RouteView,
+    children: [
+      {
+        path: '/form/basic-form',
+        name: 'basic-form',
+        meta: { icon: 'SmileOutlined', title: 'Basic Form' },
+        component: FormPage,
+      },
+      {
+        path: '/form/step-form',
+        name: 'step-form',
+        meta: { icon: 'SmileOutlined', title: 'Step Form' },
+        component: FormPage,
+      },
+      {
+        path: '/form/advanced-form',
+        name: 'advance-form',
+        meta: { icon: 'SmileOutlined', title: 'Advanced Form' },
+        component: FormPage,
+      },
+    ],
+  },
+];
+
+const router = createRouter({
+  routes: [
+    {
+      path: '/',
+      name: 'index',
+      meta: { title: '' },
+      component: BasicLayout,
+      children: routes,
+    },
+  ],
+  history: createWebHashHistory(),
+});
+
 const app = createApp(SimpleDemo);
 
-const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'];
-Object.keys(Icon)
-  .filter(k => !filterIcons.includes(k))
-  .forEach(k => {
-    app.component(Icon[k].displayName, Icon[k]);
-  });
+registerIcons(app);
 
-app.use(RouterLink).use(ProLayout).mount('#app');
+app.use(router).use(ProLayout).mount('#app');
diff --git a/examples/menus.ts b/examples/menus.ts
@@ -8,22 +8,22 @@ export const menus: RouteProps[] = [
   },
   {
     path: '/dashboard',
-    name: 'Dashboard',
+    name: 'dashboard',
     meta: { icon: 'dashboard-outlined', title: 'Dashboard' },
     children: [
       {
         path: '/dashboard/analysis',
-        name: 'Analysis',
+        name: 'analysis',
         meta: { icon: 'SmileOutlined', title: 'Analysis' },
       },
       {
         path: '/dashboard/monitor',
-        name: 'Monitor',
+        name: 'monitor',
         meta: { icon: 'SmileOutlined', title: 'Monitor' },
       },
       {
         path: '/dashboard/workplace',
-        name: 'Workplace',
+        name: 'workplace',
         meta: { icon: 'SmileOutlined', title: 'Workplace' },
       },
     ],
@@ -50,4 +50,4 @@ export const menus: RouteProps[] = [
       },
     ],
   },
-]
+];
diff --git a/examples/mock-router.tsx b/examples/mock-router.tsx
@@ -1,28 +1,42 @@
 import { defineComponent, toRefs, PropType } from 'vue';
 import { withInstall } from 'ant-design-vue/es/_util/type';
 
-export const RouterLink = withInstall(defineComponent({
-  name: 'RouterLink',
-  props: {
-    href: {
-      type: String,
-      default: null,
+export const useRoute = () => {
+  console.log('path', location.pathname);
+  return {
+    matched: [],
+  };
+};
+
+export const RouterLink = withInstall(
+  defineComponent({
+    name: 'RouterLink',
+    props: {
+      href: {
+        type: String,
+        default: null,
+      },
+      to: {
+        type: [Object, String] as PropType<Record<string, any> | string>,
+        default: () => undefined,
+      },
     },
-    to: {
-      type: [Object, String] as PropType<Record<string, any> | string>,
-      default: () => undefined,
+    setup(props, { slots }) {
+      const { to, href } = toRefs(props);
+      const curHref =
+        (href.value && href.value) || typeof to.value === 'string'
+          ? to.value
+          : to.value.name || to.value.path;
+      return () => <a href={`#${curHref}`}>{slots.default?.()}</a>;
     },
-  },
-  setup(props, { slots }) {
-    const { to, href } = toRefs(props);
-    const curHref = href.value && href.value || typeof to.value === 'string' ? to.value : (to.value.name || to.value.path);
-    return () => <a href={`#${curHref}`}>{slots.default?.()}</a>;
-  },
-}));
+  }),
+);
 
-export const RouterView = withInstall(defineComponent({
-  name: 'RouterView',
-  setup(_, { slots }) {
-    return () => slots.default?.();
-  }
-}));
+export const RouterView = withInstall(
+  defineComponent({
+    name: 'RouterView',
+    setup(_, { slots }) {
+      return () => slots.default?.();
+    },
+  }),
+);
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "typescript": "~3.9.3",
     "vue": "^3.0.0-0",
     "vue-jest": "^5.0.0-alpha.3",
-    "vue-router": "^4.0.0-beta.13"
+    "vue-router": "^4.0.3"
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",

diff --git a/src/SiderMenu/SiderMenu.tsx b/src/SiderMenu/SiderMenu.tsx
@@ -117,9 +117,10 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
     };
   });
   const hasSide = computed(() => props.layout === 'mix' && context.splitMenus);
-  const flatMenuData = computed(
-    () => hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]),
-  );
+  const flatMenuData = computed(() => {
+    console.log('context.selectedKeys', context.selectedKeys);
+    return hasSide.value && getMenuFirstChildren(context.menuData, context.selectedKeys[0]);
+  });
   // call menuHeaderRender
   const headerDom = defaultRenderLogoAndTitle(props);
   const extraDom = menuExtraRender && menuExtraRender(props);

diff --git a/yarn.lock b/yarn.lock
@@ -15804,10 +15804,10 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-router@^4.0.0-beta.13:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.1.tgz#309240e50524b1e7d4e82e27f0a0fa25fe3d1d71"
-  integrity sha512-2C2nRxA2nCusgJyUpvcbd9Bnc9kACp/VLUCK4drXtgeRXHjQliZJcgjjP268vkGvvEKun9jjp8Ic1PpzUgbYKg==
+vue-router@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.3.tgz#8b26050c88b2dec7e27a88835f71046b365823ec"
+  integrity sha512-AD1OjtVPyQHTSpoRsEGfPpxRQwhAhxcacOYO3zJ3KNkYP/r09mileSp6kdMQKhZWP2cFsPR3E2M3PZguSN5/ww==
 
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"