From a604eed44d3f243db6b4713b61df827085e318ba Mon Sep 17 00:00:00 2001 From: chenos Date: Fri, 11 Dec 2020 12:34:50 +0800 Subject: [PATCH] refactor: menu component --- packages/app/.umirc.ts | 7 ++++ packages/app/src/components/menu/index.tsx | 30 ++++++++++++++ .../components/pages/AvatarDropdown/index.tsx | 33 ++++++++++++++++ .../pages/AvatarDropdown/style.less | 13 +++++++ .../components/pages/SideMenuLayout/index.tsx | 12 ++---- .../components/pages/TopMenuLayout/index.tsx | 39 ++++--------------- .../components/pages/TopMenuLayout/style.less | 19 +++++++++ 7 files changed, 112 insertions(+), 41 deletions(-) create mode 100644 packages/app/src/components/menu/index.tsx create mode 100644 packages/app/src/components/pages/AvatarDropdown/index.tsx create mode 100644 packages/app/src/components/pages/AvatarDropdown/style.less diff --git a/packages/app/.umirc.ts b/packages/app/.umirc.ts index 9befd627f..7a250f133 100644 --- a/packages/app/.umirc.ts +++ b/packages/app/.umirc.ts @@ -15,6 +15,13 @@ export default defineConfig({ 'pathRewrite': { '^/api' : '/api' }, }, }, + locale: { + default: 'zh-CN', + // antd: false, + // title: false, + baseNavigator: false, + baseSeparator: '-', + }, routes: [ { exact: false, diff --git a/packages/app/src/components/menu/index.tsx b/packages/app/src/components/menu/index.tsx new file mode 100644 index 000000000..3faeebe4b --- /dev/null +++ b/packages/app/src/components/menu/index.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { Layout, Menu, Breadcrumb } from 'antd'; +import { Link, useLocation } from 'umi'; +import Icon from '@/components/icons'; + +function pathcamp(path1: string, path2: string) { + if (path1 === path2) { + return true; + } + return path1.indexOf(`${path2}/`) === 0; +} + +export default (props: any) => { + const { items = [], ...restProps } = props; + const location = useLocation(); + let paths = items.map(item => item.path); + return ( + pathcamp(location.pathname, path)).concat(location.pathname)} + defaultOpenKeys={paths.filter(path => pathcamp(location.pathname, path)).concat(location.pathname)} + {...restProps} + > + {items.map(item => ( + + {item.title} + + ))} + + ); +}; diff --git a/packages/app/src/components/pages/AvatarDropdown/index.tsx b/packages/app/src/components/pages/AvatarDropdown/index.tsx new file mode 100644 index 000000000..a1b366fe7 --- /dev/null +++ b/packages/app/src/components/pages/AvatarDropdown/index.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Layout, Menu, Dropdown, Avatar } from 'antd'; +import './style.less'; +import { history, Link, request, useModel } from 'umi'; +import { ProfileOutlined, LogoutOutlined, UserOutlined, CodeOutlined } from '@ant-design/icons'; +import Icon from '@/components/icons'; + +const overlay = ( + + 个人资料 + + { + await request('/users:logout'); + localStorage.removeItem('NOCOBASE_TOKEN'); + (window as any).routesReload(); + history.push('/login');; + // window.location.href = '/login'; + }}> 退出登录 + +); + +export default (props: any) => { + const { initialState = {}, loading, error, refresh, setInitialState } = useModel('@@initialState'); + return ( +
+ + e.preventDefault()}> + } style={{marginRight: 5}}/> {initialState.currentUser.nickname} + + +
+ ); +}; diff --git a/packages/app/src/components/pages/AvatarDropdown/style.less b/packages/app/src/components/pages/AvatarDropdown/style.less new file mode 100644 index 000000000..cae0c75e8 --- /dev/null +++ b/packages/app/src/components/pages/AvatarDropdown/style.less @@ -0,0 +1,13 @@ +.avatar-dropdown-wrapper { + position: absolute; + right: 0; + color: rgba(255, 255, 255, 0.65); + &:hover { + color: #fff; + background-color: rgba(255, 255, 255, 0.1); + } + .dropdown-link { + padding-left: 20px; + padding-right: 20px; + } +} \ No newline at end of file diff --git a/packages/app/src/components/pages/SideMenuLayout/index.tsx b/packages/app/src/components/pages/SideMenuLayout/index.tsx index c5d9ac964..3e3cebc27 100644 --- a/packages/app/src/components/pages/SideMenuLayout/index.tsx +++ b/packages/app/src/components/pages/SideMenuLayout/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { Layout, Menu, Breadcrumb } from 'antd'; +import { Layout, Breadcrumb } from 'antd'; import { Link } from 'umi'; import './style.less'; -import Icon from '@/components/icons'; +import Menu from '@/components/menu'; export function SideMenuLayout(props: any) { const { menu = [] } = props.page; @@ -10,13 +10,7 @@ export function SideMenuLayout(props: any) { return ( - - {menu.map(item => ( - - {item.title} - - ))} - + {props.children} diff --git a/packages/app/src/components/pages/TopMenuLayout/index.tsx b/packages/app/src/components/pages/TopMenuLayout/index.tsx index c9bba5a0a..9266b42b4 100644 --- a/packages/app/src/components/pages/TopMenuLayout/index.tsx +++ b/packages/app/src/components/pages/TopMenuLayout/index.tsx @@ -1,45 +1,20 @@ import React from 'react'; -import { Layout, Menu, Dropdown, Avatar } from 'antd'; +import { Layout, Dropdown, Avatar } from 'antd'; import './style.less'; import { history, Link, request, useModel } from 'umi'; -import { UserOutlined } from '@ant-design/icons'; -import Icon from '@/components/icons'; - -const overlay = ( - - 个人资料 - - { - await request('/users:logout'); - localStorage.removeItem('NOCOBASE_TOKEN'); - (window as any).routesReload(); - history.push('/login');; - // window.location.href = '/login'; - }}>退出登录 - -); +import { UserOutlined, CodeOutlined } from '@ant-design/icons'; +import AvatarDropdown from '../AvatarDropdown'; +import Menu from '@/components/menu'; export function TopMenuLayout(props: any) { const { menu = [] } = props.page; - const { initialState = {}, loading, error, refresh, setInitialState } = useModel('@@initialState'); return ( -
- - {menu.map(item => ( - - {item.title} - - ))} +
NocoBase
+ -
- - e.preventDefault()}> - } style={{marginRight: 5}}/> {initialState.currentUser.nickname} - - -
+ {props.children} diff --git a/packages/app/src/components/pages/TopMenuLayout/style.less b/packages/app/src/components/pages/TopMenuLayout/style.less index e69de29bb..17422c276 100644 --- a/packages/app/src/components/pages/TopMenuLayout/style.less +++ b/packages/app/src/components/pages/TopMenuLayout/style.less @@ -0,0 +1,19 @@ +.logo { + // font-family: 'Michroma', sans-serif; + color: rgba(255, 255, 255, 0.8); + padding-left: 28px; + font-size: 18px; + letter-spacing: 2px; + font-weight: 300; +} + +body { + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.noco-top-menu.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover, +.noco-top-menu.ant-menu.ant-menu-dark .ant-menu-item-selected, +.noco-top-menu.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected { + background-color: rgba(255, 255, 255, 0.1); +}