From a6eaa412268222847cccc8f671d7b85a0dd69245 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Fri, 1 Nov 2024 16:42:06 +0800
Subject: [PATCH] =?UTF-8?q?page:=20=F0=9F=93=84=20=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=92=8C=E9=83=A8=E5=88=86=E7=BC=BA=E9=99=B7?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/v1/message.ts                         |  15 ++
 src/enums/baseConstant.ts                     |   7 +
 .../lay-notice/components/NoticeItem.vue      |   8 +-
 src/layout/components/lay-notice/data.ts      |  43 +++++-
 src/layout/components/lay-notice/index.vue    |  28 +---
 src/router/modules/home.ts                    |  42 +++---
 src/router/modules/remaining.ts               |  22 ++-
 src/store/message/message.ts                  |   4 +
 .../message-detail/detail-message-id.vue      |  53 +++++++
 .../message-detail/detail-type.vue            |  37 +++++
 .../message-detail/index.vue                  | 112 +++++++++++++++
 .../message-editing/index.vue                 |  32 +++++
 .../message-editing}/markdown-editor.vue      |   2 +-
 .../message-editing}/message-editor-from.vue  |  19 ++-
 .../message-editing}/rich-editor.vue          |   2 +-
 .../message-editing}/utils/columns.ts         |  10 ++
 .../message-editing}/utils/hooks.ts           |   2 +
 .../message-type}/index.vue                   |   4 +-
 .../message-type}/message-type-dialog.vue     |   4 +-
 .../message-type}/utils/columns.tsx           |   0
 .../message-type}/utils/hooks.ts              |   4 +-
 .../message-type}/utils/types.ts              |   0
 .../message/index.vue                         |  31 ++--
 .../message/markdown-editor.vue               |  32 +++++
 .../message/message-dialog.vue                | 134 ++++++++++++++++++
 .../message/rich-editor.vue                   |  58 ++++++++
 .../message/utils/columns.tsx}                |  23 +--
 .../message/utils/hooks.ts                    |  98 +++++++++----
 .../message/utils/types.ts                    |   4 +
 .../message/message-dialog.vue                | 100 -------------
 .../messageEditing/index.vue                  |  38 -----
 31 files changed, 712 insertions(+), 256 deletions(-)
 create mode 100644 src/views/message-management/message-detail/detail-message-id.vue
 create mode 100644 src/views/message-management/message-detail/detail-type.vue
 create mode 100644 src/views/message-management/message-detail/index.vue
 create mode 100644 src/views/message-management/message-editing/index.vue
 rename src/views/{messageManagement/messageEditing => message-management/message-editing}/markdown-editor.vue (90%)
 rename src/views/{messageManagement/messageEditing => message-management/message-editing}/message-editor-from.vue (85%)
 rename src/views/{messageManagement/messageEditing => message-management/message-editing}/rich-editor.vue (95%)
 rename src/views/{messageManagement/messageEditing => message-management/message-editing}/utils/columns.ts (68%)
 rename src/views/{messageManagement/messageEditing => message-management/message-editing}/utils/hooks.ts (98%)
 rename src/views/{messageManagement/messageType => message-management/message-type}/index.vue (97%)
 rename src/views/{messageManagement/messageType => message-management/message-type}/message-type-dialog.vue (91%)
 rename src/views/{messageManagement/messageType => message-management/message-type}/utils/columns.tsx (100%)
 rename src/views/{messageManagement/messageType => message-management/message-type}/utils/hooks.ts (94%)
 rename src/views/{messageManagement/messageType => message-management/message-type}/utils/types.ts (100%)
 rename src/views/{messageManagement => message-management}/message/index.vue (80%)
 create mode 100644 src/views/message-management/message/markdown-editor.vue
 create mode 100644 src/views/message-management/message/message-dialog.vue
 create mode 100644 src/views/message-management/message/rich-editor.vue
 rename src/views/{messageManagement/message/utils/columns.ts => message-management/message/utils/columns.tsx} (84%)
 rename src/views/{messageManagement => message-management}/message/utils/hooks.ts (56%)
 rename src/views/{messageManagement => message-management}/message/utils/types.ts (85%)
 delete mode 100644 src/views/messageManagement/message/message-dialog.vue
 delete mode 100644 src/views/messageManagement/messageEditing/index.vue

