Develop

app/main.js

@@ -14,7 +14,13 @@ import './theme/index.css'
 import 'codemirror/theme/cobalt.css'
 import 'codemirror/mode/javascript/javascript.js'
 
-import SchemaForm, { SchemaFormItem, SchemaFormJsoneditor, SchemaFormQuill, SchemaFormCodemirror } from '../src/index'
+import SchemaForm, {
+  SchemaFormItem,
+  SchemaFormJsoneditor,
+  SchemaFormQuill,
+  SchemaFormCodemirror
+} from '../src/index'
+// } from '../lib/element-schema-form.common'
 
 Vue.use(ElementUI, {
   size: 'small'

app/store/global-actions.js

@@ -2,6 +2,10 @@ import types from './mutation-types'
 import Immutable from 'immutable'
 import shortid from 'js-shortid'
 
+const makeAction = type => {
+  return ({ commit }, ...args) => commit(type, ...args)
+}
+
 export default {
   addRow ({ commit, state }, reload) {
     let { layoutSections } = state
@@ -67,7 +71,7 @@ export default {
     let _list = Immutable.fromJS(layoutSections)
     commit(types.UPDATE_LAYOUT_SECTIONS, _list.set(activeSection, newVal).toJS())
   },
-  async delteColComp ({ commit, state, dispatch }, { colIndex, newVal, prop }) {
+  async deleteColComp ({ commit, state, dispatch }, { colIndex, newVal, prop }) {
     let { layoutSections, activeSection } = state
     let _list = Immutable.fromJS(layoutSections)
     console.log(1)
@@ -123,5 +127,6 @@ export default {
         ] })
     }
     commit(types.UPDATE_ACTIVE_PROP, `default_${_propIdx}`)
-  }
+  },
+  resetGlobalStore: makeAction('RESET_GLOBAL_STORE')
 }

app/store/global-mutations.js

@@ -30,5 +30,29 @@ export default {
   },
   [types.UPDATE_FORM_CONTROL] (state, load) {
     state.formControl = Object.assign(state.formControl, load)
+  },
+  [types.RESET_GLOBAL_STORE](state, load) {
+    const originState = {
+      iterationIdx: 0, // 迭代指针
+      layoutSections: [], // schema 信息
+      formModel: {},
+      formOptions: {},
+      formLayout: { // 表单布局
+        gutter: 16,
+        justify: 'start'
+      },
+      formSettings: { // 表单属性
+        labelPosition: 'left',
+        size: 'small',
+        labelWidth: '80px'
+      },
+      formControl: { // 布局控制
+        showGrid: false,
+        showLayout: false
+      },
+      activeSection: 0, // 激活的行数
+      activeProp: '' // 激活的组件prop
+    }
+    state = Object.assign(state, originState)
   }
 }

app/store/mutation-types.js

@@ -7,5 +7,6 @@ export default {
   UPDATE_ITERATION_IDX: 'UPDATE_ITERATION_IDX',
   UPDATE_FORM_SETTING: 'UPDATE_FORM_SETTING',
   UPDATE_FORM_LAYOUT: 'UPDATE_FORM_LAYOUT',
-  UPDATE_FORM_CONTROL: 'UPDATE_FORM_CONTROL'
+  UPDATE_FORM_CONTROL: 'UPDATE_FORM_CONTROL',
+  RESET_GLOBAL_STORE: 'RESET_GLOBAL_STORE'
 }

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

