perf: 修改 activity

src/components/ResourceActivity/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="12" :sm="24">
+      <IBox :title="title" class="block" v-bind="$attrs">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :size="activity.size"
+            :timestamp="activity.timestamp"
+            :type="activity.type"
+            placement="bottom"
+          >
+            {{ activity.content }}
+          </el-timeline-item>
+        </el-timeline>
+        <div v-if="activities.length < 1">
+          {{ this.$t('common.NoContent') }}
+        </div>
+      </IBox>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import IBox from '@/components/IBox'
+
+export default {
+  name: 'AccountActivity',
+  components: {
+    IBox
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      activityUrl: `/api/v1/audits/activities/?resource_id=${this.object.id}`,
+      title: `${this.$t('common.Activity')} - ${this.$t('common.Last30')}`,
+      activities: [
+        {
+          content: this.$t('common.Now'),
+          timestamp: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
+          type: 'primary'
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.getActivities()
+  },
+  methods: {
+    getActivities() {
+      this.$axios.get(this.activityUrl).then(res => {
+        for (const i in res) {
+          this.activities.push(res[i])
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/TimelineCard/index.vue

@@ -1,57 +0,0 @@
-<template>
-  <IBox :title="title" v-bind="$attrs" class="block">
-    <el-timeline>
-      <el-timeline-item
-        v-for="(activity, index) in activities"
-        :key="index"
-        :icon="activity.icon"
-        :color="activity.color"
-        :size="activity.size"
-        :timestamp="activity.timestamp"
-        type="primary"
-        placement="top"
-      >
-        {{ activity.content }}
-      </el-timeline-item>
-    </el-timeline>
-    <div v-if="activities.length < 1">
-      {{ this.$t('common.NoContent') }}
-    </div>
-  </IBox>
-</template>
-
-<script>
-import IBox from '@/components/IBox'
-export default {
-  name: 'TimelineCard',
-  components: {
-    IBox
-  },
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    activities: {
-      type: Array,
-      default: () => []
-    },
-    url: {
-      type: String,
-      default: ''
-    }
-  },
-  mounted() {
-    if (this.url) {
-      this.$axios.get(this.url).then(res => {
-        for (const i in res) {
-          this.activities.push(res[i])
-        }
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

src/components/index.js

@@ -28,3 +28,4 @@ export { default as AssetRelationCard } from './AssetRelationCard'
 export { default as UserConfirmDialog } from './UserConfirmDialog'
 export { default as Announcement } from './Announcement'
 export { default as CronTab } from './CronTab'
+export { default as ResourceActivity } from './ResourceActivity'

src/i18n/langs/en.json

@@ -322,6 +322,7 @@
     "ReLoginErr": "Login time has exceeded 5 minutes, please login again"
   },
   "common": {
+    "Now": "Now",
     "Activity": "Activity",
     "Last30": "Last 30 times",
     "SpecificInfo": "Specific",

src/i18n/langs/ja.json

@@ -325,6 +325,7 @@
     "ReLoginErr": "ログイン時間が 5 分を超えました。もう一度ログインしてください"
   },
   "common": {
+    "Now": "今",
     "Activity": "イベント",
     "Last30": "最近 30 回です",
     "SpecificInfo": "特別情報",

src/i18n/langs/zh.json

@@ -424,10 +424,11 @@
     "ReLoginErr": "登录时长已超过 5 分钟，请重新登录"
   },
   "common": {
+    "Now": "现在",
     "SpecificInfo": "特殊信息",
     "CollectionSucceed": "收藏成功",
     "CancelCollection": "取消收藏",
-    "Activity": "活动",
+    "Activity": "活动记录",
     "Last30": "最近 30 次",
     "Version": "版本",
     "Publish": "发布",

src/layout/components/GenericDetailPage/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <TabPage v-if="!loading" :submenu="submenu" :active-menu.sync="iActiveMenu" @tab-click="handleTabClick">
+  <TabPage v-if="!loading" :active-menu.sync="iActiveMenu" :submenu="iSubmenu" @tab-click="handleTabClick">
     <template #title>
       <el-button class="go-back" icon="el-icon-back" @click="handleGoBack" />
       <span style="padding-left: 10px">{{ iTitle }}</span>
@@ -19,7 +19,11 @@ import TabPage from '../TabPage'
 import { flashErrorMsg } from '@/utils/request'
 import { getApiPath } from '@/utils/common'
 import ActionsGroup from '@/components/ActionsGroup'
+import ResourceActivity from '@/components/ResourceActivity/index.vue'
 import { mapGetters } from 'vuex'
+import Vue from 'vue'
+
+Vue.component('ResourceActivity', ResourceActivity)
 
 export default {
   name: 'GenericDetailPage',
@@ -54,6 +58,10 @@ export default {
       type: String,
       default: () => ''
     },
+    hasActivity: {
+      type: Boolean,
+      default: () => true
+    },
     hasRightSide: {
       type: Boolean,
       default: true
@@ -101,14 +109,18 @@ export default {
     const defaultActions = {
       // Delete button
       canDelete: vm.$hasCurrentResAction('delete'),
-      deleteCallback: function(item) { vm.defaultDelete(item) },
+      deleteCallback: function(item) {
+        vm.defaultDelete(item)
+      },
       deleteApiUrl: detailApiUrl,
       deleteSuccessRoute: this.$route.name.replace('Detail', 'List'),
       // Update button
       canUpdate: () => {
         return !vm.currentOrgIsRoot && vm.$hasCurrentResAction('change')
       },
-      updateCallback: function(item) { this.defaultUpdate(item) },
+      updateCallback: function(item) {
+        this.defaultUpdate(item)
+      },
       updateRoute: this.$route.name.replace('Detail', 'Update')
     }
     return {
@@ -150,6 +162,17 @@ export default {
       set(item) {
         this.$emit('update:activeMenu', item)
       }
+    },
+    iSubmenu() {
+      if (!this.hasActivity) {
+        return this.submenu
+      }
+      const activity = {
+        title: this.$t('common.Activity'),
+        name: 'ResourceActivity',
+        hidden: () => !this.$hasPerm('audits.view_operatelog')
+      }
+      return [...this.submenu, activity]
     }
   },
   async mounted() {

src/main.js

@@ -1,11 +1,9 @@
 import Vue from 'vue'
 
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
-
 import ElementUI from 'element-ui'
 import locale from 'elementLocale'
 import '@/styles/index.scss' // global css
-
 import App from './App'
 import store from './store'
 import router from './router'
@@ -15,6 +13,14 @@ import '@/icons' // icon
 import '@/guards' // permission control
 import '@/directive'
 import '@/filters'
+// cookie
+import VueCookie from 'vue-cookie'
+import VueLogger from 'vuejs-logger'
+import loggerOptions from './utils/logger'
+import ECharts from 'vue-echarts'
+import service from '@/utils/request'
+import { Message } from '@/utils/Message'
+import xss from '@/utils/xss'
 
 /**
  * If you don't want to use mock-server
@@ -36,8 +42,6 @@ Vue.use(ElementUI, { locale })
 
 Vue.config.productionTip = false
 
-// cookie
-import VueCookie from 'vue-cookie'
 Vue.use(VueCookie)
 window.$cookie = VueCookie
 
@@ -47,23 +51,17 @@ Vue.use(require('vue-moment'), {
   moment
 })
 
-import VueLogger from 'vuejs-logger'
-import loggerOptions from './utils/logger'
 Vue.use(VueLogger, loggerOptions)
 
-import ECharts from 'vue-echarts'
 Vue.component('echarts', ECharts)
 
-import service from '@/utils/request'
 Vue.prototype.$axios = service
 
 window._ = require('lodash')
 // Vue.set(Vue.prototype, '_', _)
 
-import { Message } from '@/utils/Message'
 Vue.prototype.$message = Message
 
-import xss from '@/utils/xss'
 Vue.prototype.$xss = xss
 
 // 注册全局事件总线

src/views/accounts/AssetAccount/AssetAccountDetail/index.vue

@@ -1,7 +1,7 @@
 <template>
   <GenericDetailPage
-    :object.sync="TaskDetail"
     :active-menu.sync="config.activeMenu"
+    :object.sync="TaskDetail"
     v-bind="config"
     v-on="$listeners"
   >
@@ -14,14 +14,12 @@
 <script>
 import { GenericDetailPage, TabPage } from '@/layout/components'
 import Detail from './Detail.vue'
-import AssetActivity from './Activity.vue'
 
 export default {
   components: {
     GenericDetailPage,
     TabPage,
-    Detail,
-    AssetActivity
+    Detail
   },
   data() {
     return {
@@ -32,11 +30,6 @@ export default {
           {
             title: this.$t('common.BasicInfo'),
             name: 'Detail'
-          },
-          {
-            title: this.$t('common.Activity'),
-            name: 'AssetActivity',
-            hidden: () => !this.$hasPerm('audits.view_operatelog') || !this.$hasPerm('accounts.view_changesecretrecord')
           }
         ],
         actions: {

src/views/assets/Asset/AssetDetail/components/Activity.vue

@@ -1,36 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col :md="12" :sm="24">
-      <TimelineCard :title="activityTitle" :url="activityUrl" />
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import TimelineCard from '@/components/TimelineCard'
-
-export default {
-  name: 'AccountActivity',
-  components: {
-    TimelineCard
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      activityUrl: `/api/v1/audits/activities/?resource_id=${this.object.id}`,
-      activityTitle: `${this.$t('common.Activity')} - ${this.$t('audits.OperateRecord')} (${this.$t('common.Last30')})`
-    }
-  },
-  mounted() {
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/assets/Asset/AssetDetail/index.vue

@@ -1,7 +1,7 @@
 <template>
   <GenericDetailPage
-    :object.sync="asset"
     :active-menu.sync="config.activeMenu"
+    :object.sync="asset"
     v-bind="config"
     v-on="$listeners"
   >
@@ -16,7 +16,6 @@ import { GenericDetailPage, TabPage } from '@/layout/components'
 import Detail from './Detail.vue'
 import Account from './Account.vue'
 import PermUserList from './PermUser.vue'
-import AccountActivity from './components/Activity.vue'
 
 export default {
   name: 'AssetListDetail',
@@ -25,8 +24,7 @@ export default {
     TabPage,
     Detail,
     Account,
-    PermUserList,
-    AccountActivity
+    PermUserList
   },
   data() {
     return {
@@ -47,11 +45,6 @@ export default {
             title: this.$t('assets.PermUserList'),
             name: 'PermUserList',
             hidden: () => !this.$hasPerm('perms.view_assetpermission')
-          },
-          {
-            title: this.$t('common.Activity'),
-            name: 'AccountActivity',
-            hidden: () => !this.$hasPerm('audits.view_operatelog') || !this.$hasPerm('terminal.view_session')
           }
         ],
         hasRightSide: true,

src/views/assets/Domain/DomainDetail/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <GenericDetailPage :object.sync="TaskDetail" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="TaskDetail" v-bind="config" v-on="$listeners">
     <keep-alive>
       <component :is="config.activeMenu" :object="TaskDetail" />
     </keep-alive>
@@ -10,6 +10,7 @@
 import { GenericDetailPage, TabPage } from '@/layout/components'
 import Detail from './Detail.vue'
 import GatewayList from './GatewayList.vue'
+
 export default {
   components: {
     GenericDetailPage,

src/views/assets/Platform/PlatformDetail/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <GenericDetailPage :object.sync="TaskDetail" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="TaskDetail" v-bind="config" v-on="$listeners">
     <keep-alive>
       <component :is="config.activeMenu" :object="TaskDetail" />
     </keep-alive>

src/views/users/Group/UserGroupDetail/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <GenericDetailPage :object.sync="group" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="group" v-bind="config" v-on="$listeners">
     <keep-alive>
       <component :is="config.activeMenu" :object="group" />
     </keep-alive>
@@ -39,7 +39,7 @@ export default {
 </script>
 
 <style lang='scss' scoped>
->>> table.CardTable {
-  table-layout: auto!important;
+> > > table.CardTable {
+  table-layout: auto !important;
 }
 </style>

src/views/users/Role/RoleDetail/index.vue

@@ -1,7 +1,7 @@
 <template>
   <GenericDetailPage
-    :object.sync="role"
     :active-menu.sync="config.activeMenu"
+    :object.sync="role"
     v-bind="config"
     v-on="$listeners"
   >

src/views/users/User/UserDetail/Activity.vue

@@ -1,36 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col :md="12" :sm="24">
-      <TimelineCard :title="activityTitle" :url="activityUrl" />
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import TimelineCard from '@/components/TimelineCard'
-
-export default {
-  name: 'UserActivity',
-  components: {
-    TimelineCard
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  data() {
-    return {
-      activityUrl: `/api/v1/audits/activities/?resource_id=${this.object.id}`,
-      activityTitle: `${this.$t('common.Activity')} - ${this.$t('audits.OperateRecord')} (${this.$t('common.Last30')})`
-    }
-  },
-  mounted() {
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/users/User/UserDetail/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <GenericDetailPage :object.sync="user" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
+  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="user" v-bind="config" v-on="$listeners">
     <keep-alive>
       <component :is="config.activeMenu" :object="user" />
     </keep-alive>
@@ -12,7 +12,6 @@ import UserAssetPermissionRules from './UserAssetPermissionRules'
 import UserGrantedAssets from './UserGrantedAssets'
 import UserLoginACLList from '@/views/acl/UserLoginACL/UserLoginACLList'
 import UserInfo from './UserInfo'
-import UserActivity from './Activity.vue'
 
 export default {
   components: {
@@ -20,8 +19,7 @@ export default {
     UserLoginACLList,
     GenericDetailPage,
     UserGrantedAssets,
-    UserAssetPermissionRules,
-    UserActivity
+    UserAssetPermissionRules
   },
   data() {
     const vm = this
@@ -51,11 +49,6 @@ export default {
             title: this.$t('route.UserAclLists'),
             name: 'UserLoginACLList',
             hidden: () => !vm.$hasPerm('acls.view_loginacl')
-          },
-          {
-            title: this.$t('common.Activity'),
-            name: 'UserActivity',
-            hidden: () => !this.$hasPerm('audits.view_operatelog') || !this.$hasPerm('audits.view_userloginlog')
           }
         ]
       }