diff --git a/src/components/AccountCreateUpdateForm/index.vue b/src/components/Apps/AccountCreateUpdateForm/index.vue
similarity index 96%
rename from src/components/AccountCreateUpdateForm/index.vue
rename to src/components/Apps/AccountCreateUpdateForm/index.vue
index 63523ec02..78a13bc73 100644
--- a/src/components/AccountCreateUpdateForm/index.vue
+++ b/src/components/Apps/AccountCreateUpdateForm/index.vue
@@ -8,12 +8,12 @@
 </template>
 
 <script>
-import AutoDataForm from '@/components/AutoDataForm'
-import { UpdateToken, UploadSecret } from '@/components/FormFields'
-import Select2 from '@/components/FormFields/Select2'
-import AssetSelect from '@/components/AssetSelect'
+import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
+import { UpdateToken, UploadSecret } from '@/components/Form/FormFields'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
+import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 import { encryptPassword } from '@/utils/crypto'
-import { Required, RequiredChange } from '@/components/DataForm/rules'
+import { Required, RequiredChange } from '@/components/Form/DataForm/rules'
 import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
 
 export default {
diff --git a/src/components/AccountListTable/AccountCreateUpdate.vue b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
similarity index 96%
rename from src/components/AccountListTable/AccountCreateUpdate.vue
rename to src/components/Apps/AccountListTable/AccountCreateUpdate.vue
index d4847867a..44f9b7ef5 100644
--- a/src/components/AccountListTable/AccountCreateUpdate.vue
+++ b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import AccountCreateUpdateForm from '@/components/AccountCreateUpdateForm'
+import Dialog from '@/components/Dialog/index.vue'
+import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
 
 export default {
   name: 'CreateAccountDialog',
diff --git a/src/components/AccountListTable/AccountList.vue b/src/components/Apps/AccountListTable/AccountList.vue
similarity index 97%
rename from src/components/AccountListTable/AccountList.vue
rename to src/components/Apps/AccountListTable/AccountList.vue
index 6e02028a8..0634efa5f 100644
--- a/src/components/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -41,11 +41,11 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable/index'
-import { ActionsFormatter } from '@/components/TableFormatters'
-import ViewSecret from './ViewSecret'
-import UpdateSecretInfo from './UpdateSecretInfo'
-import AccountCreateUpdate from './AccountCreateUpdate'
+import ListTable from '@/components/Table/ListTable/index.vue'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import ViewSecret from './ViewSecret.vue'
+import UpdateSecretInfo from './UpdateSecretInfo.vue'
+import AccountCreateUpdate from './AccountCreateUpdate.vue'
 import { connectivityMeta } from './const'
 import { openTaskPage } from '@/utils/jms'
 import ResultDialog from './BulkCreateResultDialog.vue'
diff --git a/src/components/AccountListTable/BulkCreateResultDialog.vue b/src/components/Apps/AccountListTable/BulkCreateResultDialog.vue
similarity index 97%
rename from src/components/AccountListTable/BulkCreateResultDialog.vue
rename to src/components/Apps/AccountListTable/BulkCreateResultDialog.vue
index 0c368dfb9..ed676e542 100644
--- a/src/components/AccountListTable/BulkCreateResultDialog.vue
+++ b/src/components/Apps/AccountListTable/BulkCreateResultDialog.vue
@@ -15,7 +15,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import DataTable from '@/components/DataTable/index.vue'
+import DataTable from '@/components/Table/DataTable/index.vue'
 
 export default {
   name: 'ResultDialog',
diff --git a/src/components/AccountListTable/PasswordHistoryDialog.vue b/src/components/Apps/AccountListTable/PasswordHistoryDialog.vue
similarity index 95%
rename from src/components/AccountListTable/PasswordHistoryDialog.vue
rename to src/components/Apps/AccountListTable/PasswordHistoryDialog.vue
index b08360d51..4382f7651 100644
--- a/src/components/AccountListTable/PasswordHistoryDialog.vue
+++ b/src/components/Apps/AccountListTable/PasswordHistoryDialog.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListTableDialog } from '@/layout/components'
-import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/components/AccountListTable/UpdateSecretInfo.vue b/src/components/Apps/AccountListTable/UpdateSecretInfo.vue
similarity index 95%
rename from src/components/AccountListTable/UpdateSecretInfo.vue
rename to src/components/Apps/AccountListTable/UpdateSecretInfo.vue
index c65a7968a..2e6e090dc 100644
--- a/src/components/AccountListTable/UpdateSecretInfo.vue
+++ b/src/components/Apps/AccountListTable/UpdateSecretInfo.vue
@@ -29,8 +29,8 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import { UpdateToken, UploadKey } from '@/components/FormFields'
+import Dialog from '@/components/Dialog/index.vue'
+import { UpdateToken, UploadKey } from '@/components/Form/FormFields'
 import { encryptPassword } from '@/utils/crypto'
 
 export default {
diff --git a/src/components/AccountListTable/ViewSecret.vue b/src/components/Apps/AccountListTable/ViewSecret.vue
similarity index 95%
rename from src/components/AccountListTable/ViewSecret.vue
rename to src/components/Apps/AccountListTable/ViewSecret.vue
index 88f0915fc..e355dba87 100644
--- a/src/components/AccountListTable/ViewSecret.vue
+++ b/src/components/Apps/AccountListTable/ViewSecret.vue
@@ -65,10 +65,10 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import PasswordHistoryDialog from './PasswordHistoryDialog'
-import UserConfirmDialog from '@/components/UserConfirmDialog'
-import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import Dialog from '@/components/Dialog/index.vue'
+import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
+import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/crypto'
 
 export default {
diff --git a/src/components/AccountListTable/const.js b/src/components/Apps/AccountListTable/const.js
similarity index 88%
rename from src/components/AccountListTable/const.js
rename to src/components/Apps/AccountListTable/const.js
index 757a2140c..9aa4856ee 100644
--- a/src/components/AccountListTable/const.js
+++ b/src/components/Apps/AccountListTable/const.js
@@ -1,5 +1,5 @@
 import i18n from '@/i18n/i18n'
-import { ChoicesFormatter } from '@/components/TableFormatters'
+import { ChoicesFormatter } from '@/components/Table/TableFormatters'
 
 export const connectivityMeta = {
   label: i18n.t('assets.Connectivity'),
diff --git a/src/components/AssetRelationCard/index.vue b/src/components/Apps/AssetRelationCard/index.vue
similarity index 78%
rename from src/components/AssetRelationCard/index.vue
rename to src/components/Apps/AssetRelationCard/index.vue
index d8e076224..be9f8d3ac 100644
--- a/src/components/AssetRelationCard/index.vue
+++ b/src/components/Apps/AssetRelationCard/index.vue
@@ -1,14 +1,14 @@
 <template>
-  <IBox :fa="icon" :type="type" :title="title" v-bind="$attrs">
+  <IBox :fa="icon" :title="title" :type="type" v-bind="$attrs">
     <table style="width: 100%">
       <tr>
         <td colspan="2">
-          <AssetSelect ref="assetSelect" :disabled="disabled" :can-select="canSelect" />
+          <AssetSelect ref="assetSelect" :can-select="canSelect" :disabled="disabled" />
         </td>
       </tr>
       <tr>
         <td colspan="2">
-          <el-button :type="type" size="small" :disabled="disabled" @click="addObjects">{{ $t('common.Add') }}</el-button>
+          <el-button :disabled="disabled" :type="type" size="small" @click="addObjects">{{ $t('common.Add') }}</el-button>
         </td>
       </tr>
     </table>
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox'
-import AssetSelect from '@/components/AssetSelect'
+import IBox from '@/components/IBox/index.vue'
+import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 
 export default {
   name: 'AssetRelationCard',
diff --git a/src/components/AssetSelect/dialog.vue b/src/components/Apps/AssetSelect/dialog.vue
similarity index 97%
rename from src/components/AssetSelect/dialog.vue
rename to src/components/Apps/AssetSelect/dialog.vue
index 6a228580c..e34449ccf 100644
--- a/src/components/AssetSelect/dialog.vue
+++ b/src/components/Apps/AssetSelect/dialog.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import AssetTreeTable from '@/components/AssetTreeTable'
-import Dialog from '@/components/Dialog'
+import AssetTreeTable from '@/components/Apps/AssetTreeTable/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
 
 export default {
   componentName: 'AssetSelectDialog',
diff --git a/src/components/AssetSelect/index.vue b/src/components/Apps/AssetSelect/index.vue
similarity index 98%
rename from src/components/AssetSelect/index.vue
rename to src/components/Apps/AssetSelect/index.vue
index f6ec0cda7..fb42eabec 100644
--- a/src/components/AssetSelect/index.vue
+++ b/src/components/Apps/AssetSelect/index.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script>
-import Select2 from '@/components/FormFields/Select2'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
 import AssetSelectDialog from './dialog.vue'
 import { b } from 'css-color-function/lib/adjusters'
 
diff --git a/src/components/AssetTreeTable/index.vue b/src/components/Apps/AssetTreeTable/index.vue
similarity index 98%
rename from src/components/AssetTreeTable/index.vue
rename to src/components/Apps/AssetTreeTable/index.vue
index 9b37c3846..4ba02a04c 100644
--- a/src/components/AssetTreeTable/index.vue
+++ b/src/components/Apps/AssetTreeTable/index.vue
@@ -1,10 +1,10 @@
 <template>
   <TreeTable
     ref="TreeList"
-    component="TabTree"
-    :table-config="tableConfig"
     :active-menu.sync="treeTableConfig.activeMenu"
+    :table-config="tableConfig"
     :tree-tab-config="treeTableConfig"
+    component="TabTree"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -12,13 +12,13 @@
       <slot name="table" />
     </template>
     <div slot="rMenu" slot-scope="{data}">
-      <slot name="rMenu" :data="data" />
+      <slot :data="data" name="rMenu" />
     </div>
   </TreeTable>
 </template>
 
 <script>
-import TreeTable from '../TreeTable'
+import TreeTable from '../../Table/TreeTable/index.vue'
 import { setRouterQuery, setUrlParam } from '@/utils/common'
 import $ from '@/utils/jquery-vendor'
 
diff --git a/src/components/AutomationParams/index.vue b/src/components/Apps/AutomationParams/index.vue
similarity index 100%
rename from src/components/AutomationParams/index.vue
rename to src/components/Apps/AutomationParams/index.vue
diff --git a/src/components/GatewayDialog/index.vue b/src/components/Apps/GatewayDialog/index.vue
similarity index 97%
rename from src/components/GatewayDialog/index.vue
rename to src/components/Apps/GatewayDialog/index.vue
index f737b7b1f..b0f45cb84 100644
--- a/src/components/GatewayDialog/index.vue
+++ b/src/components/Apps/GatewayDialog/index.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
+import Dialog from '@/components/Dialog/index.vue'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/components/GrantedAssets/index.vue b/src/components/Apps/GrantedAssets/index.vue
similarity index 94%
rename from src/components/GrantedAssets/index.vue
rename to src/components/Apps/GrantedAssets/index.vue
index 7004892d6..46f8083f9 100644
--- a/src/components/GrantedAssets/index.vue
+++ b/src/components/Apps/GrantedAssets/index.vue
@@ -3,8 +3,8 @@
 </template>
 
 <script type="text/jsx">
-import TreeTable from '../TreeTable'
-import { DetailFormatter } from '@/components/TableFormatters'
+import TreeTable from '../../Table/TreeTable/index.vue'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'GrantedAssets',
diff --git a/src/components/ManyJsonTabs/AssetJsonTab.vue b/src/components/Apps/ManyJsonTabs/AssetJsonTab.vue
similarity index 95%
rename from src/components/ManyJsonTabs/AssetJsonTab.vue
rename to src/components/Apps/ManyJsonTabs/AssetJsonTab.vue
index c0d3547ee..fa096958a 100644
--- a/src/components/ManyJsonTabs/AssetJsonTab.vue
+++ b/src/components/Apps/ManyJsonTabs/AssetJsonTab.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable/index.vue'
+import ListTable from '@/components/Table/ListTable/index.vue'
 import { toM2MJsonParams } from '@/utils/jms'
 
 export default {
diff --git a/src/components/ManyJsonTabs/UserJsonTab.vue b/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
similarity index 97%
rename from src/components/ManyJsonTabs/UserJsonTab.vue
rename to src/components/Apps/ManyJsonTabs/UserJsonTab.vue
index ef143f99f..39ede2489 100644
--- a/src/components/ManyJsonTabs/UserJsonTab.vue
+++ b/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable/index.vue'
+import ListTable from '@/components/Table/ListTable/index.vue'
 import { toM2MJsonParams } from '@/utils/jms'
 
 export default {
diff --git a/src/components/ResourceActivity/index.vue b/src/components/Apps/ResourceActivity/index.vue
similarity index 95%
rename from src/components/ResourceActivity/index.vue
rename to src/components/Apps/ResourceActivity/index.vue
index 67b490c8f..5947aa3d2 100644
--- a/src/components/ResourceActivity/index.vue
+++ b/src/components/Apps/ResourceActivity/index.vue
@@ -30,8 +30,8 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox'
-import DiffDetail from '@/components/Dialog/DiffDetail'
+import IBox from '@/components/IBox/index.vue'
+import DiffDetail from '@/components/Dialog/DiffDetail.vue'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/components/UserConfirmDialog/index.vue b/src/components/Apps/UserConfirmDialog/index.vue
similarity index 96%
rename from src/components/UserConfirmDialog/index.vue
rename to src/components/Apps/UserConfirmDialog/index.vue
index ab0ac7bf1..e21d55a36 100644
--- a/src/components/UserConfirmDialog/index.vue
+++ b/src/components/Apps/UserConfirmDialog/index.vue
@@ -1,24 +1,24 @@
 <template>
   <Dialog
-    :title="title"
-    :width="'36%'"
-    :show-confirm="false"
-    :show-cancel="false"
-    :visible.sync="visible"
     :destroy-on-close="true"
-    v-bind="$attrs"
+    :show-cancel="false"
+    :show-confirm="false"
+    :title="title"
+    :visible.sync="visible"
+    :width="'36%'"
     class="dialog-content"
+    v-bind="$attrs"
     v-on="$listeners"
   >
     <div v-if="ConfirmType === 'relogin'">
       <el-row :gutter="24" style="margin: 0 auto;">
         <el-col :md="24" :sm="24">
           <el-alert
-            :title="$tc('auth.ReLoginTitle')"
-            type="info"
-            center
             :closable="false"
+            :title="$tc('auth.ReLoginTitle')"
+            center
             style="margin-bottom: 20px;"
+            type="info"
           />
         </el-col>
       </el-row>
@@ -26,8 +26,8 @@
         <el-col :md="24" :sm="24">
           <el-button
             size="mini"
-            type="primary"
             style="width: 100%; line-height:20px;"
+            type="primary"
             @click="logOut"
           >
             {{ this.$t('auth.ReLogin') }}
@@ -37,7 +37,7 @@
     </div>
     <div v-else>
       <el-row :gutter="24" style="margin: 0 auto;">
-        <el-col :span="24" :md="24" :sm="24" class="add">
+        <el-col :md="24" :sm="24" :span="24" class="add">
           <el-select
             v-model="Select"
             :disabled="ConfirmType === 'password'"
@@ -47,22 +47,22 @@
             <el-option
               v-for="(item, i) of Content"
               :key="i"
+              :disabled="item.disabled"
               :label="item.display_name"
               :value="item.name"
-              :disabled="item.disabled"
             />
           </el-select>
         </el-col>
       </el-row>
       <el-row :gutter="24" style="margin: 0 auto;">
         <el-col :md="24" :sm="24" style="display: flex; margin-bottom: 20px;">
-          <el-input v-model="SecretKey" :show-password="showPassword" :placeholder="HelpText" />
+          <el-input v-model="SecretKey" :placeholder="HelpText" :show-password="showPassword" />
           <span v-if="Select === 'sms'" style="margin: -1px 0 0 20px;">
             <el-button
-              size="mini"
-              type="primary"
-              style="line-height:20px; float: right;"
               :disabled="smsBtndisabled"
+              size="mini"
+              style="line-height:20px; float: right;"
+              type="primary"
               @click="sendChallengeCode"
             >
               {{ smsBtnText }}
@@ -74,8 +74,8 @@
         <el-col :md="24" :sm="24">
           <el-button
             size="mini"
-            type="primary"
             style="width: 100%; line-height:20px;"
+            type="primary"
             @click="userConfirm"
           >
             {{ this.$t('common.Confirm') }}
@@ -86,7 +86,7 @@
   </Dialog>
 </template>
 <script>
-import Dialog from '@/components/Dialog'
+import Dialog from '@/components/Dialog/index.vue'
 
 export default {
   name: 'UserConfirmDialog',
diff --git a/src/components/DetailCard/ItemValue.vue b/src/components/Cards/DetailCard/ItemValue.vue
similarity index 100%
rename from src/components/DetailCard/ItemValue.vue
rename to src/components/Cards/DetailCard/ItemValue.vue
diff --git a/src/components/DetailCard/auto.vue b/src/components/Cards/DetailCard/auto.vue
similarity index 99%
rename from src/components/DetailCard/auto.vue
rename to src/components/Cards/DetailCard/auto.vue
index ce27b673d..c03e4ead5 100644
--- a/src/components/DetailCard/auto.vue
+++ b/src/components/Cards/DetailCard/auto.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import DetailCard from './index'
+import DetailCard from './index.vue'
 import { copy, toSafeLocalDateStr } from '@/utils/common'
 
 export default {
diff --git a/src/components/DetailCard/index.vue b/src/components/Cards/DetailCard/index.vue
similarity index 87%
rename from src/components/DetailCard/index.vue
rename to src/components/Cards/DetailCard/index.vue
index 7ab20503a..259731361 100644
--- a/src/components/DetailCard/index.vue
+++ b/src/components/Cards/DetailCard/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <IBox :title="title" :fa="fa">
+  <IBox :fa="fa" :title="title">
     <el-form class="content" label-position="left" label-width="25%">
       <el-form-item v-for="item in items" :key="item.key" :label="item.key">
-        <ItemValue class="item-value" :value="item.value" v-bind="item" />
+        <ItemValue :value="item.value" class="item-value" v-bind="item" />
       </el-form-item>
     </el-form>
     <slot />
@@ -10,8 +10,8 @@
 </template>
 
 <script>
-import IBox from '../IBox'
-import ItemValue from './ItemValue'
+import IBox from '../../IBox/index.vue'
+import ItemValue from './ItemValue.vue'
 
 export default {
   name: 'DetailCard',
diff --git a/src/components/RelationCard/index.vue b/src/components/Cards/RelationCard/index.vue
similarity index 92%
rename from src/components/RelationCard/index.vue
rename to src/components/Cards/RelationCard/index.vue
index 8231f0710..b33e56902 100644
--- a/src/components/RelationCard/index.vue
+++ b/src/components/Cards/RelationCard/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <IBox :type="type" :title="title" v-bind="$attrs">
-    <table style="width: 100%;table-layout:fixed;" class="CardTable">
+  <IBox :title="title" :type="type" v-bind="$attrs">
+    <table class="CardTable" style="width: 100%;table-layout:fixed;">
       <tr>
         <td colspan="2">
           <Select2 ref="select2" v-model="select2.value" :disabled="iDisabled" v-bind="select2" />
@@ -9,7 +9,7 @@
       <slot />
       <tr>
         <td colspan="2">
-          <el-button :type="type" size="small" :loading="submitLoading" :disabled="iDisabled" @click="addObjects">
+          <el-button :disabled="iDisabled" :loading="submitLoading" :type="type" size="small" @click="addObjects">
             {{ $t('common.Add') }}
           </el-button>
         </td>
@@ -17,12 +17,12 @@
       <template v-if="showHasObjects">
         <tr v-for="obj of iHasObjects" :key="obj.value" class="item">
           <td style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
-            <el-tooltip style="margin: 4px;" effect="dark" :content="obj.label" placement="left">
+            <el-tooltip :content="obj.label" effect="dark" placement="left" style="margin: 4px;">
               <b>{{ obj.label }}</b>
             </el-tooltip>
           </td>
           <td>
-            <el-button size="mini" :disabled="iDisabled" type="danger" style="float: right" @click="removeObject(obj)">
+            <el-button :disabled="iDisabled" size="mini" style="float: right" type="danger" @click="removeObject(obj)">
               <i class="fa fa-minus" />
             </el-button>
           </td>
@@ -30,7 +30,7 @@
       </template>
       <tr v-if="params.hasMore && showHasMore" class="item">
         <td colspan="2">
-          <el-button :type="type" :disabled="iDisabled" size="small" style="width: 100%" @click="loadMore">
+          <el-button :disabled="iDisabled" :type="type" size="small" style="width: 100%" @click="loadMore">
             <i class="fa fa-arrow-down" />
             {{ $t('common.More') }}
           </el-button>
@@ -41,10 +41,11 @@
 </template>
 
 <script>
-import Select2 from '../FormFields/Select2'
-import IBox from '../IBox'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
+import IBox from '../../IBox/index.vue'
 import { createSourceIdCache } from '@/api/common'
 import { mapGetters } from 'vuex'
+
 export default {
   name: 'RelationCard',
   components: {
diff --git a/src/components/SummaryCard/index.vue b/src/components/Cards/SummaryCard/index.vue
similarity index 100%
rename from src/components/SummaryCard/index.vue
rename to src/components/Cards/SummaryCard/index.vue
diff --git a/src/components/AutoDataForm/components/NestedField.vue b/src/components/Form/AutoDataForm/components/NestedField.vue
similarity index 97%
rename from src/components/AutoDataForm/components/NestedField.vue
rename to src/components/Form/AutoDataForm/components/NestedField.vue
index e0ad2dc63..f7ce8dedb 100644
--- a/src/components/AutoDataForm/components/NestedField.vue
+++ b/src/components/Form/AutoDataForm/components/NestedField.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import DataForm from '@/components/DataForm'
+import DataForm from '@/components/Form/DataForm/index.vue'
 
 export default {
   name: 'NestedField',
diff --git a/src/components/AutoDataForm/index.vue b/src/components/Form/AutoDataForm/index.vue
similarity index 95%
rename from src/components/AutoDataForm/index.vue
rename to src/components/Form/AutoDataForm/index.vue
index ffea8d293..5031e4903 100644
--- a/src/components/AutoDataForm/index.vue
+++ b/src/components/Form/AutoDataForm/index.vue
@@ -23,9 +23,9 @@
 </template>
 
 <script>
-import DataForm from '../DataForm'
-import FormGroupHeader from '@/components/FormGroupHeader'
-import { FormFieldGenerator } from '@/components/AutoDataForm/utils'
+import DataForm from '../DataForm/index.vue'
+import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
+import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
 
 export default {
   name: 'AutoDataForm',
diff --git a/src/components/AutoDataForm/utils.js b/src/components/Form/AutoDataForm/utils.js
similarity index 91%
rename from src/components/AutoDataForm/utils.js
rename to src/components/Form/AutoDataForm/utils.js
index 6da1ca7c3..e84466cd9 100644
--- a/src/components/AutoDataForm/utils.js
+++ b/src/components/Form/AutoDataForm/utils.js
@@ -1,13 +1,13 @@
 import Vue from 'vue'
-import Select2 from '@/components/FormFields/Select2'
-import ObjectSelect2 from '@/components/FormFields/NestedObjectSelect2'
-import NestedField from '@/components/AutoDataForm/components/NestedField'
-import Switcher from '@/components/FormFields/Switcher'
-import rules from '@/components/DataForm/rules'
-import BasicTree from '@/components/FormFields/BasicTree'
-import JsonEditor from '@/components/FormFields/JsonEditor'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
+import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue'
+import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue'
+import Switcher from '@/components/Form/FormFields/Switcher.vue'
+import rules from '@/components/Form/DataForm/rules'
+import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
+import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
 import { assignIfNot } from '@/utils/common'
-import TagInput from '@/components/FormFields/TagInput.vue'
+import TagInput from '@/components/Form/FormFields/TagInput.vue'
 
 export class FormFieldGenerator {
   constructor(emit) {
diff --git a/src/components/CodeMirror/index.vue b/src/components/Form/CodeMirror/index.vue
similarity index 100%
rename from src/components/CodeMirror/index.vue
rename to src/components/Form/CodeMirror/index.vue
diff --git a/src/components/CronTab/Crontab.vue b/src/components/Form/CronTab/Crontab.vue
similarity index 100%
rename from src/components/CronTab/Crontab.vue
rename to src/components/Form/CronTab/Crontab.vue
diff --git a/src/components/CronTab/components/Crontab-Day.vue b/src/components/Form/CronTab/components/Crontab-Day.vue
similarity index 100%
rename from src/components/CronTab/components/Crontab-Day.vue
rename to src/components/Form/CronTab/components/Crontab-Day.vue
diff --git a/src/components/CronTab/components/Crontab-Hour.vue b/src/components/Form/CronTab/components/Crontab-Hour.vue
similarity index 100%
rename from src/components/CronTab/components/Crontab-Hour.vue
rename to src/components/Form/CronTab/components/Crontab-Hour.vue
diff --git a/src/components/CronTab/components/Crontab-Min.vue b/src/components/Form/CronTab/components/Crontab-Min.vue
similarity index 100%
rename from src/components/CronTab/components/Crontab-Min.vue
rename to src/components/Form/CronTab/components/Crontab-Min.vue
diff --git a/src/components/CronTab/components/Crontab-Month.vue b/src/components/Form/CronTab/components/Crontab-Month.vue
similarity index 100%
rename from src/components/CronTab/components/Crontab-Month.vue
rename to src/components/Form/CronTab/components/Crontab-Month.vue
diff --git a/src/components/CronTab/components/Crontab-Result.vue b/src/components/Form/CronTab/components/Crontab-Result.vue
similarity index 100%
rename from src/components/CronTab/components/Crontab-Result.vue
rename to src/components/Form/CronTab/components/Crontab-Result.vue
diff --git a/src/components/CronTab/components/Crontab-Week.vue b/src/components/Form/CronTab/components/Crontab-Week.vue
similarity index 100%
rename from src/components/CronTab/components/Crontab-Week.vue
rename to src/components/Form/CronTab/components/Crontab-Week.vue
diff --git a/src/components/CronTab/index.vue b/src/components/Form/CronTab/index.vue
similarity index 100%
rename from src/components/CronTab/index.vue
rename to src/components/Form/CronTab/index.vue
diff --git a/src/components/DataForm/components/el-form-renderer/components/render-form-group.vue b/src/components/Form/DataForm/components/el-form-renderer/components/render-form-group.vue
similarity index 100%
rename from src/components/DataForm/components/el-form-renderer/components/render-form-group.vue
rename to src/components/Form/DataForm/components/el-form-renderer/components/render-form-group.vue
diff --git a/src/components/DataForm/components/el-form-renderer/components/render-form-item.vue b/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
similarity index 100%
rename from src/components/DataForm/components/el-form-renderer/components/render-form-item.vue
rename to src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
diff --git a/src/components/DataForm/components/el-form-renderer/el-form-renderer.md b/src/components/Form/DataForm/components/el-form-renderer/el-form-renderer.md
similarity index 100%
rename from src/components/DataForm/components/el-form-renderer/el-form-renderer.md
rename to src/components/Form/DataForm/components/el-form-renderer/el-form-renderer.md
diff --git a/src/components/DataForm/components/el-form-renderer/el-form-renderer.vue b/src/components/Form/DataForm/components/el-form-renderer/el-form-renderer.vue
similarity index 100%
rename from src/components/DataForm/components/el-form-renderer/el-form-renderer.vue
rename to src/components/Form/DataForm/components/el-form-renderer/el-form-renderer.vue
diff --git a/src/components/DataForm/components/el-form-renderer/index.js b/src/components/Form/DataForm/components/el-form-renderer/index.js
similarity index 100%
rename from src/components/DataForm/components/el-form-renderer/index.js
rename to src/components/Form/DataForm/components/el-form-renderer/index.js
diff --git a/src/components/DataForm/components/el-form-renderer/util/enable-when.js b/src/components/Form/DataForm/components/el-form-renderer/util/enable-when.js
similarity index 100%
rename from src/components/DataForm/components/el-form-renderer/util/enable-when.js
rename to src/components/Form/DataForm/components/el-form-renderer/util/enable-when.js
diff --git a/src/components/DataForm/components/el-form-renderer/util/transform-content.js b/src/components/Form/DataForm/components/el-form-renderer/util/transform-content.js
similarity index 100%
rename from src/components/DataForm/components/el-form-renderer/util/transform-content.js
rename to src/components/Form/DataForm/components/el-form-renderer/util/transform-content.js
diff --git a/src/components/DataForm/components/el-form-renderer/util/utils.js b/src/components/Form/DataForm/components/el-form-renderer/util/utils.js
similarity index 100%
rename from src/components/DataForm/components/el-form-renderer/util/utils.js
rename to src/components/Form/DataForm/components/el-form-renderer/util/utils.js
diff --git a/src/components/DataForm/index.vue b/src/components/Form/DataForm/index.vue
similarity index 100%
rename from src/components/DataForm/index.vue
rename to src/components/Form/DataForm/index.vue
diff --git a/src/components/DataForm/rules/index.js b/src/components/Form/DataForm/rules/index.js
similarity index 100%
rename from src/components/DataForm/rules/index.js
rename to src/components/Form/DataForm/rules/index.js
diff --git a/src/components/FormFields/BasicTree.vue b/src/components/Form/FormFields/BasicTree.vue
similarity index 100%
rename from src/components/FormFields/BasicTree.vue
rename to src/components/Form/FormFields/BasicTree.vue
diff --git a/src/components/FormFields/CodeEditor.vue b/src/components/Form/FormFields/CodeEditor.vue
similarity index 100%
rename from src/components/FormFields/CodeEditor.vue
rename to src/components/Form/FormFields/CodeEditor.vue
diff --git a/src/components/FormFields/DatetimeRangePicker.vue b/src/components/Form/FormFields/DatetimeRangePicker.vue
similarity index 100%
rename from src/components/FormFields/DatetimeRangePicker.vue
rename to src/components/Form/FormFields/DatetimeRangePicker.vue
diff --git a/src/components/FormFields/DynamicInput.vue b/src/components/Form/FormFields/DynamicInput.vue
similarity index 100%
rename from src/components/FormFields/DynamicInput.vue
rename to src/components/Form/FormFields/DynamicInput.vue
diff --git a/src/components/FormFields/JSONManyToManySelect/AttrFormDialog.vue b/src/components/Form/FormFields/JSONManyToManySelect/AttrFormDialog.vue
similarity index 96%
rename from src/components/FormFields/JSONManyToManySelect/AttrFormDialog.vue
rename to src/components/Form/FormFields/JSONManyToManySelect/AttrFormDialog.vue
index d3dd022f4..d33f4e842 100644
--- a/src/components/FormFields/JSONManyToManySelect/AttrFormDialog.vue
+++ b/src/components/Form/FormFields/JSONManyToManySelect/AttrFormDialog.vue
@@ -18,9 +18,9 @@
 </template>
 
 <script>
-import DataForm from '@/components/DataForm/index.vue'
+import DataForm from '@/components/Form/DataForm/index.vue'
 import Dialog from '@/components/Dialog/index.vue'
-import ValueField from '@/components/FormFields/JSONManyToManySelect/ValueField.vue'
+import ValueField from '@/components/Form/FormFields/JSONManyToManySelect/ValueField.vue'
 import { attrMatchOptions, typeMatchMapper } from './const'
 
 export default {
diff --git a/src/components/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue b/src/components/Form/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue
similarity index 95%
rename from src/components/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue
rename to src/components/Form/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue
index 9318d5740..8abef5cd4 100644
--- a/src/components/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue
+++ b/src/components/Form/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue
@@ -13,7 +13,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import ListTable from '@/components/ListTable/index.vue'
+import ListTable from '@/components/Table/ListTable/index.vue'
 
 export default {
   name: 'AttrMatchResultDialog',
diff --git a/src/components/FormFields/JSONManyToManySelect/ValueField.vue b/src/components/Form/FormFields/JSONManyToManySelect/ValueField.vue
similarity index 92%
rename from src/components/FormFields/JSONManyToManySelect/ValueField.vue
rename to src/components/Form/FormFields/JSONManyToManySelect/ValueField.vue
index 59c5d089a..10bb7d931 100644
--- a/src/components/FormFields/JSONManyToManySelect/ValueField.vue
+++ b/src/components/Form/FormFields/JSONManyToManySelect/ValueField.vue
@@ -8,9 +8,9 @@
 </template>
 
 <script>
-import TagInput from '@/components/FormFields/TagInput.vue'
-import Select2 from '@/components/FormFields/Select2.vue'
-import Switcher from '@/components/FormFields/Switcher.vue'
+import TagInput from '@/components/Form/FormFields/TagInput.vue'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
+import Switcher from '@/components/Form/FormFields/Switcher.vue'
 
 export default {
   name: 'ValueField',
diff --git a/src/components/FormFields/JSONManyToManySelect/ValueFormatter.vue b/src/components/Form/FormFields/JSONManyToManySelect/ValueFormatter.vue
similarity index 96%
rename from src/components/FormFields/JSONManyToManySelect/ValueFormatter.vue
rename to src/components/Form/FormFields/JSONManyToManySelect/ValueFormatter.vue
index fcbb2e835..dd07818c5 100644
--- a/src/components/FormFields/JSONManyToManySelect/ValueFormatter.vue
+++ b/src/components/Form/FormFields/JSONManyToManySelect/ValueFormatter.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import BaseFormatter from '@/components/TableFormatters/base.vue'
+import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
 import { setUrlParam } from '@/utils/common'
 
 export default {
diff --git a/src/components/FormFields/JSONManyToManySelect/const.js b/src/components/Form/FormFields/JSONManyToManySelect/const.js
similarity index 100%
rename from src/components/FormFields/JSONManyToManySelect/const.js
rename to src/components/Form/FormFields/JSONManyToManySelect/const.js
diff --git a/src/components/FormFields/JSONManyToManySelect/index.vue b/src/components/Form/FormFields/JSONManyToManySelect/index.vue
similarity index 99%
rename from src/components/FormFields/JSONManyToManySelect/index.vue
rename to src/components/Form/FormFields/JSONManyToManySelect/index.vue
index 84034e89c..d38edcd35 100644
--- a/src/components/FormFields/JSONManyToManySelect/index.vue
+++ b/src/components/Form/FormFields/JSONManyToManySelect/index.vue
@@ -38,7 +38,7 @@
 
 <script>
 import Select2 from '../Select2.vue'
-import DataTable from '@/components/DataTable/index.vue'
+import DataTable from '@/components/Table/DataTable/index.vue'
 import ValueFormatter from './ValueFormatter.vue'
 import AttrFormDialog from './AttrFormDialog.vue'
 import AttrMatchResultDialog from './AttrMatchResultDialog.vue'
diff --git a/src/components/FormFields/JsonEditor.vue b/src/components/Form/FormFields/JsonEditor.vue
similarity index 98%
rename from src/components/FormFields/JsonEditor.vue
rename to src/components/Form/FormFields/JsonEditor.vue
index 1165f7188..2f0a3e2be 100644
--- a/src/components/FormFields/JsonEditor.vue
+++ b/src/components/Form/FormFields/JsonEditor.vue
@@ -60,7 +60,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/variables.scss";
+  @import "~@/styles/variables";
 
   .json-editor {
     .resize {
diff --git a/src/components/FormFields/Link.vue b/src/components/Form/FormFields/Link.vue
similarity index 100%
rename from src/components/FormFields/Link.vue
rename to src/components/Form/FormFields/Link.vue
diff --git a/src/components/FormFields/ListField.vue b/src/components/Form/FormFields/ListField.vue
similarity index 100%
rename from src/components/FormFields/ListField.vue
rename to src/components/Form/FormFields/ListField.vue
diff --git a/src/components/FormFields/NestedObjectSelect2.vue b/src/components/Form/FormFields/NestedObjectSelect2.vue
similarity index 98%
rename from src/components/FormFields/NestedObjectSelect2.vue
rename to src/components/Form/FormFields/NestedObjectSelect2.vue
index 90de42174..2d0d0d0d1 100644
--- a/src/components/FormFields/NestedObjectSelect2.vue
+++ b/src/components/Form/FormFields/NestedObjectSelect2.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Select2 from './Select2'
+import Select2 from './Select2.vue'
 
 export default {
   name: 'NestedObjectSelect2',
diff --git a/src/components/FormFields/PasswordInput.vue b/src/components/Form/FormFields/PasswordInput.vue
similarity index 100%
rename from src/components/FormFields/PasswordInput.vue
rename to src/components/Form/FormFields/PasswordInput.vue
diff --git a/src/components/FormFields/PhoneInput.vue b/src/components/Form/FormFields/PhoneInput.vue
similarity index 100%
rename from src/components/FormFields/PhoneInput.vue
rename to src/components/Form/FormFields/PhoneInput.vue
diff --git a/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue b/src/components/Form/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
similarity index 97%
rename from src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
rename to src/components/Form/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
index 00855ca60..b80759866 100644
--- a/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
+++ b/src/components/Form/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
@@ -30,7 +30,7 @@
 
 <script>
 import { AutoDataForm, Dialog } from '@/components'
-import JsonEditor from '@/components/FormFields/JsonEditor.vue'
+import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
 
 export default {
   name: 'ProtocolSetting',
diff --git a/src/components/FormFields/ProtocolSelector/index.vue b/src/components/Form/FormFields/ProtocolSelector/index.vue
similarity index 99%
rename from src/components/FormFields/ProtocolSelector/index.vue
rename to src/components/Form/FormFields/ProtocolSelector/index.vue
index 58e309063..4fe2447bd 100644
--- a/src/components/FormFields/ProtocolSelector/index.vue
+++ b/src/components/Form/FormFields/ProtocolSelector/index.vue
@@ -71,7 +71,7 @@
 </template>
 
 <script>
-import ProtocolSettingDialog from './ProtocolSettingDialog'
+import ProtocolSettingDialog from './ProtocolSettingDialog.vue'
 
 export default {
   components: {
diff --git a/src/components/FormFields/Secret.vue b/src/components/Form/FormFields/Secret.vue
similarity index 100%
rename from src/components/FormFields/Secret.vue
rename to src/components/Form/FormFields/Secret.vue
diff --git a/src/components/FormFields/Select2.vue b/src/components/Form/FormFields/Select2.vue
similarity index 100%
rename from src/components/FormFields/Select2.vue
rename to src/components/Form/FormFields/Select2.vue
diff --git a/src/components/FormFields/Switcher.vue b/src/components/Form/FormFields/Switcher.vue
similarity index 100%
rename from src/components/FormFields/Switcher.vue
rename to src/components/Form/FormFields/Switcher.vue
diff --git a/src/components/FormFields/TagInput.vue b/src/components/Form/FormFields/TagInput.vue
similarity index 100%
rename from src/components/FormFields/TagInput.vue
rename to src/components/Form/FormFields/TagInput.vue
diff --git a/src/components/FormFields/Text.vue b/src/components/Form/FormFields/Text.vue
similarity index 100%
rename from src/components/FormFields/Text.vue
rename to src/components/Form/FormFields/Text.vue
diff --git a/src/components/FormFields/TextReadonly.vue b/src/components/Form/FormFields/TextReadonly.vue
similarity index 100%
rename from src/components/FormFields/TextReadonly.vue
rename to src/components/Form/FormFields/TextReadonly.vue
diff --git a/src/components/FormFields/UpdateSelect.vue b/src/components/Form/FormFields/UpdateSelect.vue
similarity index 97%
rename from src/components/FormFields/UpdateSelect.vue
rename to src/components/Form/FormFields/UpdateSelect.vue
index 42389d83e..44672bead 100644
--- a/src/components/FormFields/UpdateSelect.vue
+++ b/src/components/Form/FormFields/UpdateSelect.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import Select2 from './Select2'
+import Select2 from './Select2.vue'
 import { hasUUID } from '@/utils/common'
 
 export default {
diff --git a/src/components/FormFields/UpdateToken.vue b/src/components/Form/FormFields/UpdateToken.vue
similarity index 100%
rename from src/components/FormFields/UpdateToken.vue
rename to src/components/Form/FormFields/UpdateToken.vue
diff --git a/src/components/FormFields/UploadField.vue b/src/components/Form/FormFields/UploadField.vue
similarity index 100%
rename from src/components/FormFields/UploadField.vue
rename to src/components/Form/FormFields/UploadField.vue
diff --git a/src/components/FormFields/UploadKey.vue b/src/components/Form/FormFields/UploadKey.vue
similarity index 100%
rename from src/components/FormFields/UploadKey.vue
rename to src/components/Form/FormFields/UploadKey.vue
diff --git a/src/components/FormFields/UploadSecret.vue b/src/components/Form/FormFields/UploadSecret.vue
similarity index 100%
rename from src/components/FormFields/UploadSecret.vue
rename to src/components/Form/FormFields/UploadSecret.vue
diff --git a/src/components/FormFields/UserPassword.vue b/src/components/Form/FormFields/UserPassword.vue
similarity index 98%
rename from src/components/FormFields/UserPassword.vue
rename to src/components/Form/FormFields/UserPassword.vue
index 15623da11..562a4d763 100644
--- a/src/components/FormFields/UserPassword.vue
+++ b/src/components/Form/FormFields/UserPassword.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import PasswordInput from './PasswordInput'
+import PasswordInput from './PasswordInput.vue'
 import { mapGetters } from 'vuex'
 import store from '@/store'
 import i18n from '@/i18n/i18n'
diff --git a/src/components/FormFields/WeekCronSelect.vue b/src/components/Form/FormFields/WeekCronSelect.vue
similarity index 100%
rename from src/components/FormFields/WeekCronSelect.vue
rename to src/components/Form/FormFields/WeekCronSelect.vue
diff --git a/src/components/Form/FormFields/index.js b/src/components/Form/FormFields/index.js
new file mode 100644
index 000000000..66ba1dda2
--- /dev/null
+++ b/src/components/Form/FormFields/index.js
@@ -0,0 +1,60 @@
+import Link from './Link.vue'
+import Text from './Text.vue'
+import Select2 from './Select2.vue'
+import TagInput from './TagInput.vue'
+import Switcher from './Switcher.vue'
+import UploadKey from './UploadKey.vue'
+import JsonEditor from './JsonEditor.vue'
+import PhoneInput from './PhoneInput.vue'
+import UploadField from './UploadField.vue'
+import UpdateToken from './UpdateToken.vue'
+import UserPassword from './UserPassword.vue'
+import DynamicInput from './DynamicInput.vue'
+import PasswordInput from './PasswordInput.vue'
+import UploadSecret from './UploadSecret.vue'
+import WeekCronSelect from './WeekCronSelect.vue'
+import NestedObjectSelect2 from './NestedObjectSelect2.vue'
+import DatetimeRangePicker from './DatetimeRangePicker.vue'
+import JSONManyToManySelect from './JSONManyToManySelect/index.vue'
+
+export default {
+  Text,
+  Link,
+  Switcher,
+  Select2,
+  TagInput,
+  UploadKey,
+  JsonEditor,
+  UpdateToken,
+  PhoneInput,
+  UploadField,
+  UserPassword,
+  DynamicInput,
+  PasswordInput,
+  UploadSecret,
+  WeekCronSelect,
+  NestedObjectSelect2,
+  DatetimeRangePicker,
+  JSONManyToManySelect
+}
+
+export {
+  Text,
+  Link,
+  Switcher,
+  Select2,
+  TagInput,
+  UploadKey,
+  JsonEditor,
+  UpdateToken,
+  PhoneInput,
+  UploadField,
+  UserPassword,
+  DynamicInput,
+  PasswordInput,
+  UploadSecret,
+  WeekCronSelect,
+  NestedObjectSelect2,
+  DatetimeRangePicker,
+  JSONManyToManySelect
+}
diff --git a/src/components/FormGroupHeader/index.vue b/src/components/Form/FormGroupHeader/index.vue
similarity index 100%
rename from src/components/FormGroupHeader/index.vue
rename to src/components/Form/FormGroupHeader/index.vue
diff --git a/src/components/FormFields/index.js b/src/components/FormFields/index.js
deleted file mode 100644
index 099435d65..000000000
--- a/src/components/FormFields/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import Link from './Link'
-import Text from './Text'
-import Select2 from './Select2'
-import TagInput from './TagInput'
-import Switcher from './Switcher'
-import UploadKey from './UploadKey'
-import JsonEditor from './JsonEditor'
-import PhoneInput from './PhoneInput'
-import UploadField from './UploadField'
-import UpdateToken from './UpdateToken'
-import UserPassword from './UserPassword'
-import DynamicInput from './DynamicInput'
-import PasswordInput from './PasswordInput'
-import UploadSecret from './UploadSecret'
-import WeekCronSelect from './WeekCronSelect'
-import NestedObjectSelect2 from './NestedObjectSelect2'
-import DatetimeRangePicker from './DatetimeRangePicker'
-import JSONManyToManySelect from './JSONManyToManySelect/index.vue'
-
-export default {
-  Text,
-  Link,
-  Switcher,
-  Select2,
-  TagInput,
-  UploadKey,
-  JsonEditor,
-  UpdateToken,
-  PhoneInput,
-  UploadField,
-  UserPassword,
-  DynamicInput,
-  PasswordInput,
-  UploadSecret,
-  WeekCronSelect,
-  NestedObjectSelect2,
-  DatetimeRangePicker,
-  JSONManyToManySelect
-}
-
-export {
-  Text,
-  Link,
-  Switcher,
-  Select2,
-  TagInput,
-  UploadKey,
-  JsonEditor,
-  UpdateToken,
-  PhoneInput,
-  UploadField,
-  UserPassword,
-  DynamicInput,
-  PasswordInput,
-  UploadSecret,
-  WeekCronSelect,
-  NestedObjectSelect2,
-  DatetimeRangePicker,
-  JSONManyToManySelect
-}
diff --git a/src/components/QuickActions/action.vue b/src/components/QuickActions/action.vue
index d9a0afed7..d33257016 100644
--- a/src/components/QuickActions/action.vue
+++ b/src/components/QuickActions/action.vue
@@ -24,9 +24,9 @@
 </template>
 
 <script>
-import Switcher from '../FormFields/Switcher'
-import Select2 from '../FormFields/Select2'
-import UpdateSelect from '../FormFields/UpdateSelect'
+import Switcher from '@/components/Form/FormFields/Switcher'
+import Select2 from '@/components/Form/FormFields/Select2'
+import UpdateSelect from '@/components/Form/FormFields/UpdateSelect'
 
 class Action {
   constructor() {
diff --git a/src/components/AutoDataSearch/index.vue b/src/components/Table/AutoDataSearch/index.vue
similarity index 97%
rename from src/components/AutoDataSearch/index.vue
rename to src/components/Table/AutoDataSearch/index.vue
index 68085eadb..687b7c160 100644
--- a/src/components/AutoDataSearch/index.vue
+++ b/src/components/Table/AutoDataSearch/index.vue
@@ -3,8 +3,9 @@
 </template>
 
 <script>
-import TagSearch from '@/components/TagSearch'
+import TagSearch from '@/components/Table/TagSearch/index.vue'
 import i18n from '@/i18n/i18n'
+
 export default {
   name: 'AutoDataSearch',
   components: {
diff --git a/src/components/AutoDataTable/components/ColumnSettingPopover.vue b/src/components/Table/AutoDataTable/components/ColumnSettingPopover.vue
similarity index 97%
rename from src/components/AutoDataTable/components/ColumnSettingPopover.vue
rename to src/components/Table/AutoDataTable/components/ColumnSettingPopover.vue
index d3acfe264..18e592d83 100644
--- a/src/components/AutoDataTable/components/ColumnSettingPopover.vue
+++ b/src/components/Table/AutoDataTable/components/ColumnSettingPopover.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index'
+import Dialog from '@/components/Dialog/index.vue'
 
 export default {
   name: 'ColumnSettingPopover',
diff --git a/src/components/AutoDataTable/index.vue b/src/components/Table/AutoDataTable/index.vue
similarity index 98%
rename from src/components/AutoDataTable/index.vue
rename to src/components/Table/AutoDataTable/index.vue
index ec90d80c5..e860d94c7 100644
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/Table/AutoDataTable/index.vue
@@ -20,19 +20,14 @@
 </template>
 
 <script type="text/jsx">
-import DataTable from '../DataTable'
+import DataTable from '@/components/Table/DataTable/index.vue'
 import {
-  ActionsFormatter,
-  ArrayFormatter,
-  ChoicesFormatter,
-  DateFormatter,
-  DetailFormatter,
-  DisplayFormatter,
+  ActionsFormatter, ArrayFormatter, ChoicesFormatter, DateFormatter, DetailFormatter, DisplayFormatter,
   ObjectRelatedFormatter
-} from '@/components/TableFormatters'
+} from '@/components/Table/TableFormatters'
 import i18n from '@/i18n/i18n'
 import { newURL, replaceAllUUID } from '@/utils/common'
-import ColumnSettingPopover from './components/ColumnSettingPopover'
+import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
 
 export default {
   name: 'AutoDataTable',
diff --git a/src/components/DataTable/compenents/el-data-table/components/el-data-table-column.js b/src/components/Table/DataTable/compenents/el-data-table/components/el-data-table-column.js
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/components/el-data-table-column.js
rename to src/components/Table/DataTable/compenents/el-data-table/components/el-data-table-column.js
diff --git a/src/components/DataTable/compenents/el-data-table/components/self-loading-button.vue b/src/components/Table/DataTable/compenents/el-data-table/components/self-loading-button.vue
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/components/self-loading-button.vue
rename to src/components/Table/DataTable/compenents/el-data-table/components/self-loading-button.vue
diff --git a/src/components/DataTable/compenents/el-data-table/components/text-button.vue b/src/components/Table/DataTable/compenents/el-data-table/components/text-button.vue
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/components/text-button.vue
rename to src/components/Table/DataTable/compenents/el-data-table/components/text-button.vue
diff --git a/src/components/DataTable/compenents/el-data-table/components/the-dialog.vue b/src/components/Table/DataTable/compenents/el-data-table/components/the-dialog.vue
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/components/the-dialog.vue
rename to src/components/Table/DataTable/compenents/el-data-table/components/the-dialog.vue
diff --git a/src/components/DataTable/compenents/el-data-table/el-data-table.md b/src/components/Table/DataTable/compenents/el-data-table/el-data-table.md
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/el-data-table.md
rename to src/components/Table/DataTable/compenents/el-data-table/el-data-table.md
diff --git a/src/components/DataTable/compenents/el-data-table/el-data-table.vue b/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue
similarity index 99%
rename from src/components/DataTable/compenents/el-data-table/el-data-table.vue
rename to src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue
index cbbecb158..79a87986d 100644
--- a/src/components/DataTable/compenents/el-data-table/el-data-table.vue
+++ b/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue
@@ -1216,7 +1216,7 @@ export default {
     },
 
     // 树形table相关
-    // https://github.com/PanJiaChen/vue-element-admin/tree/master/src/components/TreeTable
+    // https://github.com/PanJiaChen/vue-element-admin/tree/master/@/components/TreeTable
     tree2Array(data, expandAll, parent = null, level = null) {
       let tmp = []
       data.forEach(record => {
diff --git a/src/components/DataTable/compenents/el-data-table/index.js b/src/components/Table/DataTable/compenents/el-data-table/index.js
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/index.js
rename to src/components/Table/DataTable/compenents/el-data-table/index.js
diff --git a/src/components/DataTable/compenents/el-data-table/index.less b/src/components/Table/DataTable/compenents/el-data-table/index.less
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/index.less
rename to src/components/Table/DataTable/compenents/el-data-table/index.less
diff --git a/src/components/DataTable/compenents/el-data-table/utils/extract-keys.js b/src/components/Table/DataTable/compenents/el-data-table/utils/extract-keys.js
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/utils/extract-keys.js
rename to src/components/Table/DataTable/compenents/el-data-table/utils/extract-keys.js
diff --git a/src/components/DataTable/compenents/el-data-table/utils/is-falsey.js b/src/components/Table/DataTable/compenents/el-data-table/utils/is-falsey.js
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/utils/is-falsey.js
rename to src/components/Table/DataTable/compenents/el-data-table/utils/is-falsey.js
diff --git a/src/components/DataTable/compenents/el-data-table/utils/query.js b/src/components/Table/DataTable/compenents/el-data-table/utils/query.js
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/utils/query.js
rename to src/components/Table/DataTable/compenents/el-data-table/utils/query.js
diff --git a/src/components/DataTable/compenents/el-data-table/utils/search-immediately-item.js b/src/components/Table/DataTable/compenents/el-data-table/utils/search-immediately-item.js
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/utils/search-immediately-item.js
rename to src/components/Table/DataTable/compenents/el-data-table/utils/search-immediately-item.js
diff --git a/src/components/DataTable/compenents/el-data-table/utils/select-strategy.js b/src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js
similarity index 100%
rename from src/components/DataTable/compenents/el-data-table/utils/select-strategy.js
rename to src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js
diff --git a/src/components/DataTable/index.vue b/src/components/Table/DataTable/index.vue
similarity index 100%
rename from src/components/DataTable/index.vue
rename to src/components/Table/DataTable/index.vue
diff --git a/src/components/ListTable/TableAction/ExportDialog.vue b/src/components/Table/ListTable/TableAction/ExportDialog.vue
similarity index 96%
rename from src/components/ListTable/TableAction/ExportDialog.vue
rename to src/components/Table/ListTable/TableAction/ExportDialog.vue
index 00d51b00c..2a4fb73da 100644
--- a/src/components/ListTable/TableAction/ExportDialog.vue
+++ b/src/components/Table/ListTable/TableAction/ExportDialog.vue
@@ -49,10 +49,10 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import UserConfirmDialog from '@/components/UserConfirmDialog'
+import Dialog from '@/components/Dialog/index.vue'
+import UserConfirmDialog from '@/components/Apps/UserConfirmDialog/index.vue'
 import { createSourceIdCache } from '@/api/common'
-import * as queryUtil from '@/components/DataTable/compenents/el-data-table/utils/query'
+import * as queryUtil from '@/components/Table/DataTable/compenents/el-data-table/utils/query'
 
 export default {
   name: 'ExportDialog',
diff --git a/src/components/ListTable/TableAction/ImExportDialog.vue b/src/components/Table/ListTable/TableAction/ImExportDialog.vue
similarity index 87%
rename from src/components/ListTable/TableAction/ImExportDialog.vue
rename to src/components/Table/ListTable/TableAction/ImExportDialog.vue
index df353a8d4..ab112b42f 100644
--- a/src/components/ListTable/TableAction/ImExportDialog.vue
+++ b/src/components/Table/ListTable/TableAction/ImExportDialog.vue
@@ -6,8 +6,8 @@
 </template>
 
 <script>
-import ExportDialog from './ExportDialog'
-import ImportDialog from './ImportDialog'
+import ExportDialog from './ExportDialog.vue'
+import ImportDialog from './ImportDialog.vue'
 
 export default {
   name: 'ImExportDialog',
diff --git a/src/components/ListTable/TableAction/ImportDialog.vue b/src/components/Table/ListTable/TableAction/ImportDialog.vue
similarity index 97%
rename from src/components/ListTable/TableAction/ImportDialog.vue
rename to src/components/Table/ListTable/TableAction/ImportDialog.vue
index 1c459272f..bc2130fec 100644
--- a/src/components/ListTable/TableAction/ImportDialog.vue
+++ b/src/components/Table/ListTable/TableAction/ImportDialog.vue
@@ -66,8 +66,8 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
-import ImportTable from '@/components/ListTable/TableAction/ImportTable'
+import Dialog from '@/components/Dialog/index.vue'
+import ImportTable from '@/components/Table/ListTable/TableAction/ImportTable.vue'
 import { getErrorResponseMsg } from '@/utils/common'
 import { createSourceIdCache } from '@/api/common'
 
@@ -240,7 +240,7 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-  @import "~@/styles/variables.scss";
+  @import "~@/styles/variables";
   .error-msg {
     color: $--color-danger;
   }
diff --git a/src/components/ListTable/TableAction/ImportTable.vue b/src/components/Table/ListTable/TableAction/ImportTable.vue
similarity index 99%
rename from src/components/ListTable/TableAction/ImportTable.vue
rename to src/components/Table/ListTable/TableAction/ImportTable.vue
index b873afa6d..55b832abc 100644
--- a/src/components/ListTable/TableAction/ImportTable.vue
+++ b/src/components/Table/ListTable/TableAction/ImportTable.vue
@@ -32,9 +32,9 @@
 </template>
 
 <script>
-import DataTable from '@/components/DataTable'
+import DataTable from '@/components/Table/DataTable/index.vue'
 import { getUpdateObjURL, sleep } from '@/utils/common'
-import { EditableInputFormatter, StatusFormatter } from '@/components/TableFormatters'
+import { EditableInputFormatter, StatusFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/crypto'
 
 export default {
@@ -425,7 +425,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/styles/variables.scss";
+@import "~@/styles/variables";
 .summary-item {
   padding: 0 10px
 }
diff --git a/src/components/ListTable/TableAction/LeftSide.vue b/src/components/Table/ListTable/TableAction/LeftSide.vue
similarity index 99%
rename from src/components/ListTable/TableAction/LeftSide.vue
rename to src/components/Table/ListTable/TableAction/LeftSide.vue
index 081c0603c..0b86f4d4c 100644
--- a/src/components/ListTable/TableAction/LeftSide.vue
+++ b/src/components/Table/ListTable/TableAction/LeftSide.vue
@@ -9,7 +9,7 @@
 
 <script>
 import i18n from '@/i18n/i18n'
-import DataActions from '@/components/DataActions'
+import DataActions from '@/components/DataActions/index.vue'
 import { createSourceIdCache } from '@/api/common'
 import { cleanActions } from './utils'
 
diff --git a/src/components/ListTable/TableAction/RightSide.vue b/src/components/Table/ListTable/TableAction/RightSide.vue
similarity index 96%
rename from src/components/ListTable/TableAction/RightSide.vue
rename to src/components/Table/ListTable/TableAction/RightSide.vue
index b72c32ec9..894012924 100644
--- a/src/components/ListTable/TableAction/RightSide.vue
+++ b/src/components/Table/ListTable/TableAction/RightSide.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
-    <ActionsGroup :is-fa="true" :actions="rightSideActions" class="right-side-actions right-side-item" />
+    <ActionsGroup :actions="rightSideActions" :is-fa="true" class="right-side-actions right-side-item" />
     <ImExportDialog
-      :selected-rows="selectedRows"
       :export-options="iExportOptions"
       :import-options="iImportOptions"
+      :selected-rows="selectedRows"
       v-bind="$attrs"
       @importDialogClose="onImportDialogClose"
     />
@@ -12,8 +12,8 @@
 </template>
 
 <script>
-import ActionsGroup from '@/components/ActionsGroup'
-import ImExportDialog from './ImExportDialog'
+import ActionsGroup from '@/components/ActionsGroup/index.vue'
+import ImExportDialog from './ImExportDialog.vue'
 import { cleanActions } from './utils'
 import { assignIfNot } from '@/utils/common'
 
diff --git a/src/components/ListTable/TableAction/index.vue b/src/components/Table/ListTable/TableAction/index.vue
similarity index 94%
rename from src/components/ListTable/TableAction/index.vue
rename to src/components/Table/ListTable/TableAction/index.vue
index 6a7754a67..8daa09a73 100644
--- a/src/components/ListTable/TableAction/index.vue
+++ b/src/components/Table/ListTable/TableAction/index.vue
@@ -36,10 +36,10 @@
 </template>
 
 <script>
-import LeftSide from './LeftSide'
-import RightSide from './RightSide'
-import AutoDataSearch from '@/components/AutoDataSearch'
-import DatetimeRangePicker from '@/components/FormFields/DatetimeRangePicker'
+import LeftSide from './LeftSide.vue'
+import RightSide from './RightSide.vue'
+import AutoDataSearch from '@/components/Table/AutoDataSearch/index.vue'
+import DatetimeRangePicker from '@/components/Form/FormFields/DatetimeRangePicker.vue'
 import { getDaysAgo, getDaysFuture } from '@/utils/common'
 
 const defaultTrue = { type: Boolean, default: true }
diff --git a/src/components/ListTable/TableAction/utils.js b/src/components/Table/ListTable/TableAction/utils.js
similarity index 100%
rename from src/components/ListTable/TableAction/utils.js
rename to src/components/Table/ListTable/TableAction/utils.js
diff --git a/src/components/ListTable/index.vue b/src/components/Table/ListTable/index.vue
similarity index 97%
rename from src/components/ListTable/index.vue
rename to src/components/Table/ListTable/index.vue
index 597ae2404..aebb94632 100644
--- a/src/components/ListTable/index.vue
+++ b/src/components/Table/ListTable/index.vue
@@ -25,10 +25,10 @@
 import { getResourceFromApiUrl } from '@/utils/jms'
 import deepmerge from 'deepmerge'
 import { mapGetters } from 'vuex'
-import IBox from '../IBox'
-import TableAction from './TableAction'
+import IBox from '../../IBox/index.vue'
+import TableAction from './TableAction/index.vue'
 import Emitter from '@/mixins/emitter'
-import AutoDataTable from '../AutoDataTable'
+import AutoDataTable from '../AutoDataTable/index.vue'
 import { getDayEnd, getDaysAgo } from '@/utils/common'
 
 export default {
diff --git a/src/components/Pagination/index.vue b/src/components/Table/Pagination/index.vue
similarity index 100%
rename from src/components/Pagination/index.vue
rename to src/components/Table/Pagination/index.vue
diff --git a/src/components/TabTree/index.vue b/src/components/Table/TabTree/index.vue
similarity index 98%
rename from src/components/TabTree/index.vue
rename to src/components/Table/TabTree/index.vue
index 31170e6dc..e934ab552 100644
--- a/src/components/TabTree/index.vue
+++ b/src/components/Table/TabTree/index.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import AutoDataZTree from '../AutoDataZTree'
+import AutoDataZTree from '@/components/Tree/AutoDataZTree/index.vue'
 import merge from 'webpack-merge'
 
 const ACTIVE_TREE_TAB_KEY = 'activeTreeTab'
diff --git a/src/components/TableFormatters/ActionsFormatter.vue b/src/components/Table/TableFormatters/ActionsFormatter.vue
similarity index 98%
rename from src/components/TableFormatters/ActionsFormatter.vue
rename to src/components/Table/TableFormatters/ActionsFormatter.vue
index b4af66968..d77ae9319 100644
--- a/src/components/TableFormatters/ActionsFormatter.vue
+++ b/src/components/Table/TableFormatters/ActionsFormatter.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import ActionsGroup from '@/components/ActionsGroup'
-import BaseFormatter from './base'
+import ActionsGroup from '@/components/ActionsGroup/index.vue'
+import BaseFormatter from './base.vue'
 
 const defaultPerformDelete = function({ row, col }) {
   const id = row.id
diff --git a/src/components/TableFormatters/AmountFormatter.vue b/src/components/Table/TableFormatters/AmountFormatter.vue
similarity index 95%
rename from src/components/TableFormatters/AmountFormatter.vue
rename to src/components/Table/TableFormatters/AmountFormatter.vue
index 9cbd213a6..5590b007f 100644
--- a/src/components/TableFormatters/AmountFormatter.vue
+++ b/src/components/Table/TableFormatters/AmountFormatter.vue
@@ -20,8 +20,8 @@
 </template>
 
 <script>
-import DetailFormatter from './DetailFormatter'
-import BaseFormatter from './base'
+import DetailFormatter from './DetailFormatter.vue'
+import BaseFormatter from './base.vue'
 
 export default {
   name: 'AmountFormatter',
diff --git a/src/components/TableFormatters/ArrayFormatter.vue b/src/components/Table/TableFormatters/ArrayFormatter.vue
similarity index 94%
rename from src/components/TableFormatters/ArrayFormatter.vue
rename to src/components/Table/TableFormatters/ArrayFormatter.vue
index 00631d54f..e477e484f 100644
--- a/src/components/TableFormatters/ArrayFormatter.vue
+++ b/src/components/Table/TableFormatters/ArrayFormatter.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 export default {
   name: 'ArrayFormatter',
   extends: BaseFormatter,
diff --git a/src/components/TableFormatters/ChoicesFormatter.vue b/src/components/Table/TableFormatters/ChoicesFormatter.vue
similarity index 98%
rename from src/components/TableFormatters/ChoicesFormatter.vue
rename to src/components/Table/TableFormatters/ChoicesFormatter.vue
index 9ca58b5ee..b9e0e7238 100644
--- a/src/components/TableFormatters/ChoicesFormatter.vue
+++ b/src/components/Table/TableFormatters/ChoicesFormatter.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 
 export default {
   name: 'ChoicesFormatter',
diff --git a/src/components/TableFormatters/DateFormatter.vue b/src/components/Table/TableFormatters/DateFormatter.vue
similarity index 94%
rename from src/components/TableFormatters/DateFormatter.vue
rename to src/components/Table/TableFormatters/DateFormatter.vue
index 4f2da1d09..6dcc13967 100644
--- a/src/components/TableFormatters/DateFormatter.vue
+++ b/src/components/Table/TableFormatters/DateFormatter.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 import { toSafeLocalDateStr } from '@/utils/common'
 export default {
   name: 'DateFormatter',
diff --git a/src/components/TableFormatters/DeleteActionFormatter.vue b/src/components/Table/TableFormatters/DeleteActionFormatter.vue
similarity index 97%
rename from src/components/TableFormatters/DeleteActionFormatter.vue
rename to src/components/Table/TableFormatters/DeleteActionFormatter.vue
index d8380894b..64b3c1345 100644
--- a/src/components/TableFormatters/DeleteActionFormatter.vue
+++ b/src/components/Table/TableFormatters/DeleteActionFormatter.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 
 export default {
   name: 'DeleteActionFormatter',
diff --git a/src/components/TableFormatters/DetailFormatter.vue b/src/components/Table/TableFormatters/DetailFormatter.vue
similarity index 98%
rename from src/components/TableFormatters/DetailFormatter.vue
rename to src/components/Table/TableFormatters/DetailFormatter.vue
index 459ef7c90..ddd2dc405 100644
--- a/src/components/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 
 export default {
   name: 'DetailFormatter',
diff --git a/src/components/TableFormatters/DialogDetailFormatter.vue b/src/components/Table/TableFormatters/DialogDetailFormatter.vue
similarity index 84%
rename from src/components/TableFormatters/DialogDetailFormatter.vue
rename to src/components/Table/TableFormatters/DialogDetailFormatter.vue
index db21fc746..ae77f4e10 100644
--- a/src/components/TableFormatters/DialogDetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DialogDetailFormatter.vue
@@ -1,24 +1,25 @@
 <template>
   <div>
-    <el-link class="detail" :type="col.type || 'success'" @click="dialogVisible=true">
+    <el-link :type="col.type || 'success'" class="detail" @click="dialogVisible=true">
       {{ iTitle }}
     </el-link>
     <Dialog
-      width="60%"
-      :visible.sync="dialogVisible"
-      :title="dialogTitle"
       :show-cancel="false"
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="60%"
       @confirm="onCancel"
     >
-      <DetailCard class="card" :items="detailCardItems" :title="detailTitle" />
+      <DetailCard :items="detailCardItems" :title="detailTitle" class="card" />
     </Dialog>
   </div>
 </template>
 
 <script>
-import DetailCard from '@/components/DetailCard'
-import Dialog from '@/components/Dialog'
-import BaseFormatter from './base'
+import DetailCard from '@/components/Cards/DetailCard/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
+import BaseFormatter from './base.vue'
+
 export default {
   name: 'DialogDetailFormatter',
   components: {
diff --git a/src/components/TableFormatters/DisplayFormatter.vue b/src/components/Table/TableFormatters/DisplayFormatter.vue
similarity index 95%
rename from src/components/TableFormatters/DisplayFormatter.vue
rename to src/components/Table/TableFormatters/DisplayFormatter.vue
index 612144a5c..374c05a02 100644
--- a/src/components/TableFormatters/DisplayFormatter.vue
+++ b/src/components/Table/TableFormatters/DisplayFormatter.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 export default {
   name: 'DisplayFormatter',
   extends: BaseFormatter,
diff --git a/src/components/TableFormatters/EditableInputFormatter.vue b/src/components/Table/TableFormatters/EditableInputFormatter.vue
similarity index 98%
rename from src/components/TableFormatters/EditableInputFormatter.vue
rename to src/components/Table/TableFormatters/EditableInputFormatter.vue
index e7b8cc33e..c7c8997c0 100644
--- a/src/components/TableFormatters/EditableInputFormatter.vue
+++ b/src/components/Table/TableFormatters/EditableInputFormatter.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 
 export default {
   name: 'EditableInputFormatter',
diff --git a/src/components/TableFormatters/GrantedAccountShowFormatter.vue b/src/components/Table/TableFormatters/GrantedAccountShowFormatter.vue
similarity index 95%
rename from src/components/TableFormatters/GrantedAccountShowFormatter.vue
rename to src/components/Table/TableFormatters/GrantedAccountShowFormatter.vue
index 44f3303a3..6889c3da3 100644
--- a/src/components/TableFormatters/GrantedAccountShowFormatter.vue
+++ b/src/components/Table/TableFormatters/GrantedAccountShowFormatter.vue
@@ -4,7 +4,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 export default {
   name: 'GrantedSystemUsersShowFormatter',
   extends: BaseFormatter,
diff --git a/src/components/TableFormatters/HostInfoFormatter.vue b/src/components/Table/TableFormatters/HostInfoFormatter.vue
similarity index 95%
rename from src/components/TableFormatters/HostInfoFormatter.vue
rename to src/components/Table/TableFormatters/HostInfoFormatter.vue
index d05b173ca..c3e2b918b 100644
--- a/src/components/TableFormatters/HostInfoFormatter.vue
+++ b/src/components/Table/TableFormatters/HostInfoFormatter.vue
@@ -19,8 +19,8 @@
 </template>
 
 <script>
-import DetailFormatter from './DetailFormatter'
-import BaseFormatter from './base'
+import DetailFormatter from './DetailFormatter.vue'
+import BaseFormatter from './base.vue'
 export default {
   name: 'HostInfoFormatter',
   components: {
diff --git a/src/components/TableFormatters/ObjectRelatedFormatter.vue b/src/components/Table/TableFormatters/ObjectRelatedFormatter.vue
similarity index 97%
rename from src/components/TableFormatters/ObjectRelatedFormatter.vue
rename to src/components/Table/TableFormatters/ObjectRelatedFormatter.vue
index b96aa53a3..a709aa573 100644
--- a/src/components/TableFormatters/ObjectRelatedFormatter.vue
+++ b/src/components/Table/TableFormatters/ObjectRelatedFormatter.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 export default {
   name: 'ObjectRelatedFormatter',
   extends: BaseFormatter,
diff --git a/src/components/TableFormatters/ProtocolsFormatter.vue b/src/components/Table/TableFormatters/ProtocolsFormatter.vue
similarity index 95%
rename from src/components/TableFormatters/ProtocolsFormatter.vue
rename to src/components/Table/TableFormatters/ProtocolsFormatter.vue
index de2732959..dece22221 100644
--- a/src/components/TableFormatters/ProtocolsFormatter.vue
+++ b/src/components/Table/TableFormatters/ProtocolsFormatter.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 
 export default {
   name: 'ProtocolsFormatter',
diff --git a/src/components/TableFormatters/ShowKeyCopyFormatter.vue b/src/components/Table/TableFormatters/ShowKeyCopyFormatter.vue
similarity index 98%
rename from src/components/TableFormatters/ShowKeyCopyFormatter.vue
rename to src/components/Table/TableFormatters/ShowKeyCopyFormatter.vue
index 90549301a..cac9543f6 100644
--- a/src/components/TableFormatters/ShowKeyCopyFormatter.vue
+++ b/src/components/Table/TableFormatters/ShowKeyCopyFormatter.vue
@@ -27,7 +27,7 @@
 
 <script>
 import { downloadText } from '@/utils/common'
-import BaseFormatter from '@/components/TableFormatters/base'
+import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
 import { copy } from '@/utils/common'
 
 export default {
diff --git a/src/components/TableFormatters/StatusFormatter.vue b/src/components/Table/TableFormatters/StatusFormatter.vue
similarity index 97%
rename from src/components/TableFormatters/StatusFormatter.vue
rename to src/components/Table/TableFormatters/StatusFormatter.vue
index 762e0e3c5..c54fb3fb7 100644
--- a/src/components/TableFormatters/StatusFormatter.vue
+++ b/src/components/Table/TableFormatters/StatusFormatter.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 
 export default {
   name: 'StatusFormatter',
diff --git a/src/components/TableFormatters/TagChoicesFormatter.vue b/src/components/Table/TableFormatters/TagChoicesFormatter.vue
similarity index 97%
rename from src/components/TableFormatters/TagChoicesFormatter.vue
rename to src/components/Table/TableFormatters/TagChoicesFormatter.vue
index 1c2ea79b3..98de3754b 100644
--- a/src/components/TableFormatters/TagChoicesFormatter.vue
+++ b/src/components/Table/TableFormatters/TagChoicesFormatter.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 
 export default {
   name: 'TagChoicesFormatter',
diff --git a/src/components/TableFormatters/TagsFormatter.vue b/src/components/Table/TableFormatters/TagsFormatter.vue
similarity index 96%
rename from src/components/TableFormatters/TagsFormatter.vue
rename to src/components/Table/TableFormatters/TagsFormatter.vue
index bc04085e6..4e57600d3 100644
--- a/src/components/TableFormatters/TagsFormatter.vue
+++ b/src/components/Table/TableFormatters/TagsFormatter.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
+import BaseFormatter from './base.vue'
 export default {
   name: 'TagsFormatter',
   extends: BaseFormatter,
diff --git a/src/components/TableFormatters/TwoTabFormatter.vue b/src/components/Table/TableFormatters/TwoTabFormatter.vue
similarity index 100%
rename from src/components/TableFormatters/TwoTabFormatter.vue
rename to src/components/Table/TableFormatters/TwoTabFormatter.vue
diff --git a/src/components/TableFormatters/base.vue b/src/components/Table/TableFormatters/base.vue
similarity index 100%
rename from src/components/TableFormatters/base.vue
rename to src/components/Table/TableFormatters/base.vue
diff --git a/src/components/TableFormatters/index.js b/src/components/Table/TableFormatters/index.js
similarity index 50%
rename from src/components/TableFormatters/index.js
rename to src/components/Table/TableFormatters/index.js
index 9733565f0..38fa1d8a4 100644
--- a/src/components/TableFormatters/index.js
+++ b/src/components/Table/TableFormatters/index.js
@@ -1,18 +1,18 @@
-import DetailFormatter from './DetailFormatter'
-import ArrayFormatter from './ArrayFormatter'
-import DisplayFormatter from './DisplayFormatter'
-import ChoicesFormatter from './ChoicesFormatter'
-import ActionsFormatter from './ActionsFormatter'
-import DeleteActionFormatter from './DeleteActionFormatter'
-import DateFormatter from './DateFormatter'
-import AccountShowFormatter from './GrantedAccountShowFormatter'
-import ShowKeyCopyFormatter from './ShowKeyCopyFormatter'
-import DialogDetailFormatter from './DialogDetailFormatter'
-import EditableInputFormatter from './EditableInputFormatter'
-import StatusFormatter from './StatusFormatter'
-import TagsFormatter from './TagsFormatter'
-import ObjectRelatedFormatter from './ObjectRelatedFormatter'
-import TwoTabFormatter from './TwoTabFormatter'
+import DetailFormatter from './DetailFormatter.vue'
+import ArrayFormatter from './ArrayFormatter.vue'
+import DisplayFormatter from './DisplayFormatter.vue'
+import ChoicesFormatter from './ChoicesFormatter.vue'
+import ActionsFormatter from './ActionsFormatter.vue'
+import DeleteActionFormatter from './DeleteActionFormatter.vue'
+import DateFormatter from './DateFormatter.vue'
+import AccountShowFormatter from './GrantedAccountShowFormatter.vue'
+import ShowKeyCopyFormatter from './ShowKeyCopyFormatter.vue'
+import DialogDetailFormatter from './DialogDetailFormatter.vue'
+import EditableInputFormatter from './EditableInputFormatter.vue'
+import StatusFormatter from './StatusFormatter.vue'
+import TagsFormatter from './TagsFormatter.vue'
+import ObjectRelatedFormatter from './ObjectRelatedFormatter.vue'
+import TwoTabFormatter from './TwoTabFormatter.vue'
 import ProtocolsFormatter from './ProtocolsFormatter.vue'
 import TagChoicesFormatter from './TagChoicesFormatter.vue'
 
diff --git a/src/components/TagSearch/index.vue b/src/components/Table/TagSearch/index.vue
similarity index 100%
rename from src/components/TagSearch/index.vue
rename to src/components/Table/TagSearch/index.vue
diff --git a/src/components/TreeTable/components/AssetTree.vue b/src/components/Table/TreeTable/components/AssetTree.vue
similarity index 100%
rename from src/components/TreeTable/components/AssetTree.vue
rename to src/components/Table/TreeTable/components/AssetTree.vue
diff --git a/src/components/TreeTable/components/FileTree.vue b/src/components/Table/TreeTable/components/FileTree.vue
similarity index 100%
rename from src/components/TreeTable/components/FileTree.vue
rename to src/components/Table/TreeTable/components/FileTree.vue
diff --git a/src/components/TreeTable/index.vue b/src/components/Table/TreeTable/index.vue
similarity index 93%
rename from src/components/TreeTable/index.vue
rename to src/components/Table/TreeTable/index.vue
index aeb9791cc..3daedcfee 100644
--- a/src/components/TreeTable/index.vue
+++ b/src/components/Table/TreeTable/index.vue
@@ -50,13 +50,13 @@
 </template>
 
 <script>
-import Dialog from '@/components/Dialog'
+import Dialog from '@/components/Dialog/index.vue'
 import { setUrlParam } from '@/utils/common'
-import ListTable from '@/components/ListTable/index'
-import FileTree from '@/components/TreeTable/components/FileTree.vue'
-import IBox from '../IBox'
-import TabTree from '../TabTree'
-import AutoDataZTree from '../AutoDataZTree'
+import ListTable from '@/components/Table/ListTable/index.vue'
+import FileTree from '@/components/Table/TreeTable/components/FileTree.vue'
+import IBox from '../../IBox/index.vue'
+import TabTree from '../TabTree/index.vue'
+import AutoDataZTree from '@/components/Tree/AutoDataZTree/index.vue'
 
 export default {
   name: 'TreeTable',
diff --git a/src/components/AutoDataZTree/index.vue b/src/components/Tree/AutoDataZTree/index.vue
similarity index 99%
rename from src/components/AutoDataZTree/index.vue
rename to src/components/Tree/AutoDataZTree/index.vue
index 3123addc7..8fccd82f5 100644
--- a/src/components/AutoDataZTree/index.vue
+++ b/src/components/Tree/AutoDataZTree/index.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import DataZTree from '../DataZTree'
+import DataZTree from '../DataZTree/index.vue'
 import $ from '@/utils/jquery-vendor'
 import { mapGetters } from 'vuex'
 
diff --git a/src/components/DataZTree/components/ZTree/index.vue b/src/components/Tree/DataZTree/components/ZTree/index.vue
similarity index 100%
rename from src/components/DataZTree/components/ZTree/index.vue
rename to src/components/Tree/DataZTree/components/ZTree/index.vue
diff --git a/src/components/DataZTree/index.vue b/src/components/Tree/DataZTree/index.vue
similarity index 95%
rename from src/components/DataZTree/index.vue
rename to src/components/Tree/DataZTree/index.vue
index 9b3d40825..3d86bed12 100644
--- a/src/components/DataZTree/index.vue
+++ b/src/components/Tree/DataZTree/index.vue
@@ -2,13 +2,14 @@
   <ZTree ref="ztree" :setting="treeSetting" v-on="$listeners">
     <!--Slot透传-->
     <div slot="rMenu" slot-scope="{data}">
-      <slot name="rMenu" :data="data" />
+      <slot :data="data" name="rMenu" />
     </div>
   </ZTree>
 </template>
 
 <script>
-import ZTree from './components/ZTree'
+import ZTree from './components/ZTree/index.vue'
+
 export default {
   name: 'DataZTree',
   components: {
diff --git a/src/components/Announcement/index.vue b/src/components/Widgets/Announcement/index.vue
similarity index 100%
rename from src/components/Announcement/index.vue
rename to src/components/Widgets/Announcement/index.vue
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Widgets/Breadcrumb/index.vue
similarity index 100%
rename from src/components/Breadcrumb/index.vue
rename to src/components/Widgets/Breadcrumb/index.vue
diff --git a/src/components/Hamburger/index.vue b/src/components/Widgets/Hamburger/index.vue
similarity index 76%
rename from src/components/Hamburger/index.vue
rename to src/components/Widgets/Hamburger/index.vue
index 742159857..fae180780 100644
--- a/src/components/Hamburger/index.vue
+++ b/src/components/Widgets/Hamburger/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="padding: 0 20px;" @click="toggleClick">
-    <svg-icon icon-class="arrow-to-left" class="hamburger" style="color: #ffffff;" :class="{'is-active':isActive}" />
+    <svg-icon :class="{'is-active':isActive}" class="hamburger" icon-class="arrow-to-left" style="color: #ffffff;" />
   </div>
 </template>
 
@@ -22,7 +22,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "~@/styles/variables.scss";
+@import "~@/styles/variables";
 .hamburger {
   display: inline-block;
   vertical-align: middle;
diff --git a/src/components/Link/index.vue b/src/components/Widgets/Link/index.vue
similarity index 100%
rename from src/components/Link/index.vue
rename to src/components/Widgets/Link/index.vue
diff --git a/src/components/MarkDown/index.vue b/src/components/Widgets/MarkDown/index.vue
similarity index 100%
rename from src/components/MarkDown/index.vue
rename to src/components/Widgets/MarkDown/index.vue
diff --git a/src/components/SvgIcon/index.vue b/src/components/Widgets/SvgIcon/index.vue
similarity index 100%
rename from src/components/SvgIcon/index.vue
rename to src/components/Widgets/SvgIcon/index.vue
diff --git a/src/components/Term/index.vue b/src/components/Widgets/Term/index.vue
similarity index 99%
rename from src/components/Term/index.vue
rename to src/components/Widgets/Term/index.vue
index ea43c86b7..e15cf9ce6 100644
--- a/src/components/Term/index.vue
+++ b/src/components/Widgets/Term/index.vue
@@ -16,9 +16,7 @@
           </el-button>
         </el-tooltip>
       </div>
-
     </div>
-
     <div id="terminal" ref="terminal" class="xterm" />
   </div>
 </template>
diff --git a/src/components/Tooltip/index.vue b/src/components/Widgets/Tooltip/index.vue
similarity index 100%
rename from src/components/Tooltip/index.vue
rename to src/components/Widgets/Tooltip/index.vue
diff --git a/src/components/TopList/index.vue b/src/components/Widgets/TopList/index.vue
similarity index 94%
rename from src/components/TopList/index.vue
rename to src/components/Widgets/TopList/index.vue
index 92183dcaa..93fa5b7dc 100644
--- a/src/components/TopList/index.vue
+++ b/src/components/Widgets/TopList/index.vue
@@ -6,7 +6,9 @@
         <span class="pull-right">
           {{ item.count }} {{ unit }}
         </span>
-        <el-tag effect="dark" size="small" :type="getLabelType(index)">{{ index + 1 }}</el-tag>
+        <el-tag :type="getLabelType(index)" effect="dark" size="small">
+          {{ index + 1 }}
+        </el-tag>
         {{ item.name }}
       </li>
     </ul>
diff --git a/src/components/index.js b/src/components/index.js
index f468e85e6..702c88597 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,35 +1,35 @@
 export { default as ActionsGroup } from './ActionsGroup'
-export { default as AutoDataForm } from './AutoDataForm'
-export { default as AutoDataTable } from './AutoDataTable'
-export { default as AutoDataZTree } from './AutoDataZTree'
-export { default as Breadcrumb } from './Breadcrumb'
-export { default as DataForm } from './DataForm'
-export { default as DataTable } from './DataTable'
-export { default as DataZTree } from './DataZTree'
-export { default as DetailCard } from './DetailCard'
+export { default as AutoDataForm } from './Form/AutoDataForm'
+export { default as AutoDataTable } from './Table/AutoDataTable'
+export { default as AutoDataZTree } from './Tree/AutoDataZTree'
+export { default as Breadcrumb } from './Widgets/Breadcrumb'
+export { default as DataForm } from './Form/DataForm'
+export { default as DataTable } from './Table/DataTable'
+export { default as DataZTree } from './Tree/DataZTree'
+export { default as DetailCard } from './Cards/DetailCard'
 export { default as Dialog } from './Dialog'
-export { default as FormGroupHeader } from './FormGroupHeader'
-export { default as Hamburger } from './Hamburger'
-export { default as ListTable } from './ListTable'
-export { default as RelationCard } from './RelationCard'
-export { default as Select2 } from './FormFields/Select2'
-export { default as UploadKey } from './FormFields/UploadKey.vue'
-export { default as AssetSelect } from './AssetSelect'
-export { default as AutomationParams } from './AutomationParams'
-export { default as SvgIcon } from './SvgIcon'
-export { default as TreeTable } from './TreeTable'
-export { default as AssetTreeTable } from './AssetTreeTable'
+export { default as FormGroupHeader } from './Form/FormGroupHeader'
+export { default as Hamburger } from './Widgets/Hamburger'
+export { default as ListTable } from './Table/ListTable'
+export { default as RelationCard } from './Cards/RelationCard'
+export { default as Select2 } from './Form/FormFields/Select2'
+export { default as UploadKey } from './Form/FormFields/UploadKey.vue'
+export { default as AssetSelect } from './Apps/AssetSelect'
+export { default as AutomationParams } from './Apps/AutomationParams'
+export { default as SvgIcon } from './Widgets/SvgIcon'
+export { default as TreeTable } from './Table/TreeTable'
+export { default as AssetTreeTable } from './Apps/AssetTreeTable'
 export { default as IBox } from './IBox'
 export { default as QuickActions } from './QuickActions'
-export { default as Switcher } from './FormFields/Switcher'
-export { default as SummaryCard } from './SummaryCard'
-export { default as UploadField } from './FormFields/UploadField'
-export { default as AccountListTable } from './AccountListTable/AccountList'
-export { default as AssetRelationCard } from './AssetRelationCard'
-export { default as UserConfirmDialog } from './UserConfirmDialog'
-export { default as Announcement } from './Announcement'
-export { default as CronTab } from './CronTab'
-export { default as Pagination } from './Pagination'
-export { default as Tooltip } from './Tooltip'
-export { default as ResourceActivity } from './ResourceActivity'
-export { default as MarkDown } from './MarkDown'
+export { default as Switcher } from './Form/FormFields/Switcher'
+export { default as SummaryCard } from './Cards/SummaryCard'
+export { default as UploadField } from './Form/FormFields/UploadField'
+export { default as AccountListTable } from './Apps/AccountListTable/AccountList'
+export { default as AssetRelationCard } from './Apps/AssetRelationCard'
+export { default as UserConfirmDialog } from './Apps/UserConfirmDialog'
+export { default as Announcement } from './Widgets/Announcement'
+export { default as CronTab } from './Form/CronTab'
+export { default as Pagination } from './Table/Pagination'
+export { default as Tooltip } from './Widgets/Tooltip'
+export { default as ResourceActivity } from './Apps/ResourceActivity'
+export { default as MarkDown } from './Widgets/MarkDown'
diff --git a/src/icons/index.js b/src/icons/index.js
index 2c6b309c9..a0f8d62ee 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon'// svg component
+import SvgIcon from '@/components/Widgets/SvgIcon' // svg component
 
 // register globally
 Vue.component('svg-icon', SvgIcon)
diff --git a/src/layout/components/GenericCreateUpdateForm/index.vue b/src/layout/components/GenericCreateUpdateForm/index.vue
index 8e8c1db85..3967d2b93 100644
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/src/layout/components/GenericCreateUpdateForm/index.vue
@@ -15,7 +15,7 @@
   />
 </template>
 <script>
-import AutoDataForm from '@/components/AutoDataForm'
+import AutoDataForm from '@/components/Form/AutoDataForm'
 import { getUpdateObjURL } from '@/utils/common'
 import { encryptPassword } from '@/utils/crypto'
 import deepmerge from 'deepmerge'
diff --git a/src/layout/components/GenericDetailPage/index.vue b/src/layout/components/GenericDetailPage/index.vue
index 1bd9752a1..3b769cf21 100644
--- a/src/layout/components/GenericDetailPage/index.vue
+++ b/src/layout/components/GenericDetailPage/index.vue
@@ -20,7 +20,7 @@ import TabPage from '../TabPage'
 import { flashErrorMsg } from '@/utils/request'
 import { getApiPath } from '@/utils/common'
 import ActionsGroup from '@/components/ActionsGroup'
-import ResourceActivity from '@/components/ResourceActivity/index.vue'
+import ResourceActivity from '@/components/Apps/ResourceActivity/index.vue'
 import { mapGetters } from 'vuex'
 import Vue from 'vue'
 
diff --git a/src/layout/components/GenericListTable/index.vue b/src/layout/components/GenericListTable/index.vue
index 68f1589a2..84eb32ea3 100644
--- a/src/layout/components/GenericListTable/index.vue
+++ b/src/layout/components/GenericListTable/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable/index'
+import ListTable from '@/components/Table/ListTable/index'
 
 export default {
   name: 'GenericListTable',
diff --git a/src/layout/components/GenericTreeListPage/index.vue b/src/layout/components/GenericTreeListPage/index.vue
index 8c2583711..2dd22d692 100644
--- a/src/layout/components/GenericTreeListPage/index.vue
+++ b/src/layout/components/GenericTreeListPage/index.vue
@@ -9,7 +9,7 @@
         <slot name="table" />
       </template>
       <div slot="rMenu" slot-scope="{data}">
-        <slot name="rMenu" :data="data" />
+        <slot :data="data" name="rMenu" />
       </div>
     </TreeTable>
   </Page>
@@ -17,8 +17,9 @@
 
 <script>
 import Page from '@/layout/components/Page'
-import TreeTable from '@/components/TreeTable'
+import TreeTable from '@/components/Table/TreeTable'
 import { mapGetters } from 'vuex'
+
 export default {
   name: 'GenericTreeListPage',
   components: {
diff --git a/src/layout/components/NavHeader/index.vue b/src/layout/components/NavHeader/index.vue
index 7b60c84f8..d9dab901b 100644
--- a/src/layout/components/NavHeader/index.vue
+++ b/src/layout/components/NavHeader/index.vue
@@ -44,7 +44,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Hamburger from '@/components/Hamburger'
+import Hamburger from '@/components/Widgets/Hamburger'
 import AccountDropdown from './AccountDropdown'
 import SiteMessages from './SiteMessages'
 import Help from './Help'
diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index 3bcc47d54..89ad15e0c 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -54,7 +54,7 @@
         <Hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
       </div>
     </div>
-    <div class="mobile-menu" :class="{'is-show': viewShown}" @click="viewShown = false">
+    <div :class="{'is-show': viewShown}" class="mobile-menu" @click="viewShown = false">
       <ViewSwitcher :mode="'vertical'" />
     </div>
   </div>
@@ -63,7 +63,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
-import Hamburger from '@/components/Hamburger'
+import Hamburger from '@/components/Widgets/Hamburger'
 import ViewSwitcher from '../NavHeader/ViewSwitcher'
 import Organization from '../NavHeader/Organization'
 import variables from '@/styles/variables.scss'
diff --git a/src/views/accounts/Account/AccountDetail/Detail.vue b/src/views/accounts/Account/AccountDetail/Detail.vue
index 8c0863cab..83aa12123 100644
--- a/src/views/accounts/Account/AccountDetail/Detail.vue
+++ b/src/views/accounts/Account/AccountDetail/Detail.vue
@@ -23,9 +23,9 @@
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import QuickActions from '@/components/QuickActions'
-import ViewSecret from '@/components/AccountListTable/ViewSecret'
+import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret'
 import { openTaskPage } from '@/utils/jms'
 import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
 
diff --git a/src/views/accounts/Account/AccountDetail/index.vue b/src/views/accounts/Account/AccountDetail/index.vue
index 9bbf32880..a4984aed3 100644
--- a/src/views/accounts/Account/AccountDetail/index.vue
+++ b/src/views/accounts/Account/AccountDetail/index.vue
@@ -24,7 +24,7 @@
 <script>
 import { GenericDetailPage, TabPage } from '@/layout/components'
 import Detail from './Detail.vue'
-import AccountCreateUpdate from '@/components/AccountListTable/AccountCreateUpdate'
+import AccountCreateUpdate from '@/components/Apps/AccountListTable/AccountCreateUpdate'
 
 export default {
   components: {
diff --git a/src/views/accounts/Account/AccountList.vue b/src/views/accounts/Account/AccountList.vue
index e0af492bf..67fcb2986 100644
--- a/src/views/accounts/Account/AccountList.vue
+++ b/src/views/accounts/Account/AccountList.vue
@@ -10,8 +10,8 @@
 
 <script>
 import Page from '@/layout/components/Page'
-import AssetTreeTable from '@/components/AssetTreeTable'
-import AccountListTable from '@/components/AccountListTable/AccountList'
+import AssetTreeTable from '@/components/Apps/AssetTreeTable'
+import AccountListTable from '@/components/Apps/AccountListTable/AccountList'
 
 export default {
   name: 'AssetAccountList',
diff --git a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue
index 13d7c45ea..a8ba79066 100644
--- a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupExecution/AccountBackupExecutionDetail/AccountBackupExecutionInfo.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'AccountBackupPlanExecutionInfo',
diff --git a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
index dedd8af68..014ef3689 100644
--- a/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupDetail/AccountBackupInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
     <el-col :md="10" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
@@ -11,7 +11,7 @@
 
 <script>
 import { QuickActions } from '@/components'
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/accounts/AccountBackup/AccountBackupList.vue b/src/views/accounts/AccountBackup/AccountBackupList.vue
index 37d5b9ce4..99ff2a3fc 100644
--- a/src/views/accounts/AccountBackup/AccountBackupList.vue
+++ b/src/views/accounts/AccountBackup/AccountBackupList.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import { GenericListTable } from '@/layout/components'
-import { ArrayFormatter, DetailFormatter } from '@/components/TableFormatters'
+import { ArrayFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
index 7b1647748..f980bf4ff 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretAsset/index.vue
@@ -3,22 +3,22 @@
     <el-col :md="14" :sm="24">
       <GenericListTable
         ref="listTable"
-        :table-config="tableConfig"
         :header-actions="headerActions"
+        :table-config="tableConfig"
       />
     </el-col>
     <el-col :md="10" :sm="24">
       <AssetRelationCard type="primary" v-bind="assetRelationConfig" />
-      <RelationCard type="info" style="margin-top: 15px" v-bind="nodeRelationConfig" />
+      <RelationCard style="margin-top: 15px" type="info" v-bind="nodeRelationConfig" />
     </el-col>
   </el-row>
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
-import RelationCard from '@/components/RelationCard/index'
-import AssetRelationCard from '@/components/AssetRelationCard'
-import { DeleteActionFormatter, DetailFormatter } from '@/components/TableFormatters'
+import RelationCard from '@/components/Cards/RelationCard/index'
+import AssetRelationCard from '@/components/Apps/AssetRelationCard'
+import { DeleteActionFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AccountChangeSecretAsset',
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue
index 83663d47e..23abd3066 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionInfo.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'AccountChangeSecretExecutionInfo',
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionTaskList.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionTaskList.vue
index f83bb6380..4560560b6 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionTaskList.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretExecution/AccountChangeSecretExecutionDetail/AccountChangeSecretExecutionTaskList.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AccountChangeSecretExecutionTaskList',
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
index 7b07c93a4..81f8aa3bd 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretDetail/AccountChangeSecretInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
     <el-col :md="10" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
@@ -11,7 +11,7 @@
 
 <script>
 import { QuickActions } from '@/components'
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/accounts/AccountChangeSecret/AccountChangeSecretList.vue b/src/views/accounts/AccountChangeSecret/AccountChangeSecretList.vue
index 5b1473b2f..82af9a304 100644
--- a/src/views/accounts/AccountChangeSecret/AccountChangeSecretList.vue
+++ b/src/views/accounts/AccountChangeSecret/AccountChangeSecretList.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import { GenericListTable } from '@/layout/components'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/accounts/AccountChangeSecret/fields.js b/src/views/accounts/AccountChangeSecret/fields.js
index bf1da37f4..7915b2132 100644
--- a/src/views/accounts/AccountChangeSecret/fields.js
+++ b/src/views/accounts/AccountChangeSecret/fields.js
@@ -1,7 +1,7 @@
 import i18n from '@/i18n/i18n'
 import { CronTab } from '@/components'
-import { TagInput, UpdateToken } from '@/components/FormFields'
-import { Required } from '@/components/DataForm/rules'
+import { TagInput, UpdateToken } from '@/components/Form/FormFields'
+import { Required } from '@/components/Form/DataForm/rules'
 
 var validatorInterval = (rule, value, callback) => {
   if (parseInt(value) < 1) {
diff --git a/src/views/accounts/AccountGather/AccountGatherList.vue b/src/views/accounts/AccountGather/AccountGatherList.vue
index 75721cfae..e0376ef17 100644
--- a/src/views/accounts/AccountGather/AccountGatherList.vue
+++ b/src/views/accounts/AccountGather/AccountGatherList.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script>
-import TreeTable from '@/components/TreeTable'
+import TreeTable from '@/components/Table/TreeTable'
 import { toSafeLocalDateStr } from '@/utils/common'
-import { ActionsFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/accounts/AccountGather/AccountGatherTaskList.vue b/src/views/accounts/AccountGather/AccountGatherTaskList.vue
index 9acc484e7..bb0917505 100644
--- a/src/views/accounts/AccountGather/AccountGatherTaskList.vue
+++ b/src/views/accounts/AccountGather/AccountGatherTaskList.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import { GenericListTable } from '@/layout/components'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/accounts/AccountGather/TaskDetail/AccountGatherExecutionDetail/AccountGatherExecutionInfo.vue b/src/views/accounts/AccountGather/TaskDetail/AccountGatherExecutionDetail/AccountGatherExecutionInfo.vue
index bc89c26cd..1e4ed8b48 100644
--- a/src/views/accounts/AccountGather/TaskDetail/AccountGatherExecutionDetail/AccountGatherExecutionInfo.vue
+++ b/src/views/accounts/AccountGather/TaskDetail/AccountGatherExecutionDetail/AccountGatherExecutionInfo.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   components: {
diff --git a/src/views/accounts/AccountGather/TaskDetail/Detail.vue b/src/views/accounts/AccountGather/TaskDetail/Detail.vue
index 0a16b0d1e..05558823b 100644
--- a/src/views/accounts/AccountGather/TaskDetail/Detail.vue
+++ b/src/views/accounts/AccountGather/TaskDetail/Detail.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import { toSafeLocalDateStr } from '@/utils/common'
 
 export default {
diff --git a/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue b/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
index 8163b0c41..985e24c5b 100644
--- a/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
+++ b/src/views/accounts/AccountPush/AccountPushDetail/AccountPushInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
     <el-col :md="10" :sm="24">
       <QuickActions :actions="quickActions" type="primary" />
@@ -11,7 +11,7 @@
 
 <script>
 import { QuickActions } from '@/components'
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue b/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue
index 29ec55ab4..b747232cf 100644
--- a/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue
+++ b/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'AccountPushExecutionInfo',
diff --git a/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionTaskList.vue b/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionTaskList.vue
index 32f15e4b9..9fdca1194 100644
--- a/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionTaskList.vue
+++ b/src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionTaskList.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AccountChangeSecretExecutionTaskList',
diff --git a/src/views/accounts/AccountPush/AccountPushList.vue b/src/views/accounts/AccountPush/AccountPushList.vue
index 8a20210aa..d5dd69659 100644
--- a/src/views/accounts/AccountPush/AccountPushList.vue
+++ b/src/views/accounts/AccountPush/AccountPushList.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 import { GenericListTable } from '@/layout/components'
 
diff --git a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue
index 1ca46c5ef..4e4d1ef74 100644
--- a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue
+++ b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Account.vue
@@ -9,7 +9,7 @@
     </el-row>
     <el-row :gutter="20">
       <el-col :md="14" :sm="24">
-        <GenericListTable ref="listTable" :table-config="tableConfig" :header-actions="headerActions" />
+        <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
       </el-col>
       <el-col :md="10" :sm="24">
         <QuickActions :actions="quickActions" type="primary" />
@@ -21,8 +21,8 @@
         :visible.sync="showViewSecretDialog"
       />
       <AccountTemplateChangeSecretDialog
-        :visible.sync="visible"
         :object="object"
+        :visible.sync="visible"
       />
     </el-row>
   </div>
@@ -32,8 +32,8 @@
 import GenericListTable from '@/layout/components/GenericListTable'
 import QuickActions from '@/components/QuickActions'
 import AccountTemplateChangeSecretDialog from './AccountTemplateChangeSecretDialog'
-import { ActionsFormatter, DetailFormatter } from '@/components/TableFormatters'
-import ViewSecret from '@/components/AccountListTable/ViewSecret'
+import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
+import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret'
 
 export default {
   name: 'AccountTemplateChangeSecret',
diff --git a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue
index 0ae8486c0..6086285d1 100644
--- a/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue
+++ b/src/views/accounts/AccountTemplate/AccountTemplateDetail/Detail.vue
@@ -1,16 +1,16 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :object="object" :fields="detailFields" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
+      <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import QuickActions from '@/components/QuickActions'
 
 export default {
diff --git a/src/views/accounts/AccountTemplate/AccountTemplateList.vue b/src/views/accounts/AccountTemplate/AccountTemplateList.vue
index 286d0dcc2..dfa669789 100644
--- a/src/views/accounts/AccountTemplate/AccountTemplateList.vue
+++ b/src/views/accounts/AccountTemplate/AccountTemplateList.vue
@@ -1,20 +1,20 @@
 <template>
   <div>
-    <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+    <GenericListPage :header-actions="headerActions" :table-config="tableConfig" />
     <ViewSecret
       v-if="showViewSecretDialog"
-      :visible.sync="showViewSecretDialog"
-      :url="secretUrl"
       :account="account"
       :show-password-record="false"
+      :url="secretUrl"
+      :visible.sync="showViewSecretDialog"
     />
   </div>
 </template>
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { ActionsFormatter } from '@/components/TableFormatters'
-import ViewSecret from '@/components/AccountListTable/ViewSecret'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import ViewSecret from '@/components/Apps/AccountListTable/ViewSecret'
 
 export default {
   name: 'AccountTemplateList',
diff --git a/src/views/accounts/AccountTemplate/const.js b/src/views/accounts/AccountTemplate/const.js
index c42b3ee72..759aafa68 100644
--- a/src/views/accounts/AccountTemplate/const.js
+++ b/src/views/accounts/AccountTemplate/const.js
@@ -1,6 +1,6 @@
 import { getUuidUpdateFromUrl } from '@/utils/common'
-import { UpdateToken } from '@/components/FormFields'
-import Select2 from '@/components/FormFields/Select2'
+import { UpdateToken } from '@/components/Form/FormFields'
+import Select2 from '@/components/Form/FormFields/Select2'
 
 export const templateFields = (vm) => {
   return [
diff --git a/src/views/acl/AssetLoginAcl/AssetLoginAclCreateUpdate.vue b/src/views/acl/AssetLoginAcl/AssetLoginAclCreateUpdate.vue
index 5104b1c6c..d282e3494 100644
--- a/src/views/acl/AssetLoginAcl/AssetLoginAclCreateUpdate.vue
+++ b/src/views/acl/AssetLoginAcl/AssetLoginAclCreateUpdate.vue
@@ -4,11 +4,11 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 import { userJSONSelectMeta } from '@/views/users/const'
 import { assetJSONSelectMeta } from '@/views/assets/const'
 import AccountFormatter from '@/views/perms/AssetPermission/components/AccountFormatter.vue'
-import { WeekCronSelect } from '@/components/FormFields'
+import { WeekCronSelect } from '@/components/Form/FormFields'
 
 export default {
   name: 'AclCreateUpdate',
diff --git a/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue b/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue
index 05c91a81f..9e2bbf16d 100644
--- a/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue
+++ b/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/Detail.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'Detail',
diff --git a/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/index.vue b/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/index.vue
index d95ae1405..c7ef886f3 100644
--- a/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/index.vue
+++ b/src/views/acl/AssetLoginAcl/AssetLoginAclDetail/index.vue
@@ -9,8 +9,8 @@
 <script>
 import { GenericDetailPage } from '@/layout/components'
 import Detail from './Detail.vue'
-import UserJsonTab from '@/components/ManyJsonTabs/UserJsonTab.vue'
-import AssetJsonTab from '@/components/ManyJsonTabs/AssetJsonTab.vue'
+import UserJsonTab from '@/components/Apps/ManyJsonTabs/UserJsonTab.vue'
+import AssetJsonTab from '@/components/Apps/ManyJsonTabs/AssetJsonTab.vue'
 
 export default {
   components: {
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclCreateUpdate.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclCreateUpdate.vue
index 94f83311f..ee21f526d 100644
--- a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclCreateUpdate.vue
+++ b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclCreateUpdate.vue
@@ -11,7 +11,7 @@
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
 import AccountFormatter from '@/views/perms/AssetPermission/components/AccountFormatter.vue'
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 import { userJSONSelectMeta } from '@/views/users/const'
 import { assetJSONSelectMeta } from '@/views/assets/const'
 
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
index a1850f1f2..e2aa60297 100644
--- a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
+++ b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'CommandFilterAclDetail',
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/index.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/index.vue
index c2f487ce1..402c2456f 100644
--- a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/index.vue
+++ b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/index.vue
@@ -13,8 +13,8 @@
 
 <script>
 import { GenericDetailPage, TabPage } from '@/layout/components'
-import UserJsonTab from '@/components/ManyJsonTabs/UserJsonTab.vue'
-import AssetJsonTab from '@/components/ManyJsonTabs/AssetJsonTab.vue'
+import UserJsonTab from '@/components/Apps/ManyJsonTabs/UserJsonTab.vue'
+import AssetJsonTab from '@/components/Apps/ManyJsonTabs/AssetJsonTab.vue'
 import Detail from './Detail.vue'
 
 export default {
diff --git a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclList.vue b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclList.vue
index d1fbf1712..4d8eb1e10 100644
--- a/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclList.vue
+++ b/src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclList.vue
@@ -8,8 +8,8 @@
 
 <script>
 import { ListTable } from '@/components'
-import { DetailFormatter } from '@/components/TableFormatters'
-import AmountFormatter from '@/components/TableFormatters/AmountFormatter.vue'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
+import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
diff --git a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
index d72b252c3..77c174dc8 100644
--- a/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
+++ b/src/views/acl/CommandAcl/CommandGroup/CommandGroupDetail/Detail.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :object="object" />
+      <AutoDetailCard :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'CommandGroupDetail',
diff --git a/src/views/acl/CommandAcl/CommandGroup/CommandGroupList.vue b/src/views/acl/CommandAcl/CommandGroup/CommandGroupList.vue
index facc826e2..e9d9eb6fa 100644
--- a/src/views/acl/CommandAcl/CommandGroup/CommandGroupList.vue
+++ b/src/views/acl/CommandAcl/CommandGroup/CommandGroupList.vue
@@ -1,10 +1,10 @@
 <template>
-  <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <ListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import { ListTable } from '@/components'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/acl/ConnectMethodAcl/ConnectMethodAclCreateUpdate.vue b/src/views/acl/ConnectMethodAcl/ConnectMethodAclCreateUpdate.vue
index 9e4b69dc6..16cb929da 100644
--- a/src/views/acl/ConnectMethodAcl/ConnectMethodAclCreateUpdate.vue
+++ b/src/views/acl/ConnectMethodAcl/ConnectMethodAclCreateUpdate.vue
@@ -4,10 +4,10 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 import { userJSONSelectMeta } from '@/views/users/const'
 import { assetJSONSelectMeta } from '@/views/assets/const'
-import { Select2 } from '@/components/FormFields'
+import { Select2 } from '@/components/Form/FormFields'
 
 export default {
   name: 'AclCreateUpdate',
diff --git a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
index 10f1eade3..daa362ff9 100644
--- a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
+++ b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/Detail.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'Detail',
diff --git a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue
index 0c5397478..3e0694d58 100644
--- a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue
+++ b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue
@@ -9,8 +9,8 @@
 <script>
 import { GenericDetailPage } from '@/layout/components'
 import Detail from './Detail.vue'
-import UserJsonTab from '@/components/ManyJsonTabs/UserJsonTab.vue'
-import AssetJsonTab from '@/components/ManyJsonTabs/AssetJsonTab.vue'
+import UserJsonTab from '@/components/Apps/ManyJsonTabs/UserJsonTab.vue'
+import AssetJsonTab from '@/components/Apps/ManyJsonTabs/AssetJsonTab.vue'
 
 export default {
   components: {
diff --git a/src/views/acl/UserLoginACL/UserDetail/Detail.vue b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
index 8848cc4b1..3c2e97686 100644
--- a/src/views/acl/UserLoginACL/UserDetail/Detail.vue
+++ b/src/views/acl/UserLoginACL/UserDetail/Detail.vue
@@ -1,17 +1,17 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
+      <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
 </template>
 
 <script>
 import QuickActions from '@/components/QuickActions'
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'Detail',
diff --git a/src/views/acl/UserLoginACL/UserLoginACLCreateUpdate.vue b/src/views/acl/UserLoginACL/UserLoginACLCreateUpdate.vue
index a8e6babaa..4f99d3cee 100644
--- a/src/views/acl/UserLoginACL/UserLoginACLCreateUpdate.vue
+++ b/src/views/acl/UserLoginACL/UserLoginACLCreateUpdate.vue
@@ -4,8 +4,8 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import { WeekCronSelect } from '@/components/FormFields'
-import { Required } from '@/components/DataForm/rules'
+import { WeekCronSelect } from '@/components/Form/FormFields'
+import { Required } from '@/components/Form/DataForm/rules'
 import { userJSONSelectMeta } from '@/views/users/const'
 
 export default {
diff --git a/src/views/acl/UserLoginACL/UserLoginACLTable.vue b/src/views/acl/UserLoginACL/UserLoginACLTable.vue
index 3a9b99b4c..97c1bbc6d 100644
--- a/src/views/acl/UserLoginACL/UserLoginACLTable.vue
+++ b/src/views/acl/UserLoginACL/UserLoginACLTable.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable/index.vue'
+import ListTable from '@/components/Table/ListTable/index.vue'
 
 export default {
   components: {
diff --git a/src/views/assets/Asset/AssetCreateUpdate/DatabaseCreateUpdate.vue b/src/views/assets/Asset/AssetCreateUpdate/DatabaseCreateUpdate.vue
index ead00fa30..bd5454878 100644
--- a/src/views/assets/Asset/AssetCreateUpdate/DatabaseCreateUpdate.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate/DatabaseCreateUpdate.vue
@@ -5,7 +5,7 @@
 <script>
 import BaseAssetCreateUpdate from './BaseAssetCreateUpdate'
 import { UploadKey } from '@/components'
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 
 export default {
   name: 'DatabaseCreateUpdate',
diff --git a/src/views/assets/Asset/AssetCreateUpdate/components/AccountTemplateDialog.vue b/src/views/assets/Asset/AssetCreateUpdate/components/AccountTemplateDialog.vue
index 53dcc45e2..98c9eee32 100644
--- a/src/views/assets/Asset/AssetCreateUpdate/components/AccountTemplateDialog.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate/components/AccountTemplateDialog.vue
@@ -51,7 +51,7 @@
 
 <script>
 import Dialog from '@/components/Dialog'
-import AutoDataTable from '@/components/AutoDataTable'
+import AutoDataTable from '@/components/Table/AutoDataTable'
 import CreateAccountTemplateDialog from './CreateAccountTemplateDialog'
 
 export default {
diff --git a/src/views/assets/Asset/AssetCreateUpdate/components/AddAccountDialog.vue b/src/views/assets/Asset/AssetCreateUpdate/components/AddAccountDialog.vue
index 5cde9133a..96c1a2202 100644
--- a/src/views/assets/Asset/AssetCreateUpdate/components/AddAccountDialog.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate/components/AddAccountDialog.vue
@@ -20,7 +20,7 @@
 
 <script>
 import Dialog from '@/components/Dialog'
-import AccountCreateForm from '@/components/AccountCreateUpdateForm'
+import AccountCreateForm from '@/components/Apps/AccountCreateUpdateForm'
 
 export default {
   name: 'AddAccountDialog',
diff --git a/src/views/assets/Asset/AssetDetail/Detail.vue b/src/views/assets/Asset/AssetDetail/Detail.vue
index 6c158aff3..f6bdfce70 100644
--- a/src/views/assets/Asset/AssetDetail/Detail.vue
+++ b/src/views/assets/Asset/AssetDetail/Detail.vue
@@ -27,8 +27,8 @@
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
-import RelationCard from '@/components/RelationCard'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
+import RelationCard from '@/components/Cards/RelationCard'
 import QuickActions from '@/components/QuickActions'
 import { openTaskPage } from '@/utils/jms'
 
diff --git a/src/views/assets/Asset/AssetDetail/PermUser.vue b/src/views/assets/Asset/AssetDetail/PermUser.vue
index 680b936c3..9da422299 100644
--- a/src/views/assets/Asset/AssetDetail/PermUser.vue
+++ b/src/views/assets/Asset/AssetDetail/PermUser.vue
@@ -2,7 +2,7 @@
   <div>
     <el-row :gutter="20">
       <el-col :md="16" :sm="24">
-        <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
+        <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
       </el-col>
       <el-col :md="8" :sm="24">
         <PermUserGroupCard v-bind="UserGroupCardConfig" />
@@ -16,9 +16,9 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 import { GenericListTableDialog } from '@/layout/components'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 import PermUserGroupCard from './components/PermUserGroupCard'
 
 export default {
diff --git a/src/views/assets/Asset/AssetList/HostList.vue b/src/views/assets/Asset/AssetList/HostList.vue
index 3f8176fcb..77ec38db9 100644
--- a/src/views/assets/Asset/AssetList/HostList.vue
+++ b/src/views/assets/Asset/AssetList/HostList.vue
@@ -11,8 +11,8 @@
 
 <script>
 import BaseList from './components/BaseList'
-import { ActionsFormatter } from '@/components/TableFormatters'
-import GatewayDialog from '@/components/GatewayDialog'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import GatewayDialog from '@/components/Apps/GatewayDialog'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/assets/Asset/AssetList/components/BaseList.vue b/src/views/assets/Asset/AssetList/components/BaseList.vue
index e7704f270..0a08b7972 100644
--- a/src/views/assets/Asset/AssetList/components/BaseList.vue
+++ b/src/views/assets/Asset/AssetList/components/BaseList.vue
@@ -23,19 +23,14 @@
 <script>
 import { ListTable } from '@/components'
 import {
-  ActionsFormatter,
-  ArrayFormatter,
-  ChoicesFormatter,
-  DetailFormatter,
-  ProtocolsFormatter,
-  TagsFormatter
-} from '@/components/TableFormatters'
+  ActionsFormatter, ArrayFormatter, ChoicesFormatter, DetailFormatter, ProtocolsFormatter, TagsFormatter
+} from '@/components/Table/TableFormatters'
 import AssetBulkUpdateDialog from './AssetBulkUpdateDialog'
-import { connectivityMeta } from '@/components/AccountListTable/const'
+import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
 import PlatformDialog from '../components/PlatformDialog'
-import GatewayDialog from '@/components/GatewayDialog'
+import GatewayDialog from '@/components/Apps/GatewayDialog'
 import { openTaskPage } from '@/utils/jms'
-import HostInfoFormatter from '@/components/TableFormatters/HostInfoFormatter'
+import HostInfoFormatter from '@/components/Table/TableFormatters/HostInfoFormatter'
 
 export default {
   components: {
diff --git a/src/views/assets/Asset/AssetList/components/NodeAssetsUpdateDialog.vue b/src/views/assets/Asset/AssetList/components/NodeAssetsUpdateDialog.vue
index 26b635988..3c4883ae4 100644
--- a/src/views/assets/Asset/AssetList/components/NodeAssetsUpdateDialog.vue
+++ b/src/views/assets/Asset/AssetList/components/NodeAssetsUpdateDialog.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import AssetDialog from '@/components/AssetSelect/dialog.vue'
+import AssetDialog from '@/components/Apps/AssetSelect/dialog.vue'
 import $ from '@/utils/jquery-vendor'
 
 export default {
diff --git a/src/views/assets/Cloud/Account/AccountCreateUpdate.vue b/src/views/assets/Cloud/Account/AccountCreateUpdate.vue
index 91eb91a0e..9aa59a8f4 100644
--- a/src/views/assets/Cloud/Account/AccountCreateUpdate.vue
+++ b/src/views/assets/Cloud/Account/AccountCreateUpdate.vue
@@ -7,7 +7,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import { RequiredChange, specialEmojiCheck } from '@/components/DataForm/rules'
+import { RequiredChange, specialEmojiCheck } from '@/components/Form/DataForm/rules'
 import { ACCOUNT_PROVIDER_ATTRS_MAP, aliyun } from '../const'
 import { UploadKey } from '@/components'
 import { encryptPassword } from '@/utils/crypto'
diff --git a/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue b/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
index d0a8393b3..fec082386 100644
--- a/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
+++ b/src/views/assets/Cloud/Account/AccountDetail/AccountDetail.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'AccountDetail',
diff --git a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskCreateUpdate.vue b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskCreateUpdate.vue
index ed4059db7..cb17dd3ad 100644
--- a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskCreateUpdate.vue
+++ b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskCreateUpdate.vue
@@ -5,8 +5,8 @@
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
 import { CronTab, Select2 } from '@/components'
-import rules from '@/components/DataForm/rules'
-import ProtocolSelector from '@/components/FormFields/ProtocolSelector'
+import rules from '@/components/Form/DataForm/rules'
+import ProtocolSelector from '@/components/Form/FormFields/ProtocolSelector'
 
 export default {
   components: {
diff --git a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/AssetList.vue b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/AssetList.vue
index 40b8e2f94..789d22b22 100644
--- a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/AssetList.vue
+++ b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/AssetList.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListTable ref="GenericListTable" :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable ref="GenericListTable" :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index'
-import { DateFormatter } from '@/components/TableFormatters'
+import { DateFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AssetList',
diff --git a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/HistoryList.vue b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/HistoryList.vue
index fa2d5bcfa..dca7933b7 100644
--- a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/HistoryList.vue
+++ b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/HistoryList.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListTable ref="GenericListTable" :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable ref="GenericListTable" :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index'
-import { ActionsFormatter, DateFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter, DateFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/detail.vue b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/detail.vue
index 4607fc686..d6895d137 100644
--- a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/detail.vue
+++ b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskDetail/detail.vue
@@ -1,16 +1,16 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
+      <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import QuickActions from '@/components/QuickActions'
 import { toSafeLocalDateStr } from '@/utils/common'
 import { openTaskPage } from '@/utils/jms'
diff --git a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue
index 44277bf0f..8945b687c 100644
--- a/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue
+++ b/src/views/assets/Cloud/SyncInstanceTask/SyncInstanceTaskList.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/assets/Domain/DomainCreateUpdate.vue b/src/views/assets/Domain/DomainCreateUpdate.vue
index 9848a3aa4..c0862f4a4 100644
--- a/src/views/assets/Domain/DomainCreateUpdate.vue
+++ b/src/views/assets/Domain/DomainCreateUpdate.vue
@@ -4,7 +4,7 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import AssetSelect from '@/components/AssetSelect'
+import AssetSelect from '@/components/Apps/AssetSelect'
 
 export default {
   name: 'GatewayCreateUpdate',
diff --git a/src/views/assets/Domain/DomainDetail/Detail.vue b/src/views/assets/Domain/DomainDetail/Detail.vue
index 69a0a65c1..7e324ef79 100644
--- a/src/views/assets/Domain/DomainDetail/Detail.vue
+++ b/src/views/assets/Domain/DomainDetail/Detail.vue
@@ -1,14 +1,15 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
     <el-col :md="10" :sm="24" />
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
+
 export default {
   name: 'Detail',
   components: {
diff --git a/src/views/assets/Domain/DomainDetail/GatewayList.vue b/src/views/assets/Domain/DomainDetail/GatewayList.vue
index 3c84c65cc..8d66af8b0 100644
--- a/src/views/assets/Domain/DomainDetail/GatewayList.vue
+++ b/src/views/assets/Domain/DomainDetail/GatewayList.vue
@@ -16,9 +16,9 @@
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable/index'
-import GatewayDialog from '@/components/GatewayDialog'
-import { connectivityMeta } from '@/components/AccountListTable/const'
-import { ArrayFormatter, ChoicesFormatter, DetailFormatter, TagsFormatter } from '@/components/TableFormatters'
+import GatewayDialog from '@/components/Apps/GatewayDialog'
+import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
+import { ArrayFormatter, ChoicesFormatter, DetailFormatter, TagsFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/assets/Domain/DomainList.vue b/src/views/assets/Domain/DomainList.vue
index 82020b62d..5e67df7c8 100644
--- a/src/views/assets/Domain/DomainList.vue
+++ b/src/views/assets/Domain/DomainList.vue
@@ -4,8 +4,8 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/TableFormatters'
-import AmountFormatter from '@/components/TableFormatters/AmountFormatter.vue'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
+import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
diff --git a/src/views/assets/Label/LabelCreateUpdate.vue b/src/views/assets/Label/LabelCreateUpdate.vue
index 41db1c363..ace8d7ffc 100644
--- a/src/views/assets/Label/LabelCreateUpdate.vue
+++ b/src/views/assets/Label/LabelCreateUpdate.vue
@@ -1,10 +1,11 @@
 <template>
-  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" :has-detail-in-msg="false" />
+  <GenericCreateUpdatePage :fields="fields" :fields-meta="fieldsMeta" :has-detail-in-msg="false" :initial="initial" :url="url" />
 </template>
 
 <script>
-import AssetSelect from '@/components/AssetSelect'
+import AssetSelect from '@/components/Apps/AssetSelect'
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
+
 export default {
   name: 'LabelCreateUpdate',
   components: {
diff --git a/src/views/assets/Label/LabelList.vue b/src/views/assets/Label/LabelList.vue
index f353ff5c1..c7df7f9b3 100644
--- a/src/views/assets/Label/LabelList.vue
+++ b/src/views/assets/Label/LabelList.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import AmountFormatter from '@/components/TableFormatters/AmountFormatter.vue'
+import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
diff --git a/src/views/assets/Platform/AutomationParamsSetting.vue b/src/views/assets/Platform/AutomationParamsSetting.vue
index 343db22bb..d3294fb8b 100644
--- a/src/views/assets/Platform/AutomationParamsSetting.vue
+++ b/src/views/assets/Platform/AutomationParamsSetting.vue
@@ -33,8 +33,8 @@
 
 <script>
 import Dialog from '../../../components/Dialog'
-import AutoDataForm from '../../../components/AutoDataForm'
-import { DynamicInput } from '@/components/FormFields'
+import AutoDataForm from '../../../components/Form/AutoDataForm'
+import { DynamicInput } from '../../../components/Form/FormFields'
 
 export default {
   components: {
diff --git a/src/views/assets/Platform/PlatformDetail/Detail.vue b/src/views/assets/Platform/PlatformDetail/Detail.vue
index 826a2154e..9deab0fe1 100644
--- a/src/views/assets/Platform/PlatformDetail/Detail.vue
+++ b/src/views/assets/Platform/PlatformDetail/Detail.vue
@@ -34,10 +34,10 @@
 
 <script>
 import { IBox } from '@/components'
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import QuickActions from '@/components/QuickActions'
 import PlatformDetailUpdateDialog from './PlatformDetailUpdateDialog'
-import ProtocolSelector from '@/components/FormFields/ProtocolSelector'
+import ProtocolSelector from '@/components/Form/FormFields/ProtocolSelector'
 
 export default {
   name: 'Detail',
diff --git a/src/views/assets/Platform/PlatformList.vue b/src/views/assets/Platform/PlatformList.vue
index 734e9e4ad..a4adf243b 100644
--- a/src/views/assets/Platform/PlatformList.vue
+++ b/src/views/assets/Platform/PlatformList.vue
@@ -13,7 +13,7 @@
 
 <script>
 import { GenericListTable, TabPage } from '@/layout/components'
-import { ChoicesFormatter, ProtocolsFormatter } from '@/components/TableFormatters'
+import { ChoicesFormatter, ProtocolsFormatter } from '../../../components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/assets/Platform/const.js b/src/views/assets/Platform/const.js
index 23dc72ddd..382ee4318 100644
--- a/src/views/assets/Platform/const.js
+++ b/src/views/assets/Platform/const.js
@@ -1,6 +1,6 @@
 import i18n from '@/i18n/i18n'
-import rules from '@/components/DataForm/rules'
-import { JsonEditor } from '@/components/FormFields'
+import rules from '@/components/Form/DataForm/rules'
+import { JsonEditor } from '@/components/Form/FormFields'
 import { assetFieldsMeta } from '@/views/assets/const'
 import AutomationParamsSetting from './AutomationParamsSetting'
 
diff --git a/src/views/assets/const.js b/src/views/assets/const.js
index 6c8479fc6..ffd1fe392 100644
--- a/src/views/assets/const.js
+++ b/src/views/assets/const.js
@@ -1,8 +1,8 @@
 import i18n from '@/i18n/i18n'
-import ProtocolSelector from '@/components/FormFields/ProtocolSelector'
+import ProtocolSelector from '@/components/Form/FormFields/ProtocolSelector'
 import AssetAccounts from '@/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts'
-import rules from '@/components/DataForm/rules'
-import { JSONManyToManySelect, Select2 } from '@/components/FormFields'
+import rules from '@/components/Form/DataForm/rules'
+import { JSONManyToManySelect, Select2 } from '@/components/Form/FormFields'
 import { message } from '@/utils/message'
 
 export const filterSelectValues = (values) => {
diff --git a/src/views/audits/JobExecutionLogList.vue b/src/views/audits/JobExecutionLogList.vue
index cd2bfa585..dadb63ec8 100644
--- a/src/views/audits/JobExecutionLogList.vue
+++ b/src/views/audits/JobExecutionLogList.vue
@@ -6,7 +6,7 @@
 
 <script type="text/jsx">
 import GenericListPage from '@/layout/components/GenericListPage'
-import { ActionsFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/audits/LoginLog/LoginLogDetail/Detail.vue b/src/views/audits/LoginLog/LoginLogDetail/Detail.vue
index 8a3271000..210afdfd0 100644
--- a/src/views/audits/LoginLog/LoginLogDetail/Detail.vue
+++ b/src/views/audits/LoginLog/LoginLogDetail/Detail.vue
@@ -2,14 +2,14 @@
   <div>
     <el-row :gutter="20">
       <el-col :md="14" :sm="24">
-        <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+        <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'Detail',
@@ -35,5 +35,5 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 </style>
diff --git a/src/views/audits/OperateLog/OperateLogDetail/Detail.vue b/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
index 76e430a58..3c00fd469 100644
--- a/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
+++ b/src/views/audits/OperateLog/OperateLogDetail/Detail.vue
@@ -19,7 +19,7 @@
 
 <script>
 import { QuickActions } from '@/components'
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import DiffDetail from '@/components/Dialog/DiffDetail'
 
 export default {
diff --git a/src/views/audits/OperateLog/OperateLogList.vue b/src/views/audits/OperateLog/OperateLogList.vue
index 1f7ee644d..816ae98f8 100644
--- a/src/views/audits/OperateLog/OperateLogList.vue
+++ b/src/views/audits/OperateLog/OperateLogList.vue
@@ -11,7 +11,7 @@
 
 <script>
 import GenericListPage from '@/layout/components/GenericListPage'
-import { ActionsFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
 import DiffDetail from '@/components/Dialog/DiffDetail'
 
 export default {
diff --git a/src/views/myassets/index.vue b/src/views/myassets/index.vue
index 0f38919d0..742011823 100644
--- a/src/views/myassets/index.vue
+++ b/src/views/myassets/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <GenericTreeListPage
-      :table-config="tableConfig"
       :header-actions="headerActions"
+      :table-config="tableConfig"
       :tree-setting="treeSetting"
     />
   </div>
@@ -10,7 +10,7 @@
 
 <script>
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage'
-import { AccountShowFormatter, DialogDetailFormatter } from '@/components/TableFormatters'
+import { AccountShowFormatter, DialogDetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/myhome/components/HomeCard.vue b/src/views/myhome/components/HomeCard.vue
index 58e4ef556..3f50a2a1a 100644
--- a/src/views/myhome/components/HomeCard.vue
+++ b/src/views/myhome/components/HomeCard.vue
@@ -14,16 +14,16 @@
       </div>
       <ListTable
         ref="ListTable"
-        class="ListTable"
-        :table-config="tableConfig"
         :header-actions="headerActions"
+        :table-config="tableConfig"
+        class="ListTable"
       />
     </el-card>
   </div>
 </template>
 
 <script>
-import ListTable from '@/components/ListTable/index'
+import ListTable from '@/components/Table/ListTable/index'
 
 export default {
   name: 'HomeCard',
diff --git a/src/views/myhome/components/Ticket.vue b/src/views/myhome/components/Ticket.vue
index efcf29628..5555e4109 100644
--- a/src/views/myhome/components/Ticket.vue
+++ b/src/views/myhome/components/Ticket.vue
@@ -6,7 +6,7 @@
 import HomeCard from './HomeCard'
 import { mapGetters } from 'vuex'
 import { toSafeLocalDateStr } from '@/utils/common'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'HomeAnnouncement',
diff --git a/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue b/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
index 44c3ef06a..42cb61f12 100644
--- a/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
+++ b/src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue
@@ -1,35 +1,35 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :object="object" :excludes="excludes" />
+      <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
     </el-col>
     <el-col v-if="hasSummary" :md="10" :sm="24">
       <IBox
         v-if="object.summary.ok"
-        type="success"
         :title="`${$tc('ops.SuccessAsset')} (${object.summary.ok.length})` "
+        type="success"
       >
         <el-collapse>
           <el-collapse-item
             v-for="(item,index) in object.summary.ok"
             :key="index"
-            :title="item"
             :name="index"
+            :title="item"
             disabled
           />
         </el-collapse>
       </IBox>
       <IBox
         v-if="object.summary.excludes"
-        type="warning"
         :title="`${$tc('ops.ExcludeAsset')} (${Object.keys(object.summary.excludes).length})` "
+        type="warning"
       >
         <el-collapse>
           <el-collapse-item
             v-for="(val,key,index) in object.summary.excludes"
             :key="index"
-            :title="key"
             :name="index"
+            :title="key"
           >
             <div>{{ $tc('ops.Reason') }}: {{ val }}</div>
           </el-collapse-item>
@@ -37,15 +37,15 @@
       </IBox>
       <IBox
         v-if="object.summary.failures"
-        type="danger"
         :title="`${$tc('ops.FailedAsset')} (${Object.keys(Object.assign(object.summary.failures,object.summary.dark)).length})` "
+        type="danger"
       >
         <el-collapse>
           <el-collapse-item
             v-for="(val,key,index) in Object.assign(object.summary.failures,object.summary.dark)"
             :key="index"
-            :title="key"
             :name="index"
+            :title="key"
           >
             <div>{{ $tc('ops.Reason') }}: {{ val }}</div>
           </el-collapse-item>
@@ -53,8 +53,8 @@
       </IBox>
       <IBox
         v-if="object.summary.error"
-        type="danger"
         :title="$tc('ops.SystemError') "
+        type="danger"
       >
         {{ object.summary.error }}
       </IBox>
@@ -63,7 +63,7 @@
 </template>
 
 <script type="text/jsx">
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import IBox from '@/components/IBox'
 
 export default {
diff --git a/src/views/ops/Execution/index.vue b/src/views/ops/Execution/index.vue
index 1ac3512cb..2400b46aa 100644
--- a/src/views/ops/Execution/index.vue
+++ b/src/views/ops/Execution/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <ExecutionDetailDialog v-if="showExecutionDetailDialog" :item="item" :visible.sync="showExecutionDetailDialog" />
-    <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+    <GenericListPage :header-actions="headerActions" :table-config="tableConfig" />
   </div>
 </template>
 
 <script>
-import { ActionsFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
 import { GenericListPage } from '@/layout/components'
 import { openTaskPage } from '@/utils/jms'
 import ExecutionDetailDialog from '@/views/ops/Execution/ExecutionDetail'
diff --git a/src/views/ops/Job/AdhocOpenDialog.vue b/src/views/ops/Job/AdhocOpenDialog.vue
index 2f37bfe38..4e7e56b89 100644
--- a/src/views/ops/Job/AdhocOpenDialog.vue
+++ b/src/views/ops/Job/AdhocOpenDialog.vue
@@ -8,7 +8,7 @@
 
 <script>
 import { GenericListTableDialog } from '@/layout/components'
-import { ActionsFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/ops/Job/AdhocSaveDialog.vue b/src/views/ops/Job/AdhocSaveDialog.vue
index 710d5c3ce..ed0018a02 100644
--- a/src/views/ops/Job/AdhocSaveDialog.vue
+++ b/src/views/ops/Job/AdhocSaveDialog.vue
@@ -15,7 +15,7 @@
 <script>
 import Dialog from '@/components/Dialog'
 import { GenericCreateUpdateForm } from '@/layout/components'
-import CodeEditor from '@/components/FormFields/CodeEditor'
+import CodeEditor from '@/components/Form/FormFields/CodeEditor'
 
 export default {
   components: {
diff --git a/src/views/ops/Job/JobDetail/JobDetail.vue b/src/views/ops/Job/JobDetail/JobDetail.vue
index 860da7d1e..783c75aa9 100644
--- a/src/views/ops/Job/JobDetail/JobDetail.vue
+++ b/src/views/ops/Job/JobDetail/JobDetail.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script type="text/jsx">
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   components: {
diff --git a/src/views/ops/Job/JobDetail/JobHistory.vue b/src/views/ops/Job/JobDetail/JobHistory.vue
index eca8dbf40..186f9cffa 100644
--- a/src/views/ops/Job/JobDetail/JobHistory.vue
+++ b/src/views/ops/Job/JobDetail/JobHistory.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
   </div>
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
-import { ActionsFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/ops/Job/JobUpdateCreate.vue b/src/views/ops/Job/JobUpdateCreate.vue
index df24f2ddb..dce3d32a8 100644
--- a/src/views/ops/Job/JobUpdateCreate.vue
+++ b/src/views/ops/Job/JobUpdateCreate.vue
@@ -7,12 +7,12 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import AssetSelect from '@/components/AssetSelect'
-import CodeEditor from '@/components/FormFields/CodeEditor'
+import AssetSelect from '@/components/Apps/AssetSelect'
+import CodeEditor from '@/components/Form/FormFields/CodeEditor'
 import { CronTab } from '@/components'
 import i18n from '@/i18n/i18n'
 import VariableHelpDialog from '@/views/ops/Job/VariableHelpDialog'
-import { Required } from '@/components/DataForm/rules'
+import { Required } from '@/components/Form/DataForm/rules'
 
 export default {
   components: {
diff --git a/src/views/ops/Job/QuickJob.vue b/src/views/ops/Job/QuickJob.vue
index 0159f6caf..8fd5f87e7 100644
--- a/src/views/ops/Job/QuickJob.vue
+++ b/src/views/ops/Job/QuickJob.vue
@@ -13,10 +13,10 @@
         <div class="transition-box" style="width: calc(100% - 17px);">
           <CodeEditor
             v-if="ready"
-            style="margin-bottom: 20px"
-            :toolbar="toolbar"
             :options="cmOptions"
+            :toolbar="toolbar"
             :value.sync="command"
+            style="margin-bottom: 20px"
           />
           <b>{{ $tc('ops.output') }}:</b>
           <span v-if="executionInfo.status" style="float: right">
@@ -35,7 +35,7 @@
             </span>
           </span>
           <div style="padding-left: 30px; background-color: rgb(247 247 247)">
-            <Term ref="xterm" style="border-left: solid 1px #dddddd" :show-tool-bar="true" />
+            <Term ref="xterm" :show-tool-bar="true" style="border-left: solid 1px #dddddd" />
           </div>
           <div style="display: flex;margin-top:10px;justify-content: space-between" />
         </div>
@@ -46,8 +46,8 @@
 
 <script>
 import { TreeTable } from '@/components'
-import Term from '@/components/Term'
-import CodeEditor from '@/components/FormFields/CodeEditor'
+import Term from '@/components/Widgets/Term'
+import CodeEditor from '@/components/Form/FormFields/CodeEditor'
 import Page from '@/layout/components/Page'
 import AdhocOpenDialog from '@/views/ops/Job/AdhocOpenDialog'
 import AdhocSaveDialog from '@/views/ops/Job/AdhocSaveDialog'
diff --git a/src/views/ops/Job/index.vue b/src/views/ops/Job/index.vue
index b98acac0e..59e5f9f3b 100644
--- a/src/views/ops/Job/index.vue
+++ b/src/views/ops/Job/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <JobRunDialog v-if="showJobRunDialog" :visible.sync="showJobRunDialog" :item="item" @submit="runJob" />
-    <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+    <JobRunDialog v-if="showJobRunDialog" :item="item" :visible.sync="showJobRunDialog" @submit="runJob" />
+    <GenericListPage :header-actions="headerActions" :table-config="tableConfig" />
   </div>
 </template>
 
 <script>
 import GenericListPage from '@/layout/components/GenericListPage'
-import { ActionsFormatter, DateFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter, DateFormatter } from '@/components/Table/TableFormatters'
 import JobRunDialog from '@/views/ops/Job/JobRunDialog'
 import { openTaskPage } from '@/utils/jms'
 
diff --git a/src/views/ops/Template/Adhoc.vue b/src/views/ops/Template/Adhoc.vue
index 381bfb6b7..13d4a2d7c 100644
--- a/src/views/ops/Template/Adhoc.vue
+++ b/src/views/ops/Template/Adhoc.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
-import { ActionsFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue b/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue
index 33ecc7112..9b70dd885 100644
--- a/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue
+++ b/src/views/ops/Template/Adhoc/AdhocDetail/AdhocDetail.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script type="text/jsx">
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   components: {
diff --git a/src/views/ops/Template/Adhoc/AdhocUpdateCreate.vue b/src/views/ops/Template/Adhoc/AdhocUpdateCreate.vue
index 7cc9cc216..a4105a7c9 100644
--- a/src/views/ops/Template/Adhoc/AdhocUpdateCreate.vue
+++ b/src/views/ops/Template/Adhoc/AdhocUpdateCreate.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import CodeEditor from '@/components/FormFields/CodeEditor'
+import CodeEditor from '@/components/Form/FormFields/CodeEditor'
 
 export default {
   components: {
diff --git a/src/views/ops/Template/Playbook.vue b/src/views/ops/Template/Playbook.vue
index 9d162fac4..dace89e57 100644
--- a/src/views/ops/Template/Playbook.vue
+++ b/src/views/ops/Template/Playbook.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <GenericListTable ref="list" :table-config="tableConfig" :header-actions="headerActions" />
+    <GenericListTable ref="list" :header-actions="headerActions" :table-config="tableConfig" />
     <UploadDialog v-if="uploadDialogVisible" :visible.sync="uploadDialogVisible" @completed="refreshTable" />
   </div>
 </template>
@@ -8,7 +8,7 @@
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
 import UploadDialog from '@/views/ops/Template/Playbook/UploadDialog'
-import { ActionsFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue b/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue
index 2bad5ec8b..df18e0e1c 100644
--- a/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue
+++ b/src/views/ops/Template/Playbook/PlaybookDetail/PlaybookDetail.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :object="object" :excludes="excludes" />
+      <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script type="text/jsx">
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   components: {
diff --git a/src/views/ops/Template/Playbook/PlaybookDetail/Workspace.vue b/src/views/ops/Template/Playbook/PlaybookDetail/Workspace.vue
index b0e5a1e1d..f62ab1916 100644
--- a/src/views/ops/Template/Playbook/PlaybookDetail/Workspace.vue
+++ b/src/views/ops/Template/Playbook/PlaybookDetail/Workspace.vue
@@ -42,7 +42,7 @@
 
 <script>
 import { TreeTable } from '@/components'
-import CodeEditor from '@/components/FormFields/CodeEditor'
+import CodeEditor from '@/components/Form/FormFields/CodeEditor'
 import item from '@/layout/components/NavLeft/Item'
 import NewNodeDialog from '@/views/ops/Template/Playbook/PlaybookDetail/Editor/NewNodeDialog.vue'
 import { renameFile } from '@/api/ops'
diff --git a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
index 4c37748e4..d4270f012 100644
--- a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
@@ -10,7 +10,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import AssetSelect from '@/components/AssetSelect'
+import AssetSelect from '@/components/Apps/AssetSelect'
 import { getDayFuture } from '@/utils/common'
 import AccountFormatter from './components/AccountFormatter'
 import { AllAccount } from '../const'
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
index e29a0688e..580dceeb1 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionAsset.vue
@@ -11,10 +11,10 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
-import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/TableFormatters'
-import AssetRelationCard from '@/components/AssetRelationCard'
+import ListTable from '@/components/Table/ListTable'
+import RelationCard from '@/components/Cards/RelationCard'
+import { DeleteActionFormatter } from '@/components/Table/TableFormatters'
+import AssetRelationCard from '@/components/Apps/AssetRelationCard'
 
 export default {
   name: 'AssetPermissionAsset',
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
index 597a8f088..6be542346 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import QuickActions from '@/components/QuickActions'
 
 export default {
diff --git a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
index 1e2016ae6..a161598d8 100644
--- a/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionUser.vue
@@ -11,9 +11,9 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
-import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/TableFormatters'
+import ListTable from '@/components/Table/ListTable'
+import RelationCard from '@/components/Cards/RelationCard'
+import { DeleteActionFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AssetPermissionUser',
diff --git a/src/views/perms/AssetPermission/AssetPermissionList.vue b/src/views/perms/AssetPermission/AssetPermissionList.vue
index df02a0728..90e6be5bd 100644
--- a/src/views/perms/AssetPermission/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionList.vue
@@ -16,9 +16,9 @@
 
 <script>
 import Page from '@/layout/components/Page'
-import AssetTreeTable from '@/components/AssetTreeTable'
+import AssetTreeTable from '@/components/Apps/AssetTreeTable'
 import PermBulkUpdateDialog from './components/PermBulkUpdateDialog'
-import AmountFormatter from '@/components/TableFormatters/AmountFormatter'
+import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter'
 import { mapGetters } from 'vuex'
 import { AccountLabelMapper, AssetPermissionListPageSearchConfigOptions } from '../const'
 
diff --git a/src/views/perms/AssetPermission/components/AccountFormatter.vue b/src/views/perms/AssetPermission/components/AccountFormatter.vue
index 154d97f3b..d17bd9a42 100644
--- a/src/views/perms/AssetPermission/components/AccountFormatter.vue
+++ b/src/views/perms/AssetPermission/components/AccountFormatter.vue
@@ -44,16 +44,11 @@
 </template>
 
 <script>
-import { TagInput } from '@/components/FormFields'
+import { TagInput } from '@/components/Form/FormFields'
 import {
-  AccountLabelMapper,
-  AllAccount,
-  AnonymousAccount,
-  ManualAccount,
-  SameAccount,
-  SpecAccount
+  AccountLabelMapper, AllAccount, AnonymousAccount, ManualAccount, SameAccount, SpecAccount
 } from '@/views/perms/const'
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 import Dialog from '@/components/Dialog'
 
 export default {
diff --git a/src/views/perms/AssetPermission/fields.js b/src/views/perms/AssetPermission/fields.js
index 5b9ba065e..efc765a5d 100644
--- a/src/views/perms/AssetPermission/fields.js
+++ b/src/views/perms/AssetPermission/fields.js
@@ -1,4 +1,4 @@
-import AssetSelect from '@/components/AssetSelect'
+import AssetSelect from '@/components/Apps/AssetSelect'
 import AccountFormatter from './components/AccountFormatter'
 
 function getFields() {
diff --git a/src/views/profile/ApiKey.vue b/src/views/profile/ApiKey.vue
index 30494d88b..43b17dcb7 100644
--- a/src/views/profile/ApiKey.vue
+++ b/src/views/profile/ApiKey.vue
@@ -1,15 +1,15 @@
 <template>
   <GenericListPage
     ref="GenericListTable"
-    :table-config="tableConfig"
     :header-actions="headerActions"
     :help-message="helpMessage"
+    :table-config="tableConfig"
   />
 </template>
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DateFormatter, ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import { DateFormatter, ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/profile/ConnectionToken.vue b/src/views/profile/ConnectionToken.vue
index e70eea4bb..4fbb1898f 100644
--- a/src/views/profile/ConnectionToken.vue
+++ b/src/views/profile/ConnectionToken.vue
@@ -1,15 +1,15 @@
 <template>
   <GenericListPage
     ref="GenericListTable"
-    :table-config="tableConfig"
     :header-actions="headerActions"
     :help-message="helpMessage"
+    :table-config="tableConfig"
   />
 </template>
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'ConnectionToken',
diff --git a/src/views/profile/ProfileImprovement.vue b/src/views/profile/ProfileImprovement.vue
index bae53af93..949895e4a 100644
--- a/src/views/profile/ProfileImprovement.vue
+++ b/src/views/profile/ProfileImprovement.vue
@@ -4,8 +4,8 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import { Required } from '@/components/DataForm/rules'
-import { PhoneInput } from '@/components/FormFields'
+import { Required } from '@/components/Form/DataForm/rules'
+import { PhoneInput } from '@/components/Form/FormFields'
 
 export default {
   name: 'ProfileUpdate',
diff --git a/src/views/profile/ProfileInfo.vue b/src/views/profile/ProfileInfo.vue
index 7bc136dc5..bffc42965 100644
--- a/src/views/profile/ProfileInfo.vue
+++ b/src/views/profile/ProfileInfo.vue
@@ -4,8 +4,8 @@
       v-if="showPasswordDialog"
       :url="confirmUrl"
       :visible.sync="showPasswordDialog"
-      @UserConfirmDone="verifyDone"
       @UserConfirmCancel="exit"
+      @UserConfirmDone="verifyDone"
     />
     <div>
       <el-row :gutter="20">
@@ -14,16 +14,16 @@
         </el-col>
         <el-col :md="10" :sm="24">
           <QuickActions
-            type="primary"
-            :title="$tc('users.AuthSettings')"
             :actions="authQuickActions"
+            :title="$tc('users.AuthSettings')"
+            type="primary"
           />
           <QuickActions
-            type="info"
-            style="margin-top: 15px"
+            :actions="messageSubscriptionQuickActions"
             :title="$tc('users.MessageSubscription')"
             fa="fa-info-circle"
-            :actions="messageSubscriptionQuickActions"
+            style="margin-top: 15px"
+            type="info"
           />
         </el-col>
       </el-row>
@@ -33,9 +33,9 @@
 
 <script type="text/jsx">
 import Page from '@/layout/components/Page'
-import DetailCard from '@/components/DetailCard'
+import DetailCard from '@/components/Cards/DetailCard'
 import QuickActions from '@/components/QuickActions'
-import UserConfirmDialog from '@/components/UserConfirmDialog'
+import UserConfirmDialog from '@/components/Apps/UserConfirmDialog'
 import { toSafeLocalDateStr } from '@/utils/common'
 import store from '@/store'
 
diff --git a/src/views/profile/ProfileUpdate/PasswordUpdate.vue b/src/views/profile/ProfileUpdate/PasswordUpdate.vue
index e21e68134..961e51e7b 100644
--- a/src/views/profile/ProfileUpdate/PasswordUpdate.vue
+++ b/src/views/profile/ProfileUpdate/PasswordUpdate.vue
@@ -1,24 +1,24 @@
 <template>
   <IBox>
     <GenericCreateUpdateForm
-      :fields="fields"
       :encrypted-fields="encryptedFields"
+      :fields="fields"
       :fields-meta="fieldsMeta"
       :initial="object"
-      :url="url"
       :submit-method="submitMethod"
-      class="password-update"
       :update-success-next-route="updateSuccessNextRoute"
+      :url="url"
+      class="password-update"
     />
   </IBox>
 </template>
 
 <script>
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
-import UserPassword from '@/components/FormFields/UserPassword'
+import UserPassword from '@/components/Form/FormFields/UserPassword'
 import { IBox } from '@/components'
-import rules from '@/components/DataForm/rules'
-import { PasswordInput } from '@/components/FormFields'
+import rules from '@/components/Form/DataForm/rules'
+import { PasswordInput } from '@/components/Form/FormFields'
 
 export default {
   name: 'PasswordUpdate',
diff --git a/src/views/profile/ProfileUpdate/ProfileUpdate.vue b/src/views/profile/ProfileUpdate/ProfileUpdate.vue
index cbbfba2e7..e4b5d8471 100644
--- a/src/views/profile/ProfileUpdate/ProfileUpdate.vue
+++ b/src/views/profile/ProfileUpdate/ProfileUpdate.vue
@@ -9,7 +9,7 @@
 
 <script>
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
-import { PhoneInput } from '@/components/FormFields'
+import { PhoneInput } from '@/components/Form/FormFields'
 import { IBox } from '@/components'
 
 export default {
diff --git a/src/views/profile/ProfileUpdate/SecretKeyUpdate.vue b/src/views/profile/ProfileUpdate/SecretKeyUpdate.vue
index 81188bc37..bdd0103fb 100644
--- a/src/views/profile/ProfileUpdate/SecretKeyUpdate.vue
+++ b/src/views/profile/ProfileUpdate/SecretKeyUpdate.vue
@@ -15,7 +15,7 @@
 <script>
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
 import { IBox } from '@/components'
-import TextReadonly from '@/components/FormFields/TextReadonly.vue'
+import TextReadonly from '@/components/Form/FormFields/TextReadonly.vue'
 
 export default {
   name: 'SecretKeyUpdate',
diff --git a/src/views/profile/TempPassword.vue b/src/views/profile/TempPassword.vue
index 26db3664a..3bb3937cd 100644
--- a/src/views/profile/TempPassword.vue
+++ b/src/views/profile/TempPassword.vue
@@ -1,15 +1,15 @@
 <template>
   <GenericListPage
     ref="GenericListTable"
-    :table-config="tableConfig"
     :header-actions="headerActions"
     :help-message="helpMessage"
+    :table-config="tableConfig"
   />
 </template>
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
diff --git a/src/views/sessions/CommandList.vue b/src/views/sessions/CommandList.vue
index 4d58bc0fb..89710b6db 100644
--- a/src/views/sessions/CommandList.vue
+++ b/src/views/sessions/CommandList.vue
@@ -17,10 +17,10 @@
 import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
 import { getDayEnd, getDaysAgo, toSafeLocalDateStr } from '@/utils/common'
 import { OutputExpandFormatter } from './formatters'
-import { DetailFormatter } from '@/components/TableFormatters'
-import isFalsey from '@/components/DataTable/compenents/el-data-table/utils/is-falsey'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
+import isFalsey from '@/components/Table/DataTable/compenents/el-data-table/utils/is-falsey'
 import deepmerge from 'deepmerge'
-import * as queryUtil from '@/components/DataTable/compenents/el-data-table/utils/query'
+import * as queryUtil from '@/components/Table/DataTable/compenents/el-data-table/utils/query'
 import { createSourceIdCache } from '@/api/common'
 
 export default {
diff --git a/src/views/sessions/SessionDetail/SessionCommands.vue b/src/views/sessions/SessionDetail/SessionCommands.vue
index 0521fe59e..1265e2768 100644
--- a/src/views/sessions/SessionDetail/SessionCommands.vue
+++ b/src/views/sessions/SessionDetail/SessionCommands.vue
@@ -1,15 +1,16 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="16" :sm="24">
-      <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+      <ListTable :header-actions="headerActions" :table-config="tableConfig" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 import { OutputExpandFormatter } from '../formatters'
 import { toSafeLocalDateStr } from '@/utils/common'
+
 export default {
   name: 'SessionCommands',
   components: {
diff --git a/src/views/sessions/SessionDetail/SessionDetailInfo.vue b/src/views/sessions/SessionDetail/SessionDetailInfo.vue
index 273af0c39..0b28af510 100644
--- a/src/views/sessions/SessionDetail/SessionDetailInfo.vue
+++ b/src/views/sessions/SessionDetail/SessionDetailInfo.vue
@@ -4,16 +4,17 @@
       <DetailCard v-if="object" :items="detailItems" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <QuickActions v-if="object" type="primary" :actions="quickActions" />
+      <QuickActions v-if="object" :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import DetailCard from '@/components/DetailCard/index'
+import DetailCard from '@/components/Cards/DetailCard/index'
 import QuickActions from '@/components/QuickActions'
 import { terminateSession } from '@/api/sessions'
 import { toSafeLocalDateStr } from '@/utils/common'
+
 export default {
   name: 'SessionDetailInfo',
   components: {
diff --git a/src/views/sessions/SessionDetail/SessionJoinRecords.vue b/src/views/sessions/SessionDetail/SessionJoinRecords.vue
index 61560056c..19be68997 100644
--- a/src/views/sessions/SessionDetail/SessionJoinRecords.vue
+++ b/src/views/sessions/SessionDetail/SessionJoinRecords.vue
@@ -1,9 +1,9 @@
 <template>
-  <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <ListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 
 export default {
   name: 'SessionJoinRecords',
diff --git a/src/views/sessions/SessionList/BaseList.vue b/src/views/sessions/SessionList/BaseList.vue
index 0b896f11f..b24c596af 100644
--- a/src/views/sessions/SessionList/BaseList.vue
+++ b/src/views/sessions/SessionList/BaseList.vue
@@ -3,9 +3,9 @@
 </template>
 
 <script type="text/jsx">
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 import { timeOffset } from '@/utils/common'
-import { ActionsFormatter } from '@/components/TableFormatters'
+import { ActionsFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'BaseList',
diff --git a/src/views/sessions/formatters/OutputExpandFormatter.vue b/src/views/sessions/formatters/OutputExpandFormatter.vue
index e77dd646e..2f61110e2 100644
--- a/src/views/sessions/formatters/OutputExpandFormatter.vue
+++ b/src/views/sessions/formatters/OutputExpandFormatter.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import BaseFormatter from '@/components/TableFormatters/base'
+import BaseFormatter from '@/components/Table/TableFormatters/base'
 
 export default {
   name: 'OutputExpandFormatter',
diff --git a/src/views/settings/Applet/Applet/AppletDetail/Detail.vue b/src/views/settings/Applet/Applet/AppletDetail/Detail.vue
index d927529e7..0f2352129 100644
--- a/src/views/settings/Applet/Applet/AppletDetail/Detail.vue
+++ b/src/views/settings/Applet/Applet/AppletDetail/Detail.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import VueMarkdown from 'vue-markdown'
 import { IBox } from '@/components'
 
diff --git a/src/views/settings/Applet/Applet/components/CardTable.vue b/src/views/settings/Applet/Applet/components/CardTable.vue
index cc69d6573..f4ac8376d 100644
--- a/src/views/settings/Applet/Applet/components/CardTable.vue
+++ b/src/views/settings/Applet/Applet/components/CardTable.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import TableAction from '@/components/ListTable/TableAction'
+import TableAction from '@/components/Table/ListTable/TableAction'
 import { Pagination, Tooltip } from '@/components'
 import { toSafeLocalDateStr } from '@/utils/common'
 
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
index f4529d3d5..f8a94fccd 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue
@@ -1,10 +1,10 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="16" :sm="24">
-      <ListTable :table-config="config" :header-actions="headerConfig" />
+      <ListTable :header-actions="headerConfig" :table-config="config" />
     </el-col>
     <el-col :md="8" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
+      <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
 </template>
@@ -12,7 +12,7 @@
 <script type="text/jsx">
 import { ListTable, QuickActions } from '@/components'
 import { openTaskPage } from '@/utils/jms'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'Publications',
diff --git a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
index 1c4947094..41b44cc1e 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
@@ -6,13 +6,13 @@
       <AutoDetailCard v-bind="detailInfoConfig" />
     </el-col>
     <el-col :md="10" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
+      <QuickActions :actions="quickActions" type="primary" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import QuickActions from '@/components/QuickActions'
 import { openTaskPage } from '@/utils/jms'
 
diff --git a/src/views/settings/Applet/AppletHost/AppletHostList.vue b/src/views/settings/Applet/AppletHost/AppletHostList.vue
index 2f7a0e529..e32a0f35b 100644
--- a/src/views/settings/Applet/AppletHost/AppletHostList.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostList.vue
@@ -10,7 +10,7 @@
 <script>
 import { ListTable } from '@/components'
 import { openTaskPage } from '@/utils/jms'
-import { ProtocolsFormatter } from '@/components/TableFormatters'
+import { ProtocolsFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'AppletHost',
diff --git a/src/views/settings/Auth/CAS.vue b/src/views/settings/Auth/CAS.vue
index 134cf6a05..6553e9c6a 100644
--- a/src/views/settings/Auth/CAS.vue
+++ b/src/views/settings/Auth/CAS.vue
@@ -8,8 +8,8 @@
 
 <script>
 import BaseAuth from './Base'
-import { JsonRequiredUserNameMapped } from '@/components/DataForm/rules'
-import { JsonEditor } from '@/components/FormFields'
+import { JsonRequiredUserNameMapped } from '@/components/Form/DataForm/rules'
+import { JsonEditor } from '@/components/Form/FormFields'
 
 export default {
   name: 'Cas',
diff --git a/src/views/settings/Auth/DingTalk.vue b/src/views/settings/Auth/DingTalk.vue
index 750331141..c083c09c3 100644
--- a/src/views/settings/Auth/DingTalk.vue
+++ b/src/views/settings/Auth/DingTalk.vue
@@ -8,7 +8,7 @@
 
 <script>
 import BaseAuth from './Base'
-import { UpdateToken } from '@/components/FormFields'
+import { UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'DingTalk',
diff --git a/src/views/settings/Auth/FeiShu.vue b/src/views/settings/Auth/FeiShu.vue
index 9a90d6d58..d95b10fe7 100644
--- a/src/views/settings/Auth/FeiShu.vue
+++ b/src/views/settings/Auth/FeiShu.vue
@@ -9,7 +9,7 @@
 
 <script>
 import BaseAuth from './Base'
-import { UpdateToken } from '@/components/FormFields'
+import { UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'Wecom',
diff --git a/src/views/settings/Auth/OAuth2.vue b/src/views/settings/Auth/OAuth2.vue
index 85fd15ddb..0f11f0f97 100644
--- a/src/views/settings/Auth/OAuth2.vue
+++ b/src/views/settings/Auth/OAuth2.vue
@@ -9,8 +9,8 @@
 
 <script>
 import BaseAuth from './Base'
-import { JsonEditor } from '@/components/FormFields'
-import { JsonRequired } from '@/components/DataForm/rules'
+import { JsonEditor } from '@/components/Form/FormFields'
+import { JsonRequired } from '@/components/Form/DataForm/rules'
 import { UploadField } from '@/components'
 import request from '@/utils/request'
 
diff --git a/src/views/settings/Auth/OIDC.vue b/src/views/settings/Auth/OIDC.vue
index 18c67442b..5ffb1ddc0 100644
--- a/src/views/settings/Auth/OIDC.vue
+++ b/src/views/settings/Auth/OIDC.vue
@@ -8,8 +8,8 @@
 
 <script>
 import BaseAuth from './Base'
-import { JsonEditor, UpdateToken } from '@/components/FormFields'
-import { JsonRequired } from '@/components/DataForm/rules'
+import { JsonEditor, UpdateToken } from '@/components/Form/FormFields'
+import { JsonRequired } from '@/components/Form/DataForm/rules'
 
 export default {
   name: 'OIDC',
diff --git a/src/views/settings/Auth/Radius.vue b/src/views/settings/Auth/Radius.vue
index 14093dcf4..62c417dfa 100644
--- a/src/views/settings/Auth/Radius.vue
+++ b/src/views/settings/Auth/Radius.vue
@@ -8,7 +8,7 @@
 
 <script>
 import BaseAuth from './Base'
-import { UpdateToken } from '@/components/FormFields'
+import { UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'Cas',
diff --git a/src/views/settings/Auth/SAML2.vue b/src/views/settings/Auth/SAML2.vue
index a68fce1ea..db0e37e92 100644
--- a/src/views/settings/Auth/SAML2.vue
+++ b/src/views/settings/Auth/SAML2.vue
@@ -9,9 +9,9 @@
 
 <script>
 import BaseAuth from './Base'
-import { JsonRequired } from '@/components/DataForm/rules'
+import { JsonRequired } from '@/components/Form/DataForm/rules'
 import { UploadKey } from '@/components'
-import { JsonEditor } from '@/components/FormFields'
+import { JsonEditor } from '@/components/Form/FormFields'
 
 export default {
   name: 'SAML2',
diff --git a/src/views/settings/Auth/WeCom.vue b/src/views/settings/Auth/WeCom.vue
index 248df13a2..49f5d5017 100644
--- a/src/views/settings/Auth/WeCom.vue
+++ b/src/views/settings/Auth/WeCom.vue
@@ -8,7 +8,7 @@
 
 <script>
 import BaseAuth from './Base'
-import { UpdateToken } from '@/components/FormFields'
+import { UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'WeCom',
diff --git a/src/views/settings/Basic/index.vue b/src/views/settings/Basic/index.vue
index 9833b475a..03beaaeb8 100644
--- a/src/views/settings/Basic/index.vue
+++ b/src/views/settings/Basic/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 import Announcement from './announcement'
 
 export default {
diff --git a/src/views/settings/Email/SMTP.vue b/src/views/settings/Email/SMTP.vue
index 0e2df181c..b0e3f80e8 100644
--- a/src/views/settings/Email/SMTP.vue
+++ b/src/views/settings/Email/SMTP.vue
@@ -3,11 +3,11 @@
     <el-button size="mini" type="primary" @click="visible = !visible"> {{ $t("setting.Setting") }} </el-button>
     <Dialog
       v-if="visible"
-      :title="$tc('setting.SMTP')"
-      :visible.sync="visible"
       :destroy-on-close="true"
       :show-cancel="false"
       :show-confirm="false"
+      :title="$tc('setting.SMTP')"
+      :visible.sync="visible"
       width="70%"
       @confirm="onConfirm()"
     >
@@ -20,7 +20,7 @@
 <script>
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
 import { Dialog } from '@/components'
-import { UpdateToken } from '@/components/FormFields'
+import { UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'SMTP',
diff --git a/src/views/settings/Email/index.vue b/src/views/settings/Email/index.vue
index 41edb802e..f04cf9c18 100644
--- a/src/views/settings/Email/index.vue
+++ b/src/views/settings/Email/index.vue
@@ -11,7 +11,7 @@ import { GenericCreateUpdatePage } from '@/layout/components'
 import { testEmailSetting } from '@/api/settings'
 import EmailContent from './EmailContent'
 import SMTP from './SMTP'
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 
 export default {
   name: 'Email',
diff --git a/src/views/settings/Ldap/ImportDialog.vue b/src/views/settings/Ldap/ImportDialog.vue
index 7e53a6580..dd171ea68 100644
--- a/src/views/settings/Ldap/ImportDialog.vue
+++ b/src/views/settings/Ldap/ImportDialog.vue
@@ -1,18 +1,18 @@
 <template>
   <div>
     <Dialog
-      :title="$tc('setting.importLdapUserTitle')"
-      v-bind="$attrs"
       :destroy-on-close="true"
       :show-cancel="false"
+      :title="$tc('setting.importLdapUserTitle')"
+      v-bind="$attrs"
       v-on="$listeners"
     >
       <el-alert type="success"> {{ $t('setting.importLdapUserTip') }}</el-alert>
       <ListTable
         ref="listTable"
-        class="listTable"
-        :table-config="tableConfig"
         :header-actions="headerActions"
+        :table-config="tableConfig"
+        class="listTable"
       />
       <div slot="footer">
         <span v-show="showOrgSelect" class="org-select">
@@ -20,17 +20,17 @@
           <Select2
             ref="select2"
             v-model="select2.value"
-            v-bind="select2"
             popper-class="select-org-dropdown"
+            v-bind="select2"
           />
         </span>
-        <el-button type="primary" size="small" :loading="dialogLdapUserImportLoginStatus" @click="importUserClick">
+        <el-button :loading="dialogLdapUserImportLoginStatus" size="small" type="primary" @click="importUserClick">
           {{ $t('common.Import') }}
         </el-button>
         <el-button
-          type="primary"
-          size="small"
           :loading="dialogLdapUserImportAllLoginStatus"
+          size="small"
+          type="primary"
           @click="importAllUserClick"
         >{{ $t('common.ImportAll') }}
         </el-button>
@@ -43,9 +43,9 @@
 <script>
 import store from '@/store'
 import { DEFAULT_ORG_ID, SYSTEM_ORG_ID } from '@/utils/org'
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 import Dialog from '@/components/Dialog'
-import Select2 from '@/components/FormFields/Select2'
+import Select2 from '@/components/Form/FormFields/Select2'
 import { importLdapUser, refreshLdapUserCache, startLdapUserCache } from '@/api/settings'
 import { getErrorResponseMsg } from '@/utils/common'
 
@@ -199,7 +199,7 @@ export default {
 }
 </style>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .org-select {
   float: left;
   width: 300px;
diff --git a/src/views/settings/Ldap/SyncSettingDialog.vue b/src/views/settings/Ldap/SyncSettingDialog.vue
index 5466e4448..cd3570799 100644
--- a/src/views/settings/Ldap/SyncSettingDialog.vue
+++ b/src/views/settings/Ldap/SyncSettingDialog.vue
@@ -20,8 +20,8 @@
 <script>
 import { GenericCreateUpdateForm } from '@/layout/components'
 import { CronTab, Dialog } from '@/components'
-import Select2 from '@/components/FormFields/Select2'
-import { Required } from '@/components/DataForm/rules'
+import Select2 from '@/components/Form/FormFields/Select2'
+import { Required } from '@/components/Form/DataForm/rules'
 
 export default {
   name: 'SyncSettingDialog',
diff --git a/src/views/settings/Ldap/index.vue b/src/views/settings/Ldap/index.vue
index 53e8787a0..c694884c2 100644
--- a/src/views/settings/Ldap/index.vue
+++ b/src/views/settings/Ldap/index.vue
@@ -13,8 +13,8 @@ import ImportDialog from './ImportDialog'
 import TestLoginDialog from './TestLoginDialog'
 import SyncSettingDialog from './SyncSettingDialog'
 import { IBox } from '@/components'
-import rules, { JsonRequired } from '@/components/DataForm/rules'
-import { JsonEditor, UpdateToken } from '@/components/FormFields'
+import rules, { JsonRequired } from '@/components/Form/DataForm/rules'
+import { JsonEditor, UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'Ldap',
diff --git a/src/views/settings/License.vue b/src/views/settings/License.vue
index b9bf45760..a9aa6956e 100644
--- a/src/views/settings/License.vue
+++ b/src/views/settings/License.vue
@@ -6,16 +6,16 @@
       </el-alert>
       <el-row :gutter="20">
         <el-col :md="14" :sm="24">
-          <DetailCard :title="cardTitle" :items="detailItems" />
+          <DetailCard :items="detailItems" :title="cardTitle" />
         </el-col>
         <el-col :md="10" :sm="24">
-          <QuickActions type="primary" :actions="quickActions" />
+          <QuickActions :actions="quickActions" type="primary" />
         </el-col>
       </el-row>
       <Dialog
+        :title="$tc('setting.ImportLicense')"
         :visible.sync="dialogLicenseImport"
         top="20vh"
-        :title="$tc('setting.ImportLicense')"
         @cancel="dialogLicenseImport = false"
         @confirm="importLicense"
       >
@@ -29,8 +29,8 @@
 
 <script>
 import Page from '@/layout/components/Page'
-import { QuickActions, Dialog } from '@/components'
-import DetailCard from '@/components/DetailCard/index'
+import { Dialog, QuickActions } from '@/components'
+import DetailCard from '@/components/Cards/DetailCard/index'
 import { importLicense } from '@/api/settings'
 import { mapGetters } from 'vuex'
 
diff --git a/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue b/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
index a58c20aca..2cb60418c 100644
--- a/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
+++ b/src/views/settings/Org/OrganizationDetail/OrganizationDetail.vue
@@ -1,14 +1,14 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :fields="detailFields" :object="object" />
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
     </el-col>
     <el-col :md="10" :sm="24" />
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'OrganizationDetail',
diff --git a/src/views/settings/SMS/CMPP2.vue b/src/views/settings/SMS/CMPP2.vue
index e93b997aa..6cbda8310 100644
--- a/src/views/settings/SMS/CMPP2.vue
+++ b/src/views/settings/SMS/CMPP2.vue
@@ -1,10 +1,10 @@
 <template>
-  <BaseSMS ref="baseSms" :title="$tc('setting.CMPP2')" :config="$data" />
+  <BaseSMS ref="baseSms" :config="$data" :title="$tc('setting.CMPP2')" />
 </template>
 
 <script>
 import BaseSMS from './Base'
-import { UpdateToken, PhoneInput } from '@/components/FormFields'
+import { PhoneInput, UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'CMPP2',
diff --git a/src/views/settings/SMS/SMSAlibaba.vue b/src/views/settings/SMS/SMSAlibaba.vue
index b9c16a296..07dc0187b 100644
--- a/src/views/settings/SMS/SMSAlibaba.vue
+++ b/src/views/settings/SMS/SMSAlibaba.vue
@@ -1,10 +1,10 @@
 <template>
-  <BaseSMS ref="baseSms" :title="$tc('setting.AlibabaCloud')" :config="$data" />
+  <BaseSMS ref="baseSms" :config="$data" :title="$tc('setting.AlibabaCloud')" />
 </template>
 
 <script>
 import BaseSMS from './Base'
-import { UpdateToken, PhoneInput } from '@/components/FormFields'
+import { PhoneInput, UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'SMSAlibaba',
diff --git a/src/views/settings/SMS/SMSCustom.vue b/src/views/settings/SMS/SMSCustom.vue
index 4867c7950..5dc317d9a 100644
--- a/src/views/settings/SMS/SMSCustom.vue
+++ b/src/views/settings/SMS/SMSCustom.vue
@@ -1,10 +1,10 @@
 <template>
-  <BaseSMS ref="baseSms" :title="$tc('setting.Custom')" :config="$data" />
+  <BaseSMS ref="baseSms" :config="$data" :title="$tc('setting.Custom')" />
 </template>
 
 <script>
 import BaseSMS from './Base'
-import { JsonEditor, PhoneInput } from '@/components/FormFields'
+import { JsonEditor, PhoneInput } from '@/components/Form/FormFields'
 
 export default {
   name: 'SMSCustom',
diff --git a/src/views/settings/SMS/SMSHuawei.vue b/src/views/settings/SMS/SMSHuawei.vue
index aae68ddf6..a2e6e01b5 100644
--- a/src/views/settings/SMS/SMSHuawei.vue
+++ b/src/views/settings/SMS/SMSHuawei.vue
@@ -1,10 +1,10 @@
 <template>
-  <BaseSMS ref="baseSms" :title="$tc('setting.HuaweiCloud')" :config="$data" />
+  <BaseSMS ref="baseSms" :config="$data" :title="$tc('setting.HuaweiCloud')" />
 </template>
 
 <script>
 import BaseSMS from './Base'
-import { UpdateToken, PhoneInput } from '@/components/FormFields'
+import { PhoneInput, UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'SMSHuawei',
diff --git a/src/views/settings/SMS/SMSTencent.vue b/src/views/settings/SMS/SMSTencent.vue
index 644557277..ae089fe93 100644
--- a/src/views/settings/SMS/SMSTencent.vue
+++ b/src/views/settings/SMS/SMSTencent.vue
@@ -1,10 +1,10 @@
 <template>
-  <BaseSMS ref="baseSms" :title="$tc('setting.TencentCloud')" :config="$data" />
+  <BaseSMS ref="baseSms" :config="$data" :title="$tc('setting.TencentCloud')" />
 </template>
 
 <script>
 import BaseSMS from './Base'
-import { UpdateToken, PhoneInput } from '@/components/FormFields'
+import { PhoneInput, UpdateToken } from '@/components/Form/FormFields'
 
 export default {
   name: 'SMSTencent',
diff --git a/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue b/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
index 4ed0c689e..1761f6910 100644
--- a/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
+++ b/src/views/settings/Terminal/Component/TerminalDetail/Detail.vue
@@ -2,14 +2,14 @@
   <div>
     <el-row :gutter="20">
       <el-col :md="14" :sm="24">
-        <AutoDetailCard :url="url" :object="object" />
+        <AutoDetailCard :object="object" :url="url" />
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'TerminalDetail',
diff --git a/src/views/settings/Terminal/Component/TerminalList.vue b/src/views/settings/Terminal/Component/TerminalList.vue
index 8891de092..b21b1c2f2 100644
--- a/src/views/settings/Terminal/Component/TerminalList.vue
+++ b/src/views/settings/Terminal/Component/TerminalList.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
     <Dialog
-      :visible.sync="dialogSettings.visible"
       :destroy-on-close="true"
       :show-cancel="false"
-      :title="$tc('sessions.terminalUpdateStorage')"
       :show-confirm="false"
+      :title="$tc('sessions.terminalUpdateStorage')"
+      :visible.sync="dialogSettings.visible"
     >
       <GenericCreateUpdateForm v-bind="dialogSettings.iFormSetting" />
     </Dialog>
@@ -14,10 +14,10 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 import { GenericCreateUpdateForm } from '@/layout/components'
 import Dialog from '@/components/Dialog'
-import Select2 from '@/components/FormFields/Select2'
+import Select2 from '@/components/Form/FormFields/Select2'
 
 export default {
   components: {
diff --git a/src/views/settings/Terminal/Endpoint/EndpointList.vue b/src/views/settings/Terminal/Endpoint/EndpointList.vue
index 9246e1256..786b51889 100644
--- a/src/views/settings/Terminal/Endpoint/EndpointList.vue
+++ b/src/views/settings/Terminal/Endpoint/EndpointList.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <el-alert type="success" v-html="helpMessage" />
-    <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
   </div>
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 
 export default {
   name: 'EndpointList',
diff --git a/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue b/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue
index cb31afe26..d0e42e283 100644
--- a/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue
+++ b/src/views/settings/Terminal/EndpointRule/EndpointRuleList.vue
@@ -1,12 +1,13 @@
 <template>
   <div>
     <el-alert type="success" v-html="helpMessage" />
-    <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+    <ListTable :header-actions="headerActions" :table-config="tableConfig" />
   </div>
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
+
 export default {
   name: 'EndpointRule',
   components: {
diff --git a/src/views/settings/Terminal/Storage/CommandStorage.vue b/src/views/settings/Terminal/Storage/CommandStorage.vue
index cc7cc16cb..686ee1285 100644
--- a/src/views/settings/Terminal/Storage/CommandStorage.vue
+++ b/src/views/settings/Terminal/Storage/CommandStorage.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 import { SetToDefaultCommandStorage, TestCommandStorage } from '@/api/sessions'
 
 export default {
diff --git a/src/views/settings/Terminal/Storage/CommandStorageCreateUpdate.vue b/src/views/settings/Terminal/Storage/CommandStorageCreateUpdate.vue
index 5c5469c86..e4af85c41 100644
--- a/src/views/settings/Terminal/Storage/CommandStorageCreateUpdate.vue
+++ b/src/views/settings/Terminal/Storage/CommandStorageCreateUpdate.vue
@@ -8,7 +8,7 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import { Required } from '@/components/DataForm/rules'
+import { Required } from '@/components/Form/DataForm/rules'
 export default {
   name: 'CommandStorageUpdate',
   components: {
diff --git a/src/views/settings/Terminal/Storage/ReplayStorage.vue b/src/views/settings/Terminal/Storage/ReplayStorage.vue
index 0a6f2eda0..886a2f8b8 100644
--- a/src/views/settings/Terminal/Storage/ReplayStorage.vue
+++ b/src/views/settings/Terminal/Storage/ReplayStorage.vue
@@ -2,7 +2,7 @@
   <ListTable ref="ListTable" :header-actions="replayActions" :table-config="replayTableConfig" />
 </template>
 <script>
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 import { SetToDefaultReplayStorage, TestReplayStorage } from '@/api/sessions'
 import { getReplayStorageOptions } from '@/views/sessions/const'
 
diff --git a/src/views/settings/Terminal/Storage/ReplayStorageCreateUpdate.vue b/src/views/settings/Terminal/Storage/ReplayStorageCreateUpdate.vue
index fb12982d2..f25ef9db2 100644
--- a/src/views/settings/Terminal/Storage/ReplayStorageCreateUpdate.vue
+++ b/src/views/settings/Terminal/Storage/ReplayStorageCreateUpdate.vue
@@ -1,15 +1,15 @@
 <template>
   <GenericCreateUpdatePage
-    v-bind="$data"
     :create-success-next-route="successUrl"
     :update-success-next-route="successUrl"
+    v-bind="$data"
   />
 </template>
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
 import { STORAGE_TYPE_META_MAP } from '@/views/sessions/const'
-import { UpdateToken } from '@/components/FormFields'
+import { UpdateToken } from '@/components/Form/FormFields'
 import { encryptPassword } from '@/utils/crypto'
 
 export default {
diff --git a/src/views/settings/Tool/Base.vue b/src/views/settings/Tool/Base.vue
index 6d97ad6d8..e271e09b5 100644
--- a/src/views/settings/Tool/Base.vue
+++ b/src/views/settings/Tool/Base.vue
@@ -1,6 +1,6 @@
 <template>
   <IBox>
-    <el-form ref="testForm" label-width="15%" :model="testData" :rules="rules">
+    <el-form ref="testForm" :model="testData" :rules="rules" label-width="15%">
       <el-form-item v-for="f in fields" :key="f.name" :label="f.label" :prop="f.name">
         <Select2 v-if="f.options" v-model="testData[f.name]" :options="f.options" />
         <TagInput
@@ -11,13 +11,13 @@
         <el-input v-else v-model="testData[f.name]" :placeholder="f.placeholder" :type="f.type" />
       </el-form-item>
       <el-form-item :label="$tc('ops.output')">
-        <Term ref="xterm" style="border: solid 1px #dddddd" :xterm-config="xtermConfig" />
+        <Term ref="xterm" :xterm-config="xtermConfig" style="border: solid 1px #dddddd" />
       </el-form-item>
       <el-form-item>
         <el-button
-          type="primary"
-          size="mini"
           :loading="isTesting"
+          size="mini"
+          type="primary"
           @click="submitTest"
         >
           {{ $t('setting.testTools') }}
@@ -29,8 +29,8 @@
 
 <script>
 import { IBox } from '@/components'
-import Term from '@/components/Term'
-import { Select2, TagInput } from '@/components/FormFields'
+import Term from '@/components/Widgets/Term'
+import { Select2, TagInput } from '@/components/Form/FormFields'
 
 export default {
   name: 'Base',
diff --git a/src/views/settings/Tool/Nmap.vue b/src/views/settings/Tool/Nmap.vue
index aa3c45924..294691cbf 100644
--- a/src/views/settings/Tool/Nmap.vue
+++ b/src/views/settings/Tool/Nmap.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 import Base from './Base'
 
 export default {
diff --git a/src/views/settings/Tool/Ping.vue b/src/views/settings/Tool/Ping.vue
index 377815b17..f134fdfdc 100644
--- a/src/views/settings/Tool/Ping.vue
+++ b/src/views/settings/Tool/Ping.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 import Base from './Base'
 
 export default {
diff --git a/src/views/settings/Tool/Telnet.vue b/src/views/settings/Tool/Telnet.vue
index d7fe9d96f..9431a9d86 100644
--- a/src/views/settings/Tool/Telnet.vue
+++ b/src/views/settings/Tool/Telnet.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 import Base from './Base'
 
 export default {
diff --git a/src/views/tasks/TaskDetail/TaskDetail.vue b/src/views/tasks/TaskDetail/TaskDetail.vue
index 6b37b8474..12fdb55a0 100644
--- a/src/views/tasks/TaskDetail/TaskDetail.vue
+++ b/src/views/tasks/TaskDetail/TaskDetail.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <DetailCard :title="cardTitle" :items="detailCardItems" />
+      <DetailCard :items="detailCardItems" :title="cardTitle" />
     </el-col>
   </el-row>
 </template>
 
 <script type="text/jsx">
-import DetailCard from '@/components/DetailCard'
+import DetailCard from '@/components/Cards/DetailCard'
 
 export default {
   name: 'TaskDetail',
diff --git a/src/views/tasks/TaskDetail/TaskHistory.vue b/src/views/tasks/TaskDetail/TaskHistory.vue
index 27f4bbcb5..191a6e2a6 100644
--- a/src/views/tasks/TaskDetail/TaskHistory.vue
+++ b/src/views/tasks/TaskDetail/TaskHistory.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script type="text/jsx">
-import ListTable from '@/components/ListTable'
+import ListTable from '@/components/Table/ListTable'
 import { openTaskPage } from '@/utils/jms'
 
 export default {
diff --git a/src/views/tasks/TaskList.vue b/src/views/tasks/TaskList.vue
index 9572b7833..5c63ca1e0 100644
--- a/src/views/tasks/TaskList.vue
+++ b/src/views/tasks/TaskList.vue
@@ -4,7 +4,7 @@
 
 <script type="text/jsx">
 import { GenericListPage } from '@/layout/components'
-import { ChoicesFormatter, DetailFormatter } from '@/components/TableFormatters'
+import { ChoicesFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { BASE_URL } from '@/utils/common'
 
 export default {
diff --git a/src/views/tickets/AssignedTicketList.vue b/src/views/tickets/AssignedTicketList.vue
index ef85215d4..876fac55e 100644
--- a/src/views/tickets/AssignedTicketList.vue
+++ b/src/views/tickets/AssignedTicketList.vue
@@ -3,17 +3,17 @@
     <BaseTicketList ref="BaseTicketList" :url="url" v-bind="$data" />
     <Dialog
       v-if="isVisible"
-      width="70%"
-      :title="$tc('tickets.BatchApproval')"
-      :visible.sync="isVisible"
       :cancel-title="$tc('tickets.BatchReject')"
       :confirm-title="$tc('tickets.BatchApproval')"
       :destroy-on-close="true"
+      :title="$tc('tickets.BatchApproval')"
+      :visible.sync="isVisible"
+      width="70%"
       @cancel="onCancel"
       @confirm="onConfirm"
     >
       <div v-for="d in ticketData" :key="d.id">
-        <AutoDetailCard :url="detailUrl" :fields="getDetailFields(d)" :object="d" :title="`${d.title}(${d.type.label})`" />
+        <AutoDetailCard :fields="getDetailFields(d)" :object="d" :title="`${d.title}(${d.type.label})`" :url="detailUrl" />
       </div>
     </Dialog>
   </div>
@@ -23,8 +23,9 @@
 <script>
 import BaseTicketList from './BaseTicketList'
 import { mapGetters } from 'vuex'
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 import Dialog from '@/components/Dialog'
+
 export default {
   name: 'AssignedTicketList',
   components: {
diff --git a/src/views/tickets/BaseTicketList.vue b/src/views/tickets/BaseTicketList.vue
index d3c739e40..8610f02f7 100644
--- a/src/views/tickets/BaseTicketList.vue
+++ b/src/views/tickets/BaseTicketList.vue
@@ -9,7 +9,7 @@
 
 <script type="text/jsx">
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter, TagChoicesFormatter } from '@/components/TableFormatters'
+import { DetailFormatter, TagChoicesFormatter } from '@/components/Table/TableFormatters'
 import { toSafeLocalDateStr } from '@/utils/common'
 import { APPROVE, REJECT } from './const'
 
diff --git a/src/views/tickets/RequestAssetPerm/CreateUpdate.vue b/src/views/tickets/RequestAssetPerm/CreateUpdate.vue
index a7e98901c..1881c80d4 100644
--- a/src/views/tickets/RequestAssetPerm/CreateUpdate.vue
+++ b/src/views/tickets/RequestAssetPerm/CreateUpdate.vue
@@ -10,7 +10,7 @@
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
 import AccountFormatter from '@/views/perms/AssetPermission/components/AccountFormatter'
-import Select2 from '@/components/FormFields/Select2'
+import Select2 from '@/components/Form/FormFields/Select2'
 import { getDaysFuture } from '@/utils/common'
 import { mapGetters, mapState } from 'vuex'
 import store from '@/store'
diff --git a/src/views/tickets/RequestAssetPerm/Detail/TicketDetail.vue b/src/views/tickets/RequestAssetPerm/Detail/TicketDetail.vue
index 74bf8c138..b2a2c8710 100644
--- a/src/views/tickets/RequestAssetPerm/Detail/TicketDetail.vue
+++ b/src/views/tickets/RequestAssetPerm/Detail/TicketDetail.vue
@@ -60,8 +60,8 @@ import { toSafeLocalDateStr } from '@/utils/common'
 import { STATUS_MAP, treeNodes } from '../../const'
 import GenericTicketDetail from '@/views/tickets/components/GenericTicketDetail'
 import AccountFormatter from '@/views/perms/AssetPermission/components/AccountFormatter'
-import Select2 from '@/components/FormFields/Select2'
-import BasicTree from '@/components/FormFields/BasicTree'
+import Select2 from '@/components/Form/FormFields/Select2'
+import BasicTree from '@/components/Form/FormFields/BasicTree'
 import IBox from '@/components/IBox'
 import { AccountLabelMapper } from '@/views/perms/const'
 
diff --git a/src/views/tickets/TicketFlow/FlowRuleField.vue b/src/views/tickets/TicketFlow/FlowRuleField.vue
index 0fcee5209..c5f9c04c0 100644
--- a/src/views/tickets/TicketFlow/FlowRuleField.vue
+++ b/src/views/tickets/TicketFlow/FlowRuleField.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Select2 from '@/components/FormFields/Select2'
+import Select2 from '@/components/Form/FormFields/Select2'
 
 export default {
   components: {
diff --git a/src/views/tickets/TicketFlow/TicketFlow.vue b/src/views/tickets/TicketFlow/TicketFlow.vue
index 4246cb52b..9776dbd54 100644
--- a/src/views/tickets/TicketFlow/TicketFlow.vue
+++ b/src/views/tickets/TicketFlow/TicketFlow.vue
@@ -1,10 +1,10 @@
 <template>
-  <GenericListPage ref="GenericListPage" :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListPage ref="GenericListPage" :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'TicketFlow',
diff --git a/src/views/tickets/TicketFlow/components/Details.vue b/src/views/tickets/TicketFlow/components/Details.vue
index ff95b3cfc..bb5313354 100644
--- a/src/views/tickets/TicketFlow/components/Details.vue
+++ b/src/views/tickets/TicketFlow/components/Details.vue
@@ -6,7 +6,7 @@
     <div class="content">
       <el-row :gutter="10">
         <el-col v-for="item in detailCardItems" :key="'card-' + item.key">
-          <el-row class="item" :gutter="10">
+          <el-row :gutter="10" class="item">
             <el-col :md="6" :sm="12">
               <div :style="{ 'text-align': 'align' }" class="item-label">
                 <label>{{ item.key }}: </label>
@@ -41,8 +41,9 @@
   </IBox>
 </template>
 <script>
-import ItemValue from '@/components/DetailCard/ItemValue'
+import ItemValue from '@/components/Cards/DetailCard/ItemValue'
 import IBox from '@/components/IBox'
+
 export default {
   name: 'Details',
   components: { ItemValue, IBox },
diff --git a/src/views/tickets/components/Comments.vue b/src/views/tickets/components/Comments.vue
index 427c4e19a..0e0072af2 100644
--- a/src/views/tickets/components/Comments.vue
+++ b/src/views/tickets/components/Comments.vue
@@ -69,7 +69,7 @@
 import IBox from '@/components/IBox'
 import { formatTime, getDateTimeStamp } from '@/utils'
 import { toSafeLocalDateStr } from '@/utils/common'
-import MarkDown from '@/components/MarkDown'
+import MarkDown from '@/components/Widgets/MarkDown'
 
 export default {
   name: 'Comments',
diff --git a/src/views/tickets/components/Details.vue b/src/views/tickets/components/Details.vue
index 336ba888a..0e393a233 100644
--- a/src/views/tickets/components/Details.vue
+++ b/src/views/tickets/components/Details.vue
@@ -29,8 +29,9 @@
   </IBox>
 </template>
 <script>
-import ItemValue from '@/components/DetailCard/ItemValue'
+import ItemValue from '@/components/Cards/DetailCard/ItemValue'
 import IBox from '@/components/IBox'
+
 export default {
   name: 'Details',
   components: { ItemValue, IBox },
diff --git a/src/views/users/Group/UserGroupDetail/GroupInfo.vue b/src/views/users/Group/UserGroupDetail/GroupInfo.vue
index 003fee4d5..bb7757359 100644
--- a/src/views/users/Group/UserGroupDetail/GroupInfo.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupInfo.vue
@@ -1,13 +1,13 @@
 <template>
   <el-row :gutter="20">
     <el-col :md="14" :sm="24">
-      <AutoDetailCard :url="url" :object="object" :excludes="excludes" />
+      <AutoDetailCard :excludes="excludes" :object="object" :url="url" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import AutoDetailCard from '@/components/DetailCard/auto'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'GroupInfo',
diff --git a/src/views/users/Group/UserGroupDetail/GroupUser.vue b/src/views/users/Group/UserGroupDetail/GroupUser.vue
index 832cdf808..f8570f12b 100644
--- a/src/views/users/Group/UserGroupDetail/GroupUser.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupUser.vue
@@ -2,7 +2,7 @@
   <div>
     <el-row :gutter="20">
       <el-col :md="14" :sm="24">
-        <GenericListTable ref="listTable" :table-config="tableConfig" :header-actions="headerActions" />
+        <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
       </el-col>
       <el-col :md="10" :sm="24">
         <QuickActions :actions="quickActions" :title="title" type="primary" />
@@ -15,8 +15,8 @@
 <script>
 import GenericListTable from '@/layout/components/GenericListTable'
 import QuickActions from '@/components/QuickActions'
-import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter, DetailFormatter } from '@/components/TableFormatters'
+import RelationCard from '@/components/Cards/RelationCard'
+import { DeleteActionFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'GroupUser',
diff --git a/src/views/users/Group/UserGroupList.vue b/src/views/users/Group/UserGroupList.vue
index a950d7629..f9021997f 100644
--- a/src/views/users/Group/UserGroupList.vue
+++ b/src/views/users/Group/UserGroupList.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListPage } from '@/layout/components'
-import AmountFormatter from '@/components/TableFormatters/AmountFormatter.vue'
+import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter.vue'
 
 export default {
   components: {
diff --git a/src/views/users/Role/RoleCreateUpdate.vue b/src/views/users/Role/RoleCreateUpdate.vue
index 1f3826544..206b78801 100644
--- a/src/views/users/Role/RoleCreateUpdate.vue
+++ b/src/views/users/Role/RoleCreateUpdate.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import { Text } from '@/components/FormFields'
+import { Text } from '@/components/Form/FormFields'
 
 export default {
   components: {
diff --git a/src/views/users/Role/RoleDetail/RoleInfo.vue b/src/views/users/Role/RoleDetail/RoleInfo.vue
index 61513fb40..a0a2a942b 100644
--- a/src/views/users/Role/RoleDetail/RoleInfo.vue
+++ b/src/views/users/Role/RoleDetail/RoleInfo.vue
@@ -26,8 +26,8 @@
 
 <script>
 import { IBox } from '@/components'
-import AutoDetailCard from '@/components/DetailCard/auto'
-import AutoDataZTree from '@/components/AutoDataZTree'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
+import AutoDataZTree from '@/components/Tree/AutoDataZTree'
 import { toSafeLocalDateStr } from '@/utils/common'
 
 export default {
diff --git a/src/views/users/Role/RoleList/BaseRoleList.vue b/src/views/users/Role/RoleList/BaseRoleList.vue
index a2f07532c..406a0759f 100644
--- a/src/views/users/Role/RoleList/BaseRoleList.vue
+++ b/src/views/users/Role/RoleList/BaseRoleList.vue
@@ -1,10 +1,10 @@
 <template>
-  <ListTable :table-config="tableConfig" :header-actions="headerActions" />
+  <ListTable :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
 import { ListTable } from '@/components'
-import { DetailFormatter } from '@/components/TableFormatters'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'BaseRoleList',
diff --git a/src/views/users/User/UserCreateUpdate.vue b/src/views/users/User/UserCreateUpdate.vue
index 588d37d47..3d6d2b1df 100644
--- a/src/views/users/User/UserCreateUpdate.vue
+++ b/src/views/users/User/UserCreateUpdate.vue
@@ -4,8 +4,8 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
-import { UserPassword, PhoneInput } from '@/components/FormFields'
-import rules from '@/components/DataForm/rules'
+import { PhoneInput, UserPassword } from '@/components/Form/FormFields'
+import rules from '@/components/Form/DataForm/rules'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/src/views/users/User/UserDetail/UserAssetPermissionRules.vue b/src/views/users/User/UserDetail/UserAssetPermissionRules.vue
index 6307e08f4..f97f63289 100644
--- a/src/views/users/User/UserDetail/UserAssetPermissionRules.vue
+++ b/src/views/users/User/UserDetail/UserAssetPermissionRules.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import ListTable from '@/components/ListTable'
-import AmountFormatter from '@/components/TableFormatters/AmountFormatter.vue'
+import ListTable from '@/components/Table/ListTable'
+import AmountFormatter from '@/components/Table/TableFormatters/AmountFormatter.vue'
 import { UserAssetPermissionListPageSearchConfigOptions } from '@/views/perms/const'
 
 export default {
diff --git a/src/views/users/User/UserDetail/UserGrantedAssets.vue b/src/views/users/User/UserDetail/UserGrantedAssets.vue
index 07142ba52..4c7f4ebd9 100644
--- a/src/views/users/User/UserDetail/UserGrantedAssets.vue
+++ b/src/views/users/User/UserDetail/UserGrantedAssets.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import GrantedAssets from '@/components/GrantedAssets'
+import GrantedAssets from '@/components/Apps/GrantedAssets'
 
 export default {
   name: 'UserGrantedAssets',
diff --git a/src/views/users/User/UserDetail/UserInfo.vue b/src/views/users/User/UserDetail/UserInfo.vue
index a53cd54ad..24ad7f80a 100644
--- a/src/views/users/User/UserDetail/UserInfo.vue
+++ b/src/views/users/User/UserDetail/UserInfo.vue
@@ -12,8 +12,8 @@
 
 <script>
 import QuickActions from '@/components/QuickActions'
-import RelationCard from '@/components/RelationCard'
-import AutoDetailCard from '@/components/DetailCard/auto'
+import RelationCard from '@/components/Cards/RelationCard'
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
 
 export default {
   name: 'UserInfo',
diff --git a/src/views/users/User/components/InviteUsersDialog.vue b/src/views/users/User/components/InviteUsersDialog.vue
index 39c1b1fe5..157a879a3 100644
--- a/src/views/users/User/components/InviteUsersDialog.vue
+++ b/src/views/users/User/components/InviteUsersDialog.vue
@@ -22,7 +22,7 @@ import Dialog from '@/components/Dialog'
 import { Select2 } from '@/components'
 import { GenericCreateUpdateForm } from '@/layout/components'
 import { mapGetters } from 'vuex'
-import rules from '@/components/DataForm/rules'
+import rules from '@/components/Form/DataForm/rules'
 
 export default {
   components: {
diff --git a/src/views/users/const.js b/src/views/users/const.js
index dde458ab4..53f4316ed 100644
--- a/src/views/users/const.js
+++ b/src/views/users/const.js
@@ -1,4 +1,4 @@
-import { JSONManyToManySelect } from '@/components/FormFields'
+import { JSONManyToManySelect } from '@/components/Form/FormFields'
 
 export const userJSONSelectMeta = (vm, withoutOrgRole = false) => {
   return {
diff --git a/tests/unit/components/Breadcrumb.spec.js b/tests/unit/components/Breadcrumb.spec.js
index a19277bf7..87ddd9d51 100644
--- a/tests/unit/components/Breadcrumb.spec.js
+++ b/tests/unit/components/Breadcrumb.spec.js
@@ -1,7 +1,7 @@
-import { mount, createLocalVue } from '@vue/test-utils'
+import { createLocalVue, mount } from '@vue/test-utils'
 import VueRouter from 'vue-router'
 import ElementUI from 'element-ui'
-import Breadcrumb from '@/components/Breadcrumb/index.vue'
+import Breadcrumb from '@/components/Widgets/Breadcrumb/index.vue'
 
 const localVue = createLocalVue()
 localVue.use(VueRouter)
diff --git a/tests/unit/components/Hamburger.spec.js b/tests/unit/components/Hamburger.spec.js
index 01ea303a5..215739cca 100644
--- a/tests/unit/components/Hamburger.spec.js
+++ b/tests/unit/components/Hamburger.spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils'
-import Hamburger from '@/components/Hamburger/index.vue'
+import Hamburger from '@/components/Widgets/Hamburger/index.vue'
+
 describe('Hamburger.vue', () => {
   it('toggle click', () => {
     const wrapper = shallowMount(Hamburger)
diff --git a/tests/unit/components/SvgIcon.spec.js b/tests/unit/components/SvgIcon.spec.js
index 31467a9f6..c70f4d801 100644
--- a/tests/unit/components/SvgIcon.spec.js
+++ b/tests/unit/components/SvgIcon.spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils'
-import SvgIcon from '@/components/SvgIcon/index.vue'
+import SvgIcon from '@/components/Widgets/SvgIcon/index.vue'
+
 describe('SvgIcon.vue', () => {
   it('iconClass', () => {
     const wrapper = shallowMount(SvgIcon, {