@hsu-react/ui 2.1.0 → 2.2.1

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

@@ -35,7 +35,10 @@
           margin: 0px;
 
           border: none;
-          border-radius: 8px;
+          // 只圆上面两角：页签是「贴在内容区上沿」的，下沿要与内容区接平，
+          // 四角全圆会让它看起来像一颗浮在栏里的胶囊、和下方内容脱开。
+          // 与拖拽时的浮层（.dragOverlay）保持同一形状。
+          border-radius: 8px 8px 0 0;
           background: transparent;
 
           transition: background 0.2s;
@@ -166,7 +169,8 @@
   padding: 6px 16px;
 
   background: var(--vita-surface);
-  border-radius: 6px 6px 0 0;
+  // 与页签同一形状（上圆下方、同一半径），拖起来才像是把那颗页签拎了起来
+  border-radius: 8px 8px 0 0;
   border: 1px solid var(--vita-border);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 

package/es/layout/index.d.ts

@@ -26,6 +26,13 @@ export type { RouteType, MetaType } from "./types";
  */
 export type { AccountAction, HeaderProps } from "./Header";
 export type { MenuType, MenuProps } from "./Menu";
+/**
+ * 次级菜单的默认头部。`Menu` 在切到次级菜单时会自己渲染它，一般不用管；
+ * 需要在返回入口下面塞点东西（详情内检索框之类）时，把它的 `extra` 用起来、
+ * 整块作为 `secondaryHeader` 传给 `Menu`。
+ */
+export { default as SecondaryHeader } from "./Menu/_components/SecondaryHeader";
+export type { SecondaryHeaderProps } from "./Menu/_components/SecondaryHeader";
 export type { TabType, NavTabBarProps } from "./NavTabBar";
 export type { BreadcrumbType, BreadcrumbProps } from "./Breadcrumb";
 export type { InternationalizationProps } from "./I18n";

package/es/layout/index.js

@@ -25,6 +25,12 @@ import ThemeStore from "./Theme/ThemeStore";
  * 目录结构变成公开契约。统一从这里出。
  */
 
+/**
+ * 次级菜单的默认头部。`Menu` 在切到次级菜单时会自己渲染它，一般不用管；
+ * 需要在返回入口下面塞点东西（详情内检索框之类）时，把它的 `extra` 用起来、
+ * 整块作为 `secondaryHeader` 传给 `Menu`。
+ */
+export { default as SecondaryHeader } from "./Menu/_components/SecondaryHeader";
 export { default as useSetTabTitle, NavTabBarTitleContent } from "./_hooks/useSetTabTitle";
 export { default as useReload, ReloadContent } from "./_hooks/useReload";
 export { default as useDropTab, NavTabBarContent } from "./_hooks/useDropTab";

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

@@ -35,7 +35,10 @@
           margin: 0px;
 
           border: none;
-          border-radius: 8px;
+          // 只圆上面两角：页签是「贴在内容区上沿」的，下沿要与内容区接平，
+          // 四角全圆会让它看起来像一颗浮在栏里的胶囊、和下方内容脱开。
+          // 与拖拽时的浮层（.dragOverlay）保持同一形状。
+          border-radius: 8px 8px 0 0;
           background: transparent;
 
           transition: background 0.2s;
@@ -166,7 +169,8 @@
   padding: 6px 16px;
 
   background: var(--vita-surface);
-  border-radius: 6px 6px 0 0;
+  // 与页签同一形状（上圆下方、同一半径），拖起来才像是把那颗页签拎了起来
+  border-radius: 8px 8px 0 0;
   border: 1px solid var(--vita-border);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 

package/lib/layout/index.d.ts

@@ -26,6 +26,13 @@ export type { RouteType, MetaType } from "./types";
  */
 export type { AccountAction, HeaderProps } from "./Header";
 export type { MenuType, MenuProps } from "./Menu";
+/**
+ * 次级菜单的默认头部。`Menu` 在切到次级菜单时会自己渲染它，一般不用管；
+ * 需要在返回入口下面塞点东西（详情内检索框之类）时，把它的 `extra` 用起来、
+ * 整块作为 `secondaryHeader` 传给 `Menu`。
+ */
+export { default as SecondaryHeader } from "./Menu/_components/SecondaryHeader";
+export type { SecondaryHeaderProps } from "./Menu/_components/SecondaryHeader";
 export type { TabType, NavTabBarProps } from "./NavTabBar";
 export type { BreadcrumbType, BreadcrumbProps } from "./Breadcrumb";
 export type { InternationalizationProps } from "./I18n";

package/lib/layout/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ReloadContent", {
     return _useReload.ReloadContent;
   }
 });
