From bd64e889fd850fc4326770c56ad1bc41bce06b27 Mon Sep 17 00:00:00 2001
From: lvfengfree <cooper_bt@163.com>
Date: Wed, 21 Jan 2026 16:36:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=BF=9C=E7=A8=8B?=
 =?UTF-8?q?=E6=A1=8C=E9=9D=A2=E9=94=AE=E7=9B=98=E8=BE=93=E5=85=A5=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=20-=20=E6=B7=BB=E5=8A=A0iframe=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E8=81=9A=E7=84=A6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../amt/modules/remote-desktop-modal.vue      | 38 +++++++++++--
 adminSystem/src/views/remote/index.vue        | 53 ++++++++++++++++++-
 2 files changed, 85 insertions(+), 6 deletions(-)

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 @@
     </div>
 
     <!-- 远程桌面 iframe -->
-    <div v-else class="remote-desktop-container">
-      <iframe ref="rdpFrame" :src="connectionUrl" class="rdp-iframe" allowfullscreen />
+    <div v-else class="remote-desktop-container" @click="focusIframe">
+      <div class="focus-hint" v-if="showFocusHint">
+        <span>点击此处激活键盘输入</span>
+      </div>
+      <iframe 
+        ref="rdpFrame" 
+        :src="connectionUrl" 
+        class="rdp-iframe" 
+        allowfullscreen
+        @load="onIframeLoad"
+        @mouseenter="focusIframe"
+        tabindex="0"
+      />
     </div>
   </ElDialog>
 </template>
@@ -131,6 +142,22 @@ const tokenForm = ref({ expiresInMinutes: 30, maxUseCount: 1, note: '' })
 const generatedToken = ref<any>(null)
 const deviceTokens = ref<any[]>([])
 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; }
 </style>
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 @@
     </div>
 
     <!-- 远程桌面 iframe -->
-    <div v-else class="remote-desktop-container">
+    <div v-else class="remote-desktop-container" @click="focusIframe">
       <div class="toolbar">
         <span>远程桌面 - {{ tokenInfo?.deviceIp }}</span>
         <div class="toolbar-actions">
@@ -49,7 +49,18 @@
           </el-button>
         </div>
       </div>
-      <iframe ref="rdpFrame" :src="connectionUrl" class="rdp-iframe" allowfullscreen />
+      <div class="focus-hint" v-if="showFocusHint">
+        <span>点击此处激活键盘输入</span>
+      </div>
+      <iframe 
+        ref="rdpFrame" 
+        :src="connectionUrl" 
+        class="rdp-iframe" 
+        allowfullscreen
+        @load="onIframeLoad"
+        @mouseenter="focusIframe"
+        tabindex="0"
+      />
     </div>
   </div>
 </template>
@@ -73,6 +84,22 @@ const connectionUrl = ref('')
 const connecting = ref(false)
 const isFullscreen = ref(false)
 const rdpFrame = ref<HTMLIFrameElement | null>(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; }
 }
 </style>