update site appearnce

libs/markdown/index.js

@@ -44,7 +44,17 @@ export default class Markdown extends Component {
     const renderer = new marked.Renderer();
 
     renderer.code = (text) => {
-      return text
+      if (/demo-block/.test(text)) {
+        return text;
+      } else {
+        return `
+          <div class="demo-block">
+            <pre class="fixed">
+              <code>${highlight.highlightAuto(text).value}</code>
+            </pre>
+          </div>
+        `
+      }
     }
 
     marked.setOptions({
@@ -54,12 +64,13 @@ export default class Markdown extends Component {
     });
 
     const html = marked(this.props.children.replace(/:::\s?demo\s?([^]+?):::/g, (match, p1, offset) => {
-      return p1.replace(/(.*)\n?(```[^]+)/, (match, p1, p2) => {
+      return p1.replace(/([^]*)\n?(```[^]+```)/, (match, p1, p2) => {
         const id = offset.toString(36);
         const matched = p2.match(/```(.*)\n([^]+)```/);
         const lang = matched[1], code = matched[2].replace(/this/g, 'context');
 
-        let transformTarget = null
+        let transformTarget = null;
+
         if (lang === 'javascript'){
           transformTarget = code
         }else{
@@ -76,7 +87,7 @@ export default class Markdown extends Component {
           <div class="demo-block demo-box demo-${this.props.component.toLowerCase()}">
             <div class="source" id="${id}"></div>
             <div class="meta">
-              <div class="description">${marked(p1)}</div>
+              <div class="description">${p1 && marked(p1)}</div>
               <div class="highlight">${marked(p2)}</div>
             </div>
           </div>

site/docs/zh-CN/badge.md

@@ -0,0 +1,71 @@
+## Badge 标记
+
+出现在按钮、图标旁的数字或状态标记。
+
+### 基础用法
+展示新消息数量。
+
+:::demo 定义`value`属性，它接受`Number`或者`String`。
+
+```html
+<Badge value={ 12 } className="demo-badge">
+  <Button size="small">评论</Button>
+</Badge>
+<Badge value={ 3 } className="demo-badge">
+  <Button size="small">回复</Button>
+</Badge>
+<Button type="text">等待下拉菜单</Button>
+```
+:::
+
+### 最大值
+可自定义最大值。
+
+:::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。
+
+```html
+<Badge value={ 200 } max={ 99 } className="demo-badge">
+  <Button size="small">评论</Button>
+</Badge>
+<Badge value={ 100 } max={ 10 } className="demo-badge">
+  <Button size="small">回复</Button>
+</Badge>
+```
+:::
+
+### 自定义内容
+可以显示数字以外的文本内容。
+
+:::demo 定义`value`为`String`类型是时可以用于显示自定义文本。
+
+```html
+<Badge value={ 'new' } className="demo-badge">
+  <Button size="small">评论</Button>
+</Badge>
+<Badge value={ 'hot' } className="demo-badge">
+  <Button size="small">回复</Button>
+</Badge>
+```
+:::
+
+### 小红点
+以红点的形式标注需要关注的内容。
+
+:::demo 除了数字外，设置`isDot`属性，它接受一个`Boolean`。
+
+```html
+<Badge isDot className="demo-badge">
+  数据查询
+</Badge>
+<Badge isDot className="demo-badge">
+  <Button icon="share" type="primary"></Button>
+</Badge>
+```
+:::
+
+### Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| value          | 显示值      | string, number          |          —             |    —     |
+| max          |  最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |
+| isDot       | 小圆点    | boolean  |  —  |  false |

site/docs/zh-CN/progress.md

@@ -0,0 +1,52 @@
+## Progress 进度条
+
+用于展示操作进度，告知用户当前状态和预期。
+
+### 线形进度条 — 百分比外显
+
+:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。
+
+```html
+<Progress percentage={0} />
+<Progress percentage={70} />
+<Progress percentage={100} status="success" />
+<Progress percentage={50} status="exception" />
+```
+:::
+
+### 线形进度条 — 百分比内显
+
+百分比不占用额外控件，适用于文件上传等场景。
+
+:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `desc-inside` 属性来将进度条描述置于进度条内部。
+
+```html
+<Progress strokeWidth={18} percentage={0} textInside />
+<Progress strokeWidth={18} percentage={70} textInside />
+<Progress strokeWidth={18}  status="success" textInside />
+<Progress strokeWidth={18} percentage={50} status="exception" textInside />
+```
+:::
+
+### 环形进度条
+
+:::demo Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
+
+```html
+<Progress type="circle" percentage={0} />
+<Progress type="circle" percentage={25} />
+<Progress type="circle" percentage={100} status="success" />
+<Progress type="circle" percentage={50} status="exception" />
+```
+:::
+
+### Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| **percentage** | **百分比（必填）**   | number          |     0-100          |     0    |
+| type          | 进度条类型           | string         | line/circle | line |
+| stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
+| text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | Boolean | — | false |
+| status  | 进度条当前状态 | string | success/exception | — |
+| width  | 环形进度条画布宽度（只在 type=circle 时可用） | number |  | 126 |
+| show-text  | 是否显示进度条文字内容 | boolean | — | true |

site/pages/badge/index.js

@@ -1,76 +1,11 @@
-import React from 'react';
-import { Button, Badge } from '../../../src';
-
 import './style.scss';
 
+import React from 'react';
+import { Component, Markdown } from '../../../libs';
+import template from '../../docs/zh-CN/badge.md';
+
 export default class Playground extends React.Component {
   render() {
-    return (
-      <div>
-        <section className="demo-section">
-          <div className="demo-header">
-            <h2>Badge 标记</h2>
-            <p>出现在按钮、图标旁的数字或状态标记。</p>
-          </div>
-        </section>
-        <section className="demo-section">
-          <div className="demo-header">
-            <h3>基础用法</h3>
-            <p>展示新消息数量。</p>
-          </div>
-          <div className="demo-content">
-            <Badge value={ 12 } className="demo-badge">
-              <Button size="small">评论</Button>
-            </Badge>
-            <Badge value={ 3 } className="demo-badge">
-              <Button size="small">回复</Button>
-            </Badge>
-            <Button type="text">等待下拉菜单</Button>
-          </div>
-        </section>
-        <section className="demo-section">
-          <div className="demo-header">
-            <h3>最大值</h3>
-            <p>可自定义最大值。</p>
-          </div>
-          <div className="demo-content">
-            <Badge value={ 200 } max={ 99 } className="demo-badge">
-              <Button size="small">评论</Button>
-            </Badge>
-            <Badge value={ 100 } max={ 10 } className="demo-badge">
-              <Button size="small">回复</Button>
-            </Badge>
-          </div>
-        </section>
-        <section className="demo-section">
-          <div className="demo-header">
-            <h3>自定义内容</h3>
-            <p>可以显示数字以外的文本内容。</p>
-          </div>
-          <div className="demo-content">
-            <Badge value={ 'new' } className="demo-badge">
-              <Button size="small">评论</Button>
-            </Badge>
-            <Badge value={ 'hot' } className="demo-badge">
-              <Button size="small">回复</Button>
-            </Badge>
-          </div>
-        </section>
-        <section className="demo-section">
-          <div className="demo-header">
-            <h3>小红点</h3>
-            <p>以红点的形式标注需要关注的内容。</p>
-          </div>
-          <div className="demo-content">
-            <Badge isDot className="demo-badge">
-              数据查询
-            </Badge>
-            <Badge isDot className="demo-badge">
-              <Button icon="share" type="primary"></Button>
-            </Badge>
-          </div>
-        </section>
-      </div>
-    )
+    return <Markdown context={this} component="Badge">{template}</Markdown>
   }
 }

site/pages/badge/style.scss

@@ -1,3 +1,5 @@
 .demo-badge {
-  margin-right: 40px;
+  .el-badge {
+    margin-right: 40px;
+  }
 }

site/pages/index.js

@@ -21,72 +21,106 @@ import Tree from './tree'
 
 // pages是有序的Object, 会影响到左侧的菜单顺序.
 const pages = {
-  layout: { title: 'Layout 布局', component: Layout },
-  button: { title: 'Button 按钮', component: Button },
-  radio: { title: 'Radio 单选框', component: Radio },
-  progress: { title: 'Progress 进度条', component: Progress },
-  tree: { title: 'Tree 树形控件', component: Tree },
-  badge: { title: 'Badge 标记', component: Badge },
-  alert: { title: 'Alert 警告', component: Alert },
-  loading: { title: 'Loading 加载', component: Loading },
-  message: { title: 'Message 消息提示', component: Message },
-  messageBox: { title: 'Message Box 弹框', component: MessageBox },
-  notification: { title: 'Notification 通知', component: Notification },
-  dialog: { title: 'Dialog 对话框', component: Dialog },
-  card: { title: 'Card 卡片', component: Card }
+  'Basic': {
+    layout: { title: 'Layout 布局', component: Layout },
+    button: { title: 'Button 按钮', component: Button },
+  },
+  'Form': {
+    radio: { title: 'Radio 单选框', component: Radio },
+  },
+  'Data': {
+    progress: { title: 'Progress 进度条', component: Progress },
+    tree: { title: 'Tree 树形控件', component: Tree },
+    badge: { title: 'Badge 标记', component: Badge },
+  },
+  'Notice': {
+    alert: { title: 'Alert 警告', component: Alert },
+    loading: { title: 'Loading 加载', component: Loading },
+    message: { title: 'Message 消息提示', component: Message },
+    messageBox: { title: 'Message Box 弹框', component: MessageBox },
+    notification: { title: 'Notification 通知', component: Notification },
+  },
+  'Nav': {
+
+  },
+  'Others': {
+    dialog: { title: 'Dialog 对话框', component: Dialog },
+    card: { title: 'Card 卡片', component: Card }
+  }
 };
 
-const HASH_OFFSET = 1
 class App extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      page: location.hash.substr(HASH_OFFSET) || 'layout' // Do not change this line
+      page: this.getPage() || 'layout' // Do not change this line
     };
   }
 
   componentDidMount() {
     window.addEventListener("hashchange", e => {
       this.setState({
-        page: location.hash.substr(HASH_OFFSET)
+        page: this.getPage()
       })
     }, false);
   }
 
+  getPage() {
+    return location.hash.substr(1);
+  }
+
+  getComponent(page) {
+    this.components = this.components || Object.assign.apply(this, [{}].concat(Object.keys(pages).map(group => {
+      return pages[group]
+    })));
+
+    return this.components[page].component;
+  }
+
   render() {
     return (
       <div className="app">
         <header className="header">
           <h1>Element-React</h1>
         </header>
         <div className="main">
-          <nav className="menu">
+          <nav className="side-nav">
             <ul>
-              {
-                Object.keys(pages).map(page => {
-                  return (
-                    <li key={page} className="menu-item" onClick={this.onSelect.bind(this, page)}>
-                      <a href={`#${page}`}>{pages[page].title}</a>
-                    </li>
-                  )
-                })
-              }
+              <li className="nav-item">
+                <a>基础组件</a>
+                {
+                  Object.keys(pages).map(group => {
+                    return (
+                      <div className="nav-group" key={group}>
+                        <div className="nav-group__title">{group}</div>
+                        <ul className="pure-menu-list">
+                          {
+                            Object.keys(pages[group]).map(page => {
+                              return (
+                                <li key={page} className="nav-item">
+                                  <a href={`#${page}`}>{pages[group][page].title}</a>
+                                </li>
+                              )
+                            })
+                          }
+                        </ul>
+                      </div>
+                    )
+                  })
+                }
+              </li>
             </ul>
           </nav>
           <div className="content">
             {
-              React.createElement(pages[this.state.page].component)
+              React.createElement(this.getComponent(this.state.page))
             }
           </div>
         </div>
       </div>
     )
   }
-
-  onSelect(page) {
-    this.setState({ page })
-  }
 }
 
 ReactDOM.render(<App />, document.getElementById('app'));