提交 1a632192 authored 作者: 徐立's avatar 徐立

新增场景设计器组件文档

上级 c79ee00b
......@@ -78,24 +78,5 @@ module.exports = {
// ]
// }
],
// lastUpdated: 'Last Updated',
// // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
// repo: 'poetries/FE-Interview-Questions/tree/dev',
// // 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
// // "GitHub"/"GitLab"/"Bitbucket" 其中之一,或是 "Source"。
// repoLabel: '查看源码',
// // 以下为可选的编辑链接选项
// // 假如你的文档仓库和项目本身不在一个仓库:
// // docsRepo: 'poetries/FE-Interview-Questions',
// // 假如文档不是放在仓库的根目录下:
// docsDir: 'docs',
// // 假如文档放在一个特定的分支下:
// docsBranch: 'dev',
// // 默认是 false, 设置为 true 来启用
// editLinks: true,
// // 默认为 "Edit this page"
// editLinkText: '帮助我们改善此页面!'
}
}
......@@ -11,16 +11,3 @@ features:
details: 通过用户配置,实现流程流转
footer: '版权所有: 成都市知用科技有限责任公司'
---
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
......@@ -3,17 +3,123 @@ sidebarDepth: 4
pageClass: custom-code-highlight
---
# 场景设计器组件介绍
![An image](../640.gif)
## 大数据组件
&#8195; 大数据提供dataV组件库,echarts图表组件,页面组件,以及通用的链接组件
### dataV组件
&#8195; 提供多种多样的大数据类组件,提供以下类型组件
> - 边框组件
> - 装饰
> - 动态环图
> - 胶囊柱图
> - 矩形水位图
> - 圆角水位图
> - 圆形水位图
> - 进度池
> - 数字翻牌器
> - 基本轮播表
> - 排名轮播表
> - 图表组件
除边框组件不支持拖拽布局外,其他组件都支持拖拽布局,并支持8个方向轻微跳转大小
#### 组件定位
​ 用户可配置左侧定位,顶部定位,用以微调,进行排列,格式为'1px'
#### 样式配置
&#8195; 用户可配置宽度,高度
#### sql配置
​ 组件内部会将数据的配置提供给配置人员,配置人员只需在每个配置项种进行配置并返回对应格式数据,组件即会动态更新
#### 数据配置
&#8195; 组件的基础配置都存在在数据配置中,例如标题内容,标题颜色等各种各样的配置都将存放在数据配置中
## 门户组件
门户组件提供不同类的模板,内置了部分不需要配置功能,如登录模板的用户登录,用户注册,修改密码等.
门户组件分为以下几类:
### 登录模板
&#8195; 登录模板内部提供了用户登录,用户注册,修改密码, 用户可以通过配置项来选择关闭或开启部分功能的开放,
### 门户模板
&#8195; 门户模板内部提供了顶部导航栏,底部展示栏配置,用户可根据需求,进行tabs配置和底部显示内容的配置,门户模板tabs配置应为**子模板ID**,页面主体内容展示应放于子模板之中.
### 个人中心模板
&#8195; 个人中心模板提供了tabs配置并且内置了修改密码,修改绑定邮箱,修改绑定手机功能,
## 后台模板
&#8195; 后台模板提供左部菜单栏,用户可配置左部菜单栏列表实现不同列表页面之间的切换,并支持用户配置展示栏的展示数据
## 链接组件
&#8195; 模板之间的链接都由链接组件链接,链接组件可链接以下多种模板数据:
#### 主模板
&#8195; 配置人员只需要获取到主模板Id,并将主模板ID放入链接组件的配置值中,即可完成链接并展示在设计器.
![An image](./zmb.png)
#### 子模板
&#8195; 子模板需要配置人员提前创建子模板.子模板创建应为当前主模板的子类,创建子模板后进行子模板编辑即可获取到子模板ID,之后将Id传入子模板即可展示
![An image](./xmb.png)
#### 事务模板
&#8195; 事务模板指以及配置流程,且可以在页面单独展示的模板,配置人员获取到事务模板ID后,可直接传入Id即可完成链接
![An image](./mb.png)
#### 表单模板
&#8195; 表单模板为表单设计器中设计的模板,并没有进行流程配置,只是单纯的表单,这里需要获取到表单模板ID,并传入即可完成对接
![An image](./bd.png)
## 特殊模板说明
### 轮播组件
&#8195; 轮播组件的轮播图应在后台=>门户管理=>广告版位管理新建栏目=>上传图片=>拿取关键字后将关键字传入轮播组件即可
以下为图片说明
1. 创建广告版位管理
![An image](./lb1.png)
2. 选择对应栏目并上传
![An image](./lb2.png)
3. 拿取关键字
![An image](./lb3.png)
4. 将关键字放入轮播图组件的配置项即可
### 链接模板组件共享数据监听
&#8195; sql配置器中注入了 data 变量,该变量所有组件共享
&#8195; 子模板配置项中存在是否监听组件共享数据,如果开启,当其中一个组件改变了共享组件,那么只要开启监听的链接组件都会进行重新渲染
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
\ No newline at end of file
![An image](./jt.png)
......@@ -5,7 +5,7 @@ pageClass: custom-code-highlight
# 场景设计器
![An image](https://mmbiz.qpic.cn/mmbiz_gif/mbvbah2cbzGdEbMQ9PibFrQYI8iaZktchUzNUwswCu5x425cPnCwo6UCd3XIQRZPyDKnGEic03d3iahnFzpKOtCbTw/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1)
![An image](../640.gif)
&#8195; 场景设计器主要用于对组件拖拽定位,并生成一个全新的页面,配置人员可通过不同的配置从而完成对页面进行修改以适应学院的需求,场景设计器细化可分为以下种类:
......@@ -247,14 +247,6 @@ router.push({
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
\ No newline at end of file
####data
所有属性共享参数,当其中一个组件改变了当前变量,则会重新渲染开启了监听的链接组件
\ No newline at end of file
......@@ -4,6 +4,7 @@ pageClass: custom-code-highlight
---
# 全局配置项说明
![An image](../640.gif)
## 系统维护中开关(isMaintain)
......@@ -520,14 +521,3 @@ pageClass: custom-code-highlight
**配置关联**:无
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
\ No newline at end of file
# 模板设计器组件介绍
![An image](https://mmbiz.qpic.cn/mmbiz_gif/mbvbah2cbzGdEbMQ9PibFrQYI8iaZktchUzNUwswCu5x425cPnCwo6UCd3XIQRZPyDKnGEic03d3iahnFzpKOtCbTw/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1)
![An image](../640.gif)
## 表单基础配置
......@@ -590,14 +590,3 @@
将多个表单嵌入进当前表单的组件
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
\ No newline at end of file
# 场景设计器配置流程
![An image](../640.gif)
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
\ No newline at end of file
## 新增主模板
&#8195; 进入设计器列表页面点击新增,输入相关配置项,完成新增
![An image](./cz1.png)
##选择设计器
&#8195;在模板列表找到新建的主模板点击编辑按钮进入,进入后选择对应页面设计器
![An image](./cz2.png)
##操作栏配置和说明
&#8195; 选择设计器完成后进入操作栏
![An image](./cz3.png)
### 主模板选择
&#8195; 用户可以点击修改和删除对当前主模板进行删除
### 选中模板详情
&#8195; 用户可以在这里对当前模板的详细数据进行获取,并进行预览
### 模板页面管理
&#8195; 配置人员可进行子模板创建,和子模板之间切换分配,也可进行子模板之前的保存,修改,删除等
![An image](./cz4.png)
### 页面展示宽高配置
#### px
元素外部宽高会按照配置的宽高显示
#### 百分比
元素外部宽高会自适应上级元素的框
### 背景配置
用户可以选择背景图或者背景颜色进行对应配置
### 尺寸配置
可配置当前模板的宽度,高度
## 创建子模板并获取子模板Id
![An image](./xmb.png)
## 模板对接
获取子模板Id后切换到主模板点击组件进入配置项,进行对应子模板的配置项绑定,或者使用链接组件进行子模板绑定
## 绑定完成进行配置
到此模板新建已经完成,配置完成后预览即可
\ No newline at end of file
# 模板设计器
![An image](https://mmbiz.qpic.cn/mmbiz_gif/mbvbah2cbzGdEbMQ9PibFrQYI8iaZktchUzNUwswCu5x425cPnCwo6UCd3XIQRZPyDKnGEic03d3iahnFzpKOtCbTw/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1)
![An image](../640.gif)
## 简单介绍
......@@ -90,14 +90,3 @@
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
\ No newline at end of file
......@@ -2,14 +2,3 @@
# 预留
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
\ No newline at end of file
# 预留
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
\ No newline at end of file
# 模板设计器配置流程
<script>
export default {
mounted () {
var script = document.createElement("script");
script.type = "text/javascript"
script.charset="UTF-8"
script.src = "http://tajs.qq.com/stats?sId=59154049"
document.body.appendChild(script);
}
}
</script>
\ No newline at end of file
![An image](../640.gif)
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论