Cytoscape.js的核心概念与HTML5%20Canvas类似：你提供一个DOM容器，Cytoscape在其中创建Canvas元素来渲染图形。所有节点和边的数据通过JSON数组传递，样式则通过CSS-like的选择器系统定义。

对于控制流图，你需要从后端获取两种数据：基本块节点和控制流边。每个基本块节点包含起始地址、指令列表和块类型（入口/出口/普通）；每条边包含源节点、目标节点和边类型（条件真分支/条件假分支/无条件跳转/顺序执行）。

Cytoscape.js的初始化过程有几个关键点需要注意。首先，布局配置必须在初始化时提供，如果之后需要更改布局，必须调用cy.layout(newOptions).run()来重新计算。其次，样式定义采用了类似CSS的选择器语法，但属性名使用驼峰命名法（如backgroundColor在Cytoscape中写作background-color）。data(label)语法表示从节点的data属性中动态获取标签内容。width:%20'label'和height:%20'label'让节点尺寸自动适应标签内容的宽高，配合padding属性确保标签与边框之间有合适的内边距。

<!--%20components/ControlFlowGraph.vue%20-->
<script%20setup%20lang="ts">
import%20{%20ref,%20onMounted,%20onUnmounted,%20watch,%20nextTick%20}%20from%20'vue'
import%20cytoscape%20from%20'cytoscape'
import%20klay%20from%20'cytoscape-klay'
import%20coseBilkent%20from%20'cytoscape-cose-bilkent'
import%20type%20{%20BasicBlock,%20ControlFlowEdge%20}%20from%20'@/types/binary'

//%20注册布局扩展
//%20Klay布局：基于KLay%20Layered的层次布局，适合DAG
//%20Cose-bilkent：复合弹簧布局，适合交互式调整
cytoscape.use(klay)
cytoscape.use(coseBilkent)

//%20=====%20Props%20接口%20=====
const%20props%20=%20defineProps<{
&nbsp;%20/**%20基本块数组%20*/
&nbsp;%20basicBlocks:%20BasicBlock[]
&nbsp;%20/**%20控制流边数组%20*/
&nbsp;%20edges:%20ControlFlowEdge[]
&nbsp;%20/**%20当前选中地址%20*/
&nbsp;%20selectedAddress?:%20number
&nbsp;%20/**%20高亮路径（执行追踪）%20*/
&nbsp;%20highlightedPath?:%20number[]
&nbsp;%20/**%20布局算法%20*/
&nbsp;%20layoutName?:%20'klay'%20|%20'cose-bilkent'%20|%20'grid'%20|%20'circle'
}>()

//%20=====%20Emits%20接口%20=====
const%20emit%20=%20defineEmits<{
&nbsp;%20/**%20点击节点%20*/
&nbsp;%20nodeClick:%20[address:%20number]
&nbsp;%20/**%20双击节点（进入函数）%20*/
&nbsp;%20nodeDoubleClick:%20[address:%20number]
&nbsp;%20/**%20边点击%20*/
&nbsp;%20edgeClick:%20[source:%20number,%20target:%20number,%20type:%20string]
&nbsp;%20/**%20视口变化%20*/
&nbsp;%20viewportChange:%20[zoom:%20number,%20pan:%20{%20x:%20number;%20y:%20number%20}]
}>()

//%20=====%20组件内部状态%20=====
const%20containerRef%20=%20ref<HTMLDivElement>()
let%20cy:%20cytoscape.Core%20|%20null%20=%20null
const%20isReady%20=%20ref(false)
const%20currentZoom%20=%20ref(1)

/**
&nbsp;*%20将基本块和边数据转换为Cytoscape元素格式
&nbsp;*%20Cytoscape使用统一的elements数组，通过group字段区分node和edge
&nbsp;*/
function%20buildElements(
&nbsp;%20blocks:%20BasicBlock[],
&nbsp;%20edges:%20ControlFlowEdge[]
):%20cytoscape.ElementDefinition[]%20{
&nbsp;%20//%20构建节点
&nbsp;%20const%20nodes:%20cytoscape.ElementDefinition[]%20=%20blocks.map(block%20=>%20({
&nbsp;%20&nbsp;%20group:%20'nodes'%20as%20const,
&nbsp;%20&nbsp;%20data:%20{
&nbsp;%20&nbsp;%20&nbsp;%20id:%20`bb_${block.address}`,
&nbsp;%20&nbsp;%20&nbsp;%20address:%20block.address,
&nbsp;%20&nbsp;%20&nbsp;%20//%20节点标签：显示地址和首条指令
&nbsp;%20&nbsp;%20&nbsp;%20label:%20formatNodeLabel(block),
&nbsp;%20&nbsp;%20&nbsp;%20//%20指令数量（用于计算节点大小）
&nbsp;%20&nbsp;%20&nbsp;%20instructionCount:%20block.instructions.length,
&nbsp;%20&nbsp;%20&nbsp;%20//%20原始数据引用
&nbsp;%20&nbsp;%20&nbsp;%20instructions:%20block.instructions
&nbsp;%20&nbsp;%20},
&nbsp;%20&nbsp;%20//%20CSS类：根据块类型分配不同样式
&nbsp;%20&nbsp;%20classes:%20block.type%20===%20'entry'
&nbsp;%20&nbsp;%20&nbsp;%20?%20'entry-node'
&nbsp;%20&nbsp;%20&nbsp;%20:%20block.type%20===%20'exit'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20?%20'exit-node'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20:%20'normal-node'
&nbsp;%20}))

&nbsp;%20//%20构建边
&nbsp;%20const%20cyEdges:%20cytoscape.ElementDefinition[]%20=%20edges.map((edge,%20index)%20=>%20({
&nbsp;%20&nbsp;%20group:%20'edges'%20as%20const,
&nbsp;%20&nbsp;%20data:%20{
&nbsp;%20&nbsp;%20&nbsp;%20id:%20`edge_${edge.from}_${edge.to}_${index}`,
&nbsp;%20&nbsp;%20&nbsp;%20source:%20`bb_${edge.from}`,
&nbsp;%20&nbsp;%20&nbsp;%20target:%20`bb_${edge.to}`,
&nbsp;%20&nbsp;%20&nbsp;%20//%20边类型：conditional_true%20/%20conditional_false%20/%20unconditional%20/%20fallthrough
&nbsp;%20&nbsp;%20&nbsp;%20type:%20edge.type,
&nbsp;%20&nbsp;%20&nbsp;%20//%20条件标签（在真/假分支边上显示）
&nbsp;%20&nbsp;%20&nbsp;%20label:%20edge.type%20===%20'conditional_true'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20?%20'T'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20:%20edge.type%20===%20'conditional_false'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20?%20'F'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20:%20''
&nbsp;%20&nbsp;%20},
&nbsp;%20&nbsp;%20classes:%20edge.type
&nbsp;%20}))

&nbsp;%20return%20[...nodes,%20...cyEdges]
}

/**
&nbsp;*%20格式化节点标签
&nbsp;*%20显示格式：地址\n指令1\n指令2...
&nbsp;*%20限制显示前5条指令避免节点过大
&nbsp;*/
function%20formatNodeLabel(block:%20BasicBlock):%20string%20{
&nbsp;%20const%20addrStr%20=%20block.address.toString(16).toUpperCase().padStart(8,%20'0')
&nbsp;%20const%20maxInstructions%20=%205
&nbsp;%20const%20instTexts%20=%20block.instructions
&nbsp;%20&nbsp;%20.slice(0,%20maxInstructions)
&nbsp;%20&nbsp;%20.map(inst%20=>%20{
&nbsp;%20&nbsp;%20&nbsp;%20const%20truncated%20=%20inst.operands.length%20>%2030
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20?%20inst.operands.substring(0,%2030)%20+%20'...'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20:%20inst.operands
&nbsp;%20&nbsp;%20&nbsp;%20return%20`${inst.mnemonic}%20${truncated}`
&nbsp;%20&nbsp;%20})

&nbsp;%20if%20(block.instructions.length%20>%20maxInstructions)%20{
&nbsp;%20&nbsp;%20instTexts.push('...')
&nbsp;%20}

&nbsp;%20return%20[addrStr,%20...instTexts].join('\n')
}

/**
&nbsp;*%20初始化Cytoscape实例
&nbsp;*%20这是整个CFG组件的核心，配置画布、样式、布局、交互
&nbsp;*/
function%20initGraph()%20{
&nbsp;%20if%20(!containerRef.value%20||%20props.basicBlocks.length%20===%200)%20return

&nbsp;%20//%20如果已存在实例，先销毁（避免内存泄漏）
&nbsp;%20if%20(cy)%20{
&nbsp;%20&nbsp;%20cy.destroy()
&nbsp;%20}

&nbsp;%20const%20elements%20=%20buildElements(props.basicBlocks,%20props.edges)

&nbsp;%20cy%20=%20cytoscape({
&nbsp;%20&nbsp;%20//%20渲染容器
&nbsp;%20&nbsp;%20container:%20containerRef.value,

&nbsp;%20&nbsp;%20//%20数据元素
&nbsp;%20&nbsp;%20elements,

&nbsp;%20&nbsp;%20//%20=====%20样式定义（CSS-like选择器系统）%20=====
&nbsp;%20&nbsp;%20style:%20[
&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20全局节点默认样式%20---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'node',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20背景色和边框
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'background-color':%20'#2D2D30',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-color':%20'#569CD6',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-width':%202,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-opacity':%200.8,

&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20节点形状：圆角矩形（类似IDA）
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shape':%20'roundrectangle',

&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20尺寸：根据内容自适应
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'width':%20'label',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'height':%20'label',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'padding':%20'14px',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'min-width':%20'160px',

&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20标签样式
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'label':%20'data(label)',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'color':%20'#D4D4D4',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'font-size':%20'11px',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'font-family':%20'Consolas,%20"Courier%20New",%20monospace',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-wrap':%20'wrap',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-max-width':%20'280px',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-valign':%20'top',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-halign':%20'left',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-margin-y':%20'8px',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-margin-x':%20'10px',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-height':%201.4,

&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20阴影效果
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-blur':%208,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-color':%20'#000000',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-opacity':%200.5,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-offset-y':%203
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20入口节点样式（函数起始）%20---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'.entry-node',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-color':%20'#4EC9B0',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-width':%203,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'background-color':%20'#1E3A3A',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-color':%20'#4EC9B040'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20出口节点样式（ret/exit）%20---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'.exit-node',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-color':%20'#F44747',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-width':%203,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'background-color':%20'#3A1E1E',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-color':%20'#F4474740'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20全局边默认样式%20---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'edge',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'width':%202,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-color':%20'#6E7681',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'target-arrow-color':%20'#6E7681',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'target-arrow-shape':%20'triangle',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'target-arrow-fill':%20'filled',

&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20曲线样式：bezier适合多平行边
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'curve-style':%20'bezier',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20多平行边时的偏移量
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'control-point-step-size':%2020,

&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20边标签
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'label':%20'data(label)',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'color':%20'#D4D4D4',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'font-size':%20'10px',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'font-family':%20'Consolas,%20monospace',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-background-color':%20'#1E1E1E',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-background-opacity':%201,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-background-padding':%20'2px',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'text-background-shape':%20'roundrectangle',

&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20箭头大小
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'arrow-scale':%201.2
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20条件真分支（True）---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'.conditional_true',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-color':%20'#4EC9B0',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'target-arrow-color':%20'#4EC9B0',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'label':%20'T'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20条件假分支（False）---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'.conditional_false',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-color':%20'#CE9178',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'target-arrow-color':%20'#CE9178',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'label':%20'F',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20假分支使用虚线区分
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-style':%20'dashed'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20无条件跳转%20---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'.unconditional',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-color':%20'#569CD6',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'target-arrow-color':%20'#569CD6',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-style':%20'solid'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20顺序执行（fall-through）%20---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'.fallthrough',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-color':%20'#6E7681',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'target-arrow-color':%20'#6E7681',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'width':%201.5,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20使用虚线表示自然执行流
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-style':%20'dotted'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20选中状态%20---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20':selected',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-color':%20'#FFD700',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-width':%203,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-color':%20'#FFD700',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'target-arrow-color':%20'#FFD700',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-color':%20'#FFD70060',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-blur':%2012
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20悬停状态%20---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'node.hover',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-color':%20'#9CDCFE',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-width':%203,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'background-color':%20'#3E3E42',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-blur':%2015,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'shadow-color':%20'#9CDCFE40'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},

&nbsp;%20&nbsp;%20&nbsp;%20//%20---%20高亮路径样式%20---
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'.path-highlight',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-color':%20'#FFD700',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'target-arrow-color':%20'#FFD700',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'width':%203,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'line-style':%20'solid'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20},
&nbsp;%20&nbsp;%20&nbsp;%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20selector:%20'.node-path-highlight',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20style:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-color':%20'#FFD700',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'border-width':%203,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20'background-color':%20'#3A351E'
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20],

&nbsp;%20&nbsp;%20//%20=====%20布局配置%20=====
&nbsp;%20&nbsp;%20layout:%20getLayoutConfig(props.layoutName%20||%20'klay'),

&nbsp;%20&nbsp;%20//%20=====%20交互配置%20=====
&nbsp;%20&nbsp;%20//%20启用框选
&nbsp;%20&nbsp;%20boxSelectionEnabled:%20true,
&nbsp;%20&nbsp;%20//%20多选时显示选择框
&nbsp;%20&nbsp;%20selectionType:%20'single',
&nbsp;%20&nbsp;%20//%20触摸设备支持
&nbsp;%20&nbsp;%20touchTapThreshold:%208,
&nbsp;%20&nbsp;%20desktopTapThreshold:%204,
&nbsp;%20&nbsp;%20//%20最小缩放比例
&nbsp;%20&nbsp;%20minZoom:%200.1,
&nbsp;%20&nbsp;%20//%20最大缩放比例
&nbsp;%20&nbsp;%20maxZoom:%204,
&nbsp;%20&nbsp;%20//%20滚轮缩放步进
&nbsp;%20&nbsp;%20wheelSensitivity:%200.3,
&nbsp;%20&nbsp;%20//%20启用手势
&nbsp;%20&nbsp;%20textureOnViewport:%20false,
&nbsp;%20&nbsp;%20//%20运动模糊（性能优化）
&nbsp;%20&nbsp;%20motionBlur:%20true,
&nbsp;%20&nbsp;%20motionBlurOpacity:%200.2,
&nbsp;%20&nbsp;%20//%20像素比（Retina屏适配）
&nbsp;%20&nbsp;%20pixelRatio:%20'auto'
&nbsp;%20})

&nbsp;%20//%20=====%20事件绑定%20=====
&nbsp;%20bindEvents()

&nbsp;%20//%20自适应视口
&nbsp;%20nextTick(()%20=>%20{
&nbsp;%20&nbsp;%20cy?.fit(undefined,%2040)
&nbsp;%20&nbsp;%20isReady.value%20=%20true
&nbsp;%20})
}

/**
&nbsp;*%20获取布局配置
&nbsp;*%20支持Klay（推荐用于CFG）和Cose-bilkent（适合交互式）
&nbsp;*/
function%20getLayoutConfig(name:%20string):%20cytoscape.LayoutOptions%20{
&nbsp;%20const%20configs:%20Record<string,%20cytoscape.LayoutOptions>%20=%20{
&nbsp;%20&nbsp;%20//%20Klay布局：基于图论的分层布局，自动处理DAG结构
&nbsp;%20&nbsp;%20//%20适合控制流图，节点按层次排列，边尽量自上而下
&nbsp;%20&nbsp;%20klay:%20{
&nbsp;%20&nbsp;%20&nbsp;%20name:%20'klay',
&nbsp;%20&nbsp;%20&nbsp;%20nodeDimensionsIncludeLabels:%20true,
&nbsp;%20&nbsp;%20&nbsp;%20fit:%20true,
&nbsp;%20&nbsp;%20&nbsp;%20padding:%2030,
&nbsp;%20&nbsp;%20&nbsp;%20animate:%20true,
&nbsp;%20&nbsp;%20&nbsp;%20animationDuration:%20400,
&nbsp;%20&nbsp;%20&nbsp;%20animationEasing:%20'ease-out-cubic',
&nbsp;%20&nbsp;%20&nbsp;%20klay:%20{
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20addUnnecessaryBendpoints:%20false,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20aspectRatio:%201.6,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20borderSpacing:%2020,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20direction:%20'DOWN',%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;//%20自上而下排列
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20edgeRouting:%20'ORTHOGONAL',%20//%20正交边路由（直角拐弯）
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20edgeSpacingFactor:%200.8,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20inLayerSpacingFactor:%201.0,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20layoutHierarchy:%20false,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20lineSpacing:%201.1,
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20nodeLayering:%20'NETWORK_SIMPLEX',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20nodePlace:%20'BRANDES_KOEPF',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20spacing:%2040,%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;//%20节点间距
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20thoroughness:%207%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20//%20布局优化程度
&nbsp;%20&nbsp;%20&nbsp;%20}
&nbsp;%20&nbsp;%20}%20as%20any,

&nbsp;%20&nbsp;%20//%20Cose-bilkent布局：复合力导向布局
&nbsp;%20&nbsp;%20//%20适合需要交互式调整的复杂图
&nbsp;%20&nbsp;%20'cose-bilkent':%20{
&nbsp;%20&nbsp;%20&nbsp;%20name:%20'cose-bilkent',
&nbsp;%20&nbsp;%20&nbsp;%20fit:%20true,
&nbsp;%20&nbsp;%20&nbsp;%20padding:%2030,
&nbsp;%20&nbsp;%20&nbsp;%20animate:%20true,
&nbsp;%20&nbsp;%20&nbsp;%20animationDuration:%20500,
&nbsp;%20&nbsp;%20&nbsp;%20nodeDimensionsIncludeLabels:%20true,
&nbsp;%20&nbsp;%20&nbsp;%20idealEdgeLength:%20120,
&nbsp;%20&nbsp;%20&nbsp;%20nodeRepulsion:%204500,
&nbsp;%20&nbsp;%20&nbsp;%20edgeElasticity:%200.45,
&nbsp;%20&nbsp;%20&nbsp;%20nestingFactor:%200.1,
&nbsp;%20&nbsp;%20&nbsp;%20gravity:%200.25,
&nbsp;%20&nbsp;%20&nbsp;%20numIter:%202500,
&nbsp;%20&nbsp;%20&nbsp;%20tile:%20true,
&nbsp;%20&nbsp;%20&nbsp;%20tilingPaddingVertical:%2010,
&nbsp;%20&nbsp;%20&nbsp;%20tilingPaddingHorizontal:%2010,
&nbsp;%20&nbsp;%20&nbsp;%20gravityRangeCompound:%201.5,
&nbsp;%20&nbsp;%20&nbsp;%20gravityCompound:%201.0,
&nbsp;%20&nbsp;%20&nbsp;%20gravityRange:%203.8,
&nbsp;%20&nbsp;%20&nbsp;%20initialEnergyOnIncremental:%200.5
&nbsp;%20&nbsp;%20}%20as%20any
&nbsp;%20}

&nbsp;%20return%20configs[name]%20||%20configs['klay']
}

