feat(消息模块): 新增消息的展示及增删改查

1.新增消息的头部展示
2.新增消息管理的增删改查功能
3.新增用户消息的查看

src/api/message-mgmt.ts

@@ -0,0 +1,52 @@
+import axios from 'axios';
+
+export interface MessageRecord {
+  userId?: string;
+  title?: string;
+  type?: string;
+  name?: string;
+  system?: boolean;
+  isRead?: boolean;
+  createAtBegin?: string;
+  createAtEnd?: string;
+  current: number;
+  size: number;
+}
+
+export interface MessageCreateRecord {
+  userId: string[];
+  type: string;
+  email: string;
+  sms: string;
+  html: string;
+  title: string;
+  content: string;
+  attachmentIds?: string[];
+}
+
+
+
+// 查看详情
+export function queryMessage(userId: number, messageId: number) {
+  return axios.get(`/api/rest/message/${userId}/${messageId}`);
+}
+// 分页查询
+export function queryMessageList(data: MessageRecord) {
+  return axios({
+    url: '/api/rest/message',
+    method: 'get',
+    params: data,
+  });
+}
+// 创建消息
+export function createMessage(data: MessageCreateRecord) {
+  return axios.post('/api/rest/message', data);
+}
+// 获取消息推送方式
+export function getMessageTypes() {
+  return axios.get('/api/rest/message/setting');
+}
+// 设置消息推送方式
+export function setMessageTypes(data: string[]) {
+  return axios.patch('/api/rest/message/setting', data);
+}

src/api/messages.ts

@@ -0,0 +1,82 @@
+import axios from 'axios';
+
+export interface Attachment {
+  id: string;
+  fileName: string;
+  mimeType: string;
+  uploadTime: string;
+  url: string;
+}
+
+export interface MessagesList {
+  id?: number;
+  userId?: number | null;
+  user?: string | null;
+  messageId?: number | null;
+  message?: string | null;
+  isRead?: boolean | null;
+  readTime?: string | null;
+  username?: string | null;
+  name?: string | null;
+  avatar?: string | null;
+  address?: string | null;
+  type?: string;
+  system?: boolean;
+  email?: boolean;
+  sms?: boolean;
+  html?: boolean;
+  title?: string;
+  content?: string;
+  remark?: string;
+  createTime?: string;
+  createBy?: string;
+  updateTime?: string;
+  updateBy?: string;
+  attachments?: Attachment[];
+}
+
+export interface MessagesRecord {
+  userId?: string;
+  title?: string;
+  type?: string;
+  name?: string;
+  system?: number[];
+  isRead?: boolean;
+  createAtBegin?: string;
+  createAtEnd?: string;
+  current: number;
+  size: number;
+}
+
+export interface MessageStatus {
+  ids: string[];
+}
+
+export type MessageListType = MessagesList[];
+
+// 查看详情
+export function queryMessage(id: number) {
+  return axios.get(`/api/rest/message/self/${id}`);
+}
+// 分页查询
+export function queryMessagesList(data: MessagesRecord) {
+  return axios({
+    url: '/api/rest/message/self',
+    method: 'get',
+    params: data,
+  });
+}
+// 未读消息数量
+export function queryMessagesCount() {
+  return axios.get('/api/rest/message/count-unread');
+}
+
+// 已读消息数量
+export function queryMessagesReadCount() {
+  return axios.get('/api/rest/message/acknowledge');
+}
+
+// 批量设置消息已读
+export function setMessageStatus(data: MessageStatus) {
+  return axios.patch<MessageListType>('/api/rest/message/read', data);
+}

src/components/dynamic-form/index.vue

