🔨 执行日志.

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/controller/ExecController.java

@@ -7,17 +7,14 @@ import com.orion.ops.framework.web.core.annotation.RestWrapper;
 import com.orion.ops.module.asset.define.operator.ExecOperatorType;
 import com.orion.ops.module.asset.entity.request.exec.ExecCommandRequest;
 import com.orion.ops.module.asset.entity.request.exec.ExecInterruptRequest;
-import com.orion.ops.module.asset.entity.vo.ExecVO;
+import com.orion.ops.module.asset.entity.vo.ExecCommandVO;
 import com.orion.ops.module.asset.service.ExecService;
 import io.swagger.v3.oas.annotations.Operation;
 import io.swagger.v3.oas.annotations.tags.Tag;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.validation.annotation.Validated;
-import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
 
 import javax.annotation.Resource;
 
@@ -44,12 +41,12 @@ public class ExecController {
     @PostMapping("/exec-command")
     @Operation(summary = "批量执行命令")
     @PreAuthorize("@ss.hasPermission('asset:exec:exec-command')")
-    public ExecVO execCommand(@RequestBody ExecCommandRequest request) {
+    public ExecCommandVO execCommand(@RequestBody ExecCommandRequest request) {
         return execService.execCommand(request);
     }
 
     @OperatorLog(ExecOperatorType.INTERRUPT_EXEC)
-    @PostMapping("/interrupt")
+    @PutMapping("/interrupt")
     @Operation(summary = "中断执行命令")
     @PreAuthorize("@ss.hasPermission('asset:exec:interrupt-exec')")
     public HttpWrapper<?> interruptExec(@RequestBody ExecInterruptRequest request) {
@@ -59,8 +56,8 @@ public class ExecController {
     }
 
     @OperatorLog(ExecOperatorType.INTERRUPT_HOST)
-    @PostMapping("/interrupt-host")
+    @PutMapping("/interrupt-host")
-    @Operation(summary = "中断执行命令")
+    @Operation(summary = "中断执行主机命令")
     @PreAuthorize("@ss.hasPermission('asset:exec:interrupt-exec')")
     public HttpWrapper<?> interruptHostExec(@RequestBody ExecInterruptRequest request) {
         Long hostLogId = Valid.notNull(request.getHostLogId());
@@ -69,5 +66,7 @@ public class ExecController {
     }
 
     // TODO tail log
+    // TODO 重新执行
+    // TODO 删除时 中断
 
 }

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/controller/ExecLogController.java

@@ -2,7 +2,6 @@ package com.orion.ops.module.asset.controller;
 
 import com.orion.lang.define.wrapper.DataGrid;
 import com.orion.ops.framework.biz.operator.log.core.annotation.OperatorLog;
-import com.orion.ops.framework.common.validator.group.Batch;
 import com.orion.ops.framework.common.validator.group.Page;
 import com.orion.ops.framework.log.core.annotation.IgnoreLog;
 import com.orion.ops.framework.log.core.enums.IgnoreLogMode;
@@ -48,15 +47,6 @@ public class ExecLogController {
     @Resource
     private ExecHostLogService execHostLogService;
 
-    @IgnoreLog(IgnoreLogMode.RET)
-    @GetMapping("/get")
-    @Operation(summary = "查询执行日志")
-    @Parameter(name = "id", description = "id", required = true)
-    @PreAuthorize("@ss.hasPermission('asset:exec-log:query')")
-    public ExecLogVO getExecLog(@RequestParam("id") Long id) {
-        return execLogService.getExecLogById(id);
-    }
-
     @IgnoreLog(IgnoreLogMode.RET)
     @PostMapping("/query")
     @Operation(summary = "分页查询执行日志")
@@ -76,10 +66,11 @@ public class ExecLogController {
 
     @IgnoreLog(IgnoreLogMode.RET)
     @GetMapping("/status")
-    @Operation(summary = "查询执行日志状态")
+    @Operation(summary = "查询命令执行状态")
+    @Parameter(name = "idList", description = "idList", required = true)
     @PreAuthorize("@ss.hasPermission('asset:exec-log:query')")
-    public ExecLogStatusVO getExecLogStatus(@Validated(Batch.class) @RequestBody ExecLogQueryRequest request) {
+    public ExecLogStatusVO getExecLogStatus(@RequestParam("idList") List<Long> idList) {
-        return execLogService.getExecLogStatus(request.getIdList());
+        return execLogService.getExecLogStatus(idList);
     }
 
     @OperatorLog(ExecOperatorType.DELETE_LOG)

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/request/exec/ExecLogQueryRequest.java

@@ -2,14 +2,11 @@ package com.orion.ops.module.asset.entity.request.exec;
 
 import com.fasterxml.jackson.annotation.JsonFormat;
 import com.orion.ops.framework.common.entity.PageRequest;
-import com.orion.ops.framework.common.validator.group.Batch;
 import io.swagger.v3.oas.annotations.media.Schema;
 import lombok.*;
 
-import javax.validation.constraints.NotEmpty;
 import javax.validation.constraints.Size;
 import java.util.Date;
-import java.util.List;
 
 /**
  * 批量执行日志 查询请求对象
@@ -29,10 +26,6 @@ public class ExecLogQueryRequest extends PageRequest {
     @Schema(description = "id")
     private Long id;
 
-    @NotEmpty(groups = Batch.class)
-    @Schema(description = "id")
-    private List<Long> idList;
-
     @Schema(description = "执行用户id")
     private Long userId;
 

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecCommandHostVO.java

@@ -7,10 +7,9 @@ import lombok.Data;
 import lombok.NoArgsConstructor;
 
 import java.io.Serializable;
-import java.util.Map;
 
 /**
- * 批量执行 视图响应对象
+ * 命令执行主机 视图响应对象
  *
  * @author Jiahang Li
  * @version 1.0.0
@@ -20,13 +19,13 @@ import java.util.Map;
 @Builder
 @NoArgsConstructor
 @AllArgsConstructor
-@Schema(name = "ExecVO", description = "批量执行 视图响应对象")
+@Schema(name = "ExecCommandHostVO", description = "命令执行主机 视图响应对象")
-public class ExecVO implements Serializable {
+public class ExecCommandHostVO implements Serializable {
 
     @Schema(description = "id")
     private Long id;
 
-    @Schema(description = "主机 id 映射 host:id")
+    @Schema(description = "hostId")
-    private Map<String, Long> hostIdRel;
+    private Long hostId;
 
 }

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/entity/vo/ExecCommandVO.java

@@ -0,0 +1,32 @@
+package com.orion.ops.module.asset.entity.vo;
+
+import io.swagger.v3.oas.annotations.media.Schema;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+import java.io.Serializable;
+import java.util.List;
+
+/**
+ * 命令执行 视图响应对象
+ *
+ * @author Jiahang Li
+ * @version 1.0.0
+ * @since 2024/3/11 14:57
+ */
+@Data
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+@Schema(name = "ExecCommandVO", description = "命令执行 视图响应对象")
+public class ExecCommandVO implements Serializable {
+
+    @Schema(description = "id")
+    private Long id;
+
+    @Schema(description = "主机 id 映射")
+    private List<ExecCommandHostVO> hosts;
+
+}

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/ExecLogService.java

@@ -16,14 +16,6 @@ import java.util.List;
  */
 public interface ExecLogService {
 
-    /**
-     * 查询批量执行日志
-     *
-     * @param id id
-     * @return row
-     */
-    ExecLogVO getExecLogById(Long id);
-
     /**
      * 分页查询批量执行日志
      *

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/ExecService.java

@@ -1,7 +1,7 @@
 package com.orion.ops.module.asset.service;
 
 import com.orion.ops.module.asset.entity.request.exec.ExecCommandRequest;
-import com.orion.ops.module.asset.entity.vo.ExecVO;
+import com.orion.ops.module.asset.entity.vo.ExecCommandVO;
 
 /**
  * 批量执行服务
@@ -18,7 +18,7 @@ public interface ExecService {
      * @param request request
      * @return result
      */
-    ExecVO execCommand(ExecCommandRequest request);
+    ExecCommandVO execCommand(ExecCommandRequest request);
 
     /**
      * 中断命令执行

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/ExecLogServiceImpl.java

@@ -48,15 +48,6 @@ public class ExecLogServiceImpl implements ExecLogService {
     @Resource
     private ExecHostLogService execHostLogService;
 
-    @Override
-    public ExecLogVO getExecLogById(Long id) {
-        // 查询
-        ExecLogDO record = execLogDAO.selectById(id);
-        Valid.notNull(record, ErrorMessage.DATA_ABSENT);
-        // 转换
-        return ExecLogConvert.MAPPER.to(record);
-    }
-
     @Override
     public DataGrid<ExecLogVO> getExecLogPage(ExecLogQueryRequest request) {
         // 条件

orion-ops-module-asset/orion-ops-module-asset-service/src/main/java/com/orion/ops/module/asset/service/impl/ExecServiceImpl.java

@@ -24,7 +24,8 @@ import com.orion.ops.module.asset.entity.domain.ExecHostLogDO;
 import com.orion.ops.module.asset.entity.domain.ExecLogDO;
 import com.orion.ops.module.asset.entity.domain.HostDO;
 import com.orion.ops.module.asset.entity.request.exec.ExecCommandRequest;
-import com.orion.ops.module.asset.entity.vo.ExecVO;
+import com.orion.ops.module.asset.entity.vo.ExecCommandHostVO;
+import com.orion.ops.module.asset.entity.vo.ExecCommandVO;
 import com.orion.ops.module.asset.enums.ExecHostStatusEnum;
 import com.orion.ops.module.asset.enums.ExecSourceEnum;
 import com.orion.ops.module.asset.enums.ExecStatusEnum;
@@ -82,7 +83,7 @@ public class ExecServiceImpl implements ExecService {
 
     @Override
     @Transactional(rollbackFor = Exception.class)
-    public ExecVO execCommand(ExecCommandRequest request) {
+    public ExecCommandVO execCommand(ExecCommandRequest request) {
         log.info("ExecService.startExecCommand start params: {}", JSON.toJSONString(request));
         LoginUser user = Objects.requireNonNull(SecurityUtils.getLoginUser());
         Long userId = user.getId();
@@ -141,11 +142,15 @@ public class ExecServiceImpl implements ExecService {
         // 操作日志
         OperatorLogs.add(OperatorLogs.ID, execId);
         // 返回
-        Map<String, Long> hostIdRel = execHostLogs.stream()
+        List<ExecCommandHostVO> hostResult = execHostLogs.stream()
-                .collect(Collectors.toMap(s -> String.valueOf(s.getHostId()), ExecHostLogDO::getId));
+                .map(s -> ExecCommandHostVO.builder()
-        return ExecVO.builder()
+                        .id(s.getId())
+                        .hostId(s.getHostId())
+                        .build())
+                .collect(Collectors.toList());
+        return ExecCommandVO.builder()
                 .id(execId)
-                .hostIdRel(hostIdRel)
+                .hosts(hostResult)
                 .build();
     }
 

orion-ops-ui/src/api/exec/exec-host-log.ts

@@ -1,135 +0,0 @@
-import type { DataGrid, Pagination } from '@/types/global';
-import type { TableData } from '@arco-design/web-vue/es/table/interface';
-import axios from 'axios';
-import qs from 'query-string';
-
-/**
- * 主机执行记录创建请求
- */
-export interface ExecHostLogCreateRequest {
-  logId?: number;
-  hostId?: number;
-  hostName?: string;
-  status?: string;
-  command?: string;
-  parameter?: string;
-  exitStatus?: number;
-  logPath?: string;
-  errorMessage?: string;
-  startTime?: string;
-  finishTime?: string;
-}
-
-/**
- * 主机执行记录更新请求
- */
-export interface ExecHostLogUpdateRequest extends ExecHostLogCreateRequest {
-  id?: number;
-}
-
-/**
- * 主机执行记录查询请求
- */
-export interface ExecHostLogQueryRequest extends Pagination {
-  searchValue?: string;
-  id?: number;
-  logId?: number;
-  hostId?: number;
-  hostName?: string;
-  status?: string;
-  command?: string;
-  parameter?: string;
-  exitStatus?: number;
-  logPath?: string;
-  errorMessage?: string;
-  startTime?: string;
-  finishTime?: string;
-}
-
-/**
- * 主机执行记录查询响应
- */
-export interface ExecHostLogQueryResponse extends TableData {
-  id: number;
-  logId: number;
-  hostId: number;
-  hostName: string;
-  status: string;
-  command: string;
-  parameter: string;
-  exitStatus: number;
-  logPath: string;
-  errorMessage: string;
-  startTime: number;
-  finishTime: number;
-  createTime: number;
-  updateTime: number;
-  creator: string;
-  updater: string;
-}
-
-/**
- * 创建主机执行记录
- */
-export function createExecHostLog(request: ExecHostLogCreateRequest) {
-  return axios.post('/asset/exec-host-log/create', request);
-}
-
-/**
- * 更新主机执行记录
- */
-export function updateExecHostLog(request: ExecHostLogUpdateRequest) {
-  return axios.put('/asset/exec-host-log/update', request);
-}
-
-/**
- * 查询主机执行记录
- */
-export function getExecHostLog(id: number) {
-  return axios.get<ExecHostLogQueryResponse>('/asset/exec-host-log/get', { params: { id } });
-}
-
-/**
- * 批量查询主机执行记录
- */
-export function batchGetExecHostLogList(idList: Array<number>) {
-  return axios.get<ExecHostLogQueryResponse[]>('/asset/exec-host-log/batch-get', {
-    params: { idList },
-    paramsSerializer: params => {
-      return qs.stringify(params, { arrayFormat: 'comma' });
-    }
-  });
-}
-
-/**
- * 查询全部主机执行记录
- */
-export function getExecHostLogList(request: ExecHostLogQueryRequest) {
-  return axios.post<Array<ExecHostLogQueryResponse>>('/asset/exec-host-log/list', request);
-}
-
-/**
- * 分页查询主机执行记录
- */
-export function getExecHostLogPage(request: ExecHostLogQueryRequest) {
-  return axios.post<DataGrid<ExecHostLogQueryResponse>>('/asset/exec-host-log/query', request);
-}
-
-/**
- * 删除主机执行记录
- */
-export function deleteExecHostLog(id: number) {
-  return axios.delete('/asset/exec-host-log/delete', { params: { id } });
-}
-
-/**
- * 批量删除主机执行记录
- */
-export function batchDeleteExecHostLog(idList: Array<number>) {
-  return axios.delete('/asset/exec-host-log/batch-delete', {
-    params: { idList },
-    paramsSerializer: params => {
-      return qs.stringify(params, { arrayFormat: 'comma' });
-    }
-  });
-}

orion-ops-ui/src/api/exec/exec-log.ts

@@ -55,10 +55,11 @@ export interface ExecHostLogQueryResponse extends TableData {
 }
 
 /**
- * 查询执行记录
+ * 执行状态查询响应
  */
-export function getExecLog(id: number) {
+export interface ExecStatusResponse {
-  return axios.get<ExecLogQueryResponse>('/asset/exec-log/get', { params: { id } });
+  logList: Array<ExecLogQueryResponse>;
+  hostList: Array<ExecHostLogQueryResponse>;
 }
 
 /**
@@ -75,6 +76,18 @@ export function getExecHostLogList(logId: number) {
   return axios.get<Array<ExecHostLogQueryResponse>>('/asset/exec-log/host-list', { params: { logId } });
 }
 
+/**
+ * 查询命令执行状态
+ */
+export function getExecLogStatus(idList: Array<number>) {
+  return axios.get<ExecStatusResponse>('/asset/exec-log/status', {
+    params: { idList },
+    paramsSerializer: params => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    }
+  });
+}
+
 /**
  * 删除执行记录
  */
@@ -93,3 +106,24 @@ export function batchDeleteExecLog(idList: Array<number>) {
     }
   });
 }
+
+/**
+ * 删除主机执行记录
+ */
+export function deleteExecHostLog(id: number) {
+  return axios.delete('/asset/exec-log/delete-host', { params: { id } });
+}
+
+/**
+ * 查询操作日志数量
+ */
+export function getExecLogCount(request: ExecLogQueryRequest) {
+  return axios.post<number>('/asset/exec-log/query-count', request);
+}
+
+/**
+ * 清空操作日志
+ */
+export function clearExecLog(request: ExecLogQueryRequest) {
+  return axios.post<number>('/asset/exec-log/clear', request);
+}

orion-ops-ui/src/api/exec/exec.ts

@@ -0,0 +1,53 @@
+import axios from 'axios';
+
+/**
+ * 执行命令请求
+ */
+export interface ExecCommandRequest {
+  templateId?: number;
+  description?: string;
+  timeout?: number;
+  command?: string;
+  parameter?: string;
+  hostIdList?: number[];
+}
+
+/**
+ * 中断命令请求
+ */
+export interface ExecInterruptRequest {
+  logId?: number;
+  hostLogId?: number;
+}
+
+/**
+ * 执行命令响应
+ */
+export interface ExecCommandResponse {
+  id: number;
+  hosts: {
+    id: number;
+    hostId: number;
+  };
+}
+
+/**
+ * 执行命令
+ */
+export function execCommand(request: ExecCommandRequest) {
+  return axios.post<ExecCommandResponse>('/asset/exec/exec-command', request);
+}
+
+/**
+ * 中断执行命令
+ */
+export function interruptExec(request: ExecInterruptRequest) {
+  return axios.put('/asset/exec/interrupt', request);
+}
+
+/**
+ * 中断执行主机命令
+ */
+export function interruptHostExec(request: ExecInterruptRequest) {
+  return axios.put('/asset/exec/interrupt-host', request);
+}

orion-ops-ui/src/assets/style/global.less

@@ -266,6 +266,16 @@ body {
   color: rgb(var(--red-6));
 }
 
+.table-cell-value {
+  color: var(--color-text-2);
+}
+
+.table-cell-sub-value {
+  margin-top: 4px;
+  display: inline-block;
+  color: var(--color-text-3);
+}
+
 // -- 滚动条
 #app {
   -webkit-font-smoothing: antialiased;

orion-ops-ui/src/components/view/json-editor/modal/index.vue

@@ -2,7 +2,7 @@
   <a-modal v-model:visible="visible"
            title-align="start"
            :width="width"
-           :body-style="{padding: '16px 8px'}"
+           :body-style="{ padding: '16px 8px' }"
            :top="80"
            :title="title"
            :align-center="false"
@@ -12,7 +12,7 @@
            :footer="false"
            @close="handleClose">
     <div :style="{ width: '100%', 'height': height }">
-      <editor v-model="value" readonly />
+      <editor v-model="value" :readonly="readonly" />
     </div>
   </a-modal>
 </template>
@@ -36,6 +36,10 @@
     height: {
       type: String,
       default: 'calc(100vh - 240px)'
+    },
+    readonly: {
+      type: Boolean,
+      default: true
     }
   });
 

orion-ops-ui/src/components/view/shell-editor/modal/index.vue

@@ -2,7 +2,7 @@
   <a-modal v-model:visible="visible"
            title-align="start"
            :width="width"
-           :body-style="{padding: '16px 8px'}"
+           :body-style="{ padding: '8px' }"
            :top="80"
            :title="title"
            :align-center="false"
@@ -16,7 +16,8 @@
               language="shell"
               :suggestions="true"
               :auto-focus="true"
-              :theme="dark ? 'vs-dark' : 'vs'" />
+              :theme="dark ? 'vs-dark' : 'vs'"
+              :readonly="readonly" />
     </div>
   </a-modal>
 </template>
@@ -44,6 +45,10 @@
       type: Boolean,
       default: true
     },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
   });
 
   const { visible, setVisible } = useVisible();

