From 190bffa1144a77d3f03517b7d63fa9cfe08ab377 Mon Sep 17 00:00:00 2001
From: koppthe <kopptsoft@gmail.com>
Date: Fri, 27 Jul 2018 14:32:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(doc):=20=E9=87=8D=E6=9E=84=E5=9F=BA?=
 =?UTF-8?q?=E7=A1=80=E7=BB=84=E4=BB=B6=E5=B1=95=E7=A4=BA=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/basic/button/index.js   | 199 ++++++++++++++++++------------
 src/pages/basic/button/index.scss |   6 +-
 src/pages/basic/icon/index.js     |  23 +++-
 src/pages/basic/icon/index.scss   |   6 +-
 4 files changed, 137 insertions(+), 97 deletions(-)

diff --git a/src/pages/basic/button/index.js b/src/pages/basic/button/index.js
index 8da5d233b..a67a67b3f 100644
--- a/src/pages/basic/button/index.js
+++ b/src/pages/basic/button/index.js
@@ -22,96 +22,131 @@ export default class ButtonPage extends Taro.Component {
   }
 
   render () {
-    // let {icons} = this.state
     return (
       <View className='page'>
-        <View className='example'>
-          <AtButton type='primary' onClick={this.onButtonClick.bind(this)}>页面主操作</AtButton>
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>按钮</View>
         </View>
-        <View className='example'>
-          <AtButton type='primary' loading onClick={this.onButtonClick.bind(this)}>带loading</AtButton>
-        </View>
-        <View className='example'>
-          <AtButton type='primary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
-        </View>
-        <View className='example'>
-          <AtButton type='primary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
-        </View>
-        <View className='example'>
-          <AtButton type='primary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
-        </View>
-
+        {/* E Header */}
 
-        <View className='example'>
-          <AtButton type='secondary' onClick={this.onButtonClick.bind(this)}>页面次操作</AtButton>
-        </View>
-        <View className='example'>
-          <AtButton type='secondary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
-        </View>
-        <View className='example'>
-          <AtButton type='secondary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
-        </View>
-        <View className='example'>
-          <AtButton type='secondary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
-        </View>
-
-        <View className='example'>
-          <AtButton onClick={this.onButtonClick.bind(this)}>页面次要操作</AtButton>
-        </View>
-        <View className='example'>
-          <AtButton icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
-        </View>
-        <View className='example'>
-          <AtButton active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
-        </View>
-        <View className='example'>
-          <AtButton disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
-        </View>
+        {/* S Body */}
+        <View className='doc-body'>
+          {/* 主操作 */}
+          <View className='panel'>
+            <View className='panel__title'>主操作</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtButton type='primary' onClick={this.onButtonClick.bind(this)}>页面主操作</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton type='primary' loading onClick={this.onButtonClick.bind(this)}>带loading</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton type='primary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton type='primary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton type='primary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
+              </View>
+            </View>
+          </View>
 
-        <View className='example small'>
-          <AtButton type='primary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton type='secondary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-        </View>
-        <View className='example small'>
-          <AtButton type='primary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
-          <AtButton type='secondary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
-          <AtButton size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
-        </View>
-        <View className='example small'>
-          <AtButton type='primary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton type='secondary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-        </View>
-        <View className='example small'>
-          <AtButton type='primary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton type='secondary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-        </View>
+          {/* 次操作 */}
+          <View className='panel'>
+            <View className='panel__title'>主操作</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtButton type='secondary' onClick={this.onButtonClick.bind(this)}>页面次操作</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton type='secondary' icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton type='secondary' active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton type='secondary' disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
+              </View>
+            </View>
+          </View>
 
-        {/* 带圆角 */}
-        <View className='example small'>
-          <AtButton type='primary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton type='secondary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-        </View>
-        <View className='example small'>
-          <AtButton type='primary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
-          <AtButton type='secondary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
-          <AtButton size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
-        </View>
-        <View className='example small'>
-          <AtButton type='primary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton type='secondary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-        </View>
-        <View className='example small'>
-          <AtButton type='primary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton type='secondary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-          <AtButton size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
-        </View>
+          {/* 线框按钮 */}
+          <View className='panel'>
+            <View className='panel__title'>线框按钮</View>
+            <View className='panel__content'>
+              <View className='example'>
+                <AtButton onClick={this.onButtonClick.bind(this)}>页面次要操作</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton icon='activity' onClick={this.onButtonClick.bind(this)}>带icon</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton active onClick={this.onButtonClick.bind(this)}>点击态</AtButton>
+              </View>
+              <View className='example'>
+                <AtButton disabled onClick={this.onButtonClick.bind(this)}>不可操作</AtButton>
+              </View>
+            </View>
+          </View>
 
+          {/* 小按钮 */}
+          <View className='panel'>
+            <View className='panel__title'>小按钮</View>
+            <View className='panel__content'>
+              <View className='example small'>
+                <AtButton type='primary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton type='secondary' size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton size='small' onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+              </View>
+              <View className='example small'>
+                <AtButton type='primary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
+                <AtButton type='secondary' size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
+                <AtButton size='small' loading onClick={this.onButtonClick.bind(this)}></AtButton>
+              </View>
+              <View className='example small'>
+                <AtButton type='primary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton type='secondary' size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton size='small' active onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+              </View>
+              <View className='example small'>
+                <AtButton type='primary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton type='secondary' size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton size='small' disabled onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+              </View>
+            </View>
+          </View>
 
+          {/* 圆角按钮 */}
+          <View className='panel'>
+            <View className='panel__title'>圆角按钮</View>
+            <View className='panel__content'>
+              <View className='example small'>
+                <AtButton type='primary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton type='secondary' size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton size='small' circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+              </View>
+              <View className='example small'>
+                <AtButton type='primary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
+                <AtButton type='secondary' size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
+                <AtButton size='small' loading circle onClick={this.onButtonClick.bind(this)}></AtButton>
+              </View>
+              <View className='example small'>
+                <AtButton type='primary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton type='secondary' size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton size='small' active circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+              </View>
+              <View className='example small'>
+                <AtButton type='primary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton type='secondary' size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+                <AtButton size='small' disabled circle onClick={this.onButtonClick.bind(this)}>按钮</AtButton>
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* E Body */}
       </View>
     )
   }
