Explorar el Código

更新ChatRecordsView.vue以添加发送者信息和消息样式,优化消息显示效果;更新FishView.vue以简化提示信息,修改窗口打开方式为新标签页;在RecordsView.vue中添加Fish ID列以增强记录展示。

wuyi hace 4 meses
padre
commit
590d6aa3e2
Se han modificado 3 ficheros con 57 adiciones y 7 borrados
  1. 46 2
      src/views/ChatRecordsView.vue
  2. 5 5
      src/views/FishView.vue
  3. 6 0
      src/views/RecordsView.vue

+ 46 - 2
src/views/ChatRecordsView.vue

@@ -266,9 +266,13 @@ const processMessageContent = (message) => {
 
   // 确保有时间显示,如果没有date字段则显示当前时间或默认值
   const messageTime = message.date || '未知时间'
+  
+  // 添加发送者信息
+  const senderInfo = message.senderName ? `<div class="message-sender">${escapeHtml(message.senderName)}</div>` : ''
 
   if (message.mediaType === 'Photo' && message.imagePath) {
     content += `
+      ${senderInfo}
       <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">
@@ -281,6 +285,7 @@ const processMessageContent = (message) => {
     const url = urlMatch ? urlMatch[0] : message.text
 
     content += `
+      ${senderInfo}
       <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>
@@ -289,6 +294,7 @@ const processMessageContent = (message) => {
     `
   } else {
     content += `
+      ${senderInfo}
       <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>
     `
@@ -420,7 +426,11 @@ const handleImagesAfterUpdate = async () => {
               <div
                 v-for="message in getCurrentMessages()"
                 :key="message.id"
-                class="message message-incoming"
+                class="message"
+                :class="{
+                  'message-outgoing': message.isFromMe,
+                  'message-incoming': !message.isFromMe
+                }"
                 v-html="processMessageContent(message)"
               ></div>
             </div>
@@ -540,12 +550,46 @@ const handleImagesAfterUpdate = async () => {
   margin-bottom: 1rem;
   padding: 1rem;
   border-radius: 8px;
-  background-color: #f3f4f6;
   max-width: 80%;
+  position: relative;
 }
 
 .message-incoming {
   margin-right: auto;
+  background-color: #f3f4f6;
+  border: 1px solid #e5e7eb;
+}
+
+.message-outgoing {
+  margin-left: auto;
+  background-color: #3b82f6;
+  color: white;
+  border: 1px solid #2563eb;
+}
+
+.message-outgoing .message-sender {
+  color: #dbeafe;
+  font-weight: 600;
+}
+
+.message-outgoing .message-time {
+  color: #dbeafe !important;
+}
+
+.message-outgoing .message-web-page {
+  background-color: #1d4ed8;
+  border-color: #1e40af;
+}
+
+.message-outgoing .message-web-page a {
+  color: #dbeafe;
+}
+
+.message-sender {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 0.5rem;
 }
 
 .message-text {

+ 5 - 5
src/views/FishView.vue

@@ -711,7 +711,7 @@ const handleQuickLogin = (fish) => {
       toast.add({
         severity: 'warn',
         summary: '警告',
-        detail: `${fish.name} 没有Session信息,无法执行一键登录`,
+        detail: `没有Session信息,无法执行一键登录`,
         life: 3000
       })
       return
@@ -723,21 +723,21 @@ const handleQuickLogin = (fish) => {
     // 构建登录URL
     const loginUrl = `${quickLoginUrl}/?data=${encodeURIComponent(fish.session)}`
 
-    // 打开新窗口
-    const newWindow = window.open(loginUrl, '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes')
+    // 打开新标签页
+    const newWindow = window.open(loginUrl, '_blank')
 
     if (newWindow) {
       toast.add({
         severity: 'success',
         summary: '成功',
-        detail: `正在为 ${fish.name} 打开登录窗口...`,
+        detail: `正在为 ${fish.name} 打开登录标签页...`,
         life: 3000
       })
     } else {
       toast.add({
         severity: 'error',
         summary: '错误',
-        detail: '无法打开新窗口,请检查浏览器弹窗设置',
+        detail: '无法打开新标签页,请检查浏览器弹窗设置',
         life: 3000
       })
     }

+ 6 - 0
src/views/RecordsView.vue

@@ -439,6 +439,12 @@ onMounted(() => {
         </template>
       </Column>
 
+      <Column field="fishId" header="Fish ID" style="width: 120px">
+        <template #body="slotProps">
+          <span class="font-mono text-sm">{{ slotProps.data.fishId || '-' }}</span>
+        </template>
+      </Column>
+
       <Column field="description" header="描述" style="min-width: 300px; max-width: 400px">
         <template #body="slotProps">
           <div class="whitespace-pre-line text-sm" :title="formatDescription(slotProps.data.description)"