diff --git a/.babelrc b/.babelrc
index 7dd5e9d..b9645d5 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,13 @@
 {
-  "presets": ["@babel/preset-react"]
+  "presets": ["@babel/preset-react"],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "libraryDirectory": "es",
+        "style": "css" // `style: true` 会加载 less 文件
+      }
+    ]
+  ]
 }
diff --git a/.prettierrc b/.prettierrc
index 84d393d..4441986 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,7 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 100,
+  "printWidth": 80,
   "proseWrap": "never",
   "overrides": [
     {
diff --git a/dist/bici-design.js b/dist/bici-design.js
index 94a2fc6..d8f2f04 100644
--- a/dist/bici-design.js
+++ b/dist/bici-design.js
@@ -1,52 +1,120 @@
-!(function(e, t) {
+!(function(e, n) {
   'object' == typeof exports && 'object' == typeof module
-    ? (module.exports = t(require('react'), require('prop-types')))
+    ? (module.exports = n(
+        require('react'),
+        require('prop-types'),
+        require('antd/es/notification'),
+        require('dayjs'),
+        require('dayjs/plugin/isSameOrBefore'),
+        require('dayjs/plugin/isSameOrAfter'),
+        require('dayjs/plugin/advancedFormat'),
+        require('dayjs/plugin/customParseFormat'),
+        require('dayjs/plugin/weekday'),
+        require('dayjs/plugin/weekYear'),
+        require('dayjs/plugin/weekOfYear'),
+        require('dayjs/plugin/isMoment'),
+        require('dayjs/plugin/localeData'),
+        require('dayjs/plugin/localizedFormat'),
+        require('lodash'),
+        require('antd/es/notification/style/css'),
+      ))
     : 'function' == typeof define && define.amd
-    ? define(['react', 'prop-types'], t)
+    ? define([
+        'react',
+        'prop-types',
+        'antd/es/notification',
+        'dayjs',
+        'dayjs/plugin/isSameOrBefore',
+        'dayjs/plugin/isSameOrAfter',
+        'dayjs/plugin/advancedFormat',
+        'dayjs/plugin/customParseFormat',
+        'dayjs/plugin/weekday',
+        'dayjs/plugin/weekYear',
+        'dayjs/plugin/weekOfYear',
+        'dayjs/plugin/isMoment',
+        'dayjs/plugin/localeData',
+        'dayjs/plugin/localizedFormat',
+        'lodash',
+        'antd/es/notification/style/css',
+      ], n)
     : 'object' == typeof exports
-    ? (exports.BiciDesign = t(require('react'), require('prop-types')))
-    : (e.BiciDesign = t(e.react, e['prop-types']));
-})(window, function(e, t) {
+    ? (exports.BiciDesign = n(
+        require('react'),
+        require('prop-types'),
+        require('antd/es/notification'),
+        require('dayjs'),
+        require('dayjs/plugin/isSameOrBefore'),
+        require('dayjs/plugin/isSameOrAfter'),
+        require('dayjs/plugin/advancedFormat'),
+        require('dayjs/plugin/customParseFormat'),
+        require('dayjs/plugin/weekday'),
+        require('dayjs/plugin/weekYear'),
+        require('dayjs/plugin/weekOfYear'),
+        require('dayjs/plugin/isMoment'),
+        require('dayjs/plugin/localeData'),
+        require('dayjs/plugin/localizedFormat'),
+        require('lodash'),
+        require('antd/es/notification/style/css'),
+      ))
+    : (e.BiciDesign = n(
+        e.react,
+        e['prop-types'],
+        e['antd/es/notification'],
+        e.dayjs,
+        e['dayjs/plugin/isSameOrBefore'],
+        e['dayjs/plugin/isSameOrAfter'],
+        e['dayjs/plugin/advancedFormat'],
+        e['dayjs/plugin/customParseFormat'],
+        e['dayjs/plugin/weekday'],
+        e['dayjs/plugin/weekYear'],
+        e['dayjs/plugin/weekOfYear'],
+        e['dayjs/plugin/isMoment'],
+        e['dayjs/plugin/localeData'],
+        e['dayjs/plugin/localizedFormat'],
+        e.lodash,
+        e['antd/es/notification/style/css'],
+      ));
+})(window, function(e, n, t, r, i, o, a, u, s, c, l, d, f, p, y, v) {
   return (function(e) {
-    var t = {};
-    function n(r) {
-      if (t[r]) return t[r].exports;
-      var o = (t[r] = { i: r, l: !1, exports: {} });
-      return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports;
+    var n = {};
+    function t(r) {
+      if (n[r]) return n[r].exports;
+      var i = (n[r] = { i: r, l: !1, exports: {} });
+      return e[r].call(i.exports, i, i.exports, t), (i.l = !0), i.exports;
     }
     return (
-      (n.m = e),
-      (n.c = t),
-      (n.d = function(e, t, r) {
-        n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r });
+      (t.m = e),
+      (t.c = n),
+      (t.d = function(e, n, r) {
+        t.o(e, n) || Object.defineProperty(e, n, { enumerable: !0, get: r });
       }),
-      (n.r = function(e) {
+      (t.r = function(e) {
         'undefined' != typeof Symbol &&
           Symbol.toStringTag &&
           Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
           Object.defineProperty(e, '__esModule', { value: !0 });
       }),
-      (n.t = function(e, t) {
-        if ((1 & t && (e = n(e)), 8 & t)) return e;
-        if (4 & t && 'object' == typeof e && e && e.__esModule) return e;
+      (t.t = function(e, n) {
+        if ((1 & n && (e = t(e)), 8 & n)) return e;
+        if (4 & n && 'object' == typeof e && e && e.__esModule) return e;
         var r = Object.create(null);
         if (
-          (n.r(r),
+          (t.r(r),
           Object.defineProperty(r, 'default', { enumerable: !0, value: e }),
-          2 & t && 'string' != typeof e)
+          2 & n && 'string' != typeof e)
         )
-          for (var o in e)
-            n.d(
+          for (var i in e)
+            t.d(
               r,
-              o,
-              function(t) {
-                return e[t];
-              }.bind(null, o),
+              i,
+              function(n) {
+                return e[n];
+              }.bind(null, i),
             );
         return r;
       }),
-      (n.n = function(e) {
-        var t =
+      (t.n = function(e) {
+        var n =
           e && e.__esModule
             ? function() {
                 return e.default;
@@ -54,167 +122,185 @@
             : function() {
                 return e;
               };
-        return n.d(t, 'a', t), t;
+        return t.d(n, 'a', n), n;
       }),
-      (n.o = function(e, t) {
-        return Object.prototype.hasOwnProperty.call(e, t);
+      (t.o = function(e, n) {
+        return Object.prototype.hasOwnProperty.call(e, n);
       }),
-      (n.p = ''),
-      n((n.s = 9))
+      (t.p = ''),
+      t((t.s = 6))
     );
   })([
-    function(e, t, n) {
+    function(e, n, t) {
       'use strict';
       e.exports = function(e) {
-        var t = [];
+        var n = [];
         return (
-          (t.toString = function() {
-            return this.map(function(t) {
-              var n = (function(e, t) {
-                var n = e[1] || '',
+          (n.toString = function() {
+            return this.map(function(n) {
+              var t = (function(e, n) {
+                var t = e[1] || '',
                   r = e[3];
-                if (!r) return n;
-                if (t && 'function' == typeof btoa) {
-                  var o =
+                if (!r) return t;
+                if (n && 'function' == typeof btoa) {
+                  var i =
                       ((a = r),
-                      (c = btoa(unescape(encodeURIComponent(JSON.stringify(a))))),
-                      (u = 'sourceMappingURL=data:application/json;charset=utf-8;base64,'.concat(
-                        c,
+                      (u = btoa(
+                        unescape(encodeURIComponent(JSON.stringify(a))),
                       )),
-                      '/*# '.concat(u, ' */')),
-                    i = r.sources.map(function(e) {
-                      return '/*# sourceURL='.concat(r.sourceRoot || '').concat(e, ' */');
+                      (s = 'sourceMappingURL=data:application/json;charset=utf-8;base64,'.concat(
+                        u,
+                      )),
+                      '/*# '.concat(s, ' */')),
+                    o = r.sources.map(function(e) {
+                      return '/*# sourceURL='
+                        .concat(r.sourceRoot || '')
+                        .concat(e, ' */');
                     });
-                  return [n]
-                    .concat(i)
-                    .concat([o])
+                  return [t]
+                    .concat(o)
+                    .concat([i])
                     .join('\n');
                 }
-                var a, c, u;
-                return [n].join('\n');
-              })(t, e);
-              return t[2] ? '@media '.concat(t[2], ' {').concat(n, '}') : n;
+                var a, u, s;
+                return [t].join('\n');
+              })(n, e);
+              return n[2] ? '@media '.concat(n[2], ' {').concat(t, '}') : t;
             }).join('');
           }),
-          (t.i = function(e, n, r) {
+          (n.i = function(e, t, r) {
             'string' == typeof e && (e = [[null, e, '']]);
-            var o = {};
+            var i = {};
             if (r)
-              for (var i = 0; i < this.length; i++) {
-                var a = this[i][0];
-                null != a && (o[a] = !0);
+              for (var o = 0; o < this.length; o++) {
+                var a = this[o][0];
+                null != a && (i[a] = !0);
               }
-            for (var c = 0; c < e.length; c++) {
-              var u = [].concat(e[c]);
-              (r && o[u[0]]) ||
-                (n && (u[2] ? (u[2] = ''.concat(n, ' and ').concat(u[2])) : (u[2] = n)), t.push(u));
+            for (var u = 0; u < e.length; u++) {
+              var s = [].concat(e[u]);
+              (r && i[s[0]]) ||
+                (t &&
+                  (s[2]
+                    ? (s[2] = ''.concat(t, ' and ').concat(s[2]))
+                    : (s[2] = t)),
+                n.push(s));
             }
           }),
-          t
+          n
         );
       };
     },
-    function(t, n) {
-      t.exports = e;
+    function(n, t) {
+      n.exports = e;
     },
-    function(e, t, n) {
+    function(e, n, t) {
       'use strict';
       var r,
-        o = function() {
+        i = function() {
           return (
-            void 0 === r && (r = Boolean(window && document && document.all && !window.atob)), r
+            void 0 === r &&
+              (r = Boolean(window && document && document.all && !window.atob)),
+            r
           );
         },
-        i = (function() {
+        o = (function() {
           var e = {};
-          return function(t) {
-            if (void 0 === e[t]) {
-              var n = document.querySelector(t);
-              if (window.HTMLIFrameElement && n instanceof window.HTMLIFrameElement)
+          return function(n) {
+            if (void 0 === e[n]) {
+              var t = document.querySelector(n);
+              if (
+                window.HTMLIFrameElement &&
+                t instanceof window.HTMLIFrameElement
+              )
                 try {
-                  n = n.contentDocument.head;
+                  t = t.contentDocument.head;
                 } catch (e) {
-                  n = null;
+                  t = null;
                 }
-              e[t] = n;
+              e[n] = t;
             }
-            return e[t];
+            return e[n];
           };
         })(),
         a = [];
-      function c(e) {
-        for (var t = -1, n = 0; n < a.length; n++)
-          if (a[n].identifier === e) {
-            t = n;
+      function u(e) {
+        for (var n = -1, t = 0; t < a.length; t++)
+          if (a[t].identifier === e) {
+            n = t;
             break;
           }
-        return t;
+        return n;
       }
-      function u(e, t) {
-        for (var n = {}, r = [], o = 0; o < e.length; o++) {
-          var i = e[o],
-            u = t.base ? i[0] + t.base : i[0],
-            s = n[u] || 0,
-            f = ''.concat(u, ' ').concat(s);
-          n[u] = s + 1;
-          var l = c(f),
-            p = { css: i[1], media: i[2], sourceMap: i[3] };
-          -1 !== l
-            ? (a[l].references++, a[l].updater(p))
-            : a.push({ identifier: f, updater: m(p, t), references: 1 }),
-            r.push(f);
+      function s(e, n) {
+        for (var t = {}, r = [], i = 0; i < e.length; i++) {
+          var o = e[i],
+            s = n.base ? o[0] + n.base : o[0],
+            c = t[s] || 0,
+            l = ''.concat(s, ' ').concat(c);
+          t[s] = c + 1;
+          var d = u(l),
+            f = { css: o[1], media: o[2], sourceMap: o[3] };
+          -1 !== d
+            ? (a[d].references++, a[d].updater(f))
+            : a.push({ identifier: l, updater: g(f, n), references: 1 }),
+            r.push(l);
         }
         return r;
       }
-      function s(e) {
-        var t = document.createElement('style'),
+      function c(e) {
+        var n = document.createElement('style'),
           r = e.attributes || {};
         if (void 0 === r.nonce) {
-          var o = n.nc;
-          o && (r.nonce = o);
+          var i = t.nc;
+          i && (r.nonce = i);
         }
         if (
           (Object.keys(r).forEach(function(e) {
-            t.setAttribute(e, r[e]);
+            n.setAttribute(e, r[e]);
           }),
           'function' == typeof e.insert)
         )
-          e.insert(t);
+          e.insert(n);
         else {
-          var a = i(e.insert || 'head');
+          var a = o(e.insert || 'head');
           if (!a)
             throw new Error(
               "Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.",
             );
-          a.appendChild(t);
+          a.appendChild(n);
         }
-        return t;
+        return n;
       }
-      var f,
-        l =
-          ((f = []),
-          function(e, t) {
-            return (f[e] = t), f.filter(Boolean).join('\n');
+      var l,
+        d =
+          ((l = []),
+          function(e, n) {
+            return (l[e] = n), l.filter(Boolean).join('\n');
           });
-      function p(e, t, n, r) {
-        var o = n ? '' : r.media ? '@media '.concat(r.media, ' {').concat(r.css, '}') : r.css;
-        if (e.styleSheet) e.styleSheet.cssText = l(t, o);
+      function f(e, n, t, r) {
+        var i = t
+          ? ''
+          : r.media
+          ? '@media '.concat(r.media, ' {').concat(r.css, '}')
+          : r.css;
+        if (e.styleSheet) e.styleSheet.cssText = d(n, i);
         else {
-          var i = document.createTextNode(o),
+          var o = document.createTextNode(i),
             a = e.childNodes;
-          a[t] && e.removeChild(a[t]), a.length ? e.insertBefore(i, a[t]) : e.appendChild(i);
+          a[n] && e.removeChild(a[n]),
+            a.length ? e.insertBefore(o, a[n]) : e.appendChild(o);
         }
       }
-      function d(e, t, n) {
-        var r = n.css,
-          o = n.media,
-          i = n.sourceMap;
+      function p(e, n, t) {
+        var r = t.css,
+          i = t.media,
+          o = t.sourceMap;
         if (
-          (o ? e.setAttribute('media', o) : e.removeAttribute('media'),
-          i &&
+          (i ? e.setAttribute('media', i) : e.removeAttribute('media'),
+          o &&
             btoa &&
             (r += '\n/*# sourceMappingURL=data:application/json;base64,'.concat(
-              btoa(unescape(encodeURIComponent(JSON.stringify(i)))),
+              btoa(unescape(encodeURIComponent(JSON.stringify(o)))),
               ' */',
             )),
           e.styleSheet)
@@ -225,113 +311,230 @@
           e.appendChild(document.createTextNode(r));
         }
       }
-      var v = null,
-        h = 0;
-      function m(e, t) {
-        var n, r, o;
-        if (t.singleton) {
-          var i = h++;
-          (n = v || (v = s(t))), (r = p.bind(null, n, i, !1)), (o = p.bind(null, n, i, !0));
+      var y = null,
+        v = 0;
+      function g(e, n) {
+        var t, r, i;
+        if (n.singleton) {
+          var o = v++;
+          (t = y || (y = c(n))),
+            (r = f.bind(null, t, o, !1)),
+            (i = f.bind(null, t, o, !0));
         } else
-          (n = s(t)),
-            (r = d.bind(null, n, t)),
-            (o = function() {
+          (t = c(n)),
+            (r = p.bind(null, t, n)),
+            (i = function() {
               !(function(e) {
                 if (null === e.parentNode) return !1;
                 e.parentNode.removeChild(e);
-              })(n);
+              })(t);
             });
         return (
           r(e),
-          function(t) {
-            if (t) {
-              if (t.css === e.css && t.media === e.media && t.sourceMap === e.sourceMap) return;
-              r((e = t));
-            } else o();
+          function(n) {
+            if (n) {
+              if (
+                n.css === e.css &&
+                n.media === e.media &&
+                n.sourceMap === e.sourceMap
+              )
+                return;
+              r((e = n));
+            } else i();
           }
         );
       }
-      e.exports = function(e, t) {
-        (t = t || {}).singleton || 'boolean' == typeof t.singleton || (t.singleton = o());
-        var n = u((e = e || []), t);
+      e.exports = function(e, n) {
+        (n = n || {}).singleton ||
+          'boolean' == typeof n.singleton ||
+          (n.singleton = i());
+        var t = s((e = e || []), n);
         return function(e) {
-          if (((e = e || []), '[object Array]' === Object.prototype.toString.call(e))) {
-            for (var r = 0; r < n.length; r++) {
-              var o = c(n[r]);
-              a[o].references--;
+          if (
+            ((e = e || []),
+            '[object Array]' === Object.prototype.toString.call(e))
+          ) {
+            for (var r = 0; r < t.length; r++) {
+              var i = u(t[r]);
+              a[i].references--;
             }
-            for (var i = u(e, t), s = 0; s < n.length; s++) {
-              var f = c(n[s]);
-              0 === a[f].references && (a[f].updater(), a.splice(f, 1));
+            for (var o = s(e, n), c = 0; c < t.length; c++) {
+              var l = u(t[c]);
+              0 === a[l].references && (a[l].updater(), a.splice(l, 1));
             }
-            n = i;
+            t = o;
           }
         };
       };
     },
-    function(e, t, n) {
+    function(e, t) {
+      e.exports = n;
+    },
+    function(e, n, t) {
       'use strict';
-      var r = n(0),
-        o = n.n(r)()(!1);
-      o.push([
+      var r = t(0),
+        i = t.n(r)()(!1);
+      i.push([
         e.i,
         '.ellipse {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n',
         '',
       ]),
-        (t.a = o);
+        (n.a = i);
     },
-    function(e, t, n) {
-      var r = n(2),
-        o = n(5);
-      'string' == typeof (o = o.__esModule ? o.default : o) && (o = [[e.i, o, '']]);
-      var i = { insert: 'head', singleton: !1 };
-      r(o, i);
-      e.exports = o.locals || {};
+    function(e, n) {
+      e.exports = t;
     },
-    function(e, t, n) {
-      'use strict';
-      n.r(t);
-      var r = n(0),
-        o = n.n(r),
-        i = n(3),
-        a = o()(!1);
-      a.i(i.a), a.push([e.i, '\n', '']), (t.default = a);
+    function(e, n, t) {
+      t(7), (e.exports = t(26));
+    },
+    function(e, n, t) {
+      var r = t(8),
+        i = t(9),
+        o = t(10),
+        a = t(11),
+        u = t(12),
+        s = t(13),
+        c = t(14),
+        l = t(15),
+        d = t(16),
+        f = t(17),
+        p = t(18);
+      r.extend(i),
+        r.extend(o),
+        r.extend(a),
+        r.extend(u),
+        r.extend(s),
+        r.extend(c),
+        r.extend(l),
+        r.extend(d),
+        r.extend(f),
+        r.extend(p);
+      var y = t(19);
+      r.extend(y);
     },
     function(e, n) {
-      e.exports = t;
+      e.exports = r;
+    },
+    function(e, n) {
+      e.exports = i;
+    },
+    function(e, n) {
+      e.exports = o;
+    },
+    function(e, n) {
+      e.exports = a;
+    },
+    function(e, n) {
+      e.exports = u;
+    },
+    function(e, n) {
+      e.exports = s;
+    },
+    function(e, n) {
+      e.exports = c;
+    },
+    function(e, n) {
+      e.exports = l;
+    },
+    function(e, n) {
+      e.exports = d;
+    },
+    function(e, n) {
+      e.exports = f;
+    },
+    function(e, n) {
+      e.exports = p;
+    },
+    function(e, n) {
+      const t = { en_GB: 'en-gb', en_US: 'en', zh_CN: 'zh-cn', zh_TW: 'zh-tw' };
+      e.exports = function(e, n, r) {
+        const i = n.prototype.locale;
+        n.prototype.locale = function(e) {
+          var n;
+          return (
+            'string' == typeof e && (e = t[(n = e)] || n.split('_')[0]),
+            i.call(this, e)
+          );
+        };
+      };
     },
-    function(e, t, n) {
-      var r = n(2),
-        o = n(8);
-      'string' == typeof (o = o.__esModule ? o.default : o) && (o = [[e.i, o, '']]);
-      var i = { insert: 'head', singleton: !1 };
-      r(o, i);
-      e.exports = o.locals || {};
+    function(e, n, t) {
+      var r = t(2),
+        i = t(21);
+      'string' == typeof (i = i.__esModule ? i.default : i) &&
+        (i = [[e.i, i, '']]);
+      var o = { insert: 'head', singleton: !1 };
+      r(i, o);
+      e.exports = i.locals || {};
     },
-    function(e, t, n) {
+    function(e, n, t) {
       'use strict';
-      n.r(t);
-      var r = n(0),
-        o = n.n(r)()(!1);
-      o.push([e.i, '._3VS0ivCd6lBTB6vRAQv1jn {\n  font-size: 14px;\n}\n', '']),
-        (o.locals = { icon: '_3VS0ivCd6lBTB6vRAQv1jn' }),
-        (t.default = o);
+      t.r(n);
+      var r = t(0),
+        i = t.n(r),
+        o = t(4),
+        a = i()(!1);
+      a.i(o.a), a.push([e.i, '\n', '']), (n.default = a);
+    },
+    function(e, n, t) {
+      var r = t(2),
+        i = t(23);
+      'string' == typeof (i = i.__esModule ? i.default : i) &&
+        (i = [[e.i, i, '']]);
+      var o = { insert: 'head', singleton: !1 };
+      r(i, o);
+      e.exports = i.locals || {};
     },
-    function(e, t, n) {
+    function(e, n, t) {
       'use strict';
-      n.r(t),
-        n.d(t, 'BiciEmpty', function() {
+      t.r(n);
+      var r = t(0),
+        i = t.n(r)()(!1);
+      i.push([e.i, '._3VS0ivCd6lBTB6vRAQv1jn {\n  font-size: 14px;\n}\n', '']),
+        (i.locals = { icon: '_3VS0ivCd6lBTB6vRAQv1jn' }),
+        (n.default = i);
+    },
+    function(e, n) {
+      e.exports = y;
+    },
+    function(e, n) {
+      e.exports = v;
+    },
+    function(e, n, t) {
+      'use strict';
+      t.r(n),
+        t.d(n, 'BiciEmpty', function() {
           return a;
+        }),
+        t.d(n, 'BiciTable', function() {
+          return s;
+        }),
+        t.d(n, 'BiciWebSocket', function() {
+          return c;
+        }),
+        t.d(n, 'biciNotification', function() {
+          return d;
         });
-      n(4);
-      var r = n(1),
-        o = n.n(r);
-      n(6), n(7);
-      function i(e) {
-        return o.a.createElement(o.a.Fragment, null);
+      t(20);
+      var r = t(1),
+        i = t.n(r);
+      t(3), t(22);
+      function o(e) {
+        return i.a.createElement(i.a.Fragment, null);
       }
-      (i.defaultProps = {}), (i.propTypes = {});
-      var a = i;
+      (o.defaultProps = {}), (o.propTypes = {});
+      var a = o;
+      function u(e) {}
+      (u.defaultProps = {}), (u.propTypes = {});
+      var s = u;
+      t(24);
+      var c = class {
+          constructor(e) {
+            this.options = e;
+          }
+        },
+        l = (t(25), t(5)),
+        d = t.n(l).a;
     },
   ]);
 });
diff --git a/docs/components/index.md b/docs/components/index.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/index.md b/docs/index.md
index 7972cdc..e69de29 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1 +0,0 @@
-## Hello bici-design!
diff --git a/jsonconfig.json b/jsonconfig.json
new file mode 100644
index 0000000..abe04df
--- /dev/null
+++ b/jsonconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/package.json b/package.json
index 5debe7c..5c3f675 100644
--- a/package.json
+++ b/package.json
@@ -30,20 +30,28 @@
       "prettier --parser=typescript --write"
     ]
   },
-  "dependencies": {},
+  "dependencies": {
+    "antd": "^4.6.2",
+    "antd-dayjs-webpack-plugin": "^1.0.1",
+    "babel-plugin-import": "^1.13.0",
+    "dayjs": "^1.8.34",
+    "lodash": "^4.17.20",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.11.5",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.0.5",
     "babel-loader": "^8.1.0",
     "css-loader": "^4.2.2",
-    "dayjs": "^1.8.34",
     "dumi": "^1.0.8",
     "father-build": "^1.17.2",
     "gh-pages": "^3.0.0",
     "lint-staged": "^10.0.7",
-    "lodash": "^4.17.20",
     "prettier": "^1.19.1",
     "style-loader": "^1.2.1",
     "webpack": "^4.44.1",
diff --git a/src/components/BiciTable/BiciTable.module.css b/src/components/BiciTable/BiciTable.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/BiciTable/index.js b/src/components/BiciTable/index.js
new file mode 100644
index 0000000..ffe1d16
--- /dev/null
+++ b/src/components/BiciTable/index.js
@@ -0,0 +1,14 @@
+/**
+ * @File: ComplexTable based on Antd Table,
+ * support custom filters, column options, presets, etc.
+ */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+function BiciTable(props) {}
+
+BiciTable.defaultProps = {};
+
+BiciTable.propTypes = {};
+
+export default BiciTable;
diff --git a/src/components/BiciWebSocket/index.js b/src/components/BiciWebSocket/index.js
index 8e02594..4892ec1 100644
--- a/src/components/BiciWebSocket/index.js
+++ b/src/components/BiciWebSocket/index.js
@@ -1,3 +1,13 @@
 /**
- * @File: BiciWebSocket
+ * @File: based on HTML5 WebSocket encapsulation,
+ * support params serialization, heatbeat, reconnect.
  */
+import _ from 'lodash';
+
+class BiciWebSocket {
+  constructor(options) {
+    this.options = options;
+  }
+}
+
+export default BiciWebSocket;
diff --git a/src/components/BiciWrapper/index.js b/src/components/BiciWrapper/index.js
new file mode 100644
index 0000000..21d4f1d
--- /dev/null
+++ b/src/components/BiciWrapper/index.js
@@ -0,0 +1,13 @@
+/**
+ * @File: design standards for a page wrapper
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function BiciWrapper(props) {}
+
+BiciWrapper.defaultProps = {};
+
+BiciWrapper.propTypes = {};
+
+export default BiciWrapper;
diff --git a/src/components/biciNotification/index.js b/src/components/biciNotification/index.js
new file mode 100644
index 0000000..041ed41
--- /dev/null
+++ b/src/components/biciNotification/index.js
@@ -0,0 +1,6 @@
+/**
+ * @File: notification message based on Antd Notification, supports presets, design standards.
+ */
+import { notification } from 'antd';
+
+export default notification;
diff --git a/src/index.js b/src/index.js
index bd7925f..d760deb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,8 @@
 import '@/assets/css';
 
 import BiciEmpty from '@/components/BiciEmpty';
+import BiciTable from '@/components/BiciTable';
+import BiciWebSocket from '@/components/BiciWebSocket';
+import biciNotification from '@/components/biciNotification';
 
-export { BiciEmpty };
+export { BiciEmpty, BiciTable, BiciWebSocket, biciNotification };
diff --git a/src/utils/.gitkeep b/src/utils/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/webpack.config.js b/webpack.config.js
index 837b354..6a0d93b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,10 +1,11 @@
 /**
  * @Copyright: © 2014-2022 BICI All Rights Reserved,
- * webpack config for Bici FED web component library.
+ * webpack config for Bici FED web components library.
  */
 'use strict';
 
 const path = require('path');
+const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
 
 function resolve(pathname) {
   return path.resolve(__dirname, pathname);
@@ -29,16 +30,55 @@ module.exports = {
     rules: [
       {
         test: /\.css$/,
-        include: resolve('src/assets/css'),
+        exclude: resolve('src/components'),
         use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.css$/,
         include: resolve('src/components'),
-        use: ['style-loader', { loader: 'css-loader', options: { modules: true } }],
+        use: [
+          'style-loader',
+          { loader: 'css-loader', options: { modules: true } },
+        ],
+      },
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+          },
+        },
       },
-      { test: /\.js$/, exclude: resolve('node_modules'), loader: 'babel-loader' },
     ],
   },
-  externals: ['react', 'react-dom', 'prop-types', 'lodash', 'dayjs'],
+  plugins: [new AntdDayjsWebpackPlugin()],
+  optimization: {
+    minimize: true,
+    splitChunks: {
+      chunks: 'all',
+      minSize: 30000,
+      minChunks: 3,
+      automaticNameDelimiter: '.',
+      cacheGroups: {
+        vendor: {
+          name: 'vendors',
+          test({ resource }) {
+            return /[\\/]node_modules[\\/]/.test(resource);
+          },
+          priority: 10,
+        },
+      },
+    },
+  },
+  externals: [
+    'react',
+    'react-dom',
+    'prop-types',
+    'lodash',
+    'dayjs',
+    /^dayjs\/plugin\/.+$/,
+    /^antd\/es\/.+$/,
+  ],
 };