🔨 优化配置保存逻辑.

orion-visor-ui/src/api/asset/host-extra.ts

@@ -37,6 +37,7 @@ export interface HostRdpExtraSettingModel {
 export interface HostVncExtraSettingModel {
   port: number;
   lowBandwidthMode: boolean;
+  swapRedBlue: boolean;
 }
 
 // 标签额外配置

orion-visor-ui/src/store/modules/terminal/index.ts

@@ -30,7 +30,7 @@ import { getPreference, updatePreference } from '@/api/user/preference';
 import { getLatestConnectHostId } from '@/api/terminal/terminal-connect-log';
 import { useCacheStore } from '@/store';
 import { nextId } from '@/utils';
-import { isObject } from '@/utils/is';
+import { isArray, isObject } from '@/utils/is';
 import { Message } from '@arco-design/web-vue';
 import { TerminalSessionTypes, TerminalTabs } from '@/views/terminal/types/const';
 import TerminalTabManager from '@/views/terminal/service/tab/terminal-tab-manager';
@@ -146,7 +146,7 @@ export default defineStore('terminal', {
         await updatePreference({
           type: 'TERMINAL',
           item,
-          value: isObject(value) ? JSON.stringify(value) : value,
+          value: (isObject(value) || isArray(value)) ? JSON.stringify(value) : value,
         });
       } catch (e) {
         Message.error('同步失败');

orion-visor-ui/src/store/modules/terminal/types.ts

@@ -121,7 +121,6 @@ export interface TerminalVncGraphSetting {
   displayHeight?: number;
   colorDepth?: number;
   forceLossless?: boolean;
-  swapRedBlue?: boolean;
   cursor?: string;
   compressLevel?: number;
   qualityLevel?: number;

orion-visor-ui/src/views/terminal/components/setting/display/terminal-rdp-action-bar-block.vue

@@ -40,25 +40,16 @@
 <script lang="ts" setup>
   import type { TerminalRdpActionBarSetting } from '@/store/modules/terminal/types';
   import type { SidebarAction } from '@/views/terminal/types/define';
-  import { computed, ref, watch } from 'vue';
+  import { computed } from 'vue';
-  import { useTerminalStore, useDictStore } from '@/store';
+  import { useDictStore } from '@/store';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
   import { RdpActionBarItems, graphActionBarPositionKey } from '@/views/terminal/types/const';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
   import IconActions from '../../layout/icon-actions.vue';
 
   const { toOptions } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();
 
-  const formModel = ref<TerminalRdpActionBarSetting>({ ...preference.rdpActionBarSetting });
+  const { formModel } = useTerminalPreference<TerminalRdpActionBarSetting>(TerminalPreferenceItem.RDP_ACTION_BAR_SETTING, true);
-
-  // 监听同步
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.RDP_ACTION_BAR_SETTING, formModel.value, true);
-  }, { deep: true });
 
   // 操作项
   const actions = computed<Array<SidebarAction>>(() => {

orion-visor-ui/src/views/terminal/components/setting/display/terminal-ssh-action-bar-block.vue

@@ -30,6 +30,12 @@
                       :default-checked="true"
                       type="round" />
           </a-form-item>
+          <!-- 分享按钮 -->
+          <a-form-item field="share" label="分享按钮">
+            <a-switch v-model="formModel.share"
+                      :default-checked="true"
+                      type="round" />
+          </a-form-item>
         </a-space>
       </a-form>
     </div>
@@ -45,25 +51,14 @@
 <script lang="ts" setup>
   import type { TerminalSshActionBarSetting } from '@/store/modules/terminal/types';
   import type { SidebarAction } from '@/views/terminal/types/define';
-  import { computed, ref, watch } from 'vue';
+  import { computed } from 'vue';
-  import { useTerminalStore } from '@/store';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
   import { SshActionBarItems } from '@/views/terminal/types/const';
   import { isSecureEnvironment } from '@/utils/env';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
   import IconActions from '../../layout/icon-actions.vue';
 
-  const { preference, updateTerminalPreference } = useTerminalStore();
+  const { formModel } = useTerminalPreference<TerminalSshActionBarSetting>(TerminalPreferenceItem.SSH_ACTION_BAR_SETTING, true);
-
-  const formModel = ref<TerminalSshActionBarSetting>({ ...preference.sshActionBarSetting });
-
-  // 监听同步
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.SSH_ACTION_BAR_SETTING, formModel.value, true);
-  }, { deep: true });
 
   // 操作项
   const actions = computed<Array<SidebarAction>>(() => {

orion-visor-ui/src/views/terminal/components/setting/display/terminal-ssh-display-block.vue

@@ -116,23 +116,22 @@
 <script lang="ts" setup>
   import type { TerminalSshDisplaySetting } from '@/store/modules/terminal/types';
   import type { ISshSession } from '@/views/terminal/interfaces';
-  import { ref, watch, onMounted } from 'vue';
+  import { ref } from 'vue';
   import { useDictStore, useTerminalStore } from '@/store';
   import { fontFamilyKey, fontSizeKey, fontWeightKey, cursorStyleKey, TerminalSessionTypes } from '@/views/terminal/types/const';
   import { labelFilter } from '@/types/form';
-  import { TerminalPreferenceItem } from '@/store/modules/terminal';
   import { defaultFontFamily } from '@/types/xterm';
+  import { TerminalPreferenceItem } from '@/store/modules/terminal';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
   import TerminalExample from '../terminal-example.vue';
 
   const { toOptions, toRadioOptions } = useDictStore();
-  const { preference, updateTerminalPreference, sessionManager } = useTerminalStore();
+  const { preference, sessionManager } = useTerminalStore();
 
   const background = preference.sshTheme.schema.background;
   const previewTerminal = ref();
-  const formModel = ref<TerminalSshDisplaySetting>({});
 
-  // 监听内容变化
+  const { formModel } = useTerminalPreference<TerminalSshDisplaySetting>(TerminalPreferenceItem.SSH_DISPLAY_SETTING, true, (v) => {
-  watch(formModel, (v, before) => {
     if (!v || !Object.keys(v).length) {
       return;
     }
@@ -168,17 +167,8 @@
         // 自适应
         s.fit();
       });
-    // 非初始化则同步
-    if (Object.keys(before).length) {
-      updateTerminalPreference(TerminalPreferenceItem.SSH_DISPLAY_SETTING, formModel.value, true);
-    }
     // 聚焦
     previewTerminal.value.term.focus();
-  }, { deep: true });
-
-  // 初始化配置
-  onMounted(() => {
-    formModel.value = { ...preference.sshDisplaySetting };
   });
 
 </script>

orion-visor-ui/src/views/terminal/components/setting/display/terminal-ssh-right-menu-block.vue

@@ -26,7 +26,7 @@
                    class="action-item-wrapper"
                    v-for="(action, index) in SshActionBarItems"
                    :key="index">
-              <div class="action-item" @click="clickAction(action.item)">
+              <div class="action-item" @click="toggleAction(action.item)">
                 <!-- 图标 -->
                 <div class="action-icon">
                   <component :is="action.icon" />
@@ -62,7 +62,7 @@
               <div>{{ action.content }}</div>
             </div>
             <!-- 关闭按钮 -->
-            <div class="close-icon" @click="clickAction(action.item)">
+            <div class="close-icon" @click="toggleAction(action.item)">
               <icon-close />
             </div>
           </a-doption>
@@ -86,22 +86,15 @@
 
 <script lang="ts" setup>
   import type { ContextMenuItem } from '@/views/terminal/types/define';
-  import { computed, ref, watch } from 'vue';
+  import { computed, ref } from 'vue';
-  import { useTerminalStore } from '@/store';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
   import { SshActionBarItems } from '@/views/terminal/types/const';
   import { isSecureEnvironment } from '@/utils/env';
-
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
-  const { preference, updateTerminalPreference } = useTerminalStore();
 
   const popupContainer = ref();
-  const rightActionItems = ref<Array<string>>([...preference.sshRightMenuSetting]);
 
-  // // 监听同步
+  const { formModel: rightActionItems } = useTerminalPreference<Array<string>>(TerminalPreferenceItem.SSH_RIGHT_MENU_SETTING, true);
-  watch(rightActionItems, (v) => {
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.SSH_RIGHT_MENU_SETTING, JSON.stringify(v), true);
-  }, { deep: true });
 
   // 实际操作项
   const rightActions = computed<Array<ContextMenuItem>>(() => {
@@ -110,8 +103,8 @@
       .filter(Boolean);
   });
 
-  // 添加操作项
+  // 触发操作项
-  const clickAction = (item: string) => {
+  const toggleAction = (item: string) => {
     if (rightActionItems.value.includes(item)) {
       // 移除
       rightActionItems.value.splice(rightActionItems.value.indexOf(item), 1);

orion-visor-ui/src/views/terminal/components/setting/display/terminal-vnc-action-bar-block.vue

@@ -40,25 +40,16 @@
 <script lang="ts" setup>
   import type { TerminalVncActionBarSetting } from '@/store/modules/terminal/types';
   import type { SidebarAction } from '@/views/terminal/types/define';
-  import { computed, ref, watch } from 'vue';
+  import { computed } from 'vue';
-  import { useTerminalStore, useDictStore } from '@/store';
+  import { useDictStore } from '@/store';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
   import { VncActionBarItems, graphActionBarPositionKey } from '@/views/terminal/types/const';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
   import IconActions from '../../layout/icon-actions.vue';
 
   const { toOptions } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();
 
-  const formModel = ref<TerminalVncActionBarSetting>({ ...preference.vncActionBarSetting });
+  const { formModel } = useTerminalPreference<TerminalVncActionBarSetting>(TerminalPreferenceItem.VNC_ACTION_BAR_SETTING, true);
-
-  // 监听同步
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.VNC_ACTION_BAR_SETTING, formModel.value, true);
-  }, { deep: true });
 
   // 操作项
   const actions = computed<Array<SidebarAction>>(() => {

orion-visor-ui/src/views/terminal/components/setting/extra/rdp-extra-form.vue

@@ -23,7 +23,7 @@
     <a-form-item field="lowBandwidthMode"
                  style="margin-bottom: 8px;"
                  label="低带宽模式"
-                 help="调整图形化配置以及禁用音频, 提升慢速网络下的响应速度">
+                 help="调整图形化配置为最低以及禁用音频, 提升慢速网络下的响应速度">
       <a-switch v-model="formModel.lowBandwidthMode" type="round" />
     </a-form-item>
     <!-- 初始化程序 -->

orion-visor-ui/src/views/terminal/components/setting/extra/vnc-extra-form.vue

@@ -8,16 +8,22 @@
     <a-form-item field="port"
                  label="自定义端口"
                  style="margin-bottom: 8px;"
-                 help="通常情况下端口号为 5900 + N(屏幕)"
+                 help="通常情况下端口号为 5900 + N (屏幕)"
                  :rules="{ min: 1, max: 65535, message: '输入的端口不合法' }">
       <a-input-number v-model="formModel.port"
                       placeholder="VNC 自定义端口"
                       allow-clear />
     </a-form-item>
+    <!-- 交换红蓝 -->
+    <a-form-item field="swapRedBlue"
+                 label="交换红蓝"
+                 help="若颜色显示错误(如蓝色显示为橙红色), 则需启用此选项">
+      <a-switch v-model="formModel.swapRedBlue" type="round" />
+    </a-form-item>
     <!-- 低带宽模式 -->
     <a-form-item field="lowBandwidthMode"
                  label="低带宽模式"
-                 help="调整图形化配置以及禁用音频, 提升慢速网络下的响应速度">
+                 help="调整图形化配置为最低, 提升慢速网络下的响应速度">
       <a-switch v-model="formModel.lowBandwidthMode" type="round" />
     </a-form-item>
   </a-form>

orion-visor-ui/src/views/terminal/components/setting/general/terminal-rdp-graph-block.vue

@@ -95,23 +95,16 @@
 
 <script lang="ts" setup>
   import type { TerminalRdpGraphSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
+  import { useDictStore } from '@/store';
-  import { useTerminalStore, useDictStore } from '@/store';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
   import { screenResolutionKey, graphColorDepthKey, fitDisplayValue } from '@/views/terminal/types/const';
   import { getDisplaySize } from '@/views/terminal/types/utils';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
   import BlockSettingItem from '../block-setting-item.vue';
 
   const { toOptions, getDictValue } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();
 
-  const formModel = ref<TerminalRdpGraphSetting>({ ...preference.rdpGraphSetting });
+  const { formModel } = useTerminalPreference<TerminalRdpGraphSetting>(TerminalPreferenceItem.RDP_GRAPH_SETTING, true, (v) => {
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
     // 同步大小
     if (v.displaySize) {
       // 自适应大小
@@ -129,9 +122,7 @@
         }
       }
     }
-    // 同步
+  });
-    updateTerminalPreference(TerminalPreferenceItem.RDP_GRAPH_SETTING, formModel.value, true);
-  }, { deep: true });
 
 </script>
 

