diff --git a/src/assets/css/page/note-page.less b/src/assets/css/page/note-page.less
index 95ab2062..061429d6 100644
--- a/src/assets/css/page/note-page.less
+++ b/src/assets/css/page/note-page.less
@@ -118,7 +118,7 @@
   text-align: center;
   position: relative;
 
-  .lumen-icon-sousuo {
+  i {
     position: absolute;
     left: 16px;
     top: 19px;
@@ -126,14 +126,6 @@
     color: #505050;
   }
 
-  .lumen-icon-clear {
-    position: absolute;
-    right: 1px;
-    top: 17px;
-    font-size: 24px;
-    color: #505050;
-  }
-
   input {
     height: 30px;
     width: 80%;
@@ -151,7 +143,7 @@
   }
 }
 
-.el-aside-two .count-header {
+.el-aside-two .title-header {
   height: 40px;
   line-height: 40px;
   position: relative;
@@ -393,195 +385,6 @@
   }
 }
 
-/* 文件管理弹出层 */
-.note-files-manager {
-  width: 300px;
-  min-height: 50px;
-  max-height: 675px;
-  background-color: white;
-  overflow-y: auto;
-
-  .file-box {
-    min-height: 30px;
-    border-bottom: 1px solid rgb(239, 233, 233);
-    margin-bottom: 8px;
-    padding: 5px 0;
-
-    .no-file {
-      color: #969292;
-      font-size: 12px;
-      margin-top: 10px;
-    }
-
-    .file-item {
-      height: 50px;
-      margin-bottom: 5px;
-      margin-top: 10px;
-
-      .file-type {
-        width: 50px;
-        height: 100%;
-        background-color: #ffcc80;
-        border-radius: 3px;
-        float: left;
-        line-height: 50px;
-        text-align: center;
-        color: white;
-      }
-
-      .file-detail {
-        float: left;
-        width: 247px;
-        height: 100%;
-
-        .filename {
-          padding-left: 5px;
-          color: #172b4d;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 1.6;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .filetool {
-          color: #505f79;
-          font-size: 12px;
-          font-weight: 400;
-          line-height: 1.6;
-          padding-left: 5px;
-          margin-top: 9px;
-          position: relative;
-
-          span {
-            margin: 0 3px;
-          }
-        }
-
-        .filetool-help {
-          position: absolute;
-          top: -5px;
-          right: 5px;
-          width: 55px;
-          height: 24px;
-          text-align: right;
-          line-height: 28px;
-
-          i {
-            font-size: 16px;
-            cursor: pointer;
-            margin-right: 5px;
-          }
-
-          .el-icon-download {
-            color: #66b1ff;
-          }
-
-          .el-icon-delete {
-            color: red;
-          }
-        }
-      }
-    }
-  }
-
-  input {
-    display: none;
-  }
-
-  .files-manager-footer {
-    .upload-tips {
-      font-size: 12px;
-      color: #ccc;
-      text-align: left;
-      float: left;
-      padding-top: 10px;
-    }
-
-    button {
-      float: right;
-    }
-  }
-}
-
-/* 标签管理弹出层 */
-.tag-manager {
-  .tag-manager-title {
-    height: 20px;
-    line-height: 20px;
-    font-size: 13px;
-    color: #ccc;
-    border-bottom: 1px solid #f0e9e9;
-    padding-bottom: 5px;
-    position: relative;
-  }
-
-  .tag-manager-box {
-    padding: 8px 8px 8px 0;
-    cursor: pointer;
-
-    .el-icon-plus {
-      margin-left: 0 !important;
-    }
-
-    .tag-item {
-      background-color: rgba(64, 158, 255, 0.1);
-      display: inline-block;
-      padding: 0 10px;
-      height: 25px;
-      line-height: 25px;
-      font-size: 12px;
-      color: #409eff;
-      box-sizing: border-box;
-      white-space: nowrap;
-      margin-bottom: 5px;
-      margin-right: 3px;
-
-      i {
-        cursor: pointer;
-        margin-left: 5px;
-
-        &:hover {
-          color: red;
-        }
-      }
-
-      &.tag-item-active {
-        color: #9a9191;
-      }
-    }
-  }
-
-  .inster-tag {
-    height: 33px;
-    width: 100%;
-    margin-top: 20px;
-    line-height: 9px;
-    border-radius: 3px;
-  }
-
-  .tag-manager-input {
-    margin-top: 20px;
-    min-height: 30px;
-    display: flex;
-    align-items: center;
-
-    input {
-      width: 200px;
-      height: 30px;
-      border: 1px solid #66b1ff;
-      padding: 0 5px;
-      border-radius: 3px;
-      margin-right: 5px;
-
-      &::-webkit-input-placeholder {
-        font-size: 13px;
-        color: #ccc;
-      }
-    }
-  }
-}
 
 /* 笔记详细模块 */
 #note-header {
@@ -613,28 +416,6 @@
   background: #fff;
   height: 100%;
 
