From 873e910eb13020b697a4f54745a812c2d7d8a16d Mon Sep 17 00:00:00 2001
From: lijiahang <ljh1553488six@139.com>
Date: Wed, 10 Jul 2024 10:21:16 +0800
Subject: [PATCH] =?UTF-8?q?:zap:=20=E5=AE=9A=E6=97=B6=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=82=E6=95=B0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/view/editor/core.ts        |   2 +-
 .../components/connect-log-detail-drawer.vue  |   2 +-
 .../components/connect-log-table.vue          |  39 ++---
 .../views/asset-audit/connect-log/index.vue   |  14 +-
 .../views/asset/host-config/drawer/index.vue  |  10 +-
 .../components/exec-template-exec-drawer.vue  |   4 +-
 .../components/exec-template-form-drawer.vue  |  31 +++-
 .../components/exec-job-detail-drawer.vue     |  32 +++-
 .../components/exec-job-form-drawer.vue       | 162 +++++++++++++++++-
 .../components/operator-log-clear-modal.vue   |   4 +-
 .../components/operator-log-table.vue         |  24 +--
 .../src/views/user/operator-log/index.vue     |  23 ++-
 12 files changed, 279 insertions(+), 68 deletions(-)

diff --git a/orion-visor-ui/src/components/view/editor/core.ts b/orion-visor-ui/src/components/view/editor/core.ts
index b2060a8b..077b5d16 100644
--- a/orion-visor-ui/src/components/view/editor/core.ts
+++ b/orion-visor-ui/src/components/view/editor/core.ts
@@ -87,7 +87,7 @@ export const createDefaultOptions = (): Options => {
     showFoldingControls: 'always',
     renderLineHighlight: 'line',
     selectOnLineNumbers: true,
-    lineNumbersMinChars: 2,
+    lineNumbersMinChars: 3,
     disableLayerHinting: true,
     minimap: {
       enabled: false,
diff --git a/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-detail-drawer.vue b/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-detail-drawer.vue
index 4c7f050b..44f1f090 100644
--- a/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-detail-drawer.vue
+++ b/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-detail-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible"
             title="主机连接日志详情"
-            :width="428"
+            :width="442"
             :mask-closable="false"
             :unmount-on-close="true"
             ok-text="关闭"
diff --git a/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-table.vue b/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-table.vue
index 9256f1e7..c6b55950 100644
--- a/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-table.vue
+++ b/orion-visor-ui/src/views/asset-audit/connect-log/components/connect-log-table.vue
@@ -3,7 +3,7 @@
   <a-card class="general-card table-search-card">
     <query-header :model="formModel"
                   label-align="left"
-                  :itemOptions="{ 5: { span: 2 } }"
+                  :itemOptions="{ 6: { span: 2 } }"
                   @submit="fetchTableData"
                   @reset="fetchTableData"
                   @keyup.enter="() => fetchTableData()">
@@ -30,6 +30,10 @@
       <a-form-item field="hostAddress" label="主机地址">
         <a-input v-model="formModel.hostAddress" placeholder="请输入主机地址" allow-clear />
       </a-form-item>
+      <!-- id -->
+      <a-form-item field="id" label="id">
+        <a-input-number v-model="formModel.id" placeholder="请输入日志id" allow-clear />
+      </a-form-item>
       <!-- 类型 -->
       <a-form-item field="type" label="类型">
         <a-select v-model="formModel.type"
@@ -154,7 +158,7 @@
           <!-- 详情 -->
           <a-button type="text"
                     size="mini"
-                    @click="openDetail(record)">
+                    @click="emits('openDetail', record)">
             详情
           </a-button>
           <!-- 下线 -->
@@ -186,11 +190,6 @@
       </template>
     </a-table>
   </a-card>
-  <!-- 清空模态框 -->
-  <connect-log-clear-modal ref="clearModal"
-                           @clear="fetchTableData" />
-  <!-- 详情模态框 -->
-  <connect-log-detail-drawer ref="detailModal" />
 </template>
 
 <script lang="ts">
@@ -213,20 +212,19 @@
   import { dateFormat } from '@/utils';
   import UserSelector from '@/components/user/user/selector/index.vue';
   import HostSelector from '@/components/asset/host/selector/index.vue';
-  import ConnectLogClearModal from './connect-log-clear-modal.vue';
-  import ConnectLogDetailDrawer from './connect-log-detail-drawer.vue';
 
-  const tableRenderData = ref<HostConnectLogQueryResponse[]>([]);
-  const selectedKeys = ref<number[]>([]);
-  const clearModal = ref();
-  const detailModal = ref();
+  const emits = defineEmits(['openClear', 'openDetail']);
 
   const pagination = usePagination();
   const rowSelection = useRowSelection();
   const { loading, setLoading } = useLoading();
   const { toOptions, getDictValue } = useDictStore();
 
+  const tableRenderData = ref<Array<HostConnectLogQueryResponse>>([]);
+  const selectedKeys = ref<Array<number>>([]);
+
   const formModel = reactive<HostConnectLogQueryRequest>({
+    id: undefined,
     userId: undefined,
     hostId: undefined,
     hostAddress: undefined,
@@ -256,14 +254,11 @@
     doFetchTableData({ page, limit, ...form });
   };
 
+  defineExpose({ fetchTableData });
+
   // 打开清空
   const openClear = () => {
-    clearModal.value?.open({ ...formModel });
-  };
-
-  // 打开详情
-  const openDetail = (record: HostConnectLogQueryResponse) => {
-    detailModal.value?.open(record);
+    emits('openClear', { ...formModel, id: undefined });
   };
 
   // 强制下线
@@ -297,13 +292,11 @@
   };
 
   // 删除当前行
-  const deleteRow = async ({ id }: {
-    id: number
-  }) => {
+  const deleteRow = async (record: HostConnectLogQueryResponse) => {
     try {
       setLoading(true);
       // 调用删除接口
-      await deleteHostConnectLog([id]);
+      await deleteHostConnectLog([record.id]);
       Message.success('删除成功');
       selectedKeys.value = [];
       // 重新加载数据
diff --git a/orion-visor-ui/src/views/asset-audit/connect-log/index.vue b/orion-visor-ui/src/views/asset-audit/connect-log/index.vue
index 390012eb..5eea9602 100644
--- a/orion-visor-ui/src/views/asset-audit/connect-log/index.vue
+++ b/orion-visor-ui/src/views/asset-audit/connect-log/index.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="layout-container" v-if="render">
     <!-- 列表-表格 -->
-    <connect-log-table />
+    <connect-log-table ref="table"
+                       @open-clear="(s) => clearModal.open(s)"
+                       @open-detail="(s) => detailModal.open(s)" />
+    <!-- 清空模态框 -->
+    <connect-log-clear-modal ref="clearModal"
+                             @clear="() => table.fetchTableData()" />
+    <!-- 详情模态框 -->
+    <connect-log-detail-drawer ref="detailModal" />
   </div>
 </template>
 
@@ -16,8 +23,13 @@
   import { useCacheStore, useDictStore } from '@/store';
   import { dictKeys } from './types/const';
   import ConnectLogTable from './components/connect-log-table.vue';
+  import ConnectLogClearModal from './components/connect-log-clear-modal.vue';
+  import ConnectLogDetailDrawer from './components/connect-log-detail-drawer.vue';
 
   const render = ref(false);
+  const table = ref();
+  const clearModal = ref();
+  const detailModal = ref();
 
   // 加载字典配置
   onBeforeMount(async () => {
diff --git a/orion-visor-ui/src/views/asset/host-config/drawer/index.vue b/orion-visor-ui/src/views/asset/host-config/drawer/index.vue
index 1cf80c66..90bfc393 100644
--- a/orion-visor-ui/src/views/asset/host-config/drawer/index.vue
+++ b/orion-visor-ui/src/views/asset/host-config/drawer/index.vue
@@ -16,7 +16,8 @@
     </template>
     <a-spin :loading="loading" class="host-config-container">
       <!-- SSH 配置 -->
-      <ssh-config-form :host-id="record.id"
+      <ssh-config-form class="host-config-wrapper"
+                       :host-id="record.id"
                        :content="config.ssh"
                        @submitted="(e) => config.ssh = e" />
     </a-spin>
@@ -111,11 +112,12 @@
 
   .host-config-container {
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     background-color: var(--color-fill-2);
   }
 
-  .arco-card {
-    margin: 18px 18px 0 18px;
+  .host-config-wrapper {
+    margin: 18px;
   }
+
 </style>
diff --git a/orion-visor-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue b/orion-visor-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue
index 3017d090..b505071a 100644
--- a/orion-visor-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue
+++ b/orion-visor-ui/src/views/exec/exec-template/components/exec-template-exec-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible"
             title="执行命令"
-            width="66%"
+            width="70%"
             :esc-to-close="false"
             :mask-closable="false"
             :unmount-on-close="true"
@@ -275,7 +275,7 @@
 
   .command-editor {
     width: 100%;
-    height: 62vh;
+    height: 56vh;
   }
 
 </style>
diff --git a/orion-visor-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue b/orion-visor-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
index 0a674a8d..6f88c4d6 100644
--- a/orion-visor-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
+++ b/orion-visor-ui/src/views/exec/exec-template/components/exec-template-form-drawer.vue
@@ -1,6 +1,6 @@
 <template>
   <a-drawer v-model:visible="visible"
-            width="66%"
+            width="70%"
             :title="title"
             :esc-to-close="false"
             :mask-closable="false"
@@ -103,18 +103,35 @@
                                :key="i"
                                class="parameter-item"
                                :class="[ i === parameter.length - 1 ? 'parameter-item-last' : '' ]">
+                  <!-- 参数名 -->
                   <a-input class="parameter-item-name"
                            v-model="item.name"
-                           placeholder="参数名称 (必填)"
-                           allow-clear />
+                           placeholder="必填"
+                           :max-length="24"
+                           allow-clear>
+                    <template #prepend>
+                      <span>参数名</span>
+                    </template>
+                  </a-input>
+                  <!-- 默认值 -->
                   <a-input class="parameter-item-default"
                            v-model="item.defaultValue"
-                           placeholder="默认值 (非必填)"
-                           allow-clear />
+                           placeholder="非必填"
+                           allow-clear>
+                    <template #prepend>
+                      <span>默认值</span>
+                    </template>
+                  </a-input>
+                  <!-- 描述 -->
                   <a-input class="parameter-item-description"
                            v-model="item.desc"
-                           placeholder="描述 (非必填)"
-                           allow-clear />
+                           placeholder="非必填"
+                           :max-length="64"
+                           allow-clear>
+                    <template #prepend>
+                      <span>描述</span>
+                    </template>
+                  </a-input>
                   <span class="parameter-item-close click-icon-wrapper"
                         title="移除"
                         @click="removeParameter(i)">
diff --git a/orion-visor-ui/src/views/job/exec-job/components/exec-job-detail-drawer.vue b/orion-visor-ui/src/views/job/exec-job/components/exec-job-detail-drawer.vue
index 55c110ef..34d01d88 100644
--- a/orion-visor-ui/src/views/job/exec-job/components/exec-job-detail-drawer.vue
+++ b/orion-visor-ui/src/views/job/exec-job/components/exec-job-detail-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible"
             title="计划任务详情"
-            width="66%"
+            width="70%"
             :mask-closable="false"
             :unmount-on-close="true"
             ok-text="关闭"
@@ -75,6 +75,17 @@
                 :readonly="true"
                 :suggestions="false" />
       </a-descriptions-item>
+      <!-- 执行参数 -->
+      <a-descriptions-item v-if="record.parameterSchema"
+                           label="执行参数"
+                           :span="3">
+        <editor v-model="record.parameterSchema"
+                language="json"
+                theme="vs-dark"
+                container-class="json-editor"
+                :readonly="true"
+                :suggestions="false" />
+      </a-descriptions-item>
     </a-descriptions>
   </a-drawer>
 </template>
@@ -105,11 +116,20 @@
 
   // 打开
   const open = async (id: any) => {
-    // 查询计划任务
     try {
+      // 查询计划任务
       setLoading(true);
       const { data } = await getExecJob(id);
       record.value = data;
+      // 设置参数值
+      if (data.parameterSchema) {
+        const value = JSON.parse(data.parameterSchema);
+        if (value?.length) {
+          data.parameterSchema = JSON.stringify(value, undefined, 4);
+        } else {
+          data.parameterSchema = undefined as unknown as string;
+        }
+      }
       setVisible(true);
     } catch (e) {
     } finally {
@@ -146,7 +166,13 @@
   }
 
   .command-editor {
-    height: calc(100vh - 384px);
+    width: 100%;
+    height: calc(100vh - 396px);
+  }
+
+  .json-editor {
+    width: 100%;
+    height: 328px;
   }
 
 </style>
diff --git a/orion-visor-ui/src/views/job/exec-job/components/exec-job-form-drawer.vue b/orion-visor-ui/src/views/job/exec-job/components/exec-job-form-drawer.vue
index 91b3c880..9ec93d69 100644
--- a/orion-visor-ui/src/views/job/exec-job/components/exec-job-form-drawer.vue
+++ b/orion-visor-ui/src/views/job/exec-job/components/exec-job-form-drawer.vue
@@ -1,7 +1,7 @@
 <template>
   <a-drawer v-model:visible="visible"
             :title="title"
-            width="66%"
+            width="70%"
             :esc-to-close="false"
             :mask-closable="false"
             :unmount-on-close="true"
@@ -117,7 +117,66 @@
               <exec-editor v-model="formModel.command"
                            container-class="command-editor"
                            theme="vs-dark"
-                           :parameter="jobBuiltinParams" />
+                           :parameter="[...jobBuiltinParams, ...parameter]" />
+            </a-form-item>
+          </a-col>
+          <!-- 命令参数 -->
+          <a-col :span="24">
+            <a-form-item field="parameter"
+                         class="parameter-form-item"
+                         label="命令参数">
+              <!-- label -->
+              <template #label>
+                <span class="span-blue pointer" @click="addParameter">添加参数</span>
+              </template>
+              <!-- 参数 -->
+              <template v-if="parameter.length">
+                <a-input-group v-for="(item, i) in parameter"
+                               :key="i"
+                               class="parameter-item"
+                               :class="[ i === parameter.length - 1 ? 'parameter-item-last' : '' ]">
+                  <!-- 参数名 -->
+                  <a-input class="parameter-item-name"
+                           v-model="item.name"
+                           placeholder="必填"
+                           :max-length="24"
+                           allow-clear>
+                    <template #prepend>
+                      <span>参数名</span>
+                    </template>
+                  </a-input>
+                  <!-- 参数值 -->
+                  <a-input class="parameter-item-default"
+                           v-model="item.defaultValue"
+                           placeholder="必填"
+                           allow-clear>
+                    <template #prepend>
+                      <span>参数值</span>
+                    </template>
+                  </a-input>
+                  <!-- 描述 -->
+                  <a-input class="parameter-item-description"
+                           v-model="item.desc"
+                           placeholder="非必填"
+                           :max-length="64"
+                           allow-clear>
+                    <template #prepend>
+                      <span>描述</span>
+                    </template>
+                  </a-input>
+                  <span class="parameter-item-close click-icon-wrapper"
+                        title="移除"
+                        @click="removeParameter(i)">
+                   <icon-close />
+                  </span>
+                </a-input-group>
+              </template>
+              <!-- 无参数 -->
+              <template v-else>
+                <span class="no-parameter">
+                  <icon-empty class="mr4" />无参数
+                </span>
+              </template>
             </a-form-item>
           </a-col>
         </a-row>
@@ -135,6 +194,7 @@
 <script lang="ts" setup>
   import type { ExecJobUpdateRequest } from '@/api/job/exec-job';
   import type { ExecTemplateQueryResponse } from '@/api/exec/exec-template';
+  import type { TemplateParam } from '@/components/view/exec-editor/const';
   import { onUnmounted, ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';
@@ -157,6 +217,7 @@
   const isAddHandle = ref<boolean>(true);
   const formRef = ref<any>();
   const formModel = ref<ExecJobUpdateRequest>({});
+  const parameter = ref<Array<TemplateParam>>([]);
 
   const defaultForm = (): ExecJobUpdateRequest => {
     return {
@@ -208,6 +269,21 @@
       parameterSchema: record.parameterSchema,
       hostIdList: record.hostIdList,
     };
+    if (record.parameterSchema) {
+      parameter.value = JSON.parse(record.parameterSchema);
+    } else {
+      parameter.value = [];
+    }
+  };
+
+  // 添加参数
+  const addParameter = () => {
+    parameter.value.push({});
+  };
+
+  // 移除参数
+  const removeParameter = (index: number) => {
+    parameter.value.splice(index, 1);
   };
 
   // 设置表达式
@@ -221,11 +297,11 @@
   };
 
   // 通过模板设置
-  const setWithTemplate = async ({ id }: ExecTemplateQueryResponse) => {
+  const setWithTemplate = async (record: ExecTemplateQueryResponse) => {
     setLoading(true);
     try {
       // 查询模板信息
-      const { data } = await getExecTemplateWithAuthorized(id);
+      const { data } = await getExecTemplateWithAuthorized(record.id);
       formModel.value = {
         ...formModel.value,
         name: data.name,
@@ -235,6 +311,11 @@
         parameterSchema: data.parameterSchema,
         hostIdList: data.hostIdList,
       };
+      if (record.parameterSchema) {
+        parameter.value = JSON.parse(record.parameterSchema);
+      } else {
+        parameter.value = [];
+      }
     } catch (e) {
     } finally {
       setLoading(false);
@@ -257,6 +338,14 @@
       if (error) {
         return false;
       }
+      // 验证并设置命令参数
+      for (const p of parameter.value) {
+        if (!p.name || !p.defaultValue) {
+          Message.warning('请补全命令参数');
+          return false;
+        }
+      }
+      formModel.value.parameterSchema = JSON.stringify(parameter.value);
       if (isAddHandle.value) {
         // 新增
         await createExecJob(formModel.value);
@@ -327,7 +416,7 @@
 
   .command-editor {
     width: 100%;
-    height: calc(100vh - 264px);
+    height: calc(100vh - 318px);
   }
 
   :deep(.arco-input-append) {
@@ -352,4 +441,67 @@
     }
   }
 
+  .parameter-form-item {
+    user-select: none;
+    margin-top: 4px;
+
+    :deep(.arco-form-item-content) {
+      flex-direction: column;
+    }
+
+    .parameter-item-last {
+      margin-bottom: 0 !important;
+    }
+
+    .parameter-item {
+      width: 100%;
+      margin-bottom: 12px;
+      display: flex;
+      justify-content: space-between;
+
+      & > span {
+        border-radius: 2px;
+        border-right-color: transparent;
+      }
+
+      &-name {
+        width: 29%;
+      }
+
+      &-default {
+        width: 29%;
+      }
+
+      &-description {
+        width: calc(39% - 44px);
+      }
+
+      &-close {
+        cursor: pointer;
+        width: 32px;
+        height: 32px;
+        font-size: 16px;
+        background: var(--color-fill-2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          background: var(--color-fill-3);
+        }
+      }
+    }
+
+    .no-parameter {
+      background: var(--color-fill-2);
+      width: 100%;
+      height: 32px;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-2);
+    }
+  }
+
 </style>
diff --git a/orion-visor-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue b/orion-visor-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue
index 4d3ce0c1..8d4af630 100644
--- a/orion-visor-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue
+++ b/orion-visor-ui/src/views/user/operator-log/components/operator-log-clear-modal.vue
@@ -105,8 +105,8 @@
   const emits = defineEmits(['clear']);
 
   // 打开
-  const open = () => {
-    renderForm({ ...defaultForm() });
+  const open = (record: OperatorLogQueryRequest) => {
+    renderForm({ ...defaultForm(), ...record });
     setVisible(true);
   };
 
diff --git a/orion-visor-ui/src/views/user/operator-log/components/operator-log-table.vue b/orion-visor-ui/src/views/user/operator-log/components/operator-log-table.vue
index aa0a565f..b9c7c83c 100644
--- a/orion-visor-ui/src/views/user/operator-log/components/operator-log-table.vue
+++ b/orion-visor-ui/src/views/user/operator-log/components/operator-log-table.vue
@@ -98,7 +98,7 @@
           <!-- 详情 -->
           <a-button type="text"
                     size="mini"
-                    @click="openLogDetail(record)">
+                    @click="emits('openDetail', record)">
             详情
           </a-button>
           <!-- 删除 -->
@@ -117,11 +117,6 @@
       </template>
     </a-table>
   </a-card>
-  <!-- 清理模态框 -->
-  <operator-log-clear-modal ref="clearModal"
-                            @clear="fetchTableData" />
-  <!-- json 查看器模态框 -->
-  <json-editor-modal ref="jsonView" />
 </template>
 
 <script lang="ts">
@@ -133,7 +128,7 @@
 <script lang="ts" setup>
   import type { OperatorLogQueryRequest, OperatorLogQueryResponse } from '@/api/user/operator-log';
   import { ref, reactive, onMounted } from 'vue';
-  import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey, getLogDetail } from '../types/const';
+  import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey } from '../types/const';
   import columns from '../types/table.columns';
   import { copy } from '@/hooks/copy';
   import useLoading from '@/hooks/loading';
@@ -143,16 +138,14 @@
   import { replaceHtmlTag, clearHtmlTag } from '@/utils';
   import { Message } from '@arco-design/web-vue';
   import OperatorLogQueryHeader from './operator-log-query-header.vue';
-  import OperatorLogClearModal from './operator-log-clear-modal.vue';
-  import JsonEditorModal from '@/components/view/json-editor/modal/index.vue';
+
+  const emits = defineEmits(['openClear', 'openDetail']);
 
   const pagination = usePagination();
   const rowSelection = useRowSelection();
   const { loading, setLoading } = useLoading();
   const { getDictValue } = useDictStore();
 
-  const clearModal = ref();
-  const jsonView = ref();
   const selectedKeys = ref<Array<number>>([]);
   const tableRenderData = ref<Array<OperatorLogQueryResponse>>([]);
   const formModel = reactive<OperatorLogQueryRequest>({
@@ -163,14 +156,9 @@
     startTimeRange: undefined,
   });
 
-  // 查看详情
-  const openLogDetail = (record: OperatorLogQueryResponse) => {
-    jsonView.value.open(getLogDetail(record));
-  };
-
   // 打开清空
   const openClear = () => {
-    clearModal.value?.open();
+    emits('openClear', { ...formModel });
   };
 
   // 删除选中行
@@ -228,6 +216,8 @@
     doFetchTableData({ page, limit, ...form });
   };
 
+  defineExpose({ fetchTableData });
+
   // 初始化
   onMounted(() => {
     fetchTableData();
diff --git a/orion-visor-ui/src/views/user/operator-log/index.vue b/orion-visor-ui/src/views/user/operator-log/index.vue
index 1722d68f..d828f2cf 100644
--- a/orion-visor-ui/src/views/user/operator-log/index.vue
+++ b/orion-visor-ui/src/views/user/operator-log/index.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="layout-container" v-if="render">
-    <operator-log-table />
+    <!-- 表格 -->
+    <operator-log-table ref="table"
+                        @open-detail="openLogDetail"
+                        @open-clear="(s) => clearModal.open(s)" />
+    <!-- 清理模态框 -->
+    <operator-log-clear-modal ref="clearModal"
+                              @clear="() => table.fetchTableData()" />
+    <!-- json 查看器模态框 -->
+    <json-editor-modal ref="jsonView" />
   </div>
 </template>
 
@@ -11,14 +19,25 @@
 </script>
 
 <script lang="ts" setup>
+  import type { OperatorLogQueryResponse } from '@/api/user/operator-log';
   import { ref, onUnmounted, onBeforeMount } from 'vue';
   import { useCacheStore, useDictStore } from '@/store';
-  import { dictKeys } from './types/const';
+  import { dictKeys, getLogDetail } from './types/const';
   import OperatorLogTable from './components/operator-log-table.vue';
+  import OperatorLogClearModal from './components/operator-log-clear-modal.vue';
+  import JsonEditorModal from '@/components/view/json-editor/modal/index.vue';
 
   const cacheStore = useCacheStore();
 
   const render = ref(false);
+  const table = ref();
+  const clearModal = ref();
+  const jsonView = ref();
+
+  // 查看详情
+  const openLogDetail = (record: OperatorLogQueryResponse) => {
+    jsonView.value.open(getLogDetail(record));
+  };
 
   // 加载字典值
   onBeforeMount(async () => {