/**
&nbsp;*%20绑定Cytoscape事件处理器
&nbsp;*/
function%20bindEvents()%20{
&nbsp;%20if%20(!cy)%20return

&nbsp;%20//%20节点单击：选中并触发事件
&nbsp;%20cy.on('tap',%20'node',%20(evt)%20=>%20{
&nbsp;%20&nbsp;%20const%20node%20=%20evt.target
&nbsp;%20&nbsp;%20const%20address%20=%20node.data('address')%20as%20number
&nbsp;%20&nbsp;%20emit('nodeClick',%20address)
&nbsp;%20})

&nbsp;%20//%20节点双击：进入函数
&nbsp;%20cy.on('dbltap',%20'node',%20(evt)%20=>%20{
&nbsp;%20&nbsp;%20const%20node%20=%20evt.target
&nbsp;%20&nbsp;%20const%20address%20=%20node.data('address')%20as%20number
&nbsp;%20&nbsp;%20emit('nodeDoubleClick',%20address)
&nbsp;%20})

&nbsp;%20//%20悬停效果（手动添加/移除CSS类）
&nbsp;%20cy.on('mouseover',%20'node',%20(evt)%20=>%20{
&nbsp;%20&nbsp;%20evt.target.addClass('hover')
&nbsp;%20})
&nbsp;%20cy.on('mouseout',%20'node',%20(evt)%20=>%20{
&nbsp;%20&nbsp;%20evt.target.removeClass('hover')
&nbsp;%20})

&nbsp;%20//%20边点击
&nbsp;%20cy.on('tap',%20'edge',%20(evt)%20=>%20{
&nbsp;%20&nbsp;%20const%20edge%20=%20evt.target
&nbsp;%20&nbsp;%20emit('edgeClick',
&nbsp;%20&nbsp;%20&nbsp;%20edge.data('source').replace('bb_',%20''),
&nbsp;%20&nbsp;%20&nbsp;%20edge.data('target').replace('bb_',%20''),
&nbsp;%20&nbsp;%20&nbsp;%20edge.data('type')
&nbsp;%20&nbsp;%20)
&nbsp;%20})

&nbsp;%20//%20缩放/平移监听
&nbsp;%20cy.on('zoom%20pan',%20()%20=>%20{
&nbsp;%20&nbsp;%20if%20(!cy)%20return
&nbsp;%20&nbsp;%20currentZoom.value%20=%20cy.zoom()
&nbsp;%20&nbsp;%20emit('viewportChange',%20cy.zoom(),%20cy.pan())
&nbsp;%20})
}

//%20监听数据变化重新渲染
watch(()%20=>%20[props.basicBlocks,%20props.edges],%20()%20=>%20{
&nbsp;%20if%20(props.basicBlocks.length%20>%200)%20{
&nbsp;%20&nbsp;%20nextTick(()%20=>%20initGraph())
&nbsp;%20}
},%20{%20deep:%20true%20})

//%20高亮路径
watch(()%20=>%20props.highlightedPath,%20(path)%20=>%20{
&nbsp;%20if%20(!cy%20||%20!path%20||%20path.length%20===%200)%20return

&nbsp;%20//%20清除之前的高亮
&nbsp;%20cy.elements().removeClass('path-highlight%20node-path-highlight')

&nbsp;%20//%20高亮路径上的节点
&nbsp;%20path.forEach(addr%20=>%20{
&nbsp;%20&nbsp;%20const%20node%20=%20cy.$(`#bb_${addr}`)
&nbsp;%20&nbsp;%20node.addClass('node-path-highlight')
&nbsp;%20})

&nbsp;%20//%20高亮路径上的边
&nbsp;%20for%20(let%20i%20=%200;%20i%20<%20path.length%20-%201;%20i++)%20{
&nbsp;%20&nbsp;%20const%20edges%20=%20cy.$(`edge[source%20=%20"bb_${path[i]}"][target%20=%20"bb_${path[i%20+%201]}"]`)
&nbsp;%20&nbsp;%20edges.addClass('path-highlight')
&nbsp;%20}
},%20{%20deep:%20true%20})

onMounted(()%20=>%20{
&nbsp;%20if%20(props.basicBlocks.length%20>%200)%20{
&nbsp;%20&nbsp;%20initGraph()
&nbsp;%20}
})

onUnmounted(()%20=>%20{
&nbsp;%20cy?.destroy()
&nbsp;%20cy%20=%20null
})

//%20暴露方法给父组件
defineExpose({
&nbsp;%20/**%20适配视口%20*/
&nbsp;%20fit:%20()%20=>%20cy?.fit(undefined,%2040),
&nbsp;%20/**%20居中到指定节点%20*/
&nbsp;%20centerOn:%20(address:%20number)%20=>%20{
&nbsp;%20&nbsp;%20const%20node%20=%20cy?.$(`#bb_${address}`)
&nbsp;%20&nbsp;%20if%20(node%20&&%20node.length%20>%200)%20{
&nbsp;%20&nbsp;%20&nbsp;%20cy?.animate({
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20fit:%20{%20eles:%20node,%20padding:%2060%20},
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20easing:%20'ease-out-cubic',
&nbsp;%20&nbsp;%20&nbsp;%20&nbsp;%20duration:%20300
&nbsp;%20&nbsp;%20&nbsp;%20})
&nbsp;%20&nbsp;%20}
&nbsp;%20},
&nbsp;%20/**%20获取当前缩放比例%20*/
&nbsp;%20getZoom:%20()%20=>%20cy?.zoom()%20??%201,
&nbsp;%20/**%20导出图片%20*/
&nbsp;%20exportImage:%20(options?:%20cytoscape.ExportOptions)%20=>
&nbsp;%20&nbsp;%20cy?.png({ bg: '#1E1E1E', full: true, ...options })
})
</script>

<template>
&nbsp; <div class="cfg-viewport">
&nbsp; &nbsp; <div ref="containerRef" class="cfg-canvas" />

&nbsp; &nbsp; <!-- 缩放控制工具栏 -->
&nbsp; &nbsp; <div class="cfg-controls">
&nbsp; &nbsp; &nbsp; <el-button-group size="small">
&nbsp; &nbsp; &nbsp; &nbsp; <el-button @click="cy?.zoom(cy.zoom() * 1.2)">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon><Plus /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; </el-button>
&nbsp; &nbsp; &nbsp; &nbsp; <el-button disabled>{{ Math.round(currentZoom * 100) }}%</el-button>
&nbsp; &nbsp; &nbsp; &nbsp; <el-button @click="cy?.zoom(cy.zoom() * 0.8)">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon><Minus /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; </el-button>
&nbsp; &nbsp; &nbsp; &nbsp; <el-button @click="cy?.fit(undefined, 40)">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon><FullScreen /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; </el-button>
&nbsp; &nbsp; &nbsp; </el-button-group>
&nbsp; &nbsp; </div>

&nbsp; &nbsp; <!-- 图例 -->
&nbsp; &nbsp; <div class="cfg-legend">
&nbsp; &nbsp; &nbsp; <div class="legend-item">
&nbsp; &nbsp; &nbsp; &nbsp; <span class="legend-line" style="border-color:&nbsp;#4EC9B0; border-style: solid;" />
&nbsp; &nbsp; &nbsp; &nbsp; <span>条件真 (True)</span>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; <div class="legend-item">
&nbsp; &nbsp; &nbsp; &nbsp; <span class="legend-line" style="border-color:&nbsp;#CE9178; border-style: dashed;" />
&nbsp; &nbsp; &nbsp; &nbsp; <span>条件假 (False)</span>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; <div class="legend-item">
&nbsp; &nbsp; &nbsp; &nbsp; <span class="legend-line" style="border-color:&nbsp;#569CD6; border-style: solid;" />
&nbsp; &nbsp; &nbsp; &nbsp; <span>无条件跳转</span>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; <div class="legend-item">
&nbsp; &nbsp; &nbsp; &nbsp; <span class="legend-line" style="border-color:&nbsp;#6E7681; border-style: dotted;" />
&nbsp; &nbsp; &nbsp; &nbsp; <span>顺序执行</span>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; </div>

&nbsp; &nbsp; <!-- 加载状态 -->
&nbsp; &nbsp; <div v-if="!isReady && basicBlocks.length > 0" class="cfg-loading">
&nbsp; &nbsp; &nbsp; <el-icon class="loading-icon"><Loading /></el-icon>
&nbsp; &nbsp; &nbsp; <span>正在布局...</span>
&nbsp; &nbsp; </div>
&nbsp; </div>
</template>

<style scoped>
.cfg-viewport {
&nbsp; width: 100%;
&nbsp; height: 100%;
&nbsp; position: relative;
&nbsp; background:&nbsp;#1E1E1E;
&nbsp; overflow: hidden;
}

.cfg-canvas {
&nbsp; width: 100%;
&nbsp; height: 100%;
}

.cfg-controls {
&nbsp; position: absolute;
&nbsp; bottom: 16px;
&nbsp; right: 16px;
&nbsp; z-index: 10;
}

.cfg-legend {
&nbsp; position: absolute;
&nbsp; top: 12px;
&nbsp; right: 12px;
&nbsp; z-index: 10;
&nbsp; background: rgba(30, 30, 30, 0.9);
&nbsp; border: 1px solid&nbsp;#3E3E42;
&nbsp; border-radius: 6px;
&nbsp; padding: 10px 14px;
&nbsp; display: flex;
&nbsp; flex-direction: column;
&nbsp; gap: 6px;
&nbsp; font-size: 11px;
&nbsp; color:&nbsp;#D4D4D4;
}

.legend-item {
&nbsp; display: flex;
&nbsp; align-items: center;
&nbsp; gap: 8px;
}

.legend-line {
&nbsp; width: 20px;
&nbsp; height: 0;
&nbsp; border-width: 2px 0 0 0;
}

.cfg-loading {
&nbsp; position: absolute;
&nbsp; top: 50%;
&nbsp; left: 50%;
&nbsp; transform: translate(-50%, -50%);
&nbsp; display: flex;
&nbsp; align-items: center;
&nbsp; gap: 8px;
&nbsp; color:&nbsp;#808080;
&nbsp; font-size: 14px;
}

.loading-icon {
&nbsp; animation: spin 1s linear infinite;
}

@keyframes spin {
&nbsp; from { transform: rotate(0deg); }
&nbsp; to { transform: rotate(360deg); }
}
</style>

这个ControlFlowGraph组件的接口设计充分考虑了可扩展性。basicBlocks和edges prop接收结构化数据，nodeClick和nodeDoubleClick emit事件支持视图间的联动，highlightedPath prop则可以接收一个地址数组来高亮显示特定的执行路径（这在展示AI Agent发现的漏洞利用路径时非常有用）。组件通过defineExpose向外暴露了fit、centerOn和exportImage方法，父组件可以调用这些方法来控制视图状态或导出图形。

13.2.2 DAG布局算法：Klay/Cose-bilkent布局、层次结构优化

控制流图本质上是一个有向无环图（DAG），因为程序执行流中不允许存在向后跳转的环。不过实际程序中循环结构会产生回边，这使得CFG成为有向图而非严格DAG。选择合适的布局算法直接影响CFG的可读性。

Klay布局算法是目前CFG可视化的首选方案85^。它基于图论中的分层布局（Layered Layout）方法，将节点分配到不同的层次（layer），使得边尽可能从上指向下。算法首先构建图的层次结构，然后对每个层次内的节点进行排序以减少交叉边数量，最后计算具体坐标。Klay特别为正交边路由（Orthogonal Edge Routing）提供了良好支持——边在节点之间以水平和垂直线段的方式行进，类似电路板的走线风格，这种布局对于理解控制流特别清晰。

Cose-bilkent布局则是一种力导向（Force-Directed）算法，它将节点间的连接视为弹簧，将节点间的排斥力视为电荷斥力，通过物理模拟找到能量最低（最美观）的布局。这种布局适合节点数量不多、需要手动调整的图，但对于大型函数的CFG来说，Klay的分层布局在可读性上明显更优90^。

在实际应用中，你可以根据基本块数量动态选择布局算法。下表对比了两种布局在不同场景下的表现：

| 特性 | Klay (分层布局) | Cose-bilkent (力导向) | | — | — | — | | 适用节点数 | 50~500个 | 10~100个 | | 布局方向 | 明确的从上到下层次 | 自然的聚类分布 | | 边交叉数 | 较少（算法优化） | 较多（物理模拟） | | 布局稳定性 | 高（确定性算法） | 中（随机初始状态） | | 动画效果 | 层次展开动画 | 弹性收敛动画 | | 循环结构 | 清晰的回边标识 | 需要额外处理 | | 初始渲染时间 | 较长（复杂计算） | 较短（渐进收敛） | | 交互调整 | 有限 | 支持拖拽后自动重平衡 |

当节点数少于50时，Cose-bilkent提供了更自然的布局；超过50个节点时，Klay的分层结构更有利于快速把握程序的整体控制结构。你也可以在工具栏中提供布局切换按钮，让用户根据偏好手动选择。

布局切换的实现需要注意Cytoscape.js的布局API使用方式：每次切换布局时，需要先保存当前的视口状态（缩放比例和平移位置），运行新布局后检查是否需要恢复用户的视口设置。对于Klay布局，正交边路由（Orthogonal Edge Routing）会产生直角拐弯的边，这在电路图风格中很常见；但对于CFG来说，贝塞尔曲线（Bezier）通常更美观，你可以在边样式配置中根据布局类型动态切换curve-style属性。

13.2.3 节点交互：点击高亮、悬停提示、双击进入函数、缩放平移

Cytoscape.js的交互系统非常完善。节点点击事件可以触发反汇编视图的同步滚动——当用户在CFG中点击一个基本块时，反汇编视图应该自动滚动到该基本块对应的第一条指令地址，并将该行高亮显示。这种双向联动需要在Pinia store中维护一个全局的selectedAddress状态，两个视图都监听这个状态的变化。

节点悬停提示（Tooltip）可以通过Cytoscape的原生qtip扩展或手动实现一个Vue浮动组件来展示。在悬停时，你需要展示基本块的完整指令列表、地址范围、前驱/后继节点数量等信息，帮助用户快速了解该基本块的上下文。Cytoscape.js提供了丰富的事件系统来支持这种交互：

// Tooltip显示逻辑示例
let tooltipTimeout: ReturnType<typeof setTimeout> | null = null

cy.on('mouseover', 'node', (evt) => {
&nbsp; const node = evt.target
&nbsp; const renderPos = node.renderedPosition()

&nbsp; // 防抖：延迟200ms显示，避免鼠标快速划过时频繁闪烁
&nbsp; tooltipTimeout = setTimeout(() => {
&nbsp; &nbsp; showTooltip({
&nbsp; &nbsp; &nbsp; x: renderPos.x + node.width() / 2 + 10,
&nbsp; &nbsp; &nbsp; y: renderPos.y - node.height() / 2,
&nbsp; &nbsp; &nbsp; title: `基本块 @ 0x${node.data('address').toString(16)}`,
&nbsp; &nbsp; &nbsp; content: formatTooltipContent(node.data())
&nbsp; &nbsp; })
&nbsp; }, 200)
})

cy.on('mouseout', 'node', () => {
&nbsp; if (tooltipTimeout) {
&nbsp; &nbsp; clearTimeout(tooltipTimeout)
&nbsp; &nbsp; tooltipTimeout = null
&nbsp; }
&nbsp; hideTooltip()
})

双击节点触发”进入函数”操作——如果该基本块包含一个call指令，双击应该导航到被调用函数的控制流图。这需要在节点数据中包含函数调用关系信息（目标函数地址）。为了避免与单击事件冲突，通常需要设置一个短暂的时间窗口（如300ms）来判断用户是单击还是双击：如果在窗口内没有第二次点击，则判定为单击；否则为双击。

缩放和平移功能由Cytoscape.js内置支持，但你仍然需要提供UI控件来增强用户体验。在组件模板中已经包含了一个缩放控制工具栏，显示当前缩放百分比并提供放大/缩小/适应按钮。你也可以添加鼠标滚轮缩放提示（当用户首次使用滚轮时显示一个短暂的提示气泡），以及键盘快捷键支持（Ctrl+0恢复100%，Ctrl++放大，Ctrl+-缩小）。

13.2.4 边和路径高亮：条件跳转真/假分支不同颜色、执行路径追踪

在CFG中，条件跳转指令（如je、jg、test后接jz）会产生两条出边：条件为真时的跳转边和条件为假时的顺序执行边。在样式设计上，真分支使用绿色实线、假分支使用橙色虚线、无条件跳转使用蓝色实线、自然执行流使用灰色点线——这种颜色编码让分析师一眼就能区分不同类型的控制流转移。

执行路径高亮功能对于展示动态分析结果或AI Agent发现的漏洞路径至关重要。你可以通过向highlightedPath prop传递一个地址数组来激活路径高亮，组件会自动计算路径上的节点和边并应用高亮样式。这在展示符号执行引擎发现的从输入点到漏洞触发点的完整攻击链时尤其有价值。

路径高亮的实现逻辑在watch(() => props.highlightedPath, ...)中已经给出：首先清除之前的高亮类，然后遍历路径数组中的每个地址，为对应的节点添加node-path-highlight类，再遍历相邻地址对找到连接边并添加path-highlight类。这个实现有一个值得注意的优化点：路径上的边查找使用了Cytoscape的选择器语法edge[source = "bb_X"][target = "bb_Y"]，这比遍历所有边然后逐个匹配要高效得多。

对于大型函数（几百个基本块），你可能还会遇到性能问题。此时可以考虑以下优化策略：使用cy.batch()将多个DOM样式更新包裹为单个批量操作，避免每次都触发重绘；对路径查找使用Cytoscape的edges('#source -> #target')选择器语法；如果路径很长，只高亮路径上的节点而不高亮边也能获得不错的视觉效果。

13.3 十六进制视图

十六进制视图是逆向工程的基础工具，它以原始字节的形式展示二进制文件内容，每行显示16个字节，左侧为文件偏移量，中间为十六进制表示，右侧为ASCII字符表示。对于大型文件（几MB到几百MB），全量渲染所有行会导致严重的性能问题，因此虚拟滚动是这个组件的关键技术点。

13.3.1 数据表格渲染：偏移/十六进制/ASCII三列同步显示

十六进制视图的核心是三列数据同步显示。偏移列显示该行第一个字节在文件中的位置，十六进制列显示16个字节的十六进制值（每个字节两个字符，字节之间一个空格，共48个字符），ASCII列显示对应的可打印字符（非可打印字符用点号.替代）。

