@hsu-react/ui 1.0.0 → 2.0.1

package/src/components/Copy/index.module.scss

@@ -8,18 +8,18 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--cf-text-2);
+  color: var(--vita-muted-foreground);
 
   cursor: pointer;
 
   transition: color 0.3s, background-color 0.3s;
 
   &:hover {
-    color: var(--cf-text);
+    color: var(--vita-foreground);
 
-    background-color: var(--cf-row-hover);
+    background-color: var(--vita-hover);
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
   }
 
   .icon {
@@ -34,7 +34,7 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: var(--cf-text);
+  color: var(--vita-foreground);
 
   cursor: default;
 

package/src/components/Copy/index.tsx

@@ -1,12 +1,13 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, forwardRef, useState } from "react";
 
 import Icon from "../Icon";
 import TurndownService from "turndown";
 import classNames from "classnames";
-import { message } from "antd";
+import { message } from "../../feedback";
 import styles from "./index.module.scss";
 
-export interface CopyProps {
+export interface CopyProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "children"> {
   id: string;
   /** true (default): report via a global toast; false: swap the button for an inline "已复制！" state */
   isMessage?: boolean;
@@ -17,7 +18,13 @@ export interface CopyProps {
   hideIcon?: boolean;
 }
 
-const Copy: React.FC<CopyProps> = (props) => {
+/**
+ * Wrapped in `forwardRef` because antd v6's Trigger (Tooltip / Popover / Dropdown) hands its child
+ * a ref instead of falling back to `findDOMNode` the way v5 did — a plain function component makes
+ * it warn and lose the trigger. The remaining props are spread onto the rendered node for the same
+ * reason: Trigger injects its event handlers by cloning the child.
+ */
+const Copy = forwardRef<HTMLDivElement, CopyProps>((props, ref) => {
   const {
     id,
     isMessage = true,
@@ -26,6 +33,9 @@ const Copy: React.FC<CopyProps> = (props) => {
     copyIcon,
     copyedIcon,
     hideIcon = false,
+    className,
+    onClick,
+    ...rest
   } = props;
   const [copyed, setCopyed] = useState<boolean>(false);
 
@@ -115,27 +125,33 @@ const Copy: React.FC<CopyProps> = (props) => {
     }
   };
 
-  return (
-    <>
-      {copyed ? (
-        <div className={classNames(styles.Copyed)}>
-          {!hideIcon &&
-            (copyedIcon ?? (
-              <Icon icon="ci:check" className={classNames(styles.icon)} />
-            ))}
-          已复制！
-        </div>
-      ) : (
-        <div className={classNames(styles.Copy)} onClick={onCopy}>
-          {!hideIcon &&
-            (copyIcon ?? (
-              <Icon icon="ci:copy" className={classNames(styles.icon)} />
-            ))}
-          {text ?? "复制"}
-        </div>
-      )}
-    </>
+  return copyed ? (
+    <div ref={ref} {...rest} className={classNames(styles.Copyed, className)}>
+      {!hideIcon &&
+        (copyedIcon ?? (
+          <Icon icon="ci:check" className={classNames(styles.icon)} />
+        ))}
+      已复制！
+    </div>
+  ) : (
+    <div
+      ref={ref}
+      {...rest}
+      className={classNames(styles.Copy, className)}
+      onClick={(e) => {
+        onCopy();
+        onClick?.(e);
+      }}
+    >
+      {!hideIcon &&
+        (copyIcon ?? (
+          <Icon icon="ci:copy" className={classNames(styles.icon)} />
+        ))}
+      {text ?? "复制"}
+    </div>
   );
-};
+});
+
+Copy.displayName = "Copy";
 
 export default Copy;

package/src/components/DatePicker/RangePicker/index.module.scss

@@ -13,11 +13,13 @@
 }
 
 .RangePicker {
+  // 同 Input.Number：父级无确定高度时避免被内容撑成 33/35。
+  min-height: var(--vita-control-height);
   width: 0;
   flex: 1;
   height: 100%;
 
-  border-radius: 6px;
+  border-radius: var(--vita-radius);
 
   font-family: inherit;
   font-size: inherit;
@@ -38,6 +40,13 @@
       font-weight: inherit;
       color: inherit;
       text-align: inherit;
+
+      // 字号是 inherit 的（刻意的，控件跟随容器排版）。但 antd 的行高是 1.57 倍字号，
+      // 容器字号一变大，行高 + 上下 padding + 边框就把整个控件顶高：在 16px 的页面里
+      // 实测 25.14 + 8 + 2 = 35，比其他控件高 3px。
+      // DatePicker 有外层 wrapper 兜底，RangePicker 的类直接落在 .ant-picker 上没人拦，
+      // 所以这里固定行高，让外层的 min-height 说了算。
+      line-height: normal;
     }
   }
 }

