diff --git a/.env.example b/.env.example
index bab7dcc..baca2d7 100644
--- a/.env.example
+++ b/.env.example
@@ -5,5 +5,7 @@ NODE_ENV = 'example'
 VUE_APP_BASE_API = 'http://x.x.x.x:80'
 
 # github login client id
-# get it in page : https://github.com/settings/developers 
-VUE_APP_GITHUB_CLIENTID='xxxxxxxxxxxxxxxxxxx'
+# get it in page : https://github.com/settings/developers
+VUE_APP_GITHUB_CLIENTID = 'xxxxxxxxxxxxxxxxxxx'
+
+VUE_APP_ICP_ID = ''
diff --git a/.gitignore b/.gitignore
index bfad2f7..f0f30bd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 /context/
 /log/
 node_modules/
+node_modules*
 dist/
 tmp/
 npm-debug.log*
diff --git a/README.md b/README.md
index f0bfed8..8685115 100644
--- a/README.md
+++ b/README.md
@@ -22,3 +22,8 @@ npm run lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+
+### Todo list
+[] add admin's page
+[] how to display draft and private articles
diff --git a/package.json b/package.json
index c2abb33..b29555a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "axios": "^0.26.1",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "core-js": "^3.8.3",
+    "echarts": "^5.4.1",
     "element-plus": "^2.2.21",
     "express": "^4.18.2",
     "highlight.js": "^11.5.0",