+Object.defineProperty(exports, "SecondaryHeader", {
+  enumerable: true,
+  get: function () {
+    return _SecondaryHeader.default;
+  }
+});
 exports.default = void 0;
 Object.defineProperty(exports, "useDropTab", {
   enumerable: true,
@@ -48,6 +54,7 @@ var _NavTabBar = _interopRequireDefault(require("./NavTabBar"));
 var _Theme = _interopRequireDefault(require("./Theme"));
 var _I18nStore = _interopRequireDefault(require("./I18n/I18nStore"));
 var _ThemeStore = _interopRequireDefault(require("./Theme/ThemeStore"));
+var _SecondaryHeader = _interopRequireDefault(require("./Menu/_components/SecondaryHeader"));
 var _useSetTabTitle = _interopRequireWildcard(require("./_hooks/useSetTabTitle"));
 var _useReload = _interopRequireWildcard(require("./_hooks/useReload"));
 var _useDropTab = _interopRequireWildcard(require("./_hooks/useDropTab"));
@@ -73,6 +80,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * 目录结构变成公开契约。统一从这里出。
  */
 
+/**
+ * 次级菜单的默认头部。`Menu` 在切到次级菜单时会自己渲染它，一般不用管；
+ * 需要在返回入口下面塞点东西（详情内检索框之类）时，把它的 `extra` 用起来、
+ * 整块作为 `secondaryHeader` 传给 `Menu`。
+ */
+
 /**
  * 显式标注这个命名空间的类型，而不是让 TS 去推断。
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

package/src/layout/Menu/index.md

@@ -41,3 +41,33 @@ import Layout from "@hsu-react/ui/es/layout";
 | secondaryItemFilter | 次级菜单项的额外过滤，按 key（绝对路径）判断 | `(key: string) => boolean` | - |
 
 > 其余属性透传给 antd 的 [Menu](https://ant.design/components/menu-cn)。
+
+### 自定义次级菜单头部
+
+不传 `secondaryHeader` 时组件会渲染一个默认头部（返回入口 ＋ 当前实体名）。要在它上面加东西
+——比如详情内检索框——不用整块重写，把 `SecondaryHeader` 拿出来用它的 `extra` 插槽：
+
+```tsx | pure
+import Layout, { SecondaryHeader } from "@hsu-react/ui/es/layout";
+
+<Layout.Menu
+  router={router}
+  secondaryHeader={
+    <SecondaryHeader
+      collapsed={collapsed}
+      theme="dark"
+      title={work.name}
+      extra={<SearchInWork workId={work.id} />}
+    />
+  }
+/>;
+```
+
+| SecondaryHeader 属性 | 说明 | 类型 |
+| --- | --- | --- |
+| collapsed | 侧栏是否收起，收起时只剩箭头 | `boolean` |
+| theme | 明暗，跟随侧栏 | `"light" \| "dark"` |
+| backText | 返回入口文案 | `string` |
+| onBack | 自定义返回行为，不给则退回上一页 | `() => void` |
+| title | 当前实体名 | `string` |
+| extra | 返回入口与标题之间的插槽 | `ReactNode` |

package/src/layout/NavTabBar/index.md

@@ -47,6 +47,8 @@ export default () => (
 
 ## 说明
 
+页签是「贴在内容区上沿」的形状：只圆上面两角，下沿与内容区接平（拖拽时的浮层同形）。
+
 页签由访问过的路由累积而来，文案取 `meta.name`、图标取 `meta.icon`。两个开关直接影响这里：
 
 - `meta.noTabsView` —— 该路由不进页签栏（它的子路由会顶上来）

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

@@ -35,7 +35,10 @@
           margin: 0px;
 
           border: none;
-          border-radius: 8px;
+          // 只圆上面两角：页签是「贴在内容区上沿」的，下沿要与内容区接平，
+          // 四角全圆会让它看起来像一颗浮在栏里的胶囊、和下方内容脱开。
+          // 与拖拽时的浮层（.dragOverlay）保持同一形状。
+          border-radius: 8px 8px 0 0;
           background: transparent;
 
           transition: background 0.2s;
@@ -166,7 +169,8 @@
   padding: 6px 16px;
 
   background: var(--vita-surface);
-  border-radius: 6px 6px 0 0;
+  // 与页签同一形状（上圆下方、同一半径），拖起来才像是把那颗页签拎了起来
+  border-radius: 8px 8px 0 0;
   border: 1px solid var(--vita-border);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 

package/src/layout/index.ts

@@ -29,6 +29,13 @@ export type { RouteType, MetaType } from "./types";
  */
 export type { AccountAction, HeaderProps } from "./Header";
 export type { MenuType, MenuProps } from "./Menu";
+/**
+ * 次级菜单的默认头部。`Menu` 在切到次级菜单时会自己渲染它，一般不用管；
+ * 需要在返回入口下面塞点东西（详情内检索框之类）时，把它的 `extra` 用起来、
+ * 整块作为 `secondaryHeader` 传给 `Menu`。
+ */
+export { default as SecondaryHeader } from "./Menu/_components/SecondaryHeader";
+export type { SecondaryHeaderProps } from "./Menu/_components/SecondaryHeader";
 export type { TabType, NavTabBarProps } from "./NavTabBar";
 export type { BreadcrumbType, BreadcrumbProps } from "./Breadcrumb";
 export type { InternationalizationProps } from "./I18n";