文档页样式优化和打包配置优化 (#8)

* 文档页样式和打包配置优化

* upload unit test

README.md

@@ -58,7 +58,13 @@ npm run dev
 ```
 
 浏览器访问[http://localhost:8080](http://localhost:8080)就可以看到所有组件的示例了。
+
+## 四、手机预览
+
+可以手机扫码以下二维码访问手机端demo：
+
+![zanui_vue_mobile_qrcode](https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/zanui_vue_mobile_preview_03.png)
  
-## 四、开源协议
+## 五、开源协议
 
 本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。

build/webpack.config.dev.js

@@ -5,10 +5,8 @@ var striptags = require('./strip-tags');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var getPoastcssPlugin = require('./utils/postcss_pipe');
 var ProgressBarPlugin = require('progress-bar-webpack-plugin');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-var FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 
 var StyleExtractPlugin;
 if (process.env.NODE_ENV === 'production') {
@@ -172,66 +170,3 @@ module.exports = {
     StyleExtractPlugin
   ]
 };
-
-if (process.env.NODE_ENV === 'production') {
-  delete module.exports.devtool;
-  module.exports.output = {
-    path: path.join(__dirname, '../docs/dist'),
-    publicPath: '/zanui/vue',
-    filename: '[name].[hash:8].js'
-  };
-  module.exports.plugins = module.exports.plugins.concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false,
-        drop_console: true
-      },
-      output: {
-        comments: false
-      },
-      sourceMap: false
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: Infinity
-    }),
-    new FaviconsWebpackPlugin({
-      // Your source logo
-      logo: path.join(__dirname, '../docs/assets/ZanUIlogo256x256.png'),
-      // The prefix for all image files (might be a folder or a name)
-      prefix: 'favico-[hash]-',
-      // Emit all stats of the generated icons
-      // emitStats: false,
-      // The name of the json containing all favicon information
-      // statsFilename: 'iconstats-[hash].json',
-      // Generate a cache file with control hashes and
-      // don't rebuild the favicons until those hashes change
-      persistentCache: false,
-      // Inject the html into the html-webpack-plugin
-      inject: true,
-      // favicon background color (see https://github.com/haydenbleasel/favicons#usage)
-      background: '#fff',
-      // favicon app title (see https://github.com/haydenbleasel/favicons#usage)
-      title: 'Vant',
-
-      // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
-      icons: {
-        android: true,
-        appleIcon: true,
-        appleStartup: true,
-        coast: false,
-        favicons: true,
-        firefox: true,
-        opengraph: false,
-        twitter: false,
-        yandex: false,
-        windows: false
-      }
-    })
-  ]);
-}

build/webpack.config.prod.js

@@ -0,0 +1,34 @@
+var webpack = require('webpack');
+var merge = require('webpack-merge');
+var path = require('path');
+var devConfig = require('./webpack.config.dev.js');
+
+module.exports = merge(devConfig, {
+  output: {
+    path: path.join(__dirname, '../docs/dist'),
+    publicPath: '/zanui/vue',
+    filename: '[name].[hash:8].js'
+  },
+  devtool: false,
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false,
+        drop_console: true
+      },
+      output: {
+        comments: false
+      },
+      sourceMap: false
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: Infinity
+    })
+  ]
+});

docs/assets/docs.css

@@ -67,7 +67,7 @@ code.hljs {
 }
 
 .main-content {
-  margin: 110px 20px 40px;
+  margin: 130px 20px 40px;
   padding-top: 20px;
 }
 

docs/src/components/page-footer.vue

@@ -5,7 +5,7 @@
         <a href="https://www.youzan.com/" class="page-footer__link" target="_blank">有赞官网</a>
       </li>
       <li class="page-footer__item">
-        <a href="#" class="page-footer__link" target="_blank">有赞云</a>
+        <a href="https://www.youzanyun.com/" class="page-footer__link" target="_blank">有赞云</a>
       </li>
       <li class="page-footer__item">
         <a href="https://job.youzan.com/" class="page-footer__link" target="_blank">加入我们</a>

docs/src/components/page-header.vue

@@ -2,17 +2,17 @@
   <div class="page-header">
     <div class="page-header__top">
       <h1 class="page-header__logo">
-        <a href="#"></a>
+        <a href="https://www.youzanyun.com/zanui"></a>
       </h1>
       <ul class="page-header__navs">
         <li class="page-header__item">
-          <a href="/" class="page-header__link">首页</a>
+          <a href="https://www.youzanyun.com/zanui" class="page-header__link">首页</a>
         </li>
         <li class="page-header__item">
-          <a href="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
+          <a href="https://www.youzanyun.com/zanui/react" class="page-header__link">PC端</a>
         </li>
         <li class="page-header__item">
-          <a href="http://zanui.qima-inc.com/zanui/vue" class="page-header__link page-header__link--active">移动端</a>
+          <a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">移动端</a>
         </li>
         <li class="page-header__item">
           <a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
@@ -21,10 +21,10 @@
     </div>
     <ul class="page-header__subnavs" :class="{ 'page-header__subnavs--shadow': scrollTop > 0 }">
       <li class="page-header__item">
-        <a href="http://zanui.qima-inc.com/zanui/vue" class="page-header__link page-header__link--active">基础组件</a>
+        <a href="https://www.youzanyun.com/zanui/vue" class="page-header__link page-header__link--active">基础组件</a>
       </li>
       <li class="page-header__item">
-        <a href="http://zanui.qima-inc.com/captain" class="page-header__link">业务组件</a>
+        <a href="https://www.youzanyun.com/zanui/captain" class="page-header__link">业务组件</a>
       </li>
       <li class="page-header__item">
         <span class="page-header__link">V{{ version }}</span>
@@ -69,7 +69,7 @@ export default {
     
     @e top {
       overflow: hidden;
-      height: 60px;
+      height: 80px;
       background-color: #fbfbfb;
       box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
     }
@@ -81,10 +81,10 @@ export default {
         display: block;
         width: 78px;
         height: 20px;
-        background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fjm3aSwID8ROIV_5TO6dZdJ_IEgz.png);
+        background-image: url(https://img.yzcdn.cn/upload_files/2017/04/20/FjwR1mraVIqtHWb8YWDW_YzQ_Kh2.png);
         background-size: contain;
         background-repeat: no-repeat;
-        margin: 20px 0 0 20px;
+        margin: 30px 0 0 20px;
       }
     }
 
@@ -117,7 +117,7 @@ export default {
 
     @e link {
       display: block;
-      line-height: 60px;
+      line-height: 80px;
       color: #333;
       font-size: 16px;
       margin: 0 20px;

docs/src/index.tpl

@@ -3,7 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-  <title>Vant - Vue mobile ui in Youzan</title>
+  <link rel="shortcut icon" href="https://b.yzcdn.cn/zanui/icon/zanui.ico">
+  <title>ZanUI - 移动端</title>
 </head>
 <body>
 

package.json

@@ -10,8 +10,8 @@
     "packages"
   ],
   "scripts": {
-    "bootstrap": "yarn || npm i --registry=http://registry.npm.qima-inc.com",
+    "bootstrap": "yarn || npm i",
-    "dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js --content-base ./",
+    "dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.dev.js --content-base ./",
     "build:file": "node build/bin/build-entry.js",
     "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
     "build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js && cp-cli packages/vant-css/lib lib/vant-css",
@@ -19,7 +19,7 @@
     "build:vant": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
     "build:example": "node build/genExamples.js",
     "deploy": "npm run deploy:docs && gh-pages -d docs/dist --remote youzan && rimraf docs/dist",
-    "deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
+    "deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.prod.js",
     "dist": "npm run clean && npm run build:file && npm run lint && npm run build:vant && npm run build:components && npm run build:utils && npm run build:vant-css",
     "clean": "rimraf lib && rimraf packages/*/lib",
     "lint": "felint lint src/**/*.js packages/**/*.{js,vue} build/**/*.js",
@@ -73,7 +73,6 @@
     "eslint-loader": "^1.7.1",
     "eslint-plugin-vue": "^2.0.1",
     "extract-text-webpack-plugin": "^2.0.0-beta.5",
-    "favicons-webpack-plugin": "0.0.7",
     "felint": "^0.5.0-alpha.3",
     "file-loader": "^0.9.0",
     "file-save": "^0.2.0",

packages/image-preview/src/image-preview.vue

@@ -68,6 +68,7 @@ export default {
     },
 
     close() {
+      /* istanbul ignore if */
       if (this.closing) return;
 
       this.closing = true;

test/unit/specs/image-preview.spec.js

@@ -1,15 +1,16 @@
 import ImagePreview from 'packages/image-preview';
 
 describe('ImagePreview', () => {
+  beforeEach(() => {
+    document.body.style.overflow = '';
+  });
+
   afterEach(() => {
     const el = document.querySelector('.van-image-preview');
     if (!el) return;
     if (el.parentNode) {
       el.parentNode.removeChild(el);
     }
-    if (el.__vue__) {
-      el.__vue__.$destroy();
-    }
   });
 
   it('create a image preview', (done) => {
@@ -24,6 +25,27 @@ describe('ImagePreview', () => {
       document.querySelector('.van-swipe-item').click();
       setTimeout(() => {
         expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
+        expect(document.body.style.overflow).to.equal('');
+        done();
+      }, 500);
+    }, 500);
+  });
+
+  it('create a body hidden image preview', (done) => {
+    document.body.style.overflow = 'hidden';
+
+    ImagePreview([
+      'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+      'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
+    ]);
+
+    expect(document.querySelector('.van-image-preview')).to.exist;
+
+    setTimeout(() => {
+      document.querySelector('.van-swipe-item').click();
+      setTimeout(() => {
+        expect(document.querySelector('.van-image-preview').__vue__.$parent.value).to.be.false;
+        expect(document.body.style.overflow).to.equal('hidden');
         done();
       }, 500);
     }, 500);

test/unit/specs/uploader.spec.js

@@ -1,87 +1,87 @@
-// import Uploader from 'packages/uploader';
+import Uploader from 'packages/uploader';
-// import { mount } from 'avoriaz';
+import { mount } from 'avoriaz';
 
-// describe('Uploader', () => {
+describe('Uploader', () => {
-//   let wrapper;
+  let wrapper;
-//   afterEach(() => {
+  afterEach(() => {
-//     wrapper && wrapper.destroy();
+    wrapper && wrapper.destroy();
-//   });
+  });
 
-//   it('enabled', () => {
+  it('enabled', () => {
-//     wrapper = mount(Uploader, {
+    wrapper = mount(Uploader, {
-//       propsData: {
+      propsData: {
-//         disabled: false
+        disabled: false
-//       }
+      }
-//     });
+    });
 
-//     expect(wrapper.contains('input')).to.equal(true);
+    expect(wrapper.contains('input')).to.equal(true);
-//     expect(wrapper.vm.onValueChange({ target: { files: [] }})).to.equal(undefined);
+    expect(wrapper.vm.onValueChange({ target: { files: [] }})).to.equal(undefined);
-//   });
+  });
 
-//   it('disabled', () => {
+  it('disabled', () => {
-//     wrapper = mount(Uploader, {
+    wrapper = mount(Uploader, {
-//       propsData: {
+      propsData: {
-//         disabled: true
+        disabled: true
-//       }
+      }
-//     });
+    });
 
-//     expect(wrapper.contains('input')).to.equal(true);
+    expect(wrapper.contains('input')).to.equal(true);
-//     expect(wrapper.vm.onValueChange({ target: { files: [] }})).to.equal(undefined);
+    expect(wrapper.vm.onValueChange({ target: { files: [] }})).to.equal(undefined);
-//   });
+  });
 
-//   it('before read', () => {
+  // it('before read', () => {
-//     wrapper = mount(Uploader, {
+  //   wrapper = mount(Uploader, {
-//       propsData: {
+  //     propsData: {
-//         disabled: false,
+  //       disabled: false,
-//         beforeRead: () => {
+  //       beforeRead: () => {
-//           return false;
+  //         return false;
-//         }
+  //       }
-//       }
+  //     }
-//     });
+  //   });
 
-//     expect(wrapper.contains('input')).to.equal(true);
+  //   expect(wrapper.contains('input')).to.equal(true);
-//     expect(wrapper.vm.onValueChange({ target: { files: [new File([], '')] }})).to.equal(undefined);
+  //   expect(wrapper.vm.onValueChange({ target: { files: [new File([], '')] }})).to.equal(undefined);
-//   });
+  // });
 
-//   it('read text', () => {
+  // it('read text', () => {
-//     wrapper = mount(Uploader, {
+  //   wrapper = mount(Uploader, {
-//       propsData: {
+  //     propsData: {
-//         disabled: false,
+  //       disabled: false,
-//         resultType: 'text',
+  //       resultType: 'text',
-//         afterRead: (file) => {
+  //       afterRead: (file) => {
-//           console.log(file);
+  //         console.log(file);
-//         }
+  //       }
-//       }
+  //     }
-//     });
+  //   });
 
-//     expect(wrapper.contains('input')).to.equal(true);
+  //   expect(wrapper.contains('input')).to.equal(true);
-//     expect(wrapper.vm.onValueChange({ target: { files: [new File([], '/Users')] }})).to.equal(undefined);
+  //   expect(wrapper.vm.onValueChange({ target: { files: [new File([], '/Users')] }})).to.equal(undefined);
-//   });
+  // });
 
-//   it('read text no after hook', () => {
+  // it('read text no after hook', () => {
-//     wrapper = mount(Uploader, {
+  //   wrapper = mount(Uploader, {
-//       propsData: {
+  //     propsData: {
-//         disabled: false,
+  //       disabled: false,
-//         resultType: 'text'
+  //       resultType: 'text'
-//       }
+  //     }
-//     });
+  //   });
 
-//     expect(wrapper.contains('input')).to.equal(true);
+  //   expect(wrapper.contains('input')).to.equal(true);
-//     expect(wrapper.vm.onValueChange({ target: { files: [new File([], '/Users')] }})).to.equal(undefined);
+  //   expect(wrapper.vm.onValueChange({ target: { files: [new File([], '/Users')] }})).to.equal(undefined);
-//   });
+  // });
 
-//   it('read dataUrl', () => {
+  // it('read dataUrl', () => {
-//     wrapper = mount(Uploader, {
+  //   wrapper = mount(Uploader, {
-//       propsData: {
+  //     propsData: {
-//         disabled: false,
+  //       disabled: false,
-//         resultType: 'dataUrl',
+  //       resultType: 'dataUrl',
-//         afterRead: (file) => {
+  //       afterRead: (file) => {
-//           console.log(file);
+  //         console.log(file);
-//         }
+  //       }
-//       }
+  //     }
-//     });
+  //   });
 
-//     expect(wrapper.contains('input')).to.equal(true);
+  //   expect(wrapper.contains('input')).to.equal(true);
-//     expect(wrapper.vm.onValueChange({ target: { files: [new File([], '/Users')] }})).to.equal(undefined);
+  //   expect(wrapper.vm.onValueChange({ target: { files: [new File([], '/Users')] }})).to.equal(undefined);
-//   });
+  // });
-// });
+});