🔨 配置 vnc 资产.

2025-07-04 17:43:59 +08:00
parent a546827432
commit 9e9c390baf
10 changed files with 417 additions and 246 deletions
--- 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;
+}
+
 /**
 * 更新主机配置
 */
--- 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;
--- 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;

 /**
 * 主机创建请求
--- 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>
--- 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>
--- 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>
--- 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
@@ -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>
--- 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,
+  },
 };

 // 系统类型
--- 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;
--- 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
@@ -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,
+  };
+}