@@ -0,0 +1,601 @@
+<template>
+    <a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">
+      <!-- 用户 -->
+      <a-form-item
+        v-if="userId"
+        field="userId"
+        :label="userId.label"
+        :validate-trigger="['change', 'input']"
+        :rules="[
+          { message: '请输入用戶' },
+        ]"
+      >
+        <a-input
+          v-if="userId.component==='input'"
+          v-model="formData.userIds"
+          :type="userId.type"
+          placeholder='请选择用戶'
+          :value=formData.userIds
+          @click="queryDeptTree"
+        />
+      </a-form-item>
+      <!-- 用户2 -->
+      <a-form-item
+        v-if="username"
+        field="username"
+        :label="username.label"
+        :validate-trigger="['change', 'input']"
+        :rules="[
+          { required: true, message:'用户名不能为空' },
+          {
+            match: /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/,
+            message: '请输入正确格式的用户名',
+          },
+        ]"
+      >
+        <a-input
+          v-if="username.component==='input'"
+          v-model="formData.username"
+          placeholder='请输入用户名'
+        />
+
+        <div v-else>{{ formData.username }}</div>
+      </a-form-item>
+      <!-- 邮箱 -->
+      <a-form-item
+        v-if="email"
+        field="email"
+        :label=email.label
+        :rules="[
+          {
+            required: true,
+            type: 'email',
+            message: '请输入正确格式的邮箱'
+          },
+        ]"
+        :validate-trigger="['change', 'input']"
+      >
+        <a-input
+          v-if="email.component==='input'"
+          :type="email.type"
+          v-model="formData.email"
+          placeholder="请输入邮箱"
+        />
+      </a-form-item>
+      <!-- 名称 -->
+      <a-form-item
+        v-if="name"
+        field="name"
+        :label="name.label"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true }]"
+      >
+        <a-input
+          v-if="name.component==='input'"
+          v-model="formData.name"
+          :placeholder="`请输入${name.label}`"
+        />
+      </a-form-item>
+      <!-- 标题 -->
+      <a-form-item
+        v-if="title"
+        field="title"
+        :label="title.label"
+        :validate-trigger="['change', 'input']"
+        :rules="[
+          { required: true },
+        ]"
+      >
+        <a-input
+          v-if="title.component==='input'"
+          :type="title.type"
+          placeholder="请输入标题"
+        />
+      </a-form-item>
+      <!-- 备注 -->
+      <a-form-item
+        v-if="remark"
+        field="remark"
+        :label="remark.label"
+        :validate-trigger="['change', 'input']"
+      >
+        <!--        v-if="isCreate"-->
+        <a-input
+          v-if="remark.component==='input'"
+          :type="remark.type"
+          placeholder="请输入备注"
+        />
+        <a-textarea
+          v-if="remark.component==='textarea'"
+          v-model="formData.remark"
+          :show-word-limit="true"
+          placeholder="请输入备注"
+          style="height: 100px"
+        />
+      </a-form-item>
+      <!-- 手机号 -->
+      <a-form-item
+        v-if="phone"
+        field="phone"
+        :label="phone.label"
+        :rules="[
+          { required: true },
+          { match: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
+        ]"
+        :validate-trigger="['change', 'input']"
+      >
+        <a-input
+          v-if="phone.component==='input'"
+          v-model="formData.phone"
+          :type="phone.type"
+          placeholder="请输入手机号"
+        />
+      </a-form-item>
+      <!-- 密码 -->
+      <a-form-item
+        v-if="password"
+        field="password"
+        :label="password.label"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '密码不能为空' }]"
+      >
+        <a-input
+          v-if="password.component==='input'"
+          v-model="formData.password"
+          :type="password.type"
+          placeholder="请输入密码"
+        />
+      </a-form-item>
+      <!-- 昵称 -->
+      <a-form-item v-if="nickName" field="nickName" :label="nickName.label">
+        <a-input
+          v-if="nickName.component==='input'"
+          v-model="formData.nickName"
+          :type="nickName.type"
+          :placeholder="$t('user.info.nickName.placeholder')"
+        />
+      </a-form-item>
+      <!-- 地址 -->
+      <a-form-item v-if="address" field="address" :label="nickName.label">
+        <a-input
+          v-if="address.component==='input'"
+          v-model="formData.address"
+          :type="address.type"
+          :placeholder="$t('user.info.address.placeholder')"
+        />
+      </a-form-item>
+      <!-- 部门 -->
+      <a-form-item
+        v-if="deptId"
+        field="deptId"
+        :label="deptId.label"
+        :rules="[{ required: true, message: '部门不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-tree-select
+          v-if="deptId.component==='treeSelect'"
+          v-model="formData.deptId"
+          :field-names="{
+            key: 'id',
+            title: 'name',
+            children: 'children',
+          }"
+          :data="deptOptions"
+          allow-clear
+          placeholder="请选择部门"
+        />
+      </a-form-item>
+      <!-- 角色 -->
+      <a-form-item
+        v-if="roleId"
+        field="roleId"
+        :label="roleId.label"
+        :rules="[{ required: true, message: '角色不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-select
+          v-if="roleId.component==='select'"
+          v-model="formData.roleId"
+          :options="roleOptions"
+          :field-names="{
+            value: 'id',
+            label: 'name',
+          }"
+          placeholder="请选择角色"
+        />
+      </a-form-item>
+      <div style="display: flex;margin-left: 75px">
+        <!-- 短信 -->
+        <a-form-item
+          v-if="sms"
+          field="sms"
+          :label="sms.label"
+          :validate-trigger="['change', 'input']"
+        >
+          <a-switch
+            v-if="sms.component==='switch'"
+            v-model="formData.sms"
+            :checked-value="true"
+            :unchecked-value="false"
+          />
+        </a-form-item>
+        <!-- 邮件 -->
+        <a-form-item
+          v-if="email"
+          field="email"
+          :label="email.label"
+          :validate-trigger="['change', 'input']"
+        >
+          <a-switch
+            v-if="email.component==='switch'"
+            v-model="formData.email"
+            :checked-value="true"
+            :unchecked-value="false"
+          />
+        </a-form-item>
+        <!-- 置顶 -->
+        <a-form-item
+          v-if="top"
+          field="top"
+          :label="top.label"
+          :validate-trigger="['change', 'input']"
+        >
+          <a-switch
+            v-if="top.component==='switch'"
+            v-model="formData.top"
+            :checked-value="true"
+            :unchecked-value="false"
+          />
+        </a-form-item>
+      </div>
+      <!-- 附件 -->
+      <a-form-item
+        v-if="attachmentIds"
+        label='附件'
+      >
+        <!--        v-if="isCreate"-->
+        <a-upload
+          :custom-request="customRequest"
+          @before-remove="beforeRemove"
+        />
+      </a-form-item>
+      <!-- 内容 -->
+      <a-form-item v-if="richEditor" field="content" label='内容' :rules="[{ required: true}]">
+        <div style="border: 1px solid #ccc;min-width: 700px">
+          <Toolbar
+            style="border-bottom: 1px solid #ccc"
+            :editor="editorRef"
+            :default-config="toolbarConfig"
+            :mode="mode"
+            :class="{'fullscreen-toolbar': isFullScreen}"
+          />
+          <Editor
+            v-model="formData.content"
+            style="overflow-y: hidden;height: 200px;"
+            :default-config="editorConfig"
+            :mode="mode"
+            :class="{'fullscreen-editor': isFullScreen}"
+            @on-created="handleCreated"
+          />
+        </div>
+        <!--        <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />-->
+      </a-form-item>
+      <!-- 产品id -->
+      <a-form-item
+        v-if="formSystem.productId"
+        field="productId"
+        :label="formSystem.productId.label"
+        :rules="[{ required: true, message: '产品id不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-if="formSystem.productId.component==='input'"
+          v-model="formData.productId"
+          placeholder='请输入产品id'
+        />
+      </a-form-item>
+      <!-- 设备名称 -->
+      <a-form-item
+        v-if="formSystem.name"
+        field="name"
+        :label="formSystem.name.label"
+        :rules="[{ required: true, message: '设备名称不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-if="formSystem.name.component==='input'"
+          v-model="formData.name"
+          placeholder='请输入设备名称'
+        />
+      </a-form-item>
+      <!-- 硬件版本 -->
+      <a-form-item
+        v-if="formSystem.hardwareVersion"
+        field="hardwareVersion"
+        :label="formSystem.hardwareVersion.label"
+        :rules="[{ required: true, message: '硬件版本不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-if="formSystem.hardwareVersion.component==='input'"
+          v-model="formData.hardwareVersion"
+          placeholder='请输入硬件版本'
+        />
+      </a-form-item>
+      <!-- 固件版本 -->
+      <a-form-item
+        v-if="formSystem.firmwareVersion"
+        field="firmwareVersion"
+        :label="formSystem.firmwareVersion.label"
+        :rules="[{ required: true, message: '固件版本不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-if="formSystem.firmwareVersion.component==='input'"
+          v-model="formData.firmwareVersion"
+          placeholder='请输入固件版本'
+        />
+      </a-form-item>
+      <!-- 扩展属性 -->
+      <a-form-item
+        v-if="formSystem.extendParams"
+        field="extendParams"
+        :label="formSystem.extendParams.label"
+        :rules="[{ required: true, message: '扩展属性不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-if="formSystem.extendParams.component==='input'"
+          v-model="formData.extendParams"
+          placeholder='请输入扩展属性'
+        />
+      </a-form-item>
+      <!-- 设备物模型属性 -->
+      <a-form-item
+        v-if="formSystem.properties"
+        field="properties"
+        :label="formSystem.properties.label"
+        :rules="[{ required: true, message: '设备物模型属性不能为空' }]"
+        :validate-trigger="['change']"
+      >
+        <a-input
+          v-if="formSystem.properties.component==='input'"
+          v-model="formData.properties"
+          placeholder='请输入设备物模型属性'
+        />
+      </a-form-item>
+    </a-form>
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import { computed, defineEmits, PropType, ref, shallowRef, onBeforeUnmount, reactive } from 'vue';
+  import { CreateRecord } from '@/api/user';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { Message } from '@arco-design/web-vue';
+  import { useMessageStore } from '@/store';
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+  import { IEditorConfig } from '@wangeditor/editor'
+  import '@wangeditor/editor/dist/css/style.css'
+
+  const props = defineProps({
+    prem: {
+      type: Object as PropType<CreateRecord>,
+    },
+    formData: {
+      type: Object as PropType<CreateRecord>,
+    },
+    isCreate: Boolean,
+  });
+  // 部门树模态框状态
+  const deptVisible=ref(false);
+  const emit = defineEmits(['refresh']);
+  const { visible, setVisible } = useVisible(false);
+  const checkKeys = ref<number[]>([]);
+
+  const CreateRef = ref<FormInstance>();
+  const formData = ref<any>({
+    ...props.formData,
+  });
+  const messageStore = useMessageStore();
+  const editorRef = shallowRef()
+  const isFullScreen = ref(false);
+  const mode = 'default';
+  const selectedIds= ref<string[]>([]);
+  const toolbarConfig = { excludeKeys: ['uploadVideo', 'insertImage','insertVideo']}
+  // const handleCreated = (editor: any) => {
+  //   editorRef.value = editor; // 记录 editor 实例，重要！
+  //   // 监听全屏事件
+  //   editor.on('fullScreen', () => {
+  //   })
+  // }
+  const columns = computed<any[]>(()=>[
+    {
+      title: '操作',
+      dataIndex: 'key',
+      slotName: 'key',
+    },
+    {
+      title: '用户',
+      dataIndex: 'title',
+    },
+  ])
+  const formSystem = ref(props.prem);
+  const { userId, title, remark, sms, email, richEditor, attachmentIds ,name
+    ,username, phone, password, nickName, address, deptId, roleId } = formSystem.value;
+  // 部门树数据
+  const deptTreeData = reactive([
+    {
+      key: '1',
+      title: '总部门',
+      children: [
+        {
+          key: '2',
+          title: '部门1',
+          members: [
+            { key: '101', title: '成员1' },
+            { key: '102', title: '成员2' }
+          ]
+        },
+        {
+          key: '3',
+          title: '部门2',
+          members: [
+            { key: '201', title: '成员3' },
+            { key: '202', title: '成员4' }
+          ]
+        },
+        {
+          key: '4',
+          title: '部门3',
+          members: [
+            { key: '203', title: '成员5' },
+            { key: '204', title: '成员6' }
+          ]
+        }
+      ]
+    }
+  ]);
+  const selectedDepartmentMembers: any = ref([]);
+  const renderData = ref<any[]>([]);
+  // 部门树查询
+  const queryDeptTree= async ()=>{
+    deptVisible.value = true;
+  }
+
+  // 广度优先遍历树，获取选中的成员
+  const getSelectedMembers = (treeData: any[], selectedKeys: string[]) => {
+    const queue = [...treeData];
+    const selectedMembers: any[] = [];
+    while (queue.length > 0) {
+      const node = queue.shift()!;
+      if (selectedKeys.includes(node.key)) {
+        if (node.members) {
+          selectedMembers.push(...node.members);
+        }
+      }
+      if (node.children) {
+        queue.push(...node.children);
+      }
+    }
+    return selectedMembers;
+  }
+
+  // 部门树被点击
+  const handleClickTree = (key: string[]) => {
+    // 假设 '1' 是总部门的键
+    if (key[0] === '1' || key.length === 0) {
+      // 广度优先遍历树，获取所有成员
+      const allMembers: any[] = [];
+      const queue = [...deptTreeData];
+      while (queue.length > 0) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const node = queue.shift()!;
+        if (node.members) {
+          allMembers.push(...node.members);
+        }
+        if (node.children) {
+          queue.push(...node.children);
+        }
+      }
+      selectedDepartmentMembers.value = allMembers;
+      renderData.value = selectedDepartmentMembers.value;
+      return;
+    }
+    const Members = getSelectedMembers(deptTreeData, key);
+    selectedDepartmentMembers.value = Members;
+  }
+
+  // 部门树被选中
+  const handleCheckTree = (key: string[]) => {
+    if (key[0] === '1' ) { // 假设 '1' 是总部门的键
+      const allKeys: string[] = [];
+      const traverseTree = (node: any) => {
+        if (node.members) {
+          node.members.forEach((member: any) => {
+            allKeys.push(member.key);
+          });
+        }
+        if (node.children) {
+          node.children.forEach((child: any) => {
+            traverseTree(child);
+          });
+        }
+      };
+      deptTreeData.forEach((node: any) => {
+        traverseTree(node);
+      });
+      selectedIds.value = allKeys;
+
+    } else {
+      const selectedKeys = getSelectedMembers(deptTreeData, key);
+      selectedIds.value = selectedKeys.map(item => item.key);
+    }
+  };
+
+  // 组件被点击
+  const handleClick = () => {
+    setVisible(true);
+  };
+
+  // 编辑器配置
+  const editorConfig: Partial<IEditorConfig> = { placeholder: '请输入内容...',MENU_CONF:{
+      // 隐藏菜单
+      hide: ['code', 'table', 'emoticon', 'uploadImage', 'video', 'todo', 'specialChar'],
+      // 配置上传图片
+      uploadImage: {
+        base64LimitSize: 1024 * 1024,
+        // server: '/api/rest/bulletin/1/add',
+      }
+    }
+  }
+
+  // 组件销毁时，也及时销毁编辑器
+  onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+  })
+
+  // 关闭
+  const handleCancel = async () => {
+    checkKeys.value = [];
+    setVisible(false);
+  };
+
+  // 部门树模态框提交
+  const deptTreeSubmit = () => {
+    deptVisible.value = false;
+    formData.value.userIds = selectedIds.value;
+    console.log(formData.value.userIds);
+  };
+
+  // 部门树模态框
+  const deptTreeCancel = () => {
+    deptVisible.value = false;
+  };
+</script>
+
+<style scoped>
+  .fullscreen-toolbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50px; /* 根据需要调整高度 */
+    z-index: 999;
+    background-color: white;
+  }
+  .fullscreen-editor {
+    position: fixed;
+    top: 50px; /* 根据 toolbar 的高度调整 */
+    left: 0;
+    width: 100%;
+    height: calc(100% - 50px); /* 减去 toolbar 的高度 */
+    z-index: 999;
+    background-color: white;
+  }
+  .editor-button{
+    position: static
+  }
+</style>

