feat: 🚀 消息发送页面简介还差图片封面未添加

src/layout/components/lay-notice/components/NoticeItem.vue

@@ -43,7 +43,7 @@ function hoverDescription(event, description) {
 
 <template>
 	<div class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]">
-		<el-avatar v-if="noticeItem.avatar" :size="30" :src="noticeItem.avatar" class="notice-container-avatar" />
+		<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">
 				<el-tooltip :content="noticeItem.title" :disabled="!titleTooltip" :effect="tooltipEffect" :enterable="!isMobile" placement="top-start" popper-class="notice-title-popper">

src/layout/components/lay-notice/data.ts

@@ -1,7 +1,9 @@
 import { $t } from '@/plugins/i18n';
+import { ref } from 'vue';
+import { fetchGetMessageList } from '@/api/v1/message';
 
 export interface ListItem {
-	avatar: string;
+	cover: string;
 	title: string;
 	datetime: string;
 	type: string;
@@ -17,30 +19,52 @@ export interface TabItem {
 	emptyText: string;
 }
 
-// {
-//   avatar: 'https://xiaoxian521.github.io/hyperlink/svg/smile1.svg',
-//     title: '小铭 评论了你',
-//   description: '诚在于心，信在于行，诚信在于心行合一。',
-//   datetime: '今天',
-//   type: '2',
-// },
-export const noticesData: TabItem[] = [
-	{
-		key: '1',
-		name: $t('status.pureNotify'),
-		list: [],
-		emptyText: $t('status.pureNoNotify'),
-	},
-	{
-		key: '2',
-		name: $t('status.pureMessage'),
-		list: [],
-		emptyText: $t('status.pureNoMessage'),
-	},
-	{
-		key: '3',
-		name: $t('status.pureTodo'),
-		list: [],
-		emptyText: $t('status.pureNoTodo'),
-	},
-];
+// 请求参数
+const form = { status: false, currentPage: 1, pageSize: 100 };
+// 响应内容
+export const noticesData = ref<TabItem[]>([]);
+
+/** 获取所有消息 */
+export const getAllMessageList = async () => {
+	const baseResult = await fetchGetMessageList(form);
+	const datalist = baseResult.data.list;
+
+	// 通知消息
+	const notifications = datalist
+		.filter(message => message.messageType === 'notifications')
+		.map(message => ({
+			cover: message.cover,
+			description: message.summary,
+			title: message.title,
+			datetime: message.createTime,
+			type: '1',
+		})) as ListItem[];
+
+	// 消息
+	const notify = datalist
+		.filter(message => message.messageType !== 'notifications' && message.messageType !== 'sys')
+		.map(message => ({
+			cover: message.cover,
+			description: message.summary,
+			title: message.title,
+			datetime: message.createTime,
+			type: '2',
+		})) as ListItem[];
+
+	// 系统消息
+	const system = datalist
+		.filter(message => message.messageType === 'sys')
+		.map(message => ({
+			cover: message.cover,
+			description: message.summary,
+			title: message.title,
+			datetime: message.createTime,
+			type: '3',
+		})) as ListItem[];
+
+	noticesData.value = [
+		{ key: '1', name: $t('status.pureNotify'), list: notifications, emptyText: $t('status.pureNoNotify') },
+		{ key: '2', name: $t('status.pureMessage'), list: notify, emptyText: $t('status.pureNoMessage') },
+		{ key: '3', name: $t('status.systemMessage'), list: system, emptyText: $t('status.systemMessage') },
+	];
+};

src/layout/components/lay-notice/index.vue

@@ -1,18 +1,27 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import { computed, ref } from 'vue';
-import { noticesData } from './data';
+import { computed, onMounted, ref } from 'vue';
+import { getAllMessageList, noticesData } from './data';
 import NoticeList from './components/NoticeList.vue';
 import BellIcon from '@iconify-icons/ep/bell';
 
 const { t } = useI18n();
 const noticesNum = ref(0);
+// 通知消息数据
 const notices = ref(noticesData);
-const activeKey = ref(noticesData[0]?.key);
-
-notices.value.map(v => (noticesNum.value += v.list.length));
+// 选择的消息栏目
+const activeKey = ref(noticesData.value[0]?.key);
 
 const getLabel = computed(() => item => item.name + (item.list.length > 0 ? `(${item.list.length})` : ''));
+
+onMounted(async () => {
+	// 获取所有的消息
+	await getAllMessageList();
+	// 整合消息一共多少条
+	notices.value.map(v => (noticesNum.value += v.list.length));
+	// 默认选中的消息类别
+	activeKey.value = noticesData.value[0]?.key;
+});
 </script>
 
 <template>

src/views/messageManagement/messageEditing/message-editor-from.vue

@@ -107,7 +107,11 @@ onMounted(() => {
 		<!-- 是否已读 -->
 		<el-form-item :label="$t('isRead')" prop="status">
 			<el-switch v-model="formState.status" :active-text="$t('readAlready')" :active-value="true" :inactive-text="$t('unread')" :inactive-value="false" :style="switchStyle" inline-prompt />
-			<!--<el-switch v-model="formState.status" />-->
+		</el-form-item>
+
+		<!-- 简介 -->
+		<el-form-item :label="$t('summary')" prop="summary">
+			<el-input v-model="formState.summary" :autosize="{ minRows: 3, maxRows: 6 }" maxlength="200" minlength="10" show-word-limit type="textarea" />
 		</el-form-item>
 
 		<!-- 提交 -->

src/views/messageManagement/messageEditing/utils/columns.ts

@@ -9,4 +9,6 @@ export const rules = {
 	content: [{ required: true, message: `${$t('input')}${$t('content')}`, trigger: 'blur' }],
 	// 编辑器类型
 	editorType: [{ required: true, message: `${$t('input')}${$t('editorType')}`, trigger: 'blur' }],
+	// 消息简介
+	summary: [{ required: true, message: `${$t('input')}${$t('summary')}`, trigger: 'blur' }],
 };

src/views/messageManagement/messageEditing/utils/hooks.ts

@@ -8,4 +8,6 @@ export const formState = reactive({
 	content: '',
 	editorType: 'markdown',
 	status: false,
+	summary: '',
+	cover: '',
 });