@hsu-react/ui 0.0.25 → 2.0.0

package/src/request/index.ts

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

package/src/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/src/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/src/styles/tokens.json

@@ -0,0 +1,82 @@
+{
+  "$comment": [
+    "Single source of truth for the Hsu UI design tokens.",
+    "",
+    "Two consumers read this file and must never drift apart:",
+    "  1. scripts/gen-tokens-scss.cjs emits src/styles/tokens.scss (the --vita-* CSS variables)",
+    "  2. src/styles/tokens.ts turns it into antd's `theme.token` object",
+    "",
+    "It is JSON rather than TS precisely so the generator can read it without a TS runtime, and",
+    "it must stay plain values: antd derives 10-step palettes from colorPrimary via",
+    "@ant-design/colors, which needs a real colour — a `var(--vita-primary)` string would break",
+    "the derivation. That is why the CSS-variable layer is generated *from* here and not the",
+    "other way round.",
+    "",
+    "Palette follows shadcn/ui's zinc scale; the brand accent stays configurable."
+  ],
+  "primary": "#1677ff",
+  "light": {
+    "background": "#fafafa",
+    "surface": "#ffffff",
+    "muted": "#f4f4f5",
+    "border": "#e4e4e7",
+    "borderWeak": "#f4f4f5",
+    "foreground": "#09090b",
+    "mutedForeground": "#71717a",
+    "subtleForeground": "#a1a1aa",
+    "hover": "#f4f4f5",
+    "success": "#16a34a",
+    "warning": "#f59e0b",
+    "error": "#ef4444",
+    "shadow1": "0 1px 2px 0 rgba(9, 9, 11, 0.05)",
+    "shadow2": "0 4px 6px -1px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.06)",
+    "shadow3": "0 10px 15px -3px rgba(9, 9, 11, 0.1), 0 4px 6px -4px rgba(9, 9, 11, 0.08)"
+  },
+  "dark": {
+    "background": "#09090b",
+    "surface": "#18181b",
+    "muted": "#27272a",
+    "border": "#27272a",
+    "borderWeak": "#1f1f23",
+    "foreground": "#fafafa",
+    "mutedForeground": "#a1a1aa",
+    "subtleForeground": "#71717a",
+    "hover": "#27272a",
+    "success": "#22c55e",
+    "warning": "#fbbf24",
+    "error": "#f87171",
+    "shadow1": "0 1px 2px 0 rgba(0, 0, 0, 0.4)",
+    "shadow2": "0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4)",
+    "shadow3": "0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5)"
+  },
+  "radius": {
+    "xs": 4,
+    "sm": 6,
+    "base": 8,
+    "lg": 12
+  },
+  "font": {
+    "family": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"PingFang SC\", \"Microsoft YaHei\", Arial, sans-serif",
+    "sizeSm": 12,
+    "size": 14,
+    "sizeLg": 16
+  },
+  "control": {
+    "height": 32,
+    "heightSm": 24,
+    "heightLg": 40,
+    "ringWidth": 2
+  },
+  "modalWidth": {
+    "sm": 600,
+    "md": 800,
+    "lg": 1200
+  },
+  "breakpoint": {
+    "sm": 640,
+    "md": 768,
+    "lg": 1024,
+    "xl": 1280,
+    "xxl": 1536
+  }
+}

package/src/styles/tokens.scss

@@ -1,62 +1,109 @@
 // =============================================================
