@wener/console
Version:
Base console UI toolkit
78 lines (77 loc) • 4.49 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";
import clsx from "clsx";
import { useStore } from "zustand";
import { getUserStore } from "../../console/context.js";
import { getAuthAction } from "../../console/user/index.js";
import { isDev } from "../../const.js";
import { DockClock } from "./DockClock.js";
import { DockUserAvatar } from "./DockUserAvatar.js";
export var DockLayout = function (param) {
var children = param.children, _param_dock = param.dock, dock = _param_dock === void 0 ? /*#__PURE__*/ React.createElement(Dock, null) : _param_dock;
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));
};
var UserAvatar = function () {
var _useStore = useStore(getUserStore()), id = _useStore.id, loginName = _useStore.loginName, fullName = _useStore.fullName, photoUrl = _useStore.photoUrl, _useStore_avatarUrl = _useStore.avatarUrl, avatarUrl = _useStore_avatarUrl === void 0 ? photoUrl : _useStore_avatarUrl;
var hasNotification = false;
var _getAuthAction = getAuthAction(), signOut = _getAuthAction.signOut, signIn = _getAuthAction.signIn, lock = _getAuthAction.lock, refreshProfile = _getAuthAction.refreshProfile;
return /*#__PURE__*/ React.createElement(DockUserAvatar, {
loginName: loginName,
fullName: fullName,
avatarUrl: avatarUrl,
hasNotification: hasNotification,
onSignIn: signIn,
onSignOut: signOut
}, /*#__PURE__*/ React.createElement(Link, {
to: "/user/".concat(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: "border-base-200 my-2"
}), /*#__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: function () {
// getConsoleStore().setState({ expired: true });
}
}, /*#__PURE__*/ React.createElement(HiQuestionMarkCircle, null), "\u767B\u5F55\u5931\u6548"))));
};
var Dock = /*#__PURE__*/ memo(function () {
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";