@pisell/private-materials 6.3.90 → 6.3.92

package/lib/plus/clientCard/index.less

@@ -0,0 +1,515 @@
+.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: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .pisell-client-card__tags {
+        flex: 0 100 auto;
+        min-width: 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;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+    
+    &:focus {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &__menu-button-icon {
+    font-size: 28px;
+  }
+
+  // 头像样式
+  &__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;
+        }
+      }
+    }
+
+    &--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;
+  }
+
+  // 操作菜单样式
+  &__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__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;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .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/lib/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/lib/plus/clientCard/line/index.js

@@ -0,0 +1,153 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plus/clientCard/line/index.tsx
+var line_exports = {};
+__export(line_exports, {
+  default: () => line_default
+});
+module.exports = __toCommonJS(line_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_antd = require("antd");
+var import_materials = require("@pisell/materials");
+var import_clientName = __toESM(require("../../clientName"));
+var import_utils = require("../utils");
+var import_index = require("./index.less");
+var import_clientCard = require("../../clientCard");
+var LineCard = ({
+  dataSource,
+  isShowName,
+  isShowAvatar = true,
+  isShowPhone = true,
+  isShowEmail = true,
+  isShowStatus = false,
+  // 样式配置
+  style: customStyle = {},
+  horizontalGap,
+  // 头像配置
+  avatar = {},
+  status = {},
+  // 姓名样式
+  nameStyle = {},
+  // 标签配置
+  tags = [],
+  tag = {},
+  // 插槽
+  slots,
+  // 事件回调
+  onViewClient
+}) => {
+  const contactText = (0, import_react.useMemo)(() => {
+    if (!dataSource) return "";
+    const { phone, email } = dataSource;
+    if (isShowPhone && phone) return phone;
+    if (isShowEmail && email) return email;
+    return "";
+  }, [dataSource, isShowPhone, isShowEmail]);
+  const renderAvatar = () => {
+    if (!isShowAvatar || !dataSource) return null;
+    const {
+      icon,
+      shape = "circle",
+      borderRadius = 4,
+      size = "sm",
+      useTextAvatar = false,
+      children
+    } = avatar;
+    const avatarProps = {
+      shape,
+      size,
+      className: `${import_clientCard.PREFIX}__avatar`
+    };
+    if (shape === "square") {
+      avatarProps.style = { borderRadius };
+    }
+    const statusIndicator = isShowStatus && /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${import_clientCard.PREFIX}__status-indicator`,
+        style: {
+          backgroundColor: status.color || "#17B26A"
+        }
+      }
+    );
+    if (useTextAvatar) {
+      const text = children || (0, import_utils.getAvatarText)(dataSource.display_name || dataSource.nickname || "");
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_clientCard.PREFIX}__avatar-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellAvatar, { ...avatarProps }, text), statusIndicator);
+    }
+    if (icon) {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_clientCard.PREFIX}__avatar-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellAvatar, { ...avatarProps, icon }), statusIndicator);
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_clientCard.PREFIX}__avatar-wrapper` }, /* @__PURE__ */ import_react.default.createElement(import_materials.PisellAvatar, { ...avatarProps, src: dataSource.cover }), statusIndicator);
+  };
+  const renderTags = () => {
+    const tagsToShow = tags.length > 0 ? tags : (dataSource == null ? void 0 : dataSource.tags) || [];
+    if (!tagsToShow.length) return null;
+    const { gap = 6, flexWrap = "nowrap" } = tag;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${import_clientCard.PREFIX}__tags ${import_clientCard.PREFIX}__tags--line`,
+        style: { gap, flexWrap }
+      },
+      tagsToShow.map((tagItem, index) => {
+        const content = typeof tagItem === "string" ? tagItem : tagItem.children || tagItem.label;
+        const tagProps = {
+          key: index,
+          color: typeof tagItem === "object" ? tagItem.color : void 0,
+          className: `${import_clientCard.PREFIX}__tag`
+        };
+        return /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { ...tagProps }, content);
+      })
+    );
+  };
+  const cardStyle = {
+    ...customStyle,
+    gap: horizontalGap
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(import_clientCard.PREFIX, `${import_clientCard.PREFIX}--line`),
+      style: cardStyle,
+      ...{ onClick: () => dataSource && (onViewClient == null ? void 0 : onViewClient(dataSource)) }
+    },
+    slots == null ? void 0 : slots.top,
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_clientCard.PREFIX}__content` }, (slots == null ? void 0 : slots.left) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_clientCard.PREFIX}__slot-left` }, slots == null ? void 0 : slots.left), renderAvatar(), isShowName && /* @__PURE__ */ import_react.default.createElement(
+      import_clientName.default,
+      {
+        dataSource,
+        style: nameStyle,
+        className: "pisell-client-card__name--line"
+      }
+    ), contactText && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_clientCard.PREFIX}__contact ${import_clientCard.PREFIX}__contact--line` }, contactText), renderTags(), (slots == null ? void 0 : slots.right) && /* @__PURE__ */ import_react.default.createElement("div", { className: `${import_clientCard.PREFIX}__slot-right` }, slots == null ? void 0 : slots.right)),
+    slots == null ? void 0 : slots.bottom
+  );
+};
+var line_default = LineCard;