From 6b953506e4bc8697834b8078f3de373d9b17fced Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Mon, 14 Aug 2023 19:41:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/langs/en.json                        |   9 +
 src/i18n/langs/ja.json                        |   9 +
 src/i18n/langs/zh.json                        |   9 +
 .../GenericCreateUpdateForm/index.vue         |   8 +-
 src/router/common.js                          |   6 +-
 src/router/settings/index.js                  | 173 +++++++-----------
 .../settings/{ => Auth}/Ldap/ImportDialog.vue |   6 +-
 .../{ => Auth}/Ldap/SyncSettingDialog.vue     |   2 +-
 .../{ => Auth}/Ldap/TestLoginDialog.vue       |  10 +-
 src/views/settings/{ => Auth}/Ldap/index.vue  |   8 +-
 src/views/settings/Auth/index.vue             |   2 +-
 src/views/settings/Basic/Common.vue           |  62 +++++++
 src/views/settings/Basic/index.vue            |  70 ++-----
 .../Announcement.vue}                         |  25 +--
 src/views/settings/Feature/Basic.vue          |  50 +++++
 .../settings/{Vault => Feature}/Vault.vue     |   4 +-
 src/views/settings/Feature/index.vue          |  43 +++++
 .../settings/{ => Msg}/Email/EmailContent.vue |   6 +-
 src/views/settings/{ => Msg}/Email/SMTP.vue   |   2 +-
 src/views/settings/{ => Msg}/Email/index.vue  |  25 ++-
 src/views/settings/{ => Msg}/SMS/Base.vue     |  13 +-
 src/views/settings/{ => Msg}/SMS/CMPP2.vue    |   2 +-
 .../settings/{ => Msg}/SMS/SMSAlibaba.vue     |   2 +-
 .../settings/{ => Msg}/SMS/SMSCustom.vue      |   2 +-
 .../settings/{ => Msg}/SMS/SMSHuawei.vue      |   2 +-
 .../settings/{ => Msg}/SMS/SMSTencent.vue     |   2 +-
 src/views/settings/{ => Msg}/SMS/index.vue    |  20 +-
 .../Subscribe}/SelectDialog.vue               |   2 +-
 .../{Message => Msg/Subscribe}/index.vue      |  24 +--
 src/views/settings/Msg/index.vue              |  45 +++++
 src/views/settings/Other.vue                  |   6 -
 src/views/settings/Security/Auth.vue          |  85 +++++++++
 src/views/settings/Security/AuthLimit.vue     |  40 ++--
 src/views/settings/Security/Basic.vue         |  39 ++++
 src/views/settings/Security/Password.vue      |  61 ++++++
 src/views/settings/Security/PasswordRule.vue  |  63 -------
 src/views/settings/Security/Session.vue       |  40 ++++
 src/views/settings/Security/index.vue         | 124 ++++---------
 .../Task}/CeleryTaskLog.vue                   |   0
 src/views/settings/{ => Task}/Clean.vue       |  16 +-
 .../Task}/TaskDetail/TaskDetail.vue           |   2 +-
 .../Task}/TaskDetail/TaskHistory.vue          |   2 +-
 .../Task}/TaskDetail/index.vue                |  10 +-
 .../{tasks => settings/Task}/TaskList.vue     |   6 +-
 src/views/settings/Task/index.vue             |  38 ++++
 src/views/settings/Tool/index.vue             |   4 +-
 src/views/settings/Vault/Base.vue             |  47 -----
 src/views/settings/Vault/index.vue            |  45 -----
 48 files changed, 731 insertions(+), 540 deletions(-)
 rename src/views/settings/{ => Auth}/Ldap/ImportDialog.vue (97%)
 rename src/views/settings/{ => Auth}/Ldap/SyncSettingDialog.vue (96%)
 rename src/views/settings/{ => Auth}/Ldap/TestLoginDialog.vue (96%)
 rename src/views/settings/{ => Auth}/Ldap/index.vue (95%)
 create mode 100644 src/views/settings/Basic/Common.vue
 rename src/views/settings/{Basic/announcement.vue => Feature/Announcement.vue} (64%)
 create mode 100644 src/views/settings/Feature/Basic.vue
 rename src/views/settings/{Vault => Feature}/Vault.vue (96%)
 create mode 100644 src/views/settings/Feature/index.vue
 rename src/views/settings/{ => Msg}/Email/EmailContent.vue (97%)
 rename src/views/settings/{ => Msg}/Email/SMTP.vue (98%)
 rename src/views/settings/{ => Msg}/Email/index.vue (85%)
 rename src/views/settings/{ => Msg}/SMS/Base.vue (90%)
 rename src/views/settings/{ => Msg}/SMS/CMPP2.vue (98%)
 rename src/views/settings/{ => Msg}/SMS/SMSAlibaba.vue (98%)
 rename src/views/settings/{ => Msg}/SMS/SMSCustom.vue (98%)
 rename src/views/settings/{ => Msg}/SMS/SMSHuawei.vue (98%)
 rename src/views/settings/{ => Msg}/SMS/SMSTencent.vue (98%)
 rename src/views/settings/{ => Msg}/SMS/index.vue (81%)
 rename src/views/settings/{Message => Msg/Subscribe}/SelectDialog.vue (98%)
 rename src/views/settings/{Message => Msg/Subscribe}/index.vue (96%)
 create mode 100644 src/views/settings/Msg/index.vue
 create mode 100644 src/views/settings/Security/Auth.vue
 create mode 100644 src/views/settings/Security/Basic.vue
 create mode 100644 src/views/settings/Security/Password.vue
 delete mode 100644 src/views/settings/Security/PasswordRule.vue
 create mode 100644 src/views/settings/Security/Session.vue
 rename src/views/{tasks => settings/Task}/CeleryTaskLog.vue (100%)
 rename src/views/settings/{ => Task}/Clean.vue (71%)
 rename src/views/{tasks => settings/Task}/TaskDetail/TaskDetail.vue (94%)
 rename src/views/{tasks => settings/Task}/TaskDetail/TaskHistory.vue (98%)
 rename src/views/{tasks => settings/Task}/TaskDetail/index.vue (90%)
 rename src/views/{tasks => settings/Task}/TaskList.vue (95%)
 create mode 100644 src/views/settings/Task/index.vue
 delete mode 100644 src/views/settings/Vault/Base.vue
 delete mode 100644 src/views/settings/Vault/index.vue

diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index cc83ead99..e817bf9d0 100644
--- a/src/i18n/langs/en.json
+++ b/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",
diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
index 2e6f5aa99..e0906cc5d 100644
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -1523,6 +1523,15 @@
     }
   },
   "setting": {
+    "TaskList": "タスクリスト",
+    "Announcement": "公告",
+    "Features": "機能有効",
+    "PasswordRule": "パスワードルール",
+    "PasswordSecurity": "パスワードセキュリティ",
+    "SessionSecurity": "セッションセキュリティ",
+    "AuthSecurity": "認証とセキュリティ",
+    "MsgSubscribe": "メッセージ購読",
+    "Message": "メッセージ設定",
     "ServerTime": "サーバータイムです",
     "Custom": "カスタムです",
     "CleanHelpText": "定期清理タスクは毎日午前2時に実行され、クリーンアップ後のデータは復元できません",
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index e94d3c47a..cec5f57d7 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -1520,6 +1520,15 @@
     "PublishStatus": "发布状态"
   },
   "setting": {
+    "TaskList": "任务列表",
+    "Announcement": "公告",
+    "Features": "功能启用",
+    "PasswordRule": "密码规则",
+    "PasswordSecurity": "密码安全",
+    "SessionSecurity": "会话安全",
+    "AuthSecurity": "认证安全",
+    "MsgSubscribe": "消息订阅",
+    "Message": "消息通知",
     "Vault": "密钥匣子",
     "ServerTime": "服务器时间",
     "Custom": "自定义",
diff --git a/src/layout/components/GenericCreateUpdateForm/index.vue b/src/layout/components/GenericCreateUpdateForm/index.vue
index 3967d2b93..2ba67efbe 100644
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/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
diff --git a/src/router/common.js b/src/router/common.js
index adcc9de2f..bc24a53f0 100644
--- a/src/router/common.js
+++ b/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: {
diff --git a/src/router/settings/index.js b/src/router/settings/index.js
index 2821b4c00..e69bbc6d1 100644
--- a/src/router/settings/index.js
+++ b/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: {
diff --git a/src/views/settings/Ldap/ImportDialog.vue b/src/views/settings/Auth/Ldap/ImportDialog.vue
similarity index 97%
rename from src/views/settings/Ldap/ImportDialog.vue
rename to src/views/settings/Auth/Ldap/ImportDialog.vue
index dd171ea68..e0285b201 100644
--- a/src/views/settings/Ldap/ImportDialog.vue
+++ b/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'
 
diff --git a/src/views/settings/Ldap/SyncSettingDialog.vue b/src/views/settings/Auth/Ldap/SyncSettingDialog.vue
similarity index 96%
rename from src/views/settings/Ldap/SyncSettingDialog.vue
rename to src/views/settings/Auth/Ldap/SyncSettingDialog.vue
index cd3570799..00b5f5919 100644
--- a/src/views/settings/Ldap/SyncSettingDialog.vue
+++ b/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 {
diff --git a/src/views/settings/Ldap/TestLoginDialog.vue b/src/views/settings/Auth/Ldap/TestLoginDialog.vue
similarity index 96%
rename from src/views/settings/Ldap/TestLoginDialog.vue
rename to src/views/settings/Auth/Ldap/TestLoginDialog.vue
index 4e96a36bb..ddfd98ae3 100644
--- a/src/views/settings/Ldap/TestLoginDialog.vue
+++ b/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 {
diff --git a/src/views/settings/Ldap/index.vue b/src/views/settings/Auth/Ldap/index.vue
similarity index 95%
rename from src/views/settings/Ldap/index.vue
rename to src/views/settings/Auth/Ldap/index.vue
index c694884c2..208e90a3f 100644
--- a/src/views/settings/Ldap/index.vue
+++ b/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'
diff --git a/src/views/settings/Auth/index.vue b/src/views/settings/Auth/index.vue
index d039743de..b55385646 100644
--- a/src/views/settings/Auth/index.vue
+++ b/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'
diff --git a/src/views/settings/Basic/Common.vue b/src/views/settings/Basic/Common.vue
new file mode 100644
index 000000000..13e459d8c
--- /dev/null
+++ b/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>
diff --git a/src/views/settings/Basic/index.vue b/src/views/settings/Basic/index.vue
index 03beaaeb8..a0d8d66d1 100644
--- a/src/views/settings/Basic/index.vue
+++ b/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>
diff --git a/src/views/settings/Basic/announcement.vue b/src/views/settings/Feature/Announcement.vue
similarity index 64%
rename from src/views/settings/Basic/announcement.vue
rename to src/views/settings/Feature/Announcement.vue
index 32efb6649..19bb37ab1 100644
--- a/src/views/settings/Basic/announcement.vue
+++ b/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: {
diff --git a/src/views/settings/Feature/Basic.vue b/src/views/settings/Feature/Basic.vue
new file mode 100644
index 000000000..826275e74
--- /dev/null
+++ b/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>
diff --git a/src/views/settings/Vault/Vault.vue b/src/views/settings/Feature/Vault.vue
similarity index 96%
rename from src/views/settings/Vault/Vault.vue
rename to src/views/settings/Feature/Vault.vue
index b9c2f1180..674105b83 100644
--- a/src/views/settings/Vault/Vault.vue
+++ b/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'
 
diff --git a/src/views/settings/Feature/index.vue b/src/views/settings/Feature/index.vue
new file mode 100644
index 000000000..bc1f263be
--- /dev/null
+++ b/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>
diff --git a/src/views/settings/Email/EmailContent.vue b/src/views/settings/Msg/Email/EmailContent.vue
similarity index 97%
rename from src/views/settings/Email/EmailContent.vue
rename to src/views/settings/Msg/Email/EmailContent.vue
index 89f9c59ee..c46640221 100644
--- a/src/views/settings/Email/EmailContent.vue
+++ b/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 {
diff --git a/src/views/settings/Email/SMTP.vue b/src/views/settings/Msg/Email/SMTP.vue
similarity index 98%
rename from src/views/settings/Email/SMTP.vue
rename to src/views/settings/Msg/Email/SMTP.vue
index b0e3f80e8..742ff3d64 100644
--- a/src/views/settings/Email/SMTP.vue
+++ b/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'
 
diff --git a/src/views/settings/Email/index.vue b/src/views/settings/Msg/Email/index.vue
similarity index 85%
rename from src/views/settings/Email/index.vue
rename to src/views/settings/Msg/Email/index.vue
index f04cf9c18..ed1fba91a 100644
--- a/src/views/settings/Email/index.vue
+++ b/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'
           ]
         ]
       ],
diff --git a/src/views/settings/SMS/Base.vue b/src/views/settings/Msg/SMS/Base.vue
similarity index 90%
rename from src/views/settings/SMS/Base.vue
rename to src/views/settings/Msg/SMS/Base.vue
index 9f7651d59..f282cd05f 100644
--- a/src/views/settings/SMS/Base.vue
+++ b/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: {
diff --git a/src/views/settings/SMS/CMPP2.vue b/src/views/settings/Msg/SMS/CMPP2.vue
similarity index 98%
rename from src/views/settings/SMS/CMPP2.vue
rename to src/views/settings/Msg/SMS/CMPP2.vue
index 6cbda8310..1a467634c 100644
--- a/src/views/settings/SMS/CMPP2.vue
+++ b/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 {
diff --git a/src/views/settings/SMS/SMSAlibaba.vue b/src/views/settings/Msg/SMS/SMSAlibaba.vue
similarity index 98%
rename from src/views/settings/SMS/SMSAlibaba.vue
rename to src/views/settings/Msg/SMS/SMSAlibaba.vue
index 07dc0187b..c27e5453a 100644
--- a/src/views/settings/SMS/SMSAlibaba.vue
+++ b/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 {
diff --git a/src/views/settings/SMS/SMSCustom.vue b/src/views/settings/Msg/SMS/SMSCustom.vue
similarity index 98%
rename from src/views/settings/SMS/SMSCustom.vue
rename to src/views/settings/Msg/SMS/SMSCustom.vue
index 5dc317d9a..69f41c79c 100644
--- a/src/views/settings/SMS/SMSCustom.vue
+++ b/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 {
diff --git a/src/views/settings/SMS/SMSHuawei.vue b/src/views/settings/Msg/SMS/SMSHuawei.vue
similarity index 98%
rename from src/views/settings/SMS/SMSHuawei.vue
rename to src/views/settings/Msg/SMS/SMSHuawei.vue
index a2e6e01b5..ad2356aa2 100644
--- a/src/views/settings/SMS/SMSHuawei.vue
+++ b/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 {
diff --git a/src/views/settings/SMS/SMSTencent.vue b/src/views/settings/Msg/SMS/SMSTencent.vue
similarity index 98%
rename from src/views/settings/SMS/SMSTencent.vue
rename to src/views/settings/Msg/SMS/SMSTencent.vue
index ae089fe93..80bc9a082 100644
--- a/src/views/settings/SMS/SMSTencent.vue
+++ b/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 {
diff --git a/src/views/settings/SMS/index.vue b/src/views/settings/Msg/SMS/index.vue
similarity index 81%
rename from src/views/settings/SMS/index.vue
rename to src/views/settings/Msg/SMS/index.vue
index 19856e3db..7a8281378 100644
--- a/src/views/settings/SMS/index.vue
+++ b/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 {
diff --git a/src/views/settings/Message/SelectDialog.vue b/src/views/settings/Msg/Subscribe/SelectDialog.vue
similarity index 98%
rename from src/views/settings/Message/SelectDialog.vue
rename to src/views/settings/Msg/Subscribe/SelectDialog.vue
index 02d2f1201..b92b4a3da 100644
--- a/src/views/settings/Message/SelectDialog.vue
+++ b/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'
 
diff --git a/src/views/settings/Message/index.vue b/src/views/settings/Msg/Subscribe/index.vue
similarity index 96%
rename from src/views/settings/Message/index.vue
rename to src/views/settings/Msg/Subscribe/index.vue
index ad3ee29b9..bf1a401c3 100644
--- a/src/views/settings/Message/index.vue
+++ b/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() {
diff --git a/src/views/settings/Msg/index.vue b/src/views/settings/Msg/index.vue
new file mode 100644
index 000000000..136c56fb6
--- /dev/null
+++ b/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>
diff --git a/src/views/settings/Other.vue b/src/views/settings/Other.vue
index dc227d04f..649e47ef2 100644
--- a/src/views/settings/Other.vue
+++ b/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'),
           [
diff --git a/src/views/settings/Security/Auth.vue b/src/views/settings/Security/Auth.vue
new file mode 100644
index 000000000..bf7bd514f
--- /dev/null
+++ b/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>
diff --git a/src/views/settings/Security/AuthLimit.vue b/src/views/settings/Security/AuthLimit.vue
index b4891135f..7695b9bb3 100644
--- a/src/views/settings/Security/AuthLimit.vue
+++ b/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 {
diff --git a/src/views/settings/Security/Basic.vue b/src/views/settings/Security/Basic.vue
new file mode 100644
index 000000000..790580224
--- /dev/null
+++ b/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>
diff --git a/src/views/settings/Security/Password.vue b/src/views/settings/Security/Password.vue
new file mode 100644
index 000000000..7589d53d4
--- /dev/null
+++ b/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>
diff --git a/src/views/settings/Security/PasswordRule.vue b/src/views/settings/Security/PasswordRule.vue
deleted file mode 100644
index 4cedf9ce7..000000000
--- a/src/views/settings/Security/PasswordRule.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/settings/Security/Session.vue b/src/views/settings/Security/Session.vue
new file mode 100644
index 000000000..8cb9db712
--- /dev/null
+++ b/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>
diff --git a/src/views/settings/Security/index.vue b/src/views/settings/Security/index.vue
index 63e048290..8fed8cf58 100644
--- a/src/views/settings/Security/index.vue
+++ b/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>
diff --git a/src/views/tasks/CeleryTaskLog.vue b/src/views/settings/Task/CeleryTaskLog.vue
similarity index 100%
rename from src/views/tasks/CeleryTaskLog.vue
rename to src/views/settings/Task/CeleryTaskLog.vue
diff --git a/src/views/settings/Clean.vue b/src/views/settings/Task/Clean.vue
similarity index 71%
rename from src/views/settings/Clean.vue
rename to src/views/settings/Task/Clean.vue
index 291627233..a6e52ebad 100644
--- a/src/views/settings/Clean.vue
+++ b/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'
           ]
         ],
         [
diff --git a/src/views/tasks/TaskDetail/TaskDetail.vue b/src/views/settings/Task/TaskDetail/TaskDetail.vue
similarity index 94%
rename from src/views/tasks/TaskDetail/TaskDetail.vue
rename to src/views/settings/Task/TaskDetail/TaskDetail.vue
index 12fdb55a0..5581ca4bb 100644
--- a/src/views/tasks/TaskDetail/TaskDetail.vue
+++ b/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',
diff --git a/src/views/tasks/TaskDetail/TaskHistory.vue b/src/views/settings/Task/TaskDetail/TaskHistory.vue
similarity index 98%
rename from src/views/tasks/TaskDetail/TaskHistory.vue
rename to src/views/settings/Task/TaskDetail/TaskHistory.vue
index 191a6e2a6..1c0816f45 100644
--- a/src/views/tasks/TaskDetail/TaskHistory.vue
+++ b/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 {
diff --git a/src/views/tasks/TaskDetail/index.vue b/src/views/settings/Task/TaskDetail/index.vue
similarity index 90%
rename from src/views/tasks/TaskDetail/index.vue
rename to src/views/settings/Task/TaskDetail/index.vue
index e1a3608f4..be50eaa87 100644
--- a/src/views/tasks/TaskDetail/index.vue
+++ b/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: {
diff --git a/src/views/tasks/TaskList.vue b/src/views/settings/Task/TaskList.vue
similarity index 95%
rename from src/views/tasks/TaskList.vue
rename to src/views/settings/Task/TaskList.vue
index 5c63ca1e0..b1ec17766 100644
--- a/src/views/tasks/TaskList.vue
+++ b/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 {
diff --git a/src/views/settings/Task/index.vue b/src/views/settings/Task/index.vue
new file mode 100644
index 000000000..681470e90
--- /dev/null
+++ b/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>
diff --git a/src/views/settings/Tool/index.vue b/src/views/settings/Tool/index.vue
index 111579912..ed7c64abd 100644
--- a/src/views/settings/Tool/index.vue
+++ b/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>
diff --git a/src/views/settings/Vault/Base.vue b/src/views/settings/Vault/Base.vue
deleted file mode 100644
index 666adc487..000000000
--- a/src/views/settings/Vault/Base.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/settings/Vault/index.vue b/src/views/settings/Vault/index.vue
deleted file mode 100644
index d7f93c9a6..000000000
--- a/src/views/settings/Vault/index.vue
+++ /dev/null
@@ -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>