Identify UI components 划分UI组件

[ztl8702]

摘要

为了方便新UI设计 (#41) 和Angular升级 (#34)，我们需要把界面切分成一个个独立的组件(components)并赋予统一的名称，方便协作。

像这样：

• https://microsoft.github.io/YamUI
• http://react.carbondesignsystem.com/?selectedKind=TextInput&selectedStory=enabled&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Factions%2Factions-panel

这个 issue 用来划分和记录界面的组件，并定义它们的接口。

已划分出的组件

未完成，请在下面评论补充。

Name	Screenshot	Interface (设计师请忽略)
player-button 播放按钮		audioUrl (string) 音频文件地址 text (string) 按钮显示文字
idiom-main-display 条目主标题	无高亮: 有高亮:	text(array of string) 熟语文字 highlighted (array of object) 高亮部分的起止位置
menu-item 菜单项		text(array of string) 熟语文字
search-box 搜索框	idle: focused: focused, with text: filter on: filter on, with text: focused, filter on, with text:	searchText (string) 搜索关键字 filter (string) 过滤器
taxonomy-tag 分类标签		text(string) 标签文字
navbar-button 导航按钮		icon(string) 按钮图标 text(string) 按钮文字

[ztl8702]

我目前是按照现有的UI，进行切割（逆向工程）。有的组件未必合理，可以重新设计。

[ztl8702]

我们最好需要一个 Styleguide 的工具，也就是可以隔离每个元件单独设计和测试的平台。

React 有 Styleguidist 和 Storybook，都有相当的使用群体。

不过 Angular 有类似工具么？ 我未有找到合适的。

[ztl8702]

不过 Angular 有类似工具么？ 我未有找到合适的。

Storybook 现已支持 Angular 4+