@jiaozhiye/qm-design-react 1.11.3 → 1.11.5

package/lib/pivot-grid/src/main/Context.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { IColumn, IOrderBy, IRecord, ISuperFilter } from '../../../table/src/table/types';
+import type { IColumn, IOrderBy, IRecord, IRowKey, ISuperFilter } from '../../../table/src/table/types';
 import type { ComponentSize } from '../../../_utils/types';
 export type IPivotMode = 'table' | 'gantt' | 'card' | 'chart';
 export type GroupItem = {
@@ -10,6 +10,11 @@ export type SorterItem = {
     fieldName: string;
     order: IOrderBy;
 };
+export type SearchResult = {
+    value: string;
+    rowKey: IRowKey;
+    dataIndex: string;
+};
 export type IPivotGridContext = {
     prefixCls: string;
     viewMode: IPivotMode;
@@ -22,6 +27,8 @@ export type IPivotGridContext = {
     filterList: ISuperFilter[];
     sorterList: SorterItem[];
     expandedKeys: string[];
+    searchResults: SearchResult[];
+    switchIndex: number;
 };
 type IProps = {
     prefixCls: string;
@@ -39,5 +46,7 @@ export declare const usePivotGridContext: () => (IPivotGridContext & {
     setFilterList: (items: ISuperFilter[]) => void;
     setSorterList: (items: SorterItem[]) => void;
     setExpandedKeys: (keys: string[]) => void;
+    setSearchResults: (value: SearchResult[]) => void;
+    setSwitchIndex: (value: number) => void;
 }) | undefined;
 export {};

package/lib/pivot-grid/style/grid-layout.less

@@ -1,239 +1,243 @@
-/*
- * @Author: 焦质晔
- * @Date: 2022-03-16 19:05:30
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-12-02 20:51:13
- */
-@import '../../style/common';
-
-.@{prefix-pivot-grid}__layout {
-  .reset-container();
-  height: 100%;
-  .header,
-  .footer {
-    border: 1px solid @--border-color-secondary;
-    .table {
-      table-layout: fixed;
-      display: contents;
-      thead th,
-      tfoot td {
-        text-align: left;
-        font-weight: normal;
-        border-right: 1px solid @--border-color-secondary;
-        position: relative;
-        &.selection-column {
-          text-align: center;
-          justify-content: center;
-          border-right-color: transparent;
-        }
-      }
-    }
-  }
-  .header {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    .resize-bar {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: -3px;
-      width: 6px;
-      z-index: 2;
-      cursor: col-resize;
-    }
-  }
-  .body {
-    min-height: fit-content;
-    .group-card {
-      margin: 15px 0;
-      background-color: #fff;
-      border: 1px solid @--border-color-secondary;
-      &.inner {
-        margin: 0 12px 12px;
-      }
-      &:has(.inner) > .label-row > .label-cell {
-        border-bottom: 0;
-      }
-      .label-row {
-        display: flex;
-        align-items: center;
-        .label-cell {
-          align-self: stretch;
-          display: inline-flex;
-          align-items: center;
-          background-color: #fff;
-          border-bottom: 1px solid @--border-color-secondary;
-          &.expandable-column {
-            justify-content: center;
-            .button-icon {
-              & > .anticon {
-                transition: transform 0.3s ease;
-              }
-              &.expand > .anticon {
-                transform: rotate(90deg);
-              }
-            }
-          }
-          &.col--fix-left {
-            position: sticky;
-            z-index: 1;
-          }
-          .title {
-            flex-shrink: 0;
-            margin-right: 20px;
-          }
-        }
-      }
-      .grid-list {
-        margin: 0;
-        border: 0;
-        background: transparent;
-      }
-    }
-    .grid-list {
-      margin: 15px 0;
-      border: 1px solid @--border-color-secondary;
-      .table-row {
-        display: flex;
-        align-items: center;
-        &:hover {
-          .table-cell {
-            background-color: @--background-color-light;
-            .order {
-              display: none;
-            }
-            .checkbox {
-              display: inline-flex;
-            }
-          }
-        }
-        &.row--selection {
-          background-color: @--primary-1;
-          .table-cell {
-            .order {
-              display: none;
-            }
-            .checkbox {
-              display: inline-flex;
-            }
-          }
-        }
-        .table-cell {
-          align-self: stretch; // 子元素高度和父元素一致
-          display: inline-flex;
-          align-items: center;
-          border-bottom: 1px solid @--border-color-secondary;
-        }
-      }
-    }
-  }
-  .footer {
-    position: sticky;
-    bottom: 0;
-    z-index: 2;
-  }
-  .header,
-  .body,
-  .footer {
-    .table-cell {
-      background-color: #fff;
-      border-right: 1px solid @--border-color-secondary;
-      &:last-child {
-        border-right: 0;
-      }
-      &.selection-column {
-        justify-content: center;
-        border-right-color: transparent;
-      }
-      .order {
-        display: inline-block;
-      }
-      .checkbox {
-        display: none;
-      }
-      &.col--center {
-        text-align: center !important;
-        justify-content: center;
-      }
-      &.col--right {
-        text-align: right !important;
-        justify-content: flex-end;
-      }
-      &.col--fix-left {
-        position: sticky;
-        z-index: 1;
-      }
-      .cell {
-        .text-overflow-cut();
-        padding: 0 @--padding-sm;
-      }
-    }
-    .label-cell,
-    .table-cell {
-      &:hover {
-        .count-select {
-          visibility: visible;
-        }
-      }
-    }
-    .count-select {
-      .text-overflow-cut();
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-end;
-      height: 100%;
-      width: 100%;
-      padding: 0 @--padding-sm;
-      color: @--text-color-placeholder;
-      cursor: pointer;
-      visibility: hidden;
-      &:hover,
-      &.ant-dropdown-open {
-        visibility: visible;
-        background-color: @--background-color-light;
-      }
-      &.show {
-        visibility: visible;
-      }
-      .icon {
-        margin-left: 4px;
-      }
-    }
-  }
-  .resize-line {
-    position: absolute;
-    left: -2px;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background-color: @--primary-color;
-    cursor: col-resize;
-    z-index: 2;
-  }
-  // size
-  &.small {
-    .header .table th,
-    .footer .table td,
-    .body .grid-list > li,
-    .body .group-card > li {
-      height: 26px;
-    }
-  }
-  &.middle {
-    .header .table th,
-    .footer .table td,
-    .body .grid-list > li,
-    .body .group-card > li {
-      height: 34px;
-    }
-  }
-  &.large {
-    .header .table th,
-    .footer .table td,
-    .body .grid-list > li,
-    .body .group-card > li {
-      height: 42px;
-    }
-  }
-}
+/*
+ * @Author: 焦质晔
+ * @Date: 2022-03-16 19:05:30
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-12-02 20:51:13
+ */
+@import '../../style/common';
+
+.@{prefix-pivot-grid}__layout {
+  .reset-container();
+  height: 100%;
+  .header,
+  .footer {
+    border: 1px solid @--border-color-secondary;
+    .table {
+      table-layout: fixed;
+      display: contents;
+      thead th,
+      tfoot td {
+        text-align: left;
+        font-weight: normal;
+        border-right: 1px solid @--border-color-secondary;
+        position: relative;
+        &.selection-column {
+          text-align: center;
+          justify-content: center;
+          border-right-color: transparent;
+        }
+      }
+    }
+  }
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    .resize-bar {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: -3px;
+      width: 6px;
+      z-index: 2;
+      cursor: col-resize;
+    }
+  }
+  .body {
+    min-height: fit-content;
+    .group-card {
+      margin: 15px 0;
+      background-color: #fff;
+      border: 1px solid @--border-color-secondary;
+      &.inner {
+        margin: 0 12px 12px;
+      }
+      &:has(.inner) > .label-row > .label-cell {
+        border-bottom: 0;
+      }
+      .label-row {
+        display: flex;
+        align-items: center;
+        .label-cell {
+          align-self: stretch;
+          display: inline-flex;
+          align-items: center;
+          background-color: #fff;
+          border-bottom: 1px solid @--border-color-secondary;
+          &.expandable-column {
+            justify-content: center;
+            .button-icon {
+              & > .anticon {
+                transition: transform 0.3s ease;
+              }
+              &.expand > .anticon {
+                transform: rotate(90deg);
+              }
+            }
+          }
+          &.col--fix-left {
+            position: sticky;
+            z-index: 1;
+          }
+          .title {
+            flex-shrink: 0;
+            margin-right: 20px;
+            font-weight: 700;
+          }
+        }
+      }
+      .grid-list {
+        margin: 0;
+        border: 0;
+        background: transparent;
+      }
+    }
+    .grid-list {
+      margin: 15px 0;
+      border: 1px solid @--border-color-secondary;
+      .table-row {
+        display: flex;
+        align-items: center;
+        &:hover {
+          .table-cell {
+            background-color: @--background-color-light;
+            .order {
+              display: none;
+            }
+            .checkbox {
+              display: inline-flex;
+            }
+          }
+        }
+        &.row--selection {
+          background-color: @--primary-1;
+          .table-cell {
+            .order {
+              display: none;
+            }
+            .checkbox {
+              display: inline-flex;
+            }
+          }
+        }
+        .table-cell {
+          align-self: stretch; // 子元素高度和父元素一致
+          display: inline-flex;
+          align-items: center;
+          border-bottom: 1px solid @--border-color-secondary;
+          &.active {
+            box-shadow: inset 0 0 0 2px @--primary-color;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+  }
+  .header,
+  .body,
+  .footer {
+    .table-cell {
+      background-color: #fff;
+      border-right: 1px solid @--border-color-secondary;
+      &:last-child {
+        border-right: 0;
+      }
+      &.selection-column {
+        justify-content: center;
+        border-right-color: transparent;
+      }
+      .order {
+        display: inline-block;
+      }
+      .checkbox {
+        display: none;
+      }
+      &.col--center {
+        text-align: center !important;
+        justify-content: center;
+      }
+      &.col--right {
+        text-align: right !important;
+        justify-content: flex-end;
+      }
+      &.col--fix-left {
+        position: sticky;
+        z-index: 1;
+      }
+      .cell {
+        .text-overflow-cut();
+        padding: 0 @--padding-sm;
+      }
+    }
+    .label-cell,
+    .table-cell {
+      &:hover {
+        .count-select {
+          visibility: visible;
+        }
+      }
+    }
+    .count-select {
+      .text-overflow-cut();
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+      height: 100%;
+      width: 100%;
+      padding: 0 @--padding-sm;
+      color: @--text-color-placeholder;
+      cursor: pointer;
+      visibility: hidden;
+      &:hover,
+      &.ant-dropdown-open {
+        visibility: visible;
+        background-color: @--background-color-light;
+      }
+      &.show {
+        visibility: visible;
+      }
+      .icon {
+        margin-left: 4px;
+      }
+    }
+  }
+  .resize-line {
+    position: absolute;
+    left: -2px;
+    top: 0;
+    width: 2px;
+    height: 100%;
+    background-color: @--primary-color;
+    cursor: col-resize;
+    z-index: 2;
+  }
+  // size
+  &.small {
+    .header .table th,
+    .footer .table td,
+    .body .grid-list > li,
+    .body .group-card > li {
+      height: 26px;
+    }
+  }
+  &.middle {
+    .header .table th,
+    .footer .table td,
+    .body .grid-list > li,
+    .body .group-card > li {
+      height: 34px;
+    }
+  }
+  &.large {
+    .header .table th,
+    .footer .table td,
+    .body .grid-list > li,
+    .body .group-card > li {
+      height: 42px;
+    }
+  }
+}

package/lib/style/index.css

@@ -31232,6 +31232,7 @@ body {
 .qm-pivot-grid__layout .body .group-card .label-row .label-cell .title {
   flex-shrink: 0;
   margin-right: 20px;
+  font-weight: 700;
 }
 .qm-pivot-grid__layout .body .group-card .grid-list {
   margin: 0;
@@ -31270,6 +31271,9 @@ body {
   align-items: center;
   border-bottom: 1px solid #e8e8e8;
 }
+.qm-pivot-grid__layout .body .grid-list .table-row .table-cell.active {
+  box-shadow: inset 0 0 0 2px #1890ff;
+}
 .qm-pivot-grid__layout .footer {
   position: sticky;
   bottom: 0;