@wener/console
Version:
Base console UI toolkit
78 lines (77 loc) • 4.08 kB
JavaScript
import React, { memo } from "react";
import { HiOutlineLogout } from "react-icons/hi";
import { HiLockClosed, HiOutlineIdentification, HiQuestionMarkCircle } from "react-icons/hi2";
import { Link } from "react-router-dom";
import clsx from "clsx";
import { useStore } from "zustand";
import { getUserStore } from "../../../console/context.js";
import { getUserAction } from "../../../console/user/index.js";
import { isDev } from "../../../const.js";
import { DockClock } from "./DockClock.js";
import { DockUserAvatar } from "./DockUserAvatar.js";
export const DockLayout = ({ children, dock = /*#__PURE__*/ React.createElement(Dock, null) }) => {
return /*#__PURE__*/ React.createElement("div", {
className: clsx("flex h-screen w-full overflow-hidden", "flex-col md:flex-row")
}, /*#__PURE__*/ React.createElement("main", {
className: "relative order-5 h-full flex-1 overflow-auto"
}, /*#__PURE__*/ React.createElement("div", {
className: "scrollbar-thin absolute inset-0"
}, children)), /*#__PURE__*/ React.createElement("aside", {
className: clsx("border-color flex items-center", "order-1 w-full border-b px-2", "md:order-6 md:w-[57px] md:w-auto md:flex-col md:border-b-0 md:border-l md:px-0")
}, dock));
};
const UserAvatar = () => {
const { id, loginName, fullName, photoUrl, avatarUrl = photoUrl } = useStore(getUserStore());
const hasNotification = false;
const { signOut, signIn, lock, refreshProfile } = getUserAction();
return /*#__PURE__*/ React.createElement(DockUserAvatar, {
loginName,
fullName,
avatarUrl,
hasNotification,
onSignIn: signIn,
onSignOut: signOut
}, /*#__PURE__*/ React.createElement(Link, {
to: `/user/${id}`,
type: "button",
className: "btn btn-ghost flex h-auto w-full flex-col items-start py-2"
}, /*#__PURE__*/ React.createElement("div", {
className: "text-lg font-medium"
}, fullName), /*#__PURE__*/ React.createElement("div", {
className: "flex items-baseline justify-between gap-4"
}, loginName && /*#__PURE__*/ React.createElement("small", {
title: "\u767B\u5F55\u540D",
className: "opacity-75"
}, "@", loginName))), /*#__PURE__*/ React.createElement("hr", {
className: "my-2 border-base-200"
}), /*#__PURE__*/ React.createElement("ul", {
className: "menu p-2"
}, /*#__PURE__*/ React.createElement("li", {
key: "refreshProfile"
}, /*#__PURE__*/ React.createElement("button", {
type: "button",
onClick: refreshProfile
}, /*#__PURE__*/ React.createElement(HiOutlineIdentification, null), "\u5237\u65B0\u4E2A\u4EBA\u4FE1\u606F")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("button", {
type: "button",
onClick: lock
}, /*#__PURE__*/ React.createElement(HiLockClosed, null), "\u9501\u5B9A")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("button", {
type: "button",
onClick: signOut
}, /*#__PURE__*/ React.createElement(HiOutlineLogout, null), "\u9000\u51FA\u767B\u5F55")), isDev() && /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("button", {
type: "button",
onClick: () => {
// getConsoleStore().setState({ expired: true });
}
}, /*#__PURE__*/ React.createElement(HiQuestionMarkCircle, null), "\u767B\u5F55\u5931\u6548"))));
};
const Dock = /*#__PURE__*/ memo(() => {
return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("header", {
className: "flex flex-col items-center gap-1 py-1"
}, /*#__PURE__*/ React.createElement(UserAvatar, null)), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-1"
}), /*#__PURE__*/ React.createElement("footer", {
className: "flex flex-col items-center"
}, /*#__PURE__*/ React.createElement(DockClock, null)));
});
Dock.displayName = "Dock";
//# sourceMappingURL=DockLayout.js.map