From cf9b58354060ca1672f0a7de05bd4eda1e1495b5 Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Thu, 14 May 2026 18:23:37 +0800
Subject: [PATCH] optimize popup dialog style

---
 .../components/NavHeader/SiteMessages.vue     | 182 ++++++++++++++++--
 src/router/profile/index.js                   |   3 +-
 2 files changed, 172 insertions(+), 13 deletions(-)

diff --git a/src/layout/components/NavHeader/SiteMessages.vue b/src/layout/components/NavHeader/SiteMessages.vue
index 183313680..5c74230a9 100644
--- a/src/layout/components/NavHeader/SiteMessages.vue
+++ b/src/layout/components/NavHeader/SiteMessages.vue
@@ -56,7 +56,7 @@
     </el-drawer>
 
     <Dialog
-      v-if="msgDialogVisible && currentMsg"
+      v-if="msgDialogVisible && hasDialogContent"
       :close-on-click-modal="false"
       :confirm-title="$tc('MarkAsRead')"
       :title="currentDialogTitle"
@@ -65,7 +65,29 @@
       @close="handleDialogClose"
       @confirm="confirmRead"
     >
-      <div class="msg-detail">
+      <div v-if="isPopupDialog" class="msg-popup-detail">
+        <div class="msg-popup-board">
+          <el-collapse v-model="activePopupNames" class="msg-popup-collapse">
+            <el-collapse-item
+              v-for="msg in currentPopupMessages"
+              :key="msg.dialogKey"
+              :name="msg.dialogKey"
+              class="msg-popup-item"
+            >
+              <template #title>
+                <div class="popup-collapse-title">
+                  <span class="popup-collapse-subject">{{ msg.content.subject }}</span>
+                  <span class="popup-collapse-time">{{ formatDate(msg.date_created) }}</span>
+                </div>
+              </template>
+              <div class="msg-detail-txt msg-popup-content">
+                <MarkDown :value="msg.content.message" />
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+      <div v-else class="msg-detail">
         <div v-if="currentMsg.date_created" class="msg-detail-head">
           <span class="msg-detail-time">{{ formatDate(currentMsg.date_created) }}</span>
         </div>
@@ -78,10 +100,10 @@
 </template>
 
 <script>
-import { toSafeLocalDateStr } from '@/utils/common/time'
-import { createWsUrl } from '@/utils/common/index'
 import Dialog from '@/components/Dialog'
 import MarkDown from '@/components/Widgets/MarkDown'
