⚡ 添加系统类型.

2024-12-12 21:12:08 +08:00
parent f52a81f9d0
commit 247ae2c862
28 changed files with 190 additions and 71 deletions
--- 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
@@ -26,14 +26,6 @@
              label-align="right"
              :auto-label-width="true"
              :rules="rules">
-        <!-- 系统类型 -->
-        <a-form-item field="osType"
-                     label="系统类型"
-                     :hide-asterisk="true">
-          <a-select v-model="formModel.osType"
-                    :options="toOptions(sshOsTypeKey)"
-                    placeholder="请选择系统类型" />
-        </a-form-item>
        <!-- 用户名 -->
        <a-form-item field="username"
                     label="用户名"
@@ -128,7 +120,7 @@
  import type { HostSshConfig } from '../types/const';
  import type { HostConfigQueryResponse } from '@/api/asset/host';
  import { ref, watch } from 'vue';
-  import { sshAuthTypeKey, sshOsTypeKey, SshAuthType } from '../types/const';
+  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';
@@ -144,7 +136,6 @@

  const formRef = ref();
  const formModel = ref<HostSshConfig>({
-    osType: undefined,
    username: undefined,
    password: undefined,
    authType: SshAuthType.PASSWORD,
--- a/orion-visor-ui/src/views/asset/host-config/types/const.ts
+++ b/orion-visor-ui/src/views/asset/host-config/types/const.ts
@@ -1,6 +1,5 @@
 // 主机 SSH 配置
 export interface HostSshConfig {
-  osType?: string;
  username?: string;
  password?: string;
  authType?: string;
--- 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
@@ -1,10 +1,5 @@
 import type { FieldRule } from '@arco-design/web-vue';

-export const osType = [{
-  required: true,
-  message: '请选择系统类型'
-}] as FieldRule[];
-
 export const authType = [{
  required: true,
  message: '请选择认证方式'
@@ -55,7 +50,6 @@ export const fileContentCharset = [{
 }] as FieldRule[];

 export default {
-  osType,
  authType,
  keyId,
  identityId,
--- 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
@@ -78,6 +78,13 @@
                    placeholder="请选择主机类型"
                    allow-clear />
        </a-form-item>
+        <!-- 系统类型 -->
+        <a-form-item field="osType" label="系统类型">
+          <a-select v-model="formModel.osType"
+                    :options="toOptions(hostOsTypeKey)"
+                    placeholder="请选择系统类型"
+                    allow-clear />
+        </a-form-item>
        <!-- 主机状态 -->
        <a-form-item field="status" label="主机状态">
          <a-select v-model="formModel.status"
@@ -97,7 +104,14 @@
    </template>
    <!-- 标题 -->
    <template #title="{ record }">
-      {{ record.name }}
+      <div class="host-title">
+        <!-- 系统类型图标 -->
+        <component v-if="HostOsType[record.osType as keyof typeof HostOsType]"
+                   :is="HostOsType[record.osType as keyof typeof HostOsType].icon"
+                   class="os-icon" />
+        <!-- 主机名称 -->
+        <span>{{ record.name }}</span>
+      </div>
    </template>
    <!-- 编码 -->
    <template #code="{ record }">
@@ -183,16 +197,16 @@
              </span>
            </a-doption>
            <!-- SSH -->
-            <a-doption v-if="record.type === hostType.SSH.type"
-                       v-permission="['asset:terminal:access']"
+            <a-doption v-if="record.type === HostType.SSH.value"
+                       v-permission="['terminal:terminal:access']"
                       @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type: 'SSH' } })">
              <span class="more-doption normal">
                <icon-thunderbolt /> SSH
              </span>
            </a-doption>
            <!-- SFTP -->
-            <a-doption v-if="record.type === hostType.SSH.type"
-                       v-permission="['asset:terminal:access']"
+            <a-doption v-if="record.type === HostType.SSH.value"
+                       v-permission="['terminal:terminal:access']"
                       @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type: 'SFTP' } })">
              <span class="more-doption normal">
               <icon-folder /> SFTP
@@ -218,7 +232,7 @@
  import { dataColor, objectTruthKeyCount, resetObject } from '@/utils';
  import { deleteHost, getHostPage, updateHostStatus } from '@/api/asset/host';
  import { Message, Modal } from '@arco-design/web-vue';
