Docs: fix markdown and remove console

Fix typo in layout demo code

CHANGELOG.md

@@ -4,14 +4,43 @@
 
 ---
 
-## 0.11.1 `2015-12-29`
+## 0.11.3 `fixing`
+
+- 修复 TimePicker 受控模式点选即关闭面板的问题。[#818](https://github.com/ant-design/ant-design/issues/818)
+- 修复一个两栏的 TimePicker 点击右边空白处无法关闭面板的问题。[#826](https://github.com/ant-design/ant-design/issues/826)
+- 修复 Table `pagination.onChange` 指定无效的问题。[#824](https://github.com/ant-design/ant-design/issues/824)
+- 修复 Transfer 搜索功能失效的问题。
+- 修复 DatePicker 的 MonthPicker 样式错乱的问题。
+- 修复二维码图标，新增一个扫描图标。[#772](https://github.com/ant-design/ant-design/issues/772)
+
+## 0.11.2
+
+`2015-01-03`
+
+- 新增了[贡献文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。
+- 修复一个 DatePicker 中选择的国际化文案问题。[#771](https://github.com/ant-design/ant-design/issues/771)
+- 增加了一个高级搜索类型表单的[演示](http://ant.design/components/form/#demo-advanced-search-form)。
+- Dropdown 支持多级的下拉菜单。[演示](http://ant.design/components/dropdown/#demo-sub-menu)
+- Table
+  - 新增 `rowSelection.onChange` 和 `rowSelection.selectedRowKeys`，完善选择功能。
+  - 更新 dataSource 时，选中项现在会被清空。
+  - 修复一个全选框和禁用的选择项配合的问题。
+- 修复 `0.11.1`版本 menu 内嵌型菜单（inline）选中后关闭的问题。
+- 修复 `0.11.1`版本对 React 版本要求太严的问题，对应的警告提示对于 `0.14.x` 将不再出现。
+- 组件和文档的样式小调整。
+
+## 0.11.1
+
+`2015-12-29`
 
 - 修复一个 Table 无法修改 pageSize 的问题。
 - 修复一个 Table 子表格展开的对齐问题。
 - 修复一个 Chrome 下部分图标左侧切边的问题。
 - 修复搜索输入框在表单下使用的样式问题。[#762](https://github.com/ant-design/ant-design/issues/762)
 
-## 0.11.0 `2015-12-28`
+## 0.11.0
+
+`2015-12-28`
 
 - **移除默认加载的样式文件，样式现在需要独立加载。**
 - 按钮圆角调整为 `6px`。
@@ -87,7 +116,17 @@
 
 > [0.11 升级指南](http://ant.design/docs/upgrade-notes#0-10-gt-0-11)
 
-## 0.10.4 `2015-11-30`
+---
+
+## 0.10.5
+
+`2016-01-04`
+
+- 修复 Table 更新 dataSource 后，选中项没有置空的问题。[#793](https://github.com/ant-design/ant-design/issues/793)
+
+## 0.10.4
+
+`2015-11-30`
 
 - 将 media-match 加入默认的 polyfill 文件中。[5626974](https://github.com/ant-design/ant-design/commit/562697423b1139eb324c1dceb051c143f4870ed7)
 - 修复了 [MonthPicker](http://ant.design/components/datepicker/#demo-month-picker) 报错问题，并增加了相关演示。
@@ -95,7 +134,9 @@
 - 修复今天是不可选日期时的一个展示问题。[#606](https://github.com/ant-design/ant-design/issues/606)
 
 
-## 0.10.3 `2015-11-26`
+## 0.10.3
+
+`2015-11-26`
 
 - 和 0.9.x 保持一致默认引入 `antd/lib/index.css`（而非 less 文件），方便第三方引用。引用 less 文件进行变量配置的可自行 `import 'antd/style/index.less'`。[#593](https://github.com/ant-design/ant-design/issues/593)
 - 升级 Pagination，增加 `defaultCurrent` 属性，修正原来的 `current` 为[完全受控属性](https://facebook.github.io/react/docs/forms.html#controlled-components)。
@@ -103,7 +144,9 @@
 - 对演示和样式代码增加了 lint 检查。
 
 
-## 0.10.2 `2015-11-25`
+## 0.10.2
+
+`2015-11-25`
 
 - Slider 新增 `tipFormatter` 用于格式化 Tooltip 的内容。
 - 优化 Badge 动画效果。
@@ -114,7 +157,9 @@
   - InputNumber 同时设置 `size` `className` 时会有冲突。
 
 
-## 0.10.1 `2015-11-20`
+## 0.10.1
+
+`2015-11-20`
 
 - 修改内部组件的引用结构，方便工具优化。[#566](https://github.com/ant-design/ant-design/pull/566)
   - 移除了演示中没有使用过的 `antd.ButtonGroup`，依然用 `const ButtonGroup = Button.Group` 来使用。
@@ -127,7 +172,9 @@
 - 修复 Datepicker 的 `style` 和 `calendarStyle` 属性失效的问题，并将 `calendarStyle` 更名为 `popupStyle`。
 
 
-## 0.10.0 `2015-11-20`
+## 0.10.0
+
+`2015-11-20`
 
 - 全面兼容 `react@0.14.x`。
 - 新增 [时间选择 Timepicker](http://ant.design/components/timepicker/)、[日历 Calendar](http://ant.design/components/calendar/)、[加载中 Spin](http://ant.design/components/spin/) 组件。
@@ -195,13 +242,18 @@
 > - [计划和推进 issue](https://github.com/ant-design/ant-design/issues/276)
 > - [0.10 升级指南](http://ant.design/docs/upgrade-notes#0-0-gt-0-10)
 
+---
 
-## 0.9.3 ~ 0.9.5 `2015-11-04`
+## 0.9.3 ~ 0.9.5
+
+`2015-11-04`
 
 * 增加对 React 版本的检测提示机制，0.9.x 序列只能使用 `react@~0.13.3`。
 
 
-## 0.9.2 `2015-10-26`
+## 0.9.2
+
+`2015-10-26`
 
 * Tooltip 的 title 为空时不展示浮层。[9b53117](https://github.com/ant-design/ant-design/commit/9b5311791e73270c7c16a602ac74dd59719a5f76)
 * 修复 Upload 文件列表链接的 target 属性。[340a170](https://github.com/ant-design/ant-design/commit/340a1702b6a7b065ac02d417c891e1886dfe470d)
@@ -209,7 +261,9 @@
 * 修复一些小的样式问题。
 
 
-## 0.9.1 `2015-09-26`
+## 0.9.1
+
+`2015-09-26`
 
 * 添加 Pagination pageSize 发生变化的回调。[#317](https://github.com/ant-design/ant-design/issues/317)
 * 升级依赖 rc-upload 到 1.6.x，修复 IE8/9 下的兼容性问题。
@@ -228,7 +282,9 @@
 * 部分组件交互和视觉效果修正。
 
 
-## 0.9.0 `2015-09-14`
+## 0.9.0
+
+`2015-09-14`
 
 * 新增 [timeline](components/timeline/) 和 [badge](components/badge/) 组件。
 * 优化弹出层类组件的动画效果，使其更加流畅。
@@ -267,7 +323,9 @@
   * 支持和 react-router 结合使用。
 
 
-## 0.8.0 `2015-08-25`
+## 0.8.0
+
+`2015-08-25`
 
 这个版本是第一个稳定版，组件经过三期迭代，基本到齐，并有大量改进和变化，不向下兼容。
 
@@ -279,12 +337,16 @@
 * 排查并修复 IE 和 safari 等浏览器的兼容问题。
 * 大量代码重构，演示代码补充，文档更新、以及样式上的优化。
 
-## 0.7.3 `2015-07-30`
+## 0.7.3
+
+`2015-07-30`
 
 * 小幅重构了 Table 分页，修复了分页导致的数据不展示的问题。
 * 更新了部分文档。
 
-## 0.7.2 `2015-07-27`
+## 0.7.2
+
+`2015-07-27`
 
 * 修复本地模式下 pagination 为 false 时数据无法显示的 [问题](https://github.com/ant-design/ant-design/commit/1954586665e59031eae5d2c8b2cdb08f83d64fcb)。
 * 重构了 message 组件。
@@ -292,14 +354,18 @@
 * 部分代码切换至 ES6 模式。
 * 修正了部分组件的样式和演示，优化部分动画。
 
-## 0.7.1 `2015-07-22`
+## 0.7.1
+
+`2015-07-22`
 
 * 修复了 Table 组件的 pagination 为 false 时分页未消失的 [问题](https://github.com/ant-design/ant-design/commit/01a6c0f1e6707b72a54ef30d073d148a87b391a8)。
 * select 组件[选中后默认显示标签内容](https://github.com/ant-design/ant-design/issues/50)（原来是显示 value）。
 * 修正了部分组件的样式和演示。
 * 打包文件为 [umd 模式](https://github.com/ant-design/ant-design/commit/9b7b940cb417429d8fc57d83e252991b043d0f2f)。
 
-## 0.7.0 `2015-07-21`
+## 0.7.0
+
+`2015-07-21`
 
 * 第一个公开版本，发布 `layout`、`iconfont`、`button`、`form`、`checkbox`、`radio`、`switch`、`slider`、`input-number`、`datepicker`、`select`、`tabs`、`steps`、`breadcrumb`、`collapse`、`pagination`、`modal`、`message`、`dropdown`、`popover`、`popconfirm`、`tooltip`、`progress`、`table` 等组件。
 * 发布 [Ant Design 首页](http://ant.design/) 和入门文档。

CONTRIBUTING.md

@@ -0,0 +1,52 @@
+# Contributing to Ant Design
+
+The following is a set of guidelines for contributing to Ant Design. Please spend several minutes in reading these guidelines before you create an issue or pull request.
+
+Anyway, these are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.
+
+
+## Do your homework before asking a question
+
+It's a great idea to read Eric Steven Raymond's [How To Ask Questions The Smart Way](http://www.catb.org/esr/faqs/smart-questions.html) twice before asking a question. But if you are busy now, I recommend to read [Don't post homework questions](http://www.catb.org/esr/faqs/smart-questions.html#homework) first.
+
+The following guidelines are about *How to avoid Homework Questions*.
+
+### 1. Read the documentation.
+
+It sad but true that someone just glance(not read) [Ant Design's documentation](http://ant.design/). Please read the documentation closely. What's more, you can modify and run our demo with [JSFiddle](http://jsfiddle.net/9zrstuto/70/). It's helpful to understand our documentation.
+
+Tips: choose the corresponding documentation with versions selector which in the bottom-right corner.
+
+### 2. Make sure that your question is about Ant Design, not React
+
+Someone may think all of the questions that he/she meets in developing are about Ant Design, but it's not true. So, please read [React's documentaion](http://facebook.github.io/react/docs/getting-started.html) or just Google(not Baidu, seriously) your questions with keywork *React* first. If you are sure that your question is about Ant Design, go ahead.
+
+### 3. Read the FAQ and search the issues list of Ant Design
+
+Your questions may be asked and solved by others. So please spend several minutes on searching. Remember [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself), both code and questions.
+
+P.S.
+1. [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
+1. [Issues list](https://github.com/ant-design/ant-design/issues)
+
+
+## Providing a demo while reporting a bug
+
+It would be helpful to provide a demo which can re-produce the bug 100%. Please fork this [Fiddle](http://jsfiddle.net/0dso5y0x/) and re-produce the bug you met. Then, create an issue like this [example](https://github.com/ant-design/ant-design/issues/new?title=%E8%AF%B7%E5%A1%AB%E5%86%99%E7%AE%80%E6%B4%81%E6%9C%89%E6%95%88%E7%9A%84%E6%A0%87%E9%A2%98&body=**%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0**%0A%0A%EF%BC%88%E6%8F%8F%E8%BF%B0%E4%B8%80%E4%B8%8B%E9%97%AE%E9%A2%98%EF%BC%89%0A%0A**%E5%8F%91%E7%94%9F%E7%8E%AF%E5%A2%83**%0A%0A-%20antd%20%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8F%8A%E7%89%88%E6%9C%AC%EF%BC%9A%0A-%20%E5%9C%A8%E7%BA%BF%E6%BC%94%E7%A4%BA%E5%9C%B0%E5%9D%80%EF%BC%9A%0A%0A**%E9%87%8D%E7%8E%B0%E6%AD%A5%E9%AA%A4**%0A%0A1.%20...%0A2.%20...%0A). The most important thing is: double check before claiming that you have found a bug.
+
+
+## Tips about Feature Request
+
+If you believe that Ant Design should provide some features, but it does not. You could create an issue to discuss. However, Ant Design is not Swiss Army Knife, there are some features which Ant Design will not support:
+
+1. Request or operate data
+
+
+## Tips about Pull Request
+
+It's welcomed to pull request. And there are some tips about that:
+
+1. It is a good habit to create a feature request issue to disscuss whether the feature is necessary before you implement it.
+1. Run `npm run lint` and fix those errors before committing in order to keep consistent code style.
+1. Rebase before creating a PR to keep commit history clear.
+1. Add some descriptions and refer relative issues for you PR.

README-zh_CN.md

@@ -44,9 +44,10 @@ import 'antd/lib/index.css';  // or 'antd/style/index.less'
 ## 链接
 
 - [首页](http://ant.design/)
-- [React UI 库](http://ant.design/docs/introduce)
+- [React UI 库](http://ant.design/docs/react/introduce)
 - [修改记录](CHANGELOG.md)
-- [构建调试工具](https://github.com/ant-tool/xtool/)
+- [开发脚手架](https://github.com/ant-design/antd-init/)
+- [本地调试工具集](https://github.com/dora-js/dora/)
 - [React 组件](http://react-component.github.io/)
 - [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
 - [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)

README.md

@@ -44,9 +44,10 @@ Normal browsers and Internet Explorer 8+.
 ## Links
 
 - [Home page](http://ant.design/)
-- [React UI library](http://ant.design/docs/introduce)
+- [React UI library](http://ant.design/docs/react/introduce)
 - [ChangeLog](CHANGELOG.md)
-- [Build/Debug tools](https://github.com/ant-tool/xtool/)
+- [Scaffold tool](https://github.com/ant-design/antd-init/)
+- [Debug tools set](https://github.com/dora-js/dora)
 - [React components](http://react-component.github.io/)
 - [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
 - [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)

components/checkbox/index.md

@@ -10,8 +10,8 @@
 
 ## 何时使用
 
-- 需要表示开关状态/两种状态之间的切换时；
-- 和 `switch`的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
+- 在一组可选项中进行多项选择时；
+- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
 
 ## API
 

components/date-picker/index.jsx

@@ -64,6 +64,7 @@ function createPicker(TheCalendar, defaultFormat) {
 
       const calendarClassName = classNames({
         ['ant-calendar-time']: this.props.showTime,
+        ['ant-calendar-month']: MonthCalendar === TheCalendar,
       });
 
       const calendar = (

components/date-picker/locale/en_US.js

@@ -5,7 +5,8 @@ import CalendarLocale from 'rc-calendar/lib/locale/en_US';
 // 统一合并为完整的 Locale
 let locale = objectAssign({}, GregorianCalendarLocale);
 locale.lang = objectAssign({
-  placeholder: 'Select a date'
+  placeholder: 'Select date',
+  timePlaceholder: 'Select time',
 }, CalendarLocale);
 
 // All settings at:

components/dropdown/demo/sub-menu.md

@@ -0,0 +1,29 @@
+# 多级菜单
+
+- order: 5
+
+传入的菜单里有多个层级。
+
+---
+
+````jsx
+import { Menu, Dropdown, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;
+
+const menu = <Menu>
+  <Menu.Item>第一个菜单项</Menu.Item>
+  <Menu.Item>第二个菜单项</Menu.Item>
+  <SubMenu title="子菜单">
+    <Menu.Item>第三个菜单项</Menu.Item>
+    <Menu.Item>第四个菜单项</Menu.Item>
+  </SubMenu>
+</Menu>;
+
+ReactDOM.render(
+  <Dropdown overlay={menu}>
+    <a className="ant-dropdown-link" href="#">
+      多级菜单 <Icon type="down" />
+    </a>
+  </Dropdown>
+, mountNode);
+````

components/dropdown/dropdown.jsx

@@ -9,8 +9,12 @@ export default React.createClass({
     };
   },
   render: function () {
+    const { overlay, ...otherProps } = this.props;
+    const menu = React.cloneElement(overlay, {
+      openTransitionName: 'zoom-big',
+    });
     return (
-      <Dropdown {...this.props} />
+      <Dropdown {...otherProps} overlay={menu} />
     );
   }
 });

components/form/FormItem.jsx

@@ -108,6 +108,7 @@ class FormItem extends React.Component {
     const itemClassName = {
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-compact`]: this._isCompact(props.children),
+      [`${prefixCls}-item-with-help`]: !!props.help,
     };
 
     return (

components/form/demo/advanced-search-form.md

@@ -0,0 +1,121 @@
+# 高级搜索
+
+- order: 10
+
+三列栅格式的表单排列方式，常用于数据表格的高级搜索。
+
+有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
+
+---
+
+````jsx
+import { Form, Input, Row, Col, Button } from 'antd';
+const FormItem = Form.Item;
+
+ReactDOM.render(
+<Form horizontal className="advanced-search-form">
+  <Row>
+    <Col span="8">
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="较长搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+    </Col>
+    <Col span="8">
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="较长搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+    </Col>
+    <Col span="8">
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="较长搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+      <FormItem
+        label="搜索名称："
+        labelCol={{span: 10}}
+        wrapperCol={{span: 14}}>
+        <Input placeholder="请输入搜索名称" />
+      </FormItem>
+    </Col>
+  </Row>
+  <Row>
+    <Col span="8" offset="16" style={{textAlign: 'right'}}>
+      <Button type="primary" htmlType="submit">搜索</Button>
+      <Button type="ghost">清除条件</Button>
+    </Col>
+  </Row>
+</Form>
+, mountNode);
+````
+
+````css
+/* 定制样式 */
+
+.advanced-search-form {
+  padding: 16px 8px;
+  background: #f8f8f8;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+}
+
+/* 由于输入标签长度不确定，所以需要微调使之看上去居中 */
+.advanced-search-form > .row {
+  margin-left: -10px;
+}
+
+.advanced-search-form > .row > .col-8 {
+  padding: 0 8px;
+}
+
+.advanced-search-form .ant-form-item {
+  margin-bottom: 16px;
+}
+
+.advanced-search-form .ant-btn + .ant-btn {
+  margin-left: 8px;
+}
+````
+
+<style>
+#components-form-demo-advanced-search-form .ant-form-horizontal {
+  max-width: none;
+}
+</style>

components/form/demo/mix.md

@@ -7,7 +7,8 @@
 ---
 
 ````jsx
-import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button, message, Row, Col } from 'antd';
+import { Form, Select, InputNumber, DatePicker, Switch,
+         Slider, Button, message, Row, Col, Upload, Icon } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 
@@ -28,6 +29,17 @@ const Demo = React.createClass({
     };
   },
 
+  handleUpload(info) {
+    if (info.file.status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (info.file.status === 'done') {
+      message.success(info.file.name + ' 上传成功。');
+    } else if (info.file.status === 'error') {
+      message.error(info.file.name + ' 上传失败。');
+    }
+  },
+
   handleSubmit(e) {
     e.preventDefault();
     message.success('收到表单值~~~ ：' + JSON.stringify(this.state.formData, function(k, v) {
@@ -105,6 +117,17 @@ const Demo = React.createClass({
             <DatePicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
           </Col>
         </FormItem>
+        <FormItem
+          label="logo图："
+          labelCol={{span: 8}}
+          wrapperCol={{span: 16}}
+          help="提示信息要长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长">
+          <Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
+            <Button type="ghost">
+              <Icon type="upload" /> 点击上传
+            </Button>
+          </Upload>
+        </FormItem>
         <Row>
           <Col span="16" offset="8">
             <Button type="primary" htmlType="submit">确定</Button>

components/form/demo/validate.md

@@ -76,7 +76,8 @@ ReactDOM.render(
     <FormItem
       label="Datepicker："
       labelCol={{span: 5}}
-      validateStatus="error">
+      validateStatus="error"
+      help>
       <Col span="6">
         <DatePicker />
       </Col>
@@ -90,6 +91,25 @@ ReactDOM.render(
         <p className="ant-form-explain">请输入正确选项</p>
       </Col>
     </FormItem>
+
+    <FormItem
+      label="Datepicker："
+      labelCol={{span: 5}}>
+      <Col span="6">
+        <FormItem validateStatus="error">
+          <DatePicker />
+          <p className="ant-form-explain">请输入正确选项</p>
+        </FormItem>
+      </Col>
+      <Col span="1">
+        <p className="ant-form-split">-</p>
+      </Col>
+      <Col span="6">
+        <FormItem>
+          <DatePicker />
+        </FormItem>
+      </Col>
+    </FormItem>
   </Form>
 , mountNode);
 ````

components/form/index.md

@@ -3,6 +3,7 @@
 - category: Components
 - chinese: 表单
 - type: 表单
+- cols: 1
 
 ---
 
@@ -86,3 +87,8 @@ Mixin：当表单控件的输入值改变时，更新 formData。
 </Input.Group>
 ```
 
+<style>
+.code-box-demo .ant-form-horizontal {
+  max-width: 540px;
+}
+</style>

components/icon/index.md

@@ -50,7 +50,6 @@
 ul.anticons-list {
   margin: 20px 0;
   list-style: none;
-  width: 120%;
   overflow: hidden;
 }
 ul.anticons-list li {
@@ -152,7 +151,7 @@ const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward'
 
 const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'minus-square', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];
 
-const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o'];
+const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading', 'smile-circle', 'meh-circle', 'frown-circle', 'tags-o', 'tag-o', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'aliwangwang', 'aliwangwang-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customerservice', 'qrcode', 'scan', 'like', 'dislike', 'message', 'pay-circle', 'pay-circle-o'];
 
 
 ReactDOM.render(<IconSet icons={icons1} />, document.getElementById('iconset-direction'));

components/layout/index.md

@@ -11,7 +11,7 @@
 
 ## 设计理念
 
-<div class="row demo-row" >
+<div class="row demo-row">
   <div class="col-24 demo-col demo-col-1">
     100%
   </div>

components/menu/demo/sider.md

@@ -35,7 +35,7 @@ const Sider = React.createClass({
           <Menu.Item key="2">选项2</Menu.Item>
         </MenuItemGroup>
         <MenuItemGroup title="分组2">
-          <Menu.Item key="3">选项3</Menu.Item>
+          <Menu.Item key="3"><a href="#">选项3</a></Menu.Item>
           <Menu.Item key="4">选项4</Menu.Item>
         </MenuItemGroup>
       </SubMenu>

components/menu/index.jsx

@@ -40,35 +40,43 @@ const AntMenu = React.createClass({
     this.props.onClose(e);
   },
   render() {
-    let openAnimation = '';
-    switch (this.props.mode) {
-    case 'horizontal':
-      openAnimation = 'slide-up';
-      break;
-    case 'vertical':
-      openAnimation = 'zoom-big';
-      break;
-    case 'inline':
-      openAnimation = animation;
-      break;
-    default:
+    let openAnimation = this.props.openAnimation || this.props.openTransitionName;
+    if (!openAnimation) {
+      switch (this.props.mode) {
+      case 'horizontal':
+        openAnimation = 'slide-up';
+        break;
+      case 'vertical':
+        openAnimation = 'zoom-big';
+        break;
+      case 'inline':
+        openAnimation = animation;
+        break;
+      default:
+      }
     }
 
-    // 这组属性的目的是
-    // 弹出型的菜单需要点击后立即关闭
-    // 另外，弹出型的菜单的受控模式没有使用场景
-    let props = {
-      openKeys: this.state.openKeys,
-      onClick: this.handleClick,
-      onOpen: this.handleOpenKeys,
-      onClose: this.handleCloseKeys,
-    };
+    let props = {};
     const className = this.props.className + ' ' + this.props.prefixCls + '-' + this.props.theme;
-    if (this.props.mode === 'inline') {
-      return <Menu {...this.props} className={className} openAnimation={openAnimation} />;
+    if (this.props.mode !== 'inline') {
+      // 这组属性的目的是
+      // 弹出型的菜单需要点击后立即关闭
+      // 另外，弹出型的菜单的受控模式没有使用场景
+      props = {
+        openKeys: this.state.openKeys,
+        onClick: this.handleClick,
+        onOpen: this.handleOpenKeys,
+        onClose: this.handleCloseKeys,
+        openTransitionName: openAnimation,
+        className,
+      };
     } else {
-      return <Menu {...this.props} {...props} className={className} openTransitionName={openAnimation} />;
+      props = {
+        openAnimation,
+        className,
+      };
     }
+    return <Menu {...this.props} {...props} />;
   }
 });
 

components/modal/Modal.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import Dialog from 'rc-dialog';
+import { Dom } from 'rc-util';
+import Button from '../button';
+
+function noop() {}
+
+let mousePosition;
+let mousePositionEventBinded;
+
+let AntModal = React.createClass({
+  getDefaultProps() {
+    return {
+      prefixCls: 'ant-modal',
+      onOk: noop,
+      onCancel: noop,
+      okText: '确定',
+      cancelText: '取消',
+      width: 520,
+      transitionName: 'zoom',
+      maskAnimation: 'fade',
+      confirmLoading: false,
+      visible: false
+    };
+  },
+
+  handleCancel() {
+    this.props.onCancel();
+  },
+
+  handleOk() {
+    this.props.onOk();
+  },
+
+  componentDidMount() {
+    if (mousePositionEventBinded) {
+      return;
+    }
+    // 只有点击事件支持从鼠标位置动画展开
+    Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) {
+      mousePosition = {
+        x: e.pageX,
+        y: e.pageY
+      };
+      // 20ms 内发生过点击事件，则从点击位置动画展示
+      // 否则直接 zoom 展示
+      // 这样可以兼容非点击方式展开
+      setTimeout(() => mousePosition = null, 20);
+    });
+    mousePositionEventBinded = true;
+  },
+
+  render() {
+    let props = this.props;
+    let defaultFooter = [
+      <Button key="cancel"
+        type="ghost"
+        size="large"
+        onClick={this.handleCancel}>
+        {props.cancelText}
+      </Button>,
+      <Button key="confirm"
+        type="primary"
+        size="large"
+        loading={props.confirmLoading}
+        onClick={this.handleOk}>
+        {props.okText}
+      </Button>
+    ];
+    let footer = props.footer || defaultFooter;
+    return <Dialog onClose={this.handleCancel} footer={footer} {...props}
+      visible={props.visible} mousePosition={mousePosition} />;
+  }
+});
+
+export default AntModal;

components/modal/confirm.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import Dialog from './index';
+import Dialog from './Modal';
 import Icon from '../icon';
 import Button from '../button';
 

components/modal/index.jsx

@@ -1,78 +1,5 @@
-import React from 'react';
-import Dialog from 'rc-dialog';
-import { Dom } from 'rc-util';
+import AntModal from './Modal';
 import confirm from './confirm';
-import Button from '../button';
-
-function noop() {}
-
-let mousePosition;
-let mousePositionEventBinded;
-
-let AntModal = React.createClass({
-  getDefaultProps() {
-    return {
-      prefixCls: 'ant-modal',
-      onOk: noop,
-      onCancel: noop,
-      okText: '确定',
-      cancelText: '取消',
-      width: 520,
-      transitionName: 'zoom',
-      maskAnimation: 'fade',
-      confirmLoading: false,
-      visible: false
-    };
-  },
-
-  handleCancel() {
-    this.props.onCancel();
-  },
-
-  handleOk() {
-    this.props.onOk();
-  },
-
-  componentDidMount() {
-    if (mousePositionEventBinded) {
-      return;
-    }
-    // 只有点击事件支持从鼠标位置动画展开
-    Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) {
-      mousePosition = {
-        x: e.pageX,
-        y: e.pageY
-      };
-      // 20ms 内发生过点击事件，则从点击位置动画展示
-      // 否则直接 zoom 展示
-      // 这样可以兼容非点击方式展开
-      setTimeout(() => mousePosition = null, 20);
-    });
-    mousePositionEventBinded = true;
-  },
-
-  render() {
-    let props = this.props;
-    let defaultFooter = [
-      <Button key="cancel"
-        type="ghost"
-        size="large"
-        onClick={this.handleCancel}>
-        {props.cancelText}
-      </Button>,
-      <Button key="confirm"
-        type="primary"
-        size="large"
-        loading={props.confirmLoading}
-        onClick={this.handleOk}>
-        {props.okText}
-      </Button>
-    ];
-    let footer = props.footer || defaultFooter;
-    return <Dialog onClose={this.handleCancel} footer={footer} {...props}
-      visible={props.visible} mousePosition={mousePosition} />;
-  }
-});
 
 AntModal.info = function (props) {
   props.iconClassName = 'info-circle';

components/pagination/index.md

@@ -19,15 +19,16 @@
 <Pagination onChange={onChange} total={50} />
 ```
 
-| 参数             | 说明                               | 类型     | 默认值         |
-|------------------|------------------------------------|----------|----------------|
-| current          | 当前页数                           | Number   | 无             |
-| defaultCurrent   | 默认的当前页数                     | Number   | 1              |
-| total            | 数据总数                           | Number   | 0              |
-| pageSize         | 每页条数                           | Number   | 10             |
-| onChange         | 页码改变的回调，参数是改变后的页码 | Function | noop           |
-| showSizeChanger  | 是否可以改变 pageSize              | Bool     | false          |
-| onShowSizeChange | pageSize 变化的回调                | Function | noop           |
-| showQuickJumper  | 是否可以快速跳转至某页             | Bool     | false          |
-| size             | 当为「small」时，是小尺寸分页      | String   | ""             |
-| simple           | 当添加该属性时，显示为简单分页     | Object   | 无             |
+| 参数             | 说明                               | 类型          | 默认值                   |
+|------------------|------------------------------------|---------------|--------------------------|
+| current          | 当前页数                           | Number        | 无                       |
+| defaultCurrent   | 默认的当前页数                     | Number        | 1                        |
+| total            | 数据总数                           | Number        | 0                        |
+| pageSize         | 每页条数                           | Number        | 10                       |
+| onChange         | 页码改变的回调，参数是改变后的页码 | Function      | noop                     |
+| showSizeChanger  | 是否可以改变 pageSize              | Bool          | false                    |
+| pageSizeOptions  | 指定每页可以显示多少条             | Array<String> | ['10', '20', '30', '40'] |
+| onShowSizeChange | pageSize 变化的回调                | Function      | noop                     |
+| showQuickJumper  | 是否可以快速跳转至某页             | Bool          | false                    |
+| size             | 当为「small」时，是小尺寸分页      | String        | ""                       |
+| simple           | 当添加该属性时，显示为简单分页     | Object        | 无                       |

components/select/demo/coordinate.md

@@ -43,10 +43,10 @@ const App = React.createClass({
       return <Option key={city}>{city}</Option>;
     });
     return <div>
-      <Select defaultValue={provinceData[0]} style={{width:150}} onChange={this.handleProvinceChange}>
+      <Select defaultValue={provinceData[0]} style={{width: 90}} onChange={this.handleProvinceChange}>
         {provinceOptions}
       </Select>
-      <Select value={this.state.secondCity} style={{width:150}} onChange={this.onSecondCityChange}>
+      <Select value={this.state.secondCity} style={{width: 90}} onChange={this.onSecondCityChange}>
         {cityOptions}
       </Select>
     </div>;

components/select/demo/search.md

@@ -16,6 +16,7 @@ function handleChange(value) {
 
 ReactDOM.render(
   <Select defaultValue="lucy" showSearch style={{width:200}}
+  notFoundContent="找不到呐！"
   searchPlaceholder="输入"
   onChange={handleChange}>
     <Option value="jack">jack</Option>

components/select/demo/tags.md

@@ -21,10 +21,10 @@ function handleChange(value) {
 }
 
 ReactDOM.render(
-  <Select
+  <Select tags
    style={{width: '100%'}}
    searchPlaceholder="标签模式"
-  tags onChange={handleChange}>
+    onChange={handleChange}>
     {children}
   </Select>
 , mountNode);

components/select/index.md

@@ -32,10 +32,10 @@
 | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无   |
 | onDeselect | 取消选中时调用，参数为选中项的 option value 值，仅在 multiple 或 tags 模式下生效 |  function(value, option) | 无   |
 | onChange | 选中option，或input的value变化(combobox 模式下)时，调用此函数 | function(value, label) | 无 |
-| allowClear | 显示清除按钮 | boolean | false |
 | onSearch | 文本框值变化时回调 | function(value: String) |  |
 | placeholder | 选择框默认文字 | string | 无 |
 | searchPlaceholder | 搜索框默认文字 | string | 无 |
+| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
 | optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
 | combobox | 输入框自动提示模式 | boolean | false |

components/table/demo/paging.md

@@ -39,6 +39,9 @@ const pagination = {
   showSizeChanger: true,
   onShowSizeChange: function(current, pageSize) {
     console.log('Current: ', current, '; PageSize: ', pageSize);
+  },
+  onChange: function(current) {
+    console.log('Current: ', current);
   }
 };
 

components/table/demo/row-selection-and-operation.md

@@ -0,0 +1,75 @@
+# 选择和操作
+
+- order: 2
+
+选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。
+
+不支持跨页选择，选中项只限当页，换页后将会清空。
+
+---
+
+````jsx
+import { Table, Button } from 'antd';
+
+const columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+}, {
+  title: '住址',
+  dataIndex: 'address',
+}];
+
+const data = [];
+for (let i = 0; i < 46; i++) {
+  data.push({
+    key: i,
+    name: '李大嘴' + i,
+    age: 32,
+    address: '西湖区湖底公园' + i + '号'
+  });
+}
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      selectedRowKeys: [],
+      loading: false,
+    };
+  },
+  start() {
+    this.setState({ loading: true });
+    // 模拟 ajax 请求，完成后清空
+    setTimeout(() => {
+      this.setState({
+        selectedRowKeys: [],
+        loading: false,
+      });
+    }, 1000);
+  },
+  onSelectChange(selectedRowKeys) {
+    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+    this.setState({ selectedRowKeys });
+  },
+  render() {
+    const { loading, selectedRowKeys } = this.state;
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: this.onSelectChange,
+    };
+    const hasSelected = selectedRowKeys.length > 0;
+    return <div>
+      <div style={{marginBottom: 16}}>
+         <Button type="primary" onClick={this.start}
+           disabled={!hasSelected} loading={loading}>操作</Button>
+         <span style={{marginLeft: 8}}>{hasSelected ? `选择了 ${selectedRowKeys.length} 个对象` : ''}</span>
+      </div>
+      <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
+    </div>;
+  }
+});
+
+ReactDOM.render(<App />, mountNode);
+````

components/table/demo/row-selection-props.md

@@ -1,6 +1,6 @@
-# 默认选择
+# 选择框属性
 
-- order: 2
+- order: 3
 
 配置选择框的默认属性。
 
@@ -47,12 +47,15 @@ const rowSelection = {
       disabled: record.name === '胡彦祖'    // 配置无法勾选的列
     };
   },
+  onChange(selectedRowKeys) {
+    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+  },
   onSelect: function(record, selected, selectedRows) {
     console.log(record, selected, selectedRows);
   },
   onSelectAll: function(selected, selectedRows) {
     console.log(selected, selectedRows);
-  }
+  },
 };
 
 ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

components/table/demo/row-selection-radio-props.md

@@ -1,65 +0,0 @@
-# 单选
-
-- order: 4
-
-配置单选框的默认属性。
-
----
-
-````jsx
-import { Table } from 'antd';
-
-const columns = [{
-  title: '姓名',
-  dataIndex: 'name',
-  render: function(text) {
-    return <a href="#">{text}</a>;
-  }
-}, {
-  title: '年龄',
-  dataIndex: 'age'
-}, {
-  title: '住址',
-  dataIndex: 'address'
-}];
-const data = [{
-  id: '1',
-  name: '胡彦斌',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}, {
-  id: '2',
-  name: '胡彦祖',
-  age: 42,
-  address: '西湖区湖底公园1号'
-}, {
-  id: '3',
-  name: '李大嘴',
-  age: 32,
-  address: '西湖区湖底公园1号'
-}];
-
-// 通过 rowSelection 对象表明需要行选择
-const rowSelection = {
-  type: 'radio',
-  getCheckboxProps: function(record) {
-    return {
-      defaultChecked: record.name === '李大嘴', // 配置默认勾选的列
-      disabled: record.name === '胡彦祖'    // 配置无法勾选的列
-    };
-  },
-  onSelect: function(record, selected, selectedRows) {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll: function(selected, selectedRows) {
-    console.log(selected, selectedRows);
-  }
-};
-
-function rowKey(record) {
-  return record.id;
-}
-
-ReactDOM.render(<Table rowSelection={rowSelection} rowKey={rowKey} columns={columns} dataSource={data} />
-, mountNode);
-````

components/table/demo/row-selection.md

@@ -41,6 +41,9 @@ const data = [{
 
 // 通过 rowSelection 对象表明需要行选择
 const rowSelection = {
+  onChange(selectedRowKeys) {
+    console.log('selectedRowKeys changed: ' + selectedRowKeys);
+  },
   onSelect: function(record, selected, selectedRows) {
     console.log(record, selected, selectedRows);
   },

components/table/demo/size.md

@@ -1,4 +1,4 @@
-# 中小型列表
+# 紧凑型
 
 - order: 9
 

components/table/index.jsx

@@ -19,21 +19,27 @@ const defaultLocale = {
   emptyText: '暂无数据',
 };
 
+const defaultPagination = {
+  pageSize: 10,
+  current: 1,
+  onChange: noop,
+  onShowSizeChange: noop,
+};
+
 let AntTable = React.createClass({
   getInitialState() {
     return {
       // 减少状态
-      selectedRowKeys: [],
+      selectedRowKeys: this.props.selectedRowKeys || [],
       filters: {},
       selectionDirty: false,
       sortColumn: '',
       sortOrder: '',
       sorter: null,
       radioIndex: null,
-      pagination: this.hasPagination() ? objectAssign({
-        pageSize: 10,
-        current: 1
-      }, this.props.pagination) : {}
+      pagination: this.hasPagination() ?
+        objectAssign({}, defaultPagination, this.props.pagination) :
+        {},
     };
   },
 
@@ -67,19 +73,12 @@ let AntTable = React.createClass({
   },
 
   getDefaultSelection() {
-    let selectedRowKeys = [];
-    if (this.props.rowSelection && this.props.rowSelection.getCheckboxProps) {
-      let data = this.getCurrentPageData();
-      data.filter((item) => {
-        if (this.props.rowSelection.getCheckboxProps) {
-          return this.props.rowSelection.getCheckboxProps(item).defaultChecked;
-        }
-        return true;
-      }).map((record, rowIndex) => {
-        selectedRowKeys.push(this.getRecordKey(record, rowIndex));
-      });
+    if (!this.props.rowSelection || !this.props.rowSelection.getCheckboxProps) {
+      return [];
     }
-    return selectedRowKeys;
+    return this.getCurrentPageData()
+      .filter(item => this.props.rowSelection.getCheckboxProps(item).defaultChecked)
+      .map((record, rowIndex) => this.getRecordKey(record, rowIndex));
   },
 
   componentWillReceiveProps(nextProps) {
@@ -88,22 +87,29 @@ let AntTable = React.createClass({
         pagination: objectAssign({}, this.state.pagination, nextProps.pagination)
       });
     }
-    // 外界只有 dataSource 的变化会触发新请求
+    // dataSource 的变化会清空选中项
     if ('dataSource' in nextProps &&
         nextProps.dataSource !== this.props.dataSource) {
-      let selectedRowKeys = this.state.selectedRowKeys;
-      // 把不在当前页的选中项去掉
-      let currentPageRowKeys =
-        this.getCurrentPageData(nextProps.dataSource).map(
-          (record, i) => this.getRecordKey(record, i)
-        );
-      selectedRowKeys = selectedRowKeys.filter((key) => {
-        return currentPageRowKeys.indexOf(key) >= 0;
-      });
       this.setState({
         selectionDirty: false,
-        selectedRowKeys,
       });
+      this.setSelectedRowKeys([]);
+    }
+    if (nextProps.rowSelection &&
+        'selectedRowKeys' in nextProps.rowSelection) {
+      this.setState({
+        selectedRowKeys: nextProps.rowSelection.selectedRowKeys || [],
+      });
+    }
+  },
+
+  setSelectedRowKeys(selectedRowKeys) {
+    if (this.props.rowSelection &&
+        !('selectedRowKeys' in this.props.rowSelection)) {
+      this.setState({ selectedRowKeys });
+    }
+    if (this.props.rowSelection && this.props.rowSelection.onChange) {
+      this.props.rowSelection.onChange(selectedRowKeys);
     }
   },
 
@@ -159,20 +165,17 @@ let AntTable = React.createClass({
       }
     });
     const newState = {
-      selectedRowKeys: [],
       selectionDirty: false,
       filters
     };
     this.setState(newState);
+    this.setSelectedRowKeys([]);
     this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
   },
 
   handleSelect(record, rowIndex, e) {
-    let checked = e.target.checked;
-    let defaultSelection = [];
-    if (!this.state.selectionDirty) {
-      defaultSelection = this.getDefaultSelection();
-    }
+    const checked = e.target.checked;
+    const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
     let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
     let key = this.getRecordKey(record, rowIndex);
     if (checked) {
@@ -183,9 +186,9 @@ let AntTable = React.createClass({
       });
     }
     this.setState({
-      selectedRowKeys: selectedRowKeys,
-      selectionDirty: true
+      selectionDirty: true,
     });
+    this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelect) {
       let data = this.getCurrentPageData();
       let selectedRows = data.filter((row, i) => {
@@ -196,19 +199,16 @@ let AntTable = React.createClass({
   },
 
   handleRadioSelect: function (record, rowIndex, e) {
-    let checked = e.target.checked;
-    let defaultSelection = [];
-    if (!this.state.selectionDirty) {
-      defaultSelection = this.getDefaultSelection();
-    }
+    const checked = e.target.checked;
+    const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
     let selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
     let key = this.getRecordKey(record, rowIndex);
     selectedRowKeys = [key];
     this.setState({
-      selectedRowKeys: selectedRowKeys,
       radioIndex: key,
-      selectionDirty: true
+      selectionDirty: true,
     });
+    this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelect) {
       let data = this.getCurrentPageData();
       let selectedRows = data.filter((row, i) => {
@@ -219,20 +219,31 @@ let AntTable = React.createClass({
   },
 
   handleSelectAllRow(e) {
-    let checked = e.target.checked;
-    let data = this.getCurrentPageData();
-    let selectedRowKeys = checked ? data.filter((item) => {
-      if (this.props.rowSelection.getCheckboxProps) {
-        return !this.props.rowSelection.getCheckboxProps(item).disabled;
-      }
-      return true;
-    }).map((item, i) => {
-      return this.getRecordKey(item, i);
-    }) : [];
+    const checked = e.target.checked;
+    const data = this.getCurrentPageData();
+    const defaultSelection = this.state.selectionDirty ? [] : this.getDefaultSelection();
+    const selectedRowKeys = this.state.selectedRowKeys.concat(defaultSelection);
+    const changableRowKeys = data.filter(item =>
+      !this.props.rowSelection.getCheckboxProps ||
+      !this.props.rowSelection.getCheckboxProps(item).disabled
+    ).map((item, i) => this.getRecordKey(item, i));
+    if (checked) {
+      changableRowKeys.forEach(key => {
+        if (selectedRowKeys.indexOf(key) < 0) {
+          selectedRowKeys.push(key);
+        }
+      });
+    } else {
+      changableRowKeys.forEach(key => {
+        if (selectedRowKeys.indexOf(key) >= 0) {
+          selectedRowKeys.splice(selectedRowKeys.indexOf(key), 1);
+        }
+      });
+    }
     this.setState({
-      selectedRowKeys: selectedRowKeys,
-      selectionDirty: true
+      selectionDirty: true,
     });
+    this.setSelectedRowKeys(selectedRowKeys);
     if (this.props.rowSelection.onSelectAll) {
       let selectedRows = data.filter((row, i) => {
         return selectedRowKeys.indexOf(this.getRecordKey(row, i)) >= 0;
@@ -248,13 +259,14 @@ let AntTable = React.createClass({
     } else {
       pagination.current = pagination.current || 1;
     }
+    pagination.onChange(pagination.current);
+
     const newState = {
-      // 防止内存泄漏，只维持当页
-      selectedRowKeys: [],
       selectionDirty: false,
       pagination
     };
     this.setState(newState);
+    this.setSelectedRowKeys([]);
     this.props.onChange.apply(this, this.prepareParamsArguments(objectAssign({}, this.state, newState)));
   },
 
@@ -333,7 +345,14 @@ let AntTable = React.createClass({
           className: 'ant-table-selection-column'
         };
       } else {
-        let checkboxAll = <Checkbox checked={checked} onChange={this.handleSelectAllRow}/>;
+        const checkboxAllDisabled = data.every(item =>
+          this.props.rowSelection.getCheckboxProps &&
+          this.props.rowSelection.getCheckboxProps(item).disabled);
+        const checkboxAll = (
+            <Checkbox checked={checked}
+                      disabled={checkboxAllDisabled}
+                      onChange={this.handleSelectAllRow} />
+        );
         selectionColumn = {
           key: 'selection-column',
           title: checkboxAll,
@@ -412,9 +431,7 @@ let AntTable = React.createClass({
 
   handleShowSizeChange(current, pageSize) {
     const pagination = this.state.pagination;
-    if (pagination.onShowSizeChange) {
-      pagination.onShowSizeChange(current, pageSize);
-    }
+    pagination.onShowSizeChange(current, pageSize);
 
     let nextPagination = objectAssign(pagination, {
       pageSize: pageSize

components/table/index.md

@@ -42,7 +42,7 @@ const columns = [{
 }, {
   title: '住址',
   dataIndex: 'address',
-  key: 'age',
+  key: 'address',
 }];
 
 <Table dataSource={dataSource} columns={columns} />
@@ -54,9 +54,9 @@ const columns = [{
 
 ### Table
 
-| 参数          | 说明                     | 类型            |  可选值             | 默认值  |
+| 参数           | 说明                     | 类型             |  可选值              | 默认值   |
 |---------------|--------------------------|-----------------|---------------------|---------|
-| rowSelection  | 列表项是否可选择         | Object          |                     | false   |
+| rowSelection  | 列表项是否可选择         | Object          |  [配置项](#rowSelection)   | null   |
 | pagination    | 分页器                   | Object   | 配置项参考 [pagination](/components/pagination)，设为 false 时不显示分页 |         |
 | size          | 正常或迷你类型           | String          | `default` or `small`| default |
 | dataSource    | 数据数组                 | Array           |                     |         |
@@ -87,6 +87,20 @@ const columns = [{
 | width      | 列宽度 | String or Number |                                        | 无      |
 | className  | 列的 className             | String          |                     | 无      |
 
+### rowSelection
+
+选择功能的配置。
+
+| 参数              | 说明                     | 类型             |  默认值   |
+|------------------|--------------------------|-----------------|---------------------|---------|
+| type | 多选/单选，`checkbox` or `radio` | String | `checkbox`  |
+| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | Array | []  |
+| onChange | 选中项发生变化的时的回调，用户手动点选、换页、更新数据均会触发 | Function(selectedRowKeys) | -   |
+| getCheckboxProps | 选择框的默认属性配置        | Function(record) |  -   |
+| onSelect | 用户手动选择/取消选择某列的回调         | Function(record, selected, selectedRows) |   -   |
+| onSelectAll | 用户手动选择/取消选择所有列的回调    | Function(record, selected, selectedRows) |   -   |
+
+
 ## 注意
 
 按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。

components/time-picker/index.jsx

@@ -15,7 +15,6 @@ const AntTimePicker = React.createClass({
       align: {
         offset: [0, -2],
       },
-      open: false,
       disabled: false,
       disabledHours: undefined,
       disabledMinutes: undefined,

components/transfer/list.jsx

@@ -78,6 +78,22 @@ class TransferList extends Component {
       [prefixCls + '-with-footer']: !!footerDom,
     });
 
+    const showItems = dataSource.map((item) => {
+      // apply filter
+      const itemText = this.props.render(item);
+      const filterResult = this.matchFilter(itemText, filter);
+      const renderedText = this.props.render(item);
+
+      if (filterResult) {
+        return (
+          <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
+            <Checkbox checked={checkedKeys.some(key => key === item.key)} />
+            {renderedText}
+          </li>
+        );
+      }
+    }).filter(item => !!item);
+
     return <div className={listCls} {...this.props}>
       <div className={`${prefixCls}-header`}>
         {this.renderCheckbox({
@@ -96,24 +112,7 @@ class TransferList extends Component {
         <Animate component="ul"
           transitionName={this.state.mounted ? `${prefixCls}-highlight` : ''}
           transitionLeave={false}>
-          {dataSource.length > 0 ?
-            dataSource.map((item) => {
-              // apply filter
-              const itemText = this.props.render(item);
-              const filterResult = this.matchFilter(itemText, filter);
-
-              const renderedText = this.props.render(item);
-
-              if (filterResult) {
-                return (
-                  <li onClick={this.handleSelect.bind(this, item)} key={item.key} title={renderedText}>
-                    <Checkbox checked={checkedKeys.some(key => key === item.key)} />
-                    {renderedText}
-                  </li>
-                );
-              }
-            }) : <div className={`${prefixCls}-body-not-found`}>Not Found</div>
-          }
+          {showItems.length > 0 ? showItems : <div className={`${prefixCls}-body-not-found`}>Not Found</div>}
         </Animate>
       </div>}
       { footerDom ? <div className={`${prefixCls}-footer`}>

components/transfer/search.jsx

@@ -12,13 +12,18 @@ class Search extends Component {
     this.props.onChange(e);
   }
 
+  handleClear(e) {
+    e.preventDefault();
+    this.props.handleClear(e);
+  }
+
   render() {
     const {placeholder, value, prefixCls} = this.props;
     return <div>
       <input placeholder={placeholder} className={ prefixCls + ' ant-input' } value={ value } ref="input"
              onChange={this.handleChange.bind(this)}/>
       { value && value.length > 0 ?
-        <a href="javascirpt:;" className={ prefixCls + '-action' } onClick={this.props.handleClear}>
+        <a href="#" className={ prefixCls + '-action' } onClick={this.handleClear.bind(this)}>
           <Icon type="cross-circle" />
         </a>
         : <span className={ prefixCls + '-action' }><Icon type="search" /></span>
@@ -30,12 +35,14 @@ class Search extends Component {
 Search.defaultProps = {
   placeholder: '请输入搜索内容',
   onChange: noop,
+  handleClear: noop,
 };
 
 Search.propTypes = {
   prefixCls: PropTypes.string,
   placeholder: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  handleClear: PropTypes.func,
 };
 
 export default Search;

components/tree/index.md

@@ -19,11 +19,13 @@
 |multiple | 是否支持多选 | bool | false |
 |checkable | 是否支持选中 | bool   | false    |
 |defaultExpandAll | 设置展开所有树节点 | bool | false |
-|defaultExpandedKeys | 展开指定的树节点 | String[] | false |
+|defaultExpandedKeys | 默认展开指定的树节点 | String[] | [] |
 |defaultCheckedKeys | 默认选中复选框的树节点 | String[] | [] |
 |defaultSelectedKeys | 默认选中的树节点 | String[] | [] |
+|checkedKeys | 设置选中复选框的树节点 | String[] | - |
+|selectedKeys | 设置选中的树节点 | String[] | - |
 |onCheck | 点击树节点或复选框触发 | function(e:{checked:bool,node,checkedKeys,event}) | - |
-|onSelect | 点击树节点触发 | function(e:{checked:bool,node,checkedKeys,event}) | - |
+|onSelect | 点击树节点触发 | function(e:{selected:bool,node,selectedKeys,event}) | - |
 |onDataLoaded | 异步加载数据 | function(node)| - |
 
 ### TreeNode props

components/upload/demo/drag-simple.md

@@ -1,32 +0,0 @@
-# 拖拽上传
-
-- order: 4
-
-样式简单一些。
-
----
-
-````jsx
-import { Upload, Icon } from 'antd';
-const Dragger = Upload.Dragger;
-
-const props = {
-  name: 'file',
-  showUploadList: false,
-  action: '/upload.do'
-};
-
-ReactDOM.render(
-  <Dragger {...props}>
-    <Icon type="plus" />
-  </Dragger>,
-  mountNode
-);
-````
-
-````css
-#components-upload-demo-drag-simple {
-  width: 246px;
-  height: 146px;
-}
-````

components/upload/demo/drag.md

@@ -13,23 +13,25 @@ const Dragger = Upload.Dragger;
 const props = {
   name: 'file',
   showUploadList: false,
-  action: '/upload.do'
+  action: '/upload.do',
 };
 
 ReactDOM.render(
-  <Dragger {...props}>
-    <p className="ant-upload-drag-icon">
-      <Icon type="inbox" />
-    </p>
-    <p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
-    <p className="ant-upload-hint">支持单个或批量上传，严禁上传公司内部资料及其他违禁文件</p>
-  </Dragger>,
-  mountNode
-);
-````
-
-````css
-#components-upload-demo-drag {
-  height: 180px;
-}
+<div>
+  <div style={{ width: 246, height: 140 }}>
+    <Dragger {...props}>
+      <Icon type="plus" />
+    </Dragger>
+  </div>
+  <div style={{ marginTop: 16, height: 180 }}>
+    <Dragger {...props}>
+      <p className="ant-upload-drag-icon">
+        <Icon type="inbox" />
+      </p>
+      <p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
+      <p className="ant-upload-hint">支持单个或批量上传，严禁上传公司内部资料及其他违禁文件</p>
+    </Dragger>
+  </div>
+</div>
+, mountNode);
 ````

components/upload/demo/multiple.md

@@ -1,6 +1,7 @@
 # 多文件选择
 
 - order: 5
+- hidden: 5
 
 按住 ctrl 可选择多个文件，`ie10+` 支持。
 

components/upload/demo/picture-style.md

@@ -4,7 +4,7 @@
 
 上传文件为图片，可展示本地缩略图。
 
-`IE8/9` 不支持浏览器本地缩略图展示([ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL))，可以写 `thumbUrl` 属性来代替。
+`IE8/9` 不支持浏览器本地缩略图展示（[Ref](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)），可以写 `thumbUrl` 属性来代替。
 
 ---
 
@@ -30,10 +30,28 @@ const props = {
 };
 
 ReactDOM.render(
+<div>
   <Upload {...props}>
     <Button type="ghost">
       <Icon type="upload" /> 点击上传
     </Button>
   </Upload>
+  <br />
+  <br />
+  <Upload {...props} className="upload-list-inline">
+    <Button type="ghost">
+      <Icon type="upload" /> 点击上传
+    </Button>
+  </Upload>
+</div>
 , mountNode);
 ````
+
+````css
+/* 加几行样式将上传项变成平铺样式 */
+.upload-list-inline .ant-upload-list-item {
+  display: inline-block;
+  width: 200px;
+  margin-right: 8px;
+}
+````

components/upload/index.md

@@ -24,7 +24,7 @@
 | action     | 必选参数, 上传的地址                                         | String      | 无    |
 | data       | 可选参数, 上传所需参数                                       | Object      | 无    |
 | showUploadList | 可选参数, 是否展示 uploadList, 默认开启                  | Boolean     | true  |
-| multiple   | 可选参数, 是否支持多选文件，支持 `ie10+`                     | Boolean     | false |
+| multiple   | 可选参数, 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。  | Boolean     | false |
 | accept     | 可选参数, 接受上传的文件类型, 详见 input accept Attribute    | String      | 无    |
 | beforeUpload | 可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 `false` 或者 Promise 则停止上传。**注意：该方法不支持老 IE**。 | Function    | 无    |
 | onChange   | 可选参数, 上传文件改变时的状态，详见 onChange                | Function    | 无    |

docs/pattern/advanced-search.md

@@ -0,0 +1,56 @@
+# 高级搜索
+
+- category: 6
+- order: 6
+
+---
+
+借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
+
+## 常规型
+
+### 交互
+
+<img class="preview-img" align="right" alt="交互示例" description="在收起状态时，用户点击『高级搜索』展开；如果此前用户已经输入过文案，需要将值带到对应的输入框中。" src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">
+
+常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
+
+『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击『高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
+
+<br>
+
+<img class="preview-img" align="right" alt="交互示例" description="在『高级搜索』顶部放置 Alert ，用于展现已经输入的值；用户点击『清空』可以清空所有输入值；点击『高级搜索』可以再次展开『高级搜索』。" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
+
+当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。
+
+### 排列规则
+
+<img class="preview-img" align="right" alt="排列示例" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
+
+搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
+
+### 规格
+
+<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
+
+<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
+
+- 横向排版
+
+  在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
+
+- 纵向排版
+
+  使用 `16px` 作为间距。
+
+
+## 字段型
+
+### 交互
+
+<img class="preview-img" align="right" alt="交互示例" src="https://os.alipayobjects.com/rmsportal/dWLomHNPHuTZHGN.png">
+
+字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
+
+
+## 案例（敬请期待）

docs/pattern/complex-table.md

@@ -0,0 +1,52 @@
+# 表格：复杂数据
+
+- category: 5
+- order: 5
+
+---
+
+表格也用于展示复杂和高度结构化数据。
+
+## 案例
+
+### 多列数据
+
+<img class="preview-img" align="right" alt="多列数据示例" src="https://os.alipayobjects.com/rmsportal/QZGYpJVtsTwFPmj.png">
+
+通过按钮，可实现更多列数据的加载以及左右切换。
+
+<br>
+
+<img class="preview-img" align="right" alt="自定义列示例" src="https://os.alipayobjects.com/rmsportal/zWUjQRpJZhYsZbY.png">
+
+提供用户自定义列的功能，方便用户查看需要的列。
+
+<br>
+
+<img class="preview-img" align="right" alt="横向滚动示例" src="https://os.alipayobjects.com/rmsportal/UOTwZLweENvwlnL.png">
+
+固定表头列，通过横向滚动条来查看剩余内容。
+
+### 带图标的表格
+
+<img class="preview-img" align="right" alt="带图标表格示例" src="https://os.alipayobjects.com/rmsportal/OWEXWoGlsqyhVBB.png">
+
+通过图标强化信息的传递，适用在表达数据变化趋势。
+
+### 带图表的表格
+
+<img class="preview-img" align="right" alt="带图表表格示例" src="https://os.alipayobjects.com/rmsportal/znVwTXxQpXuVqPl.png">
+
+通过图表来强化信息的传递，适用在表达数据变化趋势。
+
+### 二维表格
+
+<img class="preview-img" align="right" alt="二维表格示例" src="https://os.alipayobjects.com/rmsportal/RQvqwEkXpHaFago.png">
+
+横向和纵向各一个标题来展现数据。
+
+### 小表格
+
+<img class="preview-img" align="right" alt="小表格示例" src="https://os.alipayobjects.com/rmsportal/dMxxUThciHFQyXS.png">
+
+适用在卡片、弹出框等空间较小的场景中。

docs/pattern/form.md

@@ -0,0 +1,163 @@
+# 表单
+
+- category: 2
+- order: 2
+
+---
+
+作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。
+
+设计者进行表单设计时，应当注意这几点：
+
+1. 确保用户了解要提供什么信息，以及为什么要提供这些信息。
+
+  为初级用户／偶尔访问的用户提供白话作为『标签』；为领域专家提供专业术语作为『标签』。当需要用户提供敏感信息时，通过『输入提示』来说明系统为什么要这么做，eg：需要获取身份证号码、手机号码时。
+
+2. 让用户能在上下文中获取信息，帮助他完成输入。
+
+  使用『良好的默认值』、『结构化的格式』、『输入提示』、『输入提醒』等方式，避免让用户在空白中完成输入。
+
+3. 对错误敏感，并尽可能宽容。
+
+  通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误；依据『容错格式』，允许用户以多种格式和语法输入，eg：用户在电话号码输入框中多输入了一个空格，系统存储时可以主动删掉空格，但是不需要告诉用户这是一个错误。
+
+4. 不要提出不必要的问题。
+
+## 内容
+
+<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
+
+通常表单会有四个部分组成。
+
+1. 标签
+2. 输入框
+3. 校验反馈
+4. 动作
+
+> 注：`*` 表明该项为必填项。
+
+## 交互
+
+### 填空
+
+<img class="preview-img" align="right" alt="填空示例" src="https://os.alipayobjects.com/rmsportal/SdzCTaevNMvJFBR.png">
+
+在一种描述性的上下文中出现输入项，可以帮助用户理解当前的状况，以及需要提供什么数据。
+
+### 组合输入框
+
+<img class="preview-img" align="right" alt="组合输入框示例" src="https://os.alipayobjects.com/rmsportal/waStvhMnuoqqsCE.png">
+
+当两个输入框关联性很强时，可以前后拼接，减少页面空间。
+
+### 对齐方式
+
+<img class="preview-img" align="right" alt="对齐方式示例" src="https://os.alipayobjects.com/rmsportal/cjHTEtXFxUSdHnE.png">
+
+在页面设计表单时，按钮组必须和输入框左对齐。
+
+### 禁用主按钮
+
+当输入框非常少时（一般少于 3 个），如果用户没有在必填项中输入内容，可禁用『提交』等主按钮；当输入框非常多时（超过 5 项以上），不建议禁用主按钮。
+
+<br>
+
+<img class="preview-img" align="right" alt="未达字符标准时，主按钮禁用状态" src="https://os.alipayobjects.com/rmsportal/VabHKlbouFxSQXz.png">
+
+<img class="preview-img" align="right" alt="达到字符标准时，主按钮可用状态" src="https://os.alipayobjects.com/rmsportal/usdFxJmWDawqUuq.png">
+
+当输入框非常少时，用户一输入就会有反馈，因而主按钮的禁用规则非常清晰，容易被用户理解。
+
+<br>
+
+<img class="preview-img" align="right" alt="不禁用示例" src="https://os.alipayobjects.com/rmsportal/GwZhvOuXmwqUIUW.png">
+
+当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。
+
+### 结构化的格式
+
+<img class="preview-img" align="right" alt="结构化的格式示例" src="https://os.alipayobjects.com/rmsportal/SQgGfreRAqPZPsm.png">
+
+用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。
+
+### 输入提示 & 输入提醒
+
+<img class="preview-img" align="right" alt="输入提示示例" description="在输入框激活后，输入提示一直出现至该输入框失去焦点。" src="https://os.alipayobjects.com/rmsportal/cTlmdEprGSzMZfs.png">
+<img class="preview-img" align="right" alt="输入提醒示例" description="在输入框激活后，输入提醒不要马上消失，等用户完成第一个词输入后再消失。" src="https://os.alipayobjects.com/rmsportal/QPhvLWfMbLTvjRw.png">
+
+输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。
+
+输入提醒：提醒用户该控件的目的或所需格式，由于在用户输入后提醒就会消失，所以适用在用户对内容比较熟悉时。
+
+### 密码加强计
+
+<img class="preview-img" align="right" alt="密码强度示例" src="https://os.alipayobjects.com/rmsportal/wKpOgeyyoOUeCrk.png">
+
+提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。
+
+### 校验
+
+<img class="preview-img" align="right" description="输入时的实时校验。" src="https://os.alipayobjects.com/rmsportal/urCdIJFuNYCenqH.png">
+<img class="preview-img" align="right" description="输入框失去焦点后的校验。" src="https://os.alipayobjects.com/rmsportal/KkcSBkbTJirIxCw.png">
+
+<img class="preview-img" align="right" description="点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。" src="https://os.alipayobjects.com/rmsportal/PLdlPvaebRdJOgu.png">
+
+通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。
+
+### 字数校验框
+
+<img class="preview-img" align="right" alt="字数校验框示例" src="https://os.alipayobjects.com/rmsportal/ziTMevqClLTYagX.png">
+
+用于统计当前输入长度，以及是否超过系统阈值。
+
+
+## 规格
+
+### 间距
+
+<img class="preview-img" align="right" alt="间隔示例" src="https://os.alipayobjects.com/rmsportal/dlTiHzZvCGRbMzL.png">
+
+典型表单的间隔规范。
+
+### 输入框宽度
+
+<img class="preview-img" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/vypllNQZsEHRszB.png" good>
+<img class="preview-img" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/XSLwnrlLbKFjiNj.png" bad>
+
+当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。
+
+<br>
+
+### 对齐方式
+
+无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。
+
+<br>
+
+<img class="preview-img" align="right" alt="右对齐（推荐）" src="https://os.alipayobjects.com/rmsportal/UxGJfenYBKvkEEB.png">
+
+右对齐（推荐）。
+
+- 优点：节约垂直空间。
+- 缺点：降低可读性；标签长度和输入框弹性小。
+- 场景：既要减少垂直空间，又要加快填写速度。
+
+<br>
+
+<img class="preview-img" align="right" alt="顶部对齐" src="https://os.alipayobjects.com/rmsportal/AsyyNKormNdEMLi.png">
+
+顶部对齐。
+
+- 优点：有最快的浏览和处理速度；标签长度弹性大。
+- 缺点：非常占垂直空间。
+- 场景：希望用户快速填写表单，完成任务。
+
+<br>
+
+<img class="preview-img" align="right" alt="左对齐" src="https://os.alipayobjects.com/rmsportal/eqUyDExbRlAQoas.png">
+
+左对齐。
+
+- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。
+- 缺点：填写速度慢；标签长度和输入框弹性小。
+- 场景：希望用户放慢速度，仔细思考表单中的每个输入框。

docs/pattern/index.md

@@ -1,9 +1,9 @@
-# 设计模式
+# 典型页面
 
-- category: 模式
+- category: 0
+- order: 0
 - disabled: true
 
 ---
 
 敬请期待。
-

docs/pattern/list.md

@@ -0,0 +1,101 @@
+# 列表
+
+- category: 3
+- order: 3
+
+---
+
+列表是非常常见的界面元素，有多种使用场景：
+
+- 获取概览
+- 逐项浏览
+- 查找特定列表项
+- 排序与过滤
+- 重新安排、添加、删除或重新分类列表项
+
+## 交互
+
+### 显示详情信息
+
+<img class="preview-img" align="right" alt="气泡显示示例" description="使用『点击』触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。<hr>使用『悬停』触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。" src="https://os.alipayobjects.com/rmsportal/GmpRYixxnePBPPW.png">
+
+气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。
+
+<br />
+
+<img class="preview-img" align="right" alt="列表嵌入示例1" src="https://os.alipayobjects.com/rmsportal/WIoplWDRZspuuhD.png">
+
+<img class="preview-img" align="right" alt="列表嵌入示例2" src="https://os.alipayobjects.com/rmsportal/tNAnTEaZtswRknD.png">
+
+<img class="preview-img" align="right" alt="列表嵌入示例3" src="https://os.alipayobjects.com/rmsportal/MXXjEoLdnBxqcne.png">
+
+列表嵌入：用户可以不用打开新页面或者打开弹框，只要通过点击，就可以直接在上下文中查看该列表项的详情信息。
+
+<br />
+
+<img class="preview-img" align="right" alt="弹出层显示示例" src="https://os.alipayobjects.com/rmsportal/HeqNyjscGEHyHmt.png">
+
+弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
+
+<br />
+
+<img class="preview-img" align="right" alt="双面板选择器示例" src="https://os.alipayobjects.com/rmsportal/JXWVQXvlPSDlvyk.png">
+
+双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
+
+<br />
+
+<img class="preview-img" align="right" alt="单窗口深入示例（窗口未弹出）" src="https://os.alipayobjects.com/rmsportal/YTdIMZLeobNrjmU.png">
+
+<img class="preview-img" align="right" alt="单窗口深入示例（窗口弹出）" description="用户通过点击，该列表项的详情信息会替换列表所在的显示区域；用户通过『面包屑』、按钮或者浏览器自带返回按钮，从详情返回列表。" src="https://os.alipayobjects.com/rmsportal/uAeEOeoCAeTHgsQ.png">
+
+
+单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。
+
+### 显示更多文本
+
+<img class="preview-img" align="right" alt="宽行示例" src="https://os.alipayobjects.com/rmsportal/wWcixIvqaFXfTHd.png">
+
+宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
+
+<br />
+
+<img class="preview-img" align="right" alt="对等网格示例" noPadding src="https://os.alipayobjects.com/rmsportal/VDhwGyyblTSJpeV.png">
+
+对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。
+
+### 显示图片
+
+<img class="preview-img" align="right" alt="走马灯示例" noPadding src="https://os.alipayobjects.com/rmsportal/hKtAKuDfyfDpPrL.png">
+
+走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
+
+<br />
+
+<img class="preview-img" align="right" alt="缩略图网格示例" noPadding src="https://os.alipayobjects.com/rmsportal/LAnBHEYiqWSfQAS.png">
+
+缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。
+
+### 显示长列表
+
+<img class="preview-img" align="right" description="当系统性能是一个主要考虑因素时，适合使用分页器。" src="https://os.alipayobjects.com/rmsportal/aZwrmpnaIEoxiXJ.png">
+
+分页器：以分段的形式加载列表，将是否需要加载其他项的选择权交给用户。
+
+<br />
+
+<img class="preview-img" align="right" description="当需要对数据进行频繁操作时，分页器会导致操作变的笨拙，尤其是出现一些跨页选择时，所以适合用无限加载；当倾向显示用户的个人所有的数据时（例如：个人订单），或者数据不是临时性的，适合使用无限加载。" src="https://os.alipayobjects.com/rmsportal/afDpGUyoyQZFgks.png">
+
+无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。
+
+### 显示分类或者层级的列表
+
+<img class="preview-img" align="right" alt="两层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/efRpmejABrXjiwF.png">
+
+<img class="preview-img" align="right" alt="多层折叠面板示例" src="https://os.alipayobjects.com/rmsportal/bXwBcaLQPAWTIQV.png">
+
+<img class="preview-img" align="right" alt="两层折叠面板表格" src="https://os.alipayobjects.com/rmsportal/XaJeuLfHeSSXCJq.png">
+
+<br />
+
+## 案例（敬请期待）

docs/pattern/navigation.md

@@ -0,0 +1,96 @@
+# 导航
+
+- category: 1
+- order: 1
+
+---
+
+在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：
+
+1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路；
+2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
+3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。
+
+## 常见导航
+
+<Table style="font-size:12px;float:right;width:600px;margin-left:60px;margin-bottom:100px;">
+  <tr>
+    <th></th>
+    <th>侧栏导航</th>
+    <th>顶部导航</th>
+  </tr>
+  <tr>
+    <th>优点</th>
+    <td>导航的层级扩展性强；水平空间利用率高，可展示更多内容；导航可以固定，使得用户在操作和浏览时可以快速定位和切换当前位置，非常高效。</td>
+    <td>人的浏览习惯是自上而下的，便于浏览和点击；通常将内容放在固定尺寸（例如：1208px）内，整个页面排版稳定，不受用户终端显示器影响。</td>
+  </tr>
+  <tr>
+    <th>缺点</th>
+    <td>内容区域一般放置在栅格上，所以排版受用户终端显示器影响大。</td>
+    <td>目前显示器多为宽屏，顶部导航对垂直空间占用率大，而对水平空间利用率低；由于中英文都是横向书写，顶部导航会限制导航类目的数量和长度。</td>
+  </tr>
+  <tr>
+    <th>总结</th>
+    <td>一般适用在浏览性强、门户性质的网站，以及一些比较前台化的应用。</td>
+    <td>适用在操作性强、中后台管理性质的应用。</td>
+  </tr>
+</Table>
+
+我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。
+
+前端实现代码可以参考 [常用布局](/docs/spec/layout#layout-demo-top)。
+
+## 侧栏导航
+
+---
+
+<img class="preview-img" noPadding align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/hutiGZWQYmIspjw.png">
+
+导航的结构由以下几部分组成。
+
+1. 产品 Logo 和名称
+2. 业务类目
+3. 登陆工具
+4. 面包屑（可选）
+
+#### 关于面包屑
+
+> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。
+> 2. 面包屑可以分为这几类：
+>    - 路径型：是一个动态显示用户到达页面经过的途径。
+>    - 位置型：位置型是固定的，显示了页面在网站结构中的位置。
+>    - 属性型：属性型给出当前页面的分类信息。
+
+<br>
+
+<img class="preview-img" noPadding align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/IeuIHdFfKCIABHV.png">
+
+<img class="preview-img" noPadding align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/kAbbeJekohMtubV.png">
+
+<img class="preview-img" noPadding align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/qaOifucSTWooBTL.png">
+
+我们定义了不同类目层级所对应的导航样式。
+
+
+## 顶部导航
+
+---
+
+<img class="preview-img" noPadding align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/MVccMQxgCeYfwjS.png">
+
+导航的结构由以下几部分组成。
+
+1. 产品 Logo 和名称
+2. 业务类目
+3. 登陆工具
+4. 面包屑（可选）
+
+<br>
+
+<img class="preview-img" noPadding align="right" alt="一级类目" src="https://os.alipayobjects.com/rmsportal/KvEsIDOYzknbsPT.png">
+
+<img class="preview-img" noPadding align="right" alt="二级类目" src="https://os.alipayobjects.com/rmsportal/xXaCRVPIfmjDyIL.png">
+
+<img class="preview-img" noPadding align="right" alt="三级类目及以上" src="https://os.alipayobjects.com/rmsportal/ollkHeFUFQElelm.png">
+
+不同类目层级。

docs/pattern/table.md

@@ -0,0 +1,157 @@
+# 表格
+
+- category: 4
+- order: 4
+
+---
+
+表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。
+
+## 内容
+
+<img class="preview-img" align="right" alt="结构示例" src="https://os.alipayobjects.com/rmsportal/zFqqEqKKAylKkxv.png">
+
+通常表格的组成元素以及相关元素会有，这几部分组成。
+
+1. 按钮组
+2. 搜索条件
+3. 排序
+4. 筛选
+5. 状态点
+6. 单行操作
+7. 分页器／无限加载（可选）
+
+### 筛选
+
+<img class="preview-img" align="right" alt="筛选示例" src="https://os.alipayobjects.com/rmsportal/YRcnmAFUvcfMlpN.png">
+
+当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。
+
+### 状态点
+
+<img class="preview-img" align="right" alt="状态示例" src="https://os.alipayobjects.com/rmsportal/EYmtSshUxKydwns.png">
+
+一般用四种颜色来表明系统的不同状态。
+
+### 更多操作
+
+<img class="preview-img" align="right" alt="更多操作示例" description="依次分别为：完整内容、暂时不可用、没有该权限。" src="https://os.alipayobjects.com/rmsportal/ZlcZDOZNZpYQcMM.png">
+
+该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。
+
+### 跳转至详情
+
+<img class="preview-img" align="right" alt="名称跳转示例" src="https://os.alipayobjects.com/rmsportal/tfJiUmrUJRzBlzt.png">
+
+把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。
+
+- 优点：节省空间；
+- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。
+
+<br>
+
+<img class="preview-img" align="right" alt="查看跳转示例" src="https://os.alipayobjects.com/rmsportal/zjDqNVTzSrzXaWg.png">
+
+在操作中增加一列『查看』，点击后进行跳转至详情。
+
+- 优点：可发现性高；点击范围固定，不受影响；
+- 缺点：比较占空间。
+
+<br>
+
+结论：可根据业务系统中表格的实际情况，统一使用一种类型。
+
+## 交互
+
+### 显示长表格
+
+参考『列表页面』中的 [显示长列表](/docs/pattern/list#%E6%98%BE%E7%A4%BA%E9%95%BF%E5%88%97%E8%A1%A8)。
+
+### 全选数据
+
+<img class="preview-img" align="right" alt="状态一" src="https://os.alipayobjects.com/rmsportal/QqafGErOPnuDKyy.png">
+
+<img class="preview-img" align="right" alt="状态二" description="点击 Table 顶部的复选框，出现『Alert』" src="https://os.alipayobjects.com/rmsportal/qwRSMFNilVCNoym.png">
+
+<img class="preview-img" align="right" alt="状态三" description="点击『选择全部』后" src="https://os.alipayobjects.com/rmsportal/POvEJGjMYAexGut.png">
+
+当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。
+
+### 跨页选数据
+
+<img class="preview-img" align="right" alt="状态一：选中一行数据" src="https://os.alipayobjects.com/rmsportal/OcIWSystreURrPV.png">
+
+<img class="preview-img" align="right" alt="状态二：切换分页后，记录所选的项目" src="https://os.alipayobjects.com/rmsportal/HuzwUWDzXszOkEI.png">
+
+<img class="preview-img" align="right" alt="状态三：在其他页中再选择一项，多记录一项选择" src="https://os.alipayobjects.com/rmsportal/yCjrxTSElzNUsFn.png">
+
+<img class="preview-img" align="right" alt="状态四：用户可以在记录条直接取消选择" src="https://os.alipayobjects.com/rmsportal/jtepHsDPApPnQlD.png">
+
+<img class="preview-img" align="right" alt="状态五：表格选择框同步取消选择" src="https://os.alipayobjects.com/rmsportal/OAVQZqxPyuAWvTh.png">
+
+当需要对表格／列表的数据进行跨分页器选择时，结合『Alert』来实现。
+
+### 固定按钮组
+
+<img class="preview-img" align="right" alt="顶部固定示例" src="https://os.alipayobjects.com/rmsportal/AhgnVIhTIvtHpok.png">
+
+<img class="preview-img" align="right" alt="底部固定示例" src="https://os.alipayobjects.com/rmsportal/hUHidNAJczLRVCg.png">
+
+用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。
+
+### 某一项内容过长
+
+<img class="preview-img" align="right" alt="气泡显示示例" description="当过长信息可以被隐藏时，用户悬浮／点击该项时，用『Tooltip／Popover』来显示完整内容。" src="https://os.alipayobjects.com/rmsportal/vgNHOYAiuQbXCOi.png">
+
+某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。
+
+### 模块编辑
+
+<img class="preview-img" align="right" alt="模块编辑示例" description="启动和禁用要尽可能相似（对称性交互）；保证启用和禁用切换时，页面不在水平方向不错位。" src="https://os.alipayobjects.com/rmsportal/mUhSLOTjzGYTQaE.png">
+
+适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。
+
+### 直接编辑
+
+<img class="preview-img" align="right" alt="直接编辑示例" description="用户输入后，系统需要及时保存数据。" src="https://os.alipayobjects.com/rmsportal/VgvZjqTZBuAfGuO.png">
+
+适用在易编辑性高于易读性时。
+
+### 悬浮层编辑
+
+<img class="preview-img" align="right" alt="悬浮层编辑示例" src="https://os.alipayobjects.com/rmsportal/QhIyXeNxAZEaLjT.png">
+
+悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。
+
+
+## 规格
+
+### 行高
+
+<img class="preview-img" align="right" alt="标准" src="https://os.alipayobjects.com/rmsportal/OXTCkOkAtaWtzNA.png">
+
+<img class="preview-img" align="right" alt="适中" src="https://os.alipayobjects.com/rmsportal/irjamuwZFdQLYWJ.png">
+
+<img class="preview-img" align="right" alt="紧凑" src="https://os.alipayobjects.com/rmsportal/SdlTVIAoxickNMM.png">
+
+提供了多种规格的行高，适用在页面、弹出框等场景中。
+
+### 列宽
+
+<img class="preview-img" align="right" alt="错误示例" src="https://os.alipayobjects.com/rmsportal/TbuuZNfOTrSflVg.png" bad>
+
+<img class="preview-img" align="right" alt="正确示例" src="https://os.alipayobjects.com/rmsportal/cSSSfNrFMioHDBJ.png" good>
+
+一般是根据栅格来排版，通过设定每一列的宽度比列，来保证一定尺寸之上（eg：1366px）有好的浏览效果。需要注意：
+
+1. 表头不换行；
+2. 固定字节长度的列尽量不换行（eg：创建时间、操作等）。
+
+### 对齐方式
+
+<img class="preview-img" align="right" alt="对齐示例" src="https://os.alipayobjects.com/rmsportal/RWCMGdnGSZXYULc.png">
+
+数值右对齐（带小数则按小数点对齐），其余左对齐。
+
+
+## 案例（敬请期待）

docs/practice/bussiness.md

@@ -0,0 +1,9 @@
+# 业务组件
+
+- category: 1
+- order: 1
+- disabled: true
+
+---
+
+占位。

docs/practice/cases.md

@@ -0,0 +1,114 @@
+# 实践案例
+
+- category: 0
+- order: 0
+
+---
+
+Ant Design 是面向中后台的 UI 设计语言。
+
+从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
+
+## 最佳实践
+
+---
+
+### 金融云
+
+<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/UkUJgmsRKhxwvSR.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/SeXqPPyixccDJBY.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
+
+金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
+
+<a class="outside-link" href="https://www.cloud.alipay.com/" target="_blank">立即访问</a>
+
+---
+
+### OceanBase Cloud Platform
+
+<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/StdoWgtFplToSgd.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/lpzTKvgLpJgKGpq.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/GVJGaWbqfBFedWN.png">
+
+OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
+
+<a class="outside-link internal" href="http://oceanbase.alipay.com/" target="_blank">立即访问</a>
+
+---
+
+### 服务宝体验平台
+
+<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/khisYONMFbBTOdh.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/vsoYArBwcPRZnVE.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/TMyfsUGQSjOdGIm.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/sBlmIcJXZdJTJbC.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/fRDuTjVbVApxyzU.png">
+
+体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。
+
+<a class="outside-link internal" href="http://tiyan.alipay.com/" target="_blank">立即访问</a>
+
+---
+
+### AntV
+
+<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/yWNVSFBhKsoShvi.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/nvJftlNzfzhVDVW.png">
+<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/LugOCvzybKsmQCj.png">
+
+AntV 将数据图形小组近几年在探索数据可视化过程中取得的成果进行总结和沉淀，并分享给所有需要数据可视理论的人。
+
+<a class="outside-link internal" href="http://antv.alipay.net/" target="_blank">立即访问</a>
+
+<style>
+.preview-image-boxes {
+  margin-top: -36px;
+}
+.preview-image-wrapper {
+  padding: 0;
+  background: #fff;
+}
+.toc {
+  display: none;
+}
+.outside-link.internal {
+  display: none;
+}
+</style>
+
+<script>
+(function() {
+  var links = Array.apply(null, document.querySelectorAll('.outside-link.internal'));
+  var checkImgUrl = 'http://alipay-rmsdeploy-dev-image.oss-cn-hangzhou-zmf.aliyuncs.com/rmsportal/JdVaTbZzPxEldUi.png';
+  ping(checkImgUrl, function(status) {
+    if (status === 'responded') {
+      links.forEach(function(link) {
+        link.style.display = 'block';
+      });
+    }
+  });
+
+  function ping(url, callback) {
+    var img = new Image();
+    var done;
+    var finish = function(status) {
+      if (!done) {
+        done = true;
+        img.src = '';
+        callback(status);
+      }
+    }
+    img.onload = function() {
+      finish('responded');
+    };
+    img.onerror = function(e) {
+      finish('error');
+    };
+    img.src = url;
+    setTimeout(function() {
+      finish('timeout');
+    }, 1500);
+  }
+})();
+</script>

docs/react/getting-started.md

@@ -9,9 +9,9 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 
 ## 第一个例子
 
-最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 Bug Report, 注意不要在实际项目中这样使用。
+最简单的试用方式参照以下 JSFiddle 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。
 
-- [antd JSFiddle](http://jsfiddle.net/yiminghe/9zrstuto/1/)
+- [antd JSFiddle](http://jsfiddle.net/0dso5y0x/)
 
 
 ## 标准开发
@@ -27,7 +27,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 $ npm install antd-init -g
 ```
 
-[更多使用说明](https://github.com/ant-tool/xtool/#使用说明)。
+[更多使用说明](https://github.com/ant-design/antd-init/)。
 
 ### 2. 创建一个项目
 
@@ -63,7 +63,7 @@ const App = React.createClass({
   },
   render() {
     return <div style={{width: 400, margin: '100px auto'}}>
-      <DatePicker onSelect={this.handleChange} />
+      <DatePicker onChange={this.handleChange} />
       <div style={{marginTop: 20}}>当前日期：{this.state.date.toString()}</div>
     </div>;
   }
@@ -107,6 +107,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
   margin-top: -42px;
   position: relative;
   z-index: 1;
+  width: 80%;
 }
 </style>
 

docs/react/install.md

@@ -40,4 +40,4 @@ $ npm install antd-init -g
 
 在空目录运行 `antd-init` 可以初始化一个 antd 的前端应用。
 
-> 更多 [使用方式](https://github.com/ant-tool/xtool/)。
+> 更多 [使用方式](https://github.com/dora-js/dora/)。

docs/react/install_en.md

@@ -34,4 +34,4 @@ $ npm install antd-init -g
 
 Inside an empty folder run `antd-init` to init.
 
-> [More tools](https://github.com/ant-tool/xtool/)。
+> [More tools](https://github.com/dora-js/dora/)。

docs/react/introduce.md

@@ -27,7 +27,7 @@
 
 ## 特性
 
-- Designed as Ant Design, 提炼和服务企业级中后台产品的交互语言和视觉风格。
+- Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。
 - [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。
 - 基于 npm + webpack + babel 的工作流，支持 ES2015。
 
@@ -61,7 +61,8 @@ import 'antd/lib/index.css';  // or 'antd/style/index.less'
 
 - [首页](http://ant.design/)
 - [修改记录](http://ant.design/changelog)
-- [构建调试工具](https://github.com/ant-tool/xtool/)
+- [开发脚手架](https://github.com/ant-design/antd-init/)
+- [本地调试工具集](https://github.com/dora-js/dora/)
 - [React 组件](http://react-component.github.io/)
 - [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
 - [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
@@ -70,9 +71,10 @@ import 'antd/lib/index.css';  // or 'antd/style/index.less'
 ## 谁在使用
 
 - 蚂蚁金服
+- 口碑
 
 > 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
 
 ## 如何贡献
 
-我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们[提问](https://github.com/ant-design/ant-design/issues)。
+在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/CONTRIBUTING.md)。有任何建议或意见您可以 [Pull Request](https://github.com/ant-design/ant-design/pulls)，给我们 [报告 Bug](http://t.cn/R4XEpoQ) 或  [提问](https://github.com/ant-design/ant-design/issues)。

docs/resource/download.md

@@ -0,0 +1,110 @@
+# 资源下载
+
+- order: 0
+- category: 0
+
+---
+
+这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
+
+<a target="_blank" href="https://github.com/ant-design/ant-design/files/69428/Ant_Design_Components.rplib.zip" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/cnmjGfbBWUZPFiO.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Axure Components</span>
+    <span class="resource-card-description">一套强大的 Ant Design 的 Axure 部件库</span>
+  </span>
+</a>
+<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/0.11.2/AntD_Box_v1.2.rp" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/UuYRXxndGMKdaiE.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Axure Box</span>
+    <span class="resource-card-description">强大的 Ant Design 组件拼装方式</span>
+  </span>
+</a>
+<a target="_blank" href="http://ux.ant.design" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/yfTqrQuSKcqBDLY.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Ant UX</span>
+    <span class="resource-card-description">一套页面逻辑原型库，帮你梳理页面逻辑</span>
+  </span>
+</a>
+<a target="_blank" href="https://github.com/ant-design/ant-design/files/57840/iconfont.zip" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/UEpOFKUQTZaUfnW.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Web Font</span>
+    <span class="resource-card-description">网络字体图标的本地文件包</span>
+  </span>
+</a>
+<a target="_blank" class="resource-card disabled">
+  <img src="https://os.alipayobjects.com/rmsportal/CxXbSpIXckHOtWl.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Ant Cool</span>
+    <span class="resource-card-description">一个机智的设计资源共享工具</span>
+  </span>
+</a>
+
+<style>
+.resource-card {
+  max-width: 350px;
+  width: 40%;
+  height: 130px;
+  border: 1px solid #e9e9e9;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #777;
+  display: inline-block;
+  margin: 20px 40px 10px 0;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.resource-card:hover {
+  box-shadow: 0 1px 4px rgba(64,64,64,.2);
+}
+
+.resource-card:hover .resource-card-title {
+  color: #2db7f5;
+}
+
+.resource-card.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.resource-card img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 50px;
+  margin: 0 20px 0 24px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.resource-card-content {
+  display: inline-block;
+  vertical-align: middle;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 92px;
+}
+
+.resource-card-title {
+  display: block;
+  font-size: 16px;
+  color: #666;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.resource-card-description {
+  display: block;
+  color: #999;
+}
+</style>

docs/resource/github.md

@@ -0,0 +1,7 @@
+# GitHub
+
+- order: 3
+- category: 3
+- link: https://github.com/ant-design/ant-design
+
+---

docs/resource/reference.md

@@ -0,0 +1,131 @@
+# 文献素材
+
+- order: 1
+- category: 1
+
+---
+
+在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。
+
+<a target="_blank" href="http://book.douban.com/subject/26642302/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/PeeRQQIGQJCswxe.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">About Face 4</span>
+    <span class="resource-card-description">作者: Alan.cooper</span>
+    <span class="resource-card-description">出版社: 电子工业出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/3821157/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/CoojVXLtoWrUSmI.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Web界面设计</span>
+    <span class="resource-card-description">作者: Bill Scott / Theresa Neil</span>
+    <span class="resource-card-description">出版社: 电子工业出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/25716088/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/oRxdwgZMwfEFeJa.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">界面设计模式</span>
+    <span class="resource-card-description">作者: Tidwell,J.</span>
+    <span class="resource-card-description">出版社: 电子工业出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/3323633/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/SNdJVyZaZwdwJmr.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">写给大家看的设计书</span>
+    <span class="resource-card-description">作者: Robin Williams</span>
+    <span class="resource-card-description">出版社: 人民邮电出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/26102860/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/txGrSvGFMTTrwjY.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">设计心理学 1</span>
+    <span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
+    <span class="resource-card-description">出版社: 中信出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/26424688/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/cZQyAARFxzaKEOG.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">设计心理学 3</span>
+    <span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
+    <span class="resource-card-description">出版社: 中信出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/4886100/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/moeFnnuXrputdag.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Web表单设计：点石成金的艺术</span>
+    <span class="resource-card-description">作者: Luke Wroblewski</span>
+    <span class="resource-card-description">出版社: 清华大学出版社</span>
+  </span>
+</a>
+
+<style>
+.resource-card {
+  max-width: 350px;
+  width: 40%;
+  height: 130px;
+  border: 1px solid #e9e9e9;
+  border-radius: 6px;
+  font-size: 12px;
+  color: #777;
+  display: inline-block;
+  margin: 20px 40px 10px 0;
+  vertical-align: middle;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.resource-card:hover {
+  box-shadow: 0 1px 4px rgba(64,64,64,.2);
+}
+
+.resource-card:hover .resource-card-title {
+  color: #2db7f5;
+}
+
+.resource-card.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.resource-card img {
+  display: inline-block;
+  vertical-align: middle;
+  width: 64px;
+  margin: 0 20px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.resource-card-content {
+  display: inline-block;
+  vertical-align: middle;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 106px;
+}
+
+.resource-card-title {
+  display: block;
+  font-size: 16px;
+  color: #666;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.resource-card-description {
+  display: block;
+  color: #999;
+}
+</style>

docs/spec/font.md

@@ -11,7 +11,7 @@
 
 - 中文字体族：
 
-   <img src="https://t.alipayobjects.com/images/T1NrdhXghnXXXXXXXX.png" width="100%">
+   <img src="https://os.alipayobjects.com/rmsportal/OKbesWXtRMCNGmO.png" width="100%">
 
 - 英文文字体族：
 
@@ -20,7 +20,7 @@
 字体家族 css 代码如下：
 
 ```css
-font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","STHeitiSC-Light","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
 ```
 
 ## 字体使用规范

docs/spec/introduce.md

@@ -5,9 +5,9 @@
 
 ---
 
-Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
+Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。
 
-<img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
+<img width="300" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
 
 Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
 
@@ -16,6 +16,7 @@ Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设
 ## 谁在使用
 
 - 蚂蚁金服
+- 口碑
 
 > 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。
 
@@ -23,7 +24,7 @@ Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设
 
 我们采用 [React](http://facebook.github.io/react/) 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。
 
-- [Ant Design of React](/docs/introduce)（官方实现）
+- [Ant Design of React](/docs/react/introduce)（官方实现）
 - [vue-antd](https://github.com/okoala/vue-antd)
 
 ## 如何贡献

docs/spec/layout/demo/aside.md

@@ -61,7 +61,7 @@ ReactDOM.render(
       </div>
     </div>
   </BrowserDemo>
-, document.getElementById('spec-layout-demo-aside'));
+, mountNode);
 ````
 
 ````css
@@ -115,7 +115,7 @@ ReactDOM.render(
 }
 
 .ant-layout-aside .ant-layout-footer {
-  height; 64px;
+  height: 64px;
   line-height: 64px;
   text-align: center;
   font-size: 12px;

docs/spec/layout/demo/ceiling.md

@@ -32,7 +32,7 @@ ReactDOM.render(
       </div>
     </div>
   </BrowserDemo>
-, document.getElementById('spec-layout-demo-ceiling'));
+, mountNode);
 ````
 
 ````css

docs/spec/layout/demo/top-aside.md

@@ -77,7 +77,7 @@ ReactDOM.render(
       </div>
     </div>
   </BrowserDemo>
-, document.getElementById('spec-layout-demo-top-aside'));
+, mountNode);
 ````
 
 ````css

docs/spec/layout/demo/top.md

@@ -54,7 +54,7 @@ ReactDOM.render(
       </div>
     </div>
   </BrowserDemo>
-, document.getElementById('spec-layout-demo-top'));
+, mountNode);
 ````
 
 ````css
@@ -99,7 +99,7 @@ ReactDOM.render(
 }
 
 .ant-layout-top .ant-layout-footer {
-  height; 64px;
+  height: 64px;
   line-height: 64px;
   text-align: center;
   font-size: 12px;

docs/spec/motion.md

@@ -136,7 +136,7 @@ motions = motions.concat([[{
   direction: 'enter',
   type: '移动'
 }, {
-  name: '右方滑入',
+  name: '右方滑出',
   value: 'move-right',
   direction: 'leave',
   type: '移动'

nico.js

@@ -6,7 +6,7 @@ var inspect = require('util').inspect;
 var Busboy = require('busboy');
 var chalk = require('chalk');
 var webpackMiddleware = require('webpack-dev-middleware');
-var webpackConfig = require('./webpack.deploy.config');
+var webpackConfig = require('./webpack.config');
 var webpackCompiler = webpack(webpackConfig);
 var handler;
 
@@ -90,7 +90,7 @@ exports.middlewares = [
   },
   {
   name: 'webpackDevMiddleware',
-  filter: /\.(js|css)(\.map)?$/,
+  filter: /\.(js|css)(\.map)?(\?.*)?$/,
   handle: function(req, res, next) {
     handler = handler || webpackMiddleware(webpackCompiler, {
       publicPath: '/dist/',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
   "homepage": "http://ant.design/",
@@ -70,6 +70,8 @@
     "warning": "~2.1.0"
   },
   "devDependencies": {
+    "rc-scroll-anim": "0.0.5",
+    "rc-tween-one": "0.1.5",
     "autoprefixer-loader": "^3.1.0",
     "babel-cli": "^6.2.0",
     "babel-core": "^6.2.1",
@@ -99,10 +101,10 @@
     "lodash": "^3.10.0",
     "nico-jsx": "~0.7.0",
     "pre-commit": "1.x",
-    "react": "~0.14.2",
-    "react-addons-test-utils": "~0.14.2",
+    "react": "0.14.x",
+    "react-addons-test-utils": "0.14.x",
     "react-copy-to-clipboard": "^3.0.4",
-    "react-dom": "~0.14.2",
+    "react-dom": "0.14.x",
     "react-router": "~1.0.3",
     "react-stateless-wrapper": "~1.0.2",
     "reqwest": "~2.0.5",

scripts/demo.js

@@ -36,6 +36,7 @@ window.ReactDOM = ReactDOM;
 window['object-assign'] = require('object-assign');
 window['classnames'] = require('classnames');
 window['reqwest'] = require('reqwest');
+require('./home')();
 
 antd.DatePicker.locale = {
   en_US: require('../components/date-picker/locale/en_US'),
@@ -145,4 +146,114 @@ window.BrowserDemo = React.createClass({
   }
 });
 
+const { Modal, Carousel } = antd;
+const PriviewImg = React.createClass({
+  getInitialState() {
+    return {
+      visible: false,
+      current: 0,
+    };
+  },
+  showImageModal() {
+    this.setState({
+      visible: true
+    });
+  },
+  handleCancel() {
+    this.setState({
+      visible: false
+    });
+  },
+  handleImgChange(current) {
+    this.setState({ current });
+  },
+  render() {
+    const goodCls = this.props.good ? 'good' : '';
+    const badCls = this.props.bad ? 'bad' : '';
+    const imgsPack = this.props.imgsPack || [{
+      src: this.props.src,
+      alt: this.props.alt,
+    }];
+    const imgStyle = {};
+    if (this.props.noPadding) {
+      imgStyle.padding = '0';
+      imgStyle.background = 'none';
+    }
+    const current = this.state.current;
+    const arrows = imgsPack.length > 1;
+    const createMarkup = () => { return { __html: this.props.description } };
+    return (
+      <div className="preview-image-box" style={{ width: this.props.width }}>
+        <div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
+          <img src={this.props.src} onClick={this.showImageModal} style={imgStyle} alt="Sample Picture" />
+        </div>
+        <div className="preview-image-title">{this.props.alt}</div>
+        <div className="preview-image-description" dangerouslySetInnerHTML={createMarkup()} />
+        <Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
+          <Carousel afterChange={this.handleImgChange} adaptiveHeight arrows={arrows}>
+            {
+              imgsPack.map((img, i) =>
+                <div key={i}>
+                  <div className="image-modal-container">
+                    <img src={img.src} />
+                  </div>
+                </div>
+              )
+            }
+          </Carousel>
+          <div className="preview-image-title">{imgsPack[current].alt}</div>
+        </Modal>
+      </div>
+    );
+  }
+});
+
+InstantClickChangeFns.push(function() {
+  const previewImageBoxes = $('.preview-img').parent();
+  previewImageBoxes.each(function(i, box) {
+    box = $(box);
+    let priviewImgs = [];
+    const priviewImgNodes = box.find('.preview-img');
+
+    // 判断是否要做成图片集合
+    // 指定了封面图片就是
+    let coverImg;
+    priviewImgNodes.each(function(i, img) {
+      if (img.hasAttribute('as-cover')) {
+        coverImg = img;
+        return false;
+      }
+    });
+
+    if (coverImg) {
+      const imgs = [];
+      priviewImgNodes.each((i, img) => imgs.push(img));
+      priviewImgs = <PriviewImg src={coverImg.src} alt={coverImg.alt} imgsPack={imgs} />;
+    } else {
+      priviewImgNodes.each(function(i, img) {
+        priviewImgs.push(
+          <PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'} alt={img.alt}
+            noPadding={img.hasAttribute('noPadding')} description={img.getAttribute('description')}
+            good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
+        );
+      });
+    }
+
+    // 计算宽度
+    let width = '';
+    if (priviewImgs.length === 1) {
+      width = priviewImgNodes[0].getAttribute('width') || '';
+    } else if (coverImg) {
+      width = coverImg.getAttribute('width');
+    }
+    if (width && width.indexOf('%') < 0 && width !== 'auto') {
+      width += 'px';
+    }
+
+    let mountNode = $('<div class="preview-image-boxes ' + (coverImg ? 'pack' : '') + '" style="width: ' + width + '"></div>')[0];
+    box.replaceWith(mountNode);
+    ReactDOM.render(<span>{priviewImgs}</span>, mountNode);
+  });
+});
+
 module.exports = antd;

scripts/home.js

@@ -0,0 +1,115 @@
+const React = require('react');
+const ReactDOM = require('react-dom');
+import { QueueAnim, Icon, Button } from '../index';
+import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import TweenOne from 'rc-tween-one';
+
+module.exports = function() {
+  InstantClickChangeFns.push(function() {
+    if (!document.getElementById('banner')) {
+      return;
+    }
+    // 导航处理
+    function scrollNavEvent() {
+      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+      const clientHeight = document.documentElement.clientHeight;
+      if (scrollTop >= clientHeight) {
+        header.className = header.className.indexOf('home-nav-bottom') >= 0 ? header.className : header.className + ' home-nav-bottom';
+      } else {
+        header.className = header.className.replace(/home-nav-bottom/ig, '');
+      }
+    }
+
+    $(window).off('scroll.scrollNavEvent');
+    $(window).on('scroll.scrollNavEvent', scrollNavEvent);
+
+    class Banner extends React.Component {
+      constructor() {
+        super(...arguments);
+      }
+
+      typeFunc(a) {
+        if (a.key === 'line') {
+          return 'right';
+        } else if (a.key === 'button') {
+          return 'bottom';
+        }
+        return 'left';
+      }
+
+      render() {
+        return (
+          <div>
+            <QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
+              <h2 key="h2">ANT <p>DESIGN</p></h2>
+              <p key="content">一个 UI 设计语言</p>
+              <span className="line" key="line"/>
+              <a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
+            </QueueAnim>
+            <TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]}>
+              <Icon type="down"/>
+            </TweenOne>
+          </div>
+        )
+      }
+    }
+
+    ReactDOM.render(<Banner />, document.getElementById('banner'));
+
+    // page1
+    ReactDOM.render((
+      <ScrollOverPack className="content-wrapper">
+        <TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
+                  style={{transform: 'translateX(-100px)', opacity: 0}}/>
+        <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
+          <h2 key="h2">最佳实践</h2>
+          <p key="p" style={{maxWidth: 310}}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
+          <div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon
+            type="right"/></Button></div>
+        </QueueAnim>
+      </ScrollOverPack>
+    ), document.getElementById('page1'));
+
+    //page2
+    ReactDOM.render((
+      <ScrollOverPack className="content-wrapper">
+        <QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse>
+          <h2 key="h2">设计模式</h2>
+          <p key="p" style={{maxWidth: 260}}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
+          <div key="button"><Button type="primary" size="large"
+                                    onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button>
+          </div>
+        </QueueAnim>
+        <TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
+                  style={{transform: 'translateX(100px)', opacity: 0}}/>
+      </ScrollOverPack>
+    ), document.getElementById('page2'));
+
+    // page3
+    ReactDOM.render((
+      <ScrollOverPack className="content-wrapper">
+        <TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
+                  style={{transform: 'translateX(-100px)', opacity: 0}}/>
+        <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}>
+          <h2 key="h2">丰富的基础组件</h2>
+          <p key="p" style={{maxWidth: 280}}>丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。</p>
+          <div key="button"><Button type="primary" size="large"
+                                    onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon
+            type="right"/></Button></div>
+        </QueueAnim>
+      </ScrollOverPack>
+    ), document.getElementById('page3'));
+
+    // page4
+    ReactDOM.render((
+      <ScrollOverPack className="content-wrapper">
+        <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
+          <h2 key="h2">微小·确定·幸福</h2>
+          <p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
+        </QueueAnim>
+        <TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
+                  style={{transform: 'translateY(50px)', opacity: 0}}/>
+      </ScrollOverPack>
+    ), document.getElementById('page4'));
+  });
+}

site/static/home.js

@@ -1,303 +0,0 @@
-$(function() {
-  var getTransform = function() {
-    var style = "transform",
-      anim = "animation",
-      pers = "perspective";
-    var i, prefix = ['webkit', 'moz', 'ms', 'o'],
-      htmlStyle = $("html")[0].style;
-    if (!"transform" in htmlStyle) {
-      for (i in prefix) {
-        style = "-" + prefix[i] + "-transform";
-        if (style in htmlStyle) break;
-      }
-    }
-    if (!"animation" in htmlStyle) {
-      for (i in prefix) {
-        anim = "-" + prefix[i] + "-animation";
-        if (anim in htmlStyle) break;
-      }
-    }
-    if (!"perspective" in htmlStyle) {
-      for (i in prefix) {
-        pers = "-" + prefix[i] + "-perspective";
-        if (pers in htmlStyle) break;
-      }
-    }
-    return [style, anim, pers]
-  };
-  var C = createjs || {},
-    T = TweenMax || {};
-  var bannerAnim = {
-    w: 2400,
-    h: 1300,
-    p_w: 0,
-    p_h: 0,
-    stage: null,
-    Canvas: null,
-    lineData:[
-      {x:270,y:795,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],w:70,h:70,rotate:-15,circ:{x:10,y:10,r:50}},
-      {x:850,y:220,w:70,h:70,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:{x:10,y:10,r:50}},
-      {x:930,y:445,w:230,h:110,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:20,y:15,r:80},{x:125,y:15,r:80}]},
-      {x:1160,y:670,w:440,h:115,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:60,y:15,r:80},{x:178,y:15,r:80},{x:308,y:15,r:80}]},
-      {x:1290,y:135,w:524,h:115,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:40,y:15,r:80},{x:165,y:15,r:80},{x:295,y:15,r:80},{x:415,y:15,r:80}]},
-      {x:1345,y:510,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
-      {x:1455,y:340,w:210,h:210,line:4,color:["rgba(190,196,200,1)","rgba(190,196,200,0)"],circ:[{x:20,y:20,r:75},{x:120,y:20,r:75},{x:20,y:110,r:75},{x:120,y:110,r:75}]},
-      {x:1695,y:300,w:120,h:345,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:[{x:25,y:15,r:75},{x:35,y:25,r:55},{x:25,y:125,r:75},{x:35,y:135,r:55},{x:25,y:245,r:75},{x:35,y:255,r:55}]},
-      {x:1730,y:745,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
-      {x:1910,y:470,w:115,h:450,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:20,r:75},{x:35,y:30,r:55},{x:25,y:130,r:75},{x:35,y:140,r:55},{x:25,y:240,r:75},{x:35,y:250,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}]},
-      {x:1920,y:260,w:75,h:75,line:4,color:["rgba(240,119,111,1)","rgba(240,119,111,0)"],circ:{x:10,y:10,r:55}},
-      {x:2070,y:250,w:230,h:455,line:4,color:["rgba(110,180,224,1)","rgba(110,180,224,0)"],circ:[{x:25,y:30,r:75},{x:35,y:40,r:55},{x:25,y:185,r:75},{x:35,y:195,r:55},{x:25,y:340,r:75},{x:35,y:350,r:55}, {x:140,y:30,r:75},{x:150,y:40,r:55},{x:140,y:185,r:75},{x:150,y:195,r:55},{x:140,y:340,r:75},{x:150,y:350,r:55}]},
-    ],
-    init: function() {
-      var self = this;
-      self.box = $(".banner-box");
-      self.animBox = $("#bannerAnim");
-      self.imgBox = $(".banner-img");
-      self.txtBox = $(".banner-entry");
-      //创建canvas;
-      self.Canvas = $("<canvas id='myC' style='display:block'></canvas>").appendTo(self.animBox); //document.createElement('canvas');
-      self.Canvas[0].width = self.w;
-      self.Canvas[0].height = self.h;
-      self.stage = new C.Stage('myC');
-
-      C.Ticker.setFPS(30);
-      C.Ticker.useRAF = true;
-      C.Ticker.addEventListener("tick", self.stage);
-      C.Touch.enable(self.stage, true); //单指触摸
-
-      self.bannerResize();
-      $(window).bind("resize", self.bannerResize);
-      self.start()
-    },
-    bannerResize: function() {
-      var self = bannerAnim;
-      self.p_w = self.box.parent().width();
-      self.p_h = self.box.parent().height();
-      //获取比例；
-      var w_s = self.p_w / self.w + 0.08,
-        h_s = self.p_h / self.h + 0.08;
-      var scale = self.scale = w_s > h_s ? w_s : h_s;
-      var tra = getTransform()[0];
-      self.animBox.attr("style", "");
-      self.imgBox.attr("style", "");
-      var boxSty = {
-        "width": self.w,
-        "height": self.h
-      };
-
-      boxSty[tra] = "scale(" + scale + "," + scale + ")";
-      self.animBox.css(boxSty);
-      var imgSty = {};
-      imgSty[tra] = "scale(" + scale + "," + scale + ")";
-      self.imgBox.css(imgSty);
-      if (w_s > h_s) {
-        self.animBox.css({
-          "margin-top": (self.p_h - self.h * w_s) / 2,
-          "margin-left": (self.p_w - self.w * w_s) / 2
-        });
-        self.imgBox.css({
-          "margin-top": (self.p_h - self.h * w_s) / 2 - (1 - scale) * self.h / 2,
-          "margin-left": (self.p_w - self.w * w_s) / 2 - (1 - scale) * self.w / 2
-        });
-      } else {
-        self.animBox.css({
-          "margin-left": (self.p_w - self.w * h_s) / 2,
-          "margin-top": (self.p_h - self.h * h_s) / 2
-        });
-        self.imgBox.css({
-          "margin-left": (self.p_w - self.w * h_s) / 2 - (1 - scale) * self.w / 2,
-          "margin-top": (self.p_h - self.h * h_s) / 2 - (1 - scale) * self.h / 2
-        });
-      }
-    },
-    start: function() {
-      this.addLine();
-    },
-    glowLine: function(line, w, h, color) {
-      w = w || 0, h = h || 0;
-      var r = w / 2 || h / 2;
-      var glBox = new C.Container();
-      var Line = new C.Shape();
-      var glow = new C.Shape();
-      glBox.addChild(glow);
-      glBox.addChild(Line);
-      glow.alpha = .3;
-      var blurFilter = new C.BlurFilter(3, 3, 10);
-      glow.filters = [blurFilter];
-      var bounds = blurFilter.getBounds();
-      if (w) {
-        Line.graphics.ss(line, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h);
-        glow.graphics.ss(line + 4, "round").rs(color, [0, 1], r, h, 0, r, h, r).mt(0, 0).lt(w, h);
-        glow.cache(bounds.x, bounds.y - 2, w + bounds.width, line + bounds.height);
-      } else {
-        Line.graphics.ss(line, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h);
-        glow.graphics.ss(line + 4, "round").rs(color, [0, 1], w, r, 0, w, r, r).mt(0, 0).lt(w, h);
-        glow.cache(bounds.x - 2, bounds.y, line + bounds.width, h + bounds.height);
-      }
-      return glBox;
-    },
-    addMouseAnim: function() {
-      var self = this,
-        img_x = self.imgBox;
-      $("body").bind("mousemove", function(e) {
-        var _x = -(e.pageX - $(this).width() / 2) / 40; //,_y= -(e.pageY-$(this).height()/2)/35;
-        if (_x > self.w * .04) {
-          _x = self.w * .04
-        }
-        T.set(self.imgBox, {
-          scale: self.scale,
-          transformPerspective: 400
-        });
-        T.killTweensOf(self.imgBox, true);
-        var tobj = {};
-        if (navigator.userAgent.indexOf('Firefox') >= 0) {
-          tobj.x = _x
-        } else {
-          tobj.x = _x;
-          tobj.rotationY = _x / 60;
-        }
-        T.to(self.imgBox, .5, tobj);
-      })
-    },
-    endTween: function() {
-      var self = bannerAnim;
-      T.to(self.animBox, .5, {
-        alpha: 0,
-        onComplete: function() {
-          self.animBox.remove();
-          self.addMouseAnim()
-        }
-      });
-      self.imgBox.removeClass("fn-alpha-out")
-      self.imgBox.css("opacity", 1);
-
-    },
-    textTween: function() {
-      var self = this;
-      self.txtBox.removeClass("fn-hide");
-      for (var i = 0; i < self.txtBox.children().length; i++) {
-        var mc = self.txtBox.children().eq(i);
-        T.from(mc, .5, {
-          delay: .15 * i,
-          alpha: 0,
-          y: "80",
-          onComplete: function(mc) {
-            mc.removeAttr("style");
-          },
-          onCompleteParams: [mc]
-        })
-      }
-    },
-    addLine: function() {
-      var self = bannerAnim;
-      var a_lineBox = [],
-        end_num = 0;
-      setTimeout(function() {
-        self.textTween();
-      }, 500);
-
-      function addLine(i, j, lineBox) {
-        var t = new C.Shape();
-        if (j % 2) {
-          t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(0, self.lineData[i].h);
-          var at = Math.floor(j / 2);
-          t.x = self.lineData[i].w * at
-        } else {
-          t.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).mt(0, 0).lt(self.lineData[i].w, 0);
-          var at = j / 2;
-          t.y = self.lineData[i].h * at;
-        }
-        lineBox.addChild(t);
-        T.from(t, .5, {
-          alpha: 0
-        })
-      }
-
-      function addCirc(i, lineBox) {
-        end_num++;
-        if (self.lineData[i].circ.length > 0) {
-          for (var j = 0; j < self.lineData[i].circ.length; j++) {
-            var circ = new C.Shape();
-            circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ[j].x + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].y + self.lineData[i].circ[j].r / 2, self.lineData[i].circ[j].r / 2);
-            lineBox.addChild(circ);
-            T.from(circ, .5, {
-              alpha: 0
-            })
-          }
-        } else {
-          var circ = new C.Shape();
-          circ.graphics.s(self.lineData[i].color[0]).ss(self.lineData[i].line).dc(self.lineData[i].circ.x + self.lineData[i].circ.r / 2, self.lineData[i].circ.y + self.lineData[i].circ.r / 2, self.lineData[i].circ.r / 2);
-          lineBox.addChild(circ);
-          T.from(circ, .5, {
-            alpha: 0
-          })
-        }
-        if (end_num >= self.lineData.length) {
-          setTimeout(self.endTween, 500)
-        }
-      }
-
-      function tween(line, obj, i, j, lineBox, arr) {
-        var t = obj;
-        t.alpha = 0;
-        t.scale = 2;
-        t.ease = Power1.easeOut;
-        T.to(line, .5, t);
-        addLine(i, j, lineBox);
-        arr.push(j);
-        a_lineBox[i] = arr;
-        if (a_lineBox[i].length >= 4) {
-          addCirc(i, lineBox)
-        }
-      }
-      for (var i = 0; i < self.lineData.length; i++) {
-        var lineBox = new C.Container();
-        self.stage.addChild(lineBox);
-        lineBox.x = self.lineData[i].x;
-        lineBox.y = self.lineData[i].y + 125;
-        lineBox.rotation = self.lineData[i].rotate;
-        var arr = [];
-        //画外壳方形
-        for (var j = 0; j < 4; j++) {
-          var line, ma = Math.ceil(Math.random() * 2 - 1),
-            tweenobj;
-          if (j % 2) {
-            tweenobj = ma ? self.lineData[i].h * 2 : -self.lineData[i].h * 2;
-            line = self.glowLine(self.lineData[i].line, 0, self.lineData[i].h, self.lineData[i].color);
-            var t = Math.floor(j / 2);
-            line.x = self.lineData[i].w * t;
-            T.from(line, .5, {
-              alpha: 0,
-              y: tweenobj,
-              scale: 0,
-              delay: j * .1 + Math.random() * i * .1,
-              ease: Power1.easeIn,
-              onComplete: tween,
-              onCompleteParams: [line, {
-                y: -tweenobj
-              }, i, j, lineBox, arr]
-            });
-          } else {
-            tweenobj = ma ? self.lineData[i].w * 2 : -self.lineData[i].w * 2;
-            line = self.glowLine(self.lineData[i].line, self.lineData[i].w, 0, self.lineData[i].color);
-            var t = j / 2;
-            line.y = self.lineData[i].h * t;
-            T.from(line, .5, {
-              alpha: 0,
-              x: tweenobj,
-              scale: 0,
-              delay: j * .1 + Math.random() * i * .1,
-              ease: Power1.easeIn,
-              onComplete: tween,
-              onCompleteParams: [line, {
-                x: -tweenobj
-              }, i, j, lineBox, arr]
-            });
-          }
-          lineBox.addChild(line)
-        }
-      }
-    }
-  };
-  window.bannerAnim = bannerAnim;
-});

site/static/homeLoad.js

@@ -1,116 +0,0 @@
-/**
- * Created by jljsj on 15/6/3.
- */
-$(function() {
-  $.ajaxSetup({
-    cache: true
-  });
-  var loadData = [
-    "https://os.alipayobjects.com/rmsportal/PfhNcINWBAnMIWR.js", // easeljs-0.8.0.min.js
-    "https://os.alipayobjects.com/rmsportal/nGFyCGHAblMWsYE.js", // TweenMax.min.js
-    "/static/home.js",
-    "https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg"
-  ];
-  var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
-  var loadFunc = {
-    init: function() {
-      var self = this;
-      self.body = $("body");
-      self.header = $("#header") || $("header");
-      self.main = $(".main");
-      self.footer = $("#footer") || $("footer");
-      self.addLoad()
-    },
-    addLoad: function() {
-      var self = this;
-      self.loadBox = $("<div class='load-main-box'>" +
-        "<div class='load-box'>" +
-        "<em><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' width='50' height='50'></em>" +
-        "<span>Ant Design</span>" +
-        "</div>" +
-        "<div class='load-bar'></div>" +
-        "</div>").appendTo(".banner-box");
-      self.loadBar = self.loadBox.find(".load-bar");
-      var loadText = self.loadBox.find("span"),
-        str = loadText.text(),
-        loadClass = ["yoyo-load0", "yoyo-load1", "yoyo-load2", "yoyo-load3", "yoyo-load4", "yoyo-load5"];
-      loadText.empty();
-
-      function c_random(num, arrlen) {
-        var arr = [];
-
-        function r(i) {
-          var t = Math.round(Math.random() * (num - 1));
-          if (t == arr[i - 1]) {
-            r(i);
-            return
-          }
-          arr.push(t)
-        }
-        for (var i = 0; i < arrlen; i++) {
-          r(i)
-        }
-        return arr;
-      }
-      var tarr = c_random(loadClass.length, str.length);
-      for (var i = 0; i < str.length; i++) {
-        var t = str[i];
-        if (t == " ") {
-          t = "&nbsp;"
-        }
-        var _class = "yoyo-x-left";
-        if (i > 0 && i < str.length - 1) {
-          _class = loadClass[tarr[i]]
-        }
-        if (i == str.length - 1) {
-          _class = 'yoyo-x-right'
-        }
-        loadText.append("<p class='" + _class + "'>" + t + "</p>")
-      }
-      self.load()
-    },
-    load: function() {
-      var self = this,
-        num = 0;
-
-      function endLoad() {
-        self.loadBox.addClass("load-out").one(animEndStr, function() {
-          self.loadBox.remove();
-          bannerAnim.init();
-        });
-      }
-
-      function getLoad() {
-        var str = loadData[num];
-        if (str.indexOf(".js") >= 0) {
-          $.getScript(str.indexOf('http') === 0 ? str : (rootUrl + str), function() {
-            num++;
-            self.loadBar.css("width", num / loadData.length * 100 + "%");
-            if (num >= loadData.length) {
-              setTimeout(endLoad, 300);
-            } else {
-              getLoad();
-            }
-          })
-        } else {
-          var img = new Image();
-          img.onload = img.onerror = function() {
-            num++;
-            self.loadBar.css("width", num / loadData.length * 100 + "%");
-            if (num >= loadData.length) {
-              setTimeout(endLoad, 300);
-            } else {
-              getLoad();
-            }
-          };
-          img.src = str;
-        }
-      }
-      getLoad();
-    }
-  };
-
-  $().ready(function() {
-    loadFunc.init()
-  });
-});

site/static/script.js

@@ -6,6 +6,7 @@ InstantClickChangeFns.push(function() {
     }, 0);
   }
 
+  $('.component-demos .icon-all').off('click');
   $('.component-demos .icon-all').on('click', function() {
     if ($(this).hasClass('expand')) {
       $(this).removeClass('expand');
@@ -27,6 +28,7 @@ InstantClickChangeFns.push(function() {
     item.find('.highlight').appendTo(item);
   });
 
+  $('.code-boxes').off('click');
   $('.code-boxes').on('click', '.collapse', function() {
     var highlightBox = $(this).parent().parent().find('.highlight');
     var codeVisible = highlightBox.is(':visible');
@@ -41,9 +43,62 @@ InstantClickChangeFns.push(function() {
     }
   });
 
+  function hashChange() {
+    $('.demos-anchor a').removeClass('current');
+    $('.demos-anchor a[href="' + decodeURI(location.hash) + '"]').addClass('current');
+  }
+
+  hashChange();
+
+  // 高亮侧边演示菜单
+  $(window).off('hashchange');
+  $(window).on('hashchange', hashChange);
+
   // 移动 API 文档到演示下方
   $('.markdown #api').nextAll().andSelf().appendTo('.api-container');
 
+  // 滚动时固定锚点、高亮当前项
+  if ($('.demos-anchor')[0]) {
+    var doc = $(document);
+    var tocTop = $('.toc').offset().top;
+    function onScroll() {
+      var top = doc.scrollTop();
+      if (top >= tocTop) {
+        $('.toc').addClass('sticky');
+      } else {
+        $('.toc').removeClass('sticky');
+      }
+    }
+    onScroll();
+    $(window).off('scroll');
+    $(window).on('scroll', onScroll);
+  }
+
+  // 添加上一页下一页
+  if ($('.aside-container li > a').length > 0) {
+    var links = $('.aside-container li > a');
+    var currentLinkIndex = -1;
+    links.each(function(i, item) {
+      if ($(item).parent().hasClass('current')) {
+        currentLinkIndex = i;
+      }
+    });
+    var prevNextNavNode = $('<div class="prev-next-nav"></div>');
+    var prevLink = links[currentLinkIndex - 1];
+    var nextLink = links[currentLinkIndex + 1];
+    if (prevLink) {
+      prevNextNavNode.append('<a class="prev-page" href="' + prevLink.href + '">' + prevLink.innerHTML + '</a>');
+    } else {
+      prevNextNavNode.append('<span class="prev-page"></span>');
+    }
+    if (nextLink) {
+      prevNextNavNode.append('<a class="next-page" href="' + nextLink.href + '">' + nextLink.innerHTML + '</a>');
+    } else {
+      prevNextNavNode.append('<span class="next-page"></span>');
+    }
+    prevNextNavNode.appendTo('.main-container');
+  }
+
   $('.nav-phone-icon').click(function() {
     $(this).prev().toggle();
   });
@@ -65,6 +120,9 @@ InstantClickChangeFns.push(function() {
   var navFunc = {
     navStrArr: [],
     init: function() {
+      if (this.navBar) {
+        return;
+      }
       this.navBox = $(".nav");
       this.navBar = this.navBox.find(".bar");
       this.navList = this.navBox.find("ul li");

site/static/tomorrow.css

@@ -35,22 +35,23 @@
 }
 
 code {
-  background: #f6f6f6;
+  background: #f7f7f7;
   padding: 1px 6px;
   border-radius: 3px;
   color: #888;
-  font-size: 90%;
+  font-size: 0.8rem;
   border: 1px solid #e9e9e9;
+  white-space: nowrap;
 }
 
 pre code {
   display: block;
   background: white;
   color: #666;
-  font-family: Consolas, monospace;
   line-height: 1.5;
   border: 1px solid #e9e9e9;
   padding: 10px 15px;
   border-radius: 6px;
-  font-size: 14px;
+  font-size: 0.9rem;
+  white-space: pre;
 }

site/templates/aside.html

@@ -5,7 +5,9 @@
     {%- if category.pages.length === 1 %}
       {%- for item in category.pages|splitComponentsByType(category.name) %}
       <li class="{%- if item.title === post.title %}current{%- endif %}">
-        <a href="{{permalink_url(item)}}" class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
+        <a href="{%- if item.meta.link %}{{item.meta.link}}{%- else %}{{permalink_url(item)}}{%- endif %}"
+           {%- if item.meta.link %}target="_blank"{%- endif %}
+           class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
           {{item.title}}
           <span class="chinese">{{item.meta.chinese}}</span>
         </a>

site/templates/demos.html

@@ -33,7 +33,7 @@
   </div>
   {%- endif %}
 </div>
-<ul class="demos-anchor">
+<ul class="toc demos-anchor">
   {%- for item in items %}
   {%- set post = item.meta.filepath|parsePost %}
   <li>

site/templates/footer.html

@@ -14,11 +14,11 @@
       <h2>联系我们</h2>
       <a target="_blank" href="{{ config.site.issues }}">反馈和建议</a>
       <a target="_blank" href="https://gitter.im/ant-design/ant-design">讨论</a>
-      <a target="_blank" href="http://dwz.cn/2dJ2mg">报告 Bug</a>
+      <a target="_blank" href="http://t.cn/R4XEpoQ">报告 Bug</a>
     </li>
     <li>
-      <h3>©2015 蚂蚁金服体验技术部出品</h3>
-      <h3>文档版本：<span id="versions-select"></span></h3>
+      <div>©2015 蚂蚁金服体验技术部出品</div>
+      <div>文档版本：<span id="versions-select"></span></div>
     </li>
   </ul>
 </footer>

site/templates/home.html

@@ -1,39 +1,250 @@
 {% extends "layout.html" %}
 
-{% block styles %}
-<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
-{% endblock %}
-
 {% block bodyAttribute %}class="index-page"{% endblock %}
 
 {% block content %}
-<div class="main-box" id="main">
-  <div class="banner-box">
-    <div id="bannerAnim"></div>
-    <div class="banner-entry fn-hide">
-      <div class="entry-title">Ant</div>
-      <div class="entry-title">Design</div>
-      <div class="entry-slogan">
-        {{ config.site.description }}
-      </div>
-      <a class="entry-link" href="{{static_url('../spec/introduce')}}">
-        <i class="anticon anticon-smile"></i>
-        开始探索
-      </a>
-    </div>
-    <div class="banner-img fn-alpha-out"></div>
-  </div>
-</div>
-<script src="{{static_url('homeLoad.js')}}"></script>
+<link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
+<section id="banner"></section>
+<section id="page1" class="page"></section>
+<section id="page2" class="page"></section>
+<section id="page3" class="page"></section>
+<section id="page4" class="page"></section>
 <style>
-.main-wrapper {
-  overflow: hidden;
-  position: relative;
-  height: calc(100% - 190px);
-  min-height: 500px;
-  background: #fff;
-  transform-style: preserve-3d;
-  transition: transform .6s cubic-bezier(0.785, 0.135, 0.15, 0.86), height .5s ease-out;
-}
+  .main-wrapper {
+    background: transparent;
+    width: auto;
+    margin: 0;
+    border-radius: 0;
+    padding: 0;
+    overflow: unset;
+    display: inline;
+    min-height: 600px;
+  }
+
+  #home-page,
+  #home-page > div {
+    height: 100%;
+  }
+
+  header {
+    position: fixed;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.25);
+    border-bottom: 1px solid transparent;
+    transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
+
+  header .nav ul li a {
+    color: #eee;
+  }
+
+  .nav ul li a {
+    transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
+
+  .search {
+    border-left-color: rgba(235, 237, 238, .5);
+    transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
+
+  .search #autoComplete .ant-select-selection {
+    background: transparent;
+  }
+
+  #banner {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    background: url("https://os.alipayobjects.com/rmsportal/GhjqstwSgxBXrZS.png") no-repeat center / cover;
+  }
+
+  .banner-text-wrapper {
+    position: absolute;
+    left: 10%;
+    top: 58%;
+    color: #fff;
+    text-align: right;
+  }
+
+  header.home-nav-bottom {
+    background: rgba(255, 255, 255, 0.9);
+    border-bottom-color: #EBEDEE;
+  }
+
+  .home-nav-bottom .search {
+    border-left-color: #EBEDEE;
+  }
+
+  .home-nav-bottom .nav a {
+    color: #666;
+  }
+
+  .banner-text-wrapper h2 {
+    font-size: 40px;
+    font-weight: normal;
+    font-family: 'Raleway';
+  }
+
+  .banner-text-wrapper h2 p {
+    color: #FF3171;
+    display: inline-block;
+  }
+
+  .banner-text-wrapper .line {
+    width: 0.8px;
+    height: 76px;
+    position: absolute;
+    background: rgba(255, 255, 255, .44);
+    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
+    background-image: -moz-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
+    background-image: -ms-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
+    background-image: -o-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
+    top: 16px;
+    right: -25px;
+  }
+
+  .banner-text-wrapper > p {
+    margin: 10px auto 30px;
+    font-size: 16px;
+  }
+
+  .banner-text-wrapper a {
+    float: right;
+    width: 155px;
+    height: 45px;
+    border-radius: 6px;
+    border: 1px solid #00AAEE;
+    color: #00AAEE;
+    font-size: 18px;
+    background: transparent;
+    transition: box-shadow .45s ease-out;
+    text-align: center;
+    line-height: 42px;
+  }
+
+  .banner-text-wrapper a:hover {
+    box-shadow: 0 0 10px #00AAEE;
+  }
+
+  .banner-text-wrapper a span {
+    margin-left: 15px;
+  }
+
+  .down {
+    text-align: center;
+    position: absolute;
+    bottom: 30px;
+    color: rgba(255, 255, 255, .75);
+    left: 50%;
+    margin-left: -7px;
+  }
+
+  section {
+    height: 100%;
+    width: 100%;
+    background: #fff;
+  }
+
+  .page {
+    min-height: 700px;
+  }
+
+  .content-wrapper {
+    width: 100%;
+    height: 100%;
+    max-width: 1850px;
+    margin: auto;
+    overflow: hidden;
+  }
+
+  .content-wrapper .image-wrapper {
+    width: 65%;
+    float: left;
+    position: relative;
+  }
+
+  .image1 {
+    background: url("https://t.alipayobjects.com/images/T1Ch8kXfpdXXXXXXXX.png") no-repeat right / 841px;
+    height: 511px;
+    top: 50%;
+    margin-top: -256px;
+  }
+
+  .image2 {
+    background: url("https://t.alipayobjects.com/images/T1r5RkXotXXXXXXXXX.png") no-repeat left / 800px;
+    height: 474px;
+    top: 50%;
+    margin-top: -266px;
+  }
+
+  .image3 {
+    padding-right: 10%;
+    background: url("https://t.alipayobjects.com/images/T1nx0kXdFfXXXXXXXX.png") no-repeat right / 639px;
+    background-origin: content-box;
+    height: 500px;
+    top: 50%;
+    margin-top: -250px;
+  }
+
+  .image4 {
+    background: url("https://t.alipayobjects.com/images/T1lyJkXg4aXXXXXXXX.png") no-repeat center / 615px;
+    height: 364px;
+    margin: auto;
+  }
+
+  .content-wrapper .text-wrapper {
+    width: 35%;
+    float: left;
+    position: relative;
+    top: 20%;
+    left: 10px;
+  }
+
+  .content-wrapper .text-wrapper h2,
+  .content-wrapper .text-wrapper-bottom h2 {
+    font-size: 32px;
+    color: #666;
+    font-weight: normal;
+  }
+
+  .content-wrapper .text-wrapper p {
+    margin: 10px 0 20px;
+    font-size: 16px;
+    line-height: 28px;
+    color: #999999;
+  }
+
+  .content-wrapper .left-text {
+    padding-left: 10%;
+  }
+
+  .text-wrapper-bottom {
+    text-align: center;
+    margin: 10% auto 40px;
+  }
+
+  .text-wrapper-bottom p {
+    margin: 20px auto;
+    font-size: 16px;
+    line-height: 28px;
+    color: #999;
+  }
+
+  #footer {
+    background: #000;
+  }
+
+  .anticon-right {
+    transform: scale(0.6);
+  }
+
+  footer,
+  footer ul li > h2 {
+    color: #999;
+  }
+
+  footer ul li > a {
+    color: #eee;
+  }
 </style>
 {% endblock %}

site/templates/layout.html

@@ -12,8 +12,8 @@
     <link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
     <link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
     {% block styles %}{% endblock %}
-    <link rel="stylesheet" href="{{static_url('../dist/demo.css')}}">
-    <link rel="stylesheet" href="{{static_url('style.css')}}">
+    <link rel="stylesheet" href="{{static_url('../dist/demo.css')}}?20160114">
+    <link rel="stylesheet" href="{{static_url('style.css')}}?20160114">
     <link rel="stylesheet" href="{{static_url('tomorrow.css')}}">
     <!--[if IE 8]>
     <script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
@@ -38,13 +38,13 @@
       }
     })();
     </script>
-    <script src="{{static_url('script.js')}}"></script>
+    <script src="{{static_url('script.js')}}?20160114"></script>
     <script>
       window.antdVersion = {
         latest: '{{config.package.version}}'
       };
     </script>
-    <script src="{{static_url('../dist/demo.js')}}"></script>
+    <script src="{{static_url('../dist/demo.js')}}?20160114"></script>
     <script src="https://t.alipayobjects.com/images/T1DrxhXe0mXXXXXXXX.js"></script>
     {% block scripts %}{% endblock %}
   </head>
@@ -57,23 +57,26 @@
       <div class="search">
         <div id="autoComplete"></div>
       </div>
-      <div class="global-hint">
-        0.11 已发布，0.10 文档请访问 <a href="http://010x.ant.design/">010x.ant.design</a>
-      </div>
       <nav class="nav">
         <span class="bar"></span>
         <ul>
           <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
-            <a href="{{static_url('../')}}" data-no-instant>首页</a>
+            <a href="{{static_url('../')}}">首页</a>
           </li>
-          <li class="{%- if post.directory|rootDirectoryIn(['spec']) %}current{%- endif %}">
-            <a href="{{static_url('../spec/introduce')}}">设计</a>
+          <li class="{%- if post.directory|rootDirectoryIn(['docs/practice']) %}current{%- endif %}">
+            <a href="{{static_url('../docs/practice/cases')}}">实践</a>
           </li>
-          <li class="{%- if post.directory|rootDirectoryIn(['docs','components']) or post.meta.filepath === 'CHANGELOG.md' %}current{%- endif %}">
-            <a href="{{static_url('../docs/introduce')}}">React UI</a>
+          <li class="{%- if post.directory|rootDirectoryIn(['docs/pattern']) %}current{%- endif %}">
+            <a href="{{static_url('../docs/pattern/navigation')}}">模式</a>
           </li>
-          <li>
-            <a target="_blank" href="https://github.com/ant-design/ant-design">Github</a>
+          <li class="{%- if post.directory|rootDirectoryIn(['docs/react','components']) or post.meta.filepath === 'CHANGELOG.md' %}current{%- endif %}">
+            <a href="{{static_url('../docs/react/introduce')}}">组件</a>
+          </li>
+          <li class="{%- if post.directory|rootDirectoryIn(['docs/spec']) %}current{%- endif %}">
+            <a href="{{static_url('../docs/spec/introduce')}}">语言</a>
+          </li>
+          <li class="{%- if post.directory|rootDirectoryIn(['docs/resource']) %}current{%- endif %}">
+            <a href="{{static_url('../docs/resource/download')}}">资源</a>
           </li>
         </ul>
       </nav>

site/templates/page.html

@@ -18,8 +18,8 @@
 <section class="main-container">
   <article class="markdown">
     <h1>{{ post.title }} {{ post.meta.chinese }}</h1>
+    <div class="toc">{{ post.toc }}</div>
     {{ post.html|add_anchor }}
   </article>
 </section>
 {% endblock %}
-

site/theme.js

@@ -15,6 +15,17 @@ module.exports = function(nico) {
     return Posts;
   }
 
+  function getRootDirectory(directory) {
+    var rootDirectory;
+    var directoryArray = directory.split('/');
+    if (directory.indexOf('docs/') === 0) {
+      rootDirectory = directoryArray[0] + '/' + directoryArray[1];
+    } else {
+      rootDirectory = directoryArray[0];
+    }
+    return rootDirectory;
+  }
+
   exports.reader = function(post) {
     var filepath = post.meta.filepath.toLowerCase();
     if (filepath.indexOf('components') === 0) {
@@ -51,15 +62,15 @@ module.exports = function(nico) {
       return ret;
     },
     get_categories: function(posts, post) {
-      var rootDirectory = post.directory.split('/')[0];
+      var rootDirectory = getRootDirectory(post.directory);
       if (!rootDirectory && post.filename.indexOf('CHANGELOG') < 0) {
         return;
       }
       var directories = [rootDirectory];
       // docs 和 components 放在同一页
-      if (rootDirectory === 'docs' || rootDirectory === 'components' ||
+      if (rootDirectory === 'docs/react' || rootDirectory === 'components' ||
           post.filename.indexOf('CHANGELOG') >= 0) {
-        directories = ['docs', 'components'];
+        directories = ['docs/react', 'components'];
       }
       var cacheKey = directories.join('-');
       var categories;
@@ -68,7 +79,7 @@ module.exports = function(nico) {
       } else {
         categories = {};
         _.uniq(getAllPosts(posts).forEach(function(item) {
-          var itemDirectory = item.directory.split('/')[0];
+          var itemDirectory = getRootDirectory(item.directory);
           var cat = item.meta.category;
           if (!cat) {
             return;
@@ -153,7 +164,7 @@ module.exports = function(nico) {
       });
     },
     rootDirectoryIn: function(directory, rootDirectories) {
-      return rootDirectories.indexOf(directory.split('/')[0]) >= 0;
+      return rootDirectories.indexOf(getRootDirectory(directory)) >= 0;
     },
     removeCodeBoxIdPrefix: function(id) {
       return id.split('-').slice(2).join('-');

spec/tools.md

@@ -1,57 +0,0 @@
-# 资源下载
-
-- category: 资源
-
----
-
-这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
-
-### 交互部件库
-
-<a target="_blank" href="https://github.com/ant-design/ant-design/files/69428/Ant_Design_Components.rplib.zip" class="download-link">
-  <img src="https://os.alipayobjects.com/rmsportal/sJkbErZhOdoiRia.svg" width="30" style="position: relative; top: -2px;">
-  Axure Widgets
-</a>
-
-### 组件视觉稿
-
-<a target="_blank" href="" class="download-link disabled">
-  <img src="https://os.alipayobjects.com/rmsportal/gdYSqrQMvHHrOoC.svg" width="32">
-  For Sketch
-</a>
-
-### 图标
-
-<a target="_blank" href="" class="download-link disabled">
-  <img src="https://os.alipayobjects.com/rmsportal/gdYSqrQMvHHrOoC.svg" width="32">
-  svg set
-</a>
-<a target="_blank" href="https://github.com/ant-design/ant-design/files/57840/iconfont.zip" class="download-link">
-  <img src="https://os.alipayobjects.com/rmsportal/ytqOwOOWgYrDPfT.svg" width="32">
-  Iconfont set
-</a>
-
-<style>
-.download-link {
-  width: 220px;
-  height: 130px;
-  border: 1px solid #e9e9e9;
-  background: #fafafa;
-  border-radius: 6px;
-  line-height: 130px;
-  text-align: center;
-  font-size: 14px;
-  color: #777;
-  display: inline-block;
-  margin-right: 16px;
-  text-transform: uppercase;
-}
-.download-link.disabled {
-  opacity: 0.45;
-  pointer-events: none;
-}
-.download-link img {
-  margin-right: 8px;
-  opacity: 0.
-}
-</style>

style/components/datepicker.less

@@ -14,3 +14,4 @@
 @import "datepicker/MonthPanel";
 @import "datepicker/YearPanel";
 @import "datepicker/DecadePanel";
+@import "datepicker/MonthPicker";

style/components/datepicker/MonthPicker.less

@@ -0,0 +1,6 @@
+.@{calendar-prefix-cls}-month {
+  .@{calendar-prefix-cls}-month-panel,
+  .@{calendar-prefix-cls}-year-panel {
+    top: 0;
+  }
+}

style/components/datepicker/RangePicker.less

@@ -28,7 +28,6 @@
 
   &-part {
     width: 50%;
-    position: relative;
   }
 
   &-left {

style/components/dropdown.less

@@ -30,7 +30,8 @@
     }
   }
 
-  &-hidden {
+  &-hidden,
+  &-menu-hidden {
     display: none;
   }
 
@@ -46,15 +47,11 @@
     box-shadow: @box-shadow-base;
     background-clip: padding-box;
     border: 1px solid @border-color-base;
-    overflow: hidden;
 
-    > li {
-      margin: 0;
-      padding: 0;
-    }
-
-    & > &-item {
+    &-item,
+    &-submenu-title {
       padding: 7px 15px;
+      margin: 0;
       clear: both;
       font-size: 12px;
       font-weight: normal;
@@ -86,14 +83,12 @@
         }
       }
 
-      &:last-child {
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
+      &:first-child {
+        border-radius: @border-radius-base @border-radius-base 0 0;
       }
 
-      &:first-child {
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
+      &:last-child {
+        border-radius: 0 0 @border-radius-base @border-radius-base;
       }
 
       &-divider {
@@ -103,6 +98,36 @@
         line-height: 0;
       }
     }
+
+    &-submenu-title:after {
+      font-family: "anticon" !important;
+      position: absolute;
+      content: "\e600";
+      right: 15px;
+      color: #999;
+      .iconfont-size-under-12px(8px);
+    }
+
+    &-submenu-vertical {
+      position: relative;
+    }
+
+    &-submenu-vertical > & {
+      top: 0;
+      left: 100%;
+      position: absolute;
+      min-width: 100%;
+      margin-left: 4px;
+      transform-origin: 0 0;
+    }
+
+    &-submenu:first-child &-submenu-title {
+      border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+
+    &-submenu:last-child &-submenu-title {
+      border-radius: 0 0 @border-radius-base @border-radius-base;
+    }
   }
 
   &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,

style/components/form.less

@@ -71,6 +71,10 @@ input[type="checkbox"] {
   margin-bottom: @form-item-margin-bottom;
   color: #666;
 
+  &.@{css-prefix}form-item-with-help {
+    margin-bottom: @form-item-margin-bottom - @font-size-base * @line-height-base;
+  }
+
   > label {
     color: @label-color;
     text-align: right;
@@ -104,10 +108,7 @@ input[type="checkbox"] {
 }
 
 .@{css-prefix}form-explain {
-  position: absolute;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  bottom: -@line-height-computed;
+  float: left;
 }
 
 

style/components/menu.less

@@ -35,6 +35,14 @@
     transition: all 0.3s ease;
   }
 
+  &-item > a {
+    display: block;
+    color: @text-color;
+    &:hover {
+      color: @text-color;
+    }
+  }
+
   &-item-active,
   &-submenu-title:hover {
     background-color: tint(@primary-color, 90%);
@@ -58,7 +66,7 @@
   &-vertical {
     border-right: 1px solid #e9e9e9;
     .@{menu-prefix-cls}-item {
-      border-right: 2px solid transparent;
+      border-right: 1px solid #e9e9e9;
       margin-left: -1px;
       left: 1px;
       position: relative;

style/components/select.less

@@ -377,6 +377,8 @@
       color: #666;
       white-space: nowrap;
       cursor: pointer;
+      white-space: nowrap;
+      text-overflow: ellipsis;
       overflow: hidden;
       transition: background 0.3s ease;
 

style/components/timepicker/Picker.less

@@ -1,5 +1,5 @@
 .@{timepicker-prefix-cls}-panel {
-  min-width: 168px;
+  max-width: 168px;
   z-index: 1070;
   position: absolute;
 

style/components/upload.less

@@ -160,6 +160,7 @@
     height: 48px;
     display: inline-block;
     overflow: hidden;
+    vertical-align: middle;
   }
 
   &-picture &-item-thumbnail img {
@@ -178,7 +179,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    vertical-align: top;
     margin: 0 0 0 8px;
     line-height: 42px;
     transition: all 0.3s ease;

style/core/base.less

@@ -70,7 +70,7 @@ a {
   }
 
   &[disabled] {
-    // color: @grey-200;
+    color: #ccc;
     cursor: not-allowed;
     pointer-events: none;
   }

style/core/iconfont.less

@@ -65,7 +65,6 @@
 .@{iconfont-css-prefix}-search:before                   {content:"\e690";}
 .@{iconfont-css-prefix}-share-alt:before                {content:"\e68e";}
 .@{iconfont-css-prefix}-setting:before                  {content:"\e68d";}
-.@{iconfont-css-prefix}-search:before                   {content:"\e68c";}
 .@{iconfont-css-prefix}-poweroff:before                 {content:"\e68b";}
 .@{iconfont-css-prefix}-picture:before                  {content:"\e689";}
 .@{iconfont-css-prefix}-phone:before                    {content:"\e688";}
@@ -179,6 +178,7 @@
 .@{iconfont-css-prefix}-caret-circle-up:before          {content:"\e606";}
 .@{iconfont-css-prefix}-caret-circle-down:before        {content:"\e607";}
 .@{iconfont-css-prefix}-qrcode:before                   {content:"\e6a5";}
+.@{iconfont-css-prefix}-scan:before                     {content:"\e6af";}
 .@{iconfont-css-prefix}-like:before                     {content:"\e6a3";}
 .@{iconfont-css-prefix}-dislike:before                  {content:"\e6a2";}
 .@{iconfont-css-prefix}-pay-circle:before               {content:"\e6a8";}