@hsu-react/ui 0.0.25 → 2.0.0

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

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import { RouteType } from "../types";
+export interface TabType {
+    label: ReactNode;
+    key: string;
+    element?: React.ReactNode;
+    children?: TabType[];
+    path?: string;
+    name?: ReactNode;
+    affix?: boolean;
+    icon?: ReactNode;
+}
+export interface NavTabBarProps {
+    router: RouteType[];
+    affixRouter?: string[];
+    basePath?: string;
+    /** 页签栏最前面的「刷新当前页」按钮 */
+    showReload?: boolean;
+}
+declare const NavTabBar: React.FC<NavTabBarProps>;
+export default NavTabBar;

package/es/layout/NavTabBar/index.js

@@ -0,0 +1,224 @@
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Tabs as AntdTabs, Tooltip } from "antd";
+import React, { useCallback, useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+import { closestCenter, DndContext, PointerSensor, useSensor } from "@dnd-kit/core";
+import { restrictToHorizontalAxis, restrictToParentElement } from "@dnd-kit/modifiers";
+import { arrayMove, horizontalListSortingStrategy, SortableContext } from "@dnd-kit/sortable";
+import styles from "./index.module.scss";
+import { useAliveController } from "react-activation";
+import useReload from "../_hooks/useReload";
+import { formatNavTabBar } from "./_utils/formatNavTabBar";
+import { useTabPath } from "./_hooks/useTabPath";
+import { useTabContextMenu } from "./_hooks/useTabContextMenu";
+import { useDropTabKey } from "./_hooks/useDropTabKey";
+import { useTabTitle } from "./_hooks/useTabTitle";
+import TabLabel from "./_components/TabLabel";
+import DraggableTabNode from "./_components/SortableTab";
+import TabDragOverlay from "./_components/TabDragOverlay";
+import { isLegacyHasSelectorBrowser } from "../../utils/cssSupports";
+import Button from "../../components/Button";
+import Icon from "../../components/Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var NavTabBar = function NavTabBar(props) {
+  var router = props.router,
+    _props$affixRouter = props.affixRouter,
+    affixRouter = _props$affixRouter === void 0 ? [] : _props$affixRouter,
+    _props$basePath = props.basePath,
+    basePath = _props$basePath === void 0 ? "/" : _props$basePath,
+    _props$showReload = props.showReload,
+    showReload = _props$showReload === void 0 ? true : _props$showReload;
+  var navigate = useNavigate();
+  var _useAliveController = useAliveController(),
+    drop = _useAliveController.drop,
+    refresh = _useAliveController.refresh;
+  var onReload = useReload();
+  var legacyHasSelector = isLegacyHasSelectorBrowser();
+  var items = useMemo(function () {
+    return formatNavTabBar(router);
+  }, [router]);
+  var _useTabPath = useTabPath({
+      items: items,
+      affixRouter: affixRouter
+    }),
+    tabKey = _useTabPath.tabKey,
+    openKeys = _useTabPath.openKeys,
+    setOpenkeys = _useTabPath.setOpenkeys;
+  var _useTabContextMenu = useTabContextMenu(),
+    open = _useTabContextMenu.open,
+    setOpen = _useTabContextMenu.setOpen;
+  useDropTabKey(setOpenkeys);
+  useTabTitle(setOpenkeys);
+
+  // ID of the tab currently being dragged
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeId = _useState2[0],
+    setActiveId = _useState2[1];
+
+  // Configure the drag sensor with a 10px activation distance to avoid accidental drags
+  var sensor = useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  });
+
+  // Handle the drag start event
+  var onDragStart = function onDragStart(event) {
+    setActiveId(String(event.active.id));
+  };
+
+  // Handle the drag end event
+  var onDragEnd = function onDragEnd(_ref) {
+    var active = _ref.active,
+      over = _ref.over;
+    if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+      setOpenkeys(function (prev) {
+        var activeIndex = prev.findIndex(function (i) {
+          return i.key === active.id;
+        });
+        var overIndex = prev.findIndex(function (i) {
+          return i.key === (over === null || over === void 0 ? void 0 : over.id);
+        });
+        return arrayMove(prev, activeIndex, overIndex);
+      });
+    }
+    setActiveId(null);
+  };
+
+  // Handle the drag cancel event
+  var onDragCancel = function onDragCancel() {
+    setActiveId(null);
+  };
+
+  /**
+   * 刷新当前页。走的是和右键菜单「重新加载」完全相同的两步：`onReload` 通知页面自己重挂，
+   * `refresh` 让 react-activation 丢掉这份缓存。少调其中任何一个，都会出现「看上去刷新了、
+   * 实际还是那棵旧组件树」。
+   *
+   * key 要去掉 query —— 缓存是按路径存的，带上 `?a=1` 会找不到对应的那份。
+   */
+  var reloadCurrent = useCallback(function () {
+    var key = tabKey === null || tabKey === void 0 ? void 0 : tabKey.split("?")[0];
+    if (!key) return;
+    onReload(key);
+    refresh(key);
+  }, [tabKey, onReload, refresh]);
+  return /*#__PURE__*/_jsx(AntdTabs, {
+    className: styles.NavTabBar,
+    items: openKeys === null || openKeys === void 0 ? void 0 : openKeys.map(function (item, idx) {
+      var closable = !(affixRouter.includes(item.key) || item.affix);
+      return {
+        label: /*#__PURE__*/_jsx(TabLabel, {
+          item: item,
+          index: idx,
+          openKeys: openKeys,
+          basePath: basePath,
+          affixRouter: affixRouter,
+          open: open,
+          onReload: onReload,
+          refresh: refresh,
+          drop: drop,
+          setOpenkeys: setOpenkeys,
+          setOpen: setOpen,
+          navigate: navigate,
+          className: legacyHasSelector && closable ? styles.legacyClosableTabLabel : undefined
+        }),
+        key: item.key,
+        closeIcon: closable ? undefined : false
+      };
+    }),
+    activeKey: tabKey,
+    tabBarExtraContent: showReload ? {
+      left:
+      /*#__PURE__*/
+      // 不用 Button 的 title —— 本库的 Button 把 title 当作 children 的兜底
+      // （children ?? title），传了会把文案画到按钮里，而不是变成悬浮提示
+      _jsx(Tooltip, {
+        title: "\u5237\u65B0\u5F53\u524D\u9875",
+        children: /*#__PURE__*/_jsx(Button, {
+          className: styles.reload,
+          type: "text",
+          size: "small",
+          "aria-label": "\u5237\u65B0\u5F53\u524D\u9875",
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: "ep:refresh"
+          }),
+          onClick: reloadCurrent
+        })
+      })
+    } : undefined,
+    hideAdd: true,
+    type: "editable-card",
+    onEdit: function onEdit(key, action) {
+      if (action === "remove") {
+        drop((key === null || key === void 0 ? void 0 : key.split("?")[0]) || "");
+        // Find the index of the tab being closed
+        var currentIndex = openKeys.findIndex(function (item) {
+          return item.key === key;
+        });
+        var newOpenKeys = openKeys.filter(function (item) {
+          return item.key !== key;
+        });
+        setOpenkeys(newOpenKeys);
+        setOpen("");
+        if (key === tabKey) {
+          var _newOpenKeys$targetIn;
+          // If the active tab is closed, select the previous tab; fall back to the first one
+          var targetIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+          navigate(((_newOpenKeys$targetIn = newOpenKeys[targetIndex]) === null || _newOpenKeys$targetIn === void 0 ? void 0 : _newOpenKeys$targetIn.key) || basePath);
+        }
+      }
+    },
+    size: "small",
+    renderTabBar: function renderTabBar(tabBarProps, DefaultTabBar) {
+      return /*#__PURE__*/_jsxs(DndContext, {
+        sensors: [sensor],
+        onDragStart: onDragStart,
+        onDragEnd: onDragEnd,
+        onDragCancel: onDragCancel,
+        collisionDetection: closestCenter,
+        modifiers: [restrictToHorizontalAxis, restrictToParentElement],
+        children: [/*#__PURE__*/_jsx(SortableContext, {
+          items: openKeys.map(function (i) {
+            return i.key;
+          }),
+          strategy: horizontalListSortingStrategy,
+          children: /*#__PURE__*/_jsx(DefaultTabBar, _objectSpread(_objectSpread({}, tabBarProps), {}, {
+            children: function children(node) {
+              return /*#__PURE__*/_createElement(DraggableTabNode, _objectSpread(_objectSpread({}, node.props), {}, {
+                key: node.key
+              }), node);
+            }
+          }))
+        }), /*#__PURE__*/_jsx(TabDragOverlay, {
+          activeId: activeId,
+          openKeys: openKeys,
+          basePath: basePath,
+          affixRouter: affixRouter,
+          open: open,
+          onReload: onReload,
+          refresh: refresh,
+          drop: drop,
+          setOpenkeys: setOpenkeys,
+          setOpen: setOpen,
+          navigate: navigate
+        })]
+      });
+    }
+  });
+};
+export default NavTabBar;

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

