fix: 优化锁定按钮样式和位置

- 按钮改为矩形，显示"锁定"/"解锁"文字
- 锁定状态用橙色背景区分
- 按钮位置紧贴节点右侧（偏移8px），避免触发mouseleave

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

script/visualization/src/components/GraphView.vue

@@ -424,33 +424,40 @@ function createLockButton() {
       }
     })
 
-  // 按钮背景
-  lockButtonG.append('circle')
-    .attr('r', 10)
+  // 按钮背景（较大的点击区域）
+  lockButtonG.append('rect')
+    .attr('x', -20)
+    .attr('y', -10)
+    .attr('width', 40)
+    .attr('height', 20)
+    .attr('rx', 4)
     .attr('fill', '#2d3748')
     .attr('stroke', '#4a5568')
     .attr('stroke-width', 1)
 
-  // 锁定图标
+  // 锁定状态文字
   lockButtonG.append('text')
     .attr('class', 'lock-icon')
     .attr('text-anchor', 'middle')
     .attr('dy', '0.35em')
     .attr('font-size', '10px')
     .attr('fill', '#fff')
-    .text('📌')
+    .text('锁定')
 }
 
 // 更新锁定按钮图标
 function updateLockButtonIcon(isLocked) {
   if (!lockButtonG) return
-  lockButtonG.select('.lock-icon').text(isLocked ? '🔓' : '📌')
+  const text = lockButtonG.select('.lock-icon')
+  text.text(isLocked ? '解锁' : '锁定')
+  // 锁定状态用不同颜色
+  lockButtonG.select('rect').attr('fill', isLocked ? '#744210' : '#2d3748')
 }
 
 // 当前起始节点ID（用于锁定按钮）
 let currentStartNodeId = null
 
-// 显示锁定按钮
+// 显示锁定按钮（紧贴节点右侧）
 function showLockButton(x, y, startNodeId) {
   if (!lockButtonG) return
   currentStartNodeId = startNodeId
@@ -463,8 +470,9 @@ function showLockButton(x, y, startNodeId) {
   // 更新图标状态
   updateLockButtonIcon(!!store.lockedHoverNodeId)
 
+  // 按钮紧贴节点右侧（只偏移8px）
   lockButtonG
-    .attr('transform', `translate(${x + 15}, ${y - 15})`)
+    .attr('transform', `translate(${x + 8}, ${y})`)
     .style('display', 'block')
 }
 

script/visualization/src/components/PostTreeView.vue

@@ -974,30 +974,37 @@ function createLockButton() {
       }
     })
 
-  // 按钮背景
-  lockButtonG.append('circle')
-    .attr('r', 10)
+  // 按钮背景（较大的点击区域）
+  lockButtonG.append('rect')
+    .attr('x', -20)
+    .attr('y', -10)
+    .attr('width', 40)
+    .attr('height', 20)
+    .attr('rx', 4)
     .attr('fill', '#2d3748')
     .attr('stroke', '#4a5568')
     .attr('stroke-width', 1)
 
-  // 锁定图标
+  // 锁定状态文字
   lockButtonG.append('text')
     .attr('class', 'lock-icon')
     .attr('text-anchor', 'middle')
     .attr('dy', '0.35em')
     .attr('font-size', '10px')
     .attr('fill', '#fff')
-    .text('📌')
+    .text('锁定')
 }
 
 // 更新锁定按钮图标
 function updateLockButtonIcon(isLocked) {
   if (!lockButtonG) return
-  lockButtonG.select('.lock-icon').text(isLocked ? '🔓' : '📌')
+  const text = lockButtonG.select('.lock-icon')
+  text.text(isLocked ? '解锁' : '锁定')
+  // 锁定状态用不同颜色
+  lockButtonG.select('rect').attr('fill', isLocked ? '#744210' : '#2d3748')
 }
 
-// 显示锁定按钮
+// 显示锁定按钮（紧贴节点右上方）
 function showLockButton(x, y) {
   if (!lockButtonG) return
 
@@ -1010,8 +1017,9 @@ function showLockButton(x, y) {
   // 更新图标状态
   updateLockButtonIcon(!!store.lockedHoverNodeId)
 
+  // 按钮紧贴节点右侧（只偏移8px，确保鼠标能顺利移到按钮）
   lockButtonG
-    .attr('transform', `translate(${x + 15}, ${y - 15})`)
+    .attr('transform', `translate(${x + 8}, ${y})`)
     .style('display', 'block')
 }