orion-ops-ui/src/views/asset-audit/connect-log/components/connect-log-table.vue

@@ -104,11 +104,11 @@
       </template>
       <!-- 连接主机 -->
       <template #hostName="{ record }">
-        <span class="host-name" :title="record.hostName">
+        <span class="table-cell-value" :title="record.hostName">
           {{ record.hostName }}
         </span>
         <br>
-        <span class="host-address text-copy"
+        <span class="table-cell-sub-value text-copy"
               :title="record.hostAddress"
               @click="copy(record.hostAddress)">
           {{ record.hostAddress }}
@@ -123,11 +123,11 @@
       </template>
       <!-- 留痕地址 -->
       <template #address="{ record }">
-        <span class="connect-location" :title="record.extra?.location">
+        <span class="table-cell-value" :title="record.extra?.location">
           {{ record.extra?.location }}
         </span>
         <br>
-        <span class="connect-address text-copy"
+        <span class="table-cell-sub-value text-copy"
               :title="record.extra?.address"
               @click="copy(record.extra?.address)">
           {{ record.extra?.address }}
@@ -306,13 +306,4 @@
 </script>
 
 <style lang="less" scoped>
-  .host-name, .connect-location {
-    color: var(--color-text-2);
-  }
-
-  .host-address, .connect-address {
-    margin-top: 4px;
-    display: inline-block;
-    color: var(--color-text-3);
-  }
 </style>