diff --git a/src/pages/basic/button/index.scss b/src/pages/basic/button/index.scss
index 0d54ab3d2..846b052ac 100644
--- a/src/pages/basic/button/index.scss
+++ b/src/pages/basic/button/index.scss
@@ -1,8 +1,4 @@
-
-
-.page {
-  background-color: #fff;
-}
+@import '../../../assets/style/common.scss';
 
 .example {
   margin-bottom: 15px;
diff --git a/src/pages/basic/icon/index.js b/src/pages/basic/icon/index.js
index 3727934d8..fc3209968 100644
--- a/src/pages/basic/icon/index.js
+++ b/src/pages/basic/icon/index.js
@@ -24,12 +24,25 @@ export default class IconPage extends Taro.Component {
     const { icons } = this.state
     return (
       <View className='page'>
-        <View className='example'>
-          {icons.map((icon, index) => (
-            <AtIcon value={icon} color='#f00' size={30} key={index}>
-            </AtIcon>
-          ))}
+        {/* S Header */}
+        <View className='doc-header'>
+          <View className='doc-header__title'>图标</View>
+        </View>
+        {/* E Header */}
 
+        {/* S Body */}
+        <View className='doc-body'>
+          <View className='panel'>
+            <View className='panel__title'>ICON</View>
+            <View className='panel__content'>
+              <View className='example'>
+                {icons.map((icon, index) => (
+                  <AtIcon value={icon} color='#f00' size={30} key={index}>
+                  </AtIcon>
+                ))}
+              </View>
+            </View>
+          </View>
         </View>
       </View>
     )
diff --git a/src/pages/basic/icon/index.scss b/src/pages/basic/icon/index.scss
index 908d47a51..8442dd2e5 100644
--- a/src/pages/basic/icon/index.scss
+++ b/src/pages/basic/icon/index.scss
@@ -1,8 +1,4 @@
-
-
-.page {
-  background-color: #fff;
-}
+@import '../../../assets/style/common.scss';
 
 .at-icon {
   margin: 0 10px;