@pisell/private-materials 6.4.61 → 6.4.63

package/es/plus/contactInfo/index.less

@@ -0,0 +1,621 @@
+.pisell-plus-contact-info {
+  padding: 8px;
+  background: var(--Base-white, #fff);
+  position: relative;
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #d5d7da;
+  cursor: pointer;
+
+  &__horizontal {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 8px;
+
+    &-left {
+      min-width: 0;
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      gap: 8px;
+
+      &-content {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+
+    &-right {
+      padding: 0 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &-icon {
+        font-size: 24px;
+        color: #475467;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &__vertical {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    overflow: hidden;
+  }
+
+  &__name-horizontal-container {
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+    line-clamp: 5;
+    -webkit-box-orient: vertical;
+  }
+
+  &__name-horizontal {
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-weight: 600;
+    white-space: wrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__phone-horizontal {
+    padding-left: 4px;
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-weight: 400;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__name {
+    // display: flex;
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  &__text {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-weight: 400;
+    // 一行展示，超出部分使用...展示，不要换行
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__empty-description {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    color: #101828;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+// .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;
+//     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/es/plus/contactInfo/locales.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    en: {
+        'pisell2.text.contact-info.placeholder': string;
+        'pisell2.text.contact-info.actions.delete': string;
+    };
+    'zh-CN': {
+        'pisell2.text.contact-info.placeholder': string;
+        'pisell2.text.contact-info.actions.delete': string;
+    };
+    'zh-HK': {
+        'pisell2.text.contact-info.placeholder': string;
+        'pisell2.text.contact-info.actions.delete': string;
+    };
+};
+export default _default;

package/es/plus/contactInfo/locales.js

@@ -0,0 +1,14 @@
+export default {
+  en: {
+    'pisell2.text.contact-info.placeholder': 'Add Contact',
+    'pisell2.text.contact-info.actions.delete': 'Delete'
+  },
+  'zh-CN': {
+    'pisell2.text.contact-info.placeholder': '添加联系人',
+    'pisell2.text.contact-info.actions.delete': '删除'
+  },
+  'zh-HK': {
+    'pisell2.text.contact-info.placeholder': '添加聯繫人',
+    'pisell2.text.contact-info.actions.delete': '刪除'
+  }
+};