подстветка ячеек

src/component/DualSpreadsheet/components/Cell.tsx

@@ -23,13 +23,22 @@ export const Cell = memo(
     activeCellRef,
     style, // Добавляем style для react-window
     mergedCellInfo,
+    highlightColor, // Цвет подсветки для формул
   }: CellProps) => {
     // Если ячейка объединена, но не является основной, не рендерим её
     if (mergedCellInfo?.isMerged && !mergedCellInfo.isMainCell) {
       return null
     }
 
-    const className = `border border-border ${isModified && !mergedCellInfo?.isMerged ? 'bg-yellow-200' : ''}`
+    // Определяем классы CSS для подсветки и обычного состояния
+    let className = 'border border-border'
+
+    // Приоритет стилей: подсветка формул > изменения > обычное состояние
+    if (highlightColor) {
+      className += ` ${highlightColor}`
+    } else if (isModified && !mergedCellInfo?.isMerged) {
+      className += ' bg-yellow-200'
+    }
 
     // Отладка стилей для измененных ячеек
     if (isModified) {
@@ -38,6 +47,7 @@ export const Cell = memo(
         isModified,
         isSelected,
         displayValue,
+        highlightColor,
       })
     }
 
@@ -68,16 +78,27 @@ export const Cell = memo(
       // Рассчитываем общую высоту для объединенной ячейки
       const totalHeight = ROW_HEIGHT * rowSpan
 
+      // Определяем цвет фона для объединенной ячейки
+      let backgroundColor = 'white'
+      if (highlightColor) {
+        // Если есть подсветка формулы, используем её
+        const bgMatch = highlightColor.match(/bg-(\w+)-(\d+)/)
+        if (bgMatch) {
+          backgroundColor = `var(--${bgMatch[1]}-${bgMatch[2]})`
+        }
+      } else if (isSelected) {
+        backgroundColor = 'hsl(var(--accent))'
+      } else if (isModified) {
+        backgroundColor =
+          '#fef08a' /* тот же жёлтый оттенок, что и bg-yellow-200 */
+      }
+
       cellStyle = {
         ...cellStyle,
         width: totalWidth,
         height: totalHeight,
         zIndex: 10, // Поднимаем выше обычных ячеек
-        backgroundColor: isSelected
-          ? 'hsl(var(--accent))'
-          : isModified
-            ? '#fef08a' /* тот же жёлтый оттенок, что и bg-yellow-200 */
-            : 'white',
+        backgroundColor,
       }
     }
 

src/component/DualSpreadsheet/components/CellRenderer.tsx

@@ -18,6 +18,7 @@ export const CellRenderer = ({
     editingValue,
     cachedData,
     mergedCells,
+    highlightedCells,
     handleCellClick,
     handleCellDoubleClick,
     handleCellChange,
@@ -40,6 +41,16 @@ export const CellRenderer = ({
     ? '' // Не показывать вычисленное значение во время редактирования
     : cellData?.displayValue || ''
 
+  // Проверяем, подсвечена ли эта ячейка
+  const currentSheetName = sheetType === 'report' ? 'L' : 'R'
+  const highlightedCell = highlightedCells.find(
+    highlight =>
+      highlight.sheet === currentSheetName &&
+      highlight.row === rowIndex &&
+      highlight.col === columnIndex
+  )
+  const highlightColor = highlightedCell?.color
+
   // Отладка для измененных ячеек
   if (cellData?.isModified) {
     console.log(
@@ -49,6 +60,7 @@ export const CellRenderer = ({
         isModified: cellData.isModified,
         displayValue,
         rawValue,
+        highlightColor,
       }
     )
   }
@@ -91,6 +103,7 @@ export const CellRenderer = ({
       setActiveSheet={setActiveSheet}
       activeCellRef={activeCellInputRef}
       mergedCellInfo={mergedCellProps}
+      highlightColor={highlightColor}
     />
   )
 }

src/component/DualSpreadsheet/components/Spreadsheet.tsx

@@ -14,6 +14,7 @@ export const Spreadsheet = ({
   activeSheet,
   isEditing,
   editingValue,
+  highlightedCells,
   handleCellClick,
   handleCellDoubleClick,
   handleCellChange,
@@ -41,6 +42,7 @@ export const Spreadsheet = ({
     editingValue,
     cachedData,
     mergedCells,
+    highlightedCells,
     handleCellClick,
     handleCellDoubleClick,
     handleCellChange,
@@ -78,7 +80,9 @@ export const Spreadsheet = ({
       onClick={() => setActiveSheet(sheetType)}
     >
       <div
-        ref={el => (containerRefs.current[sheetType] = el)}
+        ref={el => {
+          containerRefs.current[sheetType] = el
+        }}
         className="flex h-full flex-col overflow-hidden border bg-card shadow-sm"
         onKeyDown={handleKeyDown}
         tabIndex={0}
@@ -102,7 +106,9 @@ export const Spreadsheet = ({
               </div>
             </div>
             <div
-              ref={el => (rowHeaderRefs.current[sheetType] = el)}
+              ref={el => {
+                rowHeaderRefs.current[sheetType] = el
+              }}
               className="overflow-y-hidden"
               style={{ height: gridSize.height }}
             >
@@ -126,7 +132,9 @@ export const Spreadsheet = ({
           <div className="flex-1 overflow-hidden">
             {/* Column Headers */}
             <div
-              ref={el => (headerRefs.current[sheetType] = el)}
+              ref={el => {
+                headerRefs.current[sheetType] = el
+              }}
               className="column-headers overflow-x-hidden"
             >
               <div className="flex">
@@ -171,9 +179,9 @@ export const Spreadsheet = ({
             {/* Grid */}
             <div className="min-h-0 flex-1">
               <VariableSizeGrid
-                ref={(el: VariableSizeGrid | null) =>
-                  (gridRefs.current[sheetType] = el)
-                }
+                ref={(el: VariableSizeGrid | null) => {
+                  gridRefs.current[sheetType] = el
+                }}
                 columnCount={COL_COUNT}
                 rowCount={ROW_COUNT}
                 columnWidth={(index: number) => widths[index]}