diff --git a/src/views/layout/components/main/admin/message.vue b/src/views/layout/components/main/admin/message.vue
new file mode 100644
index 0000000..40bccbc
--- /dev/null
+++ b/src/views/layout/components/main/admin/message.vue
@@ -0,0 +1,112 @@
+<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.message"
+                  type="textarea"
+                  placeholder="请输入公告内容"
+                  :rows="5"
+                />
+              </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: ''
+      },
+      loading: false
+    }
+  },
+  computed: {
+    // 从 Vuex 中获取用户 ID 列表
+    idArr () {
+      return this.$store.state.app.toMessageIdArr
+    }
+  },
+  methods: {
+    async pubMessage () {
+      // 校验内容
+      if (!this.form.message.trim()) {
+        this.$message.error('请输入公告内容')
+        return
+      }
+      if (!this.form.date) {
+        this.$message.error('请选择显示截止日期')
+        return
+      }
+      if (!this.ids.length) {
+        this.$message.error('接收用户为空，请重新操作')
+        return
+      }
+
+      this.loading = true
+      try {
+        const res = await pubMessage(this.form.message, this.ids, this.form.date)
+        if (res.status === 1) {
+          this.$message.success(res.msg || '公告发布成功')
+          this.form.message = ''
+          this.form.date = ''
+        } else {
+          this.$message.error(res.msg || '公告发布失败')
+        }
+      } catch (error) {
+        this.$message.error('接口请求失败')
+        console.error(error)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.rspan {
+  float: right;
+  color: #8492a6;
+  font-size: 13px;
+}
+</style>