@hsu-react/ui 1.0.0 → 2.0.0

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

@@ -13,7 +13,7 @@
 
     font-size: 14px;
     line-height: 14px;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
     white-space: nowrap;
 
     cursor: default;
@@ -26,7 +26,7 @@
       min-width: 0px;
       height: 1px;
 
-      background-color: var(--cf-border);
+      background-color: var(--vita-border);
     }
 
     .quoteIcon {
@@ -39,7 +39,7 @@
       justify-content: center;
 
       width: 24px;
-      height: 24px;
+      height: var(--vita-control-height-sm);
 
       font-size: 18px;
 
@@ -48,7 +48,7 @@
       transition: color 0.3s;
 
       &:hover {
-        color: var(--primary-color);
+        color: var(--vita-primary);
       }
     }
   }
@@ -79,7 +79,7 @@
 
         background: linear-gradient(
           transparent,
-          color-mix(in srgb, var(--cf-surface) 91%, transparent)
+          color-mix(in srgb, var(--vita-surface) 91%, transparent)
         );
       }
     }
@@ -101,16 +101,16 @@
 
       cursor: pointer;
 
-      border-radius: 4px;
+      border-radius: var(--vita-radius-xs);
 
-      background-color: var(--cf-subtle);
+      background-color: var(--vita-muted);
 
       transition: background-color 0.3s, color 0.3s;
 
       &:hover {
         color: #fff;
 
-        background-color: var(--primary-color);
+        background-color: var(--vita-primary);
       }
 
       &.lastRowIndex {

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

@@ -45,20 +45,20 @@
 
   .error {
     font-size: 14px;
-    color: var(--cf-error);
+    color: var(--vita-error);
 
-    border-radius: 4px;
-    border: 1px solid var(--cf-error);
+    border-radius: var(--vita-radius-xs);
+    border: 1px solid var(--vita-error);
     padding: 4px 15px;
   }
 
   .noAnswerTip {
     font-size: 14px;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
 
-    border-radius: 4px;
-    border: 1px solid var(--cf-border);
+    border-radius: var(--vita-radius-xs);
+    border: 1px solid var(--vita-border);
     padding: 4px 15px;
-    background-color: var(--cf-subtle);
+    background-color: var(--vita-muted);
   }
 }

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

@@ -15,7 +15,7 @@
 
         .time {
           font-size: 12px;
-          color: var(--cf-text-2);
+          color: var(--vita-muted-foreground);
           font-weight: normal;
         }
       }
@@ -45,7 +45,7 @@
       margin-top: 10px;
 
       font-size: 12px;
-      color: var(--cf-text-2);
+      color: var(--vita-muted-foreground);
 
       > div {
         display: flex;
@@ -63,7 +63,7 @@
         cursor: pointer;
 
         &.disabled {
-          color: var(--cf-text-3);
+          color: var(--vita-subtle-foreground);
 
           cursor: not-allowed;
         }

package/src/components/Chat/ChatList/_components/User/index.module.scss

@@ -1,3 +1,5 @@
+@use "../../../../../styles/responsive" as r;
+
 .User {
   max-width: 100%;
 
@@ -16,7 +18,7 @@
 
         .time {
           font-size: 12px;
-          color: var(--cf-text-2);
+          color: var(--vita-muted-foreground);
           font-weight: normal;
         }
       }
@@ -52,7 +54,7 @@
 
     background: linear-gradient(243deg, #8a66fb 0%, #126dff 100%);
 
-    border-radius: 6px 0px 6px 6px;
+    border-radius: var(--vita-radius-sm) 0px var(--vita-radius-sm) var(--vita-radius-sm);
 
     .fileList {
       display: flex;
@@ -99,11 +101,11 @@
 
       padding: 4px;
 
-      border-radius: 4px;
+      border-radius: var(--vita-radius-xs);
 
-      border: 1px solid var(--cf-border);
+      border: 1px solid var(--vita-border);
 
-      background: var(--cf-surface);
+      background: var(--vita-surface);
 
       opacity: 0;
 
@@ -119,23 +121,32 @@
 
         font-size: 18px;
         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(--vita-hover);
 
-          background-color: var(--cf-row-hover);
+          border-radius: var(--vita-radius-xs);
+        }
+      }
+    }
 
-          border-radius: 4px;
+    // 仅悬停可见的操作在触屏上永远够不着，所以那里常驻显示。
+    @include r.hover {
+      &:hover {
+        .userTool {
+          opacity: 1;
         }
       }
     }
 
-    &:hover {
+    @include r.touch {
       .userTool {
         opacity: 1;
       }

package/src/components/Chat/ChatList/index.tsx

@@ -140,7 +140,10 @@ const ChatList: React.FC<ChatListProps> = (props) => {
       )}
       {list?.map((item, idx) => {
         return (
-          <>
+          // Prefer the message id so a turn keeps its identity when the list grows; streaming
+          // answers append to `list`, and an index-only key would make React re-key every
+          // existing turn on each append.
+          <React.Fragment key={item.query?.messageId ?? idx}>
             <User
               item={item.query}
               hideTool={hideTool}
@@ -169,7 +172,7 @@ const ChatList: React.FC<ChatListProps> = (props) => {
                 noAnswerTip={noAnswerTip}
               />
             )}
-          </>
+          </React.Fragment>
         );
       })}
     </div>

