@hsu-react/ui 0.0.25 → 2.0.0

package/lib/components/Button/index.js

@@ -5,37 +5,57 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _antd = require("antd");
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _usePermissions = _interopRequireDefault(require("../../hooks/usePermissions"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
- * 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 = /*#__PURE__*/(0, _react.lazy)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./ChakraButton"))));
-const ChakraButton = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Suspense, {
-  fallback: null,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalChakraButton, {
-    ...props
-  })
-});
+
+/**
+ * @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"` |
+ */
+
+/** @deprecated use `ButtonProps` — see the note on `BasicButtonProps` */
+
 // 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 = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
     hasPermi,
     hidden,
-    iconPosition = "start",
+    iconPosition,
     className,
     children,
     title,
+    variant,
+    colorPalette,
+    reRender,
     ...buttonConfig
   } = props;
   const {
@@ -44,15 +64,37 @@ const InternalButton = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   if (!permitted || hidden) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+
+  // `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 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
     ...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: (0, _classnames.default)(className, _indexModule.default.button, {
-      [_indexModule.default[iconPosition]]: iconPosition
+      [_indexModule.default.surface]: isSurface
     }),
     children: children ?? title
   });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: reRender ? reRender(button) : button
+  });
 });
-const Button = InternalButton;
-Button.Chakra = ChakraButton;
+Button.displayName = "Button";
 var _default = exports.default = Button;

package/lib/components/Button/index.module.scss

@@ -9,3 +9,41 @@
     flex-direction: row-reverse;
   }
 }
+
+// `variant="surface"`：浅底 + 边框。
+//
+// antd v6 没有这个形态 —— `filled` 有底色但把 --ant-btn-border-color 显式设成了 transparent，
+// `outlined` 有边框但没底色。这里让它走 antd 的 `filled`（底色、文字色、hover / active、
+// disabled 全都照旧由 antd 那条色阶算），只把边框变量按同一条色阶调回来。
+//
+// 因为改的是 antd 自己的变量而不是写死颜色，16 个 color 预设（default / primary / danger /
+// blue / purple / … / gold）与明暗主题都自动跟着走，不必逐色枚举。
+// 选择器要连 antd 的两个类一起写：antd 是在 `.ant-btn.ant-btn-variant-filled`（0,2,0）里把
+// --ant-btn-border-color 设成 transparent 的，单靠一个 CSS Module 类（0,1,0）压不过它。
+// 这里写成 (0,3,0)，与注入顺序无关，也就不需要 !important。
+//
+// 边框用满强度的 color-base，不要再乘一个透明度：默认色系下 color-base 本身就是标准边框色
+// #e4e4e7，再乘 25% 之后压在 #f4f4f5 的浅底上等于没有 —— 那样 surface 看起来就和 filled
+// 一模一样。满强度等于「filled 的底 + outlined 的边」，这正是这个形态的定义。
+.surface:global(.ant-btn.ant-btn-variant-filled) {
+  --ant-btn-border-color: var(--ant-btn-color-base);
+  --ant-btn-border-color-hover: var(--ant-btn-color-hover);
+  --ant-btn-border-color-active: var(--ant-btn-color-active);
+
+  // 中性色系要单独抬一档：它的 color-base 就是边框色，而边框色与浅底色在暗色下恰好同值
+  // （--vita-border 与 --vita-muted 都是 #27272a），照抄就等于没有边框。
+  // 往文字色方向混一点即可 —— 浅色下变深、暗色下变浅，一条规则两个主题都成立。
+  &:global(.ant-btn-color-default) {
+    --ant-btn-border-color: color-mix(
+      in srgb,
+      var(--ant-btn-color-base) 62%,
+      var(--vita-foreground)
+    );
+    --ant-btn-border-color-hover: color-mix(
+      in srgb,
+      var(--ant-btn-color-base) 40%,
+      var(--vita-foreground)
+    );
+    --ant-btn-border-color-active: var(--ant-btn-border-color-hover);
+  }
+}

package/lib/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/lib/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/lib/components/ChainGraph/index.js

@@ -117,7 +117,9 @@ const ChainGraph = (0, _mobxReactLite.observer)(props => {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {
     spinning: loading || isLayouting && !!data?.children?.length,
-    wrapperClassName: (0, _classnames.default)(_indexModule.default.spinWrapper, wrapperClassName),
+    classNames: {
+      root: (0, _classnames.default)(_indexModule.default.spinWrapper, wrapperClassName)
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: `${_indexModule.default.ChainGraph} ${className}`,
       style: {

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/components/Chat/ChatInput/_components/UploadButton/index.js

@@ -62,7 +62,7 @@ const UploadButton = props => {
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
             icon: isUpload ? "eos-icons:loading" : "heroicons-outline:paper-clip",
             fontSize: 22,
-            color: "var(--cf-text-3)"
+            color: "var(--vita-subtle-foreground)"
           }),
           onClick: onInterceptClick ? e => {
             e.stopPropagation();

package/lib/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/lib/components/Chat/ChatInput/_utils/index.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.validateFileSize = exports.processFileList = exports.handleUploadResponse = void 0;
-var _antd = require("antd");
+var _feedback = require("../../../../feedback");
 /**
  * Handle the file upload response
  */
 const handleUploadResponse = (fileList, file, index) => {
   if (file.status === "error") {
-    _antd.notification.error({
+    _feedback.notification.error({
       message: file.error?.message || "上传失败"
     });
     fileList.splice(index, 1);
@@ -18,7 +18,7 @@ const handleUploadResponse = (fileList, file, index) => {
   }
   if (file.response) {
     if (file.response?.code !== 0 && file.response?.code !== 200 && file.response?.code !== undefined) {
-      _antd.notification.error({
+      _feedback.notification.error({
         message: file.response.msg
       });
       fileList.splice(index, 1);
@@ -44,7 +44,7 @@ const handleUploadResponse = (fileList, file, index) => {
 exports.handleUploadResponse = handleUploadResponse;
 const validateFileSize = (file, maxSize) => {
   if (file.size > maxSize * 1024 * 1024) {
-    _antd.notification.error({
+    _feedback.notification.error({
       message: `文件大小不能超过${maxSize}MB`
     });
     return false;
@@ -60,14 +60,14 @@ const processFileList = fileList => {
   const processedList = [];
   fileList?.forEach(file => {
     if (file.status === "error") {
-      _antd.notification.error({
+      _feedback.notification.error({
         message: file.error?.message || "上传失败"
       });
       return;
     }
     if (file.response) {
       if (file.response?.code !== 0 && file.response?.code !== 200 && file.response?.code !== undefined) {
-        _antd.notification.error({
+        _feedback.notification.error({
           message: file.response.msg
         });
         return;

package/lib/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/lib/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/Copy/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Icon = _interopRequireDefault(require("../../../../../../../Icon"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _antd = require("antd");
+var _feedback = require("../../../../../../../../feedback");
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
 var _markdownIt = _interopRequireDefault(require("markdown-it"));
@@ -37,7 +37,7 @@ const Copy = props => {
     if (textContent) {
       const result = (0, _copyToClipboard.default)(textContent);
       if (result) {
-        _antd.message.success("复制成功");
+        _feedback.message.success("复制成功");
       }
     }
   }

package/lib/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/lib/components/Chat/ChatList/_components/Assistant/AssistantItem/_components/LikeDislike/index.js

@@ -72,7 +72,9 @@ const LikeDislike = ({
         form.resetFields();
       },
       width: "40%",
-      maskClosable: false,
+      mask: {
+        closable: false
+      },
       formItems: [{
         type: "TEXTAREA",
         name: "content",