feat(icons): 添加新图标broom-light.svg

- 添加新图标broom-light.svg到processInfo文件夹
- 更新Message.vue组件，使用新图标并调整布局

src/assets/icons/processInfo/broom-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 256 256"><path fill="currentColor" d="M234.62 218.6C211.35 207.29 198 183 198 152v-17.3a14 14 0 0 0-8.82-13l-24.89-9.83a10 10 0 0 1-5.59-13L180 45.9a26 26 0 0 0-15-34.33c-12.95-4.83-27.88 1.84-33.31 15l-21 53.11a10 10 0 0 1-13 5.61L72.37 75a13.9 13.9 0 0 0-15.2 3.19C36.49 99.42 26 124.26 26 152a109.53 109.53 0 0 0 30.62 76.16A6 6 0 0 0 61 230h171a6 6 0 0 0 2.62-11.4M65.77 86.52a2 2 0 0 1 2.12-.43l25.4 10.29a22 22 0 0 0 28.63-12.32l21-53c3-7.13 11-10.81 18-8.21a14 14 0 0 1 8 18.54l-21.36 53.1a22.05 22.05 0 0 0 12.3 28.51l24.88 9.83a2 2 0 0 1 1.26 1.87V152c0 1.34 0 2.65.08 4L52.74 102.61a110 110 0 0 1 13.03-16.09M114.33 218a89.6 89.6 0 0 1-25.5-43.5a6 6 0 1 0-11.62 3a102.9 102.9 0 0 0 20.6 40.5H63.56A97.56 97.56 0 0 1 38 152a87.4 87.4 0 0 1 8.71-38.86l140.64 56.26c3.15 19.92 11.77 36.66 25 48.6Z"/></svg>

src/layout/components/Header/components/Message.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-popover placement="bottom" :width="320" popper-style="padding: 12px;" trigger="click">
+	<el-popover placement="bottom" :width="320" popper-style="padding: 0px;" trigger="click">
 		<template #reference>
 			<div class="menu--message-trigger">
 				<el-tooltip :content="$t('le.message.txt')" effect="dark" placement="bottom">
@@ -12,12 +12,32 @@
 			</div>
 		</template>
 
-		<el-tabs v-model="activeTab" class="message-tabs">
-			<el-tab-pane v-for="v of tabsConfig" :key="v.name" :name="v.name">
-				<template #label> {{ v.label }}({{ v.list.length }}) </template>
-				<template v-if="v.list.length">
+		<el-card :body-style="{ padding: '12px' }">
+			<template #header>
+				<div class="flex flex-pack-justify">
+					<div>
+						<span>消息中心</span>
+						<span class="ml-2 cursor-pointer">
+							<el-popconfirm title="确定全部已读吗?" @confirm="handleReadAll" :width="'200'">
+								<template #reference>
+									<LeIcon class="text-rose-700" icon-class="icon-processInfo-broom-light" />
+								</template>
+							</el-popconfirm>
+						</span>
+					</div>
+					<div><el-link type="primary" @click.stop="jumpMessageInfo"> 查看更多 >> </el-link></div>
+				</div>
+			</template>
+			<div class="flex flex-align-pack-center">
+				<el-radio-group v-model="activeTab">
+					<el-radio-button v-for="v of tabsConfig" :key="v.name" :label="v.name">{{ v.label }}({{ v.list.length }})</el-radio-button>
+				</el-radio-group>
+			</div>
+
+			<div class="mt-2">
+				<template v-if="tabsConfig[activeTab].list.length">
 					<div class="message-list">
-						<div v-for="item of v.list" :key="item.id" class="message-item" @click="jumpMessageDetail(item.id)">
+						<div v-for="item of tabsConfig[activeTab].list" :key="item.id" class="message-item" @click="jumpMessageDetail(item.id)">
 							<div>
 								<el-avatar :style="{ backgroundColor: 'var(--el-color-primary)', color: 'var(--el-color-white)' }">
 									<span style="transform: scale(0.8)">
@@ -37,14 +57,13 @@
 								</el-tooltip>
 							</div>
 						</div>
-						<div class="message-fix-item" @click="jumpMessageInfo">查看更多</div>
 					</div>
 				</template>
 				<template v-else>
 					<LeNoData />
 				</template>
-			</el-tab-pane>
-		</el-tabs>
+			</div>
+		</el-card>
 	</el-popover>
 </template>
 
@@ -65,17 +84,17 @@ let eventSource: EventSourcePolyfill | null = null
 const tabsConfig = reactive({
 	noticeList: {
 		name: 'noticeList',
-		label: '通知',
+		label: '通 知',
 		list: []
 	},
 	messageList: {
 		name: 'messageList',
-		label: '消息',
+		label: '消 息',
 		list: []
 	},
 	todoList: {
 		name: 'todoList',
-		label: '待办',
+		label: '待 办',
 		list: []
 	}
 })
@@ -105,6 +124,15 @@ const jumpMessageDetail = (id: any) => {
 	router.push('/message/list?id=' + id)
 }
 
+const handleReadAll = async () => {
+	try {
+		await message.readMessageApi({})
+		getMessage()
+	} catch (e) {
+		console.log(e)
+	}
+}
+
 getMessage()
 
 onMounted(() => {