@hsu-react/ui 1.0.0 → 2.0.1

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

@@ -47,21 +47,22 @@
       }
 
       :global(.ant-pagination-options-size-changer) {
-        :global(.ant-select-selector) {
+        // antd v6 flattened Select: the box moved from the `.ant-select-selector` child onto the
+        // `.ant-select` root, and the value now lives in `.ant-select-content`.
+        :global(.ant-select) {
           height: 100% !important;
+        }
 
-          :global(.ant-select-selection-item) {
-            display: flex;
-            align-items: center;
+        :global(.ant-select-content) {
+          display: flex;
+          align-items: center;
 
-            line-height: normal !important;
-          }
+          line-height: normal !important;
         }
 
-        :global(.ant-select-arrow) {
+        // The suffix sits in the flex flow now, so it needs no vertical re-centring.
+        :global(.ant-select-suffix) {
           margin-top: 0px;
-
-          transform: translateY(-50%);
         }
       }
 
@@ -79,8 +80,8 @@
   &.bordered {
     > li {
       &:not(:global(.ant-pagination-options)):not(:global(.ant-pagination-total-text)) {
-        border: 1px solid var(--cf-border);
-        border-radius: 4px;
+        border: 1px solid var(--vita-border);
+        border-radius: var(--vita-radius-xs);
       }
 
       &:global(.ant-pagination-item) {
@@ -90,8 +91,8 @@
             :global(.ant-pagination-item-disabled)
           ):hover,
         &:global(.ant-pagination-item-active) {
-          background-color: var(--primary-color, #1890ff);
-          border-color: var(--primary-color, #1890ff);
+          background-color: var(--vita-primary, #1890ff);
+          border-color: var(--vita-primary, #1890ff);
 
           > a {
             color: #ffffff;
@@ -99,7 +100,7 @@
         }
 
         &:not(:global(.ant-pagination-item-active)):not(:global(.ant-pagination-item-disabled)) {
-          border-color: var(--cf-border);
+          border-color: var(--vita-border);
         }
 
         &:not(:global(.ant-pagination-item-active)):global(.ant-pagination-item-disabled) {
@@ -110,7 +111,7 @@
           }
 
           > a {
-            color: var(--cf-text-3);
+            color: var(--vita-subtle-foreground);
 
             cursor: not-allowed;
           }
@@ -164,10 +165,10 @@
     justify-content: center;
     column-gap: 3px;
 
-    height: 24px;
+    height: var(--vita-control-height-sm);
     padding: 0px 5px;
 
-    border-radius: 6px;
+    border-radius: var(--vita-radius-sm);
 
     font-size: 12px;
     line-height: 16px;
@@ -179,7 +180,7 @@
     user-select: none;
 
     &:hover {
-      background-color: var(--cf-subtle);
+      background-color: var(--vita-muted);
     }
 
     .icon {

package/src/components/Pagination/index.tsx

@@ -5,7 +5,7 @@ import {
 } from "antd";
 import React, { ReactNode, useMemo, useRef } from "react";
 
-import { BaseSelectRef } from "rc-select";
+import type { SelectRef } from "../../types/antd";
 import Icon from "../Icon";
 import classNames from "classnames";
 import styles from "./index.module.scss";
@@ -35,7 +35,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     showTotal,
     align,
   } = props;
-  const selectRef = useRef<BaseSelectRef>(null);
+  const selectRef = useRef<SelectRef>(null);
   // Pass the raw values directly without defaults; let usePaginationSync handle them itself
   const { _pageNum, _pageSize, setPageNum, setPageSize } = usePaginationSync({
     current: props.current,

package/src/components/Panel/DefaultPanel/index.module.scss

@@ -43,9 +43,9 @@
   width: 100%;
   padding: 10px;
 
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
   // CF style: outlined white card
-  border-radius: 8px;
-  border: 1px solid var(--cf-border);
+  border-radius: var(--vita-radius);
+  border: 1px solid var(--vita-border);
 }

package/src/components/Panel/IframePanel/index.module.scss

@@ -57,9 +57,9 @@
     height: 60px;
 
     font-size: 50px;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
 
-    background: var(--cf-surface);
+    background: var(--vita-surface);
 
     border-radius: 50%;
 

package/src/components/Panel/IframePanel/index.tsx

@@ -26,7 +26,11 @@ const IframePanel: React.FC<IframePanelProps> = (props) => {
           {children}
         </div>
       ) : (
-        <Spin spinning={spinning} wrapperClassName={styles.spin} size="large">
+        <Spin
+          spinning={spinning}
+          classNames={{ root: styles.spin }}
+          size="large"
+        >
           <iframe {...coreProps} ref={ref} onLoad={() => setSpinning(false)} />
         </Spin>
       )}

package/src/components/Panel/ListPanel/ListModalPanel/index.module.scss

@@ -34,9 +34,9 @@
     width: 100%;
     min-height: 0px;
 
-    background: var(--cf-surface);
+    background: var(--vita-surface);
 
-    border-radius: 8px;
+    border-radius: var(--vita-radius);
 
     .tips {
       width: 100%;

package/src/components/Panel/ListPanel/ListModalPanel/index.tsx

@@ -5,7 +5,7 @@ import Search, {
 } from "../../../Search";
 import Table, { ColumnsType, TableProps } from "../../../Table";
 
-import { ChakraButtonProps as BasicButtonProps } from "../../../Button";
+import { ButtonProps as HsuButtonProps } from "../../../Button";
 import { TabBarProps } from "../../../TabBar";
 import {
   FullscreenExitOutlined,
@@ -19,7 +19,7 @@ import Modal, { ModalProps } from "../../../Modal";
 import ToolBar from "../_components/ToolBar";
 import ColumnMgt from "../_components/ColumnMgt";
 
-interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+interface ButtonProps extends Omit<HsuButtonProps, "children" | "title"> {
   title?: ReactNode;
   children?: ReactNode;
 }

package/src/components/Panel/ListPanel/_components/ColumnMgt/index.module.scss

@@ -3,19 +3,19 @@
     cursor: default;
 
     > div:not(.tips) {
-      color: var(--cf-text-2);
+      color: var(--vita-muted-foreground);
     }
 
     .tips {
       font-size: 12px;
       font-weight: normal;
 
-      color: var(--cf-text-3);
+      color: var(--vita-subtle-foreground);
     }
   }
 
   .widthInput {
-    height: 32px !important;
+    height: var(--vita-control-height) !important;
   }
 
   .body {

package/src/components/Panel/ListPanel/_components/ColumnMgt/index.tsx

@@ -1,4 +1,5 @@
-import { message } from "antd";
+import { mergeSemantic } from "../../../../../utils/semantic";
+import { message } from "../../../../../feedback";
 import React, { useEffect, useState } from "react";
 import Table, { ColumnsType, TableDrag } from "../../../../Table";
 
@@ -49,8 +50,7 @@ const ColumnMgt: React.FC<ColumnMgtProps> = (props) => {
     onSelectionChange,
   } = props;
   const { max, min = 1 } = columnCount;
-  const { classNames = {}, ...modalConfig } = modalProps;
-  const { header, body, footer, mask, content, wrapper } = classNames;
+  const { classNames, ...modalConfig } = modalProps;
   const [_dataSource, setDataSource] = useState<Array<DataSource>>([]);
   const { checkPermission } = usePermissions();
 
@@ -287,14 +287,10 @@ const ColumnMgt: React.FC<ColumnMgtProps> = (props) => {
       centered
       width={"40%"}
       className={`${styles.ColumnMgt} ${className ?? ""}`}
-      classNames={{
-        header: `${header ?? ""}`,
-        body: `${styles.body} ${body ?? ""}`,
-        footer: `${footer ?? ""}`,
-        mask: `${mask ?? ""}`,
-        content: `${content ?? ""}`,
-        wrapper: `${wrapper ?? ""}`,
-      }}
+      classNames={mergeSemantic(classNames, (outer) => ({
+        ...outer,
+        body: `${styles.body} ${outer.body ?? ""}`,
+      }))}
       title={
         <div className={styles.title}>
           <div>自定义显示列项</div>

package/src/components/Panel/ListPanel/_components/ToolBar/index.module.scss

@@ -1,3 +1,5 @@
+@use "../../../../../styles/responsive" as r;
+
 .ToolBar {
   display: flex;
   justify-content: space-between;
@@ -6,6 +8,17 @@
 
   min-height: max-content;
 
+  // 标题与按钮组在窄屏里挤成一行会互相压扁（按钮文字被截断），改为换行分两排。
+  @include r.down(md) {
+    flex-wrap: wrap;
+    row-gap: 8px;
+
+    .title_tabBar,
+    .btns_tools {
+      width: 100%;
+    }
+  }
+
   .title_tabBar {
     display: flex;
     align-items: center;
@@ -33,7 +46,7 @@
     }
 
     .tabBar {
-      height: 32px;
+      height: var(--vita-control-height);
     }
   }
 

package/src/components/Panel/ListPanel/_components/ToolBar/index.tsx

@@ -71,9 +71,9 @@ const ToolBar: React.FC<ToolBarProps> = (props) => {
                   {buttonGroup?.map((button, idx) => {
                     const { title, children, ...buttonProps } = button;
                     return (
-                      <Button.Chakra key={idx} {...buttonProps}>
+                      <Button key={idx} {...buttonProps}>
                         {title || children}
-                      </Button.Chakra>
+                      </Button>
                     );
                   })}
                 </div>

package/src/components/Panel/ListPanel/index.module.scss

@@ -51,14 +51,14 @@
 
   &:hover {
     &::before {
-      background: color-mix(in srgb, var(--primary-color) 45%, transparent);
+      background: color-mix(in srgb, var(--vita-primary) 45%, transparent);
     }
   }
 }
 
 .resizing {
   &::before {
-    background: var(--primary-color);
+    background: var(--vita-primary);
   }
 }
 
@@ -89,11 +89,11 @@
     min-height: 0px;
     padding: 10px;
 
-    background: var(--cf-surface);
+    background: var(--vita-surface);
 
     // CF style: outlined white card + small border radius, no shadow
-    border-radius: 8px;
-    border: 1px solid var(--cf-border);
+    border-radius: var(--vita-radius);
+    border: 1px solid var(--vita-border);
     box-shadow: none;
   }
 
@@ -111,22 +111,22 @@
 
     > div {
       margin-left: 0 !important;
-      border-radius: 6px !important;
+      border-radius: var(--vita-radius-sm) !important;
 
-      background: var(--cf-surface);
+      background: var(--vita-surface);
     }
   }
 
   &.hasHeaderTabBar {
     &:not(:has(.search)) {
       .headerTabBarContainer {
-        border-radius: 8px;
+        border-radius: var(--vita-radius);
       }
     }
 
     &.legacyNoSearch {
       .headerTabBarContainer {
-        border-radius: 8px;
+        border-radius: var(--vita-radius);
       }
     }
   }

package/src/components/Panel/ListPanel/index.tsx

@@ -12,7 +12,7 @@ import Search, {
   SearchModePropsMap,
 } from "../../Search";
 import Table, { ColumnsType, TableProps } from "../../Table";
-import { ChakraButtonProps as BasicButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import TabBar, { TabBarProps } from "../../TabBar";
 import classNames from "classnames";
 import { cloneDeep } from "lodash";
@@ -25,7 +25,7 @@ import ListModalPanel, { ListModalPanelProps } from "./ListModalPanel";
 import { Equal } from "hsu-utils";
 import { isLegacyHasSelectorBrowser } from "../../../utils/cssSupports";
 
-interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+interface ButtonProps extends Omit<HsuButtonProps, "children" | "title"> {
   title?: ReactNode;
   children?: ReactNode;
 }

package/src/components/Panel/index.md

@@ -74,7 +74,7 @@ export default () => {
             beforeButtonGroup: [
               {
                 title: "新增",
-                colorPalette: "blue",
+                color: "primary",
                 onClick: () => message.success("点击了新增"),
               },
             ],

package/src/components/Search/SearchAdvanced/index.tsx

@@ -3,14 +3,14 @@ import classNames from "classnames";
 import styles from "../index.module.scss";
 import SearchBase from "../_components/SearchBase";
 import { AdvancedFiltersDrawer } from "./_components/AdvancedFiltersDrawer";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import { DrawerFormProps } from "../../Form/DrawerForm";
 import { SearchPropsWithFilter } from "../_types";
 
 export interface SearchAdvancedProps extends SearchPropsWithFilter {
   advancedFiltersProps?: DrawerFormProps;
-  beforeButtonGroup?: ChakraButtonProps[];
-  affterButtonGroup?: ChakraButtonProps[];
+  beforeButtonGroup?: HsuButtonProps[];
+  affterButtonGroup?: HsuButtonProps[];
 }
 
 /**

package/src/components/Search/SearchCard/index.module.scss

@@ -13,8 +13,8 @@
   .searchBox {
     width: 100%;
     padding: 20px;
-    background: var(--cf-surface);
-    border-radius: 8px 8px 0 0;
+    background: var(--vita-surface);
+    border-radius: var(--vita-radius) var(--vita-radius) 0 0;
 
     .searchInputContainer {
       max-width: 600px;
@@ -54,9 +54,9 @@
     width: 100%;
     padding: 20px 20px 12px;
 
-    border-radius: 8px;
+    border-radius: var(--vita-radius);
 
-    background: var(--cf-surface);
+    background: var(--vita-surface);
 
     transition: all 0.3s, border-top 0s;
   }
@@ -153,7 +153,7 @@
         row-gap: 4px;
 
         &.itemsCollapse {
-          height: 32px;
+          height: var(--vita-control-height);
         }
 
         > div {
@@ -169,7 +169,7 @@
           font-family: PingFangSC-Regular, PingFang SC;
           line-height: 26px;
 
-          border-radius: 2px;
+          border-radius: var(--vita-radius-sm);
 
           cursor: pointer;
 
@@ -177,9 +177,9 @@
 
           &.active,
           &:hover {
-            color: var(--primary-color);
+            color: var(--vita-primary);
 
-            background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+            background: color-mix(in srgb, var(--vita-primary) 12%, transparent);
           }
         }
 
@@ -195,7 +195,7 @@
         .help {
           margin-left: 2px;
 
-          color: var(--cf-text-2);
+          color: var(--vita-muted-foreground);
           font-size: 16px;
         }
       }
@@ -207,7 +207,7 @@
         height: max-content;
         padding: 3px 0px;
 
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
         font-weight: 400;
         font-size: 16px;
         font-family: PingFangSC-Regular, PingFang SC;
@@ -220,7 +220,7 @@
         transition: color 0.3s;
 
         &:hover {
-          color: var(--primary-color);
+          color: var(--vita-primary);
         }
       }
     }
@@ -238,13 +238,13 @@
       > span {
         padding: 3px var(--searchCard-padding-left-right);
 
-        color: var(--cf-text);
+        color: var(--vita-foreground);
         font-weight: 400;
         font-size: 16px;
         font-family: PingFangSC-Regular, PingFang SC;
         line-height: 22px;
 
-        border-radius: 2px;
+        border-radius: var(--vita-radius-sm);
 
         cursor: pointer;
 
@@ -252,8 +252,8 @@
 
         &.active,
         &:hover {
-          color: var(--primary-color);
-          background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+          color: var(--vita-primary);
+          background: color-mix(in srgb, var(--vita-primary) 12%, transparent);
         }
       }
     }

package/src/components/Search/SearchCollapsible/index.tsx

@@ -3,13 +3,13 @@ import classNames from "classnames";
 import styles from "../index.module.scss";
 import SearchBase from "../_components/SearchBase";
 import { CollapseToggle } from "./_components/CollapseToggle";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import { SearchPropsWithFilter } from "../_types";
 
 export interface SearchCollapsibleProps extends SearchPropsWithFilter {
   onCollapseToggle?: (collapse: boolean) => void;
-  beforeButtonGroup?: ChakraButtonProps[];
-  affterButtonGroup?: ChakraButtonProps[];
+  beforeButtonGroup?: HsuButtonProps[];
+  affterButtonGroup?: HsuButtonProps[];
 }
 
 /**

package/src/components/Search/SearchWithFilter/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import SearchBase from "../_components/SearchBase";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import { SearchPropsWithFilter } from "../_types";
 
 export interface SearchWithFilterProps extends SearchPropsWithFilter {
-  beforeButtonGroup?: ChakraButtonProps[];
-  affterButtonGroup?: ChakraButtonProps[];
+  beforeButtonGroup?: HsuButtonProps[];
+  affterButtonGroup?: HsuButtonProps[];
 }
 
 /**

package/src/components/Search/SearchWithMore/index.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { FormItemProps } from "../../FormItem";
 import SearchBase from "../_components/SearchBase";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import { SearchPropsWithFilter } from "../_types";
 
 export interface SearchWithMoreProps
   extends Omit<SearchPropsWithFilter, "moreSearchItems"> {
   moreSearchItems: FormItemProps[];
-  beforeButtonGroup?: ChakraButtonProps[];
-  affterButtonGroup?: ChakraButtonProps[];
+  beforeButtonGroup?: HsuButtonProps[];
+  affterButtonGroup?: HsuButtonProps[];
 }
 
 /**

package/src/components/Search/_components/ButtonGroup/index.tsx

@@ -1,20 +1,18 @@
 import React from "react";
-import Button, {
-  ChakraButtonProps as BasicButtonProps,
-} from "../../../Button";
+import Button, { ButtonProps as HsuButtonProps } from "../../../Button";
 import { ReactNode } from "react";
 import styles from "../../index.module.scss";
 
-interface ChakraButtonProps extends Omit<
-  BasicButtonProps,
+interface GroupButtonProps extends Omit<
+  HsuButtonProps,
   "children" | "title"
 > {
   title?: ReactNode;
 }
 
 interface ButtonGroupProps {
-  beforeButtonGroup?: ChakraButtonProps[];
-  affterButtonGroup?: ChakraButtonProps[];
+  beforeButtonGroup?: GroupButtonProps[];
+  affterButtonGroup?: GroupButtonProps[];
   expandButton?: ReactNode;
   children?: ReactNode;
   permitted?: boolean;
@@ -41,18 +39,18 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
         {beforeButtonGroup?.map((button, idx) => {
           const { title, ...buttonProps } = button;
           return (
-            <Button.Chakra key={idx} variant="surface" {...buttonProps}>
+            <Button key={idx} variant="surface" {...buttonProps}>
               {title}
-            </Button.Chakra>
+            </Button>
           );
         })}
         {permitted && children}
         {affterButtonGroup?.map((button, idx) => {
           const { title, ...buttonProps } = button;
           return (
-            <Button.Chakra key={idx} variant="surface" {...buttonProps}>
+            <Button key={idx} variant="surface" {...buttonProps}>
               {title}
-            </Button.Chakra>
+            </Button>
           );
         })}
         {permitted && expandButton}

package/src/components/Search/_components/FilterDropdown/index.tsx

@@ -35,7 +35,7 @@ export const FilterDropdown: React.FC<FilterDropdownProps> = ({
   return (
     <Dropdown
       open={open}
-      overlayClassName={styles.filterDropdown}
+      classNames={{ root: styles.filterDropdown }}
       trigger={["click"]}
       placement="bottomRight"
       menu={{

package/src/components/Search/_hooks/useSearchCommon.ts

@@ -15,7 +15,7 @@ import {
   shouldDisplayExtraItem,
 } from "../_utils";
 import styles from "../index.module.scss";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 
 export interface UseSearchCommonParams {
   form: FormInstance;
@@ -23,8 +23,8 @@ export interface UseSearchCommonParams {
   moreSearchItems?: FormItemProps[];
   searchData?: Record<string, unknown>;
   hasPermi?: string[];
-  beforeButtonGroup?: ChakraButtonProps[];
-  affterButtonGroup?: ChakraButtonProps[];
+  beforeButtonGroup?: HsuButtonProps[];
+  affterButtonGroup?: HsuButtonProps[];
   columnNum: number;
   autoAdaptWidth: boolean;
   defaultExpanded: boolean;
@@ -284,7 +284,7 @@ export const useSearchCommon = (
 
   // Check whether the button group contains any permitted button
   const hasPermittedButtons = useCallback(
-    (buttonGroup?: ChakraButtonProps[]) => {
+    (buttonGroup?: HsuButtonProps[]) => {
       if (!buttonGroup?.length) return false;
 
       return buttonGroup.some((button) => checkPermission(button.hasPermi));

package/src/components/Search/_types/index.ts

@@ -1,7 +1,7 @@
 import { FormInstance } from "antd";
 import { ReactNode } from "react";
 import { FormItemProps } from "../../FormItem";
-import { ChakraButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 
 /**
  * Base props interface for the Search component
@@ -16,8 +16,8 @@ export interface BaseSearchProps {
   hasPermi?: string[];
   /** Search item column count (excluding the button group; total column count is columnNum + 1) */
   columnNum?: number;
-  beforeButtonGroup?: ChakraButtonProps[];
-  affterButtonGroup?: ChakraButtonProps[];
+  beforeButtonGroup?: HsuButtonProps[];
+  affterButtonGroup?: HsuButtonProps[];
   searchData?: Record<string, unknown>;
   minLabelWidth?: boolean | number;
   /** Whether expanded by default */