-  .subfield {
-    min-height: 60px;
-    background: #f7f7fc;
-    margin: 10px;
-    border-radius: 3px;
-    font-size: 13px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 5px 20px;
-
-    p > span {
-      margin-right: 10px;
-    }
-
-    .larkc-tag {
-      background: #ffffff;
-      color: #2d2d2d;
-      font-size: 14px;
-    }
-  }
-
   .markdown-body {
     padding: 20px;
     font-size: 16px;
diff --git a/src/components/layout/WelcomeModule.vue b/src/components/layout/WelcomeModule.vue
new file mode 100644
index 00000000..dfebc057
--- /dev/null
+++ b/src/components/layout/WelcomeModule.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="welcome-box">
+    <div class="famous-box">
+      <img src="~@/assets/image/chat.png" width="300" />
+      <p>
+        不是井里没有水，而是你挖的不够深<br />
+        不是成功来得慢，而是你努力的不够多<br />
+        加油吧！ ......
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {}
+  },
+  created() {},
+  methods: {},
+}
+</script>
+<style lang="less" scoped>
+.welcome-box {
+  height: 100%;
+  width: 100%;
+
+  .famous-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    font-size: 24px;
+    user-select: none;
+
+    p {
+      width: 100%;
+      font-weight: 300;
+      text-align: center;
+      font-size: 15px;
+      color: #b9b4b4;
+      margin-top: -30px;
+    }
+  }
+}
+</style>
diff --git a/src/components/note/NoteAnnexBox.vue b/src/components/note/NoteAnnexBox.vue
new file mode 100644
index 00000000..3150eca3
--- /dev/null
+++ b/src/components/note/NoteAnnexBox.vue
@@ -0,0 +1,241 @@
+<template>
+  <div>
+    <p>笔记附件列表({{ files.length }})</p>
+    <div class="annex-box lum-scrollbar">
+      <input ref="uploads" type="file" @change="uploadAnnex" />
+      <div class="annex-main">
+        <p v-show="files.length == 0" class="empty-text">
+          暂无附件
+        </p>
+
+        <div v-for="(file, i) in files" :key="file.id" class="file-item">
+          <div class="suffix">{{ file.file_suffix }}</div>
+          <div class="content">
+            <div class="filename">{{ file.original_name }}</div>
+            <div class="filetool">
+              <span>{{ formateTime(file.created_at) }}</span>
+              <span class="size">
+                {{ formateSize(file.file_size) }}
+              </span>
+              <div class="tools">
+                <i class="el-icon-download" @click="downloadAnnex(file.id)" />
+                <i class="el-icon-delete" @click="deleteAnnex(file.id, i)" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="annex-footer">
+        <p class="notice-text">最多可支持上传{{ maxNum }}个附件</p>
+        <el-button
+          type="primary"
+          size="small"
+          icon="el-icon-upload"
+          :disabled="files.length >= maxNum"
+          :loading="loadStatus"
+          @click="$refs.uploads.click()"
+          >{{ loadStatus ? '上传中...' : '上传附件' }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ServeDeleteArticleAnnex,
+  ServeDownloadAnnex as downloadAnnex,
+  ServeUploadArticleAnnex,
+} from '@/api/article'
+import { formateSize, formateTime, parseTime } from '@/utils/functions'
+
+export default {
+  props: {
+    id: Number,
+    fileList: Array,
+  },
+  data() {
+    return {
+      files: [],
+      loadStatus: false,
+      disabled: false,
+      maxNum: 10,
+    }
+  },
+  created() {
+    this.files = this.fileList
+  },
+  methods: {
+    // 格式化文件大小
+    formateSize,
+
+    // 格式化时间显示格式
+    formateTime,
+
+    // 下载笔记附件
+    downloadAnnex,
+
+    // 删除笔记附件
+    deleteAnnex(annex_id, index) {
+      ServeDeleteArticleAnnex({
+        annex_id,
+      }).then(({ code }) => {
+        if (code == 200) {
+          this.$delete(this.files, index)
+        }
+      })
+    },
+
+    // 上传笔记附件文件
+    uploadAnnex(e) {
+      if (e.target.files.length == 0) {
+        return false
+      }
+
+      let file = e.target.files[0]
+      if (file.size / (1024 * 1024) > 5) {
+        this.$message('笔记附件不能大于5M!')
+        return false
+      }
+
+      let fileData = new FormData()
+      fileData.append('annex', file)
+      fileData.append('article_id', this.id)
+
+      this.loadStatus = true
+      ServeUploadArticleAnnex(fileData)
+        .then(({ code, data }) => {
+          if (code == 200) {
+            this.files.push({
+              id: data.id,
+              original_name: data.original_name,
+              created_at: parseTime(new Date()),
+              file_size: data.file_size,
+              file_suffix: data.file_suffix,
+            })
+          }
+        })
+        .finally(() => {
+          this.loadStatus = false
+        })
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+/* 文件管理弹出层 */
+.annex-box {
+  width: 300px;
+  min-height: 50px;
+  max-height: 675px;
+  background-color: white;
+  overflow-y: auto;
+
+  .annex-main {
+    min-height: 30px;
+    border-bottom: 1px solid rgb(239, 233, 233);
+    margin-bottom: 8px;
+    padding: 5px 0;
+
+    .empty-text {
+      color: #969292;
+      font-size: 12px;
+      margin-top: 10px;
+    }
+
+    .file-item {
+      height: 50px;
+      margin-bottom: 5px;
+      margin-top: 10px;
+
+      .suffix {
+        width: 50px;
+        height: 100%;
+        background-color: #ffcc80;
+        border-radius: 3px;
+        float: left;
+        line-height: 50px;
+        text-align: center;
+        color: white;
+      }
+
+      .content {
+        float: left;
+        width: 247px;
+        height: 100%;
+
+        .filename {
+          padding-left: 5px;
+          color: #172b4d;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 1.6;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .filetool {
+          color: #505f79;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 1.6;
+          padding-left: 5px;
+          margin-top: 9px;
+          position: relative;
+
+          span {
+            margin: 0 3px;
+            &.size {
+              color: #3a8ee6;
+            }
+          }
+        }
+
+        .tools {
+          position: absolute;
+          top: -5px;
+          right: 5px;
+          width: 55px;
+          height: 24px;
+          text-align: right;
+          line-height: 28px;
+
+          i {
+            font-size: 16px;
+            cursor: pointer;
+            margin-right: 5px;
+          }
+
+          .el-icon-download {
+            color: #66b1ff;
+          }
+
+          .el-icon-delete {
+            color: red;
+          }
+        }
+      }
+    }
+  }
+
+  input {
+    display: none;
+  }
+
+  .annex-footer {
+    .notice-text {
+      font-size: 12px;
+      color: #ccc;
+      text-align: left;
+      float: left;
+      padding-top: 10px;
+    }
+
+    button {
+      float: right;
+    }
+  }
+}
+</style>
diff --git a/src/components/note/NoteTagBox.vue b/src/components/note/NoteTagBox.vue
new file mode 100644
index 00000000..4e65ceab
--- /dev/null
+++ b/src/components/note/NoteTagBox.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="tag-manage">
+    <div class="title">
+      <span>已选择</span>
+    </div>
+
+    <div class="tag-groups">
+      <p
+        v-for="(tag, i) in tags"
+        v-show="tag.isSelectd"
+        :key="i"
+        class="tag-item"
+      >
+        <span>{{ tag.name }}</span>
+        <i class="el-icon-close" @click="activeTag(i, 1)" />
+      </p>
+    </div>
+
+    <div class="title">
+      <span>标签栏</span>
+    </div>
+
+    <div class="tag-groups">
+      <p
+        v-for="(tag, i) in tags"
+        :key="i"
+        class="tag-item"
+        :class="{ active: tag.isSelectd }"
+        @click="activeTag(i, 2)"
+      >
+        <span>{{ tag.name }}</span>
+      </p>
+    </div>
+
+    <el-button
+      v-show="!isInput"
+      type="primary"
+      class="addbtn"
+      @click="isInput = !isInput"
+      >+ 添加标签
+    </el-button>
+
+    <div class="tag-input" v-show="isInput">
+      <input
+        ref="editTaginput"
+        type="text"
+        placeholder="回车保存..."
+        v-model.trim="tagText"
+        @keyup.enter="saveTag"
+      />
+
+      <el-button type="primary" size="small" @click="isInput = false"
+        >取消编辑
+      </el-button>
+    </div>
+  </div>
+</template>
+<script>
+import { ServeUpdateArticleTag, ServeEditArticleTag } from '@/api/article'
+export default {
+  props: {
+    id: Number,
+    tagsList: Array,
+  },
+  data() {
+    return {
+      tags: [],
+      isInput: false,
+      tagText: '',
+    }
+  },
+  methods: {
+    // 设置笔记标签事件
+    activeTag(i, type) {
+      ServeUpdateArticleTag({
+        article_id: this.id,
+        tags: this.getSelectTags(),
+      }).then(({ code }) => {
+        if (code == 200) {
+          this.tags[i].isSelectd = type == 1 ? false : !this.tags[i].isSelectd
+        }
+      })
+    },
+
+    // 获取选中的标签ids
+    getSelectTags() {
+      let ids = []
+      for (let item of this.tags) {
+        if (item.isSelectd) ids.push(item.id)
+      }
+
+      return ids
+    },
+
+    // 保存标签事件
+    saveTag() {
+      let tag_name = this.tagText
+
+      ServeEditArticleTag({
+        tag_id: 0,
+        tag_name,
+      }).then(({ code, data }) => {
+        if (code == 200) {
+          let tag = {
+            id: data.id,
+            name: tag_name,
+            icon: 'icon-dian',
+            count: 0,
+            isEdit: false,
+            isDefault: 0,
+            isActive: false,
+          }
+
+          this.tags.push({
+            id: tag.id,
+            name: tag.name,
+            isSelectd: false,
+          })
+
+          this.tagText = ''
+          this.isInput = false
+          this.$emit('create', tag)
+        }
+      })
+    },
+  },
+  created() {
+    this.tags = this.tagsList
+  },
+}
+</script>
+<style lang="less" scoped>
+.tag-manage {
+  .title {
+    height: 20px;
+    line-height: 20px;
+    font-size: 14px;
+    color: #ccc;
+    border-bottom: 1px solid #f0e9e9;
+    padding-bottom: 5px;
+    position: relative;
+  }
+
+  .tag-groups {
+    padding: 8px 8px 8px 0;
+    cursor: pointer;
+
+    .tag-item {
+      display: inline-block;
+      height: 25px;
+      line-height: 25px;
+      padding: 0 10px;
+      font-size: 12px;
+      box-sizing: border-box;
+      white-space: nowrap;
+      margin: 0 3px 5px 0;
+      color: #409eff;
+      background: rgba(64, 158, 255, 0.1);
+      border-radius: 1px;
+
+      i {
+        cursor: pointer;
+        margin-left: 5px;
+      }
+
+      &.active {
+        background: #70b5fb;
+        color: #ffffff;
+      }
+    }
+  }
+
+  .addbtn {
+    height: 33px;
+    width: 100%;
+    margin-top: 20px;
+    line-height: 9px;
+    border-radius: 3px;
+  }
+
+  .tag-input {
+    margin-top: 20px;
+    min-height: 30px;
+    display: flex;
+    align-items: center;
+
+    input {
+      width: 200px;
+      height: 30px;
+      border: 1px solid #66b1ff;
+      padding: 0 5px;
+      border-radius: 3px;
+      margin-right: 5px;
+
+      &::-webkit-input-placeholder {
+        font-size: 13px;
+        color: #ccc;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/main-mixin.js b/src/main-mixin.js
index 1463d23b..5733ced4 100644
--- a/src/main-mixin.js
+++ b/src/main-mixin.js
@@ -17,9 +17,9 @@ export default {
 
     // 加载用户相关设置信息，更新本地缓存
     loadUserSetting() {
-      ServeGetUserSetting().then(res => {
-        if (res.code == 200) {
-          const { user_info } = res.data
+      ServeGetUserSetting().then(({ code, data }) => {
+        if (code == 200) {
+          const { user_info } = data
 
           this.$store.commit('UPDATE_USER_INFO', {
             uid: user_info.uid,
diff --git a/src/views/MessagePage.vue b/src/views/MessagePage.vue
index 956ba567..677e948f 100644
--- a/src/views/MessagePage.vue
+++ b/src/views/MessagePage.vue
@@ -93,7 +93,7 @@
             >
               <el-main class="main">
                 <p v-show="loadStatus == 0" class="empty-data">
-                  <i class="el-icon-loading" /> 正在加载数据中...
+                  <i class="el-icon-loading" /> 数据加载中...
                 </p>
 
                 <p v-show="loadStatus == 1 && talkNum == 0" class="empty-data">
@@ -105,108 +105,104 @@
                 </p>
 
                 <!-- 对话列表 -->
-                <div
-                  v-show="loadStatus == 1"
-                  v-for="item in talkItems"
-                  :key="item.index_name"
-                  class="talk-item pointer"
-                  :class="{ active: index_name == item.index_name }"
-                  @click="clickTab(item.index_name)"
-                  @contextmenu.prevent="talkItemsMenu(item, $event)"
-                >
-                  <div class="avatar-box">
-                    <span v-show="!item.avatar">
-                      {{
-                        (item.remark_name
-                          ? item.remark_name
-                          : item.name
-                        ).substr(0, 1)
-                      }}
-                    </span>
-                    <img
-                      v-show="item.avatar"
-                      :src="item.avatar"
-                      :onerror="$store.state.detaultAvatar"
-                    />
-                    <div
-                      v-show="item.is_top == 0"
-                      class="top-mask"
-                      @click.stop="topChatItem(item)"
-                    >
-                      <i class="el-icon-top" />
+                <template v-if="loadStatus == 1">
+                  <div
+                    v-for="item in talkItems"
+                    :key="item.index_name"
+                    class="talk-item pointer"
+                    :class="{ active: index_name == item.index_name }"
+                    @click="clickTab(item.index_name)"
+                    @contextmenu.prevent="talkItemsMenu(item, $event)"
+                  >
+                    <div class="avatar-box">
+                      <span v-show="!item.avatar">
+                        {{
+                          (item.remark_name
+                            ? item.remark_name
+                            : item.name
+                          ).substr(0, 1)
+                        }}
+                      </span>
+                      <img
+                        v-show="item.avatar"
+                        :src="item.avatar"
+                        :onerror="$store.state.detaultAvatar"
+                      />
+                      <div
+                        v-show="item.is_top == 0"
+                        class="top-mask"
+                        @click.stop="topChatItem(item)"
+                      >
+                        <i class="el-icon-top" />
+                      </div>
                     </div>
-                  </div>
-                  <div class="card-box">
-                    <div class="title">
-                      <div class="card-name">
-                        <p class="nickname">
-                          {{ item.remark_name ? item.remark_name : item.name }}
-                        </p>
-                        <div v-show="item.unread_num" class="larkc-tag">
-                          {{ item.unread_num }}条未读
-                        </div>
-                        <div v-show="item.is_top" class="larkc-tag top">
-                          TOP
+                    <div class="card-box">
+                      <div class="title">
+                        <div class="card-name">
+                          <p class="nickname">
+                            {{
+                              item.remark_name ? item.remark_name : item.name
+                            }}
+                          </p>
+                          <div v-show="item.unread_num" class="larkc-tag">
+                            {{ item.unread_num }}条未读
+                          </div>
+                          <div v-show="item.is_top" class="larkc-tag top">
+                            TOP
+                          </div>
+                          <div v-show="item.group_id" class="larkc-tag group">
+                            群组
+                          </div>
+                          <div
+                            v-show="item.not_disturb"
+                            class="larkc-tag disturb"
+                          >
+                            <i class="iconfont icon-xiaoximiandarao" />
+                          </div>
                         </div>
-                        <div v-show="item.group_id" class="larkc-tag group">
-                          群组
-                        </div>
-                        <div
-                          v-show="item.not_disturb"
-                          class="larkc-tag disturb"
-                        >
-                          <i class="iconfont icon-xiaoximiandarao" />
+                        <div class="card-time">
+                          {{ beautifyTime(item.updated_at) }}
                         </div>
                       </div>
-                      <div class="card-time">
-                        {{ beautifyTime(item.updated_at) }}
-                      </div>
-                    </div>
-                    <div class="content">
-                      <template
-                        v-if="index_name != item.index_name && item.draft_text"
-                      >
-                        <span class="draft-color">[草稿]</span>
-                        <span>{{ item.draft_text }}</span>
-                      </template>
-                      <template v-else>
-                        <span
-                          v-if="item.type == 1"
-                          :class="{ 'online-color': item.online }"
-                          >[{{ item.online ? '在线' : '离线' }}]</span
+                      <div class="content">
+                        <template
+                          v-if="
+                            index_name != item.index_name && item.draft_text
+                          "
                         >
-                        <span v-else>[群消息]</span>
-                        <span>{{ item.msg_text }}</span>
-                      </template>
+                          <span class="draft-color">[草稿]</span>
+                          <span>{{ item.draft_text }}</span>
+                        </template>
+                        <template v-else>
+                          <span
+                            v-if="item.type == 1"
+                            :class="{ 'online-color': item.online }"
+                          >
+                            [{{ item.online ? '在线' : '离线' }}]
+                          </span>
+                          <span v-else>[群消息]</span>
+                          <span>{{ item.msg_text }}</span>
+                        </template>
+                      </div>
                     </div>
                   </div>
-                </div>
+                </template>
               </el-main>
             </el-scrollbar>
           </el-container>
         </el-aside>
 
         <!-- 聊天面板容器 -->
-        <el-main class="panel-box">
-          <template v-if="index_name == null">
-            <div class="famous-box">
-              <img src="~@/assets/image/chat.png" width="300" />
-              <p>
-                不是井里没有水，而是你挖的不够深<br />
-                不是成功来得慢，而是你努力的不够多<br />
-                加油吧！ ......
-              </p>
-            </div>
-          </template>
-          <template v-else>
-            <TalkPanel
-              class="full-height"
-              :params="params"
-              :is-online="isFriendOnline"
-              @change-talk="changeTalk"
-              @close-talk="closeTalk"
-            />
-          </template>
+        <el-main class="ov-hidden full-height no-padding">
+          <WelcomeModule v-if="index_name == null" />
+          <TalkPanel
+            v-else
+            class="full-height"
+            :params="params"
+            :is-online="isFriendOnline"
+            @change-talk="changeTalk"
+            @close-talk="closeTalk"
+          />
         </el-main>
       </el-container>
     </MainLayout>
@@ -228,6 +224,7 @@
 <script>
 import { mapGetters, mapState } from 'vuex'
 import MainLayout from '@/views/layout/MainLayout'
+import WelcomeModule from '@/components/layout/WelcomeModule'
 import GroupLaunch from '@/components/group/GroupLaunch'
 import TalkPanel from '@/components/chat/panel/TalkPanel'
 import UserBusinessCard from '@/components/user/UserBusinessCard'
@@ -254,6 +251,7 @@ export default {
     TalkPanel,
     UserBusinessCard,
     UserSearch,
+    WelcomeModule,
   },
   data() {
     return {
@@ -868,7 +866,6 @@ export default {
     .avatar-box {
       height: 35px;
       width: 35px;
-      flex-basis: 35px;
       flex-shrink: 0;
       background-color: #508afe;
       border-radius: 50%;
@@ -956,11 +953,9 @@ export default {
           .disturb {
             color: #98999c !important;
             background-color: #ecedf1 !important;
-            font-size: 12px;
-          }
-
-          .disturb i {
-            font-size: 12px;
+            i {
+              font-size: 12px;
+            }
           }
         }
       }
@@ -1009,31 +1004,6 @@ export default {
   }
 }
 
-.panel-box {
-  overflow: hidden;
-  height: 100%;
-  padding: 0;
-
-  .famous-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    height: 100%;
-    font-size: 24px;
-    user-select: none;
-
-    p {
-      width: 100%;
-      font-weight: 300;
-      text-align: center;
-      font-size: 15px;
-      color: #b9b4b4;
-      margin-top: -30px;
-    }
-  }
-}
-
 @media screen and (max-width: 800px) {
   .aside-box {
     width: 220px !important;
diff --git a/src/views/NotePage.vue b/src/views/NotePage.vue
index 375058f6..e3950ae3 100644
--- a/src/views/NotePage.vue
+++ b/src/views/NotePage.vue
@@ -2,6 +2,7 @@
   <div>
     <MainLayout :idx="2">
       <el-container slot="container" class="note-container">
+        <!-- 左侧工具栏 -->
         <el-aside width="230px" class="el-aside-one lum-scrollbar">
           <el-header class="btn-header">
             <el-dropdown
@@ -35,7 +36,7 @@
                   :class="menu.icon"
                   :style="{ color: menu.color }"
                 />
-                <span v-text="menu.name"></span>
+                <span>{{ menu.name }}</span>
                 <i
                   v-show="menu.submenus.length"
                   class="iconfont icon-menu-nav"
@@ -48,7 +49,7 @@
 
               <div
                 v-for="(submenu, i2) in menu.submenus"
-                v-if="menu.isShowSub"
+                v-show="menu.isShowSub"
                 :key="i2"
                 class="note-list-two"
                 :class="{ 'note-list-active': submenu.isActive }"
@@ -74,9 +75,10 @@
           </el-scrollbar>
         </el-aside>
 
+        <!-- 笔记列表栏 -->
         <el-aside width="350px" class="el-aside-two">
           <div class="search-header">
-            <i class="lumen-icon-sousuo iconfont icon-sousuo" />
+            <i class="iconfont icon-sousuo" />
             <input
               type="text"
               placeholder="搜索我的笔记 ..."
@@ -86,7 +88,7 @@
             />
           </div>
 
-          <div class="count-header">
+          <div class="title-header">
             <span>{{ notes.length }} 篇笔记</span>
             <span v-if="loadNoteStatus == 0" class="load-span">
               <i class="el-icon-loading" /> 加载中 ...
@@ -169,6 +171,7 @@
           </div>
         </el-aside>
 
+        <!-- 右侧文章栏 -->
         <el-main
           v-if="loadStatus == -1 || loadStatus == 0 || loadStatus == 2"
           class="el-main-content"
@@ -198,7 +201,6 @@
             </p>
           </div>
         </el-main>
-
         <el-main
           v-else
           class="el-main-content"
@@ -209,11 +211,10 @@
             <template v-if="markdown.isEdit">
               <el-container>
                 <el-header id="note-header" height="61px">
-                  <i class="el-icon-edit" style="display: inline-block" />
+                  <i class="el-icon-edit" />
                   <input
                     v-model="noteDetail.title"
                     type="text"
-                    style="display: inline-block"
                     placeholder="笔记标题不能为空..."
                   />
                 </el-header>
@@ -251,41 +252,6 @@
                       tag="section"
                       :native="false"
                     >
-                      <div style="padding: 10px; display: none">
-                        <div class="subfield">
-                          <p>
-                            <span>时间：{{ noteDetail.created_at }}</span>
-                            <span>阅读量(1000)</span>
-                            <span
-                              v-show="filesManager.files.length"
-                              class="pointer"
-                            >
-                              附件({{ filesManager.files.length }})
-                            </span>
-                          </p>
-                          <p style="margin-top: 10px">
-                            <span>
-                              分类：<span class="larkc-tag">{{
-                                getNoteClassName(noteDetail.class_id)
-                              }}</span>
-                            </span>
-                            <span>
-                              标签：<span
-                                v-for="(tag, index) in noteDetail.tags"
-                                :key="index"
-                                class="larkc-tag"
-                                >{{ tag.tag_name }}
-                              </span>
-                              <span
-                                v-show="noteDetail.tags.length == 0"
-                                class="larkc-tag"
-                              >
-                                无
-                              </span>
-                            </span>
-                          </p>
-                        </div>
-                      </div>
                       <div
                         v-html="noteDetail.html"
                         v-code
@@ -349,7 +315,7 @@
               >
                 <i
                   class="el-icon-collection-tag"
-                  :class="{ 'i-color': noteDetail.tags.length }"
+                  :class="{ 'i-color': tags.length }"
                 />
                 <p>标签</p>
               </div>
@@ -369,11 +335,8 @@
                 <p>星标</p>
               </div>
 
-              <div v-show="noteDetail.id" v-popover:fileManager class="item">
-                <i
-                  class="el-icon-link"
-                  :class="{ 'i-color': filesManager.files.length }"
-                />
+              <div v-show="noteDetail.id" v-popover:annexlist class="item">
+                <i class="el-icon-link" :class="{ 'i-color': files.length }" />
                 <p>附件</p>
               </div>
 
@@ -433,61 +396,11 @@
 
               <!-- 笔记附件弹出层 -->
               <el-popover
-                ref="fileManager"
+                ref="annexlist"
                 placement="left-start"
                 trigger="click"
               >
-                <p>笔记附件列表</p>
-                <div class="note-files-manager lum-scrollbar">
-                  <input
-                    type="file"
-                    ref="uploadNoteFile"
-                    @change="uploadAnnex"
-                  />
-                  <div class="file-box">
-                    <p class="no-file" v-show="filesManager.files.length == 0">
-                      暂无附件
-                    </p>
-                    <div
-                      v-for="(file, i) in filesManager.files"
-                      :key="file.id"
-                      class="file-item"
-                    >
-                      <div class="file-type">{{ file.file_suffix }}</div>
-                      <div class="file-detail">
-                        <div class="filename">{{ file.original_name }}</div>
-                        <div class="filetool">
-                          <span>{{ formateTime(file.created_at) }}</span>
-                          <span style="color: #3a8ee6">
-                            {{ formateSize(file.file_size) }}
-                          </span>
-                          <div class="filetool-help">
-                            <i
-                              class="el-icon-download"
-                              @click="downloadAnnex(file.id)"
-                            />
-                            <i
-                              class="el-icon-delete"
-                              @click="deleteAnnex(file.id, i)"
-                            />
-                          </div>
-                        </div>
-                      </div>
-                      <div class="clearfix"></div>
-                    </div>
-                  </div>
-                  <div class="files-manager-footer">
-                    <p class="upload-tips">最多可支持上传10个附件</p>
-                    <el-button
-                      type="primary"
-                      size="small"
-                      icon="el-icon-upload"
-                      :loading="filesManager.status"
-                      @click="$refs.uploadNoteFile.click()"
-                      >{{ filesManager.status ? '上传中...' : '上传附件' }}
-                    </el-button>
-                  </div>
-                </div>
+                <NoteAnnexBox :id="noteDetail.id" :fileList="files" />
               </el-popover>
 
               <!-- 笔记标签弹出层 -->
@@ -497,60 +410,15 @@
                 width="300"
                 trigger="click"
               >
-                <div class="tag-manager">
-                  <div class="tag-manager-title">
-                    <span>已选择</span>
-                  </div>
-                  <div class="tag-manager-box">
-                    <p
-                      v-for="(tag, i) in tagManager.tags"
-                      v-show="tag.isSelectd"
-                      :key="i"
-                      class="tag-item"
-                    >
-                      <span>{{ tag.name }}</span>
-                      <i class="el-icon-close" @click="setNoteTag(i, 1)" />
-                    </p>
-                  </div>
-                  <div class="tag-manager-title">
-                    <span>标签栏</span>
-                  </div>
-                  <div class="tag-manager-box">
-                    <p
-                      v-for="(tag, i) in tagManager.tags"
-                      :key="i"
-                      class="tag-item"
-                      :class="{ 'tag-item-active': tag.isSelectd }"
-                      @click="setNoteTag(i, 2)"
-                    >
-                      <span>{{ tag.name }}</span>
-                    </p>
-                  </div>
-
-                  <el-button
-                    v-show="!tagManager.isInput"
-                    type="primary"
-                    class="inster-tag"
-                    :disabled="noteDetail.status == 2"
-                    @click="tagManager.isInput = !tagManager.isInput"
-                    >添加标签
-                  </el-button>
-
-                  <div class="tag-manager-input" v-show="tagManager.isInput">
-                    <input
-                      ref="editTaginput"
-                      type="text"
-                      placeholder="回车保存..."
-                      @keyup.enter="saveTagEvent"
-                    />
-                    <el-button
-                      type="primary"
-                      size="small"
-                      @click="tagManager.isInput = false"
-                      >取消编辑
-                    </el-button>
-                  </div>
-                </div>
+                <NoteTagBox
+                  :id="noteDetail.id"
+                  :tagsList="tags"
+                  @create="
+                    tag => {
+                      this.menus[3].submenus.push(tag)
+                    }
+                  "
+                />
               </el-popover>
             </el-aside>
           </el-container>
@@ -573,6 +441,8 @@
 import MainLayout from '@/views/layout/MainLayout'
 import NoteAnnexRecycle from '@/components/note/NoteAnnexRecycle'
 import UserContacts from '@/components/chat/UserContacts'
+import NoteAnnexBox from '@/components/note/NoteAnnexBox'
+import NoteTagBox from '@/components/note/NoteTagBox'
 import { SvgNoteBook, SvgNote } from '@/core/icons'
 import { mavonEditor } from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'
@@ -592,15 +462,11 @@ import {
   ServeMoveArticle,
   ServeUploadArticleImg,
   ServeSetAsteriskArticle,
-  ServeUploadArticleAnnex,
-  ServeDeleteArticleAnnex,
-  ServeDownloadAnnex,
-  ServeUpdateArticleTag,
   ServeRecoverArticle,
   ServeDeleteArticle,
   ServeForeverDeleteArticle,
 } from '@/api/article'
-import { parseTime, trim, formateSize, formateTime } from '@/utils/functions'
+import { parseTime } from '@/utils/functions'
 
 export default {
   name: 'NotePage',
@@ -611,9 +477,10 @@ export default {
     UserContacts,
     SvgNoteBook,
     SvgNote,
+    NoteAnnexBox,
+    NoteTagBox,
   },
   directives: {
-    // 代码高亮指令
     code: PreCode,
   },
   data() {
@@ -691,6 +558,8 @@ export default {
         status: 1,
         created_at: '',
       },
+      files: [],
+      tags: [],
 
       // 编辑器相关信息
       markdown: {
@@ -718,21 +587,7 @@ export default {
         },
       },
 
-      // 附件管理
-      filesManager: {
-        status: false,
-        files: [],
-      },
-
-      // 标签管理
-      tagManager: {
-        isInput: false,
-        tags: [],
-      },
-
       recycleAnnexBox: false,
-
-      // 选择联系人窗口
       selectContactsBox: false,
     }
   },
@@ -747,15 +602,6 @@ export default {
     this.loadNoteList()
   },
   methods: {
-    // 格式化文件大小
-    formateSize,
-
-    // 格式化时间显示格式
-    formateTime,
-
-    // 下载笔记附件
-    downloadAnnex: ServeDownloadAnnex,
-
     // 加载笔记详情信息
     loadNoteDetail(id, isEdit) {
       this.markdown.isEdit = false
@@ -773,26 +619,19 @@ export default {
             this.noteDetail.created_at = res.data.created_at
             this.noteDetail.class_id = res.data.class_id
             this.noteDetail.is_asterisk = res.data.is_asterisk
-            this.noteDetail.tags = res.data.tags
             this.noteDetail.status = res.data.status
-            this.filesManager.files = res.data.files
-
-            // 赋值给编辑器
             this.markdown.mdText = this.noteDetail.content
 
-            this.tagManager.tags = this.menus[3].submenus.map(item => {
+            let ids = res.data.tags.map(item => item.id)
+            this.files = res.data.files
+            this.tags = this.menus[3].submenus.map(item => {
               return {
                 id: item.id,
                 name: item.name,
-                isSelectd: false,
+                isSelectd: ids.includes(item.id),
               }
             })
 
-            let ids = res.data.tags.map(item => item.id)
-            this.tagManager.tags.forEach((value, i) => {
-              this.tagManager.tags[i].isSelectd = ids.includes(value.id)
-            })
-
             if (isEdit) {
               this.markdown.isEdit = true
             }
@@ -809,10 +648,10 @@ export default {
 
     // 加载标签列表
     loadNoteTags() {
-      ServeGetArticleTag().then(res => {
-        if (res.code != 200) return false
+      ServeGetArticleTag().then(({ code, data }) => {
+        if (code != 200) return false
 
-        this.menus[3].submenus = res.data.tags.map(item => {
+        this.menus[3].submenus = data.tags.map(item => {
           return {
             id: item.id,
             name: item.tag_name,
@@ -850,18 +689,18 @@ export default {
       } else if (i1 == 4) {
         data.find_type = 5
       } else if (i1 == -1) {
-        data.keyword = trim(this.$refs.querykeywords.value)
+        data.keyword = this.$refs.querykeywords.value.trim()
         data.find_type = 6
       }
 
       this.loadNoteStatus = 0
       ServeGetArticleList(data)
-        .then(res => {
+        .then(({ code, data }) => {
           this.loadNoteStatus = 1
 
-          if (res.code !== 200) return false
+          if (code !== 200) return false
 
-          this.notes = res.data.rows.map(item => {
+          this.notes = data.rows.map(item => {
             return {
               id: item.id,
               title: item.title,
@@ -881,10 +720,10 @@ export default {
 
     // 加载笔记分类列表
     loadNoteClass(class_id = null) {
-      ServeGetArticleClass().then(res => {
-        if (res.code != 200) return false
+      ServeGetArticleClass().then(({ code, data }) => {
+        if (code != 200) return false
 
-        this.menus[2].submenus = res.data.rows.map(item => {
+        this.menus[2].submenus = data.rows.map(item => {
           return {
             id: item.id,
             name: item.class_name,
@@ -902,12 +741,12 @@ export default {
     editNote(type = 1) {
       let data = this.getEditData()
       if (data.title == '') {
-        this.$message('笔记标题不能为空...')
+        this.$message('笔记标题不能为空!')
         return false
       }
 
       if (data.md_content == '' || data.content == '') {
-        this.$message('笔记内容不能为空...')
+        this.$message('笔记内容不能为空!')
         return false
       }
 
@@ -987,14 +826,13 @@ export default {
       let formdata = new FormData()
       formdata.append('image', file)
 
+      let save_path = ''
       ServeUploadArticleImg(formdata)
         .then(res => {
-          let save_path = res.data.save_path || ''
-
-          this.$refs.mavonEditor.$img2Url(pos, save_path)
+          save_path = res.data.save_path || ''
         })
-        .catch(() => {
-          this.$refs.mavonEditor.$img2Url(pos, '')
+        .finally(() => {
+          this.$refs.mavonEditor.$img2Url(pos, save_path)
         })
     },
 
@@ -1044,12 +882,11 @@ export default {
       this.noteDetail.content = ''
       this.noteDetail.html = ''
       this.noteDetail.title = ''
-      this.noteDetail.tags = []
       this.noteDetail.is_asterisk = 0
       this.noteDetail.class_id = 0
       this.noteDetail.status = 1
-      this.filesManager.files = []
-      this.tagManager.tags = []
+      this.files = []
+      this.tags = []
       this.markdown.mdText = ''
       this.markdown.htmlText = ''
     },
@@ -1384,112 +1221,14 @@ export default {
       })
     },
 
-    // 上传笔记附件文件
-    uploadAnnex(e) {
-      if (e.target.files.length == 0 || this.filesManager.files.length >= 10) {
-        return false
-      }
-
-      let file = e.target.files[0]
-      if (file.size / (1024 * 1024) > 5) {
-        this.$message('文件不能大于5M...')
-        return false
-      }
-
-      let fileData = new FormData()
-      fileData.append('annex', file)
-      fileData.append('article_id', this.getArticleId())
-
-      this.filesManager.status = true
-      ServeUploadArticleAnnex(fileData)
-        .then(res => {
-          if (res.code == 200) {
-            this.filesManager.files.push({
-              id: res.data.id,
-              original_name: res.data.original_name,
-              created_at: parseTime(new Date()),
-              file_size: res.data.file_size,
-              file_suffix: res.data.file_suffix,
-            })
-          }
-
-          this.filesManager.status = false
-        })
-        .catch(() => {
-          this.filesManager.status = false
-        })
-    },
-
-    // 删除笔记附件
-    deleteAnnex(annex_id, index) {
-      ServeDeleteArticleAnnex({
-        annex_id,
-      }).then(res => {
-        if (res.code == 200) {
-          this.$delete(this.filesManager.files, index)
-        }
-      })
-    },
-
-    // 设置笔记标签事件
-    setNoteTag(i, type) {
-      this.tagManager.tags[i].isSelectd =
-        type == 1 ? false : !this.tagManager.tags[i].isSelectd
-
-      ServeUpdateArticleTag({
-        article_id: this.getArticleId(),
-        tags: this.getSelectTags(),
-      })
-    },
-
-    // 获取选中的标签ids
-    getSelectTags() {
-      let ids = []
-      for (let item of this.tagManager.tags) {
-        if (item.isSelectd) ids.push(item.id)
-      }
-
-      return ids
-    },
-
     // 获取当前查看的笔记ID
     getArticleId() {
       return this.noteDetail.loadId
     },
 
-    // 保存标签事件
-    saveTagEvent() {
-      let tagName = this.$refs.editTaginput.value
-      ServeEditArticleTag({
-        tag_id: 0,
-        tag_name: tagName,
-      }).then(res => {
-        if (res.code == 200) {
-          this.menus[3].submenus.unshift({
-            id: res.data.id,
-            name: tagName,
-            icon: 'icon-dian',
-            count: 0,
-            isEdit: false,
-            isDefault: 0,
-            isActive: false,
-          })
-
-          this.tagManager.tags.push({
-            id: res.data.id,
-            name: tagName,
-            isSelectd: false,
-          })
-
-          this.$refs.editTaginput.value = ''
-          this.tagManager.isInput = false
-        }
-      })
-    },
-
     // 关键词查询笔记
     queryNote() {
-      if (trim(this.$refs.querykeywords.value)) {
+      if (this.$refs.querykeywords.value.trim()) {
         this.setSelectMenu(-1, -1)
       } else {
         this.setSelectMenu(0, -1)