diff --git a/frontend/src/components/canvas/components/AttrList.vue b/frontend/src/components/canvas/components/AttrList.vue
index 559c747e19..b11bcee099 100644
--- a/frontend/src/components/canvas/components/AttrList.vue
+++ b/frontend/src/components/canvas/components/AttrList.vue
@@ -1,81 +1,82 @@
 <template>
-    <div class="attr-list">
-        <el-form>
-            <el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]">
-                <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]"></el-color-picker>
-                <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]"></el-color-picker>
-                <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]"></el-color-picker>
-                <el-select v-else-if="key == 'textAlign'" v-model="curComponent.style[key]">
-                    <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    ></el-option>
-                </el-select>
-                <el-input type="number" v-else v-model="curComponent.style[key]" />
-            </el-form-item>
-            <el-form-item label="内容" v-if="curComponent && !excludes.includes(curComponent.component)">
-                <el-input type="textarea" v-model="curComponent.propValue" />
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="attr-list">
+    <el-form>
+      <el-form-item v-for="(key, index) in styleKeys.filter(item => (item != 'rotate' && item != 'borderWidth'))" :key="index" :label="map[key]">
+        <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
+        <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
+        <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
+        <el-select v-else-if="key == 'textAlign'" v-model="curComponent.style[key]">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-input v-if="key ==='opacity'" v-model="curComponent.style[key]" type="number" :min="0" :step="0.1" :max="1" />
+        <el-input v-else v-model="curComponent.style[key]" type="number" />
+      </el-form-item>
+      <!--      <el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" label="内容">-->
+      <!--        <el-input v-model="curComponent.propValue" type="textarea" />-->
+      <!--      </el-form-item>-->
+    </el-form>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            excludes: ['Picture', 'Group'], // 这些组件不显示内容
-            options: [
-                {
-                    label: '左对齐',
-                    value: 'left',
-                },
-                {
-                    label: '居中',
-                    value: 'center',
-                },
-                {
-                    label: '右对齐',
-                    value: 'right',
-                },
-            ],
-            map: {
-                left: 'x 坐标',
-                top: 'y 坐标',
-                height: '高',
-                width: '宽',
-                color: '颜色',
-                backgroundColor: '背景色',
-                borderWidth: '边框宽度',
-                borderColor: '边框颜色',
-                borderRadius: '边框半径',
-                fontSize: '字体大小',
-                fontWeight: '字体粗细',
-                lineHeight: '行高',
-                letterSpacing: '字间距',
-                textAlign: '对齐方式',
-                opacity: '透明度',
-            },
+  data() {
+    return {
+      excludes: ['Picture', 'Group'], // 这些组件不显示内容
+      options: [
+        {
+          label: this.$t('panel.aline_left'),
+          value: 'left'
+        },
+        {
+          label: this.$t('panel.aline_center'),
+          value: 'center'
+        },
+        {
+          label: this.$t('panel.aline_right'),
+          value: 'right'
         }
+      ],
+      map: {
+        left: this.$t('panel.left'),
+        top: this.$t('panel.top'),
+        height: this.$t('panel.height'),
+        width: this.$t('panel.width'),
+        color: this.$t('panel.color'),
+        backgroundColor: this.$t('panel.backgroundColor'),
+        borderWidth: this.$t('panel.borderWidth'),
+        borderColor: this.$t('panel.borderColor'),
+        borderRadius: this.$t('panel.borderRadius'),
+        fontSize: this.$t('panel.fontSize'),
+        fontWeight: this.$t('panel.fontWeight'),
+        lineHeight: this.$t('panel.lineHeight'),
+        letterSpacing: this.$t('panel.letterSpacing'),
+        textAlign: this.$t('panel.textAlign'),
+        opacity: this.$t('panel.opacity')
+      }
+    }
+  },
+  computed: {
+    styleKeys() {
+      return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
     },
-    computed: {
-        styleKeys() {
-            return this.$store.state.curComponent? Object.keys(this.$store.state.curComponent.style) : []
-        },
-        curComponent() {
-            return this.$store.state.curComponent
-        },
-    },
+    curComponent() {
+      return this.$store.state.curComponent
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 .attr-list {
     overflow: auto;
-    padding: 20px;
+    padding: 0px;
     padding-top: 0;
     height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 2c32b55ed9..36c6cdf466 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -11,6 +11,19 @@
       <!--        <span> {{ $t('panel.canvas_scale') }} </span>-->
       <!--        <input v-model="scale" @input="handleScaleChange"> %-->
       <!--      </div>-->
+
+      <el-tooltip :content="$t('panel.style')">
+        <el-button :class="styleButtonActive?'button-show':'button-closed'" class="el-icon-magic-stick" size="mini" circle @click="showPanel" />
+      </el-tooltip>
+
+      <el-tooltip v-if="!aidedButtonActive" :content="$t('panel.open_aided_design') ">
+        <el-button class="el-icon-help button-closed" size="mini" circle @click="changeAidedDesign" />
+      </el-tooltip>
+
+      <el-tooltip v-if="aidedButtonActive" :content="$t('panel.close_aided_design') ">
+        <el-button class="el-icon-help button-show" size="mini" circle @click="changeAidedDesign" />
+      </el-tooltip>
+
       <el-tooltip :content="$t('panel.undo') ">
         <el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
       </el-tooltip>
@@ -56,11 +69,8 @@ import {
 export default {
   name: 'Toolbar',
   props: {
-    buttonActive: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
+    styleButtonActive: Boolean,
+    aidedButtonActive: Boolean
   },
   data() {
     return {
@@ -233,6 +243,9 @@ export default {
 
     clickPreview() {
       this.$emit('previewFullScreen')
+    },
+    changeAidedDesign() {
+      this.$emit('changeAidedDesign')
     }
   }
 }
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 226822e2bb..479acf4bd7 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -906,7 +906,30 @@ export default {
     topComponent: 'Top Component',
     bottomComponent: 'Bottom Component',
     upComponent: 'Up One Level',
-    downComponent: 'Down One Level'
+    downComponent: 'Down One Level',
+    open_aided_design: 'Open Component Aided Design',
+    close_aided_design: 'Close Component Aided Design',
+    open_style_design: 'Open Style Design',
+    close_style_design: 'Close Style Design',
+    left: 'X-Axis',
+    top: 'Y-Axis',
+    height: 'Height',
+    width: 'Width',
+    color: 'Color',
+    backgroundColor: 'BackgroundColor',
+    borderWidth: 'BorderWidth',
+    borderColor: 'BorderColor',
+    borderRadius: 'BorderRadius',
+    fontSize: 'FontSize',
+    fontWeight: 'FontWeight',
+    lineHeight: 'LineHeight',
+    letterSpacing: 'LetterSpacing',
+    textAlign: 'TextAlign',
+    opacity: 'Opacity',
+    aline_left: 'Aline Left',
+    aline_center: 'Aline Center',
+    aline_right: 'Aline Right',
+    select_component: 'Check Component'
   },
   plugin: {
     local_install: 'Local installation',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 6f8cae65d9..76f97f0778 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -906,7 +906,30 @@ export default {
     topComponent: '置于顶层',
     bottomComponent: '置于底层',
     upComponent: '上移一层',
-    downComponent: '下移一层'
+    downComponent: '下移一层',
+    open_aided_design: '打开组件辅助设计',
+    close_aided_design: '关闭组件辅助设计',
+    open_style_design: '打开样式设计',
+    close_style_design: '关闭样式设计',
+    left: 'x 坐标',
+    top: 'y 坐标',
+    height: '高',
+    width: '宽',
+    color: '颜色',
+    backgroundColor: '背景色',
+    borderWidth: '边框宽度',
+    borderColor: '边框颜色',
+    borderRadius: '边框半径',
+    fontSize: '字体大小',
+    fontWeight: '字体粗细',
+    lineHeight: '行高',
+    letterSpacing: '字间距',
+    textAlign: '对齐方式',
+    opacity: '透明度',
+    aline_left: '左对齐',
+    aline_center: '居中',
+    aline_right: '右对齐',
+    select_component: '请选择组件'
   },
   plugin: {
     local_install: '本地安裝',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 4f706be994..965fe88a6f 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -906,8 +906,30 @@ export default {
     topComponent: '置于顶层',
     bottomComponent: '置于底层',
     upComponent: '上移一层',
-    downComponent: '下移一层'
-
+    downComponent: '下移一层',
+    open_aided_design: '打开组件辅助设计',
+    close_aided_design: '关闭组件辅助设计',
+    open_style_design: '打开样式设计',
+    close_style_design: '关闭样式设计',
+    left: 'x 坐标',
+    top: 'y 坐标',
+    height: '高',
+    width: '宽',
+    color: '颜色',
+    backgroundColor: '背景色',
+    borderWidth: '边框宽度',
+    borderColor: '边框颜色',
+    borderRadius: '边框半径',
+    fontSize: '字体大小',
+    fontWeight: '字体粗细',
+    lineHeight: '行高',
+    letterSpacing: '字间距',
+    textAlign: '对齐方式',
+    opacity: '透明度',
+    aline_left: '左对齐',
+    aline_center: '居中',
+    aline_right: '右对齐',
+    select_component: '请选择组件'
   },
   plugin: {
     local_install: '本地安装',
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 6594527978..b2a3865b97 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -8,28 +8,34 @@
       </el-col>
       <!--横向工具栏-->
       <el-col :span="16">
-        <Toolbar :button-active="show&&showIndex===2" @showPanel="showPanel" @close-left-panel="closeLeftPanel" @previewFullScreen="previewFullScreen" />
+        <Toolbar
+          :style-button-active="show&&showIndex===2"
+          :aided-button-active="aidedButtonActive"
+          @showPanel="showPanel"
+          @previewFullScreen="previewFullScreen"
+          @changeAidedDesign="changeAidedDesign"
+        />
       </el-col>
     </el-header>
     <de-container>
+      <!--左侧导航栏-->
       <de-aside-container class="ms-aside-container">
         <div style="width: 60px; left: 0px; top: 0px; bottom: 0px;  position: absolute">
           <div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto; font-size: 14px">
-            <!-- 视图图表 -->
+            <!-- 视图图表 start -->
             <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
               <el-button :class="show&&showIndex===0? 'button-show':'button-closed'" circle class="el-icon-circle-plus-outline" size="mini" @click="showPanel(0)" />
             </div>
-            <!-- 视图文字 -->
             <div style="position: relative; margin: 18px auto 16px;">
               <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
                 {{ $t('panel.view') }}
               </div>
             </div>
-            <!-- 视图分割线 -->
             <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
               <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
             </div>
-            <!-- 过滤组件 -->
+            <!-- 视图图表 end -->
+            <!-- 过滤组件 start -->
             <div tabindex="-1" style="position: relative; margin: 16px auto">
               <div style="height: 60px; position: relative">
                 <div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
@@ -42,43 +48,18 @@
                 </div>
               </div>
             </div>
-            <!-- 分割线 -->
-            <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
-              <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
-            </div>
-
-            <!-- 视图图表 -->
-            <div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 16px auto 0px;">
-              <el-button :class="show&&showIndex===2? 'button-show':'button-closed'" circle class="el-icon-magic-stick" size="mini" @click="showPanel(2)" />
-            </div>
-            <!-- 视图文字 -->
-            <div style="position: relative; margin: 18px auto 16px;">
-              <div style="max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
-                {{ $t('panel.style') }}
-              </div>
-            </div>
-            <!-- 视图分割线 -->
             <div style="height: 1px; position: relative; margin: 0px auto;background-color:#E6E6E6;">
               <div style="width: 60px;height: 1px;line-height: 1px;text-align: center;white-space: pre;text-overflow: ellipsis;position: relative;flex-shrink: 0;" />
             </div>
+            <!-- 过滤组件 end -->
           </div>
         </div>
-        <!--        <div ref="leftPanel" :class="{show:show}" class="leftPanel-container">-->
-        <!--          <div />-->
-        <!--          <div v-if="show" class="leftPanel">-->
-        <!--            <div style="height:100%;overflow-y: auto">-->
-        <!--              <view-select v-show=" show && showIndex===0" />-->
-        <!--              <filter-group v-show=" show &&showIndex===1" />-->
-        <!--              <subject-setting v-show=" show &&showIndex===2" />-->
-        <!--            </div>-->
-        <!--          </div>-->
-        <!--        </div>-->
       </de-aside-container>
 
       <!--画布区域-->
-      <el-main>
+      <de-main-container style="margin-left: 5px;margin-right: 5px">
+        <!--左侧抽屉-->
         <el-drawer
-          title="我是标题"
           :visible.sync="show"
           :with-header="false"
           style="position: absolute;"
@@ -101,9 +82,14 @@
           @mousedown="handleMouseDown"
           @mouseup="deselectCurComponent"
         >
-          <Editor />
+          <Editor style="margin: 15px;" />
         </div>
-      </el-main>
+      </de-main-container>
+      <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
+        <AttrList v-if="curComponent" />
+        <p v-else class="placeholder">{{ $t('panel.select_component') }}</p>
+      </de-aside-container>
+
     </de-container>
 
     <el-dialog
@@ -160,6 +146,7 @@ import Toolbar from '@/components/canvas/components/Toolbar'
 import { findOne } from '@/api/panel/panel'
 import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
 import Preview from '@/components/canvas/components/Editor/Preview'
+import AttrList from '@/components/canvas/components/AttrList.vue'
 
 // 引入样式
 import '@/components/canvas/assets/iconfont/iconfont.css'
@@ -181,7 +168,8 @@ export default {
     FilterDialog,
     SubjectSetting,
     PreviewFullScreen,
-    Preview
+    Preview,
+    AttrList
   },
   data() {
     return {
@@ -197,7 +185,9 @@ export default {
       currentWidget: null,
       currentFilterCom: null,
       subjectVisible: false,
-      previewVisible: false
+      previewVisible: false,
+      componentStyleShow: true,
+      aidedButtonActive: false
     }
   },
 
@@ -417,6 +407,9 @@ export default {
     },
     previewFullScreen() {
       this.previewVisible = true
+    },
+    changeAidedDesign() {
+      this.aidedButtonActive = !this.aidedButtonActive
     }
 
   }
@@ -511,5 +504,24 @@ export default {
 .button-closed{
   background-color: #ffffff!important;
 }
+.style-aside{
+  width: 85px;
+  max-width:85px!important;
+  border: 1px solid #E6E6E6;
+  padding: 3px;
+  transition: all 0.3s;
+
+}
+.placeholder{
+  font-size: 14px;
+  color: gray;
+}
+.show {
+  transform: translateX(0);
+}
+
+.hidden {
+  transform: translateX(100%);
+}
 
 </style>