!5 README

Merge pull request !5 from first128/dev

README.md

@@ -5,20 +5,13 @@
 
 基于 [vjform](https://github.com/fyl080801/vjform) 的 Vue 界面可视化设计器
 
-示例请看 [demo](https://fyl080801.gitee.io/vjdesign/)
-
-> 使用 [jformer](https://gitee.com/fyl080801/jformer) 组件可直接用编辑器元数据中的 json 定义呈现功能
->
-> 如果使用 [vjform](https://github.com/fyl080801/vjform) 呈现功能，则需要在 vjform 中引用 [表达式支持库](https://github.com/fyl080801/jpresent-transform-expression)
-
-```javascript
-import vjform from 'vjform'
-import expression from 'jpresent-transform-expression'
-
-vjform.use(expression)
-```
+## 特性
 
-![截图](https://tva1.sinaimg.cn/large/0081Kckwly1gk1t04rlxqj31ns0u0alu.jpg)
+- 可视化拖拽布局
+- 支持任何 html 元素和 vue 项目中引用的组件
+- 支持数据关联和交互行为的编辑
+- 通过 json 格式数据就可扩展编辑器支持的组件和属性
+- 组件在设计器上呈现形式和属性编辑器支持二次开发
 
 ## Getting Start
 
@@ -50,13 +43,20 @@ import 'vjdesign/dist/vjdesign.css'
 Vue.use(vjdesign)
 ```
 
-## 特性
+## 相关链接
 
-- 可视化拖拽布局
-- 支持任何 html 元素和 vue 项目中引用的组件
-- 支持数据关联和交互行为的编辑
-- 通过 json 格式数据就可扩展编辑器支持的组件和属性
-- 组件在设计器上呈现形式和属性编辑器支持二次开发
+示例请看 [demo](https://fyl080801.gitee.io/vjdesign/)
+
+> 使用 [jformer](https://gitee.com/fyl080801/jformer) 组件可直接用编辑器元数据中的 json 定义呈现功能
+>
+> 如果使用 [vjform](https://github.com/fyl080801/vjform) 呈现功能，则需要在 vjform 中引用 [表达式支持库](https://github.com/fyl080801/jpresent-transform-expression)
+
+```javascript
+import vjform from 'vjform'
+import expression from 'jpresent-transform-expression'
+
+vjform.use(expression)
+```
 
 ## 依赖
 

docs/.vuepress/config.js

@@ -14,7 +14,7 @@ module.exports = {
     ]
   ],
   themeConfig: {
-    nav: [{ text: '指南', link: '/1.guide/' }],
+    nav: [{ text: '指南', link: '/1.guide/intro.html' }],
     sidebar: resolvePaths(),
     sidebarDepth: 0
   },

docs/.vuepress/src/utils/docs.js

@@ -12,7 +12,7 @@ module.exports.resolvePaths = () => {
     })
     .filter(item => item.stat.isDirectory() && item.name !== '.vuepress')
     .reduce((prev, cur) => {
-      prev[cur.name] = prev[cur.name] || {
+      const current = prev[cur.name] || {
         title: '',
         collapsable: false,
         children: []
@@ -24,8 +24,8 @@ module.exports.resolvePaths = () => {
         const readmeFile = fs.readFileSync(readmePath).toString()
         const lines = readmeFile.split('\n')
         if (lines.length > 0 && lines[0].startsWith('# ')) {
-          prev[cur.name].title = lines[0].replace('# ', '')
-          prev[cur.name].path = `/${cur.name}`
+          current.title = lines[0].replace('# ', '')
+          // current.path = `/${cur.name}`
         }
       }
 
@@ -38,14 +38,19 @@ module.exports.resolvePaths = () => {
             return
           }
 
-          prev[cur.name].children.push(
+          current.children.push(
             path.resolve('/', cur.name, file.replace('.md', ''))
           )
         })
 
+      if (!current.children || current.children.length <= 0) {
+        prev[cur.name] = current.path + '/README'
+      } else {
+        prev[cur.name] = current
+      }
+
       return prev
     }, {})
-  console.log(groups)
-
+  // console.log(groups)
   return Object.keys(groups).map(key => groups[key])
 }

docs/1.guide/intro.md

@@ -1 +1,29 @@
 # 介绍
+
+## 概述
+
+vjdesign 是一个 vue 界面及功能的可视化构建工具，通过图形界面搭建前端业务
+
+## 开发动机
+
+调研了一些的可视化界面设计工具后发现存在以下几点问题，一方面是支持的组件都是设计器本身自带的或者是基于某种组件库开发的，样式和功能都是固定的几种，可设置的属性也是设计器支持范围内的，如果想扩展功能则需要二次开发；另一方面是组件对数据的操作一般仅限于几种输入输出操作，组件属性如果也跟数据有复杂点的交互和联动则无法实现。
+
+一般可视化设计器都是注重界面布局的编辑，但当需要从服务端获取数据或是提交请求的时候
+
+## 特性
+
+- 支持任何 html 元素和项目中引用的组件并且支持组件的所有属性
+
+设计器对支持的组件没有限制，理论上任何 html 元素和当前 vue 项目中引用的组件设计器都可以支持
+
+- 通过编辑配置文件定制设计器的组件以及组件的属性
+
+如果在设计器中使用某些组件可通过配置方式定制，定制的范围包括组件类型、组件属性、属性编辑方式
+
+- 支持设置数据复杂的联动行为
+
+## 设计思想
+
+## 适合对象
+
+## 不适合对象

docs/3.dev/README.md

@@ -0,0 +1 @@
+# 功能扩展

docs/3.dev/component.md

@@ -0,0 +1 @@
+# 组件

docs/3.dev/editor.md

@@ -0,0 +1 @@
+# 编辑器

docs/README.md

@@ -4,7 +4,7 @@ home: true
 
 <div class="hero">
   <p class="action">
-    <a href="/vjdesign/1.guide/" class="action-button">指南</a>
+    <a href="/vjdesign/1.guide/intro.html" class="action-button">指南</a>
   </p>
   <hr/>
 </div>