From 1b6497147ae8f90943853fc390a65ec4ecb8f7a7 Mon Sep 17 00:00:00 2001
From: skmcj <2604597248@qq.com>
Date: Mon, 28 Apr 2025 16:37:20 +0800
Subject: [PATCH] =?UTF-8?q?<fix>=E4=BF=AE=E5=A4=8D=E6=9F=90=E4=BA=9B?=
 =?UTF-8?q?=E6=83=85=E5=86=B5=E4=B8=8B=E8=BE=93=E5=85=A5=E6=A1=86=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E8=BE=93=E5=85=A5=E7=9A=84BUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ConnectInput.vue | 17 +++++++++++++----
 src/views/IndexView.vue         | 34 +++++++++++++++++++++------------
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/components/ConnectInput.vue b/src/components/ConnectInput.vue
index 9fea69c..f955872 100644
--- a/src/components/ConnectInput.vue
+++ b/src/components/ConnectInput.vue
@@ -55,7 +55,7 @@ const inputDisabled = ref<boolean>(false);
 /** 按钮状态 */
 const btnDisabled = ref<boolean>(false);
 /** 连接状态 */
-const connectStatus = defineModel<boolean>('status');
+const connectStatus = ref<boolean>(false);
 /** 验证提示 */
 const testTip = ref<string | undefined>(void 0);
 /** event */
@@ -111,20 +111,25 @@ const handleChange = (e: Event) => {
   emits('change', e);
 };
 
-/** 监听连接状态 */
-watch(connectStatus, flag => {
+/**
+ * 设置连接状态
+ * @param flag
+ */
+const setStatus = function (flag?: boolean) {
   if (flag) {
     // 连接成功
     // 锁定输入框，防止再次输入
     inputDisabled.value = true;
+    connectStatus.value = true;
   } else {
     // 连接失败
     // 解锁输入框
     inputDisabled.value = false;
+    connectStatus.value = false;
   }
   // 还原按钮状态
   btnDisabled.value = false;
-});
+};
 
 /** 初始化数据 */
 const initData = function () {
@@ -134,6 +139,10 @@ const initData = function () {
 onMounted(() => {
   initData();
 });
+
+defineExpose({
+  setStatus
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 2947f0d..b70fbde 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -22,20 +22,20 @@
     <div class="view-right">
       <div class="view-input">
         <ConnectInput
+          ref="roomInput"
           label="房间号"
           placeholder="请输入房间号"
           v-model:value="roomNum"
-          v-model:status="roomInputStatus"
           :test="verifyRoomNumber"
           @confirm="connectLive"
           @cancel="disconnectLive" />
         <ConnectInput
+          ref="relayInput"
           label="WS地址"
           placeholder="请输入转发地址"
           confirm-text="转发"
           cancel-text="停止"
           v-model:value="relayUrl"
-          v-model:status="relayInputStatus"
           :test="verifyWssUrl"
           @confirm="relayCast"
           @cancel="stopRelayCast" />
@@ -75,10 +75,10 @@ const relayStatus = ref<ConnectStatus>(0);
 // 房间号
 const roomNum = ref<string>('');
 // 房间号输入框状态
-const roomInputStatus = ref<boolean>(false);
+const roomInputRef = useTemplateRef('roomInput');
 // 转发地址
 const relayUrl = ref<string>('');
-const relayInputStatus = ref<boolean>(false);
+const relayInputRef = useTemplateRef('relayInput');
 // 状态面板
 const statusPanelRef = useTemplateRef('panel');
 
@@ -131,6 +131,16 @@ function verifyWssUrl(value: string) {
   }
 }
 
+/** 设置房间号输入框状态 */
+const setRoomInputStatus = function (flag?: boolean) {
+  if (roomInputRef.value) roomInputRef.value.setStatus(flag);
+};
+
+/** 设置转发地址输入框状态 */
+const setRelayInputStatus = function (flag?: boolean) {
+  if (relayInputRef.value) relayInputRef.value.setStatus(flag);
+};
+
 /**
  * 设置房间统计信息
  * @param room
@@ -262,7 +272,7 @@ const connectLive = function () {
     cast.on('open', (ev, info) => {
       CLog.info('DyCast 房间连接成功');
       SkMessage.success(`房间连接成功[${roomNum.value}]`);
-      roomInputStatus.value = true;
+      setRoomInputStatus(true);
       connectStatus.value = 1;
       setRoomInfo(info);
       addConsoleMessage('直播间已连接');
@@ -271,12 +281,12 @@ const connectLive = function () {
       CLog.error('DyCast 连接出错 =>', err);
       SkMessage.error(`连接出错: ${err}`);
       connectStatus.value = 2;
-      roomInputStatus.value = false;
+      setRoomInputStatus(false);
     });
     cast.on('close', (code, reason) => {
       CLog.info(`DyCast 房间已关闭[${code}] => ${reason}`);
       connectStatus.value = 3;
-      roomInputStatus.value = false;
+      setRoomInputStatus(false);
       switch (code) {
         case DyCastCloseCode.NORMAL:
           SkMessage.success('断开成功');
@@ -320,7 +330,7 @@ const connectLive = function () {
   } catch (err) {
     CLog.error('房间连接过程出错:', err);
     SkMessage.error('房间连接过程出错');
-    roomInputStatus.value = false;
+    setRoomInputStatus(false);
     castWs = void 0;
   }
 };
@@ -338,7 +348,7 @@ const relayCast = function () {
     cast.on('open', () => {
       CLog.info(`DyCast 转发连接成功`);
       SkMessage.success(`已开始转发`);
-      relayInputStatus.value = true;
+      setRelayInputStatus(true);
       relayStatus.value = 1;
       addConsoleMessage('转发客户端已连接');
       if (castWs) {
@@ -350,14 +360,14 @@ const relayCast = function () {
       CLog.info(`(${code})dycast 转发已关闭: ${msg || '未知原因'}`);
       if (code === 1000) SkMessage.info(`已停止转发`);
       else SkMessage.warning(`转发已停止: ${msg || '未知原因'}`);
-      relayInputStatus.value = false;
+      setRelayInputStatus(false);
       relayStatus.value = 0;
       addConsoleMessage('转发已关闭');
     });
     cast.on('error', ev => {
       CLog.warn(`dycast 转发出错: ${ev.message}`);
       SkMessage.error(`转发出错了: ${ev.message}`);
-      relayInputStatus.value = false;
+      setRelayInputStatus(false);
       relayStatus.value = 2;
     });
     cast.connect();
@@ -365,7 +375,7 @@ const relayCast = function () {
   } catch (err) {
     CLog.error('弹幕转发出错:', err);
     SkMessage.error('转发出错: ${err.message}');
-    relayInputStatus.value = false;
+    setRelayInputStatus(false);
     relayStatus.value = 2;
     relayWs = void 0;
   }