docs(dashboard): unify dashboard with vant (#2729)

example/components/demo-home-nav/index.js

@@ -0,0 +1,13 @@
+Component({
+  properties: {
+    group: Object
+  },
+
+  methods: {
+    onClick(event) {
+      wx.navigateTo({
+        url: event.target.dataset.url
+      });
+    }
+  }
+});

example/components/demo-home-nav/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../../dist/icon"
+  }
+}

example/components/demo-home-nav/index.wxml

@@ -0,0 +1,15 @@
+<view class="demo-home-nav">
+  <view class="demo-home-nav__title">{{ group.groupName }}</view>
+  <view class="demo-home-nav__group">
+    <view
+      wx:for="{{ group.list }}"
+      wx:key="title"
+      class="demo-home-nav__block"
+      data-url="/pages{{ item.path }}/index"
+      bind:tap="onClick"
+    >
+      {{ item.title }}
+      <van-icon name="arrow" custom-class="demo-home-nav__icon" />
+    </view>
+  </view>
+</view>

example/components/demo-home-nav/index.wxss

@@ -0,0 +1,38 @@
+.demo-home-nav__title {
+  margin: 24px 0 8px 16px;
+  color: rgba(69, 90, 100, 0.6);
+  font-size: 14px;
+}
+
+.demo-home-nav__block {
+  position: relative;
+  display: flex;
+  margin: 0 0 12px;
+  padding-left: 20px;
+  color: #323233;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 40px;
+  background: #f7f8fa;
+  border-radius: 99px;
+  transition: background 0.3s;
+}
+
+.demo-home-nav__block:hover {
+  background: darken(#f7f8fa, 3%);
+}
+
+.demo-home-nav__block:active {
+  background: darken(#f7f8fa, 6%);
+}
+
+.demo-home-nav__icon {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  color: rgb(182, 195, 210);
+  font-weight: 900;
+}

example/components/demo-home/index.js

@@ -0,0 +1,7 @@
+import list from '../../config';
+
+Component({
+  data: {
+    list,
+  },
+});

example/components/demo-home/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "demo-home-nav": "../demo-home-nav"
+  }
+}

example/components/demo-home/index.wxml

@@ -0,0 +1,18 @@
+<view class="demo-home">
+  <view
+    class="demo-home__title"
+  >
+    <image mode="aspectFit" class="demo-home__image" src="https://img.yzcdn.cn/vant/logo.png" />
+    <view class="demo-home__text">Vant Weapp</view>
+  </view>
+  <view class="demo-home__desc">
+    轻量、可靠的小程序 UI 组件库
+  </view>
+  <view
+    wx:for="{{ list }}"
+    wx:for-item="group"
+    wx:key="index"
+  >
+    <demo-home-nav group="{{ group }}" />
+  </view>
+</view>

example/components/demo-home/index.wxss

@@ -0,0 +1,46 @@
+.demo-home {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100vh;
+  padding: 46px 20px 20px;
+  background: #fff;
+}
+
+.demo-home__title,
+.demo-home__desc {
+  padding-left: 16px;
+  font-weight: normal;
+  line-height: 1;
+  user-select: none;
+}
+
+.demo-home__title {
+  margin: 0 0 16px;
+  font-size: 32px;
+}
+
+.demo-home__image,
+.demo-home__text {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.demo-home__image {
+  width: 32px;
+  height: 32px;
+}
+
+.demo-home__text {
+  margin-left: 16px;
+  font-weight: 500;
+}
+
+.demo-home__title .demo-home--small {
+  font-size: 24px;
+}
+
+.demo-home__desc {
+  margin: 0 0 40px;
+  color: rgba(69, 90, 100, 0.6);
+  font-size: 14px;
+}

example/pages/dashboard/index.js

@@ -3,20 +3,6 @@ import Page from '../../common/page';
 
 Page({
   data: {
-    list,
+    list
-    activeName: []
   },
-
-  onChangeCollapse(event) {
-    this.setData({
-      activeNames: event.detail
-    });
-  },
-
-  onClick(event) {
-    const { switchTab, url } = event.currentTarget.dataset;
-    if (switchTab) {
-      wx.switchTab({ url });
-    }
-  }
 });

example/pages/dashboard/index.json

@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "Vant Weapp"
+  "navigationBarTitleText": "Vant Weapp",
+  "usingComponents": {
+    "demo-home": "../../components/demo-home"
+  }
 }

example/pages/dashboard/index.wxml

@@ -1,42 +1 @@
-<view class="container">
+<demo-home list="{{ list }}" />
-  <view class="title">
-    <image class="logo" src="https://img.yzcdn.cn/vant/logo.png" />
-    <view class="title-text">Vant Weapp</view>
-  </view>
-  <view class="desc">轻量、可靠的小程序 UI 组件库</view>
-
-  <van-collapse
-    wx:for="{{ list }}"
-    wx:for-item="group"
-    wx:key="title"
-    value="{{ activeNames }}"
-    border="{{ false }}"
-    bind:change="onChangeCollapse"
-  >
-    <van-collapse-item
-      clickable
-      is-link="{{ false }}"
-      custom-class="mobile-nav"
-      title-class="mobile-nav__title"
-      content-class="mobile-nav__content"
-      title="{{ group.groupName }}"
-      name="{{ group.groupName }}"
-    >
-      <van-icon
-        name="{{ group.icon }}"
-        slot="right-icon"
-        custom-class="mobile-nav__icon"
-      />
-      <van-cell
-        wx:for="{{ group.list }}"
-        wx:key="title"
-        is-link
-        url="/pages{{ item.path }}/index"
-        data-url="/pages{{ item.path }}/index"
-        data-switch-tab="{{ true }}"
-        title="{{ item.title }}"
-        bind:click="onClick"
-      />
-    </van-collapse-item>
-  </van-collapse>
-</view>

example/pages/dashboard/index.wxss

@@ -1,61 +0,0 @@
-page {
-  padding-bottom: 0;
-}
-
-.container {
-  padding: 45px 20px 20px;
-}
-
-.title {
-  padding-left: 15px;
-  margin-bottom: 10px;
-}
-
-.logo,
-.title-text {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.title-text {
-  font-size: 32px;
-  font-weight: 500;
-  margin-left: 15px;
-}
-
-.logo {
-  width: 36px;
-  height: 36px;
-}
-
-.desc {
-  font-size: 14px;
-  color: #7d7e80;
-  margin: 0 0 45px;
-  padding-left: 15px;
-}
-
-.mobile-nav {
-  margin-bottom: 16px;
-}
-
-.mobile-nav__title {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 40px;
-  align-items: center;
-  border-radius: 2px;
-}
-
-.mobile-nav__content {
-  padding: 0 !important;
-}
-
-.mobile-nav__icon {
-  font-size: 24px !important;
-  margin-top: 8px;
-}
-
-.mobile-nav__icon image {
-  width: 100%;
-}

example/project.config.json

@@ -13,7 +13,7 @@
 	},
 	"compileType": "miniprogram",
 	"cloudfunctionRoot": "functions/",
-	"libVersion": "2.8.2",
+	"libVersion": "2.3.0",
 	"appid": "wx1c01b35002d3ba14",
 	"projectname": "vant-weapp",
 	"debugOptions": {