fix: 消息显示问题

.env.production

@@ -1,6 +1,9 @@
 # 线上环境平台打包路径
 VITE_PUBLIC_PATH = /
 
+# 平台本地运行端口号
+VITE_PORT = 80
+
 # 线上环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
 
@@ -10,4 +13,4 @@ VITE_CDN = false
 # 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
 # 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
 # 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
-VITE_COMPRESSION = "none"
+VITE_COMPRESSION = "both"

package.json

@@ -47,13 +47,9 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@howdyjs/mouse-menu": "^2.1.6",
     "@infectoone/vue-ganttastic": "^2.3.2",
-    "@logicflow/core": "^1.2.28",
-    "@logicflow/extension": "^1.2.28",
     "@pureadmin/descriptions": "^1.2.1",
     "@pureadmin/table": "^3.2.1",
     "@pureadmin/utils": "^2.6.0",
-    "@vue-flow/background": "^1.3.2",
-    "@vue-flow/core": "^1.42.5",
     "@vueuse/core": "^13.1.0",
     "@vueuse/motion": "^3.0.3",
     "@wangeditor/editor": "^5.1.23",
@@ -79,7 +75,6 @@
     "md-editor-v3": "^5.5.0",
     "mint-filter": "^4.0.3",
     "mitt": "^3.0.1",
-    "mqtt": "4.3.7",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "pinia": "^3.0.2",

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

@@ -48,11 +48,9 @@ function goMessageDetail(message: ListItem) {
   });
 }
 </script>
-
 <template>
-  <div class="notice-container border-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]" @click="goMessageDetail(noticeItem)">
+  <div class="notice-container border-0 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" />-->
+    <el-avatar v-if="noticeItem.cover" :size="30" :src="noticeItem.cover" class="notice-container-avatar" fit="cover" />
-    <img v-if="noticeItem.cover" :src="noticeItem.cover" alt="" class="notice-container-avatar" />
     <div class="notice-container-text">
       <div class="notice-text-title text-[#000000d9] dark:text-white">
         <el-tooltip
