diff --git a/src/styles/index.scss b/src/styles/index.scss
index 8913256a..b9e0292a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -187,12 +187,21 @@ p {
 }
 // 链接弹窗表格用到  ------ end
 
-
-.el-color-predefine__colors .el-color-predefine__color-selector{
+.el-color-predefine__colors .el-color-predefine__color-selector {
     box-shadow: 0 0.2rem 0.8rem rgba(50, 55, 58, 0.1);
 }
 .el-color-picker .el-color-picker__trigger .el-color-picker__color {
     background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%);
     background-size: 12px 12px;
-    background-position: 0 0, 6px 0, 6px -6px, 0 6px;
-}
\ No newline at end of file
+    background-position:
+        0 0,
+        6px 0,
+        6px -6px,
+        0 6px;
+}
+
+// 全屏轮播大小调整
+.loading-custom {
+    --el-loading-spinner-size: 13rem;
+    --el-loading-fullscreen-spinner-size: 13rem;
+}
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 68713c91..80876624 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -2,9 +2,9 @@
     <!-- 左侧模块 -->
     <div class="siderbar flex-col">
         <el-collapse v-model="activeNames">
-            <el-collapse-item v-for="(com, i) in components" :key="i" :title="com.title" :name="com.key">
-                <VueDraggable v-model="com.item" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
-                    <div v-for="item in com.item" :key="item.key" class="item">
+            <el-collapse-item v-for="(com, i) in components" :key="i" :title="com.name" :name="com.key">
+                <VueDraggable v-model="com.data" :animation="500" ghost-class="ghost" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :on-start="onStart" :sort="false" :force-fallback="true">
+                    <div v-for="item in com.data" :key="item.key" class="item">
                         <div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
                         <div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">
                             <img class="img radius-xs" :src="url_computer(item.key)" />
