update props edit panel style

ly525
1 parent f9e241ad
Showing 3 changed files with 28 additions and 8 deletions
front-end/h5/src/components/core/editor/edit-panel/props.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/styles/index.scss
@@ -23,12 +23,20 @@ export default {
     renderPropsEditorPanel (h, editingElement) {
       const propsConfig = editingElement.editorConfig.propsConfig
       return (
-        <a-form ref="form" label-width="100px" size="mini" label-position="left">
+        <a-form
+          ref="form"
+          size="mini"
+          id="props-edit-form"
+          label-width="100px"
+          label-position="left"
+
+        >
           {
             Object.keys(propsConfig).map(propKey => {
               const item = propsConfig[propKey]
               // https://vuejs.org/v2/guide/render-function.html
               const data = {
+                style: { width: '100%' },
                 props: {
                   ...item.prop,
                   // https://vuejs.org/v2/guide/render-function.html#v-model
@@ -46,7 +54,7 @@ export default {
                 }
               }
               return (
-                <a-form-item label={item.label}>
+                <a-form-item label={item.label} labelCol={{ span: 8 }} wrapperCol={{ span: 14, offset: 2 }}>
                   { h(item.type, data) }
                 </a-form-item>
               )
@@ -14,12 +14,12 @@ const sidebarMenus = [
   {
     label: '组件列表',
     value: 'pluginList',
-    antIcon: 'user'
+    antIcon: 'bars'
   },
   {
     label: '页面管理',
     value: 'pageManagement',
-    antIcon: 'copy'
+    antIcon: 'snippets'
   },
   {
     label: '免费模板',
@@ -92,8 +92,13 @@ export default {
           </a-menu>
         </a-layout-header>
         <a-layout>
-          <a-layout-sider width="160" style="background: #fff">
-            <a-menu onSelect={val => { this.activeMenuKey = val }} mode="inline" defaultSelectedKeys={['pluginList']} style={{ height: '100%', borderRight: 1 }}>
+          <a-layout-sider width="160" style="background: #fff" collapsed>
+            <a-menu
+              mode="inline"
+              defaultSelectedKeys={['pluginList']}
+              style={{ height: '100%', borderRight: 1 }}
+              onSelect={val => { this.activeMenuKey = val }}
+            >
               {
                 sidebarMenus.map(menu => (
                   <a-menu-item key={menu.value}>
@@ -131,8 +136,8 @@ export default {
               </div>
             </a-layout-content>
           </a-layout>
-          <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
-            <a-tabs type="card" style="height: 100%;">
+          <a-layout-sider width="340" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
+            <a-tabs style="height: 100%;" tabBarGutter={10}>
               {/*
                 #!zh tab 标题：
                 #!en tab title
@@ -149,6 +154,7 @@ export default {
               </a-tab-pane>
               <a-tab-pane label="动画" key='动画' tab='动画'>动画</a-tab-pane>
               <a-tab-pane label="动作" key='动作' tab='动作'>动作</a-tab-pane>
+              <a-tab-pane label="脚本" key='脚本' tab='脚本'>脚本</a-tab-pane>
             </a-tabs>
           </a-layout-sider>
         </a-layout>
@@ -61,6 +61,12 @@
       background-color: #94f5ff;
     }
   }
+
+  #props-edit-form {
+    .ant-form-item {
+      margin-bottom: 12px;
+    }
+  }
 }