@pisell/materials 6.7.1 → 6.7.3

package/es/components/PisellCards/components/GraphicTextCard/GraphicTextCard.less

@@ -0,0 +1,320 @@
+/**
+ * GraphicTextCard 图文卡片组件样式
+ */
+
+.graphic-text-card {
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  // transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  cursor: default;
+  user-select: none;
+
+  // ========== 可点击状态 ==========
+  &--clickable {
+    cursor: pointer;
+
+    &:active {
+      transform: scale(0.98);
+    }
+  }
+
+  // ========== 尺寸变体 ==========
+  &--small {
+    font-size: 12px;
+    line-height: 18px;
+    gap: 4px;
+  }
+
+  &--default {
+    font-size: 14px;
+    line-height: 20px;
+    gap: 6px;
+  }
+
+  &--large {
+    font-size: 16px;
+    line-height: 22px;
+    gap: 8px;
+  }
+
+  // ========== 样式变体 1: 垂直布局-图片 ==========
+  &--vertical-image {
+    flex-direction: column;
+    align-items: center;
+
+    .graphic-text-card__text {
+      font-weight: 600;
+      color: var(--Gray-600, #666666);
+      // transition: color 0.3s;
+    }
+
+    &.graphic-text-card--active {
+      .graphic-text-card__text {
+        color: #7F56DA;
+        font-weight: 600;
+      }
+    }
+
+    &:hover:not(.graphic-text-card--disabled):not(.graphic-text-card--loading).graphic-text-card--clickable {
+      .graphic-text-card__text {
+        color: var(--Gray-900, #101828);
+        font-weight: 600;
+      }
+    }
+  }
+
+  // ========== 样式变体 2: 垂直布局-图标 ==========
+  &--vertical-icon {
+    flex-direction: column;
+    align-items: center;
+
+    .graphic-text-card__graphic {
+      color: var(--Gray-500, #667085);
+      // transition: color 0.3s;
+    }
+
+    .graphic-text-card__text {
+      color: var(--Gray-500, #667085);
+      font-weight: 600;
+      // transition: color 0.3s;
+    }
+
+    &.graphic-text-card--active {
+      .graphic-text-card__graphic {
+        color: #7F56DA;
+      }
+
+      .graphic-text-card__text {
+        font-weight: 600;
+        color: #7F56DA;
+      }
+    }
+
+    &:hover:not(.graphic-text-card--disabled):not(.graphic-text-card--loading).graphic-text-card--clickable {
+      .graphic-text-card__graphic {
+        color: var(--Gray-900, #101828);
+      }
+
+      .graphic-text-card__text {
+        font-weight: 600;
+        color: var(--Gray-900, #101828);
+      }
+    }
+  }
+
+  // ========== 样式变体 3: 横向布局 ==========
+  &--horizontal {
+    flex-direction: row;
+    align-items: center;
+    padding: 4px;
+    border-radius: 8px;
+    border: 1px solid #E2E2E2;
+    background: #FFFFFF;
+    gap: 4px;
+    // transition: all 0.3s;
+
+    .graphic-text-card__graphic {
+      flex-shrink: 0;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .graphic-text-card__text {
+      flex: 1;
+      color: #1B1B1B;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &.graphic-text-card--active {
+      background: #7F56DA;
+      border-color: #7F56DA;
+
+      .graphic-text-card__text {
+        color: #FFFFFF;
+      }
+    }
+
+    &:hover:not(.graphic-text-card--disabled):not(.graphic-text-card--loading):not(.graphic-text-card--active).graphic-text-card--clickable {
+      background: var(--Gray-50, #F9FAFB);
+      border-color: #E2E2E2;
+    }
+  }
+
+  // ========== 样式变体 4: 卡片式 ==========
+  &--card {
+    flex-direction: column;
+    align-items: center;
+    padding: 4px;
+    border-radius: 8px;
+    border: 4px solid var(--Gray-600, transparent);
+    background: var(--Gray-600, #475467);
+    gap: 4px;
+    // transition: all 0.3s;
+
+    .graphic-text-card__graphic {
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      flex-shrink: 0;
+    }
+
+    .graphic-text-card__text {
+      color: #FFFFFF;
+      text-align: center;
+      padding: 4px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &.graphic-text-card--active {
+      border: 4px solid #7F56DA;
+      background: #ffffff;
+      padding: 4px;
+
+      .graphic-text-card__content-wrapper {
+        background: #FFFFFF;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: 0;
+      }
+
+      .graphic-text-card__text {
+        color: #000000;
+      }
+    }
+
+    &:hover:not(.graphic-text-card--disabled):not(.graphic-text-card--loading):not(.graphic-text-card--active).graphic-text-card--clickable {
+      background: var(--Gray-900, #101828);
+      border-color: var(--Gray-900, #101828);
+    }
+  }
+
+  // ========== 状态样式 ==========
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  &--loading {
+    cursor: wait;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  // ========== 图形区域 ==========
+  &__graphic {
+    position: relative;
+    flex-shrink: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #CCCCCC;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // ========== 文本区域 ==========
+  &__text {
+    min-width: 0;
+    // transition: color 0.3s;
+    max-width: 100%;
+  }
+
+  // ========== Extra 容器 ==========
+  &__extra {
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  // ========== 卡片样式的内容包装器（仅在 active 状态下使用） ==========
+  &__content-wrapper {
+    display: contents;
+  }
+}
+
+// ========== 尺寸对应的图形区域默认尺寸 ==========
+// 这些尺寸会被 JavaScript 动态计算并应用，这里提供参考值
+
+// 垂直布局样式（样式一和样式二）
+.graphic-text-card--vertical-image,
+.graphic-text-card--vertical-icon {
+  &.graphic-text-card--small {
+    .graphic-text-card__graphic {
+      // 默认 28x28
+    }
+  }
+
+  &.graphic-text-card--default {
+    .graphic-text-card__graphic {
+      // 默认 36x36
+    }
+  }
+
+  &.graphic-text-card--large {
+    .graphic-text-card__graphic {
+      // 默认 44x44
+    }
+  }
+}
+
+// 横向布局样式（样式三）
+.graphic-text-card--horizontal {
+  &.graphic-text-card--small {
+    // 图形区域默认 48x40
+    min-width: 80px;
+  }
+
+  &.graphic-text-card--default {
+    // 图形区域默认 64x52
+    min-width: 100px;
+  }
+
+  &.graphic-text-card--large {
+    // 图形区域默认 80x64
+    min-width: 120px;
+  }
+}
+
+// 卡片样式（样式四）
+.graphic-text-card--card {
+  &.graphic-text-card--small {
+    // 图形区域默认 56x56
+    width: 64px;
+  }
+
+  &.graphic-text-card--default {
+    // 图形区域默认 72x60
+    width: 80px;
+  }
+
+  &.graphic-text-card--large {
+    // 图形区域默认 88x72
+    width: 96px;
+  }
+}

package/es/components/PisellCards/components/GraphicTextCard/components/BadgeWrapper.js

@@ -0,0 +1,5 @@
+/**
+ * BadgeWrapper 角标包装组件
+ * 复用 TextCard 的 BadgeWrapper 实现
+ */
+export { default } from "../../TextCard/components/BadgeWrapper";

package/es/components/PisellCards/components/GraphicTextCard/components/GraphicArea.js

@@ -0,0 +1,101 @@
+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 _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); }
+import React from 'react';
+import classNames from 'classnames';
+import PisellImageCard from "../../PisellImageCard";
+import Iconfont from "../../../../iconfont";
+/**
+ * GraphicArea 图形区域组件
+ * 负责渲染图片或图标
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 渲染图片
+ * <GraphicArea
+ *   image="https://example.com/image.png"
+ *   config={{ width: 60, height: 60, borderRadius: 8 }}
+ * />
+ *
+ * // 渲染图标
+ * <GraphicArea
+ *   icon={<SmileIcon />}
+ *   config={{ width: 36, height: 36, iconSize: 24, iconColor: '#7F56D9' }}
+ * />
+ * ```
+ */
+var GraphicArea = function GraphicArea(props) {
+  var _config$dataSource, _config$dataSource2, _config$dataSource3;
+  var image = props.image,
+    icon = props.icon,
+    _props$config = props.config,
+    config = _props$config === void 0 ? {} : _props$config,
+    className = props.className;
+  var width = config.width,
+    height = config.height,
+    borderRadius = config.borderRadius,
+    background = config.background,
+    border = config.border,
+    boxShadow = config.boxShadow,
+    padding = config.padding,
+    iconSize = config.iconSize,
+    iconColor = config.iconColor,
+    customStyle = config.style,
+    hidden = config.hidden;
+
+  /**
+   * 图形区域容器样式
+   */
+  var graphicStyle = _objectSpread({
+    width: width,
+    height: height,
+    borderRadius: borderRadius,
+    background: background,
+    border: border,
+    boxShadow: boxShadow,
+    padding: padding
+  }, customStyle);
+  if (hidden) {
+    return null;
+  }
+
+  /**
+   * 图标样式
+   */
+  var iconStyle = {
+    fontSize: iconSize,
+    color: iconColor,
+    width: iconSize,
+    height: iconSize
+  };
+
+  // 其次渲染图标
+  if (icon) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('graphic-text-card__graphic', className),
+      style: graphicStyle
+    }, /*#__PURE__*/React.createElement(Iconfont, {
+      style: iconStyle,
+      type: icon
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('graphic-text-card__graphic', className),
+    style: graphicStyle
+  }, /*#__PURE__*/React.createElement(PisellImageCard, _extends({}, config, {
+    dataSource: {
+      src: image,
+      alt: (_config$dataSource = config.dataSource) === null || _config$dataSource === void 0 ? void 0 : _config$dataSource.alt,
+      errorSrc: (_config$dataSource2 = config.dataSource) === null || _config$dataSource2 === void 0 ? void 0 : _config$dataSource2.errorSrc,
+      fallbackSrc: (_config$dataSource3 = config.dataSource) === null || _config$dataSource3 === void 0 ? void 0 : _config$dataSource3.fallbackSrc
+    },
+    width: '100%',
+    height: '100%'
+  })));
+};
+export default GraphicArea;

package/es/components/PisellCards/components/GraphicTextCard/components/TextContent.js

@@ -0,0 +1,94 @@
+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 React, { useMemo } from 'react';
+import classNames from 'classnames';
+/**
+ * TextContent 文本内容组件
+ * 负责渲染主文本内容，支持省略和多行显示
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 单行文本
+ * <TextContent text="Tab title" />
+ *
+ * // 自定义样式
+ * <TextContent
+ *   text="Tab title"
+ *   textConfig={{
+ *     fontSize: 16,
+ *     fontWeight: 600,
+ *     color: '#101828',
+ *     maxLines: 2,
+ *     textAlign: 'center'
+ *   }}
+ * />
+ * ```
+ */
+var TextContent = function TextContent(props) {
+  var _active$style3;
+  var text = props.text,
+    _props$textConfig = props.textConfig,
+    textConfig = _props$textConfig === void 0 ? {} : _props$textConfig,
+    className = props.className,
+    active = props.active;
+  var _textConfig$maxLines = textConfig.maxLines,
+    maxLines = _textConfig$maxLines === void 0 ? 1 : _textConfig$maxLines,
+    _textConfig$ellipsis = textConfig.ellipsis,
+    ellipsis = _textConfig$ellipsis === void 0 ? true : _textConfig$ellipsis,
+    fontSize = textConfig.fontSize,
+    fontWeight = textConfig.fontWeight,
+    color = textConfig.color,
+    _textConfig$textAlign = textConfig.textAlign,
+    textAlign = _textConfig$textAlign === void 0 ? 'left' : _textConfig$textAlign;
+
+  /**
+   * 计算文本样式
+   * 处理单行省略和多行省略的样式差异
+   */
+  var textStyle = useMemo(function () {
+    var _active$style;
+    var baseStyle = {
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      color: color,
+      textAlign: textAlign
+    };
+    if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && (_active$style = active.style) !== null && _active$style !== void 0 && _active$style.color) {
+      var _active$style2;
+      baseStyle.color = active === null || active === void 0 || (_active$style2 = active.style) === null || _active$style2 === void 0 ? void 0 : _active$style2.color;
+    }
+
+    // 单行省略
+    if (ellipsis && maxLines === 1) {
+      return _objectSpread(_objectSpread({}, baseStyle), {}, {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      });
+    }
+
+    // 多行省略
+    if (ellipsis && maxLines > 1) {
+      return _objectSpread(_objectSpread({}, baseStyle), {}, {
+        display: '-webkit-box',
+        WebkitLineClamp: maxLines,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        wordBreak: 'break-word'
+      });
+    }
+
+    // 不省略
+    return baseStyle;
+  }, [fontSize, fontWeight, color, textAlign, ellipsis, maxLines, active === null || active === void 0 || (_active$style3 = active.style) === null || _active$style3 === void 0 ? void 0 : _active$style3.color, active === null || active === void 0 ? void 0 : active.value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('graphic-text-card__text', className),
+    style: textStyle
+  }, text);
+};
+export default TextContent;

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

@@ -0,0 +1,6 @@
+/**
+ * 子组件统一导出
+ */
+export { default as GraphicArea } from "./GraphicArea";
+export { default as TextContent } from "./TextContent";
+export { default as BadgeWrapper } from "./BadgeWrapper";

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

@@ -0,0 +1,5 @@
+/**
+ * Hooks 统一导出
+ */
+export { useGraphicTextCardStyle } from "./useGraphicTextCardStyle";
+export { useGraphicTextCardClick } from "./useGraphicTextCardClick";

package/es/components/PisellCards/components/GraphicTextCard/hooks/useGraphicTextCardClick.js

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+/**
+ * useGraphicTextCardClick Hook
+ * 处理组件点击事件的逻辑
+ * 
+ * @param props - GraphicTextCard 组件的 Props
+ * @returns 点击事件处理函数
+ * 
+ * @example
+ * ```tsx
+ * const handleClick = useGraphicTextCardClick(props);
+ * <div onClick={handleClick}>...</div>
+ * ```
+ */
+export var useGraphicTextCardClick = function useGraphicTextCardClick(props) {
+  var onClick = props.onClick,
+    active = props.active,
+    disabled = props.disabled,
+    loading = props.loading,
+    _props$clickable = props.clickable,
+    clickable = _props$clickable === void 0 ? true : _props$clickable;
+
+  /**
+   * 处理点击事件
+   * 在禁用或加载状态下不触发点击
+   * 自动更新 active 状态（如果提供了 onChange）
+   */
+  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]);
+  return handleClick;
+};

package/es/components/PisellCards/components/GraphicTextCard/hooks/useGraphicTextCardStyle.js

@@ -0,0 +1,85 @@
+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';
+/**
+ * useGraphicTextCardStyle Hook
+ * 处理组件样式和类名的合并逻辑
+ * 
+ * @param props - GraphicTextCard 组件的 Props
+ * @returns 合并后的样式和类名
+ * 
+ * @example
+ * ```tsx
+ * const { mergedStyle, mergedClassName } = useGraphicTextCardStyle(props);
+ * ```
+ */
+export var useGraphicTextCardStyle = function useGraphicTextCardStyle(props) {
+  var _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'vertical-image' : _props$variant,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'default' : _props$size,
+    active = props.active,
+    disabled = props.disabled,
+    loading = props.loading,
+    className = props.className,
+    style = props.style,
+    _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,
+    _props$clickable = props.clickable,
+    clickable = _props$clickable === void 0 ? true : _props$clickable;
+  /**
+   * 合并样式
+   * 处理宽度模式和状态样式
+   * 优先级：loading > disabled > active
+   */
+  var mergedStyle = useMemo(function () {
+    var finalStyle = _objectSpread({
+      height: '100%'
+    }, 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%';
+    }
+
+    // 状态样式合并（优先级：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, widthMode, width, maxWidth]);
+
+  /**
+   * 合并类名
+   * 包含基础类名、变体类名、尺寸类名、状态类名
+   */
+  var mergedClassName = useMemo(function () {
+    return classNames('graphic-text-card', "graphic-text-card--".concat(variant), "graphic-text-card--".concat(size), className, {
+      'graphic-text-card--active': active === null || active === void 0 ? void 0 : active.value,
+      'graphic-text-card--disabled': disabled === null || disabled === void 0 ? void 0 : disabled.value,
+      'graphic-text-card--loading': loading === null || loading === void 0 ? void 0 : loading.value,
+      'graphic-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]);
+  return {
+    mergedStyle: mergedStyle,
+    mergedClassName: mergedClassName
+  };
+};

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

@@ -0,0 +1,4 @@
+/**
+ * GraphicTextCard 组件入口文件
+ */
+export { default } from "./GraphicTextCard";

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

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