这三列的显示需要严格对齐，因为分析师经常需要在十六进制和ASCII之间快速切换查看。例如，当在ASCII列看到一个可疑字符串http://时，分析师需要能够立即在同一行的十六进制列找到对应的字节序列68 74 74 70 3A 2F 2F。这种视觉上的对应关系依赖于精确的列对齐。在等宽字体下，每个字符占据相同的水平宽度，因此你可以通过精确的CSS宽度设置来保证三列的严格对齐。偏移列固定宽度80px，十六进制列使用flex弹性布局填充中间区域，ASCII列固定宽度160px并在左侧留出12px的间距。

三列的对齐依赖于等宽字体和精确的字符宽度计算。在等宽字体下，每个十六进制字节恰好占用3个字符宽度（两个十六进制字符+一个空格），16个字节共48个字符。ASCII列每个字符占用1个宽度，16个字符。通过CSS Grid或Flex布局，你可以确保三列在视觉上严格对齐。

13.3.2 大文件虚拟滚动：自定义虚拟滚动处理MB级文件

Element Plus的el-table在处理万行级别数据时就会显著卡顿，而十六进制视图需要处理的行数动辄几十万行（1MB文件就有65536行）。因此，你需要自己实现一个基于”窗口裁剪”的虚拟滚动系统65^。

核心思路是：只渲染当前可视区域内的行加上上下各若干行的缓冲（buffer），当用户滚动时动态更新渲染的窗口位置。通过监听容器的scroll事件，计算当前滚动位置对应的起始行号，然后重新渲染窗口内的行。

<!-- components/HexView.vue -->
<script setup lang="ts">
import {
&nbsp; ref, computed, onMounted, onUnmounted, watch, nextTick
} from 'vue'
import type { PropType } from 'vue'

// ===== 类型定义 =====
interface HexViewProps {
&nbsp; /** 二进制数据（Uint8Array） */
&nbsp; data: Uint8Array
&nbsp; /** 每行显示的字节数 */
&nbsp; bytesPerRow?: number
&nbsp; /** 当前高亮偏移 */
&nbsp; highlightedOffset?: number
&nbsp; /** 选中范围（起始，结束，包含） */
&nbsp; selectedRange?: [number, number] | null
&nbsp; /** 同步滚动偏移（与反汇编视图联动） */
&nbsp; syncOffset?: number
}

// ===== Props & Emits =====
const props = withDefaults(defineProps<HexViewProps>(), {
&nbsp; bytesPerRow: 16,
&nbsp; highlightedOffset: -1,
&nbsp; selectedRange: null,
&nbsp; syncOffset: -1
})

const emit = defineEmits<{
&nbsp; /** 用户点击某个字节 */
&nbsp; byteClick: [offset: number, byte: number]
&nbsp; /** 用户选中了字节范围 */
&nbsp; rangeSelect: [start: number, end: number]
&nbsp; /** 滚动位置变化 */
&nbsp; scroll: [topOffset: number]
}>()

// ===== 虚拟滚动状态 =====
const viewportRef = ref<HTMLDivElement>()
const contentRef = ref<HTMLDivElement>()

// 行高（像素），必须与CSS保持一致
const ROW_HEIGHT = 22
// 可视区域外的缓冲行数
const BUFFER_ROWS = 15

// 总行数
const totalRows = computed(() =>
&nbsp; Math.ceil(props.data.length / props.bytesPerRow)
)

// 可视窗口状态
const viewState = ref({
&nbsp; startRow: 0, &nbsp; &nbsp; &nbsp; // 当前渲染的起始行
&nbsp; endRow: 0, &nbsp; &nbsp; &nbsp; &nbsp; // 当前渲染的结束行
&nbsp; visibleStart: 0, &nbsp; // 真正可见的起始行
&nbsp; visibleEnd: 0, &nbsp; &nbsp; // 真正可见的结束行
&nbsp; scrollTop: 0 &nbsp; &nbsp; &nbsp; // 当前滚动位置
})

// 计算渲染窗口内的行数据
const visibleRows = computed(() => {
&nbsp; const rows: {
&nbsp; &nbsp; rowIndex: number
&nbsp; &nbsp; offset: number
&nbsp; &nbsp; bytes: number[]
&nbsp; &nbsp; ascii: string
&nbsp; &nbsp; isHighlighted: boolean
&nbsp; &nbsp; isSelected: (byteIndex: number) => boolean
&nbsp; }[] = []

&nbsp; const start = viewState.value.startRow
&nbsp; const end = Math.min(viewState.value.endRow, totalRows.value)

&nbsp; for (let row = start; row < end; row++) {
&nbsp; &nbsp; const offset = row * props.bytesPerRow
&nbsp; &nbsp; const rowBytes: number[] = []
&nbsp; &nbsp; const asciiChars: string[] = []

&nbsp; &nbsp; for (let i = 0; i < props.bytesPerRow; i++) {
&nbsp; &nbsp; &nbsp; const byteOffset = offset + i
&nbsp; &nbsp; &nbsp; if (byteOffset >= props.data.length) break

&nbsp; &nbsp; &nbsp; const byte = props.data[byteOffset]
&nbsp; &nbsp; &nbsp; rowBytes.push(byte)

&nbsp; &nbsp; &nbsp; // ASCII表示：可打印字符（0x20-0x7E）显示原字符，其他显示为.
&nbsp; &nbsp; &nbsp; asciiChars.push(
&nbsp; &nbsp; &nbsp; &nbsp; byte >= 0x20 && byte <= 0x7E
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? String.fromCharCode(byte)
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : '.'
&nbsp; &nbsp; &nbsp; )
&nbsp; &nbsp; }

&nbsp; &nbsp; // 判断高亮状态
&nbsp; &nbsp; const isHighlighted = props.highlightedOffset >= offset &&
&nbsp; &nbsp; &nbsp; props.highlightedOffset < offset + props.bytesPerRow

&nbsp; &nbsp; // 判断选中状态函数
&nbsp; &nbsp; const isSelected = (byteIndex: number) => {
&nbsp; &nbsp; &nbsp; if (!props.selectedRange) return false
&nbsp; &nbsp; &nbsp; const absOffset = offset + byteIndex
&nbsp; &nbsp; &nbsp; return absOffset >= props.selectedRange[0] &&
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;absOffset <= props.selectedRange[1]
&nbsp; &nbsp; }

&nbsp; &nbsp; rows.push({
&nbsp; &nbsp; &nbsp; rowIndex: row,
&nbsp; &nbsp; &nbsp; offset,
&nbsp; &nbsp; &nbsp; bytes: rowBytes,
&nbsp; &nbsp; &nbsp; ascii: asciiChars.join(''),
&nbsp; &nbsp; &nbsp; isHighlighted,
&nbsp; &nbsp; &nbsp; isSelected
&nbsp; &nbsp; })
&nbsp; }

&nbsp; return rows
})

// 总内容高度（用于撑开滚动条）
const totalHeight = computed(() =>
&nbsp; totalRows.value * ROW_HEIGHT
)

// 渲染窗口的顶部偏移
const windowOffset = computed(() =>
&nbsp; viewState.value.startRow * ROW_HEIGHT
)

/**
&nbsp;* 核心：根据滚动位置更新渲染窗口
&nbsp;*/
function updateViewport() {
&nbsp; if (!viewportRef.value) return

&nbsp; const scrollTop = viewportRef.value.scrollTop
&nbsp; const viewportHeight = viewportRef.value.clientHeight

&nbsp; // 计算可见区域行号
&nbsp; const visibleStartRow = Math.floor(scrollTop / ROW_HEIGHT)
&nbsp; const visibleEndRow = Math.ceil((scrollTop + viewportHeight) / ROW_HEIGHT)

&nbsp; // 扩展缓冲区域
&nbsp; const startRow = Math.max(0, visibleStartRow - BUFFER_ROWS)
&nbsp; const endRow = Math.min(totalRows.value, visibleEndRow + BUFFER_ROWS)

&nbsp; viewState.value = {
&nbsp; &nbsp; startRow,
&nbsp; &nbsp; endRow,
&nbsp; &nbsp; visibleStart: visibleStartRow,
&nbsp; &nbsp; visibleEnd: visibleEndRow,
&nbsp; &nbsp; scrollTop
&nbsp; }

&nbsp; // 通知父组件滚动位置
&nbsp; emit('scroll', startRow * props.bytesPerRow)
}

/**
&nbsp;* 滚动到指定偏移
&nbsp;*/
function scrollToOffset(offset: number) {
&nbsp; if (!viewportRef.value) return
&nbsp; const row = Math.floor(offset / props.bytesPerRow)
&nbsp; viewportRef.value.scrollTop = row * ROW_HEIGHT
}

// 滚动事件处理（使用requestAnimationFrame节流）
let scrollPending = false
function handleScroll() {
&nbsp; if (scrollPending) return
&nbsp; scrollPending = true
&nbsp; requestAnimationFrame(() => {
&nbsp; &nbsp; updateViewport()
&nbsp; &nbsp; scrollPending = false
&nbsp; })
}

// 监听同步偏移（来自反汇编视图的联动）
watch(() => props.syncOffset, (offset) => {
&nbsp; if (offset >= 0) {
&nbsp; &nbsp; scrollToOffset(offset)
&nbsp; }
})

// 初始化
onMounted(() => {
&nbsp; updateViewport()
&nbsp; viewportRef.value?.addEventListener('scroll', handleScroll, { passive: true })
})

onUnmounted(() => {
&nbsp; viewportRef.value?.removeEventListener('scroll', handleScroll)
})

// 暴露方法
defineExpose({
&nbsp; scrollToOffset,
&nbsp; /** 获取当前可视区域起始偏移 */
&nbsp; getCurrentOffset: () => viewState.value.startRow * props.bytesPerRow
})
</script>

<template>
&nbsp; <div class="hex-view">
&nbsp; &nbsp; <!-- 表头 -->
&nbsp; &nbsp; <div class="hex-header">
&nbsp; &nbsp; &nbsp; <span class="header-offset">偏移</span>
&nbsp; &nbsp; &nbsp; <span class="header-bytes">
&nbsp; &nbsp; &nbsp; &nbsp; <span
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="i in bytesPerRow"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="i"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="header-byte-index"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ (i - 1).toString(16).toUpperCase().padStart(2, '0') }}
&nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; <span class="header-ascii">ASCII</span>
&nbsp; &nbsp; </div>

&nbsp; &nbsp; <!-- 虚拟滚动视口 -->
&nbsp; &nbsp; <div
&nbsp; &nbsp; &nbsp; ref="viewportRef"
&nbsp; &nbsp; &nbsp; class="hex-viewport"
&nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; <!-- 撑开总高度的占位层 -->
&nbsp; &nbsp; &nbsp; <div
&nbsp; &nbsp; &nbsp; &nbsp; class="hex-content-spacer"
&nbsp; &nbsp; &nbsp; &nbsp; :style="{ height: `${totalHeight}px` }"
&nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; <!-- 实际渲染的窗口（绝对定位） -->
&nbsp; &nbsp; &nbsp; &nbsp; <div
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ref="contentRef"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="hex-content-window"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :style="{ transform: `translateY(${windowOffset}px)` }"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="row in visibleRows"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="row.rowIndex"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="hex-row"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :class="{ 'row-highlighted': row.isHighlighted }"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :style="{ height: `${ROW_HEIGHT}px`, lineHeight: `${ROW_HEIGHT}px` }"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- 偏移列 -->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="hex-offset">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ row.offset.toString(16).toUpperCase().padStart(8, '0') }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- 十六进制列 -->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="hex-bytes">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="(byte, idx) in row.bytes"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="idx"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="hex-byte"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :class="{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'byte-selected': row.isSelected(idx),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'byte-highlighted': row.offset + idx === highlightedOffset
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="emit('byteClick', row.offset + idx, byte)"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @mousedown="handleMouseDown(row.offset + idx)"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @mouseover="handleMouseOver(row.offset + idx)"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @mouseup="handleMouseUp"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ byte.toString(16).toUpperCase().padStart(2, '0') }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- 填充空白（最后一行不满16字节时） -->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="idx in (bytesPerRow - row.bytes.length)"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="`pad-${idx}`"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="hex-byte hex-byte-padding"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ ' &nbsp; ' }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- ASCII列 -->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="hex-ascii">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="(char, idx) in row.ascii"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="idx"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="ascii-char"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :class="{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'byte-selected': row.isSelected(idx),
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'byte-highlighted': row.offset + idx === highlightedOffset
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ char }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; </div>
&nbsp; </div>
</template>

<style scoped>
.hex-view {
&nbsp; width: 100%;
&nbsp; height: 100%;
&nbsp; display: flex;
&nbsp; flex-direction: column;
&nbsp; background:&nbsp;#1E1E1E;
&nbsp; font-family: Consolas, "Courier New", monospace;
&nbsp; font-size: 13px;
&nbsp; color:&nbsp;#D4D4D4;
}

.hex-header {
&nbsp; display: flex;
&nbsp; align-items: center;
&nbsp; padding: 4px 8px;
&nbsp; border-bottom: 1px solid&nbsp;#3E3E42;
&nbsp; background:&nbsp;#252526;
&nbsp; color:&nbsp;#808080;
&nbsp; font-size: 12px;
&nbsp; flex-shrink: 0;
}

.header-offset {
&nbsp; width: 80px;
&nbsp; flex-shrink: 0;
}

.header-bytes {
&nbsp; display: flex;
&nbsp; flex: 1;
&nbsp; gap: 0;
}

.header-byte-index {
&nbsp; width: 27px;
&nbsp; text-align: center;
&nbsp; color:&nbsp;#606060;
}

.header-ascii {
&nbsp; width: 160px;
&nbsp; flex-shrink: 0;
&nbsp; padding-left: 12px;
}

.hex-viewport {
&nbsp; flex: 1;
&nbsp; overflow-y: auto;
&nbsp; overflow-x: hidden;
}

.hex-content-spacer {
&nbsp; position: relative;
}

.hex-content-window {
&nbsp; position: absolute;
&nbsp; top: 0;
&nbsp; left: 0;
&nbsp; right: 0;
&nbsp; will-change: transform;
}

.hex-row {
&nbsp; display: flex;
&nbsp; align-items: center;
&nbsp; padding: 0 8px;
&nbsp; white-space: nowrap;
&nbsp; transition: background-color 0.1s;
}

.hex-row:hover {
&nbsp; background-color:&nbsp;#2D2D30;
}

.hex-row.row-highlighted {
&nbsp; background-color:&nbsp;#2D3B4D;
&nbsp; border-left: 2px solid&nbsp;#569CD6;
}

.hex-offset {
&nbsp; width: 80px;
&nbsp; flex-shrink: 0;
&nbsp; color:&nbsp;#808080;
&nbsp; user-select: none;
}

.hex-bytes {
&nbsp; display: flex;
&nbsp; flex: 1;
&nbsp; gap: 1px;
}

.hex-byte {
&nbsp; width: 26px;
&nbsp; text-align: center;
&nbsp; cursor: pointer;
&nbsp; border-radius: 2px;
&nbsp; user-select: none;
&nbsp; transition: background-color 0.05s;
}

.hex-byte:hover {
&nbsp; background-color:&nbsp;#3E3E42;
}

.hex-byte.byte-selected {
&nbsp; background-color:&nbsp;#264F78;
&nbsp; color:&nbsp;#FFFFFF;
}

.hex-byte.byte-highlighted {
&nbsp; background-color:&nbsp;#569CD6;
&nbsp; color:&nbsp;#1E1E1E;
&nbsp; font-weight: bold;
}

.hex-byte-padding {
&nbsp; color: transparent;
&nbsp; cursor: default;
}

.hex-ascii {
&nbsp; width: 160px;
&nbsp; flex-shrink: 0;
&nbsp; padding-left: 12px;
&nbsp; color:&nbsp;#808080;
&nbsp; user-select: none;
&nbsp; letter-spacing: 0;
}

.ascii-char {
&nbsp; width: 10px;
&nbsp; text-align: center;
&nbsp; display: inline-block;
}

.ascii-char.byte-selected {
&nbsp; background-color:&nbsp;#264F78;
&nbsp; color:&nbsp;#FFFFFF;
}

.ascii-char.byte-highlighted {
&nbsp; background-color:&nbsp;#569CD6;
&nbsp; color:&nbsp;#1E1E1E;
&nbsp; font-weight: bold;
}
</style>

这个虚拟滚动实现的核心在于hex-content-spacer和hex-content-window的组合。spacer是一个具有totalHeight高度的占位元素，它为视口提供正确的滚动条范围；content-window则通过CSS transform: translateY()来精确定位渲染窗口，避免了DOM元素的频繁创建和销毁。这种”transform + 绝对定位”方案比传统的paddingTop方案性能更好，因为它不会触发浏览器的布局重算（Layout）69^。

对于10MB以上的文件，即使虚拟滚动只渲染可见行，单次滚动事件的处理时间仍然可能在16ms以上（超过一帧的预算），导致滚动卡顿。此时你可以引入进一步的优化：分块渲染。将虚拟窗口分成若干块（chunk），每块包含固定行数（如50行），使用IntersectionObserver只渲染进入视口的块。这类似于现代地图应用中”瓦片地图”的渲染策略——只加载和渲染当前视口内以及缓冲区中的瓦片。

// 分块虚拟滚动优化
const CHUNK_SIZE = 50 // 每块50行
const VISIBLE_CHUNKS = 3 // 同时渲染3个块（当前+上下各1个缓冲块）

const visibleChunks = computed(() => {
  const currentChunk = Math.floor(viewState.value.startRow / CHUNK_SIZE)
  const chunks = []
&nbsp; for (let i = currentChunk - 1; i <= currentChunk + 1; i++) {
&nbsp; &nbsp; if (i >= 0 && i * CHUNK_SIZE < totalRows.value) {
&nbsp; &nbsp; &nbsp; chunks.push({
&nbsp; &nbsp; &nbsp; &nbsp; index: i,
&nbsp; &nbsp; &nbsp; &nbsp; startRow: i * CHUNK_SIZE,
&nbsp; &nbsp; &nbsp; &nbsp; endRow: Math.min((i + 1) * CHUNK_SIZE, totalRows.value)
&nbsp; &nbsp; &nbsp; })
&nbsp; &nbsp; }
&nbsp; }
&nbsp; return chunks
})

这种分块策略将渲染单位从单行提升到块级别，减少了Vue的虚拟DOM比对开销。当用户快速滚动时，只有跨越块边界时才需要创建新的DOM元素，块内部的滚动仅通过CSS transform平移整个块的位置。

13.3.3 选中与高亮：鼠标选择范围高亮、与反汇编视图联动

十六进制视图中的字节选择通过鼠标拖拽实现。当用户按下鼠标时记录起始偏移，拖拽时更新结束偏移，释放鼠标时触发rangeSelect事件。选中的字节范围在UI上通过蓝色背景高亮显示，同时ASCII列中对应的字符也同步高亮。

与反汇编视图的联动机制是：当用户在十六进制视图中选中一个字节范围后，系统计算该范围对应的指令地址（通过后端API查询偏移到指令的映射），然后在反汇编视图中高亮显示包含这些字节的指令。反过来，当用户在反汇编视图中选中一条指令时，十六进制视图自动滚动到该指令对应的字节偏移并高亮显示。

