perf: add more connection options

i18n/locales/en.json

@@ -138,6 +138,13 @@
 		"FileTransfer": "File Transfer",
 		"RemoteDesktop": "Remote Desktop",
 		"Database": "Database",
+		"Charset": "Charset",
+    "TerminalBackspace": "Terminal Backspace As Ctrl + H",
+    "Resolution": "Resolution",
+		"Default": "Default",
+    "Auto": "Auto",
+    "Enable": "Enable",
+    "Disable": "Disable",
     "DownloadApplication": "Download Application"
   },
   "ConnectError": {

i18n/locales/zh.json

@@ -142,6 +142,13 @@
     "FileTransfer": "文件传输",
     "RemoteDesktop": "远程桌面",
     "Database": "数据库",
+    "Charset": "字符集",
+    "TerminalBackspace": "字符终端 Backspace As Ctrl + H",
+    "Resolution": "分辨率",
+    "Default": "默认",
+    "Auto": "自动",
+    "Enable": "启用",
+    "Disable": "禁用",
     "DownloadApplication": "下载应用"
   },
   "ConnectError": {

ui/components/BasePage/basePage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { UnlistenFn } from "@tauri-apps/api/event";
-import type { AssetItem, SettingResponse, LayoutsType } from "~/types/index";
+import type { AssetItem, SettingResponse, LayoutsType, CharsetType, ResolutionType } from "~/types/index";
 
 import { useUserInfoStore } from "~/store/modules/userInfo";
 
@@ -26,7 +26,17 @@ const { confirmConnection, saveConnectionInfo } = useAssetConnection();
 const contextMenu = useContextMenu();
 const userInfoStore = useUserInfoStore();
 const assetManagement = useAssetManagement();
-const { layouts } = useSettingManager();
+const settingManager = useSettingManager();
+const { layouts } = settingManager;
+const {
+  setCharsetPreference,
+  setRdpResolutionPreference,
+  setBackspacePreference,
+  setKeyboardLayoutPreference,
+  setRdpClientOptionPreference,
+  setRdpColorQualityPreference,
+  setRdpSmartSizePreference
+} = settingManager;
 const assetManager = useAssetFetcher(props.type, scrollRef);
 const connEditorRef = ref<InstanceType<typeof ConnectionEditor> | null>(null);
 
@@ -156,6 +166,16 @@ const listenTauriEvent = async () => {
     const settingConfig = JSON.parse(payload.data) as SettingResponse;
 
     userInfoStore.setRdpClientOption(settingConfig.graphics);
+
+    setCharsetPreference(
+      (settingConfig.command_line?.charset as CharsetType) || "default"
+    );
+    setBackspacePreference(!!settingConfig.command_line?.is_backspace_as_ctrl_h);
+    setRdpResolutionPreference((settingConfig.graphics?.rdp_resolution as ResolutionType) || "auto");
+    setKeyboardLayoutPreference(settingConfig.graphics?.keyboard_layout || "en-us-qwerty");
+    setRdpClientOptionPreference(settingConfig.graphics?.rdp_client_option || []);
+    setRdpColorQualityPreference(settingConfig.graphics?.rdp_color_quality || "32");
+    setRdpSmartSizePreference(settingConfig.graphics?.rdp_smart_size || "0");
   });
 };
 

ui/composables/useAssetAction.ts

@@ -2,6 +2,7 @@ import type { UnlistenFn } from "@tauri-apps/api/event";
 import type { ConnectionBody, PermedAccount, PermedProtocol, TokenResponse } from "~/types";
 
 import { useUserInfoStore } from "~/store/modules/userInfo";
+import { useSettingManager } from "~/composables/useSettingManager";
 
 let tauriListenersInitialized = false;
 let tauriListenersRegistering = false;