@@ -99,7 +99,7 @@ export default {
       'editRow',
       'deleteRow',
       'changeRow',
-      'delteColComp'
+      'deleteColComp'
     ]),
     checkMove (e) {
       console.log('Future index: ' + e.draggedContext.futureIndex)
@@ -109,7 +109,7 @@ export default {
         isCustom: 'btn-addCol',
         colGrid: element.colGrid
       }
-      this.delteColComp({ colIndex, newVal: oldSection, prop: element.prop })
+      this.deleteColComp({ colIndex, newVal: oldSection, prop: element.prop })
     },
     onAddRow (data) {
       const initVal = data.map((val, idx) => {

app/views/form-generator/config-panel/module/component-panel.vue

@@ -5,15 +5,15 @@
       <figcaption class="component-panel__figcaption">
         <span>通用属性</span>
       </figcaption>
-        <label-layout title="标签名称:">
-          <el-input v-model="editInfo.formItem.label"></el-input>
-        </label-layout>
-        <label-layout title="数据字段:">
-          <el-input v-model="editInfo.prop"></el-input>
-        </label-layout>
-        <label-layout title="栅格数:">
-          <el-input v-model.number="editInfo.colGrid.span"></el-input>
-        </label-layout>
+      <label-layout title="标签名称:">
+        <el-input v-model="editInfo.formItem.label"></el-input>
+      </label-layout>
+      <label-layout title="数据字段:">
+        <el-input v-model="editInfo.prop"></el-input>
+      </label-layout>
+      <label-layout title="栅格数:">
+        <el-input v-model.number="editInfo.colGrid.span"></el-input>
+      </label-layout>
     </fieldset>
     <!-- 定制属性 -->
     <fieldset class="component-panel__fieldset">

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

@@ -19,7 +19,7 @@
           :options="options"
         >
         </schema-form>
-       </el-form>
+      </el-form>
     </el-dialog>
   </div>
 </template>

app/views/form-generator/index.vue

@@ -11,6 +11,7 @@
             <el-button type="warning" size="mini" @click="showSchemaCode = true">生成 Schema</el-button>
             <el-button type="danger" size="mini" @click="showVueCode = true">生成 Vue 代码</el-button>
             <el-button type="success" size="mini"  @click="showResult = true">预览表单</el-button>
+            <el-button size="mini"  @click="resetGlobalStore">重置表单</el-button>
           </div>
         </div>
         <el-form
@@ -132,7 +133,8 @@ export default {
   },
   methods: {
     ...mapActions([
-      'addComponent'
+      'addComponent',
+      'resetGlobalStore'
     ]),
     handleAddComponent (comp, scope) {
       const { rowIndex, colIndex } = scope

babel.config.js

@@ -16,7 +16,7 @@ if (process.env.NODE_ENV === 'production') {
 
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ],
   plugins
 }

deploy.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env sh
+
+# 确保脚本抛出遇到的错误
+set -e
+
+# 生成静态文件
+npm run docs:build
+
+# 进入生成的文件夹
+cd docs/.vuepress/dist
+
+# 如果是发布到自定义域名
+# echo 'www.example.com' > CNAME
+
+# git init
+git add -A
+git commit -m 'chore: deploy docs'
+
+# 如果发布到 https://<USERNAME>.github.io
+# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
+
+# 如果发布到 https://<USERNAME>.github.io/<REPO>
+# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
+
+cd -

docs/.vuepress/config.js

@@ -1,7 +1,7 @@
 module.exports = {
-  title: 'Element Form Generator',
-  description: '基于 Element 的表单设计器，表单开发利器。',
-  base: '/docs/',
+  title: 'Element Schema Form',
+  description: '基于 JSON Schema 构建 Element 表单',
+  base: '/element-schema-form/',
   port: 5454,
   themeConfig: {
     sidebarDepth: 2,
@@ -24,7 +24,7 @@ module.exports = {
           title: '指南',
           collapsable: false,
           children: [
-            '/guide/',
+            '',
             '快速开始',
             '更新日志',
             '在线示例',
@@ -33,8 +33,11 @@ module.exports = {
         {
           title: '组件',
           collapsable: false,
+          sidebarDepth: 1,
           children: [
             '/guide/component/SchemaForm',
+            ['/guide/component/schema', 'schema 详解'],
+            ['/guide/component/layout', 'layout 布局'],
             '/guide/component/SchemaFormItem'
           ]
         }

docs/.vuepress/dist/404.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Element Schema Form</title>
+    <meta name="description" content="基于 JSON Schema 构建 Element 表单">
+
+
+    <link rel="preload" href="/element-schema-form/assets/css/0.styles.ab8c831f.css" as="style"><link rel="preload" href="/element-schema-form/assets/js/app.ded2370e.js" as="script"><link rel="preload" href="/element-schema-form/assets/js/4.96e629b6.js" as="script"><link rel="prefetch" href="/element-schema-form/assets/js/10.de302617.js"><link rel="prefetch" href="/element-schema-form/assets/js/11.dcfa8730.js"><link rel="prefetch" href="/element-schema-form/assets/js/12.73e38090.js"><link rel="prefetch" href="/element-schema-form/assets/js/13.26ace040.js"><link rel="prefetch" href="/element-schema-form/assets/js/14.70636053.js"><link rel="prefetch" href="/element-schema-form/assets/js/15.e08f9886.js"><link rel="prefetch" href="/element-schema-form/assets/js/2.e5e9c439.js"><link rel="prefetch" href="/element-schema-form/assets/js/3.522626c3.js"><link rel="prefetch" href="/element-schema-form/assets/js/5.875665f0.js"><link rel="prefetch" href="/element-schema-form/assets/js/6.292c9ab4.js"><link rel="prefetch" href="/element-schema-form/assets/js/7.f23f2c6a.js"><link rel="prefetch" href="/element-schema-form/assets/js/8.93b51d65.js"><link rel="prefetch" href="/element-schema-form/assets/js/9.b9d16bf6.js">
+    <link rel="stylesheet" href="/element-schema-form/assets/css/0.styles.ab8c831f.css">
+  </head>
+  <body>
+    <div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>That's a Four-Oh-Four.</blockquote> <a href="/element-schema-form/" class="router-link-active">Take me home.</a></div></div><div class="global-ui"></div></div>
+    <script src="/element-schema-form/assets/js/app.ded2370e.js" defer></script><script src="/element-schema-form/assets/js/4.96e629b6.js" defer></script>
+  </body>
+</html>