在本章中，你将学会使用全局变量和中继器创建一个需求文档生成器网站。
项目背景
在产品日常工作当中，少不了的一项核心工作是编写产品需求文档，而产品需求文档的编写往往耗费产品经理很长的工作时间。在产品需求文档格式固定的情况下，我们能够将编写文档的工作简化，比如只提供核心的产品信息，由某种工具按照固定的文档格式，自动补充文档呢？
有了这个想法之后，我们拿一个表单的搜索条件为例，产品需求文档想要描述清楚这一部分的需求，常常格式为：
搜索条件名称，是否必填，控件名称，控件提示文字，数据来源…
按照这个逻辑，我们希望填写一些必要的信息，而其他文字由系统自动生成。
说干就干！
项目搭建
首先，创建一个新项目，命名为DocumentGenerator。
页面样式-基础框架
为了让页面更加美观，我们先构建基础的框架背景。
首先填充页面颜色为#F0F2F5，然后拖入两个“矩形1”组件，将线段线宽设置为0，圆角半径设置为8，再调整它们的相对位置，就构建了一个背景框架。
左边的矩形我们作为编辑区，右边的矩形我们作为输出内容的展示区。
基础样式-编辑区
我们分析下下面一段需求文档文字的内容：
业务地区：必填/必选，下拉多选，placeholder为请选择，可选项为该用户数据权限下可访问的业务地区名称；
我们需要几个组件来获得这些内容：
输入框：输入标题
单选按钮：是否必填/必选
下拉选择框：控件类型、提示文字
多行文本框：其他说明文字
确定好思路后，我们开始构建基础的组件。
首先，是输入框。
拖入一个“文本标签”组件，修改内容为“标题”。
再拖入一个文本框组件，命名为“title”，设置文字字号为14，边框线段颜色为#E6E6E6，边框圆角半径为4，内部文字左侧边距为10。
在交互工具栏中中，设置“鼠标悬停时的样式”，设置线段颜色为#1890FF，设置提示文字为“请输入”，隐藏提示为“获得焦点”。
接下来，是单选按钮。
单选按钮我们使用的一个圆形组件和文本标签组件，组合而成的单选按钮的样式。
基础样式和交互这里就不多赘述了，在前面基础组件的使用的章节中有详细的说明，简要的几个逻辑，一个是点击时的选中状态为真，单选的选项都需要设置为同一个选项组中，默认有一个选项载入时为真，以及圆形、文字选中时的颜色设置为#1890FF。
接下来，是组件类型。
组件类型为获得使用的组件是输入框还是下拉选择框，它是一个自定义实现的下拉单选的组件。
组件类型的交互会稍微复杂一点，这里使用动态面板将所有内容包裹在里面。
内部组件有一个矩形（输入框）作为本文接收方，然后在这个文本下有一个表格，展示可选的选项。
交互动作也会稍微复杂一点，基础的逻辑是：点击下拉选择框，展示（显示，向下展开）可选项，点击选项后收起（隐藏，向下展开）可选项，并将输入的内容回写到文本框中。
接下来，是多行文本框。
拖入一个“文本域”组件，和文本框设置的样式一致，只是他的高度会更高一些。
最后，是主要按钮。
拖入一个“主要按钮”组件，调整它的位置和样式、尺寸，作为触发按钮使用。
在这里我们可以看到一个核心的设计原则：统一性原则。
我们使用组件的高度，无论是输入框、下拉选择框、按钮，它们的组件的高度都是40，这样能让我们的页面看起来具有整体性。
页面样式-展示区
对于展示区域，我们这里很简单，每当我们确定好内容后，展示区域就增加一行文字。
这里我们使用到了“中继器”组件，它可以通过“添加行”和赋值的交互，展示我们最终结果的数据。
拖入一个“中继器”组件，命名为“output”。
进入到中继器内页，调整示例的矩形的尺寸为1080*40，并将线宽设置为0。
在中继器数据栏，删掉所有示例数据。
以上，我们就完成了基本页面样式的绘制。
交互动作-全局变量
按照Axure的赋值逻辑，输入框我们可以直接获得里面的文字，但其他不行。
其他的组件是我们自己完成的交互，像单选按钮、下拉单选，那这些内容，我们可以采用全局变量获得它们的值。
首先，定义3个全局变量，分别为required是否必填，默认值为“必填/必选”，然后是组件类型type，默认值为“输入框”，还有placeholder提示文字，默认值为“请输入”。
下面，我们来更新全局变量的值。
首先是单选按钮，但在交互工具栏中，点击单选按钮的选项时，我们更新全局变量的值。
然后是下拉框。
在点击下拉框每一个选项时，设置全局变量的值为对应的内容。示例：点击“输入框”选项，设置变量值type类型为“输入框”，设置placeholder提示文字为“请输入”。
全局变量赋值完成后，我们来完成将编辑区内容赋值到展示区的交互。
交互动作-添加行
选中“确定”按钮，在“交互”工具栏中新增交互，选择“单击时”，选择“添加行”，设置目标为“output”中继器，点击“添加行”，在“添加行到中继器”弹窗中点击fx，打开“编辑值”弹窗。
然后就是添加行赋值的过程。
我们定义了5个局部变量，来获得我们想要的值。
LVAR1：文本文字-title-标题名称
LVAR2：全局变量-required-是否必填
LVAR3：全局变量-type-组件类型
LVAR4：全局变量-placeholder-提示文字
LVAR4：文本文字-explain-多行文本文字
我们在组装数据的时候，我们按照需要的格式使用标点符号隔开。
这样，我们就完成了编辑区内容赋值到展示区的交互动作。
交互动作-清空内容
为了方便我们连续输入，我们点击“确定”按钮时除了添加行之外，还增加了2个交互动作，用来清空标题内容和其他说明内容。
项目预览
完成并保存后，我们在浏览器中预览下效果：
哈哈哈，效果不错！
为了让这个项目能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网址地址
PRD产品需求文档生成器： ricardowesley.gitee.io/prd
快来动手试试吧！
