@wener/console
Version:
Base console UI toolkit
97 lines (96 loc) • 5.87 kB
JavaScript
import React from "react";
import { GrSystem } from "react-icons/gr";
import { HiCheck } from "react-icons/hi";
import { ImLab } from "react-icons/im";
import { useWindowEventListener } from "@wener/reaction";
import dayjs from "dayjs";
import { useImmer } from "use-immer";
import { getBuildInfo } from "../../../buildinfo/index.js";
import { Button } from "../../../daisy/index.js";
import { useUserAgentPreferences } from "../../../utils/UserAgentPreference.js";
import { SiteLogo } from "../../components/index.js";
export const SystemAboutPage = ({ children, title = "\u63A7\u5236\u53F0", logo = /*#__PURE__*/ React.createElement(SiteLogo, {
className: "h-6 w-6"
}), build = {
title: title,
info: getBuildInfo()
}, author = {
title: title
}, agent }) => {
return /*#__PURE__*/ React.createElement("div", {
className: "mx-auto mt-8 flex max-w-prose flex-col gap-8"
}, /*#__PURE__*/ React.createElement(AppBuildInfo, {
logo: logo,
info: build.info || getBuildInfo(),
title: title
}), /*#__PURE__*/ React.createElement(AuthorInfo, author), agent ?? /*#__PURE__*/ React.createElement(ClientBrowserInfo, null), children);
};
const AuthorInfo = (props) => {
const { title = "\u63A7\u5236\u53F0", author: { name = "Wener", link = "https://wener.me" } = {} } = props;
return /*#__PURE__*/ React.createElement("div", {
className: "rounded-lg border p-4 text-sm shadow"
}, /*#__PURE__*/ React.createElement("article", {
className: "prose"
}, /*#__PURE__*/ React.createElement("p", null, title), /*#__PURE__*/ React.createElement("small", null, "\u7531", " ", /*#__PURE__*/ React.createElement(Button, {
href: link,
size: "xs",
className: "btn-link",
target: "_blank"
}, name), " ", "\u63D0\u4F9B\u6280\u672F\u652F\u6301\u3002")));
};
const AppBuildInfo = ({ logo, title, info }) => {
return /*#__PURE__*/ React.createElement("div", {
className: "rounded-lg border shadow"
}, /*#__PURE__*/ React.createElement("ul", {
className: "divide-color flex flex-col divide-y [&>li]:flex [&>li]:items-center [&>li]:gap-2 [&>li]:p-3"
}, /*#__PURE__*/ React.createElement("li", null, logo || /*#__PURE__*/ React.createElement(GrSystem, {
className: "h-6 w-6"
}), /*#__PURE__*/ React.createElement("span", {
className: "text-xl font-medium"
}, title)), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("div", {
className: "flex h-8 w-8 items-center justify-center"
}, /*#__PURE__*/ React.createElement(HiCheck, {
className: "h-4 w-4 text-info"
})), /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
className: "flex items-center gap-2"
}, "\u5F53\u524D\u7248\u672C: ", info.version, info.isDev && /*#__PURE__*/ React.createElement("span", {
className: "badge badge-warning"
}, /*#__PURE__*/ React.createElement(ImLab, null), " \u6D4B\u8BD5\u7248\u672C")), /*#__PURE__*/ React.createElement("div", {
className: "flex gap-2"
}, /*#__PURE__*/ React.createElement("small", {
className: "text-gray-600"
}, "\u6784\u5EFA\u4E8E ", dayjs(info.date).format("YYYY.MM.DD HH.mm")), info.commit.shortSha && /*#__PURE__*/ React.createElement("small", {
className: "text-gray-300"
}, info.commit.shortSha, info.commit.timestamp && /*#__PURE__*/ React.createElement("span", null, "@", dayjs(info.commit.timestamp).format())))))));
};
const ClientBrowserInfo = () => {
const getState = () => ({
ua: globalThis.navigator?.userAgent,
width: globalThis.outerWidth,
height: globalThis.outerHeight,
screenWidth: globalThis.screen?.width,
screenHeight: globalThis.screen?.height,
timezone: Intl.DateTimeFormat?.().resolvedOptions?.()?.timeZone
});
const [state, update] = useImmer(getState);
useWindowEventListener({
resize: () => {
update(getState());
}
}, []);
const { colorTheme, devicePixelRatio, reducedTransparency, reducedData, reducedMotion, contrast } = useUserAgentPreferences();
return /*#__PURE__*/ React.createElement("div", {
className: "rounded-lg border p-4 text-sm shadow"
}, /*#__PURE__*/ React.createElement("article", {
className: "prose"
}, /*#__PURE__*/ React.createElement("p", null, "\u5F53\u524D\u5BA2\u6237\u7AEF\u7CFB\u7EDF\u4FE1\u606F"), /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col"
}, /*#__PURE__*/ React.createElement("small", null, "\u7A97\u53E3: ", state.width, "\u00D7", state.height, " ", /*#__PURE__*/ React.createElement("br", null), "\u5C4F\u5E55: ", state.screenWidth, "\u00D7", state.screenHeight, " @", devicePixelRatio, "x ", /*#__PURE__*/ React.createElement("br", null)), /*#__PURE__*/ React.createElement("small", null, state.ua), /*#__PURE__*/ React.createElement("details", null, /*#__PURE__*/ React.createElement("summary", {
className: "btn-link text-sm"
}, "\u66F4\u591A\u4FE1\u606F"), /*#__PURE__*/ React.createElement("small", null, /*#__PURE__*/ React.createElement("div", null, "\u504F\u597D\u4E3B\u9898: ", colorTheme), /*#__PURE__*/ React.createElement("div", null, "\u8BED\u8A00: ", navigator.language), /*#__PURE__*/ React.createElement("div", null, "\u65F6\u533A: ", state.timezone), /*#__PURE__*/ React.createElement("div", null, "\u8BBE\u5907\u50CF\u7D20\u6BD4: ", devicePixelRatio), /*#__PURE__*/ React.createElement("div", null, "\u5BF9\u6BD4\u5EA6: ", contrast), /*#__PURE__*/ React.createElement("div", null, [
reducedData && "Reduced Data",
reducedMotion && "Reduced Motion",
reducedTransparency && "Reduced Transparency"
].filter(Boolean).join(" ")))))));
};
//# sourceMappingURL=SystemAboutPage.js.map