From 9e9c390baf4f5d31846548ae361f3faaed789af0 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Fri, 4 Jul 2025 17:43:59 +0800
Subject: [PATCH] =?UTF-8?q?:hammer:=20=E9=85=8D=E7=BD=AE=20vnc=20=E8=B5=84?=
 =?UTF-8?q?=E4=BA=A7.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 orion-visor-ui/src/api/asset/host-config.ts   |  10 ++
 orion-visor-ui/src/api/asset/host-extra.ts    |   6 +
 orion-visor-ui/src/api/asset/host.ts          |   2 +-
 .../host-list/components/host-form-drawer.vue |  30 +++-
 .../host-list/components/host-form-rdp.vue    | 141 ++-------------
 .../host-list/components/host-form-ssh.vue    | 132 ++------------
 .../host-list/components/host-form-vnc.vue    | 168 ++++++++++++++++++
 .../src/views/asset/host-list/types/const.ts  |   4 +
 .../views/asset/host-list/types/form.rules.ts |  71 +++++++-
 .../asset/host-list/types/use-host-config.ts  |  99 +++++++++++
 10 files changed, 417 insertions(+), 246 deletions(-)
 create mode 100644 orion-visor-ui/src/views/asset/host-list/components/host-form-vnc.vue
 create mode 100644 orion-visor-ui/src/views/asset/host-list/types/use-host-config.ts

diff --git a/orion-visor-ui/src/api/asset/host-config.ts b/orion-visor-ui/src/api/asset/host-config.ts
index 7a089263..281d34a0 100644
--- a/orion-visor-ui/src/api/asset/host-config.ts
+++ b/orion-visor-ui/src/api/asset/host-config.ts
@@ -51,6 +51,16 @@ export interface HostRdpConfig extends HostBaseConfig {
   remoteAppArgs?: string;
 }
 
+// 主机 VNC 配置
+export interface HostVncConfig extends HostBaseConfig {
+  identityId?: number;
+  noUsername?: boolean;
+  noPassword?: boolean;
+  portForwardId?: number;
+  timezone?: string;
+  clipboardEncoding?: string;
+}
+
 /**
  * 更新主机配置
  */
diff --git a/orion-visor-ui/src/api/asset/host-extra.ts b/orion-visor-ui/src/api/asset/host-extra.ts
index 9fb2b142..08ebbbca 100644
--- a/orion-visor-ui/src/api/asset/host-extra.ts
+++ b/orion-visor-ui/src/api/asset/host-extra.ts
@@ -33,6 +33,12 @@ export interface HostRdpExtraSettingModel {
   initialProgram: string;
 }
 
