@hsu-react/ui 1.0.0 → 2.0.1

package/lib/layout/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NavTabBarContent", {
+  enumerable: true,
+  get: function () {
+    return _useDropTab.NavTabBarContent;
+  }
+});
+Object.defineProperty(exports, "NavTabBarTitleContent", {
+  enumerable: true,
+  get: function () {
+    return _useSetTabTitle.NavTabBarTitleContent;
+  }
+});
+Object.defineProperty(exports, "ReloadContent", {
+  enumerable: true,
+  get: function () {
+    return _useReload.ReloadContent;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "useDropTab", {
+  enumerable: true,
+  get: function () {
+    return _useDropTab.default;
+  }
+});
+Object.defineProperty(exports, "useReload", {
+  enumerable: true,
+  get: function () {
+    return _useReload.default;
+  }
+});
+Object.defineProperty(exports, "useSetTabTitle", {
+  enumerable: true,
+  get: function () {
+    return _useSetTabTitle.default;
+  }
+});
+var _Breadcrumb = _interopRequireDefault(require("./Breadcrumb"));
+var _Header = _interopRequireDefault(require("./Header"));
+var _I18n = _interopRequireDefault(require("./I18n"));
+var _Menu = _interopRequireDefault(require("./Menu"));
+var _NavTabBar = _interopRequireDefault(require("./NavTabBar"));
+var _Theme = _interopRequireDefault(require("./Theme"));
+var _I18nStore = _interopRequireDefault(require("./I18n/I18nStore"));
+var _ThemeStore = _interopRequireDefault(require("./Theme/ThemeStore"));
+var _useSetTabTitle = _interopRequireWildcard(require("./_hooks/useSetTabTitle"));
+var _useReload = _interopRequireWildcard(require("./_hooks/useReload"));
+var _useDropTab = _interopRequireWildcard(require("./_hooks/useDropTab"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 中后台布局组件。
+ *
+ * 这几个组件是路由驱动的：菜单、面包屑、页签都从一份 `RouteType[]` 里读展示信息，并用
+ * react-router 的 `useLocation` / `useNavigate` 决定当前位置与跳转。因此 **`react-router`
+ * 与 `react-intl` 是可选 peerDependency** —— 只用 Button、Table 这些的项目完全不受影响，
+ * 用到 `Layout.*` 的项目才需要装。
+ *
+ * 与本库其余部分的分工：主题、色板、圆角这些由 `ConfigProvider` 统一提供，`Layout.Theme`
+ * 只负责外观三态（light / dark / 跟随系统）与侧栏导航的专属配色。
+ */
+
+/**
+ * 各组件的公开类型。第一个真实消费方（vita-admin-starter）一上来就需要 `AccountAction`
+ * 与 `MenuType` —— 前者用来声明账号菜单，后者用来存 mixed 布局回传的子项。它们原本只在
+ * 各自模块里导出，消费方只能写 `@hsu-react/ui/es/layout/Header` 这种深路径，等于把内部
+ * 目录结构变成公开契约。统一从这里出。
+ */
+
+/**
+ * 显式标注这个命名空间的类型，而不是让 TS 去推断。
+ *
+ * 推断会把两类东西泄进 d.ts：mobx store 的私有字段（TS4094），以及各组件的 Props 类型 ——
+ * 那些没有被导出，消费方那边无法解析（TS4023）。react-intl 的内部依赖同理（TS2742）。
+ * 这些都只在开了 declaration 的发包构建里才会暴露，本地跑 dev 看不出来。
+ */
+
+const Layout = {
+  /** 顶栏：标题、面包屑、语言与外观切换、账号菜单 */
+  Header: _Header.default,
+  /** 侧边 / 顶部菜单 */
+  Menu: _Menu.default,
+  /** 面包屑 */
+  Breadcrumb: _Breadcrumb.default,
+  /** 多页签栏（可拖拽排序、右键菜单） */
+  NavTabBar: _NavTabBar.default,
+  /** 外观三态与布局配色 */
+  Theme: _Theme.default,
+  /** react-intl provider + antd locale */
+  I18n: _I18n.default,
+  /** 外观状态（mobx），供应用侧读写 appearance */
+  ThemeStore: _ThemeStore.default,
+  /** 语言状态（mobx），供应用侧读写 locale */
+  I18nStore: _I18nStore.default
+};
+var _default = exports.default = Layout;

package/lib/layout/types.d.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import type { RouteObject } from "react-router";
+/**
+ * 路由的附加信息。菜单、面包屑、页签这三个组件都从这里取展示所需的一切 ——
+ * 它们不认识业务，只认识这个形状。
+ *
+ * 字段分两类，下面用分组标出：**布局组件真正会读的**，以及**只是搭车放在这里、由消费方
+ * 自己消费的**。后者原样保留是因为它们本来就写在同一份路由配置里（鉴权守卫、KeepAlive
+ * 包装、懒加载装配各取所需），把它们从类型里删掉只会逼消费方再声明一次。
+ */
+export interface MetaType {
+    /** 菜单项 / 面包屑 / 页签上显示的文案 */
+    name?: string;
+    /**
+     * 是否作为菜单项展示。注意是**显式开启**：只有为 `true` 的路由才会进 Menu，
+     * 不写等同于不进菜单（但路由本身照常可访问）。
+     */
+    menu?: boolean;
+    icon?: ReactNode;
+    /** 选中态图标；不传则沿用 `icon`。只对没有子项的菜单项生效 */
+    activeIcon?: ReactNode;
+    /** 菜单项置灰不可点 */
+    disabled?: boolean;
+    /** 固定页签，不可关闭，也不会被「关闭其他 / 关闭右侧」清掉 */
+    affix?: boolean;
+    /** 不进入页签栏 */
+    noTabsView?: boolean;
+    /** 二级导航：该路由的子级换到次级菜单里展示（配合 Menu 的 secondaryHeader） */
+    secondary?: boolean;
+    /** 页面标题，供消费方写 document.title 等用途 */
+    title?: string;
+    /** 不做页面缓存，供消费方决定是否用 react-activation 的 KeepAlive 包裹 */
+    noCache?: boolean;
+    /** 不走懒加载，供消费方装配路由时判断 */
+    noLazy?: boolean;
+    /** 无需登录即可访问，供消费方的鉴权守卫判断 */
+    noAuth?: boolean;
+    /** 权限码，供消费方在生成路由时用 usePermissions / ConfigProvider.permissions 过滤 */
+    hasPermi?: string[];
+}
+/**
+ * 路由配置。在 react-router 的 `RouteObject` 上加了 `meta`。
+ *
+ * 这个类型原本定义在消费方的 `@/router/router.config` 里，布局组件反过来 import 它 ——
+ * 那样组件就绑死在某个具体应用上了。收进库里之后，消费方改为让自己的路由配置符合这个
+ * 形状（`RouteObject` 本来就是 react-router 的标准类型，通常不用改任何东西）。
+ */
+export type RouteType = {
+    children?: RouteType[];
+    meta?: MetaType;
+} & RouteObject;

package/lib/layout/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/request/index.js

@@ -44,9 +44,13 @@ let impl = {
 
 /** Inject the real request implementation (only the methods you use need to be provided) */
 const configureRequest = request => {
+  // 过滤 undefined：`configureRequest({ get: undefined })` 会把键写进去、值为 undefined，
+  // 从而覆盖掉上面那个抛错兜底 —— 调用时报的就成了 "impl.get is not a function"，
+  // 而不是那句告诉你「忘了注入 request」的提示。
+  const provided = Object.fromEntries(Object.entries(request).filter(([, fn]) => typeof fn === "function"));
   impl = {
     ...impl,
-    ...request
+    ...provided
   };
 };
 exports.configureRequest = configureRequest;

package/lib/styles/_responsive.scss

@@ -0,0 +1,53 @@
+// =============================================================
+// 本文件由 scripts/gen-tokens-scss.cjs 从 src/styles/tokens.json 生成，请勿手改。
+//
+// 用法：
+//   @use "../../styles/responsive" as r;
+//   .panel { padding: 24px; @include r.down(md) { padding: 12px; } }
+//   .row   { &:hover { background: …; } }  // 触屏上 hover 会「粘住」
+//   .row   { @include r.hover { &:hover { background: …; } } }  // 正确写法
+// =============================================================
+
+$breakpoints: (
+  sm: 640px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  xxl: 1536px,
+);
+
+@function bp($name) {
+  @if not map-has-key($breakpoints, $name) {
+    @error "未知断点 #{$name}，可用：#{map-keys($breakpoints)}";
+  }
+  @return map-get($breakpoints, $name);
+}
+
+/// 视口 < 断点（移动优先的「小屏覆盖」）
+@mixin down($name) {
+  @media (max-width: #{bp($name) - 0.02px}) {
+    @content;
+  }
+}
+
+/// 视口 >= 断点
+@mixin up($name) {
+  @media (min-width: #{bp($name)}) {
+    @content;
+  }
+}
+
+/// 真正有悬停能力的设备（鼠标 / 触控板）。
+/// 触屏上 :hover 会在点击后「粘住」，直到点别处才消失 —— 所有 hover 态都该包在这里。
+@mixin hover {
+  @media (hover: hover) and (pointer: fine) {
+    @content;
+  }
+}
+
+/// 触摸设备（粗指针、无悬停）。用于放大点按目标、去掉仅悬停可见的操作。
+@mixin touch {
+  @media (hover: none), (pointer: coarse) {
+    @content;
+  }
+}

package/lib/styles/antd-overload.scss

@@ -1,5 +1,66 @@
 // Design tokens (colors/fonts/radii/shadows, incl. dark theme) — importing this file brings in the full set of variables
 @use "./tokens";
+@use "./responsive" as r;
+
+// =============================================================
+// 触摸设备
+//
+// 常见的误解是「移动端要把 onClick 换成 onTouchStart」。不需要 —— 触摸事件序列本来就会
+// 合成 click，onClick 在触屏上一直可用；换成 touch 反而丢键盘可访问性、滚动时误触发、
+// 并与合成 click 重复触发。移动端真正要处理的是下面这几件。
+// =============================================================
+
+// 1) 点击延迟：浏览器为了等双击缩放，会把 click 推迟约 300ms。声明本元素不需要双击缩放
+//    即可立即触发。只加在交互元素上，不用 `*`（那会连带禁掉正文的双击缩放）。
+button,
+a,
+[role="button"],
+label,
+input,
+select,
+textarea,
+.ant-btn,
+.ant-select,
+.ant-picker,
+.ant-checkbox-wrapper,
+.ant-radio-wrapper,
+.ant-switch,
+.ant-pagination-item,
+.ant-table-column-has-sorters {
+  touch-action: manipulation;
+
+  // 2) 点击时浮出的那一层：移动浏览器默认 -webkit-tap-highlight-color 是
+  //    rgba(51, 181, 229, 0.4)，点按时会在元素盒子上铺一层半透明高亮。它是 UA 层的覆盖物，
+  //    与 border / background 无关，所以设 `border: none` 压根不起作用 —— 这也是「移动端
+  //    点击出现一层边框」这个现象的真正来源。
+  //
+  //    把它改成透明即可，不需要把 onClick 换成 onTouch。换事件之所以看起来也能消掉，是因为
+  //    绕过了合成 click 与聚焦，代价是丢键盘可访问性、滚动误触发、以及与合成 click 重复触发。
+  //    （聚焦本身不是问题：实测触摸点击后 :focus-visible 并不匹配，焦点环不会出现。）
+  -webkit-tap-highlight-color: transparent;
+}
+
+@include r.touch {
+  // 3) 粘住的 hover 态：触屏点完之后 :hover 会一直保持到点别处为止，导致「有一行永远高亮」。
+  //    这里把 antd 几处最显眼的悬停面中和掉；本库自己的组件用 responsive.scss 的 hover mixin。
+  .ant-table-tbody > tr:hover > td,
+  .ant-table-tbody > tr.ant-table-row:hover > td,
+  .ant-select-item-option:hover,
+  .ant-menu-item:hover,
+  .ant-dropdown-menu-item:hover {
+    background: inherit;
+  }
+
+  // 4) 点按目标：粗指针下 24px 的图标按钮很难点中。给最小可点面积兜底，
+  //    用 min-height 而不是 height，避免撑坏已有布局。
+  .ant-btn-sm,
+  .ant-pagination-item,
+  .ant-pagination-prev,
+  .ant-pagination-next {
+    min-width: var(--vita-control-height);
+    min-height: var(--vita-control-height);
+  }
+}
 
 .ant-layout-sider-children {
   display: flex;
@@ -51,7 +112,7 @@
 
       width: 3px;
 
-      background: var(--primary-color);
+      background: var(--vita-primary);
       border-radius: 3px;
     }
   }
@@ -66,7 +127,7 @@
     line-height: 1.4;
     text-transform: uppercase;
 
-    color: var(--cf-text-3);
+    color: var(--vita-subtle-foreground);
   }
 
   // Items within a group use more restrained left-aligned indentation (closer to CF)
@@ -93,25 +154,21 @@
 
 // ===== Cloudflare style: Tags use outlined style with a light background =====
 .ant-tag {
-  border-radius: 6px;
+  border-radius: var(--vita-radius-sm);
 }
 
 .ant-notification {
   top: 50px !important;
 
-  .ant-notification-notice-with-icon {
-    display: flex;
-    flex-direction: column;
-    row-gap: 8px;
-
-    .ant-notification-notice-message {
-      margin-bottom: 0px !important;
-    }
+  // antd v6 dropped the `.ant-notification-notice-with-icon` wrapper; message and description are
+  // laid out by the notice itself now.
+  .ant-notification-notice-message {
+    margin-bottom: 0px !important;
+  }
 
-    .ant-notification-notice-description {
-      &:empty {
-        display: none;
-      }
+  .ant-notification-notice-description {
+    &:empty {
+      display: none;
     }
   }
 }
@@ -120,17 +177,16 @@
   display: flex;
   flex-direction: column;
 
-  .ant-tabs-content-holder {
+  // antd v6 removed the `.ant-tabs-content-holder` wrapper — `.ant-tabs-content` is now a direct
+  // child of `.ant-tabs`, so it takes over the flex sizing.
+  .ant-tabs-content {
     flex: 1;
 
     min-height: 0px;
+    height: 100%;
 
-    .ant-tabs-content {
+    .ant-tabs-tabpanel {
       height: 100%;
-
-      .ant-tabs-tabpane {
-        height: 100%;
-      }
     }
   }
 }

package/lib/styles/tokens.d.ts

@@ -1,26 +1,126 @@
 /**
- * TS constants for the Hsu UI design tokens (for JS-side consumers such as antd themeConfig).
- * The CSS-variable version lives in ./tokens.scss; the two must be kept in sync.
+ * The JS half of the design-token layer.
+ *
+ * `tokens.json` is the single source of truth. This module types it and maps it onto antd's
+ * `theme.token`; `scripts/gen-tokens-scss.cjs` maps the same file onto the `--vita-*` CSS
+ * variables. Neither half is hand-written against the other, which is what let the previous
+ * tokens.ts / tokens.scss pair drift (their headers literally said "the two must be kept in sync").
+ *
+ * Why antd needs the literal values rather than the CSS variables: `colorPrimary` is run through
+ * @ant-design/colors to derive a 10-step palette, so it has to be a real colour. Handing it
+ * `var(--vita-primary)` produces a palette of garbage. The practical consequence is that changing
+ * the brand colour at runtime cannot be done by overriding the CSS variable alone — go through
+ * `<ConfigProvider primaryColor={...}>`, which sets both halves at once.
  */
+import type { ThemeConfig } from "antd";
 export interface HsuThemeTokens {
     /** Page canvas */
-    canvas: string;
-    /** Card/panel background */
+    background: string;
+    /** Card / panel background */
     surface: string;
-    /** Table header/secondary background */
-    subtle: string;
-    /** Border */
+    /** Secondary background (table headers, read-only areas) */
+    muted: string;
     border: string;
-    /** Lighter border */
     borderWeak: string;
-    /** Header bar background */
+    /** Primary text */
+    foreground: string;
+    /** Secondary text */
+    mutedForeground: string;
+    /** Placeholder / disabled text */
+    subtleForeground: string;
+    /** Row / item hover background */
+    hover: string;
+    success: string;
+    warning: string;
+    error: string;
+    shadow1: string;
+    shadow2: string;
+    shadow3: string;
+}
+/**
+ * 2.0 之前的字段名。CSS 变量那侧留了 `--cf-*` 别名，但这里的 TS 字段是直接改名的 ——
+ * 消费方写 `lightTokens.canvas` 会直接拿到 undefined，且没有任何提示。补上映射。
+ *
+ * `headerBg` 在重命名时被整个删掉了（没有对应的新名），这里指回 `surface`：2.0 之前
+ * 两者在浅色下同为 #ffffff、暗色下同为卡片底色，语义上就是「顶栏用的面」。
+ */
+export interface LegacyThemeTokens {
+    /** @deprecated 用 `background` */
+    canvas: string;
+    /** @deprecated 用 `muted` */
+    subtle: string;
+    /** @deprecated 用 `surface` */
     headerBg: string;
+    /** @deprecated 用 `foreground` */
     text: string;
+    /** @deprecated 用 `mutedForeground` */
     text2: string;
+    /** @deprecated 用 `subtleForeground` */
     text3: string;
+    /** @deprecated 用 `hover` */
     rowHover: string;
 }
-export declare const lightTokens: HsuThemeTokens;
-export declare const darkTokens: HsuThemeTokens;
-/** Default primary color (initial value of the CSS variable --primary-color; consuming projects may override at runtime) */
-export declare const defaultPrimaryColor = "#1677ff";
+export declare const lightTokens: HsuThemeTokens & LegacyThemeTokens;
+export declare const darkTokens: HsuThemeTokens & LegacyThemeTokens;
+/** Default brand colour; consuming projects override it via `ConfigProvider.primaryColor` */
+export declare const defaultPrimaryColor: string;
+export declare const radius: {
+    xs: number;
+    sm: number;
+    base: number;
+    lg: number;
+};
+export declare const fontTokens: {
+    family: string;
+    sizeSm: number;
+    size: number;
+    sizeLg: number;
+};
+export declare const controlTokens: {
+    height: number;
+    heightSm: number;
+    heightLg: number;
+    ringWidth: number;
+};
+/**
+ * 弹窗宽度尺度。此前各弹窗自己写死（ImportForm 600、SecondConf 800、ModalForm 800/1200），
+ * 没有共同依据；收成一条尺度后至少有据可循。
+ */
+export declare const modalWidth: {
+    sm: number;
+    md: number;
+    lg: number;
+};
+/**
+ * 断点。与 `styles/_responsive.scss` 的 mixin 同源，所以 JS 判断不会和 CSS 媒体查询错开。
+ */
+export declare const breakpoints: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number; /** Default brand colour; consuming projects override it via `ConfigProvider.primaryColor` */
+    xxl: number;
+};
+/**
+ * `#rgb` / `#rrggbb` → `rgba(...)`. Only used to keep antd's focus ring at the same opacity as
+ * `--vita-ring`; anything it cannot parse is handed back untouched so antd falls back to deriving
+ * the ring itself.
+ */
+/**
+ * 把 hex 颜色加上透明度。传入不是 hex（例如已经是 rgba / CSS 变量）时原样返回，
+ * 让调用方的值照常生效而不是变成 `NaN`。
+ */
+export declare const withAlpha: (color: string, alpha: number) => string;
+/**
+ * Build antd's `theme.token` from the same tokens the CSS variables come from, so a component
+ * this library has *not* wrapped still lands on the same palette, radii and type scale as one it
+ * has. This is the lever that keeps the look consistent without wrapping all 75 antd components.
+ */
+export declare const toAntdTheme: (options?: {
+    dark?: boolean;
+    primaryColor?: string;
+}) => ThemeConfig["token"];
+/**
+ * 组件级令牌覆盖，补 `toAntdTheme` 里全局令牌覆盖不到的地方。
+ */
+export declare const toAntdComponents: () => ThemeConfig["components"];