-  import { hostStatusKey, hostType, hostTypeKey, tagColor } from '../types/const';
+  import { HostOsType, hostOsTypeKey, hostStatusKey, HostType, hostTypeKey, tagColor } from '../types/const';
  import { copy } from '@/hooks/copy';
  import { useDictStore } from '@/store';
  import { GrantKey, GrantRouteName } from '@/views/asset/grant/types/const';
@@ -243,6 +257,7 @@
    code: undefined,
    address: undefined,
    type: undefined,
+    osType: undefined,
    status: undefined,
    tags: undefined,
    queryTag: true
@@ -343,6 +358,18 @@
 </script>

 <style lang="less" scoped>
+  .host-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    .os-icon {
+      width: 20px;
+      height: 20px;
+      margin-right: 6px;
+    }
+  }
+
  .host-address::after {
    content: ':';
    user-select: text;
--- 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
@@ -27,6 +27,12 @@
                    placeholder="请选择主机类型"
                    :options="toOptions(hostTypeKey)" />
        </a-form-item>
+        <!-- 系统类型 -->
+        <a-form-item field="osType" label="系统类型">
+          <a-select v-model="formModel.osType"
+                    placeholder="请选择系统类型"
+                    :options="toOptions(hostOsTypeKey)" />
+        </a-form-item>
        <!-- 主机名称 -->
        <a-form-item field="name" label="主机名称">
          <a-input v-model="formModel.name" placeholder="请输入主机名称" />
@@ -80,7 +86,7 @@
  import { createHost, getHost, updateHost } from '@/api/asset/host';
  import { Message } from '@arco-design/web-vue';
  import { pick } from 'lodash';
-  import { tagColor, hostType, hostTypeKey } from '../types/const';
+  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';
@@ -95,11 +101,12 @@
  const defaultForm = (): HostUpdateRequest => {
    return {
      id: undefined,
-      type: hostType.SSH.type,
+      type: HostType.SSH.value,
+      osType: HostOsType.LINUX.value,
      name: undefined,
      code: undefined,
      address: undefined,
-      port: hostType.SSH.default.port,
+      port: HostType.SSH.port,
      tags: undefined,
      groupIdList: undefined,
    };
@@ -142,7 +149,7 @@
      setLoading(true);
      const { data } = await getHost(id);
      const detail = Object.assign({} as Record<string, any>,
-        pick(data, 'id', 'type', 'name', 'code', 'address', 'port', 'status', 'groupIdList'));
+        pick(data, 'id', 'type', 'osType', 'name', 'code', 'address', 'port', 'status', 'groupIdList'));
      // tag
      const tags = (data.tags || []).map(s => s.id);
      // 渲染
--- 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
@@ -32,6 +32,13 @@
                  placeholder="请选择主机类型"
                  allow-clear />
      </a-form-item>
+      <!-- 系统类型 -->
+      <a-form-item field="osType" label="系统类型">
+        <a-select v-model="formModel.osType"
+                  :options="toOptions(hostOsTypeKey)"
+                  placeholder="请选择系统类型"
+                  allow-clear />
+      </a-form-item>
      <!-- 主机状态 -->
      <a-form-item field="status" label="主机状态">
        <a-select v-model="formModel.status"
@@ -131,8 +138,13 @@
             @page-size-change="(size: number) => fetchTableData(1, size)">
      <!-- 主机类型 -->
      <template #type="{ record }">
-        <a-tag :color="getDictValue(hostTypeKey, record.type, 'color')">
-          {{ getDictValue(hostTypeKey, record.type) }}
+        <a-tag class="flex-center" :color="getDictValue(hostTypeKey, record.type, 'color')">
+          <!-- 系统类型图标 -->
+          <component v-if="HostOsType[record.osType as keyof typeof HostOsType]"
+                     :is="HostOsType[record.osType as keyof typeof HostOsType].icon"
+                     class="os-icon" />
+          <!-- 主机类型 -->
+          <span>{{ getDictValue(hostTypeKey, record.type) }}</span>
        </a-tag>
      </template>
      <!-- 主机编码 -->
@@ -221,16 +233,16 @@
                </span>
              </a-doption>
              <!-- SSH -->
-              <a-doption v-if="record.type === hostType.SSH.type"
-                         v-permission="['asset:terminal:access']"
+              <a-doption v-if="record.type === HostType.SSH.value"
+                         v-permission="['terminal: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.type"
-                         v-permission="['asset:terminal:access']"
+              <a-doption v-if="record.type === HostType.SSH.value"
+                         v-permission="['terminal:terminal:access']"
                         @click="openNewRoute({ name: 'terminal', query: { connect: record.id, type: 'SFTP' } })">
                <span class="more-doption normal">
                  SFTP
@@ -255,7 +267,7 @@
  import { reactive, ref, onMounted } from 'vue';
  import { deleteHost, batchDeleteHost, getHostPage, updateHostStatus } from '@/api/asset/host';
  import { Message, Modal } from '@arco-design/web-vue';
-  import { tagColor, hostTypeKey, hostStatusKey, hostType } from '../types/const';
+  import { tagColor, hostTypeKey, hostStatusKey, HostType, HostOsType, hostOsTypeKey } from '../types/const';
  import { useTablePagination, useRowSelection } from '@/hooks/table';
  import { useDictStore } from '@/store';
  import { copy } from '@/hooks/copy';
@@ -282,6 +294,7 @@
    code: undefined,
    address: undefined,
    type: undefined,
+    osType: undefined,
    status: undefined,
    tags: undefined,
    queryTag: true
@@ -381,6 +394,12 @@

 <style lang="less" scoped>

+  .os-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 6px;
+  }
+
  .row-handle-wrapper {
    display: flex;
    align-items: center;
--- 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
@@ -9,10 +9,6 @@ const fieldConfig = {
      label: 'id',
      dataIndex: 'id',
      slotName: 'id',
-    }, {
-      label: '主机类型',
-      dataIndex: 'type',
-      slotName: 'type',
    }, {
      label: '主机编码',
      dataIndex: 'code',
@@ -22,6 +18,10 @@ const fieldConfig = {
      dataIndex: 'address',
      slotName: 'address',
      tooltip: true,
+    }, {
+      label: '主机类型',
+      dataIndex: 'type',
+      slotName: 'type',
    }, {
      label: '主机状态',
      dataIndex: 'status',
--- 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,3 +1,6 @@
+import WindowsIcon from '@/assets/images/icon/os_windows.svg';
+import LinuxIcon from '@/assets/images/icon/os_linux.svg';
+
 // tag 颜色
 export const tagColor = [
  'arcoblue',
@@ -8,20 +11,37 @@ export const tagColor = [
 ];

 // 主机类型
-export const hostType = {
+export const HostType = {
  SSH: {
-    type: 'SSH',
-    default: {
-      port: 22,
-    }
-  }
+    value: 'SSH',
+    port: 22,
+  },
 };

+// 系统类型
+export const HostOsType = {
+  LINUX: {
+    value: 'LINUX',
+    icon: LinuxIcon,
+  },
+  WINDOWS: {
+    value: 'WINDOWS',
+    icon: WindowsIcon,
+  },
+};
+
+
 // 主机类型 字典项
 export const hostTypeKey = 'hostType';

+// 主机系统类型 字典项
+export const hostOsTypeKey = 'hostOsType';
+
 // 主机状态 字典项
 export const hostStatusKey = 'hostStatus';

+// 主机认证方式 字典项
+export const sshAuthTypeKey = 'hostSshAuthType';
+
 // 加载的字典值
-export const dictKeys = [hostTypeKey, hostStatusKey];
+export const dictKeys = [hostTypeKey, hostOsTypeKey, hostStatusKey, sshAuthTypeKey];
--- 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
@@ -5,6 +5,11 @@ export const type = [{
  message: '请选择主机类型'
 }] as FieldRule[];

+export const osType = [{
+  required: true,
+  message: '请选择系统类型'
+}] as FieldRule[];
+
 export const name = [{
  required: true,
  message: '请输入主机名称'
@@ -46,6 +51,7 @@ export const tags = [{

 export default {
  type,
+  osType,
  name,
  code,
  address,
--- 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
@@ -25,7 +25,7 @@ const columns = [
    dataIndex: 'type',
    slotName: 'type',
    align: 'center',
-    width: 88,
+    width: 100,
  }, {
    title: '主机地址',
    dataIndex: 'address',