diff --git a/adminSystem/src/views/amt/modules/remote-desktop-modal.vue b/adminSystem/src/views/amt/modules/remote-desktop-modal.vue
index d66374b..db0d982 100644
--- a/adminSystem/src/views/amt/modules/remote-desktop-modal.vue
+++ b/adminSystem/src/views/amt/modules/remote-desktop-modal.vue
@@ -95,8 +95,19 @@
-
-
+
@@ -131,6 +142,22 @@ const tokenForm = ref({ expiresInMinutes: 30, maxUseCount: 1, note: '' })
const generatedToken = ref
(null)
const deviceTokens = ref([])
const loadingTokens = ref(false)
+const showFocusHint = ref(true)
+
+// 聚焦 iframe 以接收键盘输入
+const focusIframe = () => {
+ if (rdpFrame.value) {
+ rdpFrame.value.focus()
+ showFocusHint.value = false
+ }
+}
+
+// iframe 加载完成后自动聚焦
+const onIframeLoad = () => {
+ setTimeout(() => {
+ focusIframe()
+ }, 500)
+}
const loadDeviceTokens = async () => {
if (!props.device?.id) return
@@ -227,6 +254,7 @@ watch(() => props.modelValue, (newVal) => {
connectionUrl.value = ''
generatedToken.value = null
activeTab.value = 'quick'
+ showFocusHint.value = true
loadDeviceTokens()
}
})
@@ -241,8 +269,10 @@ watch(() => props.modelValue, (newVal) => {
.generated-link { margin-top: 20px; }
.link-box { margin-top: 10px; }
.tokens-list { padding: 10px; }
-.remote-desktop-container { width: 100%; height: calc(85vh - 100px); min-height: 600px; display: flex; justify-content: center; align-items: center; background: #1a1a1a; }
-.rdp-iframe { width: 100%; height: 100%; border: none; background: transparent; }
+.remote-desktop-container { width: 100%; height: calc(85vh - 100px); min-height: 600px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #1a1a1a; position: relative; }
+.focus-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); color: #fff; padding: 8px 16px; border-radius: 4px; font-size: 14px; z-index: 10; animation: fadeOut 3s forwards; }
+@keyframes fadeOut { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; pointer-events: none; } }
+.rdp-iframe { width: 100%; height: 100%; border: none; background: transparent; outline: none; }
:deep(.el-dialog__body) { padding: 0; overflow: hidden; }
:deep(.el-dialog__header) { padding: 15px 20px; margin: 0; border-bottom: 1px solid #e4e7ed; }
diff --git a/adminSystem/src/views/remote/index.vue b/adminSystem/src/views/remote/index.vue
index 9582d61..bc8e8c2 100644
--- a/adminSystem/src/views/remote/index.vue
+++ b/adminSystem/src/views/remote/index.vue
@@ -39,7 +39,7 @@
-
@@ -73,6 +84,22 @@ const connectionUrl = ref('')
const connecting = ref(false)
const isFullscreen = ref(false)
const rdpFrame = ref(null)
+const showFocusHint = ref(true)
+
+// 聚焦 iframe 以接收键盘输入
+const focusIframe = () => {
+ if (rdpFrame.value) {
+ rdpFrame.value.focus()
+ showFocusHint.value = false
+ }
+}
+
+// iframe 加载完成后自动聚焦
+const onIframeLoad = () => {
+ setTimeout(() => {
+ focusIframe()
+ }, 500)
+}
onMounted(async () => {
const token = route.params.token as string
@@ -183,6 +210,7 @@ const formatDate = (dateStr: string) => {
display: flex;
flex-direction: column;
background: #1a1a1a;
+ position: relative;
}
.toolbar {
@@ -204,5 +232,26 @@ const formatDate = (dateStr: string) => {
width: 100%;
border: none;
background: transparent;
+ outline: none;
+}
+
+.focus-hint {
+ position: absolute;
+ top: 60px;
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(0, 0, 0, 0.7);
+ color: #fff;
+ padding: 8px 16px;
+ border-radius: 4px;
+ font-size: 14px;
+ z-index: 10;
+ animation: fadeOut 3s forwards;
+}
+
+@keyframes fadeOut {
+ 0% { opacity: 1; }
+ 70% { opacity: 1; }
+ 100% { opacity: 0; pointer-events: none; }
}