diff --git a/beike/Shop/View/DesignBuilders/SlideShow/Editor.php b/beike/Shop/View/DesignBuilders/SlideShow/Editor.php
index 14a26bb3..e0acc9a6 100644
--- a/beike/Shop/View/DesignBuilders/SlideShow/Editor.php
+++ b/beike/Shop/View/DesignBuilders/SlideShow/Editor.php
@@ -32,6 +32,13 @@ class Editor extends Component
      */
     public function render(): View
     {
-        return view('design.module.slideshow.editor.index');
+        $data['register'] = [
+            'code' => 'slideshow',
+            'sort' => 0,
+            'name' => '幻灯片模块',
+            'icon' => '&#xe61b;',
+        ];
+
+        return view('design.module.slideshow.editor.index', $data);
     }
 }
diff --git a/public/build/beike/shop/default/css/design/app.css b/public/build/beike/shop/default/css/design/app.css
index 3c4a5361..d1b40b1f 100644
--- a/public/build/beike/shop/default/css/design/app.css
+++ b/public/build/beike/shop/default/css/design/app.css
@@ -13,6 +13,44 @@ body.page-design .design-box .sidebar-edit-wrap {
   width: 300px;
   background-color: #f5f5f5;
 }
+body.page-design .design-box .sidebar-edit-wrap .modules-list {
+  background: #e6e9ec;
+  height: 100%;
+  overflow-y: auto;
+  padding: 0 3px 30px;
+}
+body.page-design .design-box .sidebar-edit-wrap .module-list {
+  text-align: center;
+  padding: 4px;
+  cursor: pointer;
+}
+body.page-design .design-box .sidebar-edit-wrap .module-list .module-info {
+  background: #fff;
+  color: #556068;
+  transition: all 0.25s ease-in-out;
+}
+body.page-design .design-box .sidebar-edit-wrap .module-list .module-info:hover {
+  color: #0072ff;
+  box-shadow: 0 6px 23px rgba(0, 0, 0, 0.2);
+}
+body.page-design .design-box .sidebar-edit-wrap .module-list .icon {
+  padding: 7px 0;
+  width: 36px;
+  height: 36px;
+  display: inline-block;
+}
+body.page-design .design-box .sidebar-edit-wrap .module-list .icon img {
+  max-width: 100%;
+  max-height: auto;
+}
+body.page-design .design-box .sidebar-edit-wrap .module-list .icon i {
+  font-size: 26px;
+}
+body.page-design .design-box .sidebar-edit-wrap .module-list .name {
+  font-size: 12px;
+  height: 27px;
+  overflow: hidden;
+}
 body.page-design .design-box .preview-iframe {
   flex: 1;
 }