鼠标选择范围的实现需要处理三个鼠标事件：mousedown记录起始字节偏移，mouseover在拖拽时更新结束偏移，mouseup时触发最终的rangeSelect事件。你需要在组件的data中维护selectStart和selectEnd两个响应式变量，在mouseover时实时更新selectedRange以提供视觉反馈，但只在mouseup时才emit确认事件。

// 鼠标选择处理逻辑（需在HexView.vue的setup中添加）
const isSelecting = ref(false)
const selectionStart = ref(-1)
const selectionEnd = ref(-1)

function handleMouseDown(offset: number) {
  isSelecting.value = true
  selectionStart.value = offset
  selectionEnd.value = offset
  // 初始选中状态
  emit('rangeSelect', offset, offset)
}

function handleMouseOver(offset: number) {
  if (!isSelecting.value) return
  selectionEnd.value = offset
  const start = Math.min(selectionStart.value, selectionEnd.value)
  const end = Math.max(selectionStart.value, selectionEnd.value)
  emit('rangeSelect', start, end)
}

function handleMouseUp() {
  isSelecting.value = false
}

联动时还需要处理一个细节：指令地址到文件偏移的映射并非总是1:1。对于PE文件，指令在内存中的虚拟地址（VA）需要通过”减去ImageBase加上文件偏移”的公式转换为原始文件偏移。这个映射关系由后端在解析PE/ELF头部时计算得出，前端通过API获取映射表后缓存在Pinia store中。当十六进制视图触发rangeSelect时，使用这个映射表将文件偏移反查为虚拟地址，再传递给反汇编视图进行高亮。

13.3.4 数据解释面板：选中数据的多种格式解释

当用户在十六进制视图中选中若干字节后，一个数据解释面板应该展示这些字节在不同数据类型下的解释结果。这包括：有符号/无符号整数（8位/16位/32位/64位，小端序/大端序）、IEEE 754浮点数（单精度/双精度）、ASCII/UTF-8字符串、GUID/UUID等。

// composables/useDataInterpreter.ts
import { computed } from 'vue'
import type { Ref } from 'vue'

/**
 * 数据解释器：将选中的字节数组解释为多种数据类型
 */
export function useDataInterpreter(selectedBytes: Ref<Uint8Array>) {
&nbsp; const interpretations = computed(() => {
&nbsp; &nbsp; const bytes = selectedBytes.value
&nbsp; &nbsp; if (bytes.length === 0) return []

&nbsp; &nbsp; const results: Array<{ type: string; value: string; endianness?: string }> = []

&nbsp; &nbsp; // ===== 整数类型 =====

&nbsp; &nbsp; // 8位整数
&nbsp; &nbsp; if (bytes.length >= 1) {
&nbsp; &nbsp; &nbsp; results.push({ type: 'int8', value: bytes[0].toString() })
&nbsp; &nbsp; &nbsp; results.push({ type: 'uint8', value: bytes[0].toString() })
&nbsp; &nbsp; }

&nbsp; &nbsp; // 16位整数（小端序 + 大端序）
&nbsp; &nbsp; if (bytes.length >= 2) {
&nbsp; &nbsp; &nbsp; const le16 = bytes[0] | (bytes[1] << 8)
&nbsp; &nbsp; &nbsp; const be16 = (bytes[0] << 8) | bytes[1]
&nbsp; &nbsp; &nbsp; results.push({ type: 'int16', value: (le16 > 0x7FFF ? le16 - 0x10000 : le16).toString(), endianness: 'LE' })
&nbsp; &nbsp; &nbsp; results.push({ type: 'uint16', value: le16.toString(), endianness: 'LE' })
&nbsp; &nbsp; &nbsp; results.push({ type: 'int16', value: (be16 > 0x7FFF ? be16 - 0x10000 : be16).toString(), endianness: 'BE' })
&nbsp; &nbsp; &nbsp; results.push({ type: 'uint16', value: be16.toString(), endianness: 'BE' })
&nbsp; &nbsp; }

&nbsp; &nbsp; // 32位整数
&nbsp; &nbsp; if (bytes.length >= 4) {
&nbsp; &nbsp; &nbsp; const le32 = (bytes[0]) | (bytes[1] << 8) | (bytes[2] << 16) | (bytes[3] << 24)
&nbsp; &nbsp; &nbsp; const be32 = (bytes[0] << 24) | (bytes[1] << 16) | (bytes[2] << 8) | bytes[3]
&nbsp; &nbsp; &nbsp; const le32Signed = le32 > 0x7FFFFFFF ? le32 - 0x100000000 : le32
&nbsp; &nbsp; &nbsp; const be32Signed = be32 > 0x7FFFFFFF ? be32 - 0x100000000 : be32
&nbsp; &nbsp; &nbsp; results.push({ type: 'int32', value: le32Signed.toString(), endianness: 'LE' })
&nbsp; &nbsp; &nbsp; results.push({ type: 'uint32', value: `0x${(le32 >>> 0).toString(16).toUpperCase()}`, endianness: 'LE' })
&nbsp; &nbsp; &nbsp; results.push({ type: 'int32', value: be32Signed.toString(), endianness: 'BE' })
&nbsp; &nbsp; &nbsp; results.push({ type: 'uint32', value: `0x${be32.toString(16).toUpperCase()}`, endianness: 'BE' })
&nbsp; &nbsp; }

&nbsp; &nbsp; // 64位整数
&nbsp; &nbsp; if (bytes.length >= 8) {
&nbsp; &nbsp; &nbsp; const le64 = BigInt.asUintN(64,
&nbsp; &nbsp; &nbsp; &nbsp; BigInt(bytes[0]) |
&nbsp; &nbsp; &nbsp; &nbsp; (BigInt(bytes[1]) << 8n) |
&nbsp; &nbsp; &nbsp; &nbsp; (BigInt(bytes[2]) << 16n) |
&nbsp; &nbsp; &nbsp; &nbsp; (BigInt(bytes[3]) << 24n) |
&nbsp; &nbsp; &nbsp; &nbsp; (BigInt(bytes[4]) << 32n) |
&nbsp; &nbsp; &nbsp; &nbsp; (BigInt(bytes[5]) << 40n) |
&nbsp; &nbsp; &nbsp; &nbsp; (BigInt(bytes[6]) << 48n) |
&nbsp; &nbsp; &nbsp; &nbsp; (BigInt(bytes[7]) << 56n)
&nbsp; &nbsp; &nbsp; )
&nbsp; &nbsp; &nbsp; results.push({ type: 'int64', value: `0x${le64.toString(16).toUpperCase().padStart(16, '0')}`, endianness: 'LE' })
&nbsp; &nbsp; }

&nbsp; &nbsp; // ===== 浮点数 =====

&nbsp; &nbsp; // 32位单精度浮点
&nbsp; &nbsp; if (bytes.length >= 4) {
&nbsp; &nbsp; &nbsp; const leFloatBuf = new ArrayBuffer(4)
&nbsp; &nbsp; &nbsp; const leFloatArr = new Uint8Array(leFloatBuf)
&nbsp; &nbsp; &nbsp; leFloatArr.set(bytes.slice(0, 4))
&nbsp; &nbsp; &nbsp; const leFloat = new Float32Array(leFloatBuf)[0]
&nbsp; &nbsp; &nbsp; results.push({ type: 'float32', value: leFloat.toString(), endianness: 'LE' })

&nbsp; &nbsp; &nbsp; const beFloatBuf = new ArrayBuffer(4)
&nbsp; &nbsp; &nbsp; const beFloatArr = new Uint8Array(beFloatBuf)
&nbsp; &nbsp; &nbsp; beFloatArr.set([bytes[3], bytes[2], bytes[1], bytes[0]])
&nbsp; &nbsp; &nbsp; const beFloat = new Float32Array(beFloatBuf)[0]
&nbsp; &nbsp; &nbsp; results.push({ type: 'float32', value: beFloat.toString(), endianness: 'BE' })
&nbsp; &nbsp; }

&nbsp; &nbsp; // 64位双精度浮点
&nbsp; &nbsp; if (bytes.length >= 8) {
&nbsp; &nbsp; &nbsp; const leDoubleBuf = new ArrayBuffer(8)
&nbsp; &nbsp; &nbsp; const leDoubleArr = new Uint8Array(leDoubleBuf)
&nbsp; &nbsp; &nbsp; leDoubleArr.set(bytes.slice(0, 8))
&nbsp; &nbsp; &nbsp; const leDouble = new Float64Array(leDoubleBuf)[0]
&nbsp; &nbsp; &nbsp; results.push({ type: 'float64', value: leDouble.toString(), endianness: 'LE' })
&nbsp; &nbsp; }

&nbsp; &nbsp; // ===== 字符串 =====

&nbsp; &nbsp; // ASCII字符串
&nbsp; &nbsp; const asciiStr = Array.from(bytes)
&nbsp; &nbsp; &nbsp; .map(b => b >= 0x20 && b <= 0x7E ? String.fromCharCode(b) : '\\x' + b.toString(16).padStart(2, '0'))
&nbsp; &nbsp; &nbsp; .join('')
&nbsp; &nbsp; results.push({ type: 'ASCII', value: asciiStr.substring(0, 100) })

&nbsp; &nbsp; // UTF-16LE字符串（Windows常用）
&nbsp; &nbsp; if (bytes.length >= 2) {
&nbsp; &nbsp; &nbsp; try {
&nbsp; &nbsp; &nbsp; &nbsp; const utf16Str = new TextDecoder('utf-16le').decode(bytes.slice(0, Math.min(bytes.length, 64)))
&nbsp; &nbsp; &nbsp; &nbsp; results.push({ type: 'UTF-16LE', value: utf16Str.replace(/\x00/g, '\\0').substring(0, 100) })
&nbsp; &nbsp; &nbsp; } catch { /* ignore decode errors */ }
&nbsp; &nbsp; }

&nbsp; &nbsp; return results
&nbsp; })

&nbsp; return { interpretations }
}

数据解释面板可以作为一个浮动小部件放在十六进制视图旁边，当选中数据时自动更新显示。对于安全分析师来说，这个功能在检查可疑数据时非常有用——比如一段看似随机的数据在32位浮点解释下可能揭示出坐标信息，或者UTF-16LE解码后暴露出一个Windows注册表路径。

解释面板的UI设计应该采用紧凑的键值对表格形式，每行展示一种数据类型的解释结果。使用Element Plus的el-descriptions组件可以快速实现这个布局。面板顶部显示当前选中的字节数和字节序列的十六进制摘要，下方按类别分组展示整数、浮点数和字符串的解释结果。对于多字节整数值，小端序（Little-Endian）和大端序（Big-Endian）两种解释都要显示——x86/x64架构使用小端序，而网络协议和某些文件格式使用大端序。面板应该实时更新：当用户在十六进制视图中拖拽选择不同范围时，解释结果立即跟随变化，无需额外点击操作。

13.4 函数列表与符号树

函数列表是逆向工程的导航地图。它以树形结构组织程序中的所有函数，按类型（导入函数/库函数/内部函数）分组，支持搜索过滤和点击跳转。Element Plus的el-tree组件提供了完善的树形控件支持，包括虚拟滚动、懒加载和自定义节点渲染118^。

13.4.1 函数树组件：el-tree展示函数层级、导入/导出/内部函数分类

函数树的核心数据结构是一个分层树，根节点是分类（导入函数、导出函数、内部函数、库函数等），叶节点是具体的函数条目。每个函数条目包含地址、名称、大小、类型等元数据。

<!-- components/FunctionTree.vue -->
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { TreeNode } from 'element-plus'
import { Search, Link, Collection, Cpu, OfficeBuilding } from '@element-plus/icons-vue'
import type { FunctionInfo } from '@/types/binary'

// ===== Props =====
const props = defineProps<{
&nbsp; /** 函数列表 */
&nbsp; functions: FunctionInfo[]
&nbsp; /** 当前选中的函数地址 */
&nbsp; selectedAddress?: number
}>()

// ===== Emits =====
const emit = defineEmits<{
&nbsp; select: [func: FunctionInfo]
&nbsp; contextMenu: [func: FunctionInfo, event: MouseEvent]
}>()

// ===== 搜索状态 =====
const searchQuery = ref('')
const treeRef = ref()

// ===== 将函数列表转换为树形数据 =====
const treeData = computed(() => {
&nbsp; const query = searchQuery.value.toLowerCase()

&nbsp; // 按类型分组
&nbsp; const groups: Record<string, FunctionInfo[]> = {
&nbsp; &nbsp; import: [],
&nbsp; &nbsp; export: [],
&nbsp; &nbsp; internal: [],
&nbsp; &nbsp; library: [],
&nbsp; &nbsp; thunk: []
&nbsp; }

&nbsp; props.functions.forEach(func => {
&nbsp; &nbsp; const type = func.type || 'internal'
&nbsp; &nbsp; if (!groups[type]) groups[type] = []
&nbsp; &nbsp; groups[type].push(func)
&nbsp; })

&nbsp; // 构建树节点
&nbsp; const nodes = []

&nbsp; // 导入函数组
&nbsp; if (groups.import.length > 0 && (!query || groups.import.some(f => f.name.toLowerCase().includes(query)))) {
&nbsp; &nbsp; nodes.push({
&nbsp; &nbsp; &nbsp; label: `导入函数 (${groups.import.length})`,
&nbsp; &nbsp; &nbsp; icon: 'Link',
&nbsp; &nbsp; &nbsp; type: 'group',
&nbsp; &nbsp; &nbsp; children: groups.import
&nbsp; &nbsp; &nbsp; &nbsp; .filter(f => !query || f.name.toLowerCase().includes(query))
&nbsp; &nbsp; &nbsp; &nbsp; .map(func => ({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: func.name,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; address: func.address,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size: func.size,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: func.type,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; library: func.library,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon: 'Link',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; leaf: true,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: func
&nbsp; &nbsp; &nbsp; &nbsp; }))
&nbsp; &nbsp; &nbsp; &nbsp; .sort((a, b) => a.address - b.address)
&nbsp; &nbsp; })
&nbsp; }

&nbsp; // 导出函数组
&nbsp; if (groups.export.length > 0 && (!query || groups.export.some(f => f.name.toLowerCase().includes(query)))) {
&nbsp; &nbsp; nodes.push({
&nbsp; &nbsp; &nbsp; label: `导出函数 (${groups.export.length})`,
&nbsp; &nbsp; &nbsp; icon: 'OfficeBuilding',
&nbsp; &nbsp; &nbsp; type: 'group',
&nbsp; &nbsp; &nbsp; children: groups.export
&nbsp; &nbsp; &nbsp; &nbsp; .filter(f => !query || f.name.toLowerCase().includes(query))
&nbsp; &nbsp; &nbsp; &nbsp; .map(func => ({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: func.name,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; address: func.address,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size: func.size,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: func.type,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon: 'OfficeBuilding',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; leaf: true,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: func
&nbsp; &nbsp; &nbsp; &nbsp; }))
&nbsp; &nbsp; &nbsp; &nbsp; .sort((a, b) => a.address - b.address)
&nbsp; &nbsp; })
&nbsp; }

&nbsp; // 内部函数组
&nbsp; if (groups.internal.length > 0 && (!query || groups.internal.some(f => f.name.toLowerCase().includes(query)))) {
&nbsp; &nbsp; nodes.push({
&nbsp; &nbsp; &nbsp; label: `内部函数 (${groups.internal.length})`,
&nbsp; &nbsp; &nbsp; icon: 'Cpu',
&nbsp; &nbsp; &nbsp; type: 'group',
&nbsp; &nbsp; &nbsp; children: groups.internal
&nbsp; &nbsp; &nbsp; &nbsp; .filter(f => !query || f.name.toLowerCase().includes(query))
&nbsp; &nbsp; &nbsp; &nbsp; .map(func => ({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: func.name,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; address: func.address,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size: func.size,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: func.type,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon: 'Cpu',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; leaf: true,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: func
&nbsp; &nbsp; &nbsp; &nbsp; }))
&nbsp; &nbsp; &nbsp; &nbsp; .sort((a, b) => a.address - b.address)
&nbsp; &nbsp; })
&nbsp; }

&nbsp; // 库函数组
&nbsp; if (groups.library.length > 0 && (!query || groups.library.some(f => f.name.toLowerCase().includes(query)))) {
&nbsp; &nbsp; // 库函数可以按DLL进一步分组
&nbsp; &nbsp; const byLibrary: Record<string, typeof groups.library> = {}
&nbsp; &nbsp; groups.library.forEach(func => {
&nbsp; &nbsp; &nbsp; const lib = func.library || 'unknown'
&nbsp; &nbsp; &nbsp; if (!byLibrary[lib]) byLibrary[lib] = []
&nbsp; &nbsp; &nbsp; byLibrary[lib].push(func)
&nbsp; &nbsp; })

&nbsp; &nbsp; const libChildren = Object.entries(byLibrary).map(([libName, funcs]) => ({
&nbsp; &nbsp; &nbsp; label: libName,
&nbsp; &nbsp; &nbsp; icon: 'Collection',
&nbsp; &nbsp; &nbsp; type: 'subgroup',
&nbsp; &nbsp; &nbsp; children: funcs
&nbsp; &nbsp; &nbsp; &nbsp; .filter(f => !query || f.name.toLowerCase().includes(query))
&nbsp; &nbsp; &nbsp; &nbsp; .map(func => ({
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: func.name,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; address: func.address,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size: func.size,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: func.type,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; library: func.library,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; icon: 'Collection',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; leaf: true,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: func
&nbsp; &nbsp; &nbsp; &nbsp; }))
&nbsp; &nbsp; &nbsp; &nbsp; .sort((a, b) => a.address - b.address)
&nbsp; &nbsp; }))

&nbsp; &nbsp; nodes.push({
&nbsp; &nbsp; &nbsp; label: `库函数 (${groups.library.length})`,
&nbsp; &nbsp; &nbsp; icon: 'Collection',
&nbsp; &nbsp; &nbsp; type: 'group',
&nbsp; &nbsp; &nbsp; children: libChildren
&nbsp; &nbsp; })
&nbsp; }

&nbsp; return nodes
})

// ===== 节点样式 =====
function getNodeClass(node: TreeNode) {
&nbsp; const classes: string[] = []
&nbsp; if (node.data?.type === 'import') classes.push('node-import')
&nbsp; if (node.data?.type === 'export') classes.push('node-export')
&nbsp; if (node.data?.type === 'internal') classes.push('node-internal')
&nbsp; if (node.address === props.selectedAddress) classes.push('node-selected')
&nbsp; return classes.join(' ')
}

