@hsu-react/ui 1.0.0 → 2.0.0

package/src/components/Button/index.tsx

@@ -1,74 +1,130 @@
 import { Button as AntdButton, ButtonProps as AntdButtonProps } from "antd";
 
-import React, { Suspense, lazy } from "react";
+import React, { ReactNode } from "react";
 import usePermissions from "../../hooks/usePermissions";
 import classNames from "classnames";
 import styles from "./index.module.scss";
-import type { ChakraButtonProps } from "./ChakraButton";
-
-export type { ChakraButtonProps };
 
 /**
- * The chakra family weighs about 560 KB and serves only the Button.Chakra variant, yet it
- * lands in every consumer's initial bundle because it hangs off the base Button. Switched to
- * on-demand loading: the type goes through `import type` (erased at compile time), and the
- * chunk is only fetched at runtime once Button.Chakra is actually rendered.
+ * antd v6's own variants plus `surface` — a tinted background *with* a border.
+ *
+ * antd has no such variant: `filled` is tinted but explicitly sets `border-color: transparent`,
+ * and `outlined` has the border but no tint. That combination is the one thing the old
+ * Chakra-backed button was kept around for, so it lives here instead.
  */
-const InternalChakraButton = lazy(() => import("./ChakraButton"));
-
-const ChakraButton: React.FC<ChakraButtonProps> = (props) => (
-  <Suspense fallback={null}>
-    <InternalChakraButton {...props} />
-  </Suspense>
-);
+export type ButtonVariant = NonNullable<AntdButtonProps["variant"]> | "surface";
 
-export interface ButtonProps extends AntdButtonProps {
+export interface ButtonProps extends Omit<AntdButtonProps, "variant"> {
   hasPermi?: string[];
   hidden?: boolean;
+  /**
+   * 图标位置。antd v6 把这个属性改名成了 `iconPlacement`，`iconPosition` 仍然能用但会打
+   * 弃用告警。这里保留旧名（本库一直这么用）并在内部翻成 `iconPlacement`，两个名字都接受。
+   */
   iconPosition?: "start" | "end";
+  variant?: ButtonVariant;
+  /**
+   * @deprecated 用 antd 的 `color`。
+   *
+   * 这是 Chakra 时期的属性名，这里仍然接住并翻译成 `color`，否则它会一路透传到
+   * `<button>` 上，React 会报 “does not recognize the colorPalette prop on a DOM element”。
+   */
+  colorPalette?: "gray" | "blue" | "red" | "green" | "orange";
+  /** Wrap the rendered button, e.g. to put it inside a Tooltip or Popconfirm */
+  reRender?: (btn: React.ReactElement) => ReactNode;
 }
 
-interface ButtonFC
-  extends React.ForwardRefExoticComponent<
-    ButtonProps & React.RefAttributes<HTMLButtonElement>
-  > {
-  Chakra: React.FC<ChakraButtonProps>;
-}
+/**
+ * @deprecated use `ButtonProps`.
+ *
+ * There used to be a second button (`Button.Chakra`, later `Button.Basic`) backed by Chakra UI,
+ * brought in because antd v5's Button only had `type` and could not express variants like
+ * outline / subtle / ghost. antd v6 added `color` (16 presets) and `variant`
+ * (`solid | outlined | dashed | filled | text | link`) natively, which is exactly what that button
+ * existed to provide — so it is gone and `Button` is the only button again.
+ *
+ * Mapping from the old props:
+ * | old | new |
+ * | --- | --- |
+ * | `variant="solid"` | `variant="solid"` |
+ * | `variant="outline"` | `variant="outlined"` |
+ * | `variant="surface"` / `"subtle"` | `variant="filled"` |
+ * | `variant="ghost"` | `variant="text"` |
+ * | `variant="plain"` | `variant="link"` |
+ * | `colorPalette="gray"` | `color="default"` |
+ * | `colorPalette="blue" \| "red" \| "green" \| "orange"` | `color="blue" \| "red" \| "green" \| "orange"` |
+ * | `size="xs" \| "sm" \| "md" \| "lg"` | `size="small" \| "small" \| "middle" \| "large"` |
+ */
+export type BasicButtonProps = ButtonProps;
+
+/** @deprecated use `ButtonProps` — see the note on `BasicButtonProps` */
+export type ChakraButtonProps = ButtonProps;
 
 // forwardRef: when wrapped by overlay components like Tooltip / Popconfirm, the button DOM can be accessed directly,
 // preventing rc libraries from falling back to findDOMNode and triggering React deprecation warnings
-const InternalButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (props, ref) => {
-    const {
-      hasPermi,
-      hidden,
-      iconPosition = "start",
-      className,
-      children,
-      title,
-      ...buttonConfig
-    } = props;
-    const { permitted } = usePermissions(hasPermi);
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const {
+    hasPermi,
+    hidden,
+    iconPosition,
+    className,
+    children,
+    title,
+    variant,
+    colorPalette,
+    reRender,
+    ...buttonConfig
+  } = props;
+  const { permitted } = usePermissions(hasPermi);
 
-    if (!permitted || hidden) {
-      return null;
-    }
-
-    return (
-      <AntdButton
-        {...buttonConfig}
-        ref={ref}
-        className={classNames(className, styles.button, {
-          [styles[iconPosition]]: iconPosition,
-        })}
-        children={children ?? title}
-      />
-    );
+  if (!permitted || hidden) {
+    return null;
   }
-);
 
-const Button = InternalButton as ButtonFC;
+  // `surface` rides antd's `filled` so the whole colour ramp keeps working, and only puts the
+  // border back — see `.surface` in index.module.scss.
+  const isSurface = variant === "surface";
+
+  // 旧的 colorPalette 翻译成 antd 的 color；gray 对应 antd 的 default，其余同名。
+  const mappedColor =
+    buttonConfig.color ??
+    (colorPalette
+      ? colorPalette === "gray"
+        ? "default"
+        : colorPalette
+      : undefined);
+
+  // antd only honours `variant` when `color` comes with it (`if (color && variant)` in its Button),
+  // so `<Button variant="filled" />` on its own silently falls back to the default outlined look.
+  // The one exception antd makes is `variant="solid"`, which it maps to the primary colour — that
+  // is left alone so the prop keeps meaning what antd's docs say it means.
+  const needsDefaultColor =
+    !!variant &&
+    variant !== "solid" &&
+    !mappedColor &&
+    !buttonConfig.type &&
+    !buttonConfig.danger;
+
+  const button = (
+    <AntdButton
+      {...buttonConfig}
+      ref={ref}
+      color={needsDefaultColor ? "default" : mappedColor}
+      variant={isSurface ? "filled" : variant}
+      // 这里曾经把 iconPosition 拦下来换成一个 styles[iconPosition] 类名，但
+      // index.module.scss 里根本没有 .start / .end —— 结果 iconPosition="end" 完全不起作用，
+      // 还给每个按钮挂上一个字符串 "undefined" 的类。现在翻译成 antd v6 的 iconPlacement。
+      iconPlacement={buttonConfig.iconPlacement ?? iconPosition}
+      className={classNames(className, styles.button, {
+        [styles.surface]: isSurface,
+      })}
+      children={children ?? title}
+    />
+  );
+
+  return <>{reRender ? reRender(button) : button}</>;
+});
 