-// Hsu UI design tokens (single source of truth)
-// Two value sets, light/dark; dark is activated by html[data-theme="dark"] (Theme toggle in consuming projects)
-// or html[data-prefers-color-scheme="dark"] (dumi docs site).
-// TS-side constants live in ./tokens.ts (for JS consumers such as antd themeConfig); the two must be kept in sync.
+// 本文件由 scripts/gen-tokens-scss.cjs 从 src/styles/tokens.json 生成，请勿手改。
+// 改令牌请改 tokens.json，然后跑 `yarn tokens`（build / prepublish 会自动跑并校验）。
+//
+// 暗色由 html[data-theme="dark"] 激活（消费方主题开关），
+// 或 html[data-prefers-color(-scheme)="dark"]（dumi 文档站）。
 // =============================================================
 
 :root {
-  // ---- Colors - neutral ----
-  --cf-canvas: #f6f7f9; // Page canvas
-  --cf-surface: #ffffff; // Card/panel background
-  --cf-subtle: #fafbfc; // Table header/secondary background
-  --cf-border: #e6e8eb; // Border
-  --cf-border-weak: #eceef1; // Lighter border
-  --cf-text: rgba(0, 0, 0, 0.88);
-  --cf-text-2: rgba(0, 0, 0, 0.45);
-  --cf-text-3: rgba(0, 0, 0, 0.35);
-  --cf-row-hover: #f6f7f9;
-
-  // ---- Colors - brand & functional ----
-  --primary-color: #1677ff; // Default primary color (consuming projects may override at runtime)
-  --cf-success: #52c41a;
-  --cf-warning: #faad14;
-  --cf-error: #ff4d4f;
-
-  // ---- Fonts ----
-  --cf-font-family:
-    PingFangSC-Regular, "PingFang SC", -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
-  --cf-font-size-sm: 12px;
-  --cf-font-size: 14px;
-  --cf-font-size-lg: 16px;
-
-  // ---- Border radius ----
-  --cf-radius-sm: 6px;
-  --cf-radius: 8px;
-  --cf-radius-lg: 12px;
-
-  // ---- Shadows (the CF look relies mainly on borders; shadows are for overlays only) ----
-  --cf-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
-  --cf-shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08);
-  --cf-shadow-3: 0 8px 24px rgba(16, 24, 40, 0.12);
+  // ---- 品牌色 ----
+  // 兼容位：2.0 之前消费方就是通过覆盖 --primary-color 换主题色的，
+  // 所以真源反过来引用它，两种写法都生效。
+  --primary-color: #1677ff;
+  --vita-primary: var(--primary-color);
+  --vita-primary-foreground: #ffffff;
+  // focus ring：shadcn 的 2px 环。收成令牌之前各组件各写各的透明度
+  // （6% / 10% / 12% / 20% 都出现过），聚焦态在不同控件上深浅不一。
+  --vita-ring: color-mix(in srgb, var(--vita-primary) 35%, transparent);
+  --vita-ring-error: color-mix(in srgb, var(--vita-error) 30%, transparent);
+  --vita-ring-width: 2px;
+  --vita-focus-ring: 0 0 0 var(--vita-ring-width) var(--vita-ring);
+  --vita-focus-ring-error: 0 0 0 var(--vita-ring-width) var(--vita-ring-error);
+
+  // ---- 中性色（浅色）----
+  --vita-background: #fafafa; // 页面画布
+  --vita-surface: #ffffff; // 卡片 / 面板背景
+  --vita-muted: #f4f4f5; // 次级背景（表头、只读区）
+  --vita-border: #e4e4e7; // 边框
+  --vita-border-weak: #f4f4f5; // 更浅的分隔线
+  --vita-foreground: #09090b; // 主文字
+  --vita-muted-foreground: #71717a; // 次级文字
+  --vita-subtle-foreground: #a1a1aa; // 占位 / 禁用文字
+  --vita-hover: #f4f4f5; // 行 / 项 hover 背景
+  --vita-success: #16a34a;
+  --vita-warning: #f59e0b;
+  --vita-error: #ef4444;
+  --vita-shadow-1: 0 1px 2px 0 rgba(9, 9, 11, 0.05); // 浮层阴影 - 弱
+  --vita-shadow-2: 0 4px 6px -1px rgba(9, 9, 11, 0.08), 0 2px 4px -2px rgba(9, 9, 11, 0.06); // 浮层阴影 - 中
+  --vita-shadow-3: 0 10px 15px -3px rgba(9, 9, 11, 0.1), 0 4px 6px -4px rgba(9, 9, 11, 0.08); // 浮层阴影 - 强
+
+  // ---- 字体 ----
+  --vita-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
+  --vita-font-size-sm: 12px;
+  --vita-font-size: 14px;
+  --vita-font-size-lg: 16px;
+
+  // ---- 圆角 ----
+  --vita-radius-xs: 4px;
+  --vita-radius-sm: 6px;
+  --vita-radius: 8px;
+  --vita-radius-lg: 12px;
+
+  // ---- 控件高度 ----
+  --vita-control-height: 32px;
+  --vita-control-height-sm: 24px;
+  --vita-control-height-lg: 40px;
+
+  // ---- 断点（媒体查询用不了 CSS 变量，这里只是让 JS 侧与文档能读到同一份值；
+  //      真正的断点判断走 styles/_responsive.scss 的 mixin 或 useBreakpoint）----
+  --vita-screen-sm: 640px;
+  --vita-screen-md: 768px;
+  --vita-screen-lg: 1024px;
+  --vita-screen-xl: 1280px;
+  --vita-screen-xxl: 1536px;
+
+  // ---- 兼容别名（2.0 前的 --cf-*，单向指向新名）----
+  --cf-canvas: var(--vita-background);
+  --cf-surface: var(--vita-surface);
+  --cf-subtle: var(--vita-muted);
+  --cf-border: var(--vita-border);
+  --cf-border-weak: var(--vita-border-weak);
+  --cf-text: var(--vita-foreground);
+  --cf-text-2: var(--vita-muted-foreground);
+  --cf-text-3: var(--vita-subtle-foreground);
+  --cf-row-hover: var(--vita-hover);
+  --cf-success: var(--vita-success);
+  --cf-warning: var(--vita-warning);
+  --cf-error: var(--vita-error);
+  --cf-font-family: var(--vita-font-family);
+  --cf-font-size-sm: var(--vita-font-size-sm);
+  --cf-font-size: var(--vita-font-size);
+  --cf-font-size-lg: var(--vita-font-size-lg);
+  --cf-radius-sm: var(--vita-radius-sm);
+  --cf-radius: var(--vita-radius);
+  --cf-radius-lg: var(--vita-radius-lg);
+  --cf-shadow-1: var(--vita-shadow-1);
+  --cf-shadow-2: var(--vita-shadow-2);
+  --cf-shadow-3: var(--vita-shadow-3);
 }
 
 html[data-theme="dark"],
 html[data-prefers-color="dark"],
 html[data-prefers-color-scheme="dark"] {
-  --cf-canvas: #131314;
-  --cf-surface: #1c1c1e;
-  --cf-subtle: #232325;
-  --cf-border: rgba(255, 255, 255, 0.12);
-  --cf-border-weak: rgba(255, 255, 255, 0.08);
-  --cf-text: rgba(255, 255, 255, 0.85);
-  --cf-text-2: rgba(255, 255, 255, 0.45);
-  --cf-text-3: rgba(255, 255, 255, 0.35);
-  --cf-row-hover: rgba(255, 255, 255, 0.04);
-
-  // Deeper shadows in dark mode (to distinguish overlays from the dark background)
-  --cf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
-  --cf-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
-  --cf-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55);
+  --vita-background: #09090b;
+  --vita-surface: #18181b;
+  --vita-muted: #27272a;
+  --vita-border: #27272a;
+  --vita-border-weak: #1f1f23;
+  --vita-foreground: #fafafa;
+  --vita-muted-foreground: #a1a1aa;
+  --vita-subtle-foreground: #71717a;
+  --vita-hover: #27272a;
+  --vita-success: #22c55e;
+  --vita-warning: #fbbf24;
+  --vita-error: #f87171;
+  --vita-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  --vita-shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
+  --vita-shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
 }