1
This commit is contained in:
@@ -0,0 +1,568 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user