Feat: send command for instance

frontend/src/hooks/useCardTools.ts

@@ -12,9 +12,9 @@ export function useLayoutCardTools(card: LayoutCard) {
     return card.meta[key] ?? def;
   };
 
-  const getMetaOrRouteValue = <T extends any>(key: string, def?: T) => {
+  const getMetaOrRouteValue = (key: string, def?: string): string | undefined => {
     if (card.meta[key] != null) {
-      return card.meta[key] as T;
+      return card.meta[key];
     }
     if (route.query[key] != null) {
       return String(route.query[key]);

frontend/src/hooks/useTerminal.ts

@@ -150,6 +150,15 @@ export function useTerminal() {
     terminal.value?.write(v.text);
   });
 
+  const sendCommand = (command: string) => {
+    if (!socket?.connected) throw new Error(t("实例没有在运行"));
+    socket.emit("stream/input", {
+      data: {
+        command
+      }
+    });
+  };
+
   // const handleTerminalSizeChange = () => {
   //   termFitAddon.value?.fit();
   // };
@@ -169,6 +178,7 @@ export function useTerminal() {
     events,
     state,
     terminal,
-    initTerminalWindow
+    initTerminalWindow,
+    sendCommand
   };
 }

frontend/src/views/Login.vue

@@ -160,10 +160,10 @@ const loginSuccess = () => {
                         v-model:value="formData.password"
                         class="mt-20"
                         type="password"
-                        :press-enter="handleLogin"
                         :placeholder="t('密码')"
                         size="large"
                         autocomplete="off"
+                        @press-enter="handleLogin"
                       >
                         <template #suffix>
                           <LockOutlined style="color: rgba(0, 0, 0, 0.45)" />

frontend/src/widgets/instance/BaseInfo.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useAppStateStore } from "@/stores/useAppStateStore";
 import type { LayoutCard } from "@/types";
-import { useRoute } from "vue-router";
 import { useLayoutCardTools } from "../../hooks/useCardTools";
 import { getInstanceInfo } from "@/services/apis/instance";
 import { onMounted } from "vue";
@@ -11,11 +9,10 @@ const props = defineProps<{
   card: LayoutCard;
 }>();
 
-const { state } = useAppStateStore();
 const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
 
-const instanceId = getMetaOrRouteValue<string>("instanceId");
-const daemonId = getMetaOrRouteValue<string>("daemonId");
+const instanceId = getMetaOrRouteValue("instanceId");
+const daemonId = getMetaOrRouteValue("daemonId");
 
 const { execute, state: instanceInfo } = getInstanceInfo();
 
@@ -54,16 +51,9 @@ onMounted(async () => {
         {{ t("创建时间：") }}{{ instanceInfo?.config.createDatetime }}
       </a-typography-paragraph>
       <a-typography-paragraph>
-        <span>{{ t("输出编码：") }}{{ instanceInfo?.config.nickname }} </span>
-        <span class="ml-6">{{ t("输入编码：") }}{{ instanceInfo?.config.nickname }} </span>
+        <span>{{ t("输出编码：") }}{{ instanceInfo?.config.oe.toUpperCase() }} </span>
+        <span class="ml-6">{{ t("输入编码：") }}{{ instanceInfo?.config.ie.toUpperCase() }} </span>
       </a-typography-paragraph>
-
-      <!-- <p>{{ t("名称:") }}{{ instanceInfo?.config.nickname }}</p> -->
     </template>
   </CardPanel>
 </template>
-
-<style lang="scss" scoped>
-// .containerWrapper {
-// }
-</style>

frontend/src/widgets/instance/Terminal.vue

@@ -25,8 +25,8 @@ const props = defineProps<{
 
 const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
 
-const instanceId = getMetaOrRouteValue<string>("instanceId");
-const daemonId = getMetaOrRouteValue<string>("daemonId");
+const instanceId = getMetaOrRouteValue("instanceId");
+const daemonId = getMetaOrRouteValue("daemonId");
 const terminalDomId = computed(() => `terminal-window-${getRandomId()}`);
 const commandInputValue = ref("");
 
@@ -78,7 +78,12 @@ const instanceOperations = arrayFilter([
   }
 ]);
 
-const { execute, initTerminalWindow } = useTerminal();
+const { execute, initTerminalWindow, sendCommand } = useTerminal();
+
+const handleSendCommand = () => {
+  sendCommand(commandInputValue.value);
+  commandInputValue.value = "";
+};
 
 const initTerminal = () => {
   const dom = document.getElementById(terminalDomId.value);
@@ -134,7 +139,11 @@ onMounted(async () => {
           </div>
         </div>
         <div class="command-input">
-          <a-input v-model:value="commandInputValue" :placeholder="t('在这里输入命令按回车键发送')">
+          <a-input
+            v-model:value="commandInputValue"
+            :placeholder="t('在这里输入命令按回车键发送')"
+            @press-enter="handleSendCommand"
+          >
             <template #prefix>
               <CodeOutlined style="font-size: 18px" />
             </template>