diff --git a/src/api/v1/message.ts b/src/api/v1/message.ts
index a379207..135aec0 100644
--- a/src/api/v1/message.ts
+++ b/src/api/v1/message.ts
@@ -6,6 +6,21 @@ export const fetchGetMessageList = (data: any) => {
 	return http.request<BaseResult<ResultTable>>('get', `message/getMessageList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 
+/** 系统消息---获取系统消息列表 */
+export const fetchGetUserMessageList = (data: any) => {
+	return http.request<BaseResult<ResultTable>>('get', `message/noManage/getUserMessageList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/** 系统消息---根据消息id获取接收人信息 */
+export const fetchGetReceivedUserinfoByMessageId = (data: any) => {
+	return http.request<BaseResult<any>>('get', `messageReceived/noManage/getReceivedUserinfoByMessageId`, { params: data });
+};
+
+/** 系统消息---根据消息id查询消息详情 */
+export const fetchGetMessageDetailById = (data: any) => {
+	return http.request<BaseResult<any>>('get', `message/noManage/getMessageDetailById`, { params: data });
+};
+
 /** 系统消息---添加系统消息 */
 export const fetchAddMessage = (data: any) => {
 	return http.request<BaseResult<object>>('post', 'message/addMessage', { data });
diff --git a/src/enums/baseConstant.ts b/src/enums/baseConstant.ts
index 734988f..3fd3904 100644
--- a/src/enums/baseConstant.ts
+++ b/src/enums/baseConstant.ts
@@ -1,4 +1,5 @@
 import { computed } from 'vue';
+import { $t } from '@/plugins/i18n';
 
 /**
  * * 是否默认
@@ -32,6 +33,12 @@ export const enabledOrNotStatus = [
 	{ value: false, label: '禁用' },
 ];
 
+/** 是否已读 */
+export const isReadStatus = [
+	{ value: true, label: $t('readAlready') },
+	{ value: false, label: $t('unread') },
+];
+
 /**
  * * 分页默认数组个数
  */
diff --git a/src/layout/components/lay-notice/components/NoticeItem.vue b/src/layout/components/lay-notice/components/NoticeItem.vue
index 5199c5f..22f4c92 100644
--- a/src/layout/components/lay-notice/components/NoticeItem.vue
+++ b/src/layout/components/lay-notice/components/NoticeItem.vue
@@ -3,6 +3,7 @@ import { ListItem } from '../data';
 import { nextTick, PropType, ref } from 'vue';
 import { useNav } from '@/layout/hooks/useNav';
 import { deviceDetection } from '@pureadmin/utils';
+import { useRouter } from 'vue-router';
 
 defineProps({
 	noticeItem: {
@@ -17,6 +18,7 @@ const descriptionRef = ref(null);
 const descriptionTooltip = ref(false);
 const { tooltipEffect } = useNav();
 const isMobile = deviceDetection();
+const router = useRouter();
 
 function hoverTitle() {
 	nextTick(() => {
@@ -39,10 +41,14 @@ function hoverDescription(event, description) {
 	// 当文本宽度大于容器宽度两倍时，代表文本显示超过两行
 	currentWidth > 2 * cellWidth ? (descriptionTooltip.value = true) : (descriptionTooltip.value = false);
 }
+
+function goMessageDetail(message: ListItem) {
+	router.push({ path: `/message-detail/${message.messageType}/${message.messageId}` });
+}
 </script>
 
 <template>
-	<div class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]">
+	<div class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]" @click="goMessageDetail(noticeItem)">
 		<el-avatar v-if="noticeItem.cover" :size="30" :src="noticeItem.cover" class="notice-container-avatar" />
 		<div class="notice-container-text">
 			<div class="notice-text-title text-[#000000d9] dark:text-white">
diff --git a/src/layout/components/lay-notice/data.ts b/src/layout/components/lay-notice/data.ts
index 36de185..5439606 100644
--- a/src/layout/components/lay-notice/data.ts
+++ b/src/layout/components/lay-notice/data.ts
@@ -1,13 +1,16 @@
 import { $t } from '@/plugins/i18n';
-import { ref } from 'vue';
-import { fetchGetMessageList } from '@/api/v1/message';
+import { computed, ref } from 'vue';
+import { fetchGetUserMessageList } from '@/api/v1/message';
+import { throttle } from '@pureadmin/utils';
 
 export interface ListItem {
+	messageId: string;
 	cover: string;
 	title: string;
 	datetime: string;
 	type: string;
 	description: string;
+	messageType: string;
 	status?: 'primary' | 'success' | 'warning' | 'info' | 'danger';
 	extra?: string;
 }
@@ -26,19 +29,21 @@ export const noticesData = ref<TabItem[]>([]);
 
 /** 获取所有消息 */
 export const getAllMessageList = async () => {
-	const baseResult = await fetchGetMessageList(form);
-	const datalist = baseResult.data.list;
+	const baseResult = await fetchGetUserMessageList(form);
+	const datalist = baseResult?.data?.list;
 
 	// 通知消息
 	const notifications = datalist
 		.filter(message => message.messageType === 'notifications')
 		.map(message => ({
+			messageId: message.id,
 			cover: message.cover,
 			title: message.title,
 			datetime: message.createTime,
 			description: message.summary,
+			messageType: message.messageType,
 			type: '1',
-			status: message.statusType,
+			status: message.level,
 			extra: message.extra,
 		})) as ListItem[];
 
@@ -46,12 +51,14 @@ export const getAllMessageList = async () => {
 	const notify = datalist
 		.filter(message => message.messageType !== 'notifications' && message.messageType !== 'sys')
 		.map(message => ({
+			messageId: message.id,
 			cover: message.cover,
 			description: message.summary,
+			messageType: message.messageType,
 			title: message.title,
 			datetime: message.createTime,
 			type: '2',
-			status: message.statusType,
+			status: message.level,
 			extra: message.extra,
 		})) as ListItem[];
 
@@ -59,12 +66,14 @@ export const getAllMessageList = async () => {
 	const system = datalist
 		.filter(message => message.messageType === 'sys')
 		.map(message => ({
+			messageId: message.id,
 			cover: message.cover,
 			description: message.summary,
+			messageType: message.messageType,
 			title: message.title,
 			datetime: message.createTime,
 			type: '3',
-			status: message.statusType,
+			status: message.level,
 			extra: message.extra,
 		})) as ListItem[];
 
@@ -74,3 +83,23 @@ export const getAllMessageList = async () => {
 		{ key: '3', name: $t('status.systemMessage'), list: system, emptyText: $t('status.systemMessage') },
 	];
 };
+
+// 通知消息数据
+export const noticesNum = ref(0);
+export const notices = ref(noticesData);
+// 选择的消息栏目
+export const activeKey = ref(noticesData.value[0]?.key);
+export const getLabel = computed(() => item => item.name + (item.list.length > 0 ? `(${item.list.length})` : ''));
+
+/** 计算消息数量 */
+export const computedNoticesNum = throttle(async () => {
+	// 获取所有的消息
+	await getAllMessageList();
+	// 请求成功后将原本条数置为0
+	noticesNum.value = 0;
+	// 整合消息一共多少条
+	notices.value.map(v => (noticesNum.value += v.list.length));
+	// 默认选中的消息类别
+	activeKey.value = noticesData.value[0]?.key;
+	// 定时刷新
+}, 666);
diff --git a/src/layout/components/lay-notice/index.vue b/src/layout/components/lay-notice/index.vue
index ba9a443..999fd13 100644
--- a/src/layout/components/lay-notice/index.vue
+++ b/src/layout/components/lay-notice/index.vue
@@ -1,42 +1,20 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import { computed, onMounted, ref } from 'vue';
-import { getAllMessageList, noticesData } from './data';
+import { onMounted } from 'vue';
+import { activeKey, computedNoticesNum, getLabel, notices, noticesNum } from './data';
 import NoticeList from './components/NoticeList.vue';
 import BellIcon from '@iconify-icons/ep/bell';
-import { useIntervalFn } from '@vueuse/core';
 
 const { t } = useI18n();
-// 通知消息数据
-const noticesNum = ref(0);
-const notices = ref(noticesData);
-// 选择的消息栏目
-const activeKey = ref(noticesData.value[0]?.key);
-const getLabel = computed(() => item => item.name + (item.list.length > 0 ? `(${item.list.length})` : ''));
-
-/** 计算消息数量 */
-const computedNoticesNum = async () => {
-	// 获取所有的消息
-	await getAllMessageList();
-	// 请求成功后将原本条数置为0
-	noticesNum.value = 0;
-	// 整合消息一共多少条
-	notices.value.map(v => (noticesNum.value += v.list.length));
-	// 默认选中的消息类别
-	activeKey.value = noticesData.value[0]?.key;
-	// 定时刷新
-};
 
 onMounted(() => {
 	computedNoticesNum();
-	// 定时刷新消息内容
-	useIntervalFn(() => computedNoticesNum(), 1000 * 30);
 });
 </script>
 
 <template>
 	<el-dropdown placement="bottom-end" trigger="click">
-		<span :class="['dropdown-badge', 'navbar-bg-hover', 'select-none', Number(noticesNum) !== 0 && 'mr-[10px]']">
+		<span :class="['dropdown-badge', 'navbar-bg-hover', 'select-none', Number(noticesNum) !== 0 && 'mr-[10px]']" @click="computedNoticesNum">
 			<el-badge :max="99" :value="Number(noticesNum) === 0 ? '' : noticesNum">
 				<span class="header-notice-icon">
 					<IconifyIconOffline :icon="BellIcon" />
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index c44f1e2..a97e8c1 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -1,25 +1,25 @@
 const { VITE_HIDE_HOME } = import.meta.env;
-const Layout = () => import("@/layout/index.vue");
+const Layout = () => import('@/layout/index.vue');
 
 export default {
-  path: "/",
-  name: "Home",
-  component: Layout,
-  redirect: "/welcome",
-  meta: {
-    icon: "ep:home-filled",
-    title: "menus.home",
-    rank: 0
-  },
-  children: [
-    {
-      path: "/welcome",
-      name: "Welcome",
-      component: () => import("@/views/welcome/index.vue"),
-      meta: {
-        title: "menus.home",
-        showLink: VITE_HIDE_HOME !== "true"
-      }
-    }
-  ]
+	path: '/',
+	name: 'Home',
+	component: Layout,
+	redirect: '/welcome',
+	meta: {
+		icon: 'ep:home-filled',
+		title: 'menus.home',
+		rank: 0,
+	},
+	children: [
+		{
+			path: '/welcome',
+			name: 'Welcome',
+			component: () => import('@/views/welcome/index.vue'),
+			meta: {
+				title: 'menus.home',
+				showLink: VITE_HIDE_HOME !== 'true',
+			},
+		},
+	],
 } satisfies RouteConfigsTable;
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index e206d36..372347c 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -34,7 +34,27 @@ export default [
 		meta: {
 			title: 'buttons.accountSettings',
 			showLink: false,
-			rank: 104,
+			rank: 103,
 		},
 	},
+	{
+		path: '/message-detail',
+		name: 'MessageDetail',
+		component: () => import('@/views/message-management/message-detail/index.vue'),
+		meta: { title: 'message', showLink: false, rank: 104 },
+		children: [
+			{
+				path: '/message-detail/:messageType',
+				name: 'MessageDetailByMessageType',
+				component: () => import('@/views/message-management/message-detail/detail-type.vue'),
+				meta: { title: 'message', showLink: false },
+			},
+			{
+				path: '/message-detail/:messageType/:messageId',
+				name: 'MessageDetailByMessageId',
+				component: () => import('@/views/message-management/message-detail/detail-message-id.vue'),
+				meta: { title: 'message', showLink: false },
+			},
+		],
+	},
 ] satisfies Array<RouteConfigsTable>;
diff --git a/src/store/message/message.ts b/src/store/message/message.ts
index bbac187..9dc59ec 100644
--- a/src/store/message/message.ts
+++ b/src/store/message/message.ts
@@ -28,6 +28,10 @@ export const useMessageStore = defineStore('messageStore', {
 				content: undefined,
 				// 编辑器类型
 				editorType: undefined,
+				// 消息等级
+				level: undefined,
+				// 消息等级详情
+				extra: undefined,
 				// 0:未读 1:已读
 				status: undefined,
 			},
diff --git a/src/views/message-management/message-detail/detail-message-id.vue b/src/views/message-management/message-detail/detail-message-id.vue
new file mode 100644
index 0000000..e49c05c
--- /dev/null
+++ b/src/views/message-management/message-detail/detail-message-id.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router';
+import { onMounted, ref } from 'vue';
+import 'plus-pro-components/es/components/check-card-group/style/css';
+import MarkdownPreview from '@/components/Editor/MarkdownPreview.vue';
+import { fetchGetMessageDetailById } from '@/api/v1/message';
+import { decode } from 'js-base64';
+
+const route = useRoute();
+const messageDetail = ref<any>({});
+
+/** 获取消息详情 */
+const getMessageDetail = async () => {
+	// 从路由中获取地址栏信息
+	const messageId = route.params.messageId;
+
+	// 获取消息详情
+	const result = await fetchGetMessageDetailById({ id: messageId });
+	if (result.code !== 200) return;
+
+	// 将消息详情赋值
+	messageDetail.value = result.data;
+
+	// 解码消息内容
+	messageDetail.value.content = decode(messageDetail.value.content);
+};
+
+onMounted(() => {
+	getMessageDetail();
+});
+</script>
+
+<template>
+	<div class="flex flex-col">
+		<header class="flex items-center h-[80px]">
+			<el-avatar :src="messageDetail.cover" size="large" />
+			<div class="content ms-3">
+				<h3>{{ messageDetail.title }}</h3>
+
+				<p>{{ messageDetail.summary }}</p>
+			</div>
+		</header>
+
+		<main>
+			<span>
+				<el-text>{{ messageDetail.updateTime }}</el-text>
+				<el-text type="primary">&nbsp;&nbsp; By：{{ messageDetail.sendNickname }}</el-text>
+			</span>
+			<markdown-preview v-if="messageDetail.editorType === 'markdown'" id="message-detail-markdown" :text="messageDetail.content" />
+			<div v-else v-html="messageDetail.content" />
+		</main>
+	</div>
+</template>
diff --git a/src/views/message-management/message-detail/detail-type.vue b/src/views/message-management/message-detail/detail-type.vue
new file mode 100644
index 0000000..95e61cb
--- /dev/null
+++ b/src/views/message-management/message-detail/detail-type.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router';
+import { onMounted, ref } from 'vue';
+import { PlusCheckCardGroup } from 'plus-pro-components';
+import 'plus-pro-components/es/components/check-card-group/style/css';
+
+const route = useRoute();
+
+/** 获取消息详情 */
+const getMessageDetail = () => {
+	const messageId = route.params.messageId;
+};
+const options = [
+	{
+		title: '标题一',
+		value: '0',
+		description: '坚持梦想，成就不凡的自己',
+		avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+	},
+	{
+		title: '标题二',
+		value: '1',
+		description: '每一次努力，都是成长的契机',
+		avatar: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+	},
+];
+const size = ref('default');
+const dynamicSize = ref();
+const list = ref('0');
+onMounted(() => {
+	getMessageDetail();
+});
+</script>
+
+<template>
+	<PlusCheckCardGroup v-model="list" :disabled="size === 'disabled'" :options="options" :size="dynamicSize" />
+</template>
diff --git a/src/views/message-management/message-detail/index.vue b/src/views/message-management/message-detail/index.vue
new file mode 100644
index 0000000..dceaf8d
--- /dev/null
+++ b/src/views/message-management/message-detail/index.vue
@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import { useRoute, useRouter } from 'vue-router';
+import { onBeforeMount, ref } from 'vue';
+import { deviceDetection, useGlobal } from '@pureadmin/utils';
+import { useDataThemeChange } from '@/layout/hooks/useDataThemeChange';
+import leftLine from '@iconify-icons/ri/arrow-left-s-line';
+import { $t } from '@/plugins/i18n';
+import { useMessageTypeStore } from '@/store/message/messageType';
+
+const router = useRouter();
+const isOpen = ref(!deviceDetection());
+const { $storage } = useGlobal<GlobalPropertiesApi>();
+const witchPane = ref('profile');
+const messageTypeStore = useMessageTypeStore();
+const route = useRoute();
+const routerMessageType = ref('');
+
+/** 点击菜单时 */
+const onMenuClick = (item: any) => {
+	const messageType = item.messageType;
+	const messageId = item.messageId;
+	routerMessageType.value = messageType;
+	router.push({ path: `/message-detail/${item.messageType}` });
+};
+
+onBeforeMount(() => {
+	messageTypeStore.getAllMessageTypeList();
+	routerMessageType.value = route.params.messageType as string;
+	useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+});
+</script>
+
+<template>
+	<el-container class="h-full">
+		<el-aside
+			v-if="isOpen"
+			:width="deviceDetection() ? '180px' : '240px'"
+			class="pure-account-settings overflow-hidden px-2 dark:!bg-[var(--el-bg-color)] border-r-[1px] border-[var(--pure-border-color)]"
+		>
+			<el-menu :default-active="witchPane" class="pure-account-settings-menu">
+				<!--<el-menu-item class="hover:!transition-all hover:!duration-200 hover:!text-base !h-[50px]" @click="router.go(-1)">-->
+				<el-menu-item class="hover:!transition-all hover:!duration-200 hover:!text-base !h-[50px]" @click="router.push('/')">
+					<div class="flex items-center">
+						<IconifyIconOffline :icon="leftLine" />
+						<span class="ml-2">{{ $t('back') }}</span>
+					</div>
+				</el-menu-item>
+				<el-menu-item v-for="item in messageTypeStore.allMessageTypeList" :key="item.id" :class="routerMessageType === item.messageType ? 'is-active' : ''" :index="item.id" @click="onMenuClick(item)">
+					<div class="flex items-center z-10">
+						<span>{{ item.messageName }}</span>
+					</div>
+				</el-menu-item>
+			</el-menu>
+		</el-aside>
+		<el-main>
+			<RouterView />
+		</el-main>
+	</el-container>
+</template>
+
+<style lang="scss">
+.pure-account-settings {
+	background: $menuBg;
+}
+
+.pure-account-settings-menu {
+	background-color: transparent;
+	border: none;
+
+	.el-menu-item {
+		height: 48px !important;
+		color: $menuText;
+		background-color: transparent !important;
+		transition: color 0.2s;
+
+		&:hover {
+			color: $menuTitleHover !important;
+		}
+
+		&.is-active {
+			color: #fff !important;
+
+			&:hover {
+				color: #fff !important;
+			}
+
+			&::before {
+				position: absolute;
+				inset: 0 8px;
+				margin: 4px 0;
+				clear: both;
+				content: '';
+				background: var(--el-color-primary);
+				border-radius: 3px;
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+body[layout] {
+	.el-menu--vertical .is-active {
+		color: #fff !important;
+		transition: color 0.2s;
+
+		&:hover {
+			color: #fff !important;
+		}
+	}
+}
+</style>
diff --git a/src/views/message-management/message-editing/index.vue b/src/views/message-management/message-editing/index.vue
new file mode 100644
index 0000000..d086e79
--- /dev/null
+++ b/src/views/message-management/message-editing/index.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import SplitPane from '@/components/SplitPane';
+import MessageEditorFrom from '@/views/message-management/message-editing/message-editor-from.vue';
+import RichEditor from '@/views/message-management/message-editing/rich-editor.vue';
+import { formState } from '@/views/message-management/message-editing/utils/hooks';
+import MarkdownEditor from '@/views/message-management/message-editing/markdown-editor.vue';
+import { settingLR } from '@/views/message-management/message-editing/utils/columns';
+</script>
+
+<template>
+	<el-card shadow="never">
+		<div class="split-pane">
+			<SplitPane :splitSet="settingLR">
+				<template #paneL>
+					<rich-editor v-if="formState.editorType === 'rich'" />
+					<markdown-editor v-else />
+				</template>
+
+				<template #paneR>
+					<message-editor-from />
+				</template>
+			</SplitPane>
+		</div>
+	</el-card>
+</template>
+
+<style lang="scss" scoped>
+.split-pane {
+	width: 100%;
+	height: calc(100vh - 120px);
+}
+</style>
diff --git a/src/views/messageManagement/messageEditing/markdown-editor.vue b/src/views/message-management/message-editing/markdown-editor.vue
similarity index 90%
rename from src/views/messageManagement/messageEditing/markdown-editor.vue
rename to src/views/message-management/message-editing/markdown-editor.vue
index 30ed4ab..003aa20 100644
--- a/src/views/messageManagement/messageEditing/markdown-editor.vue
+++ b/src/views/message-management/message-editing/markdown-editor.vue
@@ -2,7 +2,7 @@
 import { MdEditor } from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
 import { fetchUploadFile } from '@/api/v1/system';
-import { formState } from '@/views/messageManagement/messageEditing/utils/hooks';
+import { formState } from '@/views/message-management/message-editing/utils/hooks';
 
 /**
  * * 上传图片
diff --git a/src/views/messageManagement/messageEditing/message-editor-from.vue b/src/views/message-management/message-editing/message-editor-from.vue
similarity index 85%
rename from src/views/messageManagement/messageEditing/message-editor-from.vue
rename to src/views/message-management/message-editing/message-editor-from.vue
index 48866a9..03917bf 100644
--- a/src/views/messageManagement/messageEditing/message-editor-from.vue
+++ b/src/views/message-management/message-editing/message-editor-from.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { beforeUpload, coverUrl, formState, loading, onSearchUserinfo, onUpload, userDataList } from '@/views/messageManagement/messageEditing/utils/hooks';
+import { beforeUpload, coverUrl, formState, loading, onSearchUserinfo, onUpload, userDataList } from '@/views/message-management/message-editing/utils/hooks';
 import { onMounted, ref, toRaw } from 'vue';
 import { $t } from '@/plugins/i18n';
-import { rules } from '@/views/messageManagement/messageEditing/utils/columns';
+import { messageLevel, rules } from '@/views/message-management/message-editing/utils/columns';
 import { FormInstance } from 'element-plus';
-import { editorTypeList } from '@/views/messageManagement/message/utils/columns';
+import { editorTypeList } from '@/views/message-management/message/utils/columns';
 import LoadingSvg from '@/assets/svg/loading.svg';
 import { useMessageTypeStore } from '@/store/message/messageType';
 import { encode } from 'js-base64';
@@ -57,6 +57,7 @@ onMounted(() => {
 	messageTypeStore.getAllMessageTypeList();
 });
 </script>
+
 <template>
 	<el-form ref="formRef" :model="formState" :rules="rules" class="w-[100%] p-5" label-width="auto">
 		<!-- 标题 -->
@@ -117,6 +118,18 @@ onMounted(() => {
 			<el-input v-model="formState.summary" :autosize="{ minRows: 3, maxRows: 6 }" maxlength="200" minlength="10" show-word-limit type="textarea" />
 		</el-form-item>
 
+		<!-- 消息等级 -->
+		<el-form-item :label="$t('level')" prop="level">
+			<el-select v-model="formState.level" :placeholder="$t('level')" clearable filterable remote remote-show-suffix>
+				<el-option v-for="item in messageLevel" :key="item" :label="$t(item)" :value="item" />
+			</el-select>
+		</el-form-item>
+
+		<!-- 消息等级简介 -->
+		<el-form-item :label="$t('extra')" prop="extra">
+			<el-input v-model="formState.extra" maxlength="20" minlength="10" show-word-limit type="text" />
+		</el-form-item>
+
 		<!-- 提交 -->
 		<el-form-item>
 			<el-button type="primary" @click="submitForm(formRef)">{{ $t('submit') }}</el-button>
diff --git a/src/views/messageManagement/messageEditing/rich-editor.vue b/src/views/message-management/message-editing/rich-editor.vue
similarity index 95%
rename from src/views/messageManagement/messageEditing/rich-editor.vue
rename to src/views/message-management/message-editing/rich-editor.vue
index 427eadf..595edc1 100644
--- a/src/views/messageManagement/messageEditing/rich-editor.vue
+++ b/src/views/message-management/message-editing/rich-editor.vue
@@ -2,7 +2,7 @@
 import { onBeforeUnmount, ref, shallowRef } from 'vue';
 import '@wangeditor/editor/dist/css/style.css';
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
-import { formState } from '@/views/messageManagement/messageEditing/utils/hooks';
+import { formState } from '@/views/message-management/message-editing/utils/hooks';
 import { getToken } from '@/utils/auth';
 
 const mode = 'default';
diff --git a/src/views/messageManagement/messageEditing/utils/columns.ts b/src/views/message-management/message-editing/utils/columns.ts
similarity index 68%
rename from src/views/messageManagement/messageEditing/utils/columns.ts
rename to src/views/message-management/message-editing/utils/columns.ts
index a477b48..6147dae 100644
--- a/src/views/messageManagement/messageEditing/utils/columns.ts
+++ b/src/views/message-management/message-editing/utils/columns.ts
@@ -1,4 +1,6 @@
 import { $t } from '@/plugins/i18n';
+import type { ContextProps } from '@/components/SplitPane';
+import { reactive } from 'vue';
 
 export const rules = {
 	// 消息标题
@@ -12,3 +14,11 @@ export const rules = {
 	// 消息简介
 	summary: [{ required: true, message: `${$t('input')}${$t('summary')}`, trigger: 'blur' }],
 };
+
+export const messageLevel = ['primary', 'success', 'warning', 'info', 'danger'];
+
+export const settingLR: ContextProps = reactive({
+	minPercent: 20,
+	defaultPercent: 80,
+	split: 'vertical',
+});
diff --git a/src/views/messageManagement/messageEditing/utils/hooks.ts b/src/views/message-management/message-editing/utils/hooks.ts
similarity index 98%
rename from src/views/messageManagement/messageEditing/utils/hooks.ts
rename to src/views/message-management/message-editing/utils/hooks.ts
index cd3bf7e..de8dff1 100644
--- a/src/views/messageManagement/messageEditing/utils/hooks.ts
+++ b/src/views/message-management/message-editing/utils/hooks.ts
@@ -20,6 +20,8 @@ export const formState = reactive({
 	editorType: 'markdown',
 	status: false,
 	summary: '',
+	level: '',
+	extra: '',
 	cover: '',
 });
 const adminUserStore = useAdminUserStore();
diff --git a/src/views/messageManagement/messageType/index.vue b/src/views/message-management/message-type/index.vue
similarity index 97%
rename from src/views/messageManagement/messageType/index.vue
rename to src/views/message-management/message-type/index.vue
index 3289428..b63df52 100644
--- a/src/views/messageManagement/messageType/index.vue
+++ b/src/views/message-management/message-type/index.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { columns } from '@/views/messageManagement/messageType/utils/columns';
+import { columns } from '@/views/message-management/message-type/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/messageManagement/messageType/utils/hooks';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/message-management/message-type/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
diff --git a/src/views/messageManagement/messageType/message-type-dialog.vue b/src/views/message-management/message-type/message-type-dialog.vue
similarity index 91%
rename from src/views/messageManagement/messageType/message-type-dialog.vue
rename to src/views/message-management/message-type/message-type-dialog.vue
index 77c7640..7018b55 100644
--- a/src/views/messageManagement/messageType/message-type-dialog.vue
+++ b/src/views/message-management/message-type/message-type-dialog.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { rules } from '@/views/messageManagement/messageType/utils/columns';
-import { FormProps } from '@/views/messageManagement/messageType/utils/types';
+import { rules } from '@/views/message-management/message-type/utils/columns';
+import { FormProps } from '@/views/message-management/message-type/utils/types';
 import { $t } from '@/plugins/i18n';
 import { usePublicHooks } from '@/views/hooks';
 
diff --git a/src/views/messageManagement/messageType/utils/columns.tsx b/src/views/message-management/message-type/utils/columns.tsx
similarity index 100%
rename from src/views/messageManagement/messageType/utils/columns.tsx
rename to src/views/message-management/message-type/utils/columns.tsx
diff --git a/src/views/messageManagement/messageType/utils/hooks.ts b/src/views/message-management/message-type/utils/hooks.ts
similarity index 94%
rename from src/views/messageManagement/messageType/utils/hooks.ts
rename to src/views/message-management/message-type/utils/hooks.ts
index 300ff62..7177826 100644
--- a/src/views/messageManagement/messageType/utils/hooks.ts
+++ b/src/views/message-management/message-type/utils/hooks.ts
@@ -1,9 +1,9 @@
 import { addDialog } from '@/components/BaseDialog/index';
-import MessageTypeDialog from '@/views/messageManagement/messageType/message-type-dialog.vue';
+import MessageTypeDialog from '@/views/message-management/message-type/message-type-dialog.vue';
 import { useMessageTypeStore } from '@/store/message/messageType';
 import { h, ref } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/messageManagement/messageType/utils/types';
+import type { FormItemProps } from '@/views/message-management/message-type/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 
diff --git a/src/views/messageManagement/messageType/utils/types.ts b/src/views/message-management/message-type/utils/types.ts
similarity index 100%
rename from src/views/messageManagement/messageType/utils/types.ts
rename to src/views/message-management/message-type/utils/types.ts
diff --git a/src/views/messageManagement/message/index.vue b/src/views/message-management/message/index.vue
similarity index 80%
rename from src/views/messageManagement/message/index.vue
rename to src/views/message-management/message/index.vue
index 10220ed..eb857a4 100644
--- a/src/views/messageManagement/message/index.vue
+++ b/src/views/message-management/message/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import { columns, editorTypeList } from '@/views/messageManagement/message/utils/columns';
+import { columns } from '@/views/message-management/message/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/messageManagement/message/utils/hooks';
+import { deleteIds, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/message-management/message/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
@@ -12,6 +12,8 @@ import { $t } from '@/plugins/i18n';
 import { useMessageStore } from '@/store/message/message';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import { FormInstance } from 'element-plus';
+import { messageLevel } from '@/views/message-management/message-editing/utils/columns';
+import { isReadStatus } from '@/enums/baseConstant';
 
 const tableRef = ref();
 const formRef = ref();
@@ -63,31 +65,28 @@ onMounted(() => {
 				<el-input v-model="messageStore.form.title" :placeholder="`${$t('input')}${$t('title')}`" class="!w-[180px]" clearable />
 			</el-form-item>
 
-			<!-- 发送人昵称 -->
-			<el-form-item :label="$t('sendNickname')" prop="sendNickname">
-				<el-input v-model="messageStore.form.sendNickname" :placeholder="`${$t('input')}${$t('sendNickname')}`" class="!w-[180px]" clearable />
-			</el-form-item>
-
 			<!-- 消息类型 -->
 			<el-form-item :label="$t('messageType')" prop="messageType">
 				<el-input v-model="messageStore.form.messageType" :placeholder="`${$t('input')}${$t('messageType')}`" class="!w-[180px]" clearable />
 			</el-form-item>
 
-			<!-- 消息内容 -->
-			<el-form-item :label="$t('content')" prop="content">
-				<el-input v-model="messageStore.form.content" :placeholder="`${$t('input')}${$t('content')}`" class="!w-[180px]" clearable />
+			<!-- 消息等级 -->
+			<el-form-item :label="$t('level')" prop="level">
+				<el-select v-model="messageStore.form.level" :placeholder="$t('level')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
+					<el-option v-for="item in messageLevel" :key="item" :label="$t(item)" :value="item" />
+				</el-select>
 			</el-form-item>
 
-			<!-- 编辑器类型 -->
-			<el-form-item :label="$t('editorType')" prop="editorType">
-				<el-select v-model="messageStore.form.editorType" :placeholder="`${$t('select')}${$t('editorType')}`" class="!w-[180px]" clearable filterable>
-					<el-option v-for="(item, index) in editorTypeList" :key="index" :label="item.label" :navigationBar="false" :value="item.value" />
-				</el-select>
+			<!-- 消息等级简介 -->
+			<el-form-item :label="$t('extra')" prop="extra">
+				<el-input v-model="messageStore.form.extra" class="!w-[180px]" maxlength="20" minlength="10" show-word-limit type="text" />
 			</el-form-item>
 
 			<!-- 0:未读 1:已读 -->
 			<el-form-item :label="$t('status')" prop="status">
-				<el-input v-model="messageStore.form.status" :placeholder="`${$t('input')}${$t('status')}`" class="!w-[180px]" clearable />
+				<el-select v-model="messageStore.form.status" :placeholder="$t('status')" class="!w-[180px]" clearable filterable remote remote-show-suffix>
+					<el-option v-for="(item, index) in isReadStatus" :key="index" :label="item.label" :value="item.value" />
+				</el-select>
 			</el-form-item>
 
 			<el-form-item>
diff --git a/src/views/message-management/message/markdown-editor.vue b/src/views/message-management/message/markdown-editor.vue
new file mode 100644
index 0000000..07d427f
--- /dev/null
+++ b/src/views/message-management/message/markdown-editor.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { MdEditor } from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+import { fetchUploadFile } from '@/api/v1/system';
+import { updateMessage } from '@/views/message-management/message/utils/hooks';
+
+/**
+ * * 上传图片
+ * @param files
+ * @param callback
+ */
+const onUploadImg = async (files: any, callback: any) => {
+	// 上传图片等待结果
+	const res = await Promise.all(
+		files.map((file: any) => {
+			return new Promise(async resolve => {
+				const form = new FormData();
+				form.append('file', file);
+				form.append('type', 'message');
+				resolve(await fetchUploadFile(form));
+			});
+		}),
+	);
+
+	// 插入图片内容
+	callback(res.map(item => item.data.url));
+};
+</script>
+
+<template>
+	<MdEditor v-model="updateMessage.content" :showToolbarName="true" style="height: calc(100vh - 120px)" @onUploadImg="onUploadImg" />
+</template>
diff --git a/src/views/message-management/message/message-dialog.vue b/src/views/message-management/message/message-dialog.vue
new file mode 100644
index 0000000..81fac56
--- /dev/null
+++ b/src/views/message-management/message/message-dialog.vue
@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { editorTypeList, rules } from '@/views/message-management/message/utils/columns';
+import { $t } from '@/plugins/i18n';
+import { usePublicHooks } from '@/views/hooks';
+import { useMessageTypeStore } from '@/store/message/messageType';
+import LoadingSvg from '@/assets/svg/loading.svg';
+import { coverUrl, loading, onSearchUserinfo, onUpload, updateMessage, userDataList } from '@/views/message-management/message/utils/hooks';
+import { messageLevel, settingLR } from '@/views/message-management/message-editing/utils/columns';
+import { Plus } from '@element-plus/icons-vue';
+import { beforeUpload } from '@/views/message-management/message-editing/utils/hooks';
+import SplitPane from '@/components/SplitPane';
+import RichEditor from '@/views/message-management/message/rich-editor.vue';
+import MarkdownEditor from '@/views/message-management/message/markdown-editor.vue';
+
+// 用户是否停用样式
+const { switchStyle } = usePublicHooks();
+const formRef = ref<FormInstance>();
+const messageTypeStore = useMessageTypeStore();
+
+onMounted(() => {
+	messageTypeStore.getAllMessageTypeList();
+});
+
+defineExpose({ formRef });
+</script>
+
+<template>
+	<el-card shadow="never" style="height: calc(100vh - 200px); overflow: auto">
+		<div class="split-pane">
+			<SplitPane :splitSet="settingLR">
+				<template #paneL>
+					<rich-editor v-if="updateMessage.editorType === 'rich'" />
+					<markdown-editor v-else />
+				</template>
+
+				<template #paneR>
+					<el-form ref="formRef" :model="updateMessage" :rules="rules" class="w-[100%] p-5" label-width="auto">
+						<!-- 标题 -->
+						<el-form-item :label="$t('title')" prop="title">
+							<el-input v-model="updateMessage.title" />
+						</el-form-item>
+
+						<!-- 消息类型 -->
+						<el-form-item :label="$t('messageType')" prop="messageType">
+							<el-select v-model="updateMessage.messageType" :placeholder="`${$t('select')}${$t('messageType')}`" clearable filterable>
+								<el-option v-for="(item, index) in messageTypeStore.allMessageTypeList" :key="index" :label="item.messageName" :navigationBar="false" :value="item.messageType" />
+							</el-select>
+						</el-form-item>
+
+						<!-- 接收人ID -->
+						<el-form-item :label="$t('receivedUserIds')" prop="receivedUserIds">
+							<el-select
+								v-model="updateMessage.receivedUserIds"
+								:loading="loading"
+								:placeholder="$t('receivedUserIdTip')"
+								:remote-method="onSearchUserinfo"
+								clearable
+								filterable
+								multiple
+								remote
+								remote-show-suffix
+							>
+								<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
+								<template #loading>
+									<el-icon class="is-loading">
+										<LoadingSvg />
+									</el-icon>
+								</template>
+							</el-select>
+						</el-form-item>
+
+						<!-- 编辑器类型 -->
+						<el-form-item :label="$t('editorType')" prop="editorType">
+							<el-radio-group v-model="updateMessage.editorType">
+								<el-radio v-for="(item, index) in editorTypeList" :key="index" :navigationBar="false" :value="item.value">
+									{{ item.label }}
+								</el-radio>
+							</el-radio-group>
+						</el-form-item>
+
+						<!-- 是否已读 -->
+						<el-form-item :label="$t('isRead')" prop="status">
+							<el-switch v-model="updateMessage.status" :active-text="$t('readAlready')" :active-value="true" :inactive-text="$t('unread')" :inactive-value="false" :style="switchStyle" inline-prompt />
+						</el-form-item>
+
+						<!-- 封面内容 -->
+						<el-form-item :label="$t('cover')" prop="cover">
+							<el-upload :auto-upload="true" :before-upload="beforeUpload" :http-request="onUpload" :show-file-list="false" accept="image/*" drag>
+								<el-image v-if="coverUrl" :src="coverUrl" fit="cover" lazy>
+									<template #placeholder>
+										<img alt="" src="@/assets/images/tip/loading.gif" />
+									</template>
+								</el-image>
+								<el-icon v-else size="36">
+									<Plus />
+								</el-icon>
+							</el-upload>
+							<el-button v-show="coverUrl" link type="primary" @click="coverUrl = ''"> 删除图片</el-button>
+						</el-form-item>
+
+						<!-- 简介 -->
+						<el-form-item :label="$t('summary')" prop="summary">
+							<el-input v-model="updateMessage.summary" :autosize="{ minRows: 3, maxRows: 6 }" maxlength="200" minlength="10" show-word-limit type="textarea" />
+						</el-form-item>
+
+						<!-- 消息等级 -->
+						<el-form-item :label="$t('level')" prop="level">
+							<el-select v-model="updateMessage.level" :placeholder="$t('level')" clearable filterable remote remote-show-suffix>
+								<el-option v-for="item in messageLevel" :key="item" :label="$t(item)" :value="item" />
+							</el-select>
+						</el-form-item>
+
+						<!-- 消息等级简介 -->
+						<el-form-item :label="$t('extra')" prop="extra">
+							<el-input v-model="updateMessage.extra" maxlength="20" minlength="10" show-word-limit type="text" />
+						</el-form-item>
+					</el-form>
+				</template>
+			</SplitPane>
+		</div>
+	</el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-upload-dragger) {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 90px;
+	height: 90px;
+}
+</style>
diff --git a/src/views/message-management/message/rich-editor.vue b/src/views/message-management/message/rich-editor.vue
new file mode 100644
index 0000000..154e511
--- /dev/null
+++ b/src/views/message-management/message/rich-editor.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, ref, shallowRef } from 'vue';
+import '@wangeditor/editor/dist/css/style.css';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import { getToken } from '@/utils/auth';
+import { updateMessage } from '@/views/message-management/message/utils/hooks';
+
+const mode = 'default';
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef();
+const toolbarConfig: any = { excludeKeys: 'fullScreen' };
+const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} };
+const token = ref(getToken().token);
+
+editorConfig.MENU_CONF['uploadImage'] = {
+	// 服务端上传地址，根据实际业务改写
+	server: '/api/files/upload',
+	// form-data 的 fieldName，根据实际业务改写
+	fieldName: 'file',
+	// 选择文件时的类型限制，根据实际业务改写
+	allowedFileTypes: ['image/png', 'image/jpg', 'image/jpeg'],
+	meta: { type: 'message' },
+	headers: { token: token.value },
+	// 自定义插入图片
+	customInsert(res: any, insertFn) {
+		// res.data.url是后端返回的图片地址，根据实际业务改写
+		if (res.data.url) {
+			// const form = new FormData();
+			// form.append('file', file);
+			// form.append('type', 'message');
+			// await fetchUploadFile(form)
+			setTimeout(() => {
+				// insertFn插入图片进编辑器
+				insertFn(res.data.url);
+			}, 2000);
+		}
+	},
+};
+
+const handleCreated = editor => {
+	// 记录 editor 实例，重要！
+	editorRef.value = editor;
+};
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+	const editor = editorRef.value;
+	if (editor == null) return;
+	editor.destroy();
+});
+</script>
+
+<template>
+	<div class="wangeditor">
+		<Toolbar :defaultConfig="toolbarConfig" :editor="editorRef" :mode="mode" style="border-bottom: 1px solid #ccc" />
+		<Editor v-model="updateMessage.content" :defaultConfig="editorConfig" :mode="mode" style="height: 500px; overflow-y: hidden" @onCreated="handleCreated" />
+	</div>
+</template>
diff --git a/src/views/messageManagement/message/utils/columns.ts b/src/views/message-management/message/utils/columns.tsx
similarity index 84%
rename from src/views/messageManagement/message/utils/columns.ts
rename to src/views/message-management/message/utils/columns.tsx
index 3ff46d7..df7da95 100644
--- a/src/views/messageManagement/message/utils/columns.ts
+++ b/src/views/message-management/message/utils/columns.tsx
@@ -1,6 +1,7 @@
 import { reactive } from 'vue';
 import { $t } from '@/plugins/i18n';
 import type { FormRules } from 'element-plus';
+import { ElTag } from 'element-plus';
 
 // 表格列
 export const columns: TableColumnList = [
@@ -8,28 +9,28 @@ export const columns: TableColumnList = [
 	{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
 	// 消息标题
 	{ label: $t('title'), prop: 'title' },
-	// 接收人用户ID
-	{
-		label: $t('receivedUserIds'),
-		prop: 'receivedUserIds',
-		formatter({ receivedUserIds }) {
-			return !receivedUserIds ? $t('all') : $t('portion');
-		},
-	},
 	// 发送人昵称
 	{ label: $t('sendNickname'), prop: 'sendNickname' },
 	// 消息类型
 	{ label: $t('messageType'), prop: 'messageType' },
-	// 消息内容
-	{ label: $t('content'), prop: 'content' },
 	// 编辑器类型
 	{ label: $t('editorType'), prop: 'editorType' },
+	// 编辑器类型
+	{
+		label: $t('level'),
+		prop: 'level',
+		formatter({ level }) {
+			return <ElTag type={level}>{$t(level)}</ElTag>;
+		},
+	},
+	// 编辑器类型
+	{ label: $t('extra'), prop: 'extra' },
 	// 0:未读 1:已读
 	{
 		label: $t('status'),
 		prop: 'status',
 		formatter({ status }) {
-			return status ? $t('readAlready') : $t('unread');
+			return status ? <ElTag type={'info'}>{$t('readAlready')}</ElTag> : <ElTag type={'primary'}>{$t('unread')}</ElTag>;
 		},
 	},
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
diff --git a/src/views/messageManagement/message/utils/hooks.ts b/src/views/message-management/message/utils/hooks.ts
similarity index 56%
rename from src/views/messageManagement/message/utils/hooks.ts
rename to src/views/message-management/message/utils/hooks.ts
index 68ee924..d3daf6d 100644
--- a/src/views/messageManagement/message/utils/hooks.ts
+++ b/src/views/message-management/message/utils/hooks.ts
@@ -1,20 +1,51 @@
 import { addDialog } from '@/components/BaseDialog/index';
-import MessageDialog from '@/views/messageManagement/message/message-dialog.vue';
+import MessageDialog from '@/views/message-management/message/message-dialog.vue';
 import { useMessageStore } from '@/store/message/message';
-import { h, ref } from 'vue';
+import { h, reactive, ref, toRaw } from 'vue';
 import { message, messageBox } from '@/utils/message';
-import type { FormItemProps } from '@/views/messageManagement/message/utils/types';
 import { $t } from '@/plugins/i18n';
 import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
 import { useAdminUserStore } from '@/store/system/adminUser';
+import { fetchGetReceivedUserinfoByMessageId } from '@/api/v1/message';
+import { decode, encode } from 'js-base64';
+import type { UploadRequestOptions } from 'element-plus';
+import { fetchUploadFile } from '@/api/v1/system';
 
 export const formRef = ref();
 // 删除ids
 export const deleteIds = ref([]);
 // 用户信息列表
 export const userDataList = ref();
+// 更新时封面图片
+export const coverUrl = ref('');
 // 搜索用户加载
 export const loading = ref(false);
+export const updateMessage = reactive({
+	// 消息标题
+	title: undefined,
+	// 封面
+	cover: undefined,
+	// 接收人用户ID
+	receivedUserIds: undefined,
+	// 发送人用户ID
+	sendUserId: undefined,
+	// 发送人昵称
+	sendNickName: undefined,
+	// 消息类型
+	messageType: undefined,
+	// 消息内容
+	content: undefined,
+	// 简介
+	summary: undefined,
+	// 消息等级
+	level: undefined,
+	// 消息等级类型
+	extra: undefined,
+	// 编辑器类型
+	editorType: undefined,
+	// 0:未读 1:已读
+	status: undefined,
+});
 const messageStore = useMessageStore();
 const adminUserStore = useAdminUserStore();
 
@@ -25,39 +56,55 @@ export async function onSearch() {
 	messageStore.loading = false;
 }
 
+/** 搜索 */
+export const onSearchUserinfo = async (keyword: string) => {
+	loading.value = true;
+	userDataList.value = await adminUserStore.queryUser({ keyword });
+	loading.value = false;
+};
+
 /**
  * * 更新系统消息
  * @param row
  */
 export async function onUpdate(row: any) {
-	await onSearchUserinfo('');
+	// 将表格数据合并到更新数据中
+	Object.assign(updateMessage, row);
+
+	// 解码内容
+	updateMessage.content = decode(row.content);
+
+	// 获取当前消息内容和接收者信息
+	const result = await fetchGetReceivedUserinfoByMessageId({ messageId: row.id });
+	userDataList.value = result.data.map((item: any) => ({
+		id: item.receivedUserId,
+		nickname: item.nickname,
+		username: item.username,
+	}));
+	updateMessage.receivedUserIds = result.data.map((item: any) => item.receivedUserId);
+
+	// 设置封面图片
+	coverUrl.value = row.cover;
 
 	addDialog({
 		title: `${$t('modify')}${$t('message')}`,
-		width: '30%',
-		props: {
-			formInline: {
-				title: row.title,
-				receivedUserIds: row.receivedUserIds ? row.receivedUserIds.split(',') : row.receivedUserIds,
-				sendUserId: row.sendUserId,
-				sendNickName: row.sendNickName,
-				messageType: row.messageType,
-				content: row.content,
-				editorType: row.editorType,
-				status: row.status,
-			},
-		},
+		width: '85%',
 		draggable: true,
 		fullscreenIcon: true,
 		closeOnClickModal: false,
 		contentRenderer: () => h(MessageDialog, { ref: formRef }),
-		beforeSure: (done, { options }) => {
-			const form = options.props.formInline as FormItemProps;
+		beforeSure: done => {
 			formRef.value.formRef.validate(async (valid: any) => {
 				if (!valid) return;
 
-				const result = await messageStore.updateMessage({ ...form, id: row.id });
+				// 将更新的信息进行编码
+				const data = toRaw(updateMessage);
+				data.content = encode(data.content);
+
+				// 更新消息内容
+				const result = await messageStore.updateMessage({ ...data, id: row.id });
 				if (!result) return;
+				Object.assign(updateMessage, {});
 				done();
 				await onSearch();
 			});
@@ -113,9 +160,10 @@ export const onDeleteBatch = async () => {
 	});
 };
 
-/** 搜索 */
-export const onSearchUserinfo = async (keyword: string) => {
-	loading.value = true;
-	userDataList.value = await adminUserStore.queryUser({ keyword });
-	loading.value = false;
+/** 上传时 */
+export const onUpload = async (options: UploadRequestOptions) => {
+	const data = { file: options.file, type: 'message' };
+	const result: any = await fetchUploadFile(data);
+	coverUrl.value = result.data.url;
+	updateMessage.cover = result.data.filepath;
 };
diff --git a/src/views/messageManagement/message/utils/types.ts b/src/views/message-management/message/utils/types.ts
similarity index 85%
rename from src/views/messageManagement/message/utils/types.ts
rename to src/views/message-management/message/utils/types.ts
index f3c19ac..580ce4f 100644
--- a/src/views/messageManagement/message/utils/types.ts
+++ b/src/views/message-management/message/utils/types.ts
@@ -10,6 +10,10 @@ export interface FormItemProps {
 	messageType: string;
 	// 消息内容
 	content: string;
+	// 消息等级
+	level: string;
+	// 消息等级类型
+	extra: string;
 	// 编辑器类型
 	editorType: string;
 	// 0:未读 1:已读
diff --git a/src/views/messageManagement/message/message-dialog.vue b/src/views/messageManagement/message/message-dialog.vue
deleted file mode 100644
index 8b0b6b2..0000000
--- a/src/views/messageManagement/message/message-dialog.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { FormInstance } from 'element-plus';
-import { editorTypeList, rules } from '@/views/messageManagement/message/utils/columns';
-import { FormProps } from '@/views/messageManagement/message/utils/types';
-import { $t } from '@/plugins/i18n';
-import { usePublicHooks } from '@/views/hooks';
-import { useMessageTypeStore } from '@/store/message/messageType';
-import LoadingSvg from '@/assets/svg/loading.svg';
-import { loading, onSearchUserinfo, userDataList } from '@/views/messageManagement/message/utils/hooks';
-
-const props = withDefaults(defineProps<FormProps>(), {
-	formInline: () => ({
-		// 消息标题
-		title: undefined,
-		// 接收人用户ID
-		receivedUserIds: undefined,
-		// 发送人用户ID
-		sendUserId: undefined,
-		// 发送人昵称
-		sendNickName: undefined,
-		// 消息类型
-		messageType: undefined,
-		// 消息内容
-		content: undefined,
-		// 编辑器类型
-		editorType: undefined,
-		// 0:未读 1:已读
-		status: undefined,
-	}),
-});
-// 用户是否停用样式
-const { switchStyle } = usePublicHooks();
-const formRef = ref<FormInstance>();
-const form = ref(props.formInline);
-const messageTypeStore = useMessageTypeStore();
-
-onMounted(() => {
-	messageTypeStore.getAllMessageTypeList();
-});
-
-defineExpose({ formRef });
-</script>
-
-<template>
-	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
-		<!-- 消息标题 -->
-		<el-form-item :label="$t('title')" prop="title">
-			<el-input v-model="form.title" :placeholder="$t('input') + $t('title')" autocomplete="off" maxlength="100" type="text" />
-		</el-form-item>
-
-		<!-- 接收人用户ID -->
-		<el-form-item :label="$t('receivedUserIds')" prop="receivedUserIds">
-			<el-select v-model="form.receivedUserIds" :loading="loading" :placeholder="$t('receivedUserIdTip')" :remote-method="onSearchUserinfo" clearable filterable multiple remote remote-show-suffix>
-				<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
-				<template #loading>
-					<el-icon class="is-loading">
-						<LoadingSvg />
-					</el-icon>
-				</template>
-			</el-select>
-		</el-form-item>
-
-		<!-- 发送人用户ID -->
-		<el-form-item :label="$t('sendUserId')" prop="sendUserId">
-			<el-select v-model="form.sendUserId" :loading="loading" :placeholder="$t('select') + $t('sendUserId')" :remote-method="onSearchUserinfo" clearable filterable remote remote-show-suffix>
-				<el-option v-for="item in userDataList" :key="item.id" :label="item.username" :value="item.id" />
-				<template #loading>
-					<el-icon class="is-loading">
-						<LoadingSvg />
-					</el-icon>
-				</template>
-			</el-select>
-		</el-form-item>
-
-		<!-- 消息类型 -->
-		<el-form-item :label="$t('messageType')" prop="messageType">
-			<el-select v-model="form.messageType" :placeholder="`${$t('select')}${$t('messageType')}`" clearable filterable>
-				<el-option v-for="(item, index) in messageTypeStore.allMessageTypeList" :key="index" :label="item.messageName" :navigationBar="false" :value="item.messageType" />
-			</el-select>
-		</el-form-item>
-
-		<!-- 编辑器类型 -->
-		<el-form-item :label="$t('editorType')" prop="editorType">
-			<el-select v-model="form.editorType" :placeholder="`${$t('select')}${$t('editorType')}`" clearable filterable>
-				<el-option v-for="(item, index) in editorTypeList" :key="index" :label="item.label" :navigationBar="false" :value="item.value" />
-			</el-select>
-		</el-form-item>
-
-		<!-- 消息内容 -->
-		<el-form-item :label="$t('content')" prop="content">
-			<el-input v-model="form.content" :placeholder="$t('input') + $t('content')" autocomplete="off" type="textarea" />
-		</el-form-item>
-
-		<!-- 0:未读 1:已读 -->
-		<el-form-item :label="$t('status')" prop="status">
-			<el-switch v-model="form.status" :active-text="$t('readAlready')" :active-value="true" :inactive-text="$t('unread')" :inactive-value="false" :style="switchStyle" inline-prompt />
-		</el-form-item>
-	</el-form>
-</template>
diff --git a/src/views/messageManagement/messageEditing/index.vue b/src/views/messageManagement/messageEditing/index.vue
deleted file mode 100644
index cad33d1..0000000
--- a/src/views/messageManagement/messageEditing/index.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts" setup>
-import splitpane, { ContextProps } from '@/components/SplitPane';
-import { reactive } from 'vue';
-import MessageEditorFrom from '@/views/messageManagement/messageEditing/message-editor-from.vue';
-import RichEditor from '@/views/messageManagement/messageEditing/rich-editor.vue';
-import { formState } from '@/views/messageManagement/messageEditing/utils/hooks';
-import MarkdownEditor from '@/views/messageManagement/messageEditing/markdown-editor.vue';
-
-const settingLR: ContextProps = reactive({
-	minPercent: 20,
-	defaultPercent: 80,
-	split: 'vertical',
-});
-</script>
-
-<template>
-	<el-card shadow="never">
-		<div class="split-pane">
-			<splitpane :splitSet="settingLR">
-				<template #paneL>
-					<RichEditor v-if="formState.editorType === 'rich'" />
-					<markdown-editor v-else />
-				</template>
-
-				<template #paneR>
-					<message-editor-from />
-				</template>
-			</splitpane>
-		</div>
-	</el-card>
-</template>
-
-<style lang="scss" scoped>
-.split-pane {
-	width: 100%;
-	height: calc(100vh - 120px);
-}
-</style>