fix: 测试提单修复 (#1747)

TencentBlueKing · Nov 26, 2024 · a2d85be · a2d85be
1 parent a4d69a7
commit a2d85be
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 7 deletions.
diff --git a/webfe/package_vue/src/views/dev-center/app/operation-record/comps/code-diff.vue b/webfe/package_vue/src/views/dev-center/app/operation-record/comps/code-diff.vue
@@ -83,6 +83,9 @@ export default {
         this.modifiedModel = null;
       }
     },
+    layout() {
+      this.editor.layout();
+    },
   },
 };
 </script>
diff --git a/webfe/package_vue/src/views/dev-center/app/operation-record/comps/diff.vue b/webfe/package_vue/src/views/dev-center/app/operation-record/comps/diff.vue
@@ -1,15 +1,22 @@
 <template>
-  <div class="record-diff-container">
+  <div :class="['record-diff-container', { 'full-screen': isFullscreen }]">
     <!-- top -->
     <div class="top-title">
       <div class="left item">
         <span>{{ $t('操作前') }}</span>
       </div>
       <div class="right item">
         <span>{{ $t('操作后') }}</span>
+        <!-- 全屏 -->
+        <i
+          :title="isFullscreen ? $t('收起') : $t('展开')"
+          :class="['paasng-icon', isFullscreen ? 'paasng-un-full-screen' : 'paasng-full-screen']"
+          @click="toggleFullScreen"
+        ></i>
       </div>
     </div>
     <code-diff
+      ref="codeDiff"
       :old-content="oldCode"
       :new-content="newCode"
     />
@@ -70,8 +77,17 @@ export default {
           color: ['#666666', '#3D4D1F', '#6E963C'],
         },
       ],
+      isFullscreen: false,
     };
   },
+  methods: {
+    toggleFullScreen() {
+      this.isFullscreen = !this.isFullscreen;
+      this.$nextTick(() => {
+        this.$refs.codeDiff?.layout();
+      });
+    },
+  },
 };
 </script>
 
@@ -81,6 +97,15 @@ export default {
   flex-direction: column;
   height: 100%;
   background: #1d1d1d;
+  &.full-screen {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100vh;
+    z-index: 9999;
+  }
   .top-title {
     flex: 0 0 auto; /* 固定高度，不伸缩 */
     height: 44px;
@@ -93,11 +118,21 @@ export default {
       padding-left: 16px;
       background: #2e2e2e;
       &.right {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         border-left: 1px solid #313238;
         span {
           color: #3fc362;
           background: #144628;
         }
+        i {
+          margin-right: 24px;
+          cursor: pointer;
+          &:hover {
+            color: #fff;
+          }
+        }
       }
       span {
         display: inline-block;

diff --git a/webfe/package_vue/src/views/dev-center/app/operation-record/index.vue b/webfe/package_vue/src/views/dev-center/app/operation-record/index.vue
@@ -230,6 +230,7 @@ export default {
         current: 1,
         count: 0,
         limit: 10,
+        limitList: [5, 10, 20, 50],
       },
       diffConfig: {
         isShow: false,

diff --git a/webfe/package_vue/src/views/dev-center/home/home-content/alarm-records.vue b/webfe/package_vue/src/views/dev-center/home/home-content/alarm-records.vue
@@ -6,7 +6,7 @@
       :title="
         $t(
           '您有 {n} 条 MySQL 慢查询告警记录，请尽快处理，以确保应用正常运行。慢查询持续堆积会影响查询效率，严重时会导致应用无法访问。',
-          { n: slowQueryCount }
+          { n: slowQueryCount },
         )
       "
     ></bk-alert>
@@ -185,6 +185,9 @@ export default {
     this.setDefaultDate();
     this.queryAllAppAlerts();
   },
+  beforeDestroy() {
+    bus.$off('home-date');
+  },
   methods: {
     setDefaultDate() {
       const currentDate = new Date();

diff --git a/webfe/package_vue/src/views/dev-center/home/home-content/index.vue b/webfe/package_vue/src/views/dev-center/home/home-content/index.vue
@@ -65,10 +65,8 @@ export default {
   data() {
     return {
       active: 'idle',
-      panels: [
-        { name: 'idle', label: this.$t('闲置应用') },
-        { name: 'alarm', label: this.$t('告警记录') },
-      ],
+      // 初始无数据，防止网络延迟出现的tab延时情况
+      panels: [],
       contentHeight: 0,
       resizeObserver: null,
     };
@@ -136,9 +134,10 @@ export default {
     handlePanelUpdate(data) {
       const { name, length } = data;
       if (length === 0) {
+        if (!this.panels.length) return;
         // 移除对应的 tab 项
         this.panels = this.panels.filter((panel) => panel.name !== name);
-        this.active = this.panels[0].name;
+        this.active = this.panels[0]?.name;
       } else {
         // 确保在 length > 0 时，该 tab 存在于 panels 中
         if (!this.panels.some((panel) => panel.name === name)) {

diff --git a/webfe/package_vue/src/views/plugin-center/plugin/base-config/operation-records.vue b/webfe/package_vue/src/views/plugin-center/plugin/base-config/operation-records.vue
@@ -119,6 +119,7 @@ export default {
         current: 1,
         count: 0,
         limit: 10,
+        limitList: [5, 10, 20, 50],
       },
       filterParams: {},
       dateParams: {},