💄 优化表格样式.

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

@@ -33,7 +33,6 @@
                     :allow-search="true"
                     :filter-option="labelFilter"
                     placeholder="请选择操作模块"
-                    @change="m => selectedModule(m as string)"
                     allow-clear />
         </a-form-item>
         <!-- 操作类型 -->
@@ -81,7 +80,7 @@
 <script lang="ts" setup>
   import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
   import type { OperatorLogQueryRequest } from '@/api/user/operator-log';
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';
   import { getOperatorLogCount, clearOperatorLog } from '@/api/user/operator-log';
@@ -123,8 +122,8 @@
 
   defineExpose({ open });
 
-  // 选择类型
-  const selectedModule = (module: string) => {
+  // 监听类型变化
+  watch(() => formModel.value.module, (module: string | undefined) => {
     if (!module) {
       // 不选择则重置 options
       typeOptions.value = toOptions(operatorLogTypeKey);
@@ -138,7 +137,7 @@
     if (formModel.value.type && !formModel.value.type.startsWith(modulePrefix)) {
       formModel.value.type = undefined;
     }
-  };
+  });
 
   // 确定
   const handlerOk = async () => {

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

@@ -21,7 +21,6 @@
                 :allow-search="true"
                 :filter-option="labelFilter"
                 placeholder="请选择操作模块"
-                @change="m => selectedModule(m as string)"
                 allow-clear />
     </a-form-item>
     <!-- 操作类型 -->
@@ -67,12 +66,12 @@
 <script lang="ts" setup>
   import type { OperatorLogQueryRequest } from '@/api/user/operator-log';
   import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
-  import { reactive, ref } from 'vue';
+  import { reactive, ref, watch } from 'vue';
   import useLoading from '@/hooks/loading';
   import { useDictStore } from '@/store';
-  import UserSelector from '@/components/user/user/user-selector.vue';
   import { operatorLogModuleKey, operatorLogTypeKey, operatorRiskLevelKey, operatorLogResultKey } from '../types/const';
   import { labelFilter } from '@/types/form';
+  import UserSelector from '@/components/user/user/user-selector.vue';
 
   const emits = defineEmits(['submit']);
   const props = defineProps({
@@ -94,8 +93,8 @@
     startTimeRange: undefined,
   });
 
-  // 选择类型
-  const selectedModule = (module: string) => {
+  // 监听类型变化
+  watch(() => formModel.module, (module: string | undefined) => {
     if (!module) {
       // 不选择则重置 options
       typeOptions.value = toOptions(operatorLogTypeKey);
@@ -109,7 +108,7 @@
     if (formModel.type && !formModel.type.startsWith(modulePrefix)) {
       formModel.type = undefined;
     }
-  };
+  });
 
   // 切换页码
   const submit = () => {

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

@@ -1,7 +1,6 @@
 <template>
   <!-- 表格 -->
   <a-table row-key="id"
-           class="table-wrapper-8"
            ref="tableRef"
            :loading="loading"
            :columns="tableColumns"
@@ -33,6 +32,19 @@
       <icon-copy class="copy-left" @click="copy(record.originLogInfo, '已复制')" />
       <span v-html="replaceHtmlTag(record.logInfo)" />
     </template>
+    <!-- 操作地址 -->
+    <template #address="{ record }">
+      <span class="operator-location" :title="record.location">
+        {{ record.location }}
+      </span>
+      <br>
+      <span class="copy-left" title="复制" @click="copy(record.address)">
+        <icon-copy />
+      </span>
+      <span class="operator-address" :title="record.address">
+        {{ record.address }}
+      </span>
+    </template>
     <!-- 操作 -->
     <template #handle="{ record }">
       <div class="table-handle-wrapper">
@@ -144,7 +156,7 @@
 
   // 初始化
   onMounted(() => {
-    let cols = [...columns].map(s => {
+    let cols = columns.map(s => {
       return { ...s };
     }).filter(s => s.dataIndex !== 'username');
     if (props.handleColumn) {
@@ -164,4 +176,13 @@
 </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

@@ -46,7 +46,6 @@
     </template>
     <!-- 表格 -->
     <a-table row-key="id"
-             class="table-wrapper-8"
              ref="tableRef"
              :loading="loading"
              v-model:selected-keys="selectedKeys"
@@ -80,6 +79,19 @@
         <icon-copy class="copy-left" @click="copy(record.originLogInfo, '已复制')" />
         <span v-html="replaceHtmlTag(record.logInfo)" />
       </template>
+      <!-- 操作地址 -->
+      <template #address="{ record }">
+        <span class="operator-location" :title="record.location">
+          {{ record.location }}
+        </span>
+        <br>
+        <span class="copy-left" title="复制" @click="copy(record.address)">
+          <icon-copy />
+        </span>
+        <span class="operator-address" :title="record.address">
+          {{ record.address }}
+        </span>
+      </template>
       <!-- 操作 -->
       <template #handle="{ record }">
         <div class="table-handle-wrapper">
@@ -220,5 +232,13 @@
 </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/types/const.ts

@@ -19,7 +19,7 @@ export const getLogDetail = (record: OperatorLogQueryResponse): Record<string, a
     detail.duration = `${record.duration} ms`;
     detail.startTime = dateFormat(new Date(record.startTime));
     detail.endTime = dateFormat(new Date(record.endTime));
-    detail.extra = record?.extra;
+    detail.extra = JSON.parse(record?.extra);
     detail.returnValue = JSON.parse(record?.returnValue);
     return detail;
   } catch (e) {

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

@@ -32,6 +32,13 @@ const columns = [
     slotName: 'originLogInfo',
     ellipsis: true,
     tooltip: true,
+  }, {
+    title: '操作地址',
+    dataIndex: 'address',
+    slotName: 'address',
+    width: 156,
+    align: 'left',
+    ellipsis: true,
   }, {
     title: '操作时间',
     dataIndex: 'createTime',