fix: optimize widgets (#111)

src/store/modules/log.ts

@@ -53,6 +53,12 @@ export const logStore = defineStore({
     setLogCondition(data: any) {
       this.conditions = { ...this.conditions, ...data };
     },
+    resetCondition() {
+      this.conditions = {
+        queryDuration: useAppStoreWithOut().durationTime,
+        paging: { pageNum: 1, pageSize: 15 },
+      };
+    },
     async getServices(layer: string) {
       const res: AxiosResponse = await graphql.query("queryServices").params({
         layer,

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

@@ -17,7 +17,9 @@ limitations under the License. -->
   <div class="log">
     <div
       class="log-header"
-      :class="[type === 'browser' ? 'browser-header' : 'service-header']"
+      :class="
+        type === 'browser' ? ['browser-header', 'flex-h'] : 'service-header'
+      "
     >
       <template v-for="(item, index) in columns" :key="`col${index}`">
         <div
@@ -118,7 +120,7 @@ function setCurrentLog(log: any) {
 
 .log-header div {
   display: inline-block;
-  padding: 0 4px;
+  padding: 0 5px;
   border: 1px solid transparent;
   border-right: 1px dotted silver;
   line-height: 30px;
@@ -128,13 +130,15 @@ function setCurrentLog(log: any) {
   white-space: nowrap;
 }
 
-.browser-header div {
-  min-width: 140px;
-  width: 10%;
-}
+.browser-header {
+  div {
+    min-width: 140px;
+    width: 10%;
+  }
 
-div.max-item {
-  width: 20%;
+  .max-item {
+    width: 20%;
+  }
 }
 
 .service-header div {

src/views/dashboard/related/log/Header.vue

@@ -130,7 +130,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { useLogStore } from "@/store/modules/log";
@@ -323,6 +323,9 @@ function removeExcludeContent(index: number) {
   });
   excludingContentStr.value = "";
 }
+onUnmounted(() => {
+  logStore.resetCondition();
+});
 watch(
   () => selectorStore.currentService,
   () => {