【类 型】：feat

【原  因】：添加新的路由页面  发布公告页面
【过  程】：
【影  响】：

# 类型 包含:
# feat：新功能（feature）
# fix：修补bug
# docs：文档（documentation）
# style： 格式（不影响代码运行的变动）
# refactor：重构（即不是新增功能，也不是修改bug的代码变动）
# test：增加测试
# chore：构建过程或辅助工具的变动

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>