orion-visor-ui/src/views/terminal/components/setting/general/terminal-rdp-session-block.vue

@@ -36,25 +36,15 @@
 
 <script lang="ts" setup>
   import type { TerminalRdpSessionSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
+  import { useDictStore } from '@/store';
-  import { useDictStore, useTerminalStore } from '@/store';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
   import { driveMountModeKey } from '@/views/terminal/types/const';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
   import BlockSettingItem from '../block-setting-item.vue';
 
   const { toOptions, getDictValue } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();
 
-  const formModel = ref<TerminalRdpSessionSetting>({ ...preference.rdpSessionSetting });
+  const { formModel } = useTerminalPreference<TerminalRdpSessionSetting>(TerminalPreferenceItem.RDP_SESSION_SETTING, true);
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.RDP_SESSION_SETTING, formModel.value, true);
-  }, { deep: true });
 
 </script>
 

orion-visor-ui/src/views/terminal/components/setting/general/terminal-ssh-interact-block.vue

@@ -110,26 +110,16 @@
 
 <script lang="ts" setup>
   import type { TerminalSshInteractSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
+  import { useDictStore } from '@/store';
-  import { useTerminalStore, useDictStore } from '@/store';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
   import { emulationTypeKey } from '@/views/terminal/types/const';
   import { isSecureEnvironment } from '@/utils/env';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
   import BlockSettingItem from '../block-setting-item.vue';
 
   const { toOptions } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();
 
-  const formModel = ref<TerminalSshInteractSetting>({ ...preference.sshInteractSetting });
+  const { formModel } = useTerminalPreference<TerminalSshInteractSetting>(TerminalPreferenceItem.SSH_INTERACT_SETTING);
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.SSH_INTERACT_SETTING, formModel.value);
-  }, { deep: true });
 
 </script>
 

