feat: 完成生成 Schema 功能

app/App.vue

@@ -5,17 +5,17 @@
         class="el-menu--form-generator"
         mode="horizontal"
         router
-        background-color="#545c64"
-        text-color="#fff"
-        active-text-color="#fa4"
+        :background-color="headerBg"
+        :text-color="headerTextColor"
+        :active-text-color="headerActiveTextColor"
         :default-active="activeIndex"
         @select="handleSelect">
         <el-menu-item index="1" route="/test-common">基础组件</el-menu-item>
         <el-menu-item index="2" route="/test-extend">扩展组件</el-menu-item>
         <el-menu-item index="3" route="/form-generator">表单生成器</el-menu-item>
       </el-menu>
     </el-header>
-  <el-main  style="padding: 0;">
+  <el-main>
     <router-view></router-view>
   </el-main>
 </el-container>
@@ -26,7 +26,10 @@ export default {
   name: 'APP',
   data () {
     return {
-      activeIndex: '1'
+      activeIndex: '1',
+      headerBg: '#10163a',
+      headerTextColor: '#ffffff',
+      headerActiveTextColor: '#FF9F43'
     }
   },
   methods: {

app/views/form-generator/aside-panel/index.vue

@@ -1,6 +1,8 @@
 <template>
   <el-card class="aside-layout" shadow="never">
-    <label for="aside-layout" class="aside-layout__label">布局操作</label>
+    <div slot="header" class="aside-layout__header clearfix">
+      <div style="line-height: 28px;">布局操作</div>
+    </div>
     <section class="aside-layout__rowEdit">
       <row-select type="addRow" @editRow="onAddRow"/>
       <row-select type="editRow" :activeLayOut="activeLayOut" @editRow="onEditRow"/>
@@ -158,23 +160,36 @@ export default {
 }
 </script>
 
+<style lang="less">
+@primary: #7367f0;
+
+.aside-layout {
+  .el-card__header {
+    background-color: @primary;
+    padding: 6px 12px;
+  }
+}
+</style>
+
 <style lang="less" scoped>
+@primary: #7367f0;
 @grey: #cfcbcb;
+
 .aside-layout {
   height: 100%;
-  &__rowEdit{
+  border: 1px solid @primary;
+  &__header {
+    font-size: 14px;
+    color: #ffffff;
+  }
+  &__rowEdit {
     margin-bottom:12px;
     display: flex;
     justify-content: space-between;
     // & > *:not(:last-child){
     //   margin-right: 20px;
     // }
   }
-  &__label {
-    display: block;
-    margin-bottom: 5px;
-    font-size: 14px;
-  }
   &__colitems-wrap {
     margin-top: 20px;
   }

app/views/form-generator/config-panel/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="config-panel">
-    <el-tabs v-model="activeTab" stretch>
+    <el-tabs v-model="activeTab" stretch type="border-card">
       <el-tab-pane label="表单设置" name="formSetting">
         <!-- 表单属性 -->
         <fieldset class="config-panel__fieldset">
@@ -118,6 +118,7 @@
 
 <script>
 import ComponentPanel from './module/component-panel'
+
 export default {
   name: 'ConfigPanel',
   inject: ['fg'],
@@ -156,6 +157,32 @@ export default {
 </script>
 
 <style lang="less">
+@primary: #7367f0;
+@lighten-primary-8: lighten(@primary, 8%);
+@darken-primary-8: darken(@primary, 8%);
+
+.el-tabs--border-card {
+  border: none;
+  box-shadow: none;
+}
+.el-tabs--border-card>.el-tabs__header .el-tabs__item {
+  color: #fff;
+  background-color: @lighten-primary-8;
+  border: none;
+  &:hover {
+    color: #fff;
+  }
+}
+.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+  color: #fff;
+  background-color: @primary;
+}
+
+.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
+  color: #fff;
+  background-color: @darken-primary-8;
+}
+
 .config-panel {
   &__figcaption {
     box-sizing: content-box;

app/views/form-generator/dialog/SchemaCode.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-dialog
+    v-if="fg.showSchemaCode"
+    title="Schema Code"
+    width="33%"
+    class="form-generator__dialog"
+    :visible.sync="fg.showSchemaCode"
+    :before-close="handleClose">
+    <json-viewer
+      v-if="schemaCode"
+      :copyable="{copyText: '复制 Schema', copiedText: '已复制到剪切板'}"
+      :value="schemaCode"
+      :expand-depth="4"
+    />
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'SchemaCode',
+  props: {
+    code: [Object, Array]
+  },
+  inject: ['fg'],
+  data () {
+    return {
+      cmOptions: {
+        tabSize: 2,
+        lineNumbers: true,
+        line: true
+      }
+    }
+  },
+  computed: {
+    schemaCode () {
+      return this.code
+    }
+  },
+  methods: {
+    handleClose (done) {
+      this.fg.showSchemaCode = false
+      done()
+    }
+  }
+}
+</script>
+
+<style lang="less">
+// 定制 dialog 样式
+.form-generator__dialog {
+  .el-dialog__header {
+    padding: 12px 20px;
+    background-color: #f8f8f8;
+  }
+  .el-dialog__headerbtn {
+    top: 12px;
+    right: 12px;
+  }
+  .el-dialog__body {
+    padding: 20px;
+  }
+  .jv-container {
+    font-size: 12px;
+    max-height: 480px;
+    overflow-y: auto;
+  }
+}
+</style>

app/views/form-generator/index.vue

@@ -10,6 +10,14 @@
     </aside>
     <main class="form-generator__main">
       <el-card class="main-layout" @click.native.self="onResetActive" shadow="never">
+        <div slot="header" class="main-layout__header clearfix">
+          <div class="">表单配置</div>
+          <div class="main-layout__header--action">
+            <el-button type="warning" size="mini" @click="showSchemaCode = true">生成 Schema</el-button>
+            <el-button type="danger" size="mini">生成代码</el-button>
+            <el-button type="success" size="mini">预览表单</el-button>
+          </div>
+        </div>
         <el-form
           :model="formModel"
           :label-position="formSettings.labelPosition"
@@ -58,21 +66,24 @@
           ref="configPanel"/>
       </el-card>
     </section>
+    <schema-code :code="layoutSections" />
   </div>
 </template>
 
 <script>
 import AsidePanel from './aside-panel'
 import ConfigPanel from './config-panel'
 import MainPanel from './main-panel'
+import SchemaCode from './dialog/SchemaCode'
 import { BASIC_COMPONENTS } from '@/constant/formGenerator'
 
 export default {
   name: 'FormGenerator',
   components: {
     AsidePanel,
     ConfigPanel,
-    MainPanel
+    MainPanel,
+    SchemaCode
   },
   provide () {
     return {
@@ -103,7 +114,8 @@ export default {
       },
       orderRecord: 0, // 每次生成向上迭代
       activeSection: 0, // 激活的行数
-      activeProp: '' // 激活的组件prop
+      activeProp: '', // 激活的组件prop
+      showSchemaCode: false
     }
   },
   methods: {
@@ -161,14 +173,16 @@ export default {
     },
     onResetActive () {
       this.activeProp = ''
+    },
+    handleBuildSchema () {
+      console.log('dsds')
     }
   }
 }
 </script>
 
 <style lang="less">
-@yellow: #fa4;
-@pink: #f4a;
+@primary: #7367f0;
 @grey: #cfcbcb;
 
 .component-basic {
@@ -204,9 +218,30 @@ export default {
     cursor: pointer;
   }
 }
+
+.form-generator {
+  &__main {
+    .el-card__header {
+      background-color: @primary;
+      padding: 6px 12px;
+    }
+  }
+  &__config-panel {
+    .config-panel-layout {
+      .el-card__body {
+        padding: 0;
+        .el-tabs__content {
+          padding: 15px 20px;
+        }
+      }
+    }
+  }
+}
 </style>
 
 <style lang="less" scoped>
+@primary: #7367f0;
+
 .form-generator {
   display: flex;
   width: 100%;
@@ -219,6 +254,14 @@ export default {
     flex: 1;
     .main-layout {
       height: 100%;
+      border: 1px solid @primary;
+      &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 14px;
+        color: #ffffff;
+      }
       &__section {
         display: flex;
         justify-content: space-around;

app/views/form-generator/main-panel/index.vue

@@ -105,10 +105,9 @@ export default {
 </script>
 
 <style lang="less">
-@yellow: #fa4;
-@pink: #f4a;
+@primary: #7367f0;
 @grey: #cfcbcb;
-@blue: #409eff;
+
 .schema-form {
   &__row{
     &__grid{
@@ -122,7 +121,7 @@ export default {
       border:2px solid transparent;
       cursor: pointer;
       &--active{
-        border-color: @blue;
+        border-color: @primary;
       }
     }
     &--layout{
@@ -142,7 +141,7 @@ export default {
       position: relative;
       box-shadow: inset 0 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, 0);
       &--active{
-        box-shadow: inset 0 0 0 2px @pink, 0 0 1px rgba(0, 0, 0, 0);
+        box-shadow: inset 0 0 0 2px @primary, 0 0 1px rgba(0, 0, 0, 0);
       }
       &__mask{
         position: absolute;

app/views/form-generator/main-panel/module/grid-setting-button.vue

@@ -81,10 +81,10 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.grid-setting-button{
+.grid-setting-button {
   width: 16px;
   height: 16px;
-  border: 2px solid #409eff;
+  border: 2px solid #7367f0;
   background-color: #fff;
   border-radius: 50%;
   transition: .2s;

app/views/form-generator/main-panel/module/row-setting.vue

@@ -66,15 +66,16 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@blue: #409eff;
+@primary: #7367f0;
+
 .row-setting{
   position: absolute;
   bottom:0;
   right:0;
   width: 40px;
   padding: 0 5px;
   height: 20px;
-  background: @blue;
+  background: @primary;
   font-size:16px;
   color: #fff;
   display: flex;