行列

### 图片库和模板数据接口 在入口文件，如`index.html`中，启动设计器的入口配置相应的接口地址 ```ts designer.setup({ getImageUrl:'./apis/images.json', getFieldUrl:'./apis/fields.json', getTemplateUrl:'./apis/example.json' }); ``` 可到`apis`目录自行查看相应的接口数据：https://github.com/xinglie/report-designer/tree/master/apis ### 设计器初始化配置对象 ```ts /** * 设计器支持的初始化对象 */ interface DesignerOptions { /** * 站点名称，需要授权 */ siteName?: string /** * 站点logo，需要授权...

### 保存和编辑数据接口 在入口文件，如`index.html`中，启动设计器的入口配置相应的接口地址 ```js designer.setup({ 　　getImageUrl:'./apis/images.json',//图片库接口 　　getFieldUrl:'./apis/fields.json',//数据源接口 　　getTemplateUrl:'./apis/example.json',//获取模板接口 　　saveContentUrl:'./apis/save.json',//保存内容接口 　　getContentUrl:'./apis/getcontent.json',//获取内容接口 　　presetUrl:'.apis/content.json',//预设内容接口 }); ``` 当保存内容时，以`post`的形式向`saveContentUrl`提交数据，保存`key`为`stage`，保存的内容是JSON字符串 当需要编辑时，进入设计器页面时，需要自己处理相应的参数，并传给`getContentUrl`配置的接口。可按提供的`index.html`进行处理， ### 思考 如果是以新建的模式进入设计器时，此时反复保存，后端是否会反复创建新的数据？ 这里建议进入设计器时，始终携带一个类似`id`的标识，把该标识传给`getContentUrl`配置的接口。 后端根据数据库里是否有类似该`id`的标识决定是否新建还是修改。 **设计器保存时提交什么数据，则编辑时返回什么样的数据**

### 接口配置与界面关系 > 以上接口配置与未配置界面上展示会不一样。 如果未配置`getImageUrl `则所有与选择图片相关的均自动隐藏不展示 如果未配置`getFieldUrl `则与数据绑定的相关操作自动隐藏不展示 如果未配置`getTemplateUrl `则右上角模板功能自动隐藏 如果未配置`saveContentUrl `则点保存的时候，展示保存内容对话框，如果配置，则直接保存，不出对话框。

### API 可视化编辑器，`designer`除了提供`setup`安装，和`destroy`销毁外，还提供`get():Promise`获取内容以及`set(content:string|JSONObject)`设置内容。 您也可以不使用上述内置的接口，自己通过`set`或`get`方法在外部进行设置和获取设计器的内容 可视化编辑器自带的打印预览页面`viewer.js`提供`getHTML`等常用方法，请参考：https://github.com/xinglie/report-designer/issues/38

### 元素与接口的绑定  项目中元素与接口绑定后，会统一走数据中心模块(tmpl/provider/datacenter.ts)进行请求。 即上图中的文本、图片等会通过`datacenter`拿到绑定的数据。因此可以在`datacenter`中进行再次组织，比如转换接口的请求地址，向多个接口请求获取数据等(其中后文提到的`getBindUrl`函数调用就是在这里进行处理的) 而`report-designer`项目中所有跟接口有关的请求均会走(tmpl/designer/service.ts)，您可以在该处进行统一的请求处理，比如添加统一的参数或对返回的数据结构进行预处理等。

### 接口的参数控制 假如进入设计器时`url`带上了其它参数，如`http://localhost/report-designer/index.html?id=x&from=y&source=z` 有时候我们想把地址栏中的其它参数如`from`继续透传给设计器中其它如数据源或图片源等接口，我们可以这样做： > 因为数据源或图片源接口地址均是配置化的，我们只需要在初始化的时候，从地址栏获取参数，并透传给配置接口即可，示例如下 ```html let parsedUrl = new URL(location.href); let from = parsedUrl.searchParams.get('from'); let postfix = from ? `?from=${from}` : ''; designer.setup({ //以下是相关配置接口，如果地址栏有from参数，拼接上即可 getImageUrl: './apis/images.json' + postfix,...

### 授权配置 > 以下配置需源码或定制授权 #### history.max.count > number > 历史记录最大值，多出的历史记录会删除。 #### hisotry.save.continous.delay > number > 相同类型的历史记录间断多少毫秒后记录，比如通过键盘移动元素，并非每次移动均记录，只有松开按键超过配置的ms后才记录 #### random.examples > boolean true > 进入设计器在配置模板的情况下，是否随机显示一个示例，未授权则处于打开状态 #### show.help.and.ow.links > boolean true > 是否展示相关的帮助链接，未授权则处于打开状态...

### 主题预览 > 您可以点击设计区右上方的`主题`，打开主题设置弹出框，快速预览相应的主题 主题预览仅支持主题色与对比色的设置，如果您需要深度定制其它颜色，则需要修改变量样式

### 界面与数据 基础数据是用于描述设计区大小、颜色以及包含哪些元素，这些元素在什么样的位置上等基本信息，当我们点击保存时，保存的就是这份数据。 在基础数据上面，是经过业务需求计算处理后的逻辑数据层，比如选中的元素能不能克隆、复制等，选中的容器格子能否合并或拆分，这些数据均为逻辑控制数据。设计器中会提供大量这样的`API`对基础数据进行处理封装，方便我们对基础数据的展示和处理。 到这一步不需要界面，只需要`API`即可完成对基础数据的读取和修改。 界面仅是对逻辑数据可视化的一种方式，让用户可以通过界面直观的经过逻辑处理层修改这份数据，同样，即使没有界面，也可以通过逻辑控制层提供的`API`完成对基础数据的操作。 这种设计方式可以让我们更好的任意更换界面和提供数据修改控制、调度，按自己的喜好向用户提供设计器的功能

### 支持任意需求 > 设计器中的被设计元素是插件化的存在，设计器抽象了通用的可视化拖动、对齐、复制、粘贴等通用功能，可适用不同的元素可视化的操作。 目前设计器自带了近百种元素，这些元素大多数是为了验证设计器的能力而存在的。 现实需求是多种多样的，而且类似的需求从不同的角度可视化设计，带给使用者的便利程度也不同。通用设计器为了更贴近使用者，抽象出了各种元素来适应不同的可视化需求，避免使用同一个类型的元素，增加巨多的配置让使用者无从下手。