@agentscope-ai/design 1.0.26-beta.1767840384443 → 1.0.26-beta.1767843408082

package/lib/components/commonComponents/Tabs/index.js

@@ -18,7 +18,6 @@ import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import { Segmented, Tabs } from 'antd';
 import classNames from 'classnames';
 import { useCallback, useMemo } from 'react';
-import { flushSync } from 'react-dom';
 import { useStyle } from "./index.style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -41,12 +40,10 @@ var SparkTabs = function SparkTabs(props) {
     setMergedActiveKey = _useMergedState2[1];
   var Style = useStyle();
 
-  // 缓存 onChange 回调，使用 flushSync 强制同步更新，防止卡顿时选中态丢失
+  // 缓存 onChange 回调
   var handleChange = useCallback(function (key) {
     var _props$onChange;
-    flushSync(function () {
-      setMergedActiveKey(key);
-    });
+    setMergedActiveKey(key);
     (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, key);
   }, [setMergedActiveKey, props.onChange]);
 
@@ -67,24 +64,28 @@ var SparkTabs = function SparkTabs(props) {
     return classNames("".concat(sparkPrefix, "-segmented-tab-bar"), _defineProperty({}, "".concat(sparkPrefix, "-segmented-tab-bar-centered"), centered));
   }, [sparkPrefix, centered]);
 
-  // 缓存 renderTabBar 函数
-  var renderTabBar = useCallback(function () {
-    return /*#__PURE__*/_jsx(Segmented, {
-      options: segmentedOptions,
-      onChange: handleChange,
-      className: segmentedClassName,
-      value: mergedActiveKey,
-      size: props.size
+  // 获取当前选中 tab 的内容
+  var activeContent = useMemo(function () {
+    var _props$items2;
+    var activeItem = (_props$items2 = props.items) === null || _props$items2 === void 0 ? void 0 : _props$items2.find(function (item) {
+      return item.key === mergedActiveKey;
     });
-  }, [segmentedOptions, handleChange, segmentedClassName, mergedActiveKey, props.size]);
+    return activeItem === null || activeItem === void 0 ? void 0 : activeItem.children;
+  }, [props.items, mergedActiveKey]);
+
+  // segmented 类型：分离 Segmented 和内容渲染，避免 renderTabBar 导致的样式问题
   if (type === 'segmented') {
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Tabs, _objectSpread(_objectSpread({
-        animated: false
-      }, restProps), {}, {
-        activeKey: mergedActiveKey,
-        renderTabBar: renderTabBar
-      }))]
+      children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Segmented, {
+        options: segmentedOptions,
+        value: mergedActiveKey,
+        onChange: handleChange,
+        className: segmentedClassName,
+        size: props.size
+      }), /*#__PURE__*/_jsx("div", {
+        className: "".concat(sparkPrefix, "-segmented-tab-content"),
+        children: activeContent
+      })]
     });
   }
   return /*#__PURE__*/_jsxs(_Fragment, {