package/src/components/Checkbox/CheckboxGroup/index.module.scss

@@ -30,8 +30,8 @@
   &.outline {
     :global(.ant-checkbox-wrapper) {
       :global(.ant-checkbox) {
-        :global(.ant-checkbox-inner) {
-          border-color: var(--cf-border) !important;
+        & {
+          border-color: var(--vita-border) !important;
 
           background: transparent !important;
 
@@ -42,7 +42,7 @@
         }
 
         &:global(.ant-checkbox-checked) {
-          :global(.ant-checkbox-inner) {
+          & {
             background: rgba(255, 255, 255, 1) !important;
           }
         }
@@ -50,16 +50,16 @@
 
       &:global(.ant-checkbox-wrapper-disabled) {
         :global(.ant-checkbox) {
-          :global(.ant-checkbox-inner) {
+          & {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
-              border-color: var(--cf-border) !important;
+              border-color: var(--vita-border) !important;
             }
           }
 
           &:global(.ant-checkbox-checked) {
-            :global(.ant-checkbox-inner) {
+            & {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }
@@ -89,12 +89,9 @@
         height: 100%;
       }
 
-      :global(.ant-checkbox-inner) {
-        width: 100%;
-        height: 100%;
-
-        border-radius: inherit;
-
+      // v6 draws the box on `.ant-checkbox` itself (the old `.ant-checkbox-inner` span is gone),
+      // so the fill-the-parent sizing is dropped — see Checkbox/index.module.scss.
+      & {
         &::after {
           inset-inline-start: revert;
           left: 25%;
@@ -107,7 +104,7 @@
     }
 
     :global(.ant-checkbox-indeterminate) {
-      :global(.ant-checkbox-inner) {
+      & {
         &::after {
           left: 50%;
           top: 50%;

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

@@ -3,8 +3,8 @@
 
   &.outline {
     :global(.ant-checkbox) {
-      :global(.ant-checkbox-inner) {
-        border-color: var(--cf-border) !important;
+      & {
+        border-color: var(--vita-border) !important;
 
         background: transparent !important;
 
@@ -15,7 +15,7 @@
       }
 
       &:global(.ant-checkbox-checked) {
-        :global(.ant-checkbox-inner) {
+        & {
           background: rgba(255, 255, 255, 1) !important;
         }
       }
@@ -23,16 +23,16 @@
 
     &:global(.ant-checkbox-wrapper-disabled) {
       :global(.ant-checkbox) {
-        :global(.ant-checkbox-inner) {
+        & {
           background: rgba(0, 0, 0, 0.04) !important;
 
           &::after {
-            border-color: var(--cf-border) !important;
+            border-color: var(--vita-border) !important;
           }
         }
 
         &:global(.ant-checkbox-checked) {
-          :global(.ant-checkbox-inner) {
+          & {
             background: rgba(0, 0, 0, 0.04) !important;
           }
         }
@@ -53,33 +53,28 @@
       height: 100%;
     }
 
-    :global(.ant-checkbox-inner) {
-      width: 100%;
-      height: 100%;
-
-      border-radius: inherit;
-
-      &::after {
-        inset-inline-start: revert;
-        left: 25%;
-        top: 45%;
-
-        width: 33%;
-        height: 60%;
-      }
+    // antd v6 dropped the `.ant-checkbox-inner` span — the box is drawn on `.ant-checkbox`
+    // itself, i.e. this very element. The old inner rule's `width/height: 100%` and
+    // `border-radius: inherit` only existed to make the span fill its parent, and would now
+    // resolve against the label instead, so they are gone; the sizing above already applies.
+    &::after {
+      inset-inline-start: revert;
+      left: 25%;
+      top: 45%;
+
+      width: 33%;
+      height: 60%;
     }
   }
 
   :global(.ant-checkbox-indeterminate) {
-    :global(.ant-checkbox-inner) {
-      &::after {
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
+    &::after {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
 
-        width: 50%;
-        height: 50%;
-      }
+      width: 50%;
+      height: 50%;
     }
   }
 

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

@@ -2,8 +2,8 @@
   width: 100%;
   height: 100%;
 
-  border: 1px solid var(--cf-border);
-  border-radius: 6px;
+  border: 1px solid var(--vita-border);
+  border-radius: var(--vita-radius);
 
   overflow: hidden;
 
@@ -22,15 +22,15 @@
   }
 
   &.hasError {
-    border-color: var(--cf-error);
+    border-color: var(--vita-error);
 
     &:hover {
-      border-color: var(--cf-error);
+      border-color: var(--vita-error);
     }
 
     :global(.cm-focused) {
-      border-color: var(--cf-error);
-      box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-error) 20%, transparent);
+      border-color: var(--vita-error);
+      box-shadow: var(--vita-focus-ring-error);
     }
   }
 }

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");