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;
}
`;