@pisell/materials 6.7.2 → 6.7.3

package/es/components/PisellCards/components/PisellImageCard/PisellImageCard.js

@@ -0,0 +1,180 @@
+var _excluded = ["dataSource", "fillMode", "lazy", "active", "disabled", "loading", "children", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useMemo, useCallback } from 'react';
+import { useImageLoad, usePisellImageCardStyle } from "./hooks";
+import { getImageObjectFit, getTruncatedText } from "./utils";
+import "./PisellImageCard.less";
+
+/**
+ * PisellImageCard 图片卡片组件
+ * 用于展示图片，支持占位图、失败兜底、文字降级、懒加载等功能
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <PisellImageCard
+ *   dataSource={{
+ *     src: 'https://example.com/image.png',
+ *     alt: '商品图片'
+ *   }}
+ * />
+ *
+ * // 带占位图和失败兜底
+ * <PisellImageCard
+ *   dataSource={{
+ *     src: 'https://example.com/image.png',
+ *     alt: '商品图片',
+ *     fallbackSrc: 'https://example.com/placeholder.png',
+ *     errorSrc: 'https://example.com/error.png'
+ *   }}
+ * />
+ *
+ * // 自定义尺寸和填充模式
+ * <PisellImageCard
+ *   dataSource={{ src: 'https://example.com/image.png' }}
+ *   width={200}
+ *   height={200}
+ *   fillMode="contain"
+ * />
+ *
+ * // 启用懒加载
+ * <PisellImageCard
+ *   dataSource={{ src: 'https://example.com/image.png' }}
+ *   lazy
+ * />
+ *
+ * // 激活状态
+ * <PisellImageCard
+ *   dataSource={{ src: 'https://example.com/image.png' }}
+ *   active={{ value: true }}
+ * />
+ * ```
+ */
+var PisellImageCard = function PisellImageCard(props) {
+  var _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? {} : _props$dataSource,
+    _props$fillMode = props.fillMode,
+    fillMode = _props$fillMode === void 0 ? 'cover' : _props$fillMode,
+    _props$lazy = props.lazy,
+    lazy = _props$lazy === void 0 ? false : _props$lazy,
+    active = props.active,
+    disabled = props.disabled,
+    loadingState = props.loading,
+    children = props.children,
+    onClick = props.onClick,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var src = dataSource.src,
+    alt = dataSource.alt,
+    errorSrc = dataSource.errorSrc,
+    fallbackSrc = dataSource.fallbackSrc,
+    text = dataSource.text;
+
+  // 使用图片加载 Hook
+  var _useImageLoad = useImageLoad(src, lazy),
+    imageLoading = _useImageLoad.loading,
+    imageError = _useImageLoad.error,
+    imgRef = _useImageLoad.imgRef;
+
+  // 使用样式合并 Hook
+  var _usePisellImageCardSt = usePisellImageCardStyle(props),
+    mergedStyle = _usePisellImageCardSt.mergedStyle,
+    mergedClassName = _usePisellImageCardSt.mergedClassName;
+
+  /**
+   * 获取当前应该显示的图片地址
+   * 优先级：loading(fallbackSrc) > error(errorSrc) > src
+   */
+  var displaySource = useMemo(function () {
+    if (imageLoading && fallbackSrc) {
+      return fallbackSrc;
+    }
+    if (imageError && errorSrc) {
+      return errorSrc;
+    }
+    if (src) {
+      return src;
+    }
+    return null;
+  }, [imageLoading, imageError, src, errorSrc, fallbackSrc]);
+
+  /**
+   * 是否显示文字降级
+   * 当没有任何图片可显示时，显示 alt 的前 2 个字符
+   */
+  var showTextFallback = useMemo(function () {
+    return alt;
+  }, [displaySource, alt]);
+  /**
+   * 截取后的文字
+   */
+  var truncatedText = useMemo(function () {
+    if (text) {
+      return text;
+    }
+    return getTruncatedText(alt, 2);
+  }, [alt, text]);
+
+  /**
+   * 处理点击事件
+   */
+  var handleClick = useCallback(function (e) {
+    // 如果禁用或加载中，不触发点击事件
+    if (disabled !== null && disabled !== void 0 && disabled.value || loadingState !== null && loadingState !== void 0 && loadingState.value) {
+      return;
+    }
+    onClick === null || onClick === void 0 || onClick(e);
+  }, [disabled, loadingState, onClick]);
+
+  /**
+   * 渲染状态的 extra 内容
+   * 优先级：loading > disabled > active
+   */
+  var renderExtra = useCallback(function () {
+    if (loadingState !== null && loadingState !== void 0 && loadingState.value && loadingState !== null && loadingState !== void 0 && loadingState.extra) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pisell-image-card__extra"
+      }, loadingState.extra);
+    }
+    if (disabled !== null && disabled !== void 0 && disabled.value && disabled !== null && disabled !== void 0 && disabled.extra) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pisell-image-card__extra"
+      }, disabled.extra);
+    }
+    if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && active.extra) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pisell-image-card__extra"
+      }, active.extra);
+    }
+    return null;
+  }, [active, disabled, loadingState]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: imgRef,
+    className: mergedClassName,
+    style: mergedStyle,
+    onClick: handleClick,
+    "data-active": active === null || active === void 0 ? void 0 : active.value,
+    "data-disabled": disabled === null || disabled === void 0 ? void 0 : disabled.value,
+    "data-loading": (loadingState === null || loadingState === void 0 ? void 0 : loadingState.value) || imageLoading
+  }, restProps), displaySource && /*#__PURE__*/React.createElement("img", {
+    src: displaySource,
+    alt: alt || '',
+    className: "pisell-image-card__image",
+    style: {
+      objectFit: getImageObjectFit(fillMode)
+    }
+  }), showTextFallback && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-image-card__text-fallback"
+  }, truncatedText), renderExtra(), children);
+};
+
+/**
+ * Provider 包装器
+ * 兼容 PisellCards 系统的 props 传递方式
+ */
+var Provider = function Provider(props) {
+  return /*#__PURE__*/React.createElement(PisellImageCard, _extends({}, props === null || props === void 0 ? void 0 : props.props, props));
+};
+export default Provider;

