fix:FullScreenRunner gameCanvas no center and dispatch no effection (#2185)

* fix:FullScreenRunner gameCanvas no center and dispatch no effection

* fix:project blank and projectRunner getgetScreenshot

* fix:format

* delete: irrelevant

Author: hwcctn

spx-gui/.env.staging

@@ -2,7 +2,7 @@
 
 VITE_API_BASE_URL="https://goplus-builder.qiniu.io/api"
 VITE_VERCEL_PROXIED_API_BASE_URL="https://goplus-builder.qiniu.io/api"
-
+# VITE_API_BASE_URL="http://localhost:8080"
 VITE_USERCONTENT_BASE_URL="https://builder-usercontent-test.gopluscdn.com"
 VITE_USERCONTENT_UPLOAD_BASE_URL="https://upload-na0.qiniup.com"
 

spx-gui/src/components/project/runner/FullScreenProjectRunner.vue

@@ -104,7 +104,7 @@ async function handleOnKeyEvent(type: KeyboardEventType, key: KeyCode) {
       </div>
       <div class="main">
         <MobileKeyboardView
-          v-if="isMobile && project.mobileKeyboardType === 2"
+          v-if="isMobile"
           :zone-to-key-mapping="project.mobileKeyboardZoneToKey || {}"
           @key="handleOnKeyEvent"
           @rerun="handleRerun.fn"

spx-gui/src/components/project/runner/v2/ProjectRunnerV2.vue

@@ -200,12 +200,18 @@ defineExpose({
     return await win.stopRecording?.()
   },
   dispatchKeyboardEvent(type: KeyboardEventType, key: KeyCode) {
-    const iframe = iframeRef.value
-    if (iframe == null || iframe == undefined) return
-    const win = iframe.contentWindow as IframeWindow | null
+    const win = iframeRef.value?.contentWindow as IframeWindow | null
     if (win == null) return
+    const doc = win.document
+    const canvas = doc.querySelector('#game-canvas') as HTMLCanvasElement | null
     const keyboardEvent = new KeyboardEvent(type, { key, bubbles: true })
-    return win.dispatchEvent?.(keyboardEvent)
+    if (canvas) {
+      canvas.focus()
+      return canvas.dispatchEvent(keyboardEvent)
+    } else {
+      win.focus()
+      return doc.dispatchEvent(keyboardEvent)
+    }
   },
   async run(signal?: AbortSignal) {
     loading.value = true
@@ -353,12 +359,20 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+@import '@/components/ui/responsive.scss';
+
 .iframe-container {
   position: relative;
   aspect-ratio: 4 / 3;
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @include responsive(mobile) {
+    aspect-ratio: 16 / 9;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .iframe {

spx-gui/src/pages/community/project.vue

@@ -884,6 +884,10 @@ watchEffect((onCleanup) => {
 .left {
   flex: 1 1 744px;
 
+  @include responsive(mobile) {
+    flex: 1 1 0;
+  }
+
   .project-wrapper {
     position: relative;
     width: 100%;