@@ -165,8 +165,9 @@ import { background_computer, get_math, gradient_computer, padding_computer, rad
 import { cloneDeep } from 'lodash';
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
 import defaultSettings from './index';
-import { footerNavCounterStore } from '@/store';
+import { footerNavCounterStore, commonStore } from '@/store';
 const footer_nav_counter_store = footerNavCounterStore();
+const common_store = commonStore();
 const app = getCurrentInstance();
 import { isEmpty } from 'lodash';
 const props = defineProps({
@@ -252,45 +253,50 @@ watch(
 
 // 父组件调用的方法
 const emits = defineEmits(['rightUpdate']);
-const activeNames = reactive(['1', '2', '3']);
-const components = reactive([
-    {
-        title: '基础组件',
-        key: '1',
-        item: [
-            { key: 'carousel', name: '轮播图' },
-            { key: 'search', name: '搜索框' },
-            { key: 'nav-group', name: '导航组' },
-            { key: 'notice', name: '公告' },
-            { key: 'video', name: '视频' },
-            { key: 'user-info', name: '用户信息' },
-            { key: 'tabs', name: '选项卡' },
-            { key: 'article-tabs', name: '文章选项卡' },
-            { key: 'shop-tabs', name: '商品选项卡' },
-            { key: 'article-list', name: '文章列表' },
-            { key: 'shop-list', name: '商品列表' },
-            { key: 'img-magic', name: '图片魔方' },
-            { key: 'data-magic', name: '数据魔方' },
-            { key: 'hot-zone', name: '热区' },
-            { key: 'custom', name: '自定义' },
-        ],
-    },
-    {
-        title: '营销组件',
-        key: '2',
-        item: [{ key: 'coupon', name: '优惠券' }],
-    },
-    {
-        title: '工具组件',
-        key: '3',
-        item: [
-            { key: 'float-window', name: '悬浮按钮' },
-            { key: 'text-title', name: '文本标题' },
-            { key: 'auxiliary-blank', name: '辅助空白' },
-            { key: 'row-line', name: '横线' },
-            { key: 'rich-text', name: '富文本' },
-        ],
-    },
+const activeNames = reactive(['base', 'plugins', 'tool']);
+interface componentsData {
+    name: string;
+    key: string;
+    data: componentsData[];
+}
+const components = ref<componentsData[]>([
+    // {
+    //     name: '基础组件',
+    //     key: 'base',
+    //     data: [
+    //         { key: 'carousel', name: '轮播图' },
+    //         { key: 'search', name: '搜索框' },
+    //         { key: 'nav-group', name: '导航组' },
+    //         { key: 'notice', name: '公告' },
+    //         { key: 'video', name: '视频' },
+    //         { key: 'user-info', name: '用户信息' },
+    //         { key: 'tabs', name: '选项卡' },
+    //         { key: 'article-tabs', name: '文章选项卡' },
+    //         { key: 'shop-tabs', name: '商品选项卡' },
+    //         { key: 'article-list', name: '文章列表' },
+    //         { key: 'shop-list', name: '商品列表' },
+    //         { key: 'img-magic', name: '图片魔方' },
+    //         { key: 'data-magic', name: '数据魔方' },
+    //         { key: 'hot-zone', name: '热区' },
+    //         { key: 'custom', name: '自定义' },
+    //     ],
+    // },
+    // {
+    //     name: '营销组件',
+    //     key: 'plugins',
+    //     data: [{ key: 'coupon', name: '优惠券' }],
+    // },
+    // {
+    //     name: '工具组件',
+    //     key: 'tool',
+    //     data: [
+    //         { key: 'float-window', name: '悬浮按钮' },
+    //         { key: 'text-title', name: '文本标题' },
+    //         { key: 'auxiliary-blank', name: '辅助空白' },
+    //         { key: 'row-line', name: '横线' },
+    //         { key: 'rich-text', name: '富文本' },
+    //     ],
+    // },
 ]);
 const url_computer = (name: string) => {
     const new_url = ref(new URL(`../../../../assets/images/layout/siderbar/${name}.png`, import.meta.url).href).value;
@@ -549,6 +555,15 @@ const scroll = () => {
 // 在组件挂载时默认执行
 onMounted(() => {
     page_settings();
+    nextTick(() => {
+        const interval = setInterval(() => {
+            // 获取分类
+            if (common_store.common.module_list.length > 0) {
+                components.value = common_store.common.module_list;
+                clearInterval(interval);
+            }
+        }, 1000);
+    });
 });
 //页面设置
 const page_settings = () => {
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 43efe0a7..aab9c03c 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="app-wrapper no-copy">
+    <div v-loading.fullscreen.lock="loading" class="app-wrapper no-copy" element-loading-background="rgba(255,255,255,1)" element-loading-custom-class="loading-custom">
         <template v-if="!is_empty">
             <navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
             <div class="app-wrapper-content flex-row">
@@ -64,6 +64,7 @@ const form = ref<diy_data_item>({
 const diy_data_item = ref({});
 
 const key = ref('');
+const api_count = ref(0);
 
 const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, footer: headerAndFooter) => {
     diy_data_item.value = item;
@@ -90,15 +91,20 @@ const init = () => {
         if (html_index !== -1) {
             new_data.id = new_data.id.substring(0, html_index);
         }
-    }
-    if (new_data.id) {
-        DiyAPI.getInit(new_data).then((res: any) => {
-            if (res.data) {
-                form.value = form_data_transfor_diy_data(res.data);
-            } else {
-                is_empty.value = true;
-            }
-        });
+        if (new_data.id) {
+            DiyAPI.getInit(new_data).then((res: any) => {
+                if (res.data) {
+                    form.value = form_data_transfor_diy_data(res.data);
+                    api_count.value += 1;
+                    loading_event(api_count.value);
+                } else {
+                    is_empty.value = true;
+                }
+            });
+        }
+    } else {
+        api_count.value = 1;
+        loading_event(api_count.value);
     }
 };
 
@@ -113,8 +119,19 @@ const common_init = () => {
         // module_list ---- 模块列表
         //page_link_list ---- 页面链接
         common_store.set_common(res.data);
+        api_count.value += 1;
+        loading_event(api_count.value);
     });
 };
+// 加载动画
+const loading = ref(true);
+const loading_event = (count: number) => {
+    if (count == 2) {
+        setTimeout(() => {
+            loading.value = false;
+        }, 500);
+    }
+};
 //#endregion 页面初始化数据 ---------------------end
 
 //#region 顶部导航回调方法 ---------------------start