diff --git a/resources/beike/shop/default/css/design/app.scss b/resources/beike/shop/default/css/design/app.scss
index a20dcc0f..6804e957 100644
--- a/resources/beike/shop/default/css/design/app.scss
+++ b/resources/beike/shop/default/css/design/app.scss
@@ -13,6 +13,51 @@ body.page-design {
       // flex: 1;
       width: 300px;
       background-color: #f5f5f5;
+
+      .modules-list {
+        background: #e6e9ec;
+        height: 100%;
+        overflow-y: auto;
+        padding: 0 3px 30px;
+      }
+
+      .module-list {
+        text-align: center;
+        padding: 4px;
+        cursor: pointer;
+
+        .module-info {
+          background: #fff;
+          color: #556068;
+          transition: all .25s ease-in-out;
+
+          &:hover {
+            color: #0072ff;
+            box-shadow: 0 6px 23px rgba(0, 0, 0, 0.2);
+          }
+        }
+
+        .icon {
+          padding: 7px 0;
+          width: 36px;
+          height: 36px;
+          display: inline-block;
+          img {
+            max-width: 100%;
+            max-height: auto;
+          }
+
+          i {
+            font-size: 26px;
+          }
+        }
+
+        .name {
+          font-size: 12px;
+          height: 27px;
+          overflow: hidden;
+        }
+      }
     }
 
     .preview-iframe {
diff --git a/themes/default/design/builder/index.blade.php b/themes/default/design/builder/index.blade.php
index be648ebe..1426dbe7 100644
--- a/themes/default/design/builder/index.blade.php
+++ b/themes/default/design/builder/index.blade.php
@@ -20,15 +20,97 @@
 
 <body class="page-design">
   <div class="design-box">
-    <div class="sidebar-edit-wrap">
-        @foreach($editors as $editor)
-            <x-dynamic-component :component="$editor" class="mt-4" />
-        @endforeach
+    <div class="sidebar-edit-wrap" id="app" v-cloak>
+      <div class="module-edit" v-if="form.modules.length > 0 && design.editType == 'module'">
+        <component
+          :is="editingModuleComponent"
+          :key="design.editingModuleIndex"
+          :module="form.modules[design.editingModuleIndex].content"
+          @on-changed="moduleUpdated"
+        ></component>
+      </div>
+
+      <el-row v-if="design.editType == 'add'" class="modules-list">
+        <el-col :span="12" v-for="(item, index) in source.modules" :key="index">
+          <div @click="addModuleButtonClicked(item.code)" class="module-list">
+            <div class="module-info">
+              <div class="icon"><img src="https://via.placeholder.com/100x100.png/dddddd" class="img-fluid"></div>
+              <div class="name">@{{ item.name }}</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
     </div>
     <div class="preview-iframe">
       <iframe src="{{ shop_route('home.index') }}" frameborder="0" id="preview-iframe" width="100%" height="100%"></iframe>
     </div>
   </div>
-</body>
 
+  @foreach($editors as $editor)
+    <x-dynamic-component :component="$editor" />
+  @endforeach
+
+  <script>
+    let app = new Vue({
+      el: '#app',
+      data: {
+        form: {
+          modules: [
+            {"content":{"style":{"background_color":""},"full":true,"floor":{"2":"","3":""},"images":[{"image":{"2":"catalog/demo/slideshow/2.jpg","3":"catalog/demo/slideshow/2.jpg"},"show":true,"link":{"type":"product","value":"","link":""}},{"image":{"2":"catalog/demo/slideshow/1.jpg","3":"catalog/demo/slideshow/1.jpg"},"show":false,"link":{"type":"product","value":"","link":""}}]},"code":"slideshow","name":"幻灯片","module_id":"b0448efb0989"}
+          ]
+        },
+
+        design: {
+          type: 'pc',
+          editType: 'add',
+          sidebar: false,
+          editingModuleIndex: 0,
+          ready: false,
+          moduleLoadCount: 0, // 第一次选择已配置模块时，不需要请求数据，
+        },
+
+        source: {
+          modules: [],
+          config: []
+        },
+      },
+      // 计算属性
+      computed: {
+        // 编辑中的模块编辑组件
+        editingModuleComponent() {
+          return 'module-editor-' + this.editingModuleCode.replace('_', '-');
+        },
+
+        // 编辑中的模块 code
+        editingModuleCode() {
+          return this.form.modules[this.design.editingModuleIndex].code;
+        },
+
+        // editingConfigCodeFormat() {
+        //   return 'config-' + this.config.editingConfigCode;
+        // },
+      },
+      // 侦听器
+      watch: {},
+      // 组件方法
+      methods: {
+        moduleUpdated() {
+          console.log('moduleUpdated')
+        }
+      },
+      // 在实例初始化之后，组件属性计算之前，如data属性等
+      beforeCreate () {
+      },
+      // 在实例创建完成后被立即同步调用
+      created () {
+      },
+      // 在挂载开始之前被调用:相关的 render 函数首次被调用
+      beforeMount () {
+      },
+      // 实例被挂载后调用
+      mounted () {
+      },
+    })
+  </script>
+</body>
 </html>
diff --git a/themes/default/design/module/slideshow/editor/icon.png b/themes/default/design/module/slideshow/editor/icon.png
new file mode 100644
index 00000000..35ca5ae4
Binary files /dev/null and b/themes/default/design/module/slideshow/editor/icon.png differ
diff --git a/themes/default/design/module/slideshow/editor/index.blade.php b/themes/default/design/module/slideshow/editor/index.blade.php
index 56b6510f..943b4756 100644
--- a/themes/default/design/module/slideshow/editor/index.blade.php
+++ b/themes/default/design/module/slideshow/editor/index.blade.php
@@ -1 +1,32 @@
-11111
\ No newline at end of file
+<template id="module-editor-slideshow-template">
+  <div>
+    <div><h6>slideshow-template</h6></div>
+  </div>
+</template>
+
+<script type="text/javascript">
+
+setTimeout(() => {
+  app.source.modules.push(@json($register))
+}, 0)
+
+Vue.component('module-editor-slideshow', {
+  template: '#module-editor-slideshow-template',
+
+  props: ['module'],
+
+  data: function () {
+    return {
+      //
+    }
+  },
+
+  created: function () {
+    console.log(this.module)
+  },
+
+  methods: {
+    //
+  }
+});
+</script>
diff --git a/themes/default/home.blade.php b/themes/default/home.blade.php
index 4a3ee1b6..445c434d 100644
--- a/themes/default/home.blade.php
+++ b/themes/default/home.blade.php
@@ -3,15 +3,15 @@
 @section('content')
 
 
-    @foreach($renders as $render)
-        <x-dynamic-component :component="$render"/>
-    @endforeach
+@foreach($renders as $render)
+  <x-dynamic-component :component="$render"/>
+@endforeach
 
-<section class="module-wrap mb-5"><img src="{{ asset('image/default/banner.png') }}" class="img-fluid"></section>
+{{-- <section class="module-wrap mb-5"><img src="{{ asset('image/default/banner.png') }}" class="img-fluid"></section> --}}
 {{-- @foreach ($categories as $category)
   <a href="{{ shop_route('categories.show', $category) }}">{{ $category->description->name }}</a>
 @endforeach --}}
-<section class="module-image-plus mb-5">
+{{-- <section class="module-image-plus mb-5">
   <div class="container">
     <div class="row">
       <div class="col-6"><img src="{{ asset('image/default/image_plus_1.png') }}" class="img-fluid"></div>
@@ -65,5 +65,5 @@
       @endfor
     </div>
   </div>
-</section>
+</section> --}}
 @endsection
