diff --git a/components/common/draft/list.vue b/components/common/draft/list.vue
new file mode 100644
index 0000000..4d782cd
--- /dev/null
+++ b/components/common/draft/list.vue
@@ -0,0 +1,54 @@
+<template>
+  <el-row>
+    <el-col v-for="article in articles.articles" :key="article.idArticle">
+      <el-col>
+        <el-link @click="onRouter(article.articleLink)" :underline="false">
+          <h2 v-html="article.articleTitle"></h2>
+        </el-link>
+      </el-col>
+      <el-col>
+        <small class="d-block text-muted">{{ article.timeAgo }}</small>
+      </el-col>
+      <el-col>
+        <el-divider></el-divider>
+      </el-col>
+    </el-col>
+    <el-col v-if="articles.articles.length == 0" class="text-center">
+      <span class="text-default">这里什么也没有!</span>
+    </el-col>
+    <el-col>
+      <div class="vertical-container text-center">
+        <el-pagination v-show="articles.pagination.total > 10" v-model="articles.pagination"
+                       layout="prev, pager, next"
+                       :current-page="articles.pagination.currentPage"
+                       :total="articles.pagination.total"
+                       @current-change="currentChange">
+        </el-pagination>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  export default {
+    name: "DraftList",
+    props: {
+      articles: {
+        type: Object
+      }
+    },
+    methods: {
+      currentChange(page) {
+      },
+      onRouter(url) {
+        this.$router.push({
+          path: url
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/pages/draft/_draft_id.vue b/pages/draft/_draft_id.vue
new file mode 100644
index 0000000..3610b6a
--- /dev/null
+++ b/pages/draft/_draft_id.vue
@@ -0,0 +1,182 @@
+<template>
+  <el-row class="article__wrapper">
+    <el-col v-if="isShow">
+      <el-col>
+        <el-card>
+          <div class="card-body d-flex flex-column article">
+            <div class="article__item">
+              <h1 class="list__title" v-html="article.articleTitle"></h1>
+              <el-row class="pt-5">
+                <el-col :xs="3" :sm="1" :xl="1">
+                  <el-avatar v-if="article.articleAuthorAvatarUrl" :src="article.articleAuthorAvatarUrl"></el-avatar>
+                  <el-avatar v-else src="https://rymcu.com/vertical/article/1578475481946.png"></el-avatar>
+                </el-col>
+                <el-col :xs="9" :sm="11" :xl="11">
+                  <div style="margin-left: 1rem;">
+                    <el-link @click="onRouter('user', article.articleAuthorName)" :underline="false"
+                             class="text-default">{{ article.articleAuthorName }}
+                    </el-link>
+                    <small class="d-block text-muted">{{ article.timeAgo }}</small>
+                  </div>
+                </el-col>
+                <el-col :xs="12" :sm="12" :xl="12" v-if="user" class="text-right">
+                  <el-dropdown trigger="click" @command="handleCommand">
+                    <el-link :underline="false"><i class="el-icon-more"></i></el-link>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item command="edit" v-if="hasPermissions">编辑</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </el-col>
+                <el-col class="text-right">
+                  <el-link :underline="false" title="总浏览数"><i class="el-icon-s-data"></i><span style="color: red;">{{ article.articleViewCount }}</span>
+                  </el-link>
+                </el-col>
+                <el-col style="margin: 1rem 0;">
+                  <el-tag
+                    style="margin-right: 0.5rem;"
+                    v-for="tag in article.tags"
+                    :key="tag.idTag"
+                    size="small"
+                    effect="plain">
+                    {{ tag.tagTitle }}
+                  </el-tag>
+                </el-col>
+                <el-col v-if="article.portfolios && article.portfolios.length > 0">
+                  <el-col>
+                    <h4>所属作品集</h4>
+                  </el-col>
+                  <el-col style="padding: 1rem">
+                    <el-col v-for="portfolio in article.portfolios" :key="portfolio.idPortfolio" :span="8">
+                      <el-col :xs="3" :sm="3" :xl="3">
+                        <el-avatar :size="24" :src="portfolio.headImgUrl"></el-avatar>
+                      </el-col>
+                      <el-col :xs="20" :sm="20" :xl="20">
+                        <el-link @click="onRouter('portfolio', portfolio.idPortfolio)" :underline="false"
+                                 class="text-default">{{ portfolio.portfolioTitle }}
+                        </el-link>
+                      </el-col>
+                    </el-col>
+                  </el-col>
+                </el-col>
+              </el-row>
+              <div class="pt-7 pipe-content__reset vditor-reset" id="articleContent" v-html="article.articleContent"
+                   style="overflow: hidden;"></div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-col>
+    <el-col v-else>
+      <!--      <Component404></Component404>-->
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import Vue from 'vue';
+  import {mapState} from 'vuex';
+
+  export default {
+    name: "DraftDetail",
+    validate({params, store}) {
+      return params.draft_id && !isNaN(Number(params.draft_id))
+    },
+    fetch({store, params, error}) {
+      return Promise.all([
+        store
+          .dispatch('draft/fetchDetail', params)
+          .catch(err => error({statusCode: 404}))
+      ])
+    },
+    computed: {
+      ...mapState({
+        article: state => state.draft.detail.data,
+        isFetching: state => state.draft.detail.fetching,
+        isMobile: state => state.global.isMobile,
+        user: state => state.oauth,
+        avatar: state => state.oauth?.avatarURL
+      }),
+      hasPermissions() {
+        let account = this.$store.state.oauth?.nickname;
+        if (account) {
+          if (account === this.article?.articleAuthor?.userNickname) {
+            return true;
+          }
+        }
+        return this.$store.getters.hasPermissions('blog_admin');
+      },
+      routeArticleId() {
+        return Number(this.$route.params.draft_id)
+      }
+    },
+    data() {
+      return {
+        isShow: true,
+        loading: false
+      }
+    },
+    methods: {
+      onRouter(name, data) {
+        this.$router.push(
+          {
+            path: `/${name}/${data}`
+          }
+        )
+      },
+      handleCommand(item) {
+        let _ts = this;
+        if (item === 'edit') {
+          _ts.$router.push({
+            path: `/article/post/${_ts.article.idArticle}`
+          })
+        } else {
+          _ts.$axios.$get('/api/article/' + _ts.article.idArticle + '/share').then(function (res) {
+            if (res) {
+              _ts.$set(_ts, 'shareData', res);
+              _ts.$set(_ts, 'isShare', true);
+            }
+          });
+        }
+      },
+      gotoLogin() {
+        this.$router.push({
+          name: 'login'
+        })
+      }
+    },
+    mounted() {
+      this.$store.commit('setActiveMenu', 'draftDetail');
+      Vue.nextTick(() => {
+        const previewElement = document.getElementById("articleContent");
+        // //const outLineElement = document.getElementById("articleToC");
+        // VditorPreview.setContentTheme('light');
+        Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
+        Vue.VditorPreview.highlightRender({"enable": true, "lineNumber": false, "style": "github"}, previewElement);
+        Vue.VditorPreview.mathRender(previewElement, {
+          math: {"engine": "KaTeX", "inlineDigit": false, "macros": {}},
+        });
+        Vue.VditorPreview.mermaidRender(previewElement, ".language-mermaid");
+        Vue.VditorPreview.graphvizRender(previewElement);
+        Vue.VditorPreview.chartRender(previewElement);
+        Vue.VditorPreview.mindmapRender(previewElement);
+        Vue.VditorPreview.abcRender(previewElement);
+        Vue.VditorPreview.mediaRender(previewElement);
+        //VditorPreview.outlineRender(previewElement, outLineElement);
+        window.scrollTo(0,0);
+      })
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import "~vditor/src/assets/scss/index.scss";
+
+  .article__wrapper {
+    max-width: 980px;
+    margin: 0 auto;
+    display: block;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    box-sizing: border-box;
+  }
+</style>
diff --git a/pages/drafts.vue b/pages/drafts.vue
new file mode 100644
index 0000000..d88cad9
--- /dev/null
+++ b/pages/drafts.vue
@@ -0,0 +1,37 @@
+<template>
+  <el-row class="wrapper">
+    <el-col style="margin-bottom: 1rem;">
+      <h1>我的草稿</h1>
+    </el-col>
+    <draft-list :articles="articles"></draft-list>
+  </el-row>
+</template>
+
+<script>
+  import DraftList from '~/components/common/draft/list';
+  import {mapState} from 'vuex';
+
+  export default {
+    name: "Drafts",
+    components: {
+      DraftList
+    },
+    fetch({store, error}) {
+      return Promise.all([
+        store
+          .dispatch('draft/fetchList')
+          .catch(err => error({statusCode: 404}))
+      ])
+    },
+    computed: {
+      ...mapState({
+        articles: state => state.draft.list.data,
+        user: state => state.oauth
+      })
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/store/draft.js b/store/draft.js
new file mode 100644
index 0000000..3565eb4
--- /dev/null
+++ b/store/draft.js
@@ -0,0 +1,96 @@
+export const DRAFT_API_PATH = '/api/article'
+
+const getDefaultListData = () => {
+  return {
+    articles: [],
+    pagination: {}
+  }
+}
+
+export const state = () => {
+  return {
+    list: {
+      fetching: false,
+      data: getDefaultListData()
+    },
+    detail: {
+      fetching: false,
+      data: {}
+    }
+  }
+}
+
+export const mutations = {
+  // 文章列表
+  updateListFetching(state, action) {
+    state.list.fetching = action
+  },
+  updateListData(state, action) {
+    state.list.data = action
+  },
+  // 文章详情
+  updateDetailFetching(state, action) {
+    state.detail.fetching = action
+  },
+  updateDetailData(state, action) {
+    state.detail.data = action.article
+  }
+}
+
+export const actions = {
+  // 获取消息列表
+  fetchList({commit}, params = {}) {
+    // 清空已有数据
+    commit('updateListData', getDefaultListData())
+    commit('updateListFetching', true)
+    let data = {
+      page: params.page || 1
+    }
+
+    return this.$axios
+      .$get(`${DRAFT_API_PATH}/drafts`, {
+        params: data
+      })
+      .then(response => {
+        commit('updateListFetching', false);
+        commit('updateListData', response);
+      })
+      .catch(error => {
+        console.log(error);
+        commit('updateListFetching', false);
+      });
+  },
+  // 获取文章详情
+  fetchDetail({ commit }, params = {}) {
+    // const delay = fetchDelay(
+    //   isBrowser
+    // )
+    // if (isBrowser) {
+    //   Vue.nextTick(() => {
+    //     window.scrollTo(0, 300);
+    //   })
+    // }
+    commit('updateDetailFetching', true)
+    // commit('updateDetailData', {})
+    return this.$axios
+      .$get(`${DRAFT_API_PATH}/detail/${params.draft_id}`, {
+        params: {
+          type: 3
+        }
+      })
+      .then(response => {
+        return new Promise(resolve => {
+          commit('updateDetailData', response)
+          commit('updateDetailFetching', false)
+          resolve(response)
+          // delay(() => {
+          //   resolve(response)
+          // })
+        })
+      })
+      .catch(error => {
+        commit('updateDetailFetching', false)
+        return Promise.reject(error)
+      })
+  }
+}