@lingxiteam/ebe-utils 0.1.17 → 0.1.18

package/lib/pcpublic/src/components/pcfactory/src/Table/utils/index.ts

@@ -212,17 +212,22 @@ export const handleExpandColumn = ({
     expandIconPositionRef
   ) {
     // 找到行展开图标位置 基准列的索引（有可能也是分组）
-    const refColIndex = columns?.findIndex((c: any) => {
-      if (c.dataIndex) {
-        return c.dataIndex === expandIconPositionRef?.dataIndex;
-      }
+    const refColIndex = columns?.findIndex(
+      (c: { dataIndex: string | string[]; [key: string]: any }) => {
+        if (c.dataIndex) {
+          return (
+            `${c.dataIndex || ''}` ===
+            `${expandIconPositionRef?.dataIndex || ''}`
+          );
+        }
 
-      if (c.title) {
-        return c.title === expandIconPositionRef?.title;
-      }
+        if (c.title) {
+          return c.title === expandIconPositionRef?.title;
+        }
 
-      return false;
-    });
+        return false;
+      },
+    );
 
     // 说明存在基准列，则进一步定位左右侧
     if (refColIndex !== -1) {

package/lib/pcpublic/src/components/pcfactory/src/styles/components/Table.less

@@ -15,7 +15,7 @@
   display: flex;
   flex-direction: column;
   background-color: #fff;
-  
+
   .@{ant-prefix}-table-expanded-row-fixed:has(.@{ant-prefix}-empty-normal) {
     width: 100%!important;
   }
@@ -23,7 +23,7 @@
   .@{ant-prefix}-table-summary {
     background: transparent;
   }
-  
+
   .table-head-default,
   .table-head-middle {
     margin-bottom: 16px;
@@ -40,7 +40,7 @@
 
     .@{table-prefix-cls} {
       line-height: @table-data-input-height;
-      
+
       .@{ant-prefix}-skeleton-element {
         width: 100%;
 
@@ -55,7 +55,7 @@
         &:hover {
           color: color(~`colorPalette('@{primary-color}', 5) `);
         }
-      
+
         &:active {
           color: color(~`colorPalette('@{primary-color}', 7) `);
         }
@@ -70,9 +70,9 @@
         border-radius: 0;
         .@{table-prefix-cls}-thead {
           th {
-            background: tint(@primary-color, 90%); 
+            background: tint(@primary-color, 90%);
           }
-        } 
+        }
         tr {
           td,
           th {
@@ -358,7 +358,7 @@
             &:empty {
               height: @table-small-td-height;
             }
-  
+
             .@{ant-prefix}-input:not(textarea),
             .@{ant-prefix}-input-number,
             .@{ant-prefix}-input-number-input,
@@ -399,7 +399,7 @@
             .@{switch-prefix-cls} {
               @small-switch-handle-input-height: @small-table-data-input-line-height - 4px;
               min-width: @small-switch-handle-input-height * 2;
-              
+
               &-handle {
                 &::before {
                   border-radius: 50%;
@@ -434,7 +434,7 @@
                 .@{form-prefix-cls}-explain {
                   top: 2px;
                 }
-              } 
+              }
             }
           }
 
@@ -469,7 +469,7 @@
             &:empty {
               height: @table-middle-td-height;
             }
-  
+
             .@{ant-prefix}-input:not(textarea),
             .@{ant-prefix}-input-number,
             .@{ant-prefix}-input-number-input,
@@ -718,7 +718,7 @@
     .@{ant-prefix}-table-fixed {
       width: auto;
     }
-  
+
     // 编辑器的表格内置分页组件中，为了显示快速跳转，会人为的让页数变为 2页，所以要写死隐藏 第2页的跳转标识
     .@{ant-prefix}-pagination-item-2 {
       display: none;
@@ -968,7 +968,8 @@
   .ued-table-cell-pointTag {
     display: inline-flex;
     align-items: center;
-  
+    vertical-align: middle;
+
     &-point {
       display: inline-block;
       width: 4px;
@@ -976,7 +977,7 @@
       border-radius: 50%;
       margin-right: 4px;
     }
-  
+
     &-text {
       font-size: @font-size-sm;
       color: @text-color;
@@ -991,6 +992,7 @@
     font-size: 10px;
     line-height: 18px;
     padding: 0 6px;
+    vertical-align: middle;
   }
 
   .ued-table-cell-pureColourFill {
@@ -1013,6 +1015,55 @@
     }
   }
 
+  .ued-table-cell-thumbnail {
+    display: flex;
+    &-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      img {
+        width: 100%;
+      }
+      &:not(:last-child) {
+        margin-right: 4px;
+      }
+      &:hover {
+        .ued-table-cell-thumbnail-icons {
+          display: flex;
+        }
+      }
+    }
+    &-moreItem {
+      background: #F7F7F7;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #64677A;
+      font-size: 12px;
+      &:hover {
+        background: #EEEFEF;
+      }
+    }
+    &-icons {
+      display: none;
+      background: rgba(0, 0, 0, 0.55);
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      top: 0;
+      .ued-icon {
+        color: #fff;
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+
   .ued-table-row-expand-custom-icon {
     border: none;
     &::after {
@@ -1135,6 +1186,7 @@
       max-height: 270px;
       padding: 12px;
       overflow-y: auto;
+      width: 100%;
 
       .@{ant-prefix}-tree li {
         span.@{ant-prefix}-tree-node-content-wrapper {
@@ -1232,4 +1284,76 @@
 // 上下合并后，下侧表头需合并
 .ued-table-hidden-head-cell {
   display: none;
-}
+}
+
+// 缩略图展示全部图片气泡卡片
+.ued-table-cell-thumbnail-popover {
+  .@{ant-prefix}-popover-inner {
+    max-height: 312px;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      display: none;
+      height: 0;
+      width: 0;
+      background: transparent;
+    }
+  }
+  .@{ant-prefix}-popover-inner-content {
+    padding: 16px 20px !important;
+  }
+  &-content {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    row-gap: 20px;
+    column-gap: 20px;
+  }
+  &-item {
+    display: flex;
+    flex-direction: column;
+  }
+  &-imgItem {
+    width: 100px;
+    height: 100px;
+    border: 1px solid #F2F3F5;
+    border-radius: 4px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    img {
+      width: 100%;
+    }
+    &:hover {
+      .ued-table-cell-thumbnail-icons {
+        display: flex;
+      }
+    }
+    .ued-table-cell-thumbnail-icons {
+      display: none;
+      background: rgba(0, 0, 0, 0.55);
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      top: 0;
+      .ued-icon {
+        color: #fff;
+        font-size: 16px;
+        &:not(:last-child) {
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+  &-imgName {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 100px;
+    font-size: 12px;
+    margin-top: 8px;
+    text-align: center;
+    line-height: 22px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxiteam/ebe-utils",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "",
   "keywords": [],
   "author": "",
@@ -19,7 +19,7 @@
     "@babel/types": "^7.12.12",
     "cac": "^6.7.14",
     "fs-extra": "9.x",
-    "@lingxiteam/ebe": "0.1.17"
+    "@lingxiteam/ebe": "0.1.18"
   },
   "publishConfig": {
     "access": "public"