function getNodeColor(node: TreeNode) {
&nbsp; switch (node.data?.type) {
&nbsp; &nbsp; case 'import': return '#C586C0' &nbsp;// 紫色
&nbsp; &nbsp; case 'export': return '#DCDCAA' &nbsp;// 黄色
&nbsp; &nbsp; case 'internal': return '#ABB2BF' // 灰色
&nbsp; &nbsp; case 'library': return '#C678DD' &nbsp;// 洋红
&nbsp; &nbsp; case 'thunk': return '#4EC9B0' &nbsp; &nbsp;// 青色
&nbsp; &nbsp; default: return '#D4D4D4'
&nbsp; }
}

// ===== 事件处理 =====
function handleNodeClick(node: TreeNode) {
&nbsp; if (node.data?.leaf && node.data?.data) {
&nbsp; &nbsp; emit('select', node.data.data as FunctionInfo)
&nbsp; }
}

function handleContextMenu(event: MouseEvent, node: TreeNode) {
&nbsp; if (node.data?.leaf && node.data?.data) {
&nbsp; &nbsp; emit('contextMenu', node.data.data as FunctionInfo, event)
&nbsp; }
}

// 搜索时自动展开匹配的节点
watch(searchQuery, (query) => {
&nbsp; if (query && treeRef.value) {
&nbsp; &nbsp; treeRef.value.expandAll()
&nbsp; }
})
</script>

<template>
&nbsp; <div class="function-tree">
&nbsp; &nbsp; <!-- 搜索框 -->
&nbsp; &nbsp; <div class="tree-search">
&nbsp; &nbsp; &nbsp; <el-input
&nbsp; &nbsp; &nbsp; &nbsp; v-model="searchQuery"
&nbsp; &nbsp; &nbsp; &nbsp; placeholder="搜索函数..."
&nbsp; &nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; &nbsp; clearable
&nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; <template&nbsp;#prefix>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon><Search /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; </template>
&nbsp; &nbsp; &nbsp; </el-input>
&nbsp; &nbsp; </div>

&nbsp; &nbsp; <!-- 函数树 -->
&nbsp; &nbsp; <el-tree-v2
&nbsp; &nbsp; &nbsp; ref="treeRef"
&nbsp; &nbsp; &nbsp; :data="treeData"
&nbsp; &nbsp; &nbsp; :height="treeHeight"
&nbsp; &nbsp; &nbsp; :item-size="26"
&nbsp; &nbsp; &nbsp; :props="{ children: 'children', label: 'label', value: 'address' }"
&nbsp; &nbsp; &nbsp; :highlight-current="true"
&nbsp; &nbsp; &nbsp; :expand-on-click-node="false"
&nbsp; &nbsp; &nbsp; :default-expand-all="false"
&nbsp; &nbsp; &nbsp; :filter-node-method="filterNode"
&nbsp; &nbsp; &nbsp; @node-click="handleNodeClick"
&nbsp; &nbsp; &nbsp; @node-contextmenu="handleContextMenu"
&nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; <template&nbsp;#default="{ node }">
&nbsp; &nbsp; &nbsp; &nbsp; <span
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="tree-node"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :class="getNodeClass(node)"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon v-if="node.icon === 'Link'" :size="14" class="node-icon">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Link />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon v-else-if="node.icon === 'Cpu'" :size="14" class="node-icon">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Cpu />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon v-else-if="node.icon === 'Collection'" :size="14" class="node-icon">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Collection />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon v-else-if="node.icon === 'OfficeBuilding'" :size="14" class="node-icon">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OfficeBuilding />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-icon>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="node-label"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :style="{ color: getNodeColor(node) }"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :title="node.data?.library ? `${node.data.library}.${node.label}` : node.label"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ node.label }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span v-if="node.data?.address && node.data?.leaf" class="node-address">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ node.data.address.toString(16).toUpperCase().padStart(8, '0') }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span v-if="node.data?.size && node.data?.leaf" class="node-size">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ node.data.size }}B
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; </template>
&nbsp; &nbsp; </el-tree-v2>
&nbsp; </div>
</template>

<style scoped>
.function-tree {
&nbsp; width: 100%;
&nbsp; height: 100%;
&nbsp; display: flex;
&nbsp; flex-direction: column;
&nbsp; background:&nbsp;#1E1E1E;
}

.tree-search {
&nbsp; padding: 8px;
&nbsp; border-bottom: 1px solid&nbsp;#3E3E42;
&nbsp; flex-shrink: 0;
}

.tree-node {
&nbsp; display: flex;
&nbsp; align-items: center;
&nbsp; gap: 6px;
&nbsp; font-family: Consolas, "Courier New", monospace;
&nbsp; font-size: 12px;
&nbsp; width: 100%;
}

.node-icon {
&nbsp; color:&nbsp;#606060;
&nbsp; flex-shrink: 0;
}

.node-label {
&nbsp; flex: 1;
&nbsp; overflow: hidden;
&nbsp; text-overflow: ellipsis;
&nbsp; white-space: nowrap;
}

.node-address {
&nbsp; color:&nbsp;#808080;
&nbsp; font-size: 11px;
&nbsp; flex-shrink: 0;
&nbsp; margin-left: 4px;
}

.node-size {
&nbsp; color:&nbsp;#606060;
&nbsp; font-size: 11px;
&nbsp; flex-shrink: 0;
&nbsp; margin-left: 4px;
}

.node-selected .node-label {
&nbsp; color:&nbsp;#569CD6&nbsp;!important;
&nbsp; font-weight: bold;
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
&nbsp; background-color:&nbsp;#2D3B4D&nbsp;!important;
}
</style>

这个函数树组件使用了Element Plus的el-tree-v2（虚拟树）组件来处理大量函数的情况119^。虚拟树只渲染可见的节点行，即使函数列表有上万个条目也能保持流畅滚动。treeData计算属性将扁平的函数列表转换为按类型分组的树形结构，搜索过滤在分组前进行，确保搜索结果包含所有匹配的函数。

13.4.2 字符串列表组件：可筛选、可搜索、可跳转到引用的字符串表

字符串列表组件展示从二进制文件中提取的所有可读字符串，包括ASCII字符串和Unicode字符串。每条记录包含字符串内容、文件偏移、长度和类型（ASCII/Unicode）。分析师可以通过搜索框快速定位感兴趣的字符串（如URL、文件路径、注册表键、IP地址等），双击某行可以跳转到引用该字符串的代码位置。

<!-- components/StringList.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'
import type { BinaryString } from '@/types/binary'

const props = defineProps<{
&nbsp; strings: BinaryString[]
}>()

const emit = defineEmits<{
&nbsp; navigate: [offset: number]
}>()

const searchQuery = ref('')
const typeFilter = ref<'all' | 'ascii' | 'unicode'>('all')

const filteredStrings = computed(() => {
&nbsp; const query = searchQuery.value.toLowerCase()
&nbsp; return props.strings.filter(s => {
&nbsp; &nbsp; const matchesQuery = !query || s.value.toLowerCase().includes(query)
&nbsp; &nbsp; const matchesType = typeFilter.value === 'all' || s.type === typeFilter.value
&nbsp; &nbsp; return matchesQuery && matchesType
&nbsp; })
})

function getRowClass(row: BinaryString) {
&nbsp; // 高亮可疑字符串
&nbsp; if (/https?:\/\//i.test(row.value)) return 'string-url'
&nbsp; if (/[A-Za-z]:\\/i.test(row.value)) return 'string-path'
&nbsp; if (/HKEY_/i.test(row.value)) return 'string-registry'
&nbsp; if (/\b(?:[0-9]{1,3}\.){3}[0-9]{1,3}\b/.test(row.value)) return 'string-ip'
&nbsp; return ''
}
</script>

<template>
&nbsp; <div class="string-list">
&nbsp; &nbsp; <div class="string-toolbar">
&nbsp; &nbsp; &nbsp; <el-input v-model="searchQuery" placeholder="搜索字符串..." size="small" clearable />
&nbsp; &nbsp; &nbsp; <el-select v-model="typeFilter" size="small" style="width: 100px">
&nbsp; &nbsp; &nbsp; &nbsp; <el-option label="全部" value="all" />
&nbsp; &nbsp; &nbsp; &nbsp; <el-option label="ASCII" value="ascii" />
&nbsp; &nbsp; &nbsp; &nbsp; <el-option label="Unicode" value="unicode" />
&nbsp; &nbsp; &nbsp; </el-select>
&nbsp; &nbsp; </div>
&nbsp; &nbsp; <el-table-v2
&nbsp; &nbsp; &nbsp; :columns="columns"
&nbsp; &nbsp; &nbsp; :data="filteredStrings"
&nbsp; &nbsp; &nbsp; :width="width"
&nbsp; &nbsp; &nbsp; :height="height"
&nbsp; &nbsp; &nbsp; :row-class="getRowClass"
&nbsp; &nbsp; &nbsp; @row-dblclick="(row) => emit('navigate', row.offset)"
&nbsp; &nbsp; />
&nbsp; </div>
</template>

字符串列表的一个重要特性是可疑模式高亮。通过正则表达式匹配，你可以自动识别并高亮以下类型的字符串：URL（https?://...）、文件路径（C:\Windows\...）、注册表键（HKEY_...）、IP地址、电子邮件地址和Base64编码数据。这些模式在安全分析中特别有价值——恶意软件常常将C2服务器地址、持久化路径或加密的payload隐藏在二进制文件的字符串表中。使用Element Plus表格的row-class属性，你可以为不同类型的可疑字符串分配不同的行背景色，让分析师一眼就能发现潜在威胁指标。

13.4.3 导入/导出表：DLL依赖和API调用的树形展示

导入表展示程序依赖的所有DLL及其导入的API函数，按DLL分组。每个导入项显示函数名、序号、导入地址表（Import Address Table, IAT）入口地址。导出表则展示程序导出的函数，包括函数名、序号、导出地址。这两个表使用el-tree组件按DLL/模块分组展示，点击函数名可跳转到对应的反汇编位置。

<!-- components/ImportExportTable.vue -->
<script setup lang="ts">
import type { ImportEntry, ExportEntry } from '@/types/binary'

const props = defineProps<{
&nbsp; imports: ImportEntry[]
&nbsp; exports: ExportEntry[]
}>()

const emit = defineEmits<{
&nbsp; navigate: [address: number]
}>()

// 按DLL分组的导入表数据
const importTree = computed(() => {
&nbsp; const groups: Record<string, ImportEntry[]> = {}
&nbsp; props.imports.forEach(imp => {
&nbsp; &nbsp; if (!groups[imp.dll]) groups[imp.dll] = []
&nbsp; &nbsp; groups[imp.dll].push(imp)
&nbsp; })
&nbsp; return Object.entries(groups).map(([dll, functions]) => ({
&nbsp; &nbsp; label: dll,
&nbsp; &nbsp; children: functions.map(f => ({
&nbsp; &nbsp; &nbsp; label: f.name || `Ordinal #${f.ordinal}`,
&nbsp; &nbsp; &nbsp; address: f.address,
&nbsp; &nbsp; &nbsp; ordinal: f.ordinal,
&nbsp; &nbsp; &nbsp; hint: f.hint,
&nbsp; &nbsp; &nbsp; leaf: true,
&nbsp; &nbsp; &nbsp; data: f
&nbsp; &nbsp; }))
&nbsp; }))
})

// 导出表数据（扁平列表）
const exportList = computed(() =>
&nbsp; props.exports.map(exp => ({
&nbsp; &nbsp; label: exp.name || `Ordinal #${exp.ordinal}`,
&nbsp; &nbsp; address: exp.address,
&nbsp; &nbsp; ordinal: exp.ordinal,
&nbsp; &nbsp; leaf: true,
&nbsp; &nbsp; data: exp
&nbsp; }))
)

function getImportNodeColor(node: any) {
&nbsp; if (!node.data?.leaf) return '#D4D4D4' // DLL名称
&nbsp; const func = node.data.data
&nbsp; // 高风险API标记为红色
&nbsp; const dangerousAPIs = ['strcpy', 'sprintf', 'gets', 'scanf', 'memcpy', 'system', 'execve', 'WinExec', 'CreateProcess', 'ShellExecute']
&nbsp; if (dangerousAPIs.some(api => func.name?.toLowerCase().includes(api))) {
&nbsp; &nbsp; return '#F44747'
&nbsp; }
&nbsp; return '#C586C0' // 普通导入函数
}
</script>

<template>
&nbsp; <div class="import-export-table">
&nbsp; &nbsp; <el-tabs type="border-card">
&nbsp; &nbsp; &nbsp; <!-- 导入表 -->
&nbsp; &nbsp; &nbsp; <el-tab-pane :label="`导入 (${imports.length})`">
&nbsp; &nbsp; &nbsp; &nbsp; <el-tree-v2
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :data="importTree"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :height="treeHeight"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :item-size="24"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @node-click="(node) => node.address && emit('navigate', node.address)"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <template&nbsp;#default="{ node }">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span :style="{ color: getImportNodeColor(node) }">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ node.label }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span v-if="node.address" class="node-addr">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ node.address.toString(16).toUpperCase() }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </template>
&nbsp; &nbsp; &nbsp; &nbsp; </el-tree-v2>
&nbsp; &nbsp; &nbsp; </el-tab-pane>

&nbsp; &nbsp; &nbsp; <!-- 导出表 -->
&nbsp; &nbsp; &nbsp; <el-tab-pane :label="`导出 (${exports.length})`">
&nbsp; &nbsp; &nbsp; &nbsp; <el-virtual-list
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :data="exportList"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :height="treeHeight"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :item-size="24"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <template&nbsp;#default="{ item }">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="export-item"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="emit('navigate', item.address)"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>{{ item.label }}</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="node-addr">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ item.address.toString(16).toUpperCase() }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </template>
&nbsp; &nbsp; &nbsp; &nbsp; </el-virtual-list>
&nbsp; &nbsp; &nbsp; </el-tab-pane>
&nbsp; &nbsp; </el-tabs>
&nbsp; </div>
</template>

导入表组件的一个亮点是危险API自动标记——通过预定义的危险函数列表（如strcpy、sprintf、system等），在渲染时自动将匹配到的API名称显示为红色。这让安全分析师在查看导入表时能够立即识别潜在的安全风险。导入表中每个节点点击后都会触发navigate事件，在反汇编视图中跳转到对应的IAT入口 thunk 代码位置，分析师可以进一步追踪该API在程序中的所有调用点。

13.4.4 搜索与过滤：全文搜索、类型过滤、正则匹配

所有列表视图（函数、字符串、导入/导出）共享一个统一的搜索组件，支持三种搜索模式：普通文本匹配（不区分大小写）、正则表达式匹配和类型过滤（只显示特定类型的条目）。搜索组件使用Element Plus的el-input配合el-select模式选择器，搜索结果实时高亮匹配文本。

<!-- components/SearchBar.vue -->
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'

const props = defineProps<{
&nbsp; modelValue: string
&nbsp; mode?: 'text' | 'regex'
&nbsp; typeFilters?: Array<{ label: string; value: string }>
}>()

const emit = defineEmits<{
&nbsp; 'update:modelValue': [value: string]
&nbsp; 'update:mode': [mode: string]
&nbsp; filterType: [type: string]
}>()

const searchMode = ref(props.mode || 'text')
const typeFilter = ref('all')

// 验证正则表达式合法性
const isRegexValid = computed(() => {
&nbsp; if (searchMode.value !== 'regex') return true
&nbsp; try {
&nbsp; &nbsp; new RegExp(props.modelValue)
&nbsp; &nbsp; return true
&nbsp; } catch {
&nbsp; &nbsp; return false
&nbsp; }
})

function handleInput(value: string) {
&nbsp; emit('update:modelValue', value)
}
</script>

<template>
&nbsp; <div class="search-bar">
&nbsp; &nbsp; <el-input
&nbsp; &nbsp; &nbsp; :model-value="modelValue"
&nbsp; &nbsp; &nbsp; :class="{ 'regex-error': !isRegexValid }"
&nbsp; &nbsp; &nbsp; placeholder="搜索..."
&nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; clearable
&nbsp; &nbsp; &nbsp; @update:model-value="handleInput"
&nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; <template&nbsp;#prefix>
&nbsp; &nbsp; &nbsp; &nbsp; <el-icon><Search /></el-icon>
&nbsp; &nbsp; &nbsp; </template>
&nbsp; &nbsp; &nbsp; <template&nbsp;#suffix>
&nbsp; &nbsp; &nbsp; &nbsp; <el-tooltip
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-if="searchMode === 'regex' && !isRegexValid"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content="无效的正则表达式"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placement="top"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon color="#F44747"><Warning /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; </el-tooltip>
&nbsp; &nbsp; &nbsp; </template>
&nbsp; &nbsp; &nbsp; <template&nbsp;#append>
&nbsp; &nbsp; &nbsp; &nbsp; <el-select
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-model="searchMode"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style="width: 80px"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @change="emit('update:mode', $event)"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-option label="文本" value="text" />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-option label="正则" value="regex" />
&nbsp; &nbsp; &nbsp; &nbsp; </el-select>
&nbsp; &nbsp; &nbsp; </template>
&nbsp; &nbsp; </el-input>

&nbsp; &nbsp; <!-- 类型过滤器 -->
&nbsp; &nbsp; <el-select
&nbsp; &nbsp; &nbsp; v-if="typeFilters"
&nbsp; &nbsp; &nbsp; v-model="typeFilter"
&nbsp; &nbsp; &nbsp; style="width: 100px"
&nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; @change="emit('filterType', $event)"
&nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; <el-option
&nbsp; &nbsp; &nbsp; &nbsp; v-for="filter in [{ label: '全部', value: 'all' }, ...typeFilters]"
&nbsp; &nbsp; &nbsp; &nbsp; :key="filter.value"
&nbsp; &nbsp; &nbsp; &nbsp; :label="filter.label"
&nbsp; &nbsp; &nbsp; &nbsp; :value="filter.value"
&nbsp; &nbsp; &nbsp; />
&nbsp; &nbsp; </el-select>
&nbsp; </div>
</template>

<style scoped>
.search-bar {
&nbsp; display: flex;
&nbsp; gap: 8px;
&nbsp; align-items: center;
}

.regex-error :deep(.el-input__wrapper) {
&nbsp; box-shadow: 0 0 0 1px&nbsp;#F44747&nbsp;inset;
}
</style>

在搜索实现上，普通文本模式使用String.prototype.includes()进行不区分大小写的匹配；正则表达式模式使用RegExp.prototype.test()，但需要先验证正则的合法性以避免运行时错误。对于大数据量（如上万个函数名），搜索操作应该在Web Worker中进行以避免阻塞UI主线程。不过在实际测试中，Element Plus的el-tree-v2虚拟树在接收过滤后的数据时表现得相当高效，即使在10万条记录中搜索也不会造成明显的卡顿119^。搜索结果的实时高亮通过el-highlight指令或手动包裹<span class="highlight">标签来实现，匹配的文本使用黄色背景色（#EA5C00）突出显示。

13.5 AI Agent交互面板

AI Agent交互面板是本项目的差异化功能，它将传统逆向工程工具与大语言模型（LLM）的深度分析能力结合起来。这个面板需要实现三个核心功能：类似ChatGPT的对话式交互界面、Agent执行状态的实时展示、以及结构化漏洞报告的渲染。

13.5.1 对话界面：类ChatGPT的对话式交互、Markdown渲染、代码高亮

对话界面是用户与AI Agent交流的主要渠道。它采用经典的聊天界面设计：消息气泡按发送者分组排列（用户消息右对齐，AI消息左对齐），支持Markdown格式渲染（包括标题、列表、表格、代码块等），代码块使用Monaco Editor或Prism.js进行语法高亮。

<!-- components/AgentChatPanel.vue -->
<script setup lang="ts">
import { ref, watch, nextTick, onMounted } from 'vue'
import { marked } from 'marked'
import { User, MagicStick, Loading } from '@element-plus/icons-vue'
import type { ChatMessage } from '@/types/agent'

// ===== Props =====
const props = defineProps<{
&nbsp; messages: ChatMessage[]
&nbsp; isLoading: boolean
&nbsp; agentStatus?: string
}>()

// ===== Emits =====
const emit = defineEmits<{
&nbsp; sendMessage: [content: string]
&nbsp; stopGeneration: []
}>()

// ===== 内部状态 =====
const inputText = ref('')
const messagesContainer = ref<HTMLDivElement>()
const isTyping = ref(false)

// ===== Markdown渲染配置 =====
marked.setOptions({
&nbsp; breaks: true, &nbsp; &nbsp; &nbsp;// 转换换行符为<br>
&nbsp; gfm: true, &nbsp; &nbsp; &nbsp; &nbsp; // GitHub Flavored Markdown
&nbsp; headerIds: false &nbsp; // 不生成header ID
})

/**
&nbsp;* 将Markdown文本渲染为HTML
&nbsp;* 使用DOMPurify清理以防止XSS攻击
&nbsp;*/
function renderMarkdown(content: string): string {
&nbsp; return marked.parse(content) as string
}

/**
&nbsp;* 提取代码块的语言标识
&nbsp;*/
function getCodeLanguage(className: string): string {
&nbsp; const match = className.match(/language-(\w+)/)
&nbsp; return match ? match[1] : 'text'
}

// 发送消息
function handleSend() {
&nbsp; const text = inputText.value.trim()
&nbsp; if (!text || props.isLoading) return
&nbsp; emit('sendMessage', text)
&nbsp; inputText.value = ''
}

// 滚动到底部
function scrollToBottom() {
&nbsp; nextTick(() => {
&nbsp; &nbsp; if (messagesContainer.value) {
&nbsp; &nbsp; &nbsp; messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
&nbsp; &nbsp; }
&nbsp; })
}

// 新消息到达时自动滚动
watch(() => props.messages.length, scrollToBottom)
watch(() => props.isLoading, scrollToBottom)

onMounted(() => {
&nbsp; scrollToBottom()
})
</script>

<template>
&nbsp; <div class="agent-chat-panel">
&nbsp; &nbsp; <!-- 消息列表区域 -->
&nbsp; &nbsp; <div ref="messagesContainer" class="chat-messages">
&nbsp; &nbsp; &nbsp; <!-- 欢迎消息 -->
&nbsp; &nbsp; &nbsp; <div v-if="messages.length === 0" class="welcome-message">
&nbsp; &nbsp; &nbsp; &nbsp; <el-icon :size="48" class="welcome-icon"><MagicStick /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; <h3>AI 逆向分析助手</h3>
&nbsp; &nbsp; &nbsp; &nbsp; <p>我可以帮你分析二进制文件，识别漏洞，解释代码逻辑。</p>
&nbsp; &nbsp; &nbsp; &nbsp; <div class="quick-prompts">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-button
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="prompt in quickPrompts"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="prompt"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="emit('sendMessage', prompt)"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ prompt }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-button>
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; <!-- 消息列表 -->
&nbsp; &nbsp; &nbsp; <div
&nbsp; &nbsp; &nbsp; &nbsp; v-for="(msg, index) in messages"
&nbsp; &nbsp; &nbsp; &nbsp; :key="index"
&nbsp; &nbsp; &nbsp; &nbsp; class="message-wrapper"
&nbsp; &nbsp; &nbsp; &nbsp; :class="msg.role"
&nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; <!-- 头像 -->
&nbsp; &nbsp; &nbsp; &nbsp; <div class="message-avatar">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon v-if="msg.role === 'user'" :size="20"><User /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon v-else-if="msg.role === 'assistant'" :size="20"><MagicStick /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon v-else-if="msg.role === 'system'" :size="20"><Info /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; &nbsp; <!-- 消息气泡 -->
&nbsp; &nbsp; &nbsp; &nbsp; <div class="message-bubble">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- 消息头部 -->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="message-header">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="message-role">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ msg.role === 'user' ? '你' : msg.role === 'assistant' ? 'AI Agent' : '系统' }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="message-time">{{ formatTime(msg.timestamp) }}</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- 消息内容（Markdown渲染） -->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="message-content"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-html="renderMarkdown(msg.content)"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- 工具调用展示（如果消息包含工具调用） -->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div v-if="msg.toolCalls && msg.toolCalls.length > 0" class="tool-calls">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-for="tool in msg.toolCalls"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :key="tool.id"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="tool-call-item"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon><Tools /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="tool-name">{{ tool.name }}</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-tag
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :type="tool.status === 'completed' ? 'success' : tool.status === 'error' ? 'danger' : 'warning'"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ tool.status === 'completed' ? '已完成' : tool.status === 'error' ? '失败' : '执行中' }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-tag>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; <!-- AI正在输入指示器 -->
&nbsp; &nbsp; &nbsp; <div v-if="isLoading" class="message-wrapper assistant typing">
&nbsp; &nbsp; &nbsp; &nbsp; <div class="message-avatar">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon :size="20" class="typing-icon"><Loading /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; <div class="message-bubble typing-bubble">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="typing-dot" />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="typing-dot" />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="typing-dot" />
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; </div>