src/components/menu/index.vue

@@ -39,7 +39,7 @@
         }
         // Eliminate external link side effects
         const { hideInMenu, activeMenu } = item.meta as RouteMeta;
-        if (route.name === item.name && !hideInMenu && !activeMenu) {
+        if (route.name === item.name &&!hideInMenu &&!activeMenu) {
           selectedKey.value = [item.name as string];
           return;
         }
@@ -48,6 +48,7 @@
           name: item.name,
         });
       };
+
       const findMenuOpenKeys = (target: string) => {
         const result: string[] = [];
         let isFind = false;
@@ -69,6 +70,7 @@
         });
         return result;
       };
+
       listenerRouteChange((newRoute) => {
         const { requiresAuth, activeMenu, hideInMenu } = newRoute.meta;
         if (requiresAuth && (!hideInMenu || activeMenu)) {
@@ -76,7 +78,7 @@
             (activeMenu || newRoute.name) as string
           );
 
-          const keySet = new Set([...menuOpenKeys, ...openKeys.value]);
+          const keySet = new Set([...menuOpenKeys,...openKeys.value]);
           openKeys.value = [...keySet];
 
           selectedKey.value = [
@@ -84,6 +86,7 @@
           ];
         }
       }, true);
+
       const setCollapse = (val: boolean) => {
         if (appStore.device === 'desktop')
           appStore.updateSettings({ menuCollapse: val });
@@ -106,7 +109,7 @@
                       title: () => h(compile(t(element?.meta?.locale || ''))),
                     }}
                   >
-                    {travel(element?.children)}
+                    {travel(element?.children, [])}
                   </a-sub-menu>
                 ) : (
                   <a-menu-item
@@ -114,14 +117,18 @@
                     v-slots={{ icon }}
                     onClick={() => goto(element)}
                   >
-                    {t(element?.meta?.locale || '')}
+                    {element?.meta?.title}
                   </a-menu-item>
                 );
-              nodes.push(node as never);
+              const meta = element.meta as RouteMeta;
+              if (meta.showInMenu!== false) {
+                nodes.push(node as never);
+              }
             });
           }
           return nodes;
         }
+
         return travel(menuTree.value);
       };
 
@@ -144,17 +151,3 @@
     },
   });
 </script>
-
-<style lang="less" scoped>
-  :deep(.arco-menu-inner) {
-    .arco-menu-inline-header {
-      display: flex;
-      align-items: center;
-    }
-    .arco-icon {
-      &:not(.arco-icon-down) {
-        font-size: 18px;
-      }
-    }
-  }
-</style>

src/components/message-box/index.vue

@@ -15,8 +15,11 @@
         />
       </a-tab-pane>
       <template #extra>
-        <a-button type="text" @click="emptyList">
+        <a-button type="text" @click="handleItemClick()">
-          {{ $t('messageBox.tab.button') }}
+          全部已读
+        </a-button>
+        <a-button type="text" @click="$router.push({ name: 'Messages' })">
+          查看更多
         </a-button>
       </template>
     </a-tabs>
@@ -25,14 +28,10 @@
 
 <script lang="ts" setup>
   import { ref, reactive, toRefs, computed } from 'vue';
