update

src/styles/theme.scss

@@ -118,8 +118,9 @@ html.dark {
   color: var(--sw-drawer-header);
 }
 
-.el-table tr {
-  background-color: var(--el-table-tr-bg-color);
+.el-table {
+  --el-table-tr-bg-color: var(--theme-background);
+  --el-table-header-bg-color: var(--theme-background);
 }
 
 .el-popper.is-light {
@@ -131,27 +132,6 @@ html.dark {
   --el-switch-off-color: #aaa;
 }
 
-.el-table__body-wrapper tr td.el-table-fixed-column--left,
-.el-table__body-wrapper tr td.el-table-fixed-column--right,
-.el-table__body-wrapper tr th.el-table-fixed-column--left,
-.el-table__body-wrapper tr th.el-table-fixed-column--right,
-.el-table__footer-wrapper tr td.el-table-fixed-column--left,
-.el-table__footer-wrapper tr td.el-table-fixed-column--right,
-.el-table__footer-wrapper tr th.el-table-fixed-column--left,
-.el-table__footer-wrapper tr th.el-table-fixed-column--right,
-.el-table__header-wrapper tr td.el-table-fixed-column--left,
-.el-table__header-wrapper tr td.el-table-fixed-column--right,
-.el-table__header-wrapper tr th.el-table-fixed-column--left,
-.el-table__header-wrapper tr th.el-table-fixed-column--right {
-  background-color: var(--sw-table-col);
-}
-
-.el-table.is-scrolling-none th.el-table-fixed-column--left,
-.el-table.is-scrolling-none th.el-table-fixed-column--right,
-.el-table th.el-table__cell {
-  background-color: var(--sw-table-col);
-}
-
 $tool-icon-btn-bg: var(--sw-icon-btn-bg);
 $tool-icon-btn-color: var(--sw-icon-btn-color);
 $popper-hover-bg-color: var(--popper-hover-bg);

src/views/alarm/Header.vue

@@ -38,7 +38,7 @@ limitations under the License. -->
           :total="total"
           @current-change="changePage"
           :pager-count="5"
-          small
+          size="small"
           :style="
             appStore.theme === Themes.Light
               ? `--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`

src/views/dashboard/panel/Tool.vue

@@ -16,7 +16,7 @@ limitations under the License. -->
   <div class="dashboard-tool flex-h">
     <div :class="isRelation ? 'flex-v' : 'flex-h'" class="tool-selectors">
       <div class="flex-h">
-        <div class="selectors-item" v-if="key !== 10">
+        <div class="flex-h selectors-item" v-if="key !== 10">
           <span class="label">$Service</span>
           <Selector
             v-model="states.currentService"
@@ -30,7 +30,7 @@ limitations under the License. -->
             <Icon size="small" iconName="hierarchy_topology" />
           </span>
         </div>
-        <div class="selectors-item" v-if="key === 3 || key === 4 || key === 5 || key === 6">
+        <div class="flex-h selectors-item" v-if="key === 3 || key === 4 || key === 5 || key === 6">
           <span class="label">
             {{ ["EndpointRelation", "Endpoint"].includes(dashboardStore.entity) ? "$Endpoint" : "$ServiceInstance" }}
           </span>
@@ -52,7 +52,7 @@ limitations under the License. -->
             <Icon size="small" iconName="hierarchy_topology" />
           </span>
         </div>
-        <div class="selectors-item" v-if="key === 5 || key === 6">
+        <div class="flex-h selectors-item" v-if="key === 5 || key === 6">
           <span class="label"> $Process </span>
           <Selector
             v-model="states.currentProcess"
@@ -65,7 +65,7 @@ limitations under the License. -->
         </div>
       </div>
       <div class="flex-h" :class="isRelation ? 'relation' : ''">
-        <div class="selectors-item" v-if="key === 2 || key === 4 || key === 5">
+        <div class="flex-h selectors-item" v-if="key === 2 || key === 4 || key === 5">
           <span class="label">$DestinationService</span>
           <Selector
             v-model="states.currentDestService"
@@ -76,7 +76,7 @@ limitations under the License. -->
             class="selectors"
           />
         </div>
-        <div class="selectors-item" v-if="key === 4 || key === 5">
+        <div class="flex-h selectors-item" v-if="key === 4 || key === 5">
           <span class="label">
             {{ dashboardStore.entity === "EndpointRelation" ? "$DestinationEndpoint" : "$DestinationServiceInstance" }}
           </span>
@@ -91,7 +91,7 @@ limitations under the License. -->
             :isRemote="dashboardStore.entity === 'EndpointRelation'"
           />
         </div>
-        <div class="selectors-item" v-if="key === 5">
+        <div class="flex-h selectors-item" v-if="key === 5">
           <span class="label"> $DestinationProcess </span>
           <Selector
             v-model="states.currentDestProcess"

src/views/dashboard/related/continuous-profiling/components/InstanceList.vue

@@ -64,7 +64,7 @@ limitations under the License. -->
   </el-table>
   <el-pagination
     class="mt-10"
-    small
+    size="small"
     layout="prev, pager, next"
     :page-size="pageSize"
     :total="continousProfilingStore.instances.length"

src/views/dashboard/related/ebpf/components/EBPFSchedules.vue

@@ -76,7 +76,7 @@ limitations under the License. -->
         </el-table>
         <el-pagination
           class="pagination"
-          small
+          size="small"
           layout="prev, pager, next"
           :page-size="pageSize"
           :total="processes.length"

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

@@ -54,7 +54,7 @@ limitations under the License. -->
       :total="total"
       @current-change="updatePage"
       :pager-count="5"
-      small
+      size="small"
     />
     <el-button class="search-btn" size="small" type="primary" @click="queryEvents">
       {{ t("search") }}

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

@@ -21,7 +21,7 @@ limitations under the License. -->
       <el-pagination
         v-model="logStore.conditions.paging.pageNum"
         :page-size="pageSize"
-        :small="true"
+        size="small"
         layout="prev, pager, next"
         :pager-count="5"
         :total="total"

src/views/dashboard/related/topology/service/ServiceMap.vue

@@ -98,7 +98,7 @@ limitations under the License. -->
     <div class="setting" v-if="showSetting && dashboardStore.editMode">
       <Settings @update="updateSettings" @updateNodes="freshNodes" />
     </div>
-    <div class="tool">
+    <div class="tool flex-h">
       <span v-show="graphConfig.showDepth">
         <span class="label">{{ t("currentDepth") }}</span>
         <Selector class="inputs" :value="depth" :options="DepthList" @change="changeDepth" />

src/views/dashboard/related/trace/TraceList.vue

@@ -71,7 +71,7 @@ limitations under the License. -->
       <el-pagination
         v-model="traceStore.conditions.paging.pageNum"
         :page-size="pageSize"
-        :small="true"
+        size="small"
         layout="prev, pager, next"
         :total="total"
         @current-change="updatePage"

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -119,7 +119,7 @@ limitations under the License. -->
     <el-pagination
       v-model="pageNum"
       :page-size="pageSize"
-      :small="true"
+      size="small"
       layout="prev, pager, next"
       :pager-count="5"
       :total="total"

tsconfig.app.json

@@ -25,6 +25,8 @@
     },
     "noImplicitThis": false,
     "preserveValueImports": false,
-    "importsNotUsedAsValues": "remove"
+    "importsNotUsedAsValues": "remove",
+    "target": "esnext",
+    "lib": ["es2019", "dom"]
   }
 }