feat: dynamic menus #60

alexzhang1030 · 2022-04-27T07:41:09Z

Description

What is the purpose of this pull request?

Bug fix
New Feature
Documentation update
Other

Before submitting the PR, please make sure you do the following

Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).

About This PR

close #51

目前已实现动态读取 routes/modules/xx.ts 中的路由，并自动渲染视图

feat

interface RouteMeta {
    // 标题
    title: string
    // 是否是菜单
    isMenu: boolean
    // icon
    icon?: FunctionalComponent
    // 是否是单独的菜单
    single?: boolean
    // 排序索引
    sort: number
  }

以上内容需要放在 route 定义的 meta 字段中，例如

{
    path: 'fullscreen',
    name: 'fullscreen',
    component: () => import('~/views/demo/fullscreen/index.vue'),
    meta: {
      title: '全屏',
      isMenu: true,
      sort: 8
    }
}

根据 children 自动适配多级菜单，若子 route 有 children，那么说明该路由是一个父级菜单，可展开。
理论上可以自动适配任意多级的菜单

实现原理

读取 routes，并 v-for 渲染，因此一定要配置好 meta 字段中的内容

关于文档，将会在 merge 后去改

自动适配多级菜单的原理就是写了两个组件，一个是单独的，一个是含有子级的，根据其 children 递归渲染

修改较多，review 可能比较困难，辛苦大家了！

RainyNight9

有2个问题：
1、// 排序索引 sort: number 是可选参数吗？注意顺序
2、整体代码有没有 lint ？

alexzhang1030 · 2022-04-27T13:50:35Z

有2个问题： 1、// 排序索引 sort: number 是可选参数吗？注意顺序 2、整体代码有没有 lint ？

sort 这个我改一下🥲
代码 lint 过了

alexzhang1030 · 2022-04-27T13:50:59Z

目前 route.meta 的参数肯定是不足的，看后期还要加什么

netlify · 2022-04-27T14:00:55Z

✅ Deploy Preview for vue-hbs-admin ready!

Name	Link
🔨 Latest commit	`2f7d5d3`
🔍 Latest deploy log	https://app.netlify.com/sites/vue-hbs-admin/deploys/62697b6559dcb100085812d8
😎 Deploy Preview	https://deploy-preview-60--vue-hbs-admin.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

alexzhang1030 · 2022-04-27T14:01:12Z

修改好了！

Hongbusi · 2022-04-27T14:01:45Z

src/layouts/default/sidebar/components/Menu.vue

-    v-model:selectedKeys="selectedKeys"
-    mode="inline"
-    theme="dark"
+    v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark"
    :inline-collapsed="getCollapsed"
  >


属性较长建议换行，可读性要高一些

看到类似这个，所以我怀疑有没有 lint ..

非常尴尬的是，我确实运行了 pnpm lint -- --fix

lint 有时候并不能很好的去规避所有的格式问题，只能起到一个辅助的作用。一般我都更喜欢自己手动去做这件事，所以之前没有在 lint 的时候，加上 --fix。

Hongbusi · 2022-04-27T14:03:36Z

src/layouts/default/sidebar/components/Menu.vue

+  const currentRoute = router.currentRoute.value
+  selectedKeys.value = getCurrentMenuRecursive(menus.value, currentRoute.path)
+  openKeys.value = selectedKeys.value
+}


setSelectMenuWhenRefreshPage 这个命名更像是解决了什么问题。可以简单点，比如：setupCurrentMenu ?

这个函数主要是解决刷新后当前路由对应左侧菜单的

我无法分辨哪个名字更好，你觉得呢

其实我也不咋会起名字。不过要我感觉，setupCurrentMenu 这个加上你上面写的注释就很完美了

Hongbusi · 2022-04-27T14:06:01Z

src/router/routes/modules/about.ts

@@ -1,11 +1,21 @@
 import type { RouteRecordRaw } from 'vue-router'
+import {
+  SettingOutlined
+} from '@ant-design/icons-vue'


单个不必折行

Hongbusi · 2022-04-27T14:16:03Z

types/routes.d.ts

+    single?: boolean
+    // 排序索引
+    sort: number
+  }


single 字段是不是可有可无？如果可无，是否可以舍去？

当存在 3 级导航，isMenu 还好用吗，或者说用一个 type: 1 ｜ 2 ｜ 3 替代会好一些？

sort 字段我感觉只有一级导航才需要，使用动态导入顺序不可控。

single 的作用是标识一下当前的一级菜单就是一个 menuItem，没有二级菜单

这个我要思考一下，可能当时没考虑到三级菜单我要实验一下

我有用 sort 递归排序所有的路由，所以 sort 的顺序我觉得还是有用的

