@hsu-react/ui 0.0.25 → 2.0.0

package/es/layout/Breadcrumb/_utils/formatMenu.d.ts

@@ -0,0 +1,9 @@
+import { BreadcrumbType } from "..";
+import { ItemType as MenuItemType } from "antd/es/menu/interface";
+/**
+ * Format the breadcrumb submenu
+ * @param children Child breadcrumb items
+ * @param navigate Navigation function
+ * @returns Array of menu items
+ */
+export declare const formatBreadcrumbMenu: (children: BreadcrumbType[], navigate: (path: string) => void) => Omit<MenuItemType, "null">[];

package/es/layout/Breadcrumb/_utils/formatMenu.js

@@ -0,0 +1,28 @@
+import React from "react";
+import BreadcrumbMenuItem from "../_components/BreadcrumbMenuItem";
+import { cloneDeep } from "lodash";
+
+/**
+ * Format the breadcrumb submenu
+ * @param children Child breadcrumb items
+ * @param navigate Navigation function
+ * @returns Array of menu items
+ */
+export var formatBreadcrumbMenu = function formatBreadcrumbMenu(children, navigate) {
+  return children === null || children === void 0 ? void 0 : children.map(function (item) {
+    var _item$children, _item$path;
+    var children = (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.filter(function (i) {
+      var _i$path;
+      return !((_i$path = i.path) !== null && _i$path !== void 0 && _i$path.includes(":"));
+    });
+    var childrenBreadcrumb = formatBreadcrumbMenu(cloneDeep(children || []), navigate);
+    return {
+      key: decodeURI((_item$path = item.path) !== null && _item$path !== void 0 ? _item$path : ""),
+      label: /*#__PURE__*/React.createElement(BreadcrumbMenuItem, {
+        item: item,
+        navigate: navigate
+      }),
+      children: childrenBreadcrumb.length > 0 ? childrenBreadcrumb : undefined
+    };
+  });
+};

package/es/layout/Breadcrumb/_utils/formatRoutes.d.ts

@@ -0,0 +1,9 @@
+import { RouteType } from "../../types";
+import { BreadcrumbType } from "..";
+/**
+ * Format routes into breadcrumb items
+ * @param router Route configuration
+ * @param parent Parent route
+ * @returns Array of breadcrumb items
+ */
+export declare const formatRoutes: (router: RouteType[], parent?: RouteType) => BreadcrumbType[];

package/es/layout/Breadcrumb/_utils/formatRoutes.js

@@ -0,0 +1,76 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { cloneDeep } from "lodash";
+/**
+ * Format routes into breadcrumb items
+ * @param router Route configuration
+ * @param parent Parent route
+ * @returns Array of breadcrumb items
+ */
+export var formatRoutes = function formatRoutes(router, parent) {
+  var newRoutes = [];
+  router === null || router === void 0 || router.forEach(function (route) {
+    var children = undefined;
+    if (route.children) {
+      children = formatRoutes(route.children, cloneDeep(route));
+    }
+    var meta = route.meta;
+    if (meta !== null && meta !== void 0 && meta.menu || !(meta !== null && meta !== void 0 && meta.noTabsView)) {
+      var path = "";
+      if (route.path) {
+        path = decodeURI(route.path);
+      }
+      if (route.index) {
+        var _children;
+        newRoutes.push({
+          path: parent === null || parent === void 0 ? void 0 : parent.path,
+          title: meta === null || meta === void 0 ? void 0 : meta.name,
+          children: (((_children = children) === null || _children === void 0 ? void 0 : _children.length) || 0) > 0 ? children : undefined,
+          icon: meta === null || meta === void 0 ? void 0 : meta.icon,
+          parent: parent,
+          route: route,
+          index: true
+        });
+      } else {
+        var _children2, _children3;
+        var indexChild = (_children2 = children) === null || _children2 === void 0 ? void 0 : _children2.find(function (child) {
+          return child === null || child === void 0 ? void 0 : child.index;
+        });
+        var newChildren = (_children3 = children) === null || _children3 === void 0 ? void 0 : _children3.filter(function (child) {
+          return !(child !== null && child !== void 0 && child.index);
+        });
+        if (indexChild) {
+          newRoutes.push(_objectSpread(_objectSpread({}, indexChild), {}, {
+            index: false,
+            parent: parent,
+            children: ((newChildren === null || newChildren === void 0 ? void 0 : newChildren.length) || 0) > 0 ? newChildren : undefined
+          }));
+        } else {
+          var _children4;
+          newRoutes.push({
+            path: path,
+            title: meta === null || meta === void 0 ? void 0 : meta.name,
+            children: (((_children4 = children) === null || _children4 === void 0 ? void 0 : _children4.length) || 0) > 0 ? children : undefined,
+            icon: meta === null || meta === void 0 ? void 0 : meta.icon,
+            parent: parent
+          });
+        }
+      }
+    } else {
+      if (children) {
+        newRoutes.push.apply(newRoutes, _toConsumableArray(children));
+      }
+    }
+  });
+  return newRoutes;
+};

package/es/layout/Breadcrumb/_utils/pathMatch.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Check whether a path matches (used by the breadcrumb)
+ * @param pathname Current path
+ * @param itemPath Route path
+ * @param parentPath Parent path
+ * @returns Whether it matches
+ */
+export declare const checkBreadcrumbPathMatch: (pathname: string, itemPath: string, parentPath?: string) => boolean;

package/es/layout/Breadcrumb/_utils/pathMatch.js

@@ -0,0 +1,45 @@
+import { array_is_includes } from "hsu-utils";
+
+/**
+ * Check whether a path matches (used by the breadcrumb)
+ * @param pathname Current path
+ * @param itemPath Route path
+ * @param parentPath Parent path
+ * @returns Whether it matches
+ */
+export var checkBreadcrumbPathMatch = function checkBreadcrumbPathMatch(pathname, itemPath, parentPath) {
+  if (!itemPath) {
+    return pathname === "/" && itemPath === "/";
+  }
+  var pathArr = pathname.split("/").filter(Boolean);
+  var keyArr = itemPath.split("/").filter(Boolean);
+  if (keyArr.length === 0) {
+    return false;
+  }
+  if (pathArr.length !== keyArr.length) {
+    return false;
+  }
+
+  // Handle the root path
+  if (pathname === "/" && itemPath === "/") {
+    return true;
+  }
+
+  // Handle routes containing params (e.g. /user/:id)
+  if (itemPath.includes(":")) {
+    if (parentPath === "/") {
+      // If the parent path is the root path, check that there are no non-param segments
+      return !keyArr.filter(function (i) {
+        return !i.startsWith(":");
+      }).length;
+    } else {
+      // Filter out param segments and compare only the non-param parts
+      return array_is_includes(keyArr.filter(function (i) {
+        return !i.startsWith(":");
+      }), pathArr);
+    }
+  } else {
+    // Plain path matching
+    return array_is_includes(keyArr, pathArr);
+  }
+};

package/es/layout/Breadcrumb/index.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+import { ItemType } from "antd/es/breadcrumb/Breadcrumb";
+import { RouteType } from "../types";
+export interface BreadcrumbType extends Omit<ItemType, "children"> {
+    children?: BreadcrumbType[];
+    icon?: ReactNode;
+    parent?: RouteType;
+    route?: RouteType;
+    index?: boolean;
+}
+interface BreadcrumbProps {
+    router: RouteType[];
+    className?: string;
+}
+/**
+ * Breadcrumb component
+ */
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export default Breadcrumb;

package/es/layout/Breadcrumb/index.js

@@ -0,0 +1,96 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Breadcrumb as AntBreadcrumb } from "antd";
+import React, { useMemo, useCallback } from "react";
+import { useNavigate } from "react-router";
+import styles from "./index.module.scss";
+import { cloneDeep } from "lodash";
+import classNames from "classnames";
+import { formatRoutes } from "./_utils/formatRoutes";
+import { formatBreadcrumbMenu } from "./_utils/formatMenu";
+import { useBreadcrumbPath } from "./_hooks/useBreadcrumbPath";
+import BreadcrumbItemIcon from "./_components/BreadcrumbItemIcon";
+
+// Omit 掉 children：antd v6 把 BreadcrumbItemType.children 收窄成了
+// `Omit<BreadcrumbItemType, "children">[]`，而这里的 children 要能递归携带 parent / route
+// 这些自有字段，直接 extends 会判为不兼容。渲染时再转回 antd 认识的形状。
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Breadcrumb component
+ */
+var Breadcrumb = function Breadcrumb(props) {
+  var router = props.router,
+    className = props.className;
+  var navigate = useNavigate();
+  var _routes = useMemo(function () {
+    return formatRoutes(router);
+  }, [router]);
+  var breadcrumb = useBreadcrumbPath(_routes);
+
+  /**
+   * Handle the breadcrumb item click event
+   */
+  var handleItemClick = useCallback(function (path) {
+    navigate(path);
+  }, [navigate]);
+
+  /**
+   * Format breadcrumb items
+   */
+  var formattedItems = useMemo(function () {
+    var _cloneDeep;
+    return (_cloneDeep = cloneDeep(breadcrumb)) === null || _cloneDeep === void 0 ? void 0 : _cloneDeep.map(function (item, index) {
+      var _item$children;
+      var isLastItem = index === breadcrumb.length - 1;
+      var children = (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.filter(function (i) {
+        var _i$path;
+        return !((_i$path = i.path) !== null && _i$path !== void 0 && _i$path.includes(":"));
+      });
+      var hasChildren = children && children.length > 0;
+
+      // If there are child menus, set the menu items
+      if (hasChildren) {
+        item.onClick = function (e) {
+          return e.preventDefault();
+        };
+        item.menu = {
+          items: formatBreadcrumbMenu(cloneDeep(children), navigate)
+        };
+      }
+
+      // The last item does not show a path
+      if (isLastItem) {
+        item.path = undefined;
+      }
+
+      // If there is an icon, wrap the title
+      if (item.icon) {
+        item.title = /*#__PURE__*/_jsx(BreadcrumbItemIcon, {
+          icon: item.icon,
+          title: item.title
+        });
+      }
+
+      // If there is a path and no child menu, set the click handler
+      if (item.path && !hasChildren) {
+        item.onClick = function (e) {
+          e.preventDefault();
+          handleItemClick(item.path);
+        };
+      }
+      return _objectSpread({}, item);
+    });
+  }, [breadcrumb, navigate, handleItemClick]);
+  return /*#__PURE__*/_jsx(AntBreadcrumb, {
+    className: classNames(styles.Breadcrumb, className)
+    // BreadcrumbType 比 antd 的 ItemType 多带了 parent / route / children 这些自有字段，
+    // 供上面的格式化与点击逻辑使用；渲染时 antd 只读它认识的那几个，多出来的会被忽略。
+    ,
+    items: formattedItems
+  });
+};
+export default Breadcrumb;

package/es/layout/Breadcrumb/index.module.scss

@@ -0,0 +1,15 @@
+.Breadcrumb {
+  cursor: default;
+
+  // On narrow screens, keep long paths on one line so they do not squeeze the top bar; hide the overflow
+  overflow: hidden;
+
+  :global(ol) {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+
+  * {
+    color: inherit !important;
+  }
+}

package/es/layout/Header/index.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+import Breadcrumb from "../Breadcrumb";
+import { MenuType } from "../Menu";
+/**
+ * 账号动作（改密 / 退出）由 App 传进来，本组件只认这个形状、不认来源。
+ *
+ * 别把 `PwdChange` 或 `LoginStore` 搬进来——看着它们该跟用户菜单待在一起，
+ * 但会同时踩两条：
+ *   1. `layout/` 反向 import `@/pages/…`（共享层依赖页面私有目录）；
+ *   2. `PwdChange` 用 `FormItem`，而 `FormItem` 静态引入全部字段渲染器
+ *      （wangeditor / codemirror / pdfjs / xlsx）。它现在由 App 以 `lazy()`
+ *      ＋「打开才挂载」持有，搬进来很容易顺手写成静态 import，那些库就又钉回首屏了。
+ */
+export interface AccountAction {
+    title: string;
+    icon: string;
+    onclick: () => void;
+    /** 危险动作（退出登录之类），悬浮态用红色区分 */
+    danger?: boolean;
+}
+interface HeaderProps {
+    router: Parameters<typeof Breadcrumb>[0]["router"];
+    collapsed: boolean;
+    onToggleCollapsed: () => void;
+    /** mixed 布局下把顶部菜单的子项回传给左侧栏 */
+    onChildItems: (items: MenuType[]) => void;
+    menu: AccountAction[];
+    /** 当前用户，用于右上角展示。不传则不显示用户名 */
+    user?: {
+        nickname?: string;
+        avatar?: string;
+    };
+    /** 站点标题。原本读的是应用的全局 Config，组件不该认识那个 */
+    title?: React.ReactNode;
+    /** 侧栏收起时用的短标题；不传则回落到 title */
+    smallTitle?: React.ReactNode;
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/es/layout/Header/index.js

@@ -0,0 +1,166 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from "react";
+
+// Only components hsu-ui does not provide fall back to antd; Button comes from hsu-ui
+import { Avatar, Layout, Popover, Segmented, Space } from "antd";
+import { MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined } from "@ant-design/icons";
+import Button from "../../components/Button";
+import Icon from "../../components/Icon";
+import classNames from "classnames";
+import styles from "./index.module.scss";
+import { observer } from "mobx-react-lite";
+import Breadcrumb from "../Breadcrumb";
+import Menu from "../Menu";
+import ThemeStore from "../Theme/ThemeStore";
+import I18nStore from "../I18n/I18nStore";
+// 用户信息由 App 传进来。这里原本是 `import { getUserInfo } from "@/utils/auth"` ——
+// 那是消费方自己的鉴权模块，组件不该认识它。改成 props 之后本组件只关心「显示什么名字」。
+
+/**
+ * 账号动作（改密 / 退出）由 App 传进来，本组件只认这个形状、不认来源。
+ *
+ * 别把 `PwdChange` 或 `LoginStore` 搬进来——看着它们该跟用户菜单待在一起，
+ * 但会同时踩两条：
+ *   1. `layout/` 反向 import `@/pages/…`（共享层依赖页面私有目录）；
+ *   2. `PwdChange` 用 `FormItem`，而 `FormItem` 静态引入全部字段渲染器
+ *      （wangeditor / codemirror / pdfjs / xlsx）。它现在由 App 以 `lazy()`
+ *      ＋「打开才挂载」持有，搬进来很容易顺手写成静态 import，那些库就又钉回首屏了。
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Header = observer(function (props) {
+  var _nickname$;
+  var router = props.router,
+    collapsed = props.collapsed,
+    onToggleCollapsed = props.onToggleCollapsed,
+    onChildItems = props.onChildItems,
+    menu = props.menu,
+    user = props.user,
+    title = props.title,
+    smallTitle = props.smallTitle;
+  var layout = ThemeStore.layout,
+    headerTheme = ThemeStore.headerTheme,
+    appearance = ThemeStore.appearance,
+    setAppearance = ThemeStore.setAppearance;
+  var locale = I18nStore.locale,
+    setLocale = I18nStore.setLocale;
+
+  // Appearance + language are grouped into the user dropdown; bilingual labels follow the current language
+  var isEn = locale === "en-US";
+  var appearanceOptions = [{
+    label: isEn ? "Light" : "浅色",
+    value: "light"
+  }, {
+    label: isEn ? "Dark" : "深色",
+    value: "dark"
+  }, {
+    label: isEn ? "System" : "跟随",
+    value: "system"
+  }];
+  var languageOptions = [{
+    label: "中文",
+    value: "zh-CN"
+  }, {
+    label: "English",
+    value: "en-US"
+  }];
+
+  // Nav (header/sidebar) light/dark: light -> light, dark/theme-colored -> dark
+  var navTheme = headerTheme === "light" ? "light" : "dark";
+  var nickname = user === null || user === void 0 ? void 0 : user.nickname;
+  return /*#__PURE__*/_jsxs(Layout.Header, {
+    className: classNames(styles.header, styles[headerTheme]),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.headerLeft,
+      children: [["left", "mixed"].includes(layout) ? /*#__PURE__*/_jsx("div", {
+        className: classNames(styles.title, _defineProperty({}, styles.titleCollapsed, collapsed)),
+        children: collapsed ? smallTitle !== null && smallTitle !== void 0 ? smallTitle : title : title
+      }) : /*#__PURE__*/_jsx("div", {
+        className: classNames(styles.title, styles.titleTop),
+        children: title
+      }), ["left", "mixed"].includes(layout) && /*#__PURE__*/_jsx(Button, {
+        className: styles.collapsed,
+        type: "text",
+        icon: collapsed ? /*#__PURE__*/_jsx(MenuUnfoldOutlined, {}) : /*#__PURE__*/_jsx(MenuFoldOutlined, {}),
+        onClick: onToggleCollapsed
+      }), ["left"].includes(layout) && /*#__PURE__*/_jsx(Breadcrumb, {
+        router: router,
+        className: styles.breadcrumb
+      }), ["top", "mixed"].includes(layout) && /*#__PURE__*/_jsx(Menu, {
+        router: router,
+        mode: "horizontal",
+        theme: navTheme,
+        onlyLvOneMenu: layout === "mixed",
+        getCurrChildItems: onChildItems
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.headerRight,
+      children: /*#__PURE__*/_jsx(Popover, {
+        classNames: {
+          root: styles.userPopover
+        },
+        placement: "bottomRight",
+        content: /*#__PURE__*/_jsxs("div", {
+          className: styles.userMenuPanel,
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: styles.settingRow,
+            children: [/*#__PURE__*/_jsx("span", {
+              className: styles.settingLabel,
+              children: isEn ? "Appearance" : "外观"
+            }), /*#__PURE__*/_jsx(Segmented, {
+              size: "small",
+              value: appearance,
+              options: appearanceOptions,
+              onChange: function onChange(v) {
+                return setAppearance(v);
+              }
+            })]
+          }), /*#__PURE__*/_jsxs("div", {
+            className: styles.settingRow,
+            children: [/*#__PURE__*/_jsx("span", {
+              className: styles.settingLabel,
+              children: isEn ? "Language" : "语言"
+            }), /*#__PURE__*/_jsx(Segmented, {
+              size: "small",
+              value: locale,
+              options: languageOptions,
+              onChange: function onChange(v) {
+                return setLocale(v);
+              }
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.settingDivider
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.menu,
+            children: menu === null || menu === void 0 ? void 0 : menu.map(function (item, index) {
+              return /*#__PURE__*/_jsx(Button, {
+                className: classNames(_defineProperty({}, styles.menuBtnDanger, item.danger)),
+                icon: /*#__PURE__*/_jsx(Icon, {
+                  icon: item.icon
+                }),
+                onClick: item.onclick,
+                type: "text",
+                children: item.title
+              }, index);
+            })
+          })]
+        }),
+        children: /*#__PURE__*/_jsxs(Space, {
+          className: styles.user,
+          children: [/*#__PURE__*/_jsx(Avatar, {
+            style: {
+              backgroundColor: "#1677ff",
+              verticalAlign: "middle"
+            },
+            icon: nickname ? undefined : /*#__PURE__*/_jsx(UserOutlined, {}),
+            children: nickname === null || nickname === void 0 || (_nickname$ = nickname[0]) === null || _nickname$ === void 0 ? void 0 : _nickname$.toUpperCase()
+          }), nickname]
+        })
+      })
+    })]
+  });
+});
+export default Header;