orion-ops-ui/src/views/asset-audit/sftp-log/components/sftp-log-table.vue

@@ -91,11 +91,11 @@
       </template>
       <!-- 操作主机 -->
       <template #hostName="{ record }">
-        <span class="host-name" :title="record.hostName">
+        <span class="table-cell-value" :title="record.hostName">
           {{ record.hostName }}
         </span>
         <br>
-        <span class="host-address text-copy"
+        <span class="table-cell-sub-value text-copy"
               :title="record.hostAddress"
               @click="copy(record.hostAddress)">
           {{ record.hostAddress }}
@@ -115,11 +115,11 @@
             {{ path }}
           </span>
           <!-- 移动目标路径 -->
-          <span class="sub-text" v-if="SftpOperatorType.SFTP_MOVE === record.type">
+          <span class="table-cell-sub-value" v-if="SftpOperatorType.SFTP_MOVE === record.type">
             移动到 {{ record.extra?.target }}
           </span>
           <!-- 提权信息 -->
-          <span class="sub-text" v-if="SftpOperatorType.SFTP_CHMOD === record.type">
+          <span class="table-cell-sub-value" v-if="SftpOperatorType.SFTP_CHMOD === record.type">
             提权 {{ record.extra?.mod }} {{ permission10toString(record.extra?.mod as number) }}
           </span>
         </div>
@@ -132,11 +132,11 @@
       </template>
       <!-- 留痕地址 -->
       <template #address="{ record }">
-        <span class="operator-location" :title="record.location">
+        <span class="table-cell-value" :title="record.location">
           {{ record.location }}
         </span>
         <br>
-        <span class="operator-address text-copy"
+        <span class="table-cell-sub-value text-copy"
               :title="record.address"
               @click="copy(record.address)">
           {{ record.address }}
@@ -263,16 +263,6 @@
 </script>
 
 <style lang="less" scoped>