-Button.Chakra = ChakraButton;
+Button.displayName = "Button";
 
 export default Button;

package/src/components/ChainGraph/_components/ExpandButtons/index.module.scss

@@ -9,10 +9,12 @@
   column-gap: 10px;
 
   .expandBtnItem {
-    width: 100px;
-    height: 32px;
+    // 圆角走令牌，跟其余按钮一致。这里此前写死 2px，在全库统一到 8px 之后
+    // 只有关系图这两个按钮还是直角，很显眼。
+    min-width: 100px;
+    height: var(--vita-control-height);
 
-    border-radius: 2px;
+    border-radius: var(--vita-radius);
   }
 }
 

package/src/components/ChainGraph/_components/SearchSelect/index.module.scss

@@ -6,12 +6,13 @@
   left: 20px;
 
   width: 240px;
-  height: 32px;
+  height: var(--vita-control-height);
 }
 
 .select {
   width: 100%;
   height: 100%;
 
-  border-radius: 2px;
+  // 同上：与其余选择器统一
+  border-radius: var(--vita-radius);
 }

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

@@ -24,9 +24,9 @@
     bottom: 20px;
     left: 20px;
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
-    border: 1px solid var(--primary-color);
+    border: 1px solid var(--vita-primary);
 
     transition: all 0.5s ease;
 

package/src/components/ChainGraph/index.tsx