orion-visor-ui/src/views/terminal/components/setting/general/terminal-ssh-plugins-block.vue

@@ -40,23 +40,11 @@
 
 <script lang="ts" setup>
   import type { TerminalSshPluginsSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
-  import { useTerminalStore } from '@/store';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
   import BlockSettingItem from '../block-setting-item.vue';
 
-  const { preference, updateTerminalPreference } = useTerminalStore();
+  const { formModel } = useTerminalPreference<TerminalSshPluginsSetting>(TerminalPreferenceItem.SSH_PLUGINS_SETTING);
-
-  const formModel = ref<TerminalSshPluginsSetting>({ ...preference.sshPluginsSetting });
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
-    // 同步
-    updateTerminalPreference(TerminalPreferenceItem.SSH_PLUGINS_SETTING, formModel.value);
-  }, { deep: true });
 
 </script>
 

orion-visor-ui/src/views/terminal/components/setting/general/terminal-vnc-graph-block.vue

@@ -32,9 +32,12 @@
         <block-setting-item label="无损压缩" desc="是否启用对图像更新的无损压缩">
           <a-switch v-model="formModel.forceLossless" type="round" />
         </block-setting-item>
-        <!-- 交换红蓝 -->
+        <!-- 光标 -->
-        <block-setting-item label="交换红蓝" desc="若显示的颜色出现错误(蓝色显示为橙色或红色等) 则需要启用此选项">
+        <block-setting-item label="光标" desc="光标渲染方式, 远程光标会比本地光标慢">
-          <a-switch v-model="formModel.swapRedBlue" type="round" />
+          <a-select v-model="formModel.cursor"
+                    style="width: 168px;"
+                    size="small"
+                    :options="toOptions(vcnCursorKey)" />
         </block-setting-item>
       </a-row>
       <a-row class="mb16" align="stretch" :gutter="16">
