@pisell/materials 6.7.4 → 6.8.2

package/es/components/PisellCards/components/TextCard/TextCard.less

@@ -0,0 +1,193 @@
+/**
+ * TextCard 文本卡片组件样式
+ */
+
+.text-card {
+  display: inline-flex;
+  align-items: center;
+  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 {
+    padding: 8px 12px;
+    font-size: 14px;
+    line-height: 22px;
+    gap: 8px;
+    border-radius: 4px;
+  }
+
+  &--default {
+    padding: 12px 16px;
+    font-size: 14px;
+    line-height: 22px;
+    gap: 12px;
+    border-radius: 6px;
+  }
+
+  &--large {
+    padding: 16px 20px;
+    font-size: 16px;
+    line-height: 24px;
+    gap: 16px;
+    border-radius: 8px;
+  }
+
+  // ========== 样式变体 1: 纯文本 ==========
+  &--text {
+    background: transparent;
+    border: none;
+
+    &.text-card--active {
+      color: var(--theme-color, #7F56D9);
+      font-weight: 600;
+    }
+
+    &:hover:not(.text-card--disabled):not(.text-card--loading).text-card--clickable {
+      color: var(--theme-color-light, #B692F6);
+    }
+  }
+
+  // ========== 样式变体 2: 圆角背景（填充） ==========
+  &--filled {
+    border-radius: 40px;
+
+    &.text-card--active {
+      background: var(--theme-color, #7F56D9);
+      color: #fff;
+    }
+
+    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
+      background: #F2F4F7;
+    }
+  }
+
+  // ========== 样式变体 3: 浅色背景 ==========
+  &--light {
+    &.text-card--active {
+      background: var(--theme-color-bg, #F9F5FF);
+      color: var(--theme-color, #7F56D9);
+      font-weight: 600;
+    }
+
+    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
+      background: #F2F4F7;
+    }
+  }
+
+  // ========== 样式变体 4: 描边 ==========
+  &--outlined {
+    background: transparent;
+    color: var(--Gray-600, #475467);
+
+    &.text-card--active {
+      color: #000;
+      background: var(--Gray-100, #F2F4F7);
+    }
+
+    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
+      color: #000;
+      background: var(--Gray-50, #F9FAFB);
+    }
+  }
+
+  // ========== 样式变体 5: 渐变 ==========
+  &--gradient {
+    background: transparent;
+    color: var(--Gray-500, #667085);
+
+    &.text-card--active {
+      border-radius: 6px;
+      background: var(--Base-White, #FFF);
+      /* Shadow/sm */
+      box-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.10), 0 1px 2px 0 rgba(16, 24, 40, 0.06);
+      color: var(--Gray-900, #101828);
+    }
+
+    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
+      color: #000;
+    }
+  }
+
+  // ========== 样式变体 6: 虚线 ==========
+  &--dashed {
+    background: transparent;
+    color: var(--Gray-600, #475467);
+
+    &.text-card--active {
+      border-radius: 8px 8px 0 0;
+      border-top: 1px solid var(--Gray-300, #D0D5DD);
+      border-right: 1px solid var(--Gray-300, #D0D5DD);
+      border-left: 1px solid var(--Gray-300, #D0D5DD);
+      background: var(--Base-White, #FFF);
+      color: var(--theme-color, #7F56D9);
+    }
+
+    &:hover:not(.text-card--disabled):not(.text-card--loading):not(.text-card--active).text-card--clickable {
+      color: var(--Base-Black, #000);
+    }
+  }
+
+  // ========== 状态样式 ==========
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+    color: rgba(0, 0, 0, 0.25);
+  }
+
+  &--loading {
+    cursor: wait;
+    opacity: 0.6;
+  }
+
+  // ========== 内容容器 ==========
+  &__content {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  // ========== 图标容器 ==========
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 1;
+
+    &--prefix {
+      // 前置图标样式
+    }
+
+    &--suffix {
+      // 后置图标样式
+    }
+  }
+
+  // ========== 标签容器 ==========
+  &__tag {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  // ========== Extra 容器 ==========
+  &__extra {
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BadgeWrapperProps } from '../types';
+/**
+ * BadgeWrapper 角标包装组件
+ * 负责角标的渲染和定位，支持红点、数字、文本三种类型
+ *
+ * @example
+ * ```tsx
+ * // 红点角标
+ * <BadgeWrapper badge={{ type: 'dot' }}>
+ *   <TextCard text="Item" />
+ * </BadgeWrapper>
+ *
+ * // 数字角标
+ * <BadgeWrapper badge={{ type: 'number', content: 99 }}>
+ *   <TextCard text="Item" />
+ * </BadgeWrapper>
+ *
+ * // 文本角标
+ * <BadgeWrapper badge={{ type: 'text', content: 'New' }}>
+ *   <TextCard text="Item" />
+ * </BadgeWrapper>
+ * ```
+ */
+declare const BadgeWrapper: React.FC<BadgeWrapperProps>;
+export default BadgeWrapper;

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Badge } from 'antd';
+/**
+ * BadgeWrapper 角标包装组件
+ * 负责角标的渲染和定位，支持红点、数字、文本三种类型
+ *
+ * @example
+ * ```tsx
+ * // 红点角标
+ * <BadgeWrapper badge={{ type: 'dot' }}>
+ *   <TextCard text="Item" />
+ * </BadgeWrapper>
+ *
+ * // 数字角标
+ * <BadgeWrapper badge={{ type: 'number', content: 99 }}>
+ *   <TextCard text="Item" />
+ * </BadgeWrapper>
+ *
+ * // 文本角标
+ * <BadgeWrapper badge={{ type: 'text', content: 'New' }}>
+ *   <TextCard text="Item" />
+ * </BadgeWrapper>
+ * ```
+ */
+var BadgeWrapper = function BadgeWrapper(props) {
+  var badge = props.badge,
+    children = props.children;
+
+  // 如果没有角标配置，直接返回子元素
+  if (!badge) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  var _badge$type = badge.type,
+    type = _badge$type === void 0 ? 'dot' : _badge$type,
+    content = badge.content,
+    _badge$position = badge.position,
+    position = _badge$position === void 0 ? 'top-right' : _badge$position,
+    offset = badge.offset,
+    color = badge.color,
+    style = badge.style;
+
+  /**
+   * 根据角标类型渲染不同的 Badge
+   */
+  var renderBadge = function renderBadge() {
+    // 红点类型
+    if (type === 'dot') {
+      return /*#__PURE__*/React.createElement(Badge, {
+        dot: true,
+        color: color,
+        offset: offset,
+        style: style
+      }, children);
+    }
+
+    // 数字或文本类型
+    if (type === 'number' || type === 'text') {
+      return /*#__PURE__*/React.createElement(Badge, {
+        count: content,
+        color: color,
+        offset: offset,
+        style: style,
+        showZero: type === 'number'
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  };
+  return renderBadge();
+};
+export default BadgeWrapper;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IconWrapperProps } from '../types';
+/**
+ * IconWrapper 图标包装组件
+ * 负责统一图标渲染逻辑，支持自定义图标大小和颜色
+ *
+ * @example
+ * ```tsx
+ * <IconWrapper
+ *   icon={<BellIcon />}
+ *   position="prefix"
+ *   config={{ size: 16, color: '#666' }}
+ * />
+ * ```
+ */
+declare const IconWrapper: React.FC<IconWrapperProps>;
+export default IconWrapper;

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

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+/**
+ * IconWrapper 图标包装组件
+ * 负责统一图标渲染逻辑，支持自定义图标大小和颜色
+ *
+ * @example
+ * ```tsx
+ * <IconWrapper
+ *   icon={<BellIcon />}
+ *   position="prefix"
+ *   config={{ size: 16, color: '#666' }}
+ * />
+ * ```
+ */
+var IconWrapper = function IconWrapper(props) {
+  var icon = props.icon,
+    config = props.config,
+    position = props.position,
+    className = props.className;
+
+  /**
+   * 计算图标样式
+   * 支持自定义大小和颜色
+   */
+  var iconStyle = useMemo(function () {
+    var style = {};
+    if (config !== null && config !== void 0 && config.size) {
+      style.fontSize = config.size;
+    }
+    if (config !== null && config !== void 0 && config.color) {
+      style.color = config.color;
+    }
+    return style;
+  }, [config === null || config === void 0 ? void 0 : config.size, config === null || config === void 0 ? void 0 : config.color]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('text-card__icon', "text-card__icon--".concat(position), className),
+    style: iconStyle
+  }, icon);
+};
+export default IconWrapper;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TextContentProps } from '../types';
+/**
+ * TextContent 文本内容组件
+ * 负责渲染主文本内容，处理文本省略逻辑
+ *
+ * @example
+ * ```tsx
+ * <TextContent
+ *   text="这是一段很长的文本内容"
+ *   textConfig={{
+ *     maxLines: 2,
+ *     ellipsis: true,
+ *     fontSize: 14,
+ *     color: '#333'
+ *   }}
+ * />
+ * ```
+ */
+declare const TextContent: React.FC<TextContentProps>;
+export default TextContent;

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

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+/**
+ * TextContent 文本内容组件
+ * 负责渲染主文本内容，处理文本省略逻辑
+ *
+ * @example
+ * ```tsx
+ * <TextContent
+ *   text="这是一段很长的文本内容"
+ *   textConfig={{
+ *     maxLines: 2,
+ *     ellipsis: true,
+ *     fontSize: 14,
+ *     color: '#333'
+ *   }}
+ * />
+ * ```
+ */
+var TextContent = function TextContent(props) {
+  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,
+    flex = textConfig.flex;
+
+  /**
+   * 计算文本样式
+   * 处理字体大小、粗细、颜色和省略号
+   */
+  var textStyle = useMemo(function () {
+    var _active$style, _active$style3;
+    var style = {
+      textAlign: textAlign,
+      flex: flex !== null && flex !== void 0 ? flex : 1
+    };
+
+    // 基础样式
+    if (fontSize) style.fontSize = fontSize;
+    if (fontWeight) style.fontWeight = fontWeight;
+    if (color) style.color = color;
+    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;
+      style.color = active === null || active === void 0 || (_active$style2 = active.style) === null || _active$style2 === void 0 ? void 0 : _active$style2.color;
+    }
+    if (active !== null && active !== void 0 && active.value && active !== null && active !== void 0 && (_active$style3 = active.style) !== null && _active$style3 !== void 0 && _active$style3.fontWeight) {
+      var _active$style4;
+      style.fontWeight = active === null || active === void 0 || (_active$style4 = active.style) === null || _active$style4 === void 0 ? void 0 : _active$style4.fontWeight;
+    }
+
+    // 单行省略
+    if (ellipsis && maxLines === 1) {
+      style.overflow = 'hidden';
+      style.textOverflow = 'ellipsis';
+      style.whiteSpace = 'nowrap';
+    }
+
+    // 多行省略
+    if (ellipsis && maxLines > 1) {
+      style.overflow = 'hidden';
+      style.textOverflow = '-o-ellipsis-lastline';
+      style.textOverflow = 'ellipsis';
+      style.display = '-webkit-box';
+      style.WebkitLineClamp = maxLines;
+      style.lineClamp = maxLines;
+      style.WebkitBoxOrient = 'vertical';
+      style.whiteSpace = 'normal';
+    }
+    return style;
+  }, [active, fontSize, fontWeight, color, ellipsis, maxLines]);
+  if (active !== null && active !== void 0 && active.value) {
+    console.log('textStyle11', textStyle);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('text-card__content', className),
+    style: textStyle
+  }, text);
+};
+export default TextContent;

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

@@ -0,0 +1,6 @@
+/**
+ * TextCard 子组件导出
+ */
+export { default as TextContent } from './TextContent';
+export { default as IconWrapper } from './IconWrapper';
+export { default as BadgeWrapper } from './BadgeWrapper';

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

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

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

@@ -0,0 +1 @@
+// 自定义 hooks

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

@@ -0,0 +1,5 @@
+/**
+ * TextCard 组件导出
+ */
+export { default } from './TextCard';
+export type { TextCardProps } from './types';

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

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