diff --git a/src/api/article.js b/src/api/article.js
new file mode 100644
index 0000000..eb3d30a
--- /dev/null
+++ b/src/api/article.js
@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+export function index(params) {
+  return request({
+    method: 'get',
+    url: '/api/article/index',
+    params
+  })
+}
+
+export function show(params) {
+  return request({
+    method: 'get',
+    url: '/api/article/show',
+    params
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/article/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/article/destroy',
+    params,
+    isLoading
+  })
+}
diff --git a/src/api/articleType.js b/src/api/articleType.js
new file mode 100644
index 0000000..7cd6726
--- /dev/null
+++ b/src/api/articleType.js
@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+export function index(params) {
+  return request({
+    method: 'get',
+    url: '/api/article-type/index',
+    params
+  })
+}
+
+export function show(params) {
+  return request({
+    method: 'get',
+    url: '/api/article-type/show',
+    params
+  })
+}
+
+export function save(data, isLoading = true) {
+  return request({
+    method: 'post',
+    url: '/api/article-type/save',
+    data,
+    isLoading
+  })
+}
+
+export function destroy(params, isLoading = true) {
+  return request({
+    method: 'get',
+    url: '/api/article-type/destroy',
+    params,
+    isLoading
+  })
+}
diff --git a/src/api/config.js b/src/api/config.js
index 9d8eaf3..695d7b9 100644
--- a/src/api/config.js
+++ b/src/api/config.js
@@ -8,11 +8,12 @@ export function index(params) {
   })
 }
 
