style: enhance summary hero section

This commit is contained in:
liuwei
2026-03-21 14:18:03 +08:00
parent d5619db571
commit bbbfa32263

View File

@@ -72,10 +72,22 @@ def _split_hero(html_body: str):
hero_title = title_match.group(1).strip() if title_match else "聊天总结"
remain = re.sub(r'<h1>.*?</h1>', '', html_body, count=1, flags=re.S | re.I).strip()
meta_match = re.match(r'^<p>(.*?)</p>', remain, re.S | re.I)
hero_meta = meta_match.group(1).strip() if meta_match else "群聊总结 / 自动生成"
if meta_match:
remain = re.sub(r'^<p>.*?</p>', '', remain, count=1, flags=re.S | re.I).strip()
paragraphs = re.findall(r'<p>(.*?)</p>', remain, re.S | re.I)
meta_parts = []
used = 0
for para in paragraphs[:3]:
clean = re.sub(r'<.*?>', '', para).strip()
if not clean:
continue
if len(clean) <= 80 or any(k in clean for k in ["", "时间", "日期", "成员", "消息", "统计", "总结", "来源"]):
meta_parts.append(para.strip())
used += 1
else:
break
hero_meta = "<br/>".join(meta_parts) if meta_parts else "群聊总结 / 自动生成"
if used > 0:
remain = re.sub(r'^(\s*<p>.*?</p>){' + str(used) + r'}', '', remain, count=1, flags=re.S | re.I).strip()
return hero_title, hero_meta, remain
@@ -88,14 +100,15 @@ async def md_str_to_html_content(md_content):
css = """
<style>
:root {
--bg1: #f7f4ff;
--bg2: #eef8ff;
--bg1: #0f172a;
--bg2: #172554;
--paper: #ffffff;
--text: #233044;
--muted: #718198;
--primary: #6d5efc;
--muted: #c7d2e3;
--muted-2: rgba(235, 241, 255, 0.82);
--primary: #8b7cff;
--primary-soft: rgba(109,94,252,0.10);
--accent: #14b8a6;
--accent: #22c3b5;
--line: rgba(148,163,184,0.18);
--code-bg: #0f172a;
--code-fg: #e2e8f0;
@@ -110,54 +123,89 @@ async def md_str_to_html_content(md_content):
font-size: 16px;
line-height: 1.78;
background:
radial-gradient(circle at top left, #ffffff 0%, var(--bg1) 38%, transparent 70%),
radial-gradient(circle at top right, #ffffff 0%, var(--bg2) 34%, transparent 70%),
linear-gradient(180deg, #f8f9fd 0%, #eef4fb 100%);
radial-gradient(circle at top left, rgba(126, 93, 255, 0.14) 0%, transparent 28%),
radial-gradient(circle at top right, rgba(34, 195, 181, 0.12) 0%, transparent 24%),
linear-gradient(180deg, #eef4fb 0%, #e8f0f8 100%);
padding: 26px;
}
.wrap {
max-width: 820px;
margin: 0 auto;
background: rgba(255,255,255,0.96);
background: rgba(255,255,255,0.97);
border: 1px solid rgba(255,255,255,0.7);
border-radius: 28px;
box-shadow: var(--shadow);
overflow: hidden;
}
.hero {
padding: 30px 34px 22px;
position: relative;
padding: 30px 34px 24px;
background:
radial-gradient(circle at 85% 20%, rgba(255,255,255,0.42), transparent 24%),
linear-gradient(135deg, rgba(109,94,252,0.18), rgba(20,184,166,0.10));
border-bottom: 1px solid var(--line);
radial-gradient(circle at 18% 18%, rgba(255,255,255,0.10) 0%, transparent 18%),
radial-gradient(circle at 85% 22%, rgba(255,255,255,0.12) 0%, transparent 20%),
linear-gradient(135deg, #1e1b4b 0%, #1d4ed8 52%, #0f766e 100%);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(125deg, rgba(255,255,255,0.05) 0%, transparent 38%),
linear-gradient(300deg, rgba(255,255,255,0.04) 0%, transparent 30%);
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
right: -40px;
top: -36px;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.12);
box-shadow:
0 0 0 24px rgba(255,255,255,0.04),
0 0 0 56px rgba(255,255,255,0.025);
opacity: 0.9;
pointer-events: none;
}
.hero-badge {
position: relative;
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
font-size: 12px;
color: #5747ef;
background: rgba(255,255,255,0.70);
border: 1px solid rgba(109,94,252,0.12);
color: #f8faff;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
margin-bottom: 14px;
letter-spacing: .04em;
letter-spacing: .06em;
backdrop-filter: none;
}
.hero-title {
position: relative;
margin: 0;
font-size: 2.05em;
line-height: 1.28;
font-weight: 800;
color: #1f2557;
color: #ffffff;
text-align: center;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.hero-meta {
margin: 10px auto 0;
max-width: 620px;
position: relative;
margin: 12px auto 0;
max-width: 660px;
text-align: center;
color: var(--muted);
font-size: 0.92em;
line-height: 1.7;
color: var(--muted-2);
font-size: 0.84em;
line-height: 1.72;
}
.hero-meta p {
margin: 4px 0;
color: inherit;
}
.content {
padding: 24px 34px 34px;
@@ -273,7 +321,7 @@ async def md_str_to_html_content(md_content):
.signature {
margin-top: 34px;
text-align: right;
color: var(--muted);
color: #73849c;
font-size: 0.95em;
font-style: italic;
}