@@ -155,7 +155,7 @@ const ChainGraph: React.FC<ChainGraphProps> = observer((props) => {
   return (
     <Spin
       spinning={loading || (isLayouting && !!data?.children?.length)}
-      wrapperClassName={classNames(styles.spinWrapper, wrapperClassName)}
+      classNames={{ root: classNames(styles.spinWrapper, wrapperClassName) }}
     >
       <div
         className={`${styles.ChainGraph} ${className}`}

package/src/components/Chart/Group/index.module.scss

@@ -11,7 +11,7 @@
 
   padding: 20px 20px 15px;
 
-  background: var(--cf-surface);
+  background: var(--vita-surface);
   box-shadow: 0 3px 10px rgba(68, 98, 138, 0.1);
   border-radius: 5px;
 

package/src/components/Chat/ChatHistory/_components/HistoryGroup/index.module.scss

@@ -8,7 +8,7 @@
 
     font-size: 14px;
     font-weight: bold;
-    color: var(--cf-text-3);
+    color: var(--vita-subtle-foreground);
 
     cursor: default;
   }

package/src/components/Chat/ChatHistory/_components/HistoryItem/index.module.scss

@@ -1,7 +1,7 @@
 .renameInput {
   width: 100%;
-  height: 32px;
-  min-height: 32px;
+  height: var(--vita-control-height);
+  min-height: var(--vita-control-height);
 }
 
 .historyItem {
@@ -11,8 +11,8 @@
   align-items: center;
   column-gap: 10px;
 
-  height: 32px;
-  line-height: 32px;
+  height: var(--vita-control-height);
+  line-height: var(--vita-control-height);
   padding: 0 10px;
 
   font-size: 14px;
@@ -21,12 +21,12 @@
 
   overflow: hidden;
 
-  border-radius: 6px;
+  border-radius: var(--vita-radius-sm);
 
   cursor: pointer;
 
   &:hover {
-    background: var(--cf-row-hover);
+    background: var(--vita-hover);
 
     .operation {
       display: flex;
@@ -34,9 +34,9 @@
   }
 
   &.active {
-    background: var(--cf-row-hover);
+    background: var(--vita-hover);
 
-    color: var(--primary-color);
+    color: var(--vita-primary);
   }
 
   .operation {
@@ -45,20 +45,20 @@
     justify-content: center;
 
     width: 24px;
-    height: 24px;
+    height: var(--vita-control-height-sm);
 
     font-size: 16px;
 
-    border-radius: 8px;
+    border-radius: var(--vita-radius);
 
     transition: color 0.3s;
 
     background-color: transparent;
 
-    color: var(--cf-text);
+    color: var(--vita-foreground);
 
     &:hover {
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
   }
 }
@@ -69,6 +69,6 @@
   column-gap: 8px;
 
   &.delete {
-    color: var(--cf-error);
+    color: var(--vita-error);
   }
 }

package/src/components/Chat/ChatHistory/_components/NewChatButton/index.module.scss

@@ -5,7 +5,7 @@
 
   padding: 0px 10px;
 
-  background-color: var(--cf-subtle);
+  background-color: var(--vita-muted);
 
   .newChat {
     display: flex;
@@ -14,21 +14,21 @@
     column-gap: 8px;
 
     width: 100%;
-    height: 32px;
+    height: var(--vita-control-height);
 
     font-size: 14px;
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
-    border-radius: 6px;
-    border: 1px solid var(--cf-border-weak);
+    border-radius: var(--vita-radius-sm);
+    border: 1px solid var(--vita-border-weak);
 
     cursor: pointer;
 
     transition: box-shadow 0.3s;
 
     &:hover {
-      box-shadow: var(--cf-shadow-2);
+      box-shadow: var(--vita-shadow-2);
     }
   }
 }

package/src/components/Chat/ChatHistory/index.module.scss

@@ -9,9 +9,9 @@
   height: 100%;
   padding: 10px 0px;
 
-  background-color: var(--cf-subtle);
+  background-color: var(--vita-muted);
 
-  border-right: 1px solid var(--cf-border-weak);
+  border-right: 1px solid var(--vita-border-weak);
 
   .tools {
     display: flex;
@@ -39,7 +39,7 @@
     &::-webkit-scrollbar-thumb {
       width: 10px;
 
-      background-color: var(--cf-border);
+      background-color: var(--vita-border);
 
       border-radius: 10px;
     }

package/src/components/Chat/ChatInput/_components/AgentToggleButton/index.module.scss

@@ -3,27 +3,27 @@
   align-items: center;
   column-gap: 2px;
   padding: 0 11px;
-  border-radius: 4px;
-  border: 1px solid var(--primary-color);
+  border-radius: var(--vita-radius-xs);
+  border: 1px solid var(--vita-primary);
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s;
   height: 100%;
-  background-color: var(--cf-surface);
+  background-color: var(--vita-surface);
 
   .icon {
     font-size: 22px;
   }
 
   &.active {
-    color: var(--primary-color);
-    border-color: var(--primary-color);
-    background-color: color-mix(in srgb, var(--primary-color) 13%, transparent);
+    color: var(--vita-primary);
+    border-color: var(--vita-primary);
+    background-color: color-mix(in srgb, var(--vita-primary) 13%, transparent);
   }
 
   &:hover {
-    color: var(--cf-text);
-    border-color: var(--cf-border);
-    background-color: var(--cf-row-hover);
+    color: var(--vita-foreground);
+    border-color: var(--vita-border);
+    background-color: var(--vita-hover);
   }
 }

package/src/components/Chat/ChatInput/_components/FileList/index.module.scss

@@ -11,8 +11,8 @@
     column-gap: 5px;
     padding: 4px 10px;
     font-size: 14px;
-    color: var(--cf-text);
-    background: var(--cf-subtle);
+    color: var(--vita-foreground);
+    background: var(--vita-muted);
     border-radius: 3px;
     transition: box-shadow 0.3s, color 0.3s;
     cursor: pointer;
@@ -22,7 +22,7 @@
     }
     
     &:hover {
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
   }
 }