+// VNC 额外配置
+export interface HostVncExtraSettingModel {
+  port: number;
+  lowBandwidthMode: boolean;
+}
+
 // 标签额外配置
 export interface HostLabelExtraSettingModel {
   alias: string;
diff --git a/orion-visor-ui/src/api/asset/host.ts b/orion-visor-ui/src/api/asset/host.ts
index 08320dd9..a01dd48e 100644
--- a/orion-visor-ui/src/api/asset/host.ts
+++ b/orion-visor-ui/src/api/asset/host.ts
@@ -5,7 +5,7 @@ import axios from 'axios';
 import qs from 'query-string';
 
 // 主机类型
-export type HostType = 'SSH' | string | undefined;
+export type HostType = 'SSH' | 'RDP' | 'VNC' | string | undefined;
 
 /**
  * 主机创建请求
diff --git a/orion-visor-ui/src/views/asset/host-list/components/host-form-drawer.vue b/orion-visor-ui/src/views/asset/host-list/components/host-form-drawer.vue
index 85dc3ed0..03ea8519 100644
--- a/orion-visor-ui/src/views/asset/host-list/components/host-form-drawer.vue
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-form-drawer.vue
@@ -51,6 +51,15 @@
                          class="form-panel"
                          :hostId="hostId" />
         </a-tab-pane>
+        <!-- VNC 配置 -->
+        <a-tab-pane v-permission="['asset:host:update-config']"
+                    key="vnc"
+                    title="VNC"
+                    :disabled="!hostId || !types.includes(HostType.VNC.value)">
+          <host-form-vnc v-if="hostId"
+                         class="form-panel"
+                         :hostId="hostId" />
+        </a-tab-pane>
       </a-tabs>
     </div>
   </a-drawer>
@@ -64,14 +73,15 @@
 
 <script lang="ts" setup>
   import { ref, nextTick } from 'vue';
-  import useVisible from '@/hooks/visible';
   import { Message } from '@arco-design/web-vue';
   import { useCacheStore } from '@/store';
   import { HostType } from '../types/const';
+  import useVisible from '@/hooks/visible';
   import HostFormInfo from './host-form-info.vue';
   import HostFormSpec from './host-form-spec.vue';
   import HostFormSsh from './host-form-ssh.vue';
   import HostFormRdp from './host-form-rdp.vue';
+  import HostFormVnc from './host-form-vnc.vue';
 
   const { visible, setVisible } = useVisible();
 
@@ -115,8 +125,8 @@
     hostId.value = id;
     hostViewUpdated.value = false;
     types.value = [];
-    checkHostGroup();
     setVisible(true);
+    checkHostGroup();
   };
 
   // 检查是否有主机分组
@@ -187,5 +197,21 @@
     width: 100%;
     height: 100%;
     padding: 0 24px;
+
+    :deep(.password-switch) {
+      width: 148px;
+      margin-left: 8px;
+    }
+
+    :deep(.password-auth-type-group) {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .arco-radio-button {
+        width: 50%;
+        text-align: center;
+      }
+    }
   }
 </style>
diff --git a/orion-visor-ui/src/views/asset/host-list/components/host-form-rdp.vue b/orion-visor-ui/src/views/asset/host-list/components/host-form-rdp.vue
index eadea2fd..f4f58da0 100644
--- a/orion-visor-ui/src/views/asset/host-list/components/host-form-rdp.vue
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-form-rdp.vue
@@ -6,7 +6,7 @@
             label-align="right"
             :label-col-props="{ span: 6 }"
             :wrapper-col-props="{ span: 18 }"
-            :rules="rdpFormRules">
+            :rules="formRules">
       <!-- 端口 -->
       <a-form-item field="port"
                    label="端口"
@@ -18,7 +18,6 @@
       <!-- 用户名 -->
       <a-form-item field="username"
                    label="用户名"
-                   :rules="usernameRules"
                    :help="HostAuthType.IDENTITY === formModel.authType ? '将使用主机身份的用户名' : undefined"
                    hide-asterisk>
         <a-input v-model="formModel.username"
@@ -30,7 +29,7 @@
                    label="认证方式"
                    hide-asterisk>
         <a-radio-group type="button"
-                       class="auth-type-group usn"
+                       class="password-auth-type-group usn"
                        v-model="formModel.authType"
                        :options="toRadioOptions(passwordAuthTypeKey)" />
       </a-form-item>
@@ -38,7 +37,6 @@
       <a-form-item v-if="HostAuthType.PASSWORD === formModel.authType"
                    field="password"
                    label="主机密码"
-                   :rules="passwordRules"
                    hide-asterisk>
         <a-input-password v-model="formModel.password"
                           :disabled="!formModel.useNewPassword && formModel.hasPassword"
@@ -160,7 +158,6 @@
                    mini>
           <a-button class="extra-button"
                     type="primary"
-                    :loading="connectLoading"
                     long
                     @click="testConnect">
             测试连接
@@ -178,7 +175,6 @@
 </script>
 
 <script lang="ts" setup>
-  import type { FieldRule } from '@arco-design/web-vue';
   import type { HostRdpConfig } from '@/api/asset/host-config';
   import { ref, onMounted } from 'vue';
   import useLoading from '@/hooks/loading';
@@ -186,10 +182,7 @@
   import { passwordAuthTypeKey, HostAuthType, HostType, timezoneKey, keyboardLayoutKey, clipboardNormalizeKey } from '../types/const';
   import { IdentityType } from '@/views/asset/host-identity/types/const';
   import { rdpFormRules } from '../types/form.rules';
-  import { Message } from '@arco-design/web-vue';
-  import { encrypt } from '@/utils/rsa';
-  import { testHostConnect } from '@/api/asset/host';
-  import { getHostConfig, updateHostConfig } from '@/api/asset/host-config';
+  import useHostConfigForm from '../types/use-host-config';
   import HostIdentitySelector from '@/components/asset/host-identity/selector/index.vue';
 
   const props = defineProps<{
@@ -197,130 +190,29 @@
   }>();
 
   const { loading, setLoading } = useLoading();
-  const { loading: connectLoading, setLoading: setConnectLoading } = useLoading();
   const { toOptions, toRadioOptions } = useDictStore();
 
-  const formRef = ref();
   const formModel = ref<HostRdpConfig>({} as HostRdpConfig);
 
-  // 用户名验证
-  const usernameRules = [{
-    validator: (value, cb) => {
-      if (value && value.length > 128) {
-        cb('用户名长度不能大于128位');
-        return;
-      }
-      if (formModel.value.authType !== HostAuthType.IDENTITY && !value) {
-        cb('请输入用户名');
-        return;
-      }
-    }
-  }] as FieldRule[];
-
-  // 密码验证
-  const passwordRules = [{
-    validator: (value, cb) => {
-      if (value && value.length > 256) {
-        cb('密码长度不能大于256位');
-        return;
-      }
-      if (formModel.value.useNewPassword && !value) {
-        cb('请输入密码');
-        return;
-      }
-    }
-  }] as FieldRule[];
-
-  // 加载配置
-  const fetchHostConfig = async () => {
-    try {
-      setLoading(true);
-      // 加载配置
-      const { data } = await getHostConfig<HostRdpConfig>({
-        hostId: props.hostId,
-        type: HostType.RDP.value,
-      });
-      formModel.value = data;
-      // 使用新密码默认为不包含密码
-      formModel.value.useNewPassword = !formModel.value.hasPassword;
-    } catch ({ message }) {
-      Message.error(`配置加载失败 ${message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 测试连接
-  const testConnect = async () => {
-    // 验证参数
-    const error = await formRef.value.validate();
-    if (error) {
-      return;
-    }
-    try {
-      setConnectLoading(true);
-      // 测试连接
-      await testHostConnect({
-        id: props.hostId,
-        type: HostType.RDP.value,
-      });
-      Message.success('连接成功');
-    } catch (e) {
-    } finally {
-      setConnectLoading(false);
-    }
-  };
-
-  // 保存配置
-  const saveConfig = async () => {
-    // 验证参数
-    const error = await formRef.value.validate();
-    if (error) {
-      return;
-    }
-    // 加密参数
-    const requestData = { ...formModel.value };
-    try {
-      requestData.password = await encrypt(formModel.value.password);
-    } catch (e) {
-      return;
-    }
-    try {
-      setLoading(true);
-      // 更新
-      await updateHostConfig({
-        hostId: props.hostId,
-        type: HostType.RDP.value,
-        config: JSON.stringify(requestData),
-      });
-      Message.success('修改成功');
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
+  const {
+    formRef,
+    formRules,
+    fetchHostConfig,
+    testConnect,
+    saveConfig,
+  } = useHostConfigForm({
+    type: HostType.RDP.value,
+    hostId: props.hostId,
+    rules: rdpFormRules,
+    formModel,
+    setLoading,
+  });
 
   onMounted(fetchHostConfig);
 
 </script>
 
 <style lang="less" scoped>
-  .auth-type-group {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-
-    :deep(.arco-radio-button) {
-      width: 50%;
-      text-align: center;
-    }
-  }
-
-  .password-switch {
-    width: 148px;
-    margin-left: 8px;
-  }
-
   .advanced-settings {
     margin-bottom: 16px;
 
@@ -339,5 +231,4 @@
       }
     }
   }
-
 </style>
diff --git a/orion-visor-ui/src/views/asset/host-list/components/host-form-ssh.vue b/orion-visor-ui/src/views/asset/host-list/components/host-form-ssh.vue
index 301fbcc1..33367941 100644
--- a/orion-visor-ui/src/views/asset/host-list/components/host-form-ssh.vue
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-form-ssh.vue
@@ -4,8 +4,9 @@
     <a-form :model="formModel"
             ref="formRef"
             label-align="right"
-            :auto-label-width="true"
-            :rules="sshFormRules">
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            :rules="formRules">
       <!-- 端口 -->
       <a-form-item field="port"
                    label="端口"
@@ -17,7 +18,6 @@
       <!-- 用户名 -->
       <a-form-item field="username"
                    label="用户名"
-                   :rules="usernameRules"
                    :help="HostAuthType.IDENTITY === formModel.authType ? '将使用主机身份的用户名' : undefined">
         <a-input v-model="formModel.username"
                  :disabled="HostAuthType.IDENTITY === formModel.authType"
@@ -35,8 +35,7 @@
       <!-- 主机密码 -->
       <a-form-item v-if="HostAuthType.PASSWORD === formModel.authType"
                    field="password"
-                   label="主机密码"
-                   :rules="passwordRules">
+                   label="主机密码">
         <a-input-password v-model="formModel.password"
                           :disabled="!formModel.useNewPassword && formModel.hasPassword"
                           placeholder="主机密码" />
@@ -105,7 +104,6 @@
                    mini>
           <a-button class="extra-button"
                     type="primary"
-                    :loading="connectLoading"
                     long
                     @click="testConnect">
             测试连接
@@ -123,17 +121,13 @@
 </script>
 
 <script lang="ts" setup>
-  import type { FieldRule } from '@arco-design/web-vue';
   import type { HostSshConfig } from '@/api/asset/host-config';
   import { ref, onMounted } from 'vue';
   import useLoading from '@/hooks/loading';
   import { useDictStore } from '@/store';
   import { sshAuthTypeKey, HostAuthType, HostType } from '../types/const';
   import { sshFormRules } from '../types/form.rules';
-  import { Message } from '@arco-design/web-vue';
-  import { encrypt } from '@/utils/rsa';
-  import { testHostConnect } from '@/api/asset/host';
-  import { getHostConfig, updateHostConfig } from '@/api/asset/host-config';
+  import useHostConfigForm from '../types/use-host-config';
   import HostIdentitySelector from '@/components/asset/host-identity/selector/index.vue';
   import HostKeySelector from '@/components/asset/host-key/selector/index.vue';
 
@@ -142,108 +136,23 @@
   }>();
 
   const { loading, setLoading } = useLoading();
-  const { loading: connectLoading, setLoading: setConnectLoading } = useLoading();
   const { toRadioOptions } = useDictStore();
 
-  const formRef = ref();
   const formModel = ref<HostSshConfig>({} as HostSshConfig);
 
-  // 用户名验证
-  const usernameRules = [{
-    validator: (value, cb) => {
-      if (value && value.length > 128) {
-        cb('用户名长度不能大于128位');
-        return;
-      }
-      if (formModel.value.authType !== HostAuthType.IDENTITY && !value) {
-        cb('请输入用户名');
-        return;
-      }
-    }
-  }] as FieldRule[];
-
-  // 密码验证
-  const passwordRules = [{
-    validator: (value, cb) => {
-      if (value && value.length > 256) {
-        cb('密码长度不能大于256位');
-        return;
-      }
-      if (formModel.value.useNewPassword && !value) {
-        cb('请输入密码');
-        return;
-      }
-    }
-  }] as FieldRule[];
-
-  // 加载配置
-  const fetchHostConfig = async () => {
-    try {
-      setLoading(true);
-      // 加载配置
-      const { data } = await getHostConfig<HostSshConfig>({
-        hostId: props.hostId,
-        type: HostType.SSH.value,
-      });
-      formModel.value = data;
-      // 使用新密码默认为不包含密码
-      formModel.value.useNewPassword = !formModel.value.hasPassword;
-    } catch ({ message }) {
-      Message.error(`配置加载失败 ${message}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 测试连接
-  const testConnect = async () => {
-    // 验证参数
-    const error = await formRef.value.validate();
-    if (error) {
-      return;
-    }
-    try {
-      setConnectLoading(true);
-      // 测试连接
-      await testHostConnect({
-        id: props.hostId,
-        type: HostType.SSH.value,
-      });
-      Message.success('连接成功');
-    } catch (e) {
-    } finally {
-      setConnectLoading(false);
-    }
-  };
-
-  // 保存配置
-  const saveConfig = async () => {
-    // 验证参数
-    const error = await formRef.value.validate();
-    if (error) {
-      return;
-    }
-    // 加密参数
-    const requestData = { ...formModel.value };
-    try {
-      requestData.password = await encrypt(formModel.value.password);
-    } catch (e) {
-      return;
-    }
-    try {
-      setLoading(true);
-      // 更新
-      await updateHostConfig({
-        hostId: props.hostId,
-        type: HostType.SSH.value,
-        config: JSON.stringify(requestData),
-      });
-      Message.success('修改成功');
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
+  const {
+    formRef,
+    formRules,
+    fetchHostConfig,
+    testConnect,
+    saveConfig,
+  } = useHostConfigForm({
+    type: HostType.SSH.value,
+    hostId: props.hostId,
+    rules: sshFormRules,
+    formModel,
+    setLoading,
+  });
 
   onMounted(fetchHostConfig);
 
@@ -261,9 +170,4 @@
     }
   }
 
-  .password-switch {
-    width: 148px;
-    margin-left: 8px;
-  }
-
 </style>
diff --git a/orion-visor-ui/src/views/asset/host-list/components/host-form-vnc.vue b/orion-visor-ui/src/views/asset/host-list/components/host-form-vnc.vue
new file mode 100644
index 00000000..330bb6df
--- /dev/null
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-form-vnc.vue
@@ -0,0 +1,168 @@
+<template>
+  <a-spin :loading="loading">
+    <!-- 表单 -->
+    <a-form :model="formModel"
+            ref="formRef"
+            label-align="right"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            :rules="formRules">
+      <!-- 端口 -->
+      <a-form-item field="port"
+                   label="端口"
+                   hide-asterisk>
+        <a-input-number v-model="formModel.port"
+                        placeholder="请输入 VNC 端口"
+                        hide-button />
+      </a-form-item>
+      <a-row>
+        <a-col :span="8">
+          <!-- 无用户名 -->
+          <a-form-item field="noUsername"
+                       label="无用户名"
+                       :label-col-props="{ span: 18 }"
+                       :wrapper-col-props="{ span: 6 }"
+                       hide-asterisk>
+            <a-switch v-model="formModel.noUsername" type="round" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <!-- 无密码 -->
+          <a-form-item field="noPassword"
+                       label="无密码"
+                       :label-col-props="{ span: 18 }"
+                       :wrapper-col-props="{ span: 6 }"
+                       hide-asterisk>
+            <a-switch v-model="formModel.noPassword" type="round" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <!-- 用户名 -->
+      <a-form-item v-if="formModel.noUsername !== true"
+                   field="username"
+                   label="用户名"
+                   :help="HostAuthType.IDENTITY === formModel.authType ? '将使用主机身份的用户名' : undefined"
+                   hide-asterisk>
+        <a-input v-model="formModel.username"
+                 :disabled="HostAuthType.IDENTITY === formModel.authType"
+                 placeholder="请输入用户名" />
+      </a-form-item>
+      <!-- 认证方式 -->
+      <a-form-item v-if="formModel.noPassword !== true"
+                   field="authType"
+                   label="认证方式"
+                   hide-asterisk>
+        <a-radio-group type="button"
+                       class="password-auth-type-group usn"
+                       v-model="formModel.authType"
+                       :options="toRadioOptions(passwordAuthTypeKey)" />
+      </a-form-item>
+      <!-- 主机密码 -->
+      <a-form-item v-if="formModel.noPassword !== true && HostAuthType.PASSWORD === formModel.authType"
+                   field="password"
+                   label="主机密码"
+                   hide-asterisk>
+        <a-input-password v-model="formModel.password"
+                          :disabled="!formModel.useNewPassword && formModel.hasPassword"
+                          placeholder="主机密码" />
+        <a-switch v-if="formModel.hasPassword"
+                  v-model="formModel.useNewPassword"
+                  class="password-switch"
+                  type="round"
+                  checked-text="使用新密码"
+                  unchecked-text="使用原密码" />
+      </a-form-item>
+      <!-- 主机身份 -->
+      <a-form-item v-if="HostAuthType.IDENTITY === formModel.authType"
+                   field="identityId"
+                   label="主机身份"
+                   hide-asterisk>
+        <host-identity-selector v-model="formModel.identityId"
+                                :type="IdentityType.PASSWORD" />
+      </a-form-item>
+      <!-- 系统时区 -->
+      <a-form-item field="timezone"
+                   label="系统时区"
+                   hide-asterisk>
+        <a-select v-model="formModel.timezone"
+                  placeholder="请选择系统时区"
+                  :options="toOptions(timezoneKey)" />
+      </a-form-item>
+      <!-- 剪切板编码 -->
+      <a-form-item field="clipboardEncoding"
+                   label="剪切板编码"
+                   hide-asterisk>
+        <a-select v-model="formModel.clipboardEncoding"
+                  placeholder="请选择剪切板编码"
+                  :options="toOptions(clipboardEncodingKey)" />
+      </a-form-item>
+      <!-- 操作 -->
+      <a-form-item style="margin-bottom: 0;">
+        <!-- 保存 -->
+        <a-button type="primary"
+                  long
+                  @click="saveConfig">
+          保存
+        </a-button>
+        <!-- 测试连接 -->
+        <a-tooltip position="tr"
+                   content="请先保存后测试连接"
+                   mini>
+          <a-button class="extra-button"
+                    type="primary"
+                    long
+                    @click="testConnect">
+            测试连接
+          </a-button>
+        </a-tooltip>
+      </a-form-item>
+    </a-form>
+  </a-spin>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'hostFormVnc'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { HostVncConfig } from '@/api/asset/host-config';
+  import { ref, onMounted } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { useDictStore } from '@/store';
+  import { passwordAuthTypeKey, HostAuthType, HostType, clipboardEncodingKey, timezoneKey } from '../types/const';
+  import { IdentityType } from '@/views/asset/host-identity/types/const';
+  import { vncFormRules } from '../types/form.rules';
+  import useHostConfigForm from '../types/use-host-config';
+  import HostIdentitySelector from '@/components/asset/host-identity/selector/index.vue';
+
+  const props = defineProps<{
+    hostId: number;
+  }>();
+
+  const { loading, setLoading } = useLoading();
+  const { toOptions, toRadioOptions } = useDictStore();
+
+  const formModel = ref<HostVncConfig>({} as HostVncConfig);
+
+  const {
+    formRef,
+    formRules,
+    fetchHostConfig,
+    testConnect,
+    saveConfig,
+  } = useHostConfigForm({
+    type: HostType.VNC.value,
+    hostId: props.hostId,
+    rules: vncFormRules,
+    formModel,
+    setLoading,
+  });
+
+  onMounted(fetchHostConfig);
+
+</script>
+
+<style lang="less" scoped>
+</style>
diff --git a/orion-visor-ui/src/views/asset/host-list/types/const.ts b/orion-visor-ui/src/views/asset/host-list/types/const.ts
index d06b91c2..7883334a 100644
--- a/orion-visor-ui/src/views/asset/host-list/types/const.ts
+++ b/orion-visor-ui/src/views/asset/host-list/types/const.ts
@@ -24,6 +24,10 @@ export const HostType = {
     value: 'RDP',
     port: 3389,
   },
+  VNC: {
+    value: 'VNC',
+    port: 5900,
+  },
 };
 
 // 系统类型
diff --git a/orion-visor-ui/src/views/asset/host-list/types/form.rules.ts b/orion-visor-ui/src/views/asset/host-list/types/form.rules.ts
index da956171..3903c283 100644
--- a/orion-visor-ui/src/views/asset/host-list/types/form.rules.ts
+++ b/orion-visor-ui/src/views/asset/host-list/types/form.rules.ts
@@ -1,4 +1,7 @@
 import type { FieldRule } from '@arco-design/web-vue';
+import type { Ref } from 'vue';
+import type { HostBaseConfig } from '@/api/asset/host-config';
+import { HostAuthType } from './const';
 
 // 主机表单规则
 export const hostFormRules = {
@@ -62,11 +65,11 @@ export const hostFormRules = {
 export const sshFormRules = {
   port: [{
     required: true,
-    message: '请输入 SSH 端口'
+    message: '请输入端口'
   }, {
     min: 1,
     max: 65535,
-    message: 'SSH 端口不合法'
+    message: '端口不合法'
   }],
   authType: [{
     required: true,
@@ -116,11 +119,11 @@ export const sshFormRules = {
 export const rdpFormRules = {
   port: [{
     required: true,
-    message: '请输入 RDP 端口'
+    message: '请输入端口'
   }, {
     min: 1,
     max: 65535,
-    message: 'RDP 端口不合法'
+    message: '端口不合法'
   }],
   authType: [{
     required: true,
@@ -132,4 +135,64 @@ export const rdpFormRules = {
   }],
 } as Record<string, FieldRule | FieldRule[]>;
 
+// vnc 表单规则
+export const vncFormRules = {
+  port: [{
+    required: true,
+    message: '请输入端口'
+  }, {
+    min: 1,
+    max: 65535,
+    message: '端口不合法'
+  }],
+  authType: [{
+    required: true,
+    message: '请选择认证方式'
+  }],
+  identityId: [{
+    required: true,
+    message: '请选择主机身份'
+  }],
+  clipboardEncoding: [{
+    required: true,
+    message: '请选择剪切板编码'
+  }],
+} as Record<string, FieldRule | FieldRule[]>;
+
+// 基础规则
+export const baseFormRules = {
+  // 用户名验证规则
+  username(formModel: Ref<HostBaseConfig>) {
+    return [{
+      validator: (value: string, cb: (msg?: string) => void) => {
+        if (value && value.length > 128) {
+          cb('用户名长度不能大于128位');
+          return;
+        }
+        if (formModel.value.authType !== HostAuthType.IDENTITY && !value) {
+          cb('请输入用户名');
+          return;
+        }
+        cb();
+      }
+    }] as FieldRule[];
+  },
+  // 密码验证规则
+  password(formModel: Ref<HostBaseConfig>) {
+    return [{
+      validator: (value: string, cb: (msg?: string) => void) => {
+        if (value && value.length > 256) {
+          cb('密码长度不能大于256位');
+          return;
+        }
+        if (formModel.value.useNewPassword && !value) {
+          cb('请输入密码');
+          return;
+        }
+        cb();
+      }
+    }] as FieldRule[];
+  }
+};
+
 export default null;
diff --git a/orion-visor-ui/src/views/asset/host-list/types/use-host-config.ts b/orion-visor-ui/src/views/asset/host-list/types/use-host-config.ts
new file mode 100644
index 00000000..34ff1af4
--- /dev/null
+++ b/orion-visor-ui/src/views/asset/host-list/types/use-host-config.ts
@@ -0,0 +1,99 @@
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import type { HostBaseConfig } from '@/api/asset/host-config';
+import { getHostConfig, updateHostConfig } from '@/api/asset/host-config';
+import type { FieldRule } from '@arco-design/web-vue';
+import { Message } from '@arco-design/web-vue';
+import { baseFormRules } from './form.rules';
+import { encrypt } from '@/utils/rsa';
+import { testHostConnect } from '@/api/asset/host';
+
+// 主机配置表单信息
+export interface UseHostConfigFormOptions<T extends HostBaseConfig> {
+  type: string;
+  hostId: number;
+  formModel: Ref<T>;
+  rules?: Record<string, FieldRule | FieldRule[]>;
+  setLoading: (loading: boolean) => void;
+}
+
+// 使用主机配置表单
+export default function useHostConfigForm<T extends HostBaseConfig>(options: UseHostConfigFormOptions<T>) {
+  const { type, hostId, formModel, rules, setLoading } = options;
+
+  const formRef = ref();
+  const formRules = ref({ ...rules, username: baseFormRules.username(formModel), password: baseFormRules.password(formModel) });
+
+  // 加载配置
+  const fetchHostConfig = async () => {
+    try {
+      setLoading(true);
+      const { data } = await getHostConfig<T>({ hostId, type });
+      data.useNewPassword = !data.hasPassword;
+      formModel.value = data;
+    } catch (err: any) {
+      Message.error('配置加载失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 测试连接
+  const testConnect = async () => {
+    if (!formRef?.value) {
+      return;
+    }
+    const error = await formRef.value.validate();
+    if (error) {
+      return;
+    }
+    try {
+      setLoading(true);
+      // 测试连接
+      await testHostConnect({ id: hostId, type });
+      Message.success('连接成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 保存配置
+  const saveConfig = async () => {
+    if (!formRef?.value) {
+      return;
+    }
+    const error = await formRef.value.validate();
+    if (error) {
+      return;
+    }
+    // 加密密码
+    const data = { ...formModel.value };
+    try {
+      data.password = await encrypt(data.password);
+    } catch (e) {
+      return;
+    }
+    try {
+      setLoading(true);
+      // 更新
+      await updateHostConfig({
+        hostId,
+        type,
+        config: JSON.stringify(data),
+      });
+      Message.success('修改成功');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    formRef,
+    formRules,
+    fetchHostConfig,
+    testConnect,
+    saveConfig,
+  };
+}