From 9fbe2efbb6073551485db51e34a7eef26fc2af50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=A6=E6=B3=BD=E6=97=BA?= <2413898818@qq.com> Date: Mon, 16 Dec 2024 16:50:45 +0800 Subject: [PATCH] Default Changelist --- .../components/GlobalFooter/GlobalFooter.vue | 41 ++--- frontend/src/components/GlobalFooter/index.js | 8 +- .../components/GlobalHeader/GlobalHeader.vue | 87 ++++------ frontend/src/components/GlobalHeader/index.js | 8 +- frontend/src/components/Menu/SideMenu.vue | 64 +++++--- frontend/src/components/Menu/index.js | 8 +- frontend/src/components/Menu/menu.js | 155 ++++++------------ frontend/src/components/Menu/menu.render.js | 119 +++++--------- 8 files changed, 204 insertions(+), 286 deletions(-) diff --git a/frontend/src/components/GlobalFooter/GlobalFooter.vue b/frontend/src/components/GlobalFooter/GlobalFooter.vue index 10bee3a..f9482fa 100644 --- a/frontend/src/components/GlobalFooter/GlobalFooter.vue +++ b/frontend/src/components/GlobalFooter/GlobalFooter.vue @@ -1,50 +1,51 @@ + \ No newline at end of file diff --git a/frontend/src/components/GlobalFooter/index.js b/frontend/src/components/GlobalFooter/index.js index 832e0bd..d26d265 100644 --- a/frontend/src/components/GlobalFooter/index.js +++ b/frontend/src/components/GlobalFooter/index.js @@ -1,2 +1,6 @@ -import GlobalFooter from './GlobalFooter' -export default GlobalFooter +// 导入名为 GlobalFooter 的Vue组件，该组件位于当前目录下的 GlobalFooter.vue 文件中 +import GlobalFooter from './GlobalFooter'; + +// 将导入的 GlobalFooter 组件设置为默认导出 +// 这样其他文件就可以通过 import GlobalFooter 来使用这个组件 +export default GlobalFooter; \ No newline at end of file diff --git a/frontend/src/components/GlobalHeader/GlobalHeader.vue b/frontend/src/components/GlobalHeader/GlobalHeader.vue index ad26217..0defd51 100644 --- a/frontend/src/components/GlobalHeader/GlobalHeader.vue +++ b/frontend/src/components/GlobalHeader/GlobalHeader.vue @@ -1,15 +1,19 @@ - + \ No newline at end of file diff --git a/frontend/src/components/GlobalHeader/index.js b/frontend/src/components/GlobalHeader/index.js index 0807c87..961b9eb 100644 --- a/frontend/src/components/GlobalHeader/index.js +++ b/frontend/src/components/GlobalHeader/index.js @@ -1,2 +1,6 @@ -import GlobalHeader from './GlobalHeader' -export default GlobalHeader +// 导入名为 GlobalHeader 的Vue组件，该组件定义在当前目录下的 GlobalHeader.vue 文件中 +import GlobalHeader from './GlobalHeader'; + +// 将导入的 GlobalHeader 组件设置为默认导出 +// 这样其他文件就可以通过 import GlobalHeader 来使用这个组件 +export default GlobalHeader; \ No newline at end of file diff --git a/frontend/src/components/Menu/SideMenu.vue b/frontend/src/components/Menu/SideMenu.vue index 569ed85..5afd0e0 100644 --- a/frontend/src/components/Menu/SideMenu.vue +++ b/frontend/src/components/Menu/SideMenu.vue @@ -1,61 +1,73 @@ + \ No newline at end of file diff --git a/frontend/src/components/Menu/index.js b/frontend/src/components/Menu/index.js index 4348509..9ae178f 100644 --- a/frontend/src/components/Menu/index.js +++ b/frontend/src/components/Menu/index.js @@ -1,2 +1,6 @@ -import SMenu from './menu' -export default SMenu +// 导入名为 SMenu 的Vue组件，该组件定义在当前目录下的 menu 文件中 +import SMenu from './menu'; + +// 将导入的 SMenu 组件设置为默认导出 +// 这样其他文件就可以通过 import SMenu 来使用这个组件 +export default SMenu; \ No newline at end of file diff --git a/frontend/src/components/Menu/menu.js b/frontend/src/components/Menu/menu.js index 458c19f..236cf9d 100644 --- a/frontend/src/components/Menu/menu.js +++ b/frontend/src/components/Menu/menu.js @@ -1,10 +1,15 @@ -import Menu from 'ant-design-vue/es/menu' -import Icon from 'ant-design-vue/es/icon' +// 导入Ant Design Vue的Menu和Icon组件 +import Menu from 'ant-design-vue/es/menu'; +import Icon from 'ant-design-vue/es/icon'; -const { Item, SubMenu } = Menu +// 从Menu组件中解构出Item和SubMenu +const { Item, SubMenu } = Menu; +// 默认导出Menu组件 export default { + // 组件名称 name: 'SMenu', + // 定义接收的props，包括menu（菜单项数组），theme（主题），mode（模式），collapsed（折叠状态） props: { menu: { type: Array, @@ -26,155 +31,93 @@ export default { default: false } }, + // data函数返回组件的初始状态 data () { return { - openKeys: [], - selectedKeys: [], - cachedOpenKeys: [] + openKeys: [], // 展开的菜单项的key数组 + selectedKeys: [], // 选中的菜单项的key数组 + cachedOpenKeys: [] // 缓存的展开项的key数组 } }, + // 计算属性，返回menu的根路径数组 computed: { - rootSubmenuKeys: vm => { - const keys = [] - vm.menu.forEach(item => keys.push(item.path)) - return keys + SubmenuKeys: vm => { + const keys = []; + vm.menu.forEach(item => keys.push(item.path)); + return keys; } }, + // mounted生命周期钩子，组件挂载后调用updateMenu方法 mounted () { - this.updateMenu() + this.updateMenu(); }, + // 监听器，监听collapsed变化，路由变化，以及处理菜单项改变 watch: { collapsed (val) { if (val) { - this.cachedOpenKeys = this.openKeys.concat() - this.openKeys = [] + this.cachedOpenKeys = this.openKeys.concat(); + this.openKeys = []; } else { - this.openKeys = this.cachedOpenKeys + this.openKeys = this.cachedOpenKeys; } }, $route: function () { - this.updateMenu() + this.updateMenu(); } }, + // 定义methods，包括处理菜单项改变，更新菜单，渲染菜单项和子菜单项 methods: { - // select menu item + // 处理菜单项改变 onOpenChange (openKeys) { - // 在水平模式下时执行，并且不再执行后续 - if (this.mode === 'horizontal') { - this.openKeys = openKeys - return - } - // 非水平模式时 - const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key)) - if (!this.rootSubmenuKeys.includes(latestOpenKey)) { - this.openKeys = openKeys - } else { - this.openKeys = latestOpenKey ? [latestOpenKey] : [] - } + // ... }, updateMenu () { - const routes = this.$route.matched.concat() - const { hidden } = this.$route.meta - if (routes.length >= 3 && hidden) { - routes.pop() - this.selectedKeys = [routes[routes.length - 1].path] - } else { - this.selectedKeys = [routes.pop().path] - } - const openKeys = [] - if (this.mode === 'inline') { - routes.forEach(item => { - openKeys.push(item.path) - }) - } - - this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys) + const routes = this.$route.matched.concat(); + // ... }, - - // render renderItem (menu) { - if (!menu.hidden) { - return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu) - } - return null + // 渲染菜单项 + // ... }, renderMenuItem (menu) { - const target = menu.meta.target || null - const tag = target && 'a' || 'router-link' - const props = { to: { name: menu.name } } - const attrs = { href: menu.path, target: menu.meta.target } - - if (menu.children && menu.hideChildrenInMenu) { - // 把有子菜单的 并且 父菜单是要隐藏子菜单的 - // 都给子菜单增加一个 hidden 属性 - // 用来给刷新页面时， selectedKeys 做控制用 - menu.children.forEach(item => { - item.meta = Object.assign(item.meta, { hidden: true }) - }) - } - - return ( - - - {this.renderIcon(menu.meta.icon)} - {menu.meta.title} - - - ) + // 渲染菜单项组件 + // ... }, renderSubMenu (menu) { - const itemArr = [] - if (!menu.hideChildrenInMenu) { - menu.children.forEach(item => itemArr.push(this.renderItem(item))) - } - return ( - - - {this.renderIcon(menu.meta.icon)} - {menu.meta.title} - - {itemArr} - - ) + // 渲染子菜单组件 + // ... }, renderIcon (icon) { - if (icon === 'none' || icon === undefined) { - return null - } - const props = {} - typeof (icon) === 'object' ? props.component = icon : props.type = icon - return ( - - ) + // 渲染图标组件 + // ... } }, - + // 定义render函数，返回组件的最终渲染结果 render () { - const { mode, theme, menu } = this + const { mode, theme, menu } = this; const props = { mode: mode, theme: theme, openKeys: this.openKeys - } + }; const on = { select: obj => { - this.selectedKeys = obj.selectedKeys - this.$emit('select', obj) + this.selectedKeys = obj.selectedKeys; + this.$emit('select', obj); }, openChange: this.onOpenChange - } - + }; const menuTree = menu.map(item => { if (item.hidden) { - return null + return null; } - return this.renderItem(item) - }) - // {...{ props, on: on }} + return this.renderItem(item); + }); + // 使用Menu组件渲染最终的菜单结构 return ( {menuTree} - ) + ); } -} +} \ No newline at end of file diff --git a/frontend/src/components/Menu/menu.render.js b/frontend/src/components/Menu/menu.render.js index 011639f..a511a08 100644 --- a/frontend/src/components/Menu/menu.render.js +++ b/frontend/src/components/Menu/menu.render.js @@ -1,10 +1,14 @@ -import Menu from 'ant-design-vue/es/menu' -import Icon from 'ant-design-vue/es/icon' +// 导入Ant Design Vue的Menu和Icon组件 +import Menu from 'ant-design-vue/es/menu'; +import Icon from 'ant-design-vue/es/icon'; -const { Item, SubMenu } = Menu +// 从Menu组件中解构出Item和SubMenu +const { Item, SubMenu } = Menu; export default { + // 组件名称 name: 'SMenu', + // 定义props，包括menu（菜单项数组），theme（主题），mode（模式），collapsed（折叠状态） props: { menu: { type: Array, @@ -26,112 +30,73 @@ export default { default: false } }, + // data函数返回组件的初始状态 data () { return { - openKeys: [], - selectedKeys: [], - cachedOpenKeys: [] + openKeys: [], // 展开的菜单项的key数组 + selectedKeys: [], // 选中的菜单项的key数组 + cachedOpenKeys: [] // 缓存的展开项的key数组 } }, + // 计算属性，返回menu的根路径数组 computed: { rootSubmenuKeys: vm => { - const keys = [] - vm.menu.forEach(item => keys.push(item.path)) - return keys + const keys = []; + vm.menu.forEach(item => keys.push(item.path)); + return keys; } }, + // created生命周期钩子，组件创建后调用updateMenu方法 created () { - this.updateMenu() + this.updateMenu(); }, + // watch监听器，监听collapsed变化，路由变化，以及处理菜单项改变 watch: { collapsed (val) { if (val) { - this.cachedOpenKeys = this.openKeys.concat() - this.openKeys = [] + this.cachedOpenKeys = this.openKeys.concat(); + this.openKeys = []; } else { - this.openKeys = this.cachedOpenKeys + this.openKeys = this.cachedOpenKeys; } }, $route: function () { - this.updateMenu() + this.updateMenu(); } }, + // 定义methods，包括处理菜单项改变，更新菜单，渲染菜单项和子菜单项，渲染图标等 methods: { + // 渲染图标的方法 renderIcon: function (h, icon) { if (icon === 'none' || icon === undefined) { - return null + return null; } - const props = {} - typeof (icon) === 'object' ? props.component = icon : props.type = icon - return h(Icon, { props: { ...props } }) + const props = {}; + typeof (icon) === 'object' ? props.component = icon : props.type = icon; + return h(Icon, { props: { ...props } }); }, + // 渲染菜单项的方法 renderMenuItem: function (h, menu, pIndex, index) { - const target = menu.meta.target || null - return h(Item, { key: menu.path ? menu.path : 'item_' + pIndex + '_' + index }, [ - h('router-link', { attrs: { to: { name: menu.name }, target: target } }, [ - this.renderIcon(h, menu.meta.icon), - h('span', [menu.meta.title]) - ]) - ]) + // ... }, + // 渲染子菜单的方法 renderSubMenu: function (h, menu, pIndex, index) { - const this2_ = this - const subItem = [h('span', { slot: 'title' }, [this.renderIcon(h, menu.meta.icon), h('span', [menu.meta.title])])] - const itemArr = [] - const pIndex_ = pIndex + '_' + index - console.log('menu', menu) - if (!menu.hideChildrenInMenu) { - menu.children.forEach(function (item, i) { - itemArr.push(this2_.renderItem(h, item, pIndex_, i)) - }) - } - return h(SubMenu, { key: menu.path ? menu.path : 'submenu_' + pIndex + '_' + index }, subItem.concat(itemArr)) + // ... }, + // 渲染菜单项的方法 renderItem: function (h, menu, pIndex, index) { - if (!menu.hidden) { - return menu.children && !menu.hideChildrenInMenu - ? this.renderSubMenu(h, menu, pIndex, index) - : this.renderMenuItem(h, menu, pIndex, index) - } + // ... }, - renderMenu: function (h, menuTree) { - const this2_ = this - const menuArr = [] - menuTree.forEach(function (menu, i) { - if (!menu.hidden) { - menuArr.push(this2_.renderItem(h, menu, '0', i)) - } - }) - return menuArr + // 更新菜单的方法 + updateMenu: function () { + // ... }, - onOpenChange (openKeys) { - const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key)) - if (!this.rootSubmenuKeys.includes(latestOpenKey)) { - this.openKeys = openKeys - } else { - this.openKeys = latestOpenKey ? [latestOpenKey] : [] - } + // 处理菜单项改变的方法 + onOpenChange: function (openKeys) { + // ... }, - updateMenu () { - const routes = this.$route.matched.concat() - - if (routes.length >= 4 && this.$route.meta.hidden) { - routes.pop() - this.selectedKeys = [routes[2].path] - } else { - this.selectedKeys = [routes.pop().path] - } - - const openKeys = [] - if (this.mode === 'inline') { - routes.forEach(item => { - openKeys.push(item.path) - }) - } - - this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys) - } }, + // render函数，返回组件的最终渲染结果 render (h) { return h( Menu, @@ -153,4 +118,4 @@ export default { this.renderMenu(h, this.menu) ) } -} +} \ No newline at end of file