&nbsp; &nbsp; <!-- 输入区域 -->
&nbsp; &nbsp; <div class="chat-input-area">
&nbsp; &nbsp; &nbsp; <el-input
&nbsp; &nbsp; &nbsp; &nbsp; v-model="inputText"
&nbsp; &nbsp; &nbsp; &nbsp; type="textarea"
&nbsp; &nbsp; &nbsp; &nbsp; :rows="3"
&nbsp; &nbsp; &nbsp; &nbsp; placeholder="输入你的问题，按Enter发送，Shift+Enter换行..."
&nbsp; &nbsp; &nbsp; &nbsp; resize="none"
&nbsp; &nbsp; &nbsp; &nbsp; @keydown="handleKeydown"
&nbsp; &nbsp; &nbsp; />
&nbsp; &nbsp; &nbsp; <div class="input-actions">
&nbsp; &nbsp; &nbsp; &nbsp; <el-button
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-if="isLoading"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="warning"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="emit('stopGeneration')"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon><VideoPause /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 停止
&nbsp; &nbsp; &nbsp; &nbsp; </el-button>
&nbsp; &nbsp; &nbsp; &nbsp; <el-button
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="primary"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :disabled="!inputText.trim() || isLoading"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="handleSend"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon><Promotion /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 发送
&nbsp; &nbsp; &nbsp; &nbsp; </el-button>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; </div>
&nbsp; </div>
</template>

<style scoped>
.agent-chat-panel {
&nbsp; width: 100%;
&nbsp; height: 100%;
&nbsp; display: flex;
&nbsp; flex-direction: column;
&nbsp; background:&nbsp;#1E1E1E;
}

.chat-messages {
&nbsp; flex: 1;
&nbsp; overflow-y: auto;
&nbsp; padding: 16px;
&nbsp; display: flex;
&nbsp; flex-direction: column;
&nbsp; gap: 12px;
}

/* 欢迎消息 */
.welcome-message {
&nbsp; text-align: center;
&nbsp; padding: 40px 20px;
&nbsp; color:&nbsp;#808080;
}

.welcome-icon {
&nbsp; color:&nbsp;#569CD6;
&nbsp; margin-bottom: 16px;
}

.welcome-message h3 {
&nbsp; color:&nbsp;#D4D4D4;
&nbsp; margin: 0 0 8px 0;
&nbsp; font-size: 18px;
}

.quick-prompts {
&nbsp; display: flex;
&nbsp; flex-wrap: wrap;
&nbsp; gap: 8px;
&nbsp; justify-content: center;
&nbsp; margin-top: 20px;
}

/* 消息气泡 */
.message-wrapper {
&nbsp; display: flex;
&nbsp; gap: 10px;
&nbsp; align-items: flex-start;
}

.message-wrapper.user {
&nbsp; flex-direction: row-reverse;
}

.message-avatar {
&nbsp; width: 32px;
&nbsp; height: 32px;
&nbsp; border-radius: 50%;
&nbsp; display: flex;
&nbsp; align-items: center;
&nbsp; justify-content: center;
&nbsp; background:&nbsp;#2D2D30;
&nbsp; border: 1px solid&nbsp;#3E3E42;
&nbsp; flex-shrink: 0;
&nbsp; color:&nbsp;#808080;
}

.message-wrapper.assistant .message-avatar {
&nbsp; background:&nbsp;#1E3A3A;
&nbsp; border-color:&nbsp;#4EC9B0;
&nbsp; color:&nbsp;#4EC9B0;
}

.message-bubble {
&nbsp; max-width: 85%;
&nbsp; padding: 10px 14px;
&nbsp; border-radius: 8px;
&nbsp; background:&nbsp;#252526;
&nbsp; border: 1px solid&nbsp;#3E3E42;
}

.message-wrapper.user .message-bubble {
&nbsp; background:&nbsp;#264F78;
&nbsp; border-color:&nbsp;#569CD6;
}

.message-wrapper.assistant .message-bubble {
&nbsp; background:&nbsp;#252526;
&nbsp; border-color:&nbsp;#4EC9B040;
}

.message-header {
&nbsp; display: flex;
&nbsp; gap: 8px;
&nbsp; margin-bottom: 6px;
&nbsp; font-size: 11px;
}

.message-role {
&nbsp; font-weight: bold;
&nbsp; color:&nbsp;#D4D4D4;
}

.message-time {
&nbsp; color:&nbsp;#606060;
}

/* Markdown内容样式 */
.message-content :deep(h1),
.message-content :deep(h2),
.message-content :deep(h3) {
&nbsp; color:&nbsp;#D4D4D4;
&nbsp; margin: 8px 0 4px 0;
}

.message-content :deep(code) {
&nbsp; background:&nbsp;#3E3E42;
&nbsp; padding: 2px 6px;
&nbsp; border-radius: 3px;
&nbsp; font-family: Consolas, monospace;
&nbsp; font-size: 12px;
&nbsp; color:&nbsp;#CE9178;
}

.message-content :deep(pre) {
&nbsp; background:&nbsp;#1A1A1A;
&nbsp; border: 1px solid&nbsp;#3E3E42;
&nbsp; border-radius: 6px;
&nbsp; padding: 12px;
&nbsp; overflow-x: auto;
&nbsp; margin: 8px 0;
}

.message-content :deep(pre code) {
&nbsp; background: transparent;
&nbsp; padding: 0;
&nbsp; color:&nbsp;#D4D4D4;
}

.message-content :deep(ul),
.message-content :deep(ol) {
&nbsp; margin: 4px 0;
&nbsp; padding-left: 20px;
}

.message-content :deep(li) {
&nbsp; margin: 2px 0;
&nbsp; color:&nbsp;#D4D4D4;
}

.message-content :deep(table) {
&nbsp; border-collapse: collapse;
&nbsp; margin: 8px 0;
&nbsp; width: 100%;
}

.message-content :deep(th),
.message-content :deep(td) {
&nbsp; border: 1px solid&nbsp;#3E3E42;
&nbsp; padding: 6px 10px;
&nbsp; text-align: left;
}

.message-content :deep(th) {
&nbsp; background:&nbsp;#2D2D30;
&nbsp; color:&nbsp;#9CDCFE;
}

/* 工具调用展示 */
.tool-calls {
&nbsp; margin-top: 8px;
&nbsp; padding-top: 8px;
&nbsp; border-top: 1px solid&nbsp;#3E3E42;
&nbsp; display: flex;
&nbsp; flex-direction: column;
&nbsp; gap: 4px;
}

.tool-call-item {
&nbsp; display: flex;
&nbsp; align-items: center;
&nbsp; gap: 8px;
&nbsp; font-size: 12px;
&nbsp; color:&nbsp;#9CDCFE;
}

.tool-name {
&nbsp; font-family: Consolas, monospace;
}

/* 正在输入指示器 */
.typing-bubble {
&nbsp; display: flex;
&nbsp; gap: 4px;
&nbsp; align-items: center;
&nbsp; padding: 14px 18px;
}

.typing-icon {
&nbsp; animation: spin 1.5s linear infinite;
&nbsp; color:&nbsp;#4EC9B0;
}

.typing-dot {
&nbsp; width: 8px;
&nbsp; height: 8px;
&nbsp; border-radius: 50%;
&nbsp; background:&nbsp;#808080;
&nbsp; animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
&nbsp; 0%, 60%, 100% { transform: translateY(0); }
&nbsp; 30% { transform: translateY(-6px); }
}

@keyframes spin {
&nbsp; from { transform: rotate(0deg); }
&nbsp; to { transform: rotate(360deg); }
}

/* 输入区域 */
.chat-input-area {
&nbsp; padding: 12px;
&nbsp; border-top: 1px solid&nbsp;#3E3E42;
&nbsp; background:&nbsp;#252526;
&nbsp; flex-shrink: 0;
}

.input-actions {
&nbsp; display: flex;
&nbsp; justify-content: flex-end;
&nbsp; gap: 8px;
&nbsp; margin-top: 8px;
}
</style>

这个聊天面板组件的核心是renderMarkdown函数，它使用marked库将AI返回的Markdown格式文本转换为HTML。所有消息内容都通过v-html渲染，这在功能上是必要的，因为AI的输出包含格式化的Markdown（标题、表格、代码块等）。在生产环境中，你应该使用DOMPurify等库对HTML进行XSS过滤。组件还包含了一个工具调用展示区域，当AI调用外部工具（如反汇编、符号执行）时，这些工具的执行状态会实时显示在对应消息下方。

为了提供更好的用户体验，AI Agent的回复可以采用打字机效果（Typewriter Effect）——逐字显示回复内容，模拟人类打字的过程。这不仅让界面更有”生命力”，也让用户有时间逐步消化AI输出的分析内容。实现打字机效果的关键是在接收AI流式响应时，逐步追加到消息内容中：

// 打字机效果：逐字追加AI响应
async function streamTypewriterResponse(
&nbsp; reader: ReadableStreamDefaultReader<Uint8Array>,
&nbsp; messageIndex: number
) {
&nbsp; const decoder = new TextDecoder()
&nbsp; let buffer = ''

&nbsp; while (true) {
&nbsp; &nbsp; const { done, value } = await reader.read()
&nbsp; &nbsp; if (done) break

&nbsp; &nbsp; buffer += decoder.decode(value, { stream: true })

&nbsp; &nbsp; // 逐字追加到当前消息
&nbsp; &nbsp; const chars = buffer.split('')
&nbsp; &nbsp; for (let i = 0; i < chars.length; i++) {
&nbsp; &nbsp; &nbsp; await new Promise(resolve => setTimeout(resolve, 8)) // 每字符8ms延迟
&nbsp; &nbsp; &nbsp; messages.value[messageIndex].content += chars[i]
&nbsp; &nbsp; &nbsp; // 触发滚动到底部
&nbsp; &nbsp; &nbsp; scrollToBottom()
&nbsp; &nbsp; }
&nbsp; &nbsp; buffer = ''
&nbsp; }
}

打字机效果的延迟时间需要仔细调校：8毫秒/字符相当于约125字符/秒，这个速度既不会让用户觉得太慢，又能营造出”正在思考”的感觉。对于代码块，你应该关闭打字机效果（直接整块插入），因为代码的语法高亮需要完整内容才能正确渲染，逐字显示会导致中间状态的渲染错误。

13.5.2 Agent状态显示：当前Agent思考过程、工具调用展示、进度指示

当AI Agent执行复杂分析任务时，它通常不会立即返回最终答案，而是经历一个”思考-行动-观察”的循环过程（即ReAct模式）。Agent状态显示组件负责可视化这个内部过程，让用户了解AI正在做什么、已经完成了哪些步骤。

状态显示采用时间线（Timeline）的形式，每个步骤作为一个节点，状态包括：等待中（灰色）、执行中（蓝色旋转动画）、已完成（绿色对勾）、失败（红色叉号）。对于工具调用步骤，还显示输入参数和输出结果的摘要。

这种时间线可视化借鉴了LangChain和AutoGPT等流行AI Agent框架的调试界面设计，让用户能够”透视”AI的思考过程。当AI Agent决定调用反汇编工具时，你可以看到它传递给工具的具体参数（如起始地址和指令数量）；当工具返回结果后，你可以看到AI如何消化这些信息并调整后续策略。这种透明度不仅帮助用户理解AI的行为逻辑，也为调试提供了宝贵的上下文——当AI给出错误分析结论时，你可以通过检查中间步骤定位问题的根源。

<!-- components/AgentStatusTimeline.vue -->
<script setup lang="ts">
import type { AgentStep } from '@/types/agent'

// ===== Props =====
defineProps<{
&nbsp; steps: AgentStep[]
&nbsp; currentStep: number
}>()

// 步骤类型图标映射
function getStepIcon(type: string): string {
&nbsp; const icons: Record<string, string> = {
&nbsp; &nbsp; think: 'Brain',
&nbsp; &nbsp; tool_call: 'Tools',
&nbsp; &nbsp; observe: 'View',
&nbsp; &nbsp; respond: 'Chat',
&nbsp; &nbsp; error: 'Warning'
&nbsp; }
&nbsp; return icons[type] || 'CircleCheck'
}

function getStepTypeLabel(type: string): string {
&nbsp; const labels: Record<string, string> = {
&nbsp; &nbsp; think: '思考',
&nbsp; &nbsp; tool_call: '工具调用',
&nbsp; &nbsp; observe: '观察结果',
&nbsp; &nbsp; respond: '生成回复',
&nbsp; &nbsp; error: '错误'
&nbsp; }
&nbsp; return labels[type] || type
}

function getStepStatusType(status: string): 'primary' | 'success' | 'danger' | 'warning' | 'info' {
&nbsp; const types: Record<string, any> = {
&nbsp; &nbsp; pending: 'info',
&nbsp; &nbsp; running: 'primary',
&nbsp; &nbsp; completed: 'success',
&nbsp; &nbsp; error: 'danger'
&nbsp; }
&nbsp; return types[status] || 'info'
}
</script>

