teadhgd

64 阅读3分钟

1、鼠标左移右移


// ... 现有代码 ...

// 修复光标位置更新函数
const updateCursorPosition = (position: number) => {
  const commandDom = commandRef.value
  if (!commandDom) return
  
  // 确保位置在有效范围内
  position = Math.max(0, Math.min(position, commandDom.textContent?.length || 0))
  
  // 创建文本节点如果不存在
  if (!commandDom.firstChild) {
    commandDom.appendChild(document.createTextNode(''))
  }
  
  const selection = window.getSelection()
  if (!selection) return
  
  const range = document.createRange()
  range.setStart(commandDom.firstChild, position)
  range.setEnd(commandDom.firstChild, position)
  
  selection.removeAllRanges()
  selection.addRange(range)
}

// 修复处理密码输入的键盘事件
const onKeyDown = (e) => {
  if (isPasswordInput.value) {
    // 获取当前光标位置
    const selection = window.getSelection()
    let currentPos = 0
    
    if (selection && selection.rangeCount > 0) {
      const range = selection.getRangeAt(0)
      currentPos = range.startOffset
    }

    // 处理回车键:发送密码
    if (e.keyCode === 13) {
      sendCommand(KeyType.enter)
      realPassword.value = "" // 清空密码
      commandRef.value.innerText = "" // 清空显示
      e.preventDefault()
      return
    }

    // 处理左右键移动光标
    if (e.keyCode === 37) { // 左键
      if (currentPos > 0) {
        // 只向左移动一位
        updateCursorPosition(currentPos - 1)
      }
      e.preventDefault()
      return
    }

    if (e.keyCode === 39) { // 右键
      if (currentPos < realPassword.value.length) {
        // 只向右移动一位
        updateCursorPosition(currentPos + 1)
      }
      e.preventDefault()
      return
    }

    // 处理删除键
    if (e.keyCode === 8) { // Backspace
      if (currentPos > 0 && realPassword.value.length > 0) {
        // 删除光标前一个字符
        realPassword.value = realPassword.value.substring(0, currentPos - 1) + 
                              realPassword.value.substring(currentPos)
        const newPos = currentPos - 1
        
        // 更新显示的星号
        commandRef.value.innerText = "*".repeat(realPassword.value.length)
        
        // 在DOM更新后设置光标位置
        setTimeout(() => updateCursorPosition(newPos), 0)
      }
      e.preventDefault()
      return
    }

    if (e.keyCode === 46) { // Delete
      if (currentPos < realPassword.value.length) {
        // 删除光标后一个字符
        realPassword.value = realPassword.value.substring(0, currentPos) + 
                              realPassword.value.substring(currentPos + 1)
        
        // 更新显示的星号
        commandRef.value.innerText = "*".repeat(realPassword.value.length)
        
        // 保持光标在相同位置
        setTimeout(() => updateCursorPosition(currentPos), 0)
      }
      e.preventDefault()
      return
    }

    // 其他键处理保持不变...
    // ... 现有代码 ...
  }
  
  // 非密码输入模式的处理...
  // ... 现有代码 ...
}

// 修复粘贴事件
const onPaste = (e) => {
  if (isPasswordInput.value) {
    const text = e.clipboardData && e.clipboardData.getData("Text")
    if (text) {
      // 获取当前光标位置
      const selection = window.getSelection()
      let currentPos = 0
      
      if (selection && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0)
        currentPos = range.startOffset
      }
      
      // 在光标位置插入粘贴的文本
      realPassword.value = realPassword.value.substring(0, currentPos) + 
                            text + 
                            realPassword.value.substring(currentPos)
      
      // 更新显示
      commandRef.value.innerText = "*".repeat(realPassword.value.length)
      
      // 更新光标位置到插入文本后
      setTimeout(() => updateCursorPosition(currentPos + text.length), 0)
    }
    e.preventDefault()
    return
  }
  
  // 其他处理逻辑
  // ... 现有代码 ...
}

2、错误处理优化

// ... 现有代码 ...

