Skip to content

Commit 8d6470c

Browse files
experdotexperdot
committed
refactor: Simplify CrosstabChat and CrosstabTable components by standardizing parameter names and enhancing cell data management for improved clarity and functionality
1 parent dfb0846 commit 8d6470c

File tree

3 files changed

+83
-152
lines changed

3 files changed

+83
-152
lines changed

‎src/renderer/src/components/pages/crosstab/CrosstabChat.tsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -283,13 +283,17 @@ export default function CrosstabChat({ chatId }: CrosstabChatProps) {
283283
)
284284

285285
const handleClearColumn = useCallback(
286-
(horizontalItem: string) => {
286+
(columnPath: string) => {
287287
if (!chat) return
288288

289289
const updatedTableData = { ...chat.crosstabData.tableData }
290-
if (updatedTableData[horizontalItem]) {
291-
delete updatedTableData[horizontalItem]
292-
}
290+
291+
// 删除所有以该列路径开头的单元格数据
292+
Object.keys(updatedTableData).forEach(cellKey => {
293+
if (cellKey.startsWith(columnPath + '|')) {
294+
delete updatedTableData[cellKey]
295+
}
296+
})
293297

294298
dispatch({
295299
type: 'UPDATE_CROSSTAB_DATA',
@@ -299,21 +303,21 @@ export default function CrosstabChat({ chatId }: CrosstabChatProps) {
299303
}
300304
})
301305

302-
message.success(`列 "${horizontalItem}" 数据已清除`)
306+
message.success(`列 "${columnPath}" 数据已清除`)
303307
},
304308
[chat, dispatch, chatId, message]
305309
)
306310

307311
const handleClearRow = useCallback(
308-
(verticalItem: string) => {
312+
(rowPath: string) => {
309313
if (!chat) return
310314

311315
const updatedTableData = { ...chat.crosstabData.tableData }
312316

313-
// 删除所有列中该行的数据
314-
Object.keys(updatedTableData).forEach((horizontalItem) => {
315-
if (updatedTableData[horizontalItem][verticalItem]) {
316-
delete updatedTableData[horizontalItem][verticalItem]
317+
// 删除所有以该行路径结尾的单元格数据
318+
Object.keys(updatedTableData).forEach(cellKey => {
319+
if (cellKey.endsWith('|' + rowPath)) {
320+
delete updatedTableData[cellKey]
317321
}
318322
})
319323

@@ -325,19 +329,20 @@ export default function CrosstabChat({ chatId }: CrosstabChatProps) {
325329
}
326330
})
327331

328-
message.success(`行 "${verticalItem}" 数据已清除`)
332+
message.success(`行 "${rowPath}" 数据已清除`)
329333
},
330334
[chat, dispatch, chatId, message]
331335
)
332336

333337
const handleClearCell = useCallback(
334-
(horizontalItem: string, verticalItem: string) => {
338+
(columnPath: string, rowPath: string) => {
335339
if (!chat) return
336340

337341
const updatedTableData = { ...chat.crosstabData.tableData }
342+
const cellKey = `${columnPath}|${rowPath}`
338343

339-
if (updatedTableData[horizontalItem] && updatedTableData[horizontalItem][verticalItem]) {
340-
delete updatedTableData[horizontalItem][verticalItem]
344+
if (updatedTableData[cellKey]) {
345+
delete updatedTableData[cellKey]
341346
}
342347

343348
dispatch({
@@ -348,29 +353,29 @@ export default function CrosstabChat({ chatId }: CrosstabChatProps) {
348353
}
349354
})
350355

351-
message.success(`单元格 "${horizontalItem} × ${verticalItem}" 数据已清除`)
356+
message.success(`单元格 "${columnPath} × ${rowPath}" 数据已清除`)
352357
},
353358
[chat, dispatch, chatId, message]
354359
)
355360

356361
const handleCreateChatFromCell = useCallback(
357-
(horizontalItem: string, verticalItem: string, cellContent: string, metadata: any) => {
362+
(columnPath: string, rowPath: string, cellContent: string, metadata: any) => {
358363
if (!chat || !metadata) return
359364

360365
// 直接dispatch，将所有参数传递给reducer处理
361366
dispatch({
362367
type: 'CREATE_CHAT_FROM_CELL',
363368
payload: {
364369
folderId: chat.folderId,
365-
horizontalItem,
366-
verticalItem,
370+
horizontalItem: columnPath,
371+
verticalItem: rowPath,
367372
cellContent,
368373
metadata,
369374
sourcePageId: chatId
370375
}
371376
})
372377

373-
message.success(`已创建新聊天窗口分析 "${horizontalItem} × ${verticalItem}"`)
378+
message.success(`已创建新聊天窗口分析 "${columnPath} × ${rowPath}"`)
374379
},
375380
[chat, dispatch, message, chatId]
376381
)

‎src/renderer/src/components/pages/crosstab/CrosstabTable.tsx‎

Lines changed: 58 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -328,21 +328,35 @@ export default function CrosstabTable({
328328
horizontalCombinations.forEach((hCombination, colIndex) => {
329329
const value = hCombination[dimIndex]
330330
const headerKey = `${dimIndex}-${colIndex}-${value}`
331+
const hPath = generateDimensionPath(hCombination)
332+
const hasColumnData = Object.keys(tableData).some(cellKey =>
333+
cellKey.startsWith(hPath + '|') && Object.keys(tableData[cellKey]).length > 0
334+
)
331335

332336
headerElements.push(
333-
<div
334-
key={headerKey}
335-
className="grid-column-header"
336-
style={{
337-
gridColumn: colDimensions + colIndex + 1,
338-
gridRow: dimIndex + 1,
339-
backgroundColor: 'white',
340-
border: '1px solid #d9d9d9',
341-
fontSize: dimIndex === 0 ? '12px' : '11px',
342-
fontWeight: dimIndex === 0 ? 'bold' : 'normal'
343-
}}
344-
>
337+
<div
338+
key={headerKey}
339+
className="grid-column-header"
340+
style={{
341+
gridColumn: colDimensions + colIndex + 1,
342+
gridRow: dimIndex + 1,
343+
backgroundColor: 'white',
344+
border: '1px solid #d9d9d9',
345+
fontSize: dimIndex === 0 ? '12px' : '11px',
346+
fontWeight: dimIndex === 0 ? 'bold' : 'normal',
347+
position: 'relative'
348+
}}
349+
>
345350
{value}
351+
{(onGenerateColumn || onClearColumn) && (
352+
<Dropdown
353+
menu={{ items: createColumnMenu(hPath, hasColumnData) }}
354+
trigger={['hover']}
355+
placement="bottomRight"
356+
>
357+
<div className="cell-menu-trigger" />
358+
</Dropdown>
359+
)}
346360
</div>
347361
)
348362
})
@@ -380,49 +394,7 @@ export default function CrosstabTable({
380394
}
381395
}
382396

383-
// 为最后一个维度的每个组合添加菜单
384-
if (onGenerateColumn || onClearColumn) {
385-
horizontalCombinations.forEach((hCombination, colIndex) => {
386-
const hPath = generateDimensionPath(hCombination)
387-
const hasColumnData = Object.keys(tableData).some(cellKey =>
388-
cellKey.startsWith(hPath + '|') && Object.keys(tableData[cellKey]).length > 0
389-
)
390-
391-
headerElements.push(
392-
<div
393-
key={`menu-${colIndex}`}
394-
className="grid-column-menu"
395-
style={{
396-
gridColumn: colDimensions + colIndex + 1,
397-
gridRow: metadata.horizontalDimensions.length,
398-
backgroundColor: 'transparent',
399-
border: 'none',
400-
padding: '0',
401-
position: 'relative',
402-
height: '100%',
403-
width: '100%',
404-
pointerEvents: 'none'
405-
}}
406-
>
407-
<Dropdown
408-
menu={{ items: createColumnMenu(hPath, hasColumnData) }}
409-
trigger={['hover']}
410-
placement="bottomRight"
411-
>
412-
<div
413-
className="cell-menu-trigger"
414-
style={{
415-
position: 'absolute',
416-
top: 0,
417-
right: 0,
418-
pointerEvents: 'auto'
419-
}}
420-
/>
421-
</Dropdown>
422-
</div>
423-
)
424-
})
425-
}
397+
426398

427399
return headerElements
428400
})()}
@@ -443,21 +415,37 @@ export default function CrosstabTable({
443415
verticalCombinations.forEach((vCombination, rowIndex) => {
444416
const value = vCombination[dimIndex]
445417
const headerKey = `${dimIndex}-${rowIndex}-${value}`
418+
const vPath = generateDimensionPath(vCombination)
419+
const hasRowData = horizontalCombinations.some((hCombination) => {
420+
const hPath = generateDimensionPath(hCombination)
421+
const cellKey = `${hPath}|${vPath}`
422+
return tableData[cellKey] && Object.keys(tableData[cellKey]).length > 0
423+
})
446424

447425
headerElements.push(
448-
<div
449-
key={headerKey}
450-
className="grid-row-header"
451-
style={{
452-
gridColumn: dimIndex + 1,
453-
gridRow: rowDimensions + rowIndex + 1,
454-
backgroundColor: 'white',
455-
border: '1px solid #d9d9d9',
456-
fontSize: '12px',
457-
fontWeight: dimIndex === 0 ? 'bold' : 'normal'
458-
}}
459-
>
426+
<div
427+
key={headerKey}
428+
className="grid-row-header"
429+
style={{
430+
gridColumn: dimIndex + 1,
431+
gridRow: rowDimensions + rowIndex + 1,
432+
backgroundColor: 'white',
433+
border: '1px solid #d9d9d9',
434+
fontSize: '12px',
435+
fontWeight: dimIndex === 0 ? 'bold' : 'normal',
436+
position: 'relative'
437+
}}
438+
>
460439
{value}
440+
{(onGenerateRow || onClearRow) && (
441+
<Dropdown
442+
menu={{ items: createRowMenu(vPath, hasRowData) }}
443+
trigger={['hover']}
444+
placement="bottomRight"
445+
>
446+
<div className="cell-menu-trigger" />
447+
</Dropdown>
448+
)}
461449
</div>
462450
)
463451
})
@@ -495,51 +483,7 @@ export default function CrosstabTable({
495483
}
496484
}
497485

498-
// 为最后一个维度的每个组合添加菜单
499-
if (onGenerateRow || onClearRow) {
500-
verticalCombinations.forEach((vCombination, rowIndex) => {
501-
const vPath = generateDimensionPath(vCombination)
502-
const hasRowData = horizontalCombinations.some((hCombination) => {
503-
const hPath = generateDimensionPath(hCombination)
504-
const cellKey = `${hPath}|${vPath}`
505-
return tableData[cellKey] && Object.keys(tableData[cellKey]).length > 0
506-
})
507-
508-
headerElements.push(
509-
<div
510-
key={`menu-${rowIndex}`}
511-
className="grid-row-menu"
512-
style={{
513-
gridColumn: metadata.verticalDimensions.length,
514-
gridRow: rowDimensions + rowIndex + 1,
515-
backgroundColor: 'transparent',
516-
border: 'none',
517-
padding: '0',
518-
position: 'relative',
519-
height: '100%',
520-
width: '100%',
521-
pointerEvents: 'none'
522-
}}
523-
>
524-
<Dropdown
525-
menu={{ items: createRowMenu(vPath, hasRowData) }}
526-
trigger={['hover']}
527-
placement="bottomRight"
528-
>
529-
<div
530-
className="cell-menu-trigger"
531-
style={{
532-
position: 'absolute',
533-
top: 0,
534-
right: 0,
535-
pointerEvents: 'auto'
536-
}}
537-
/>
538-
</Dropdown>
539-
</div>
540-
)
541-
})
542-
}
486+
543487

544488
return headerElements
545489
})()}
@@ -562,13 +506,7 @@ export default function CrosstabTable({
562506
gridColumn: colDimensions + colIndex + 1,
563507
gridRow: rowDimensions + rowIndex + 1,
564508
backgroundColor: isGenerating ? '#f0f0f0' : 'white',
565-
border: '1px solid #d9d9d9',
566-
cursor: 'pointer'
567-
}}
568-
onClick={() => {
569-
if (!isGenerating && onGenerateCell) {
570-
onGenerateCell(hPath, vPath)
571-
}
509+
border: '1px solid #d9d9d9'
572510
}}
573511
>
574512
<div className="cell-content">
@@ -578,7 +516,7 @@ export default function CrosstabTable({
578516
) : cellContent ? (
579517
<Text>{cellContent}</Text>
580518
) : (
581-
<Text type="secondary">点击生成</Text>
519+
<Text type="secondary">-</Text>
582520
)}
583521
</div>
584522
</div>

‎src/renderer/src/components/pages/crosstab/crosstab-table.css‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,6 @@
146146
}
147147

148148
.cell-menu-trigger::before {
149-
content: '⋮';
150149
position: absolute;
151150
top: -3px;
152151
left: 50%;
@@ -166,26 +165,15 @@
166165

167166
.grid-column-header:hover .cell-menu-trigger,
168167
.grid-row-header:hover .cell-menu-trigger,
169-
.grid-data-cell:hover .cell-menu-trigger,
170-
.grid-column-menu:hover .cell-menu-trigger,
171-
.grid-row-menu:hover .cell-menu-trigger {
168+
.grid-data-cell:hover .cell-menu-trigger {
172169
opacity: 1;
173170
}
174171

175172
.cell-menu-trigger:hover {
176173
background: rgba(0, 0, 0, 0.2);
177174
}
178175

179-
/* 菜单区域样式 */
180-
.grid-column-menu,
181-
.grid-row-menu {
182-
pointer-events: none;
183-
}
184176

185-
.grid-column-menu .cell-menu-trigger,
186-
.grid-row-menu .cell-menu-trigger {
187-
pointer-events: auto;
188-
}
189177

190178
/* 响应式设计 */
191179
@media (max-width: 1200px) {

0 commit comments

Comments
 (0)