perf: 修改用户的概览页

src/views/myhome/components/Announcement.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="box-card">
+  <el-card class="box-card" shadow="never">
     <div slot="header" class="title">
       <span>{{ i18n.t('common.Announcement') }}</span>
     </div>
@@ -52,11 +52,7 @@ ul,li {
   list-style: none
 }
 .box-card {
-  box-shadow: 0 2px 4px 0 rgb(54 58 80 / 32%);
   margin-bottom: 20px;
-  &:hover {
-    box-shadow: 0 4px 5px 0 rgb(54 58 80 / 42%);
-  }
 }
 .title {
   font-weight: 500;

src/views/myhome/components/Assect.vue

@@ -1,82 +0,0 @@
-<template>
-  <HomeCard v-bind="cardConfig" :table-config="tableConfig" />
-</template>
-
-<script>
-import HomeCard from './HomeCard.vue'
-import { SystemUserFormatter } from '@/components/TableFormatters'
-
-export default {
-  name: 'Assect',
-  components: {
-    HomeCard
-  },
-  data() {
-    return {
-      cardConfig: {
-        title: this.$t('route.AssetAclList'),
-        icon: 'fa-inbox'
-      },
-      tableConfig: {
-        url: '/api/v1/terminal/my-login-assets/?limit=5',
-        columns: [
-          'hostname', 'ip', 'system_users', 'platform', 'comment', 'actions'
-        ],
-        columnsMeta: {
-          hostname: {
-            label: this.$t('perms.hostName'),
-            showOverflowTooltip: true
-          },
-          ip: {
-            sortable: false
-          },
-          system_users: {
-            showOverflowTooltip: true,
-            align: 'center',
-            label: this.$t('assets.SystemUsers'),
-            width: '150px',
-            formatter: SystemUserFormatter,
-            formatterArgs: {
-              getUrl: ({ row }) => {
-                return `/api/v1/perms/users/assets/${row.id}/system-users/?cache_policy=1`
-              }
-            }
-          },
-          platform: {
-            label: this.$t('assets.Platform')
-          },
-          comment: {
-            label: this.$t('sessions.comment'),
-            showOverflowTooltip: true
-          },
-          actions: {
-            width: '70px',
-            formatterArgs: {
-              hasDelete: false,
-              loading: false,
-              hasClone: false,
-              hasUpdate: false,
-              extraActions: [
-                {
-                  name: 'connect',
-                  fa: 'fa-terminal',
-                  type: 'primary',
-                  can: ({ row }) => row.is_active,
-                  callback: ({ row }) => {
-                    window.open(`/luna/?login_to=${row.id}`, '_blank')
-                  }
-                }
-              ]
-            }
-          }
-        },
-        hasSelection: false,
-        paginationSize: 5
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-</style>

src/views/myhome/components/HomeCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="HomeCard">
-    <el-card class="box-card">
+    <el-card class="box-card" shadow="never">
       <div v-show="title || btnText" slot="header" class="clearfix">
         <span v-show="title" class="head-title">{{ title }}</span>
         <el-button
@@ -81,16 +81,13 @@ export default {
     position: relative;
     width: 100%;
     background-color: #fff;
-    box-shadow: 0 2px 4px 0 rgb(54 58 80 / 32%);
+    //box-shadow: 0 2px 4px 0 rgb(54 58 80 / 32%);
     transition: all 0.4s ease;
     overflow: hidden;
     &>>> .el-card__header {
       padding: 20px 20px 0;
       border-bottom: 0;
     }
-    &:hover {
-      box-shadow: 0 4px 5px 0 rgb(54 58 80 / 42%);
-    }
     &:nth-child(n) {
       margin-bottom: 20px;
     }

src/views/myhome/components/LoginLog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="box-card">
+  <el-card class="box-card" shadow="never">
     <div slot="header" class="title">
       <span>{{ i18n.t('route.LoginLog') }}</span>
     </div>
@@ -42,12 +42,14 @@ export default {
       tableConfig: {
         url: '/api/v1/audits/my-login-logs/?limit=5',
         columns: [
-          'ip', 'datetime'
+          'city', 'datetime'
         ],
         columnsMeta: {
-          ip: {
-            label: this.$t('audits.LoginIP'),
-            showOverflowTooltip: true
+          city: {
+            showOverflowTooltip: true,
+            formatter: (row) => {
+              return <span>{ row.city }({ row.ip })</span>
+            }
           },
           datetime: {
             showOverflowTooltip: true
@@ -63,11 +65,8 @@ export default {
 
 <style lang="scss" scoped>
 .box-card {
-  box-shadow: 0 2px 4px 0 rgb(54 58 80 / 32%);
   margin-bottom: 20px;
-  &:hover {
-    box-shadow: 0 4px 5px 0 rgb(54 58 80 / 42%);
-  }
+
   &>>> .el-card__header {
     margin-bottom: -10px;
   }

src/views/myhome/components/Ticket.vue

@@ -9,7 +9,7 @@ import { toSafeLocalDateStr } from '@/utils/common'
 import { DetailFormatter } from '@/components/TableFormatters'
 
 export default {
-  name: 'Hannouncement',
+  name: 'HomeAnnouncement',
   components: {
     HomeCard
   },

src/views/myhome/components/User.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="box-card">
+  <el-card class="box-card" shadow="never">
     <div slot="header" class="title">
       <span>{{ i18n.t('common.nav.Profile') }}</span>
     </div>
@@ -49,11 +49,7 @@ ul,li {
   list-style: none
 }
 .box-card {
-  box-shadow: 0 2px 4px 0 rgb(54 58 80 / 32%);
   margin-bottom: 20px;
-  &:hover {
-    box-shadow: 0 4px 5px 0 rgb(54 58 80 / 42%);
-  }
   &>>> .el-card__header {
     padding-top: 20px;
   }

src/views/myhome/index.vue

@@ -8,8 +8,7 @@
               <el-row>
                 <el-col :md="16" :xs="24" style="padding-right: 20px;">
                   <Session />
-                  <Assect />
-                  <Ticket />
+                  <Ticket v-if="hasValidLicense" />
                 </el-col>
                 <el-col :md="8" :xs="24">
                   <User />
@@ -27,12 +26,10 @@
 
 <script>
 import { Page } from '@/layout/components'
-import store from '@/store'
 import User from './components/User'
 import Announcement from './components/Announcement'
 import Ticket from './components/Ticket'
-import Log from './components/Log'
-import Assect from './components/Assect'
+import Log from './components/LoginLog'
 import Session from './components/Session'
 
 export default {
@@ -43,16 +40,14 @@ export default {
     Announcement,
     Ticket,
     Log,
-    Assect,
     Session
   },
   data() {
     return {
-      rootShow: true
     }
   },
   computed: {
-    getasValidLicense() {
+    hasValidLicense() {
       return this.$store.getters.hasValidLicense
     }
   },
@@ -60,11 +55,6 @@ export default {
     this.init()
   },
   methods: {
-    init() {
-      store.dispatch('permission/getRootPerms', 'aaaa').then(res => {
-        this.rootShow = res
-      })
-    }
   }
 }