<template>
&nbsp; <div class="agent-status-timeline">
&nbsp; &nbsp; <div class="timeline-header">
&nbsp; &nbsp; &nbsp; <span class="header-title">Agent 执行状态</span>
&nbsp; &nbsp; &nbsp; <el-tag
&nbsp; &nbsp; &nbsp; &nbsp; :type="steps[currentStep]?.status === 'running' ? 'primary' : 'success'"
&nbsp; &nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; {{ steps[currentStep]?.status === 'running' ? '执行中' : '已完成' }}
&nbsp; &nbsp; &nbsp; </el-tag>
&nbsp; &nbsp; </div>

&nbsp; &nbsp; <el-timeline>
&nbsp; &nbsp; &nbsp; <el-timeline-item
&nbsp; &nbsp; &nbsp; &nbsp; v-for="(step, index) in steps"
&nbsp; &nbsp; &nbsp; &nbsp; :key="index"
&nbsp; &nbsp; &nbsp; &nbsp; :type="getStepStatusType(step.status)"
&nbsp; &nbsp; &nbsp; &nbsp; :icon="getStepIcon(step.type)"
&nbsp; &nbsp; &nbsp; &nbsp; :timestamp="step.duration ? `${step.duration}ms` : undefined"
&nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; <div class="timeline-step">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="step-type">{{ getStepTypeLabel(step.type) }}</span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p v-if="step.description" class="step-desc">{{ step.description }}</p>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- 工具调用详情 -->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div v-if="step.type === 'tool_call' && step.toolInput" class="tool-details">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-collapse>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-collapse-item title="输入参数">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <pre class="code-block">{{ JSON.stringify(step.toolInput, null, 2) }}</pre>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-collapse-item>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-collapse-item v-if="step.toolOutput" title="输出结果">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <pre class="code-block">{{ JSON.stringify(step.toolOutput, null, 2) }}</pre>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-collapse-item>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-collapse>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; </el-timeline-item>
&nbsp; &nbsp; </el-timeline>
&nbsp; </div>
</template>

<style scoped>
.agent-status-timeline {
&nbsp; padding: 12px;
&nbsp; background:&nbsp;#1E1E1E;
&nbsp; border-right: 1px solid&nbsp;#3E3E42;
&nbsp; overflow-y: auto;
&nbsp; height: 100%;
}

.timeline-header {
&nbsp; display: flex;
&nbsp; justify-content: space-between;
&nbsp; align-items: center;
&nbsp; margin-bottom: 16px;
&nbsp; padding-bottom: 8px;
&nbsp; border-bottom: 1px solid&nbsp;#3E3E42;
}

.header-title {
&nbsp; font-weight: bold;
&nbsp; color:&nbsp;#D4D4D4;
}

.timeline-step {
&nbsp; font-size: 12px;
}

.step-type {
&nbsp; font-weight: bold;
&nbsp; color:&nbsp;#D4D4D4;
}

.step-desc {
&nbsp; margin: 4px 0 0 0;
&nbsp; color:&nbsp;#808080;
&nbsp; line-height: 1.4;
}

.tool-details {
&nbsp; margin-top: 8px;
}

.code-block {
&nbsp; background:&nbsp;#1A1A1A;
&nbsp; border: 1px solid&nbsp;#3E3E42;
&nbsp; border-radius: 4px;
&nbsp; padding: 8px;
&nbsp; font-family: Consolas, monospace;
&nbsp; font-size: 11px;
&nbsp; color:&nbsp;#D4D4D4;
&nbsp; overflow-x: auto;
&nbsp; margin: 0;
}

:deep(.el-timeline-item__node) {
&nbsp; background-color: transparent;
&nbsp; border: 2px solid var(--el-color-primary);
}

:deep(.el-timeline-item__node--success) {
&nbsp; border-color: var(--el-color-success);
}

:deep(.el-timeline-item__node--danger) {
&nbsp; border-color: var(--el-color-danger);
}
</style>

13.5.3 漏洞报告展示：结构化漏洞卡片、风险评级、修复建议

当AI Agent完成漏洞分析后，结果以结构化的漏洞卡片形式展示。每张卡片包含漏洞标题、CVE编号（如果有）、风险等级（使用颜色编码：Critical红色/High橙色/Medium黄色/Low蓝色/Info灰色）、漏洞描述、受影响的代码位置（可点击跳转到反汇编视图）、利用条件和修复建议。

漏洞卡片使用Element Plus的el-card组件构建，每张卡片代表一个独立的安全发现。卡片头部包含漏洞名称和风险等级标签，主体部分展开详细的分析内容。修复建议部分使用Markdown渲染，可能包含代码示例和配置修改建议。

<!-- components/VulnerabilityCard.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import type { VulnerabilityReport } from '@/types/agent'
import { WarningFilled, ArrowDown, ArrowUp } from '@element-plus/icons-vue'

const props = defineProps<{
&nbsp; vulnerability: VulnerabilityReport
}>()

const emit = defineEmits<{
&nbsp; navigateToCode: [address: number]
&nbsp; applyFix: [vuln: VulnerabilityReport]
}>()

const isExpanded = ref(false)

// 风险等级映射
const severityConfig: Record<string, { color: string; label: string; icon: any }> = {
&nbsp; critical: { color: '#F44747', label: '严重', icon: WarningFilled },
&nbsp; high: { color: '#CE9178', label: '高危', icon: WarningFilled },
&nbsp; medium: { color: '#FFD700', label: '中危', icon: WarningFilled },
&nbsp; low: { color: '#569CD6', label: '低危', icon: WarningFilled },
&nbsp; info: { color: '#808080', label: '信息', icon: WarningFilled }
}

const config = computed(() =>
&nbsp; severityConfig[props.vulnerability.severity] || severityConfig.info
)
</script>

<template>
&nbsp; <el-card
&nbsp; &nbsp; class="vulnerability-card"
&nbsp; &nbsp; :class="`severity-${vulnerability.severity}`"
&nbsp; &nbsp; shadow="never"
&nbsp; >
&nbsp; &nbsp; <!-- 卡片头部 -->
&nbsp; &nbsp; <template&nbsp;#header>
&nbsp; &nbsp; &nbsp; <div class="card-header">
&nbsp; &nbsp; &nbsp; &nbsp; <div class="header-left">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-icon :size="18" :color="config.color">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <component :is="config.icon" />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="vuln-title">{{ vulnerability.title }}</span>
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; <el-tag :color="config.color" effect="dark" size="small">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ config.label }}
&nbsp; &nbsp; &nbsp; &nbsp; </el-tag>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; </template>

&nbsp; &nbsp; <!-- 主体内容 -->
&nbsp; &nbsp; <div class="card-body">
&nbsp; &nbsp; &nbsp; <!-- CVE编号 -->
&nbsp; &nbsp; &nbsp; <div v-if="vulnerability.cveId" class="cve-row">
&nbsp; &nbsp; &nbsp; &nbsp; <el-tag type="danger" size="small">{{ vulnerability.cveId }}</el-tag>
&nbsp; &nbsp; &nbsp; &nbsp; <el-link
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-if="vulnerability.cveUrl"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :href="vulnerability.cveUrl"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target="_blank"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="primary"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :icon="Link"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 查看详情
&nbsp; &nbsp; &nbsp; &nbsp; </el-link>
&nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; <!-- 受影响地址 -->
&nbsp; &nbsp; &nbsp; <div class="location-row">
&nbsp; &nbsp; &nbsp; &nbsp; <span class="label">位置：</span>
&nbsp; &nbsp; &nbsp; &nbsp; <el-link
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="primary"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="emit('navigateToCode', vulnerability.address)"
&nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0x{{ vulnerability.address.toString(16).toUpperCase().padStart(8, '0') }}
&nbsp; &nbsp; &nbsp; &nbsp; </el-link>
&nbsp; &nbsp; &nbsp; &nbsp; <span v-if="vulnerability.functionName" class="func-name">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ({{ vulnerability.functionName }})
&nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; <!-- 漏洞描述 -->
&nbsp; &nbsp; &nbsp; <p class="vuln-description">{{ vulnerability.description }}</p>

&nbsp; &nbsp; &nbsp; <!-- 展开/收起详情 -->
&nbsp; &nbsp; &nbsp; <el-button
&nbsp; &nbsp; &nbsp; &nbsp; text
&nbsp; &nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; &nbsp; @click="isExpanded = !isExpanded"
&nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; <el-icon><component :is="isExpanded ? ArrowUp : ArrowDown" /></el-icon>
&nbsp; &nbsp; &nbsp; &nbsp; {{ isExpanded ? '收起' : '查看详情' }}
&nbsp; &nbsp; &nbsp; </el-button>

&nbsp; &nbsp; &nbsp; <div v-show="isExpanded" class="expanded-content">
&nbsp; &nbsp; &nbsp; &nbsp; <!-- 漏洞类型 -->
&nbsp; &nbsp; &nbsp; &nbsp; <div class="detail-section">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>漏洞类型</h4>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-tag>{{ vulnerability.category }}</el-tag>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>{{ vulnerability.categoryDescription }}</p>
&nbsp; &nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; &nbsp; <!-- 根因分析 -->
&nbsp; &nbsp; &nbsp; &nbsp; <div class="detail-section">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>根因分析</h4>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="markdown-content" v-html="renderMarkdown(vulnerability.rootCause)" />
&nbsp; &nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; &nbsp; <!-- 利用条件 -->
&nbsp; &nbsp; &nbsp; &nbsp; <div class="detail-section">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>利用条件</h4>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li v-for="condition in vulnerability.exploitConditions" :key="condition">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ condition }}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>
&nbsp; &nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; &nbsp; <!-- 修复建议 -->
&nbsp; &nbsp; &nbsp; &nbsp; <div class="detail-section">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>修复建议</h4>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="markdown-content" v-html="renderMarkdown(vulnerability.recommendation)" />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-button
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v-if="vulnerability.suggestedFix"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="primary"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size="small"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @click="emit('applyFix', vulnerability)"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 应用修复建议
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </el-button>
&nbsp; &nbsp; &nbsp; &nbsp; </div>

&nbsp; &nbsp; &nbsp; &nbsp; <!-- 参考链接 -->
&nbsp; &nbsp; &nbsp; &nbsp; <div v-if="vulnerability.references?.length" class="detail-section">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>参考链接</h4>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li v-for="ref in vulnerability.references" :key="ref">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <el-link :href="ref" target="_blank" type="primary">{{ ref }}</el-link>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>
&nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; </div>
&nbsp; </el-card>
</template>

<style scoped>
.vulnerability-card {
&nbsp; margin-bottom: 12px;
&nbsp; background:&nbsp;#252526;
&nbsp; border: 1px solid&nbsp;#3E3E42;
}

.vulnerability-card.severity-critical {
&nbsp; border-left: 4px solid&nbsp;#F44747;
}

.vulnerability-card.severity-high {
&nbsp; border-left: 4px solid&nbsp;#CE9178;
}

.vulnerability-card.severity-medium {
&nbsp; border-left: 4px solid&nbsp;#FFD700;
}

.card-header {
&nbsp; display: flex;
&nbsp; justify-content: space-between;
&nbsp; align-items: center;
}

.header-left {
&nbsp; display: flex;
&nbsp; align-items: center;
&nbsp; gap: 8px;
}

.vuln-title {
&nbsp; font-weight: bold;
&nbsp; color:&nbsp;#D4D4D4;
}

.cve-row {
&nbsp; display: flex;
&nbsp; gap: 8px;
&nbsp; align-items: center;
&nbsp; margin-bottom: 8px;
}

.location-row {
&nbsp; margin-bottom: 8px;
&nbsp; font-size: 13px;
}

.label {
&nbsp; color:&nbsp;#808080;
}

.func-name {
&nbsp; color:&nbsp;#9CDCFE;
&nbsp; font-family: Consolas, monospace;
}

.vuln-description {
&nbsp; color:&nbsp;#D4D4D4;
&nbsp; line-height: 1.6;
&nbsp; margin: 8px 0;
}

.detail-section {
&nbsp; margin-top: 12px;
&nbsp; padding-top: 12px;
&nbsp; border-top: 1px solid&nbsp;#3E3E42;
}

.detail-section h4 {
&nbsp; color:&nbsp;#9CDCFE;
&nbsp; margin: 0 0 8px 0;
&nbsp; font-size: 14px;
}

.markdown-content :deep(code) {
&nbsp; background:&nbsp;#3E3E42;
&nbsp; padding: 2px 6px;
&nbsp; border-radius: 3px;
&nbsp; font-family: Consolas, monospace;
&nbsp; font-size: 12px;
}

.markdown-content :deep(pre) {
&nbsp; background:&nbsp;#1A1A1A;
&nbsp; border: 1px solid&nbsp;#3E3E42;
&nbsp; border-radius: 6px;
&nbsp; padding: 12px;
&nbsp; overflow-x: auto;
}
</style>

漏洞卡片的设计遵循了安全审计报告的最佳实践：首先用颜色和标签让用户快速了解风险等级，然后提供可点击的代码位置导航，接着是清晰的漏洞描述，最后通过可展开的区域展示详细的根因分析和修复建议。renderMarkdown函数使用marked库来渲染修复建议中的格式化文本和代码示例。每张卡片的左侧边框颜色对应风险等级，这种视觉编码让用户在滚动浏览大量漏洞时能够迅速定位高危问题。

13.5.4 一键分析按钮：触发完整分析流程、实时显示进度

一键分析按钮位于工具栏的显著位置，点击后触发完整的AI分析流程：反汇编扫描→危险函数检测→控制流分析→符号执行验证→漏洞报告生成。整个流程通过WebSocket实时推送进度更新，前端通过进度条和状态文本展示当前分析阶段。

<!-- components/OneClickAnalyze.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { Cpu } from '@element-plus/icons-vue'

const emit = defineEmits<{
&nbsp; analyze: []
}>()

const isAnalyzing = ref(false)
const progress = ref(0)
const currentPhase = ref('')
const phaseDetail = ref('')

const phases = [
&nbsp; { name: '正在反汇编...', detail: '使用Capstone引擎解析.text段指令' },
&nbsp; { name: '检测危险函数...', detail: '扫描strcpy/sprintf等高风险API调用' },
&nbsp; { name: '分析控制流...', detail: '构建CFG并识别循环和分支结构' },
&nbsp; { name: '执行符号分析...', detail: '追踪用户输入到危险函数的可达路径' },
&nbsp; { name: '生成漏洞报告...', detail: '聚合发现并生成结构化报告' }
]

async function handleAnalyze() {
&nbsp; isAnalyzing.value = true
&nbsp; progress.value = 0
&nbsp; currentPhase.value = phases[0].name
&nbsp; phaseDetail.value = phases[0].detail
&nbsp; emit('analyze')
}

// 由父组件调用更新进度
function updateProgress(value: number, phaseIndex?: number) {
&nbsp; progress.value = Math.min(value, 100)
&nbsp; if (phaseIndex !== undefined && phaseIndex < phases.length) {
&nbsp; &nbsp; currentPhase.value = phases[phaseIndex].name
&nbsp; &nbsp; phaseDetail.value = phases[phaseIndex].detail
&nbsp; }
}

function finish() {
&nbsp; isAnalyzing.value = false
&nbsp; progress.value = 100
&nbsp; currentPhase.value = '分析完成'
&nbsp; phaseDetail.value = `发现 ${vulnCount} 个问题`
}

let vulnCount = 0
function setVulnCount(count: number) {
&nbsp; vulnCount = count
}

defineExpose({ updateProgress, finish, setVulnCount })
</script>

<template>
&nbsp; <div class="one-click-analyze">
&nbsp; &nbsp; <el-button
&nbsp; &nbsp; &nbsp; v-if="!isAnalyzing"
&nbsp; &nbsp; &nbsp; type="primary"
&nbsp; &nbsp; &nbsp; size="large"
&nbsp; &nbsp; &nbsp; :icon="Cpu"
&nbsp; &nbsp; &nbsp; @click="handleAnalyze"
&nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; AI 一键分析
&nbsp; &nbsp; </el-button>
&nbsp; &nbsp; <div v-else class="progress-area">
&nbsp; &nbsp; &nbsp; <el-progress
&nbsp; &nbsp; &nbsp; &nbsp; :percentage="progress"
&nbsp; &nbsp; &nbsp; &nbsp; :status="progress === 100 ? 'success' : ''"
&nbsp; &nbsp; &nbsp; &nbsp; :stroke-width="16"
&nbsp; &nbsp; &nbsp; &nbsp; striped
&nbsp; &nbsp; &nbsp; &nbsp; striped-flow
&nbsp; &nbsp; &nbsp; />
&nbsp; &nbsp; &nbsp; <div class="phase-info">
&nbsp; &nbsp; &nbsp; &nbsp; <span class="phase-name">{{ currentPhase }}</span>
&nbsp; &nbsp; &nbsp; &nbsp; <span class="phase-detail">{{ phaseDetail }}</span>
&nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; </div>
&nbsp; </div>
</template>

<style scoped>
.one-click-analyze {
&nbsp; padding: 8px 12px;
}

.progress-area {
&nbsp; display: flex;
&nbsp; flex-direction: column;
&nbsp; gap: 6px;
&nbsp; width: 300px;
}

.phase-info {
&nbsp; display: flex;
&nbsp; flex-direction: column;
&nbsp; gap: 2px;
}

.phase-name {
&nbsp; font-size: 13px;
&nbsp; color:&nbsp;#D4D4D4;
&nbsp; font-weight: 500;
}

.phase-detail {
&nbsp; font-size: 11px;
&nbsp; color:&nbsp;#808080;
}
</style>

在父组件中，你需要通过WebSocket连接监听后端发送的进度事件。后端在每个分析阶段完成后向前端推送一个JSON消息，包含当前阶段索引、总体进度百分比和可选的中间结果。前端接收到这些消息后调用updateProgress方法更新UI。

<!-- components/OneClickAnalyze.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { Cpu } from '@element-plus/icons-vue'

const emit = defineEmits<{
&nbsp; analyze: []
}>()

const isAnalyzing = ref(false)
const progress = ref(0)
const currentPhase = ref('')

const phases = [
&nbsp; '正在反汇编...',
&nbsp; '检测危险函数...',
&nbsp; '分析控制流...',
&nbsp; '执行符号分析...',
&nbsp; '生成漏洞报告...'
]

async function handleAnalyze() {
&nbsp; isAnalyzing.value = true
&nbsp; progress.value = 0
&nbsp; emit('analyze')
}

// 由父组件调用更新进度
function updateProgress(value: number, phase?: string) {
&nbsp; progress.value = value
&nbsp; if (phase) currentPhase.value = phase
}

function finish() {
&nbsp; isAnalyzing.value = false
&nbsp; progress.value = 100
}

defineExpose({ updateProgress, finish })
</script>

