@hsu-react/ui 0.0.25 → 2.0.0

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

package/src/components/Form/index.md

@@ -157,6 +157,24 @@ export default () => {
 };
 ```
 
+## antd 原生成员
+
+除了上面三个本库封装的表单形态，`Form` 还原样透出了 antd 的成员，省得再单独 `import { Form } from "antd"`：
+
+```tsx | pure
+Form.Item          // antd 的 Form.Item
+Form.List
+Form.ErrorList
+Form.Provider
+Form.useForm
+Form.useWatch
+Form.useFormInstance
+```
+
+> **`Form.Item` 与顶层导出的 `FormItem` 不是一个东西。** `Form.Item` 是 antd 原生的，保持 antd 语义；
+> `FormItem` 是本库的增强版（label 宽度计算、tips 气泡、`hasPermi` 权限、按 `type` 自动生成 placeholder 等）。
+> 刻意不让 `Form.Item` 指向增强版，否则同名不同 API，出问题时很难排查。
+
 ## API
 
 `Form` 是一个对象，包含以下成员：

package/src/components/Form/index.tsx

@@ -9,14 +9,32 @@ interface FormType {
   Modal: React.FC<ModalFormProps>;
   Drawer: React.FC<DrawerFormProps>;
   Import: React.FC<ImportFormProps>;
+  /**
+   * antd 的 `Form.Item`，原样透出。
+   *
+   * 注意与库顶层导出的 `FormItem` 区分：那个是本库自己的增强版（带 label 宽度计算、
+   * tips、权限、按 type 生成 placeholder 等）。这里保持 antd 语义，避免同名不同 API。
+   */
+  Item: typeof AntdForm.Item;
+  List: typeof AntdForm.List;
+  ErrorList: typeof AntdForm.ErrorList;
+  Provider: typeof AntdForm.Provider;
   useForm: typeof AntdForm.useForm;
+  useWatch: typeof AntdForm.useWatch;
+  useFormInstance: typeof AntdForm.useFormInstance;
 }
 
 const Form: FormType = {
   Modal: ModalForm,
   Drawer: DrawerForm,
   Import: ImportForm,
+  Item: AntdForm.Item,
+  List: AntdForm.List,
+  ErrorList: AntdForm.ErrorList,
+  Provider: AntdForm.Provider,
   useForm: AntdForm.useForm,
+  useWatch: AntdForm.useWatch,
+  useFormInstance: AntdForm.useFormInstance,
 };
 
 export default Form;

package/src/components/FormItem/FormInput/FormPasswordStrength/index.module.scss

@@ -19,9 +19,9 @@
     height: 6px;
 
     border: 0;
-    border-radius: 6px;
+    border-radius: var(--vita-radius-sm);
 
-    background-color: var(--cf-border);
+    background-color: var(--vita-border);
   }
 
   /* When value is in [min, low] */
@@ -53,7 +53,7 @@
 
     background-color: transparent;
 
-    border-color: var(--cf-surface);
+    border-color: var(--vita-surface);
     border-style: solid;
     border-width: 0 5px;
   }

package/src/components/FormItem/FormRadio/index.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
 
-  color: var(--cf-text);
+  color: var(--vita-foreground);
   font-size: 14px;
 
   > label {
@@ -21,8 +21,8 @@
       > span:global(.ant-radio) {
         width: 24px;
         min-width: 24px;
-        height: 24px;
-        min-height: 24px;
+        height: var(--vita-control-height-sm);
+        min-height: var(--vita-control-height-sm);
 
         border-radius: 2px;
 
@@ -31,12 +31,10 @@
           height: 100%;
         }
 
-        :global(.ant-radio-inner) {
-          width: 100%;
-          height: 100%;
-
-          border-radius: inherit;
-          border-color: var(--cf-border) !important;
+        // v6 draws the dot on `.ant-radio` itself (the old `.ant-radio-inner` span is gone),
+        // so the fill-the-parent sizing is dropped.
+        & {
+          border-color: var(--vita-border) !important;
 
           background: transparent !important;
 
@@ -66,7 +64,7 @@
         }
 
         &:global(.ant-radio-checked) {
-          :global(.ant-radio-inner) {
+          & {
             background: rgba(255, 255, 255, 1) !important;
 
             &::after {
@@ -78,16 +76,16 @@
         }
 
         &:global(.ant-radio-disabled) {
-          :global(.ant-radio-inner) {
+          & {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
-              border-color: var(--cf-border) !important;
+              border-color: var(--vita-border) !important;
             }
           }
 
           &:global(.ant-radio-checked) {
-            :global(.ant-radio-inner) {
+            & {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }

package/src/components/FormItem/FormSegmented/index.module.scss

@@ -1,7 +1,7 @@
 .FormSegmented {
   height: 100%;
 
-  color: var(--cf-text);
+  color: var(--vita-foreground);
 
   :global(.ant-segmented-group) {
     height: 100%;

package/src/components/FormItem/FormSlider/index.module.scss

@@ -9,7 +9,7 @@
 
   box-shadow: none !important;
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius-xs);
 
   background-color: transparent !important;
 }

package/src/components/FormItem/FormUpload/FormImage/index.tsx

@@ -1,4 +1,5 @@
-import { UploadFile, notification } from "antd";
+import { UploadFile } from "antd";
+import { notification } from "../../../../feedback";
 import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
 import React, { ReactNode, useState } from "react";
 import Upload, { UploadProps as BasicUploadProps } from "../../../Upload";

package/src/components/FormItem/FormUpload/index.module.scss

@@ -5,7 +5,7 @@
     height: max-content;
 
     .upBtn {
-      height: 32px;
+      height: var(--vita-control-height);
     }
   }
 
@@ -20,12 +20,12 @@
       cursor: not-allowed;
 
       > div {
-        background-color: var(--cf-subtle);
+        background-color: var(--vita-muted);
 
-        border-color: var(--cf-border);
+        border-color: var(--vita-border);
 
         > span {
-          color: var(--cf-text-3) !important;
+          color: var(--vita-subtle-foreground) !important;
         }
       }
     }
@@ -47,7 +47,7 @@
       width: max-content;
       height: 46px;
 
-      border: 1px solid var(--cf-border);
+      border: 1px solid var(--vita-border);
 
       > span {
         &:first-child {
@@ -61,9 +61,9 @@
           font-family: Noto Sans SC;
           font-size: 18px;
           font-weight: 500;
-          color: var(--cf-text);
+          color: var(--vita-foreground);
 
-          border-right: 1px solid var(--cf-border);
+          border-right: 1px solid var(--vita-border);
         }
 
         &:nth-child(2) {
@@ -77,7 +77,7 @@
           font-family: Noto Sans SC;
           font-size: 18px;
           font-weight: 500;
-          color: var(--cf-text-2);
+          color: var(--vita-muted-foreground);
 
           > a {
             white-space: nowrap;
@@ -93,33 +93,33 @@
       font-family: Noto Sans SC;
       font-size: 18px;
       font-weight: 500;
-      color: var(--cf-text-2);
+      color: var(--vita-muted-foreground);
     }
   }
 
   &:global(.ant-upload-drag) {
     height: 180px;
 
-    border-radius: 8px;
-    border: 1px dashed color-mix(in srgb, var(--primary-color) 60%, transparent);
-    background: color-mix(in srgb, var(--primary-color) 2%, transparent);
+    border-radius: var(--vita-radius);
+    border: 1px dashed color-mix(in srgb, var(--vita-primary) 60%, transparent);
+    background: color-mix(in srgb, var(--vita-primary) 2%, transparent);
 
     transition: all 0.3s;
 
     &:hover {
-      background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+      background: color-mix(in srgb, var(--vita-primary) 8%, transparent);
 
-      border-color: var(--primary-color);
+      border-color: var(--vita-primary);
     }
 
     .uploadIcon {
       font-size: 40px;
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
 
     .uploadText {
       font-size: 14px;
-      color: var(--cf-text);
+      color: var(--vita-foreground);
 
       > div:first-child {
         margin: 16px 0 8px;
@@ -127,7 +127,7 @@
 
       > div:last-child {
         font-size: 12px;
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
       }
     }
   }

package/src/components/FormItem/FormUpload/index.tsx

@@ -1,4 +1,5 @@
-import { Button, UploadFile, notification } from "antd";
+import { Button, UploadFile } from "antd";
+import { notification } from "../../../feedback";
 import FormImage, { FormImageProps } from "./FormImage";
 import ItemContainer, { ItemContainerProps } from "../ItemContainer";
 import Upload, {