zhangshu
/
hicity-toolkit
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

调整外链

This commit is contained in:
myf 2022-05-06 18:00:54 +08:00
parent 9588a3cdcb
commit 719b5e3a24
3 changed files with 146 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
packages/pancake-uikit/src/widgets/Menu/Menu.tsx
View File

@ -75,71 +75,118 @@ const Menu: React.FC<NavProps> = ({
profile, profile,
children, children,
inviteUrl, inviteUrl,
outLink, // outLink,
}) => { }) => {
// const outLink = [ const outLink = [
// { {
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// list: [ name: "11",
// { list: [
// name: "淘宝", {
// link: "www.taobao.com", name: "淘宝",
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", link: "www.taobao.com",
// }, icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// { },
// name: "淘宝1", {
// link: "www.taobao.com", name: "淘宝1",
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", link: "www.taobao.com",
// }, icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// { },
// name: "淘宝2", {
// link: "www.taobao.com", name: "淘宝2",
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", link: "www.taobao.com",
// }, icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// ], },
// }, ],
// { },
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", {
// list: [ icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// { name: "11",
// name: "淘宝", list: [
// link: "www.taobao.com", {
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", name: "淘宝",
// }, link: "www.taobao.com",
// ], icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// }, },
// { ],
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", },
// list: [ {
// { icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// name: "京东1", name: "11",
// link: "www.taobao.com", list: [
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", {
// }, name: "京东1",
// ], link: "www.taobao.com",
// }, icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// { },
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", ],
// list: [ },
// { {
// name: "京东1", icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// link: "www.taobao.com", name: "11",
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", list: [
// }, {
// { name: "京东1",
// name: "京东2", link: "www.taobao.com",
// link: "www.taobao.com", icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", },
// }, {
// { name: "京东2",
// name: "京东3", link: "www.taobao.com",
// link: "www.taobao.com", icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
// icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", },
// }, {
// ], name: "京东3",
// }, link: "www.taobao.com",
// ]; icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
},
],
},
{
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
name: "11",
list: [
{
name: "京东1",
link: "www.taobao.com",
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
},
{
name: "京东2",
link: "www.taobao.com",
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
},
{
name: "京东3",
link: "www.taobao.com",
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
},
],
},
{
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
name: "11",
list: [
{
name: "京东1",
link: "www.taobao.com",
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
},
{
name: "京东2",
link: "www.taobao.com",
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
},
{
name: "京东3",
link: "www.taobao.com",
icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png",
},
],
},
];
console.log("outLink-----:", outLink); console.log("outLink-----:", outLink);
console.log(setLang);
const { isXl } = useMatchBreakpoints(); const { isXl } = useMatchBreakpoints();
const isMobile = isXl === false; const isMobile = isXl === false;
const [isPushed, setIsPushed] = useState(!isMobile); const [isPushed, setIsPushed] = useState(!isMobile);

48
packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx
View File

