Fix: terminal socket.io error with phone

frontend/components.d.ts

@@ -59,6 +59,7 @@ declare module 'vue' {
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATypography: typeof import('ant-design-vue/es')['Typography']
+    ATypographyLink: typeof import('ant-design-vue/es')['TypographyLink']
     ATypographyParagraph: typeof import('ant-design-vue/es')['TypographyParagraph']
     ATypographyText: typeof import('ant-design-vue/es')['TypographyText']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']

frontend/src/hooks/useTerminal.ts

@@ -74,12 +74,15 @@ export function useTerminal() {
 
     socket = io(addr, {
       multiplex: false,
+      reconnectionDelayMax: 1000 * 10,
       timeout: 1000 * 10,
-      reconnection: false,
+      reconnection: true,
+      reconnectionAttempts: 3,
       rejectUnauthorized: false
     });
 
     socket.on("connect", () => {
+      console.info("[Socket.io] connecting:", addr);
       socket?.emit("stream/auth", {
         data: { password }
       });
@@ -87,6 +90,7 @@ export function useTerminal() {
     });
 
     socket.on("connect_error", (error) => {
+      console.error("[Socket.io] Connect error: ", addr, error);
       isConnect.value = false;
       events.emit("error", error);
     });
@@ -111,6 +115,7 @@ export function useTerminal() {
     });
 
     socket.on("reconnect", () => {
+      console.warn("[Socket.io] reconnect:", addr);
       isConnect.value = true;
       socket?.emit("stream/auth", {
         data: { password }
@@ -118,9 +123,9 @@ export function useTerminal() {
     });
 
     socket.on("disconnect", () => {
+      console.warn("[Socket.io] disconnect:", addr);
       isConnect.value = false;
       events.emit("disconnect");
-      socket?.close();
     });
 
     socket.on("instance/stdout", (packet) => events.emit("stdout", packet?.data));

frontend/src/widgets/instance/Terminal.vue

@@ -65,6 +65,8 @@ const instanceStatusText = computed(
   () => String(INSTANCE_STATUS[String(instanceInfo?.value?.status)]) || t("TXT_CODE_c8333afa")
 );
 
+let term: Terminal | null = null;
+
 const quickOperations = computed(() =>
   arrayFilter([
     {
@@ -188,12 +190,14 @@ events.on("error", (error: Error) => {
   socketError.value = error;
 });
 
-let term: Terminal | null = null;
-
 const clearTerminal = () => {
   term?.clear();
 };
 
+const refreshPage = () => {
+  window.location.reload();
+};
+
 onMounted(async () => {
   try {
     if (instanceId && daemonId) {
@@ -219,8 +223,12 @@ onMounted(async () => {
         {{ $t("TXT_CODE_812a629e") + socketAddress }}
       </a-typography-paragraph>
       <div>
-        <img :src="connectErrorImage" style="width: 100%" />
+        <img :src="connectErrorImage" style="width: 100%; height: 110px" />
       </div>
+      <a-typography-title :level="5">{{ $t("错误信息：") }}</a-typography-title>
+      <a-typography-paragraph>
+        <pre style="font-size: 12px"><code>{{ socketError.message }}</code></pre>
+      </a-typography-paragraph>
       <a-typography-title :level="5">{{ $t("TXT_CODE_f1c96d8a") }}</a-typography-title>
       <a-typography-paragraph>
         <ul>
@@ -237,6 +245,9 @@ onMounted(async () => {
             {{ $t("TXT_CODE_9c188ec8") }}
           </li>
         </ul>
+        <div class="flex flex-center">
+          <a-typography-link @click="refreshPage">{{ $t("重新连接") }}</a-typography-link>
+        </div>
       </a-typography-paragraph>
     </div>
   </div>
@@ -393,11 +404,18 @@ onMounted(async () => {
 
   .error-card-container {
     overflow: hidden;
-    max-width: 500px;
+    max-width: 440px;
+    border: 1px solid var(--color-gray-6) !important;
     background-color: var(--color-gray-1);
-
     border-radius: 4px;
     padding: 12px;
+    box-shadow: 0px 0px 2px var(--color-gray-7);
+  }
+
+  @media (max-width: 992px) {
+    .error-card-container {
+      max-width: 90vw !important;
+    }
   }
 }
 .console-wrapper {
@@ -444,12 +462,12 @@ onMounted(async () => {
     background-color: #1e1e1e;
     padding: 8px;
     border-radius: 6px;
-    // overflow-x: auto !important;
+    overflow-x: auto !important;
     // overflow-y: auto !important;
     display: flex;
     flex-direction: column;
     .terminal-container {
-      min-width: 680px;
+      min-width: 1200px;
       height: 100%;
     }