diff --git a/orion-visor-ui/src/api/asset/host-config.ts b/orion-visor-ui/src/api/asset/host-config.ts
new file mode 100644
index 00000000..97f97f32
--- /dev/null
+++ b/orion-visor-ui/src/api/asset/host-config.ts
@@ -0,0 +1,48 @@
+import axios from 'axios';
+
+/**
+ * 主机更新查询请求
+ */
+export interface HostUpdateQueryRequest {
+  hostId: number;
+  type: string;
+}
+
+/**
+ * 主机更新配置请求
+ */
+export interface HostUpdateConfigRequest {
+  hostId: number;
+  type: string;
+  config: string;
+}
+
+// 主机 SSH 配置
+export interface HostSshConfig {
+  username?: string;
+  port?: number;
+  password?: string;
+  authType?: string;
+  keyId?: number;
+  identityId?: number;
+  connectTimeout?: number;
+  charset?: string;
+  fileNameCharset?: string;
+  fileContentCharset?: string;
+  useNewPassword?: boolean;
+  hasPassword?: boolean;
+}
+
+/**
+ * 更新主机配置
+ */
+export function updateHostConfig(request: HostUpdateConfigRequest) {
+  return axios.put('/asset/host-config/update', request);
+}
+
+/**
+ * 查询主机配置
+ */
+export function getHostSshConfig<T>(request: HostUpdateQueryRequest) {
+  return axios.post<T>('/asset/host-config/get', request);
+}
diff --git a/orion-visor-ui/src/api/asset/host-extra.ts b/orion-visor-ui/src/api/asset/host-extra.ts
index a2a1e67e..23f791d2 100644
--- a/orion-visor-ui/src/api/asset/host-extra.ts
+++ b/orion-visor-ui/src/api/asset/host-extra.ts
@@ -6,7 +6,6 @@ import axios from 'axios';
 export interface HostExtraQueryRequest {
   hostId?: number;
   item: string;
-  items?: Array<string>;
 }
 
 /**
@@ -18,6 +17,41 @@ export interface HostExtraUpdateRequest {
   extra: string;
 }
 
+// SSH 额外配置
+export interface HostSshExtraSettingModel {
+  authType: string;
+  username: string;
+  keyId: number;
+  identityId: number;
+}
+
+// 标签额外配置
+export interface HostLabelExtraSettingModel {
+  alias: string;
+  color: string;
+}
+
+// 标签规格模型
+export interface HostSpecExtraModel {
+  osName: string;
+  cpuCore: number;
+  cpuFrequency: number;
+  cpuModel: string;
+  memorySize: number;
+  diskSize: number;
+  inBandwidth: number;
+  outBandwidth: number;
+  publicIpAddress: Array<string>;
+  privateIpAddress: Array<string>;
+  chargePerson: string;
+  createdTime: number;
+  expiredTime: number;
+  items: Array<{
+    label: string;
+    value: string;
+  }>;
+}
+
 /**
  * 获取主机拓展信息
  */
@@ -25,13 +59,6 @@ export function getHostExtraItem<T>(params: HostExtraQueryRequest) {
   return axios.get<T>('/asset/host-extra/get', { params });
 }
 
-/**
- * 获取多个主机拓展信息
- */
-export function getHostExtraItemList(request: HostExtraQueryRequest) {
-  return axios.post<Record<string, Record<string, any>>>('/asset/host-extra/list', request);
-}
-
 /**
  * 修改主机拓展信息
  */
diff --git a/orion-visor-ui/src/api/asset/host.ts b/orion-visor-ui/src/api/asset/host.ts
index 14fdc6cf..6e28d705 100644
--- a/orion-visor-ui/src/api/asset/host.ts
+++ b/orion-visor-ui/src/api/asset/host.ts
@@ -1,5 +1,6 @@
-import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
+import type { HostSpecExtraModel } from './host-extra';
 import type { TableData } from '@arco-design/web-vue';
+import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
 import axios from 'axios';
 import qs from 'query-string';
 
@@ -10,15 +11,15 @@ export type HostType = 'SSH' | string | undefined;
  * 主机创建请求
  */
 export interface HostCreateRequest {
-  type?: string;
+  types?: Array<string>;
   osType?: string;
+  archType?: string;
   name?: string;
   code?: string;
   address?: string;
-  port?: number;
+  description?: string;
   tags?: Array<number>;
   groupIdList?: Array<number>;
-  description?: string;
 }
 
 /**
@@ -36,14 +37,6 @@ export interface HostUpdateStatusRequest {
   status: string;
 }
 
-/**
- * 主机更新配置请求
- */
-export interface HostUpdateConfigRequest {
-  id: number;
-  config: string;
-}
-
 /**
  * 主机查询请求
  */
@@ -52,12 +45,15 @@ export interface HostQueryRequest extends Pagination, OrderDirection {
   id?: number;
   type?: string;
   osType?: string;
+  archType?: string;
   name?: string;
   code?: string;
   address?: string;
   status?: string;
   tags?: Array<number>;
   queryTag?: boolean;
+  queryGroup?: boolean;
+  querySpec?: boolean;
   description?: string;
 }
 
@@ -66,13 +62,14 @@ export interface HostQueryRequest extends Pagination, OrderDirection {
  */
 export interface HostQueryResponse extends TableData, HostQueryResponseExtra {
   id: number;
-  type: string;
-  osType?: string;
+  types: Array<string>;
+  osType: string;
+  archType: string;
   name: string;
   code: string;
   address: string;
-  port: string;
   status: string;
+  description: string;
   createTime: number;
   updateTime: number;
   creator: string;
@@ -82,7 +79,7 @@ export interface HostQueryResponse extends TableData, HostQueryResponseExtra {
   color: string;
   tags: Array<{ id: number, name: string }>;
   groupIdList: Array<number>;
-  description: string;
+  spec: HostSpecExtraModel;
 }
 
 /**
@@ -92,22 +89,15 @@ export interface HostQueryResponseExtra {
   editable: boolean;
   loading: boolean;
   modCount: number;
+  extra?: Record<string, any>;
 }
 
 /**
- * 主机 配置查询响应
+ * 主机测试连接请求
  */
-export interface HostConfigQueryResponse extends HostConfigQueryResponseExtra {
+export interface HostTestConnectRequest {
   id: number;
   type: string;
-  config: Record<string, any>;
-}
-
-/**
- * 主机配置拓展
- */
-export interface HostConfigQueryResponseExtra {
-  current: number;
 }
 
 /**
@@ -131,13 +121,6 @@ export function updateHostStatus(request: HostUpdateStatusRequest) {
   return axios.put('/asset/host/update-status', request);
 }
 
-/**
- * 通过 id 更新主机配置
- */
-export function updateHostConfig(request: HostUpdateConfigRequest) {
-  return axios.put('/asset/host/update-config', request);
-}
-
 /**
  * 查询主机
  */
@@ -152,13 +135,6 @@ export function getHostList(type: HostType) {
   return axios.get<Array<HostQueryResponse>>('/asset/host/list', { params: { type } });
 }
 
-/**
- * 通过 id 查询主机配置
- */
-export function getHostConfig(id: number) {
-  return axios.get<HostConfigQueryResponse>('/asset/host/get-config', { params: { id } });
-}
-
 /**
  * 分页查询主机
  */
@@ -191,3 +167,10 @@ export function batchDeleteHost(idList: Array<number>) {
     }
   });
 }
