[Doc] 自定义组件文档优化 (#193)

* 优化 panel 效果

* 优化 cell 的传参及使用

* 文档优化

* 组件库 文档优化

example/app.json

@@ -12,7 +12,6 @@
     "pages/helper/index",
     "pages/icon/index",
     "pages/layout/index",
-    "pages/loadmore/index",
     "pages/noticebar/index",
     "pages/panel/index",
     "pages/popup/index",

example/components/doc-page/index.js

@@ -3,6 +3,10 @@ Component({
     title: {
       type: String,
       value: ''
+    },
+
+    withoutPadding: {
+      type: Boolean
     }
   }
 });

example/components/doc-page/index.wxml

@@ -1,6 +1,6 @@
 <view class="doc-container">
   <view class="doc-title">{{ title }}</view>
-  <view class="doc-content">
+  <view class="doc-content {{ withoutPadding ? 'doc-content--without-pd' : '' }}">
     <slot></slot>
   </view>
 </view>

example/components/doc-page/index.wxss

@@ -21,3 +21,7 @@
   overflow: hidden;
   color: #666;
 }
+
+.doc-content--without-pd {
+  padding: 15px 0;
+}

example/pages/capsule/index.json

@@ -1,7 +1,8 @@
 {
   "navigationBarTitleText": "Capsule 胶囊",
   "usingComponents": {
-    "zan-panel": "/packages/panel/index",
-    "zan-capsule": "/packages/capsule/index"
+    "zan-panel": "../../dist/panel/index",
+    "zan-capsule": "../../dist/capsule/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/capsule/index.wxml

@@ -1,16 +1,15 @@
-<import src="/dist/capsule/index.wxml" />
-
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">CAPSULE</view>
+<doc-page title="CAPSULE" without-padding>
 
   <zan-panel title='基本用法'>
-    <zan-capsule leftText="1折扣" rightText="限购一份" />
-    <zan-capsule type="danger" leftText="1折扣" rightText="限购一份" />
+    <view class="capsule-demo">
+      <zan-capsule leftText="折扣" rightText="限购一份" />
+      <zan-capsule type="danger" leftText="折扣" rightText="限购一份" />
+    </view>
   </zan-panel>
 
   <zan-panel title='自定义颜色'>
-    <zan-capsule color="#38f" leftText="1折扣" rightText="限购一份" />
+    <view class="capsule-demo">
+      <zan-capsule color="#38f" leftText="折扣" rightText="限购一份" />
+    </view>
   </zan-panel>
-
-</view>
+</doc-page>

example/pages/capsule/index.wxss

@@ -1,3 +1,7 @@
+.capsule-demo {
+  padding: 15px 0;
+}
+
 .zan-capsule + .zan-capsule {
   margin-left: 10px;
 }

example/pages/card/index.json

@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "Card 卡片",
   "usingComponents": {
-    "zan-card": "../../dist/card/index"
+    "zan-card": "../../dist/card/index",
+    "zan-panel": "../../dist/panel/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/card/index.wxml

@@ -1,8 +1,6 @@
-<view class="container">
+<doc-page title="CAPSULE" without-padding>
 
-  <view class="doc-title zan-hairline--bottom">CARD</view>
-
-  <view class="zan-panel">
+  <zan-panel without-border>
     <zan-card
       card-class="test-card"
       thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
@@ -14,34 +12,19 @@
     >
     </zan-card>
 
-  </view>
+  </zan-panel>
 
-  <view class="doc-title zan-hairline--bottom">使用slot</view>
-
-  <view class="zan-panel">
+  <zan-panel title="使用slot">
     <zan-card
       card-class="test-card"
+      thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
       useThumbSlot="{{ true }}"
       useDetailSlot="{{ true }}"
     >
-      <view slot="thumb-slot" class="zan-card__thumb">
-        <image class="zan-card__img"
-          src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
-          mode="aspectFit"
-        ></image>
-      </view>
       <!-- 右侧详情 -->
       <view slot="detail-slot" class="zan-card__detail">
-        <view class="zan-card__detail-row">
-          <view class="zan-card__right-col">x 2</view>
-          <view class="zan-card__left-col zan-ellipsis--l2">
-            我是标题
-          </view>
-        </view>
-        <view class="zan-card__detail-row zan-c-gray-darker">
-          <view class="zan-card__left-col">¥ 111</view>
-        </view>
+        我是自定义内容区域
       </view>
     </zan-card>
-  </view>
-</view>
+  </zan-panel>
+</doc-page>

example/pages/cell/index.json

@@ -3,6 +3,8 @@
   "usingComponents": {
     "zan-cell": "../../dist/cell/index",
     "zan-icon": "../../dist/icon/index",
-    "zan-cell-group": "../../dist/cell-group/index"
+    "zan-panel": "../../dist/panel/index",
+    "zan-cell-group": "../../dist/cell-group/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/cell/index.wxml

@@ -1,43 +1,36 @@
-<import src="/dist/switch/index.wxml" />
+<doc-page title="CELL" without-padding>
 
-<view class="container">
-
-  <view class="doc-title zan-hairline--bottom">CELL</view>
-
-  <view class="zan-panel">
+  <zan-panel class="cell-panel-demo">
     <zan-cell title="单行列表"></zan-cell>
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel">
+  <zan-panel class="cell-panel-demo">
     <zan-cell title="单行列表" value="详细信息"></zan-cell>
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel">
+  <zan-panel class="cell-panel-demo">
     <zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">带 icon 的 cell</view>
-  <view class="zan-panel">
+  <zan-panel class="cell-panel-demo" title="带 icon 的 cell">
     <zan-cell title="单行列表" value="详细信息">
       <zan-icon slot="icon" type="checked"></zan-icon>
     </zan-cell>
-  </view>
+  </zan-panel>
 
+  <zan-panel class="cell-panel-demo" title="带箭头的 cell">
+    <zan-cell title="只显示箭头" is-link></zan-cell>
+  </zan-panel>
 
-  <view class="zan-panel-title">带箭头的 cell</view>
-  <view class="zan-panel">
-    <zan-cell title="只显示箭头" is-link="{{true}}"></zan-cell>
-  </view>
+  <zan-panel class="cell-panel-demo">
+    <zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
+  </zan-panel>
 
-  <view class="zan-panel">
-    <zan-cell title="跳转到首页" is-link="/pages/dashboard/index"></zan-cell>
-  </view>
-  <view class="zan-panel-title">cell 组</view>
-  <view class="zan-panel">
+  <zan-panel class="cell-panel-demo" title="cell 组">
     <zan-cell-group>
-      <zan-cell title="只显示箭头" is-link="{{true}}"></zan-cell>
-      <zan-cell title="跳转到首页" is-link="/pages/dashboard/index"></zan-cell>
-      <zan-cell title="只有 footer 点击有效" is-link="/pages/dashboard/index" only-tap-footer></zan-cell>
+      <zan-cell title="只显示箭头" is-link></zan-cell>
+      <zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
+      <zan-cell title="只有 footer 点击有效" is-link url="/pages/dashboard/index" only-tap-footer></zan-cell>
       <zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
       <zan-cell title="表单">
         <input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
@@ -46,5 +39,5 @@
         <switch slot="footer" checked/>
       </zan-cell>
     </zan-cell-group>
-  </view>
-</view>
+  </zan-panel>
+</doc-page>

example/pages/cell/index.wxss

@@ -0,0 +1,4 @@
+.cell-panel-demo {
+  display: block;
+  margin-top: 15px;
+}

example/pages/dashboard/config.js

@@ -26,9 +26,6 @@ export default {
       }, {
         name: 'Layout 布局',
         path: '/pages/layout/index'
-      }, {
-        name: 'Loadmore 加载',
-        path: '/pages/loadmore/index'
       }, {
         name: 'Noticebar 通告栏',
         path: '/pages/noticebar/index'

example/pages/dashboard/index.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "ZanUI-WeApp",
+  "usingComponents": {
+    "zan-panel": "../../dist/panel/index",
+    "zan-cell": "../../dist/cell/index",
+    "zan-cell-group": "../../dist/cell-group/index"
+  }
+}

example/pages/dashboard/index.wxml

@@ -3,13 +3,17 @@
   <image class="logo" src="https://img.yzcdn.cn/public_files/2017/02/06/ee0ebced79a80457d77ce71c7d414c74.png"></image>
 
   <block wx:for="{{ list }}" wx:for-item="group" wx:key="title">
-    <view class="zan-panel-title">{{ group.title }}</view>
-    <view class="zan-panel">
-      <navigator wx:for="{{ group.content }}" wx:key="name" class="zan-cell zan-cell--access" url="{{ item.path }}">
-        <view class="zan-cell__bd">{{ item.name }}</view>
-        <view class="zan-cell__ft"></view>
-      </navigator>
-    </view>
+    <zan-panel title="{{ group.title }}">
+      <zan-cell-group>
+        <zan-cell
+          wx:for="{{ group.content }}"
+          wx:key="name"
+          is-link
+          url="{{ item.path }}"
+          title="{{ item.name }}"
+        ></zan-cell>
+      </zan-cell-group>
+    </zan-panel>
   </block>
   
 </view>

example/pages/helper/index.json

@@ -1,3 +1,9 @@
 {
-  "navigationBarTitleText": "Helper 基础样式"
+  "navigationBarTitleText": "Helper 基础样式",
+  "usingComponents": {
+    "zan-cell": "../../dist/cell/index",
+    "zan-panel": "../../dist/panel/index",
+    "zan-cell-group": "../../dist/cell-group/index",
+    "doc-page": "../../components/doc-page/index"
+  }
 }

example/pages/helper/index.wxml

@@ -1,76 +1,59 @@
-<view class="container">
-
+<doc-page title="HELPER" without-padding>
   <view class="zan-panel">
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
-        <view class="zan-pull-right">zan-pull-right: 往右靠</view>
-      </view>
-    </view>
+    <zan-cell>
+      <view class="zan-pull-right">zan-pull-right: 往右靠</view>
+    </zan-cell>
 
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
-        <view class="zan-text-deleted">zan-text-deleted：被删除的效果</view>
-      </view>
-    </view>
+    <zan-cell>
+      <view class="zan-text-deleted">zan-text-deleted：被删除的效果</view>
+    </zan-cell>
 
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
-        <view>
-          <view class="zan-font-12">zan-font-12：字号12</view>
-          <view class="zan-font-12 zan-font-bold">zan-font-bold：再来个加粗</view>
-        </view>
+    <zan-cell>
+      <view>
+        <view class="zan-font-12">zan-font-12：字号12</view>
+        <view class="zan-font-12 zan-font-bold">zan-font-bold：再来个加粗</view>
       </view>
-    </view>
+    </zan-cell>
 
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
-        <view>
-          <view class="zan-font-16">zan-font-16：字号16</view>
-          <view class="zan-font-16 zan-font-bold">zan-font-bold：再来个加粗</view>
-        </view>
+    <zan-cell>
+      <view>
+        <view class="zan-font-16">zan-font-16：字号16</view>
+        <view class="zan-font-16 zan-font-bold">zan-font-bold：再来个加粗</view>
       </view>
-    </view>
+    </zan-cell>
 
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
-        <view class="">
-          <view>字体颜色</view>
-          <view class="zan-c-red">zan-c-red: 红色</view>
-          <view class="zan-c-gray">zan-c-gray: 灰色</view>
-          <view class="zan-c-gray-dark">zan-c-gray-dark: 再灰一点点</view>
-          <view class="zan-c-gray-darker">zan-c-gray-darker: 更深的灰色</view>
-          <view class="zan-c-black">zan-c-black: 黑色</view>
-          <view class="zan-c-blue">zan-c-blue: 蓝色</view>
-          <view class="zan-c-green">zan-c-green: 绿色</view>
-        </view>
+    <zan-cell>
+      <view class="">
+        <view>字体颜色</view>
+        <view class="zan-c-red">zan-c-red: 红色</view>
+        <view class="zan-c-gray">zan-c-gray: 灰色</view>
+        <view class="zan-c-gray-dark">zan-c-gray-dark: 再灰一点点</view>
+        <view class="zan-c-gray-darker">zan-c-gray-darker: 更深的灰色</view>
+        <view class="zan-c-black">zan-c-black: 黑色</view>
+        <view class="zan-c-blue">zan-c-blue: 蓝色</view>
+        <view class="zan-c-green">zan-c-green: 绿色</view>
       </view>
-    </view>
+    </zan-cell>
 
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
-        <view>zan-arrow：箭头</view>
-        <view class="zan-arrow"></view>
-      </view>
-    </view>
+    <zan-cell>
+      <view>zan-arrow：箭头</view>
+      <view class="zan-arrow"></view>
+    </zan-cell>
 
-    <view class="zan-cell">
-      <view class="zan-cell__bd">
-        <view class="zan-ellipsis" style="width: 300px;">
-          zan-ellipsis：单行点点点
-          ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
-        </view>
+    <zan-cell>
+      <view class="zan-ellipsis" style="width: 300px;">
+        zan-ellipsis：单行点点点
+        ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
       </view>
-    </view>
+    </zan-cell>
 
-    <view class="zan-cell zan-cell--last-child">
-      <view class="zan-cell__bd">
-        <view class="zan-ellipsis--l2">
-          zan-ellipsis--l2：单行点点点
-          ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
-        </view>
+    <zan-cell>
+      <view class="zan-ellipsis--l2">
+        zan-ellipsis--l2：单行点点点
+        ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
       </view>
-    </view>
+    </zan-cell>
 
   </view>
 
-</view>
+</doc-page>

example/pages/layout/index.json

@@ -1,6 +1,8 @@
 {
   "usingComponents": {
     "zan-row": "../../dist/row/index",
-    "zan-col": "../../dist/col/index"
+    "zan-col": "../../dist/col/index",
+    "zan-panel": "../../dist/panel/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/layout/index.wxml

@@ -1,20 +1,14 @@
-<view class="container">
+<doc-page title="LAYOUT" without-padding>
 
-  <view class="doc-title zan-hairline--bottom">LAYOUT</view>
-
-  <view class="zan-panel-title">基础用法</view>
-  <view class="doc-description">Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度</view>
-  <view class="zan-panel">
+  <zan-panel title="基础用法">
     <zan-row>
       <zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
       <zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
       <zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
     </zan-row>
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">offset</view>
-  <view class="doc-description">添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同</view>
-  <view class="zan-panel">
+  <zan-panel title="利用 offset 布局">
     <zan-row>
       <zan-col col="4" col-class="custom-zan-col">span: 4</zan-col>
       <zan-col col="10" offset="4" col-class="custom-zan-col">offset: 4, span: 10</zan-col>
@@ -22,6 +16,6 @@
     <zan-row>
       <zan-col col="12" offset="12" col-class="custom-zan-col">offset: 12, span: 12</zan-col>
     </zan-row>
-  </view>
+  </zan-panel>
 
-</view>
+</doc-page>

example/pages/noticebar/index.json

@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "Noticebar 通告栏",
   "usingComponents": {
-    "zan-noticebar": "../../dist/noticebar/index"
+    "zan-noticebar": "../../dist/noticebar/index",
+    "zan-panel": "../../dist/panel/index",
+    "doc-page": "../../components/doc-page/index"
   }
 }

example/pages/noticebar/index.wxml

@@ -1,63 +1,54 @@
-<view class="container">
+<doc-page title="NOTICEBAR" without-padding>
 
-  <view class="doc-title zan-hairline--bottom">NOTICEBAR</view>
-
-  <view class="zan-panel-title">滚动通告栏</view>
-  <view class="zan-panel">
+  <zan-panel title="滚动通告栏">
     <zan-noticebar
       text="{{ bar1.text }}"
       scrollable="{{ bar1.scrollable }}"
     />
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">延时滚动通告栏</view>
-  <view class="zan-panel">
+  <zan-panel title="延时滚动通告栏">
     <zan-noticebar
       text="{{ bar1.text }}"
       scrollable="{{ bar1.scrollable }}"
       delay="{{ bar1.delay }}"
     />
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">初始速度低滚动通告栏</view>
-  <view class="zan-panel">
+  <zan-panel title="初始速度低滚动通告栏">
     <zan-noticebar
       text="{{ bar1.text }}"
       scrollable="{{ bar1.scrollable }}"
       speed="{{ bar5.speed }}"
     />
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">改变颜色通告栏</view>
-  <view class="zan-panel">
+  <zan-panel title="改变颜色通告栏">
     <zan-noticebar
       text="{{ bar2.text }}"
       color="{{ bar2.color }}"
       background-color="{{ bar2.backgroundColor }}"
     />
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">静止通告栏</view>
-  <view class="zan-panel">
+  <zan-panel title="静止通告栏">
     <zan-noticebar
       text="{{ bar3.text }}"
     />
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">带icon公告</view>
-  <view class="zan-panel">
+  <zan-panel title="带icon公告">
     <zan-noticebar
       text="{{ bar4.text }}"
       left-icon="{{ bar4.leftIcon }}"
     />
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel-title">可关闭公告</view>
-  <view class="zan-panel">
+  <zan-panel title="可关闭公告">
     <zan-noticebar
       text="{{ bar5.text }}"
       mode="{{ bar5.mode }}"
     />
-  </view>
+  </zan-panel>
 
-</view>
+</doc-page>

example/pages/panel/index.json

@@ -1,3 +1,7 @@
 {
-  "navigationBarTitleText": "Panel 面板"
+  "navigationBarTitleText": "Panel 面板",
+  "usingComponents": {
+    "zan-panel": "../../dist/panel/index",
+    "doc-page": "../../components/doc-page/index"
+  }
 }

example/pages/panel/index.wxml

@@ -1,22 +1,15 @@
-<view class="container">
+<doc-page title="PANEL" without-padding>
 
-  <view class="doc-title zan-hairline--bottom">PANEL</view>
+  <zan-panel class="panel-example">
+    <view style="padding: 15px;">PANEL 内容区域</view>
+  </zan-panel>
 
-  <view class="zan-panel-title">标题</view>
-  <view class="zan-panel">
-    <view style="padding: 15px;">内容</view>
-  </view>
+  <zan-panel title="标题" class="panel-example">
+    <view style="padding: 15px;">带有标题的 PANEL</view>
+  </zan-panel>
 
-  <view class="zan-panel">
-    <view style="padding: 15px;">内容</view>
-  </view>
-
-  <view class="zan-panel zan-panel--without-border">
+  <zan-panel title="标题" hide-border="{{ true }}" class="panel-example">
     <view style="padding: 15px;">无边框的panel</view>
-  </view>
+  </zan-panel>
 
-  <view class="zan-panel">
-    <view style="padding: 15px;">内容</view>
-  </view>
-
-</view>
+</doc-page>

example/pages/panel/index.wxss

@@ -0,0 +1,4 @@
+.panel-example {
+  display: block;
+  margin-top: 15px;
+}

example/pages/popup/index.json

@@ -2,7 +2,8 @@
   "navigationBarTitleText": "Popup 弹出层",
   "usingComponents": {
     "doc-page": "../../components/doc-page/index",
-    "zan-popup": "../../dist/popup/index"
+    "zan-popup": "../../dist/popup/index",
+    "zan-button": "../../dist/btn/index"
   }  
 }
 

example/pages/popup/index.wxml

@@ -1,20 +1,20 @@
 <doc-page title="POPUP">
   <view class="zan-btns" style="margin-top: 10vh;">
-    <button class="zan-btn" bindtap="togglePopup">
+    <zan-button class="zan-btn" bind:btnclick="togglePopup">
       弹出popup
-    </button>
-    <button class="zan-btn" bindtap="toggleTopPopup">
+    </zan-button>
+    <zan-button class="zan-btn" bind:btnclick="toggleTopPopup">
       从顶部弹出popup
-    </button>
-    <button class="zan-btn" bindtap="toggleBottomPopup">
+    </zan-button>
+    <zan-button class="zan-btn" bind:btnclick="toggleBottomPopup">
       从底部弹出popup
-    </button>
-    <button class="zan-btn" bindtap="toggleLeftPopup">
+    </zan-button>
+    <zan-button class="zan-btn" bind:btnclick="toggleLeftPopup">
       从左边弹出popup
-    </button>
-    <button class="zan-btn" bindtap="toggleRightPopup">
+    </zan-button>
+    <zan-button class="zan-btn" bind:btnclick="toggleRightPopup">
       从右边弹出popup
-    </button>
+    </zan-button>
   </view>
 
   <!-- 中间弹出框 -->

packages/card/README.md

@@ -33,26 +33,11 @@
 ```html
 <zan-card
   card-class="test-card"
-  useThumbSlot="{{ true }}"
   useDetailSlot="{{ true }}"
 >
-  <view slot="thumb-slot" class="zan-card__thumb">
-    <image class="zan-card__img"
-      src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
-      mode="aspectFit"
-    ></image>
-  </view>
   <!-- 右侧详情 -->
   <view slot="detail-slot" class="zan-card__detail">
-    <view class="zan-card__detail-row">
-      <view class="zan-card__right-col">x 2</view>
-      <view class="zan-card__left-col zan-ellipsis--l2">
-        我是标题
-      </view>
-    </view>
-    <view class="zan-card__detail-row zan-c-gray-darker">
-      <view class="zan-card__left-col">¥ 111</view>
-    </view>
+    我是标题
   </view>
 </zan-card>
 ```
@@ -67,5 +52,4 @@
 | desc | 商品描述 | String | -
 | num | 商品数量 | Number | -
 | status | 商品状态 | String | -
-| useThumbSlot | 是否使用thumb-slot（true时需要添加对应slot） | Boolean | `false`
 | useDetailSlot | 是否使用detail-slot（true时需要添加对应slot） | Boolean | `false`

packages/card/index.wxml

@@ -1,31 +1,33 @@
 <view class="zan-card card-class">
   <!-- 左侧图片 -->
-  <slot wx:if="{{ useThumbSlot }}" name="thumb-slot"></slot>
-  <view wx:else class="zan-card__thumb">
+  
+  <view class="zan-card__thumb">
     <image class="zan-card__img"
       src="{{ thumb }}"
       mode="aspectFit"
     ></image>
   </view>
   <!-- 右侧详情 -->
-  <slot wx:if="{{ useDetailSlot }}" name="detail-slot"></slot>
-  <view wx:else class="zan-card__detail">
-    <view class="zan-card__detail-row">
-      <view class="zan-card__right-col">¥ {{ price }}</view>
-      <view class="zan-card__left-col zan-ellipsis--l2">
-        {{ title }}
+  <view class="zan-card__detail">
+    <slot wx:if="{{ useDetailSlot }}" name="detail-slot"></slot>
+    <block wx:else>
+      <view class="zan-card__detail-row">
+        <view class="zan-card__right-col">¥ {{ price }}</view>
+        <view class="zan-card__left-col zan-ellipsis--l2">
+          {{ title }}
+        </view>
       </view>
-    </view>
 
-    <view class="zan-card__detail-row zan-c-gray-darker">
-      <view wx:if="{{ num }}" class="zan-card__right-col">x {{ num }}</view>
-      <view wx:if="{{ desc }}" class="zan-card__left-col">
-        {{ desc }}
+      <view class="zan-card__detail-row zan-c-gray-darker">
+        <view wx:if="{{ num }}" class="zan-card__right-col">x {{ num }}</view>
+        <view wx:if="{{ desc }}" class="zan-card__left-col">
+          {{ desc }}
+        </view>
       </view>
-    </view>
 
-    <view wx:if="{{ status }}" class="zan-card__detail-row">
-      <view class="zan-card__left-col zan-c-red">{{ status }}</view>
-    </view>
+      <view wx:if="{{ status }}" class="zan-card__detail-row">
+        <view class="zan-card__left-col zan-c-red">{{ status }}</view>
+      </view>
+    </block>
   </view>
 </view>

packages/cell/README.md

@@ -9,8 +9,9 @@
 | title         | String      | 否       | 无    | 左侧标题                                                                                                 |
 | label         | Boolean     | 否       | false | 标题下方的描述信息                                                                                       |
 | value         | String      | 否       | 取消  | 右侧内容                                                                                                 |
-| isLink        | Number      | 否       | 55    | 链接，用于导航，如果是 `Boolean` 型值则只显示链接样式，`String` 类型值才做导航，但是组件不检查路径正确性 |
-| linkType      | String      | 否       | 无    | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch`                               |
+| isLink        | Boolean      | 否       | false    | 是否展示右侧箭头并开启尝试以 url 跳转 |
+| url        | String      | 否      | -    | 当 isLink 设置为 true 时，点击 cell 会尝试跳转到该路径 |
+| linkType      | String      | 否       | navigateTo    | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch`                               |
 | onlyTapFooter | Boolean     | 否       | false | 只有点击 footer 区域才触发 tab 事件                                                                      |
 | bindtap       | EventHandle | 否       | 无    | 点击 cell 时触发，`onlyTapFooter` 为 `true` 时点击 footer 区域触发                                       |
 

packages/cell/index.js

@@ -32,12 +32,16 @@ Component({
     isLink: {
       type: null,
       value: '',
-      description: '链接，用于导航，如果是 Boolean 型值则只显示链接样式，String 类型值才做导航，但是组件不检查路径正确性'
+      description: '是否展示右侧箭头并开启尝试以 url 跳转'
     },
     linkType: {
       type: String,
       value: 'navigateTo',
       description: '链接类型，可选值为 navigateTo，redirectTo，switchTab，reLaunch'
+    },
+    url: {
+      type: String,
+      value: ''
     }
   },
   data: {
@@ -45,12 +49,12 @@ Component({
   },
   methods: {
     navigateTo () {
-      let url = this.data.isLink.toString()
-      let type = typeof this.data.isLink
+      const url = this.data.url
+      const type = typeof this.data.isLink
 
       this.triggerEvent('tap', {})
 
-      if (!this.data.isLink || url === 'true' || url === 'false') return;
+      if (!this.data.isLink || !url || url === 'true' || url === 'false') return;
 
       if (type !== 'boolean' && type !== 'string') {
         warn('isLink 属性值必须是一个字符串或布尔值', this.data.isLink)

packages/helper/index.pcss

@@ -1,4 +1,5 @@
 @import "../common/_mixins";
+@import "../common/_var";
 
 .zan-pull-left {
   float: left;
@@ -105,6 +106,36 @@
   clear: both;
 }
 
+.zan-c {
+  &-red {
+    color: $red;
+  }
+
+  &-black {
+    color: $black;
+  }
+
+  &-green {
+    color: $green;
+  }
+
+  &-blue {
+    color: $blue;
+  }
+
+  &-gray {
+    color: $gray;
+  }
+
+  &-gray-dark {
+    color: $gray-dark;
+  }
+
+  &-gray-darker {
+    color: $gray-darker;
+  }
+}
+
 /* 超细边框 */
 .zan-hairline {
   &,

packages/panel/README.md

@@ -20,7 +20,6 @@ Panel 提供了一块白色的展示区域，使用方式如下
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
 | title | panel的标题 | String | - | |
-| hide-top | 隐藏顶部边框 | Boolean | - | |
 | hide-border | 内容区隐藏边框 | Boolean | - | |
 
 

packages/panel/index.js

@@ -7,7 +7,7 @@ Component({
     // 标题
     title: {
       type: String,
-      value: '标题'
+      value: ''
     },
     // 内容区顶部是否取消10像素的间距
     hideTop :{

packages/panel/index.pcss

@@ -2,7 +2,7 @@
 
 .zan-panel {
   position: relative;
-  margin-top: 10px;
+  overflow: hidden;
 }
 
 .zan-panel__title {
@@ -13,6 +13,7 @@
 }
 
 .zan-panel__content {
+  position: relative;
   background: #fff;
   overflow: hidden;
   &::after {
@@ -22,10 +23,6 @@
   }
 }
 
-.zan-panel--without-margin-top {
-  margin-top: 0;
-}
-
 .zan-panel--without-border {
   &::after {
     border: 0 none;

packages/panel/index.wxml

@@ -1,4 +1,4 @@
-<view class="zan-panel  {{ hideTop ? 'zan-panel--without-margin-top' : '' }}">
+<view class="zan-panel">
   <view
     wx:if="{{ title }}"
     class="zan-panel__title">{{ title }}</view>