-  import { useI18n } from 'vue-i18n';
+  import { MessagesRecord,MessageListType,MessagesList } from '@/api/messages';
-  import {
+  import { useMessagesStore } from '@/store'
-    queryMessageList,
-    setMessageStatus,
-    MessageRecord,
-    MessageListType,
-  } from '@/api/message';
   import useLoading from '@/hooks/loading';
+  // import { setMessageStatus } from '@/api/message';
   import List from './list.vue';
 
   interface TabItem {
@@ -40,12 +39,12 @@
     title: string;
     avatar?: string;
   }
+  const useMessageStore = useMessagesStore();
   const { loading, setLoading } = useLoading(true);
-  const messageType = ref('message');
+  const messageType = ref('other');
-  const { t } = useI18n();
   const messageData = reactive<{
-    renderList: MessageRecord[];
+    renderList: MessagesList[];
-    messageList: MessageRecord[];
+    messageList: MessagesList[];
   }>({
     renderList: [],
     messageList: [],
@@ -53,58 +52,64 @@
   toRefs(messageData);
   const tabList: TabItem[] = [
     {
-      key: 'message',
+      key: 'other',
-      title: t('messageBox.tab.title.message'),
+      title: '消息',
     },
     {
-      key: 'notifications',
+      key: 'resetThePassword',
-      title: t('messageBox.tab.title.notice'),
+      title: '通知',
-    },
-    {
-      key: 'todo',
-      title: t('messageBox.tab.title.todo'),
     },
   ];
+  // 获取消息列表
   async function fetchSourceData() {
     setLoading(true);
     try {
-      const { data } = await queryMessageList();
+      const params: MessagesRecord = { size: 7, current: 1, isRead: false };
-      messageData.messageList = data;
+      const { data } = await useMessageStore.queryMessagesList(params);
+      if (data) {
+        messageData.messageList = data.records;
+      }
     } catch (err) {
       // you can report use errorHandler or other
     } finally {
       setLoading(false);
     }
   }
+
+
+  // 修改消息状态
   async function readMessage(data: MessageListType) {
-    const ids = data.map((item) => item.id);
+    const ids = data.map((item) => item.messageId);
-    await setMessageStatus({ ids });
+    await useMessageStore.setMessageStatus(ids);
-    fetchSourceData();
+    // fetchSourceData();
   }
+  // 格式化消息列表
   const renderList = computed(() => {
     return messageData.messageList.filter(
       (item) => messageType.value === item.type
     );
   });
+  // 未读消息长度
   const unreadCount = computed(() => {
-    return renderList.value.filter((item) => !item.status).length;
+    return renderList.value.filter((item) => !item.isRead).length;
   });
+  // 获取未读消息列表
   const getUnreadList = (type: string) => {
     const list = messageData.messageList.filter(
-      (item) => item.type === type && !item.status
+      (item) => item.type === type
     );
     return list;
   };
+  // 格式化未读消息长度
   const formatUnreadLength = (type: string) => {
     const list = getUnreadList(type);
     return list.length ? `(${list.length})` : ``;
   };
+  // 修改已读状态
   const handleItemClick = (items: MessageListType) => {
     if (renderList.value.length) readMessage([...items]);
   };
-  const emptyList = () => {
+
-    messageData.messageList = [];
-  };
   fetchSourceData();
 </script>
 

src/components/message-box/list.vue

@@ -25,9 +25,9 @@
           <template #title>
             <a-space :size="4">
               <span>{{ item.title }}</span>
-              <a-typography-text type="secondary">
+<!--              <a-typography-text type="secondary">-->
-                {{ item.subTitle }}
+<!--                {{ item.subTitle }}-->
-              </a-typography-text>
+<!--              </a-typography-text>-->
             </a-space>
           </template>
           <template #description>
@@ -36,33 +36,32 @@
                 :ellipsis="{
                   rows: 1,
                 }"
-                >{{ item.content }}</a-typography-paragraph
+              >{{ item.content }}</a-typography-paragraph
               >
               <a-typography-text
-                v-if="item.type === 'message'"
                 class="time-text"
               >
-                {{ item.time }}
+                {{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm') }}
               </a-typography-text>
             </div>
           </template>
         </a-list-item-meta>
       </div>
     </a-list-item>
-    <template #footer>
+<!--    <template #footer>-->
-      <a-space
+<!--      <a-space-->
-        fill
+<!--        fill-->
-        :size="0"
+<!--        :size="0"-->
-        :class="{ 'add-border-top': renderList.length < showMax }"
+<!--        :class="{ 'add-border-top': renderList.length < showMax }"-->
-      >
+<!--      >-->
-        <div class="footer-wrap">
+<!--        <div class="footer-wrap">-->
-          <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>
+<!--          <a-link @click="allRead">{{ $t('messageBox.allRead') }}</a-link>-->
-        </div>
+<!--        </div>-->
-        <div class="footer-wrap">
+<!--        <div class="footer-wrap">-->
-          <a-link>{{ $t('messageBox.viewMore') }}</a-link>
+<!--          <a-link>查看更多</a-link>-->
-        </div>
+<!--        </div>-->
-      </a-space>
+<!--      </a-space>-->
-    </template>
+<!--    </template>-->
     <div
       v-if="renderList.length && renderList.length < 3"
       :style="{ height: (showMax - renderList.length) * 86 + 'px' }"
@@ -73,6 +72,7 @@
 <script lang="ts" setup>
   import { PropType } from 'vue';
   import { MessageRecord, MessageListType } from '@/api/message';
+  import dayjs from 'dayjs';
 
   const props = defineProps({
     renderList: {
@@ -85,9 +85,9 @@
     },
   });
   const emit = defineEmits(['itemClick']);
-  const allRead = () => {
+  // const allRead = () => {
-    emit('itemClick', [...props.renderList]);
+  //   emit('itemClick', [...props.renderList]);
-  };
+  // };
 
   const onItemClick = (item: MessageRecord) => {
     if (!item.status) {

src/store/index.ts

@@ -5,8 +5,11 @@ import useUserStore from './modules/user';
 import useTabBarStore from './modules/tab-bar';
 import useRoleStore from './modules/role';
 import useDeptStore from './modules/dept';
-import useTicketStore from './modules/ticket';
 import useAuthStore from './modules/auth';
+import useBulletinsStore from './modules/bulletins';
+import useBulletinStore from './modules/bulle-mgmt';
+import useMessagesStore from './modules/messages';
+import useMessageStore from './modules/message-mgmt';
 
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
@@ -15,9 +18,12 @@ export {
   useAppStore,
   useUserStore,
   useTabBarStore,
-  useDeptStore,
   useRoleStore,
-  useTicketStore,
+  useDeptStore,
   useAuthStore,
+  useBulletinsStore,
+  useBulletinStore,
+  useMessagesStore,
+  useMessageStore,
 };
 export default pinia;

src/store/modules/message-mgmt/index.ts

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia';
+import {
+  MessageRecord,
+  MessageCreateRecord,
+  queryMessage,
+  queryMessageList,
+  createMessage,
+  getMessageTypes,
+  setMessageTypes,
+} from '@/api/message-mgmt';
+import { messageStore } from '@/store/modules/message-mgmt/type';
+
+const useMessageStore = defineStore('dept', {
+  state: ():messageStore  => ({
+    remark: undefined,
+    title: undefined,
+    top: undefined,
+    content: undefined,
+    attachmentIds: undefined,
+  }),
+
+  getters: {
+    MessageInfo(state: messageStore): messageStore {
+      return { ...state };
+    },
+  },
+  actions: {
+    async queryMessage(userId: number, messageId: number) {
+      return queryMessage(userId, messageId);
+    },
+
+    async queryMessageList(params: MessageRecord) {
+      return queryMessageList(params);
+    },
+
+    async createMessage(params: MessageCreateRecord) {
+      return createMessage(params);
+    },
+
+    async getMessageTypes() {
+      return getMessageTypes();
+    },
+
+    async setMessageTypes(params: string[]) {
+      return setMessageTypes(params);
+    },
+
+
+  },
+});
+
+export default useMessageStore;

src/store/modules/message-mgmt/type.ts

@@ -0,0 +1,8 @@
+// export type bulletinsType = '' | '*' | 'admin' | 'user' | string[];
+export interface messageStore {
+  title?: string;
+  top?: string[];
+  content?: string;
+  remark?: string;
+  attachmentIds?: string[];
+}

src/store/modules/messages/index.ts

@@ -0,0 +1,49 @@
+import { defineStore } from 'pinia';
+import {
+  MessagesRecord,
+  MessageStatus,
+  queryMessage,
+  queryMessagesList,
+  queryMessagesCount,
+  queryMessagesReadCount,
+  setMessageStatus,
+} from '@/api/messages';
+import { messagesStore } from '@/store/modules/messages/type';
+
+const useMessagesStore = defineStore('dept', {
+  state: ():messagesStore  => ({
+    remark: undefined,
+    title: undefined,
+    content: undefined,
+    attachments: undefined,
+  }),
+
+  getters: {
+    MessagesInfo(state: messagesStore): messagesStore {
+      return { ...state };
+    },
+  },
+  actions: {
+    async queryMessage(id: number){
+      return queryMessage(id);
+    },
+
+    async queryMessagesList(data: MessagesRecord) {
+      return queryMessagesList(data);
+    },
+
+    async queryMessagesCount() {
+      return queryMessagesCount();
+    },
+
+    async queryMessagesReadCount() {
+      return queryMessagesReadCount();
+    },
+
+    async setMessageStatus(data: MessageStatus) {
+      return setMessageStatus(data);
+    },
+
+  },
+});
+export default useMessagesStore;

src/store/modules/messages/type.ts

@@ -0,0 +1,35 @@
+// export type bulletinsType = '' | '*' | 'admin' | 'user' | string[];
+export interface Attachment {
+  id: string;
+  fileName: string;
+  mimeType: string;
+  uploadTime: string;
+  url: string;
+}
+
+export interface messagesStore {
+  id?: number;
+  userId?: number | null;
+  user?: string | null;
+  messageId?: number | null;
+  message?: string | null;
+  isRead?: boolean | null;
+  readTime?: string | null;
+  username?: string | null;
+  name?: string | null;
+  avatar?: string | null;
+  address?: string | null;
+  type?: string;
+  system?: boolean;
+  email?: boolean;
+  sms?: boolean;
+  html?: boolean;
+  title?: string;
+  content?: string;
+  remark?: string;
+  createTime?: string;
+  createBy?: string;
+  updateTime?: string;
+  updateBy?: string;
+  attachments?: Attachment[];
+}

src/views/system/message/components/message-edit.vue

@@ -0,0 +1,467 @@
+<template>
+  <a-button v-if="props.isCreate" type="primary" @click="handleClick">
+    <template #icon><icon-plus /></template>
+    新建
+  </a-button>
+  <a-button
+    v-if="!props.isCreate"
+    type="outline"
+    size="small"
+    :style="{ marginRight: '10px', padding: '7px' }"
+    @click="handleClick"
+  >
+    <template #icon><icon-edit /></template>
+    修改
+  </a-button>
+
+  <a-modal
+    width="900px"
+    :visible="visible"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ modalTitle }}</template>
+      <DynamicForm :prem="fieIds" />
+<!--    <a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">-->
+<!--      <a-form-item-->
+<!--        v-if="userId"-->
+<!--        field="userId"-->
+<!--        :label="userId.label"-->
+<!--        :validate-trigger="['change', 'input']"-->
+<!--        :rules="[-->
+<!--          { message: '请输入用戶' },-->
+<!--        ]"-->
+<!--      >-->
+<!--        <a-input-->
+<!--          v-if="userId.component==='input'"-->
+<!--          v-model="formData.userIds"-->
+<!--          :type="userId.type"-->
+<!--          placeholder='请选择用戶'-->
+<!--          :value=formData.userIds-->
+<!--          @click="queryDeptTree"-->
+<!--        />-->
+<!--      </a-form-item>-->
+<!--      <a-form-item-->
+<!--        v-if="title"-->
+<!--        field="title"-->
+<!--        :label="title.label"-->
+<!--        :validate-trigger="['change', 'input']"-->
+<!--        :rules="[-->
+<!--          { required: true, message: '请输入标题' },-->
+<!--        ]"-->
+<!--      >-->
+<!--        <a-input-->
+<!--          v-if="title.component==='input'"-->
+<!--          v-model="formData.title"-->
+<!--          :type="title.type"-->
+<!--          placeholder='请输入消息标题'-->
+<!--        />-->
+<!--      </a-form-item>-->
+<!--      <a-form-item-->
+<!--        v-if="remark"-->
+<!--        field="remark"-->
+<!--        :label="remark.label"-->
+<!--        :validate-trigger="['change', 'input']"-->
+<!--      >-->
+<!--        &lt;!&ndash;        v-if="isCreate"&ndash;&gt;-->
+<!--        <a-input-->
+<!--          v-if="remark.component==='input'"-->
+<!--          v-model="formData.attachment"-->
+<!--          :type="remark.type"-->
+<!--          placeholder='请输入备注'-->
+<!--        />-->
+<!--      </a-form-item>-->
+<!--      <div style="display: flex;margin-left: 75px">-->
+<!--        <a-form-item-->
+<!--          v-if="sms"-->
+<!--          field="sms"-->
+<!--          :label="sms.label"-->
+<!--          :validate-trigger="['change', 'input']"-->
+<!--        >-->
+<!--          <a-switch-->
+<!--            v-if="sms.component==='switch'"-->
+<!--            v-model="formData.sms"-->
+<!--            :checked-value="true"-->
+<!--            :unchecked-value="false"-->
+<!--          />-->
+<!--        </a-form-item>-->
+<!--        <a-form-item-->
+<!--          v-if="email"-->
+<!--          field="email"-->
+<!--          :label="email.label"-->
+<!--          :validate-trigger="['change', 'input']"-->
+<!--        >-->
+<!--          <a-switch-->
+<!--            v-if="email.component==='switch'"-->
+<!--            v-model="formData.email"-->
+<!--            :checked-value="true"-->
+<!--            :unchecked-value="false"-->
+<!--          />-->
+<!--        </a-form-item>-->
+
+<!--      </div>-->
+<!--&lt;!&ndash;      <a-form-item&ndash;&gt;-->
+<!--&lt;!&ndash;        field="attachmentIds"&ndash;&gt;-->
+<!--&lt;!&ndash;        label='附件'&ndash;&gt;-->
+<!--&lt;!&ndash;      >&ndash;&gt;-->
+<!--&lt;!&ndash;        &lt;!&ndash;        v-if="isCreate"&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;        <a-input&ndash;&gt;-->
+<!--&lt;!&ndash;          type="file"&ndash;&gt;-->
+<!--&lt;!&ndash;          v-model="formData.attachmentIds"&ndash;&gt;-->
+<!--&lt;!&ndash;        />&ndash;&gt;-->
+<!--&lt;!&ndash;      </a-form-item>&ndash;&gt;-->
+<!--      <a-form-item v-if="richEditor" field="content" label='内容' :rules="[{ required: true}]">-->
+<!--        <div style="border: 1px solid #ccc;min-width: 700px">-->
+<!--          <Toolbar-->
+<!--            style="border-bottom: 1px solid #ccc"-->
+<!--            :editor="editorRef"-->
+<!--            :default-config="toolbarConfig"-->
+<!--            :mode="mode"-->
+<!--            :class="{'fullscreen-toolbar': isFullScreen}"-->
+<!--          />-->
+<!--          <Editor-->
+<!--            v-model="formData.content"-->
+<!--            style="overflow-y: hidden;height: 200px;"-->
+<!--            :default-config="editorConfig"-->
+<!--            :mode="mode"-->
+<!--            :class="{'fullscreen-editor': isFullScreen}"-->
+<!--            @on-created="handleCreated"-->
+<!--          />-->
+<!--        </div>-->
+<!--        &lt;!&ndash;        <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />&ndash;&gt;-->
+<!--      </a-form-item>-->
+<!--    </a-form>-->
+    <template #footer>
+      <a-button class="editor-button"  @click="handleCancel">取消</a-button>
+      <a-button class="editor-button"  type="primary" @click="handleSubmit">确定</a-button>
+    </template>
+  </a-modal>
+
+<!--  部门树模态框-->
+  <a-modal
+    width="900px"
+    :visible="deptVisible"
+    @cancel="deptTreeCancel"
+  >
+    <template #title>发送用户</template>
+    <div style="display: flex">
+      <a-card style="margin-right: 10px;width: 30%">
+        <a-tree
+          :data="deptTreeData"
+          checkable="true"
+          style="margin-bottom: 8px; max-width: 240px"
+          @select="handleClickTree"
+          @check="handleCheckTree"
+        />
+      </a-card>
+      <a-card style="flex: 1">
+        <a-table
+          :data="selectedDepartmentMembers"
+          :columns="columns"
+          style="height: 520px">
+          <template #key="{ record }">
+            <a-checkbox v-model="selectedIds" :value="record.key"> </a-checkbox>
+          </template>
+          <template #title="{ record }">
+            {{ record.title }}
+          </template>
+        </a-table>
+      </a-card>
+    </div>
+    <template #footer>
+      <a-button class="editor-button" @click="deptTreeCancel" >取消</a-button>
+      <a-button class="editor-button" type="primary" @click="deptTreeSubmit" >确定</a-button>
+    </template>
+  </a-modal>
+
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import { computed, defineEmits, PropType, ref, shallowRef, onBeforeUnmount, reactive } from 'vue';
+  import { CreateRecord } from '@/api/user';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { Message } from '@arco-design/web-vue';
+  import { useMessageStore } from '@/store';
+  import DynamicForm from '@/components/dynamic-form/index.vue';
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+  import { IEditorConfig } from '@wangeditor/editor'
+  import '@wangeditor/editor/dist/css/style.css'
+
+  const props = defineProps({
+    prem: {
+      type: Object as PropType<CreateRecord>,
+    },
+    isCreate: Boolean,
+  });
+  // 部门树模态框状态
+  const deptVisible=ref(false);
+  const emit = defineEmits(['refresh']);
+  const modalTitle = computed(() => {
+    return props.isCreate ? '创建消息' : '编辑消息';
+  });
+  const { visible, setVisible } = useVisible(false);
+  const checkKeys = ref<number[]>([]);
+
+  const CreateRef = ref<FormInstance>();
+  const formData = ref<any>({
+    ...props.prem,
+  });
+  const messageStore = useMessageStore();
+  const editorRef = shallowRef()
+  const isFullScreen = ref(false);
+  const mode = 'default';
+  const selectedIds= ref<string[]>([]);
+  const toolbarConfig = { excludeKeys: ['uploadVideo', 'insertImage','insertVideo']}
+  // const handleCreated = (editor: any) => {
+  //   editorRef.value = editor; // 记录 editor 实例，重要！
+  //   // 监听全屏事件
+  //   editor.on('fullScreen', () => {
+  //   })
+  // }
+  const columns = computed<any[]>(()=>[
+    {
+      title: '操作',
+      dataIndex: 'key',
+      slotName: 'key',
+    },
+    {
+      title: '用户',
+      dataIndex: 'title',
+    },
+  ])
+
+  const fieIds = ref(
+    {
+      userId:{
+        label: '用戶',
+        component: 'input',
+        type:'text'
+      },
+      title:{
+        label: '标题',
+        component: 'input',
+        type:'text'
+      },
+      remark:{
+        label: '备注',
+        component: 'input',
+        type:'text'
+      },
+      sms:{
+        label: '短信',
+        component: 'switch',
+        type:'switch'
+      },
+      email:{
+        label: '邮件',
+        component:'switch',
+        type:'switch'
+      },
+      attachmentIds:{
+        label: '附件',
+        component: 'input',
+        type:'text'
+      },
+      richEditor:{
+        label: '内容',
+        component: 'input',
+        type:'text'
+      },
+    },
+  );
+  const { userId, title, remark, sms, email, richEditor } = fieIds.value;
+  const deptTreeData = reactive([
+    {
+      key: '1',
+      title: '总部门',
+      children: [
+        {
+          key: '2',
+          title: '部门1',
+          members: [
+            { key: '101', title: '成员1' },
+            { key: '102', title: '成员2' }
+          ]
+        },
+        {
+          key: '3',
+          title: '部门2',
+          members: [
+            { key: '201', title: '成员3' },
+            { key: '202', title: '成员4' }
+          ]
+        },
+        {
+          key: '4',
+          title: '部门3',
+          members: [
+            { key: '203', title: '成员5' },
+            { key: '204', title: '成员6' }
+          ]
+        }
+      ]
+    }
+  ]);
+  const selectedDepartmentMembers: any = ref([]);
+  const renderData = ref<any[]>([]);
+  // 部门树查询
+  const queryDeptTree= async ()=>{
+    deptVisible.value = true;
+  }
+
+  // 广度优先遍历树，获取选中的成员
+  const getSelectedMembers = (treeData: any[], selectedKeys: string[]) => {
+    const queue = [...treeData];
+    const selectedMembers: any[] = [];
+    while (queue.length > 0) {
+      const node = queue.shift()!;
+      if (selectedKeys.includes(node.key)) {
+        if (node.members) {
+          selectedMembers.push(...node.members);
+        }
+      }
+      if (node.children) {
+        queue.push(...node.children);
+      }
+    }
+    return selectedMembers;
+  }
+
+
+  // 部门树被点击
+  const handleClickTree = (key: string[]) => {
+    // 假设 '1' 是总部门的键
+    if (key[0] === '1' || key.length === 0) {
+      // 广度优先遍历树，获取所有成员
+      const allMembers: any[] = [];
+      const queue = [...deptTreeData];
+      while (queue.length > 0) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const node = queue.shift()!;
+        if (node.members) {
+          allMembers.push(...node.members);
+        }
+        if (node.children) {
+          queue.push(...node.children);
+        }
+      }
+      selectedDepartmentMembers.value = allMembers;
+      renderData.value = selectedDepartmentMembers.value;
+      return;
+    }
+    const Members = getSelectedMembers(deptTreeData, key);
+    selectedDepartmentMembers.value = Members;
+  }
+  // 部门树被选中
+  const handleCheckTree = (key: string[]) => {
+    if (key[0] === '1' ) { // 假设 '1' 是总部门的键
+      const allKeys: string[] = [];
+      const traverseTree = (node: any) => {
+        if (node.members) {
+          node.members.forEach((member: any) => {
+            allKeys.push(member.key);
+          });
+        }
+        if (node.children) {
+          node.children.forEach((child: any) => {
+            traverseTree(child);
+          });
+        }
+      };
+      deptTreeData.forEach((node: any) => {
+        traverseTree(node);
+      });
+      selectedIds.value = allKeys;
+
+    } else {
+      const selectedKeys = getSelectedMembers(deptTreeData, key);
+      selectedIds.value = selectedKeys.map(item => item.key);
+    }
+  };
+
+  // 组件被点击
+  const handleClick = () => {
+    setVisible(true);
+  };
+
+  const editorConfig: Partial<IEditorConfig> = { placeholder: '请输入内容...',MENU_CONF:{
+      // 隐藏菜单
+      hide: ['code', 'table', 'emoticon', 'uploadImage', 'video', 'todo', 'specialChar'],
+      // 配置上传图片
+      uploadImage: {
+        base64LimitSize: 1024 * 1024,
+        // server: '/api/rest/bulletin/1/add',
+      }
+    }
+  }
+  // 提交
+  const handleSubmit = async () => {
+    const valid = await CreateRef.value?.validate();
+    if (!valid) {
+      formData.value.permissionIds = checkKeys.value;
+      // 新增
+      if (props.isCreate) {
+        // formData.value.username = formData.value.email;
+        const res = await messageStore.createMessage(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: '新建成功',
+            duration: 5 * 1000,
+          });
+          emit('refresh');
+          setVisible(false);
+        }
+        CreateRef.value?.resetFields();
+      }
+    }
+  };
+
+  // 组件销毁时，也及时销毁编辑器
+  onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+  })
+
+  // 关闭
+  const handleCancel = async () => {
+    checkKeys.value = [];
+    setVisible(false);
+  };
+
+  // 部门树模态框提交
+  const deptTreeSubmit = () => {
+    deptVisible.value = false;
+    formData.value.userIds = selectedIds.value;
+    console.log(formData.value.userIds);
+  };
+
+  // 部门树模态框
+  const deptTreeCancel = () => {
+    deptVisible.value = false;
+  };
+</script>
+
+<style scoped>
+  .fullscreen-toolbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50px; /* 根据需要调整高度 */
+    z-index: 999;
+    background-color: white;
+  }
+  .fullscreen-editor {
+    position: fixed;
+    top: 50px; /* 根据 toolbar 的高度调整 */
+    left: 0;
+    width: 100%;
+    height: calc(100% - 50px); /* 减去 toolbar 的高度 */
+    z-index: 999;
+    background-color: white;
+  }
+  .editor-button{
+    position: static
+  }
+</style>

