perf: support options

src/components/Table/ListTable/QuickFilter.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-if="filters" class="quick-filter">
+  <div v-if="filters || summary" :class="isExpand ? 'expand': 'shrink' " class="quick-filter">
     <div v-show="isExpand" class="quick-filter-wrap">
-      <div class="quick-filter-zone">
+      <div v-show="filters" class="quick-filter-zone">
         <div v-for="category in filters" :key="category.label" class="item-zone">
           <h5>{{ category.label }}</h5>
           <div class="filter-options">
@@ -11,6 +11,11 @@
           </div>
         </div>
       </div>
+      <div class="summary-zone">
+        <span v-for="item of summary" :key="item.title">
+          <SummaryCard :body="item.body" :title="item.title" />
+        </span>
+      </div>
     </div>
     <div class="expand-bar-wrap">
       <div class="expand-bar" @click="toggle">
@@ -22,13 +27,46 @@
 </template>
 
 <script>
+import SummaryCard from '@/views/dashboard/components/SummaryCard.vue'
+
 export default {
   name: 'QuickFilter',
+  components: { SummaryCard },
   props: {
     filters: {
       type: Array,
       default: () => []
     },
+    summary: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            title: '最近一周发现',
+            body: {
+              route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+              count: 10,
+              disabled: 0
+            }
+          },
+          {
+            title: '最近一月发现',
+            body: {
+              route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+              count: 321,
+              disabled: 0
+            }
+          },
+          {
+            title: '待确认',
+            body: {
+              count: 544,
+              disabled: true
+            }
+          }
+        ]
+      }
+    },
     expand: {
       type: Boolean,
       default: true
@@ -54,56 +92,71 @@ export default {
 }
 </script>
 <style lang='scss' scoped>
- .quick-filter-zone {
-   display: flex;
-   justify-content: flex-start;
-
-   h5 {
-     font-weight: 600;
-     text-transform: uppercase;
-     font-size: 12px;
-     margin-bottom: .5rem;
-     line-height: 1.2;
-     display: inline-block;
-   }
-
-   .item-zone {
-     margin-right: 30px;
-     margin-bottom: 5px;
-   }
-
-   .item {
-     display: inline-block;
-     margin-right: 10px;
-     border-radius: 5px;
-     background-color: #f5f7fa;
-     color: #303133;
-     font-size: 12px;
-     cursor: pointer;
-
-     &:hover {
-       color: var(--color-primary);
-     }
-   }
-
-   ul {
-     list-style: none outside none;
-     margin-block-start: 0;
-     padding-left: 0;
-   }
- }
-
  .quick-filter {
+   background: white;
+   padding: 10px 10px 10px 20px;
+   margin-bottom: 10px;
    display: flex;
    place-content: stretch flex-end;
    justify-content: center;
    align-content: stretch;
- }
+   box-shadow: 0 1px 1px 0 rgba(54, 58, 80, .32);
 
- .quick-filter-wrap {
-   display: inline-block;
-   width: calc(100% - 25px);
-   margin-bottom: 10px;
+   &.shrink {
+     background: inherit;
+     padding: 0;
+     margin-bottom: 0;
+     box-shadow: none;
+   }
+
+   .quick-filter-wrap {
+     display: inline-block;
+     width: calc(100% - 70px);
+
+     .summary-zone {
+       display: flex;
+       justify-content: space-between;
+     }
+
+     .quick-filter-zone {
+       display: flex;
+       justify-content: flex-start;
+       padding-bottom: 10px;
+
+       h5 {
+         font-weight: 600;
+         text-transform: uppercase;
+         font-size: 12px;
+         margin-bottom: .5rem;
+         line-height: 1.2;
+         display: inline-block;
+       }
+
+       .item-zone {
+         margin-right: 30px;
+         margin-bottom: 5px;
+       }
+
+       .item {
+         display: inline-block;
+         margin-right: 10px;
+         border-radius: 5px;
+         color: #303133;
+         font-size: 12px;
+         cursor: pointer;
+
+         &:hover {
+           color: var(--color-primary);
+         }
+       }
+
+       ul {
+         list-style: none outside none;
+         margin-block-start: 0;
+         padding-left: 0;
+       }
+     }
+   }
  }
 
  .filter-options {
@@ -112,18 +165,19 @@ export default {
 
  .expand-bar-wrap {
    margin: auto 0;
- }
+   min-width: 60px;
 
- .expand-bar {
-   text-align: center;
-   display: inline-block;
-   cursor: pointer;
+   .expand-bar {
+     float: right;
+     display: inline-block;
+     cursor: pointer;
 
-   i {
-     padding: 5px;
+     i {
+       padding: 5px;
 
-     &.shrink {
-       transform: rotate(180deg);
+       &.shrink {
+         transform: rotate(180deg);
+       }
      }
    }
  }

src/views/accounts/AccountDiscover/AccountDiscoverList.vue

@@ -29,6 +29,15 @@ export default {
   data() {
     const vm = this
     return {
+      config: {
+        title: this.$t('RealTimeData'),
+        tip: this.$t('RealTimeData')
+      },
+      counter: {
+        total_count_online_sessions: '.',
+        total_count_online_users: '.',
+        total_count_today_failed_sessions: '.'
+      },
       showDeleteAccountDialog: false,
       gatherAccounts: {},
       treeSetting: {
@@ -215,3 +224,6 @@ export default {
   }
 }
 </script>
+<style lang='scss' scoped>
+
+</style>

src/views/assets/Asset/AssetList/components/BaseList.vue

@@ -13,9 +13,9 @@
       @update="handleAssetBulkUpdate"
     />
     <GatewayDialog
-      :cell="GatewayCell"
-      :port="GatewayPort"
-      :visible.sync="GatewayVisible"
+      :cell="gatewayCell"
+      :port="gatewayPort"
+      :visible.sync="gatewayVisible"
     />
   </div>
 </template>
@@ -113,9 +113,9 @@ export default {
     const extraQuery = this.$route.params?.extraQuery || {}
     return {
       showPlatform: false,
-      GatewayPort: 0,
-      GatewayCell: '',
-      GatewayVisible: false,
+      gatewayPort: 0,
+      gatewayCell: '',
+      gatewayVisible: false,
       defaultConfig: {
         url: '/api/v1/assets/hosts/',
         permissions: {
@@ -216,13 +216,13 @@ export default {
                     row?.auto_config?.ping_enabled,
                   callback: ({ row }) => {
                     if (row.platform.name === 'Gateway') {
-                      this.GatewayVisible = true
+                      this.gatewayVisible = true
                       const port = row.protocols.find(item => item.name === 'ssh').port
                       if (!port) {
                         return this.$message.error(this.$tc('BadRequestErrorMsg'))
                       } else {
-                        this.GatewayPort = port
-                        this.GatewayCell = row.id
+                        this.gatewayPort = port
+                        this.gatewayCell = row.id
                       }
                     } else {
                       this.$axios.post(