package/src/components/DatePicker/RangePicker/index.tsx

@@ -4,7 +4,7 @@ import { RangePickerProps as AntdRangePickerProps } from "antd/es/date-picker";
 import dayjs from "dayjs";
 import styles from "./index.module.scss";
 import classNames from "classnames";
-import { PickerRef } from "rc-picker";
+import type { RangePickerRef } from "../../../types/antd";
 import Select, { SelectOption, SelectProps } from "../../Select";
 import { defaultModalPickerGetPopupContainer } from "../defaultModalPickerGetPopupContainer";
 
@@ -49,7 +49,7 @@ const RangePicker: React.FC<RangePickerProps> = (props) => {
     getPopupContainer,
     ...rangePickerConfig
   } = props;
-  const ref = useRef<PickerRef>(null);
+  const ref = useRef<RangePickerRef>(null);
   const [picker, setPicker] = useState<Picker>(pickerProps ?? "date");
   const prevPickerRef = useRef<Picker | undefined>(pickerProps);
   const isInitializedRef = useRef(false);
@@ -157,7 +157,9 @@ const RangePicker: React.FC<RangePickerProps> = (props) => {
       <DatePicker.RangePicker
         {...rangePickerConfig}
         ref={ref}
-        popupClassName={classNames(styles.rangePickerPopup, popupClassName)}
+        classNames={{
+          popup: { root: classNames(styles.rangePickerPopup, popupClassName) },
+        }}
         getPopupContainer={getPopupContainer ?? defaultModalPickerGetPopupContainer}
         className={styles.RangePicker}
         picker={picker}

package/src/components/DatePicker/StepPicker/index.module.scss

@@ -1,3 +1,5 @@
+// 内部这几个按钮此前是 4px 圆角（2.0 之前就写死的 4px，改造时只是原样收进了 radius-xs）。
+// 全库按钮统一到 8px 之后，只有步进选择器这几个还是小圆角，并排时很明显。
 .StepPicker {
   display: flex;
   align-items: center;
@@ -7,10 +9,10 @@
   .icon {
     &:global(.ant-btn-icon-only) {
       width: 32px;
-      height: 32px;
+      height: var(--vita-control-height);
     }
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius);
 
     font-size: 16px;
   }
@@ -18,10 +20,10 @@
   .time {
     width: 32px;
     min-width: max-content;
-    height: 32px;
+    height: var(--vita-control-height);
     padding: 0px 4px;
 
     font-size: 16px;
-    border-radius: 4px;
+    border-radius: var(--vita-radius);
   }
 }

package/src/components/DatePicker/index.module.scss

@@ -5,10 +5,10 @@
 
   width: 100%;
   height: 100%;
-  min-height: 32px;
+  min-height: var(--vita-control-height);
   max-height: max-content;
 
-  border-radius: 6px;
+  border-radius: var(--vita-radius);
 
   font-family: inherit;
   font-size: inherit;

package/src/components/DatePicker/index.tsx

@@ -4,7 +4,7 @@ import {
 } from "antd";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import Select, { SelectOption, SelectProps } from "../Select";
-import { PickerRef } from "rc-picker";
+import type { PickerRef } from "../../types/antd";
 
 import classNames from "classnames";
 import styles from "./index.module.scss";
@@ -168,7 +168,11 @@ const DatePicker: DatePickerFC = (props) => {
       <AntdDatePicker
         {...datePickerProps}
         ref={ref}
-        popupClassName={classNames(styles.datePickerPopup, popupClassName)}
+        // v6 replaced `popupClassName` with the `popup.root` semantic slot; this component's own
+        // `popupClassName` prop is kept as-is for consumers.
+        classNames={{
+          popup: { root: classNames(styles.datePickerPopup, popupClassName) },
+        }}
         getPopupContainer={getPopupContainer ?? defaultModalPickerGetPopupContainer}
         value={value ? dayjs(value.toString()) : undefined}
         defaultValue={defaultValue ? dayjs(defaultValue.toString()) : undefined}
@@ -179,9 +183,13 @@ const DatePicker: DatePickerFC = (props) => {
         })}
         style={{ flex: 1, width: 0 }}
         showTime={showTime}