// 优化建议:增强错误处理
const sendCommand = async (keyType: KeyType | "any", keyCode?: number) => {
  try {
    const socket = $.su.serviceManager
      .get("webSocket")
      .getWebSocket("sdnSocket")
    
    if (!socket) {
      throw new Error("WebSocket连接不可用")
    }
    
    // 现有逻辑
    // ... 现有代码 ...
    
    socket.send({
      url: `/user/queue/ws/${App.CONTROLLER_ID}/sites/${siteId}/status`,
      data,
    })
    
    // 更新UI状态
    inputStatusRecord.value = InputStatus.waitingReturn
  } catch (error) {
    console.error("发送命令失败:", error)
    // 显示错误提示
    dataRecord.value.push({
      orderId: Date.now(),
      type: "frontendMsg",
      msg: `发送命令失败: ${error.message}\n`,
    })
    // 恢复输入状态
    inputStatusRecord.value = InputStatus.normal
  }
}

3. 性能优化

// ... 现有代码 ...

// 优化建议:减少不必要的计算和DOM操作
const displayText = computed(() => {
  // 使用记忆化或延迟计算减少不必要的处理
  if (!searchKey.value) {
    // 如果没有搜索关键字,直接返回全部内容
    return dataRecord.value.reduce((all, item) => all + item.msg, "")
  }
  
  const searchKeyLower = searchKey.value.toLocaleLowerCase()
  return dataRecord.value
    .reduce((all, item) => all + item.msg, "")
    .split("\n")
    .filter(item => item.toLocaleLowerCase().includes(searchKeyLower))
    .join("\n")
})

4. 密码处理优化

// ... 现有代码 ...

// 优化建议:将密码处理逻辑抽离为单独函数
const handlePasswordInput = (e: KeyboardEvent) => {
  // 处理回车键
  if (e.keyCode === 13) {
    sendCommand(KeyType.enter)
    realPassword.value = ""
    commandRef.value.innerText = ""
    e.preventDefault()
    return true
  }
  
  // 获取当前光标位置
  const selection = window.getSelection()
  let currentPos = 0
  if (selection && selection.focusNode === commandRef.value) {
    currentPos = selection.getRangeAt(0).startOffset
  }
  
  // 处理特殊键(退格、删除、方向键等)
  if ([8, 46, 37, 39, 38, 40].includes(e.keyCode)) {
    // 处理退格键、删除键等逻辑保持不变
    // ... 现有代码 ...
    e.preventDefault()
    return true
  }
  
  // 处理普通字符输入
  if (isCharacterKeyPress(e)) {
    const char = getCharFromKeyEvent(e)
    realPassword.value = realPassword.value.substring(0, currentPos) + char + realPassword.value.substring(currentPos)
    commandRef.value.innerText = "*".repeat(realPassword.value.length)
    updateCursorPosition(currentPos + 1)
    e.preventDefault()
    return true
  }
  
  e.preventDefault()
  return true
}

// 辅助函数:检查是否是字符键
const isCharacterKeyPress = (e: KeyboardEvent) => {
  return (e.keyCode >= 48 && e.keyCode <= 90) || 
         (e.keyCode >= 186 && e.keyCode <= 222)
}

// 辅助函数:根据键盘事件获取字符
const getCharFromKeyEvent = (e: KeyboardEvent) => {
  // 现有字符处理逻辑保持不变
  // ... 现有代码 ...
}

// 在onKeyDown中使用简化后的处理
const onKeyDown = (e) => {
  if (isPasswordInput.value) {
    return handlePasswordInput(e)
  }
  
  // 其他现有处理逻辑
  // ... 现有代码 ...
}

5、安全性增强

// ... 现有代码 ...

// 优化建议:增强密码安全性
const onPaste = (e) => {
  if (isPasswordInput.value) {
    const text = e.clipboardData && e.clipboardData.getData("Text")
    if (text) {
      // 阻止可能的XSS攻击
      const sanitizedText = text.replace(/<[^>]*>/g, '')
      realPassword.value += sanitizedText
      commandRef.value.innerText = "*".repeat(realPassword.value.length)
      setFocus()
    }
    e.preventDefault()
    return
  }
  
  // 其他处理逻辑
  // ... 现有代码 ...
}

// 发送密码时不记录到历史
const sendCommand = async (keyType: KeyType | "any", keyCode?: number) => {
  // ... 现有代码 ...
  
  if (isPasswordInput.value) {
    // 不将密码添加到命令历史
  } else if (cmdText.length && /\S+/.test(cmdText)) {
    cmdHistory.value.cmds.push(cmdText)
    cmdHistory.value.currentIndex = cmdHistory.value.cmds.length
  }
  
  // ... 其余代码 ...
}