@@ -59,15 +62,6 @@
                           placeholder="图像质量等级 0 ~ 9" />
         </block-setting-item>
       </a-row>
-      <a-row class="mb16" align="stretch" :gutter="16">
-        <!-- 光标 -->
-        <block-setting-item label="光标" desc="光标渲染方式, 远程光标会比本地光标慢">
-          <a-select v-model="formModel.cursor"
-                    style="width: 168px;"
-                    size="small"
-                    :options="toOptions(vcnCursorKey)" />
-        </block-setting-item>
-      </a-row>
     </div>
   </div>
 </template>
@@ -80,23 +74,16 @@
 
 <script lang="ts" setup>
   import type { TerminalVncGraphSetting } from '@/store/modules/terminal/types';
-  import { ref, watch } from 'vue';
+  import { useDictStore } from '@/store';
-  import { useTerminalStore, useDictStore } from '@/store';
   import { TerminalPreferenceItem } from '@/store/modules/terminal';
   import { graphColorDepthKey, vcnCursorKey, fitDisplayValue, screenResolutionKey } from '@/views/terminal/types/const';
   import { getDisplaySize } from '@/views/terminal/types/utils';
+  import useTerminalPreference from '@/views/terminal/types/use-terminal-preference';
   import BlockSettingItem from '../block-setting-item.vue';
 
   const { toOptions, getDictValue } = useDictStore();
