569 lines
20 KiB
TypeScript
569 lines
20 KiB
TypeScript
import {
|
|
HomeOutlined,
|
|
SettingOutlined,
|
|
ApiOutlined,
|
|
FolderOutlined,
|
|
ClearOutlined,
|
|
UserOutlined,
|
|
CommentOutlined,
|
|
AlertOutlined,
|
|
UploadOutlined,
|
|
ClockCircleTwoTone,
|
|
PlusCircleTwoTone,
|
|
ControlTwoTone,
|
|
MessageTwoTone,
|
|
} from "@ant-design/icons";
|
|
import type { MenuProps } from "antd";
|
|
import { Menu } from "antd";
|
|
import React, { useState } from "react";
|
|
import { Input, Avatar } from "antd";
|
|
import { SearchOutlined } from "@ant-design/icons";
|
|
|
|
import "./Navbar.css";
|
|
|
|
import { Dialog, Portal, createOverlay, CloseButton } from "@chakra-ui/react";
|
|
import { PasswordInput } from "@/components/ui/password-input";
|
|
|
|
import { Input as ChakraInput, InputGroup, Box } from "@chakra-ui/react";
|
|
|
|
import { QRCode, Button } from "antd";
|
|
// import { PasswordInput } from "@/components/ui/password-input"
|
|
|
|
import { Tabs } from "antd";
|
|
|
|
import { Space } from "antd";
|
|
|
|
import { Flex } from "antd";
|
|
|
|
interface DialogProps {
|
|
title: string;
|
|
description?: string;
|
|
content?: React.ReactNode;
|
|
}
|
|
|
|
const login_dialog = createOverlay<DialogProps>((props) => {
|
|
const { ...rest } = props;
|
|
return (
|
|
<Dialog.Root {...rest} size={"xl"} placement="center">
|
|
<Portal>
|
|
<Dialog.Backdrop />
|
|
<Dialog.Positioner>
|
|
<Dialog.Content>
|
|
<Dialog.CloseTrigger top="0" asChild>
|
|
<CloseButton bg="bg" size="sm" />
|
|
</Dialog.CloseTrigger>
|
|
<Dialog.Body
|
|
style={{
|
|
paddingBottom: "10px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
height: "100%",
|
|
minHeight: "400px",
|
|
}}
|
|
>
|
|
<Dialog.Body
|
|
style={{
|
|
textAlign: "center",
|
|
maxWidth: "300px",
|
|
borderRight: "1px solid #eee",
|
|
}}
|
|
>
|
|
<Dialog.Title>扫描二维码登录</Dialog.Title>
|
|
<Dialog.Body
|
|
style={{
|
|
marginTop: "30px",
|
|
}}
|
|
>
|
|
<QRCode
|
|
errorLevel="H"
|
|
size={200}
|
|
value="https://ant.design/"
|
|
/>
|
|
<div
|
|
style={{
|
|
textAlign: "center",
|
|
color: "#999",
|
|
marginTop: "20px",
|
|
}}
|
|
>
|
|
使用APP扫码登录
|
|
</div>
|
|
<div
|
|
style={{
|
|
textAlign: "center",
|
|
color: "#999",
|
|
marginTop: "5px",
|
|
}}
|
|
>
|
|
扫描登录或者扫码下载APP
|
|
</div>
|
|
</Dialog.Body>
|
|
</Dialog.Body>
|
|
<div>
|
|
<Dialog.Body
|
|
style={{
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<Tabs
|
|
defaultActiveKey="1"
|
|
centered
|
|
items={[
|
|
{
|
|
label: (
|
|
<span className="not-font-select">
|
|
账号密码登录
|
|
</span>
|
|
),
|
|
key: "1",
|
|
children: (
|
|
<Box spaceY="-1px" marginTop="30px">
|
|
<InputGroup startElement="账号">
|
|
<ChakraInput
|
|
ps="3.5em"
|
|
pe="0"
|
|
style={{
|
|
borderRadius: "5px 5px 0 0px",
|
|
}}
|
|
css={{ "--focus-color": "#bff" }}
|
|
/>
|
|
</InputGroup>
|
|
|
|
<Space.Compact style={{ width: "100%" }}>
|
|
<InputGroup startElement="密码" flex="1">
|
|
<PasswordInput
|
|
ps="3.5em"
|
|
pe="0"
|
|
style={{
|
|
borderRadius: "0 0 0 5px",
|
|
borderRight: "0",
|
|
}}
|
|
css={{ "--focus-color": "#bff" }}
|
|
/>
|
|
</InputGroup>
|
|
<Button
|
|
color="default"
|
|
variant="link"
|
|
style={{
|
|
height: "40px",
|
|
borderRadius: "0 0 5px 0",
|
|
border:
|
|
"1px solid var(--chakra-colors-border)",
|
|
}}
|
|
>
|
|
忘记密码?
|
|
</Button>
|
|
</Space.Compact>
|
|
|
|
<Flex
|
|
gap="medium"
|
|
vertical={false}
|
|
justify="center"
|
|
style={{
|
|
marginTop: "30px",
|
|
}}
|
|
>
|
|
<Button block size="large">
|
|
登录
|
|
</Button>
|
|
<Button type="primary" block size="large">
|
|
注册
|
|
</Button>
|
|
</Flex>
|
|
</Box>
|
|
),
|
|
},
|
|
{
|
|
label: (
|
|
<span className="not-font-select">
|
|
邮箱验证码登录
|
|
</span>
|
|
),
|
|
key: "2",
|
|
children: (
|
|
<Box spaceY="-1px" marginTop="30px">
|
|
<Space.Compact style={{ width: "100%" }}>
|
|
<InputGroup startElement="邮箱" flex="1">
|
|
<ChakraInput
|
|
placeholder="请输入邮箱号"
|
|
ps="3.5em"
|
|
pe="0"
|
|
style={{
|
|
borderRadius: "5px 0 0 0px",
|
|
}}
|
|
css={{ "--focus-color": "#bff" }}
|
|
/>
|
|
</InputGroup>
|
|
<Button
|
|
color="default"
|
|
variant="link"
|
|
style={{
|
|
height: "40px",
|
|
borderRadius: "0 5px 0 0",
|
|
border:
|
|
"1px solid var(--chakra-colors-border)",
|
|
}}
|
|
>
|
|
获取验证码
|
|
</Button>
|
|
</Space.Compact>
|
|
|
|
<InputGroup startElement="验证码">
|
|
<ChakraInput
|
|
placeholder="请输入验证码"
|
|
ps="5em"
|
|
pe="0"
|
|
style={{
|
|
borderRadius: "0 0 5px 5px",
|
|
}}
|
|
css={{ "--focus-color": "#bff" }}
|
|
/>
|
|
</InputGroup>
|
|
|
|
<Flex
|
|
gap="medium"
|
|
vertical={false}
|
|
justify="center"
|
|
style={{
|
|
marginTop: "30px",
|
|
}}
|
|
>
|
|
<Button
|
|
size="large"
|
|
type="primary"
|
|
style={{
|
|
padding: "0 60px",
|
|
}}
|
|
>
|
|
登录 / 注册
|
|
</Button>
|
|
</Flex>
|
|
</Box>
|
|
),
|
|
},
|
|
]}
|
|
/>
|
|
</Dialog.Body>
|
|
<Dialog.Body>
|
|
<div
|
|
className="not-font-select"
|
|
style={{
|
|
textAlign: "center",
|
|
color: "#ccc",
|
|
}}
|
|
>
|
|
其他登录方式
|
|
</div>
|
|
|
|
<Flex
|
|
gap="medium"
|
|
vertical={false}
|
|
justify="center"
|
|
style={{
|
|
marginTop: "20px",
|
|
marginBottom: "30px",
|
|
}}
|
|
>
|
|
<Button color="default" variant="text">
|
|
<Avatar src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAb1BMVEUAAABMouVIn+NEn99MouVMouVMo+ZMouVKouRKouJMn+NMouZLouRLo+VMoeNMouZLoeVLoeVNn+RMouX///+83Pal0PL0+v6x1vRireiay/FXqOfS6Pl5uevH4vePxe+Ev+1utOrp9Pzp8/yEv+7XzqLPAAAAE3RSTlMA3yAQ74C/n2BQQK9wz5CPz7BwJ8NfpgAAAbNJREFUSMe1lutygjAQhTeEOyi2AQIC3t//GcvYqk3OYsh0+v1yMN+czc4mQBwyL5ONUDMiLsqc1iGzOFQGYZGu0KLZQkQSrNSQ6I2aGRqkpktxlXJQSc4LNsqJCBhPOCQwwXOa6PmbErxlNpJeVMqD6uWliqOfprPiyN5tcOp0PaObntnmo9hIAV39pFNA9BOogKb+RQN/h9+RCfzR1gbtQqSArtQmemAjUy4QI7GxBTy92qKGJfEshlgp0DO15srmhuIRFuX0Cc/2KO5hUUkF1xt3dxKKuUS3uCPBjA0w4rySwqYyDLCM+EqxVrd45UTtFm81ywlEuzkHXhyhOfY1DArfntg+jRMY/PB80CeODaLhHigpt7fYNSgeuvpgD7k0j9V4Gfbc6RjN7oRE1rCeejVo27vMD4/WFokynB33qUpnUYb+t5zg7+OhNYrVxx5PIzGRJ9ijniwxIC7y3DV3urZ9/DrDfQxvR793a+YnpvRk6+Nt6YXceRQq//rxgKb/h87/fVrtAmKQW2c/JfGkb0PDjBYJomUtMuJQTcRKDUmL0LLiDDWevCzie7LYJGXOWl/BnLhvbq/sWgAAAABJRU5ErkJggg==" />
|
|
QQ 登录
|
|
</Button>
|
|
<Button color="default" variant="text">
|
|
<Avatar src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAgVBMVEUAAABXu0BYt0BQt0BXu0BWu0BXu0BXu0BXu0BWukBWukBXvEBXu0BXvEBXvEBYukBVukBXu0BWt0BXukBXuEBXu0D////1+/Pq9+fV7s/A5rer3aBsw1jg89uBzHBiwEy14auL0Xug2ZOW1YeBzG93yGSW1YjL6sO14azL6cN2yGP3XpzOAAAAFXRSTlMA3yAQ78+/r5+AUI9w74BgYEBAkHDBb56KAAACF0lEQVRIx52W6XKDIBRGwT3GZmsRUXFP0vb9H7AKGS8aiCXnR0TCmU/gOoh0uJck8jEZwUGYXND/cOPggyz4CE//0HZgKeDIsdSA3Qs1Bk2XejLF7ckGe1fnOT7ZBDsaDxNiZ4Jna4Jnb7rgbeKrK7QnFuzBOxIrYrsJAth9iIdl/9CwLE0pv/elqfoegWpfXdAUYINW9GRkRIBWakBemiOVGRbpE1lpijwaPDANCxvCc8qBbcVF47vq5EQ1YjCK3nyXiXE3QqrpSseeu+jptc96XgWmHSGDEGtCmDHygpK5nUuRdr2MvvfNdMvzXCN+KVNk6RO0qOpr37fXJzFCwdzmT9532THZovmqFHxlF3/WcdWQGUsBI2g3K/G3WG3o4oEVsVqOK4RHaTpfaKkXCVsWzPTL65pPN7X4kxnEX6qIXS4mJqfOH5tVKSJWzJsiXqlcklxe5AI0yuL4RDUpiKkGphRrRFRK+lLk88AQSg4KXVC9TvwSRQ4MU5m1xZ2xlmnEm1LkrqeKTVbU5rcaNtJDCAWqCOutq90CpjiKMTFQZuuah/9Oo+h6ZtPkYTSxI0YKReWLtxFBpJ5bzjOasWYsoBp6HQSRW5R5tz4C4HS0PltjO/H05sH6iQDXtz0d3/94ANPes/9Asjd9572PwE8X6Tm+DPViZMQ5mLUDxGnVCFtqwDH0VlYQS22bcxIGIhn7UXLWWn+10s6FZo+4YQAAAABJRU5ErkJggg==" />
|
|
微信登录
|
|
</Button>
|
|
<Button color="default" variant="text">
|
|
<Avatar src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAh1BMVEUAAADXQDjTQDzaQzfcRTfbRDfcRDbcQzbbRDbbRDfcQzbaQzbbRDbbRDbaRDfcQzbbRDfaQjjaQjXcQzfYRDfbRDTbRDf////gW1D99PPtoZvyubT76Ob20M3pioLdT0Tvrajkc2n20c3rlo7mfnb0xcD43NrrlY7kcmniZ1343driZ1z0xMEgvW1iAAAAFnRSTlMAIBDf34Dv78+/n1BAj7CvcGBgkHBwDUc+aAAAAmpJREFUSMeVlueCqjAQRgOI0qy7m0YVsN297/98OwEdCUQ05w8WDt/MkIjEhJv8RIFHAS/c/CTkM9w4XFKN5ebwgeaDNWURObYa4s+oMWrG1MOruDV9w9o1eU5A37JwDN6CUksTPWsTPXvTRe89wXBCa2rB+ukd6By3K6ca8WcNVoyxLB26i0ex/mxgzRTiMlx990A6C09PZ6XKwXbpIyP6Fn4C8zKONHVYFrJ4tJWfoUMJ5k2PPBi0igHZrX8j4HVLITPXB7udeK1gHem9ziJjouTwQYmnhCCuxh5UhSJO9qKmWwxrTcZeyh5UpcyFyOH0Bi5SaYNNyG7qYeK95CttWUWlJn6PW5RsSgVtlyqxoEhEQs1rNEPrldf5cI8Qb+hxYRKlaVsSY4NZKqU81aynpQY0kTNF3pS4fsDFvTESx4Gi0b4vMqWKdl4UcHWukmSeZXnRV9Gb5VgcDucIJ3B11JbckSmKyXAC7V7I52hxI2WmyYYk0m7+Dbd8JR7boTYlbshOE9WBsYb+MglBZ6r4p8TxXL+Hi7zov2dCnY1N8v7ViIS4z21V9q3U7Ap9YkzOulnrLAkZLtYTA4f+CpYLHEjFgCMdtwhiTBGedT+D/NwtIHU2V3li4tE9iO5qaILQwvF4LNUtTLsr8InnTX6Pebfq8qopmup/V29W0CkRIaNISDmxJwLqNeEYHwG8repzltVpA/Ua8UmP61ErPHy2xnbiniBflg9WxA0sCnXJAMezadDSRM/aRM/eDMCb4n7Z/glE9rOhq5i8xPFfaz7GmdXIs9aw4O1qZIUxam9IdtuwS/aCaJcYrT+uh9kYccQkXQAAAABJRU5ErkJggg==" />
|
|
微博登录
|
|
</Button>
|
|
</Flex>
|
|
</Dialog.Body>
|
|
</div>
|
|
</div>
|
|
</Dialog.Body>
|
|
<Dialog.Body
|
|
style={{
|
|
paddingTop: "0px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
textAlign: "center",
|
|
color: "#ccc",
|
|
}}
|
|
>
|
|
未注册过账号的手机号/邮箱，我们将自动帮你注册账号{" "}
|
|
</div>
|
|
<div
|
|
style={{
|
|
textAlign: "center",
|
|
color: "#ccc",
|
|
}}
|
|
>
|
|
登录或完成注册即代表你同意
|
|
<Button color="primary" variant="link">
|
|
用户协议
|
|
</Button>
|
|
和
|
|
<Button color="primary" variant="link">
|
|
隐私政策
|
|
</Button>
|
|
</div>
|
|
</Dialog.Body>
|
|
</Dialog.Content>
|
|
</Dialog.Positioner>
|
|
</Portal>
|
|
</Dialog.Root>
|
|
);
|
|
});
|
|
|
|
// login_dialog.open({});
|
|
|
|
const Navbar: React.FC = () => {
|
|
const [current, setCurrent] = useState("mail");
|
|
const [isLogin, setIsLogin] = useState(false);
|
|
|
|
const items: MenuProps["items"] = [
|
|
{
|
|
label: "主页",
|
|
key: "home",
|
|
icon: <HomeOutlined />,
|
|
},
|
|
{
|
|
label: "工具大全",
|
|
key: "tools",
|
|
icon: <ApiOutlined />,
|
|
},
|
|
{
|
|
label: "文章资源",
|
|
key: "articles",
|
|
icon: <FolderOutlined />,
|
|
},
|
|
{
|
|
label: "消息",
|
|
key: "xx",
|
|
icon: <CommentOutlined />,
|
|
children: [
|
|
{
|
|
label: "回复我的",
|
|
key: "xx1",
|
|
},
|
|
{
|
|
label: "@我的",
|
|
key: "xx2",
|
|
},
|
|
{
|
|
label: "收到的赞",
|
|
key: "xx3",
|
|
},
|
|
{
|
|
label: "系统消息",
|
|
key: "xx4",
|
|
},
|
|
{
|
|
label: "我的消息",
|
|
key: "xx5",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "bug反馈",
|
|
key: "bug",
|
|
icon: <AlertOutlined />,
|
|
},
|
|
{
|
|
label: (
|
|
<Input
|
|
placeholder="请输入搜索内容"
|
|
className="width_600 height_40 margin_3_0 margin_left_600"
|
|
prefix={<SearchOutlined />}
|
|
/>
|
|
),
|
|
key: "search",
|
|
disabled: true,
|
|
className: "right-align-container",
|
|
},
|
|
{
|
|
label: (
|
|
<span
|
|
className="margin_0_20"
|
|
onClick={() => {
|
|
login_dialog.open({});
|
|
}}
|
|
>
|
|
<Avatar size={40} icon={<UserOutlined />} className="margin_3_0" />
|
|
<span className="height_40_center display_inline_block margin_0_10">
|
|
用户: 10086
|
|
</span>
|
|
</span>
|
|
),
|
|
key: "my",
|
|
children: isLogin
|
|
? [
|
|
{
|
|
className: "width_300",
|
|
type: "group",
|
|
label: (
|
|
<div className="height_40_center text_center">用户10086</div>
|
|
),
|
|
children: [
|
|
{
|
|
label: "个人中心",
|
|
key: "setting:1",
|
|
icon: <UserOutlined />,
|
|
},
|
|
{
|
|
label: "个人设置",
|
|
key: "setting:2",
|
|
icon: <SettingOutlined />,
|
|
},
|
|
|
|
{
|
|
label: "浏览历史",
|
|
key: "setting:3",
|
|
icon: <ClearOutlined />,
|
|
},
|
|
{
|
|
label: (
|
|
<div
|
|
style={{
|
|
borderBottom: "1px #eee solid",
|
|
height: "20px",
|
|
}}
|
|
></div>
|
|
),
|
|
disabled: true,
|
|
key: "divider",
|
|
},
|
|
{
|
|
label: "退出登录",
|
|
key: "setting:4",
|
|
icon: <UploadOutlined />,
|
|
},
|
|
],
|
|
},
|
|
]
|
|
: [
|
|
{
|
|
label: (
|
|
<div
|
|
className="width_300"
|
|
style={{
|
|
color: "#000",
|
|
}}
|
|
>
|
|
登录后你可以:
|
|
<div>111</div>
|
|
</div>
|
|
),
|
|
key: "login",
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: (
|
|
<>
|
|
<MessageTwoTone
|
|
style={{
|
|
marginRight: "10px",
|
|
}}
|
|
/>{" "}
|
|
你发布评论后,也可以收到别人的回复
|
|
</>
|
|
),
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: (
|
|
<>
|
|
<ClockCircleTwoTone
|
|
style={{
|
|
marginRight: "10px",
|
|
}}
|
|
/>{" "}
|
|
查看自己的历史浏览记录
|
|
</>
|
|
),
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: (
|
|
<>
|
|
<ControlTwoTone
|
|
style={{
|
|
marginRight: "10px",
|
|
}}
|
|
/>{" "}
|
|
收藏需要的工具和文章
|
|
</>
|
|
),
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: (
|
|
<>
|
|
<PlusCircleTwoTone
|
|
style={{
|
|
marginRight: "10px",
|
|
}}
|
|
/>{" "}
|
|
部分登录才可以使用的功能
|
|
</>
|
|
),
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: (
|
|
<Button type="primary" block>
|
|
立即登录
|
|
</Button>
|
|
),
|
|
key: "divider",
|
|
disabled: true,
|
|
},
|
|
{
|
|
label: (
|
|
<div style={{ textAlign: "center" }}>
|
|
首次登录?{" "}
|
|
<Button color="primary" variant="link">
|
|
立即注册
|
|
</Button>
|
|
</div>
|
|
),
|
|
disabled: true,
|
|
},
|
|
],
|
|
className: "right-align-container",
|
|
},
|
|
];
|
|
|
|
const onClick: MenuProps["onClick"] = (e) => {
|
|
console.log("click ", e);
|
|
setCurrent(e.key);
|
|
|
|
if (e.key == "home") {
|
|
login_dialog.open({});
|
|
}
|
|
};
|
|
return (
|
|
<div
|
|
style={{
|
|
borderBottom: "1px solid #eee",
|
|
margin: "10px 10px",
|
|
}}
|
|
>
|
|
<Menu
|
|
onClick={onClick}
|
|
selectedKeys={[current]}
|
|
mode="horizontal"
|
|
items={items}
|
|
/>
|
|
<login_dialog.Viewport />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|