package/es/components/PisellCards/components/PisellImageCard/PisellImageCard.less

@@ -0,0 +1,94 @@
+@prefix: pisell-image-card;
+
+// 默认尺寸
+@default-width: 100%;
+@default-height: 100%;
+
+// 状态颜色
+@active-border-color: #1890ff;
+@disabled-opacity: 0.6;
+
+// 文字降级样式
+@text-fallback-bg: #f0f0f0;
+@text-fallback-color: #999;
+@text-fallback-font-size: 24px;
+
+.@{prefix} {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+  box-sizing: border-box;
+
+  // 图片元素
+  &__image {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  // 文字降级展示
+  &__text-fallback {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: @text-fallback-bg;
+    color: @text-fallback-color;
+    font-size: @text-fallback-font-size;
+    font-weight: 500;
+    user-select: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // 填充模式：cover
+  &--cover &__image {
+    object-fit: cover;
+  }
+
+  // 填充模式：contain
+  &--contain &__image {
+    object-fit: contain;
+  }
+
+  // 填充模式：fill
+  &--fill &__image {
+    object-fit: fill;
+  }
+
+  // 填充模式：none
+  &--none &__image {
+    object-fit: none;
+  }
+
+  // 激活状态
+  &--active {
+    border: 2px solid @active-border-color;
+  }
+
+  // 禁用状态
+  &--disabled {
+    opacity: @disabled-opacity;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // 加载状态
+  &--loading {
+    cursor: wait;
+  }
+
+  // 状态 extra 内容
+  &__extra {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

package/es/components/PisellCards/components/PisellImageCard/components/index.js

@@ -0,0 +1 @@
+// 子组件

package/es/components/PisellCards/components/PisellImageCard/hooks/index.js

@@ -0,0 +1,6 @@
+/**
+ * PisellImageCard Hooks 导出
+ */
+
+export { useImageLoad } from "./useImageLoad";
+export { usePisellImageCardStyle } from "./usePisellImageCardStyle";

package/es/components/PisellCards/components/PisellImageCard/hooks/useImageLoad.js

@@ -0,0 +1,86 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * 图片加载状态管理 Hook
+ * @param src - 图片地址
+ * @param lazy - 是否启用懒加载
+ * @returns 加载状态对象
+ */
+export var useImageLoad = function useImageLoad(src, lazy) {
+  var _useState = useState(!!src),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var imgRef = useRef(null);
+  var observerRef = useRef(null);
+  useEffect(function () {
+    // 如果没有图片地址，直接设置为非加载状态
+    if (!src) {
+      setLoading(false);
+      setError(false);
+      return;
+    }
+
+    // 重置状态
+    setLoading(true);
+    setError(false);
+
+    // 如果启用懒加载且浏览器支持 IntersectionObserver
+    if (lazy && 'IntersectionObserver' in window && imgRef.current) {
+      observerRef.current = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            var _observerRef$current;
+            loadImage();
+            // 加载后断开观察
+            (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
+          }
+        });
+      }, {
+        rootMargin: '50px' // 提前 50px 开始加载
+      });
+      observerRef.current.observe(imgRef.current);
+      return function () {
+        var _observerRef$current2;
+        (_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 || _observerRef$current2.disconnect();
+      };
+    } else {
+      // 不使用懒加载，直接加载
+      loadImage();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src, lazy]);
+
+  /**
+   * 加载图片
+   */
+  var loadImage = function loadImage() {
+    if (!src) return;
+    var img = new Image();
+    img.src = src;
+    img.onload = function () {
+      setLoading(false);
+      setError(false);
+    };
+    img.onerror = function () {
+      setLoading(false);
+      setError(true);
+    };
+  };
+  return {
+    loading: loading,
+    error: error,
+    imgRef: imgRef
+  };
+};

package/es/components/PisellCards/components/PisellImageCard/hooks/usePisellImageCardStyle.js

@@ -0,0 +1,61 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useMemo } from 'react';
+import classNames from 'classnames';
+/**
+ * 样式合并 Hook
+ * @param props - 组件 Props
+ * @returns 合并后的样式和类名
+ */
+export var usePisellImageCardStyle = function usePisellImageCardStyle(props) {
+  var style = props.style,
+    className = props.className,
+    active = props.active,
+    disabled = props.disabled,
+    loading = props.loading,
+    _props$fillMode = props.fillMode,
+    fillMode = _props$fillMode === void 0 ? 'cover' : _props$fillMode,
+    _props$width = props.width,
+    width = _props$width === void 0 ? '100%' : _props$width,
+    _props$height = props.height,
+    height = _props$height === void 0 ? '100%' : _props$height;
+
+  /**
+   * 合并样式
+   */
+  var mergedStyle = useMemo(function () {
+    var finalStyle = _objectSpread({
+      width: width,
+      height: height
+    }, style);
+
+    // 合并状态样式，优先级：loading > disabled > active
+    if (loading !== null && loading !== void 0 && loading.value && loading !== null && loading !== void 0 && loading.style) {
+      finalStyle = _objectSpread(_objectSpread({}, finalStyle), loading.style);
+    } else if (disabled !== null && disabled !== void 0 && disabled.value && disabled !== null && disabled !== void 0 && disabled.style) {
+      finalStyle = _objectSpread(_objectSpread({}, finalStyle), disabled.style);
+    } else if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && active.style) {
+      finalStyle = _objectSpread(_objectSpread({}, finalStyle), active.style);
+    }
+    return finalStyle;
+  }, [style, active, disabled, loading, width, height]);
+
+  /**
+   * 合并类名
+   */
+  var mergedClassName = useMemo(function () {
+    return classNames('pisell-image-card', className, "pisell-image-card--".concat(fillMode), {
+      'pisell-image-card--active': active === null || active === void 0 ? void 0 : active.value,
+      'pisell-image-card--disabled': disabled === null || disabled === void 0 ? void 0 : disabled.value,
+      'pisell-image-card--loading': loading === null || loading === void 0 ? void 0 : loading.value
+    }, (active === null || active === void 0 ? void 0 : active.value) && (active === null || active === void 0 ? void 0 : active.className), (disabled === null || disabled === void 0 ? void 0 : disabled.value) && (disabled === null || disabled === void 0 ? void 0 : disabled.className), (loading === null || loading === void 0 ? void 0 : loading.value) && (loading === null || loading === void 0 ? void 0 : loading.className));
+  }, [className, active, disabled, loading, fillMode]);
+  return {
+    mergedStyle: mergedStyle,
+    mergedClassName: mergedClassName
+  };
+};

package/es/components/PisellCards/components/PisellImageCard/index.js

@@ -0,0 +1,4 @@
+/**
+ * PisellImageCard 组件导出
+ */
+export { default } from "./PisellImageCard";

package/es/components/PisellCards/components/PisellImageCard/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/PisellCards/components/PisellImageCard/utils/getImageObjectFit.js

@@ -0,0 +1,15 @@
+/**
+ * 根据填充模式获取对应的 CSS object-fit 值
+ * @param fillMode - 填充模式
+ * @returns CSS object-fit 值
+ */
+export var getImageObjectFit = function getImageObjectFit() {
+  var fillMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'cover';
+  var modeMap = {
+    cover: 'cover',
+    contain: 'contain',
+    fill: 'fill',
+    none: 'none'
+  };
+  return modeMap[fillMode] || 'cover';
+};

package/es/components/PisellCards/components/PisellImageCard/utils/getTruncatedText.js

@@ -0,0 +1,13 @@
+/**
+ * 截取文本前 N 个字符
+ * @param text - 原始文本
+ * @param maxLength - 最大长度，默认 2
+ * @returns 截取后的文本
+ */
+export var getTruncatedText = function getTruncatedText(text) {
+  var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (!text) return '';
+
+  // 使用 substring 截取前 N 个字符
+  return text.substring(0, maxLength);
+};

package/es/components/PisellCards/components/PisellImageCard/utils/index.js

@@ -0,0 +1,6 @@
+/**
+ * PisellImageCard 工具函数导出
+ */
+
+export { getImageObjectFit } from "./getImageObjectFit";
+export { getTruncatedText } from "./getTruncatedText";

package/es/components/PisellCards/components/TabCard/TabCard.js

@@ -0,0 +1,167 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["tabKey", "label", "icon", "badge", "onClick", "direction", "size", "render", "active", "disabled", "loading", "className", "style", "children", "dataSource"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useMemo, useCallback, useEffect } from 'react';
+import classNames from 'classnames';
+import Badge from "../../../badge";
+import "./TabCard.less";
+
+/**
+ * TabCard 标签卡片组件
+ * 用于导航、分类切换、筛选等场景
+ *
+ * @example
+ * ```tsx
+ * <TabCard
+ *   tabKey="home"
+ *   label="首页"
+ *   icon={<HomeOutlined />}
+ *   active={{ value: true }}
+ *   onClick={(key) => console.log(key)}
+ * />
+ * ```
+ */
+var TabCard = function TabCard(props) {
+  var tabKey = props.tabKey,
+    label = props.label,
+    icon = props.icon,
+    badge = props.badge,
+    onClick = props.onClick,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    render = props.render,
+    active = props.active,
+    disabled = props.disabled,
+    loading = props.loading,
+    className = props.className,
+    style = props.style,
+    children = props.children,
+    dataSource = props.dataSource,
+    restProps = _objectWithoutProperties(props, _excluded);
+  useEffect(function () {
+    document.body.id = 'body';
+  }, []);
+  console.log('propsprops', props);
+  /**
+   * 合并状态样式
+   * 优先级：loading > disabled > active
+   */
+  var mergedStyle = useMemo(function () {
+    var finalStyle = _objectSpread({}, style);
+    if (loading !== null && loading !== void 0 && loading.value && loading !== null && loading !== void 0 && loading.style) {
+      finalStyle = _objectSpread(_objectSpread({}, finalStyle), loading.style);
+    } else if (disabled !== null && disabled !== void 0 && disabled.value && disabled !== null && disabled !== void 0 && disabled.style) {
+      finalStyle = _objectSpread(_objectSpread({}, finalStyle), disabled.style);
+    } else if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && active.style) {
+      finalStyle = _objectSpread(_objectSpread({}, finalStyle), active.style);
+    }
+    return finalStyle;
+  }, [style, active, disabled, loading]);
+
+  /**
+   * 合并状态类名
+   */
+  var mergedClassName = useMemo(function () {
+    return classNames('tab-card', "tab-card--".concat(direction), "tab-card--".concat(size), className, {
+      'tab-card--active': active === null || active === void 0 ? void 0 : active.value,
+      'tab-card--disabled': disabled === null || disabled === void 0 ? void 0 : disabled.value,
+      'tab-card--loading': loading === null || loading === void 0 ? void 0 : loading.value
+    }, (active === null || active === void 0 ? void 0 : active.value) && (active === null || active === void 0 ? void 0 : active.className), (disabled === null || disabled === void 0 ? void 0 : disabled.value) && (disabled === null || disabled === void 0 ? void 0 : disabled.className), (loading === null || loading === void 0 ? void 0 : loading.value) && (loading === null || loading === void 0 ? void 0 : loading.className));
+  }, [className, direction, size, active, disabled, loading]);
+
+  /**
+   * 处理点击事件
+   */
+  var handleClick = useCallback(function (e) {
+    // loading 或 disabled 状态下不触发点击
+    if (loading !== null && loading !== void 0 && loading.value || disabled !== null && disabled !== void 0 && disabled.value) {
+      e.preventDefault();
+      return;
+    }
+
+    // 触发 active.onChange（如果未激活）
+    if (active !== null && active !== void 0 && active.onChange && !active.value) {
+      active.onChange(true);
+    }
+
+    // 触发 onClick
+    if (onClick) {
+      onClick(tabKey, e);
+    }
+  }, [tabKey, onClick, active, loading, disabled]);
+
+  /**
+   * 渲染状态的 extra 内容
+   * 优先级：loading > disabled > active
+   */
+  var renderExtra = useCallback(function () {
+    if (loading !== null && loading !== void 0 && loading.value && loading !== null && loading !== void 0 && loading.extra) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "tab-card__extra"
+      }, loading.extra);
+    }
+    if (disabled !== null && disabled !== void 0 && disabled.value && disabled !== null && disabled !== void 0 && disabled.extra) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "tab-card__extra"
+      }, disabled.extra);
+    }
+    if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && active.extra) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "tab-card__extra"
+      }, active.extra);
+    }
+    return null;
+  }, [active, disabled, loading]);
+
+  /**
+   * 渲染标签内容
+   */
+  var renderContent = useCallback(function () {
+    // 如果提供了自定义渲染函数，使用自定义渲染
+    if (render) {
+      return render(props);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "tab-card__content"
+    }, icon && /*#__PURE__*/React.createElement("div", {
+      className: "tab-card__icon"
+    }, icon), /*#__PURE__*/React.createElement("div", {
+      className: "tab-card__label-wrapper"
+    }, badge ? /*#__PURE__*/React.createElement(Badge, {
+      count: badge.count,
+      dot: badge.dot,
+      color: badge.color,
+      offset: badge.offset
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "tab-card__label"
+    }, label)) : /*#__PURE__*/React.createElement("span", {
+      className: "tab-card__label"
+    }, label)));
+  }, [icon, label, badge, render, props]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: mergedClassName,
+    style: mergedStyle,
+    onClick: handleClick,
+    "data-active": active === null || active === void 0 ? void 0 : active.value,
+    "data-disabled": disabled === null || disabled === void 0 ? void 0 : disabled.value,
+    "data-loading": loading === null || loading === void 0 ? void 0 : loading.value,
+    "data-tab-key": tabKey,
+    role: "tab",
+    "aria-selected": active === null || active === void 0 ? void 0 : active.value,
+    "aria-disabled": disabled === null || disabled === void 0 ? void 0 : disabled.value,
+    tabIndex: disabled !== null && disabled !== void 0 && disabled.value ? -1 : 0
+  }, restProps), renderContent(), renderExtra(), children);
+};
+var Provider = function Provider(props) {
+  return /*#__PURE__*/React.createElement(TabCard, _extends({}, props === null || props === void 0 ? void 0 : props.props, props));
+};
+export default Provider;