@ -13,6 +13,7 @@ import Text from "../../../components/Text/Text";
import Dropdown from "../../../components/Dropdown/Dropdown"; import Dropdown from "../../../components/Dropdown/Dropdown";
import Link from "../../../components/Link/Link"; import Link from "../../../components/Link/Link";
import MoreIcon from "../../../components/Svg/Icons/More"; import MoreIcon from "../../../components/Svg/Icons/More";
import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight";
interface Props extends PanelProps, PushedProps {} interface Props extends PanelProps, PushedProps {}
@ -42,6 +43,7 @@ const Image = styled.img`
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
cursor: pointer;
`; `;
const ImageDiv = styled.div` const ImageDiv = styled.div`
position: relative; position: relative;
@ -53,7 +55,7 @@ const ImageDiv = styled.div`
display: none; display: none;
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
padding: 0 10px; /* padding: 0 10px; */
border-radius: 10px; border-radius: 10px;
position: absolute; position: absolute;
width: 100px; width: 100px;
@ -73,7 +75,7 @@ const ImageDiv = styled.div`
} }
`; `;
const ImageItem = styled.div` const ImageItem = styled.div`
padding: 5px 0; /* padding: 5px 0; */
position: relative; position: relative;
.itemDiv { .itemDiv {
display: none; display: none;
@ -95,6 +97,19 @@ const ImageItem = styled.div`
display: block; display: block;
} }
} }
& > .content-item {
padding: 5px 10px;
}
& > .content-item:hover {
background-color: rgba(112, 112, 112, 0.2);
}
`;
const SingleLink = styled(Link)`
padding: 5px 10px;
width: 100%;
:hover {
background-color: rgba(112, 112, 112, 0.2);
}
`; `;
const MoreIconSvg = styled(MoreIcon)` const MoreIconSvg = styled(MoreIcon)`
@ -118,9 +133,10 @@ const PanelFooter: React.FC<Props> = ({
let defaultList: OutLink[] | undefined; let defaultList: OutLink[] | undefined;
let moreList: OutLink[] | undefined; let moreList: OutLink[] | undefined;
if (outLink && outLink.length > 2) { if (outLink && outLink.length > 2) {
const list = outLink; const list = JSON.parse(JSON.stringify(outLink));
const listLink = JSON.parse(JSON.stringify(outLink));
moreList = list.slice(2, outLink.length); moreList = list.slice(2, outLink.length);
defaultList = outLink.splice(0, 2); defaultList = listLink.splice(0, 2);
covers = outLink[0].icon; covers = outLink[0].icon;
} else { } else {
defaultList = outLink; defaultList = outLink;
@ -143,11 +159,11 @@ const PanelFooter: React.FC<Props> = ({
{defaultList && defaultList.length > 0 {defaultList && defaultList.length > 0
? defaultList.map((item) => { ? defaultList.map((item) => {
return item.list && item.list.length > 1 ? ( return item.list && item.list.length > 1 ? (
<Dropdown position="top-right" target={<Image src={item.icon} />}> <Dropdown position="top-right" target={<Image src={item.icon} title={item.name} />}>
{item.list && item.list.length > 0 {item.list && item.list.length > 0
? item.list?.map((childItem) => { ? item.list?.map((childItem) => {
return ( return (
<Link href={childItem.link} color="textSubtle"> <Link external href={childItem.link} color="textSubtle">
<Text>{childItem.name}</Text> <Text>{childItem.name}</Text>
</Link> </Link>
); );
@ -155,8 +171,8 @@ const PanelFooter: React.FC<Props> = ({
: ""} : ""}
</Dropdown> </Dropdown>
) : item.list && item.list.length > 0 ? ( ) : item.list && item.list.length > 0 ? (
<Link href={item.list[0].link} color="textSubtle"> <Link external href={item.list[0].link} color="textSubtle">
<Image src={item.icon} /> <Image src={item.icon} title={item.name} />
</Link> </Link>
) : ( ) : (
"" ""
@ -172,11 +188,17 @@ const PanelFooter: React.FC<Props> = ({
{moreList?.map((item) => { {moreList?.map((item) => {
return item.list && item.list.length > 1 ? ( return item.list && item.list.length > 1 ? (
<ImageItem> <ImageItem>
<Image src={item.icon} /> <Flex className="content-item" alignItems="center" justifyContent="space-between">
<>
<Image src={item.icon} title={item.name} />
<Text marginLeft="5px">{item.name}</Text>
</>
<ChevronRightIcon />
</Flex>
<div className="itemDiv"> <div className="itemDiv">
{item.list?.map((childItem) => { {item.list?.map((childItem) => {
return ( return (
<Link href={childItem.link} color="textSubtle"> <Link external href={childItem.link} color="textSubtle">
<Text>{childItem.name}</Text> <Text>{childItem.name}</Text>
</Link> </Link>
); );
@ -184,9 +206,9 @@ const PanelFooter: React.FC<Props> = ({
</div> </div>
</ImageItem> </ImageItem>
) : item.list && item.list.length > 0 ? ( ) : item.list && item.list.length > 0 ? (
<Link href={item.list[0].link} color="textSubtle"> <SingleLink external href={item.list[0].link} color="textSubtle">
<Image src={item.icon} /> <Image src={item.icon} title={item.name} />
</Link> </SingleLink>
) : ( ) : (
"" ""
); );

1
packages/pancake-uikit/src/widgets/Menu/types.ts
View File

@ -68,6 +68,7 @@ export interface NavProps extends PanelProps {
export interface OutLink { export interface OutLink {
icon?: string; icon?: string;
name?: string;
list?: OutList[]; list?: OutList[];
} }
export interface OutList { export interface OutList {