mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-25 07:16:51 +00:00
修复
This commit is contained in:
xuncha
@@ -82,29 +82,18 @@
|
||||
}
|
||||
|
||||
.first-chat-scene {
|
||||
background: linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--primary) 60%, #000) 0%,
|
||||
color-mix(in srgb, var(--primary) 40%, #fff) 50%,
|
||||
var(--ar-bg-color) 100%);
|
||||
border-radius: 20px;
|
||||
padding: 28px 24px 24px;
|
||||
color: var(--text-primary);
|
||||
background: color-mix(in srgb, var(--ar-card-bg) 92%, #fff 8%);
|
||||
border-radius: 16px;
|
||||
padding: 18px 16px 16px;
|
||||
color: var(--ar-text-main);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 16px;
|
||||
border: 1px solid var(--border-color);
|
||||
border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
|
||||
.first-chat-scene::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 40%),
|
||||
radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 35%),
|
||||
radial-gradient(circle at 50% 80%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 45%);
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scene-title {
|
||||
@@ -112,7 +101,7 @@
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-primary);
|
||||
color: var(--ar-text-main);
|
||||
}
|
||||
|
||||
.scene-subtitle {
|
||||
@@ -121,13 +110,13 @@
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.9;
|
||||
color: var(--text-secondary);
|
||||
color: var(--ar-text-sub);
|
||||
}
|
||||
|
||||
.scene-messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.scene-message {
|
||||
@@ -141,30 +130,53 @@
|
||||
}
|
||||
|
||||
.scene-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
background: var(--primary-light);
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
background: var(--ar-card-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
color: var(--ar-text-sub);
|
||||
border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.08));
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.scene-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: min(78%, 720px);
|
||||
}
|
||||
|
||||
.scene-message.sent .scene-content-wrapper {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.scene-bubble {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
background: color-mix(in srgb, var(--ar-card-bg-hover) 90%, #fff 10%);
|
||||
color: var(--ar-text-main);
|
||||
padding: 10px 14px;
|
||||
border-radius: 14px;
|
||||
max-width: 60%;
|
||||
box-shadow: var(--shadow-md);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
width: fit-content;
|
||||
min-width: 68px;
|
||||
max-width: 100%;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid var(--bg-tertiary, rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
|
||||
.scene-message.sent .scene-bubble {
|
||||
background: color-mix(in srgb, var(--primary) 15%, var(--bg-secondary));
|
||||
border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color));
|
||||
background: color-mix(in srgb, var(--primary) 12%, var(--ar-card-bg-hover));
|
||||
border-color: color-mix(in srgb, var(--primary) 26%, var(--bg-tertiary, rgba(0, 0, 0, 0.06)));
|
||||
}
|
||||
|
||||
.scene-meta {
|
||||
@@ -176,13 +188,24 @@
|
||||
|
||||
.scene-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
line-height: 1.65;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
line-break: auto;
|
||||
}
|
||||
|
||||
.scene-avatar.fallback {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.scene-avatar.with-image {
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.scene-message.sent .scene-avatar {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border-color: color-mix(in srgb, var(--primary) 30%, var(--bg-tertiary, rgba(0, 0, 0, 0.08)));
|
||||
}
|
||||
|
||||
.dual-stat-grid {
|
||||
@@ -512,5 +535,20 @@
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.scene-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.scene-content-wrapper {
|
||||
max-width: min(86%, 500px);
|
||||
}
|
||||
|
||||
.scene-bubble {
|
||||
max-width: 100%;
|
||||
min-width: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -205,6 +205,13 @@ function DualReportWindow() {
|
||||
)
|
||||
|
||||
const stripCdata = (text: string) => text.replace(/<!\[CDATA\[([\s\S]*?)\]\]>/g, '$1')
|
||||
const compactMessageText = (text: string) => (
|
||||
text
|
||||
.replace(/\r\n/g, '\n')
|
||||
.replace(/\s*\n+\s*/g, ' ')
|
||||
.replace(/\s{2,}/g, ' ')
|
||||
.trim()
|
||||
)
|
||||
|
||||
const extractXmlText = (content: string) => {
|
||||
const titleMatch = content.match(/<title>([\s\S]*?)<\/title>/i)
|
||||
@@ -219,18 +226,18 @@ function DualReportWindow() {
|
||||
}
|
||||
|
||||
const formatMessageContent = (content?: string) => {
|
||||
const raw = String(content || '').trim()
|
||||
const raw = compactMessageText(String(content || '').trim())
|
||||
if (!raw) return '（空）'
|
||||
|
||||
// 1. 尝试提取 XML 关键字段
|
||||
const titleMatch = raw.match(/<title>([\s\S]*?)<\/title>/i)
|
||||
if (titleMatch?.[1]) return decodeEntities(stripCdata(titleMatch[1]).trim())
|
||||
if (titleMatch?.[1]) return compactMessageText(decodeEntities(stripCdata(titleMatch[1]).trim()))
|
||||
|
||||
const descMatch = raw.match(/<des>([\s\S]*?)<\/des>/i)
|
||||
if (descMatch?.[1]) return decodeEntities(stripCdata(descMatch[1]).trim())
|
||||
if (descMatch?.[1]) return compactMessageText(decodeEntities(stripCdata(descMatch[1]).trim()))
|
||||
|
||||
const summaryMatch = raw.match(/<summary>([\s\S]*?)<\/summary>/i)
|
||||
if (summaryMatch?.[1]) return decodeEntities(stripCdata(summaryMatch[1]).trim())
|
||||
if (summaryMatch?.[1]) return compactMessageText(decodeEntities(stripCdata(summaryMatch[1]).trim()))
|
||||
|
||||
// 2. 检查是否是 XML 结构
|
||||
const hasXmlTag = /<\s*[a-zA-Z]+[^>]*>/.test(raw)
|
||||
@@ -241,7 +248,7 @@ function DualReportWindow() {
|
||||
// 3. 最后的尝试：移除所有 XML 标签，看是否还有有意义的文本
|
||||
const stripped = raw.replace(/<[^>]+>/g, '').trim()
|
||||
if (stripped && stripped.length > 0 && stripped.length < 50) {
|
||||
return decodeEntities(stripped)
|
||||
return compactMessageText(decodeEntities(stripped))
|
||||
}
|
||||
|
||||
return '（多媒体/卡片消息）'
|
||||
@@ -279,6 +286,19 @@ function DualReportWindow() {
|
||||
|
||||
const mostActive = reportData.heatmap ? getMostActiveTime(reportData.heatmap) : null
|
||||
const responseAvgMinutes = reportData.response ? Math.max(0, Math.round(reportData.response.avg / 60)) : 0
|
||||
const getSceneAvatarUrl = (isSentByMe: boolean) => (isSentByMe ? reportData.selfAvatarUrl : reportData.friendAvatarUrl)
|
||||
const getSceneAvatarFallback = (isSentByMe: boolean) => (isSentByMe ? '我' : reportData.friendName.substring(0, 1))
|
||||
const renderSceneAvatar = (isSentByMe: boolean) => {
|
||||
const avatarUrl = getSceneAvatarUrl(isSentByMe)
|
||||
if (avatarUrl) {
|
||||
return (
|
||||
<div className="scene-avatar with-image">
|
||||
<img src={avatarUrl} alt={isSentByMe ? 'me-avatar' : 'friend-avatar'} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <div className="scene-avatar fallback">{getSceneAvatarFallback(isSentByMe)}</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="annual-report-window dual-report-window">
|
||||
@@ -317,9 +337,7 @@ function DualReportWindow() {
|
||||
<div className="scene-messages">
|
||||
{firstChatMessages.map((msg, idx) => (
|
||||
<div key={idx} className={`scene-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
|
||||
<div className="scene-avatar">
|
||||
{msg.isSentByMe ? '我' : reportData.friendName.substring(0, 1)}
|
||||
</div>
|
||||
{renderSceneAvatar(msg.isSentByMe)}
|
||||
<div className="scene-content-wrapper">
|
||||
<div className="scene-meta">
|
||||
{formatFullDate(msg.createTime).split(' ')[1]}
|
||||
@@ -355,9 +373,7 @@ function DualReportWindow() {
|
||||
<div className="scene-messages">
|
||||
{yearFirstChat.firstThreeMessages.map((msg, idx) => (
|
||||
<div key={idx} className={`scene-message ${msg.isSentByMe ? 'sent' : 'received'}`}>
|
||||
<div className="scene-avatar">
|
||||
{msg.isSentByMe ? '我' : reportData.friendName.substring(0, 1)}
|
||||
</div>
|
||||
{renderSceneAvatar(msg.isSentByMe)}
|
||||
<div className="scene-content-wrapper">
|
||||
<div className="scene-meta">
|
||||
{formatFullDate(msg.createTime).split(' ')[1]}
|
||||
|
||||
Reference in New Issue
Block a user