[Improvement] update common style

doc.config.js

@@ -36,7 +36,7 @@ module.exports = {
         include: {
           icon: require('./packages/icon/README.md'),
           button: require('./packages/button/README.md'),
-          helper: require('./packages/helper/README.md'),
+          common: require('./packages/common/README.md'),
           loading: require('./packages/loading/README.md')
         }
       },

example/pages/common/index.json

@@ -1,8 +1,6 @@
 {
-  "navigationBarTitleText": "Common 基础样式",
+  "navigationBarTitleText": "Common 内置样式",
   "usingComponents": {
-    "van-cell": "../../dist/cell/index",
-    "van-panel": "../../dist/panel/index",
-    "van-cell-group": "../../dist/cell-group/index"
+    "demo-block": "../../components/demo-block/index"
   }
 }

example/pages/common/index.wxml

@@ -1,57 +1,7 @@
-<view class="van-panel">
-  <van-cell>
-    <view class="van-pull-right">van-pull-right: 往右靠</view>
-  </van-cell>
-
-  <van-cell>
-    <view class="van-text-deleted">van-text-deleted：被删除的效果</view>
-  </van-cell>
-
-  <van-cell>
-    <view>
-      <view class="van-font-12">van-font-12：字号12</view>
-      <view class="van-font-12 van-font-bold">van-font-bold：再来个加粗</view>
-    </view>
-  </van-cell>
-
-  <van-cell>
-    <view>
-      <view class="van-font-16">van-font-16：字号16</view>
-      <view class="van-font-16 van-font-bold">van-font-bold：再来个加粗</view>
-    </view>
-  </van-cell>
-
-  <van-cell>
-    <view class="">
-      <view>字体颜色</view>
-      <view class="van-c-red">van-c-red: 红色</view>
-      <view class="van-c-gray">van-c-gray: 灰色</view>
-      <view class="van-c-gray-dark">van-c-gray-dark: 再灰一点点</view>
-      <view class="van-c-gray-darker">van-c-gray-darker: 更深的灰色</view>
-      <view class="van-c-black">van-c-black: 黑色</view>
-      <view class="van-c-blue">van-c-blue: 蓝色</view>
-      <view class="van-c-green">van-c-green: 绿色</view>
-    </view>
-  </van-cell>
-
-  <van-cell>
-    <view>van-arrow：箭头</view>
-    <view class="van-arrow"></view>
-  </van-cell>
-
-  <van-cell>
-    <view class="van-ellipsis" style="width: 300px;">
-      van-ellipsis：单行点点点
-      ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
-    </view>
-  </van-cell>
-
-  <van-cell>
-    <view class="van-ellipsis--l2">
-      van-ellipsis--l2：单行点点点
-      ->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
-    </view>
-  </van-cell>
-
-</view>
+<demo-block title="文字省略">
+  <view class="van-ellipsis ellipsis">这是一段宽度限制 250px 的文字，后面的内容会省略</view>
+</demo-block>
 
+<demo-block title="1px 边框">
+  <view class="van-hairline--top hairline" />
+</demo-block>

example/pages/common/index.wxss

@@ -0,0 +1,14 @@
+.ellipsis {
+  font-size: 13px;
+  margin-left: 15px;
+  max-width: 250px;
+}
+
+.hairline {
+  height: 30px;
+  background-color: #fff;
+}
+
+.hairline::after {
+  top: 15px;
+}

example/pages/dashboard/config.js

@@ -3,7 +3,7 @@ export default {
     title: '基础组件',
     content: [
       {
-        name: 'Common 基础样式',
+        name: 'Common 内置样式',
         path: '/pages/common/index'
       },
       {

packages/common/README.md

@@ -1,71 +1,32 @@
-## Helper 基础样式
+## Common 内置样式
+Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。
 
-### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/vant-weapp/dist/index.wxss";
-```
+### 文字省略
+当文本内容长度超过容器最大宽度时，自动省略多余的文本。
 
-### 代码演示
-直接在元素上增加指定 class 即可
 ```html
-<view class="van-pull-right">van-pull-right: 往右靠</view>
+<view class="van-ellipsis">这是一段宽度限制 250px 的文字，后面的内容会省略</view>
 ```
 
-具体可用类名如下：
+### 1px 边框
+为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
 
-**字体大小**
+```html
+<!-- 上边框 -->
+<view class="van-hairline--top"></view>
 
-`van-font-8` 文字以8像素大小展示
+<!-- 下边框 -->
+<view class="van-hairline--bottom"></view>
 
-`van-font-10` 文字以10像素大小展示
+<!-- 左边框 -->
+<view class="van-hairline--left"></view>
 
-`van-font-12` 文字以12像素大小展示
+<!-- 右边框 -->
+<view class="van-hairline--right"></view>
 
-`van-font-14` 文字以14像素大小展示
+<!-- 上下边框 -->
+<view class="van-hairline--top-bottom"></view>
 
-`van-font-16` 文字以16像素大小展示
-
-`van-font-18` 文字以18像素大小展示
-
-`van-font-20` 文字以20像素大小展示
-
-`van-font-22` 文字以22像素大小展示
-
-`van-font-24` 文字以24像素大小展示
-
-`van-font-30` 文字以30像素大小展示
-
-**字体颜色**
-
-`van-c-red` 文字以红色展示
-
-`van-c-gray` 文字以浅灰色展示
-
-`van-c-gray-dark` 文字以灰色展示
-
-`van-c-gray-darker` 文字以深灰色展示
-
-`van-c-black` 文字以黑色展示
-
-`van-c-blue` 文字以蓝色展示
-
-`van-c-green` 文字以绿色展示
-
-**字体样式**
-
-`van-pull-right` 文字往右靠
-
-`van-text-deleted` 文字显示删除效果
-
-`van-font-bold` 文字加粗显示
-
-**其他**
-
-`van-arrow` 展示向右侧箭头，以 absolute 布局，需要在外层加上 relative 来定位
-
-`van-ellipsis` 文字过长点点点显示
-
-`van-ellipsis--l2` 文字过长点点点显示，最多显示两行
-
-`van-ellipsis--l3` 文字过长点点点显示，最多显示三行
+<!-- 全边框 -->
+<view class="van-hairline--surround"></view>
+```