import { css, cx } from "@linaria/core"; import { useAuth } from "@queenjs-modules/auth"; import { IconCamera, IconDashboard, IconDownload, IconSettings, } from "@queenjs/icons"; import { Avatar, Divider } from "ant-design-vue"; import { defineComponent } from "vue"; import { array, object } from "vue-types"; import Logo from "./Logo"; export default defineComponent({ setup() { const auth = useAuth(); const footerOptions: TextListProps[] = [ { label: "退出", icon: IconDownload, onClick: auth.actions.logout, }, ]; const menuOptions = [ { link: "/workbench/promotion", label: "我的推广", icon: IconDashboard, // suffix: "7", }, { link: "/workstage/material", label: "我的素材", icon: IconCamera, // suffix: "32", }, { link: "/settings", label: "设置", icon: IconSettings, }, ]; return () => { const { userInfo } = auth.store; return (

{userInfo.name}

{userInfo.desc || "这个人很懒,什么都没留下..."}
new, icon: ( ), }} />
{menuOptions?.map((option, index) => ( ))}
); }; }, }); const rootStyles = css` .icon_new { border-radius: 14px; padding: 5px 10px; text-transform: uppercase; font-size: 12px; line-height: 1; background: linear-gradient(90deg, #9788ff 0%, #7e6bff 100%); color: #fff; } .router-link-exact-active { display: block; border-radius: 4px; background-color: #414141; > div { color: @inf-text-color; } } `; type TextListProps = { label?: string; suffix?: any; icon?: any; link?: string; onClick?: () => void; }; const TextList = defineComponent({ props: { options: array(), }, setup(props) { return () => { return (
{props.options?.map((option, index) => ( ))}
); }; }, }); const TextListItem = defineComponent({ props: { option: object() }, setup(props) { return () => { const { option = {} } = props; return (
option.onClick?.()} > {option.icon && }
{option.label}
{option.suffix && typeof option.suffix == "string" ? ( {option.suffix} ) : ( option.suffix )}
); }; }, }); const itemStyles = css` margin-top: 10px; border-radius: 4px; padding: 10px 25px 10px 20px; color: @inf-text-sub-color; cursor: pointer; &:hover { background: #414141; } `;