package/src/components/Chat/ChatInput/_components/SendButton/index.module.scss

@@ -5,10 +5,10 @@
   }
 
   display: flex;
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
   border: none;
-  border-radius: 4px;
+  border-radius: var(--vita-radius);
 
   :global(.ant-btn-icon) {
     display: flex;

package/src/components/Chat/ChatInput/_components/StopButton/index.module.scss

@@ -3,8 +3,8 @@
   align-items: center;
   justify-content: center;
 
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
 
   cursor: pointer;
 }

package/src/components/Chat/ChatInput/_components/UploadButton/index.module.scss

@@ -1,8 +1,8 @@
 .clip {
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius);
 
   :global(.ant-btn-icon) {
     display: flex;

package/src/components/Chat/ChatInput/_components/UploadButton/index.tsx

@@ -73,7 +73,7 @@ const UploadButton: React.FC<UploadButtonProps> = (props) => {
                     : "heroicons-outline:paper-clip"
                 }
                 fontSize={22}
-                color="var(--cf-text-3)"
+                color="var(--vita-subtle-foreground)"
               />
             }
             onClick={

package/src/components/Chat/ChatInput/_utils/index.ts

@@ -1,5 +1,5 @@
 import { UploadFile } from "antd";
-import { notification } from "antd";
+import { notification } from "../../../../feedback";
 
 /**
  * Handle the file upload response

package/src/components/Chat/ChatInput/index.module.scss

@@ -16,9 +16,9 @@
   width: 100%;
   padding: 10px;
 
-  border-radius: 6px;
-  border: 1px solid var(--cf-border);
-  background: var(--cf-surface);
+  border-radius: var(--vita-radius);
+  border: 1px solid var(--vita-border);
+  background: var(--vita-surface);
 
   .textArea {
     border: none !important;
@@ -51,13 +51,14 @@
 
         .select {
           font-size: 14px;
-          border: 1px solid var(--cf-border);
-          border-radius: 4px;
+          border: 1px solid var(--vita-border);
+          border-radius: var(--vita-radius);
           box-shadow: none;
           opacity: 0.8;
           width: 140px;
           height: 100%;
-          :global(.ant-select-selector) {
+          // v6 moved the Select box onto the `.ant-select` root
+          :global(.ant-select) {
             border: none;
             margin: 1px 0 0;
           }
@@ -66,7 +67,7 @@
           }
 
           &[class*="disabled"] {
-            color: var(--cf-text);
+            color: var(--vita-foreground);
             background: transparent;
             border: none;
             box-shadow: none;
@@ -81,16 +82,16 @@
     }
 
     li {
-      height: 32px;
+      height: var(--vita-control-height);
     }
   }
 }
 
 .button {
-  width: 32px;
-  height: 32px;
+  width: var(--vita-control-height);
+  height: var(--vita-control-height);
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius);
 
   :global(.ant-btn-icon) {
     display: flex;

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.module.scss

@@ -8,28 +8,28 @@
 
   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;
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius-xs);
 
   .icon {
     font-size: 18px;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
 
     transition: color 0.3s;
   }
 
   &:hover {
-    color: var(--cf-text);
+    color: var(--vita-foreground);
 
-    background-color: var(--cf-row-hover);
+    background-color: var(--vita-hover);
 
     .icon {
-      color: var(--cf-text);
+      color: var(--vita-foreground);
     }
   }
 }

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import Icon from "../../../../../../../Icon";
 import classNames from "classnames";
-import { message } from "antd";
+import { message } from "../../../../../../../../feedback";
 import styles from "./index.module.scss";
 import clipboard from "copy-to-clipboard";
 import MarkdownIt from "markdown-it";

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/LikeDislike/index.module.scss

@@ -13,7 +13,7 @@
 
     font-size: 14px;
     line-height: 18px;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
 
     cursor: pointer;
 
@@ -21,20 +21,20 @@
 
     .likeIcon {
       font-size: 20px;
-      color: var(--cf-text-2);
+      color: var(--vita-muted-foreground);
 
       transition: 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);
 
       .likeIcon {
-        color: var(--cf-text);
+        color: var(--vita-foreground);
       }
     }
   }

package/src/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/LikeDislike/index.tsx

@@ -85,7 +85,7 @@ const LikeDislike: React.FC<LikeDislikeProps> = ({
           form.resetFields();
         }}
         width={"40%"}
-        maskClosable={false}
+        mask={{ closable: false }}
         formItems={[
           {
             type: "TEXTAREA",