@pisell/private-materials 6.1.6 → 6.1.8

package/es/plus/clientCard/index.less

@@ -0,0 +1,539 @@
+.pisell-client-card {
+  background: var(--Base-white, #fff);
+  transition: all 0.3s ease;
+  position: relative;
+  padding: 8px;
+  border-radius: 8px;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  // 内容容器
+  &__content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 8px;
+  }
+
+  // 基础信息区域
+  &__info {
+    display: flex;
+    gap: 8px;
+    flex: 1;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  // 详细信息容器
+  &__details {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    overflow: hidden;
+  }
+
+  // 姓名和标签行
+  &__name-tags {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+
+    // 当标签为 inline 模式时的特殊处理
+    &--inline {
+      flex-wrap: nowrap;
+      overflow: hidden;
+
+      .pisell-client-card__name {
+        flex-grow: 1;
+        min-width: 0;
+      }
+
+      .pisell-client-card__tags {
+        flex: 1 0 42px;
+        overflow: hidden;
+
+        &--nowrap {
+          &::after {
+            background: linear-gradient(
+              to right,
+              rgba(255, 255, 255, 0),
+              rgba(255, 255, 255, 1)
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // 字段容器
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  // 插槽容器
+  &__slot-left {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  &__slot-right {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  // 操作区域
+  &__actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  // 菜单按钮样式
+  &__menu-button {
+    border: none;
+    box-shadow: none;
+    padding: 4px;
+    width: 40px;
+    height: 40px;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+    
+    &:focus {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  // 头像样式
+  &__avatar-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  &__avatar {
+    border: 1px solid #e5e7eb;
+
+    .ant-avatar-string {
+      font-weight: 600;
+    }
+  }
+
+  // 状态指示器样式
+  &__status-indicator {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-sizing: border-box;
+    z-index: 1;
+    
+    // 默认位置（适用于圆形头像）
+    bottom: 0;
+    right: 0;
+  }
+  
+  // 针对不同头像形状和尺寸的状态指示器位置调整
+  &__avatar-wrapper {
+    // 方形头像的状态指示器位置
+    .ant-avatar-square ~ .pisell-client-card__status-indicator {
+      bottom: -2px;
+      right: -2px;
+    }
+    
+    // 大尺寸头像的状态指示器位置
+    .ant-avatar-lg ~ .pisell-client-card__status-indicator,
+    .ant-avatar-xl ~ .pisell-client-card__status-indicator,
+    .ant-avatar-xxl ~ .pisell-client-card__status-indicator {
+      bottom: 2px;
+      right: 2px;
+    }
+    
+    // 小尺寸头像的状态指示器位置
+    .ant-avatar-sm ~ .pisell-client-card__status-indicator,
+    .ant-avatar-xs ~ .pisell-client-card__status-indicator {
+      bottom: -1px;
+      right: -1px;
+    }
+    
+    // 方形小尺寸头像的特殊处理
+    .ant-avatar-square.ant-avatar-sm ~ .pisell-client-card__status-indicator,
+    .ant-avatar-square.ant-avatar-xs ~ .pisell-client-card__status-indicator {
+      bottom: -3px;
+      right: -3px;
+    }
+    
+    // 方形大尺寸头像的特殊处理
+    .ant-avatar-square.ant-avatar-lg ~ .pisell-client-card__status-indicator,
+    .ant-avatar-square.ant-avatar-xl ~ .pisell-client-card__status-indicator,
+    .ant-avatar-square.ant-avatar-xxl ~ .pisell-client-card__status-indicator {
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  &__avatar-default {
+    width: 100%;
+    height: 100%;
+    background: #f3f4f6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #9ca3af;
+  }
+
+  &__avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &__avatar-text {
+    background: #e5e7eb;
+    color: #374151;
+    font-weight: 600;
+    font-size: 14px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__contact {
+    font-size: 14px;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    
+    // 地址字段允许显示两行
+    &--address {
+      white-space: normal;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.4;
+    }
+  }
+
+  // 标签样式
+  &__tags {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+
+    > span {
+      border-radius: 16px;
+      margin: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &--nowrap {
+      flex-wrap: nowrap;
+      overflow: hidden;
+      max-width: 100%;
+
+      // 不换行时，超出的标签隐藏
+      .pisell-client-card__tag {
+        flex-shrink: 0;
+
+        &:last-child {
+          flex-shrink: 1;
+          min-width: 0;
+          overflow: hidden;
+        }
+      }
+
+      // 当标签过多时，使用渐变遮罩效果
+      // position: relative;
+
+      // &::after {
+      //   content: '';
+      //   position: absolute;
+      //   right: -5px;
+      //   top: 0;
+      //   bottom: 0;
+      //   width: 20px;
+      //   background: linear-gradient(
+      //     to right,
+      //     rgba(255, 255, 255, 0),
+      //     rgba(255, 255, 255, 1)
+      //   );
+      //   pointer-events: none;
+      //   z-index: 1;
+      // }
+    }
+
+    &--separate {
+      margin-top: 4px;
+    }
+  }
+
+  // 单个标签样式
+  &__tag {
+    &--nowrap {
+      // 不换行模式下的标签样式
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &--wrap {
+      // 换行模式下的标签样式
+      word-break: break-all;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__add-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid currentColor;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+  }
+
+  &__action-btn {
+    display: flex;
+    padding: 0;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+  }
+
+  // 操作菜单样式
+  &__menu-button {
+    &.ant-btn {
+      border-color: #e5e7eb;
+      color: #6b7280;
+    }
+  }
+
+  &__menu {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #6b7280;
+    opacity: 0;
+    transition: all 0.2s ease;
+    position: relative;
+    cursor: pointer;
+  }
+
+  &__dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 4px;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+      0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    z-index: 10;
+    min-width: 160px;
+  }
+
+  &__dropdown-item {
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: #374151;
+    background: none;
+    border: none;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:first-child {
+      border-radius: 8px 8px 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 8px 8px;
+    }
+
+    &--danger {
+      color: #dc2626;
+
+      &:hover {
+        background: #fef2f2;
+      }
+    }
+  }
+
+  // 垂直布局
+  &--vertical {
+    .pisell-client-card__content {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+
+    .pisell-client-card__info {
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .pisell-client-card__details {
+      width: 100%;
+      align-items: center;
+      text-align: center;
+    }
+
+    .pisell-client-card__name-tags {
+      justify-content: center;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .pisell-client-card__fields {
+      align-items: center;
+    }
+
+    .pisell-client-card__extra-fields {
+      align-items: center;
+    }
+
+    .pisell-client-card__actions {
+      display: none;
+    }
+  }
+
+  // 水平布局
+  &--horizontal {
+    .pisell-client-card__info {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .pisell-client-card__avatar-wrapper {
+      align-self: flex-start;
+    }
+  }
+
+  // 空状态样式
+  &--empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+
+    &:hover {
+      background-color: #f6f6f6;
+    }
+
+    .pisell-client-card__empty-title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #262626;
+      margin-bottom: 4px;
+    }
+
+    .pisell-client-card__empty-subtitle {
+      font-size: 14px;
+      color: #8c8c8c;
+    }
+
+    .pisell-client-card__empty-description {
+      font-size: 12px;
+      color: #8c8c8c;
+      margin-top: 2px;
+    }
+
+    .pisell-client-card__plugin-icon {
+      font-size: 16px;
+      color: #1890ff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  // 联系信息样式
+  &__contact {
+    &-item {
+      font-size: 12px;
+      color: #8c8c8c;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+
+  // 额外字段样式
+  &__extra-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__extra-field {
+    font-size: 12px;
+    color: #595959;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    
+    &-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 0;
+    }
+    
+    &-value {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      min-width: 0;
+      
+      // 地址类型的额外字段允许显示两行
+      &--address {
+        white-space: normal;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 1.4;
+      }
+    }
+    
+    &-icon {
+      flex-shrink: 0;
+    }
+  }
+}

package/es/plus/clientCard/line/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClientCardProps } from '../types';
+import './index.less';
+/**
+ * 客户卡片组件 - 行内布局
+ * 所有信息在一行展示：头像、客户名、联系方式（电话优先于邮箱）、标签
+ */
+declare const LineCard: React.FC<ClientCardProps>;
+export default LineCard;

package/es/plus/clientCard/line/index.js

@@ -0,0 +1,157 @@
+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 _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); }
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { Tag } from 'antd';
+import { PisellAvatar } from '@pisell/materials';
+import ClientName from "../../clientName";
+import { getAvatarText } from "../utils";
+import "./index.less";
+import { PREFIX } from "../../clientCard";
+
+/**
+ * 客户卡片组件 - 行内布局
+ * 所有信息在一行展示：头像、客户名、联系方式（电话优先于邮箱）、标签
+ */
+var LineCard = function LineCard(_ref) {
+  var dataSource = _ref.dataSource,
+    isShowName = _ref.isShowName,
+    _ref$isShowAvatar = _ref.isShowAvatar,
+    isShowAvatar = _ref$isShowAvatar === void 0 ? true : _ref$isShowAvatar,
+    _ref$isShowPhone = _ref.isShowPhone,
+    isShowPhone = _ref$isShowPhone === void 0 ? true : _ref$isShowPhone,
+    _ref$isShowEmail = _ref.isShowEmail,
+    isShowEmail = _ref$isShowEmail === void 0 ? true : _ref$isShowEmail,
+    _ref$isShowStatus = _ref.isShowStatus,
+    isShowStatus = _ref$isShowStatus === void 0 ? false : _ref$isShowStatus,
+    _ref$style = _ref.style,
+    customStyle = _ref$style === void 0 ? {} : _ref$style,
+    horizontalGap = _ref.horizontalGap,
+    _ref$avatar = _ref.avatar,
+    avatar = _ref$avatar === void 0 ? {} : _ref$avatar,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? {} : _ref$status,
+    _ref$nameStyle = _ref.nameStyle,
+    nameStyle = _ref$nameStyle === void 0 ? {} : _ref$nameStyle,
+    _ref$tags = _ref.tags,
+    tags = _ref$tags === void 0 ? [] : _ref$tags,
+    _ref$tag = _ref.tag,
+    tag = _ref$tag === void 0 ? {} : _ref$tag,
+    slots = _ref.slots,
+    onViewClient = _ref.onViewClient;
+  // 获取联系方式（电话优先于邮箱）
+  var contactText = useMemo(function () {
+    if (!dataSource) return '';
+    var phone = dataSource.phone,
+      email = dataSource.email;
+    if (isShowPhone && phone) return phone;
+    if (isShowEmail && email) return email;
+    return '';
+  }, [dataSource, isShowPhone, isShowEmail]);
+
+  // 渲染头像
+  var renderAvatar = function renderAvatar() {
+    if (!isShowAvatar || !dataSource) return null;
+    var icon = avatar.icon,
+      _avatar$shape = avatar.shape,
+      shape = _avatar$shape === void 0 ? 'circle' : _avatar$shape,
+      _avatar$borderRadius = avatar.borderRadius,
+      borderRadius = _avatar$borderRadius === void 0 ? 4 : _avatar$borderRadius,
+      _avatar$size = avatar.size,
+      size = _avatar$size === void 0 ? 'sm' : _avatar$size,
+      _avatar$useTextAvatar = avatar.useTextAvatar,
+      useTextAvatar = _avatar$useTextAvatar === void 0 ? false : _avatar$useTextAvatar,
+      children = avatar.children;
+    var avatarProps = {
+      shape: shape,
+      size: size,
+      className: "".concat(PREFIX, "__avatar")
+    };
+    if (shape === 'square') {
+      avatarProps.style = {
+        borderRadius: borderRadius
+      };
+    }
+
+    // 状态指示器
+    var statusIndicator = isShowStatus && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "__status-indicator"),
+      style: {
+        backgroundColor: status.color || '#17B26A'
+      }
+    });
+    if (useTextAvatar) {
+      var text = children || getAvatarText(dataSource.display_name || dataSource.nickname || '');
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(PREFIX, "__avatar-wrapper")
+      }, /*#__PURE__*/React.createElement(PisellAvatar, avatarProps, text), statusIndicator);
+    }
+    if (icon) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(PREFIX, "__avatar-wrapper")
+      }, /*#__PURE__*/React.createElement(PisellAvatar, _extends({}, avatarProps, {
+        icon: icon
+      })), statusIndicator);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "__avatar-wrapper")
+    }, /*#__PURE__*/React.createElement(PisellAvatar, _extends({}, avatarProps, {
+      src: dataSource.cover
+    })), statusIndicator);
+  };
+
+  // 渲染标签
+  var renderTags = function renderTags() {
+    var tagsToShow = tags.length > 0 ? tags : (dataSource === null || dataSource === void 0 ? void 0 : dataSource.tags) || [];
+    if (!tagsToShow.length) return null;
+    var _tag$gap = tag.gap,
+      gap = _tag$gap === void 0 ? 6 : _tag$gap,
+      _tag$flexWrap = tag.flexWrap,
+      flexWrap = _tag$flexWrap === void 0 ? 'nowrap' : _tag$flexWrap;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(PREFIX, "__tags ").concat(PREFIX, "__tags--line"),
+      style: {
+        gap: gap,
+        flexWrap: flexWrap
+      }
+    }, tagsToShow.map(function (tagItem, index) {
+      var content = typeof tagItem === 'string' ? tagItem : tagItem.children || tagItem.label;
+      var tagProps = {
+        key: index,
+        color: _typeof(tagItem) === 'object' ? tagItem.color : undefined,
+        className: "".concat(PREFIX, "__tag")
+      };
+      return /*#__PURE__*/React.createElement(Tag, tagProps, content);
+    }));
+  };
+
+  // 卡片样式
+  var cardStyle = _objectSpread(_objectSpread({}, customStyle), {}, {
+    gap: horizontalGap
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(PREFIX, "".concat(PREFIX, "--line")),
+    style: cardStyle,
+    onClick: function onClick() {
+      return dataSource && (onViewClient === null || onViewClient === void 0 ? void 0 : onViewClient(dataSource));
+    }
+  }, slots === null || slots === void 0 ? void 0 : slots.top, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__content")
+  }, (slots === null || slots === void 0 ? void 0 : slots.left) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__slot-left")
+  }, slots === null || slots === void 0 ? void 0 : slots.left), renderAvatar(), isShowName && /*#__PURE__*/React.createElement(ClientName, {
+    dataSource: dataSource,
+    style: nameStyle,
+    className: "pisell-client-card__name--line"
+  }), contactText && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__contact ").concat(PREFIX, "__contact--line")
+  }, contactText), renderTags(), (slots === null || slots === void 0 ? void 0 : slots.right) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(PREFIX, "__slot-right")
+  }, slots === null || slots === void 0 ? void 0 : slots.right)), slots === null || slots === void 0 ? void 0 : slots.bottom);
+};
+export default LineCard;