docs(分类页): 替换分类页图标

src/app.scss

@@ -81,42 +81,6 @@ view {
   }
 }
 
-/**
- * 分类页样式
- */
-.panel-header {
-  display: flex;
-  align-items: center;
-  padding: 60px;
-  height: 180px;
-
-  &__icon {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 80px;
-    height: 80px;
-    color: #78A4FA;
-    text-align: center;
-    background: #fff;
-    box-shadow: 0 20px 80px 0 rgba(0, 0, 0, 0.11);
-    border-radius: 10px;
-  }
-
-  &__title {
-    margin-left: 32px;
-    color: #78A4FA;
-    font-size: 36px;
-    font-weight: bold;
-  }
-}
-
-.panel-body {
-  min-height: calc(100vh - 180px);
-  background: #fff;
-  box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11);
-}
-
 .component-list {
   margin: 20px 60px 0;
 

src/pages/index/index.js

@@ -24,37 +24,37 @@ export default class Index extends Taro.Component {
         {
           id: 'Basic',
           title: '基础',
-          content: '包含颜色、文本、图标',
+          content: '包含颜色、文本、图标等',
           icon: iconBasic
         },
         {
           id: 'View',
           title: '视图',
-          content: '6个组件',
+          content: '包含通告栏、标签、徽标等',
           icon: iconView
         },
         {
           id: 'Action',
           title: '操作反馈',
-          content: '5个组件',
+          content: '包含对话框、进度条、动作面板等',
           icon: iconAction
         },
         {
           id: 'Form',
           title: '表单',
-          content: '7个组件',
+          content: '包含输入框、单选框、复选框等',
           icon: iconForm
         },
         {
           id: 'Layout',
           title: '布局',
-          content: '5个组件',
+          content: '包含列表、浮层、卡片等',
           icon: iconLayout
         },
         {
           id: 'Navigation',
           title: '导航',
-          content: '6个组件',
+          content: '包含标签栏、导航栏、时间轴等',
           icon: iconNavigation
         }
       ]

src/pages/panel/index.js

@@ -1,5 +1,12 @@
 import Taro, { Component } from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
+import { View, Text, Image } from '@tarojs/components'
+
+import iconBasic from '../../assets/images/icon-list-basic.png'
+import iconView from '../../assets/images/icon-list-view.png'
+import iconAction from '../../assets/images/icon-list-action.png'
+import iconForm from '../../assets/images/icon-list-form.png'
+import iconLayout from '../../assets/images/icon-list-layout.png'
+import iconNavigation from '../../assets/images/icon-list-navigation.png'
 
 import './index.scss'
 
@@ -13,12 +20,30 @@ export default class PanelBasic extends Component {
 
     this.state = {
       panelNames: {
-        'basic': '基础',
-        'view': '视图',
-        'action': '操作反馈',
-        'form': '表单',
-        'layout': '布局',
-        'navigation': '导航'
+        basic: {
+          name: '基础',
+          icon: iconBasic
+        },
+        view: {
+          name: '视图',
+          icon: iconView
+        },
+        action: {
+          name: '操作反馈',
+          icon: iconAction
+        },
+        form: {
+          name: '表单',
+          icon: iconForm
+        },
+        layout: {
+          name: '布局',
+          icon: iconLayout
+        },
+        navigation: {
+          name: '导航',
+          icon: iconNavigation
+        }
       },
       list: {
         'basic': [
@@ -46,7 +71,7 @@ export default class PanelBasic extends Component {
           },
           {
             id: 'Badge',
-            name: '徽章'
+            name: '徽标'
           },
           {
             id: 'Tag',
@@ -186,14 +211,18 @@ export default class PanelBasic extends Component {
   render () {
     const { list, currentId, panelNames } = this.state
     const itemList = list[currentId] || []
-    const title = panelNames[currentId] || ''
+    const title = (panelNames[currentId] && panelNames[currentId].name) || ''
+    const icon = (panelNames[currentId] && panelNames[currentId].icon) || ''
 
     return (
       <View className='page'>
         {/* S Header */}
         <View className='panel-header'>
           <View className='panel-header__icon'>
-            <Text className='at-icon at-icon-list'></Text>
+            {
+              icon ? <Image src={icon} className='img' mode='widthFix' />
+                : <Text className='at-icon at-icon-list'></Text>
+            }
           </View>
           <View className='panel-header__title'>{title}</View>
         </View>

src/pages/panel/index.scss

@@ -1 +1,42 @@
 @import '../../components/icon/index.scss';
+
+/**
+ * 分类页样式
+ */
+.panel-header {
+  display: flex;
+  align-items: center;
+  padding: 60px;
+  height: 180px;
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80px;
+    height: 80px;
+    color: #78A4FA;
+    text-align: center;
+    background: #fff;
+    box-shadow: 0 20px 80px 0 rgba(0, 0, 0, 0.11);
+    border-radius: 10px;
+
+    .img {
+      width: 36px;
+      height: 36px;
+    }
+  }
+
+  &__title {
+    margin-left: 32px;
+    color: #78A4FA;
+    font-size: 36px;
+    font-weight: bold;
+  }
+}
+
+.panel-body {
+  min-height: calc(100vh - 180px);
+  background: #fff;
+  box-shadow: 0 26px 163px 0 rgba(0, 0, 0, 0.11);
+}