From a9e06b151a8cbc2824f6b22d1c42a7504d7d3cbf Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Fri, 1 Nov 2024 00:08:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=A7=A9=20=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=BE=85=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/lay-notice/data.ts      |   8 +-
 src/layout/components/lay-notice/index.vue    |  16 +-
 src/layout/components/lay-panel/index.vue     | 204 +++++++++---------
 .../messageEditing/message-editor-from.vue    |  43 ++--
 .../messageEditing/utils/hooks.ts             |  37 +++-
 5 files changed, 181 insertions(+), 127 deletions(-)

diff --git a/src/layout/components/lay-notice/data.ts b/src/layout/components/lay-notice/data.ts
index ec0213a..36de185 100644
--- a/src/layout/components/lay-notice/data.ts
+++ b/src/layout/components/lay-notice/data.ts
@@ -34,10 +34,12 @@ export const getAllMessageList = async () => {
 		.filter(message => message.messageType === 'notifications')
 		.map(message => ({
 			cover: message.cover,
-			description: message.summary,
 			title: message.title,
 			datetime: message.createTime,
+			description: message.summary,
 			type: '1',
+			status: message.statusType,
+			extra: message.extra,
 		})) as ListItem[];
 
 	// 消息
@@ -49,6 +51,8 @@ export const getAllMessageList = async () => {
 			title: message.title,
 			datetime: message.createTime,
 			type: '2',
+			status: message.statusType,
+			extra: message.extra,
 		})) as ListItem[];
 
 	// 系统消息
