feat:跟新密码加密 共享白板功能

src/views/custom/tabulaRase/index.vue

@@ -26,8 +26,7 @@
 import { ref, nextTick, onUnmounted, onMounted } from "vue";
 import { ElLoading, ElMessage } from "element-plus";
 import { v4 as uuidv4 } from "uuid";
-import { useRoute } from "vue-router";
-
+import { useRoute } from "vue-router"; 
 import { mqttClient } from "@/utils/mqtt";
 import { WhiteboardSync } from "@/utils/whiteboardSync";
 import ToolBox from "@/components/ToolBox/index.vue";
@@ -35,6 +34,17 @@ import Login from "@/components/Login/index.vue";
 import Canvas from "@/core/index.js";
 import { getInfo } from "@/api/login";
 
+const props = defineProps({
+    roomId: {
+        type: String,
+        default: '',
+    },
+    userId: {
+        type: String,
+        default: '',
+    },
+})
+
 const showLogin = ref(false); // 是否显示登录页面
 const hasJoined = ref(false); // 是否加入白板
 const canvas = ref(null);
@@ -80,47 +90,21 @@ function initWhiteboard() {
         console.error("⚠️ 找不到 canvas 元素");
         return;
     }
-
-    // 设置画布宽高（保持16:9）
-    const { width, height } = getCanvasSize(el.parentElement);
-    Object.assign(el, { width, height });
-    Object.assign(el.style, {
-        width: `${width}px`,
-        height: `${height}px`,
-        border: "2px solid #000",
-    });
-
     // 初始化画布
     canvas.value = new Canvas("whiteboard");
 
     // 获取房间号
-    const roomUid = route.query.room_uid || "default-room"; 
-
+    const roomUid = route.query.room_uid || props.roomId || "default-room";  
     // 初始化多人同步
     WhiteboardSync.init(canvas.value, roomUid);
 }
 
-/** 计算画布大小，保持16:9 */
-function getCanvasSize(container) {
-    const containerWidth = container.offsetWidth;
-    const containerHeight = container.offsetHeight;
 
-    let width = containerWidth;
-    let height = Math.floor((width * 9) / 16);
 
-    if (height > containerHeight) {
-        height = containerHeight;
-        width = Math.floor((height * 16) / 9);
-    }
-
-    return { width, height };
-}
-
-onMounted(async () => {
+onMounted(async () => { 
     try {
         showLogin.value = false;
-        const res = await getInfo("self");
-        console.log(res, "用户信息校验")
+        const res = await getInfo("self"); 
         if (res.meta.code === 401) {
             showLogin.value = true;
         } else {
@@ -143,8 +127,8 @@ onUnmounted(() => {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     background: #fff;
     position: relative;
 }
@@ -159,14 +143,12 @@ onUnmounted(() => {
 /* 白板容器 */
 .whiteboard-wrapper {
     position: relative;
-    width: 90vw;
-    max-width: 1280px;
-    aspect-ratio: 16 / 9;
+    width: 72vw;  
     box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
-    overflow: hidden;
+    overflow: hidden; 
 }
 
 /* 画布占满白板容器 */