chore: 结构调整

.eslintrc

@@ -1,7 +1,16 @@
 {
   "extends": ["taro"],
   "rules": {
-    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }]
+    "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
+    "quotes": [2, "single"],
+    "react/self-closing-comp": "off",
+    "react/jsx-closing-bracket-location": [
+      "error",
+      {
+        "nonEmpty": "after-props",
+        "selfClosing": "after-props"
+      }
+    ]
   },
   "parser": "babel-eslint"
 }

package.json

@@ -14,31 +14,31 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@tarojs/components": "^0.0.67",
-    "@tarojs/router": "^0.0.67",
-    "@tarojs/taro": "^0.0.67",
-    "@tarojs/taro-h5": "^0.0.67",
-    "@tarojs/taro-weapp": "^0.0.67",
+    "@tarojs/components": "latest",
+    "@tarojs/router": "latest",
+    "@tarojs/taro": "latest",
+    "@tarojs/taro-h5": "latest",
+    "@tarojs/taro-weapp": "latest",
     "lodash": "^4.17.10",
     "nervjs": "^1.3.0"
   },
   "devDependencies": {
-    "@tarojs/cli": "^0.0.67",
-    "@tarojs/plugin-babel": "^0.0.67",
-    "@tarojs/plugin-csso": "^0.0.67",
-    "@tarojs/plugin-sass": "^0.0.67",
-    "@tarojs/plugin-uglifyjs": "^0.0.67",
-    "@tarojs/webpack-runner": "^0.0.67",
+    "@tarojs/cli": "latest",
+    "@tarojs/plugin-babel": "latest",
+    "@tarojs/plugin-csso": "latest",
+    "@tarojs/plugin-sass": "latest",
+    "@tarojs/plugin-uglifyjs": "latest",
+    "@tarojs/webpack-runner": "latest",
     "babel-eslint": "^8.2.3",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "eslint": "^4.19.1",
-    "eslint-config-taro": "^0.0.67",
+    "eslint-config-taro": "latest",
     "eslint-plugin-import": "^2.12.0",
     "eslint-plugin-react": "^7.8.2",
-    "eslint-plugin-taro": "^0.0.67",
+    "eslint-plugin-taro": "latest",
     "glob": "^7.1.2",
     "gulp": "^3.9.1",
     "gulp-clean": "^0.4.0",

src/app.js

@@ -1,16 +1,16 @@
-import Taro, { Component } from "@tarojs/taro"
-import Index from "./pages/index/index"
+import Taro, { Component } from '@tarojs/taro'
+import Index from './pages/index/index'
 
-import "./app.scss"
+import './app.scss'
 
 class App extends Component {
   config = {
-    pages: ["pages/index/index"],
+    pages: ['pages/index/index', 'pages/toast/index'],
     window: {
-      backgroundTextStyle: "light",
-      navigationBarBackgroundColor: "#fff",
-      navigationBarTitleText: "WeChat",
-      navigationBarTextStyle: "black"
+      backgroundTextStyle: 'light',
+      navigationBarBackgroundColor: '#fff',
+      navigationBarTitleText: 'WeChat',
+      navigationBarTextStyle: 'black'
     }
   }
 
@@ -27,4 +27,4 @@ class App extends Component {
   }
 }
 
-Taro.render(<App />, document.getElementById("app"))
+Taro.render(<App />, document.getElementById('app'))

src/pages/index/index.js

@@ -1,25 +1,215 @@
-import Taro from "@tarojs/taro"
-import { View, Text } from "@tarojs/components"
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import './index.scss'
 
 export default class Index extends Taro.Component {
   config = {
-    navigationBarTitleText: "首页"
+    navigationBarTitleText: 'Taro UI'
   }
 
-  componentWillMount() {}
-
-  componentDidMount() {}
-
-  componentWillUnmount() {}
+  constructor() {
+    super(...arguments)
 
-  componentDidShow() {}
+    this.state = {
+      list: [
+        {
+          id: 'View',
+          name: '视图',
+          open: false,
+          childrens: [
+            {
+              title: '图标',
+              name: 'Icon'
+            },
+            {
+              title: '颜色',
+              name: 'Color'
+            },
+            {
+              title: '文本',
+              name: 'Text'
+            },
+            {
+              title: '按钮',
+              name: 'Button'
+            }
+          ]
+        },
+        {
+          id: 'Content',
+          name: '基础组件',
+          open: false,
+          childrens: [
+            {
+              title: '通告栏',
+              name: 'Notice-Bar'
+            },
+            {
+              title: '徽章',
+              name: 'Badge'
+            },
+            {
+              title: '警告提示',
+              name: 'Alert'
+            },
+            {
+              title: '标签',
+              name: 'Tag'
+            },
+            {
+              title: '头像',
+              name: 'Avatar'
+            },
+            {
+              title: '文章',
+              name: 'Article'
+            }
+          ]
+        },
+        {
+          id: 'Action',
+          name: '操作反馈',
+          open: false,
+          childrens: [
+            {
+              title: '动作面板',
+              name: 'Action-Sheet'
+            },
+            {
+              title: '动作指示器',
+              name: 'Activity-Indicator'
+            },
+            {
+              title: '对话框',
+              name: 'Modal'
+            },
+            {
+              title: '进度条',
+              name: 'Progress'
+            },
+            {
+              title: '轻提示',
+              name: 'Toast'
+            }
+          ]
+        },
+        {
+          id: 'form',
+          name: '表单组件',
+          open: false,
+          childrens: [
+            {
+              title: '输入框',
+              name: 'Input'
+            },
+            {
+              title: '单选框',
+              name: 'Radio'
+            },
+            {
+              title: '复选框',
+              name: 'Checkbox'
+            },
+            {
+              title: '开关',
+              name: 'Switch'
+            },
+            {
+              title: '评分',
+              name: 'Rate'
+            },
+            {
+              title: '数字输入框',
+              name: 'Input-Number'
+            },
+            {
+              title: '多行文本框',
+              name: 'Textarea'
+            }
+          ]
+        },
+        {
+          id: 'Layout',
+          name: '布局',
+          open: false,
+          childrens: [
+            {
+              title: '布局',
+              name: 'Layout'
+            },
+            {
+              title: '栅格',
+              name: 'Grid'
+            },
+            {
+              title: '列表',
+              name: 'List'
+            },
+            {
+              title: '浮层',
+              name: 'Float-Layout'
+            }
+          ]
+        },
+        {
+          id: 'Navigation',
+          name: '导航',
+          childrens: [
+            {
+              title: '标签页',
+              name: 'Tabs'
+            },
+            {
+              title: '抽屉',
+              name: 'Drawer'
+            }
+          ]
+        }
+      ]
+    }
+  }
 
-  componentDidHide() {}
+  goToComponent = ({ name }) => {
+    const url = `/pages/${name.toLowerCase()}/index`
+    Taro.navigateTo({
+      url
+    })
+  }
 
   render() {
+    const { list } = this.state
     return (
-      <View className='index'>
-        <Text className='page-head'>Hello world!</Text>
+      <View className='index-page'>
+        <View className='page-header'>组件入口</View>
+        <View className='page-body'>
+          <View className='component-group'>
+            {list.map((item, index) => {
+              return (
+                <View className='group-item' key={index}>
+                  <View className='group-info'>
+                    <View className='group-info-title'>{item.name}</View>
+                  </View>
+                  <View className='group-list'>
+                    {item.childrens.map(child => {
+                      return (
+                        <View
+                          key={index}
+                          onClick={this.goToComponent.bind(this, child)}
+                          className='list-component'>
+                          <View className='list-component-info'>
+                            {child.name} {child.title}
+                          </View>
+                          <View className='list-component-arrow' />
+                        </View>
+                      )
+                    })}
+                  </View>
+                </View>
+              )
+            })}
+          </View>
+        </View>
       </View>
     )
   }

src/pages/index/index.scss

@@ -0,0 +1,77 @@
+.index-page {
+  background-color: #f8f8f8;
+}
+
+.page-header {
+  padding: 40px;
+  padding-top: 80px;
+  text-align: center;
+}
+
+.page-body {
+  padding: 40px;
+}
+
+.component-group {
+  font-size: 32px;
+}
+
+.group-item {
+  padding: 0 30px;
+  margin: 20px 0;
+  background-color: #ffffff;
+  border-radius: 4px;
+  overflow: hidden;
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.group-info {
+  padding: 30px 0;
+  display: flex;
+  align-items: center;
+  transition: opacity 0.3s;
+  &-title {
+    opacity: 0.5;
+  }
+}
+
+.group-list {
+  font-size: 28px;
+  .list-component {
+    padding: 20px 0;
+    position: relative;
+    align-items: center;
+    &:before {
+      content: " ";
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      height: 1px;
+      border-top: 1px solid #d8d8d8;
+      color: #d8d8d8;
+    }
+    &:first-child::before {
+      display: none;
+    }
+
+    &-info {
+      width: 100%;
+    }
+
+    &-arrow {
+      display: inline-block;
+      height: 18px;
+      width: 18px;
+      border-width: 2px 2px 0 0;
+      border-color: #888888;
+      border-style: solid;
+      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) translate(-50%);
+      position: absolute;
+      top: 50%;
+      right: 0;
+    }
+  }
+}