@pisell/private-materials 6.2.32 → 6.3.2

package/lib/plus/clientCard/index.less

@@ -1,536 +0,0 @@
-.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__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

@@ -1,9 +0,0 @@
-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

@@ -1,153 +0,0 @@
-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;