perf: 修改系统设置布局

src/i18n/langs/en.json

@@ -1528,6 +1528,15 @@
     }
   },
   "setting": {
+    "TaskList": "Task list",
+    "Announcement": "Announcement",
+    "Features": "Features enable",
+    "PasswordRule": "Password rule",
+    "PasswordSecurity": "Password security",
+    "SessionSecurity": "Session security",
+    "AuthSecurity": "Auth security",
+    "MsgSubscribe": "Message subscribe",
+    "Message": "Message setting",
     "ServerTime": "Server time",
     "Custom": "Custom",
     "CleanHelpText": "Regular cleanup tasks will be executed at 2 o'clock in the morning every day, and the cleaned data cannot be recovered",

src/i18n/langs/ja.json

@@ -1523,6 +1523,15 @@
     }
   },
   "setting": {
+    "TaskList": "タスクリスト",
+    "Announcement": "公告",
+    "Features": "機能有効",
+    "PasswordRule": "パスワードルール",
+    "PasswordSecurity": "パスワードセキュリティ",
+    "SessionSecurity": "セッションセキュリティ",
+    "AuthSecurity": "認証とセキュリティ",
+    "MsgSubscribe": "メッセージ購読",
+    "Message": "メッセージ設定",
     "ServerTime": "サーバータイムです",
     "Custom": "カスタムです",
     "CleanHelpText": "定期清理タスクは毎日午前2時に実行され、クリーンアップ後のデータは復元できません",

src/i18n/langs/zh.json

@@ -1520,6 +1520,15 @@
     "PublishStatus": "发布状态"
   },
   "setting": {
+    "TaskList": "任务列表",
+    "Announcement": "公告",
+    "Features": "功能启用",
+    "PasswordRule": "密码规则",
+    "PasswordSecurity": "密码安全",
+    "SessionSecurity": "会话安全",
+    "AuthSecurity": "认证安全",
+    "MsgSubscribe": "消息订阅",
+    "Message": "消息通知",
     "Vault": "密钥匣子",
     "ServerTime": "服务器时间",
     "Custom": "自定义",

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -125,7 +125,7 @@ export default {
     },
     // 获取提交的方法
     submitMethod: {
-      type: Function,
+      type: [Function, String],
       default: function() {
         const params = this.$route.params
         if (params.id) {
@@ -271,7 +271,11 @@ export default {
   },
   computed: {
     method() {
-      return this.submitMethod(this)
+      if (this.submitMethod instanceof Function) {
+        return this.submitMethod(this)
+      } else {
+        return this.submitMethod
+      }
     },
     iUrl() {
       // 更新或创建的url

src/router/common.js

@@ -7,7 +7,7 @@ import i18n from '@/i18n/i18n'
 export default [
   {
     path: '/ops/celery/task/:id/log/',
-    component: () => import('@/views/tasks/CeleryTaskLog'),
+    component: () => import('@/views/settings/Task/CeleryTaskLog'),
     name: 'CeleryTaskLog',
     hidden: true,
     meta: {
@@ -17,7 +17,7 @@ export default [
   },
   {
     path: '/ops/ansible/task/:id/log/',
-    component: () => import('@/views/tasks/CeleryTaskLog'),
+    component: () => import('@/views/settings/Task/CeleryTaskLog'),
     name: 'AnsibleTaskLog',
     hidden: true,
     meta: {
@@ -27,7 +27,7 @@ export default [
   },
   {
     path: '/ops/task/task/:id/log/',
-    component: () => import('@/views/tasks/CeleryTaskLog'),
+    component: () => import('@/views/settings/Task/CeleryTaskLog'),
     name: 'TaskLog',
     hidden: true,
     meta: {

src/router/settings/index.js

@@ -30,11 +30,76 @@ export default {
       }
     },
     {
-      path: '/settings/email',
-      name: 'Email',
-      component: () => import('@/views/settings/Email'),
+      path: '/settings/orgs',
+      component: empty,
+      redirect: '',
       meta: {
-        title: i18n.t('setting.Email'),
+        app: 'orgs',
+        resource: 'organization',
+        permissions: ['orgs.view_organization'],
+        licenseRequired: true
+      },
+      children: [
+        {
+          path: '',
+          component: () => import('@/views/settings/Org/OrganizationList'),
+          name: 'OrganizationList',
+          meta: {
+            title: i18n.t('xpack.Organization.OrganizationList'),
+            icon: 'organization-set',
+            permissions: ['orgs.view_organization']
+          }
+        },
+        {
+          path: 'create',
+          component: () => import('@/views/settings/Org/OrganizationCreateUpdate'),
+          name: 'OrganizationCreate',
+          hidden: true,
+          meta: {
+            title: i18n.t('xpack.Organization.OrganizationCreate'),
+            action: 'create',
+            permissions: ['orgs.add_organization']
+          }
+        },
+        {
+          path: ':id/update',
+          component: () => import('@/views/settings/Org/OrganizationCreateUpdate'),
+          name: 'OrganizationUpdate',
+          hidden: true,
+          meta: {
+            title: i18n.t('xpack.Organization.OrganizationUpdate'),
+            action: 'update',
+            permissions: ['orgs.change_organization']
+          }
+        },
+        {
+          path: ':id',
+          component: () => import('@/views/settings/Org/OrganizationDetail/index'),
+          name: 'OrganizationDetail',
+          hidden: true,
+          meta: {
+            title: i18n.t('xpack.Organization.OrganizationDetail'),
+            permissions: ['orgs.view_organization']
+          }
+        }
+      ]
+    },
+    {
+      path: '/settings/msg',
+      name: 'Msg',
+      component: () => import('@/views/settings/Msg'),
+      meta: {
+        title: i18n.t('setting.Message'),
+        icon: 'email-set',
+        permissions: ['settings.change_email']
+      }
+    },
+    {
+      path: '/settings/features',
+      name: 'Feature',
+      component: () => import('@/views/settings/Feature'),
+      meta: {
+        title: i18n.t('setting.Features'),
         icon: 'email-set',
         permissions: ['settings.change_email']
       }
@@ -49,37 +114,6 @@ export default {
         permissions: ['settings.change_auth']
       }
     },
-    {
-      path: '/settings/vault',
-      name: 'Vault',
-      component: () => import('@/views/settings/Vault'),
-      meta: {
-        title: i18n.t('setting.Vault'),
-        icon: 'security',
-        permissions: ['settings.change_vault']
-      }
-    },
-    {
-      path: '/settings/message',
-      name: 'SysMessageSub',
-      component: () => import('@/views/settings/Message'),
-      meta: {
-        title: i18n.t('setting.MessageSub'),
-        icon: 'remind',
-        permissions: ['settings.change_systemmsgsubscription']
-      }
-    },
-    {
-      path: '/settings/sms',
-      name: 'SMS',
-      component: () => import('@/views/settings/SMS'),
-      meta: {
-        title: i18n.t('setting.SMS'),
-        icon: 'short-message',
-        permissions: ['settings.change_sms'],
-        licenseRequired: true
-      }
-    },
     {
       path: '/settings/terminal',
       component: empty,
@@ -286,16 +320,6 @@ export default {
         permissions: ['settings.change_security']
       }
     },
-    {
-      path: '/settings/clean',
-      name: 'Clean',
-      component: () => import('@/views/settings/Clean'),
-      meta: {
-        title: i18n.t('setting.Cleaning'),
-        icon: 'clean',
-        permissions: ['settings.change_clean']
-      }
-    },
     {
       path: '/settings/interface',
       name: 'Interface',
@@ -307,61 +331,6 @@ export default {
         permissions: ['settings.change_interface']
       }
     },
-    {
-      path: '/settings/orgs',
-      component: empty,
-      redirect: '',
-      meta: {
-        app: 'orgs',
-        resource: 'organization',
-        permissions: ['orgs.view_organization'],
-        licenseRequired: true
-      },
-      children: [
-        {
-          path: '',
-          component: () => import('@/views/settings/Org/OrganizationList'),
-          name: 'OrganizationList',
-          meta: {
-            title: i18n.t('xpack.Organization.OrganizationList'),
-            icon: 'organization-set',
-            permissions: ['orgs.view_organization']
-          }
-        },
-        {
-          path: 'create',
-          component: () => import('@/views/settings/Org/OrganizationCreateUpdate'),
-          name: 'OrganizationCreate',
-          hidden: true,
-          meta: {
-            title: i18n.t('xpack.Organization.OrganizationCreate'),
-            action: 'create',
-            permissions: ['orgs.add_organization']
-          }
-        },
-        {
-          path: ':id/update',
-          component: () => import('@/views/settings/Org/OrganizationCreateUpdate'),
-          name: 'OrganizationUpdate',
-          hidden: true,
-          meta: {
-            title: i18n.t('xpack.Organization.OrganizationUpdate'),
-            action: 'update',
-            permissions: ['orgs.change_organization']
-          }
-        },
-        {
-          path: ':id',
-          component: () => import('@/views/settings/Org/OrganizationDetail/index'),
-          name: 'OrganizationDetail',
-          hidden: true,
-          meta: {
-            title: i18n.t('xpack.Organization.OrganizationDetail'),
-            permissions: ['orgs.view_organization']
-          }
-        }
-      ]
-    },
 
     {
       path: '/settings/tools',
@@ -385,7 +354,7 @@ export default {
         {
           path: '',
           name: 'TaskList',
-          component: () => import('@/views/tasks/TaskList'),
+          component: () => import('@/views/settings/Task/index.vue'),
           meta: {
             title: i18n.t('route.TaskList'),
             permissions: ['ops.view_celerytask']
@@ -393,7 +362,7 @@ export default {
         },
         {
           path: ':id',
-          component: () => import('@/views/tasks/TaskDetail'),
+          component: () => import('@/views/settings/Task/TaskDetail'),
           name: 'TaskDetail',
           hidden: true,
           meta: {

src/views/settings/Auth/Ldap/ImportDialog.vue

@@ -43,9 +43,9 @@
 <script>
 import store from '@/store'
 import { DEFAULT_ORG_ID, SYSTEM_ORG_ID } from '@/utils/org'
-import ListTable from '@/components/Table/ListTable'
-import Dialog from '@/components/Dialog'
-import Select2 from '@/components/Form/FormFields/Select2'
+import ListTable from '@/components/Table/ListTable/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
 import { importLdapUser, refreshLdapUserCache, startLdapUserCache } from '@/api/settings'
 import { getErrorResponseMsg } from '@/utils/common'
 

src/views/settings/Auth/Ldap/SyncSettingDialog.vue

@@ -20,7 +20,7 @@
 <script>
 import { GenericCreateUpdateForm } from '@/layout/components'
 import { CronTab, Dialog } from '@/components'
-import Select2 from '@/components/Form/FormFields/Select2'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
 import { Required } from '@/components/Form/DataForm/rules'
 
 export default {

src/views/settings/Auth/Ldap/TestLoginDialog.vue

@@ -1,12 +1,12 @@
 <template>
   <Dialog
-    v-bind="$attrs"
-    :title="$tc('setting.testLdapLoginTitle') "
     :destroy-on-close="true"
     :loading-status="testLdapLoginStatus"
     :show-cancel="false"
-    v-on="$listeners"
+    :title="$tc('setting.testLdapLoginTitle') "
+    v-bind="$attrs"
     @confirm="testUserLoginClick()"
+    v-on="$listeners"
   >
     <el-form
       :model="userLoginForm"
@@ -23,9 +23,9 @@
       <el-form-item :label="$tc('setting.password')">
         <el-input
           v-model="userLoginForm.password"
-          type="password"
           :placeholder="$tc('setting.passwordPlaceholder')"
           autocomplete="off"
+          type="password"
         />
       </el-form-item>
     </el-form>
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
+import Dialog from '@/components/Dialog/index.vue'
 import { testLdapUserLogin } from '@/api/settings'
 
 export default {

src/views/settings/Auth/Ldap/index.vue

@@ -7,11 +7,11 @@
   </IBox>
 </template>
 <script>
-import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
 import { testLdapSetting } from '@/api/settings'
-import ImportDialog from './ImportDialog'
-import TestLoginDialog from './TestLoginDialog'
-import SyncSettingDialog from './SyncSettingDialog'
+import ImportDialog from './ImportDialog.vue'
+import TestLoginDialog from './TestLoginDialog.vue'
+import SyncSettingDialog from './SyncSettingDialog.vue'
 import { IBox } from '@/components'
 import rules, { JsonRequired } from '@/components/Form/DataForm/rules'
 import { JsonEditor, UpdateToken } from '@/components/Form/FormFields'

src/views/settings/Auth/index.vue

@@ -8,7 +8,7 @@
 
 <script>
 import TabPage from '@/layout/components/TabPage'
-import LDAP from '../Ldap'
+import LDAP from './Ldap'
 import Base from './Base'
 import Basic from './Basic'
 import CAS from './CAS'

src/views/settings/Basic/Common.vue

@@ -0,0 +1,62 @@
+<template>
+  <IBox>
+    <GenericCreateUpdateForm
+      :create-success-next-route="successUrl"
+      :has-detail-in-msg="false"
+      :submit-method="submitMethod"
+      :update-success-next-route="successUrl"
+      v-bind="$data"
+    />
+  </IBox>
+</template>
+
+<script>
+import { IBox } from '@/components'
+import rules from '@/components/Form/DataForm/rules'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
+
+export default {
+  name: 'Basic',
+  components: {
+    GenericCreateUpdateForm,
+    IBox
+  },
+  data() {
+    return {
+      fields: [
+        [
+          this.$t('common.BasicInfo'), [
+            'SITE_URL', // 'USER_GUIDE_URL',
+            'GLOBAL_ORG_DISPLAY_NAME'
+          ]
+        ]
+      ],
+      fieldsMeta: {
+        SITE_URL: {
+          rules: [rules.Required]
+        },
+        GLOBAL_ORG_DISPLAY_NAME: {
+          hidden: () => {
+            return !this.$store.getters.hasValidLicense
+          }
+        },
+        TICKETS_ENABLED: {
+          hidden: () => {
+            return !this.$store.getters.hasValidLicense
+          }
+        }
+      },
+      successUrl: { name: 'Basic' },
+      url: '/api/v1/settings/setting/?category=basic'
+    }
+  },
+  methods: {
+    submitMethod() {
+      return 'patch'
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/settings/Basic/index.vue

@@ -1,68 +1,32 @@
 <template>
-  <GenericCreateUpdatePage
-    v-bind="$data"
-    :update-success-next-route="successUrl"
-    :create-success-next-route="successUrl"
-    :has-detail-in-msg="false"
-    :submit-method="submitMethod"
-  />
+  <TabPage :active-menu.sync="activeMenu" :submenu="submenu">
+    <keep-alive>
+      <component :is="activeMenu" />
+    </keep-alive>
+  </TabPage>
 </template>
 
 <script>
-import { GenericCreateUpdatePage } from '@/layout/components'
-import rules from '@/components/Form/DataForm/rules'
-import Announcement from './announcement'
+import TabPage from '@/layout/components/TabPage/index.vue'
+import Basic from './Common.vue'
 
 export default {
-  name: 'Basic',
-  components: {
-    GenericCreateUpdatePage
-  },
+  name: 'Index',
+  components: { TabPage, Basic },
   data() {
     return {
-      fields: [
-        [
-          this.$t('common.BasicInfo'), [
-            'SITE_URL', // 'USER_GUIDE_URL',
-            'GLOBAL_ORG_DISPLAY_NAME'
-          ]
-        ],
-        [
-          this.$t('setting.Feature'), [
-            'TICKETS_ENABLED',
-            'ANNOUNCEMENT_ENABLED'
-          ]
-        ]
-      ],
-      fieldsMeta: {
-        SITE_URL: {
-          rules: [rules.Required]
-        },
-        GLOBAL_ORG_DISPLAY_NAME: {
-          hidden: () => {
-            return !this.$store.getters.hasValidLicense
-          }
-        },
-        TICKETS_ENABLED: {
-          hidden: () => {
-            return !this.$store.getters.hasValidLicense
-          }
-        },
-        ANNOUNCEMENT_ENABLED: {
-          component: Announcement
+      activeMenu: 'Basic',
+      submenu: [
+        {
+          title: this.$t('common.Basic'),
+          name: 'Basic'
         }
-      },
-      successUrl: { name: 'Basic' },
-      url: '/api/v1/settings/setting/?category=basic'
-    }
-  },
-  methods: {
-    submitMethod() {
-      return 'patch'
+      ]
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
+
 </style>

src/views/settings/Feature/Announcement.vue

@@ -1,29 +1,18 @@
 <template>
-  <div>
-    <el-button v-if="!value" type="default" size="mini" @click="visible=true">{{ $t('setting.Enable') }}</el-button>
-    <el-button v-else type="primary" size="mini" @click="visible=true">{{ $t('setting.Setting') }}</el-button>
-    <Dialog
-      v-if="visible"
-      :visible.sync="visible"
-      :title="title"
-      :destroy-on-close="true"
-      :show-cancel="false"
-      :show-confirm="false"
-      width="70%"
-      v-on="$listeners"
-    >
-      <GenericCreateUpdateForm v-bind="config" @submitSuccess="submitSuccess" />
-    </Dialog>
-  </div>
+  <IBox>
+    <GenericCreateUpdateForm v-bind="config" @submitSuccess="submitSuccess" />
+  </IBox>
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
 import { GenericCreateUpdateForm } from '@/layout/components'
+import { IBox } from '@/components'
+
 export default {
   name: 'Announcement',
   components: {
-    Dialog, GenericCreateUpdateForm
+    GenericCreateUpdateForm,
+    IBox
   },
   props: {
     value: {

src/views/settings/Feature/Basic.vue

@@ -0,0 +1,50 @@
+<template>
+  <IBox>
+    <GenericCreateUpdateForm
+      :create-success-next-route="successUrl"
+      :has-detail-in-msg="false"
+      :submit-method="submitMethod"
+      :update-success-next-route="successUrl"
+      v-bind="$data"
+    />
+  </IBox>
+</template>
+
+<script>
+import { IBox } from '@/components'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
+
+export default {
+  name: 'Basic',
+  components: {
+    GenericCreateUpdateForm,
+    IBox
+  },
+  data() {
+    return {
+      fields: [
+        [
+          this.$t('setting.Basic'), [
+            'TICKETS_ENABLED'
+          ]
+        ]
+      ],
+      fieldsMeta: {
+        TICKETS_ENABLED: {
+          disabled: this.$store.getters.hasValidLicense
+        }
+      },
+      successUrl: { name: 'Basic' },
+      url: '/api/v1/settings/setting/?category=basic'
+    }
+  },
+  methods: {
+    submitMethod() {
+      return 'patch'
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/settings/Feature/Vault.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-alert type="warning" v-html="helpText" />
+    <el-alert type="success" v-html="helpText" />
     <IBox>
       <GenericCreateUpdateForm v-bind="$data" />
     </IBox>
@@ -9,7 +9,7 @@
 
 <script>
 import { GenericCreateUpdateForm } from '@/layout/components'
-import IBox from '@/components/IBox'
+import IBox from '@/components/IBox/index.vue'
 import { openTaskPage } from '@/utils/jms'
 import store from '@/store'
 

src/views/settings/Feature/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <TabPage :active-menu.sync="activeMenu" :submenu="submenu">
+    <keep-alive>
+      <component :is="activeMenu" />
+    </keep-alive>
+  </TabPage>
+</template>
+
+<script>
+import TabPage from '@/layout/components/TabPage/index.vue'
+import Announcement from './Announcement.vue'
+import Basic from './Basic.vue'
+import Vault from './Vault.vue'
+
+export default {
+  name: 'Feature',
+  components: { TabPage, Basic, Announcement, Vault },
+  data() {
+    return {
+      activeMenu: 'Basic',
+      submenu: [
+        {
+          title: this.$t('common.Basic'),
+          name: 'Basic'
+        },
+        {
+          title: this.$t('setting.Announcement'),
+          name: 'Announcement'
+        },
+        {
+          title: this.$t('setting.Vault'),
+          name: 'Vault',
+          hidden: !this.$hasPerm('settings.change_vault')
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/views/settings/Msg/Email/EmailContent.vue

@@ -3,10 +3,10 @@
     <el-button size="mini" type="primary" @click="visible = !visible"> {{ $t("setting.Setting") }} </el-button>
     <Dialog
       v-if="visible"
-      :title="$tc('setting.CreateUserSetting')"
-      :visible.sync="visible"
       :show-cancel="false"
       :show-confirm="false"
+      :title="$tc('setting.CreateUserSetting')"
+      :visible.sync="visible"
       width="70%"
       @confirm="onConfirm()"
     >
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
 import { Dialog } from '@/components'
 
 export default {

src/views/settings/Msg/Email/SMTP.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
 import { Dialog } from '@/components'
 import { UpdateToken } from '@/components/Form/FormFields'
 

src/views/settings/Msg/Email/index.vue

@@ -1,22 +1,27 @@
 <template>
-  <GenericCreateUpdatePage
-    v-bind="$data"
-    :update-success-next-route="successUrl"
-    :create-success-next-route="successUrl"
-  />
+  <IBox>
+    <GenericCreateUpdateForm
+      :create-success-next-route="successUrl"
+      :update-success-next-route="successUrl"
+      v-bind="$data"
+    />
+  </IBox>
+
 </template>
 
 <script>
-import { GenericCreateUpdatePage } from '@/layout/components'
+import { IBox } from '@/components'
+import { GenericCreateUpdateForm } from '@/layout/components'
 import { testEmailSetting } from '@/api/settings'
-import EmailContent from './EmailContent'
-import SMTP from './SMTP'
+import EmailContent from './EmailContent.vue'
+import SMTP from './SMTP.vue'
 import rules from '@/components/Form/DataForm/rules'
 
 export default {
   name: 'Email',
   components: {
-    GenericCreateUpdatePage
+    GenericCreateUpdateForm,
+    IBox
   },
   data() {
     const vm = this
@@ -43,7 +48,7 @@ export default {
         [
           this.$t('common.Other'),
           [
-            'EMAIL_RECIPIENT'
+            'EMAIL_RECIPIENT', 'EMAIL_SUFFIX'
           ]
         ]
       ],

src/views/settings/Msg/SMS/Base.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <el-button type="primary" size="mini" @click="visible=true">{{ $t('setting.Setting') }}</el-button>
+    <el-button size="mini" type="primary" @click="visible=true">{{ $t('setting.Setting') }}</el-button>
     <Dialog
       v-if="visible"
-      :visible.sync="visible"
-      :title="title"
       :destroy-on-close="true"
       :show-cancel="false"
       :show-confirm="false"
+      :title="title"
+      :visible.sync="visible"
       width="70%"
-      v-on="$listeners"
       @confirm="onConfirm()"
+      v-on="$listeners"
     >
       <GenericCreateUpdateForm ref="form" v-bind="iConfig" @submitSuccess="submitSuccess" />
     </Dialog>
@@ -18,8 +18,9 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import Dialog from '@/components/Dialog/index.vue'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
+
 export default {
   name: 'Base',
   components: {

src/views/settings/Msg/SMS/CMPP2.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import BaseSMS from './Base'
+import BaseSMS from './Base.vue'
 import { PhoneInput, UpdateToken } from '@/components/Form/FormFields'
 
 export default {

src/views/settings/Msg/SMS/SMSAlibaba.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import BaseSMS from './Base'
+import BaseSMS from './Base.vue'
 import { PhoneInput, UpdateToken } from '@/components/Form/FormFields'
 
 export default {

src/views/settings/Msg/SMS/SMSCustom.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import BaseSMS from './Base'
+import BaseSMS from './Base.vue'
 import { JsonEditor, PhoneInput } from '@/components/Form/FormFields'
 
 export default {

src/views/settings/Msg/SMS/SMSHuawei.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import BaseSMS from './Base'
+import BaseSMS from './Base.vue'
 import { PhoneInput, UpdateToken } from '@/components/Form/FormFields'
 
 export default {

src/views/settings/Msg/SMS/SMSTencent.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import BaseSMS from './Base'
+import BaseSMS from './Base.vue'
 import { PhoneInput, UpdateToken } from '@/components/Form/FormFields'
 
 export default {

src/views/settings/Msg/SMS/index.vue

@@ -1,19 +1,23 @@
 <template>
-  <GenericCreateUpdatePage v-bind="$data" class="form" />
+  <IBox>
+    <GenericCreateUpdateForm class="form" v-bind="$data" />
+  </IBox>
 </template>
 
 <script>
-import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import SMSAlibaba from './SMSAlibaba'
-import SMSTencent from './SMSTencent'
-import SMSHuawei from './SMSHuawei'
-import SMSCustom from './SMSCustom'
-import CMPP2 from './CMPP2'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
+import SMSAlibaba from './SMSAlibaba.vue'
+import SMSTencent from './SMSTencent.vue'
+import SMSHuawei from './SMSHuawei.vue'
+import SMSCustom from './SMSCustom.vue'
+import CMPP2 from './CMPP2.vue'
+import { IBox } from '@/components'
 
 export default {
   name: 'Auth',
   components: {
-    GenericCreateUpdatePage
+    GenericCreateUpdateForm,
+    IBox
   },
   data() {
     return {

src/views/settings/Msg/Subscribe/SelectDialog.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
+import Dialog from '@/components/Dialog/index.vue'
 import { krryPaging } from 'krry-transfer'
 import { getUserList } from '@/api/users'
 

src/views/settings/Msg/Subscribe/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <Page v-bind="$attrs">
+  <IBox v-bind="$attrs">
     <div>
       <el-table
         :data="tableData"
-        row-key="id"
-        default-expand-all
-        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
         :span-method="spanMethod"
         :stripe="true"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        default-expand-all
+        row-key="id"
       >
         <el-table-column :label="$tc('notifications.MessageType')" width="230">
           <template v-slot="scope">
@@ -22,7 +22,7 @@
                 v-model="scope.row.receiveBackends[header.name]"
                 @change="onCheckReceiveBackend(scope.row)"
               />
-              <el-checkbox v-else :value="true" :disabled="true" />
+              <el-checkbox v-else :disabled="true" :value="true" />
             </span>
           </template>
         </el-table-column>
@@ -44,23 +44,23 @@
 
       <SelectDialog
         v-if="dialogVisible"
-        :visible.sync="dialogVisible"
-        :title="$tc('notifications.ChangeReceiver')"
         :selected-users="dialogSelectedUsers"
-        @submit="onDialogSelectSubmit"
+        :title="$tc('notifications.ChangeReceiver')"
+        :visible.sync="dialogVisible"
         @cancel="dialogVisible=false"
+        @submit="onDialogSelectSubmit"
       />
     </div>
-  </Page>
+  </IBox>
 </template>
 
 <script>
-import Page from '@/layout/components/Page'
-import SelectDialog from './SelectDialog'
+import SelectDialog from './SelectDialog.vue'
+import IBox from '@/components/IBox/index.vue'
 
 export default {
   components: {
-    Page,
+    IBox,
     SelectDialog
   },
   data() {

src/views/settings/Msg/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <TabPage :active-menu.sync="activeMenu" :submenu="submenu">
+    <keep-alive>
+      <component :is="activeMenu" />
+    </keep-alive>
+  </TabPage>
+</template>
+
+<script>
+import TabPage from '@/layout/components/TabPage/index.vue'
+import Email from './Email/index.vue'
+import Subscribe from './Subscribe/index.vue'
+import SMS from './SMS/index.vue'
+
+export default {
+  name: 'Index',
+  components: { TabPage, Email, Subscribe, SMS },
+  data() {
+    return {
+      activeMenu: 'Email',
+      submenu: [
+        {
+          title: this.$t('setting.Email'),
+          name: 'Email',
+          hidden: !this.$hasPerm('settings.change_email')
+        },
+        {
+          title: this.$t('setting.SMS'),
+          name: 'SMS',
+          hidden: !this.$hasPerm('settings.change_sms')
+        },
+        {
+          title: this.$t('setting.MsgSubscribe'),
+          name: 'Subscribe',
+          hidden: !this.$hasPerm('settings.change_systemmsgsubscription')
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/views/settings/Other.vue

@@ -31,12 +31,6 @@ export default {
             'EMAIL_SUFFIX'
           ]
         ],
-        [
-          this.$t('setting.OTP'),
-          [
-            'OTP_ISSUER_NAME', 'OTP_VALID_WINDOW'
-          ]
-        ],
         [
           this.$t('setting.Perm'),
           [

src/views/settings/Security/Auth.vue

@@ -0,0 +1,85 @@
+<template>
+  <IBox>
+    <GenericCreateUpdateForm submit-method="patch" v-bind="config" />
+  </IBox>
+</template>
+
+<script>
+import IBox from '@/components/IBox/index.vue'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
+
+export default {
+  name: 'Auth',
+  components: { GenericCreateUpdateForm, IBox },
+  data() {
+    return {
+      config: {
+        url: '/api/v1/settings/setting/?category=security',
+        fields: [
+          [
+            this.$t('common.Basic'),
+            [
+              'SECURITY_LOGIN_CAPTCHA_ENABLED',
+              'SECURITY_LOGIN_CHALLENGE_ENABLED',
+              'SECURITY_UNCOMMON_USERS_TTL',
+              'SECURITY_CHECK_DIFFERENT_CITY_LOGIN'
+            ]
+          ],
+          [
+            'MFA',
+            [
+              'SECURITY_MFA_AUTH',
+              'SECURITY_MFA_IN_LOGIN_PAGE',
+              'SECURITY_MFA_AUTH_ENABLED_FOR_THIRD_PARTY',
+              'SECURITY_MFA_VERIFY_TTL',
+              'OTP_ISSUER_NAME', 'OTP_VALID_WINDOW'
+            ]
+          ]
+        ],
+        fieldsMeta: {
+          SECURITY_LOGIN_CHALLENGE_ENABLED: {
+            on: {
+              change: ([val], updateForm) => {
+                if (val) {
+                  updateForm({ SECURITY_MFA_IN_LOGIN_PAGE: false })
+                  updateForm({ SECURITY_LOGIN_CAPTCHA_ENABLED: false })
+                }
+              }
+            }
+          },
+          SECURITY_MFA_IN_LOGIN_PAGE: {
+            hidden: (form) => {
+              return form['SECURITY_MFA_AUTH'] !== 1 || !this.$store.getters.hasValidLicense
+            },
+            on: {
+              change: ([val], updateForm) => {
+                if (val) {
+                  updateForm({ SECURITY_LOGIN_CHALLENGE_ENABLED: false })
+                  updateForm({ SECURITY_LOGIN_CAPTCHA_ENABLED: false })
+                }
+              }
+            }
+          },
+          SECURITY_LOGIN_CAPTCHA_ENABLED: {
+            on: {
+              change: ([val], updateForm) => {
+                if (val) {
+                  updateForm({ SECURITY_LOGIN_CHALLENGE_ENABLED: false })
+                  updateForm({ SECURITY_MFA_IN_LOGIN_PAGE: false })
+                }
+              }
+            }
+          },
+          VERIFY_CODE_TTL: {
+            label: this.$t('setting.ExpirationTimeout')
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Security/AuthLimit.vue

@@ -1,40 +1,26 @@
 <template>
-  <div>
-    <el-button size="mini" type="primary" @click="visible = !visible">
-      {{ $t('setting.Setting') }}
-    </el-button>
-    <Dialog
-      :title="$tc('setting.AuthLimit')"
-      :visible.sync="visible"
-      :destroy-on-close="true"
-      :show-cancel="false"
-      :show-confirm="false"
-      width="70%"
-      top="10%"
-      @confirm="onConfirm()"
-    >
-      <GenericCreateUpdateForm
-        v-bind="$data"
-        :fields="fields"
-        :url="url"
-        :fields-meta="fieldsMeta"
-        :submit-method="submitMethod"
-        :has-detail-in-msg="false"
-      />
-    </Dialog>
-  </div>
+  <IBox>
+    <GenericCreateUpdateForm
+      :fields="fields"
+      :fields-meta="fieldsMeta"
+      :has-detail-in-msg="false"
+      :submit-method="submitMethod"
+      :url="url"
+      v-bind="$data"
+    />
+  </IBox>
 
 </template>
 
 <script>
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
-import { Dialog } from '@/components'
+import IBox from '@/components/IBox/index.vue'
 
 export default {
   name: 'EmailContent',
   components: {
-    GenericCreateUpdateForm,
-    Dialog
+    IBox,
+    GenericCreateUpdateForm
   },
   data() {
     return {

src/views/settings/Security/Basic.vue

@@ -0,0 +1,39 @@
+<template>
+  <IBox>
+    <GenericCreateUpdateForm submit-method="patch" v-bind="config" />
+  </IBox>
+</template>
+
+<script>
+import IBox from '@/components/IBox/index.vue'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
+
+export default {
+  name: 'Basic',
+  components: { GenericCreateUpdateForm, IBox },
+  data() {
+    return {
+      config: {
+        url: '/api/v1/settings/setting/?category=security',
+        hasDetailInMsg: false,
+        fields: [
+          [
+            this.$t('common.Basic'),
+            [
+              'SECURITY_COMMAND_EXECUTION',
+              'SECURITY_COMMAND_BLACKLIST',
+              'SECURITY_SERVICE_ACCOUNT_REGISTRATION'
+            ]
+          ]
+        ],
+        fieldsMeta: {
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Security/Password.vue

@@ -0,0 +1,61 @@
+<template>
+  <IBox>
+    <GenericCreateUpdateForm
+      :fields="fields"
+      :fields-meta="fieldsMeta"
+      :has-detail-in-msg="false"
+      :submit-method="submitMethod"
+      :url="url"
+    />
+  </IBox>
+
+</template>
+
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import IBox from '@/components/IBox/index.vue'
+
+export default {
+  name: 'EmailContent',
+  components: {
+    IBox,
+    GenericCreateUpdateForm
+  },
+  data() {
+    return {
+      visible: false,
+      fields: [
+        [
+          this.$t('common.Basic'),
+          [
+            'SECURITY_PASSWORD_EXPIRATION_TIME',
+            'OLD_PASSWORD_HISTORY_LIMIT_COUNT'
+          ]
+        ],
+        [
+          this.$t('setting.PasswordRule'),
+          [
+            'SECURITY_PASSWORD_MIN_LENGTH', 'SECURITY_ADMIN_USER_PASSWORD_MIN_LENGTH',
+            'SECURITY_PASSWORD_UPPER_CASE', 'SECURITY_PASSWORD_LOWER_CASE',
+            'SECURITY_PASSWORD_NUMBER', 'SECURITY_PASSWORD_SPECIAL_CHAR'
+          ]
+        ]
+      ],
+      successUrl: { name: 'Settings', params: { activeMenu: 'EmailContent' }},
+      fieldsMeta: {},
+      url: '/api/v1/settings/setting/?category=security'
+    }
+  },
+  methods: {
+    submitMethod() {
+      return 'patch'
+    },
+    onConfirm() {
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Security/PasswordRule.vue

@@ -1,63 +0,0 @@
-<template>
-  <div>
-    <el-button size="mini" type="primary" @click="visible = !visible">
-      {{ $t('setting.Setting') }}
-    </el-button>
-    <Dialog
-      :title="$tc('setting.PasswordCheckRule')"
-      :visible.sync="visible"
-      :destroy-on-close="true"
-      :show-cancel="false"
-      :show-confirm="false"
-      width="70%"
-      top="10%"
-      @confirm="onConfirm()"
-    >
-      <GenericCreateUpdateForm
-        :fields="fields"
-        :url="url"
-        :fields-meta="fieldsMeta"
-        :submit-method="submitMethod"
-        :has-detail-in-msg="false"
-      />
-    </Dialog>
-  </div>
-
-</template>
-
-<script>
-import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
-import { Dialog } from '@/components'
-
-export default {
-  name: 'EmailContent',
-  components: {
-    GenericCreateUpdateForm,
-    Dialog
-  },
-  data() {
-    return {
-      visible: false,
-      fields: [
-        'SECURITY_PASSWORD_MIN_LENGTH', 'SECURITY_ADMIN_USER_PASSWORD_MIN_LENGTH', 'SECURITY_PASSWORD_UPPER_CASE',
-        'SECURITY_PASSWORD_LOWER_CASE', 'SECURITY_PASSWORD_NUMBER', 'SECURITY_PASSWORD_SPECIAL_CHAR',
-        'OLD_PASSWORD_HISTORY_LIMIT_COUNT'
-      ],
-      successUrl: { name: 'Settings', params: { activeMenu: 'EmailContent' }},
-      fieldsMeta: {},
-      url: '/api/v1/settings/setting/?category=security'
-    }
-  },
-  methods: {
-    submitMethod() {
-      return 'patch'
-    },
-    onConfirm() {
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/settings/Security/Session.vue

@@ -0,0 +1,40 @@
+<template>
+  <IBox>
+    <GenericCreateUpdateForm submit-method="patch" v-bind="config" />
+  </IBox>
+</template>
+
+<script>
+import IBox from '@/components/IBox/index.vue'
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
+
+export default {
+  name: 'SessionSecurity',
+  components: { GenericCreateUpdateForm, IBox },
+  data() {
+    return {
+      config: {
+        url: '/api/v1/settings/setting/?category=security',
+        hasDetailInMsg: false,
+        fields: [
+          [
+            this.$t('common.Basic'),
+            [
+              'SECURITY_WATERMARK_ENABLED',
+              'SECURITY_SESSION_SHARE',
+              'SECURITY_MAX_IDLE_TIME',
+              'SECURITY_MAX_SESSION_TIME'
+            ]
+          ]
+        ],
+        fieldsMeta: {
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Security/index.vue

@@ -1,110 +1,52 @@
 <template>
-  <GenericCreateUpdatePage
-    v-bind="$data"
-    :submit-method="submitMethod"
-    :has-detail-in-msg="false"
-  />
+  <TabPage :active-menu.sync="activeMenu" :submenu="submenu">
+    <keep-alive>
+      <component :is="activeMenu" />
+    </keep-alive>
+  </TabPage>
 </template>
+
 <script>
-import { GenericCreateUpdatePage } from '@/layout/components'
-import PasswordRule from './PasswordRule'
-import AuthLimit from './AuthLimit'
+import TabPage from '@/layout/components/TabPage/index.vue'
+import Basic from './Basic.vue'
+import Auth from './Auth.vue'
+import Password from './Password.vue'
+import AuthLimit from './AuthLimit.vue'
+import Session from './Session.vue'
 
 export default {
-  name: 'Security',
-  components: {
-    GenericCreateUpdatePage
-  },
+  name: 'Index',
+  components: { TabPage, Basic, Auth, Password, AuthLimit, Session },
   data() {
     return {
-      fields: [
-        [
-          this.$t('common.Basic'),
-          [
-            'SECURITY_COMMAND_EXECUTION',
-            'SECURITY_COMMAND_BLACKLIST',
-            'SECURITY_SERVICE_ACCOUNT_REGISTRATION',
-            'SECURITY_MAX_IDLE_TIME',
-            'SECURITY_MAX_SESSION_TIME',
-            'SECURITY_WATERMARK_ENABLED',
-            'SECURITY_SESSION_SHARE'
-          ]
-        ],
-        [
-          this.$t('common.Auth'),
-          [
-            'SECURITY_MFA_AUTH',
-            'SECURITY_MFA_IN_LOGIN_PAGE',
-            'SECURITY_MFA_AUTH_ENABLED_FOR_THIRD_PARTY',
-            'SECURITY_LOGIN_CHALLENGE_ENABLED',
-            'SECURITY_LOGIN_CAPTCHA_ENABLED',
-            'SECURITY_PASSWORD_EXPIRATION_TIME',
-            'VERIFY_CODE_TTL',
-            'SECURITY_MFA_VERIFY_TTL',
-            'SECURITY_UNCOMMON_USERS_TTL',
-            'SECURITY_CHECK_DIFFERENT_CITY_LOGIN',
-            'AuthLimit',
-            'PasswordRule'
-          ]
-        ]
-      ],
-      fieldsMeta: {
-        SECURITY_LOGIN_CHALLENGE_ENABLED: {
-          on: {
-            change: ([val], updateForm) => {
-              if (val) {
-                updateForm({ SECURITY_MFA_IN_LOGIN_PAGE: false })
-                updateForm({ SECURITY_LOGIN_CAPTCHA_ENABLED: false })
-              }
-            }
-          }
+      activeMenu: 'Basic',
+      submenu: [
+        {
+          title: this.$t('setting.Basic'),
+          name: 'Basic'
         },
-        SECURITY_MFA_IN_LOGIN_PAGE: {
-          hidden: (form) => {
-            return form['SECURITY_MFA_AUTH'] !== 1 || !this.$store.getters.hasValidLicense
-          },
-          on: {
-            change: ([val], updateForm) => {
-              if (val) {
-                updateForm({ SECURITY_LOGIN_CHALLENGE_ENABLED: false })
-                updateForm({ SECURITY_LOGIN_CAPTCHA_ENABLED: false })
-              }
-            }
-          }
+        {
+          title: this.$t('setting.AuthSecurity'),
+          name: 'Auth'
         },
-        SECURITY_LOGIN_CAPTCHA_ENABLED: {
-          on: {
-            change: ([val], updateForm) => {
-              if (val) {
-                updateForm({ SECURITY_LOGIN_CHALLENGE_ENABLED: false })
-                updateForm({ SECURITY_MFA_IN_LOGIN_PAGE: false })
-              }
-            }
-          }
+        {
+          title: this.$t('setting.AuthLimit'),
+          name: 'AuthLimit'
         },
-        VERIFY_CODE_TTL: {
-          label: this.$t('setting.ExpirationTimeout')
+        {
+          title: this.$t('setting.PasswordSecurity'),
+          name: 'Password'
         },
-        PasswordRule: {
-          label: this.$t('setting.PasswordCheckRule'),
-          component: PasswordRule
-        },
-        AuthLimit: {
-          label: this.$t('setting.AuthLimit'),
-          component: AuthLimit
+        {
+          title: this.$t('setting.SessionSecurity'),
+          name: 'Session'
         }
-      },
-      url: '/api/v1/settings/setting/?category=security'
-    }
-  },
-  methods: {
-    submitMethod() {
-      return 'patch'
+      ]
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
 
 </style>

src/views/settings/Task/Clean.vue

@@ -1,20 +1,17 @@
 <template>
-  <Page :help-message="helpText">
-    <IBox>
-      <GenericCreateUpdateForm v-bind="$data" />
-    </IBox>
-  </Page>
+  <IBox>
+    <GenericCreateUpdateForm v-bind="$data" />
+  </IBox>
 </template>
 
 <script>
 import { CronTab, IBox } from '@/components'
-import { GenericCreateUpdateForm, Page } from '@/layout/components'
+import { GenericCreateUpdateForm } from '@/layout/components'
 
 export default {
   name: 'Senior',
   components: {
     IBox,
-    Page,
     GenericCreateUpdateForm
   },
   data() {
@@ -26,8 +23,9 @@ export default {
         [
           this.$t('common.Logging'),
           [
-            'LOGIN_LOG_KEEP_DAYS', 'TASK_LOG_KEEP_DAYS', 'OPERATE_LOG_KEEP_DAYS',
-            'FTP_LOG_KEEP_DAYS', 'TERMINAL_SESSION_KEEP_DURATION', 'ACTIVITY_LOG_KEEP_DAYS'
+            'LOGIN_LOG_KEEP_DAYS', 'TASK_LOG_KEEP_DAYS',
+            'OPERATE_LOG_KEEP_DAYS', 'FTP_LOG_KEEP_DAYS',
+            'TERMINAL_SESSION_KEEP_DURATION', 'ACTIVITY_LOG_KEEP_DAYS'
           ]
         ],
         [

src/views/settings/Task/TaskDetail/TaskDetail.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script type="text/jsx">
-import DetailCard from '@/components/Cards/DetailCard'
+import DetailCard from '@/components/Cards/DetailCard/index.vue'
 
 export default {
   name: 'TaskDetail',

src/views/settings/Task/TaskDetail/TaskHistory.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script type="text/jsx">
-import ListTable from '@/components/Table/ListTable'
+import ListTable from '@/components/Table/ListTable/index.vue'
 import { openTaskPage } from '@/utils/jms'
 
 export default {

src/views/settings/Task/TaskDetail/index.vue

@@ -1,8 +1,8 @@
 <template>
   <GenericDetailPage
-    :title="getTitle"
-    :object.sync="taskDetail"
     :active-menu.sync="config.activeMenu"
+    :object.sync="taskDetail"
+    :title="getTitle"
     v-bind="config"
     v-on="$listeners"
   >
@@ -14,9 +14,9 @@
 
 <script>
 import { GenericDetailPage, TabPage } from '@/layout/components'
-import TaskDetail from './TaskDetail'
-import TaskHistory from './TaskHistory'
-import CeleryTaskLog from '../CeleryTaskLog'
+import TaskDetail from './TaskDetail.vue'
+import TaskHistory from './TaskHistory.vue'
+import CeleryTaskLog from '../CeleryTaskLog.vue'
 
 export default {
   components: {

src/views/settings/Task/TaskList.vue

@@ -1,15 +1,15 @@
 <template>
-  <GenericListPage :header-actions="headerActions" :table-config="tableConfig" />
+  <ListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script type="text/jsx">
-import { GenericListPage } from '@/layout/components'
 import { ChoicesFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { BASE_URL } from '@/utils/common'
+import ListTable from '@/components/Table/ListTable/index.vue'
 
 export default {
   components: {
-    GenericListPage
+    ListTable
   },
   data() {
     return {

src/views/settings/Task/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <TabPage :active-menu.sync="activeMenu" :submenu="submenu">
+    <keep-alive>
+      <component :is="activeMenu" />
+    </keep-alive>
+  </TabPage>
+</template>
+
+<script>
+import TabPage from '@/layout/components/TabPage/index.vue'
+import TaskList from './TaskList.vue'
+import Clean from './Clean.vue'
+
+export default {
+  name: 'Index',
+  components: { TabPage, TaskList, Clean },
+  data() {
+    return {
+      activeMenu: 'TaskList',
+      submenu: [
+        {
+          title: this.$t('setting.TaskList'),
+          name: 'TaskList'
+        },
+        {
+          title: this.$t('setting.Cleaning'),
+          name: 'Clean',
+          hidden: !this.$hasPerm('settings.change_clean')
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+
+</style>

src/views/settings/Tool/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <TabPage :submenu="submenu" :active-menu.sync="activeMenu">
+  <TabPage :active-menu.sync="activeMenu" :submenu="submenu">
     <div>
-      <el-alert v-if="currentTime" :closable="false" type="info">
+      <el-alert v-if="currentTime" :closable="false" type="success">
         {{ `${this.$t('setting.ServerTime')}: ${currentTime}` }}
       </el-alert>
       <keep-alive>

src/views/settings/Vault/Base.vue

@@ -1,47 +0,0 @@
-<template>
-  <IBox>
-    <GenericCreateUpdateForm v-bind="iConfig" @submitSuccess="submitSuccess" />
-  </IBox>
-</template>
-
-<script>
-import IBox from '@/components/IBox'
-import { GenericCreateUpdateForm } from '@/layout/components'
-export default {
-  name: 'Base',
-  components: {
-    IBox,
-    GenericCreateUpdateForm
-  },
-  props: {
-    config: {
-      type: Object,
-      default: () => ({})
-    },
-    enableField: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      visible: false
-    }
-  },
-  computed: {
-    iConfig() {
-      return this.config
-    }
-  },
-  methods: {
-    submitSuccess(res) {
-      this.$emit('input', !!res[this.enableField])
-      this.visible = false
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/settings/Vault/index.vue

@@ -1,45 +0,0 @@
-<template>
-  <TabPage :active-menu.sync="activeMenu" :submenu="submenu">
-    <keep-alive>
-      <component :is="activeMenu" />
-    </keep-alive>
-  </TabPage>
-</template>
-
-<script>
-import TabPage from '@/layout/components/TabPage'
-import Base from './Base'
-import Vault from './Vault'
-
-export default {
-  components: {
-    TabPage,
-    Base,
-    Vault
-  },
-  data() {
-    return {
-      loading: true,
-      activeMenu: 'Vault',
-      submenu: [
-        {
-          title: this.$t('setting.Vault'),
-          name: 'Vault'
-        }
-      ]
-    }
-  },
-  computed: {
-    componentData() {
-      return {}
-    }
-  },
-  mounted() {
-  },
-  methods: {}
-}
-</script>
-
-<style scoped>
-
-</style>