feat: query terminal status

frontend/src/hooks/useTerminal.ts

@@ -1,6 +1,6 @@
 import { setUpTerminalStreamChannel } from "@/services/apis/instance";
 import { parseForwardAddress } from "@/tools/protocol";
-import { onMounted, onUnmounted, ref, unref } from "vue";
+import { computed, onMounted, onUnmounted, ref, unref } from "vue";
 import { io } from "socket.io-client";
 import type { Socket } from "socket.io-client";
 import { t } from "@/lang/i18n";
@@ -52,7 +52,6 @@ export function useTerminal() {
   const state = ref<InstanceDetail>();
   const isReady = ref<boolean>(false);
   const terminal = ref<Terminal>();
-  const { isPhone } = useScreen();
   const termFitAddon = ref<FitAddon>();
 
   const execute = async (config: UseTerminalParams) => {
@@ -106,7 +105,6 @@ export function useTerminal() {
     });
 
     socket.connect();
-
     return socket;
   };
 
@@ -159,24 +157,29 @@ export function useTerminal() {
     });
   };
 
-  // const handleTerminalSizeChange = () => {
-  //   termFitAddon.value?.fit();
-  // };
-
+  let statusQueryTask: NodeJS.Timeout;
   onMounted(() => {
-    // window.addEventListener("resize", handleTerminalSizeChange);
+    statusQueryTask = setInterval(() => {
+      socket?.emit("stream/detail", {});
+    }, 1000);
   });
 
   onUnmounted(() => {
+    clearInterval(statusQueryTask);
     events.removeAllListeners();
-    // window.removeEventListener("resize", handleTerminalSizeChange);
+
     socket?.close();
   });
 
+  const isRunning = computed(() => state?.value?.status === 3);
+  const isStopped = computed(() => state?.value?.status === 0);
+
   return {
     execute,
     events,
     state,
+    isRunning,
+    isStopped,
     terminal,
     initTerminalWindow,
     sendCommand

frontend/src/widgets/instance/BaseInfo.vue

@@ -23,8 +23,6 @@ const { statusText, isRunning, isStopped, instanceTypeText, instanceInfo, execut
     autoRefresh: true
   });
 
-instanceInfo.value?.config.type;
-
 const getInstanceName = computed(() => {
   if (instanceInfo.value?.config.nickname === GLOBAL_INSTANCE_NAME) {
     return t("节点终端");

frontend/src/widgets/instance/Terminal.vue

@@ -11,6 +11,7 @@ import {
   PlayCircleOutlined,
   ReconciliationOutlined
 } from "@ant-design/icons-vue";
+import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { arrayFilter } from "../../tools/array";
 import { useTerminal } from "../../hooks/useTerminal";
 import { onMounted, computed, ref } from "vue";
@@ -20,21 +21,34 @@ import IconBtn from "@/components/IconBtn.vue";
 import { openInstance, stopInstance } from "@/services/apis/instance";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { GLOBAL_INSTANCE_NAME } from "../../config/const";
+import { INSTANCE_STATUS_TEXT } from "../../hooks/useInstance";
 
 const props = defineProps<{
   card: LayoutCard;
 }>();
 
 const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
-const { execute, initTerminalWindow, sendCommand, state: instanceInfo } = useTerminal();
+const {
+  execute,
+  initTerminalWindow,
+  sendCommand,
+  state: instanceInfo,
+  isRunning,
+  isStopped
+} = useTerminal();
 
 const instanceId = getMetaOrRouteValue("instanceId");
 const daemonId = getMetaOrRouteValue("daemonId");
 const viewType = getMetaOrRouteValue("viewType", false);
 
 const terminalDomId = computed(() => `terminal-window-${getRandomId()}`);
+
 const commandInputValue = ref("");
 
+const instanceStatusText = computed(
+  () => String(INSTANCE_STATUS_TEXT[String(instanceInfo?.value?.status)]) || t("TXT_CODE_c8333afa")
+);
+
 const quickOperations = computed(() =>
   arrayFilter([
     {
@@ -136,12 +150,29 @@ const innerTerminalType = viewType === "inner";
     <div class="mb-24">
       <BetweenMenus>
         <template #left>
-          <a-typography-title class="mb-0" :level="4">
-            <CloudServerOutlined />
-            <span class="ml-8">
-              {{ getInstanceName }}
-            </span>
-          </a-typography-title>
+          <div class="align-center">
+            <a-typography-title class="mb-0 mr-10" :level="4">
+              <CloudServerOutlined />
+              <span class="ml-8">
+                {{ getInstanceName }}
+                {{ instanceInfo?.status }}
+              </span>
+            </a-typography-title>
+            <a-typography-paragraph class="mb-0">
+              <span v-if="isRunning" class="color-success">
+                <CheckCircleOutlined />
+                {{ instanceStatusText }}
+              </span>
+              <span v-else-if="isStopped" class="color-info">
+                <PauseCircleOutlined />
+                {{ instanceStatusText }}
+              </span>
+              <span v-else>
+                <ExclamationCircleOutlined />
+                {{ instanceStatusText }}
+              </span>
+            </a-typography-paragraph>
+          </div>
         </template>
         <template #right>
           <a-dropdown>