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 "聊天总结" 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() 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) paragraphs = re.findall(r'<p>(.*?)</p>', remain, re.S | re.I)
hero_meta = meta_match.group(1).strip() if meta_match else "群聊总结 / 自动生成" meta_parts = []
if meta_match: used = 0
remain = re.sub(r'^<p>.*?</p>', '', remain, count=1, flags=re.S | re.I).strip() 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 return hero_title, hero_meta, remain
@@ -88,14 +100,15 @@ async def md_str_to_html_content(md_content):
css = """ css = """
<style> <style>
:root { :root {
--bg1: #f7f4ff; --bg1: #0f172a;
--bg2: #eef8ff; --bg2: #172554;
--paper: #ffffff; --paper: #ffffff;
--text: #233044; --text: #233044;
--muted: #718198; --muted: #c7d2e3;
--primary: #6d5efc; --muted-2: rgba(235, 241, 255, 0.82);
--primary: #8b7cff;
--primary-soft: rgba(109,94,252,0.10); --primary-soft: rgba(109,94,252,0.10);
--accent: #14b8a6; --accent: #22c3b5;
--line: rgba(148,163,184,0.18); --line: rgba(148,163,184,0.18);
--code-bg: #0f172a; --code-bg: #0f172a;
--code-fg: #e2e8f0; --code-fg: #e2e8f0;
@@ -110,54 +123,89 @@ async def md_str_to_html_content(md_content):
font-size: 16px; font-size: 16px;
line-height: 1.78; line-height: 1.78;
background: background:
radial-gradient(circle at top left, #ffffff 0%, var(--bg1) 38%, transparent 70%), radial-gradient(circle at top left, rgba(126, 93, 255, 0.14) 0%, transparent 28%),
radial-gradient(circle at top right, #ffffff 0%, var(--bg2) 34%, transparent 70%), radial-gradient(circle at top right, rgba(34, 195, 181, 0.12) 0%, transparent 24%),
linear-gradient(180deg, #f8f9fd 0%, #eef4fb 100%); linear-gradient(180deg, #eef4fb 0%, #e8f0f8 100%);
padding: 26px; padding: 26px;
} }
.wrap { .wrap {
max-width: 820px; max-width: 820px;
margin: 0 auto; 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: 1px solid rgba(255,255,255,0.7);
border-radius: 28px; border-radius: 28px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
overflow: hidden; overflow: hidden;
} }
.hero { .hero {
padding: 30px 34px 22px; position: relative;
padding: 30px 34px 24px;
background: background:
radial-gradient(circle at 85% 20%, rgba(255,255,255,0.42), transparent 24%), radial-gradient(circle at 18% 18%, rgba(255,255,255,0.10) 0%, transparent 18%),
linear-gradient(135deg, rgba(109,94,252,0.18), rgba(20,184,166,0.10)); radial-gradient(circle at 85% 22%, rgba(255,255,255,0.12) 0%, transparent 20%),
border-bottom: 1px solid var(--line); 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 { .hero-badge {
position: relative;
display: inline-block; display: inline-block;
padding: 6px 12px; padding: 6px 12px;
border-radius: 999px; border-radius: 999px;
font-size: 12px; font-size: 12px;
color: #5747ef; color: #f8faff;
background: rgba(255,255,255,0.70); background: rgba(255,255,255,0.12);
border: 1px solid rgba(109,94,252,0.12); border: 1px solid rgba(255,255,255,0.18);
margin-bottom: 14px; margin-bottom: 14px;
letter-spacing: .04em; letter-spacing: .06em;
backdrop-filter: none;
} }
.hero-title { .hero-title {
position: relative;
margin: 0; margin: 0;
font-size: 2.05em; font-size: 2.05em;
line-height: 1.28; line-height: 1.28;
font-weight: 800; font-weight: 800;
color: #1f2557; color: #ffffff;
text-align: center; text-align: center;
letter-spacing: -0.02em; letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0,0,0,0.12);
} }
.hero-meta { .hero-meta {
margin: 10px auto 0; position: relative;
max-width: 620px; margin: 12px auto 0;
max-width: 660px;
text-align: center; text-align: center;
color: var(--muted); color: var(--muted-2);
font-size: 0.92em; font-size: 0.84em;
line-height: 1.7; line-height: 1.72;
}
.hero-meta p {
margin: 4px 0;
color: inherit;
} }
.content { .content {
padding: 24px 34px 34px; padding: 24px 34px 34px;
@@ -273,7 +321,7 @@ async def md_str_to_html_content(md_content):
.signature { .signature {
margin-top: 34px; margin-top: 34px;
text-align: right; text-align: right;
color: var(--muted); color: #73849c;
font-size: 0.95em; font-size: 0.95em;
font-style: italic; font-style: italic;
} }