@@ -60,6 +64,8 @@ export const getAllMessageList = async () => {
 			title: message.title,
 			datetime: message.createTime,
 			type: '3',
+			status: message.statusType,
+			extra: message.extra,
 		})) as ListItem[];
 
 	noticesData.value = [
diff --git a/src/layout/components/lay-notice/index.vue b/src/layout/components/lay-notice/index.vue
index e2d0866..ba9a443 100644
--- a/src/layout/components/lay-notice/index.vue
+++ b/src/layout/components/lay-notice/index.vue
@@ -4,23 +4,33 @@ import { computed, onMounted, ref } from 'vue';
 import { getAllMessageList, noticesData } 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 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})` : ''));
 
-onMounted(async () => {
+/** 计算消息数量 */
+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>
 
diff --git a/src/layout/components/lay-panel/index.vue b/src/layout/components/lay-panel/index.vue
index fb4fb20..b533fac 100644
--- a/src/layout/components/lay-panel/index.vue
+++ b/src/layout/components/lay-panel/index.vue
@@ -1,149 +1,139 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { emitter } from "@/utils/mitt";
-import { onClickOutside } from "@vueuse/core";
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
-import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
-import CloseIcon from "@iconify-icons/ep/close";
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import { emitter } from '@/utils/mitt';
+import { onClickOutside } from '@vueuse/core';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useDataThemeChange } from '@/layout/hooks/useDataThemeChange';
+import CloseIcon from '@iconify-icons/ep/close';
 
 const target = ref(null);
 const show = ref<Boolean>(false);
 
 const iconClass = computed(() => {
-  return [
-    "w-[22px]",
-    "h-[22px]",
-    "flex",
-    "justify-center",
-    "items-center",
-    "outline-none",
-    "rounded-[4px]",
-    "cursor-pointer",
-    "transition-colors",
-    "hover:bg-[#0000000f]",
-    "dark:hover:bg-[#ffffff1f]",
-    "dark:hover:text-[#ffffffd9]"
-  ];
+	return [
+		'w-[22px]',
+		'h-[22px]',
+		'flex',
+		'justify-center',
+		'items-center',
+		'outline-none',
+		'rounded-[4px]',
+		'cursor-pointer',
+		'transition-colors',
+		'hover:bg-[#0000000f]',
+		'dark:hover:bg-[#ffffff1f]',
+		'dark:hover:text-[#ffffffd9]',
+	];
 });
 
 const { t } = useI18n();
 const { onReset } = useDataThemeChange();
 
 onClickOutside(target, (event: any) => {
-  if (event.clientX > target.value.offsetLeft) return;
-  show.value = false;
+	if (event.clientX > target.value.offsetLeft) return;
+	show.value = false;
 });
 
 onMounted(() => {
-  emitter.on("openPanel", () => {
-    show.value = true;
-  });
+	emitter.on('openPanel', () => {
+		show.value = true;
+	});
 });
 
 onBeforeUnmount(() => {
-  // 解绑`openPanel`公共事件，防止多次触发
-  emitter.off("openPanel");
+	// 解绑`openPanel`公共事件，防止多次触发
+	emitter.off('openPanel');
 });
 </script>
 
 <template>
-  <div :class="{ show }">
-    <div class="right-panel-background" />
-    <div ref="target" class="right-panel bg-bg_color">
-      <div
-        class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
-      >
-        <h4 class="dark:text-white">
-          {{ t("panel.pureSystemSet") }}
-        </h4>
-        <span
-          v-tippy="{
-            content: t('panel.pureCloseSystemSet'),
-            placement: 'bottom-start',
-            zIndex: 41000
-          }"
-          :class="iconClass"
-        >
-          <IconifyIconOffline
-            class="dark:text-white"
-            width="18px"
-            height="18px"
-            :icon="CloseIcon"
-            @click="show = !show"
-          />
-        </span>
-      </div>
-      <el-scrollbar>
-        <slot />
-      </el-scrollbar>
+	<div :class="{ show }">
+		<div class="right-panel-background" />
+		<div ref="target" class="right-panel bg-bg_color">
+			<div class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]">
+				<h4 class="dark:text-white">
+					{{ t('panel.pureSystemSet') }}
+				</h4>
+				<span
+					v-tippy="{
+						content: t('panel.pureCloseSystemSet'),
+						placement: 'bottom-start',
+						zIndex: 41000,
+					}"
+					:class="iconClass"
+				>
+					<IconifyIconOffline :icon="CloseIcon" class="dark:text-white" height="18px" width="18px" @click="show = !show" />
+				</span>
+			</div>
+			<el-scrollbar>
+				<slot />
+			</el-scrollbar>
 
-      <div
-        class="flex justify-end p-3 border-t-[1px] border-solid border-[var(--pure-border-color)]"
-      >
-        <el-button
-          v-tippy="{
-            content: t('panel.pureClearCacheAndToLogin'),
-            placement: 'left-start',
-            zIndex: 41000
-          }"
-          type="danger"
-          text
-          bg
-          @click="onReset"
-        >
-          {{ t("panel.pureClearCache") }}
-        </el-button>
-      </div>
-    </div>
-  </div>
+			<div class="flex justify-end p-3 border-t-[1px] border-solid border-[var(--pure-border-color)]">
+				<el-button
+					v-tippy="{
+						content: t('panel.pureClearCacheAndToLogin'),
+						placement: 'left-start',
+						zIndex: 41000,
+					}"
+					bg
+					text
+					type="danger"
+					@click="onReset"
+				>
+					{{ t('panel.pureClearCache') }}
+				</el-button>
+			</div>
+		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 :deep(.el-scrollbar) {
-  height: calc(100vh - 110px);
+	height: calc(100vh - 110px);
 }
 
 .right-panel-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  background: rgb(0 0 0 / 20%);
-  opacity: 0;
-  transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: -1;
+	background: rgb(0 0 0 / 20%);
+	opacity: 0;
+	transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
 }
 
 .right-panel {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 40000;
-  width: 100%;
-  max-width: 280px;
-  box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
-  transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
-  transform: translate(100%);
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 40000;
+	width: 100%;
+	max-width: 280px;
+	box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
+	transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
+	transform: translate(100%);
 }
 
 .show {
-  transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+	transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
 
-  .right-panel-background {
-    z-index: 20000;
-    width: 100%;
-    height: 100%;
-    opacity: 1;
-  }
+	.right-panel-background {
+		z-index: 20000;
+		width: 100%;
+		height: 100%;
+		opacity: 1;
+	}
 
-  .right-panel {
-    transform: translate(0);
-  }
+	.right-panel {
+		transform: translate(0);
+	}
 }
 
 .project-configuration {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 20px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 14px 20px;
 }
 </style>
diff --git a/src/views/messageManagement/messageEditing/message-editor-from.vue b/src/views/messageManagement/messageEditing/message-editor-from.vue
index 3098105..48866a9 100644
--- a/src/views/messageManagement/messageEditing/message-editor-from.vue
+++ b/src/views/messageManagement/messageEditing/message-editor-from.vue
@@ -1,36 +1,24 @@
 <script lang="ts" setup>
-import { formState } from '@/views/messageManagement/messageEditing/utils/hooks';
+import { beforeUpload, coverUrl, formState, loading, onSearchUserinfo, onUpload, userDataList } from '@/views/messageManagement/messageEditing/utils/hooks';
 import { onMounted, ref, toRaw } from 'vue';
 import { $t } from '@/plugins/i18n';
 import { rules } from '@/views/messageManagement/messageEditing/utils/columns';
 import { FormInstance } from 'element-plus';
 import { editorTypeList } from '@/views/messageManagement/message/utils/columns';
 import LoadingSvg from '@/assets/svg/loading.svg';
-import { useAdminUserStore } from '@/store/system/adminUser';
 import { useMessageTypeStore } from '@/store/message/messageType';
 import { encode } from 'js-base64';
 import { message } from '@/utils/message';
 import { useMessageStore } from '@/store/message/message';
 import { usePublicHooks } from '@/views/hooks';
+import { Plus } from '@element-plus/icons-vue';
 
 const formRef = ref();
-// 用户信息列表
-const userDataList = ref();
-// 搜索用户加载
-const loading = ref(false);
 // 用户是否停用样式
 const { switchStyle } = usePublicHooks();
-const adminUserStore = useAdminUserStore();
 const messageTypeStore = useMessageTypeStore();
 const messageStore = useMessageStore();
 
-/** 搜索 */
-const onSearchUserinfo = async (keyword: string) => {
-	loading.value = true;
-	userDataList.value = await adminUserStore.queryUser({ keyword });
-	loading.value = false;
-};
-
 /** 提交消息 */
 const submitForm = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
@@ -60,9 +48,9 @@ const submitForm = (formEl: FormInstance | undefined) => {
 /** 重置消息 */
 const resetForm = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
-	const data = toRaw(formState);
 	formEl.resetFields();
 	formState.content = '';
+	coverUrl.value = '';
 };
 
 onMounted(() => {
@@ -109,6 +97,21 @@ onMounted(() => {
 			<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-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="formState.summary" :autosize="{ minRows: 3, maxRows: 6 }" maxlength="200" minlength="10" show-word-limit type="textarea" />
@@ -121,3 +124,13 @@ onMounted(() => {
 		</el-form-item>
 	</el-form>
 </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/messageManagement/messageEditing/utils/hooks.ts b/src/views/messageManagement/messageEditing/utils/hooks.ts
index 1bb3be4..cd3bf7e 100644
--- a/src/views/messageManagement/messageEditing/utils/hooks.ts
+++ b/src/views/messageManagement/messageEditing/utils/hooks.ts
@@ -1,5 +1,16 @@
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
+import type { UploadRawFile, UploadRequestOptions } from 'element-plus';
+import { SystemEnum } from '@/enums/upload';
+import { message } from '@/utils/message';
+import { fetchUploadFile } from '@/api/v1/system';
+import { useAdminUserStore } from '@/store/system/adminUser';
 
+// 用户信息列表
+export const userDataList = ref();
+// 搜索用户加载
+export const loading = ref(false);
+// 封面url
+export const coverUrl = ref('');
 // 提交表单信息
 export const formState = reactive({
 	title: '',
@@ -11,3 +22,27 @@ export const formState = reactive({
 	summary: '',
 	cover: '',
 });
+const adminUserStore = useAdminUserStore();
+
+/** 搜索 */
+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;
+	formState.cover = result.data.filepath;
+};
+
+/** 上传之前 */
+export const beforeUpload = (file: UploadRawFile) => {
+	if (file.size > SystemEnum.IMAGE_SIZE) {
+		message(SystemEnum.IMAGE_MESSAGE, { type: 'error' });
+		return false;
+	}
+};