+
+/**
+ * 测试连接主机
+ */
+export function testHostConnect(request: HostTestConnectRequest) {
+  return axios.post('/asset/host/test-connect', request, { timeout: 60000 });
+}
diff --git a/orion-visor-ui/src/assets/images/icon/os_darwin.svg b/orion-visor-ui/src/assets/images/icon/os_darwin.svg
new file mode 100644
index 00000000..facf14e6
--- /dev/null
+++ b/orion-visor-ui/src/assets/images/icon/os_darwin.svg
@@ -0,0 +1,6 @@
+<svg width="200" height="200"
+     viewBox="0 0 1024 1024"
+     xmlns="http://www.w3.org/2000/svg">
+    <path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m109.248 331.136c-42.88-4.608-83.648 26.56-105.664 26.56-21.44 0-55.296-25.664-90.56-25.088-46.72 0.832-89.984 28.8-113.92 72.576-48.64 87.616-12.352 218.688 34.688 289.6 23.104 34.88 50.88 74.624 86.976 73.152 34.944-1.152 48.128-23.616 90.24-23.616 42.112 0 53.952 23.68 90.816 23.04 37.44-0.576 61.056-35.712 84.224-70.848 26.368-40.32 37.12-79.808 37.952-82.112a125.504 125.504 0 0 1-73.728-116.416c-0.576-72.32 56.96-108.032 59.392-109.76-32.192-49.28-82.56-56.192-100.416-57.088zM621.504 192c-27.52 1.152-61.376 19.328-81.152 43.776-17.6 21.312-33.28 55.936-28.928 89.344 30.592 1.728 62.208-17.024 81.472-40.64 19.264-24.768 32.192-58.752 28.608-92.48z"
+          fill="#3370FF"/>
+</svg>
diff --git a/orion-visor-ui/src/components/view/exec-editor/const.ts b/orion-visor-ui/src/components/view/exec-editor/const.ts
index 900613df..3cfb9d60 100644
--- a/orion-visor-ui/src/components/view/exec-editor/const.ts
+++ b/orion-visor-ui/src/components/view/exec-editor/const.ts
@@ -51,7 +51,10 @@ export const builtinParams: Array<TemplateParam> = [
     desc: '执行主机用户名'
   }, {
     name: 'osType',
-    desc: '执行主机系统版本'
+    desc: '执行主机系统类型'
+  }, {
+    name: 'archType',
+    desc: '执行主机系统架构'
   }, {
     name: 'charset',
     desc: 'SSH 编码集'
diff --git a/orion-visor-ui/src/store/modules/cache/index.ts b/orion-visor-ui/src/store/modules/cache/index.ts
index 2267e6f7..c541e2c6 100644
--- a/orion-visor-ui/src/store/modules/cache/index.ts
+++ b/orion-visor-ui/src/store/modules/cache/index.ts
@@ -6,14 +6,16 @@ import type { HostType } from '@/api/asset/host';
 import { getHostList } from '@/api/asset/host';
 import type { PreferenceType } from '@/api/user/preference';
 import { getPreference } from '@/api/user/preference';
+import type { HostGroupQueryResponse } from '@/api/asset/host-group';
+import { getHostGroupTree } from '@/api/asset/host-group';
 import usePermission from '@/hooks/permission';
 import { defineStore } from 'pinia';
+import { flatNodes } from '@/utils/tree';
 import { getUserList } from '@/api/user/user';
 import { getRoleList } from '@/api/user/role';
 import { getDictKeyList } from '@/api/system/dict-key';
 import { getHostKeyList } from '@/api/asset/host-key';
 import { getHostIdentityList } from '@/api/asset/host-identity';
-import { getHostGroupTree } from '@/api/asset/host-group';
 import { getMenuList } from '@/api/system/menu';
 import { getCurrentAuthorizedHost, getCurrentAuthorizedHostIdentity, getCurrentAuthorizedHostKey } from '@/api/asset/asset-authorized-data';
 import { getCommandSnippetGroupList } from '@/api/asset/command-snippet-group';
@@ -98,6 +100,14 @@ export default defineStore('cache', {
       return await this.load('hostGroups', getHostGroupTree, ['asset:host-group:update', 'asset:host:query'], force);
     },
 
+    // 获取主机分组列表
+    async loadHostGroupList(force = false) {
+      const arr: Array<HostGroupQueryResponse> = [];
+      // 展开节点
+      flatNodes(await this.loadHostGroupTree(force), arr);
+      return arr;
+    },
+
     // 获取主机列表
     async loadHosts(type: HostType = '', force = false) {
       return await this.load(`host_${type || 'ALL'}`, () => getHostList(type), ['asset:host:query'], force);
diff --git a/orion-visor-ui/src/utils/index.ts b/orion-visor-ui/src/utils/index.ts
index 17f9e280..81733805 100644
--- a/orion-visor-ui/src/utils/index.ts
+++ b/orion-visor-ui/src/utils/index.ts
@@ -167,6 +167,15 @@ export const sleep = (ms: number) => {
   return new Promise(resolve => setTimeout(resolve, ms));
 };
 
+// 添加后缀
+export const addSuffix = (value: any, suffix: string) => {
+  if (value === undefined || value === '') {
+    return '';
+  } else {
+    return `${value}${suffix}`;
+  }
+};
+
 /**
  * 获取当前页面的缩放值
  */
diff --git a/orion-visor-ui/src/views/asset/grant/components/host-group-grant.vue b/orion-visor-ui/src/views/asset/grant/components/host-group-grant.vue
index dba246f0..f91432e9 100644
--- a/orion-visor-ui/src/views/asset/grant/components/host-group-grant.vue
+++ b/orion-visor-ui/src/views/asset/grant/components/host-group-grant.vue
@@ -29,20 +29,17 @@
       <template #empty>
         <a-empty style="margin: 32px 0;" description="当前分组内无主机" />
       </template>
-      <!-- 主机类型 -->
-      <template #type="{ record }">
-        <a-tag class="flex-center" :color="getDictValue(hostTypeKey, record.type, 'color')">
-          <!-- 系统类型图标 -->
-          <component v-if="getHostOsIcon(record.osType)"
-                     :is="getHostOsIcon(record.osType)"
-                     class="os-icon" />
-          <!-- 主机类型 -->
-          <span>{{ getDictValue(hostTypeKey, record.type) }}</span>
-        </a-tag>
-      </template>
-      <!-- 地址 -->
-      <template #address="{ record }">
-        {{ record.address }}:{{ record.port }}
+      <!-- 主机协议 -->
+      <template #protocols="{ record }">
+        <a-space v-if="record.types?.length"
+                 style="margin-bottom: -8px;"
+                 wrap>
+          <a-tag v-for="type in record.types"
+                 :key="type"
+                 :color="getDictValue(hostTypeKey, type, 'color')">
+            {{ getDictValue(hostTypeKey, type) }}
+          </a-tag>
+        </a-space>
       </template>
     </a-table>
   </grant-layout>
@@ -65,7 +62,7 @@
   import { flatNodeKeys } from '@/utils/tree';
   import { Message } from '@arco-design/web-vue';
   import { hostColumns } from '../types/table.columns';
-  import { getHostOsIcon, hostTypeKey } from '@/views/asset/host-list/types/const';
+  import { hostTypeKey } from '@/views/asset/host-list/types/const';
   import { getHostGroupRelList } from '@/api/asset/host-group';
   import HostGroupTree from '@/components/asset/host-group/tree/index.vue';
   import GrantLayout from './grant-layout.vue';
@@ -169,19 +166,15 @@
 </script>
 
 <style lang="less" scoped>
+  @host-width: 560px;
+
   .group-main-tree {
-    width: calc(100% - 496px);
+    width: calc(100% - 16px - @host-width);
     height: 100%;
   }
 
   .group-main-hosts {
-    width: 480px;
+    width: @host-width;
     height: 100%;
-
-    .os-icon {
-      width: 16px;
-      height: 16px;
-      margin-right: 6px;
-    }
   }
 </style>
diff --git a/orion-visor-ui/src/views/asset/grant/types/const.ts b/orion-visor-ui/src/views/asset/grant/types/const.ts
index c4a72a91..767eed38 100644
--- a/orion-visor-ui/src/views/asset/grant/types/const.ts
+++ b/orion-visor-ui/src/views/asset/grant/types/const.ts
@@ -1,6 +1,9 @@
-import HostGroupGrant from '../components/host-group-grant.vue';
-import HostKeyGrant from '../components/host-key-grant.vue';
-import HostIdentityGrant from '../components/host-identity-grant.vue';
+import { defineAsyncComponent } from 'vue';
+
+// 组件
+const HostGroupGrant = defineAsyncComponent(() => import('../components/host-group-grant.vue'))
+const HostKeyGrant = defineAsyncComponent(() => import('../components/host-key-grant.vue'))
+const HostIdentityGrant = defineAsyncComponent(() => import('../components/host-identity-grant.vue'))
 
 // 路由
 export const GrantRouteName = 'assetGrant';
diff --git a/orion-visor-ui/src/views/asset/grant/types/table.columns.ts b/orion-visor-ui/src/views/asset/grant/types/table.columns.ts
index 55e5dbe2..3b4a5bbe 100644
--- a/orion-visor-ui/src/views/asset/grant/types/table.columns.ts
+++ b/orion-visor-ui/src/views/asset/grant/types/table.columns.ts
@@ -11,11 +11,11 @@ export const hostColumns = [
     align: 'left',
     fixed: 'left',
   }, {
-    title: '主机类型',
-    dataIndex: 'type',
-    slotName: 'type',
-    align: 'center',
-    width: 100,
+    title: '主机协议',
+    dataIndex: 'protocols',
+    slotName: 'protocols',
+    align: 'left',
+    width: 134,
   }, {
     title: '主机名称',
     dataIndex: 'name',
diff --git a/orion-visor-ui/src/views/asset/host-config/components/ssh-config-form.vue b/orion-visor-ui/src/views/asset/host-config/components/ssh-config-form.vue
deleted file mode 100644
index c0b591ff..00000000
--- a/orion-visor-ui/src/views/asset/host-config/components/ssh-config-form.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<template>
-  <a-card class="general-card" :body-style="{ padding: '0 16px 0 20px'}">
-    <!-- 标题 -->
-    <template #title>
-      <div class="config-title-wrapper">
-        <span class="title">SSH 配置</span>
-        <!-- 操作按钮 -->
-        <a-space>
-          <a-button size="small"
-                    @click="emits('reset')">
-            重置
-          </a-button>
-          <a-button type="primary"
-                    size="small"
-                    @click="saveConfig">
-            保存
-          </a-button>
-        </a-space>
-      </div>
-    </template>
-    <!-- 表单 -->
-    <div class="config-form-wrapper full">
-      <!-- 表单 -->
-      <a-form :model="formModel"
-              ref="formRef"
-              label-align="right"
-              :auto-label-width="true"
-              :rules="rules">
-        <!-- 用户名 -->
-        <a-form-item field="username"
-                     label="用户名"
-                     :rules="usernameRules"
-                     :help="SshAuthType.IDENTITY === formModel.authType ? '将使用主机身份的用户名' : undefined">
-          <a-input v-model="formModel.username"
-                   :disabled="SshAuthType.IDENTITY === formModel.authType"
-                   placeholder="请输入用户名" />
-        </a-form-item>
-        <!-- 认证方式 -->
-        <a-form-item field="authType"
-                     label="认证方式"
-                     :hide-asterisk="true">
-          <a-radio-group type="button"
-                         class="auth-type-group usn"
-                         v-model="formModel.authType"
-                         :options="toRadioOptions(sshAuthTypeKey)" />
-        </a-form-item>
-        <!-- 主机密码 -->
-        <a-form-item v-if="SshAuthType.PASSWORD === formModel.authType"
-                     field="password"
-                     label="主机密码"
-                     :rules="passwordRules">
-          <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="SshAuthType.KEY === formModel.authType"
-                     field="keyId"
-                     label="主机密钥"
-                     :hide-asterisk="true">
-          <host-key-selector v-model="formModel.keyId" />
-        </a-form-item>
-        <!-- 主机身份 -->
-        <a-form-item v-if="SshAuthType.IDENTITY === formModel.authType"
-                     field="identityId"
-                     label="主机身份"
-                     :hide-asterisk="true">
-          <host-identity-selector v-model="formModel.identityId" />
-        </a-form-item>
-        <!-- 连接超时时间 -->
-        <a-form-item class="mt4"
-                     field="connectTimeout"
-                     label="连接超时时间"
-                     :hide-asterisk="true">
-          <a-input-number v-model="formModel.connectTimeout"
-                          placeholder="请输入连接超时时间"
-                          hide-button>
-            <template #suffix>
-              ms
-            </template>
-          </a-input-number>
-        </a-form-item>
-        <!-- SSH 输出编码 -->
-        <a-form-item field="charset"
-                     label="SSH输出编码"
-                     :hide-asterisk="true">
-          <a-input v-model="formModel.charset" placeholder="请输入 SSH 输出编码" />
-        </a-form-item>
-        <!-- 文件名称编码 -->
-        <a-form-item field="fileNameCharset"
-                     label="文件名称编码"
-                     :hide-asterisk="true">
-          <a-input v-model="formModel.fileNameCharset" placeholder="请输入 SFTP 文件名称编码" />
-        </a-form-item>
-        <!-- 文件内容编码 -->
-        <a-form-item field="fileContentCharset"
-                     label="文件内容编码"
-                     :hide-asterisk="true">
-          <a-input v-model="formModel.fileContentCharset" placeholder="请输入 SFTP 文件内容编码" />
-        </a-form-item>
-      </a-form>
-    </div>
-  </a-card>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'sshConfigForm'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { FieldRule } from '@arco-design/web-vue';
-  import type { HostSshConfig } from '../types/const';
-  import type { HostConfigQueryResponse } from '@/api/asset/host';
-  import { ref, watch } from 'vue';
-  import { sshAuthTypeKey, SshAuthType } from '../types/const';
-  import { useDictStore } from '@/store';
-  import rules from '../types/ssh-form.rules';
-  import HostKeySelector from '@/components/asset/host-key/selector/index.vue';
-  import HostIdentitySelector from '@/components/asset/host-identity/selector/index.vue';
-
-  const { toOptions, toRadioOptions } = useDictStore();
-
-  const props = defineProps<{
-    hostConfig: HostConfigQueryResponse;
-  }>();
-
-  const emits = defineEmits(['save', 'reset']);
-
-  const formRef = ref();
-  const formModel = ref<HostSshConfig>({
-    username: undefined,
-    password: undefined,
-    authType: SshAuthType.PASSWORD,
-    keyId: undefined,
-    identityId: undefined,
-    connectTimeout: undefined,
-    charset: undefined,
-    fileNameCharset: undefined,
-    fileContentCharset: undefined,
-    useNewPassword: false,
-    hasPassword: false,
-  });
-
-  // 监听数据变化
-  watch(() => props.hostConfig.current, () => {
-    formModel.value = Object.assign({}, props.hostConfig.config);
-    // 使用新密码默认为不包含密码
-    formModel.value.useNewPassword = !formModel.value.hasPassword;
-  });
-
-  // 用户名认证
-  const usernameRules = [{
-    validator: (value, cb) => {
-      if (value && value.length > 128) {
-        cb('用户名长度不能大于128位');
-        return;
-      }
-      if (formModel.value.authType !== SshAuthType.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 saveConfig = async () => {
-    // 验证参数
-    const error = await formRef.value.validate();
-    if (error) {
-      return false;
-    }
-    // 回调
-    emits('save', { ...formModel.value });
-  };
-
-</script>
-
-<style lang="less" scoped>
-  .auth-type-group {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .password-switch {
-    width: 148px;
-    margin-left: 8px;
-  }
-
-</style>
diff --git a/orion-visor-ui/src/views/asset/host-config/drawer/index.vue b/orion-visor-ui/src/views/asset/host-config/drawer/index.vue
deleted file mode 100644
index 47fac9b8..00000000
--- a/orion-visor-ui/src/views/asset/host-config/drawer/index.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-  <a-drawer v-model:visible="visible"
-            :width="460"
-            :esc-to-close="false"
-            :mask-closable="false"
-            :unmount-on-close="true"
-            :ok-button-props="{ disabled: loading }"
-            :cancel-button-props="{ disabled: loading }"
-            :footer="false"
-            @cancel="handleCancel">
-    <!-- 标题 -->
-    <template #title>
-      <span class="host-title-text">
-        主机配置 <span class="host-name-title-text">{{ record?.name }}</span>
-      </span>
-    </template>
-    <a-spin :loading="loading" class="host-config-container">
-      <!-- SSH 配置 -->
-      <ssh-config-form class="host-config-wrapper"
-                       :host-config="hostConfig"
-                       @save="save"
-                       @reset="reset" />
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'hostConfigDrawer'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { HostConfigQueryResponse } from '@/api/asset/host';
-  import { ref } from 'vue';
-  import useVisible from '@/hooks/visible';
-  import useLoading from '@/hooks/loading';
-  import { Message } from '@arco-design/web-vue';
-  import { useCacheStore, useDictStore } from '@/store';
-  import { dictKeys } from '../types/const';
-  import { getHostConfig, updateHostConfig } from '@/api/asset/host';
-  import { HostType } from '@/views/asset/host-list/types/const';
-  import { encrypt } from '@/utils/rsa';
-  import SshConfigForm from '../components/ssh-config-form.vue';
-
-  const { visible, setVisible } = useVisible();
-  const { loading, setLoading } = useLoading();
-  const cacheStore = useCacheStore();
-
-  const record = ref({} as any);
-  const hostConfig = ref<HostConfigQueryResponse>({} as HostConfigQueryResponse);
-
-  // 打开
-  const open = async (e: any) => {
-    record.value = { ...e };
-    hostConfig.value = { config: {} } as HostConfigQueryResponse;
-    try {
-      setLoading(true);
-      setVisible(true);
-      // 加载字典值
-      const dictStore = useDictStore();
-      await dictStore.loadKeys(dictKeys);
-      // 加载配置
-      const { data } = await getHostConfig(record.value.id);
-      data.current = Date.now();
-      hostConfig.value = data;
-    } catch ({ message }) {
-      Message.error(`配置加载失败 ${message}`);
-      setVisible(false);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  defineExpose({ open });
-
-  // 保存
-  const save = async (conf: Record<string, any>) => {
-    // 加密参数
-    const newConfig = { ...conf };
-    try {
-      // 加密 SSH
-      if (record.value.type === HostType.SSH.value) {
-        newConfig.password = await encrypt(conf.password);
-      }
-    } catch (e) {
-      return;
-    }
-    try {
-      setLoading(true);
-      // 更新
-      await updateHostConfig({
-        id: hostConfig.value.id,
-        config: JSON.stringify(newConfig),
-      });
-      // 设置参数
-      hostConfig.value.config = conf;
-      Message.success('修改成功');
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 重置
-  const reset = () => {
-    // 修改 current 让子组件重新渲染
-    hostConfig.value.current = Date.now();
-  };
-
-  // 关闭
-  const handleCancel = () => {
-    setLoading(false);
-    setVisible(false);
-  };
-
-</script>
-
-<style lang="less" scoped>
-  .host-title-text {
-    width: 368px;
-    display: flex;
-    font-size: 16px;
-    line-height: 16px;
-    font-weight: 600;
-
-    .host-name-title-text {
-      max-width: 288px;
-      margin-left: 8px;
-      font-size: 14px;
-      display: inline-block;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      color: rgb(var(--arcoblue-6));
-    }
-
-    .host-name-title-text::before {
-      content: '(';
-    }
-
-    .host-name-title-text::after {
-      content: ')';
-    }
-  }
-
-  .host-config-container {
-    width: 100%;
-    min-height: 100%;
-    background-color: var(--color-fill-2);
-  }
-
-  .host-config-wrapper {
-    margin: 18px;
-  }
-
-  :deep(.config-title-wrapper) {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .title {
-      font-weight: 600;
-      user-select: none;
-    }
-  }
-
-  :deep(.config-button-group) {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-</style>
diff --git a/orion-visor-ui/src/views/asset/host-config/types/const.ts b/orion-visor-ui/src/views/asset/host-config/types/const.ts
deleted file mode 100644
index 2802b547..00000000
--- a/orion-visor-ui/src/views/asset/host-config/types/const.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// 主机 SSH 配置
-export interface HostSshConfig {
-  username?: string;
-  password?: string;
-  authType?: string;
-  keyId?: number;
-  identityId?: number;
-  connectTimeout?: number;
-  charset?: string;
-  fileNameCharset?: string;
-  fileContentCharset?: string;
-  useNewPassword?: boolean;
-  hasPassword?: boolean;
-}
-
-// 主机认证方式
-export const SshAuthType = {
-  // 密码认证
-  PASSWORD: 'PASSWORD',
-  // 密钥认证
-  KEY: 'KEY',
-  // 身份认证
-  IDENTITY: 'IDENTITY'
-};
-
-// 主机认证方式 字典项
-export const sshAuthTypeKey = 'hostSshAuthType';
-
-// 主机系统类型 字典项
-export const sshOsTypeKey = 'hostSshOsType';
-
-// 加载的字典值
-export const dictKeys = [sshAuthTypeKey, sshOsTypeKey];
diff --git a/orion-visor-ui/src/views/asset/host-config/types/ssh-form.rules.ts b/orion-visor-ui/src/views/asset/host-config/types/ssh-form.rules.ts
deleted file mode 100644
index 18cda195..00000000
--- a/orion-visor-ui/src/views/asset/host-config/types/ssh-form.rules.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { FieldRule } from '@arco-design/web-vue';
-
-export const authType = [{
-  required: true,
-  message: '请选择认证方式'
-}] as FieldRule[];
-
-export const keyId = [{
-  required: true,
-  message: '请选择主机密钥'
-}] as FieldRule[];
-
-export const identityId = [{
-  required: true,
-  message: '请选择主机身份'
-}] as FieldRule[];
-
-export const connectTimeout = [{
-  required: true,
-  message: '请输入连接超时时间'
-}, {
-  type: 'number',
-  min: 0,
-  max: 100000,
-  message: '连接超时时间需要在 0 - 100000 之间'
-}] as FieldRule[];
-
-export const charset = [{
-  required: true,
-  message: '请输入SSH输出编码'
-}, {
-  maxLength: 12,
-  message: 'SSH输出编码长度不能超过12位'
-}] as FieldRule[];
-
-export const fileNameCharset = [{
-  required: true,
-  message: '请输入文件名称编码'
-}, {
-  maxLength: 12,
-  message: '文件名称编码长度不能超过12位'
-}] as FieldRule[];
-
-export const fileContentCharset = [{
-  required: true,
-  message: '请输入SSH输出编码'
-}, {
-  maxLength: 12,
-  message: '文件内容编码长度不能超过12位'
-}] as FieldRule[];
-
-export default {
-  authType,
-  keyId,
-  identityId,
-  connectTimeout,
-  charset,
-  fileNameCharset,
-  fileContentCharset,
-} as Record<string, FieldRule | FieldRule[]>;
diff --git a/orion-visor-ui/src/views/asset/host-list/components/host-card-list.vue b/orion-visor-ui/src/views/asset/host-list/components/host-card-list.vue
index 87475375..a3de2565 100644
--- a/orion-visor-ui/src/views/asset/host-list/components/host-card-list.vue
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-card-list.vue
@@ -73,11 +73,11 @@
         <a-form-item field="address" label="主机地址">
           <a-input v-model="formModel.address" placeholder="请输入主机地址" allow-clear />
         </a-form-item>
-        <!-- 主机类型 -->
-        <a-form-item field="type" label="主机类型">
+        <!-- 主机协议 -->
+        <a-form-item field="type" label="主机协议">
           <a-select v-model="formModel.type"
                     :options="toOptions(hostTypeKey)"
-                    placeholder="请选择主机类型"
+                    placeholder="请选择主机协议"
                     allow-clear />
         </a-form-item>
         <!-- 系统类型 -->
@@ -87,6 +87,13 @@
                     placeholder="请选择系统类型"
                     allow-clear />
         </a-form-item>
+        <!-- 系统架构 -->
+        <a-form-item field="archType" label="系统架构">
+          <a-select v-model="formModel.archType"
+                    :options="toOptions(hostArchTypeKey)"
+                    placeholder="请选择系统架构"
+                    allow-clear />
+        </a-form-item>
         <!-- 主机状态 -->
         <a-form-item field="status" label="主机状态">
           <a-select v-model="formModel.status"
@@ -118,7 +125,7 @@
                    :is="getHostOsIcon(record.osType)"
                    class="os-icon" />
         <!-- 主机名称 -->
-        <span>{{ record.name }}</span>
+        <span class="host-name">{{ record.name }}</span>
       </div>
     </template>
     <!-- 编码 -->
@@ -131,24 +138,42 @@
         {{ record.description || '-' }}
       </span>
     </template>
-    <!-- 主机类型 -->
-    <template #type="{ record }">
-      <a-tag :color="getDictValue(hostTypeKey, record.type, 'color')">
-        {{ getDictValue(hostTypeKey, record.type) }}
-      </a-tag>
+    <!-- 主机协议 -->
+    <template #protocols="{ record }">
+      <a-space v-if="record.types?.length"
+               style="margin-bottom: -8px;"
+               wrap>
+        <a-tag v-for="type in record.types"
+               :key="type"
+               :color="getDictValue(hostTypeKey, type, 'color')">
+          {{ getDictValue(hostTypeKey, type) }}
+        </a-tag>
+      </a-space>
     </template>
-    <!-- 地址 -->
+    <!-- 主机地址 -->
     <template #address="{ record }">
-       <span class="span-blue text-copy host-address"
-             title="复制"
-             @click="copy(record.address)">
-          {{ record.address }}
-        </span>
-      <span class="span-blue text-copy"
+      <span class="span-blue text-copy host-address"
             title="复制"
-            @click="copy(record.port)">
-          {{ record.port }}
-        </span>
+            @click="copy(record.address)">
+          {{ record.address }}
+      </span>
+    </template>
+    <!-- 主机规格 -->
+    <template #hostSpec="{ record }">
+      <span v-if="record.spec">
+        {{
+          [
+            addSuffix(record.spec.cpuCore, 'C'),
+            addSuffix(record.spec.memorySize, 'G'),
+            addSuffix(record.spec.diskSize, 'G')
+          ].filter(Boolean).join('/') || '-'
+        }}
+      </span>
+      <span v-else>-</span>
+      <!-- 系统架构 -->
+      <span class="ml4">
+        - {{ getDictValue(hostArchTypeKey, record.archType) }}
+      </span>
     </template>
     <!-- 主机状态 -->
     <template #status="{ record }">
@@ -156,15 +181,31 @@
         {{ getDictValue(hostStatusKey, record.status) }}
       </a-tag>
     </template>
+    <!-- 主机分组 -->
+    <template #groups="{ record }">
+      <a-space v-if="record.groupIdList?.length"
+               style="margin-bottom: -8px;"
+               :wrap="true">
+        <template v-for="groupId in record.groupIdList"
+                  :key="groupId">
+          <a-tag color="green">
+            {{ hostGroupList.find(s => s.key === groupId)?.title || groupId }}
+          </a-tag>
+        </template>
+      </a-space>
+    </template>
     <!-- 标签 -->
     <template #tags="{ record }">
-      <a-space v-if="record.tags" wrap style="margin-bottom: -8px;">
+      <a-space v-if="record.tags?.length"
+               style="margin-bottom: -8px;"
+               :wrap="true">
         <a-tag v-for="tag in record.tags"
                :key="tag.id"
                :color="dataColor(tag.name, tagColor)">
           {{ tag.name }}
         </a-tag>
       </a-space>
+      <span v-else>-</span>
     </template>
     <!-- 拓展操作 -->
     <template #extra="{ record }">
@@ -178,11 +219,6 @@
                        @click="emits('openUpdate', record)">
               <span class="more-doption normal">修改</span>
             </a-doption>
-            <!-- 配置 -->
-            <a-doption v-permission="['asset:host:update-config']"
-                       @click="emits('openUpdateConfig', record)">
-              <span class="more-doption normal">配置</span>
-            </a-doption>
             <!-- 修改状态 -->
             <a-doption v-permission="['asset:host:update-status']"
                        @click="updateStatus(record as HostQueryResponse)">
@@ -203,13 +239,13 @@
               <span class="more-doption error">删除</span>
             </a-doption>
             <!-- SSH -->
-            <a-doption v-if="record.type === HostType.SSH.value"
+            <a-doption v-if="record.types.includes(HostType.SSH.value)"
                        v-permission="['asset:terminal:access']"
                        @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type: 'SSH' } })">
               <span class="more-doption normal">SSH</span>
             </a-doption>
             <!-- SFTP -->
-            <a-doption v-if="record.type === HostType.SSH.value"
+            <a-doption v-if="record.types.includes(HostType.SSH.value)"
                        v-permission="['asset:terminal:access']"
                        @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type: 'SFTP' } })">
               <span class="more-doption normal">SFTP</span>
@@ -229,23 +265,24 @@
 
 <script lang="ts" setup>
   import type { HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
+  import type { HostGroupQueryResponse } from '@/api/asset/host-group';
   import { useCardPagination, useCardColLayout, useCardFieldConfig } from '@/hooks/card';
   import { computed, reactive, ref, onMounted } from 'vue';
-  import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
+  import { addSuffix, dataColor, objectTruthKeyCount, resetObject } from '@/utils';
   import { deleteHost, getHostPage, updateHostStatus } from '@/api/asset/host';
   import { Message, Modal } from '@arco-design/web-vue';
-  import { getHostOsIcon, hostOsTypeKey, hostStatusKey, HostType, hostTypeKey, TableName, tagColor } from '../types/const';
+  import { getHostOsIcon, hostOsTypeKey, hostArchTypeKey, hostStatusKey, HostType, hostTypeKey, tagColor, TableName } from '../types/const';
   import { copy } from '@/hooks/copy';
   import { useCacheStore, useDictStore } from '@/store';
+  import { useQueryOrder, ASC } from '@/hooks/query-order';
   import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
   import { useRouter } from 'vue-router';
   import useLoading from '@/hooks/loading';
   import fieldConfig from '../types/card.fields';
-  import { ASC, useQueryOrder } from '@/hooks/query-order';
   import { openNewRoute } from '@/router';
   import TagMultiSelector from '@/components/meta/tag/multi-selector/index.vue';
 
-  const emits = defineEmits(['openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup', 'openCopy']);
+  const emits = defineEmits(['openAdd', 'openUpdate', 'openHostGroup', 'openCopy']);
 
   const router = useRouter();
   const cacheStore = useCacheStore();
@@ -257,6 +294,7 @@
   const { toOptions, getDictValue, toggleDictValue, toggleDict } = useDictStore();
 
   const list = ref<HostQueryResponse[]>([]);
+  const hostGroupList = ref<Array<HostGroupQueryResponse>>([]);
   const formRef = ref();
   const formModel = reactive<HostQueryRequest>({
     searchValue: undefined,
@@ -266,15 +304,18 @@
     address: undefined,
     type: undefined,
     osType: undefined,
+    archType: undefined,
     status: undefined,
     tags: undefined,
     description: undefined,
+    queryGroup: true,
     queryTag: true,
+    querySpec: true,
   });
 
   // 条件数量
   const filterCount = computed(() => {
-    return objectTruthKeyCount(formModel, ['searchValue', 'queryTag']);
+    return objectTruthKeyCount(formModel, ['searchValue', 'queryTag', 'queryGroup', 'querySpec']);
   });
 
   // 更新状态
@@ -340,7 +381,7 @@
 
   // 重置条件
   const reset = () => {
-    resetObject(formModel, ['queryTag']);
+    resetObject(formModel, ['queryTag', 'queryGroup', 'querySpec']);
     fetchCardData();
   };
 
@@ -364,7 +405,10 @@
     doFetchCardData({ page, limit, ...form });
   };
 
-  onMounted(() => {
+  onMounted(async () => {
+    // 加载分组数据
+    hostGroupList.value = await useCacheStore().loadHostGroupList();
+    // 加载主机数据
     fetchCardData();
   });
 
@@ -381,10 +425,9 @@
       height: 20px;
       margin-right: 6px;
     }
-  }
 
-  .host-address::after {
-    content: ':';
-    user-select: text;
+    .host-name {
+      font-size: 16px;
+    }
   }
 </style>
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
new file mode 100644
index 00000000..7def7e4a
--- /dev/null
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-form-drawer.vue
@@ -0,0 +1,179 @@
+<template>
+  <a-drawer v-model:visible="visible"
+            :title="title"
+            :width="600"
+            :esc-to-close="false"
+            :mask-closable="false"
+            :unmount-on-close="true"
+            :footer="false"
+            @close="handleClose">
+    <div class="host-from-container">
+      <a-tabs v-model:active-key="activeTab"
+              class=""
+              type="rounded"
+              direction="vertical"
+              :justify="true"
+              :lazy-load="true">
+        <!-- 主机信息 -->
+        <a-tab-pane v-permission="['asset:host:update']"
+                    key="info"
+                    title="主机信息">
+          <host-form-info ref="infoRef"
+                          class="form-panel"
+                          @change-type="(ts: string[]) => types = ts"
+                          @updated="updateHostInfo" />
+        </a-tab-pane>
+        <!-- 规格配置 -->
+        <a-tab-pane v-permission="['asset:host:update']"
+                    key="spec"
+                    title="规格配置"
+                    :disabled="!hostId">
+          <host-form-spec v-if="hostId"
+                          class="form-panel"
+                          :hostId="hostId"
+                          @updated="incrUpdatedCount" />
+        </a-tab-pane>
+        <!-- SSH 配置 -->
+        <a-tab-pane v-permission="['asset:host:update-config']"
+                    key="ssh"
+                    title="SSH"
+                    :disabled="!hostId || !types.includes(HostType.SSH.value)">
+          <host-form-ssh v-if="hostId"
+                         class="form-panel"
+                         :hostId="hostId" />
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </a-drawer>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'hostFormDrawer'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { HostUpdateRequest } from '@/api/asset/host';
+  import { ref, nextTick } from 'vue';
+  import useVisible from '@/hooks/visible';
+  import { Message } from '@arco-design/web-vue';
+  import { useCacheStore, useDictStore } from '@/store';
+  import { HostType } from '../types/const';
+  import { useCounter } from '@vueuse/core';
+  import HostFormInfo from './host-form-info.vue';
+  import HostFormSsh from './host-form-ssh.vue';
+  import HostFormSpec from './host-form-spec.vue';
+
+  const { toOptions } = useDictStore();
+  const { count: updatedCount, inc: incrUpdatedCount, reset: resetCounter } = useCounter();
+  const { visible, setVisible } = useVisible();
+
+  const activeTab = ref<string>('info');
+  const title = ref<string>();
+  const hostId = ref<number>();
+  const types = ref<string[]>([]);
+  const infoRef = ref();
+  const formRef = ref();
+  const formModel = ref<HostUpdateRequest>({});
+
+  const emits = defineEmits(['reload']);
+
+  // 打开新增
+  const openAdd = () => {
+    init('添加主机', undefined);
+    nextTick(() => {
+      infoRef.value.openAdd();
+    });
+  };
+
+  // 打开修改
+  const openUpdate = (id: number) => {
+    init('修改主机', id);
+    nextTick(() => {
+      infoRef.value.openUpdate(id);
+    });
+  };
+
+  // 打开复制
+  const openCopy = (id: number) => {
+    init('复制主机', id);
+    nextTick(() => {
+      infoRef.value.openCopy(id);
+    });
+  };
+
+  // 初始化
+  const init = (_title: string, id: number | undefined) => {
+    title.value = _title;
+    activeTab.value = 'info';
+    hostId.value = id;
+    types.value = [];
+    checkHostGroup();
+    resetCounter();
+    setVisible(true);
+  };
+
+  // 检查是否有主机分组
+  const checkHostGroup = () => {
+    useCacheStore().loadHostGroupTree().then(s => {
+      if (!s?.length) {
+        Message.warning('请先配置主机分组');
+        setVisible(false);
+      }
+    });
+  };
+
+  defineExpose({ openAdd, openUpdate, openCopy });
+
+  // 更新主机信息
+  const updateHostInfo = (id: number) => {
+    hostId.value = id;
+    incrUpdatedCount();
+  };
+
+  // 处理关闭
+  const handleClose = () => {
+    if (updatedCount.value) {
+      emits('reload');
+    }
+  };
+
+</script>
+
+<style lang="less" scoped>
+  @drawer-width: 600px;
+  @nav-width: 104px;
+
+  .host-from-container {
+    height: 100%;
+    width: 100%;
+    padding: 16px 0 16px 16px;
+    display: flex;
+    overflow: hidden;
+
+    :deep(.arco-tabs-pane) {
+      border-left: 1px var(--color-neutral-3) solid;
+    }
+
+    :deep(.arco-tabs-nav) {
+      user-select: none;
+    }
+
+    :deep(.arco-tabs-content) {
+      width: @drawer-width - @nav-width;
+      overflow: auto;
+    }
+
+    :deep(.extra-button) {
+      margin-left: 8px;
+      width: 168px;
+    }
+  }
+
+  .form-panel {
+    width: 100%;
+    height: 100%;
+    padding: 0 24px;
+  }
+</style>
diff --git a/orion-visor-ui/src/views/asset/host-list/components/host-form-info.vue b/orion-visor-ui/src/views/asset/host-list/components/host-form-info.vue
new file mode 100644
index 00000000..95598396
--- /dev/null
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-form-info.vue
@@ -0,0 +1,213 @@
+<template>
+  <a-spin :loading="loading">
+    <a-form :model="formModel"
+            ref="formRef"
+            label-align="right"
+            :auto-label-width="true"
+            :rules="hostFormRules">
+      <!-- 主机协议 -->
+      <a-form-item field="types" label="主机协议">
+        <a-select v-model="formModel.types"
+                  placeholder="请选择支持的主机协议"
+                  :options="toOptions(hostTypeKey)"
+                  multiple
+                  allow-clear />
+      </a-form-item>
+      <!-- 系统类型 -->
+      <a-form-item field="osType" label="系统类型">
+        <a-select v-model="formModel.osType"
+                  placeholder="请选择系统类型"
+                  :options="toOptions(hostOsTypeKey)"
+                  allow-clear />
+      </a-form-item>
+      <!-- 系统架构 -->
+      <a-form-item field="archType" label="系统架构">
+        <a-select v-model="formModel.archType"
+                  placeholder="请选择系统架构"
+                  :options="toOptions(hostArchTypeKey)"
+                  allow-clear />
+      </a-form-item>
+      <!-- 主机名称 -->
+      <a-form-item field="name" label="主机名称">
+        <a-input v-model="formModel.name"
+                 placeholder="请输入主机名称"
+                 allow-clear />
+      </a-form-item>
+      <!-- 主机编码 -->
+      <a-form-item field="code" label="主机编码">
+        <a-input v-model="formModel.code"
+                 placeholder="请输入主机编码 (定义主机唯一值)"
+                 allow-clear />
+      </a-form-item>
+      <!-- 主机地址 -->
+      <a-form-item field="address" label="主机地址">
+        <a-input v-model="formModel.address"
+                 placeholder="请输入主机地址"
+                 allow-clear />
+      </a-form-item>
+      <!-- 主机分组 -->
+      <a-form-item field="groupIdList" label="主机分组">
+        <host-group-tree-selector v-model="formModel.groupIdList"
+                                  placeholder="请选择主机分组" />
+      </a-form-item>
+      <!-- 主机标签 -->
+      <a-form-item field="tags" label="主机标签">
+        <tag-multi-selector v-model="formModel.tags"
+                            type="HOST"
+                            :limit="5"
+                            :tag-color="tagColor"
+                            :allow-create="true"
+                            placeholder="请选择主机标签"
+                            @on-limited="onLimitedTag" />
+      </a-form-item>
+      <!-- 主机描述 -->
+      <a-form-item field="description" label="主机描述">
+        <a-textarea v-model="formModel.description"
+                    placeholder="请输入主机描述"
+                    :auto-size="{ minRows: 3, maxRows: 3}"
+                    allow-clear />
+      </a-form-item>
+      <!-- 保存 -->
+      <a-form-item style="margin-bottom: 0;">
+        <a-button type="primary"
+                  long
+                  @click="saveHost">
+          保存
+        </a-button>
+      </a-form-item>
+    </a-form>
+  </a-spin>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'hostFormInfo'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { HostUpdateRequest } from '@/api/asset/host';
+  import { ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { hostFormRules } from '../types/form.rules';
+  import { createHost, getHost, updateHost } from '@/api/asset/host';
+  import { Message } from '@arco-design/web-vue';
+  import { pick } from 'lodash';
+  import { tagColor, hostTypeKey, hostOsTypeKey, HostOsType, hostArchTypeKey } from '../types/const';
+  import { useDictStore } from '@/store';
+  import TagMultiSelector from '@/components/meta/tag/multi-selector/index.vue';
+  import HostGroupTreeSelector from '@/components/asset/host-group/tree-selector/index.vue';
+
+  const emits = defineEmits(['changeType', 'updated']);
+
+  const { toOptions } = useDictStore();
+  const { loading, setLoading } = useLoading();
+
+  const defaultForm = (): HostUpdateRequest => {
+    return {
+      id: undefined,
+      osType: HostOsType.LINUX.value,
+      archType: 'AMD64',
+      types: [],
+      name: undefined,
+      code: undefined,
+      address: undefined,
+      tags: undefined,
+      groupIdList: undefined,
+      description: undefined,
+    };
+  };
+
+  const formRef = ref();
+  const formModel = ref<HostUpdateRequest>({});
+
+  // 打开新增
+  const openAdd = () => {
+    renderForm({ ...defaultForm() });
+  };
+
+  // 打开修改
+  const openUpdate = async (id: number) => {
+    renderForm({ ...defaultForm() });
+    await fetchHostRender(id);
+  };
+
+  // 打开复制
+  const openCopy = async (id: number) => {
+    renderForm({ ...defaultForm() });
+    await fetchHostRender(id);
+  };
+
+  defineExpose({ openAdd, openUpdate, openCopy });
+
+  // 渲染主机
+  const fetchHostRender = async (id: number) => {
+    try {
+      setLoading(true);
+      const { data } = await getHost(id);
+      const detail = Object.assign({} as Record<string, any>,
+        pick(data, 'id', 'types', 'osType', 'archType', 'name', 'code', 'address', 'port', 'status', 'groupIdList', 'description'));
+      // tag
+      const tags = (data.tags || []).map(s => s.id);
+      // 渲染
+      renderForm({ ...detail, tags });
+      // 响应类型
+      emits('changeType', data.types);
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 渲染表单
+  const renderForm = (record: any) => {
+    // 渲染表单
+    formModel.value = Object.assign({}, record);
+  };
+
+  // tag 超出所选限制
+  const onLimitedTag = (count: number, message: string) => {
+    formRef.value.setFields({
+      tags: {
+        status: 'error',
+        message
+      }
+    });
+    // 因为输入框已经限制数量 这里只做提示
+    setTimeout(() => {
+      formRef.value.clearValidate('tags');
+    }, 3000);
+  };
+
+  // 保存
+  const saveHost = async () => {
+    setLoading(true);
+    try {
+      // 验证参数
+      const error = await formRef.value.validate();
+      if (error) {
+        return;
+      }
+      if (!formModel.value.id) {
+        // 新增
+        const { data } = await createHost(formModel.value);
+        Message.success('创建成功');
+        emits('updated', data);
+      } else {
+        // 修改
+        await updateHost(formModel.value);
+        Message.success('修改成功');
+        emits('updated', formModel.value.id);
+      }
+      emits('changeType', formModel.value.types);
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/orion-visor-ui/src/views/asset/host-list/components/host-form-modal.vue b/orion-visor-ui/src/views/asset/host-list/components/host-form-modal.vue
deleted file mode 100644
index 961173a9..00000000
--- a/orion-visor-ui/src/views/asset/host-list/components/host-form-modal.vue
+++ /dev/null
@@ -1,243 +0,0 @@
-<template>
-  <a-modal v-model:visible="visible"
-           modal-class="modal-form-large"
-           title-align="start"
-           :title="title"
-           :top="80"
-           :align-center="false"
-           :draggable="true"
-           :mask-closable="false"
-           :unmount-on-close="true"
-           :ok-button-props="{ disabled: loading }"
-           :cancel-button-props="{ disabled: loading }"
-           :on-before-ok="handlerOk"
-           @close="handleClose">
-    <a-spin class="full" :loading="loading">
-      <a-form :model="formModel"
-              ref="formRef"
-              label-align="right"
-              :auto-label-width="true"
-              :rules="formRules">
-        <!-- 主机类型 -->
-        <a-form-item v-if="isAddHandle"
-                     field="type"
-                     label="主机类型"
-                     help="主机创建后, 类型则无法修改">
-          <a-select v-model="formModel.type"
-                    placeholder="请选择主机类型"
-                    :options="toOptions(hostTypeKey)"
-                    allow-clear />
-        </a-form-item>
-        <!-- 系统类型 -->
-        <a-form-item field="osType" label="系统类型">
-          <a-select v-model="formModel.osType"
-                    placeholder="请选择系统类型"
-                    :options="toOptions(hostOsTypeKey)"
-                    allow-clear />
-        </a-form-item>
-        <!-- 主机名称 -->
-        <a-form-item field="name" label="主机名称">
-          <a-input v-model="formModel.name"
-                   placeholder="请输入主机名称"
-                   allow-clear />
-        </a-form-item>
-        <!-- 主机编码 -->
-        <a-form-item field="code" label="主机编码">
-          <a-input v-model="formModel.code"
-                   placeholder="请输入主机编码 (定义主机唯一值)"
-                   allow-clear />
-        </a-form-item>
-        <!-- 主机地址 -->
-        <a-form-item field="address" label="主机地址">
-          <a-input v-model="formModel.address"
-                   placeholder="请输入主机地址"
-                   allow-clear />
-        </a-form-item>
-        <!-- 主机端口 -->
-        <a-form-item field="port" label="主机端口">
-          <a-input-number v-model="formModel.port"
-                          placeholder="请输入主机端口"
-                          hide-button
-                          allow-clear />
-        </a-form-item>
-        <!-- 主机分组 -->
-        <a-form-item field="groupIdList" label="主机分组">
-          <host-group-tree-selector v-model="formModel.groupIdList"
-                                    placeholder="请选择主机分组" />
-        </a-form-item>
-        <!-- 主机标签 -->
-        <a-form-item field="tags" label="主机标签">
-          <tag-multi-selector v-model="formModel.tags"
-                              type="HOST"
-                              :limit="5"
-                              :tag-color="tagColor"
-                              :allow-create="true"
-                              placeholder="请选择主机标签"
-                              @on-limited="onLimitedTag" />
-        </a-form-item>
-        <!-- 主机描述 -->
-        <a-form-item field="description" label="主机描述">
-          <a-textarea v-model="formModel.description"
-                      placeholder="请输入主机描述"
-                      allow-clear />
-        </a-form-item>
-      </a-form>
-    </a-spin>
-  </a-modal>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'hostFormModal'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { HostUpdateRequest } from '@/api/asset/host';
-  import { ref } from 'vue';
-  import useLoading from '@/hooks/loading';
-  import useVisible from '@/hooks/visible';
-  import formRules from '../types/form.rules';
-  import { createHost, getHost, updateHost } from '@/api/asset/host';
-  import { Message } from '@arco-design/web-vue';
-  import { pick } from 'lodash';
-  import { tagColor, HostType, hostTypeKey, hostOsTypeKey, HostOsType } from '../types/const';
-  import { useDictStore } from '@/store';
-  import TagMultiSelector from '@/components/meta/tag/multi-selector/index.vue';
-  import HostGroupTreeSelector from '@/components/asset/host-group/tree-selector/index.vue';
-
-  const { toOptions } = useDictStore();
-  const { visible, setVisible } = useVisible();
-  const { loading, setLoading } = useLoading();
-
-  const title = ref<string>();
-  const isAddHandle = ref<boolean>(true);
-
-  const defaultForm = (): HostUpdateRequest => {
-    return {
-      id: undefined,
-      type: HostType.SSH.value,
-      osType: HostOsType.LINUX.value,
-      name: undefined,
-      code: undefined,
-      address: undefined,
-      port: HostType.SSH.port,
-      tags: undefined,
-      groupIdList: undefined,
-      description: undefined,
-    };
-  };
-
-  const formRef = ref();
-  const formModel = ref<HostUpdateRequest>({});
-
-  const emits = defineEmits(['added', 'updated']);
-
-  // 打开新增
-  const openAdd = () => {
-    title.value = '添加主机';
-    isAddHandle.value = true;
-    renderForm({ ...defaultForm() });
-    setVisible(true);
-  };
-
-  // 打开修改
-  const openUpdate = async (id: number) => {
-    title.value = '修改主机';
-    isAddHandle.value = false;
-    renderForm({ ...defaultForm() });
-    setVisible(true);
-    await fetchHostRender(id);
-  };
-
-  // 打开复制
-  const openCopy = async (id: number) => {
-    title.value = '复制主机';
-    isAddHandle.value = true;
-    renderForm({ ...defaultForm() });
-    setVisible(true);
-    await fetchHostRender(id);
-  };
-
-  // 渲染主机
-  const fetchHostRender = async (id: number) => {
-    try {
-      setLoading(true);
-      const { data } = await getHost(id);
-      const detail = Object.assign({} as Record<string, any>,
-        pick(data, 'id', 'type', 'osType', 'name', 'code', 'address', 'port', 'status', 'groupIdList', 'description'));
-      // tag
-      const tags = (data.tags || []).map(s => s.id);
-      // 渲染
-      renderForm({ ...detail, tags });
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 渲染表单
-  const renderForm = (record: any) => {
-    formModel.value = Object.assign({}, record);
-  };
-
-  defineExpose({ openAdd, openUpdate, openCopy });
-
-  // tag 超出所选限制
-  const onLimitedTag = (count: number, message: string) => {
-    formRef.value.setFields({
-      tags: {
-        status: 'error',
-        message
-      }
-    });
-    // 因为输入框已经限制数量 这里只做提示
-    setTimeout(() => {
-      formRef.value.clearValidate('tags');
-    }, 3000);
-  };
-
-  // 确定
-  const handlerOk = async () => {
-    setLoading(true);
-    try {
-      // 验证参数
-      const error = await formRef.value.validate();
-      if (error) {
-        return false;
-      }
-      if (isAddHandle.value) {
-        // 新增
-        await createHost(formModel.value);
-        Message.success('创建成功');
-        emits('added');
-      } else {
-        // 修改
-        await updateHost(formModel.value);
-        Message.success('修改成功');
-        emits('updated');
-      }
-      // 清空
-      handlerClear();
-    } catch (e) {
-      return false;
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 关闭
-  const handleClose = () => {
-    handlerClear();
-  };
-
-  // 清空
-  const handlerClear = () => {
-    setLoading(false);
-  };
-
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/orion-visor-ui/src/views/asset/host-list/components/host-form-spec.vue b/orion-visor-ui/src/views/asset/host-list/components/host-form-spec.vue
new file mode 100644
index 00000000..f6d7792c
--- /dev/null
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-form-spec.vue
@@ -0,0 +1,337 @@
+<template>
+  <a-spin :loading="loading">
+    <!-- 表单 -->
+    <a-descriptions :column="1" bordered>
+      <!-- 系统名称 -->
+      <a-descriptions-item label="系统名称" :span="2">
+        <a-input v-if="editing"
+                 v-model="formModel.osName"
+                 class="input"
+                 size="mini"
+                 allow-clear />
+        <span v-else class="text">{{ formModel.osName }}</span>
+      </a-descriptions-item>
+      <!-- CPU型号 -->
+      <a-descriptions-item label="CPU型号" :span="2">
+        <a-input v-if="editing"
+                 v-model="formModel.cpuModel"
+                 class="input"
+                 size="mini"
+                 allow-clear />
+        <span v-else class="text">{{ formModel.cpuModel }}</span>
+      </a-descriptions-item>
+      <!-- CPU核心数 -->
+      <a-descriptions-item label="CPU核心数">
+        <a-input-number v-if="editing"
+                        v-model="formModel.cpuCore"
+                        class="input"
+                        size="mini"
+                        hide-button
+                        allow-clear />
+        <span v-else class="text">{{ formModel.cpuCore }}</span>
+      </a-descriptions-item>
+      <!-- CPU速率 -->
+      <a-descriptions-item label="CPU速率">
+        <a-input-number v-if="editing"
+                        v-model="formModel.cpuFrequency"
+                        class="input"
+                        size="mini"
+                        hide-button
+                        allow-clear>
+          <template #suffix>
+            GHz
+          </template>
+        </a-input-number>
+        <span v-else class="text">{{ addSuffix(formModel.cpuFrequency, 'GHz') }}</span>
+      </a-descriptions-item>
+      <!-- 内存 -->
+      <a-descriptions-item label="内存">
+        <a-input-number v-if="editing"
+                        v-model="formModel.memorySize"
+                        class="input"
+                        size="mini"
+                        hide-button
+                        allow-clear>
+          <template #suffix>
+            G
+          </template>
+        </a-input-number>
+        <span v-else class="text">{{ addSuffix(formModel.memorySize, 'G') }}</span>
+      </a-descriptions-item>
+      <!-- 硬盘 -->
+      <a-descriptions-item label="硬盘">
+        <a-input-number v-if="editing"
+                        v-model="formModel.diskSize"
+                        class="input"
+                        size="mini"
+                        hide-button
+                        allow-clear>
+          <template #suffix>
+            G
+          </template>
+        </a-input-number>
+        <span v-else class="text">{{ addSuffix(formModel.diskSize, 'G') }}</span>
+      </a-descriptions-item>
+      <!-- 上行带宽 -->
+      <a-descriptions-item label="上行带宽">
+        <a-input-number v-if="editing"
+                        v-model="formModel.inBandwidth"
+                        class="input"
+                        size="mini"
+                        hide-button
+                        allow-clear>
+          <template #suffix>
+            M
+          </template>
+        </a-input-number>
+        <span v-else class="text">{{ addSuffix(formModel.inBandwidth, 'M') }}</span>
+      </a-descriptions-item>
+      <!-- 下行带宽 -->
+      <a-descriptions-item label="下行带宽">
+        <a-input-number v-if="editing"
+                        v-model="formModel.outBandwidth"
+                        class="input"
+                        size="mini"
+                        hide-button
+                        allow-clear>
+          <template #suffix>
+            M
+          </template>
+        </a-input-number>
+        <span v-else class="text">{{ addSuffix(formModel.outBandwidth, 'M') }}</span>
+      </a-descriptions-item>
+      <!-- 公网地址 -->
+      <a-descriptions-item label="公网地址" :span="2">
+        <a-select v-if="editing"
+                  v-model="formModel.publicIpAddress"
+                  class="input"
+                  size="mini"
+                  multiple
+                  hide-button
+                  allow-create
+                  allow-clear />
+        <a-space v-else-if="formModel.publicIpAddress?.length"
+                 class="text"
+                 style="margin-bottom: -8px;"
+                 wrap>
+          <a-tag v-for="addr in formModel.publicIpAddress">
+            {{ addr }}
+          </a-tag>
+        </a-space>
+        <span v-else class="text" />
+      </a-descriptions-item>
+      <!-- 私网地址 -->
+      <a-descriptions-item label="私网地址" :span="2">
+        <a-select v-if="editing"
+                  v-model="formModel.privateIpAddress"
+                  class="input"
+                  size="mini"
+                  multiple
+                  hide-button
+                  allow-create
+                  allow-clear />
+        <a-space v-else-if="formModel.privateIpAddress?.length"
+                 class="text"
+                 style="margin-bottom: -8px;"
+                 wrap>
+          <a-tag v-for="addr in formModel.privateIpAddress">
+            {{ addr }}
+          </a-tag>
+        </a-space>
+        <span v-else class="text" />
+      </a-descriptions-item>
+      <!-- 负责人 -->
+      <a-descriptions-item label="负责人" :span="2">
+        <a-input v-if="editing"
+                 v-model="formModel.chargePerson"
+                 class="input"
+                 size="mini"
+                 allow-clear />
+        <span v-else class="text">{{ formModel.chargePerson }}</span>
+      </a-descriptions-item>
+      <!-- 创建时间 -->
+      <a-descriptions-item label="创建时间" :span="2">
+        <a-date-picker v-if="editing"
+                       v-model="formModel.createdTime"
+                       class="input"
+                       size="mini"
+                       placeholder=" "
+                       allow-clear />
+        <span v-else-if="formModel.createdTime" class="text">{{ dateFormat(new Date(formModel.createdTime), 'yyyy-MM-dd') }}</span>
+        <span v-else class="text" />
+      </a-descriptions-item>
+      <!-- 到期时间 -->
+      <a-descriptions-item label="到期时间" :span="2">
+        <a-date-picker v-if="editing"
+                       v-model="formModel.expiredTime"
+                       value-format="timestamp"
+                       class="input"
+                       size="mini"
+                       placeholder=" "
+                       allow-clear />
+        <span v-else-if="formModel.expiredTime" class="text">{{ dateFormat(new Date(formModel.expiredTime), 'yyyy-MM-dd') }}</span>
+        <span v-else class="text" />
+      </a-descriptions-item>
+      <!-- 自定义规格 -->
+      <template v-if="formModel.items?.length">
+        <a-descriptions-item v-for="(item, index) in formModel.items"
+                             :key="index"
+                             :span="2">
+          <template #label>
+            <a-input v-if="editing"
+                     v-model="item.label"
+                     value-format="timestamp"
+                     class="label"
+                     size="mini"
+                     allow-clear />
+            <span v-else class="label">{{ item.label }}</span>
+          </template>
+          <!-- 值 -->
+          <div class="item-wrapper">
+            <a-input v-if="editing"
+                     v-model="item.value"
+                     class="input"
+                     size="mini"
+                     allow-clear />
+            <span v-else class="text">{{ item.value }}</span>
+            <!-- 移除 -->
+            <a-button v-if="editing"
+                      class="ml4"
+                      size="mini"
+                      type="text"
+                      @click="removeSpec(index)">
+              移除
+            </a-button>
+          </div>
+        </a-descriptions-item>
+      </template>
+    </a-descriptions>
+    <!-- 操作 -->
+    <div class="actions">
+      <!-- 编辑 -->
+      <a-button v-if="!editing"
+                type="primary"
+                long
+                @click="toggleEditing()">
+        编辑
+      </a-button>
+      <!-- 保存 -->
+      <a-button v-else
+                type="primary"
+                long
+                @click="saveSpec">
+        保存
+      </a-button>
+      <!-- 新增规格 -->
+      <a-button v-if="editing"
+                class="extra-button"
+                type="primary"
+                long
+                @click="addSpec">
+        新增规格
+      </a-button>
+    </div>
+  </a-spin>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'hostFormSpec'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { HostSpecExtraModel } from '@/api/asset/host-extra';
+  import { onMounted, ref } from 'vue';
+  import { addSuffix, dateFormat } from '@/utils';
+  import { useToggle } from '@vueuse/core';
+  import useLoading from '@/hooks/loading';
+  import { getHostExtraItem, updateHostExtra } from '@/api/asset/host-extra';
+
+  const props = defineProps<{
+    hostId: number;
+  }>();
+  const emits = defineEmits(['updated']);
+
+  const { loading, setLoading } = useLoading();
+  const [editing, toggleEditing] = useToggle();
+
+  const formRef = ref();
+  const formModel = ref<HostSpecExtraModel>({} as HostSpecExtraModel);
+
+  // 加载配置
+  const fetchHostSpec = async () => {
+    setLoading(true);
+    try {
+      const { data } = await getHostExtraItem<HostSpecExtraModel>({ hostId: props.hostId, item: 'SPEC' });
+      formModel.value = data;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 添加规格
+  const addSpec = () => {
+    if (!formModel.value.items) {
+      formModel.value.items = [];
+    }
+    formModel.value.items.push({ label: '', value: '' });
+  };
+
+  // 移除规格
+  const removeSpec = (index: number) => {
+    formModel.value.items.splice(index, 1);
+  };
+
+  // 保存规格
+  const saveSpec = async () => {
+    setLoading(true);
+    try {
+      await updateHostExtra({
+        hostId: props.hostId,
+        item: 'SPEC',
+        extra: JSON.stringify(formModel.value)
+      });
+      toggleEditing();
+      emits('updated');
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  onMounted(fetchHostSpec);
+
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-descriptions-item-value) {
+    padding: 6px 8px !important;
+  }
+
+  .label {
+    display: flex;
+    overflow: hidden;
+  }
+
+  .input, .text {
+    min-height: 24px;
+    font-size: 13px;
+  }
+
+  .text {
+    display: flex;
+  }
+
+  .item-wrapper {
+    display: flex;
+    width: 306px;
+  }
+
+  .actions {
+    width: 100%;
+    margin-top: 16px;
+    display: flex;
+  }
+</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
new file mode 100644
index 00000000..28a96848
--- /dev/null
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-form-ssh.vue
@@ -0,0 +1,250 @@
+<template>
+  <a-spin :loading="loading">
+    <!-- 表单 -->
+    <a-form :model="formModel"
+            ref="formRef"
+            label-align="right"
+            :auto-label-width="true"
+            :rules="sshFormRules">
+      <!-- 端口 -->
+      <a-form-item field="port" label="端口">
+        <a-input-number v-model="formModel.port"
+                        placeholder="请输入 SSH 端口"
+                        hide-button />
+      </a-form-item>
+      <!-- 用户名 -->
+      <a-form-item field="username"
+                   label="用户名"
+                   :rules="usernameRules"
+                   :help="SshAuthType.IDENTITY === formModel.authType ? '将使用主机身份的用户名' : undefined">
+        <a-input v-model="formModel.username"
+                 :disabled="SshAuthType.IDENTITY === formModel.authType"
+                 placeholder="请输入用户名" />
+      </a-form-item>
+      <!-- 认证方式 -->
+      <a-form-item field="authType" label="认证方式">
+        <a-radio-group type="button"
+                       class="auth-type-group usn"
+                       v-model="formModel.authType"
+                       :options="toRadioOptions(sshAuthTypeKey)" />
+      </a-form-item>
+      <!-- 主机密码 -->
+      <a-form-item v-if="SshAuthType.PASSWORD === formModel.authType"
+                   field="password"
+                   label="主机密码"
+                   :rules="passwordRules">
+        <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="SshAuthType.KEY === formModel.authType"
+                   field="keyId"
+                   label="主机密钥">
+        <host-key-selector v-model="formModel.keyId" />
+      </a-form-item>
+      <!-- 主机身份 -->
+      <a-form-item v-if="SshAuthType.IDENTITY === formModel.authType"
+                   field="identityId"
+                   label="主机身份">
+        <host-identity-selector v-model="formModel.identityId" />
+      </a-form-item>
+      <!-- 连接超时时间 -->
+      <a-form-item field="connectTimeout" label="连接超时时间">
+        <a-input-number v-model="formModel.connectTimeout"
+                        placeholder="请输入连接超时时间"
+                        hide-button>
+          <template #suffix>
+            ms
+          </template>
+        </a-input-number>
+      </a-form-item>
+      <!-- SSH 输出编码 -->
+      <a-form-item field="charset" label="SSH输出编码">
+        <a-input v-model="formModel.charset" placeholder="请输入 SSH 输出编码" />
+      </a-form-item>
+      <!-- 文件名称编码 -->
+      <a-form-item field="fileNameCharset" label="文件名称编码">
+        <a-input v-model="formModel.fileNameCharset" placeholder="请输入 SFTP 文件名称编码" />
+      </a-form-item>
+      <!-- 文件内容编码 -->
+      <a-form-item field="fileContentCharset" label="文件内容编码">
+        <a-input v-model="formModel.fileContentCharset" placeholder="请输入 SFTP 文件内容编码" />
+      </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"
+                    :loading="connectLoading"
+                    long
+                    @click="testConnect">
+            测试连接
+          </a-button>
+        </a-tooltip>
+      </a-form-item>
+    </a-form>
+  </a-spin>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'hostFormSsh'
+  };
+</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, SshAuthType, 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 { getHostSshConfig, updateHostConfig } from '@/api/asset/host-config';
+  import HostIdentitySelector from '@/components/asset/host-identity/selector/index.vue';
+  import HostKeySelector from '@/components/asset/host-key/selector/index.vue';
+
+  const props = defineProps<{
+    hostId: number;
+  }>();
+
+  const { loading, setLoading } = useLoading();
+  const { loading: connectLoading, setLoading: setConnectLoading } = useLoading();
+  const { toOptions, 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 !== SshAuthType.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 getHostSshConfig<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(formRef.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);
+    }
+  };
+
+  onMounted(fetchHostConfig);
+
+</script>
+
+<style lang="less" scoped>
+  .auth-type-group {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .password-switch {
+    width: 148px;
+    margin-left: 8px;
+  }
+
+</style>
diff --git a/orion-visor-ui/src/views/asset/host-list/components/host-table.vue b/orion-visor-ui/src/views/asset/host-list/components/host-table.vue
index 0f39d51c..04476c51 100644
--- a/orion-visor-ui/src/views/asset/host-list/components/host-table.vue
+++ b/orion-visor-ui/src/views/asset/host-list/components/host-table.vue
@@ -25,11 +25,11 @@
       <a-form-item field="address" label="主机地址">
         <a-input v-model="formModel.address" placeholder="请输入主机地址" allow-clear />
       </a-form-item>
-      <!-- 主机类型 -->
-      <a-form-item field="type" label="主机类型">
+      <!-- 主机协议 -->
+      <a-form-item field="type" label="主机协议">
         <a-select v-model="formModel.type"
                   :options="toOptions(hostTypeKey)"
-                  placeholder="请选择主机类型"
+                  placeholder="请选择主机协议"
                   allow-clear />
       </a-form-item>
       <!-- 系统类型 -->
@@ -39,6 +39,13 @@
                   placeholder="请选择系统类型"
                   allow-clear />
       </a-form-item>
+      <!-- 系统架构 -->
+      <a-form-item field="archType" label="系统架构">
+        <a-select v-model="formModel.archType"
+                  :options="toOptions(hostArchTypeKey)"
+                  placeholder="请选择系统架构"
+                  allow-clear />
+      </a-form-item>
       <!-- 主机状态 -->
       <a-form-item field="status" label="主机状态">
         <a-select v-model="formModel.status"
@@ -147,33 +154,71 @@
              :bordered="false"
              @page-change="(page: number) => fetchTableData(page, pagination.pageSize)"
              @page-size-change="(size: number) => fetchTableData(1, size)">
-      <!-- 主机类型 -->
-      <template #type="{ record }">
-        <a-tag class="flex-center" :color="getDictValue(hostTypeKey, record.type, 'color')">
-          <!-- 系统类型图标 -->
-          <component v-if="getHostOsIcon(record.osType)"
-                     :is="getHostOsIcon(record.osType)"
-                     class="os-icon" />
-          <!-- 主机类型 -->
-          <span>{{ getDictValue(hostTypeKey, record.type) }}</span>
-        </a-tag>
+      <!-- 主机信息 -->
+      <template #hostInfo="{ record }">
+        <div class="info-wrapper">
+          <div class="info-item">
+            <span class="info-label">主机名称</span>
+            <span class="info-value text-copy text-ellipsis"
+                  :title="record.name"
+                  @click="copy(record.name, true)">
+              {{ record.name }}
+            </span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">主机编码</span>
+            <span class="info-value text-copy text-ellipsis"
+                  :title="record.code"
+                  @click="copy(record.code, true)">
+              {{ record.code }}
+            </span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">主机地址</span>
+            <span class="info-value span-blue text-copy text-ellipsis"
+                  :title="record.address"
+                  @click="copy(record.address, true)">
+              {{ record.address }}
+            </span>
+          </div>
+        </div>
       </template>
-      <!-- 主机编码 -->
-      <template #code="{ record }">
-        <a-tag>{{ record.code }}</a-tag>
+      <!-- 主机规格 -->
+      <template #hostSpec="{ record }">
+        <div class="info-wrapper">
+          <div class="info-item">
+            <span class="spec-label">规格</span>
+            <span v-if="record.spec" class="spec-value text-ellipsis">
+              {{
+                [
+                  addSuffix(record.spec.cpuCore, 'C'),
+                  addSuffix(record.spec.memorySize, 'G'),
+                  addSuffix(record.spec.diskSize, 'G')
+                ].filter(Boolean).join(' / ') || '-'
+              }}
+            </span>
+            <span v-else class="spec-value text-ellipsis">-</span>
+          </div>
+          <!-- 系统类型 -->
+          <div class="info-item">
+            <span class="spec-label">系统</span>
+            <span class="spec-value text-ellipsis">
+              {{ getDictValue(hostOsTypeKey, record.osType) }} - {{ getDictValue(hostArchTypeKey, record.archType) }}
+            </span>
+          </div>
+        </div>
       </template>
-      <!-- 地址 -->
-      <template #address="{ record }">
-        <span class="span-blue text-copy host-address"
-              title="复制"
-              @click="copy(record.address)">
-          {{ record.address }}
-        </span>
-        <span class="span-blue text-copy"
-              title="复制"
-              @click="copy(record.port)">
-          {{ record.port }}
-        </span>
+      <!-- 主机协议 -->
+      <template #protocols="{ record }">
+        <a-space v-if="record.types?.length"
+                 style="margin-bottom: -8px;"
+                 wrap>
+          <a-tag v-for="type in record.types"
+                 :key="type"
+                 :color="getDictValue(hostTypeKey, type, 'color')">
+            {{ getDictValue(hostTypeKey, type) }}
+          </a-tag>
+        </a-space>
       </template>
       <!-- 主机状态 -->
       <template #status="{ record }">
@@ -181,16 +226,30 @@
           {{ getDictValue(hostStatusKey, record.status) }}
         </a-tag>
       </template>
-      <!-- 标签 -->
-      <template #tags="{ record }">
-        <a-space v-if="record.tags"
+      <!-- 主机分组 -->
+      <template #groups="{ record }">
+        <a-space v-if="record.groupIdList?.length"
                  style="margin-bottom: -8px;"
                  :wrap="true">
-          <a-tag v-for="tag in record.tags"
-                 :key="tag.id"
-                 :color="dataColor(tag.name, tagColor)">
-            {{ tag.name }}
-          </a-tag>
+          <template v-for="groupId in record.groupIdList"
+                    :key="groupId">
+            <a-tag color="green">
+              {{ hostGroupList.find(s => s.key === groupId)?.title || groupId }}
+            </a-tag>
+          </template>
+        </a-space>
+      </template>
+      <!-- 主机标签 -->
+      <template #tags="{ record }">
+        <a-space v-if="record.tags?.length"
+                 style="margin-bottom: -8px;"
+                 :wrap="true">
+          <template v-for="tag in record.tags"
+                    :key="tag.id">
+            <a-tag :color="dataColor(tag.name, tagColor)">
+              {{ tag.name }}
+            </a-tag>
+          </template>
         </a-space>
       </template>
       <!-- 操作 -->
@@ -203,13 +262,6 @@
                     @click="emits('openUpdate', record)">
             修改
           </a-button>
-          <!-- 配置 -->
-          <a-button type="text"
-                    size="mini"
-                    v-permission="['asset:host:update-config']"
-                    @click="emits('openUpdateConfig', record)">
-            配置
-          </a-button>
           <!-- 删除 -->
           <a-popconfirm content="确认删除这条记录吗?"
                         position="left"
@@ -242,13 +294,13 @@
                 <span class="more-doption normal">复制</span>
               </a-doption>
               <!-- SSH -->
-              <a-doption v-if="record.type === HostType.SSH.value"
+              <a-doption v-if="record.types.includes(HostType.SSH.value)"
                          v-permission="['asset:terminal:access']"
                          @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type: 'SSH' } })">
                 <span class="more-doption normal">SSH</span>
               </a-doption>
               <!-- SFTP -->
-              <a-doption v-if="record.type === HostType.SSH.value"
+              <a-doption v-if="record.types.includes(HostType.SSH.value)"
                          v-permission="['asset:terminal:access']"
                          @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type: 'SFTP' } })">
                 <span class="more-doption normal">SFTP</span>
@@ -269,24 +321,25 @@
 
 <script lang="ts" setup>
   import type { HostQueryRequest, HostQueryResponse } from '@/api/asset/host';
+  import type { HostGroupQueryResponse } from '@/api/asset/host-group';
   import { reactive, ref, onMounted } from 'vue';
   import { deleteHost, batchDeleteHost, getHostPage, updateHostStatus } from '@/api/asset/host';
   import { Message, Modal } from '@arco-design/web-vue';
-  import { TableName, tagColor, hostTypeKey, hostStatusKey, HostType, hostOsTypeKey, getHostOsIcon } from '../types/const';
+  import { tagColor, hostTypeKey, hostStatusKey, HostType, hostOsTypeKey, hostArchTypeKey, TableName } from '../types/const';
   import { useTablePagination, useRowSelection, useTableColumns } from '@/hooks/table';
+  import { useQueryOrder, ASC } from '@/hooks/query-order';
   import { useCacheStore, useDictStore } from '@/store';
   import { copy } from '@/hooks/copy';
-  import { dataColor } from '@/utils';
+  import { addSuffix, dataColor } from '@/utils';
   import { useRouter } from 'vue-router';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
-  import { ASC, useQueryOrder } from '@/hooks/query-order';
   import { openNewRoute } from '@/router';
-  import TagMultiSelector from '@/components/meta/tag/multi-selector/index.vue';
   import TableAdjust from '@/components/app/table-adjust/index.vue';
+  import TagMultiSelector from '@/components/meta/tag/multi-selector/index.vue';
 
-  const emits = defineEmits(['openCopy', 'openAdd', 'openUpdate', 'openUpdateConfig', 'openHostGroup']);
+  const emits = defineEmits(['openCopy', 'openAdd', 'openUpdate', 'openHostGroup']);
 
   const router = useRouter();
   const cacheStore = useCacheStore();
@@ -297,6 +350,7 @@
   const { loading, setLoading } = useLoading();
   const { toOptions, getDictValue, toggleDictValue, toggleDict } = useDictStore();
 
+  const hostGroupList = ref<Array<HostGroupQueryResponse>>([]);
   const tagSelector = ref();
   const selectedKeys = ref<Array<number>>([]);
   const tableRenderData = ref<Array<HostQueryResponse>>([]);
@@ -307,10 +361,13 @@
     address: undefined,
     type: undefined,
     osType: undefined,
+    archType: undefined,
     status: undefined,
     tags: undefined,
     description: undefined,
+    queryGroup: true,
     queryTag: true,
+    querySpec: true,
   });
 
   // 更新状态
@@ -403,7 +460,10 @@
     doFetchTableData({ page, limit, ...form });
   };
 
-  onMounted(() => {
+  onMounted(async () => {
+    // 加载分组数据
+    hostGroupList.value = await useCacheStore().loadHostGroupList();
+    // 加载数据
     fetchTableData();
   });
 
@@ -411,10 +471,42 @@
 
 <style lang="less" scoped>
 
-  .os-icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 6px;
+  .info-wrapper {
+    padding: 4px 0;
+
+    .info-item {
+      display: flex;
+
+      &:not(:last-child) {
+        margin-bottom: 4px;
+      }
+
+      .info-label, .spec-label {
+        margin-right: 8px;
+        user-select: none;
+        font-weight: 600;
+
+        &::after {
+          content: ':';
+        }
+      }
+
+      .info-label {
+        width: 60px;
+      }
+
+      .spec-label {
+        width: 34px;
+      }
+
+      .info-value {
+        width: calc(100% - 68px);
+      }
+
+      .spec-value {
+        width: calc(100% - 42px);
+      }
+    }
   }
 
   .row-handle-wrapper {
@@ -422,9 +514,4 @@
     align-items: center;
   }
 
-  .host-address::after {
-    content: ':';
-    user-select: text;
-  }
-
 </style>
diff --git a/orion-visor-ui/src/views/asset/host-list/index.vue b/orion-visor-ui/src/views/asset/host-list/index.vue
index ab6d2f1a..643059b2 100644
--- a/orion-visor-ui/src/views/asset/host-list/index.vue
+++ b/orion-visor-ui/src/views/asset/host-list/index.vue
@@ -4,24 +4,18 @@
     <host-table v-if="renderTable"
                 ref="table"
                 @open-host-group="() => hostGroup.open()"
-                @open-copy="(e) => modal.openCopy(e.id)"
-                @open-add="() => modal.openAdd()"
-                @open-update="(e) => modal.openUpdate(e.id)"
-                @open-update-config="(e) => hostConfig.open(e)" />
+                @open-copy="(e) => drawer.openCopy(e.id)"
+                @open-add="() => drawer.openAdd()"
+                @open-update="(e) => drawer.openUpdate(e.id)" />
     <!-- 列表-卡片 -->
     <host-card-list v-else
                     ref="card"
                     @open-host-group="() => hostGroup.open()"
-                    @open-copy="(e) => modal.openCopy(e.id)"
-                    @open-add="() => modal.openAdd()"
-                    @open-update="(e) => modal.openUpdate(e.id)"
-                    @open-update-config="(e) => hostConfig.open(e)" />
-    <!-- 添加修改模态框 -->
-    <host-form-modal ref="modal"
-                     @added="reload"
-                     @updated="reload" />
-    <!-- 配置面板 -->
-    <host-config-drawer ref="hostConfig" />
+                    @open-copy="(e) => drawer.openCopy(e.id)"
+                    @open-add="() => drawer.openAdd()"
+                    @open-update="(e) => drawer.openUpdate(e.id)" />
+    <!-- 添加修改抽屉 -->
+    <host-form-drawer ref="drawer" @reload="reload" />
     <!-- 分组配置 -->
     <host-group-drawer ref="hostGroup" />
   </div>
@@ -39,14 +33,12 @@
   import { dictKeys } from './types/const';
   import HostTable from './components/host-table.vue';
   import HostCardList from './components/host-card-list.vue';
-  import HostFormModal from './components/host-form-modal.vue';
-  import HostConfigDrawer from '../host-config/drawer/index.vue';
+  import HostFormDrawer from './components/host-form-drawer.vue';
   import HostGroupDrawer from '../host-group/drawer/index.vue';
 
   const table = ref();
   const card = ref();
-  const modal = ref();
-  const hostConfig = ref();
+  const drawer = ref();
   const hostGroup = ref();
 
   const appStore = useAppStore();
@@ -63,9 +55,8 @@
   };
 
   // 加载字典配置
-  onBeforeMount(async () => {
-    const dictStore = useDictStore();
-    await dictStore.loadKeys(dictKeys);
+  onBeforeMount(() => {
+    useDictStore().loadKeys(dictKeys);
   });
 
 </script>
diff --git a/orion-visor-ui/src/views/asset/host-list/types/card.fields.ts b/orion-visor-ui/src/views/asset/host-list/types/card.fields.ts
index c7d19a2e..3dea800f 100644
--- a/orion-visor-ui/src/views/asset/host-list/types/card.fields.ts
+++ b/orion-visor-ui/src/views/asset/host-list/types/card.fields.ts
@@ -7,7 +7,7 @@ const fieldConfig = {
   minHeight: '22px',
   fields: [
     {
-      label: 'id',
+      label: '主机ID',
       dataIndex: 'id',
       slotName: 'id',
       default: true,
@@ -23,20 +23,30 @@ const fieldConfig = {
       tooltip: true,
       default: true,
     }, {
-      label: '主机类型',
-      dataIndex: 'type',
-      slotName: 'type',
+      label: '主机规格',
+      dataIndex: 'hostSpec',
+      slotName: 'hostSpec',
+      tooltip: true,
       default: true,
     }, {
       label: '主机状态',
       dataIndex: 'status',
       slotName: 'status',
       default: true,
+    }, {
+      label: '主机协议',
+      dataIndex: 'protocols',
+      slotName: 'protocols',
+      default: true,
+    }, {
+      label: '主机分组',
+      dataIndex: 'groups',
+      slotName: 'groups',
+      default: true,
     }, {
       label: '主机标签',
       dataIndex: 'tags',
       slotName: 'tags',
-      rowAlign: 'start',
       default: true,
     }, {
       label: '主机描述',
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 02da0eff..a2e398e5 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
@@ -1,5 +1,6 @@
 import WindowsIcon from '@/assets/images/icon/os_windows.svg';
 import LinuxIcon from '@/assets/images/icon/os_linux.svg';
+import DarwinIcon from '@/assets/images/icon/os_darwin.svg';
 
 // 表名称
 export const TableName = 'host';
@@ -31,6 +32,20 @@ export const HostOsType = {
     value: 'WINDOWS',
     icon: WindowsIcon,
   },
+  DARWIN: {
+    value: 'DARWIN',
+    icon: DarwinIcon,
+  },
+};
+
+// 主机认证方式
+export const SshAuthType = {
+  // 密码认证
+  PASSWORD: 'PASSWORD',
+  // 密钥认证
+  KEY: 'KEY',
+  // 身份认证
+  IDENTITY: 'IDENTITY'
 };
 
 // 获取系统类型 icon
@@ -44,6 +59,9 @@ export const hostTypeKey = 'hostType';
 // 主机系统类型 字典项
 export const hostOsTypeKey = 'hostOsType';
 
+// 主机系统架构 字典项
+export const hostArchTypeKey = 'hostArchType';
+
 // 主机状态 字典项
 export const hostStatusKey = 'hostStatus';
 
@@ -51,4 +69,4 @@ export const hostStatusKey = 'hostStatus';
 export const sshAuthTypeKey = 'hostSshAuthType';
 
 // 加载的字典值
-export const dictKeys = [hostTypeKey, hostOsTypeKey, hostStatusKey, sshAuthTypeKey];
+export const dictKeys = [hostTypeKey, hostOsTypeKey, hostArchTypeKey, hostStatusKey, sshAuthTypeKey];
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 d2716ab5..459a14bd 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,72 +1,115 @@
 import type { FieldRule } from '@arco-design/web-vue';
 
-export const type = [{
-  required: true,
-  message: '请选择主机类型'
-}] as FieldRule[];
-
-export const osType = [{
-  required: true,
-  message: '请选择系统类型'
-}] as FieldRule[];
-
-export const name = [{
-  required: true,
-  message: '请输入主机名称'
-}, {
-  maxLength: 64,
-  message: '主机名称长度不能大于64位'
-}] as FieldRule[];
-
-export const code = [{
-  required: true,
-  message: '请输入主机编码'
-}, {
-  maxLength: 64,
-  message: '主机编码长度不能大于64位'
-}] as FieldRule[];
-
-export const address = [{
-  required: true,
-  message: '请输入主机地址'
-}, {
-  maxLength: 128,
-  message: '主机地址长度不能大于128位'
-}] as FieldRule[];
-
-export const port = [{
-  required: true,
-  message: '请输入主机端口'
-}, {
-  type: 'number',
-  min: 1,
-  max: 65535,
-  message: '输入的端口不合法'
-}] as FieldRule[];
-
-export const groupIdList = [{
-  required: true,
-  message: '请选择主机分组'
-}] as FieldRule[];
-
-export const tags = [{
-  maxLength: 5,
-  message: '最多选择5个标签'
-}] as FieldRule[];
-
-export const description = [{
-  maxLength: 255,
-  message: '主机描述长度不能大于255位'
-}] as FieldRule[];
-
-export default {
-  type,
-  osType,
-  name,
-  code,
-  address,
-  port,
-  groupIdList,
-  tags,
-  description,
+// 主机表单规则
+export const hostFormRules = {
+  types: [{
+    required: true,
+    message: '请选择主机协议'
+  }],
+  osType: [{
+    required: true,
+    message: '请选择系统类型'
+  }],
+  archType: [{
+    required: true,
+    message: '请选择系统架构'
+  }],
+  name: [{
+    required: true,
+    message: '请输入主机名称'
+  }, {
+    maxLength: 64,
+    message: '主机名称长度不能大于64位'
+  }],
+  code: [{
+    required: true,
+    message: '请输入主机编码'
+  }, {
+    maxLength: 64,
+    message: '主机编码长度不能大于64位'
+  }],
+  address: [{
+    required: true,
+    message: '请输入主机地址'
+  }, {
+    maxLength: 128,
+    message: '主机地址长度不能大于128位'
+  }],
+  port: [{
+    required: true,
+    message: '请输入主机端口'
+  }, {
+    type: 'number',
+    min: 1,
+    max: 65535,
+    message: '输入的端口不合法'
+  }],
+  groupIdList: [{
+    required: true,
+    message: '请选择主机分组'
+  }],
+  tags: [{
+    maxLength: 5,
+    message: '最多选择5个标签'
+  }],
+  description: [{
+    maxLength: 255,
+    message: '主机描述长度不能大于255位'
+  }],
 } as Record<string, FieldRule | FieldRule[]>;
+
+// ssh 表单规则
+export const sshFormRules = {
+  port: [{
+    required: true,
+    message: '请输入 SSH 端口'
+  }, {
+    min: 1,
+    max: 65535,
+    message: 'SSH 端口不合法'
+  }],
+  authType: [{
+    required: true,
+    message: '请选择认证方式'
+  }],
+  keyId: [{
+    required: true,
+    message: '请选择主机密钥'
+  }],
+  identityId: [{
+    required: true,
+    message: '请选择主机身份'
+  }],
+  connectTimeout: [{
+    required: true,
+    message: '请输入连接超时时间'
+  }, {
+    type: 'number',
+    min: 0,
+    max: 100000,
+    message: '连接超时时间需要在 0 - 100000 之间'
+  }],
+  charset: [{
+    required: true,
+    message: '请输入SSH输出编码'
+  }, {
+    maxLength: 12,
+    message: 'SSH输出编码长度不能超过12位'
+  }],
+  fileNameCharset: [{
+    required: true,
+    message: '请输入文件名称编码'
+  }, {
+    maxLength: 12,
+    message: '文件名称编码长度不能超过12位'
+  }],
+  fileContentCharset: [{
+    required: true,
+    message: '请输入SSH输出编码'
+  }, {
+    maxLength: 12,
+    message: '文件内容编码长度不能超过12位'
+  }],
+} as Record<string, FieldRule | FieldRule[]>;
+
+export default null;
diff --git a/orion-visor-ui/src/views/asset/host-list/types/table.columns.ts b/orion-visor-ui/src/views/asset/host-list/types/table.columns.ts
index 64d8f51f..61c2e1a8 100644
--- a/orion-visor-ui/src/views/asset/host-list/types/table.columns.ts
+++ b/orion-visor-ui/src/views/asset/host-list/types/table.columns.ts
@@ -11,38 +11,26 @@ const columns = [
     fixed: 'left',
     default: true,
   }, {
-    title: '主机名称',
-    dataIndex: 'name',
-    slotName: 'name',
-    ellipsis: true,
-    tooltip: true,
-    minWidth: 238,
-    default: true,
-  }, {
-    title: '主机编码',
-    dataIndex: 'code',
-    slotName: 'code',
-    minWidth: 120,
-    default: true,
-  }, {
-    title: '主机类型',
-    dataIndex: 'type',
-    slotName: 'type',
-    align: 'center',
-    width: 100,
-    default: true,
-  }, {
-    title: '主机地址',
-    dataIndex: 'address',
-    slotName: 'address',
-    minWidth: 238,
-    default: true,
-  }, {
-    title: '主机标签',
-    dataIndex: 'tags',
-    slotName: 'tags',
+    title: '主机信息',
+    dataIndex: 'hostInfo',
+    slotName: 'hostInfo',
+    minWidth: 328,
     align: 'left',
-    minWidth: 148,
+    fixed: 'left',
+    default: true,
+  }, {
+    title: '主机规格',
+    dataIndex: 'hostSpec',
+    slotName: 'hostSpec',
+    width: 188,
+    align: 'left',
+    default: true,
+  }, {
+    title: '主机协议',
+    dataIndex: 'protocols',
+    slotName: 'protocols',
+    align: 'left',
+    width: 184,
     default: true,
   }, {
     title: '主机状态',
@@ -50,7 +38,20 @@ const columns = [
     slotName: 'status',
     width: 88,
     align: 'center',
-    fixed: 'right',
+    default: true,
+  }, {
+    title: '主机分组',
+    dataIndex: 'groups',
+    slotName: 'groups',
+    align: 'left',
+    minWidth: 148,
+    default: true,
+  }, {
+    title: '主机标签',
+    dataIndex: 'tags',
+    slotName: 'tags',
+    align: 'left',
+    minWidth: 148,
     default: true,
   }, {
     title: '主机描述',
@@ -99,7 +100,7 @@ const columns = [
   }, {
     title: '操作',
     slotName: 'handle',
-    width: 192,
+    width: 162,
     align: 'center',
     fixed: 'right',
     default: true,
diff --git a/orion-visor-ui/src/views/host/terminal/components/setting/extra/label-setting-form.vue b/orion-visor-ui/src/views/host/terminal/components/setting/extra/label-setting-form.vue
index 94f83366..b04fdcd3 100644
--- a/orion-visor-ui/src/views/host/terminal/components/setting/extra/label-setting-form.vue
+++ b/orion-visor-ui/src/views/host/terminal/components/setting/extra/label-setting-form.vue
@@ -35,7 +35,7 @@
 </script>
 
 <script lang="ts" setup>
-  import type { LabelExtraSettingModel } from '../../../types/define';
+  import type { HostLabelExtraSettingModel } from '@/api/asset/host-extra';
   import { onMounted, ref } from 'vue';
   import { tabColorKey } from '../../../types/const';
   import { getHostExtraItem } from '@/api/asset/host-extra';
@@ -48,13 +48,13 @@
 
   const { toOptions } = useDictStore();
 
-  const formModel = ref<LabelExtraSettingModel>({
+  const formModel = ref<Partial<HostLabelExtraSettingModel>>({
     color: '',
   });
 
   // 渲染表单
   const renderForm = async () => {
-    const { data } = await getHostExtraItem<LabelExtraSettingModel>({ hostId: props.hostId, item: props.item });
+    const { data } = await getHostExtraItem<HostLabelExtraSettingModel>({ hostId: props.hostId, item: props.item });
     formModel.value = data;
   };
 
diff --git a/orion-visor-ui/src/views/host/terminal/components/setting/extra/ssh-setting-form.vue b/orion-visor-ui/src/views/host/terminal/components/setting/extra/ssh-setting-form.vue
index fe80a736..40c1f34f 100644
--- a/orion-visor-ui/src/views/host/terminal/components/setting/extra/ssh-setting-form.vue
+++ b/orion-visor-ui/src/views/host/terminal/components/setting/extra/ssh-setting-form.vue
@@ -42,7 +42,7 @@
 </script>
 
 <script lang="ts" setup>
-  import type { SshExtraSettingModel } from '../../../types/define';
+  import type { HostSshExtraSettingModel } from '@/api/asset/host-extra';
   import { onMounted, ref } from 'vue';
   import { getHostExtraItem } from '@/api/asset/host-extra';
   import { ExtraSshAuthType, extraSshAuthTypeKey } from '../../../types/const';
@@ -58,13 +58,13 @@
   const { toRadioOptions } = useDictStore();
 
   const formRef = ref();
-  const formModel = ref<SshExtraSettingModel>({
-    authType: ExtraSshAuthType.DEFAULT
+  const formModel = ref<Partial<HostSshExtraSettingModel>>({
+    authType: ExtraSshAuthType.DEFAULT,
   });
 
   // 渲染表单
   const renderForm = async () => {
-    const { data } = await getHostExtraItem<SshExtraSettingModel>({ hostId: props.hostId, item: props.item });
+    const { data } = await getHostExtraItem<HostSshExtraSettingModel>({ hostId: props.hostId, item: props.item });
     formModel.value = data;
   };
 
diff --git a/orion-visor-ui/src/views/host/terminal/types/define.ts b/orion-visor-ui/src/views/host/terminal/types/define.ts
index f5cbe993..8fdf6529 100644
--- a/orion-visor-ui/src/views/host/terminal/types/define.ts
+++ b/orion-visor-ui/src/views/host/terminal/types/define.ts
@@ -57,20 +57,6 @@ export interface ShortcutKeyItem {
   type: number;
 }
 
-// SSH 额外配置
-export interface SshExtraSettingModel {
-  authType?: string;
-  username?: string;
-  keyId?: number;
-  identityId?: number;
-}
-
-// 标签额外配置
-export interface LabelExtraSettingModel {
-  alias?: string;
-  color?: string;
-}
-
 // session tab
 export interface PanelSessionTabType {
   type: string;