update: table增加高亮显示

packages/app/src/components/table/BodyTr.tsx

@@ -3,14 +3,19 @@ import classNames from 'classnames';
 import {CSSProperties, FC} from 'react';
 
 type Props = {
-  getVisibleCells: () => Cell<Record<string, any>, unknown>[]
+  getVisibleCells: () => Cell<Record<string, any>, unknown>[],
+  highlight?: boolean,
 };
 
-const BodyTr: FC<Props> = function({getVisibleCells}) {
+const BodyTr: FC<Props> = function({getVisibleCells, highlight}) {
   const trList = getVisibleCells();
 
   return (
-    <tr>
+    <tr
+      className={classNames({
+        'ld-table-tr-highlight': highlight,
+      })}
+    >
       {trList.map(function({
         id,
         column,

packages/app/src/components/table/index.css

@@ -123,8 +123,8 @@
     min-width: 0;
     padding: 16px;
     overflow-wrap: anywhere;
-    border-inline-end: 1px solid #f0f0f0;
-    border-bottom: 1px solid #f0f0f0;
+    border-inline-end: 1px solid var(--border-color-light);
+    border-bottom: 1px solid var(--border-color-light);
     transition: background 0.2s, border-color 0.2s;
   }
 
@@ -137,6 +137,14 @@
   }
 }
 
+.ld-table-tr-highlight {
+  --border-color-light: --primary-color-light;
+
+  & td {
+    background-color: var(--primary-color-light) !important;
+  }
+}
+
 .ld-table-pagination {
   display: flex;
   width: 100%;

packages/app/src/components/table/index.tsx

@@ -50,6 +50,8 @@ type Props<T extends Record<string, unknown>> = {
   setRowSelection?: Dispatch<SetStateAction<RowSelectionState>>;
   disabledHeadSort?: boolean;
   disabledSizeChange?: boolean;
+  highlightValue?: unknown;
+  hightlightKey?: keyof T;
 };
 
 function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
@@ -66,6 +68,8 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
     settingContext,
     disabledHeadSort,
     disabledSizeChange,
+    highlightValue,
+    hightlightKey,
   } = props;
   const [{page, pageSize}, {setPageContext}] = useTablePageContext(pageContext);
   const [{isSearching}] = useTableSearchContext(searchContext);
@@ -150,9 +154,17 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
           >
             <tbody className="ld-table-body">
               {getRowModel().rows.length > 0 ? (
-                getRowModel().rows.map(function({id, getVisibleCells}) {
+                getRowModel().rows.map(function({
+                  id,
+                  getVisibleCells,
+                  original,
+                }) {
                   return (
-                    <BodyTr getVisibleCells={getVisibleCells} key={id} />
+                    <BodyTr
+                      getVisibleCells={getVisibleCells}
+                      key={id}
+                      highlight={original[hightlightKey as string ?? 'id'] === highlightValue}
+                    />
                   );
                 })
               ) : (