-export function show(params) {
+export function show(params,isLoading = true) {
   return request({
     method: 'get',
     url: '/api/oa/config/show',
-    params
+    params,
+    isLoading
   })
 }
 
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 8ea5768..e71bf5c 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -10,7 +10,7 @@
 <script>
 import Cookies from 'js-cookie'
 import chalkCss from '@/assets/chalk.js'
-const version = require('element-ui/package.json').version // element-ui version from node_modules
+// const version = require('element-ui/package.json').version // element-ui version from node_modules
 const ORIGINAL_THEME = '#409EFF' // default color
 let index = 0
 export default {
@@ -169,6 +169,9 @@ export default {
 </script>
 
 <style>
+:root {
+  --theme-color: #409EFF;
+}
 .theme-message,
 .theme-picker-dropdown {
   z-index: 99999 !important;
diff --git a/src/icons/svg/address-book.svg b/src/icons/svg/address-book.svg
new file mode 100644
index 0000000..38292ee
--- /dev/null
+++ b/src/icons/svg/address-book.svg
@@ -0,0 +1 @@
+<svg t="1730339556729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4489" width="200" height="200"><path d="M583.744 53.312c78.4 0 140.544 0 189.12 6.528 50.048 6.784 90.496 20.928 122.432 52.864 32 31.936 46.08 72.384 52.864 122.432 6.528 48.64 6.528 110.72 6.528 189.12v175.488c0 78.4 0 140.544-6.528 189.12-6.72 50.048-20.928 90.496-52.864 122.432-31.936 32-72.384 46.08-122.432 52.864-48.64 6.528-110.72 6.528-189.12 6.528H514.944c-78.4 0-140.544 0-189.12-6.528-50.048-6.72-90.56-20.928-122.432-52.864-27.2-27.136-41.472-60.48-49.28-100.608H112a42.688 42.688 0 0 1 0-85.376h33.472a3264.448 3264.448 0 0 1-1.472-125.568v-45.056h-32a42.688 42.688 0 1 1 0-85.376h32V424.32c0-47.68 0-89.344 1.472-125.568H112a42.688 42.688 0 0 1 0-85.376h42.112c7.808-40.128 22.08-73.472 49.28-100.608 31.872-31.936 72.384-46.08 122.432-52.864C374.4 53.312 436.48 53.312 514.944 53.312H583.68zM560 266.688a117.312 117.312 0 1 0 0 234.624 117.312 117.312 0 0 0 0-234.624z m120.64 310.976a233.024 233.024 0 0 0-241.28 0c-13.248 7.616-43.328 24.96-59.136 40.832-10.048 10.048-20.672 24.32-22.592 42.368-2.048 19.392 6.4 37.184 21.824 52.224 23.36 22.784 54.592 44.224 96.96 44.224h167.168c42.432 0 73.6-21.44 96.96-44.16 15.424-15.104 23.872-32.896 21.824-52.288-1.92-18.112-12.544-32.32-22.528-42.368-15.872-15.872-45.952-33.28-59.2-40.832z" p-id="4490"></path></svg>
diff --git a/src/utils/index.js b/src/utils/index.js
index fa425c6..c891000 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,7 +1,7 @@
 /**
  * Created by PanJiaChen on 16/11/18.
  */
-
+import { Message } from 'element-ui'
 /**
  * Parse the time to string
  * @param {(Object|string|number)} time
@@ -137,7 +137,7 @@ export function deepCopy(data) {
       case '[object Date]':
         return new Date(data.getTime())
       case '[object Array]':
-        let arr = []
+        const arr = []
         for (let i = 0; i < data.length; i++) {
           arr[i] = deepCopy(data[i])
         }
@@ -145,7 +145,7 @@ export function deepCopy(data) {
 
       // js自带对象或用户自定义类实例
       case '[object Object]':
-        let obj = {}
+        const obj = {}
         for (const key in data) {
           // 会遍历原型链上的属性方法，可以用hasOwnProperty来控制 （obj.hasOwnProperty(prop)
           obj[key] = deepCopy(data[key])
@@ -192,3 +192,15 @@ export function parseMoney(money, precision = 2) {
   if (isNaN(Number(money))) return Number(0).toFixed(precision)
   return Number(money).toFixed(precision).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
 }
+
+export function copy2(value) {
+  const input = document.createElement('input')
+  input.setAttribute('readonly', 'readonly') // 设置为只读, 防止在 ios 下拉起键盘
+  input.value = value
+  document.body.appendChild(input)
+  input.setSelectionRange(0, 9999) // 防止 ios 下没有全选内容而无法复制
+  input.select()
+  document.execCommand('copy')
+  document.body.removeChild(input)
+  Message.success(`已复制：${value}`)
+}
diff --git a/src/views/system/DashboardComponents/AddressBook.vue b/src/views/system/DashboardComponents/AddressBook.vue
new file mode 100644
index 0000000..1913d99
--- /dev/null
+++ b/src/views/system/DashboardComponents/AddressBook.vue
@@ -0,0 +1,170 @@
+<template>
+  <el-card id="address-book" class="box-card" shadow="hover">
+    <div slot="header" class="clearfix">
+      <SvgIcon style="color: var(--theme-color);width: 22px;height: 22px;" icon-class="address-book" />
+      <span
+        style=" padding-left: 15px"
+      >通讯录</span>
+
+      <el-autocomplete
+        v-model="keyword"
+        value-key="name"
+        :fetch-suggestions="querySearch"
+        placeholder="关键词"
+        clearable
+        size="small"
+        :trigger-on-focus="false"
+        style="float: right; width: 46%;"
+        @change="filterList"
+      />
+    </div>
+
+    <div class="body" :style="{ 'height': tableHeight + 'px' }">
+      <ul>
+        <li v-for="item in lists" :key="item.id">
+          <div class="top">
+            <span>{{ item.name }}</span>
+            <el-tag v-if="item.department" style="margin-left: 6px;" effect="dark" size="small" type="primary">{{ item.department.name }}</el-tag>
+          </div>
+          <div v-if="item.mobile" class="bottom" @click="copy2(item.mobile)">
+            <i class="el-icon-phone" />
+            <span style="color: var(--theme-color)">{{ item.mobile }}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { copy2, debounce } from '@/utils'
+import { index } from '@/api/user'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import ElementResize from 'element-resize-detector'
+export default {
+  name: 'AddressBook',
+  components: {
+    SvgIcon
+  },
+  layout: {
+    x: 0,
+    y: 5,
+    w: 8,
+    h: 5,
+    i: 'AddressBook',
+    name: '通讯录'
+  },
+  data() {
+    return {
+      keyword: '',
+      users: [],
+      lists: [],
+      tableHeight: 200
+    }
+  },
+  computed: {},
+  mounted() {
+    this.init()
+  },
+  created() {
+    this.getUsers()
+  },
+  methods: {
+    async getUsers() {
+      try {
+        const res = await index({
+          page: 1,
+          rows: 999
+        })
+        this.users = res.data
+        this.lists = res.data
+      } catch (err) {
+        console.error(err)
+      }
+    },
+
+    copy2,
+    filterList(e) {
+      if (!e) {
+        this.lists = this.users
+        return
+      }
+      this.lists = this.users.filter(this.createFilter(e))
+    },
+    createFilter(queryString) {
+      return (user) => {
+        return (user.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }
+    },
+    querySearch(queryString, cb) {
+      const users = this.users
+      const results = queryString ? users.filter(this.createFilter(queryString)) : users
+      // 调用 callback 返回建议列表的数据
+      cb(results)
+    },
+    init() {
+      const cardDom = document.getElementById('address-book')
+      const cardTitleH = 60
+      const elementResize = ElementResize({
+        strategy: 'scroll'
+      })
+      elementResize.listenTo(cardDom, (ele) => {
+        this.tableHeight =
+          cardDom.getBoundingClientRect().height -
+          40 -
+          cardTitleH
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.body {
+  overflow: scroll;
+
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+
+    li {
+      line-height: 2;
+      padding: 8px 10px;
+      position: relative;
+
+      .top {
+        display: flex;
+        align-items: center;
+      }
+      .bottom {
+        cursor: pointer;
+      }
+
+      &::before {
+        background: repeating-linear-gradient(-45deg,#ff976a 0%,#ff976a 20%,transparent 0,transparent 25%,var(--theme-color)0,var(--theme-color)45%,transparent 0,transparent 50%);
+        content: "";
+        background-size: 80px;
+        height: 2px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/system/DashboardComponents/articles.vue b/src/views/system/DashboardComponents/articles.vue
new file mode 100644
index 0000000..2e6f8b8
--- /dev/null
+++ b/src/views/system/DashboardComponents/articles.vue
@@ -0,0 +1,129 @@
+<template>
+  <el-card id="article-card" class="box-card" shadow="hover">
+    <div slot="header" class="clearfix">
+      <SvgIcon style="color: var(--theme-color);width: 22px;height: 22px;" icon-class="address-book" />
+      <span
+        style=" padding-left: 15px"
+      >文件、新闻</span>
+    </div>
+
+    <div class="body" :style="{ 'height': tableHeight + 'px' }">
+      <ul>
+        <li v-for="item in article" :key="item.id">
+          <div class="top">
+            <div>{{ item.title }}</div>
+            <p style="color: #666;font-size: 13px;">{{ item.sub_title }}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { index } from '@/api/article'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import ElementResize from 'element-resize-detector'
+export default {
+  name: 'Articles',
+  components: {
+    SvgIcon
+  },
+  layout: {
+    x: 0,
+    y: 5,
+    w: 8,
+    h: 5,
+    i: 'Articles',
+    name: '文件、新闻'
+  },
+  data() {
+    return {
+      article: [],
+      tableHeight: 200
+    }
+  },
+  computed: {},
+  mounted() {
+    this.init()
+  },
+  created() {
+    this.getArticles()
+  },
+  methods: {
+    async getArticles() {
+      try {
+        const res = await index({
+          page: 1,
+          page_size: 999
+        })
+        this.article = res.data
+        this.lists = res.data
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    init() {
+      const cardDom = document.getElementById('article-card')
+      const cardTitleH = 60
+      const elementResize = ElementResize({
+        strategy: 'scroll'
+      })
+      elementResize.listenTo(cardDom, (ele) => {
+        this.tableHeight =
+          cardDom.getBoundingClientRect().height -
+          40 -
+          cardTitleH
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.body {
+  overflow: scroll;
+
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+
+    li {
+      line-height: 1.5;
+      padding: 8px 10px;
+      position: relative;
+
+      .top {
+      }
+      .bottom {
+        cursor: pointer;
+      }
+
+      &::before {
+        background: repeating-linear-gradient(-45deg,#ff976a 0%,#ff976a 20%,transparent 0,transparent 25%,var(--theme-color)0,var(--theme-color)45%,transparent 0,transparent 50%);
+        content: "";
+        background-size: 80px;
+        height: 2px;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/system/DashboardComponents/department.vue b/src/views/system/DashboardComponents/department.vue
index 5d6c56a..c6370e0 100644
--- a/src/views/system/DashboardComponents/department.vue
+++ b/src/views/system/DashboardComponents/department.vue
@@ -38,7 +38,7 @@ import ElementResize from 'element-resize-detector'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 
 export default {
-  name: 'Card3',
+  name: 'Department',
   components: {
     SvgIcon
   },
@@ -47,7 +47,7 @@ export default {
     y: 5,
     w: 8,
     h: 5,
-    i: '3',
+    i: 'Department',
     name: '科室执行情况'
   },
   data() {
diff --git a/src/views/system/DashboardComponents/quickMenu.vue b/src/views/system/DashboardComponents/quickMenu.vue
index efe3ef8..2f74cf1 100644
--- a/src/views/system/DashboardComponents/quickMenu.vue
+++ b/src/views/system/DashboardComponents/quickMenu.vue
@@ -47,7 +47,7 @@
               :multiple="false"
               no-children-text="无子菜单"
               :normalizer="node => ({
-                id: node.path,
+                id: /^#+/g.test(node.path) ? node.id : node.path,
                 key: node.id,
                 label: node.name,
                 children: node.children,
@@ -86,7 +86,7 @@ import { deepCopy } from '@/utils'
 import { permissions } from '@/api/me'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 export default {
-  name: 'Card7',
+  name: 'QuickMenu',
   components: {
     SvgIcon
   },
@@ -95,7 +95,7 @@ export default {
     y: 0,
     w: 4,
     h: 5,
-    i: '8',
+    i: 'QuickMenu',
     name: '快捷菜单'
   },
   data() {
diff --git a/src/views/system/DashboardComponents/toDo.vue b/src/views/system/DashboardComponents/toDo.vue
index e766e77..3b397aa 100644
--- a/src/views/system/DashboardComponents/toDo.vue
+++ b/src/views/system/DashboardComponents/toDo.vue
@@ -73,7 +73,7 @@ import axios from 'axios'
 import { getToken } from '@/utils/auth'
 
 export default {
-  name: 'Card2',
+  name: 'ToDo',
   components: {
     SvgIcon
   },
@@ -82,7 +82,7 @@ export default {
     y: 0,
     w: 6,
     h: 4,
-    i: '2',
+    i: 'ToDo',
     name: '待办事项'
   },
   data() {
@@ -159,7 +159,7 @@ export default {
 
     init() {
       const cardDom = document.getElementById('todo-card')
-      const cardTitleH = 58
+      const cardTitleH = 59
       const elementResize = ElementResize({
         strategy: 'scroll'
       })
diff --git a/src/views/system/DashboardComponents/total.vue b/src/views/system/DashboardComponents/total.vue
index 6c6cca3..541cd84 100644
--- a/src/views/system/DashboardComponents/total.vue
+++ b/src/views/system/DashboardComponents/total.vue
@@ -7,6 +7,7 @@
       >预算总体执行情况</span>
       <el-date-picker
         v-model="year"
+        size="small"
         placeholder="选择所属年份"
         placement="bottom"
         style="width: 130px;margin-left: auto;"
@@ -65,7 +66,7 @@ import axios from 'axios'
 import { getToken } from '@/utils/auth'
 
 export default {
-  name: 'Card1',
+  name: 'Total',
   components: {
     SvgIcon,
     MyProgress
@@ -75,7 +76,7 @@ export default {
     y: 0,
     w: 4,
     h: 5,
-    i: '1',
+    i: 'Total',
     name: '预算统计'
   },
   data() {
@@ -101,7 +102,7 @@ export default {
     parseMoney,
     init() {
       const cardDom = this.$el
-      const cardTitleH = 58
+      const cardTitleH = 69
       const elementResize = ElementResize({
         strategy: 'scroll'
       })
diff --git a/src/views/system/DashboardComponents/type.vue b/src/views/system/DashboardComponents/type.vue
index 1aec85c..aafa373 100644
--- a/src/views/system/DashboardComponents/type.vue
+++ b/src/views/system/DashboardComponents/type.vue
@@ -7,6 +7,7 @@
       >预算类型执行情况</span>
       <el-date-picker
         v-model="year"
+        size="small"
         placeholder="选择所属年份"
         placement="bottom"
         style="width: 130px;margin-left: auto;"
@@ -63,7 +64,7 @@ import axios from 'axios'
 import { getToken } from '@/utils/auth'
 
 export default {
-  name: 'Card3',
+  name: 'Type',
   components: {
     SvgIcon
   },
@@ -72,7 +73,7 @@ export default {
     y: 5,
     w: 6,
     h: 4,
-    i: '5',
+    i: 'Type',
     name: '预算类型执行情况'
   },
   data() {
@@ -144,7 +145,7 @@ export default {
   methods: {
     init() {
       const cardDom = document.getElementById('type-card')
-      const cardTitleH = 58
+      const cardTitleH = 69
       const elementResize = ElementResize({
         strategy: 'scroll'
       })
diff --git a/src/views/system/article.vue b/src/views/system/article.vue
new file mode 100644
index 0000000..c7fa3f0
--- /dev/null
+++ b/src/views/system/article.vue
@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <card-container>
+      <vxe-toolbar>
+        <template #buttons>
+          <el-button icon="el-icon-menu" type="primary" size="small" @click="isShowDraw = true">文章分类</el-button>
+          <el-button icon="el-icon-plus" type="primary" size="small" @click="isShowAdd = true">新增</el-button>
+          <el-button icon="el-icon-search" type="primary" plain size="small" @click="getList">搜索</el-button>
+        </template>
+      </vxe-toolbar>
+      <vxe-table
+        ref="table"
+        stripe
+        style="margin-top: 10px;"
+        :loading="loading"
+        keep-source
+        show-overflow
+        :column-config="{ resizable: true }"
+        :edit-rules="validRules"
+        :edit-config="{ trigger: 'manual', mode: 'row', showStatus: true, isHover: true, autoClear: false }"
+        :align="allAlign"
+        :data="tableData"
+      >
+        <vxe-column type="seq" width="58" align="center" />
+        <vxe-column field="title" width="170" title="标题" />
+        <vxe-column field="sub_title" width="150" title="简介" />
+        <vxe-column field="content" min-width="180" title="内容" />
+        <vxe-column field="operate" title="操作" min-width="220">
+          <template #default="{ row }">
+            <template>
+              <el-button size="small" type="warning" @click="editRowEvent(row)">编辑</el-button>
+              <el-button size="small" type="danger" @click="destroyRowEvent(row)">删除</el-button>
+            </template>
+          </template>
+        </vxe-column>
+      </vxe-table>
+
+      <el-pagination
+        style="margin-top: 10px;"
+        :current-page="select.page"
+        :page-sizes="[20, 30, 40, 50]"
+        :page-size="select.page_size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        @size-change="e => {
+          select.page_size = e;
+          select.page = 1;
+          getList();
+        }"
+        @current-change="e => {
+          select.page = e;
+          getList();
+        }"
+      />
+    </card-container>
+    <add-article ref="AddArticle" :is-show.sync="isShowAdd" @refresh="getList" />
+    <article-type ref="ArticleType" :is-show.sync="isShowDraw" />
+  </div>
+</template>
+
+<script>
+import { deepCopy } from '@/utils'
+import { index, save, destroy } from '@/api/article'
+import AddArticle from './components/AddArticle.vue'
+import ArticleType from './components/ArticleType.vue'
+export default {
+  components: {
+    AddArticle,
+    ArticleType
+  },
+  data() {
+    return {
+      isShowDraw: false,
+      isShowAdd: false,
+
+      loading: false,
+      select: {
+        page: 1,
+        page_size: 20
+      },
+      total: 0,
+      allAlign: null,
+      tableData: [],
+      validRules: {},
+      form: {
+        id: '',
+        name: '',
+        key: '',
+        value: '',
+        mysort: ''
+      }
+    }
+  },
+  computed: {
+    isActiveStatus() {
+      return function(row) {
+        if (this.$refs['table']) {
+          return this.$refs['table'].isEditByRow(row)
+        }
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    editRowEvent(row) {
+      this.$refs['AddArticle'].form.id = row.id
+      this.isShowAdd = true
+      // if (this.$refs['table']) {
+      //   this.$refs['table'].setEditRow(row)
+      // }
+    },
+    cancelRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].clearEdit().then(() => {
+          // 还原行数据
+          this.$refs['table'].revertData(row)
+        })
+      }
+    },
+
+    async getList() {
+      this.loading = true
+      try {
+        const res = await index(this.select)
+        this.tableData = res.data
+        this.total = res.total
+        this.loading = false
+      } catch (err) {
+        console.error(err)
+        this.loading = false
+      }
+    },
+
+    async saveRowEvent(row) {
+      try {
+        const errMap = await this.$refs['table'].validate()
+        if (errMap) {
+          throw new Error(errMap)
+        }
+        await this.$confirm('确认保存？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        await this.$refs['table'].clearEdit()
+        const form = deepCopy(this.form)
+        for (const key in form) {
+          form[key] = row[key]
+        }
+        if (!form.password) {
+          delete form.password
+        }
+        this.loading = true
+        await save(form)
+        await this.getList()
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    },
+    async destroyRowEvent(row) {
+      try {
+        await this.$confirm('确认删除？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        this.loading = true
+        if (row.id) {
+          await destroy({
+            id: row.id
+          })
+          await this.getList()
+        } else {
+          console.log(row)
+          this.tableData.splice(this.tableData.findIndex(i => i._X_ROW_KEY === row._X_ROW_KEY), 1)
+        }
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.total {
+  color: #666;
+  text-align: right;
+  line-height: 3;
+}
+::v-deep .el-tag + .el-tag {
+  margin-left: 4px;
+}
+</style>
diff --git a/src/views/system/components/AddArticle.vue b/src/views/system/components/AddArticle.vue
new file mode 100644
index 0000000..d05b870
--- /dev/null
+++ b/src/views/system/components/AddArticle.vue
@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <vxe-modal
+      :value="isShow"
+      show-footer
+      title="文章管理"
+      show-confirm-button
+      :width="820"
+      :height="600"
+      esc-closable
+      :fullscreen="$store.getters.device === 'mobile'"
+      @input="e => $emit('update:isShow',e)"
+    >
+      <el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
+        <el-form-item label="名字" prop="title">
+          <el-input v-model="form.title" />
+        </el-form-item>
+        <el-form-item label="简介" prop="sub_title">
+          <el-input v-model="form.sub_title" />
+        </el-form-item>
+        <el-form-item label="内容" prop="content">
+          <el-input v-model="form.content" type="textarea" :autosize="{ minRows: 2 }" />
+        </el-form-item>
+        <el-form-item label="分类" prop="article_type_id">
+          <Treeselect
+            v-model="form.article_type_id"
+            :options="types"
+            :multiple="false"
+            no-children-text="无子分类"
+            :normalizer="node => ({
+              id: node.id,
+              key: node.id,
+              label: node.name,
+              children: node.children,
+              isDefaultExpanded: true
+            })"
+          />        </el-form-item>
+        <el-form-item label="附件上传">
+          <el-upload
+            :action="action"
+            :headers="{
+              Authorization: `Bearer ${getToken()}`,
+            }"
+            :before-upload="beforeUpload"
+            :on-success="uploadSuccess"
+            :on-remove="removeHandle"
+            multiple
+            :file-list="fileList"
+          >
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">上传文件不超过10Mb</div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
+      </template>
+    </vxe-modal>
+  </div>
+</template>
+
+<script>
+import { index } from '@/api/articleType'
+import { save, show } from '@/api/article'
+import { getToken } from '@/utils/auth'
+import { deepCopy } from '@/utils'
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      fileList: [],
+      action: process.env.VUE_APP_UPLOAD_API,
+      types: [],
+
+      loading: false,
+      form: {
+        id: '',
+        title: '',
+        content: '',
+        sub_title: '',
+        article_type_id: '',
+        file_ids: []
+      },
+      cForm: {
+        id: '',
+        title: '',
+        content: '',
+        sub_title: '',
+        article_type_id: '',
+        file_ids: []
+      },
+      rules: {}
+    }
+  },
+  computed: {},
+  watch: {
+    isShow(newVal) {
+      if (newVal) {
+        this.getType()
+        if (this.form.id) {
+          this.getDetail()
+        }
+      } else {
+        this.fileList = []
+        this.form = deepCopy(this.cForm)
+      }
+    }
+  },
+  methods: {
+    getToken,
+    beforeUpload(file) {
+      const isLt10M = file.size / 1024 / 1024 < 10
+      if (!isLt10M) {
+        this.$message.error('上传文件大小不能超过 10MB!')
+      }
+      return isLt10M
+    },
+    uploadSuccess(response, file, fileList) {
+      this.fileList = fileList
+    },
+    removeHandle(file, fileList) {
+      this.fileList = fileList
+    },
+
+    submit() {
+      this.$refs['elForm'].validate(async valid => {
+        if (valid) {
+          this.loading = true
+          try {
+            this.form.file_ids = this.fileList.map(i => i.response?.data?.id)
+            await save(this.form)
+            this.$message.success('新增成功')
+            this.$emit('refresh')
+            this.$emit('update:isShow', false)
+            this.loading = false
+            this.$refs['elForm'].resetFields()
+          } catch (err) {
+            this.loading = false
+          }
+        }
+      })
+    },
+
+    async getDetail() {
+      try {
+        const res = await show({ id: this.form.id }, true)
+        console.log(res)
+        for (const key in this.form) {
+          this.form[key] = res[key]
+        }
+        this.fileList = res.files.map(i => ({
+          response: {
+            data: i
+          },
+          url: i.url,
+          name: i.original_name
+        }))
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    async getType() {
+      try {
+        const res = await index({
+          is_tree: 1
+        })
+        this.types = res
+      } catch (err) {
+        console.error(err)
+        this.types = []
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/system/components/ArticleType.vue b/src/views/system/components/ArticleType.vue
new file mode 100644
index 0000000..6935c2b
--- /dev/null
+++ b/src/views/system/components/ArticleType.vue
@@ -0,0 +1,204 @@
+<template>
+  <div>
+    <el-drawer
+      :size="$store.getters.device === 'desktop' ? '64%' : '100%'"
+      title="文章分类"
+      :visible="isShow"
+      direction="rtl"
+      @close="$emit('update:isShow', false)"
+    >
+      <div style="padding: 0 10px;">
+        <vxe-toolbar>
+          <template #buttons>
+            <el-button icon="el-icon-plus" type="primary" size="small" @click="insertRow()">新增</el-button>
+            <el-button icon="el-icon-search" type="primary" plain size="small" @click="getList">搜索</el-button>
+          </template>
+        </vxe-toolbar>
+        <vxe-table
+          ref="table"
+          style="margin-top: 10px;"
+          :loading="loading"
+          keep-source
+          show-overflow
+          :row-config="{ keyField: 'rid' }"
+          :column-config="{ resizable: true }"
+          :edit-rules="validRules"
+          :tree-config="{ transform: true, rowField: 'id', parentField: 'pid' }"
+          :edit-config="{ trigger: 'manual', mode: 'row', showStatus: true, isHover: true, autoClear: false }"
+          :align="allAlign"
+          :data="tableData"
+        >
+          <vxe-column type="seq" width="58" align="center" />
+          <vxe-column tree-node field="name" width="170" title="名称" :edit-render="{ name: 'input', attrs: { type: 'text' } }" />
+          <!--          <vxe-column field="sub_title" width="150" title="简介" :edit-render="{ name: 'input', attrs: { type: 'text' } }" />-->
+          <vxe-column field="operate" title="操作" min-width="220">
+            <template #default="{ row }">
+              <template v-if="isActiveStatus(row)">
+                <el-button size="small" type="primary" @click="saveRowEvent(row)">保存</el-button>
+                <el-button size="small" type="primary" plain @click="cancelRowEvent(row)">取消</el-button>
+              </template>
+              <template v-else>
+                <el-button size="small" type="primary" @click="insertRow(row)">下一级</el-button>
+                <el-button size="small" type="warning" @click="editRowEvent(row)">编辑</el-button>
+                <el-button size="small" type="danger" @click="destroyRowEvent(row)">删除</el-button>
+              </template>
+            </template>
+          </vxe-column>
+        </vxe-table>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { destroy, index, save } from '@/api/articleType'
+import { deepCopy } from '@/utils'
+
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      select: {
+        page: 1,
+        page_size: 9999,
+        is_tree: 0
+      },
+      total: 0,
+      allAlign: null,
+      tableData: [],
+      validRules: {},
+      form: {
+        id: '',
+        pid: 0,
+        name: ''
+      }
+    }
+  },
+  computed: {
+    isActiveStatus() {
+      return function(row) {
+        if (this.$refs['table']) {
+          return this.$refs['table'].isEditByRow(row)
+        }
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async insertRow(row) {
+      if (this.$refs['table']) {
+        const cForm = deepCopy(this.form)
+        cForm.pid = row ? row.id : 0
+        let newRow
+        if (row) {
+          await this.$refs['table'].setTreeExpand(row, true)
+          const temp = await this.$refs['table'].insert(cForm)
+          newRow = temp.row
+        } else {
+          const temp = await this.$refs['table'].insertAt(cForm, row)
+          newRow = temp.row
+        }
+        await this.$refs['table'].setEditRow(newRow)
+      }
+    },
+    editRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].setEditRow(row)
+      }
+    },
+    cancelRowEvent(row) {
+      if (this.$refs['table']) {
+        this.$refs['table'].clearEdit().then(() => {
+          // 还原行数据
+          if (row.id) {
+            this.$refs['table'].revertData(row)
+          } else {
+            this.$refs['table'].remove(row)
+          }
+        })
+      }
+    },
+
+    async getList() {
+      this.loading = true
+      try {
+        const res = await index(this.select)
+        this.tableData = res.data
+        this.loading = false
+        this.$nextTick(() => {
+          if (this.$refs['table']) {
+            this.$refs['table'].setAllTreeExpand(true)
+          }
+        })
+      } catch (err) {
+        console.error(err)
+        this.loading = false
+      }
+    },
+
+    async saveRowEvent(row) {
+      try {
+        const errMap = await this.$refs['table'].validate()
+        if (errMap) {
+          throw new Error(errMap)
+        }
+        await this.$confirm('确认保存？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        await this.$refs['table'].clearEdit()
+        const form = deepCopy(this.form)
+        for (const key in form) {
+          form[key] = row[key]
+        }
+        if (!form.password) {
+          delete form.password
+        }
+        this.loading = true
+        await save(form)
+        await this.getList()
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    },
+    async destroyRowEvent(row) {
+      if (!row.id) {
+        this.$refs['table'].remove(row)
+        return
+      }
+      try {
+        await this.$confirm('确认删除？', '提示', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消'
+        })
+        this.loading = true
+        if (row.id) {
+          await destroy({
+            id: row.id
+          })
+          await this.getList()
+        } else {
+          console.log(row)
+          this.tableData.splice(this.tableData.findIndex(i => i._X_ROW_KEY === row._X_ROW_KEY), 1)
+        }
+        this.loading = false
+      } catch (err) {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/system/menu.vue b/src/views/system/menu.vue
index 3027e2a..e0ba90e 100644
--- a/src/views/system/menu.vue
+++ b/src/views/system/menu.vue
@@ -145,6 +145,9 @@ export default {
         this.tableData = res
         console.log(this.tableData)
         this.loading = false
+        this.$nextTick(() => {
+          this.$refs['table'].setAllTreeExpand(true)
+        })
       } catch (err) {
         console.error(err)
         this.loading = false