Browse Source

优化聊天记录视图中的时间显示样式,调整相关CSS属性以提升可读性和一致性,同时简化日期解析逻辑。

wui 7 months ago
parent
commit
13e2a47e17
1 changed files with 15 additions and 14 deletions
  1. 15 14
      src/views/ChatRecordsView.vue

+ 15 - 14
src/views/ChatRecordsView.vue

@@ -20,7 +20,6 @@ const dropZoneRef = ref()
 // 解析日期字符串为Date对象
 const parseDate = (dateStr) => {
   try {
-    // 处理形如 "2025/6/10 17:37:21" 的日期格式
     const parts = dateStr.split(' ')
     if (parts.length !== 2) return new Date(0)
 
@@ -270,11 +269,11 @@ const processMessageContent = (message) => {
 
   if (message.mediaType === 'Photo' && message.imagePath) {
     content += `
-      <div class="message-text">${escapeHtml(message.text)}</div>
+      <div class="message-text" style="margin-bottom: 1rem;">${escapeHtml(message.text)}</div>
       <div class="message-image-container">
         <img class="message-image" data-image-path="${message.imagePath}" alt="图片" loading="lazy">
       </div>
-      <div class="message-time">${messageTime}</div>
+      <div class="message-time" style="font-size: 0.75rem; color: #dc2626; margin-top: 1rem; text-align: right; font-style: italic; opacity: 0.9; display: block; width: 100%;">${messageTime}</div>
     `
   } else if (message.mediaType === 'WebPage' && message.text) {
     // 尝试提取URL
@@ -282,16 +281,16 @@ const processMessageContent = (message) => {
     const url = urlMatch ? urlMatch[0] : message.text
 
     content += `
-      <div class="message-text">${escapeHtml(message.text)}</div>
+      <div class="message-text" style="margin-bottom: 1rem;">${escapeHtml(message.text)}</div>
       <div class="message-web-page">
         <a href="${url}" target="_blank" rel="noopener noreferrer">${escapeHtml(url)}</a>
       </div>
-      <div class="message-time">${messageTime}</div>
+      <div class="message-time" style="font-size: 0.75rem; color: #dc2626; margin-top: 1rem; text-align: right; font-style: italic; opacity: 0.9; display: block; width: 100%;">${messageTime}</div>
     `
   } else {
     content += `
-      <div class="message-text">${escapeHtml(message.text)}</div>
-      <div class="message-time">${messageTime}</div>
+      <div class="message-text" style="margin-bottom: 1rem;">${escapeHtml(message.text)}</div>
+      <div class="message-time" style="font-size: 0.75rem; color: #dc2626; margin-top: 1rem; text-align: right; font-style: italic; opacity: 0.9; display: block; width: 100%;">${messageTime}</div>
     `
   }
 
@@ -412,7 +411,7 @@ const handleImagesAfterUpdate = async () => {
                   <span class="summary-item-icon">💾</span>
                   <span>媒体文件: {{ message.mediaDownload }}</span>
                 </div>
-                <div class="message-time">{{ message.date }}</div>
+                <div class="message-time" style="font-size: 0.75rem; color: #dc2626; margin-top: 1rem; text-align: right; font-style: italic; opacity: 0.9; display: block; width: 100%;">{{ message.date }}</div>
               </div>
             </div>
 
@@ -556,12 +555,14 @@ const handleImagesAfterUpdate = async () => {
 }
 
 .message-time {
-  font-size: 0.65rem !important;
-  color: #dc2626 !important;
-  margin-top: 1rem !important;
-  text-align: right !important;
-  font-style: italic !important;
-  opacity: 0.9 !important;
+  font-size: 0.75rem;
+  color: #dc2626;
+  margin-top: 1rem;
+  text-align: right;
+  font-style: italic;
+  opacity: 0.9;
+  display: block;
+  width: 100%;
 }
 
 /* 导出摘要样式 */