@@ -51,8 +52,18 @@ export const useAssetAction = () => {
   const { t } = useI18n();
   const toast = useToast();
   const userInfoStore = useUserInfoStore();
+  const settingManager = useSettingManager();
   // prettier-ignore
   const { currentSite, currentUser, currentConnectionInfoMap, currentRdpClientOption, orgId } = storeToRefs(userInfoStore);
+  const {
+    charset,
+    rdpResolution,
+    backspaceAsCtrlH,
+    keyboardLayout,
+    rdpClientOption,
+    rdpColorQuality,
+    rdpSmartSize
+  } = settingManager;
 
   /**
    * @description 展示 user 信息,默认展示非 @ 开头的 user
@@ -168,14 +179,25 @@ export const useAssetAction = () => {
    * @returns
    */
   const generateConnectOptions = () => {
+    const resolvedKeyboardLayout =
+      keyboardLayout.value || currentRdpClientOption.value.keyboard_layout || "en-us-qwerty";
+    const resolvedClientOptions =
+      (Array.isArray(rdpClientOption.value) && rdpClientOption.value.length > 0
+        ? rdpClientOption.value
+        : currentRdpClientOption.value.rdp_client_option) || [];
+    const resolvedColorQuality =
+      rdpColorQuality.value || currentRdpClientOption.value.rdp_color_quality || "32";
+    const resolvedSmartSize =
+      rdpSmartSize.value || currentRdpClientOption.value.rdp_smart_size || "0";
+
     return {
-      charset: "default",
-      is_backspace_as_ctrl_h: false,
-      rdp_resolution: "auto",
-      keyboard_layout: currentRdpClientOption.value.keyboard_layout || "en-us-qwerty",
-      rdp_client_option: currentRdpClientOption.value.rdp_client_option || [],
-      rdp_color_quality: currentRdpClientOption.value.rdp_color_quality || "32",
-      rdp_smart_size: currentRdpClientOption.value.rdp_smart_size || "0"
+      charset: charset.value || "default",
+      is_backspace_as_ctrl_h: backspaceAsCtrlH.value ?? false,
+      rdp_resolution: rdpResolution.value || "auto",
+      keyboard_layout: resolvedKeyboardLayout,
+      rdp_client_option: resolvedClientOptions,
+      rdp_color_quality: resolvedColorQuality,
+      rdp_smart_size: resolvedSmartSize
     };
   };
 

ui/composables/useSettingManager.ts

@@ -1,4 +1,12 @@
-import type { SortType, ThemeType, LayoutsType, AppConfigType, LangType } from "~/types";
+import type {
+  SortType,
+  ThemeType,
+  LayoutsType,
+  AppConfigType,
+  LangType,
+  CharsetType,
+  ResolutionType
+} from "~/types";
 import { useSettingStorage, type UserSettingPersistedState } from "~/composables/useSettingStorage";
 
 export const useSettingManager = () => {
@@ -157,6 +165,41 @@ export const useSettingManager = () => {
     persist({ appConfig: state.appConfig });
   };
 
+  const setCharsetPreference = (charset: CharsetType) => {
+    state.charset = charset;
+    persist({ charset });
+  };
+
+  const setRdpResolutionPreference = (resolution: ResolutionType) => {
+    state.rdpResolution = resolution;
+    persist({ rdpResolution: resolution });
+  };
+
+  const setBackspacePreference = (enabled: boolean) => {
+    state.backspaceAsCtrlH = !!enabled;
+    persist({ backspaceAsCtrlH: state.backspaceAsCtrlH });
+  };
+
+  const setKeyboardLayoutPreference = (layout: string) => {
+    state.keyboardLayout = layout || "en-us-qwerty";
+    persist({ keyboardLayout: state.keyboardLayout });
+  };
+
+  const setRdpClientOptionPreference = (options: string[]) => {
+    state.rdpClientOption = Array.isArray(options) ? [...options] : [];
+    persist({ rdpClientOption: state.rdpClientOption });
+  };
+
+  const setRdpColorQualityPreference = (quality: string) => {
+    state.rdpColorQuality = quality || "32";
+    persist({ rdpColorQuality: state.rdpColorQuality });
+  };
+
+  const setRdpSmartSizePreference = (value: string) => {
+    state.rdpSmartSize = value || "0";
+    persist({ rdpSmartSize: state.rdpSmartSize });
+  };
+
   ensureHydration();
 
   const hasSiteLanguage = (site: string) => site in state.siteLanguages;
@@ -201,6 +244,13 @@ export const useSettingManager = () => {
     getDefaultLanguage,
     removeSiteLanguage,
     setPrimaryColorDark,
-    setPrimaryColorLight
+    setPrimaryColorLight,
+    setCharsetPreference,
+    setRdpResolutionPreference,
+    setBackspacePreference,
+    setKeyboardLayoutPreference,
+    setRdpClientOptionPreference,
+    setRdpColorQualityPreference,
+    setRdpSmartSizePreference
   };
 };

ui/composables/useSettingStorage.ts

@@ -1,7 +1,7 @@
 import type { UnlistenFn } from "@tauri-apps/api/event";
 import { Store } from "@tauri-apps/plugin-store";
 
-import type { AppConfigType, SortType, LangType } from "~/types";
+import type { AppConfigType, SortType, LangType, CharsetType, ResolutionType } from "~/types";
 
 export type ThemeType = "light" | "dark" | "withSystem" | "";
 export type LayoutsType = "grid" | "table";
@@ -19,6 +19,13 @@ export type UserSettingPersistedState = {
   primaryColorLight: string;
   primaryColorDark: string;
   appConfig?: AppConfigType | null;
+  charset: CharsetType;
+  rdpResolution: ResolutionType;
+  backspaceAsCtrlH: boolean;
+  keyboardLayout: string;
+  rdpClientOption: string[];
+  rdpColorQuality: string;
+  rdpSmartSize: string;
 };
 
 const STORE_PATH = "user-setting.json";
@@ -36,7 +43,14 @@ const DEFAULT_STATE: UserSettingPersistedState = {
   primaryColor: "#1ab394",
   primaryColorLight: "#1ab394",
   primaryColorDark: "#34d399",
-  appConfig: null
+  appConfig: null,
+  charset: "default",
+  rdpResolution: "auto",
+  backspaceAsCtrlH: false,
+  keyboardLayout: "en-us-qwerty",
+  rdpClientOption: [],
+  rdpColorQuality: "32",
+  rdpSmartSize: "0"
 };
 
 let storeInstance: Store | null = null;

ui/pages/setting/general.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import type { LangType } from "~/types";
+import type { LangType, CharsetType, ResolutionType } from "~/types";
 import type { SelectItem } from "@nuxt/ui";
 
 import { useUserInfoStore } from "~/store/modules/userInfo";
+import { useSettingManager } from "~/composables/useSettingManager";
 
 type LangItem = SelectItem & { id: string };
 
@@ -11,7 +12,16 @@ definePageMeta({
 });
 
 const { t, locales } = useI18n();
-const { setLang } = useSettingManager();
+const settingManager = useSettingManager();
+const {
+  setLang,
+  charset,
+  rdpResolution,
+  backspaceAsCtrlH,
+  setCharsetPreference,
+  setRdpResolutionPreference,
+  setBackspacePreference
+} = settingManager;
 
 const userInfoStore = useUserInfoStore();
 const { currentLanguage } = storeToRefs(userInfoStore);
@@ -24,8 +34,80 @@ const languageItems = computed<LangItem[]>(() => {
   }));
 });
 