-  .host-name, .operator-location {
-    color: var(--color-text-2);
-  }
-
-  .host-address, .operator-address, .sub-text {
-    margin-top: 4px;
-    display: inline-block;
-    color: var(--color-text-3);
-  }
-
   .paths-wrapper {
     display: flex;
     flex-direction: column;

orion-ops-ui/src/views/exec/exec-host-log/components/exec-host-log-form-modal.vue

@@ -1,206 +0,0 @@
-<template>
-  <a-modal v-model:visible="visible"
-           body-class="modal-form"
-           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"
-              :label-col-props="{ span: 5 }"
-              :wrapper-col-props="{ span: 18 }"
-              :rules="formRules">
-        <!-- 执行日志id -->
-        <a-form-item field="logId" label="执行日志id">
-          <a-input-number v-model="formModel.logId"
-                          placeholder="请输入执行日志id"
-                          hide-button />
-        </a-form-item>
-        <!-- 主机id -->
-        <a-form-item field="hostId" label="主机id">
-          <a-input-number v-model="formModel.hostId"
-                          placeholder="请输入主机id"
-                          hide-button />
-        </a-form-item>
-        <!-- 主机名称 -->
-        <a-form-item field="hostName" label="主机名称">
-          <a-input v-model="formModel.hostName"
-                   placeholder="请输入主机名称"
-                   allow-clear />
-        </a-form-item>
-        <!-- 执行状态 -->
-        <a-form-item field="status" label="执行状态">
-          <a-select v-model="formModel.status"
-                    :options="toOptions(execHostStatusKey)"
-                    placeholder="请选择执行状态" />
-        </a-form-item>
-        <!-- 执行命令 -->
-        <a-form-item field="command" label="执行命令">
-          <a-input v-model="formModel.command"
-                   placeholder="请输入执行命令"
-                   allow-clear />
-        </a-form-item>
-        <!-- 执行参数 -->
-        <a-form-item field="parameter" label="执行参数">
-          <a-input v-model="formModel.parameter"
-                   placeholder="请输入执行参数"
-                   allow-clear />
-        </a-form-item>
-        <!-- 退出码 -->
-        <a-form-item field="exitStatus" label="退出码">
-          <a-input-number v-model="formModel.exitStatus"
-                          placeholder="请输入退出码"
-                          hide-button />
-        </a-form-item>
-        <!-- 日志路径 -->
-        <a-form-item field="logPath" label="日志路径">
-          <a-input v-model="formModel.logPath"
-                   placeholder="请输入日志路径"
-                   allow-clear />
-        </a-form-item>
-        <!-- 错误信息 -->
-        <a-form-item field="errorMessage" label="错误信息">
-          <a-input v-model="formModel.errorMessage"
-                   placeholder="请输入错误信息"
-                   allow-clear />
-        </a-form-item>
-        <!-- 执行开始时间 -->
-        <a-form-item field="startTime" label="执行开始时间">
-          <a-date-picker v-model="formModel.startTime"
-                         style="width: 100%"
-                         placeholder="请选择执行开始时间"
-                         show-time />
-        </a-form-item>
-        <!-- 执行结束时间 -->
-        <a-form-item field="finishTime" label="执行结束时间">
-          <a-date-picker v-model="formModel.finishTime"
-                         style="width: 100%"
-                         placeholder="请选择执行结束时间"
-                         show-time />
-        </a-form-item>
-      </a-form>
-    </a-spin>
-  </a-modal>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'execHostLogFormModal'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { ExecHostLogUpdateRequest } from '@/api/exec/exec-host-log';
-  import { ref } from 'vue';
-  import useLoading from '@/hooks/loading';
-  import useVisible from '@/hooks/visible';
-  import formRules from '../types/form.rules';
-  import { execHostStatusKey } from '../types/const';
-  import { createExecHostLog, updateExecHostLog } from '@/api/exec/exec-host-log';
-  import { Message } from '@arco-design/web-vue';
-  import { useDictStore } from '@/store';
-
-  const emits = defineEmits(['added', 'updated']);
-
-  const { visible, setVisible } = useVisible();
-  const { loading, setLoading } = useLoading();
-  const { toOptions } = useDictStore();
-
-  const title = ref<string>();
-  const isAddHandle = ref<boolean>(true);
-  const formRef = ref<any>();
-  const formModel = ref<ExecHostLogUpdateRequest>({});
-
-  const defaultForm = (): ExecHostLogUpdateRequest => {
-    return {
-      id: undefined,
-      logId: undefined,
-      hostId: undefined,
-      hostName: undefined,
-      status: undefined,
-      command: undefined,
-      parameter: undefined,
-      exitStatus: undefined,
-      logPath: undefined,
-      errorMessage: undefined,
-      startTime: undefined,
-      finishTime: undefined,
-    };
-  };
-
-  // 打开新增
-  const openAdd = () => {
-    title.value = '添加主机执行记录';
-    isAddHandle.value = true;
-    renderForm({ ...defaultForm() });
-    setVisible(true);
-  };
-
-  // 打开修改
-  const openUpdate = (record: any) => {
-    title.value = '修改主机执行记录';
-    isAddHandle.value = false;
-    renderForm({ ...defaultForm(), ...record });
-    setVisible(true);
-  };
-
-  // 渲染表单
-  const renderForm = (record: any) => {
-    formModel.value = Object.assign({}, record);
-  };
-
-  defineExpose({ openAdd, openUpdate });
-
-  // 确定
-  const handlerOk = async () => {
-    setLoading(true);
-    try {
-      // 验证参数
-      const error = await formRef.value.validate();
-      if (error) {
-        return false;
-      }
-      if (isAddHandle.value) {
-        // 新增
-        await createExecHostLog(formModel.value);
-        Message.success('创建成功');
-        emits('added');
-      } else {
-        // 修改
-        await updateExecHostLog(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>

orion-ops-ui/src/views/exec/exec-host-log/components/exec-host-log-table.vue

@@ -1,257 +0,0 @@
-<template>
-  <!-- 搜索 -->
-  <a-card class="general-card table-search-card">
-    <query-header :model="formModel"
-                  label-align="left"
-                  @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>
-      <!-- 执行日志id -->
-      <a-form-item field="logId" label="执行日志id">
-        <a-input-number v-model="formModel.logId"
-                        placeholder="请输入执行日志id"
-                        allow-clear
-                        hide-button />
-      </a-form-item>
-      <!-- 主机id -->
-      <a-form-item field="hostId" label="主机id">
-        <a-input-number v-model="formModel.hostId"
-                        placeholder="请输入主机id"
-                        allow-clear
-                        hide-button />
-      </a-form-item>
-      <!-- 主机名称 -->
-      <a-form-item field="hostName" label="主机名称">
-        <a-input v-model="formModel.hostName"
-                 placeholder="请输入主机名称"
-                 allow-clear />
-      </a-form-item>
-      <!-- 执行状态 -->
-      <a-form-item field="status" label="执行状态">
-        <a-select v-model="formModel.status"
-                  :options="toOptions(execHostStatusKey)"
-                  placeholder="请选择执行状态"
-                  allow-clear />
-      </a-form-item>
-      <!-- 执行命令 -->
-      <a-form-item field="command" label="执行命令">
-        <a-input v-model="formModel.command"
-                 placeholder="请输入执行命令"
-                 allow-clear />
-      </a-form-item>
-      <!-- 执行参数 -->
-      <a-form-item field="parameter" label="执行参数">
-        <a-input v-model="formModel.parameter"
-                 placeholder="请输入执行参数"
-                 allow-clear />
-      </a-form-item>
-      <!-- 退出码 -->
-      <a-form-item field="exitStatus" label="退出码">
-        <a-input-number v-model="formModel.exitStatus"
-                        placeholder="请输入退出码"
-                        allow-clear
-                        hide-button />
-      </a-form-item>
-      <!-- 日志路径 -->
-      <a-form-item field="logPath" label="日志路径">
-        <a-input v-model="formModel.logPath"
-                 placeholder="请输入日志路径"
-                 allow-clear />
-      </a-form-item>
-      <!-- 错误信息 -->
-      <a-form-item field="errorMessage" label="错误信息">
-        <a-input v-model="formModel.errorMessage"
-                 placeholder="请输入错误信息"
-                 allow-clear />
-      </a-form-item>
-      <!-- 执行开始时间 -->
-      <a-form-item field="startTime" label="执行开始时间">
-        <a-date-picker v-model="formModel.startTime"
-                       style="width: 100%"
-                       placeholder="请选择执行开始时间"
-                       show-time
-                       allow-clear />
-      </a-form-item>
-      <!-- 执行结束时间 -->
-      <a-form-item field="finishTime" label="执行结束时间">
-        <a-date-picker v-model="formModel.finishTime"
-                       style="width: 100%"
-                       placeholder="请选择执行结束时间"
-                       show-time
-                       allow-clear />
-      </a-form-item>
-    </query-header>
-  </a-card>
-  <!-- 表格 -->
-  <a-card class="general-card table-card">
-    <template #title>
-      <!-- 左侧操作 -->
-      <div class="table-left-bar-handle">
-        <!-- 标题 -->
-        <div class="table-title">
-          主机执行记录列表
-        </div>
-      </div>
-      <!-- 右侧操作 -->
-      <div class="table-right-bar-handle">
-        <a-space>
-          <!-- 新增 -->
-          <a-button v-permission="['asset:exec-host-log:create']"
-                    type="primary"
-                    @click="emits('openAdd')">
-            新增
-            <template #icon>
-              <icon-plus />
-            </template>
-          </a-button>
-        </a-space>
-      </div>
-    </template>
-    <!-- table -->
-    <a-table row-key="id"
-             ref="tableRef"
-             :loading="loading"
-             :columns="columns"
-             :data="tableRenderData"
-             :pagination="pagination"
-             @page-change="(page) => fetchTableData(page, pagination.pageSize)"
-             @page-size-change="(size) => fetchTableData(1, size)"
-             :bordered="false">
-      <!-- 执行状态 -->
-      <template #status="{ record }">
-        {{ getDictValue(execHostStatusKey, record.status) }}
-      </template>
-      <!-- 操作 -->
-      <template #handle="{ record }">
-        <div class="table-handle-wrapper">
-          <!-- 修改 -->
-          <a-button v-permission="['asset:exec-host-log:update']"
-                    type="text"
-                    size="mini"
-                    @click="emits('openUpdate', record)">
-            修改
-          </a-button>
-          <!-- 删除 -->
-          <a-popconfirm content="确认删除这条记录吗?"
-                        position="left"
-                        type="warning"
-                        @ok="deleteRow(record)">
-            <a-button v-permission="['asset:exec-host-log:delete']"
-                      type="text"
-                      size="mini"
-                      status="danger">
-              删除
-            </a-button>
-          </a-popconfirm>
-        </div>
-      </template>
-    </a-table>
-  </a-card>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'execHostLogTable'
-  };
-</script>
-
-<script lang="ts" setup>
-  import type { ExecHostLogQueryRequest, ExecHostLogQueryResponse } from '@/api/exec/exec-host-log';
-  import { reactive, ref, onMounted } from 'vue';
-  import { batchDeleteExecHostLog, deleteExecHostLog, getExecHostLogPage } from '@/api/exec/exec-host-log';
-  import { Message } from '@arco-design/web-vue';
-  import useLoading from '@/hooks/loading';
-  import columns from '../types/table.columns';
-  import { execHostStatusKey } from '../types/const';
-  import { usePagination } from '@/types/table';
-  import { useDictStore } from '@/store';
-
-  const emits = defineEmits(['openAdd', 'openUpdate']);
-
-  const pagination = usePagination();
-  const { loading, setLoading } = useLoading();
-  const { toOptions, getDictValue } = useDictStore();
-
-  const tableRenderData = ref<ExecHostLogQueryResponse[]>([]);
-  const formModel = reactive<ExecHostLogQueryRequest>({
-    id: undefined,
-    logId: undefined,
-    hostId: undefined,
-    hostName: undefined,
-    status: undefined,
-    command: undefined,
-    parameter: undefined,
-    exitStatus: undefined,
-    logPath: undefined,
-    errorMessage: undefined,
-    startTime: undefined,
-    finishTime: undefined,
-  });
-
-  // 删除当前行
-  const deleteRow = async ({ id }: {
-    id: number
-  }) => {
-    try {
-      setLoading(true);
-      // 调用删除接口
-      await deleteExecHostLog(id);
-      Message.success('删除成功');
-      // 重新加载数据
-      fetchTableData();
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 添加后回调
-  const addedCallback = () => {
-    fetchTableData();
-  };
-
-  // 更新后回调
-  const updatedCallback = () => {
-    fetchTableData();
-  };
-
-  defineExpose({
-    addedCallback, updatedCallback
-  });
-
-  // 加载数据
-  const doFetchTableData = async (request: ExecHostLogQueryRequest) => {
-    try {
-      setLoading(true);
-      const { data } = await getExecHostLogPage(request);
-      tableRenderData.value = data.rows;
-      pagination.total = data.total;
-      pagination.current = request.page;
-      pagination.pageSize = request.limit;
-    } catch (e) {
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 切换页码
-  const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
-    doFetchTableData({ page, limit, ...form });
-  };
-
-  onMounted(() => {
-    fetchTableData();
-  });
-
-</script>
-
-<style lang="less" scoped>
-
-</style>

orion-ops-ui/src/views/exec/exec-host-log/index.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="layout-container" v-if="render">
-    <!-- 列表-表格 -->
-    <exec-host-log-table ref="table"
-                  @openAdd="() => modal.openAdd()"
-                  @openUpdate="(e) => modal.openUpdate(e)" />
-    <!-- 添加修改模态框 -->
-    <exec-host-log-form-modal ref="modal"
-                   @added="modalAddCallback"
-                   @updated="modalUpdateCallback" />
-  </div>
-</template>
-
-<script lang="ts">
-  export default {
-    name: 'execHostLog'
-  };
-</script>
-
-<script lang="ts" setup>
-  import { ref, onBeforeMount } from 'vue';
-  import { useDictStore } from '@/store';
-  import { dictKeys } from './types/const';
-  import ExecHostLogTable from './components/exec-host-log-table.vue';
-  import ExecHostLogFormModal from './components/exec-host-log-form-modal.vue';
-
-  const render = ref(false);
-  const table = ref();
-  const modal = ref();
-
-  // 添加回调
-  const modalAddCallback = () => {
-    table.value.addedCallback();
-  };
-
-  // 修改回调
-  const modalUpdateCallback = () => {
-    table.value.updatedCallback();
-  };
-
-  onBeforeMount(async () => {
-    const dictStore = useDictStore();
-    await dictStore.loadKeys(dictKeys);
-    render.value = true;
-  });
-
-</script>
-
-<style lang="less" scoped>
-
-</style>

orion-ops-ui/src/views/exec/exec-host-log/types/const.ts

@@ -1,22 +0,0 @@
-/**
- * 执行状态
- */
-// FIXME 检查这里的类型
-export const execHostStatus = {
-  // 等待中
-  WAITING: 'WAITING',
-  // 运行中
-  RUNNING: 'RUNNING',
-  // 执行完成
-  COMPLETED: 'COMPLETED',
-  // 执行失败
-  FAILED: 'FAILED',
-  // 已中断
-  INTERRUPTED: 'INTERRUPTED',
-}
-
-// 执行状态 字典项
-export const execHostStatusKey = 'execHostStatus';
-
-// 加载的字典值
-export const dictKeys = [execHostStatusKey];

orion-ops-ui/src/views/exec/exec-host-log/types/form.rules.ts

@@ -1,82 +0,0 @@
-import type { FieldRule } from '@arco-design/web-vue';
-
-export const logId = [{
-  required: true,
-  message: '请输入执行日志id'
-}] as FieldRule[];
-
-export const hostId = [{
-  required: true,
-  message: '请输入主机id'
-}] as FieldRule[];
-
-export const hostName = [{
-  required: true,
-  message: '请输入主机名称'
-}, {
-  maxLength: 128,
-  message: '主机名称长度不能大于128位'
-}] as FieldRule[];
-
-export const status = [{
-  required: true,
-  message: '请输入执行状态'
-}, {
-  maxLength: 12,
-  message: '执行状态长度不能大于12位'
-}] as FieldRule[];
-
-export const command = [{
-  required: true,
-  message: '请输入执行命令'
-}] as FieldRule[];
-
-export const parameter = [{
-  required: true,
-  message: '请输入执行参数'
-}] as FieldRule[];
-
-export const exitStatus = [{
-  required: true,
-  message: '请输入退出码'
-}] as FieldRule[];
-
-export const logPath = [{
-  required: true,
-  message: '请输入日志路径'
-}, {
-  maxLength: 512,
-  message: '日志路径长度不能大于512位'
-}] as FieldRule[];
-
-export const errorMessage = [{
-  required: true,
-  message: '请输入错误信息'
-}, {
-  maxLength: 255,
-  message: '错误信息长度不能大于255位'
-}] as FieldRule[];
-
-export const startTime = [{
-  required: true,
-  message: '请输入执行开始时间'
-}] as FieldRule[];
-
-export const finishTime = [{
-  required: true,
-  message: '请输入执行结束时间'
-}] as FieldRule[];
-
-export default {
-  logId,
-  hostId,
-  hostName,
-  status,
-  command,
-  parameter,
-  exitStatus,
-  logPath,
-  errorMessage,
-  startTime,
-  finishTime,
-} as Record<string, FieldRule | FieldRule[]>;

orion-ops-ui/src/views/exec/exec-host-log/types/table.columns.ts

@@ -1,122 +0,0 @@
-import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-import { dateFormat } from '@/utils';
-
-const columns = [
-  {
-    title: 'id',
-    dataIndex: 'id',
-    slotName: 'id',
-    width: 70,
-    align: 'left',
-    fixed: 'left',
-  }, {
-    title: '执行日志id',
-    dataIndex: 'logId',
-    slotName: 'logId',
-    align: 'left',
-  }, {
-    title: '主机id',
-    dataIndex: 'hostId',
-    slotName: 'hostId',
-    align: 'left',
-  }, {
-    title: '主机名称',
-    dataIndex: 'hostName',
-    slotName: 'hostName',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '执行状态',
-    dataIndex: 'status',
-    slotName: 'status',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '执行命令',
-    dataIndex: 'command',
-    slotName: 'command',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '执行参数',
-    dataIndex: 'parameter',
-    slotName: 'parameter',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '退出码',
-    dataIndex: 'exitStatus',
-    slotName: 'exitStatus',
-    align: 'left',
-  }, {
-    title: '日志路径',
-    dataIndex: 'logPath',
-    slotName: 'logPath',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '错误信息',
-    dataIndex: 'errorMessage',
-    slotName: 'errorMessage',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '执行开始时间',
-    dataIndex: 'startTime',
-    slotName: 'startTime',
-    align: 'left',
-    width: 180,
-    render: ({ record }) => {
-      return record.startTime && dateFormat(new Date(record.startTime));
-    },
-  }, {
-    title: '执行结束时间',
-    dataIndex: 'finishTime',
-    slotName: 'finishTime',
-    align: 'left',
-    width: 180,
-    render: ({ record }) => {
-      return record.finishTime && dateFormat(new Date(record.finishTime));
-    },
-  }, {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    slotName: 'createTime',
-    align: 'center',
-    width: 180,
-    render: ({ record }) => {
-      return dateFormat(new Date(record.createTime));
-    },
-  }, {
-    title: '修改时间',
-    dataIndex: 'updateTime',
-    slotName: 'updateTime',
-    align: 'center',
-    width: 180,
-    render: ({ record }) => {
-      return dateFormat(new Date(record.updateTime));
-    },
-  }, {
-    title: '创建人',
-    dataIndex: 'creator',
-    slotName: 'creator',
-  }, {
-    title: '修改人',
-    dataIndex: 'updater',
-    slotName: 'updater',
-  }, {
-    title: '操作',
-    slotName: 'handle',
-    width: 130,
-    align: 'center',
-    fixed: 'right',
-  },
-] as TableColumnData[];
-
-export default columns;

orion-ops-ui/src/views/exec/exec-log/components/exec-host-log-table.vue

@@ -9,19 +9,73 @@
            :scroll="{ y: '100%' }"
            :pagination="false"
            :bordered="false">
+    <!-- 执行主机 -->
+    <template #hostName="{ record }">
+      <span class="span-blue">
+        {{ record.hostName }}
+      </span>
+    </template>
+    <!-- 错误信息 -->
+    <template #errorMessage="{ record }">
+      <span class="span-red">
+        {{ record.errorMessage }}
+      </span>
+    </template>
     <!-- 执行状态 -->
     <template #status="{ record }">
-      {{ getDictValue(execHostStatusKey, record.status) }}
+      <a-tag :color="getDictValue(execHostStatusKey, record.status, 'color')">
+        {{ getDictValue(execHostStatusKey, record.status) }}
+      </a-tag>
+    </template>
+    <!-- 执行时间 -->
+    <template #startTime="{ record }">
+      <span class="table-cell-value">
+        {{ (record.startTime && dateFormat(new Date(record.startTime))) || '-' }}
+      </span>
+      <br>
+      <span class="table-cell-sub-value usn" style="font-size: 12px;">
+        持续时间: {{ formatDuration(record.startTime, record.finishTime) || '-' }}
+      </span>
     </template>
     <!-- 操作 -->
     <template #handle="{ record }">
       <div class="table-handle-wrapper">
+        <!-- 命令 -->
+        <a-button type="text"
+                  size="mini"
+                  @click="emits('viewCommand', record.command)">
+          命令
+        </a-button>
+        <!-- 参数 -->
+        <a-button type="text"
+                  size="mini"
+                  @click="emits('viewParams', record.parameter)">
+          参数
+        </a-button>
+        <!-- 日志 -->
+        <a-button type="text"
+                  size="mini">
+          日志
+        </a-button>
+        <!-- 中断 -->
+        <a-popconfirm content="确认要中断命令吗?"
+                      position="left"
+                      type="warning"
+                      @ok="interruptedHost(record)">
+          <a-button v-permission="['asset:exec:interrupt-exec']"
+                    type="text"
+                    size="mini"
+                    status="danger"
+                    :disabled="record.status !== execHostStatus.WAITING && record.status !== execHostStatus.RUNNING">
+            中断
+          </a-button>
+        </a-popconfirm>
         <!-- 删除 -->
         <a-popconfirm content="确认删除这条记录吗?"
                       position="left"
                       type="warning"
                       @ok="deleteRow(record)">
-          <a-button v-permission="['asset:exec-host-log:delete']"
+          <a-button v-permission="['asset:exec-log:delete']"
                     type="text"
                     size="mini"
                     status="danger">
@@ -40,24 +94,43 @@
 </script>
 
 <script lang="ts" setup>
-  import type { ExecLogQueryResponse } from '@/api/exec/exec-log';
+  import type { ExecLogQueryResponse, ExecHostLogQueryResponse } from '@/api/exec/exec-log';
-  import { reactive, ref, onMounted } from 'vue';
+  import { deleteExecHostLog } from '@/api/exec/exec-log';
-  import { deleteExecHostLog } from '@/api/exec/exec-host-log';
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
-  import columns from '../types/table.columns';
+  import columns from '../types/host-table.columns';
-  import { execHostStatusKey } from '../types/const';
+  import { execHostStatusKey, execHostStatus } from '../types/const';
   import { useDictStore } from '@/store';
   import { useExpandable } from '@/types/table';
+  import { dateFormat, formatDuration } from '@/utils';
+  import { interruptHostExec } from '@/api/exec/exec';
 
   const props = defineProps<{
     row: ExecLogQueryResponse;
   }>();
 
-  const expandable = useExpandable();
+  const emits = defineEmits(['viewCommand', 'viewParams']);
+
+  const expandable = useExpandable({ width: 90 });
   const { loading, setLoading } = useLoading();
   const { toOptions, getDictValue } = useDictStore();
 
+  // 中断执行
+  const interruptedHost = async (record: ExecHostLogQueryResponse) => {
+    try {
+      setLoading(true);
+      // 调用中断接口
+      await interruptHostExec({
+        hostLogId: record.id
+      });
+      Message.success('已中断');
+      record.status = execHostStatus.INTERRUPTED;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
   // 删除当前行
   const deleteRow = async ({ id }: {
     id: number

orion-ops-ui/src/views/exec/exec-log/components/exec-log-form-modal.vue

@@ -1,199 +0,0 @@
-<!--<template>-->
-<!--  <a-modal v-model:visible="visible"-->
-<!--           body-class="modal-form"-->
-<!--           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"-->
-<!--              :label-col-props="{ span: 5 }"-->
-<!--              :wrapper-col-props="{ span: 18 }"-->
-<!--              :rules="formRules">-->
-<!--        &lt;!&ndash; 任务id &ndash;&gt;-->
-<!--        <a-form-item field="userId" label="任务id">-->
-<!--          <a-input-number v-model="formModel.userId"-->
-<!--                          placeholder="请输入任务id"-->
-<!--                          hide-button />-->
-<!--        </a-form-item>-->
-<!--        &lt;!&ndash; 执行用户名 &ndash;&gt;-->
-<!--        <a-form-item field="username" label="执行用户名">-->
-<!--          <a-input v-model="formModel.username"-->
-<!--                   placeholder="请输入执行用户名"-->
-<!--                   allow-clear />-->
-<!--        </a-form-item>-->
-<!--        &lt;!&ndash; 执行来源 &ndash;&gt;-->
-<!--        <a-form-item field="source" label="执行来源">-->
-<!--          <a-input v-model="formModel.source"-->
-<!--                   placeholder="请输入执行来源"-->
-<!--                   allow-clear />-->
-<!--        </a-form-item>-->
-<!--        &lt;!&ndash; 执行来源id &ndash;&gt;-->
-<!--        <a-form-item field="sourceId" label="执行来源id">-->
-<!--          <a-input-number v-model="formModel.sourceId"-->
-<!--                          placeholder="请输入执行来源id"-->
-<!--                          hide-button />-->
-<!--        </a-form-item>-->
-<!--        &lt;!&ndash; 执行描述 &ndash;&gt;-->
-<!--        <a-form-item field="description" label="执行描述">-->
-<!--          <a-input v-model="formModel.description"-->
-<!--                   placeholder="请输入执行描述"-->
-<!--                   allow-clear />-->
-<!--        </a-form-item>-->
-<!--        &lt;!&ndash; 执行命令 &ndash;&gt;-->
-<!--        <a-form-item field="command" label="执行命令">-->
-<!--          <a-input v-model="formModel.command"-->
-<!--                   placeholder="请输入执行命令"-->
-<!--                   allow-clear />-->
-<!--        </a-form-item>-->
-<!--        &lt;!&ndash; 超时时间 &ndash;&gt;-->
-<!--        <a-form-item field="timeout" label="超时时间">-->
-<!--          <a-input-number v-model="formModel.timeout"-->
-<!--                          placeholder="请输入超时时间"-->
-<!--                          hide-button />-->
-<!--        </a-form-item>-->
-<!--        &lt;!&ndash; 执行状态 &ndash;&gt;-->
-<!--        <a-form-item field="status" label="执行状态">-->
-<!--          <a-select v-model="formModel.status"-->
-<!--                    :options="toOptions(execStatusKey)"-->
-<!--                    placeholder="请选择执行状态" />-->
-<!--        </a-form-item>-->
-<!--        &lt;!&ndash; 执行开始时间 &ndash;&gt;-->
-<!--        <a-form-item field="startTime" label="执行开始时间">-->
-<!--          <a-date-picker v-model="formModel.startTime"-->
-<!--                         style="width: 100%"-->
-<!--                         placeholder="请选择执行开始时间"-->
-<!--                         show-time />-->
-<!--        </a-form-item>-->
-<!--        &lt;!&ndash; 执行完成时间 &ndash;&gt;-->
-<!--        <a-form-item field="finishTime" label="执行完成时间">-->
-<!--          <a-date-picker v-model="formModel.finishTime"-->
-<!--                         style="width: 100%"-->
-<!--                         placeholder="请选择执行完成时间"-->
-<!--                         show-time />-->
-<!--        </a-form-item>-->
-<!--      </a-form>-->
-<!--    </a-spin>-->
-<!--  </a-modal>-->
-<!--</template>-->
-
-<!--<script lang="ts">-->
-<!--  export default {-->
-<!--    name: 'execLogFormModal'-->
-<!--  };-->
-<!--</script>-->
-
-<!--<script lang="ts" setup>-->
-<!--  import type { ExecLogUpdateRequest } from '@/api/exec/exec-log';-->
-<!--  import { ref } from 'vue';-->
-<!--  import useLoading from '@/hooks/loading';-->
-<!--  import useVisible from '@/hooks/visible';-->
-<!--  import formRules from '../types/form.rules';-->
-<!--  import { execStatusKey } from '../types/const';-->
-<!--  import { createExecLog, updateExecLog } from '@/api/exec/exec-log';-->
-<!--  import { Message } from '@arco-design/web-vue';-->
-<!--  import { useDictStore } from '@/store';-->
-
-<!--  const emits = defineEmits(['added', 'updated']);-->
-
-<!--  const { visible, setVisible } = useVisible();-->
-<!--  const { loading, setLoading } = useLoading();-->
-<!--  const { toOptions } = useDictStore();-->
-
-<!--  const title = ref<string>();-->
-<!--  const isAddHandle = ref<boolean>(true);-->
-<!--  const formRef = ref<any>();-->
-<!--  const formModel = ref<ExecLogUpdateRequest>({});-->
-
-<!--  const defaultForm = (): ExecLogUpdateRequest => {-->
-<!--    return {-->
-<!--      id: undefined,-->
-<!--      userId: undefined,-->
-<!--      username: undefined,-->
-<!--      source: undefined,-->
-<!--      sourceId: undefined,-->
-<!--      description: undefined,-->
-<!--      command: undefined,-->
-<!--      timeout: undefined,-->
-<!--      status: undefined,-->
-<!--      startTime: undefined,-->
-<!--      finishTime: undefined,-->
-<!--    };-->
-<!--  };-->
-
-<!--  // 打开新增-->
-<!--  const openAdd = () => {-->
-<!--    title.value = '添加执行记录';-->
-<!--    isAddHandle.value = true;-->
-<!--    renderForm({ ...defaultForm() });-->
-<!--    setVisible(true);-->
-<!--  };-->
-
-<!--  // 打开修改-->
-<!--  const openUpdate = (record: any) => {-->
-<!--    title.value = '修改执行记录';-->
-<!--    isAddHandle.value = false;-->
-<!--    renderForm({ ...defaultForm(), ...record });-->
-<!--    setVisible(true);-->
-<!--  };-->
-
-<!--  // 渲染表单-->
-<!--  const renderForm = (record: any) => {-->
-<!--    formModel.value = Object.assign({}, record);-->
-<!--  };-->
-
-<!--  defineExpose({ openAdd, openUpdate });-->
-
-<!--  // 确定-->
-<!--  const handlerOk = async () => {-->
-<!--    setLoading(true);-->
-<!--    try {-->
-<!--      // 验证参数-->
-<!--      const error = await formRef.value.validate();-->
-<!--      if (error) {-->
-<!--        return false;-->
-<!--      }-->
-<!--      if (isAddHandle.value) {-->
-<!--        // 新增-->
-<!--        await createExecLog(formModel.value);-->
-<!--        Message.success('创建成功');-->
-<!--        emits('added');-->
-<!--      } else {-->
-<!--        // 修改-->
-<!--        await updateExecLog(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>-->

orion-ops-ui/src/views/exec/exec-log/components/exec-log-table.vue

@@ -95,7 +95,15 @@
              @expand="loadHostExecData">
       <!-- 展开表格 -->
       <template #expand-row="{ record }">
-        <exec-host-log-table :row="record" />
+        <exec-host-log-table :row="record"
+                             @view-command="s => emits('viewCommand', s)"
+                             @view-params="s => emits('viewParams', s)" />
+      </template>
+      <!-- 执行命令 -->
+      <template #command="{ record }">
+        <span :title="record.command">
+          {{ record.command }}
+        </span>
       </template>
       <!-- 执行状态 -->
       <template #status="{ record }">
@@ -105,17 +113,55 @@
       </template>
       <!-- 执行时间 -->
       <template #startTime="{ record }">
-        <span class="start-time">
+        <span class="table-cell-value">
           {{ (record.startTime && dateFormat(new Date(record.startTime))) || '-' }}
         </span>
         <br>
-        <span class="exec-duration usn">
+        <span class="table-cell-sub-value usn" style="font-size: 12px;">
           持续时间: {{ formatDuration(record.startTime, record.finishTime) || '-' }}
         </span>
       </template>
       <!-- 操作 -->
       <template #handle="{ record }">
         <div class="table-handle-wrapper">
+          <!-- 重新执行 -->
+          <a-popconfirm content="确定要重新执行吗?"
+                        position="left"
+                        type="warning"
+                        @ok="deleteRow(record)">
+            <a-button v-permission="['asset:exec:exec-command']"
+                      type="text"
+                      size="mini">
+              重新执行
+            </a-button>
+          </a-popconfirm>
+          <!-- 命令 -->
+          <a-button v-permission="['asset:exec:interrupt-exec']"
+                    type="text"
+                    size="mini"
+                    @click="emits('viewCommand', record.command)">
+            命令
+          </a-button>
+          <!-- 日志 -->
+          <a-button v-permission="['asset:exec:interrupt-exec']"
+                    type="text"
+                    size="mini"
+                    @click="emits('viewLog', record.id)">
+            日志
+          </a-button>
+          <!-- 中断 -->
+          <a-popconfirm content="确定要中断执行吗?"
+                        position="left"
+                        type="warning"
+                        @ok="interruptedExec(record)">
+            <a-button v-permission="['asset:exec:interrupt-exec']"
+                      type="text"
+                      size="mini"
+                      status="danger"
+                      :disabled="record.status !== execStatus.WAITING && record.status !== execStatus.RUNNING">
+              中断
+            </a-button>
+          </a-popconfirm>
           <!-- 删除 -->
           <a-popconfirm content="确认删除这条记录吗?"
                         position="left"
@@ -147,19 +193,25 @@
   import { Message } from '@arco-design/web-vue';
   import useLoading from '@/hooks/loading';
   import columns from '../types/table.columns';
-  import { execStatusKey } from '../types/const';
+  import { execStatus, execStatusKey } from '../types/const';
   import { useExpandable, usePagination, useRowSelection } from '@/types/table';
   import { useDictStore } from '@/store';
   import { dateFormat, formatDuration } from '@/utils';
+  import { interruptExec } from '@/api/exec/exec';
   import UserSelector from '@/components/user/user/selector/index.vue';
   import ExecHostLogTable from './exec-host-log-table.vue';
 
+  const emits = defineEmits(['viewCommand', 'viewParams', 'viewLog']);
+
+  // TODO 日志 清理 轮询状态 ctrl日志 ctrl重新执行
+
   const pagination = usePagination();
   const rowSelection = useRowSelection();
   const expandable = useExpandable();
   const { loading, setLoading } = useLoading();
   const { toOptions, getDictValue } = useDictStore();
 
+  const tableRef = ref();
   const selectedKeys = ref<number[]>([]);
   const tableRenderData = ref<ExecLogQueryResponse[]>([]);
   const formModel = reactive<ExecLogQueryRequest>({
@@ -204,6 +256,22 @@
     }
   };
 
+  // 中断执行
+  const interruptedExec = async (record: ExecLogQueryResponse) => {
+    try {
+      setLoading(true);
+      // 调用中断接口
+      await interruptExec({
+        logId: record.id
+      });
+      Message.success('已中断');
+      record.status = execStatus.COMPLETED;
+    } catch (e) {
+    } finally {
+      setLoading(false);
+    }
+  };
+
   // 加载主机数据
   const loadHostExecData = async (key: number, record: ExecLogQueryResponse) => {
     if (record.hosts) {
@@ -224,6 +292,7 @@
       pagination.current = request.page;
       pagination.pageSize = request.limit;
       selectedKeys.value = [];
+      tableRef.value.expandAll(false);
     } catch (e) {
     } finally {
       setLoading(false);
@@ -242,16 +311,6 @@
 </script>
 
 <style lang="less" scoped>
-  .start-time {
-    color: var(--color-text-2);
-  }
-
-  .exec-duration {
-    display: flex;
-    margin-top: 4px;
-    color: var(--color-text-3);
-  }
-
   :deep(.arco-table-cell-fixed-expand) {
     width: 100% !important;
   }

orion-ops-ui/src/views/exec/exec-log/index.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="layout-container" v-if="render">
     <!-- 列表-表格 -->
-    <exec-log-table />
+    <exec-log-table @view-command="viewCommand"
-    <!-- 添加修改模态框 -->
+                    @view-params="viewParams" />
-    <!--    <exec-log-form-modal ref="modal"-->
+    <!-- json 模态框 -->
-    <!--                   @added="modalAddCallback"-->
+    <json-editor-modal ref="jsonModal"
-    <!--                   @updated="modalUpdateCallback" />-->
+                       :esc-to-close="true" />
+    <!-- shell 模态框 -->
+    <shell-editor-modal ref="shellModal"
+                        :footer="false"
+                        :esc-to-close="true" />
   </div>
 </template>
 
@@ -20,19 +24,21 @@
   import { useDictStore } from '@/store';
   import { dictKeys } from './types/const';
   import ExecLogTable from './components/exec-log-table.vue';
+  import JsonEditorModal from '@/components/view/json-editor/modal/index.vue';
+  import ShellEditorModal from '@/components/view/shell-editor/modal/index.vue';
 
   const render = ref(false);
-  const table = ref();
+  const jsonModal = ref();
-  const modal = ref();
+  const shellModal = ref();
 
-  // 添加回调
+  // 查看命令
-  const modalAddCallback = () => {
+  const viewCommand = (data: string) => {
-    table.value.addedCallback();
+    shellModal.value.open(data, '命令');
   };
 
-  // 修改回调
+  // 查看参数
-  const modalUpdateCallback = () => {
+  const viewParams = (data: string) => {
-    table.value.updatedCallback();
+    jsonModal.value.open(JSON.parse(data));
   };
 
   onBeforeMount(async () => {

orion-ops-ui/src/views/exec/exec-log/types/form.rules.ts

@@ -1,76 +0,0 @@
-import type { FieldRule } from '@arco-design/web-vue';
-
-export const userId = [{
-  required: true,
-  message: '请输入执行用户id'
-}] as FieldRule[];
-
-export const username = [{
-  required: true,
-  message: '请输入执行用户名'
-}, {
-  maxLength: 32,
-  message: '执行用户名长度不能大于32位'
-}] as FieldRule[];
-
-export const source = [{
-  required: true,
-  message: '请输入执行来源'
-}, {
-  maxLength: 12,
-  message: '执行来源长度不能大于12位'
-}] as FieldRule[];
-
-export const sourceId = [{
-  required: true,
-  message: '请输入执行来源id'
-}] as FieldRule[];
-
-export const description = [{
-  required: true,
-  message: '请输入执行描述'
-}, {
-  maxLength: 128,
-  message: '执行描述长度不能大于128位'
-}] as FieldRule[];
-
-export const command = [{
-  required: true,
-  message: '请输入执行命令'
-}] as FieldRule[];
-
-export const timeout = [{
-  required: true,
-  message: '请输入超时时间'
-}] as FieldRule[];
-
-export const status = [{
-  required: true,
-  message: '请输入执行状态'
-}, {
-  maxLength: 12,
-  message: '执行状态长度不能大于12位'
-}] as FieldRule[];
-
-export const startTime = [{
-  required: true,
-  message: '请输入执行开始时间'
-}] as FieldRule[];
-
-export const finishTime = [{
-  required: true,
-  message: '请输入执行完成时间'
-}] as FieldRule[];
-
-export default {
-  userId,
-  username,
-  source,
-  sourceId,
-  description,
-  command,
-  timeout,
-  status,
-  startTime,
-  finishTime,
-} as Record<string, FieldRule | FieldRule[]>;

orion-ops-ui/src/views/exec/exec-log/types/host-table.columns.ts

@@ -1,5 +1,5 @@
 import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-import { dateFormat } from '@/utils';
+import { isNumber } from '@/utils/is';
 
 const columns = [
   {
@@ -10,55 +10,27 @@ const columns = [
     align: 'left',
     fixed: 'left',
   }, {
-    title: '执行日志id',
+    title: '执行主机',
-    dataIndex: 'logId',
-    slotName: 'logId',
-    align: 'left',
-  }, {
-    title: '主机id',
-    dataIndex: 'hostId',
-    slotName: 'hostId',
-    align: 'left',
-  }, {
-    title: '主机名称',
     dataIndex: 'hostName',
     slotName: 'hostName',
     align: 'left',
     ellipsis: true,
     tooltip: true,
-  }, {
-    title: '执行状态',
-    dataIndex: 'status',
-    slotName: 'status',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '执行命令',
-    dataIndex: 'command',
-    slotName: 'command',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '执行参数',
-    dataIndex: 'parameter',
-    slotName: 'parameter',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
   }, {
     title: '退出码',
     dataIndex: 'exitStatus',
     slotName: 'exitStatus',
     align: 'left',
+    width: 118,
+    render: ({ record }) => {
+      return isNumber(record.exitStatus) ? record.exitStatus : '-';
+    },
   }, {
-    title: '日志路径',
+    title: '执行状态',
-    dataIndex: 'logPath',
+    dataIndex: 'status',
-    slotName: 'logPath',
+    slotName: 'status',
     align: 'left',
-    ellipsis: true,
+    width: 118,
-    tooltip: true,
   }, {
     title: '错误信息',
     dataIndex: 'errorMessage',
@@ -66,54 +38,17 @@ const columns = [
     align: 'left',
     ellipsis: true,
     tooltip: true,
+    width: 168,
   }, {
-    title: '执行开始时间',
+    title: '执行时间',
     dataIndex: 'startTime',
     slotName: 'startTime',
     align: 'left',
-    width: 180,
+    width: 190,
-    render: ({ record }) => {
-      return record.startTime && dateFormat(new Date(record.startTime));
-    },
-  }, {
-    title: '执行结束时间',
-    dataIndex: 'finishTime',
-    slotName: 'finishTime',
-    align: 'left',
-    width: 180,
-    render: ({ record }) => {
-      return record.finishTime && dateFormat(new Date(record.finishTime));
-    },
-  }, {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    slotName: 'createTime',
-    align: 'center',
-    width: 180,
-    render: ({ record }) => {
-      return dateFormat(new Date(record.createTime));
-    },
-  }, {
-    title: '修改时间',
-    dataIndex: 'updateTime',
-    slotName: 'updateTime',
-    align: 'center',
-    width: 180,
-    render: ({ record }) => {
-      return dateFormat(new Date(record.updateTime));
-    },
-  }, {
-    title: '创建人',
-    dataIndex: 'creator',
-    slotName: 'creator',
-  }, {
-    title: '修改人',
-    dataIndex: 'updater',
-    slotName: 'updater',
   }, {
     title: '操作',
     slotName: 'handle',
-    width: 130,
+    width: 258,
     align: 'center',
     fixed: 'right',
   },

orion-ops-ui/src/views/exec/exec-log/types/sub-table.columns.ts

@@ -1,40 +0,0 @@
-import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
-
-const columns = [
-  {
-    title: '执行主机',
-    dataIndex: 'hostName',
-    slotName: 'hostName',
-    align: 'left',
-    width: 168,
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '执行命令',
-    dataIndex: 'command',
-    slotName: 'command',
-    align: 'left',
-    ellipsis: true,
-    tooltip: true,
-  }, {
-    title: '执行状态1',
-    dataIndex: 'status1',
-    slotName: 'status1',
-    align: 'left',
-    width: 118,
-  }, {
-    title: '执行时间',
-    dataIndex: 'startTime',
-    slotName: 'startTime',
-    align: 'left',
-    width: 180,
-  }, {
-    title: '操作',
-    slotName: 'handle',
-    width: 130,
-    align: 'center',
-    fixed: 'right',
-  },
-] as TableColumnData[];
-
-export default columns;

orion-ops-ui/src/views/exec/exec-log/types/table.columns.ts

@@ -9,7 +9,7 @@ const columns = [
     align: 'left',
     fixed: 'left',
   }, {
-    title: '描述',
+    title: '执行描述',
     dataIndex: 'description',
     slotName: 'description',
     align: 'left',
@@ -22,7 +22,6 @@ const columns = [
     slotName: 'command',
     align: 'left',
     ellipsis: true,
-    tooltip: true,
   }, {
     title: '执行用户',
     dataIndex: 'username',
@@ -41,11 +40,11 @@ const columns = [
     dataIndex: 'startTime',
     slotName: 'startTime',
     align: 'left',
-    width: 180,
+    width: 190,
   }, {
     title: '操作',
     slotName: 'handle',
-    width: 130,
+    width: 288,
     align: 'center',
     fixed: 'right',
   },

orion-ops-ui/src/views/user/operator-log/components/operator-log-simple-table.vue

@@ -34,11 +34,11 @@
     </template>
     <!-- 留痕地址 -->
     <template #address="{ record }">
-      <span class="operator-location" :title="record.location">
+      <span class="table-cell-value" :title="record.location">
         {{ record.location }}
       </span>
       <br>
-      <span class="operator-address text-copy"
+      <span class="table-cell-sub-value text-copy"
             :title="record.address"
             @click="copy(record.address)">
         {{ record.address }}
@@ -175,13 +175,4 @@
 </script>
 
 <style lang="less" scoped>
-  .operator-location {
-    color: var(--color-text-2);
-  }
-
-  .operator-address {
-    margin-top: 4px;
-    display: inline-block;
-    color: var(--color-text-3);
-  }
 </style>

orion-ops-ui/src/views/user/operator-log/components/operator-log-table.vue

@@ -81,11 +81,11 @@
       </template>
       <!-- 留痕地址 -->
       <template #address="{ record }">
-        <span class="operator-location" :title="record.location">
+        <span class="table-cell-value" :title="record.location">
           {{ record.location }}
         </span>
         <br>
-        <span class="operator-address text-copy"
+        <span class="table-cell-sub-value text-copy"
               :title="record.address"
               @click="copy(record.address)">
           {{ record.address }}
@@ -231,13 +231,4 @@
 </script>
 
 <style lang="less" scoped>
-  .operator-location {
-    color: var(--color-text-2);
-  }
-
-  .operator-address {
-    margin-top: 4px;
-    display: inline-block;
-    color: var(--color-text-3);
-  }
 </style>