@wener/console/lib/console/components/DockLayout/DockLayout.js

Base console UI toolkit

function _define_property(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    }
    else {
        obj[key] = value;
    }
    return obj;
}
function _object_spread(target) {
    for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i] != null ? arguments[i] : {};
        var ownKeys = Object.keys(source);
        if (typeof Object.getOwnPropertySymbols === "function") {
            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
            }));
        }
        ownKeys.forEach(function (key) {
            _define_property(target, key, source[key]);
        });
    }
    return target;
}
function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);
    if (Object.getOwnPropertySymbols) {
        var symbols = Object.getOwnPropertySymbols(object);
        if (enumerableOnly) {
            symbols = symbols.filter(function (sym) {
                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
            });
        }
        keys.push.apply(keys, symbols);
    }
    return keys;
}
function _object_spread_props(target, source) {
    source = source != null ? source : {};
    if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    }
    else {
        ownKeys(Object(source)).forEach(function (key) {
            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
    }
    return target;
}
import React, { memo, useMemo } from "react";
import { HiOutlineLogout } from "react-icons/hi";
import { HiLockClosed, HiMiniArrowsPointingIn, HiOutlineIdentification, HiQuestionMarkCircle } from "react-icons/hi2";
import { PiBrowser, PiBrowsersLight } from "react-icons/pi";
import { VscClose, VscCloseAll, VscPrimitiveSquare } from "react-icons/vsc";
import { Link } from "react-router";
import { FloatingFocusManager, FloatingPortal, useTransitionStyles } from "@floating-ui/react";
import { getUserStore } from "@wener/console/console";
import { usePopover } from "@wener/console/floating";
import { getRootWindow, Window } from "@wener/console/window";
import clsx from "clsx";
import { useStore } from "zustand";
import { shallow } from "zustand/shallow";
import { useStoreWithEqualityFn } from "zustand/traditional";
// import { isDev } from '@/const';
import { isDev } from "../../../const.js";
import { cn } from "../../../utils/cn.js";
import { getAuthAction } from "../../user/index.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 () {
            // getUserSessionState().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: "relative flex w-full flex-1 flex-col gap-1"
    }, /*#__PURE__*/ React.createElement(WindowControl, null), /*#__PURE__*/ React.createElement("div", {
        className: "relative w-full flex-1"
    }, /*#__PURE__*/ React.createElement("div", {
        className: "absolute inset-0 overflow-y-auto"
    }, /*#__PURE__*/ React.createElement(WindowDocks, null)))), /*#__PURE__*/ React.createElement("footer", {
        className: "flex flex-col items-center"
    }, /*#__PURE__*/ React.createElement(DockClock, null)));
});
var WindowControlPopoverContent = function (props) {
    var root = getRootWindow();
    // 避免单次操作内 layout 发生变化
    var top = useMemo(function () {
        return root.top;
    }, []);
    var count = root.windows.length;
    return /*#__PURE__*/ React.createElement("ul", _object_spread({
        className: "border-color menu menu-sm rounded-box bg-base-100 w-44 border"
    }, props), top && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("li", {
        className: "menu-title"
    }, "\u5F53\u524D\u7A97\u53E3"), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", {
        onClick: function () {
            top.close();
        }
    }, /*#__PURE__*/ React.createElement(VscClose, null), "\u5173\u95ED")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", {
        onClick: function () {
            top.center();
        }
    }, /*#__PURE__*/ React.createElement(VscPrimitiveSquare, null), "\u5C45\u4E2D"))), /*#__PURE__*/ React.createElement("li", {
        className: "menu-title"
    }, "\u7A97\u53E3\u7BA1\u7406 (", count, ")"), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", {
        onClick: function () {
            Window.closeAll();
        }
    }, /*#__PURE__*/ React.createElement(VscCloseAll, null), "\u5173\u95ED\u6240\u6709\u7A97\u53E3")), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("a", {
        onClick: function () {
            Window.minimizeAll();
        }
    }, /*#__PURE__*/ React.createElement(HiMiniArrowsPointingIn, null), "\u6700\u5C0F\u5316\u6240\u6709\u7A97\u53E3")));
};
var WindowControl = /*#__PURE__*/ memo(function () {
    var _usePopover = usePopover({
        placement: "left-start"
    }), refs = _usePopover.refs, getFloatingProps = _usePopover.getFloatingProps, getReferenceProps = _usePopover.getReferenceProps, open = _usePopover.open, setOpen = _usePopover.setOpen, floatingStyles = _usePopover.floatingStyles, context = _usePopover.context, nodeId = _usePopover.nodeId;
    var _useTransitionStyles = useTransitionStyles(context, {
        initial: {
            opacity: 0,
            transform: "translateY(-10px)"
        },
        close: {
            opacity: 0,
            transform: "translateY(10px)"
        }
    }), isMounted = _useTransitionStyles.isMounted, styles = _useTransitionStyles.styles;
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", _object_spread({
        type: "button",
        className: "btn btn-square btn-ghost btn-sm self-center",
        ref: refs.setReference
    }, getReferenceProps()), /*#__PURE__*/ React.createElement(PiBrowsersLight, {
        className: "h-5 w-5 opacity-75"
    })), isMounted && /*#__PURE__*/ React.createElement(FloatingFocusManager, {
        context: context
    }, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
        ref: refs.setFloating
    }, getFloatingProps()), {
        style: floatingStyles,
        className: "z-50"
    }), /*#__PURE__*/ React.createElement(WindowControlPopoverContent, {
        style: styles,
        onClick: function () {
            setOpen(false);
        }
    }))));
});
var WindowDock = /*#__PURE__*/ memo(function (param) {
    var win = param.win;
    var iconClass = "w-8 h-8 ";
    var _useStoreWithEqualityFn = useStoreWithEqualityFn(win.store, function (param) {
        var minimized = param.minimized, icon = param.icon, title = param.title;
        if ( /*#__PURE__*/React.isValidElement(icon)) {
            icon = /*#__PURE__*/ React.cloneElement(icon, {
                className: iconClass
            });
        }
        return {
            minimized: minimized,
            icon: icon,
            title: title
        };
    }, shallow), minimized = _useStoreWithEqualityFn.minimized, icon = _useStoreWithEqualityFn.icon, title = _useStoreWithEqualityFn.title;
    var _usePopover = usePopover({
        hover: true,
        placement: "left"
    }), refs = _usePopover.refs, open = _usePopover.open, context = _usePopover.context, floatingStyles = _usePopover.floatingStyles, getFloatingProps = _usePopover.getFloatingProps, getReferenceProps = _usePopover.getReferenceProps;
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", _object_spread_props(_object_spread({
        type: "button",
        className: cn("h-10 w-10", "text-base-content hover:text-base-content flex items-center justify-center", "bg-base-200 rounded-lg", !minimized ? "active bg-base-300" : "opacity-75")
    }, getReferenceProps()), {
        onClick: function () {
            win.minimize();
        },
        ref: refs.setReference
    }), icon !== null && icon !== void 0 ? icon : /*#__PURE__*/ React.createElement(PiBrowser, {
        className: iconClass
    })), open && /*#__PURE__*/ React.createElement(FloatingPortal, null, /*#__PURE__*/ React.createElement(FloatingFocusManager, {
        context: context
    }, /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({
        className: "bg-base-200 rounded p-1 text-xs opacity-85",
        ref: refs.setFloating
    }, getFloatingProps()), {
        style: floatingStyles
    }), title))));
});
var WindowDocks = /*#__PURE__*/ memo(function () {
    var windows = useStoreWithEqualityFn(getRootWindow().store, function (s) {
        return s.windows;
    }, shallow);
    return /*#__PURE__*/ React.createElement("div", {
        className: "flex flex-col items-center gap-0.5"
    }, windows.map(function (win) {
        return /*#__PURE__*/ React.createElement(WindowDock, {
            key: win.id,
            win: win
        });
    }));
});
Dock.displayName = "Dock";