<template>
&nbsp; <div class="one-click-analyze">
&nbsp; &nbsp; <el-button
&nbsp; &nbsp; &nbsp; v-if="!isAnalyzing"
&nbsp; &nbsp; &nbsp; type="primary"
&nbsp; &nbsp; &nbsp; size="large"
&nbsp; &nbsp; &nbsp; :icon="Cpu"
&nbsp; &nbsp; &nbsp; @click="handleAnalyze"
&nbsp; &nbsp; >
&nbsp; &nbsp; &nbsp; AI 一键分析
&nbsp; &nbsp; </el-button>
&nbsp; &nbsp; <div v-else class="progress-area">
&nbsp; &nbsp; &nbsp; <el-progress
&nbsp; &nbsp; &nbsp; &nbsp; :percentage="progress"
&nbsp; &nbsp; &nbsp; &nbsp; :status="progress === 100 ? 'success' : ''"
&nbsp; &nbsp; &nbsp; &nbsp; :stroke-width="16"
&nbsp; &nbsp; &nbsp; &nbsp; striped
&nbsp; &nbsp; &nbsp; &nbsp; striped-flow
&nbsp; &nbsp; &nbsp; />
&nbsp; &nbsp; &nbsp; <span class="phase-text">{{ currentPhase }}</span>
&nbsp; &nbsp; </div>
&nbsp; </div>
</template>

<style scoped>
.one-click-analyze {
&nbsp; padding: 8px 12px;
}

.progress-area {
&nbsp; display: flex;
&nbsp; flex-direction: column;
&nbsp; gap: 6px;
}

.phase-text {
&nbsp; font-size: 12px;
&nbsp; color:&nbsp;#808080;
&nbsp; text-align: center;
}
</style>

13.6 项目里程碑：分析工作台

13.6.1 完整分析界面：所有面板的集成和联动

至此，所有核心视图组件都已实现完毕。现在你需要将它们集成到一个统一的分析工作台中。工作台的布局沿用第十二章设计的多面板结构：左侧函数树、中央主视图区（反汇编/CFG标签页）、右侧AI Agent面板、底部十六进制视图。

面板之间的联动通过Pinia store中的共享状态实现。当用户在函数树中双击一个函数时，selectedFunction状态被更新，中央视图区的反汇编视图和CFG视图分别监听这个状态并加载对应数据。当用户在反汇编视图中双击一个调用指令时，navigateAddress状态被设置，所有视图同步响应这个地址变化。

工作台的整体布局采用splitpanes组件实现可拖拽调整的分割面板。左侧边栏宽度默认为280px，右侧AI面板默认为350px，底部十六进制视图高度默认为200px。用户可以自由调整这些面板的大小，splitpanes会自动将尺寸变化持久化到localStorage，下次打开页面时恢复上次的布局偏好。中央主视图区使用el-tabs组件支持反汇编视图和CFG视图之间的切换（呼应IDA Pro的Space键切换功能），两个标签页共享同一组数据但提供不同的可视化形式。

// stores/analysisWorkbench.ts
import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'
import type { Instruction, BasicBlock, ControlFlowEdge, FunctionInfo } from '@/types/binary'

/**
 * 分析工作台状态管理
 * 协调所有视图组件的联动状态
 */
export const useWorkbenchStore = defineStore('workbench', () => {
  // ===== 核心状态 =====
&nbsp; const currentFile = ref<string | null>(null)
&nbsp; const functions = ref<FunctionInfo[]>([])
&nbsp; const selectedFunction = ref<FunctionInfo | null>(null)
&nbsp; const selectedAddress = ref<number>(0)
&nbsp; const activeMainTab = ref<'disassembly' | 'cfg'>('disassembly')

&nbsp; // ===== 反汇编视图状态 =====
&nbsp; const disassemblyInstructions = ref<Instruction[]>([])
&nbsp; const currentDisasmAddress = ref<number>(0)

&nbsp; // ===== CFG视图状态 =====
&nbsp; const cfgBlocks = ref<BasicBlock[]>([])
&nbsp; const cfgEdges = ref<ControlFlowEdge[]>([])
&nbsp; const highlightedPath = ref<number[]>([])

&nbsp; // ===== 十六进制视图状态 =====
&nbsp; const binaryData = ref<Uint8Array>(new Uint8Array())
&nbsp; const hexSelectedRange = ref<[number, number] | null>(null)
&nbsp; const hexSyncOffset = ref<number>(-1)

&nbsp; // ===== AI Agent状态 =====
&nbsp; const agentMessages = ref<any[]>([])
&nbsp; const isAgentWorking = ref(false)
&nbsp; const agentSteps = ref<any[]>([])
&nbsp; const vulnerabilities = ref<any[]>([])

&nbsp; // ===== 导航历史 =====
&nbsp; const navigationHistory = ref<number[]>([])
&nbsp; const historyIndex = ref(-1)

&nbsp; // ===== Getters =====
&nbsp; const hasFile = computed(() => currentFile.value !== null)
&nbsp; const functionCount = computed(() => functions.value.length)

&nbsp; // ===== Actions =====

&nbsp; /**
&nbsp; &nbsp;* 导航到指定地址
&nbsp; &nbsp;* 所有视图组件监听selectedAddress的变化
&nbsp; &nbsp;*/
&nbsp; function navigateTo(address: number) {
&nbsp; &nbsp; // 记录历史
&nbsp; &nbsp; if (historyIndex.value < navigationHistory.value.length - 1) {
&nbsp; &nbsp; &nbsp; navigationHistory.value = navigationHistory.value.slice(0, historyIndex.value + 1)
&nbsp; &nbsp; }
&nbsp; &nbsp; navigationHistory.value.push(address)
&nbsp; &nbsp; if (navigationHistory.value.length > 100) {
&nbsp; &nbsp; &nbsp; navigationHistory.value.shift()
&nbsp; &nbsp; }
&nbsp; &nbsp; historyIndex.value = navigationHistory.value.length - 1

&nbsp; &nbsp; selectedAddress.value = address

&nbsp; &nbsp; // 同步十六进制视图
&nbsp; &nbsp; hexSyncOffset.value = address

&nbsp; &nbsp; // 查找包含该地址的函数
&nbsp; &nbsp; const func = functions.value.find(f =>
&nbsp; &nbsp; &nbsp; address >= f.address && address < f.address + (f.size || 0)
&nbsp; &nbsp; )
&nbsp; &nbsp; if (func) {
&nbsp; &nbsp; &nbsp; selectedFunction.value = func
&nbsp; &nbsp; }
&nbsp; }

&nbsp; function goBack(): boolean {
&nbsp; &nbsp; if (historyIndex.value <= 0) return false
&nbsp; &nbsp; historyIndex.value--
&nbsp; &nbsp; selectedAddress.value = navigationHistory.value[historyIndex.value]
&nbsp; &nbsp; return true
&nbsp; }

&nbsp; function goForward(): boolean {
&nbsp; &nbsp; if (historyIndex.value >= navigationHistory.value.length - 1) return false
&nbsp; &nbsp; historyIndex.value++
&nbsp; &nbsp; selectedAddress.value = navigationHistory.value[historyIndex.value]
&nbsp; &nbsp; return true
&nbsp; }

&nbsp; /**
&nbsp; &nbsp;* 选择函数
&nbsp; &nbsp;*/
&nbsp; function selectFunction(func: FunctionInfo) {
&nbsp; &nbsp; selectedFunction.value = func
&nbsp; &nbsp; navigateTo(func.address)
&nbsp; &nbsp; // 加载该函数的反汇编和CFG数据
&nbsp; &nbsp; loadFunctionData(func.address)
&nbsp; }

&nbsp; /**
&nbsp; &nbsp;* 加载函数数据（实际项目中调用API）
&nbsp; &nbsp;*/
&nbsp; async function loadFunctionData(address: number) {
&nbsp; &nbsp; // 这里应该调用后端API
&nbsp; &nbsp; // const data = await api.getFunctionData(address)
&nbsp; &nbsp; // disassemblyInstructions.value = data.instructions
&nbsp; &nbsp; // cfgBlocks.value = data.basicBlocks
&nbsp; &nbsp; // cfgEdges.value = data.edges
&nbsp; }

&nbsp; /**
&nbsp; &nbsp;* 从反汇编视图同步到十六进制视图
&nbsp; &nbsp;*/
&nbsp; function syncDisasmToHex(instructionAddress: number, instructionSize: number) {
&nbsp; &nbsp; hexSyncOffset.value = instructionAddress
&nbsp; &nbsp; hexSelectedRange.value = [instructionAddress, instructionAddress + instructionSize - 1]
&nbsp; }

&nbsp; /**
&nbsp; &nbsp;* 从十六进制视图同步到反汇编视图
&nbsp; &nbsp;*/
&nbsp; function syncHexToDisasm(offset: number) {
&nbsp; &nbsp; // 查找包含该偏移的指令
&nbsp; &nbsp; const inst = disassemblyInstructions.value.find(i =>
&nbsp; &nbsp; &nbsp; offset >= i.address && offset < i.address + i.size
&nbsp; &nbsp; )
&nbsp; &nbsp; if (inst) {
&nbsp; &nbsp; &nbsp; selectedAddress.value = inst.address
&nbsp; &nbsp; }
&nbsp; }

&nbsp; /**
&nbsp; &nbsp;* 在CFG视图中高亮路径
&nbsp; &nbsp;*/
&nbsp; function highlightExecutionPath(path: number[]) {
&nbsp; &nbsp; highlightedPath.value = path
&nbsp; &nbsp; activeMainTab.value = 'cfg'
&nbsp; }

&nbsp; /**
&nbsp; &nbsp;* 添加AI Agent消息
&nbsp; &nbsp;*/
&nbsp; function addAgentMessage(role: string, content: string, toolCalls?: any[]) {
&nbsp; &nbsp; agentMessages.value.push({
&nbsp; &nbsp; &nbsp; role,
&nbsp; &nbsp; &nbsp; content,
&nbsp; &nbsp; &nbsp; toolCalls,
&nbsp; &nbsp; &nbsp; timestamp: Date.now()
&nbsp; &nbsp; })
&nbsp; }

&nbsp; /**
&nbsp; &nbsp;* 添加漏洞报告
&nbsp; &nbsp;*/
&nbsp; function addVulnerability(vuln: any) {
&nbsp; &nbsp; vulnerabilities.value.push(vuln)
&nbsp; }

&nbsp; return {
&nbsp; &nbsp; // State
&nbsp; &nbsp; currentFile,
&nbsp; &nbsp; functions,
&nbsp; &nbsp; selectedFunction,
&nbsp; &nbsp; selectedAddress,
&nbsp; &nbsp; activeMainTab,
&nbsp; &nbsp; disassemblyInstructions,
&nbsp; &nbsp; cfgBlocks,
&nbsp; &nbsp; cfgEdges,
&nbsp; &nbsp; highlightedPath,
&nbsp; &nbsp; binaryData,
&nbsp; &nbsp; hexSelectedRange,
&nbsp; &nbsp; agentMessages,
&nbsp; &nbsp; isAgentWorking,
&nbsp; &nbsp; agentSteps,
&nbsp; &nbsp; vulnerabilities,
&nbsp; &nbsp; // Getters
&nbsp; &nbsp; hasFile,
&nbsp; &nbsp; functionCount,
&nbsp; &nbsp; // Actions
&nbsp; &nbsp; navigateTo,
&nbsp; &nbsp; goBack,
&nbsp; &nbsp; goForward,
&nbsp; &nbsp; selectFunction,
&nbsp; &nbsp; syncDisasmToHex,
&nbsp; &nbsp; syncHexToDisasm,
&nbsp; &nbsp; highlightExecutionPath,
&nbsp; &nbsp; addAgentMessage,
&nbsp; &nbsp; addVulnerability
&nbsp; }
})

13.6.2 交互流畅性：各视图间的同步滚动和跳转

多视图联动的关键在于避免”级联更新”导致的性能问题。当一个视图的状态变化触发其他视图更新时，必须确保更新是单向的，不会出现A更新B、B又更新A的死循环。在上述store设计中，navigateTo是唯一的状态变更入口，所有视图组件都作为这个状态的消费者（通过watch或computed），而不是双向绑定。

对于滚动同步，十六进制视图和反汇编视图之间需要保持滚动位置的大致对应。这可以通过监听滚动事件并计算对应偏移来实现，但需要使用requestAnimationFrame或throttle来限制更新频率，避免滚动时的卡顿70^。

一个实用的同步策略是”主从模式”：指定其中一个视图为主视图（通常是反汇编视图），当主视图滚动时，十六进制视图被动跟随；但十六进制视图的独立滚动不会触发反汇编视图的变化。这样避免了双向同步导致的抖动问题。具体实现上，反汇编视图在滚动时计算当前居中的指令地址，然后通过store的syncDisasmToHex方法通知十六进制视图滚动到对应偏移。

视图间的另一个重要交互是交叉选择高亮。当用户在函数树中单击一个函数时，该函数在CFG中的对应节点应该被选中并居中显示，同时反汇编视图滚动到函数入口地址。这种多视图同步需要在store中使用一个selectedFunction状态作为单一事实来源，所有视图组件都监听这个状态的变更。你可以使用Vue的watchEffect来简化这种监听逻辑：

// 在DisassemblyView.vue中
watchEffect(() => {
  const func = workbenchStore.selectedFunction
  if (func && editorInstance) {
    // 加载该函数的反汇编数据
    loadFunctionDisassembly(func.address)
    // 滚动到函数入口
    revealAddress(func.address)
  }
})

// 在ControlFlowGraph.vue中
watchEffect(() => {
  const func = workbenchStore.selectedFunction
  if (func && cy) {
    // 居中到函数入口节点
    const nodeId = `bb_${func.address}`
    const node = cy.$(`#${nodeId}`)
    if (node.length > 0) {
      cy.animate({ fit: { eles: node, padding: 60 }, duration: 300 })
      node.select()
    }
  }
})

这种基于响应式状态的联动设计比命令式的事件总线更加可靠和可维护。每个视图组件只需要声明”当selectedFunction变化时我应该做什么”，而不需要关心其他视图组件的存在。当新的视图组件被添加时，它只需要接入相同的store状态即可自动获得联动能力。

13.6.3 响应式适配：不同屏幕尺寸下的布局调整

在较小屏幕上（如笔记本的1366×768分辨率），需要自动隐藏右侧AI Agent面板和底部十六进制视图，通过工具栏按钮手动切换显示。在超大屏幕（如4K显示器）上，则可以采用三列布局：左侧函数树、中央主视图、右侧同时显示AI面板和详细信息面板。

响应式适配不仅仅是CSS媒体查询的问题，还涉及到JavaScript层面的布局状态管理。当用户从大屏切换到小屏时，被隐藏的Panel不应该丢失其状态（如AI Agent的对话历史、十六进制视图的滚动位置）。实现这一点的最佳方式是将Panel的显示/隐藏与组件的挂载/卸载解耦——使用v-show代替v-if来控制Panel的可见性，这样组件实例始终存在，只是不参与布局。

// 响应式布局状态管理
import { useBreakpoints } from '@vueuse/core'

export function useResponsiveLayout() {
  const breakpoints = useBreakpoints({
    mobile: 0,
    tablet: 768,
    laptop: 1280,
    desktop: 1920
  })

  const isMobile = breakpoints.smaller('tablet')
  const isLaptop = breakpoints.between('laptop', 'desktop')
  const isDesktop = breakpoints.greater('desktop')

  // 根据屏幕尺寸自动调整面板可见性
  const sidebarVisible = ref(true)
  const rightPanelVisible = ref(true)
  const bottomPanelVisible = ref(true)

  watch(isLaptop, (val) => {
    if (val) rightPanelVisible.value = false
  })

  watch(isMobile, (val) => {
    if (val) {
      sidebarVisible.value = false
      bottomPanelVisible.value = false
      rightPanelVisible.value = false
    }
  })

  watch(isDesktop, (val) => {
    if (val) {
      sidebarVisible.value = true
      rightPanelVisible.value = true
      bottomPanelVisible.value = true
    }
  })

  return {
    isMobile, isLaptop, isDesktop,
    sidebarVisible, rightPanelVisible, bottomPanelVisible
  }
}

这里使用了VueUse库的useBreakpoints工具来响应式地检测屏幕尺寸变化69^。这种方法比手动监听window.resize事件更加简洁和可靠，因为它内部使用了matchMedia API，性能更好且能处理DPI缩放等边界情况。布局状态存储在独立的composable中，各个面板组件通过v-show绑定对应的可见性状态，从而在屏幕尺寸变化时自动调整布局而无需重新加载数据或丢失用户操作状态。

/* layouts/responsive.css */

/* 大屏：完整布局 */
@media (min-width: 1920px) {
  .workbench-layout {
    --sidebar-width: 300px;
    --right-panel-width: 400px;
    --bottom-height: 250px;
  }
}

/* 中屏：标准布局 */
@media (min-width: 1280px) and (max-width: 1919px) {
  .workbench-layout {
    --sidebar-width: 260px;
    --right-panel-width: 350px;
    --bottom-height: 200px;
  }
}

/* 小屏：精简布局（隐藏右侧面板） */
@media (max-width: 1279px) {
  .workbench-layout {
    --sidebar-width: 240px;
    --right-panel-width: 0px;
    --bottom-height: 180px;
  }
  .right-panel {
    display: none;
  }
}

/* 超小屏（平板/手机）：仅保留主视图 */
@media (max-width: 768px) {
  .workbench-layout {
    --sidebar-width: 0px;
    --bottom-height: 0px;
  }
  .sidebar, .bottom-panel {
    display: none;
  }
}

至此，你已经完成了所有核心分析视图组件的实现。从反汇编视图的Monaco Editor语法高亮和四列对齐，到控制流图的Cytoscape.js渲染和DAG布局，再到十六进制视图的自定义虚拟滚动，以及AI Agent交互面板的对话式界面和漏洞报告展示——每一个组件都经过精心设计，既保证了功能的完整性，又注重视觉体验的一致性（统一的IDA Pro深色主题配色）。这些组件通过Pinia store的状态管理实现了紧密的视图联动，构成了一个专业级的逆向工程分析工作台。

回顾本章的核心收获：你掌握了Monaco Editor的自定义语言Tokenizer和主题系统，学会了使用Cytoscape.js构建交互式控制流图，实现了高性能的虚拟滚动十六进制视图，设计了大语言模型的对话式交互界面，以及将多个专业视图组件集成为统一工作台的关键技巧。这些能力不仅适用于逆向工程工具的开发，也可以迁移到任何需要复杂数据可视化和专业领域UI的Web应用中。组件化的架构设计让每个视图可以独立开发、测试和复用，而Pinia store提供的集中式状态管理则确保了视图间联动的可靠性和可预测性。你已经拥有了一个功能完备、交互流畅、视觉专业的二进制分析前端系统。

在下一章中，你将学习如何将这些前端组件与后端分析服务集成起来，通过RESTful API和WebSocket实现前后端的数据流和实时通信。你将掌握Axios请求封装、WebSocket长连接管理、二进制数据的流式传输，以及前后端协同的进度推送机制——让这个分析工作台真正”活”起来，具备处理真实二进制文件分析任务的完整能力。

免责声明：

本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。

任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。

本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。

本文转载自：SPEEDCoding 李北辰 李北辰《13. 分析界面与可视化组件》