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 (
+
+ );
+};
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 = (
+
+);
+
+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 (
-
+
{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 = (
-
-);
+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 (
-
-
{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);
+}