From d854f242103aa54085e3b909e410ab0616f0e681 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=83=91=E5=B7=9E?= Date: Wed, 30 Jun 2021 16:55:18 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A1=B6=E9=83=A8=E5=92=8C?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=B7=E5=BC=8F;=20=E5=AE=8C=E6=95=B4?= =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=B8=AD=E5=BF=83=E5=9F=BA=E7=A1=80=E7=89=88?= =?UTF-8?q?=E6=9C=AC;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AppHeader/AppHeader.tsx | 13 +++ .../components/userCenter/UserCenter.less | 93 +++++++++++++++++++ .../components/userCenter/UserCenter.tsx | 92 ++++++++++++++++++ .../AppHeader/components/userCenter/index.ts | 1 + src/components/AppHeader/index.less | 9 +- src/layouts/indexLayout.less | 3 +- 6 files changed, 209 insertions(+), 2 deletions(-) create mode 100644 src/components/AppHeader/components/userCenter/UserCenter.less create mode 100644 src/components/AppHeader/components/userCenter/UserCenter.tsx create mode 100644 src/components/AppHeader/components/userCenter/index.ts diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx index 4c7ec52..dc476bb 100644 --- a/src/components/AppHeader/AppHeader.tsx +++ b/src/components/AppHeader/AppHeader.tsx @@ -5,15 +5,28 @@ import CloseIcon from './components/close'; import MinimizeIcon from './components/minimize'; import ZoomIcon from './components/zoom'; import logoImg from './assets/logo.png'; +import { useModel } from 'umi'; +import UserCenter from './components/userCenter'; export default function AppHeader(props) { const { className, style } = props; + const { initialState: { isLogin } = { isLogin: false } } = useModel('@@initialState'); + return (
+ { + isLogin + ? ( + <> + + + ) + : null + }
diff --git a/src/components/AppHeader/components/userCenter/UserCenter.less b/src/components/AppHeader/components/userCenter/UserCenter.less new file mode 100644 index 0000000..2fb1d80 --- /dev/null +++ b/src/components/AppHeader/components/userCenter/UserCenter.less @@ -0,0 +1,93 @@ + +.icon { + cursor: pointer; + color: #A7A8B7; + &:hover, &.active { + color: @primary-color; + } +} + +.btn { + height: 20px; + padding: 0; + vertical-align: top; + border: none; +} +.pop { + &Wrapper { + :global(.ant-popover-arrow) { + display: none; + } + :global(.ant-popover-inner) { + background: #FFFFFF; + box-shadow: 0px 3px 11px 1px rgba(0, 0, 0, 0.06); + border-radius: 4px; + } + :global(.ant-popover-inner-content) { + padding: 0; + } + } + &View { + width: 200px; + } + &Header { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 12px 12px 12px 16px; + height: 68px; + background-color: #ebebf2; + color: rgba(#000, 0.8); + line-height: 1em; + .left, .right { + flex: none; + } + .left { + display: flex; + flex-direction: column; + justify-content: space-between; + } + .name { font-size: 14px; } + .phone { font-size: 12px;} + .avator { + width: 42px; + height: 42px; + border-radius: 50%; + } + } + &Content { + .listGroupTitle { + margin-top: 8px; + font-size: 12px; + color: rgba(0, 0, 0, 0.65); + height: 28px; + line-height: 28px; + > div { + transform: scale(0.83); + } + } + .listItem { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 36px; + padding: 0 12px 0 16px; + color: rgba(15, 15, 15, 0.7); + // border-bottom: 1px solid ; + cursor: pointer; + box-shadow: 0px 0.5px 0px 0px #EEF2F5; + } + .btnGroup { + padding: 10px 0; + text-align: center; + } + .logout { + color: @primary-color; + } + } +} + +.confirmModal { + color: red; +} \ No newline at end of file diff --git a/src/components/AppHeader/components/userCenter/UserCenter.tsx b/src/components/AppHeader/components/userCenter/UserCenter.tsx new file mode 100644 index 0000000..d013907 --- /dev/null +++ b/src/components/AppHeader/components/userCenter/UserCenter.tsx @@ -0,0 +1,92 @@ +import { useModel } from '@/.umi/plugin-model/useModel'; +import { confirm } from '@/components/AModal'; +import OssImage from '@/components/OssImage'; +import SvgIcon from '@/components/SvgIcon'; +import { logout } from '@/services/user'; +import { RightOutlined, QuestionOutlined } from '@ant-design/icons'; +import { Button, Popover, Modal } from 'antd'; +import classNames from 'classnames'; +import React, { CSSProperties } from 'react'; +import { useCallback } from 'react'; +import { useState } from 'react'; +import styles from './UserCenter.less'; + +interface UserCenterProps { + className?: string; + style?: CSSProperties; +} + +export default function UserCenter(props: UserCenterProps) { + const { className } = props; + const [popVisible, setPopVisible] = useState(false); + + const onVisibleChange = useCallback((nextVisible) => { + setPopVisible(nextVisible); + }, []) + + return ( + } + trigger="click" + visible={popVisible} + onVisibleChange={onVisibleChange} + placement="bottomRight" + arrowContent={() => null} + > + + + ) +} + +function PopContent(props) { + const { initialState: { currentUser } = {} } = useModel('@@initialState'); + console.log(currentUser); + + const tryLogout = useCallback(() => { + confirm({ + onOk() { + logout(); + }, + content: '确实退出登录?', + }) + }, []) + return ( +
+
+
+
{currentUser?.cnName}
+
{currentUser?.phone}
+
+
+ +
+
+
+ {/*
账号
+
+ 账号设置 + +
+
+ 同步设置 + +
+
其他
+
+ 系统版本 + +
+
+ 关于易云 + +
*/} +
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/AppHeader/components/userCenter/index.ts b/src/components/AppHeader/components/userCenter/index.ts new file mode 100644 index 0000000..c89f10a --- /dev/null +++ b/src/components/AppHeader/components/userCenter/index.ts @@ -0,0 +1 @@ +export { default } from './UserCenter'; \ No newline at end of file diff --git a/src/components/AppHeader/index.less b/src/components/AppHeader/index.less index be397c2..7c27474 100644 --- a/src/components/AppHeader/index.less +++ b/src/components/AppHeader/index.less @@ -7,12 +7,19 @@ justify-content: space-between; align-items: center; flex-direction: row; - box-shadow: 0px 0px 0px 0px #EEF2F5; + box-shadow: 0px 0.5px 0px 0px #EEF2F5; background-color: #fff; } .left, .right { flex: none; line-height: 0; + +} +.right { + display: flex; + flex-direction: row; + align-items: center; + .mr16 { margin-right: 16px; } .mr12 { margin-right: 12px;} .split { diff --git a/src/layouts/indexLayout.less b/src/layouts/indexLayout.less index f71f018..9007f10 100644 --- a/src/layouts/indexLayout.less +++ b/src/layouts/indexLayout.less @@ -16,7 +16,8 @@ .nav { width: 48px; padding: 24px 0 0 8px; - box-shadow: 0px 0px 0px 0px #EEF2F5; + box-shadow: 0.5px 0px 0px 0px #EEF2F5; + z-index: 1; .navItem { display: block; width: 32px;