diff --git a/src/router/index.js b/src/router/index.js
index 4d0f9a2..5ecfd1d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -415,6 +415,39 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/message',
+    component: Layout,
+    redirect: '/message/index',
+    meta: {
+      title: '公告管理',
+      icon: 'iconfont icon-guanliyuan',
+      roles: ['admin', 'editor'],
+      tapName: 'admin'
+    },
+    children: [
+      {
+        path: '/message/index',
+        component: () => import('@/views/layout/components/main/message/index'),
+        meta: {
+          title: '公告列表',
+          icon: 'iconfont icon-yonghuguanli',
+          roles: ['admin', 'editor'],
+          tapName: 'admin'
+        }
+      },
+      {
+        path: '/message/index',
+        component: () => import('@/views/layout/components/main/message/pub'),
+        meta: {
+          title: '发布公告',
+          icon: 'iconfont icon-yonghuguanli',
+          roles: ['admin', 'editor'],
+          tapName: 'admin'
+        }
+      }
+    ]
+  },
   {
     path: '/category',
     component: Layout,
diff --git a/src/views/layout/components/main/message/index.vue b/src/views/layout/components/main/message/index.vue
new file mode 100644
index 0000000..35eb449
--- /dev/null
+++ b/src/views/layout/components/main/message/index.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="app-container">
+    <!-- 组合按钮 -->
+    <el-button-group class="m-b-20 m-r-20">
+      <el-button type="primary" icon="el-icon-plus" @click="$router.replace('/admin/add')">添加</el-button>
+      <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin(countSelIdArr($refs.myTable.selection))">删除
+      </el-button>
+      <el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
+      <el-button type="success" icon="el-icon-microphone" @click="toMessagePage(countSelIdArr($refs.myTable.selection))">发布公告</el-button>
+    </el-button-group>
+    <!-- 用户select选项 -->
+    <el-button-group class="m-b-20">
+      <SelectionShopId v-model="form.shop_id" :allSel="true" />
+    </el-button-group>
+    <!-- 管理员列表 -->
+    <el-table class="w-100" ref="myTable"
+      :data="adminListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
+      <el-table-column align="center" type="selection" width="40">
+      </el-table-column>
+      <el-table-column align="center" prop="id" label="id" width="50">
+      </el-table-column>
+      <el-table-column prop="name" label="账户名" width="150" min-width="150">
+      </el-table-column>
+      <el-table-column prop="uname" label="昵称" min-width="150">
+      </el-table-column>
+      <el-table-column label="最后登录时间" width="140" min-width="120">
+        <template slot-scope="scope">
+          {{ scope.row.lasttime | parseTime('{y}-{m}-{d} {h}:{i}') }}
+        </template>
+      </el-table-column>
+      <el-table-column label="注册时间" width="100" min-width="80">
+        <template slot-scope="scope">
+          {{ scope.row.addtime | parseTime('{y}-{m}-{d}') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="controler" label="操作" width="350" min-width="350">
+        <template slot-scope="scope">
+          <el-button-group>
+            <el-button type="warning" icon="el-icon-edit"
+              @click="$router.replace(`/admin/edit/${scope.row.id}`)">编辑</el-button>
+            <el-button type="danger" icon="el-icon-delete" @click="deleteAdmin([scope.row.id])">删除</el-button>
+            <el-button type="success" icon="el-icon-microphone" @click="toMessagePage([scope.row.id])">发布公告</el-button>
+          </el-button-group>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
+      :total="adminListArr.length">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { parseTime, countSelIdArr } from '@/utils'
+import SelectionShopId from '@/components/SelectionShopId'
+
+export default {
+  name: 'Admin',
+  data () {
+    return {
+      pageSize: 8, // 每页显示记录条数
+      currentPage: 1, // 当前页
+      form: {
+        shop_id: ''
+      }
+    }
+  },
+  components: {
+    SelectionShopId
+  },
+  computed: {
+    adminList () {
+      return this.$store.state.adminList
+    },
+    /**
+     * @description: 过滤掉 不对应客户的 飞机列表
+     * @return: 飞机列表
+     */
+    adminListArr () {
+      if (this.form.shop_id !== '') {
+        return this.adminList.filter((item) => item.shop_id === this.form.shop_id)
+      } else {
+        return this.adminList
+      }
+    }
+  },
+  methods: {
+    countSelIdArr,
+    /**
+     * @description: 跳转到编辑页面
+     */
+    toEditPage () {
+      const selId = this.countSelIdArr(this.$refs.myTable.selection)
+      switch (selId.length) {
+        case 0:
+          this.$message.error('请选择一条需要编辑的记录')
+          break
+        case 1:
+          this.$router.push('/admin/edit/' + selId['0'])
+          break
+        default:
+          this.$message.error('只能选择一条记录')
+      }
+    },
+    /**
+     * @description: 跳转到发布公告页面
+     */
+    toMessagePage (selIdArr) {
+      if (selIdArr.length === 0) {
+        this.$message.error('请选择至少一个用户')
+      } else {
+        this.$store.commit('app/setToMessageIdArr', selIdArr)// 传参
+        this.$router.push('/admin/message/')
+      }
+    },
+    /**
+     * @description: 删除用户
+     */
+    deleteAdmin (idArr) {
+      this.$store.dispatch('fetchDelAdmin', idArr)
+    }
+  },
+  watch: {
+  },
+  created () {
+  },
+  filters: {
+    parseTime,
+    countSelIdArr
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+
+.el-tag {
+  i {
+    vertical-align: middle
+  }
+}
+</style>
diff --git a/src/views/layout/components/main/message/pub.vue b/src/views/layout/components/main/message/pub.vue
new file mode 100644
index 0000000..b99da05
--- /dev/null
+++ b/src/views/layout/components/main/message/pub.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="app-container">
+    <el-row class="m-t-0">
+      <el-col :span="24">
+        <el-container>
+          <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
+            <div class="l">
+              <i class="iconfont el-icon-link f-s-20"></i>
+              <font class="m-l-10 f-s-18 fb">发布公告</font>
+            </div>
+          </el-header>
+          <el-main class="border p-20">
+            <el-form label-width="120px">
+              <el-form-item label="公告标题">
+                <el-input v-model="form.tit" placeholder="请输入公告标题" maxlength="50" show-word-limit />
+              </el-form-item>
+              <el-form-item label="公告信息">
+                <el-input v-model="form.message" type="textarea" placeholder="请输入公告内容" :rows="5" maxlength="80"
+                  show-word-limit />
+              </el-form-item>
+              <el-form-item label="显示截止日期">
+                <el-date-picker v-model="form.date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
+                  value-format="timestamp" />
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="el-icon-edit" :loading="loading" @click="pubMessage()">
+                  发布公告
+                </el-button>
+              </el-form-item>
+            </el-form>
+          </el-main>
+        </el-container>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { pubMessage } from '@/utils/api/table'
+
+export default {
+  name: 'message',
+  data () {
+    return {
+      form: {
+        date: '',
+        message: '',
+        tit: ''
+      },
+      loading: false
+    }
+  },
+  computed: {
+    // 从 Vuex 中获取用户 ID 列表
+    idArr () {
+      return this.$store.state.app.toMessageIdArr
+    }
+  },
+  created () {
+  },
+  methods: {
+    async pubMessage () {
+      // 判断 idArr 是否为空
+      if (!this.idArr || this.idArr.length === 0) {
+        this.$message.warning('接收用户为空，请重新操作')
+        this.$router.push('/admin/index')
+        return
+      }
+      if (!this.form.tit) {
+        this.$message.error('请输入公告标题')
+        return
+      }
+      if (!this.form.message) {
+        this.$message.error('请输入公告内容')
+        return
+      }
+      if (!this.form.date) {
+        this.$message.error('请选择截止日期')
+        return
+      }
+
+      const endTime = Math.floor(new Date(this.form.date).setHours(23, 59, 59, 999) / 1000)// 取日历选择的 当天最后一秒
+
+      const res = await pubMessage(this.form.tit, this.form.message, this.idArr, endTime)
+
+      if (res.data.status === 1) {
+        this.$message.success(res.data.msg)
+        this.form.message = ''
+        this.form.date = ''
+        this.form.tit = ''
+        // 跳转到首页
+        this.$router.push('/admin/index')
+      } else {
+        this.$message.error(res.data.msg || '公告发布失败')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.rspan {
+  float: right;
+  color: #8492a6;
+  font-size: 13px;
+}
+</style>