fix:1.上传文件成功新加提示

2.消息弹窗页面优化

src/components/Upload/FilesUpload.vue

@@ -127,6 +127,7 @@ const handleChange = async (uploadFile: UploadFile) => {
       srcList.value.push(res.data.fileUrl);
       fileNameList.value.push(res.data.fileName);
       emit("finished");
+      ElMessage.success("上传成功");
     })
     .catch((err) => {
       ElMessage.error(err.message);

src/views/messages/MessageDetail.vue

@@ -3,62 +3,67 @@
     v-model="drawerVisible"
     :destroy-on-close="true"
     :with-header="false"
-    size="800"
+    size="700"
     title="消息详情"
   >
-    <div class="message-detail">
-      <h3>{{ messageObj.title }}</h3>
-      <p style="word-break: break-word;">{{ messageObj.content }}</p>
-      <div class="img-container">
-        <el-image
-          v-for="(item, index) in messageObj.photoLists"
-          :initial-index="index"
-          :max-scale="7"
-          :min-scale="0.2"
-          :preview-src-list="messageObj.photoLists"
-          :src="item"
-          :zoom-rate="1.2"
-          class="img-box"
-          fit="cover"
-        />
-        <!--        <img-->
-        <!--          v-for="(item, index) in messageObj.photoLists"-->
-        <!--          :key="index"-->
-        <!--          :src="getImgUrl(item)"-->
-        <!--          class="img-box"-->
-        <!--          object-fit="cover"-->
-        <!--        />-->
-
-      </div>
-      <div>
-      </div>
-      <div
-        v-if="messageObj?.fileLists?.length > 0"
-        class="message-time download-btn"
-      >
-        <button class="el-button el-button--primary" @click="downloadFile(messageObj.fileLists[0].path)">
-          相关附件下载({{ messageObj.fileLists[0].name }})
-        </button>
+    <div class="message-detail-container">
+      <div class="message-header">
+        <h1 class="message-title">{{ messageObj.title }}</h1>
+        <div class="message-meta">
+          <span class="meta-item">
+            <el-icon size="18"><User /></el-icon> {{ messageObj.creator }}
+          </span>
+          <span class="meta-item">
+            <el-icon size="18"><Clock /></el-icon> {{ messageObj.created }}
+          </span>
+        </div>
       </div>
 
-      <div class="message-time">发送者: {{ messageObj.creator }}</div>
-      <div class="message-time">创建时间: {{ messageObj.created }}</div>
+      <div class="message-content">
+        <p class="content-text">{{ messageObj.content }}</p>
+
+        <div v-if="messageObj.photoLists?.length > 0" class="img-gallery">
+          <el-image
+            v-for="(item, index) in messageObj.photoLists"
+            :key="index"
+            :initial-index="index"
+            :preview-src-list="messageObj.photoLists"
+            :src="item"
+            class="gallery-image"
+            fit="cover"
+            lazy
+          />
+        </div>
+
+        <div
+          v-if="messageObj?.fileLists?.length > 0"
+          class="attachment-section"
+        >
+          <el-divider />
+          <h3 class="section-title">附件下载</h3>
+          <el-button
+            type="primary"
+            :icon="Download"
+            @click="downloadFile(messageObj.fileLists[0].path)"
+            class="download-btn"
+            size="large"
+          >
+            下载附件: {{ messageObj.fileLists[0].name }}
+          </el-button>
+        </div>
+      </div>
     </div>
   </el-drawer>
 </template>
 
 <script lang="ts" setup>
-import {getMessageDetail} from "@/api/message";
-import FilesUpload from "@/components/Upload/FilesUpload.vue";
+import { ref } from "vue";
+import { Download, User, Clock } from "@element-plus/icons-vue";
+import { getMessageDetail } from "@/api/message";
 
 const drawerVisible = ref(false);
-
 const messageObj = ref<any>({});
 
-const getImgUrl = (url: string) => {
-  return `${import.meta.env.VITE_APP_UPLOAD_URL}${url}`;
-};
-//192.168.101.4:9000/jgfile/2024/10/30/5175213819500.jpg
 const handleOpenDrawer = (id: string) => {
   drawerVisible.value = true;
   getMessageDetail(id).then((res) => {
@@ -71,57 +76,107 @@ const handleCloseDrawer = () => {
 };
 
 const downloadFile = (url: string) => {
-  // 根据链接获取后缀名
   const suffix = url.split(".").pop();
-
-  const link = document.createElement("a"); // 创建一个链接元素
-  // link.href = url;
+  const link = document.createElement("a");
   link.href = import.meta.env.VITE_APP_UPLOAD_URL + url;
-  link.setAttribute("download", `${messageObj.value.title}.${suffix}`); // 可以设置你要下载的文件名和扩展名
+  link.setAttribute("download", `${messageObj.value.title}.${suffix}`);
   document.body.appendChild(link);
-  link.click(); // 模拟点击下载
-  link.remove(); // 下载后移除链接元素
+  link.click();
+  link.remove();
 };
 
-defineExpose({handleOpenDrawer, handleCloseDrawer});
+defineExpose({ handleOpenDrawer, handleCloseDrawer });
 </script>
 
 <style lang="scss" scoped>
-.message-detail {
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+.message-detail-container {
+  padding: 28px 36px;
+  color: #333;
+  max-width: 800px;
+  margin: 0 auto;
+  font-size: 18px; /* 基础字体增大 */
+
+  .message-header {
+    margin-bottom: 28px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .message-title {
+      font-size: 26px; /* 标题增大 */
+      font-weight: 600;
+      color: #1a1a1a;
+      margin-bottom: 16px;
+      line-height: 1.4;
+      text-align: center;
+    }
+
+    .message-meta {
+      display: flex;
+      justify-content: center;
+      gap: 20px;
+      font-size: 18px; /* 元信息字体增大 */
+      color: #666;
+
+      .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        .el-icon {
+          font-size: 18px; /* 图标增大 */
+        }
+      }
+    }
+  }
+
+  .message-content {
+    .content-text {
+      font-size: 18px; /* 正文增大 */
+      line-height: 1.8;
+      color: #333;
+      white-space: pre-wrap;
+      margin-bottom: 28px;
+    }
+
+    .img-gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: 20px;
+      margin: 28px 0;
+
+      .gallery-image {
+        width: 100%;
+        height: 200px;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+        transition: transform 0.2s;
+        cursor: pointer;
+
+        &:hover {
+          transform: scale(1.03);
+        }
+      }
+    }
+
+    .attachment-section {
+      margin-top: 36px;
+
+      .section-title {
+        font-size: 20px; /* 分区标题增大 */
+        font-weight: 500;
+        margin-bottom: 16px;
+        color: #444;
+      }
+
+      .download-btn {
+        padding: 12px 20px;
+        font-size: 16px; /* 按钮字体增大 */
+      }
+    }
+  }
 }
 
-.img-container {
-  display: flex;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-top: 20px;
-  justify-content: start;
-}
-
-.img-box {
-  width: 200px;
-  height: 200px;
-  display: block;
-  margin-right: 10px;
-  margin-top: 10px;
-  border-radius: 4px;
-}
-
-.download-btn {
-  cursor: pointer;
-}
-
-
-.message-time {
-  font-size: 16px;
-  color: #282727;
-  width: 100%;
-  text-align: start;
-  margin-top: 20px;
+.el-divider {
+  margin: 28px 0;
 }
 </style>