src/views/system/message/index.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['系统管理', '消息设置']" />
+    <a-card class="general-card" title=" ">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            label-align="right"
+          >
+            <a-row :gutter="18">
+              <a-col :span="9">
+                <a-form-item
+                  field="title"
+                  label='标题'
+                >
+                  <a-input
+                    v-model="formModel.title"
+                    style="width: 360px"
+                    placeholder='请输入标题'
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="10">
+                <a-form-item field="Time" label='时间'>
+                  <a-range-picker
+                    show-time
+                    format="YYYY-MM-DD HH:mm"
+                    @ok="timeRangs"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="9">
+                <a-form-item
+                  field="name"
+                  label='名称'
+                >
+                  <a-input
+                    v-model="formModel.name"
+                    style="width: 360px"
+                    placeholder='请输入名称'
+                  />
+                </a-form-item>
+              </a-col>
+
+
+
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 84px" direction="vertical" />
+        <a-col :flex="'86px'" style="text-align: right">
+          <a-space direction="vertical" :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+
+      <a-divider style="margin-top: 0" />
+      <a-row>
+        <a-col :span="12">
+          <a-space>
+            <MessageEdit ref="createUserRef" :is-create="true" @refresh="search" />
+          </a-space>
+        </a-col>
+        <a-col
+          :span="12"
+          style="
+            display: flex;
+            align-items: center;
+            justify-content: end;
+            padding-bottom: 20px;
+          "
+        >
+          <a-tooltip content='刷新'>
+            <div class="action-icon" @click="search">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+
+          <a-dropdown @select="handleSelectDensity">
+            <a-tooltip content='密度'>
+              <div class="action-icon"><icon-line-height size="18" /></div>
+            </a-tooltip>
+            <template #content>
+              <a-doption
+                v-for="item in densityList"
+                :key="item.value"
+                :value="item.value"
+                :class="{ active: item.value === size }"
+              >
+                <span>{{ item.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+
+          <a-tooltip content='列设置'>
+            <a-popover
+              trigger="click"
+              position="bl"
+              @popup-visible-change="popupVisibleChange"
+            >
+              <div class="action-icon"><icon-settings size="18" /></div>
+              <template #content>
+                <div id="tableSetting">
+                  <div
+                    v-for="(item, index) in showColumns"
+                    :key="item.dataIndex"
+                    class="setting"
+                  >
+                    <div style="margin-right: 4px; cursor: move">
+                      <icon-drag-arrow />
+                    </div>
+                    <div>
+                      <a-checkbox
+                        v-model="item.checked"
+                        @change="
+                          handleChange($event, item as TableColumnData, index)
+                        "
+                      >
+                      </a-checkbox>
+                    </div>
+                    <div class="title">
+                      {{ item.title === '#' ? '序列号' : item.title }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-popover>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :pagination="false"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        style="margin-bottom: 40px"
+        @page-change="onPageChange"
+      >
+        <template #id="{ record }">
+          <a-checkbox v-model="selectedIds" :value="record.id" style="margin-left: -5px"> </a-checkbox>
+        </template>
+        <template #createTime="{ record }">
+          {{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm') }}
+        </template>
+        <template #isRead="{ record }">
+          {{ record.isRead == true? '已读' : '未读' }}
+        </template>
+
+      </a-table>
+      <a-pagination
+        style="float: right; position: relative; right: 1px; bottom: 25px"
+        :total="pagination.total"
+        :size="size"
+        show-total
+        show-jumper
+        show-page-size
+        @page-size-change="onSizeChange"
+        @change="onPageChange"
+      />
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, onMounted, ref, watch } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { Pagination } from '@/types/global';
+  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import { useMessageStore } from '@/store';
+  import useTableOption from '@/hooks/table-option';
+  import usePagination from '@/hooks/pagination';
+  import dayjs from 'dayjs';
+  import { MessageRecord, MessageCreateRecord } from '@/api/message-mgmt';
+  import { useRouter } from 'vue-router';
+  import MessageEdit from './components/message-edit.vue';
+
+  const generateFormModel = () => {
+    return {
+      userId: '',
+      title: '',
+      type: '',
+      name: '',
+      system: '',
+      isRead: '',
+      createAtBegin: '',
+      createAtEnd: '',
+    };
+  };
+
+  const { loading, setLoading } = useLoading(true);
+  const renderData = ref<MessageRecord[]>([]);
+  const formModel = ref(generateFormModel());
+  const router = useRouter();
+  const selectedIds= ref<number[]>([]);
+  const {
+    cloneColumns,
+    showColumns,
+    densityList,
+    size,
+    handleSelectDensity,
+    handleChange,
+    popupVisibleChange,
+    deepClone,
+  } = useTableOption();
+
+  const messageStore = useMessageStore();
+
+  const { pagination,setPagination } = usePagination();
+
+  const columns = computed<TableColumnData[]>(() => [
+    // {
+    //   title: '用户编号',
+    //   dataIndex: 'userId',
+    // },
+    {
+      title: '标题',
+      dataIndex: 'title',
+    },
+    {
+      title:'时间',
+      dataIndex: 'createTime',
+      slotName: 'createTime',
+
+    },
+    // {
+    //   title: '用户名称',
+    //   dataIndex: 'username',
+    // },
+    {
+      title: '状态',
+      dataIndex: 'isRead',
+      slotName: 'isRead',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+
+  ]);
+  // 获取消息列表
+  const fetchData = async (
+    params = { size: 10, current: 1 }
+  ) => {
+    setLoading(true);
+    try {
+      const res: any = await messageStore.queryMessageList(params);
+      renderData.value = res.data.records;
+      setPagination(res.data);
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 查询
+  const search = () => {
+    fetchData({
+      ...pagination,
+      ...formModel.value,
+    } as unknown as MessageRecord);
+    selectedIds.value = [];
+  };
+
+  // 分页发生改变
+  const onPageChange = (current: number) => {
+    pagination.pages = current;
+    pagination.current = current;
+    search();
+  };
+  // 时间范围
+  const timeRangs = (dateString: string[]) => {
+    // eslint-disable-next-line prefer-destructuring
+    formModel.value.createAtBegin = dateString[0];
+    // eslint-disable-next-line prefer-destructuring
+    formModel.value.createAtEnd = dateString[1];
+  };
+
+  // 数据条数改变
+  const onSizeChange = (Size: number) => {
+    pagination.size = Size;
+    search();
+  };
+
+
+  // 重置
+  const reset = () => {
+    formModel.value = generateFormModel();
+  };
+
+
+  // 打开详情
+  function openDetail(id:number): void{
+    const url = router.resolve({
+      name: 'Detail',
+      params: {id}
+    }).href;
+    router.push(url);
+  };
+
+  onMounted(() => {
+    search();
+  });
+  watch(() => columns.value, deepClone, { deep: true, immediate: true });
+</script>
+
+
+<style scoped lang="less">
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+
+  .action-icon {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+
+  .active {
+    color: #0960bd;
+    background-color: #e3f4fc;
+  }
+
+  .setting {
+    display: flex;
+    align-items: center;
+    width: 200px;
+
+    .title {
+      margin-left: 12px;
+      cursor: pointer;
+    }
+  }
+</style>

src/views/user/messages/index.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['个人中心', '消息通知']" />
+    <a-card class="general-card" title=" ">
+      <a-row>
+        <a-col :flex="1">
+          <a-form
+            :model="formModel"
+            :label-col-props="{ span: 6 }"
+            :wrapper-col-props="{ span: 18 }"
+            label-align="right"
+          >
+            <a-row :gutter="18">
+              <a-col :span="9">
+                <a-form-item
+                  field="title"
+                  label='标题'
+                >
+                  <a-input
+                    v-model="formModel.title"
+                    style="width: 360px"
+                    placeholder='请输入标题'
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="10">
+                <a-form-item field="Time" label='时间'>
+                  <a-range-picker
+                    show-time
+                    format="YYYY-MM-DD HH:mm"
+                    @ok="timeRangs"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="9">
+                <a-form-item
+                  field="isRead"
+                  label='状态'
+                >
+                  <a-select
+                    v-model="formModel.isRead"
+                    style="width: 360px"
+                    placeholder='请选择状态'
+                    :options="statusOptions"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 84px" direction="vertical" />
+        <a-col :flex="'46px'" style="text-align: right">
+          <a-space direction="vertical" :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              查询
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              重置
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 0" />
+
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :pagination="false"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="sizeof"
+        :style="highlightRow"
+        style="margin-bottom: 40px"
+        :filter-icon-align-left="alignLeft"
+        @change="handleSortChange"
+        @page-change="onPageChange"
+      >
+        <template #publishTime="{ record }">
+          {{ dayjs(record.publishTime).format('YYYY-MM-DD HH:mm') }}
+        </template>
+        <template #isRead="{ record }">
+          {{ record.isRead == true? '已读' : '未读' }}
+        </template>
+<!--        <template #operations="{ record }">-->
+<!--          <a-button-->
+<!--            type="outline"-->
+<!--            size="small"-->
+<!--            status="success"-->
+<!--            style="padding: 7px; margin-right: 10px"-->
+<!--            @click="handleRead(record)"-->
+<!--          >-->
+<!--            <template #icon><icon-list /></template>-->
+<!--            详情-->
+<!--          </a-button>-->
+<!--        </template>-->
+
+      </a-table>
+      <a-pagination
+        style="float: right; position: relative; right: 1px; bottom: 25px"
+        :total="pagination.total"
+        :size="sizeof"
+        show-total
+        show-jumper
+        show-page-size
+        @page-size-change="onSizeChange"
+        @change="onPageChange"
+      />
+
+    </a-card>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import dayjs from 'dayjs';
+  import { Pagination } from '@/types/global';
+  import usePagination from '@/hooks/pagination';
+  import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import { useMessagesStore } from '@/store';
+  import router from '@/router';
+  import useTableOption from '@/hooks/table-option';
+  import { BulletinsRecord } from '@/api/bulletins';
+
+  const generateFormModel = () => {
+    return {
+      title: '',
+      state: '',
+      publishTimeBegin: '',
+      publishTimeEnd: '',
+    };
+  };
+
+  const { loading, setLoading } = useLoading(true);
+  const renderData = ref<BulletinsRecord[]>([]);
+  const formModel = ref(generateFormModel());
+  const { pagination,setPagination } = usePagination();
+  const {
+    cloneColumns,
+    showColumns,
+    densityList,
+    handleSelectDensity,
+    handleChange,
+    popupVisibleChange,
+    deepClone,
+  } = useTableOption();
+  const sizeof=useTableOption().size;
+
+  const messagesStore = useMessagesStore();
+
+
+  const columns = computed<TableColumnData[]>(() => [
+    {
+      title: '标题',
+      dataIndex: 'title',
+    },
+    {
+      title: '时间',
+      dataIndex: 'publishTime',
+      slotName: 'publishTime',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: '状态',
+      dataIndex: 'isRead',
+      slotName: 'isRead',
+    },
+    // {
+    //   title: '操作',
+    //   dataIndex: 'operations',
+    //   slotName: 'operations',
+    // },
+  ]);
+  const statusOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: '已读',
+      value: 'true',
+    },
+    {
+      label: '未读',
+      value: 'false',
+    },
+  ]);
+
+  // 获取公告列表
+  const fetchData = async (
+    params: BulletinsRecord = { size: 10, current: 1 }
+  ) => {
+    setLoading(true);
+    try {
+      const res = await messagesStore.queryMessagesList(params);
+      renderData.value = res.data.records;
+      setPagination(res.data);
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 高亮行
+  const highlightRow = (record: BulletinsRecord) => {
+    if (record.top === true) {
+      console.log('record', record);
+      return 'background-color: yellow;';
+    }
+    return '';
+  };
+
+  // 时间范围
+  const timeRangs = (dateString: string[]) => {
+    // eslint-disable-next-line prefer-destructuring
+    formModel.value.publishTimeBegin = dateString[0];
+    // eslint-disable-next-line prefer-destructuring
+    formModel.value.publishTimeEnd = dateString[1];
+  };
+
+  // 详情
+  const handleRead = async (record: BulletinsRecord) => {
+    // await bulletinsStore.readBulletins({ id: record.id });
+    await router.push({ name: 'Details', params: { id: record.id } });
+  };
+
+  // 查询
+  const search = () => {
+    fetchData({
+      ...pagination,
+      ...formModel.value,
+    } as unknown as BulletinsRecord);
+  };
+
+  // 分页发生改变
+  const onPageChange = (current: number) => {
+    pagination.pages = current;
+    pagination.current = current;
+    search();
+  };
+
+  // 数据条数改变
+  const onSizeChange = (Size: number) => {
+    pagination.size = Size;
+    search();
+  };
+
+  search();
+
+  // 重置
+  const reset = () => {
+    formModel.value = generateFormModel();
+  };
+
+  // 表格内部排序
+  const alignLeft = ref(false);
+  const handleSortChange = (data: any, extra: any, currentDataSource: any) => {};
+
+  watch(() => columns.value, deepClone, { deep: true, immediate: true });
+</script>
+
+<style scoped>
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+
+  .highlight-class {
+    background-color: yellow; /* 这里可以修改为你想要的高亮颜色 */
+    font-weight: bold; /* 可以添加其他样式，如加粗等 */
+  }
+</style>