-        onChange={(v) => {
+        onChange={(value) => {
           let date = "";
 
+          // v6 widened the picker's onChange value to `Dayjs | Dayjs[]`; a non-range picker only
+          // ever hands back a single value.
+          const v = Array.isArray(value) ? value[0] : value;
+
           if (v) {
             if (picker === "date") {
               date = dayjs(v).format("YYYY-MM-DD");

package/src/components/Descriptions/index.md

@@ -40,6 +40,14 @@ export default () => (
 );
 ```
 
+## 子组件
+
+```tsx | pure
+Descriptions.Item  // antd 的 Descriptions.Item
+```
+
+供 JSX 写法，本库更推荐用 `items` 或 `columns`（`columns` 还带权限过滤与排序）。
+
 ## API
 
 在 [antd DescriptionsProps](https://ant.design/components/descriptions-cn) 基础上扩展：

package/src/components/Descriptions/index.tsx

@@ -1,3 +1,4 @@
+import { mergeSemantic } from "../../utils/semantic";
 import React, { CSSProperties, ReactNode, useMemo } from "react";
 import {
   Descriptions as AntdDescriptions,
@@ -23,7 +24,12 @@ interface DescriptionsProps extends AntdDescriptionsProps {
 
 type ItemType = NonNullable<AntdDescriptionsProps["items"]>[number];
 
-const Descriptions: React.FC<DescriptionsProps> = (props) => {
+interface DescriptionsFC extends React.FC<DescriptionsProps> {
+  /** antd 的 `Descriptions.Item`，供 JSX 写法（本库更推荐用 `items` / `columns`） */
+  Item: typeof AntdDescriptions.Item;
+}
+
+const Descriptions = ((props: DescriptionsProps) => {
   const {
     columns,
     dataSource = {},
@@ -134,20 +140,19 @@ const Descriptions: React.FC<DescriptionsProps> = (props) => {
   return (
     <AntdDescriptions
       items={finalItems}
-      classNames={{
-        root: `${styles.Descriptions} ${classNames?.root || ""}`,
+      classNames={mergeSemantic(classNames, (outer) => ({
+        ...outer,
+        // `...classNames` used to be spread *after* these lines, so a caller-supplied slot
+        // silently dropped this component's own class. Merge the two instead.
+        root: `${styles.Descriptions} ${outer.root || ""}`,
         label: `${styles.label} ${
           layout === "horizontal" ? styles.horizontal : ""
-        } ${classNames?.label || ""}`,
-        content: `${styles.content} ${classNames?.content || ""}`,
-        ...classNames,
-      }}
-      styles={{
-        ..._styles,
-        label: {
-          ...(_styles?.label as CSSProperties),
-        } as CSSProperties,
-      }}
+        } ${outer.label || ""}`,
+        content: `${styles.content} ${outer.content || ""}`,
+      }))}
+      // Was `{ ..._styles, label: { ...(_styles?.label) } }` — a no-op that only re-copied `label`
+      // onto itself, and which no longer type-checks now that `styles` may also be a function.
+      styles={_styles}
       colon={colon}
       layout={layout}
       bordered={bordered}
@@ -155,6 +160,8 @@ const Descriptions: React.FC<DescriptionsProps> = (props) => {
       {...escriptionsConfig}
     />
   );
-};
+}) as DescriptionsFC;
+
+Descriptions.Item = AntdDescriptions.Item;
 
 export default Descriptions;

package/src/components/Editor/index.module.scss

@@ -7,14 +7,14 @@
 
   overflow: hidden;
 
-  border: 1px solid var(--cf-border);
-  border-radius: 6px;
+  border: 1px solid var(--vita-border);
+  border-radius: var(--vita-radius);
 
   .toolbar {
-    border-bottom: 1px solid var(--cf-border);
+    border-bottom: 1px solid var(--vita-border);
 
     .w-e-bar-item {
-      color: var(--cf-text-3);
+      color: var(--vita-subtle-foreground);
     }
   }
 
@@ -28,14 +28,14 @@
 
   &.disabled {
     .editor {
-      border-color: var(--cf-border);
+      border-color: var(--vita-border);
 
       cursor: not-allowed;
 
       .w-e-text-container {
-        background-color: var(--cf-subtle);
+        background-color: var(--vita-muted);
 
-        color: var(--cf-text-3);
+        color: var(--vita-subtle-foreground);
       }
     }
   }

package/src/components/FileCol/index.tsx

@@ -30,8 +30,10 @@ const FileCol: React.FC<UrlItemProps> = (props) => {
               {!hideNm && (
                 <Tooltip
                   title={file.name}
-                  color="var(--cf-subtle)"
-                  styles={{ body: { color: "var(--cf-text)", padding: "6px 16px" } }}
+                  color="var(--vita-muted)"
+                  styles={{
+                    container: { color: "var(--vita-foreground)", padding: "6px 16px" },
+                  }}
                 >
                   <span className={styles.fileName}>{file.name}</span>
                 </Tooltip>

package/src/components/FilePreview/_components/BasePreview/index.module.scss

@@ -61,9 +61,9 @@
     max-height: fit-content;
     padding: 20px;
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
     overflow: auto;
 
@@ -73,7 +73,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: var(--cf-surface);
+      background-color: var(--vita-surface);
     }
   }
 }

