@pisell/materials 6.7.4 → 6.8.2

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;

package/es/components/PisellCards/components/TabCard/TabCard.less

@@ -0,0 +1,186 @@
+/**
+ * TabCard 组件样式
+ */
+
+.tab-card {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  user-select: none;
+  outline: none;
+  scroll-snap-align: start;
+
+  // 默认样式
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: rgba(0, 0, 0, 0.85);
+
+  // hover 状态
+  &:hover:not(&--disabled):not(&--loading) {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+
+  // focus 状态（键盘导航）
+  &:focus-visible {
+    outline: 2px solid #1890ff;
+    outline-offset: 2px;
+  }
+
+  // 激活状态
+  &--active,
+  &[data-active='true'] {
+    color: #1890ff;
+    border-color: #1890ff;
+    background-color: #e6f7ff;
+    font-weight: 500;
+
+    &:hover {
+      background-color: #bae7ff;
+    }
+  }
+
+  // 禁用状态
+  &--disabled,
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.6;
+    color: rgba(0, 0, 0, 0.25);
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  // 加载状态
+  &--loading,
+  &[data-loading='true'] {
+    cursor: wait;
+    opacity: 0.8;
+  }
+
+  // 内容容器
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  // 图标
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  // 标签文本包装器
+  &__label-wrapper {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  // 标签文本
+  &__label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // extra 内容
+  &__extra {
+    position: absolute;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+  }
+
+  // ===== 尺寸变体 =====
+
+  // 小尺寸
+  &--small {
+    padding: 4px 8px;
+    font-size: 12px;
+    min-height: 24px;
+
+    .tab-card__icon {
+      font-size: 14px;
+    }
+
+    .tab-card__content {
+      gap: 4px;
+    }
+  }
+
+  // 中尺寸（默认）
+  &--medium {
+    padding: 8px 16px;
+    font-size: 14px;
+    min-height: 32px;
+
+    .tab-card__icon {
+      font-size: 16px;
+    }
+
+    .tab-card__content {
+      gap: 8px;
+    }
+  }
+
+  // 大尺寸
+  &--large {
+    padding: 12px 24px;
+    font-size: 16px;
+    min-height: 40px;
+
+    .tab-card__icon {
+      font-size: 18px;
+    }
+
+    .tab-card__content {
+      gap: 12px;
+    }
+  }
+
+  // ===== 布局方向 =====
+
+  // 水平布局（默认）
+  &--horizontal {
+    .tab-card__content {
+      flex-direction: row;
+    }
+  }
+
+  // 垂直布局
+  &--vertical {
+    .tab-card__content {
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .tab-card__icon {
+      margin-bottom: 4px;
+    }
+
+    // 垂直布局下的尺寸调整
+    &.tab-card--small {
+      padding: 8px 12px;
+    }
+
+    &.tab-card--medium {
+      padding: 12px 16px;
+    }
+
+    &.tab-card--large {
+      padding: 16px 20px;
+    }
+  }
+}
+

package/es/components/PisellCards/components/TabCard/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * TabCard 标签卡片组件
+ */
+export { default } from './TabCard';
+export type { TabCardProps, BadgeConfig } from './types';

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

@@ -0,0 +1,4 @@
+/**
+ * TabCard 标签卡片组件
+ */
+export { default } from "./TabCard";

package/es/components/PisellCards/components/TabCard/types.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { PisellBasicCardProps } from '../../types';
+/**
+ * 徽章配置
+ */
+export interface BadgeConfig {
+    /**
+     * 徽章数字或文本
+     */
+    count?: number | string;
+    /**
+     * 是否显示小红点
+     */
+    dot?: boolean;
+    /**
+     * 徽章颜色
+     */
+    color?: string;
+    /**
+     * 徽章偏移位置 [x, y]
+     */
+    offset?: [number, number];
+}
+/**
+ * TabCard 组件 Props
+ * 基于 PisellBasicCardProps 扩展
+ */
+export interface TabCardProps extends PisellBasicCardProps {
+    /**
+     * 标签唯一标识
+     * 必填，用于标识标签
+     */
+    tabKey: string | number;
+    /**
+     * 标签文本
+     * 必填
+     */
+    label: ReactNode;
+    /**
+     * 标签图标
+     * 可选，支持 ReactNode（如 antd Icon）
+     */
+    icon?: ReactNode;
+    /**
+     * 徽章配置
+     * 可选，用于显示未读数、状态等
+     */
+    badge?: BadgeConfig;
+    /**
+     * 点击事件
+     * 点击标签时触发，传递 tabKey 和事件对象
+     */
+    onClick?: (tabKey: string | number, event: React.MouseEvent) => void;
+    /**
+     * 标签位置
+     * 用于控制图标和文本的布局方向
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * 标签尺寸
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * 自定义渲染
+     * 完全自定义标签内容
+     */
+    render?: (props: TabCardProps) => ReactNode;
+}

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

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

package/es/components/PisellCards/components/TextCard/TextCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './TextCard.less';
+/**
+ * Provider 包装器
+ * 兼容 PisellCards 系统的 props 传递方式
+ */
+declare const Provider: (props: any) => React.JSX.Element;
+export default Provider;

package/es/components/PisellCards/components/TextCard/TextCard.js

@@ -0,0 +1,203 @@
+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 = ["text", "variant", "size", "clickable", "prefixIcon", "suffixIcon", "iconConfig", "tag", "tagConfig", "badge", "prefixSlot", "suffixSlot", "textConfig", "widthMode", "width", "maxWidth", "onClick", "render", "active", "disabled", "loading", "className", "style", "children", "dataSource", "textAlign"];
+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, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { TextContent, IconWrapper, BadgeWrapper } from "./components";
+import "./TextCard.less";
+
+/**
+ * TextCard 文本卡片组件
+ * 用于展示带图标、文本、标签和角标的信息项，常用于 Tab 项、列表项等
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <TextCard text="Tab title" />
+ *
+ * // 带图标和角标
+ * <TextCard
+ *   text="Password"
+ *   prefixIcon={<BellIcon />}
+ *   badge={{ type: 'number', content: 99 }}
+ *   variant="filled"
+ *   active={{ value: true }}
+ * />
+ * ```
+ */
+var TextCard = function TextCard(props) {
+  var text = props.text,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'text' : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'default' : _props$size,
+    _props$clickable = props.clickable,
+    clickable = _props$clickable === void 0 ? true : _props$clickable,
+    prefixIcon = props.prefixIcon,
+    suffixIcon = props.suffixIcon,
+    iconConfig = props.iconConfig,
+    tag = props.tag,
+    tagConfig = props.tagConfig,
+    badge = props.badge,
+    prefixSlot = props.prefixSlot,
+    suffixSlot = props.suffixSlot,
+    textConfig = props.textConfig,
+    _props$widthMode = props.widthMode,
+    widthMode = _props$widthMode === void 0 ? 'auto' : _props$widthMode,
+    width = props.width,
+    _props$maxWidth = props.maxWidth,
+    maxWidth = _props$maxWidth === void 0 ? 400 : _props$maxWidth,
+    onClick = props.onClick,
+    render = props.render,
+    active = props.active,
+    disabled = props.disabled,
+    loading = props.loading,
+    className = props.className,
+    style = props.style,
+    children = props.children,
+    dataSource = props.dataSource,
+    textAlign = props.textAlign,
+    restProps = _objectWithoutProperties(props, _excluded);
+  /**
+   * 合并状态样式
+   * 优先级：loading > disabled > active
+   */
+  var mergedStyle = useMemo(function () {
+    var finalStyle = _objectSpread({}, style);
+
+    // 宽度处理
+    if (widthMode === 'auto') {
+      finalStyle.width = 'auto';
+      finalStyle.maxWidth = maxWidth;
+    } else if (widthMode === 'fixed' && width) {
+      finalStyle.width = width;
+    } else if (widthMode === 'full') {
+      finalStyle.width = '100%';
+      finalStyle.minWidth = 28;
+    }
+
+    // 状态样式合并
+    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, widthMode, width, maxWidth]);
+
+  /**
+   * 合并状态类名
+   */
+  var mergedClassName = useMemo(function () {
+    return classNames('text-card', "text-card--".concat(variant), "text-card--".concat(size), className, {
+      'text-card--active': active === null || active === void 0 ? void 0 : active.value,
+      'text-card--disabled': disabled === null || disabled === void 0 ? void 0 : disabled.value,
+      'text-card--loading': loading === null || loading === void 0 ? void 0 : loading.value,
+      'text-card--clickable': clickable && !(disabled !== null && disabled !== void 0 && disabled.value) && !(loading !== null && loading !== 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, variant, size, active, disabled, loading, clickable]);
+
+  /**
+   * 处理点击事件
+   */
+  var handleClick = useCallback(function (event) {
+    // 禁用或加载状态下不触发点击
+    if (disabled !== null && disabled !== void 0 && disabled.value || loading !== null && loading !== void 0 && loading.value || !clickable) {
+      event.preventDefault();
+      return;
+    }
+
+    // 触发 active.onChange（如果提供且未激活）
+    if (active !== null && active !== void 0 && active.onChange && !active.value) {
+      active.onChange(true);
+    }
+
+    // 触发 onClick
+    if (onClick) {
+      onClick(event);
+    }
+  }, [onClick, active, disabled, loading, clickable]);
+
+  /**
+   * 渲染状态的 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: "text-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: "text-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: "text-card__extra"
+      }, active.extra);
+    }
+    return null;
+  }, [active, disabled, loading]);
+  useEffect(function () {
+    document.body.id = 'body';
+  }, []);
+
+  /**
+   * 渲染主内容
+   */
+  var renderContent = useCallback(function () {
+    // 如果提供了自定义渲染函数，使用自定义渲染
+    if (render) {
+      return render(props);
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, prefixSlot || prefixIcon && /*#__PURE__*/React.createElement(IconWrapper, {
+      icon: prefixIcon,
+      config: iconConfig,
+      position: "prefix"
+    }), /*#__PURE__*/React.createElement(TextContent, {
+      text: text,
+      textConfig: textConfig,
+      active: active
+    }), suffixSlot || /*#__PURE__*/React.createElement(React.Fragment, null, tag && /*#__PURE__*/React.createElement("div", {
+      className: "text-card__tag",
+      style: tagConfig === null || tagConfig === void 0 ? void 0 : tagConfig.style
+    }, tag), suffixIcon && /*#__PURE__*/React.createElement(IconWrapper, {
+      icon: suffixIcon,
+      config: iconConfig,
+      position: "suffix"
+    })));
+  }, [render, props, prefixSlot, prefixIcon, iconConfig, text, textConfig, suffixSlot, tag, tagConfig, suffixIcon, active]);
+  return /*#__PURE__*/React.createElement(BadgeWrapper, {
+    badge: badge
+  }, /*#__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,
+    role: "button",
+    "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));
+};
+
+/**
+ * Provider 包装器
+ * 兼容 PisellCards 系统的 props 传递方式
+ */
+var Provider = function Provider(props) {
+  return /*#__PURE__*/React.createElement(TextCard, _extends({}, props === null || props === void 0 ? void 0 : props.props, props));
+};
+export default Provider;