diff --git a/packages/pancake-uikit/src/widgets/Menu/Menu.tsx b/packages/pancake-uikit/src/widgets/Menu/Menu.tsx index bb7df38..b851b9a 100644 --- a/packages/pancake-uikit/src/widgets/Menu/Menu.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/Menu.tsx @@ -75,71 +75,118 @@ const Menu: React.FC = ({ profile, children, inviteUrl, - outLink, + // outLink, }) => { - // const outLink = [ - // { - // icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", - // list: [ - // { - // name: "淘宝", - // link: "www.taobao.com", - // 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", - // }, - // { - // name: "淘宝2", - // 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: "淘宝", - // 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", - // 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", - // 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", - // }, - // ], - // }, - // ]; + const outLink = [ + { + icon: "http://ra5vgxi1g.hn-bkt.clouddn.com/1651722219486WX20220425-094204@2x.png", + name: "11", + list: [ + { + name: "淘宝", + link: "www.taobao.com", + 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", + }, + { + name: "淘宝2", + 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: "淘宝", + 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", + }, + ], + }, + { + 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", + }, + ], + }, + { + 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(setLang); const { isXl } = useMatchBreakpoints(); const isMobile = isXl === false; const [isPushed, setIsPushed] = useState(!isMobile); diff --git a/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx b/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx index 5c44fd2..9696d8b 100644 --- a/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx +++ b/packages/pancake-uikit/src/widgets/Menu/components/PanelFooter.tsx @@ -13,6 +13,7 @@ import Text from "../../../components/Text/Text"; import Dropdown from "../../../components/Dropdown/Dropdown"; import Link from "../../../components/Link/Link"; import MoreIcon from "../../../components/Svg/Icons/More"; +import ChevronRightIcon from "../../../components/Svg/Icons/ChevronRight"; interface Props extends PanelProps, PushedProps {} @@ -42,6 +43,7 @@ const Image = styled.img` width: 30px; height: 30px; border-radius: 50%; + cursor: pointer; `; const ImageDiv = styled.div` position: relative; @@ -53,7 +55,7 @@ const ImageDiv = styled.div` display: none; background-color: #fff; box-sizing: border-box; - padding: 0 10px; + /* padding: 0 10px; */ border-radius: 10px; position: absolute; width: 100px; @@ -73,7 +75,7 @@ const ImageDiv = styled.div` } `; const ImageItem = styled.div` - padding: 5px 0; + /* padding: 5px 0; */ position: relative; .itemDiv { display: none; @@ -95,6 +97,19 @@ const ImageItem = styled.div` 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)` @@ -118,9 +133,10 @@ const PanelFooter: React.FC = ({ let defaultList: OutLink[] | undefined; let moreList: OutLink[] | undefined; 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); - defaultList = outLink.splice(0, 2); + defaultList = listLink.splice(0, 2); covers = outLink[0].icon; } else { defaultList = outLink; @@ -143,11 +159,11 @@ const PanelFooter: React.FC = ({ {defaultList && defaultList.length > 0 ? defaultList.map((item) => { return item.list && item.list.length > 1 ? ( - }> + }> {item.list && item.list.length > 0 ? item.list?.map((childItem) => { return ( - + {childItem.name} ); @@ -155,8 +171,8 @@ const PanelFooter: React.FC = ({ : ""} ) : item.list && item.list.length > 0 ? ( - - + + ) : ( "" @@ -172,11 +188,17 @@ const PanelFooter: React.FC = ({ {moreList?.map((item) => { return item.list && item.list.length > 1 ? ( - + + <> + + {item.name} + + +
{item.list?.map((childItem) => { return ( - + {childItem.name} ); @@ -184,9 +206,9 @@ const PanelFooter: React.FC = ({
) : item.list && item.list.length > 0 ? ( - - - + + + ) : ( "" ); diff --git a/packages/pancake-uikit/src/widgets/Menu/types.ts b/packages/pancake-uikit/src/widgets/Menu/types.ts index 9fe18de..320c2b0 100644 --- a/packages/pancake-uikit/src/widgets/Menu/types.ts +++ b/packages/pancake-uikit/src/widgets/Menu/types.ts @@ -68,6 +68,7 @@ export interface NavProps extends PanelProps { export interface OutLink { icon?: string; + name?: string; list?: OutList[]; } export interface OutList {