package/src/components/FilePreview/_components/PdfPreview/index.module.scss

@@ -82,7 +82,7 @@
 
     margin-top: -3%;
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
 
     overflow: auto;
 
@@ -133,11 +133,11 @@
 
     padding: 5px 10px;
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
 
-    box-shadow: var(--cf-shadow-3);
+    box-shadow: var(--vita-shadow-3);
 
     .toolItem {
       display: flex;
@@ -150,18 +150,18 @@
         justify-content: center;
 
         width: 32px;
-        height: 32px;
+        height: var(--vita-control-height);
 
         font-size: 24px;
 
-        border-radius: 4px;
+        border-radius: var(--vita-radius-xs);
 
         transition: background-color 0.3s, color 0.3s;
 
         cursor: pointer;
 
         &:hover {
-          background-color: var(--cf-row-hover);
+          background-color: var(--vita-hover);
         }
 
         &.disabled {

package/src/components/FilePreview/_components/PdfPreview/index.tsx

@@ -1,5 +1,8 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Spin, notification } from "antd";
+// 这里用的是 notification 的 hook 版本（useNotification + contextHolder），本来就在 React
+// 树里、能读到主题，不需要换成 ../../../../feedback 那层代理 —— 那层解决的是**静态方法**
+// 读不到 context 的问题。
 
 import Icon from "../../../Icon";
 import { RenderPDF } from "hsu-utils";
@@ -198,8 +201,11 @@ const PdfPreview: React.FC<PdfPreviewProps> = (props) => {
                 [styles.disabled]: loading || !fileUrl || full,
               })}
               onClick={() => {
-                if (fileUrl && !full) {
-                  window.open(fileUrl, "_blank");
+                // 只放行可导航的协议。fileUrl 通常来自后端，但 FilePreview 展示的本就是
+                // 用户上传的文件，若这个值一路从用户数据流下来，javascript: 会在
+                // 本站源里执行。noopener 同时切断被打开页对 window.opener 的访问。
+                if (fileUrl && !full && /^(https?:|blob:|\/)/i.test(fileUrl)) {
+                  window.open(fileUrl, "_blank", "noopener,noreferrer");
                 }
               }}
             >

package/src/components/FilePreview/index.module.scss

@@ -56,7 +56,7 @@
     height: 90%;
     max-height: fit-content;
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
     overflow: hidden;
   }
 
@@ -71,9 +71,9 @@
     max-height: fit-content;
     padding: 20px;
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
     overflow: auto;
 
@@ -83,7 +83,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: var(--cf-surface);
+      background-color: var(--vita-surface);
     }
   }
 }

package/src/components/Form/DrawerForm/index.tsx

@@ -13,6 +13,7 @@ import classNames from "classnames";
 import styles from "./index.module.scss";
 import useLabelWidth from "../../../hooks/useLabelWidth";
 import usePermissions from "../../../hooks/usePermissions";
+import { mergeSemantic } from "../../../utils/semantic";
 
 export type ExtraFormItem = React.ReactElement<ItemContainerProps>;
 
@@ -40,10 +41,12 @@ const DrawerForm: React.FC<DrawerFormProps> = (props) => {
     onClose,
     reset = true,
     title,
+    // Pulled out of `drawerConfig` on purpose: it is spread *after* the `classNames` prop below,
+    // so leaving it in there would let a caller-supplied `classNames` replace ours wholesale
+    // instead of merging with it.
+    classNames: drawerClassNames,
     ...drawerConfig
   } = props;
-  const { header, body, footer, mask, content, wrapper } =
-    drawerConfig.classNames ?? {};
   const [form] = Form.useForm(externalForm);
   const [labelWidth] = useLabelWidth(formItems);
   const { permitted } = usePermissions(hasPermi);
