Feat: add update terminal config

common/global.d.ts

@@ -18,8 +18,6 @@ export interface IGlobalInstanceConfig {
   terminalOption: {
     haveColor: boolean;
     pty: boolean;
-    ptyWindowCol: number;
-    ptyWindowRow: number;
   };
   eventTask: {
     autoStart: boolean;

frontend/src/services/apis/instance.ts

@@ -64,3 +64,29 @@ export const stopInstance = useDefineApi<
   url: "/api/protected_instance/stop",
   method: "GET"
 });
+
+// 更新终端设置
+export const updateTermConfig = useDefineApi<
+  {
+    params: {
+      uuid: string;
+      remote_uuid: string;
+    };
+    data: {
+      terminalOption: {
+        haveColor: boolean;
+        pty: boolean;
+      };
+      crlf: number;
+      ie: string;
+      oe: string;
+      stopCommand: string;
+    };
+  },
+  {
+    instanceUuid: string;
+  }
+>({
+  url: "/api/protected_instance/instance_update",
+  method: "PUT"
+});

frontend/src/types/const.ts

@@ -1 +1,13 @@
 export const CARD_FIXED_HEIGHT = 200;
+
+export const TERMINAL_CODE = [
+  "UTF-8",
+  "GBK",
+  "GB2312",
+  "GB18030",
+  "BIG5",
+  "Big5-HKSCS",
+  "Shift_JIS",
+  "KS_C_5601",
+  "UTF-16"
+];

frontend/src/widgets/instance/ManagerBtns.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import type { LayoutCard } from "@/types";
 import { arrayFilter } from "../../tools/array";
 import { t } from "@/lang/i18n";
@@ -8,6 +8,8 @@ import InnerCard from "@/components/InnerCard.vue";
 import { LayoutCardHeight } from "../../config/originLayoutConfig";
 import { router } from "@/config/router";
 import { useAppRouters } from "@/hooks/useAppRouters";
+import { useLayoutCardTools } from "../../hooks/useCardTools";
+import { useInstanceInfo } from "@/hooks/useInstance";
 import TermConfig from "./TermConfig.vue";
 const terminalConfigDialog = ref<InstanceType<typeof TermConfig>>();
 const { toPage } = useAppRouters();
@@ -16,6 +18,29 @@ const props = defineProps<{
   card: LayoutCard;
 }>();
 
