add 2.0 alpha notification

examples/app.vue

@@ -119,117 +119,6 @@
     margin: 20px 0;
   }
   
-  .carbon-teaser {
-    border-radius: 0;
-    overflow: hidden;
-
-    .el-dialog__header {
-      display: none;
-    }
-
-    .el-dialog__body {
-      padding: 0;
-      display: flex;
-      justify-content: center;
-      position: relative;
-      background: #000;
-    }
-
-    .carbon-teaser__main {
-      height: 100vh;
-      min-height: 600px;
-    }
-
-    .carbon-teaser__close {
-      position: absolute;
-      width: 40px;
-      height: 40px;
-      top: 25px;
-      right: 45px;
-      text-align: center;
-      cursor: pointer;
-      opacity: .8;
-      transition: .2s ease-out;
-
-      &::after,
-      &::before {
-         position: absolute;
-         content: '';
-         display: inline-block;
-         width: 4px;
-         border-radius: 1px;
-         height: 40px;
-         background: #ff3737;
-         box-shadow: 1px 0 1px 0 rgba(255, 255, 255, .3) inset, -2px 0 1px 0 rgba(0, 0, 0, .1) inset;
-         transition: .2s ease-out;
-      }
-
-      &::after {
-        transform: rotate(45deg);
-      }
-
-      &::before {
-        transform: rotate(-45deg);
-      }
-
-      &:hover {
-         opacity: 1;
-
-         &::after,
-         &::before {
-            box-shadow: 2px 0 1px 0 rgba(255, 255, 255, .4) inset, -2px 0 1px 0 rgba(0, 0, 0, .1) inset, 0 0 10px 3px #ff1616;
-         }
-      }
-
-    }
-
-    .carbon-teaser__button {
-      position: absolute;
-      bottom: 12%;
-      display: block;
-      width: 400px;
-      height: 19.11%;
-
-      [class*=carbon-teaser__more] {
-        position: absolute;
-        top: 0;
-        display: block;
-        width: 100%;
-        height: 100%;
-        cursor: pointer;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: auto 80%;
-        transition: .2s ease-in;
-      }
-
-      [class*=dark] {
-        background-image: url(~examples/assets/images/button-d-cn.png);
-        &.is-en {
-          background-image: url(~examples/assets/images/button-d-en.png);
-        }
-      }
-
-      [class*=light] {
-        opacity: 0;
-        background-image: url(~examples/assets/images/button-l-cn.png);
-        &.is-en {
-          background-image: url(~examples/assets/images/button-l-en.png);
-        }
-      }
-
-      &:hover {
-        [class*=light] {
-          opacity: 1;
-        }
-
-        [class*=dark] {
-          opacity: 0;
-        }
-      }
-    }
-  }
-  
   @media (max-width: 1140px) {
     .container,
     .page-container {
@@ -252,23 +141,6 @@
       <router-view></router-view>
     </div>
     <main-footer v-if="lang !== 'play'"></main-footer>
-    <el-dialog
-      :visible.sync="dialogVisible"
-      size="full"
-      custom-class="carbon-teaser"
-      @close="handleDialogClose"
-      :close-on-press-escape="false"
-      :close-on-click-modal="false">
-      <img
-        src="https://i.loli.net/2017/09/27/59cb11edaa26d.jpg"
-        class="carbon-teaser__main">
-      <a :href="hrefOfCarbonLearnMore" target="_blank" class="carbon-teaser__button">
-        <span class="carbon-teaser__more-dark" :class="lang !== 'zh-CN' && 'is-en'"></span>
-        <span class="carbon-teaser__more-light" :class="lang !== 'zh-CN' && 'is-en'"></span>
-      </a>
-
-      <div class="carbon-teaser__close" @click="dialogVisible = false"></div>
-    </el-dialog>
   </div>
 </template>
 
@@ -281,19 +153,9 @@
   export default {
     name: 'app',
 
-    data() {
-      return {
-        dialogVisible: false
-      };
-    },
-
     computed: {
       lang() {
         return this.$route.path.split('/')[1] || 'zh-CN';
-      },
-
-      hrefOfCarbonLearnMore() {
-        return this.lang === 'zh-CN' ? 'https://github.com/ElemeFE/element/issues/7236' : 'https://github.com/ElemeFE/element/issues/7237';
       }
     },
 
@@ -330,10 +192,6 @@
             document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop + 120;
           }, 50);
         }
-      },
-
-      handleDialogClose() {
-        localStorage.setItem('CARBON_TEASER_V2', 1);
       }
     },
 
@@ -341,15 +199,35 @@
       this.localize();
       this.renderAnchorHref();
       this.goAnchor();
-
-      const intrigued = localStorage.getItem('CARBON_TEASER_V2');
-      if (!intrigued) {
-        const img = new Image();
-        img.onload = () => {
-          this.dialogVisible = true;
-        };
-        img.src = 'https://i.loli.net/2017/09/27/59cb11edaa26d.jpg';
+      setTimeout(() => {
+        const notified = localStorage.getItem('ALPHA_NOTIFIED');
+        if (!notified) {
+          const h = this.$createElement;
+          const title = this.lang === 'zh-CN'
+            ? '2.0.0-alpha.1 发布'
+            : '2.0.0-alpha.1 released';
+          const messages = this.lang === 'zh-CN'
+            ? ['点击', '这里', '查看详情']
+            : ['Click ', 'here', ' to learn more'];
+          this.$notify.success({
+            title,
+            duration: 0,
+            message: h('span', [
+              messages[0],
+              h('a', {
+                attrs: {
+                  target: '_blank',
+                  href: `https://github.com/ElemeFE/element/issues/${ this.lang === 'zh-CN' ? '7304' : '7305' }`
+                }
+              }, messages[1]),
+              messages[2]
+            ]),
+            onClose() {
+              localStorage.setItem('ALPHA_NOTIFIED', 1);
+            }
+          });
         }
+      }, 3500);
     },
 
     created() {