🔨 执行命令.

2024-03-17 21:09:58 +08:00
parent 2abf5bcf08
commit 2819df9c31
22 changed files with 429 additions and 67 deletions
--- 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;
--- 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;
+
 }
--- 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;

--- 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()
--- 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>
--- 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;
--- 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;
 }

 /**
--- 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 }">
--- 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;
        });
    }
--- 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 }">
--- 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 }">
--- 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',
--- 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 }">
--- 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>
--- 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">
--- 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>
--- 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;
--- 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
@@ -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>
--- 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
@@ -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>
--- 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>
--- 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;
--- 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();