@@ -68,15 +71,11 @@ const DrawerForm: React.FC<DrawerFormProps> = (props) => {
     <Drawer
       open={open}
       className={classNames(styles.DrawerForm, className)}
-      classNames={{
-        header: `${header ?? ""}`,
-        body: `${styles.body} ${body ?? ""}`,
-        footer: `${footer ?? ""}`,
-        mask: `${mask ?? ""}`,
-        content: `${content ?? ""}`,
-        wrapper: `${wrapper ?? ""}`,
-      }}
-      width={500}
+      classNames={mergeSemantic(drawerClassNames, (outer) => ({
+        ...outer,
+        body: `${styles.body} ${outer.body ?? ""}`,
+      }))}
+      size={500}
       closable={false}
       title={
         <>

package/src/components/Form/ImportForm/index.tsx

@@ -1,4 +1,6 @@
-import { Form, notification } from "antd";
+import { Form } from "antd";
+import { notification } from "../../../feedback";
+import { modalWidth } from "../../../styles/tokens";
 import FormItem, {
   PlaceholderDict,
   PlaceholderDictEn,
@@ -14,6 +16,7 @@ import styles from "./index.module.scss";
 import useLabelWidth from "../../../hooks/useLabelWidth";
 import usePermissions from "../../../hooks/usePermissions";
 import Modal, { ModalProps } from "../../Modal";
+import { mergeSemantic } from "../../../utils/semantic";
 import { FileRes } from "../../../request";
 
 export interface ImportFormProps extends Omit<ModalProps, "onCancel" | "onOk"> {
@@ -43,7 +46,6 @@ const ImportForm: React.FC<ImportFormProps> = observer((props) => {
     uploadProps,
     ...modalConfig
   } = props;
-  const { header, body, footer, mask, content, wrapper } = classNames;
   const { permitted } = usePermissions(hasPermi);
 
   const onExport = () => {
@@ -93,16 +95,13 @@ const ImportForm: React.FC<ImportFormProps> = observer((props) => {
       open={open}
       centered
       className={`${styles.ImportForm} ${className ?? ""}`}
-      width={600}
-      classNames={{
-        header: `${header ?? ""}`,
-        body: `${styles.body} ${body ?? ""}`,
-        footer: `${footer ?? ""}`,
-        mask: `${mask ?? ""}`,
-        content: `${content ?? ""}`,
-        wrapper: `${wrapper ?? ""}`,
-      }}
-      maskClosable={false}
+      width={modalWidth.sm}
+      classNames={mergeSemantic(classNames, (outer) => ({
+        ...outer,
+        body: `${styles.body} ${outer.body ?? ""}`,
+      }))}
+      // v6 folded `maskClosable` into the `mask` config object
+      mask={{ closable: false }}
       footer={false}
       {...modalConfig}
     >

package/src/components/Form/ModalForm/index.tsx

@@ -1,4 +1,5 @@
 import { Form, FormInstance } from "antd";
+import { modalWidth } from "../../../styles/tokens";
 import Modal, { ModalProps } from "../../Modal";
 import FormItem, {
   PlaceholderDict,
@@ -11,7 +12,8 @@ import { ItemContainerProps } from "../../FormItem/ItemContainer";
 import styles from "./index.module.scss";
 import usePermissions from "../../../hooks/usePermissions";
 import { useFormItems } from "./_hooks/useFormItems";
-import { FormRef } from "rc-field-form";
+import type { FormRef } from "../../../types/antd";
+import { mergeSemantic } from "../../../utils/semantic";
 import { useAdaptiveColumnNum } from "./_hooks/useAdaptiveColumnNum";
 
 export type ExtraFormItem = React.ReactElement<ItemContainerProps>;
@@ -68,7 +70,6 @@ const ModalForm: React.FC<ModalFormProps> = (props) => {
     formWrapperClassName,
     ...modalConfig
   } = props;
-  const { header, body, footer, mask, content, wrapper } = classNames;
   const [form] = Form.useForm(externalForm);
   const { permitted } = usePermissions(hasPermi);
   const formRef = useRef<FormRef | null>(null);
@@ -123,16 +124,13 @@ const ModalForm: React.FC<ModalFormProps> = (props) => {
       }`}
       onCancel={_onCancel}
       onOk={_onOk}
-      width={layout === "horizontal" ? "1200px" : "800px"}
-      classNames={{
-        header: `${header ?? ""}`,
-        body: `${styles.body} ${body ?? ""}`,
-        footer: `${footer ?? ""}`,
-        mask: `${mask ?? ""}`,
-        content: `${content ?? ""}`,
-        wrapper: `${wrapper ?? ""}`,
-      }}
-      maskClosable={false}
+      width={layout === "horizontal" ? modalWidth.lg : modalWidth.md}
+      classNames={mergeSemantic(classNames, (outer) => ({
+        ...outer,
+        body: `${styles.body} ${outer.body ?? ""}`,
+      }))}
+      // v6 folded `maskClosable` into the `mask` config object
+      mask={{ closable: false }}
       {...modalConfig}
     >
       <div