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) {
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)
setTimeout(() => updateCursorPosition(newPos), 0)
}
e.preventDefault()
return
}
if (e.keyCode === 46) {
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,
})
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. 性能优化
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) => {
}
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) {
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
}
}