+const { getMetaOrRouteValue } = useLayoutCardTools(props.card);
+
+const instanceId = getMetaOrRouteValue("instanceId");
+const daemonId = getMetaOrRouteValue("daemonId");
+
+const { statusText, isRunning, isStopped, instanceTypeText, instanceInfo, execute } =
+  useInstanceInfo({
+    instanceId,
+    daemonId,
+    autoRefresh: true
+  });
+
+onMounted(async () => {
+  if (instanceId && daemonId) {
+    await execute({
+      params: {
+        uuid: instanceId,
+        remote_uuid: daemonId
+      }
+    });
+  }
+});
+
 const btns = arrayFilter([
   {
     title: t("TXT_CODE_d07742fe"),
@@ -109,7 +134,12 @@ const btns = arrayFilter([
     </template>
   </CardPanel>
 
-  <TermConfig ref="terminalConfigDialog" />
+  <TermConfig
+    ref="terminalConfigDialog"
+    :instance-info="instanceInfo"
+    :instance-id="instanceId"
+    :daemon-id="daemonId"
+  />
 </template>
 
 <style lang="scss" scoped></style>

frontend/src/widgets/instance/TermConfig.vue

@@ -1,18 +1,55 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, reactive, watch } from "vue";
 import { t } from "@/lang/i18n";
 import { useScreen } from "@/hooks/useScreen";
+import type { InstanceDetail } from "@/types";
+import { updateTermConfig } from "@/services/apis/instance";
+import { message } from "ant-design-vue";
+import { TERMINAL_CODE } from "@/types/const";
+const props = defineProps<{
+  instanceInfo: InstanceDetail | undefined;
+  instanceId: string | undefined;
+  daemonId: string | undefined;
+}>();
+let options = reactive<InstanceDetail>(props.instanceInfo!);
+
 const screen = useScreen();
 const isPhone = computed(() => screen.isPhone.value);
-
 const open = ref(false);
-
 const openDialog = () => {
   open.value = true;
 };
 
-const confirmLoading = ref<boolean>(false);
-const submit = () => {};
+const { execute, isLoading } = updateTermConfig();
+
+const submit = async () => {
+  try {
+    await execute({
+      params: {
+        uuid: props.instanceId!,
+        remote_uuid: props.daemonId!
+      },
+      data: {
+        terminalOption: {
+          haveColor: options.config.terminalOption.haveColor,
+          pty: options.config.terminalOption.pty
+        },
+        crlf: options.config.crlf,
+        ie: options.config.ie,
+        oe: options.config.oe,
+        stopCommand: options.config.stopCommand
+      }
+    });
+    open.value = false;
+    return message.success(t("TXT_CODE_d3de39b4"));
+  } catch (err: any) {
+    return message.error(err.message);
+  }
+};
+
+watch(open, async () => {
+  options = props.instanceInfo!;
+});
 
 defineExpose({
   openDialog
@@ -25,14 +62,14 @@ defineExpose({
     centered
     width="auto"
     :title="t('终端设置')"
-    :confirm-loading="confirmLoading"
+    :confirm-loading="isLoading"
     :ok-text="t('保存')"
     @ok="submit"
   >
     <a-form layout="vertical">
       <a-row :gutter="20">
         <a-col :xs="24" :md="12" :offset="0">
-          <a-form-item>
+          <a-form-ite1m>
             <a-typography-title :level="5">{{ t("仿真终端") }}</a-typography-title>
             <a-typography-paragraph>
               <a-typography-text type="secondary">
@@ -43,8 +80,8 @@ defineExpose({
                 {{ t("如果使用有问题，建议关闭。") }}
               </a-typography-text>
             </a-typography-paragraph>
-            <a-switch></a-switch>
-          </a-form-item>
+            <a-switch v-model:checked="options.config.terminalOption.pty" />
+          </a-form-ite1m>
 
           <a-form-item>
             <a-typography-title :level="5">{{ t("网页颜色渲染") }}</a-typography-title>
@@ -55,7 +92,7 @@ defineExpose({
                 {{ t("如果颜色渲染功能与软件自带的颜色功能冲突，可以关闭此功能。") }}
               </a-typography-text>
             </a-typography-paragraph>
-            <a-switch></a-switch>
+            <a-switch v-model:checked="options.config.terminalOption.haveColor" />
           </a-form-item>
 
           <a-form-item>
@@ -67,7 +104,11 @@ defineExpose({
                 {{ t("Windows 平台下一般是“回车换行符”，Linux/MacOS 平台下一般是“换行符”。") }}
               </a-typography-text>
             </a-typography-paragraph>
-            <a-select :placeholder="t('请选择')" :style="'width: ' + (isPhone ? '100%' : '220px')">
+            <a-select
+              v-model:value="options.config.crlf"
+              :placeholder="t('请选择')"
+              :style="'width: ' + (isPhone ? '100%' : '220px')"
+            >
               <a-select-option :value="1"> {{ t("换行符（\\n）") }}</a-select-option>
               <a-select-option :value="2">{{ t("回车换行符（\\r\\n）") }}</a-select-option>
             </a-select>
@@ -81,7 +122,10 @@ defineExpose({
                 {{ t("当点击“关闭实例”按钮时，会立刻执行此命令，^C 代表 Ctrl+C 信号。") }}
               </a-typography-text>
             </a-typography-paragraph>
-            <a-input :style="'width: ' + (isPhone ? '100%' : '220px')" />
+            <a-input
+              v-model:value="options.config.stopCommand"
+              :style="'width: ' + (isPhone ? '100%' : '220px')"
+            />
           </a-form-item>
 
           <a-form-item>
@@ -92,17 +136,21 @@ defineExpose({
               </a-typography-text>
             </a-typography-paragraph>
             <a-select
+              v-model:value="options.config.ie"
               class="mr-10 mb-20"
               :placeholder="t('终端输入编码')"
               :style="'width: ' + (isPhone ? '100%' : '220px')"
             >
-              <a-select-option v-for="item in 5" :key="item" :value="item"> </a-select-option>
+              <a-select-option v-for="item in TERMINAL_CODE" :key="item" :value="item">
+              </a-select-option>
             </a-select>
             <a-select
+              v-model:value="options.config.oe"
               :placeholder="t('终端输出编码')"
               :style="'width: ' + (isPhone ? '100%' : '220px')"
             >
-              <a-select-option v-for="item in 5" :key="item" :value="item"> </a-select-option>
+              <a-select-option v-for="item in TERMINAL_CODE" :key="item" :value="item">
+              </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>