需要说明一下 2 的 isMenu 是 false 的话，是不会展示的，主要是这个作用，不过倒是提醒了我三级导航的问题 @Hongbusi

果然，我没有完全读懂哈哈

Hongbusi · 2022-04-27T14:38:16Z

单词拼错了哈哈

alexzhang1030 · 2022-04-27T14:40:31Z

单词拼错了哈哈

打的有点快🥲

alexzhang1030 · 2022-04-27T16:30:26Z

@Hongbusi @RainyNight9 重大更新，目前已适配多级菜单，理论上 99 菜单都会自动适配

alexzhang1030 · 2022-04-27T17:14:38Z

将 isMenu 更改为 isHide，更加语义化，同时该选项非必填，加了筛选 isHide 的路由的函数

Hongbusi · 2022-04-28T00:54:02Z

文档记得更新一下哦～

alexzhang1030 · 2022-04-28T02:42:58Z

文档记得更新一下哦～

等合并后😊

alexzhang1030 added 3 commits April 27, 2022 15:31

feat: add route type and dynamic route rule

84102d3

feat: modify current route rules

c0d750d

feat: dynamic route core

36dac54

alexzhang1030 requested review from Hongbusi, RainyNight9, architectMymine, chenfan0, jersonwei, jp-liu, kongcodes, likui628, xiuxiuyifan, zgsgs and a team April 27, 2022 07:41

alexzhang1030 changed the title ~~feat: dynamic routes~~ feat: dynamic menus Apr 27, 2022

zgsgs approved these changes Apr 27, 2022 •

edited

Loading

View reviewed changes

architectMymine removed their request for review April 27, 2022 13:20

RainyNight9 reviewed Apr 27, 2022

View reviewed changes

style: modify routes.d.ts

80cb133

fix: fix route store name error

0c2d173

Hongbusi reviewed Apr 27, 2022

View reviewed changes

style: code style lint

8b2777d

style: rename setSelectMenuWhenRefreshPage function

30bf006

feat: dynamic menu support multilevel menu

f04c8a4

style: lint style

fc42260

feat: dynamic menu support isHide condition

2f7d5d3

Hongbusi approved these changes Apr 28, 2022

View reviewed changes

Hongbusi merged commit 768e7f8 into developer-plus:master Apr 28, 2022

alexzhang1030 deleted the dynamic_routes branch April 28, 2022 10:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: dynamic menus #60

feat: dynamic menus #60

alexzhang1030 commented Apr 27, 2022 •

edited

Loading

RainyNight9 left a comment

alexzhang1030 commented Apr 27, 2022

alexzhang1030 commented Apr 27, 2022

netlify bot commented Apr 27, 2022 •

edited

Loading

alexzhang1030 commented Apr 27, 2022

Hongbusi Apr 27, 2022

RainyNight9 Apr 27, 2022

alexzhang1030 Apr 27, 2022

Hongbusi Apr 27, 2022

alexzhang1030 Apr 27, 2022

Hongbusi Apr 27, 2022

alexzhang1030 Apr 27, 2022

alexzhang1030 Apr 27, 2022

Hongbusi Apr 27, 2022

alexzhang1030 Apr 27, 2022

Hongbusi Apr 27, 2022

Hongbusi Apr 27, 2022

alexzhang1030 Apr 27, 2022

alexzhang1030 Apr 27, 2022

Hongbusi Apr 27, 2022

Hongbusi commented Apr 27, 2022

alexzhang1030 commented Apr 27, 2022

alexzhang1030 commented Apr 27, 2022

alexzhang1030 commented Apr 27, 2022 •

edited

Loading

Hongbusi commented Apr 28, 2022

alexzhang1030 commented Apr 28, 2022

feat: dynamic menus #60

feat: dynamic menus #60

Conversation

alexzhang1030 commented Apr 27, 2022 • edited Loading

Description

What is the purpose of this pull request?

Before submitting the PR, please make sure you do the following

About This PR

feat

实现原理

RainyNight9 left a comment

Choose a reason for hiding this comment

alexzhang1030 commented Apr 27, 2022

alexzhang1030 commented Apr 27, 2022

netlify bot commented Apr 27, 2022 • edited Loading

✅ Deploy Preview for vue-hbs-admin ready!

alexzhang1030 commented Apr 27, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hongbusi commented Apr 27, 2022

alexzhang1030 commented Apr 27, 2022

alexzhang1030 commented Apr 27, 2022

alexzhang1030 commented Apr 27, 2022 • edited Loading

Hongbusi commented Apr 28, 2022

alexzhang1030 commented Apr 28, 2022

alexzhang1030 commented Apr 27, 2022 •

edited

Loading

netlify bot commented Apr 27, 2022 •

edited

Loading

alexzhang1030 commented Apr 27, 2022 •

edited

Loading