+const charsetItems = computed(() => {
+  return [
+    {
+      label: t("Setting.Default"),
+      id: "default"
+    },
+    {
+      label: "UTF-8",
+      id: "utf8"
+    },
+    {
+      label: "GBK",
+      id: "gbk"
+    },
+    {
+      label: "GBK2312",
+      id: "gb2312"
+    },
+    {
+      label: "IOS-8859-1",
+      id: "ios-8859-1"
+    }
+  ];
+});
+
+const resolutionItems = computed(() => {
+  return [
+    {
+      label: t("Setting.Auto"),
+      id: "auto"
+    },
+    {
+      label: "1024x768",
+      id: "1024x768"
+    },
+    {
+      label: "1366x768",
+      id: "1366x768"
+    },
+    {
+      label: "1600x900",
+      id: "1600x900"
+    },
+    {
+      label: "1920x1080",
+      id: "1920x1080"
+    }
+  ];
+});
+
+const boolOptions = computed(() => {
+  return [
+    { label: t("Setting.Enable"), id: true },
+    { label: t("Setting.Disable"), id: false }
+  ];
+});
+
 const selectedLanguage = ref<LangType>(currentLanguage.value);
 
+const selectedCharset = computed<CharsetType>({
+  get: () => (charset.value as CharsetType) || "default",
+  set: (value) => setCharsetPreference((value || "default") as CharsetType)
+});
+
+const selectedresolution = computed<ResolutionType>({
+  get: () => (rdpResolution.value as ResolutionType) || "auto",
+  set: (value) => setRdpResolutionPreference((value || "auto") as ResolutionType)
+});
+
+const selectedEnabled = computed<boolean>({
+  get: () => backspaceAsCtrlH.value ?? false,
+  set: (value: boolean) => setBackspacePreference(!!value)
+});
+
 watch(
   () => selectedLanguage.value,
   (code: LangType) => {
@@ -56,5 +138,35 @@ watch(
 
       <USelect v-model="selectedLanguage" :items="languageItems" value-key="id" option-attribute="label" class="w-56" />
     </div>
+
+    <USeparator />
+
+    <div class="flex items-center justify-between">
+      <span class="text-sm font-medium">{{ t("Setting.Charset") }}</span>
+
+      <USelect v-model="selectedCharset" :items="charsetItems" value-key="id" option-attribute="label" class="w-56" />
+    </div>
+
+    <USeparator />
+
+    <div class="flex items-center justify-between">
+      <span class="text-sm font-medium">{{ t("Setting.TerminalBackspace") }}</span>
+
+      <USelect v-model="selectedEnabled" :items="boolOptions" value-key="id" option-attribute="label" class="w-56" />
+    </div>
+
+    <USeparator />
+
+    <div class="flex items-center justify-between">
+      <span class="text-sm font-medium">{{ t("Setting.Resolution") }}</span>
+
+      <USelect
+        v-model="selectedresolution"
+        :items="resolutionItems"
+        value-key="id"
+        option-attribute="label"
+        class="w-56"
+      />
+    </div>
   </div>
 </template>