@@ -101,14 +99,11 @@ function goMessageDetail(message: ListItem) {
   align-items: flex-start;
   justify-content: space-between;
   padding: 12px 0;
-  margin: 2px 0 0 0;
 
   // border-bottom: 1px solid #f0f0f0;
 
   .notice-container-avatar {
-    width: 30px;
+    margin-right: 4px;
-    margin-right: 8px;
-    object-fit: cover;
     background: #fff;
   }
 
@@ -128,7 +123,7 @@ function goMessageDetail(message: ListItem) {
 
       .notice-title-content {
         flex: 1;
-        width: 200px;
+        width: 180px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;

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

@@ -3,6 +3,7 @@ import { throttle } from '@pureadmin/utils';
 import { ElNotification, ElTag } from 'element-plus';
 import { getMessageReceivedPageByUser } from '@/api/v1/message/messageReceived';
 import { $t } from '@/plugins/i18n';
+import { router } from '@/store/utils';
 
 export interface ListItem {
   messageId: string;
@@ -129,8 +130,10 @@ const showNotification = (NotificationList) => {
     NotificationList.forEach((message) => {
       ElNotification({
         title: message?.title,
+        position: 'bottom-left',
+        duration: 2000,
         message: (
-          <div class="flex ">
+          <div class="flex" onClick={() => router.push(`/message-detail/${message.messageType}/${message.messageId}`)}>
             <img src={message.cover} alt="" style={{ width: '50px', height: '50px', objectFit: 'cover' }} />
             <div class="flex justify-between mt-3 mx-2">
               <span class="mr-2">{message.description}</span>
@@ -138,7 +141,6 @@ const showNotification = (NotificationList) => {
             </div>
           </div>
         ),
-        position: 'bottom-right',
       });
     });
   }

src/views/login/components/login-form.vue

@@ -19,7 +19,7 @@ const loading = ref(false);
 const { t } = useI18n();
 
 const ruleForm = reactive({
-  username: 'bunny',
+  username: 'Administrator',
   password: 'admin123',
   type: currentPage.value,
 });

src/views/message-manger/message-editing/components/message-editor-from.vue

@@ -74,7 +74,7 @@ onMounted(() => {
   <el-form ref="formRef" :model="formState" :rules="rules" class="w-[100%] p-5" label-width="100px">
     <!-- 标题 -->
     <el-form-item :label="$t('title')" prop="title">
-      <el-input v-model="formState.title" />
+      <el-input v-model="formState.title" maxlength="8" show-word-limit />
     </el-form-item>
 
     <!-- 消息类型 -->
@@ -151,7 +151,7 @@ onMounted(() => {
 
     <!-- 简介 -->
     <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-input v-model="formState.summary" :autosize="{ minRows: 3, maxRows: 6 }" maxlength="200" minlength="4" show-word-limit type="textarea" />
     </el-form-item>
 
     <!-- 消息等级 -->
@@ -163,7 +163,7 @@ onMounted(() => {
 
     <!-- 消息等级简介 -->
     <el-form-item :label="$t('extra')" prop="extra">
-      <el-input v-model="formState.extra" maxlength="20" minlength="10" show-word-limit type="text" />
+      <el-input v-model="formState.extra" maxlength="5" show-word-limit type="text" />
     </el-form-item>
 
     <!-- 提交 -->

src/views/message-manger/message-editing/components/rich-editor.vue

@@ -22,7 +22,7 @@ editorConfig.MENU_CONF['uploadImage'] = {
   allowedFileTypes: ['image/png', 'image/jpg', 'image/jpeg'],
   meta: { type: 'message' },
   // TODO 修改為 Authorization
-  headers: { Authorization: token.value },
+  headers: { Authorization: `Bearer ${token.value}` },
   // 自定义插入图片
   customInsert(res: any, insertFn) {
     // res.data.url是后端返回的图片地址，根据实际业务改写

src/views/message-manger/message-send/components/message-dialog.vue

@@ -3,7 +3,6 @@ import { onMounted, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { coverUrl, editorTypeList, loading, onSearchUserinfo, onUpload, rules, updateMessage, userDataList } from '@/views/message-manger/message-send/utils';
 import { $t } from '@/plugins/i18n';
-import { usePublicHooks } from '@/views/hooks';
 import { useMessageTypeStore } from '@/store/message/messageType';
 import LoadingSvg from '@/assets/svg/loading.svg';
 import { beforeUpload, messageLevel, settingLR } from '@/views/message-manger/message-editing/utils';
@@ -13,8 +12,6 @@ import RichEditor from '@/views/message-manger/message-send/components/rich-edit
 import MarkdownEditor from '@/views/message-manger/message-send/components/markdown-editor.vue';
 import ImageLoading from '@/components/Upload/ImageLoading.vue';
 
-// 用户是否停用样式
-const { switchStyle } = usePublicHooks();
 const formRef = ref<FormInstance>();
 const messageTypeStore = useMessageTypeStore();
 
@@ -38,7 +35,7 @@ defineExpose({ formRef });
           <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-input v-model="updateMessage.title" maxlength="8" show-word-limit />
             </el-form-item>
 
             <!-- 消息类型 -->
@@ -135,7 +132,7 @@ defineExpose({ formRef });
 
             <!-- 消息等级简介 -->
             <el-form-item :label="$t('extra')" prop="extra">
-              <el-input v-model="updateMessage.extra" maxlength="20" minlength="10" show-word-limit type="text" />
+              <el-input v-model="updateMessage.extra" maxlength="4" show-word-limit type="text" />
             </el-form-item>
           </el-form>
         </template>

src/views/message-manger/message-send/utils/hooks.ts

@@ -24,7 +24,7 @@ export const updateMessage = reactive({
   // 封面
   cover: undefined,
   // 消息接受人ids
-  receivedUserIds: undefined,
+  receivedUserIds: [],
   // 发送人用户ID
   sendUserId: undefined,
   // 发送人昵称
@@ -79,6 +79,9 @@ export async function onUpdate(row: any) {
     username: item.username,
   }));
   updateMessage.receivedUserIds = messageSendStore.receivedUserinfoList.map((item: any) => item.receivedUserId);
+  // 消息接受去重
+  const set = new Set(updateMessage.receivedUserIds);
+  updateMessage.receivedUserIds = Array.from(set);
 
   // 设置封面图片
   coverUrl.value = row.cover;
@@ -99,10 +102,7 @@ export async function onUpdate(row: any) {
         data.content = encode(data.content);
 
         // 更新消息内容
-        const result = await messageSendStore.editMessage({
+        const result = await messageSendStore.editMessage({ ...data, id: row.id });
-          ...data,
-          id: row.id,
-        });
         if (!result) return;
         Object.assign(updateMessage, {});
         done();

vite.config.ts

@@ -40,6 +40,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
       exclude,
     },
     build: {
+      outDir: 'docker/dist',
       // https://cn.vitejs.dev/guide/build.html#browser-compatibility
       target: 'es2015',
       sourcemap: false,