Skip to content

Commit 67757f3

Browse files
youngster-yjhjhkecursoragentgithub-actions[bot]
authored
Yj/fix/optimize 07 28 (#4063)
* feat: 切断 currentPageTabRouteKey 的无关重渲染 处理一级页签切换会更新全局 currentPageTabRouteKey * fix: 修复ConfigPrivateDomain ref 未挂载就调用 * fix: 优化HTTPFlowTable + MITM 推送 * feat: 组件懒加载 * perf(mitm): 优化交互式劫持性能，减少弱CPU下页面卡顿 - MITMManual: 将 currentOrder、intervalTime 从 state 改为 ref，避免每条流的 setState 触发重渲染 - MITMHijackedContent: 对 hasNewData、tableTotal、tableSelectNum 添加 500ms 节流，合并高流量下的频繁更新 - MITMPluginHijackContent: 轮询间隔从 1s 延长至 3s，且仅在视口可见时轮询，减少 IPC 调用 fix: - * perf(mitm): 优化 MITM 模块减少不必要的重复渲染 - 提取内联函数与对象为 useMemo/useMemoizedFn，避免每次渲染创建新引用 - 将仅在回调中读取的 state 转为 ref（originalRules、advancedValue 等） - 修复 useEffect 缺失依赖数组导致的每次渲染执行 - 使用模块级常量替代重复创建的 new Map() * perf(mitm): 优化弱CPU下的渲染性能减少页面卡顿 - TableVirtualResize: ResizeObserver 用 useRef 创建一次，避免每次渲染创建新实例导致内存泄漏 - MITMManual: 只对新增/更新的行计算 cellClassName，提取 setLoading 为稳定引用 - MITMPage: useSortedArrayMemo 改用 ref 缓存上次序列化 key，避免重复 spread + sort + stringify - MITMPluginHijackContent: 用 ref 缓存插件名 key，只在插件名集合变化时重建 hooksItem * fix: MITMRule合并visible与优化项 * perf(layout): 切断切页 routeKey 订阅，隔离 PageBodyItem 重渲染 避免一级页签切换时触发隐藏重页面与 SubTabList 的无意义更新，降低 Win7 云桌面切页主线程阻塞。 * perf(layout): 集中 SubTab 全局监听，隔离隐藏页切页副作用 将 EventBus/IPC 监听合并为单点注册，SubTabs 聚焦与滚动仅在激活页执行，降低切页时重复绑定与无效副作用开销。 * perf(layout): 隔离重页面渲染边界，减少切页子树更新 拆分 PageBodyContent、以 pageCacheLength 替代 pageCache 透传，并为 RenderSubPage 增加 memo 边界，避免隐藏页参与 reconciliation。 * perf(heavy-pages): 优化 History/MITM/WebFuzzer 大数据组件切页开销 缓存 HTTPFlowsFieldGroup IPC，WebFuzzer 排序 memo 化，MITM 日志表按 viewport gate，插件组虚拟列表。 * perf(layout): 延后切页非首帧任务，缩短同步渲染路径 封装 scheduleIdleTask，将切页日志、页签缓存写入与 focus/滚动同步移出首帧。 * perf: 减少 HTTPHistory 组件多余渲染与内联函数创建 - 提取静态样式常量 fullSizeStyle/loadingFallbackStyle - onTreeResize、onSelectNodesKeys 等内联箭头提取为 useMemoizedFn - 移除仅作 trigger 传递的未使用 state（onlyShowFirstNode/secondNodeVisible） - historyId 改为 useRef 避免无意义的 state 初始化 * perf: 优化 HTTPFlowTable 与 MITM 页面性能，减少不必要 state 刷新 - 将仅在回调中读取、不在 JSX/依赖中使用的 state 改为 ref（bodyLengthUnit、whiteFilter、curRules、queryparamsStr 等） - 移除无效的 dead state（MITMRule 的 selectedRows、HTTPFlowTable 的 tagSearchVal） - 提取纯函数与空回调至模块级常量，避免组件每次渲染创建新引用 - 提取 onRowContextMenu 为 useMemoizedFn，防止破坏 TableVirtualResize 的 React.memo * perf(layout): 优化 layout 非渲染 state，修复远程连接 stale - 修复 FuncDomain dynamicConnect：移除 mount 快照 useState，直接读 yakitDynamicStatus store，避免远程菜单/头像样式不更新 - 不参与渲染的 state 改为 ref：yakitIntranetFilePath、delRunNodeItem、yaklangKillBuildInEngine - 删除 FuncDomain 未使用的 screenCapLoading - useEngineConsole / useMcp：stream token 改 ref + 手动重建订阅，避免 UILayout/FuncDomain 无效重渲染 - useMcp：useMemo/useMemoizedFn 稳定返回值，减少 useSyncYakMcpStream 无效 store 同步 * perf(pages/layout): 优化 pages/layout 非渲染 state（阶段 1） - HeardMenu：修复 isExpand 同步 defaultExpand；删除 width/fileName/refreshTrigger 死 state；resize 直接调 toMove - MainOperatorContent：bugUrl/system/closeGroupTip 改 ref，减少 Tab 区域无效重渲染 - ExtraMenu：HAR 导入 token 改 ref - BatchAddNewGroup：groupId 改 ref - MenuDNSLog：lastRecords 从 records 派生，减少轮询时重复 setState * perf(TableVirtualResize): 优化弱 CPU 下 hover/选中/滚动渲染开销（P0+P1） 针对 MITM 等大表场景，在不改变交互逻辑的前提下减少无效重渲染与 O(n) 重复计算。 P0 - hover memo 修复： - areCellRenderPropsEqual 比较本 cell 是否 hover，而非 mouseCellId 任意变化 - 鼠标移过表格时仅旧行+新行 cell 更新，避免全表可见 cell 重渲染 P0 - 选中态 Set 查找： - 预构建 selectedRowKeysSet / selectedRowsKeySet - batchActive、checkbox checked 用 Set.has 替代 findIndex P1 - ColRender 精细 memo： - areColRenderPropsEqual 忽略 filters/loading 等无关父 state - 不比较 scrollBottom，纵向滚动不连带重渲染各列 P1 - scroll setState 收敛： - 函数式 setScroll，避免闭包 stale - shouldUpdateScrollHorizontalState：固定列阴影仅边缘滚动时更新 - shouldUpdateScrollBottomState：scrollBottom 按区间更新，减少底部分页区连带渲染 备注：文件内已补充中文注释说明各优化点；行为与 API 不变。 * refactor: HTTPFlowTable renderTitle减少依赖项( 已经用useCallback包住的函数 ) * perf(fuzzer): WebFuzzer Tab 懒加载并保活切换状态 左侧配置/规则/AI、热加载、API 文档改为按需加载，各自 Suspense，首次打开后 keepAlive 用 visible 隐藏以免丢会话；序列/并发懒加载并用 keepType 避免切回配置时冲掉运行态；PageItem 独立出口避免与 RenderFuzzerSequence 懒加载纠缠。 Co-authored-by: Cursor <cursoragent@cursor.com> * perf(fuzzer): 懒加载 HotCodeTemplate，避免 HotPatch 进主 chunk 工具栏模板入口改为 React.lazy，并用悬停/点击后再挂载，避免一进 Fuzzer 页就同步拉入整份 HTTPFuzzerHotPatch。 Co-authored-by: Cursor <cursoragent@cursor.com> * perf(fuzzer): 减小 WebFuzzer 首包，按需加载重模块 * perf(fuzzer): 继续按需加载 History/Matcher 等重模块 * perf(fuzzer): 多 Tab 不可见时暂停结果刷新并卸预览 Monaco 后台 Tab 结果仍写入 ref，切回可见再 flush；结果表预览编辑器仅在 inViewport 时挂载，减轻多开卡顿。 Co-authored-by: Cursor <cursoragent@cursor.com> * perf(fuzzer): pause hidden size measure and cut table derive cost Hide inactive WebFuzzer ResizeObservers, skip default full sort/copy, and cache keyword ResponseRaw decode. Co-authored-by: Cursor <cursoragent@cursor.com> * perf(fuzzer): isolate render from result stream Throttle streaming firstResponse, stabilize Monaco props, drop full arrays from toolbar, and keep response search draft local. Co-authored-by: Cursor <cursoragent@cursor.com> * style: apply prettier formatting [skip ci] --------- Co-authored-by: HJH <75428400+hjhke@users.noreply.github.com> Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 416f651 commit 67757f3

61 files changed

Lines changed: 2945 additions & 2127 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/renderer/src/main/src/components/ConfigPrivateDomain/ConfigPrivateDomain.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ export const ConfigPrivateDomain: React.FC<ConfigPrivateDomainProps> = React.mem
210210
}
211211
}, [])
212212
const addHttpHistoryList = useMemoizedFn((url) => {
213-
httpHistoryRef.current.onSetRemoteValues(url)
213+
httpHistoryRef.current?.onSetRemoteValues(url)
214214
})
215215
const getHttpSetting = useMemoizedFn(() => {
216216
getRemoteValue(getRemoteHttpSettingGV()).then((setting) => {
@@ -239,7 +239,7 @@ export const ConfigPrivateDomain: React.FC<ConfigPrivateDomainProps> = React.mem
239239
})
240240
/**@description 增加代理list历史 */
241241
const addProxyList = useMemoizedFn((url) => {
242-
httpProxyRef.current.onSetRemoteValues(url)
242+
httpProxyRef.current?.onSetRemoteValues(url)
243243
})
244244
// 判断输入内容是否通过
245245
const judgePass = () => [

‎app/renderer/src/main/src/components/HTTPFlowTable/HTTPFlowTable.columns.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import type { ColumnAllInfoItem, HTTPFlow } from './HTTPFlowTable.constants'
1919
import { isHTTPFlowFavorite, onConvertBodySizeByUnit } from './HTTPFlowTable.utils'
2020
import { RangeInputNumberTableWrapper } from './components'
2121
import style from './HTTPFlowTable.module.scss'
22+
import { buildColumnOrderMap, compareByColumnOrder } from '@/utils/sortByColumnOrder'
2223
import { defalutColumnsOrder } from '@/pages/hTTPHistoryAnalysis/HTTPHistory/HTTPHistoryFilter'
2324

2425
/** 需要完全排除的列字段，表格不可能出现的列 */
@@ -452,9 +453,8 @@ export const resolveHTTPFlowTableColumns = (
452453
const idColumn = columnArr.find((col) => col.dataKey === 'Id')
453454
const actionColumn = columnArr.find((col) => col.dataKey === 'action')
454455
const middleColumns = columnArr.filter((item) => !['Id', 'action', ...noColumnsKey].includes(item.dataKey))
455-
const sortedColumns = middleColumns.sort(
456-
(a, b) => columnsOrder.indexOf(a.dataKey) - columnsOrder.indexOf(b.dataKey),
457-
)
456+
const orderMap = buildColumnOrderMap(columnsOrder)
457+
const sortedColumns = [...middleColumns].sort((a, b) => compareByColumnOrder(a.dataKey, b.dataKey, orderMap))
458458

459459
if (idColumn) finalColumns.push(idColumn)
460460
sortedColumns.forEach((col) => {

‎app/renderer/src/main/src/components/HTTPFlowTable/HTTPFlowTable.tsx‎

Lines changed: 212 additions & 141 deletions
Large diffs are not rendered by default.

‎app/renderer/src/main/src/components/HTTPFlowTable/useBuiltinTagList.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@ import { useEffect, useState } from 'react'
22
import { useMemoizedFn } from 'ahooks'
33
import { FiltersItemProps } from '../TableVirtualResize/TableVirtualResizeType'
44
import { yakitNotify } from '@/utils/notification'
5-
import { HTTPFlowsFieldGroupResponse } from './HTTPFlowTable.constants'
6-
7-
const { ipcRenderer } = window.require('electron')
5+
import { fetchHTTPFlowsFieldGroup } from '@/utils/httpFlowFieldGroupCache'
86

97
export const useBuiltinTagList = (enabled = true, inViewport = true) => {
108
const [builtinTagList, setBuiltinTagList] = useState<FiltersItemProps[]>([])
119

1210
const refreshBuiltinTags = useMemoizedFn(() => {
13-
ipcRenderer
14-
.invoke('HTTPFlowsFieldGroup', { RefreshRequest: true, IsAll: true })
15-
.then((rsp: HTTPFlowsFieldGroupResponse) => {
11+
fetchHTTPFlowsFieldGroup(true)
12+
.then((rsp) => {
1613
const tags = (rsp.Tags || [])
1714
.filter(({ Builtin, Value }) => Builtin && Value)
1815
.map(({ Value }) => ({ label: Value, value: Value }))
@@ -25,7 +22,16 @@ export const useBuiltinTagList = (enabled = true, inViewport = true) => {
2522

2623
useEffect(() => {
2724
if (!enabled || !inViewport) return
28-
refreshBuiltinTags()
25+
fetchHTTPFlowsFieldGroup(false)
26+
.then((rsp) => {
27+
const tags = (rsp.Tags || [])
28+
.filter(({ Builtin, Value }) => Builtin && Value)
29+
.map(({ Value }) => ({ label: Value, value: Value }))
30+
setBuiltinTagList(tags)
31+
})
32+
.catch((error) => {
33+
yakitNotify('error', `query HTTP Flows Field Group failed: ${error}`)
34+
})
2935
}, [enabled, inViewport])
3036

3137
return { builtinTagList, setBuiltinTagList, refreshBuiltinTags }

‎app/renderer/src/main/src/components/HTTPFlowTable/useHTTPFlowTableContextMenu.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -701,7 +701,8 @@ export const useHTTPFlowTableContextMenu = (options: UseHTTPFlowTableContextMenu
701701
})
702702
})
703703

704-
const onRowContextMenu = (rowData: HTTPFlow, _, event: React.MouseEvent) => {
704+
// 性能优化：提取为 useMemoizedFn，避免每次渲染创建新引用破坏 TableVirtualResize 的 React.memo
705+
const onRowContextMenu = useMemoizedFn((rowData: HTTPFlow, _, event: React.MouseEvent) => {
705706
if (rowData) {
706707
setSelected(rowData)
707708
}
@@ -850,7 +851,7 @@ export const useHTTPFlowTableContextMenu = (options: UseHTTPFlowTableContextMenu
850851
event.clientX,
851852
event.clientY,
852853
)
853-
}
854+
})
854855

855856
const getBatchContextMenu = useMemoizedFn(() => {
856857
return menuData

‎app/renderer/src/main/src/components/HTTPHistory.tsx‎

Lines changed: 80 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
import React, { CSSProperties, ReactElement, ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react'
22
import 'react-resizable/css/styles.css'
3-
import {
4-
HistoryTableTitleShow,
5-
HTTP_FLOW_FAVORITE_TAG,
6-
HTTPFlow,
7-
HTTPFlowsFieldGroupResponse,
8-
HTTPFlowTable,
9-
} from './HTTPFlowTable/HTTPFlowTable'
10-
import { HTTPFlowDetailMini } from './HTTPFlowDetail'
3+
import { HistoryTableTitleShow, HTTP_FLOW_FAVORITE_TAG, HTTPFlow, HTTPFlowTable } from './HTTPFlowTable/HTTPFlowTable'
4+
import { fetchHTTPFlowsFieldGroup } from '@/utils/httpFlowFieldGroupCache'
115
import {
126
useControllableValue,
137
useCreation,
@@ -97,6 +91,12 @@ import { useBuiltinTagList } from './HTTPFlowTable/useBuiltinTagList'
9791
const { ipcRenderer } = window.require('electron')
9892
const { YakitPanel } = YakitCollapse
9993

94+
// HTTPFlowDetailMini 含 Monaco 编辑器(2165行)，延迟到选中行后才加载
95+
const HTTPFlowDetailMini = React.lazy(() => import('./HTTPFlowDetail').then((m) => ({ default: m.HTTPFlowDetailMini })))
96+
// 性能优化：静态样式常量，避免每次渲染创建新对象
97+
const fullSizeStyle: CSSProperties = { width: '100%', height: '100%' }
98+
const loadingFallbackStyle: CSSProperties = { padding: 24, textAlign: 'center' }
99+
100100
export interface HTTPPacketFuzzable {
101101
defaultHttps?: boolean
102102
sendToWebFuzzer?: boolean | (() => any) | ((isHttps: boolean, request: string) => any)
@@ -220,6 +220,15 @@ const HTTPHistoryInner: React.FC<HTTPHistoryProp> = (props) => {
220220
const clearHttpFlowSelection = useMemoizedFn(() => {
221221
historyAIReActChatBridge.clearTableSelection()
222222
})
223+
// 性能优化：提取 onResize 为 useMemoizedFn，避免每次渲染创建新引用
224+
const onTreeResize = useMemoizedFn((width?: number, height?: number) => {
225+
if (!width || !height) return
226+
setTreeWrapHeight(height)
227+
})
228+
// 性能优化：提取 onSelectNodesKeys 为 useMemoizedFn
229+
const onSelectNodesKeys = useMemoizedFn((selectKeys: React.Key[]) => {
230+
setIncludeInUrl(selectKeys.map((i) => i + ''))
231+
})
223232

224233
const compareSelectedHttpFlowIds = useCampare(selectedHttpFlowIds)
225234
useDebounceEffect(() => {
@@ -288,8 +297,15 @@ const HTTPHistoryInner: React.FC<HTTPHistoryProp> = (props) => {
288297
}, [pageType])
289298

290299
// 用于控制HTTPFlowRealTimeTableAndEditor
291-
const [onlyShowFirstNode, setOnlyShowFirstNode] = useState<boolean>(true)
292-
const [secondNodeVisible, setSecondNodeVisible] = useState<boolean>(false)
300+
// 性能优化：这两个 state 的值在 HTTPHistoryInner 的 JSX 中从未读取，
301+
// 子组件 HTTPFlowRealTimeTableAndEditor 通过 useControllableValue 用自己的 defaultValue，
302+
// 不受父组件值控制。setter 仅作为 trigger prop 传递，改为空函数避免无用的 state 重渲染。
303+
const setOnlyShowFirstNode = useMemoizedFn((_only: boolean) => {})
304+
const setSecondNodeVisible = useMemoizedFn((_show: boolean) => {})
305+
const resetTableAndEditorShow = useMemoizedFn((table: boolean, editor: boolean) => {
306+
setOnlyShowFirstNode(table)
307+
setSecondNodeVisible(editor)
308+
})
293309
// #endregion
294310

295311
return (
@@ -311,10 +327,7 @@ const HTTPHistoryInner: React.FC<HTTPHistoryProp> = (props) => {
311327
/>
312328
<div className={styles['tab-content']}>
313329
<ReactResizeDetector
314-
onResize={(width, height) => {
315-
if (!width || !height) return
316-
setTreeWrapHeight(height)
317-
}}
330+
onResize={onTreeResize}
318331
handleWidth={true}
319332
handleHeight={true}
320333
refreshMode={'debounce'}
@@ -331,7 +344,7 @@ const HTTPHistoryInner: React.FC<HTTPHistoryProp> = (props) => {
331344
treeExtraQueryparams={treeQueryparams}
332345
refreshTreeFlag={refreshFlag}
333346
multiple
334-
onSelectNodesKeys={(selectKeys) => setIncludeInUrl(selectKeys.map((i) => i + ''))}
347+
onSelectNodesKeys={onSelectNodesKeys}
335348
></WebTree>
336349
</div>
337350
<div
@@ -346,10 +359,7 @@ const HTTPHistoryInner: React.FC<HTTPHistoryProp> = (props) => {
346359
onSetCurTags={setCurTags}
347360
onSetCurProcess={setCurProcess}
348361
setBuiltinTagList={setBuiltinTagList}
349-
resetTableAndEditorShow={(table, editor) => {
350-
setOnlyShowFirstNode(table)
351-
setSecondNodeVisible(editor)
352-
}}
362+
resetTableAndEditorShow={resetTableAndEditorShow}
353363
></HistoryProcess>
354364
</div>
355365
<div className={styles['process-wrapper']} style={{ display: activeKey === 'rules' ? 'block' : 'none' }}>
@@ -358,10 +368,7 @@ const HTTPHistoryInner: React.FC<HTTPHistoryProp> = (props) => {
358368
queryparamsStr={rulesQueryparams}
359369
onSetFilterRows={setMitmAggregateFilterRows}
360370
httpFlowTableDataLength={httpFlowTableDataLength}
361-
resetTableAndEditorShow={(table, editor) => {
362-
setOnlyShowFirstNode(table)
363-
setSecondNodeVisible(editor)
364-
}}
371+
resetTableAndEditorShow={resetTableAndEditorShow}
365372
/>
366373
</div>
367374
{activeKey === 'ai' &&
@@ -470,6 +477,8 @@ interface HTTPFlowRealTimeTableAndEditorProps extends HistoryTableTitleShow {
470477
setSecondNodeVisible?: (show: boolean) => void
471478
/** 预设排除列，透传至 `HTTPFlowTable.defaultExcludeColumnsKey` */
472479
defaultExcludeColumnsKey?: string[]
480+
/** 父级传入时覆盖内部 viewport 检测，用于 MITM 非 log 模式暂停表格副作用 */
481+
inViewportOverride?: boolean
473482
}
474483
/**
475484
* 此组件用于实时流量表和编辑器
@@ -510,13 +519,17 @@ export const HTTPFlowRealTimeTableAndEditor: React.FC<HTTPFlowRealTimeTableAndEd
510519
showHistoryAnalysisBtn = false,
511520
onHistoryAnalysisClick,
512521
defaultExcludeColumnsKey,
522+
inViewportOverride,
513523
} = props
514524

515525
const hTTPFlowRealTimeTableAndEditorRef = useRef<HTMLDivElement>(null)
516-
const [inViewport] = useInViewport(hTTPFlowRealTimeTableAndEditorRef)
526+
const [internalInViewport] = useInViewport(hTTPFlowRealTimeTableAndEditorRef)
527+
const inViewport = inViewportOverride ?? internalInViewport
517528

518529
// History Id 用于区分每个history控件
519-
const [historyId, setHistoryId] = useState<string>(uuidv4())
530+
// 性能优化：historyId 初始化后永不变（setHistoryId 从未调用），改为 ref 避免占 useState slot
531+
const historyIdRef = useRef<string>(uuidv4())
532+
const historyId = historyIdRef.current
520533
const [highlightSearch, setHighlightSearch] = useState('')
521534

522535
// #region mitm页面Forward数据后需要刷新页面数据
@@ -570,6 +583,10 @@ export const HTTPFlowRealTimeTableAndEditor: React.FC<HTTPFlowRealTimeTableAndEd
570583
trigger: 'setSecondNodeVisible',
571584
})
572585
const [selected, setSelectedHTTPFlow] = useState<HTTPFlow>()
586+
// 性能优化：提取 onSelected 为 useMemoizedFn，避免每次渲染创建新引用破坏 HTTPFlowTable 的 React.memo
587+
const onSelected = useMemoizedFn((i?: HTTPFlow) => {
588+
if (i) setSelectedHTTPFlow(i)
589+
})
573590
useEffect(() => {
574591
setSecondNodeVisible(!onlyShowFirstNode)
575592
}, [onlyShowFirstNode])
@@ -601,6 +618,21 @@ export const HTTPFlowRealTimeTableAndEditor: React.FC<HTTPFlowRealTimeTableAndEd
601618
}
602619
return p
603620
}, [onlyShowFirstNode])
621+
// 性能优化：secondNodeStyle / lineStyle 用 useMemo 缓存，避免每次渲染创建新对象
622+
const tableSecondNodeStyle = useMemo(
623+
() => ({
624+
display: !secondNodeVisible ? 'none' : '',
625+
padding: !secondNodeVisible ? 0 : undefined,
626+
}),
627+
[secondNodeVisible],
628+
)
629+
const tableLineStyle = useMemo(
630+
() => ({
631+
display: !secondNodeVisible ? 'none' : '',
632+
marginTop: pageType === 'MITM' ? 6 : 0,
633+
}),
634+
[secondNodeVisible, pageType],
635+
)
604636
// #endregion
605637

606638
return (
@@ -614,7 +646,7 @@ export const HTTPFlowRealTimeTableAndEditor: React.FC<HTTPFlowRealTimeTableAndEd
614646
// 隐藏详情只需要展示第一个节点
615647
onClickHiddenBox={() => setOnlyShowFirstNode(true)}
616648
firstNode={() => (
617-
<div style={{ width: '100%', height: '100%' }}>
649+
<div style={fullSizeStyle}>
618650
<HTTPFlowTable
619651
containerClassName={containerClassName}
620652
runTimeId={runtimeId}
@@ -631,9 +663,7 @@ export const HTTPFlowRealTimeTableAndEditor: React.FC<HTTPFlowRealTimeTableAndEd
631663
showRefresh={showRefresh}
632664
params={params}
633665
includeInUrl={includeInUrl}
634-
onSelected={(i) => {
635-
setSelectedHTTPFlow(i)
636-
}}
666+
onSelected={onSelected}
637667
filterTagDom={filterTagDom}
638668
onSearch={setHighlightSearch}
639669
onlyShowFirstNode={onlyShowFirstNode}
@@ -662,33 +692,29 @@ export const HTTPFlowRealTimeTableAndEditor: React.FC<HTTPFlowRealTimeTableAndEd
662692
</div>
663693
)}
664694
secondNode={
665-
<div style={{ width: '100%', height: '100%' }}>
695+
<div style={fullSizeStyle}>
666696
{secondNodeVisible && (
667-
<HTTPFlowDetailMini
668-
noHeader={true}
669-
search={highlightSearch}
670-
id={selected?.Id || 0}
671-
sendToWebFuzzer={true}
672-
selectedFlow={selected}
673-
refresh={refresh}
674-
historyId={historyId}
675-
downstreamProxyStr={downstreamProxy}
676-
pageType={pageType}
677-
showFlod={showFlod}
678-
/>
697+
<React.Suspense fallback={<div style={loadingFallbackStyle}>Loading...</div>}>
698+
<HTTPFlowDetailMini
699+
noHeader={true}
700+
search={highlightSearch}
701+
id={selected?.Id || 0}
702+
sendToWebFuzzer={true}
703+
selectedFlow={selected}
704+
refresh={refresh}
705+
historyId={historyId}
706+
downstreamProxyStr={downstreamProxy}
707+
pageType={pageType}
708+
showFlod={showFlod}
709+
/>
710+
</React.Suspense>
679711
)}
680712
</div>
681713
}
682714
firstMinSize={80}
683715
secondMinSize={200}
684-
secondNodeStyle={{
685-
display: !secondNodeVisible ? 'none' : '',
686-
padding: !secondNodeVisible ? 0 : undefined,
687-
}}
688-
lineStyle={{
689-
display: !secondNodeVisible ? 'none' : '',
690-
marginTop: pageType === 'MITM' ? 6 : 0, // MITM列表需要和拖拽线有间距
691-
}}
716+
secondNodeStyle={tableSecondNodeStyle}
717+
lineStyle={tableLineStyle}
692718
lineDirection="top"
693719
onMouseUp={({ firstSizePercent, secondSizePercent }) => {
694720
lastRatioRef.current = {
@@ -962,14 +988,10 @@ export const HistoryProcess: React.FC<HistoryProcessProps> = React.memo((props)
962988
}
963989
})
964990

965-
const refreshTags = useMemoizedFn(async () => {
991+
const refreshTags = useMemoizedFn(async (refreshRequest = true) => {
966992
setTagListLoading(true)
967-
ipcRenderer
968-
.invoke('HTTPFlowsFieldGroup', {
969-
RefreshRequest: true,
970-
IsAll: true,
971-
})
972-
.then((rsp: HTTPFlowsFieldGroupResponse) => {
993+
fetchHTTPFlowsFieldGroup(refreshRequest)
994+
.then((rsp) => {
973995
const tags = (rsp.Tags || []).filter((item) => item.Value && item.Value !== HTTP_FLOW_FAVORITE_TAG)
974996
const toFilterItem = (Value: string) => ({ label: Value, value: Value })
975997
let TagList: FiltersItemProps[] = [],
@@ -995,7 +1017,7 @@ export const HistoryProcess: React.FC<HistoryProcessProps> = React.memo((props)
9951017

9961018
useEffect(() => {
9971019
if (!inViewport) return
998-
refreshTags()
1020+
refreshTags(false)
9991021
}, [inViewport])
10001022

10011023
const refreshAllFilters = useMemoizedFn((clearSelected?: boolean) => {

0 commit comments

Comments
 (0)