feat：对接游戏

src/router/index.js

@@ -6,6 +6,7 @@ import BambooList from '../views/BambooList.vue'
 import PoemList from '../views/PoemList.vue'
 import PaintingList from '../views/PaintingList.vue'
 import PaintingDetail from '../views/PaintingDetail'
+import GameView from '../views/GameView.vue'
 import BambooBookView from '../views/BambooBookView.vue'
 
 // import store from '@/store/index.js'
@@ -52,6 +53,12 @@ const routes = [
     component: PaintingDetail,
     // component: TEXT,
   },
+  // 游戏
+  {
+    path: '/game',
+    name: 'Game',
+    component: GameView,
+  },
   // 竹谱
   {
     path: '/bambooBook',

src/views/GameView.vue

@@ -0,0 +1,225 @@
+<script setup>
+// todo：这里的逻辑大多是从移动端代码搬运来的，其实用不到。只要保留关闭的接口给unity就行了！
+
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import useSizeAdapt from "@/useFunctions/useSizeAdapt.js"
+const isShowToastFromGame = ref(false)
+const input1 = ref("")
+const input2 = ref("")
+const input1Ref = ref(null)
+const input2Ref = ref(null)
+
+const router = useRouter()
+
+
+const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
+
+
+const handleInput1 = () => {
+  console.log("第一个框得内容", input1.value)
+  if (input1.value.length >= 7) {
+    input1.value = input1.value.slice(0, 7) // 限制输入长度
+    // input2Ref.value.focus() // 聚焦到第二个输入框
+  }
+}
+
+const checkInput1 = (event) => {
+  if (event.key === "Backspace" && input1.value.length === 0) {
+    input2.value = "" // 清空第二个输入框
+    input1Ref.value.focus() // 聚焦回到第一个输入框
+  }
+}
+
+const handleInput2 = () => {
+  // 这里可以添加类似的逻辑，但通常不需要，因为我们假设第二个输入框不会自动跳转回去
+  if (input2.value.length >= 7) {
+    input2.value = input2.value.slice(0, 7)
+  }
+}
+
+const checkInput2 = (event) => {
+  if (event.key === "Backspace" && input2.value.length === 0) {
+    input1Ref.value.focus() // 如果需要从第二个输入框清空后聚焦回第一个输入框
+  }
+}
+const saveTitle = () => {
+  var iframe = document.getElementById("gameIframe")
+  var iframeWindow = iframe.contentWindow || window.frames["yourIframeId"]
+  if (iframeWindow) {
+    iframeWindow.saveTitle(
+      input1.value + "\n" + '线上创作'
+    )
+    isShowToastFromGame.value = false
+  }
+}
+
+onMounted(() => {
+  window.isShowToastFromGame = () => {
+    isShowToastFromGame.value = true
+    input1.value = ""
+    input2.value = ""
+  }
+
+  window.closeGame = () => {
+    router.replace('/more-content?anchorIdx=2')
+  }
+})
+</script>
+
+<template>
+  <div class="game-box">
+    <iframe
+      id="gameIframe"
+      :src="`./game/index.html`"
+    />
+
+    <!-- edit弹框 -->
+    <div
+      v-show="isShowToastFromGame"
+      class="edit-box"
+    >
+      <div class="input-box">
+        <input
+          ref="input1Ref"
+          v-model="input1"
+          @input="handleInput1"
+          @keyup="checkInput1"
+        >
+        <!-- <input
+          ref="input2Ref"
+          v-model="input2"
+          :readonly="input1.length < 7"
+          @input="handleInput2"
+          @keyup="checkInput2"
+        > -->
+        <div class="tips">
+          请输入内容
+        </div>
+      </div>
+      <div
+        class="cencel-btn"
+        @click="isShowToastFromGame = false"
+      >
+        取消
+      </div>
+      <div
+        class="yes-btn"
+        @click="saveTitle"
+      >
+        保存
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang='less' scoped>
+  .game-box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    > iframe {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .edit-box {
+      width: 125%;
+      height: 35vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: url(@/assets/images/game-tip.png);
+      background-size: 100% 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 2;
+      font-family: "KaiTi";
+
+      > .input-box {
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10%;
+        margin-right: 5%;
+
+        > input {
+          width: 100%;
+          height: 45px;
+          background: none;
+          border: none;
+          font-size: 20px;
+          white-space: pre-wrap;
+          color: white;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.548);
+          font-family: "KaiTi";
+          letter-spacing: 2px;
+        }
+
+        .tips {
+          font-family: "KaiTi";
+          font-size: 14px;
+          margin-top: calc(
+            5 / v-bind("windowSizeWhenDesignForRef") *
+              v-bind("windowSizeInCssForRef")
+          );
+          color: rgba(255, 255, 255, 0.418);
+        }
+      }
+
+      > textarea {
+        width: 34%;
+        height: 40%;
+        background: none;
+        border: none;
+        font-size: 20px;
+        white-space: pre-wrap;
+      }
+
+      > .cencel-btn {
+        // width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        // height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: url(@/assets/images/game-tip-cancel.png);
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
+        position: absolute;
+        left: 30%;
+        bottom: calc(
+          60 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        padding: 5px 10px;
+        font-family: "KaiTi";
+      }
+
+      > .yes-btn {
+        // width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        // height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        background: url(@/assets/images/game-tip-yes.png);
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #f4e09d;
+        position: absolute;
+        right: 38%;
+        bottom: calc(
+          60 / v-bind("windowSizeWhenDesignForRef") *
+            v-bind("windowSizeInCssForRef")
+        );
+        padding: 5px 10px;
+        font-family: "KaiTi";
+      }
+    }
+  }
+</style>

src/views/MoreContent.vue

@@ -160,7 +160,9 @@
           >
             <div
               class="poem animation-show-long-hide"
-              @click="router.replace('/game')"
+              @click="router.push({
+                name: 'Game',
+              })"
             >
               开始体验
             </div>