diff --git a/src/components/PagiNation/index.vue b/src/components/PagiNation/index.vue
new file mode 100644
index 0000000..d0d0f2a
--- /dev/null
+++ b/src/components/PagiNation/index.vue
@@ -0,0 +1,118 @@
+<template>
+    <div :class="{'hidden':hidden}" class="pagination-container">
+        <el-pagination
+                :background="background"
+                :small="true"
+                v-model:current-page="currentPage"
+                v-model:page-size="pageSize"
+                :layout="layout"
+                :page-sizes="pageSizes"
+                :total="total"
+                v-bind="$attrs"
+                default-current-page=1
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+        />
+    </div>
+</template>
+
+<script>
+    // scroll to page's top after page changed
+    import { scrollTo } from '@/utils/scroll-to'
+
+    export default {
+        name: 'PagiNation',
+        emits:['update:page','update:limit'],
+
+        props: {
+            total: {
+                required: true,
+                type: Number
+            },
+            page: {
+                type: Number,
+                default: 1
+            },
+            limit: {
+                type: Number,
+                default: 20
+            },
+            pageSizes: {
+                type: Array,
+                default() {
+                    return [5, 10, 20, 30, 50]
+                }
+            },
+            layout: {
+                type: String,
+                default: 'prev,pager,next,jumper,sizes,total'
+            },
+            background: {
+                type: Boolean,
+                default: true
+            },
+            autoScroll: {
+                type: Boolean,
+                default: true
+            },
+            hidden: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            currentPage: {
+                get() {
+                    return this.page
+                },
+                set(val) {
+                    this.$emit('update:page', val)
+                }
+            },
+            pageSize: {
+                get() {
+                    return this.limit
+                },
+                set(val) {
+                    this.$emit('update:limit', val)
+                }
+            }
+        },
+        methods: {
+            // 这里是原有代码的流程，但是page和pagesize已经是在父组件和子组件通过emit事件双向绑定了，
+            // 外面直接使用即可，不需要在这里调用的时候传递了
+            // handleSizeChange(val) {
+            //     this.$emit('pagination', { page: 1, limit: val })
+            //     if (this.autoScroll) {
+            //         scrollTo(0, 800)
+            //     }
+            // },
+            // fixme 修复在blog界面中， 给评论添加了pagination， 翻页后如何跳转到对应的位置（评论开始的地方）
+            handleSizeChange() {
+                // page size change ,set page to 1st page
+                this.$emit('update:page', 1)
+                this.$emit('pagination')
+                if (this.autoScroll) {
+                    scrollTo(0, 800)
+                }
+            },
+            handleCurrentChange() {
+                this.$emit('pagination')
+                if (this.autoScroll) {
+                    scrollTo(0, 800)
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .pagination-container {
+        margin-top:0px;
+        /*background: #fff;*/
+        padding: 15px 16px;
+    }
+    .pagination-container.hidden {
+        display: none;
+    }
+</style>
diff --git a/src/components/TinyMce/components/EditorImage.vue b/src/components/TinyMce/components/EditorImage.vue
new file mode 100644
index 0000000..989d4d1
--- /dev/null
+++ b/src/components/TinyMce/components/EditorImage.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="upload-container">
+    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
+      upload
+    </el-button>
+    <el-dialog v-model:visable="dialogVisible">
+      <el-upload
+        :multiple="true"
+        :file-list="fileList"
+        :show-file-list="true"
+        :on-remove="handleRemove"
+        :on-success="handleSuccess"
+        :before-upload="beforeUpload"
+        class="editor-slide-upload"
+        action="https://httpbin.org/post"
+        list-type="picture-card"
+      >
+        <el-button size="small" type="primary">
+          Click upload
+        </el-button>
+      </el-upload>
+      <el-button @click="dialogVisible = false">
+        Cancel
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        Confirm
+      </el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { getToken } from 'api/qiniu'
+
+export default {
+  name: 'EditorSlideUpload',
+  props: {
+    color: {
+      type: String,
+      default: '#1890ff'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      listObj: {},
+      fileList: []
+    }
+  },
+  methods: {
+    checkAllSuccess() {
+      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
+    },
+    handleSubmit() {
+      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+      if (!this.checkAllSuccess()) {
+        this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
+        return
+      }
+      this.$emit('successCBK', arr)
+      this.listObj = {}
+      this.fileList = []
+      this.dialogVisible = false
+    },
+    handleSuccess(response, file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          this.listObj[objKeyArr[i]].url = response.files.file
+          this.listObj[objKeyArr[i]].hasSuccess = true
+          return
+        }
+      }
+    },
+    handleRemove(file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]]
+          return
+        }
+      }
+    },
+    beforeUpload(file) {
+      const _self = this
+      const _URL = window.URL || window.webkitURL
+      const fileName = file.uid
+      this.listObj[fileName] = {}
+      return new Promise((resolve,reject) => {
+        const img = new Image()
+        img.src = _URL.createObjectURL(file)
+        img.onload = function() {
+          _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
+        }
+        resolve(true)
+        if (img===0) {
+          reject("xxxx")
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editor-slide-upload {
+  margin-bottom: 20px;
+  ::v-deep .el-upload--picture-card {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/components/TinyMce/dynamicLoadScript.js b/src/components/TinyMce/dynamicLoadScript.js
new file mode 100644
index 0000000..185f58d
--- /dev/null
+++ b/src/components/TinyMce/dynamicLoadScript.js
@@ -0,0 +1,59 @@
+let callbacks = []
+
+function loadedTinymce() {
+  // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
+  // check is successfully downloaded script
+  return window.tinymce
+}
+
+const dynamicLoadScript = (src, callback) => {
+  const existingScript = document.getElementById(src)
+  const cb = callback || function() {}
+
+  if (!existingScript) {
+    const script = document.createElement('script')
+    script.src = src // src url for the third-party library being loaded.
+    script.id = src
+    document.body.appendChild(script)
+    callbacks.push(cb)
+    const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
+    onEnd(script)
+  }
+
+  if (existingScript && cb) {
+    if (loadedTinymce()) {
+      cb(null, existingScript)
+    } else {
+      callbacks.push(cb)
+    }
+  }
+
+  function stdOnEnd(script) {
+    script.onload = function() {
+      // this.onload = null here is necessary
+      // because even IE9 works not like others
+      this.onerror = this.onload = null
+      for (const cb of callbacks) {
+        cb(null, script)
+      }
+      callbacks = null
+    }
+    script.onerror = function() {
+      this.onerror = this.onload = null
+      cb(new Error('Failed to load ' + src), script)
+    }
+  }
+
+  function ieOnEnd(script) {
+    script.onreadystatechange = function() {
+      if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
+      this.onreadystatechange = null
+      for (const cb of callbacks) {
+        cb(null, script) // there is no way to catch loading errors in IE8
+      }
+      callbacks = null
+    }
+  }
+}
+
+export default dynamicLoadScript
diff --git a/src/components/TinyMce/index.vue b/src/components/TinyMce/index.vue
new file mode 100644
index 0000000..678bf37
--- /dev/null
+++ b/src/components/TinyMce/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
+    <textarea :id="tinymceId" class="tinymce-textarea" />
+    <div class="editor-custom-btn-container">
+      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * docs:
+ * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
+ */
+import editorImage from './components/EditorImage'
+import plugins from './plugins'
+import toolbar from './toolbar'
+import load from './dynamicLoadScript'
+
+// why use this cdn, detail see https://github.com/PanJiaChen/tinymce-all-in-one
+// const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymce.min.js'
+const tinymceCDN = 'https://cdn.bootcdn.net/ajax/libs/tinymce/6.0.0/tinymce.min.js'
+
+export default {
+  name: 'TinyMce',
+  components: { editorImage },
+  props: {
+    id: {
+      type: String,
+      default: function() {
+        return 'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
+      }
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return []
+      }
+    },
+    menubar: {
+      type: String,
+      default: ' file edit insert view format table tools help align'
+    },
+    toolbar_sticky:{
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    height: {
+      type: [Number, String],
+      required: false,
+      default: 360
+    },
+    width: {
+      type: [Number, String],
+      required: false,
+      default: 'auto'
+    }
+  },
+  data() {
+    return {
+
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id,
+      fullscreen: false,
+      languageTypeList: {
+        'en': 'en',
+        'zh': 'zh_CN',
+        'es': 'es_MX',
+        'ja': 'ja'
+      }
+    }
+  },
+  computed: {
+    containerWidth() {
+      const width = this.width
+      if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
+        return `${width}px`
+      }
+      return width
+    }
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() =>
+          window.tinymce.get(this.tinymceId).setContent(val || ''))
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  activated() {
+    if (window.tinymce) {
+      this.initTinymce()
+    }
+  },
+  deactivated() {
+    this.destroyTinymce()
+  },
+  unmounted() {
+    this.destroyTinymce()
+  },
+  methods: {
+    init() {
+      // dynamic load tinymce from cdn
+      load(tinymceCDN, (err) => {
+        if (err) {
+          this.$message.error(err.message)
+          return
+        }
+        this.initTinymce()
+      })
+    },
+    initTinymce() {
+      const _this = this
+      window.tinymce.init({
+        selector: `#${this.tinymceId}`,
+        language: 'en',
+        height: this.height,
+        body_class: 'panel-body ',
+        toolbar_sticky: this.toolbar_sticky,
+        object_resizing: false,
+        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
+        menubar: this.menubar,
+        plugins: plugins,
+        link_default_target: '_blank',
+        end_container_on_empty_block: true,
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
+        link_title: false,
+        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
+        init_instance_callback: editor => {
+          if (_this.value) {
+            editor.setContent(_this.value)
+          }
+          _this.hasInit = true
+          editor.on('NodeChange Change KeyUp SetContent', () => {
+            this.hasChange = true
+            this.$emit('input', editor.getContent())
+          })
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state
+          })
+        },
+        // it will try to keep these URLs intact
+        // https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
+        // https://stackoverflow.com/questions/5196205/disable-tinymce-absolute-to-relative-url-conversions
+        convert_urls: false
+        // 整合七牛上传
+        // images_dataimg_filter(img) {
+        //   setTimeout(() => {
+        //     const $image = $(img);
+        //     $image.removeAttr('width');
+        //     $image.removeAttr('height');
+        //     if ($image[0].height && $image[0].width) {
+        //       $image.attr('data-wscntype', 'image');
+        //       $image.attr('data-wscnh', $image[0].height);
+        //       $image.attr('data-wscnw', $image[0].width);
+        //       $image.addClass('wscnph');
+        //     }
+        //   }, 0);
+        //   return img
+        // },
+        // images_upload_handler(blobInfo, success, failure, progress) {
+        //   progress(0);
+        //   const token = _this.$store.getters.token;
+        //   getToken(token).then(response => {
+        //     const url = response.data.qiniu_url;
+        //     const formData = new FormData();
+        //     formData.append('token', response.data.qiniu_token);
+        //     formData.append('key', response.data.qiniu_key);
+        //     formData.append('file', blobInfo.blob(), url);
+        //     upload(formData).then(() => {
+        //       success(url);
+        //       progress(100);
+        //     })
+        //   }).catch(err => {
+        //     failure('出现未知问题，刷新页面，或者联系程序员')
+        //     console.log(err);
+        //   });
+        // },
+      })
+    },
+    destroyTinymce() {
+      const tinymce = window.tinymce.get(this.tinymceId)
+      if (this.fullscreen) {
+        tinymce.execCommand('mceFullScreen')
+      }
+
+      if (tinymce) {
+        tinymce.destroy()
+      }
+    },
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value)
+    },
+    getContent() {
+      window.tinymce.get(this.tinymceId).getContent()
+    },
+    imageSuccessCBK(arr) {
+      arr.forEach(v => window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tinymce-container {
+  position: relative;
+  line-height: normal;
+}
+
+.tinymce-container {
+  ::v-deep {
+    .mce-fullscreen {
+      z-index: 10000;
+    }
+  }
+}
+
+.tinymce-textarea {
+  visibility: hidden;
+  z-index: -1;
+}
+
+.editor-custom-btn-container {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  /*z-index: 2005;*/
+}
+
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
+}
+
+.editor-upload-btn {
+  display: inline-block;
+}
+</style>
diff --git a/src/components/TinyMce/plugins.js b/src/components/TinyMce/plugins.js
new file mode 100644
index 0000000..89176c5
--- /dev/null
+++ b/src/components/TinyMce/plugins.js
@@ -0,0 +1,13 @@
+// Any plugins you want to use has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+
+// const plugins = 'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality' +
+// ' emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste ' +
+// 'preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks ' +
+// 'visualchars wordcount'
+const plugins='wordcount anchor code table lists advlist link autolink  autosave charmap emoticons fullscreen image ' +
+    'insertdatetime nonbreaking pagebreak preview  save searchreplace visualchars codesample'
+// const plugins = 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount'
+
+export default plugins
diff --git a/src/components/TinyMce/toolbar.js b/src/components/TinyMce/toolbar.js
new file mode 100644
index 0000000..e0696e0
--- /dev/null
+++ b/src/components/TinyMce/toolbar.js
@@ -0,0 +1,14 @@
+// Here is a list of the toolbar
+// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
+
+// const toolbar = ['blocks toc searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
+// const toolbar =['blocks | bold italic underline strikethrough | image quote bullist link codesample']
+// 不需要 copy cut
+// 付费支持 advcode advtable casechange AutosaveChecklist editimage
+// 待确认 language Dropdown list with languages to apply to the selection. This item requires the content_langs option.
+// 待确认 language subscript superscript visualaid typography list autosave charmap visualblocks_ quickbars
+const toolbar= ['undo redo blocks bold italic underline strikethrough fontfamily lineheight fontsize hr align ' +
+'backcolor print removeformat selectall  code table numlist bullist anchor charmap emoticons fullscreen image ' +
+'insertdatetime nonbreaking pagebreak preview  save searchreplace visualchars codesample' ]
+
+export default toolbar
diff --git a/src/layout/components/MainFooter.vue b/src/layout/components/MainFooter.vue
index adb27ed..6768625 100644
--- a/src/layout/components/MainFooter.vue
+++ b/src/layout/components/MainFooter.vue
@@ -2,13 +2,23 @@
     <div class="main-footer">
         <span>Copyright@pycoder404</span>
         <br>
-        <span>powered by pycoder404</span>
+        <el-link href="https://beian.miit.gov.cn" type="info"> {{ ICP_ID }}</el-link>
+        <el-link href="https://beian.miit.gov.cn" type="info"> {{ POL_ICP_ID }}</el-link>
+
     </div>
 </template>
 
 <script>
+    const VUE_APP_ICP_ID = process.env.VUE_APP_ICP_ID
+    const VUE_APP_POL_ICP_ID = process.env.VUE_APP_POL_ICP_ID
     export default {
-        name: "MainFooter"
+        name: "MainFooter",
+        data() {
+            return {
+                ICP_ID: VUE_APP_ICP_ID,
+                POL_ICP_ID:VUE_APP_POL_ICP_ID
+            }
+        }
     }
 </script>
 
diff --git a/src/layout/components/MainHeader.vue b/src/layout/components/MainHeader.vue
index 4aa2160..f653e6c 100644
--- a/src/layout/components/MainHeader.vue
+++ b/src/layout/components/MainHeader.vue
@@ -4,34 +4,40 @@
             <router-link to="/" class="left-menu-item">HOME</router-link>
             <router-link to="/article/list" class="left-menu-item">LIST</router-link>
             <router-link to="/article/list" class="left-menu-item">ARCHIVE</router-link>
-            <router-link to="/article/create" class="left-menu-item">NEW</router-link>
+            <router-link v-if=isAdmin to="/article/create" class="left-menu-item">NEW</router-link>
 
         </div>
 
         <div class="right-menu">
-            <el-button class="right-menu-item"> <el-icon><SearchIcon /></el-icon></el-button>
+            <el-button class="right-menu-item">
+                <el-icon>
+                    <SearchIcon/>
+                </el-icon>
+            </el-button>
             <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
                 <div class="avatar-wrapper">
                     <el-avatar shape="square" :size="30" fit="fill" :src="avatar"></el-avatar>
-                    <el-icon><CaretBottom /></el-icon>
+                    <el-icon>
+                        <CaretBottom/>
+                    </el-icon>
                 </div>
 
                 <template #dropdown>
-                <el-dropdown-menu>
-                    <router-link to="/">
-                        <el-dropdown-item>Home</el-dropdown-item>
-                    </router-link>
-                    <router-link to="/article/create">
-                        <el-dropdown-item>New</el-dropdown-item>
-                    </router-link>
-
-                    <a target="_blank" href="https://github.com/pycoder404/blog-vue">
-                        <el-dropdown-item>Github</el-dropdown-item>
-                    </a>
-                    <el-dropdown-item divided @click="logout">
-                        <span style="display:block;">Log Out</span>
-                    </el-dropdown-item>
-                </el-dropdown-menu>
+                    <el-dropdown-menu>
+                        <router-link to="/">
+                            <el-dropdown-item>Home</el-dropdown-item>
+                        </router-link>
+                        <router-link to="/article/create">
+                            <el-dropdown-item>New</el-dropdown-item>
+                        </router-link>
+
+                        <a target="_blank" href="https://github.com/pycoder404/blog-vue">
+                            <el-dropdown-item>Github</el-dropdown-item>
+                        </a>
+                        <el-dropdown-item divided @click="logout">
+                            <span style="display:block;">Log Out</span>
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
                 </template>
             </el-dropdown>
         </div>
@@ -45,7 +51,7 @@
     import {mapGetters} from 'vuex'
     // import Breadcrumb from '@/components/Breadcrumb'
     // import Hamburger from '@/components/Hamburger'
-    import {ref} from 'vue'
+    // import {ref} from 'vue'
     import SvgIcon from '@/components/SvgIcon/index'
 
     export default {
@@ -53,20 +59,23 @@
             SvgIcon
         },
         data() {
-            return {
-            }
+            return {}
 
         },
 
         computed: {
             ...mapGetters([
-                'avatar'
+                'avatar',
+                'isAdmin',
             ])
         },
 
         methods: {
             async logout() {
                 await this.$store.dispatch('user/logout')
+                // fixme if push to this.$route.fullPath, because the route path is not change,
+                // fixme so the page is not reloaded
+                // this.$router.push(this.$route.fullPath)
                 this.$router.push(`/login?redirect=${this.$route.fullPath}`)
             }
         }
@@ -75,18 +84,19 @@
 
 <style lang="scss" scoped>
     .main-header {
-        height: 62px;
+        height: 52px;
         overflow: hidden;
         position: relative;
         background: #24292f;
         /*background:#304156;*/
         box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-        padding:16px 32px;
+        padding: 4px 32px;
+
         .left-menu {
             float: left;
             height: 100%;
-            line-height: 30px;
-
+            /*line-height: 30px;*/
+            padding: 10px 1px;
 
             &:focus {
                 outline: none;
@@ -94,7 +104,7 @@
 
             .left-menu-item {
                 display: inline-block;
-                padding: 0 8px;
+                margin: 0 8px;
                 height: 100%;
                 font-size: 18px;
                 color: #FFFFFF;
@@ -146,7 +156,7 @@
             .right-menu-item {
                 display: inline-block;
                 padding: 0 8px;
-                height: 100%;
+                margin: 8px 0;
                 font-size: 18px;
                 color: #5a5e66;
                 vertical-align: text-bottom;
@@ -209,6 +219,4 @@
     }
 
 
-
-
 </style>
diff --git a/src/store/getters.js b/src/store/getters.js
index 46757bb..c5f60ae 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -7,5 +7,7 @@ const getters = {
     username: state => state.user.username,
     introduction: state => state.user.introduction,
     roles: state => state.user.roles,
+    isLogin: state => state.user.roles.length > 0,
+    isAdmin: state => state.user.roles.indexOf('admin') > -1,
 }
 export default getters
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96095ef..26e0c7a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -142,10 +142,10 @@ aside {
   line-height: 50px;
   position: relative;
   width: 100%;
-  text-align: right;
+  text-align: left;
   padding-right: 20px;
   transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  //background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
 
   .subtitle {
     font-size: 20px;
@@ -155,7 +155,9 @@ aside {
   &.draft {
     background: #d0d0d0;
   }
-
+  &.published {
+    background: rgba(208, 208, 208, 0.38);
+  }
   &.deleted {
     background: #d0d0d0;
   }
diff --git a/src/utils/scroll-to.js b/src/utils/scroll-to.js
new file mode 100644
index 0000000..8df5c34
--- /dev/null
+++ b/src/utils/scroll-to.js
@@ -0,0 +1,58 @@
+Math.easeInOutQuad = function(t, b, c, d) {
+    t /= d / 2
+    if (t < 1) {
+        return c / 2 * t * t + b
+    }
+    t--
+    return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+    document.documentElement.scrollTop = amount
+    document.body.parentNode.scrollTop = amount
+    document.body.scrollTop = amount
+}
+
+function position() {
+    return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+    const start = position()
+    const change = to - start
+    const increment = 20
+    let currentTime = 0
+    duration = (typeof (duration) === 'undefined') ? 500 : duration
+    var animateScroll = function() {
+        // increment the time
+        currentTime += increment
+        // find the value with the quadratic in-out easing function
+        var val = Math.easeInOutQuad(currentTime, start, change, duration)
+        // move the document.body
+        move(val)
+        // do the animation unless its over
+        if (currentTime < duration) {
+            requestAnimFrame(animateScroll)
+        } else {
+            if (callback && typeof (callback) === 'function') {
+                // the animation is done so lets callback
+                callback()
+            }
+        }
+    }
+    animateScroll()
+}
diff --git a/src/views/article/components/ArticleComment.vue b/src/views/article/components/ArticleComment.vue
index a02d9e5..296e0ab 100644
--- a/src/views/article/components/ArticleComment.vue
+++ b/src/views/article/components/ArticleComment.vue
@@ -31,13 +31,22 @@
                     </el-button>
                 </div>
             </template>
-            <div v-hlcode  class="comment-body" v-html="comment.mdcontent"></div>
+            <div v-hlcode class="comment-body" v-html="comment.mdcontent"></div>
         </el-card>
+        <pagi-nation
+                :total="commentCount"
+                :background="true"
+                :auto-scroll="false"
+                v-model:page="page"
+                v-model:limit="pagesize"
+                @pagination="getList"
+        />
         <el-divider></el-divider>
         <div>
             <el-form ref="commentFormRef" :model="commentForm">
                 <el-form-item prop="content">
                     <mavon-editor
+                            :autofocus="false"
                             ref="commentEditor"
                             class="mavon-edtior-custom-comment"
                             code-style="vs2015"
@@ -61,11 +70,13 @@
 
 <script>
     import {getCommentList, createComment} from "@/api/comment";
+    import PaginNation from '@/components/PagiNation'
+
     import {mapGetters} from 'vuex'
 
     export default {
         name: 'ArticleComment',
-        components: {},
+        components: {PagiNation: PaginNation},
         props: {
             articleId: {
                 type: Number
@@ -78,6 +89,8 @@
                 tempRoute: {},
                 commentList: [],
                 commentCount: 0,
+                page: 1,
+                pagesize: 10,
                 commentForm: {
                     article_id: 0,
                     content: '', // comment 内容
@@ -98,12 +111,12 @@
         },
         methods: {
             getList() {
-                this.listLoading = true
-                const queryParams = {'article_id': this.articleId}
+                // this.listLoading = true
+                const queryParams = {'article_id': this.articleId, page: this.page, pagesize: this.pagesize}
                 getCommentList(queryParams).then(response => {
                     this.commentList = response.data
                     this.commentCount = response.count
-                    this.listLoading = false
+                    // this.listLoading = false
                 })
             },
             replyToSomeone(comment = undefined, quoted = false) {
@@ -112,9 +125,9 @@
                     this.commentForm.replied_to = comment.comment_order
                     content = "> 回复 " + comment.comment_order + "楼  @" + comment.author
                     if (quoted) {
-                        content =  "> 引用 " + comment.comment_order + "楼  @" + comment.author + "\n\n"
+                        content = "> 引用 " + comment.comment_order + "楼  @" + comment.author + "\n\n"
 
-                        content = content + "<div class='quote-reply'>" +  comment.mdcontent + "</div>"
+                        content = content + "<div class='quote-reply'>" + comment.mdcontent + "</div>"
                     }
 
                     this.commentForm.content = content + "\n\n"
@@ -122,7 +135,6 @@
                 this.$refs.commentEditor.textAreaFocus()
             },
             submitForm() {
-                console.log(this.postForm)
                 this.loading = true
                 this.commentForm.article_id = this.articleId
                 createComment(this.commentForm).then((res) => {
@@ -154,10 +166,11 @@
 
     .comment-item {
         margin-top: 10px;
-        padding:5px;
+        padding: 5px;
 
 
     }
+
     .comment-body {
         padding-left: 30px;
         font-size: small;
@@ -180,10 +193,10 @@
 
 
     blockquote {
-        padding:0 1em;
+        padding: 0 1em;
         color: black;
         border-left: 0.25em solid;
-     }
+    }
 
     .comment-status {
         text-align: right;
diff --git a/src/views/article/components/CategoryAndTag.vue b/src/views/article/components/CategoryAndTag.vue
index a59ffd9..bf4bbae 100644
--- a/src/views/article/components/CategoryAndTag.vue
+++ b/src/views/article/components/CategoryAndTag.vue
@@ -2,58 +2,34 @@
     <div>
         <div class="article-category">
             <span>分类: <router-link
-                    :to="{name:'articleListPage',query:{category:'Linux'}}">{{articleDetail.category}}</router-link></span>
+                    :to="{name:'articleListPage',query:{category:articleDetail.category}}">{{articleDetail.category}}</router-link></span>
         </div>
         <div class="article-tag">
             <span>标签: </span>
             <router-link
                     v-for="tag in articleDetail.tags"
                     :key="tag"
-                    :to="{name:'articleListPage',query:{tags:tag}}"
+                    :to="{name:'articleListPage',query:{tags: tag}}"
             >
                 {{' ' + tag }}
             </router-link>
         </div>
 
-
     </div>
 
 </template>
 
 <script>
 
-
     export default {
         name: 'CategoryAndTag',
         components: {
-            // Upload,
-            // StickyNav,
-            // CommentDropdown,
-            // PlatformDropdown,
-            // SourceUrlDropdown
         },
         props: {
             articleDetail: {
                 type: Object
             }
         },
-        data() {
-
-            return {
-                image_upload_url: 'http://10.89.228.206:28088/files/upload/',
-                // postForm: Object.assign({}, defaultForm),
-                loading: false,
-                tempRoute: {},
-                articleTags: [],
-                articleCategories: [],
-            }
-        },
-        created() {
-            // Why need to make a copy of this.$route here?
-            // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
-            // https://github.com/PanJiaChen/vue-element-admin/issues/1221
-            this.tempRoute = Object.assign({}, this.$route)
-        }
     }
 
 </script>
diff --git a/src/views/article/create.vue b/src/views/article/create.vue
index d0bb145..2cc01d5 100644
--- a/src/views/article/create.vue
+++ b/src/views/article/create.vue
@@ -18,12 +18,23 @@
                             v-model="postForm.content"
                             @imgAdd="handleImgUpload"
                     />
+
+                    <!--                    <tiny-mce-->
+                    <!--                    ref="editor"-->
+                    <!--                    class="mavon-edtior-custom"-->
+                    <!--                    v-model="postForm.content"-->
+                    <!--                    height="800"-->
+                    <!--                    width=100%-->
+                    <!--                    >-->
+                    <!--                    </tiny-mce>-->
+
                 </el-form-item>
             </div>
 
-            <el-form-item label="分类" prop="category">
+            <el-form-item style="margin-left:45px;" label="分类: " prop="category">
                 <el-radio-group v-model="postForm.category">
                     <el-radio-button
+                            class="mar-left"
                             v-for="category in articleCategories"
                             :key="category['title']"
                             :label="category['title']"
@@ -31,38 +42,43 @@
                     >
                         {{category['title']}}
                     </el-radio-button>
-                    <el-button icon="PlusIcon" @click="addCategoryDialogVisible=true">新建分类</el-button>
-
                 </el-radio-group>
+                <div class="mar-left">
+                    <el-button icon="PlusIcon" @click="addCategoryDialogVisible=true">新建分类</el-button>
+                </div>
             </el-form-item>
 
-            <el-dialog v-model="addCategoryDialogVisible" title="添加分类">
-
-                        <el-input v-model="newCategory" />
-                <template #footer>
-                      <span class="dialog-footer">
-                        <el-button @click="addCategoryDialogVisible = false">Cancel</el-button>
-                        <el-button type="primary" @click="submitToCreateCategory">Confirm</el-button>
-                      </span>
-                </template>
-            </el-dialog>
 
-            <el-form-item label='标签' prop="tags">
+            <el-form-item style="margin-left:45px;" label='标签: ' prop="tags">
                 <el-checkbox-group
                         v-model="postForm.tags"
                 >
                     <el-checkbox
+                            class="mar-left"
                             v-for="tag in articleTags"
                             :key="tag['title']"
                             :label="tag['title']"
                             :value="tag['title']"
                     />
-                    <el-button icon="PlusIcon" @click="addTagDialogVisible=true">新建标签</el-button>
                 </el-checkbox-group>
+                <div class="mar-left">
+                    <el-button icon="PlusIcon" @click="addTagDialogVisible=true">新建标签</el-button>
+                </div>
+
             </el-form-item>
 
+            <el-dialog v-model="addCategoryDialogVisible" title="添加分类">
+                <el-input v-model="newCategory"/>
+                <template #footer>
+                      <span class="dialog-footer">
+                        <el-button @click="addCategoryDialogVisible = false">Cancel</el-button>
+                        <el-button type="primary" @click="submitToCreateCategory">Confirm</el-button>
+                      </span>
+                </template>
+            </el-dialog>
+
             <el-dialog v-model="addTagDialogVisible" title="添加标签">
-                <el-input v-model="newTag" />
+                <el-input v-model="newTag"/>
                 <template #footer>
                       <span class="dialog-footer">
                         <el-button @click="addTagDialogVisible = false">Cancel</el-button>
@@ -70,14 +86,18 @@
                       </span>
                 </template>
             </el-dialog>
+
         </el-form>
 
         <sticky-nav
-                :class-name="'sub-navbar '+postForm.status"
-                style="padding: 0px 45px 15px 45px;"
+                class-name="sub-navbar"
+                style="padding: 0px 45px 0px 45px;"
         >
-            <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
-                Submit
+            <el-button v-loading="loading" type="success" @click="submitForm('published')">
+                Publish
+            </el-button>
+            <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm('draft')">
+                Save Draft
             </el-button>
         </sticky-nav>
     </div>
@@ -88,8 +108,9 @@
     import StickyNav from '@/components/StickyNav' // 粘性header组件
     // import { validURL } from '@/utils/validate'
     import {getArticleDetail, createArticle, updateArticle} from '@/api/article'
-    import {getTagList,createTag} from '@/api/tag'
-    import {getCategoryList,createCategory} from '@/api/category'
+    import {getTagList, createTag} from '@/api/tag'
+    import {getCategoryList, createCategory} from '@/api/category'
+    // import TinyMce from '@/components/TinyMce'
     // import { CommentDropdown, PlatformDropdown, SourceUrlDropdown } from './Dropdown'
     // import axios from 'axios'
     import {uploadFile} from "@/api/files";
@@ -100,6 +121,7 @@
         components: {
             // Upload,
             StickyNav,
+            // TinyMce,
             // CommentDropdown,
             // PlatformDropdown,
             // SourceUrlDropdown
@@ -114,10 +136,10 @@
             const validateRequire = (rule, value, callback) => {
                 if (value === '') {
                     this.$message({
-                        message: rule.field + '为必传项',
+                        message: rule.field + '必填项,请认真填写',
                         type: 'error'
                     })
-                    callback(new Error(rule.field + '为必传项'))
+                    callback(new Error(rule.field + '必填项,请认真填写'))
                 } else {
                     callback()
                 }
@@ -134,9 +156,9 @@
 
                 },
                 loading: false,
-                addCategoryDialogVisible:false,
-                addTagDialogVisible:false,
-                newCategory:'',
+                addCategoryDialogVisible: false,
+                addTagDialogVisible: false,
+                newCategory: '',
                 newTag: '',
                 rules: {
                     title: [{validator: validateRequire}],
@@ -161,9 +183,6 @@
                     this.postForm.display_time = new Date(val)
                 }
             }
-            // articleCategory:{
-            //     return this.articleCategories
-            // }
         },
         created() {
             // fixme 如果有异常了，不应该进入编辑界面，防止对原有文章的破坏
@@ -227,13 +246,13 @@
                 const formData = new FormData();
                 formData.append('upload_file', $file)
                 const that = this;
-                uploadFile(formData).then((res)=>{
+                uploadFile(formData).then((res) => {
                     const img_url = res.data.url
                     that.$refs.editor.$img2Url(pos, img_url)
 
                 }).catch(err => {
-                          console.log(err)
-                        })
+                    console.log(err)
+                })
                 // const formData = new FormData()
                 // formData.append('upload_file', blobInfo.blob(), blobInfo.filename())
                 // axios({
@@ -273,13 +292,14 @@
                 const title = 'Edit Article'
                 document.title = `${title} - ${this.postForm.id}`
             },
-            submitForm() {
+            submitForm(status = 'draft') {
                 console.log(this.postForm)
                 this.$refs.postFormRef.validate(valid => {
                     if (valid) {
                         this.loading = true
                         if (this.isEdit) {
                             const articleId = this.$route.params && this.$route.params.id
+                            this.postForm['status'] = status
                             updateArticle(articleId, this.postForm).then((res) => {
                                 const resp = res
                                 this.$notify({
@@ -288,11 +308,11 @@
                                     type: 'success',
                                     duration: 2000
                                 })
-                                this.$router.push({name:'articleDetailPage',params:{id:resp.id}})
-                            })
-                            .catch((err) => {
-                                console.log("Error in update article",err)
+                                this.$router.push({name: 'articleDetailPage', params: {id: resp.id}})
                             })
+                                .catch((err) => {
+                                    console.log("Error in update article", err)
+                                })
                         } else {
                             createArticle(this.postForm).then((res) => {
                                 const resp = res
@@ -302,11 +322,11 @@
                                     type: 'success',
                                     duration: 2000
                                 })
-                                this.$router.push({name:'articleDetailPage',params:{id:resp.id}})
-                            })
-                            .catch((err) => {
-                                console.log("Error in create article",err)
+                                this.$router.push({name: 'articleDetailPage', params: {id: resp.id}})
                             })
+                                .catch((err) => {
+                                    console.log("Error in create article", err)
+                                })
                         }
                         this.loading = false
                     } else {
@@ -316,7 +336,7 @@
                 })
             },
             submitToCreateCategory() {
-                const data={title:this.newCategory}
+                const data = {title: this.newCategory}
                 createCategory(data).then(() => {
                     this.addCategoryDialogVisible = false
                     this.fetchArticleCategory()
@@ -328,25 +348,25 @@
                     })
                 })
                     .catch((err) => {
-                        console.log("Error: ",err)
+                        console.log("Error: ", err)
                     })
             },
-        submitToCreateTag() {
-            const data={title:this.newTag}
-            createTag(data).then(() => {
-                this.addTagDialogVisible = false
-                this.fetchArticleTag()
-                this.$notify({
-                    title: 'Success',
-                    message: 'Create Successfully',
-                    type: 'success',
-                    duration: 2000
-                })
-            })
-                .catch((err) => {
-                    console.log("Error: ",err)
+            submitToCreateTag() {
+                const data = {title: this.newTag}
+                createTag(data).then(() => {
+                    this.addTagDialogVisible = false
+                    this.fetchArticleTag()
+                    this.$notify({
+                        title: 'Success',
+                        message: 'Create Successfully',
+                        type: 'success',
+                        duration: 2000
+                    })
                 })
-        }
+                    .catch((err) => {
+                        console.log("Error: ", err)
+                    })
+            }
         }
     }
 </script>
@@ -384,6 +404,10 @@
         }
     }
 
+    .mar-left {
+        margin-left: 10px;
+    }
+
     .article-textarea ::v-deep {
         textarea {
             padding-right: 40px;
diff --git a/src/views/article/detail.vue b/src/views/article/detail.vue
index 8fb2d30..22a4d92 100644
--- a/src/views/article/detail.vue
+++ b/src/views/article/detail.vue
@@ -26,7 +26,7 @@
                             @{{articleDetail.created_time }} {{ articleDetail.author }},views:{{articleDetail.views_count}} likes:{{articleDetail.likes_count}} comments:0
                             <el-button icon="DeleteFilled" text/>
                             <router-link
-                                    :to="'/article/edit/'+ articleDetail.id"
+                                    :to="'/article/edit/'+ articleId"
                             ><el-button
                                     icon="EditPen"
                                     text
@@ -57,7 +57,6 @@
 
 <script>
     import {getArticleDetail} from '@/api/article'
-    // import SvgIcon from '@/components/SvgIcon/index'
 
     import LikeFavorite from "@/views/article/components/LikeFavorite"
     import CategoryAndTag from "@/views/article/components/CategoryAndTag"
@@ -90,10 +89,6 @@
                     const data = response
                     data['toc'] = response['toc'].replaceAll('<ul', '<ul class=article-toc')
                     this.articleDetail = data
-                    // just for test
-                    // this.postForm.title += `   Article Id:${this.postForm.id}`
-                    // this.postForm.content_short += `   Article Id:${this.postForm.id}`
-
                     // set tagsview title
                     // this.setTagsViewTitle()
                     //
diff --git a/src/views/article/list.vue b/src/views/article/list.vue
index 2e6cf38..b0ccc6c 100644
--- a/src/views/article/list.vue
+++ b/src/views/article/list.vue
@@ -1,50 +1,62 @@
 <template>
-    <div style="background-color: #f7f5f5">
-        <div v-for="article in articleList" :key="article.id" >
-            <el-row style="background-color: white">
-                <el-col :span="14" :offset="5" class="article-main" >
-                    <div class="article-title">
-                        <router-link
-                                :to="'/article/detail/'+ article.id"
-                                class="article-title"
-                        >{{article.title}}
-                        </router-link>
-                    </div>
-                    <el-divider border-style="dotted" style="margin: 1px 0;"/>
-
-                    <div class="article-desc">
-                        <span>
-                            @{{article.created_time }} {{ article.author }}, views:{{article.views_count}} likes:{{article.likes_count}} comments:{{article.comments_count}}
-                            <el-button icon="DeleteFilled" text/>
+    <div class="content-main">
+        <el-row style="background-color: white;">
+            <el-col :span="14" :offset="5">
+                <div v-for="article in articleList" :key="article.id">
+                    <div class="article-main">
+                        <div class="article-title">
                             <router-link
-                                    :to="'/article/edit/'+ article.id"
+                                    :to="'/article/detail/'+ article.id"
                                     class="article-title"
-                            ><el-button
-                                    icon="EditPen"
-                                    text
-                                    />
-                        </router-link>
-                        </span>
-
+                            >{{article.title}}
+                            </router-link>
+                        </div>
+
+                        <el-divider border-style="dotted" style="margin: 1px 0;"/>
+
+                        <div class="article-desc">
+                            <span>
+                                @{{article.created_time }} {{ article.author }}, views:{{article.views_count}} likes:{{article.likes_count}} comments:{{article.comments_count}}
+                                <el-button v-if=isAdmin icon="DeleteFilled" text/>
+                                <router-link
+                                        v-if="isAdmin"
+                                        :to="'/article/edit/'+ article.id"
+                                        class="article-title"
+                                ><el-button
+                                        icon="EditPen"
+                                        text/>
+                                </router-link>
+                            </span>
+                        </div>
                     </div>
-                </el-col>
-            </el-row>
-            <!--        <el-divider style="margin: 10px 0;"/>-->
-        </div>
-    </div>
+                </div>
+                <!--  <el-divider style="margin: 1px 0;"/>-->
+            </el-col>
+        </el-row>
+
+        <pagi-nation
+                :total="total"
+                :background="true"
+                v-model:page="listQuery.page"
+                v-model:limit="listQuery.pagesize"
+                @pagination="getList"
+        />
 
+    </div>
 
 </template>
 
 <script>
     import {getArticleList} from '@/api/article'
+    import PaginNation from '@/components/PagiNation'
+    import {mapGetters} from "vuex";
     // import SvgIcon from '@/components/SvgIcon/index'
 
     export default {
         name: 'ArticleList',
-        // components:{
-        //     SvgIcon
-        // },
+        components: {
+            PagiNation: PaginNation,
+        },
         filters: {
             statusFilter(status) {
                 const statusMap = {
@@ -58,28 +70,41 @@
         data() {
             return {
                 articleList: null,
-                articleCount: 0,
                 listLoading: true,
+                total: 0,
                 listQuery: {
                     page: 1,
-                    pagesize: 20
+                    pagesize: 10
                 }
             }
         },
         created() {
             this.getList()
         },
+        computed: {
+            ...mapGetters([
+                'isLogin',
+                'isAdmin',
+            ])
+        },
         methods: {
             getList() {
-                this.listLoading = true
-                Object.assign(this.listQuery,this.$route.query)
+                // this.listLoading = true
+                // fixme 这里在前端的url界面没有显示 ?page=1&pagesize=10,并且这里如果地址栏如果人工输入，会导致pagination 显示错乱
+                Object.assign(this.listQuery, this.$route.query)
                 getArticleList(this.listQuery).then(response => {
                     this.articleList = response.data
-                    this.articleCount = response.count
+                    this.total = response.count
+                    this.listLoading = false
+                }).catch(() => {
+                    // console.info('error in page')
+                    // console.info(this.$route)
+                    // this.$router.push({path:this.$route.path})
                     this.listLoading = false
                 })
             }
 
+
         }
     }
 </script>
@@ -96,7 +121,7 @@
     }
 
     .article-main {
-        margin-top:10px;
+        margin-top: 10px;
         box-shadow: 1px 2px 3px #ddd;
         border: 1px solid #ddd;
         border-radius: 5px;
@@ -112,6 +137,17 @@
 
     }
 
+    .content-main {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        background-color: #f7f5f5;
+        flex-direction: column;
+        justify-content: space-between;
+        box-sizing: border-box;
+
+    }
+
     .article-body {
         padding: 10px
     }