-  const { preference, updateTerminalPreference } = useTerminalStore();
 
-  const formModel = ref<TerminalVncGraphSetting>({ ...preference.vncGraphSetting });
+  const { formModel } = useTerminalPreference<TerminalVncGraphSetting>(TerminalPreferenceItem.VNC_GRAPH_SETTING, true, (v) => {
-
-  // 监听内容变化
-  watch(formModel, (v) => {
-    if (!v) {
-      return;
-    }
     // 同步大小
     if (v.displaySize) {
       // 自适应大小
@@ -114,9 +101,7 @@
         }
       }
     }
-    // 同步
+  });
-    updateTerminalPreference(TerminalPreferenceItem.VNC_GRAPH_SETTING, formModel.value, true);
-  }, { deep: true });
 
 </script>
 

orion-visor-ui/src/views/terminal/service/channel/vnc-channel.ts

@@ -17,7 +17,6 @@ export default class VncChannel extends BaseGuacdChannel<IVncSession> {
       extra: {
         colorDepth: setting.colorDepth || 24,
         forceLossless: setting.forceLossless,
-        swapRedBlue: setting.swapRedBlue,
         cursor: setting.cursor,
         compressLevel: setting.compressLevel,
         qualityLevel: setting.qualityLevel,

orion-visor-ui/src/views/terminal/types/use-terminal-preference.ts

@@ -0,0 +1,41 @@
+import { ref, watch } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import { useTerminalStore } from '@/store';
+import { isArray, isObject } from '@/utils/is';
+
+const { preference, updateTerminalPreference } = useTerminalStore();
+
+// 更新终端偏好
+export default function useTerminalPreference<T>(key: string,
+                                                 setLocal = false,
+                                                 filler?: (v: T, before: T) => void,
+                                                 delay = 500) {
+  // 默认配置
+  let initialValue = preference[key as keyof typeof preference] as T;
+  if (isArray(initialValue)) {
+    initialValue = [...initialValue] as T;
+  } else if (isObject(initialValue)) {
+    initialValue = { ...initialValue } as T;
+  }
+  const formModel = ref<T>(initialValue);
+
+  // 防抖更新
+  const debouncedUpdate = useDebounceFn(async (value: T) => {
+    // 更新
+    await updateTerminalPreference(key, value, setLocal);
+  }, delay);
+
+  // 监听表单
+  watch(formModel, async (v, before) => {
+    if (!v) {
+      return;
+    }    // 填充
+    filler?.(v, before);
+    // 更新
+    await debouncedUpdate(v);
+  }, { deep: true });
+
+  return {
+    formModel,
+  };
+}