diff --git a/components.d.ts b/components.d.ts
index 4ab1d797e95b4af9f659a0d743bd8e3a04bfa86f..7edf44a6c661662630918baee0ec2201f9641bab 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,8 +9,6 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Components: typeof import('./src/components/Components.vue')['default']
     ComponentsOptions: typeof import('./src/components/ComponentsOptions.vue')['default']
-    Componets: typeof import('./src/components/Componets.vue')['default']
-    DrawingBoard: typeof import('./src/components/DrawingBoard.vue')['default']
     DrawingBroad: typeof import('./src/components/DrawingBroad.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
@@ -21,6 +19,7 @@ declare module '@vue/runtime-core' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
diff --git a/src/components/Components.vue b/src/components/Components.vue
index 5af78188885e5630329f42cbe4907d37bb987da1..8453cbed9f25c48e8856fc6d1aa3a89400906751 100644
--- a/src/components/Components.vue
+++ b/src/components/Components.vue
@@ -35,6 +35,7 @@ let sortComponentByKey = ref("");
 .box {
     width: 100%;
     box-sizing: border-box;
+    padding: 10px;
 
     &-top {
         margin-bottom: 20px;
@@ -42,8 +43,6 @@ let sortComponentByKey = ref("");
 
     &-content {
         width: 100%;
-        text-align: center;
-
         .item {
             width: 97%;
             height: 120px;
diff --git a/src/components/DrawingBroad.vue b/src/components/DrawingBroad.vue
index 8864936ec915c76932e6ec263b704b4d3512ba09..47af5e588a35ff1effcefa6e5b952bc6d3c07295 100644
--- a/src/components/DrawingBroad.vue
+++ b/src/components/DrawingBroad.vue
@@ -1,20 +1,69 @@
 <!-- 画板 -->
 <script setup lang="ts">
 import draggable from 'vuedraggable';
-import { storeToRefs} from "pinia";
+import { storeToRefs } from "pinia";
 import { userMainStore } from "@/store/index"; // 引入
+import { computed, ref } from '@vue/reactivity';
+import Grid from './Grid.vue';
 const mainStore = userMainStore();
-const {tList} = storeToRefs(mainStore); // 解构并使数据动态化
+const { tList, tree } = storeToRefs(mainStore); // 解构并使数据动态化
+const containerStyle = computed(() => ({
+    width: tree.value.container.width + 'px',
+    height: tree.value.mode == "PC" ? '100%' : tree.value.container.height + 'px',
+    'marginTop': tree.value.mode == "PC" ? '' : 50 + 'px'
+}))
+
 
 </script>
 
 <template>
-    <draggable :list="tList" item-key="id" :group="{ name: 'course', pull: true, put: true }">
-        <template #item="{ element }">
-            <Component :is="element.preview"></Component>
-        </template>
-    </draggable>
+    <div class="box">
+        <div class="box-container" :style="containerStyle">
+            <draggable :list="tList" item-key="id" :group="{ name: 'course', pull: true, put: true }">
+                <template #item="{ element }">
+                    <Component :is="element.preview"></Component>
+                </template>
+            </draggable>
+        </div>
+    </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    overflow: auto;
+    position: relative;
+
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+        scrollbar-arrow-color: #000;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: .0625rem;
+        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0.2);
+        background: rgba(0, 0, 0, 0.2);
+        scrollbar-arrow-color: #000;
+    }
+
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 .0625rem rgba(0, 0, 0, 0.2);
+        border-radius: 0;
+        background: #fff;
+
+    }
+
+    &-container {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border: 1px solid #000;
+        border-radius: 4px;
+        box-shadow: 1px 1px 4px #000;
+        margin: auto;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/config/comp.config.ts b/src/config/comp.config.ts
deleted file mode 100644
index 6abb530f21fc8ecd732f5f87e23a56d7085e9e84..0000000000000000000000000000000000000000
--- a/src/config/comp.config.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
-  "container": {
-    "width": 900,
-    "height": 570
-  },
-  "blocks": [
-
-  ],
-  "style": [
-
-  ]
-}
\ No newline at end of file
diff --git a/src/config/component.config.json b/src/config/component.config.json
new file mode 100644
index 0000000000000000000000000000000000000000..af5d994d94feab960c1d20803facae346d05bc66
--- /dev/null
+++ b/src/config/component.config.json
@@ -0,0 +1,34 @@
+// 组件的属性 写好的组件需要在这里填写
+{
+    "button":{
+        "content":"",
+        "layout":{
+            "display":"",
+            "width":"",
+            "height":""
+        },
+        "styles":{
+
+        },
+        "animates":{
+            "show":{
+
+            },
+            "hide":{
+
+            }
+        },
+        "methods":{
+
+        },
+        "data":{
+
+        },
+        "slots":{
+
+        }
+    },
+    "text":{
+
+    }
+}
\ No newline at end of file
diff --git a/src/config/data.json b/src/config/data.json
new file mode 100644
index 0000000000000000000000000000000000000000..607ac6be87709bb0f7059d9478f8a4c7461c4014
--- /dev/null
+++ b/src/config/data.json
@@ -0,0 +1,14 @@
+{
+    "mode":"PC",
+    "title":"",
+    "container": {
+        "width": "1436",
+        "height": "100%"
+    },
+    "styles":{
+
+    },
+    "components": [
+       
+    ]
+}
\ No newline at end of file
diff --git a/src/config/editor.config.ts b/src/config/editor.config.ts
index f177506cd0775d1637ae1f158248d3186ced7250..cf43a3ddb7dd1a708697279289c58de6762e3d7e 100644
--- a/src/config/editor.config.ts
+++ b/src/config/editor.config.ts
@@ -1,3 +1,4 @@
+//注册组件
 interface componentType {
     label: string,
     preview: string,
@@ -22,7 +23,6 @@ class createEditorConfig {
 const registerConfig = new createEditorConfig();
 
 
-
 registerConfig.register({
     label: '按钮',
     preview: `ElButton`,
diff --git a/src/store/index.ts b/src/store/index.ts
index a77295516dfd4a9e1038625a472fe613d6fd4a40..54ba93acf3e9eb66992bf3529779d78dca7855af 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,6 +1,7 @@
 import { reactive } from 'vue';
 import { defineStore } from 'pinia';
 import config  from "@/config/editor.config";
+import data from "@/config/data.json";
 interface componentType {
   label: string,
   preview: string,
@@ -12,11 +13,9 @@ interface componentType {
 export const userMainStore = defineStore('mainStore', () => {
   const list: Array<componentType> = reactive(config.componentList);
   const tList: Array<componentType> = reactive([]);
-  function increment() { //相当于 Actions
-  }
 
-  function doubleCount() {
-  }
+  //json schema 
+  const tree = reactive(data);
 
-  return {list,tList,increment, doubleCount }; //暴露
+  return {list,tList,tree}; //暴露
 });
\ No newline at end of file
diff --git a/src/views/Panel.vue b/src/views/Panel.vue
index 308adaee13b1a5f60698b19d356ef6751d43dfc5..18a75837576ca2dc709faf72b71534d14d63527d 100644
--- a/src/views/Panel.vue
+++ b/src/views/Panel.vue
@@ -28,9 +28,10 @@
 
             </div>
             <div class="input">
-              <el-input v-model="designSize">
-                <template #append>px</template>
-              </el-input>
+              <el-input-number v-model="designSizeWidth" class="mx-4" :min="768" :max="1920" controls-position="right"
+                @change="handleChange" v-if="flog" />
+              <el-input-number v-model="designSizeWidth" class="mx-4" :min="320" :max="650" controls-position="right"
+                @change="handleChange" v-else />
             </div>
           </div>
           <div class="container-header-left-r-right">
@@ -53,105 +54,119 @@
       </div>
     </div>
     <div class="container-content">
-      <div class="container-content-left">
-        <div class="container-content-left-top">
-          <div class="item" @click="drawer = true">
+      <div class="container-content-left" :class="drawerFlog ? 'out-active' : ''">
+        <div class="container-content-left-l">
+          <div class="container-content-left-l-top">
             <el-tooltip content="组件" placement="right" effect="light">
-              <el-icon :size="16">
-                <Menu />
-              </el-icon>
+              <div class="item" @click="out(1)">
+                <el-icon :size="16">
+                  <Menu />
+                </el-icon>
+              </div>
             </el-tooltip>
-          </div>
-          <div class="item" @click="drawer1 = true">
             <el-tooltip content="自定义组件" placement="right" effect="light">
-              <el-icon :size="16">
-                <User />
-              </el-icon>
+              <div class="item" @click="out(2)">
+                <el-icon :size="16">
+                  <User />
+                </el-icon>
+              </div>
             </el-tooltip>
-          </div>
-          <div class="item" @click="drawer2 = true">
             <el-tooltip content="页面结构" placement="right" effect="light">
-              <el-icon :size="16">
-                <Document />
-              </el-icon>
+              <div class="item" @click="out(3)">
+                <el-icon :size="16">
+                  <Document />
+                </el-icon>
+              </div>
             </el-tooltip>
           </div>
-        </div>
-        <div class="container-content-left-bottom">
-          <div class="item">
+          <div class="container-content-left-l-bottom">
             <el-tooltip content="帮助" placement="right" effect="light">
-              <el-icon :size="16">
-                <Help />
-              </el-icon>
+              <div class="item">
+                <el-icon :size="16">
+                  <Help />
+                </el-icon>
+              </div>
             </el-tooltip>
-          </div>
-          <div class="item">
             <el-tooltip content="更多" placement="right" effect="light">
-              <el-icon :size="16">
-                <More />
-              </el-icon>
+              <div class="item">
+                <el-icon :size="16">
+                  <More />
+                </el-icon>
+              </div>
             </el-tooltip>
           </div>
         </div>
+        <div class="container-content-left-r">
+          <Components v-show="drawerFlog && type == 1" />
+          <div v-show="drawerFlog && type == 2">
+            自定义组件
+          </div>
+          <div v-show="drawerFlog && type == 3">
+            页面结构
+          </div>
+        </div>
       </div>
       <div class="container-content-middle">
-        <DrawingBroad/>
+        <DrawingBroad />
       </div>
       <div class="container-content-right">
         <ComponentsOptions />
       </div>
     </div>
   </div>
-  <el-drawer v-model="drawer" direction="ltr" :modal="false" size="25%" class="drawer">
-    <template #header>
-      <p class="drawer-title">组件库</p>
-    </template>
-    <Components />
-  </el-drawer>
-  <el-drawer v-model="drawer1" direction="ltr" :modal="false" size="25%" class="drawer">
-    <template #header>
-      <p class="drawer-title">自定义组件</p>
-    </template>
-
-    自定义组件
-  </el-drawer>
-  <el-drawer v-model="drawer2" direction="ltr" :modal="false" size="25%" class="drawer">
-    <template #header>
-      <p class="drawer-title">页面结构</p>
-    </template>
-    页面结构
-  </el-drawer>
+
 </template>
 <script setup lang="ts">
 import logo_src from '@/assets/image/logo.jpg';
 import { ref } from 'vue';
-import Componets from '../components/Components.vue';
 import DrawingBroad from '@/components/DrawingBroad.vue';
-let designSize = ref(1920);
-
-
-//切换尺寸 
+import Components from '@/components/Components.vue';
+import ComponentsOptions from '@/components/ComponentsOptions.vue';
+import { storeToRefs } from "pinia";
+import { userMainStore } from "@/store/index"; // 引入
+const mainStore = userMainStore();
+const { tree } = storeToRefs(mainStore); // 解构并使数据动态化
+let designSizeWidth = ref(Number(tree.value.container.width));
+
+//控制设计尺寸
 let flog = ref(true)
 function changeDesignSize(nFlog: boolean) {
   flog.value = nFlog;
-  if (nFlog) {
-    designSize.value = 1920;
+  if (flog.value) {
+    tree.value.mode = "PC"
+    designSizeWidth.value = 1436;
+    tree.value.container.width = "1436";
   } else {
-    designSize.value = 375;
+    tree.value.mode = "Phone"
+    designSizeWidth.value = 375;
+    tree.value.container.width = "375";
+    tree.value.container.height = "750";
   }
 }
 
-// 抽屉
+function handleChange(prev: number | undefined) {
+  tree.value.container.width = String(prev as number);
+}
+
 
-const drawer = ref(false)
-const drawer1 = ref(false)
-const drawer2 = ref(false)
 
+//控制右侧组件库是否打开
+let drawerFlog = ref(false);
+let type = ref(0);
+function out(num: 1 | 2 | 3): void {
+  drawerFlog.value = !drawerFlog.value;
+  type.value = num;
+}
 
 
 </script>
 
 <style scoped lang="scss">
+.out-active {
+  width: 400Px !important;
+  min-width: 400Px;
+}
+
 .container {
   width: 100%;
   min-width: 1280Px;
@@ -253,44 +268,57 @@ const drawer2 = ref(false)
 
     &-left {
       display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
       width: 50px;
       min-width: 48Px;
       height: 100%;
       border-top: 1px solid #CDD0D6;
       background-color: #ffffff;
 
-      &-top,
-      &-bottom {
+      &-l {
+        width: 50px;
+        min-width: 48Px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: center;
-        margin: 8px 4px;
 
-        .item {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 40px;
-          height: 40px;
-          padding: 8px;
-          border-radius: 4px;
-          cursor: pointer;
+        &-top,
+        &-bottom {
+
+          .item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 40px;
+            height: 40px;
+            min-width: 40px;
+            min-width: 40px;
+            margin: 5px;
+            text-align: center;
+            border-radius: 4px;
+            cursor: pointer;
 
-          &:hover {
-            background-color: #f2f2f2;
+            &:hover {
+              background-color: #f2f2f2;
+            }
           }
         }
       }
+
+      &-r {
+        display: flex;
+        flex: 1;
+        justify-content: center;
+      }
+
     }
 
+
     &-middle {
       flex-grow: 1;
       margin: 10px;
       background-color: #ffffff;
+      overflow: hidden;
     }
 
     &-right {
diff --git a/src/views/main.vue b/src/views/main.vue
index 1fee326dadab8005bd59018e1211f1077f61ed3f..f6cb01324d776474545caa99fd37c2895bc71afa 100644
--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -1,23 +1,10 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import {Router,useRoute,useRouter} from "vue-router";
-import Editor from "./editor.vue";
-import data from '@/config/comp.config';
-import logo_src from '@/assets/image/logo.png';
-import Panel from "./Panel.vue";
-
-const state = ref(data);
-
-const router:Router = useRouter();
-const route = useRoute();
-
-
+import Panel from './Panel.vue';
 </script>
 
 <template>
-    <Panel/>
+    <Panel />
 </template>
 
 <style lang="scss" scoped>
-
 </style>
\ No newline at end of file