+import { createWsUrl } from '@/utils/common/index'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 
 export default {
   name: 'SiteMessages',
@@ -99,6 +121,8 @@ export default {
       dialogAction: '',
       isClosingDialog: false,
       currentMsg: null,
+      currentPopupMessages: [],
+      activePopupNames: [],
       popupMessages: [],
       unreadMsgCount: 0
     }
@@ -108,10 +132,19 @@ export default {
       return this.$store.state.app.device === 'mobile' ? '70%' : '450px'
     },
     currentDialogTitle() {
+      if (this.currentDialogType === 'popup') {
+        return this.$tc('Tip')
+      }
       return this.currentMsg?.content?.subject || this.$tc('SiteMessage')
     },
     currentDialogMessage() {
       return this.currentMsg?.content?.message || ''
+    },
+    hasDialogContent() {
+      return this.isPopupDialog ? this.currentPopupMessages.length > 0 : Boolean(this.currentMsg)
+    },
+    isPopupDialog() {
+      return this.currentDialogType === 'popup'
     }
   },
   mounted() {
@@ -165,7 +198,11 @@ export default {
     markAsReadAll(msgs) {
       const url = `/api/v1/notifications/site-messages/mark-as-read-all/`
       this.$axios.patch(url, {}).then(res => {
-        this.msgDialogVisible = false
+        if (this.currentDialogType === 'popup') {
+          this.closeCurrentDialog()
+        } else {
+          this.msgDialogVisible = false
+        }
         this.getMessages()
       }).catch(err => {
         this.$message(err.detail)
@@ -187,6 +224,10 @@ export default {
     },
     confirmRead() {
       this.dialogAction = 'confirm'
+      if (this.currentDialogType === 'popup') {
+        this.markAsRead(this.currentPopupMessages)
+        return
+      }
       this.markAsRead([this.currentMsg])
     },
     cancelRead() {
@@ -212,11 +253,13 @@ export default {
       if (this.isClosingDialog) {
         return
       }
-      const shouldShowNextPopup = this.currentDialogType === 'popup'
+      const shouldShowNextPopup = this.popupMessages.length > 0
 
       this.isClosingDialog = true
       this.msgDialogVisible = false
       this.currentMsg = null
+      this.currentPopupMessages = []
+      this.activePopupNames = []
       this.currentDialogType = ''
 
       this.$nextTick(() => {
@@ -235,22 +278,32 @@ export default {
     normalizePopupMessage(data) {
       const siteMsg = data.site_meg || data.site_msg
       const content = siteMsg.content || siteMsg
+      const dateCreated = siteMsg.date_created || content.date_created || ''
+      const subject = content.subject || this.$tc('SiteMessage')
+      const message = content.message || ''
       return {
         id: siteMsg.id,
+        dialogKey: String(siteMsg.id || [subject, dateCreated, message].filter(Boolean).join('-')),
         content: {
-          subject: content.subject || this.$tc('SiteMessage'),
-          message: content.message || ''
+          subject,
+          message
         },
-        date_created: siteMsg.date_created || content.date_created || '',
+        date_created: dateCreated,
         has_read: false
       }
     },
     enqueuePopupMessage(data) {
       const msg = this.normalizePopupMessage(data)
-      const isCurrentMsg = this.currentDialogType === 'popup' && this.currentMsg?.id === msg.id
+      const isCurrentMsg = this.currentDialogType === 'popup' && this.currentPopupMessages.some(item => item.dialogKey === msg.dialogKey)
       const isQueuedMsg = this.popupMessages.some(item => item.id === msg.id)
 
-      if (msg.id && (isCurrentMsg || isQueuedMsg)) {
+      if ((msg.id && isQueuedMsg) || isCurrentMsg) {
+        return
+      }
+
+      if (this.currentDialogType === 'popup' && this.msgDialogVisible) {
+        this.currentPopupMessages.push(msg)
+        this.activePopupNames = this.currentPopupMessages.map(item => item.dialogKey)
         return
       }
 
@@ -262,7 +315,10 @@ export default {
         return
       }
 
-      this.currentMsg = this.popupMessages.shift()
+      this.currentMsg = null
+      this.currentPopupMessages = [...this.popupMessages]
+      this.activePopupNames = this.currentPopupMessages.map(item => item.dialogKey)
+      this.popupMessages = []
       this.currentDialogType = 'popup'
       this.dialogAction = ''
       this.msgDialogVisible = true
@@ -510,6 +566,108 @@ export default {
   }
 }
 
+.msg-popup-detail {
+  max-height: min(65vh, 720px);
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.msg-popup-board {
+  padding: 12px;
+  border: 1px solid var(--menu-border, #E9ECEF);
+  border-radius: 12px;
+  background: linear-gradient(180deg, #FCFCFD 0%, #F7F8FA 100%);
+  box-shadow: 0 10px 24px rgba(31, 35, 41, 0.06);
+}
+
+.popup-collapse-title {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding-right: 12px;
+}
+
+.popup-collapse-subject {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--neutral-900, #1F2329);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.popup-collapse-time {
+  flex-shrink: 0;
+  color: var(--N600, #646A73);
+  font-size: 12px;
+  line-height: 20px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(100, 106, 115, 0.08);
+}
+
+.msg-popup-content {
+  padding: 16px 18px 18px;
+  background: #fff;
+}
+
+.msg-popup-detail ::v-deep .el-collapse {
+  border-top: 0;
+  border-bottom: 0;
+  background: transparent;
+}
+
+.msg-popup-detail ::v-deep .el-collapse-item__header {
+  align-items: center;
+  line-height: 22px;
+  height: auto;
+  min-height: 56px;
+  padding: 0 18px;
+  border-bottom: 0;
+  background: #fff;
+}
+
+.msg-popup-detail ::v-deep .el-collapse-item__wrap {
+  overflow: visible;
+  border-bottom: 0;
+  background: transparent;
+}
+
+.msg-popup-detail ::v-deep .el-collapse-item__content {
+  padding-bottom: 0;
+}
+
+.msg-popup-detail ::v-deep .msg-popup-collapse {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.msg-popup-detail ::v-deep .msg-popup-item {
+  margin-bottom: 12px;
+  border: 1px solid rgba(31, 35, 41, 0.08);
+  border-radius: 10px;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: 0 4px 14px rgba(31, 35, 41, 0.05);
+}
+
+.msg-popup-detail ::v-deep .msg-popup-item:last-child {
+  margin-bottom: 0;
+}
+
+.msg-popup-detail ::v-deep .msg-popup-item.is-active {
+  border-color: rgba(38, 122, 58, 0.24);
+  box-shadow: 0 8px 20px rgba(38, 122, 58, 0.08);
+}
+
+.msg-popup-detail ::v-deep .msg-popup-item .el-collapse-item__arrow {
+  color: var(--N600, #646A73);
+}
+
 .no-msg {
   padding-top: 20px;
   text-align: center;
diff --git a/src/router/profile/index.js b/src/router/profile/index.js
index 676b0b03e..83c7d5296 100644
--- a/src/router/profile/index.js
+++ b/src/router/profile/index.js
@@ -70,7 +70,8 @@ export default {
         title: 'Passkeys',
         icon: 'passkey',
         hidden: ({ settings }) => !settings['AUTH_PASSKEY'],
-        permissions: ['authentication.view_passkey']
+        permissions: ['authentication.view_passkey'],
+        activeMenu: '/profile/passkeys'
       }
     },
     {