按钮改为导航菜单

dashboard-v4/dashboard/src/components/auth/SignInAvatar.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
-import { Tooltip, Typography } from "antd";
+import { Divider, Menu, Typography } from "antd";
 import { Avatar } from "antd";
 import { Popover } from "antd";
-import { ProCard } from "@ant-design/pro-components";
+
 import {
   UserOutlined,
   HomeOutlined,
@@ -17,6 +17,8 @@ import { currentUser as _currentUser } from "../../reducers/current-user";
 import { TooltipPlacement } from "antd/lib/tooltip";
 import SettingModal from "./setting/SettingModal";
 import { AdminIcon } from "../../assets/icon";
+import User from "./User";
+import { fullUrl } from "../../utils";
 
 const { Title, Paragraph } = Typography;
 
@@ -28,15 +30,14 @@ interface IWidget {
 const SignInAvatarWidget = ({ style, placement = "bottomRight" }: IWidget) => {
   const intl = useIntl();
   const navigate = useNavigate();
-  const [userName, setUserName] = useState<string>();
-  const [nickName, setNickName] = useState<string>();
+  const [settingOpen, setSettingOpen] = useState(false);
+
   const user = useAppSelector(_currentUser);
 
   console.debug("user", user);
-  useEffect(() => {
-    setUserName(user?.realName);
-    setNickName(user?.nickName);
-  }, [user]);
+
+  const canManage =
+    user?.roles?.includes("root") || user?.roles?.includes("administrator");
 
   if (typeof user === "undefined") {
     return (
@@ -47,68 +48,91 @@ const SignInAvatarWidget = ({ style, placement = "bottomRight" }: IWidget) => {
       </Link>
     );
   } else {
+    const welcome = (
+      <Paragraph>
+        <Title level={3} style={{ fontSize: 22 }}>
+          {user.nickName}@{user.realName}
+        </Title>
+        <Paragraph style={{ textAlign: "right", paddingTop: 30 }}>
+          {intl.formatMessage({
+            id: "buttons.welcome",
+          })}
+        </Paragraph>
+      </Paragraph>
+    );
+
     return (
       <>
         <Popover
           content={
-            <ProCard
-              style={{ maxWidth: 500, minWidth: 300 }}
-              actions={[
-                <Tooltip
-                  title={intl.formatMessage({
-                    id: "buttons.setting",
-                  })}
-                >
-                  <SettingModal trigger={<SettingOutlined key="setting" />} />
-                </Tooltip>,
-                user.roles?.includes("root") ||
-                user.roles?.includes("administrator") ? (
-                  <Tooltip
-                    title={intl.formatMessage({
+            <div>
+              <>{welcome}</>
+              <Divider></Divider>
+              <Menu
+                style={{ width: 256 }}
+                mode={"inline"}
+                selectable={false}
+                items={[
+                  {
+                    key: "account",
+                    label: "选择账户",
+                    icon: <UserOutlined />,
+                    children: [
+                      {
+                        key: user.realName,
+                        label: <User {...user} />,
+                      },
+                    ],
+                  },
+                  {
+                    key: "setting",
+                    label: "设置",
+                    icon: <SettingOutlined />,
+                  },
+                  {
+                    key: "admin",
+                    label: intl.formatMessage({
                       id: "buttons.admin",
-                    })}
-                  >
-                    <Link to={`/admin`}>
-                      <AdminIcon />
-                    </Link>
-                  </Tooltip>
-                ) : (
-                  <></>
-                ),
-                <Tooltip
-                  title={intl.formatMessage({
-                    id: "columns.library.blog.label",
-                  })}
-                >
-                  <Link to={`/blog/${userName}/overview`}>
-                    <HomeOutlined key="home" />
-                  </Link>
-                </Tooltip>,
-                <Tooltip
-                  title={intl.formatMessage({
-                    id: "buttons.sign-out",
-                  })}
-                >
-                  <LogoutOutlined
-                    key="logout"
-                    onClick={() => {
+                    }),
+                    icon: <AdminIcon />,
+                    disabled: !canManage,
+                  },
+                  {
+                    key: "blog",
+                    label: intl.formatMessage({
+                      id: "columns.library.blog.label",
+                    }),
+                    icon: <HomeOutlined key="home" />,
+                  },
+                  {
+                    key: "logout",
+                    label: intl.formatMessage({
+                      id: "buttons.sign-out",
+                    }),
+                    icon: <LogoutOutlined />,
+                  },
+                ].filter((value) => !value.disabled)}
+                onClick={(info) => {
+                  switch (info.key) {
+                    case "setting":
+                      setSettingOpen(true);
+                      break;
+                    case "admin":
+                      window.open(fullUrl(`/admin`), "_blank");
+                      break;
+                    case "blog":
+                      const blog = `/blog/${user.realName}/overview`;
+                      window.open(fullUrl(blog), "_blank");
+                      break;
+                    case "logout":
                       sessionStorage.removeItem("token");
                       localStorage.removeItem("token");
                       navigate("/anonymous/users/sign-in");
-                    }}
-                  />
-                </Tooltip>,
-              ]}
-            >
-              <Paragraph>
-                <Title level={3}>{nickName}</Title>
-                <Paragraph style={{ textAlign: "right" }}>
-                  {intl.formatMessage({
-                    id: "buttons.welcome",
-                  })}
-                </Paragraph>
-              </Paragraph>
-            </ProCard>
+                      break;
+                  }
+                }}
+              />
+            </div>
           }
           placement={placement}
         >
@@ -119,10 +143,14 @@ const SignInAvatarWidget = ({ style, placement = "bottomRight" }: IWidget) => {
               src={user?.avatar}
               size="small"
             >
-              {nickName?.slice(0, 2)}
+              {user.nickName?.slice(0, 2)}
             </Avatar>
           </span>
         </Popover>
+        <SettingModal
+          open={settingOpen}
+          onClose={() => setSettingOpen(false)}
+        />
       </>
     );
   }