From 2819df9c3186b6bb2cf7a9e4a4ea338d13810634 Mon Sep 17 00:00:00 2001
From: lijiahangmax <ljh1553488six@139.com>
Date: Sun, 17 Mar 2024 21:09:58 +0800
Subject: [PATCH] =?UTF-8?q?:hammer:=20=E6=89=A7=E8=A1=8C=E5=91=BD=E4=BB=A4?=
 =?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../asset/entity/domain/ExecHostLogDO.java    |   4 +
 .../asset/entity/vo/ExecCommandHostVO.java    |   9 ++
 .../module/asset/entity/vo/ExecHostLogVO.java |   3 +
 .../asset/service/impl/ExecServiceImpl.java   |  14 +-
 .../resources/mapper/ExecHostLogMapper.xml    |   3 +-
 orion-ops-ui/src/api/exec/exec-log.ts         |   1 +
 orion-ops-ui/src/api/exec/exec.ts             |  20 ++-
 .../components/host-table.vue                 |   2 +-
 .../host/authorized-host-modal/index.vue      |   3 +-
 .../components/host-identity-card-list.vue    |   8 +-
 .../components/host-identity-table.vue        |   8 +-
 .../host-identity/types/table.columns.ts      |   9 --
 .../host-list/components/host-card-list.vue   |  10 +-
 .../components/exec-panel-editor.vue          |   2 +-
 .../components/exec-panel-form.vue            |   4 +-
 .../components/exec-panel-history.vue         |  44 +++++-
 .../exec-command/components/exec-panel.vue    |  37 ++---
 .../components/log-panel-host.vue             | 118 ++++++++++++++++
 .../exec-command/components/log-panel.vue     | 128 ++++++++++++++++++
 .../src/views/exec/exec-command/index.vue     |  48 ++++++-
 .../components/exec-host-log-table.vue        |   9 +-
 .../dict-key/components/dict-key-table.vue    |  12 +-
 22 files changed, 429 insertions(+), 67 deletions(-)
 create mode 100644 orion-ops-ui/src/views/exec/exec-command/components/log-panel-host.vue
 create mode 100644 orion-ops-ui/src/views/exec/exec-command/components/log-panel.vue

diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/domain/ExecHostLogDO.java b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/domain/ExecHostLogDO.java
index e5b3522b..1981ac2c 100644
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/domain/ExecHostLogDO.java
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/domain/ExecHostLogDO.java
@@ -44,6 +44,10 @@ public class ExecHostLogDO extends BaseDO {
     @TableField("host_name")
     private String hostName;
 
+    @Schema(description = "主机地址")
+    @TableField("host_address")
+    private String hostAddress;
+
     @Schema(description = "执行状态")
     @TableField("status")
     private String status;
diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecCommandHostVO.java b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecCommandHostVO.java
index c54ea484..c1a42df6 100644
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecCommandHostVO.java
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecCommandHostVO.java
@@ -28,4 +28,13 @@ public class ExecCommandHostVO implements Serializable {
     @Schema(description = "hostId")
     private Long hostId;
 
+    @Schema(description = "主机名称")
+    private String hostName;
+
+    @Schema(description = "主机地址")
+    private String hostAddress;
+
+    @Schema(description = "执行状态")
+    private String status;
+
 }
diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecHostLogVO.java b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecHostLogVO.java
index fa3d1c90..5260a96f 100644
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecHostLogVO.java
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecHostLogVO.java
@@ -37,6 +37,9 @@ public class ExecHostLogVO implements Serializable {
     @Schema(description = "主机名称")
     private String hostName;
 
+    @Schema(description = "主机地址")
+    private String hostAddress;
+
     @Schema(description = "执行状态")
     private String status;
 
diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/ExecServiceImpl.java b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/ExecServiceImpl.java
index fc107073..a50e1fc2 100644
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/ExecServiceImpl.java
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/ExecServiceImpl.java
@@ -65,6 +65,8 @@ public class ExecServiceImpl implements ExecService {
     private static final ReplacementFormatter FORMATTER = ReplacementFormatters.create("@{{ ", " }}")
             .noMatchStrategy(NoMatchStrategy.KEEP);
 
+    private static final int DESC_OMIT = 60;
+
     @Resource
     private FileClient logsFileClient;
 
@@ -102,7 +104,13 @@ public class ExecServiceImpl implements ExecService {
                 .userId(userId)
                 .username(user.getUsername())
                 .source(ExecSourceEnum.BATCH.name())
-                .description(Strings.ifBlank(request.getDescription(), Strings.retain(command, 60) + Const.OMIT))
+                .description(Strings.ifBlank(request.getDescription(), () -> {
+                    if (command.length() < DESC_OMIT + 3) {
+                        return command;
+                    } else {
+                        return command.substring(0, DESC_OMIT) + Const.OMIT;
+                    }
+                }))
                 .command(command)
                 .parameterSchema(request.getParameterSchema())
                 .timeout(request.getTimeout())
@@ -120,6 +128,7 @@ public class ExecServiceImpl implements ExecService {
                             .logId(execId)
                             .hostId(s.getId())
                             .hostName(s.getName())
+                            .hostAddress(s.getAddress())
                             .status(ExecHostStatusEnum.WAITING.name())
                             .command(FORMATTER.format(command, parameter))
                             .parameter(parameter)
@@ -136,6 +145,9 @@ public class ExecServiceImpl implements ExecService {
                 .map(s -> ExecCommandHostVO.builder()
                         .id(s.getId())
                         .hostId(s.getHostId())
+                        .hostName(s.getHostName())
+                        .hostAddress(s.getHostAddress())
+                        .status(s.getStatus())
                         .build())
                 .collect(Collectors.toList());
         return ExecCommandVO.builder()
diff --git a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/resources/mapper/ExecHostLogMapper.xml b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/resources/mapper/ExecHostLogMapper.xml
index f3a5888d..f6d8c196 100644
--- a/orion-ops-module-asset/orion-ops-module-asset-service/src/main/resources/mapper/ExecHostLogMapper.xml
+++ b/orion-ops-module-asset/orion-ops-module-asset-service/src/main/resources/mapper/ExecHostLogMapper.xml
@@ -8,6 +8,7 @@
         <result column="log_id" property="logId"/>
         <result column="host_id" property="hostId"/>
         <result column="host_name" property="hostName"/>
+        <result column="host_address" property="hostAddress"/>
         <result column="status" property="status"/>
         <result column="command" property="command"/>
         <result column="parameter" property="parameter"/>
@@ -25,7 +26,7 @@
 
     <!-- 通用查询结果列 -->
     <sql id="Base_Column_List">
-        id, log_id, host_id, host_name, status, command, parameter, exit_status, log_path, error_message, start_time, finish_time, create_time, update_time, creator, updater, deleted
+        id, log_id, host_id, host_name, host_address, status, command, parameter, exit_status, log_path, error_message, start_time, finish_time, create_time, update_time, creator, updater, deleted
     </sql>
 
 </mapper>
diff --git a/orion-ops-ui/src/api/exec/exec-log.ts b/orion-ops-ui/src/api/exec/exec-log.ts
index f6d10d1f..75e3754b 100644
--- a/orion-ops-ui/src/api/exec/exec-log.ts
+++ b/orion-ops-ui/src/api/exec/exec-log.ts
@@ -47,6 +47,7 @@ export interface ExecHostLogQueryResponse extends TableData {
   logId: number;
   hostId: number;
   hostName: string;
+  hostAddress: string;
   status: string;
   command: string;
   parameter: string;
diff --git a/orion-ops-ui/src/api/exec/exec.ts b/orion-ops-ui/src/api/exec/exec.ts
index 9bf4ed96..552e0c2d 100644
--- a/orion-ops-ui/src/api/exec/exec.ts
+++ b/orion-ops-ui/src/api/exec/exec.ts
@@ -25,10 +25,22 @@ export interface ExecInterruptRequest {
  */
 export interface ExecCommandResponse {
   id: number;
-  hosts: {
-    id: number;
-    hostId: number;
-  };
+  hosts: Array<ExecCommandHostResponse>;
+}
+
+/**
+ * 执行命令主机响应
+ */
+export interface ExecCommandHostResponse {
+  id: number;
+  hostId: number;
+  hostName: string;
+  hostAddress: string;
+  status: string;
+  exitStatus: number;
+  errorMessage: string;
+  startTime: number;
+  finishTime: number;
 }
 
 /**
diff --git a/orion-ops-ui/src/components/asset/host/authorized-host-modal/components/host-table.vue b/orion-ops-ui/src/components/asset/host/authorized-host-modal/components/host-table.vue
index e23665b7..d1606791 100644
--- a/orion-ops-ui/src/components/asset/host/authorized-host-modal/components/host-table.vue
+++ b/orion-ops-ui/src/components/asset/host/authorized-host-modal/components/host-table.vue
@@ -18,7 +18,7 @@
     </template>
     <!-- 名称 -->
     <template #name="{ record }">
-      {{ record.alias || `${record.name} (${record.code})` }}
+      {{ record.name }}
     </template>
     <!-- 编码 -->
     <template #code="{ record }">
diff --git a/orion-ops-ui/src/components/asset/host/authorized-host-modal/index.vue b/orion-ops-ui/src/components/asset/host/authorized-host-modal/index.vue
index c5c19539..3c35afc8 100644
--- a/orion-ops-ui/src/components/asset/host/authorized-host-modal/index.vue
+++ b/orion-ops-ui/src/components/asset/host/authorized-host-modal/index.vue
@@ -145,6 +145,8 @@
       // 加载主机列表
       const { data } = await getCurrentAuthorizedHost('ssh');
       hosts.value = data;
+      // 禁用别名
+      data.hostList.forEach(s => s.alias = undefined as unknown as string);
       // 设置主机搜索选项
       filterOptions.value = getAuthorizedHostOptions(data.hostList);
     } catch (e) {
@@ -171,7 +173,6 @@
         : list.filter(item => {
           return (item.name as string)?.toLowerCase().indexOf(filterVal) > -1
             || (item.code as string)?.toLowerCase().indexOf(filterVal) > -1
-            || (item.alias as string)?.toLowerCase().indexOf(filterVal) > -1
             || (item.address as string)?.toLowerCase().indexOf(filterVal) > -1;
         });
     }
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
index 5ff27f27..7d6a469c 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
@@ -70,11 +70,9 @@
     </template>
     <!-- 用户名 -->
     <template #username="{ record }">
-      <a-tooltip content="点击复制">
-        <span class="pointer span-blue" @click="copy(record.username)">
-          <icon-copy /> {{ record.username }}
-        </span>
-      </a-tooltip>
+      <span class="span-blue text-copy" @click="copy(record.username)">
+        {{ record.username }}
+      </span>
     </template>
     <!-- 秘钥名称 -->
     <template #keyId="{ record }">
diff --git a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
index 6dc73621..f9611009 100644
--- a/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
+++ b/orion-ops-ui/src/views/asset/host-identity/components/host-identity-table.vue
@@ -82,11 +82,9 @@
              :bordered="false">
       <!-- 用户名 -->
       <template #username="{ record }">
-        <a-tooltip content="点击复制">
-          <span class="pointer span-blue" @click="copy(record.username)">
-            <icon-copy /> {{ record.username }}
-          </span>
-        </a-tooltip>
+        <span class="span-blue text-copy" @click="copy(record.username)">
+          {{ record.username }}
+        </span>
       </template>
       <!-- 秘钥名称 -->
       <template #keyId="{ record }">
diff --git a/orion-ops-ui/src/views/asset/host-identity/types/table.columns.ts b/orion-ops-ui/src/views/asset/host-identity/types/table.columns.ts
index 55ab626b..e98ec07e 100644
--- a/orion-ops-ui/src/views/asset/host-identity/types/table.columns.ts
+++ b/orion-ops-ui/src/views/asset/host-identity/types/table.columns.ts
@@ -21,15 +21,6 @@ const columns = [
     title: '主机秘钥',
     dataIndex: 'keyId',
     slotName: 'keyId',
-  }, {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    slotName: 'createTime',
-    align: 'center',
-    width: 180,
-    render: ({ record }) => {
-      return dateFormat(new Date(record.createTime));
-    },
   }, {
     title: '修改时间',
     dataIndex: 'updateTime',
diff --git a/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue b/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
index c6c6d743..0cfd5d1a 100644
--- a/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
+++ b/orion-ops-ui/src/views/asset/host-list/components/host-card-list.vue
@@ -88,15 +88,13 @@
     </template>
     <!-- 编码 -->
     <template #code="{ record }">
-      <a-tag>{{ record.code }}</a-tag>
+      {{ record.code }}
     </template>
     <!-- 地址 -->
     <template #address="{ record }">
-      <a-tooltip content="点击复制">
-        <span class="pointer span-blue" @click="copy(record.address)">
-          <icon-copy /> {{ record.address }}
-        </span>
-      </a-tooltip>
+      <span class="span-blue text-copy" @click="copy(record.address)">
+        {{ record.address }}
+      </span>
     </template>
     <!-- 标签 -->
     <template #tags="{ record }">
diff --git a/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-editor.vue b/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-editor.vue
index e52d6f37..7817e6e0 100644
--- a/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-editor.vue
+++ b/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-editor.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container">
     <!-- 表头 -->
-    <div class="exec-header">
+    <div class="panel-header">
       <h3>执行命令</h3>
       <span class="span-blue usn pointer" @click="openTemplate">从模板中选择</span>
     </div>
diff --git a/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-form.vue b/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-form.vue
index a7287ccb..d91c9a0f 100644
--- a/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-form.vue
+++ b/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-form.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="exec-form-container">
+  <div class="container">
     <!-- 表头 -->
-    <div class="exec-header">
+    <div class="panel-header">
       <h3>执行参数</h3>
       <!-- 操作 -->
       <a-button-group size="small">
diff --git a/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-history.vue b/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-history.vue
index 43900912..7c212353 100644
--- a/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-history.vue
+++ b/orion-ops-ui/src/views/exec/exec-command/components/exec-panel-history.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="container">
     <!-- 表头 -->
-    <div class="exec-header">
+    <div class="panel-header">
       <h3>执行历史</h3>
+      <span class="history-help">
+        展示最近 {{ historyCount }} 条执行记录
+      </span>
     </div>
     <div v-if="!historyLogs.length" class="flex-center mt16">
       <a-empty description="无执行记录" />
@@ -34,6 +37,7 @@
 
 <script lang="ts" setup>
   import type { ExecLogQueryResponse } from '@/api/exec/exec-log';
+  import type { ExecCommandRequest } from '@/api/exec/exec';
   import { onMounted, ref } from 'vue';
   import { getExecLogHistory } from '@/api/exec/exec-log';
   import { historyCount } from '../types/const';
@@ -42,6 +46,34 @@
 
   const historyLogs = ref<Array<ExecLogQueryResponse>>([]);
 
+  // 添加
+  const add = (record: ExecCommandRequest) => {
+    const index = historyLogs.value.findIndex(s => s.description === record.description);
+    if (index === -1) {
+      // 不存在
+      historyLogs.value.unshift({
+        description: record.description,
+        command: record.command,
+        parameterSchema: record.parameterSchema,
+        timeout: record.timeout,
+        hostIdList: record.hostIdList
+      } as ExecLogQueryResponse);
+    } else {
+      // 存在
+      const his = historyLogs.value[index];
+      historyLogs.value.splice(index, 1);
+      historyLogs.value.unshift({
+        ...his,
+        command: record.command,
+        parameterSchema: record.parameterSchema,
+        timeout: record.timeout,
+        hostIdList: record.hostIdList
+      } as ExecLogQueryResponse);
+    }
+  };
+
+  defineExpose({ add });
+
   // 加载执行记录
   const fetchExecHistory = async () => {
     const { data } = await getExecLogHistory(historyCount);
@@ -57,7 +89,7 @@
   .exec-history-rows {
     position: absolute;
     width: calc(100% - 32px);
-    height: calc(100% - 60px);
+    height: calc(100% - 64px);
     overflow: auto;
 
     &::-webkit-scrollbar-track {
@@ -67,6 +99,7 @@
 
   .exec-history {
     padding: 8px;
+    border-radius: 2px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -84,10 +117,11 @@
       width: 24px;
       height: 24px;
       border-radius: 2px;
+      margin-right: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--color-bg-2);
+      color: #FFF;
       background: rgb(var(--arcoblue-6));
     }
 
@@ -101,4 +135,8 @@
     }
   }
 
+  .history-help {
+    color: var(--color-text-3);
+  }
+
 </style>
diff --git a/orion-ops-ui/src/views/exec/exec-command/components/exec-panel.vue b/orion-ops-ui/src/views/exec/exec-command/components/exec-panel.vue
index da393a04..6cea502f 100644
--- a/orion-ops-ui/src/views/exec/exec-command/components/exec-panel.vue
+++ b/orion-ops-ui/src/views/exec/exec-command/components/exec-panel.vue
@@ -77,6 +77,7 @@
     </exec-panel-editor>
     <!-- 执行历史 -->
     <exec-panel-history class="exec-history-container"
+                        ref="historyRef"
                         @selected="setWithExecLog" />
     <!-- 主机模态框 -->
     <authorized-host-modal ref="hostModal"
@@ -106,16 +107,18 @@
   import ExecPanelHistory from './exec-panel-history.vue';
   import ExecPanelEditor from './exec-panel-editor.vue';
 
+  const emits = defineEmits(['submit']);
+
   const defaultForm = (): ExecCommandRequest => {
     return {
-      timeout: 0,
-      command: ''
+      command: '',
     };
   };
 
   const { loading, setLoading } = useLoading();
 
   const hostModal = ref<any>();
+  const historyRef = ref<any>();
   const formRef = ref<any>();
   const parameterFormRef = ref<any>();
   const formModel = ref<ExecCommandRequest>({ ...defaultForm() });
@@ -186,11 +189,15 @@
         ps.value = parameterFormModel.value[ps.name as string];
       }
       // 执行命令
-      const { data } = await batchExecCommand({
+      const request = {
         ...formModel.value,
         parameterSchema: JSON.stringify(parameterSchema.value),
-      });
-      // TODO log history
+      };
+      const { data } = await batchExecCommand(request);
+      // 设置历史命令
+      historyRef.value.add(request);
+      Message.success('已开始执行');
+      emits('submit', data);
     } catch (e) {
       return false;
     } finally {
@@ -224,6 +231,7 @@
 
     .exec-command-container {
       width: calc(100% - @command-gap);
+      margin: 0 16px;
     }
 
     .exec-history-container {
@@ -239,30 +247,13 @@
     }
   }
 
-  :deep(.exec-header) {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    height: 28px;
-    margin-bottom: 4px;
-
-    h3, > span {
-      margin: 0;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    h3 {
-      color: var(--color-text-1);
-    }
-  }
-
   .exec-form-container {
     .selected-host {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      color: var(--color-text-2);
 
       &-count {
         font-size: 16px;
diff --git a/orion-ops-ui/src/views/exec/exec-command/components/log-panel-host.vue b/orion-ops-ui/src/views/exec/exec-command/components/log-panel-host.vue
new file mode 100644
index 00000000..7c0192af
--- /dev/null
+++ b/orion-ops-ui/src/views/exec/exec-command/components/log-panel-host.vue
@@ -0,0 +1,118 @@
+<template>
+  <!-- 执行主机 -->
+  <div class="container">
+    <!-- 表头 -->
+    <div class="panel-header">
+      <h3>执行主机</h3>
+      <!-- 操作 -->
+      <a-button size="small" @click="emits('back')">
+        返回
+      </a-button>
+    </div>
+    <!-- 主机列表 -->
+    <div class="exec-host-container">
+      <div v-for="item in hosts"
+           :key="item.id"
+           class="exec-host-item"
+           :class="[ current === item.hostId ? 'exec-host-item-selected' : '' ]"
+           @click="emits('selected', item.hostId)">
+        <!-- 主机名称 -->
+        <div class="exec-host-item-name">
+          <span class="host-name">{{ item.hostName }}</span>
+          <span class="host-address">{{ item.hostAddress }}</span>
+        </div>
+        <!-- 状态 -->
+        <div class="exec-host-item-status">
+          <a-tag :color="getDictValue(execHostStatusKey, item.status, 'execColor')">
+            {{ getDictValue(execHostStatusKey, item.status) }}
+          </a-tag>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'logPanelHost'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecCommandHostResponse } from '@/api/exec/exec';
+  import { useDictStore } from '@/store';
+  import { execHostStatusKey } from '@/views/exec/exec-log/types/const';
+
+  const props = defineProps<{
+    current: number;
+    hosts: Array<ExecCommandHostResponse>;
+  }>();
+  const emits = defineEmits(['back', 'selected']);
+
+  const { getDictValue } = useDictStore();
+
+</script>
+
+<style lang="less" scoped>
+  .exec-host-container {
+    margin-top: 4px;
+    position: absolute;
+    width: calc(100% - 32px);
+    height: calc(100% - 68px);
+    overflow: auto;
+
+    &::-webkit-scrollbar-track {
+      display: none;
+    }
+  }
+
+  .exec-host-item-selected {
+    background: var(--color-fill-3) !important;
+  }
+
+  .exec-host-item {
+    height: 46px;
+    padding: 8px;
+    border-radius: 2px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    background: var(--color-fill-2);
+    transition: all .2s;
+    user-select: none;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-fill-3);
+    }
+
+    &-name {
+      width: calc(100% - 72px);
+      margin-right: 12px;
+      display: flex;
+      flex-direction: column;
+      color: var(--color-text-2);
+
+      .host-name, .host-address {
+        display: block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .host-address {
+        margin-top: 2px;
+        font-size: 10px;
+        color: var(--color-text-3);
+      }
+    }
+
+    &-status {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+  }
+
+</style>
diff --git a/orion-ops-ui/src/views/exec/exec-command/components/log-panel.vue b/orion-ops-ui/src/views/exec/exec-command/components/log-panel.vue
new file mode 100644
index 00000000..e660f434
--- /dev/null
+++ b/orion-ops-ui/src/views/exec/exec-command/components/log-panel.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="log-panel-container">
+    <!-- 执行主机 -->
+    <log-panel-host class="host-container"
+                    :current="currentHostId"
+                    :hosts="command.hosts"
+                    @selected="selectedHost"
+                    @back="back" />
+    <!-- 日志容器 -->
+    <div class="log-container">
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'logPanel'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { ExecCommandResponse } from '@/api/exec/exec';
+  import { ref } from 'vue';
+  import 'xterm/css/xterm.css';
+  import LogPanelHost from './log-panel-host.vue';
+
+  const emits = defineEmits(['back']);
+
+  const currentHostId = ref(1);
+  const command = ref<ExecCommandResponse>({
+    id: 50,
+    hosts: [{
+      id: 76,
+      hostId: 1,
+      hostName: 'main-11',
+      hostAddress: '192.412.53.2',
+      status: 'WAITING'
+    }, {
+      id: 77,
+      hostId: 2,
+      hostName: 'main-22',
+      hostAddress: '192.412.53.2',
+      status: 'RUNNING'
+    }, {
+      id: 78,
+      hostId: 3,
+      hostName: 'main-33',
+      hostAddress: '192.412.53.2',
+      status: 'COMPLETED'
+    }, {
+      id: 79,
+      hostId: 4,
+      hostName: 'main-44',
+      hostAddress: '192.412.53.2',
+      status: 'FAILED'
+    }, {
+      id: 80,
+      hostId: 5,
+      hostName: 'main-55',
+      hostAddress: '192.412.53.2',
+      status: 'INTERRUPTED'
+    }]
+  } as ExecCommandResponse);
+
+  // 打开
+  const open = (record: ExecCommandResponse) => {
+    command.value = record;
+    currentHostId.value = record.hosts[0].hostId;
+    // 打开日志
+    openLog();
+  };
+
+  defineExpose({ open });
+
+  // 打开日志
+  const openLog = () => {
+
+  };
+
+  // 选中主机
+  const selectedHost = (hostId: number) => {
+    currentHostId.value = hostId;
+  };
+
+  // 返回
+  const back = () => {
+    emits('back');
+    // 清理
+    clear();
+  };
+
+  // 清理
+  const clear = () => {
+
+  };
+
+  // TODO pull status
+
+</script>
+
+<style lang="less" scoped>
+  @host-width: 420px;
+  @host-real-width: @host-width + 16px;
+
+  .log-panel-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+  }
+
+  .host-container, .log-container {
+    height: 100%;
+    padding: 16px;
+    border-radius: 4px;
+    position: relative;
+    background: var(--color-bg-2);
+  }
+
+  .host-container {
+    width: @host-width;
+    margin-right: 16px;
+  }
+
+  .log-container {
+    width: calc(100% - @host-real-width);
+  }
+
+</style>
diff --git a/orion-ops-ui/src/views/exec/exec-command/index.vue b/orion-ops-ui/src/views/exec/exec-command/index.vue
index a61b5764..f5f9abd9 100644
--- a/orion-ops-ui/src/views/exec/exec-command/index.vue
+++ b/orion-ops-ui/src/views/exec/exec-command/index.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="layout-container full">
     <!-- 执行面板 -->
-    <exec-panel />
+    <exec-panel v-show="!logVisible"
+                @submit="openLog" />
+    <!-- 执行日志 -->
+    <log-panel v-if="logVisible"
+               ref="log"
+               @back="setLogVisible(false)" />
   </div>
 </template>
 
@@ -12,10 +17,51 @@
 </script>
 
 <script lang="ts" setup>
+  import type { ExecCommandResponse } from '@/api/exec/exec';
+  import { onMounted, ref } from 'vue';
+  import useVisible from '@/hooks/visible';
+  import { useDictStore } from '@/store';
+  import { dictKeys } from '@/views/exec/exec-log/types/const';
   import ExecPanel from './components/exec-panel.vue';
+  import LogPanel from './components/log-panel.vue';
+
+  const { visible: logVisible, setVisible: setLogVisible } = useVisible(true);
+  const { loadKeys } = useDictStore();
+
+  const log = ref();
+
+  // 打开日志
+  const openLog = (record: ExecCommandResponse) => {
+    setLogVisible(true);
+    log.value.open(record);
+  };
+
+  // 加载字典值
+  onMounted(async () => {
+    await loadKeys(dictKeys);
+  });
 
 </script>
 
 <style lang="less" scoped>
 
+  :deep(.panel-header) {
+    width: 100%;
+    height: 28px;
+    margin-bottom: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    h3, > span {
+      margin: 0;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    h3 {
+      color: var(--color-text-1);
+    }
+  }
+
 </style>
diff --git a/orion-ops-ui/src/views/exec/exec-log/components/exec-host-log-table.vue b/orion-ops-ui/src/views/exec/exec-log/components/exec-host-log-table.vue
index cf4611ff..cd94269a 100644
--- a/orion-ops-ui/src/views/exec/exec-log/components/exec-host-log-table.vue
+++ b/orion-ops-ui/src/views/exec/exec-log/components/exec-host-log-table.vue
@@ -11,9 +11,15 @@
            :bordered="false">
     <!-- 执行主机 -->
     <template #hostName="{ record }">
-      <span class="span-blue">
+      <span class="table-cell-value span-blue">
         {{ record.hostName }}
       </span>
+      <br>
+      <span class="table-cell-sub-value usn text-copy"
+            style="font-size: 12px;"
+            @click="copy(record.hostAddress)">
+        {{ record.hostAddress }}
+      </span>
     </template>
     <!-- 错误信息 -->
     <template #errorMessage="{ record }">
@@ -104,6 +110,7 @@
   import { useExpandable } from '@/types/table';
   import { dateFormat, formatDuration } from '@/utils';
   import { interruptHostExec } from '@/api/exec/exec';
+  import { copy } from '@/hooks/copy';
 
   const props = defineProps<{
     row: ExecLogQueryResponse;
diff --git a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
index 844a6f19..869ccd9c 100644
--- a/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
+++ b/orion-ops-ui/src/views/system/dict-key/components/dict-key-table.vue
@@ -6,6 +6,13 @@
                   @submit="fetchTableData"
                   @reset="fetchTableData"
                   @keyup.enter="() => fetchTableData()">
+      <!-- id -->
+      <a-form-item field="id" label="id">
+        <a-input-number v-model="formModel.id"
+                        placeholder="请输入id"
+                        allow-clear
+                        hide-button />
+      </a-form-item>
       <!-- 配置项 -->
       <a-form-item field="keyName" label="配置项">
         <a-input v-model="formModel.keyName"
@@ -140,13 +147,13 @@
 <script lang="ts" setup>
   import type { DictKeyQueryRequest, DictKeyQueryResponse } from '@/api/system/dict-key';
   import { reactive, ref, onMounted } from 'vue';
-  import { batchDeleteDictKey, deleteDictKey, getDictKeyPage, refreshCache } from '@/api/system/dict-key';
+  import { deleteDictKey, getDictKeyPage, refreshCache } from '@/api/system/dict-key';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
   import { usePagination } from '@/types/table';
   import { dictValueTypeKey } from '../types/const';
-  import useCopy from '@/hooks/copy';
+  import { copy } from '@/hooks/copy';
   import { useCacheStore, useDictStore } from '@/store';
   import { getDictValueList } from '@/api/system/dict-value';
 
@@ -154,7 +161,6 @@
   const emits = defineEmits(['openAdd', 'openUpdate', 'openView']);
 
   const pagination = usePagination();
-  const { copy } = useCopy();
   const { loading, setLoading } = useLoading();
   const { toOptions, getDictValue } = useDictStore();
   const cacheStore = useCacheStore();