update log table

src/views/dashboard/related/components/LogTable/Index.vue

@@ -15,20 +15,17 @@ limitations under the License. -->
 
 <template>
   <div class="log">
-    <div class="log-header">
+    <div
-      <template v-for="(item, index) in columns">
+      class="log-header"
+      :class="[type === 'browser' ? 'browser-header' : 'service-header']"
+    >
+      <template v-for="(item, index) in columns" :key="`col${index}`">
         <div
-          class="method"
+          :class="[
-          :style="`width: ${item.method}px`"
+            item.label,
-          v-if="item.drag"
+            ['message', 'stack'].includes(item.label) ? 'max-item' : '',
-          :key="index"
+          ]"
         >
-          <span class="r cp" ref="dragger" :data-index="index">
-            <Icon iconName="settings_ethernet" size="sm" />
-          </span>
-          {{ t(item.value) }}
-        </div>
-        <div v-else :class="item.label" :key="`col${index}`">
           {{ t(item.value) }}
         </div>
       </template>
@@ -70,7 +67,7 @@ import LogBrowser from "./LogBrowser.vue";
 import LogService from "./LogService.vue";
 import LogDetail from "./LogDetail.vue";
 
-/*global defineProps, Nullable */
+/*global defineProps */
 const props = defineProps({
   type: { type: String, default: "service" },
   tableData: { type: Array, default: () => [] },
@@ -79,8 +76,6 @@ const props = defineProps({
 const { t } = useI18n();
 const currentLog = ref<any>({});
 const showDetail = ref<boolean>(false);
-const dragger = ref<Nullable<HTMLSpanElement>>(null);
-// const method = ref<number>(380);
 const columns: any[] =
   props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
 
@@ -99,13 +94,12 @@ function setCurrentLog(log: any) {
 }
 
 .log-header {
-  /*display: flex;*/
   white-space: nowrap;
   user-select: none;
   border-left: 0;
   border-right: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  /*background-color: #f3f4f9;*/
+
   .traceId {
     width: 390px;
   }
@@ -123,9 +117,6 @@ function setCurrentLog(log: any) {
 }
 
 .log-header div {
-  /*min-width: 140px;*/
-  width: 140px;
-  /*flex-grow: 1;*/
   display: inline-block;
   padding: 0 4px;
   border: 1px solid transparent;
@@ -136,4 +127,17 @@ function setCurrentLog(log: any) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.browser-header div {
+  min-width: 140px;
+  width: 10%;
+}
+
+div.max-item {
+  width: 20%;
+}
+
+.service-header div {
+  width: 140px;
+}
 </style>

src/views/dashboard/related/components/LogTable/LogBrowser.vue

@@ -14,17 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 
 <template>
-  <div @click="showSelectSpan" :class="['log-item', 'clearfix']" ref="logItem">
+  <div
+    @click="showSelectSpan"
+    :class="['log-item', 'clearfix', 'flex-h']"
+    ref="logItem"
+  >
     <div
       v-for="(item, index) in columns"
       :key="index"
       :class="[
-        'method',
+        'log',
-        ['message', 'stack'].includes(item.label) ? 'autoHeight' : '',
+        ['message', 'stack'].includes(item.label) ? 'max-item' : '',
       ]"
-      :style="{
-        lineHeight: 1.3,
-      }"
     >
       <span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</span>
       <span v-else-if="item.label === 'errorUrl'">{{ data.pagePath }}</span>
@@ -83,7 +84,8 @@ function showSelectSpan() {
 }
 
 .log-item > div {
-  width: 140px;
+  width: 10%;
+  min-width: 140px;
   padding: 0 5px;
   display: inline-block;
   border: 1px solid transparent;
@@ -94,6 +96,10 @@ function showSelectSpan() {
   white-space: nowrap;
 }
 
+.max-item.log {
+  width: 20%;
+}
+
 .log-item .text {
   width: 100% !important;
   display: inline-block;
@@ -102,8 +108,7 @@ function showSelectSpan() {
   white-space: nowrap;
 }
 
-.log-item > div.method {
+.log-item > div.log {
-  padding: 7px 5px;
   line-height: 30px;
 }
 </style>