diff --git a/public/index.html b/public/index.html
index cab7f5f..c3cb80b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,6 +7,11 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
+    <style>
+      html,body {
+        scroll-behavior: smooth;
+      }
+    </style>
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
   <body>
     <noscript>
diff --git "a/public/\345\205\213\346\213\211\351\273\230\346\263\225\345\210\231.jpg" "b/public/\345\205\213\346\213\211\351\273\230\346\263\225\345\210\231.jpg"
new file mode 100644
index 0000000..d18e963
Binary files /dev/null and "b/public/\345\205\213\346\213\211\351\273\230\346\263\225\345\210\231.jpg" differ
diff --git a/src/components/neumorphic/avatar/avatar.vue b/src/components/neumorphic/avatar/avatar.vue
new file mode 100644
index 0000000..435ee51
--- /dev/null
+++ b/src/components/neumorphic/avatar/avatar.vue
@@ -0,0 +1,67 @@
+<template>
+  <span class="neumorphic-avatar" :style="neumorphicAvatarContentStyle">
+    <img 
+      :src="src" 
+      :style="neumorphicAvatarStyle" >
+  </span>
+</template>
+<script lang='ts'>
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import { ShadowType, AvatarFillType } from '../utils/config/neumorphic-type'
+@Component
+export default class Avatar extends Vue {
+
+  
+
+  @Prop({type: String})
+  src!: string;
+
+  @Prop({type: Boolean, default: false})
+  circle!: boolean;
+
+  @Prop({type: String, default: 'normal'})
+  shadow!: ShadowType;
+
+  @Prop({type: Number, default: 100})
+  size!: number;
+
+  @Prop({type: String, default: 'fill'})
+  fit!: AvatarFillType;
+
+  getShadow(type: ShadowType) {
+    const shadowMap = {
+      'normal': `0px 0px 2px #5f5f5f,
+                0px 0px 0px 5px #ecf0f3,
+                8px 8px 15px #a7aaaf,
+                -8px -8px 15px #ffffff`,
+      'light': `0.3rem 0.3rem 0.6rem hsla(215, 46%, calc(93% - 15%), 0.8), 
+                calc(-1 * 0.3rem) calc(-1 * 0.3rem) 0.6rem hsla(215, 46%, calc(93% + 15%), 0.8)`
+    }
+    return shadowMap[type];
+  }
+
+  neumorphicAvatarContentStyle: Record<string, string> = {
+    'width': `${this.size}px`,
+    'height': `${this.size}px`,
+    'border-radius': this.circle ? '50%' : '.5rem',
+    'box-shadow': this.getShadow(this.shadow)                                      
+  }
+
+  neumorphicAvatarStyle: Record<string, string> = {
+    'object-fit': this.fit
+  }
+}
+</script>
+<style scoped>
+.neumorphic-avatar {
+  box-shadow: var(--avatar-shadow);
+  background-color: var(--primary-bgcolor);
+  display: inline-block;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+}
+.neumorphic-avatar > img {
+  height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/neumorphic/back-to-head/back-to-head.vue b/src/components/neumorphic/back-to-head/back-to-head.vue
new file mode 100644
index 0000000..4ac1ef9
--- /dev/null
+++ b/src/components/neumorphic/back-to-head/back-to-head.vue
@@ -0,0 +1,73 @@
+<template>
+  <span 
+    ref="neumorphicBackToHead" 
+    class="neumorphic-back-to-head-wrapper"
+    :style="neumorphicBackToHeadStyle">
+    <neumorphic-button
+      class="neumorphic-back-to-head"
+      @click="backToHead">
+      <slot></slot>
+    </neumorphic-button>
+  </span>
+</template>
+<script lang='ts'>
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import neumorphicButton from '../button/button.vue';
+@Component({
+  components: {
+    'neumorphic-button': neumorphicButton
+  }
+})
+export default class BackToHead extends Vue {
+
+   @Prop({type: Number, default: 50})
+   right!: number;
+
+   @Prop({type: Number, default: 50})
+   bottom!: number;
+
+   @Prop({type: Number, default: 200})
+   height!: Number;
+
+  neumorphicBackToHeadStyle: Record<string, string> = {
+    'right': `${this.right}px`,
+    'bottom': `${this.bottom}px`
+  }
+
+  backToHead() {
+    document.body.scrollIntoView();
+  }
+
+  mounted(){
+    let lastScrollPosition = window.pageYOffset;
+    let button = this.$refs.neumorphicBackToHead as any;
+    window.addEventListener("scroll",() => {
+      const watchButtonPos = () => {
+        let currentScrollPosition = window.pageYOffset;
+        if (currentScrollPosition < this.height){
+          button.style.opacity = '0';
+          button.style.transform = 'translateY(100px)';
+        } else {
+          button.style.opacity = '1';
+          button.style.transform = 'translateY(0)';
+        }
+        lastScrollPosition = currentScrollPosition;
+      }
+      setTimeout(() => {
+        watchButtonPos()
+      }, 200);
+    });
+  }
+  
+}
+</script>
+<style scoped>
+.neumorphic-back-to-head-wrapper {
+  position: fixed;
+  transform: translateY(100px);
+  transition: opacity .3s, transform .3s ;
+}
+.neumorphic-back-to-head {
+  padding: 15px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/neumorphic/button/button.vue b/src/components/neumorphic/button/button.vue
index 311863a..d6cdb95 100644
--- a/src/components/neumorphic/button/button.vue
+++ b/src/components/neumorphic/button/button.vue
@@ -12,6 +12,7 @@ import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
 @Component
 export default class NeumorphicBtn extends Vue {
   @Prop({ type: Boolean, default: false }) private circle!: boolean;
+
   neumorphicButtonClass: Record<string, boolean> = {
     'neumorphic-btn': true,
     'neumorphic-btn-circle': this.circle
diff --git a/src/components/neumorphic/messageBox/messageBox.ts b/src/components/neumorphic/messageBox/messageBox.ts
new file mode 100644
index 0000000..b70dece
--- /dev/null
+++ b/src/components/neumorphic/messageBox/messageBox.ts
@@ -0,0 +1,38 @@
+import { MessageBoxConfig } from './messageBoxConfig';
+
+export class MessageBox {
+  public topList: number[] = [0];
+  public setMsg(config: MessageBoxConfig): void {
+    // topList 用于储存每个 messageBox 的 top 属性，为局部的"全局变量"，必须
+    this.generateMessageBox(config);
+  }
+  private generateMessageBox(config: MessageBoxConfig): void {
+    const messageBox = this.generateElement('div', 'neumorphic-messagebox');
+    const top = this.topList[this.topList.length - 1] + 55;
+    this.topList.push(top);
+    messageBox.style.top = `${top}px`;
+    const message = this.generateElement('p', 'neumorphic-messagebox-text');
+    message.appendChild(document.createTextNode(config.message));
+    messageBox.appendChild(message);
+    const body = document.body;
+    body.appendChild(messageBox);
+    setTimeout(() => {
+      messageBox.style.transform = 'translate(-50%, 0)';
+    }, 100);
+    setTimeout(() => {
+      messageBox.style.transform = 'translate(-50%, -100px)';
+    }, config.styleTimeout);
+    setTimeout(() => {
+      body.removeChild(messageBox);
+      this.topList.pop();
+    }, config.removeTimeout);
+  }
+
+  private generateElement(element: string, className: string): HTMLElement {
+    const ele =  document.createElement(element);
+    ele.className = className;
+    return ele;
+  }
+
+}
+export default new MessageBox();
diff --git a/src/components/neumorphic/messageBox/messageBox.vue b/src/components/neumorphic/messageBox/messageBox.vue
new file mode 100644
index 0000000..62882d7
--- /dev/null
+++ b/src/components/neumorphic/messageBox/messageBox.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="neumorphic-messagebox">
+    <p class="neumorphic-messagebox-text">
+      <slot></slot>
+    </p>
+  </div>
+</template>
+<script lang='ts'>
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { MessageBox } from './messageBox';
+// @Component
+export default class NeuMessageBox extends MessageBox {
+
+  
+
+
+}
+</script>
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/neumorphic/messageBox/messageBoxConfig.ts b/src/components/neumorphic/messageBox/messageBoxConfig.ts
new file mode 100644
index 0000000..ed0d533
--- /dev/null
+++ b/src/components/neumorphic/messageBox/messageBoxConfig.ts
@@ -0,0 +1,6 @@
+export interface MessageBoxConfig {
+  message: string;
+  styleTimeout: number;
+  removeTimeout: number;
+}
+
diff --git a/src/components/neumorphic/tag/tag.vue b/src/components/neumorphic/tag/tag.vue
new file mode 100644
index 0000000..fc200d7
--- /dev/null
+++ b/src/components/neumorphic/tag/tag.vue
@@ -0,0 +1,77 @@
+<template>
+  <span class="neumorphic-tag">
+    <span v-if="prefixIcon" class="neumorphic-tag-icon neumorphic-tag-prefix-icon">
+      <i :class="prefixIcon"></i>
+    </span>
+    <p class="neumorphic-tag-text" ref="neumorphicTagText">
+      <slot></slot>
+    </p>
+    <span 
+      class="neumorphic-tag-icon neumorphic-tag-close" 
+      v-if="closable"
+      @click="handleClose">
+      ✖
+    </span>
+  </span>
+</template>
+<script lang='ts'>
+import { Component, Vue, Prop } from 'vue-property-decorator'
+
+@Component
+export default class Tag extends Vue {
+
+  @Prop({default: ''})
+  prefixIcon?: string;
+
+  @Prop({default: false})
+  closable?: boolean;
+
+  handleClose() {
+    // 点击关闭按钮触发的事件 
+    const tagText = (this.$refs.neumorphicTagText as HTMLParagraphElement).innerHTML
+    this.$emit('close', tagText);
+  }
+}
+</script>
+<style scoped>
+.neumorphic-tag {
+  min-width: 5rem;
+  min-height: 2rem;
+  border-radius: var(--small-radius);
+  box-shadow: var(--shadow);
+  display: inline-flex;
+  justify-content: unset;
+  align-items: center;
+  position: relative;
+  margin-right: 10px;
+}
+.neumorphic-tag-icon {
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--primary-radius);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--primary-font-size);
+  color: var(--second-color);
+  margin: 0 0 0 .2rem;
+}
+.neumorphic-tag-prefix-icon {
+  left: 0;
+}
+.neumorphic-tag-close {
+  cursor: pointer;
+  right: .5rem;
+  color: var(--primary-color);
+  transition: color .3s;
+  position: absolute;
+}
+.neumorphic-tag-close:hover {
+  color: var(--second-color);
+}
+.neumorphic-tag-text {
+  font-size: var(--primary-font-size);
+  color: var(--primary-color);
+  margin: 0 2rem 0 .5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/neumorphic/utils/config/neumorphic-type.ts b/src/components/neumorphic/utils/config/neumorphic-type.ts
new file mode 100644
index 0000000..578afe9
--- /dev/null
+++ b/src/components/neumorphic/utils/config/neumorphic-type.ts
@@ -0,0 +1,7 @@
+
+
+export type ShadowType =  'normal' | 'light';
+
+export type AvatarFillType = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+
+
diff --git a/src/components/neumorphic/utils/css/global.css b/src/components/neumorphic/utils/css/global.css
index f768858..93fdace 100644
--- a/src/components/neumorphic/utils/css/global.css
+++ b/src/components/neumorphic/utils/css/global.css
@@ -61,6 +61,12 @@
   /* 文字阴影 */
   --text-shadow: 1px 1px 0 #FFF;
 
+  /* 特殊处理：头像阴影 */
+  --avatar-shadow: 0px 0px 2px #5f5f5f,
+                   0px 0px 0px 5px #ecf0f3,
+                   8px 8px 15px #a7aaaf,
+                   -8px -8px 15px #ffffff;
+
   /* 主要文字大小 */
   --primary-font-size: .9rem;
   --bigger-font-size: 1.1rem;
@@ -73,4 +79,25 @@
 
   /* 特殊处理：分割线弧度 */
   --divider-radius: .5rem;
+}
+
+
+.neumorphic-messagebox {
+  width: 20rem;
+  height: 3rem;
+  border-radius: var(--small-radius);
+  box-shadow: var(--shadow);
+  display: flex;
+  justify-content: unset;
+  align-items: center;
+  position: fixed;
+  left: 50%;
+  top: 10px;
+  transform: translate(-50%, -100px);
+  transition: all .5s;
+}
+.neumorphic-messagebox-text {
+  font-size: var(--primary-font-size);
+  color: var(--primary-color);
+  margin-left: 2rem;
 }
\ No newline at end of file
diff --git a/src/single_test.vue b/src/single_test.vue
index 033ec29..d547469 100644
--- a/src/single_test.vue
+++ b/src/single_test.vue
@@ -1,23 +1,24 @@
 <template>
   <div>
-    <neu>
-      <neuItem 
-        v-for="collapseItem in collapse" 
-        :key="collapseItem.title" 
-        :title="collapseItem.title">
-        {{ collapseItem.details }}
-      </neuItem>
-    </neu>
+    
+
+    <neumorphicBtn @click="generateMessage">
+      Generate a message tip
+    </neumorphicBtn>
+
   </div>
 </template>
 <script lang='ts'>
 import { Component, Vue } from 'vue-property-decorator'
-import neu from './components/neumorphic/collapse/collapse.vue'
-import neuItem from './components/neumorphic/collapse/collapse-item.vue'
+// import neu from './components/neumorphic/messageBox/messageBox.vue'
+import { MessageBox } from './components/neumorphic/messageBox/messageBox';
+import { MessageBoxConfig } from './components/neumorphic/messageBox/messageBoxConfig';
+import neumorphicBtn from './components/neumorphic/button/button.vue';
+
 @Component({
   components: {
-    neu,
-    neuItem
+    
+    neumorphicBtn
   }
 })
 export default class Single_test extends Vue {
@@ -35,8 +36,24 @@ export default class Single_test extends Vue {
       details: 'xxxxxx'
     }
   ]
-  getFile(event: any) {
-    console.log(event)
+
+  // 需要为全局变量
+  messageBox = new MessageBox();
+
+  fits: Array<string> =  ['fill', 'contain', 'cover', 'none', 'scale-down'];
+
+  generateMessage() {
+    const config: MessageBoxConfig = {
+      message: 'Generate a message tip',
+      styleTimeout: 2000,
+      removeTimeout: 2500
+    }
+    
+    this.messageBox.setMsg(config);
+  }
+
+  closeTag(tag: any) {
+    console.log(tag);
   }
 }
 </script>