@@ -0,0 +1,179 @@
+// 注意：这是 CSS Module，文件里的每个类名都会被哈希。antd 的类名必须写在 :global() 里，
+// 否则 `.ant-tabs-nav` 会被编译成一串哈希，永远匹配不到 antd 渲染出的 DOM —— 规则不会报错，
+// 只是静悄悄地全部失效。本库其余组件的样式都遵循这个写法。
+.NavTabBar {
+  padding: 6px 8px 0px;
+
+  // Modern look: keep the white strip; the active tab is a light teal pill
+  background: var(--vita-surface);
+
+  border-bottom: 1px solid var(--vita-border);
+
+  // 把根类重复一次（编译成 `.x.x`），只为提一档权重。antd 的卡片样式是
+  // `:where(...).ant-tabs-card.ant-tabs-small.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab`，
+  // `:where()` 不计权重，正好和这里的四个类打平 —— 打平时后注入的赢，而 antd 的
+  // CSS-in-JS 是运行时插进 <head> 的，永远在后面，圆角这类就会被它盖回卡片样式。
+  &.NavTabBar {
+    :global(.ant-tabs-nav) {
+      height: 36px;
+      margin-bottom: 0px;
+
+      &::before {
+        border-bottom: none;
+      }
+
+      // Card-style tabs do not need the bottom ink bar
+      :global(.ant-tabs-ink-bar) {
+        display: none;
+      }
+
+      :global(.ant-tabs-nav-list) {
+        :global(.ant-tabs-tab) {
+          position: relative;
+
+          padding: 0px;
+          margin: 0px;
+
+          border: none;
+          border-radius: 8px;
+          background: transparent;
+
+          transition: background 0.2s;
+
+          & + :global(.ant-tabs-tab) {
+            margin-left: 4px;
+          }
+
+          :global(.ant-tabs-tab-btn) {
+            color: var(--vita-muted-foreground);
+
+            > .tabLabel {
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              column-gap: 5px;
+
+              width: 100%;
+              height: 100%;
+              padding: 6px 16px;
+            }
+
+            > .tabLabel.legacyClosableTabLabel {
+              padding-right: 36px;
+            }
+          }
+
+          &:hover {
+            background: var(--vita-border-weak);
+          }
+
+          &:global(.ant-tabs-tab-active) {
+            background: var(--vita-muted);
+
+            :global(.ant-tabs-tab-btn) {
+              color: var(--vita-primary);
+              font-weight: 500;
+            }
+          }
+
+          :global(.ant-tabs-tab-remove) {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+
+          &:has(:global(.ant-tabs-tab-remove)) {
+            :global(.ant-tabs-tab-btn) {
+              > .tabLabel {
+                padding-right: 36px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // extra 区域自身没有高度，撑满后才能和页签对齐；右边那条竖线把刷新按钮和页签分开
+    :global(.ant-tabs-extra-content) {
+      display: flex;
+      align-items: center;
+      align-self: stretch;
+
+      margin-right: 8px;
+      padding-right: 8px;
+
+      border-right: 1px solid var(--vita-border-weak);
+    }
+
+    // 「刷新当前页」按钮
+    .reload {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 28px;
+      height: 28px;
+      padding: 0px;
+
+      color: var(--vita-muted-foreground);
+
+      &:hover {
+        color: var(--vita-primary);
+      }
+    }
+
+    :global(.ant-tabs-nav-operations) {
+      > button {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.popover {
+  // antd v6 里承载内边距的是 .ant-popover-container，v5 的 .ant-popover-inner 已经没有了 ——
+  // 照着 v5 写不会报错，只是这条规则永远不生效，右键菜单会白白多出一圈 12px 内边距
+  :global(.ant-popover-container) {
+    padding: 0px;
+  }
+
+  .part {
+    display: flex;
+    flex-direction: column;
+
+    padding: 6px 0px;
+
+    border-bottom: 1px solid var(--vita-border-weak);
+
+    :global(.ant-btn) {
+      justify-content: flex-start;
+
+      border-radius: 0px;
+    }
+  }
+}
+
+.dragOverlay {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+  opacity: 0.9;
+
+  height: 34px;
+  padding: 6px 16px;
+
+  background: var(--vita-surface);
+  border-radius: 6px 6px 0 0;
+  border: 1px solid var(--vita-border);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  .tabLabel {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 5px;
+  }
+}

package/es/layout/Theme/ThemeStore.d.ts

@@ -0,0 +1,18 @@
+export type Layout = "left" | "top" | "mixed";
+export type Theme = "light" | "dark";
+export type HeaderTheme = "light" | "dark" | "theme";
+export type Appearance = "light" | "dark" | "system";
+declare class ThemeStore {
+    get appearance(): Appearance;
+    private _appearance;
+    private _systemDark;
+    get isDark(): boolean;
+    get layout(): Layout;
+    get headerTheme(): HeaderTheme;
+    get theme(): Theme;
+    constructor();
+    private _setSystemDark;
+    setAppearance: (appearance: Appearance) => void;
+}
+declare const _default: ThemeStore;
+export default _default;

package/es/layout/Theme/ThemeStore.js

@@ -0,0 +1,80 @@
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+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 { readStorage, writeStorage, STORAGE_KEY } from "../_utils/storage";
+import { makeAutoObservable } from "mobx";
+
+// Three appearance modes (light / dark / follow system)
+var ThemeStore = /*#__PURE__*/function () {
+  function ThemeStore() {
+    var _this = this;
+    _classCallCheck(this, ThemeStore);
+    _defineProperty(this, "_appearance", "system");
+    // Whether the system is currently dark (takes effect when appearance=system)
+    _defineProperty(this, "_systemDark", false);
+    _defineProperty(this, "_setSystemDark", function (v) {
+      _this._systemDark = v;
+    });
+    _defineProperty(this, "setAppearance", function (appearance) {
+      _this._appearance = appearance;
+      writeStorage(STORAGE_KEY.APPEARANCE, appearance);
+    });
+    makeAutoObservable(this);
+    var cached = readStorage(STORAGE_KEY.APPEARANCE);
+    if (cached === "light" || cached === "dark" || cached === "system") {
+      this._appearance = cached;
+    }
+
+    // Listen for system color-scheme changes, following in real time when appearance=system
+    if (typeof window !== "undefined" && window.matchMedia) {
+      var mq = window.matchMedia("(prefers-color-scheme: dark)");
+      this._systemDark = mq.matches;
+      mq.addEventListener("change", function (e) {
+        return _this._setSystemDark(e.matches);
+      });
+    }
+  }
+  _createClass(ThemeStore, [{
+    key: "appearance",
+    get:
+    // Appearance mode selected by the user
+    function get() {
+      return this._appearance;
+    }
+  }, {
+    key: "isDark",
+    get:
+    // Resolved actual dark-mode state
+    function get() {
+      if (this._appearance === "system") return this._systemDark;
+      return this._appearance === "dark";
+    }
+
+    // Fixed left layout; switching is no longer offered
+  }, {
+    key: "layout",
+    get: function get() {
+      return "left";
+    }
+
+    // Nav light/dark follows the appearance
+  }, {
+    key: "headerTheme",
+    get: function get() {
+      return this.isDark ? "dark" : "light";
+    }
+
+    // Content theme follows the appearance
+  }, {
+    key: "theme",
+    get: function get() {
+      return this.isDark ? "dark" : "light";
+    }
+  }]);
+  return ThemeStore;
+}();
+export default new ThemeStore();

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

@@ -0,0 +1,30 @@
+import React from "react";
+export interface ThemeProps {
+    children?: React.ReactNode;
+    /** 深色导航渐变的两端色，不传用内置值 */
+    navDarkColors?: {
+        top: string;
+        bottom: string;
+    };
+}
+/**
+ * 外观控制器 + 布局专属配色。
+ *
+ * 这里刻意**不**做全局主题 —— 色板、圆角、字号、控件高度、明暗算法、focus ring 都由本库的
+ * `ConfigProvider` 从设计令牌统一产出。这个组件只负责两件它独有的事：
+ *
+ * 1. **写 `html[data-theme]`**。令牌的 CSS 变量与 `useIsDark` 都监听这个属性，但**没有人写它** ——
+ *    这是外观三态（light / dark / 跟随系统）落地的地方，也是这个组件存在的主要理由。
+ * 2. **侧栏与导航的配色**。菜单选中态的胶囊、深色导航的渐变，这些是布局特有的，
+ *    通用令牌覆盖不到，用一层就近的 antd ConfigProvider 叠加（antd 的嵌套规则：内层胜）。
+ *
+ * 移植时去掉的（本库已有，留着会重复甚至打架）：
+ * - 自己包一层 antd ConfigProvider 做全局主题、切 darkAlgorithm  -> ConfigProvider
+ * - hexToRgba                                                   -> styles/tokens 的 withAlpha
+ * - 自存一份主题色（原来固定是青色）                                -> antd useToken 里当前生效的 colorPrimary
+ * - matchMedia 监听系统深色                                       -> useIsDark
+ * - borderRadius / colorBorder / Table / Card / Button / Input 等成套 token 覆盖 -> toAntdTheme
+ * - 在包裹元素上内联重定义 --cf-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
+ */
+declare const Theme: React.FC<ThemeProps>;
+export default Theme;

package/es/layout/Theme/index.js

@@ -0,0 +1,89 @@
+import React, { useEffect, useMemo } from "react";
+import { ConfigProvider as AntdConfigProvider, theme as antdTheme } from "antd";
+import { observer } from "mobx-react-lite";
+import classNames from "classnames";
+import styles from "./index.module.scss";
+import ThemeStore from "./ThemeStore";
+import { lightTokens, darkTokens, withAlpha } from "../../styles/tokens";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 外观控制器 + 布局专属配色。
+ *
+ * 这里刻意**不**做全局主题 —— 色板、圆角、字号、控件高度、明暗算法、focus ring 都由本库的
+ * `ConfigProvider` 从设计令牌统一产出。这个组件只负责两件它独有的事：
+ *
+ * 1. **写 `html[data-theme]`**。令牌的 CSS 变量与 `useIsDark` 都监听这个属性，但**没有人写它** ——
+ *    这是外观三态（light / dark / 跟随系统）落地的地方，也是这个组件存在的主要理由。
+ * 2. **侧栏与导航的配色**。菜单选中态的胶囊、深色导航的渐变，这些是布局特有的，
+ *    通用令牌覆盖不到，用一层就近的 antd ConfigProvider 叠加（antd 的嵌套规则：内层胜）。
+ *
+ * 移植时去掉的（本库已有，留着会重复甚至打架）：
+ * - 自己包一层 antd ConfigProvider 做全局主题、切 darkAlgorithm  -> ConfigProvider
+ * - hexToRgba                                                   -> styles/tokens 的 withAlpha
+ * - 自存一份主题色（原来固定是青色）                                -> antd useToken 里当前生效的 colorPrimary
+ * - matchMedia 监听系统深色                                       -> useIsDark
+ * - borderRadius / colorBorder / Table / Card / Button / Input 等成套 token 覆盖 -> toAntdTheme
+ * - 在包裹元素上内联重定义 --cf-*：那会盖掉 tokens.scss 生成的值，属于主动帮倒忙
+ */
+var Theme = observer(function (props) {
+  var _navDarkColors$top, _navDarkColors$bottom;
+  var children = props.children,
+    navDarkColors = props.navDarkColors;
+  var isDark = ThemeStore.isDark;
+  var t = isDark ? darkTokens : lightTokens;
+
+  // 主色取**当前生效**的那个，而不是自己再存一份 —— 消费方在 ConfigProvider 上换了
+  // primaryColor，导航的选中态要跟着换，否则菜单会是一个和全站无关的颜色。
+  var _antdTheme$useToken = antdTheme.useToken(),
+    token = _antdTheme$useToken.token;
+  var primaryColor = token.colorPrimary;
+
+  // 写 data-theme：CSS 变量与 useIsDark 都看它。
+  useEffect(function () {
+    document.documentElement.dataset.theme = isDark ? "dark" : "light";
+  }, [isDark]);
+  var themeConfig = useMemo(function () {
+    return {
+      components: {
+        Layout: {
+          headerBg: t.surface,
+          siderBg: t.surface
+        },
+        Menu: {
+          // 背景透明，好让导航的渐变透出来；选中态是一颗圆角胶囊
+          darkItemBg: "transparent",
+          darkSubMenuItemBg: "transparent",
+          darkPopupBg: t.surface,
+          darkItemColor: "rgba(255, 255, 255, 0.82)",
+          darkItemHoverColor: "#ffffff",
+          darkItemHoverBg: "rgba(255, 255, 255, 0.14)",
+          darkItemSelectedBg: withAlpha(primaryColor, 0.16),
+          darkItemSelectedColor: primaryColor,
+          itemSelectedBg: withAlpha(primaryColor, 0.12),
+          itemSelectedColor: primaryColor,
+          itemActiveBg: withAlpha(primaryColor, 0.12),
+          itemHoverBg: isDark ? "rgba(255, 255, 255, 0.06)" : "rgba(0, 0, 0, 0.04)",
+          itemColor: t.foreground,
+          itemBorderRadius: 6,
+          itemMarginInline: 8,
+          itemMarginBlock: 2,
+          itemHeight: 38,
+          horizontalItemHoverBg: "#0000000a"
+        }
+      }
+    };
+  }, [isDark, primaryColor, t]);
+  return /*#__PURE__*/_jsx(AntdConfigProvider, {
+    theme: themeConfig,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames(styles.theme, isDark ? "dark" : "light"),
+      style: {
+        "--nav-dark-top": (_navDarkColors$top = navDarkColors === null || navDarkColors === void 0 ? void 0 : navDarkColors.top) !== null && _navDarkColors$top !== void 0 ? _navDarkColors$top : "#1f1f1f",
+        "--nav-dark-bottom": (_navDarkColors$bottom = navDarkColors === null || navDarkColors === void 0 ? void 0 : navDarkColors.bottom) !== null && _navDarkColors$bottom !== void 0 ? _navDarkColors$bottom : "#141414"
+      },
+      children: children
+    })
+  });
+});
+Theme.displayName = "Theme";
+export default Theme;

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

@@ -0,0 +1,6 @@
+.theme {
+  width: 100vw;
+  height: 100vh;
+
+  overflow: hidden;
+}

package/es/layout/_hooks/useDropTab.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const NavTabBarContent: import("react").Context<{
+    dropKey?: string | undefined;
+    setDropKey?: ((key: string) => void) | undefined;
+}>;
+export default function useDropTab(): (key: string) => void;

package/es/layout/_hooks/useDropTab.js

@@ -0,0 +1,13 @@
+import { createContext, useContext, useCallback } from "react";
+export var NavTabBarContent = /*#__PURE__*/createContext({});
+export default function useDropTab() {
+  var _useContext = useContext(NavTabBarContent),
+    setDropKey = _useContext.setDropKey;
+  var drop = useCallback(function (key) {
+    setDropKey === null || setDropKey === void 0 || setDropKey(key);
+    setTimeout(function () {
+      setDropKey === null || setDropKey === void 0 || setDropKey("");
+    }, 0);
+  }, [setDropKey]);
+  return drop;
+}