liuwei_x_x/abot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

群总结模板升级：新增Gemini风格卡片并优化Markdown富标签渲染

Browse Source 
变更项：

1. 新增 templates/gemini_summary_card.html，按 Gemini 风格实现移动卡片化总结模板。

2. message_summary 渲染链路升级：支持更完整的 Markdown 富标签转 HTML（标题/列表/表格/代码块/引用等）。

3. 增加渲染后 HTML 安全过滤，清理 script/iframe/on* 事件与 javascript: 链接。

4. 增加 markdown 依赖缺失时的轻量回退解析，保证插件在最小环境下可用。

5. 默认输出配置切换为 template，并指向新 Gemini 风格模板。
This commit is contained in:
liuwei
2026-04-23 09:37:31 +08:00
parent f438f0f955
commit 35f1fbc978
4 changed files with 576 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/message_summary/templates/gemini-code-1776907723749.html
+199
View File
@@ -0,0 +1,199 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Group_Digest_Mobile_V4</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@500&display=swap');
body {
background-color: #f8fafc;
color: #334155;
font-family: 'Inter', 'PingFang SC', -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
}
.report-container {
width: 420px;
margin: 0 auto;
background: #ffffff;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}
.label-tiny {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #94a3b8;
margin-bottom: 2px;
display: block;
}
.card-inner {
border: 1px solid #f1f5f9;
border-radius: 4px;
padding: 10px;
}
.mono { font-family: 'JetBrains Mono', monospace; }
.conclusion-area {
background-color: #f0fdf4;
border-left: 2px solid #22c55e;
padding: 8px;
border-radius: 0 4px 4px 0;
}
</style>
</head>
<body class="py-6">
<div class="report-container">
<header class="p-5 border-b border-slate-100">
<div class="flex justify-between items-start mb-4">
<div>
<h1 class="text-base font-black text-slate-900 tracking-tight">CHAT INSIGHTS <span class="text-blue-600 font-medium">REPORT</span></h1>
<p class="text-[10px] text-slate-400 font-medium mono uppercase">ID: 20260423-L-OPEN</p>
</div>
<div class="px-2 py-1 bg-slate-100 rounded text-[9px] font-bold text-slate-500 uppercase">
Daily Archive
</div>
</div>
<div class="grid grid-cols-4 gap-2 text-center">
<div class="bg-slate-50 py-2 rounded">
<span class="label-tiny">Msgs</span>
<span class="text-xs font-bold text-slate-700">1,402</span>
</div>
<div class="bg-slate-50 py-2 rounded">
<span class="label-tiny">Links</span>
<span class="text-xs font-bold text-blue-600">12</span>
</div>
<div class="bg-slate-50 py-2 rounded">
<span class="label-tiny">Files</span>
<span class="text-xs font-bold text-purple-600">5</span>
</div>
<div class="bg-slate-50 py-2 rounded">
<span class="label-tiny">Alerts</span>
<span class="text-xs font-bold text-rose-500">3</span>
</div>
</div>
</header>
<div class="p-5 border-b border-slate-50">
<span class="label-tiny mb-3"># Personal Interest Radar</span>
<div class="flex flex-wrap gap-2">
<span class="text-[10px] px-2 py-0.5 bg-blue-50 text-blue-600 border border-blue-100 rounded font-bold italic">Gemma 4</span>
<span class="text-[10px] px-2 py-0.5 bg-indigo-50 text-indigo-600 border border-indigo-100 rounded font-bold italic">RTX 5090</span>
<span class="text-[10px] px-2 py-0.5 bg-slate-100 text-slate-500 rounded">Playwright</span>
<span class="text-[10px] px-2 py-0.5 bg-emerald-50 text-emerald-600 border border-emerald-100 rounded font-bold italic">Nasdaq 100</span>
<span class="text-[10px] px-2 py-0.5 bg-slate-100 text-slate-500 rounded">frp Tunnel</span>
</div>
</div>
<div class="p-5 space-y-6">
<span class="label-tiny"># Key Discussions</span>
<div class="space-y-2">
<div class="flex items-center gap-2">
<span class="text-[11px] font-bold text-slate-900">01. LLM 本地部署显存压测</span>
<div class="h-[1px] flex-grow bg-slate-100"></div>
</div>
<div class="pl-2 space-y-2">
<div>
<span class="label-tiny text-slate-400">Background</span>
<p class="text-[11px] text-slate-600 leading-relaxed">群友在 Mac mini M1 (16G) 环境下运行 Gemma 4 26B，出现内存频繁交换导致系统卡顿。</p>
</div>
<div>
<span class="label-tiny text-slate-400">Key Points</span>
<ul class="text-[11px] text-slate-600 list-disc pl-3 space-y-0.5">
<li>4-bit 量化（GGUF/Q4_K_M）显存占用约 17.5GB。</li>
<li>需通过脚本强制清理物理内存 Swap 以缓解抖动。</li>
<li>Ollama 推理时建议关闭 Electron 全家桶。</li>
</ul>
</div>
<div class="conclusion-area">
<span class="label-tiny !text-emerald-600">Conclusion</span>
<p class="text-[11px] font-bold text-emerald-800 italic">“16G 内存是底线，追求速度建议 32G 或 24G 显存 GPU 运行。”</p>
</div>
</div>
</div>
<div class="space-y-2">
<div class="flex items-center gap-2">
<span class="text-[11px] font-bold text-slate-900">02. Dota 2 击杀识别 OCR 算法</span>
<div class="h-[1px] flex-grow bg-slate-100"></div>
</div>
<div class="pl-2 space-y-2 text-[11px]">
<span class="label-tiny text-slate-400">Analysis</span>
<p class="text-slate-600 leading-relaxed">弃用 Tesseract 改用 PaddleOCR。在处理 Douyu 直播间 1080P 高码率画面时，识别准确率从 72% 提升至 91%。</p>
</div>
</div>
</div>
<div class="p-5 bg-slate-50/50 border-y border-slate-100">
<span class="label-tiny mb-3"># Shared Resources</span>
<div class="space-y-1">
<div class="card-inner bg-white flex justify-between items-center py-1.5">
<div class="flex items-center gap-2 overflow-hidden">
<i class="fab fa-github text-slate-300 text-[12px]"></i>
<span class="text-[10px] font-medium text-slate-600 truncate">ollama-python/v2.1-stable</span>
</div>
<i class="fas fa-chevron-right text-[8px] text-slate-300"></i>
</div>
<div class="card-inner bg-white flex justify-between items-center py-1.5">
<div class="flex items-center gap-2 overflow-hidden">
<i class="far fa-file-pdf text-slate-300 text-[12px]"></i>
<span class="text-[10px] font-medium text-slate-600 truncate">RTX_5090_Whitepaper_Draft.pdf</span>
</div>
<i class="fas fa-chevron-right text-[8px] text-slate-300"></i>
</div>
</div>
</div>
<div class="p-5 grid grid-cols-2 gap-4">
<div>
<span class="label-tiny mb-2"># Marketplace</span>
<div class="space-y-1 text-[10px]">
<div class="flex justify-between border-b border-slate-100 pb-1">
<span class="text-rose-500 font-bold">[出] 3060Ti</span>
<span class="mono font-bold text-slate-700">¥1650</span>
</div>
<div class="flex justify-between border-b border-slate-100 pb-1 pt-1">
<span class="text-blue-500 font-bold">[求] TI 饰品</span>
<span class="mono text-slate-400">面议</span>
</div>
</div>
</div>
<div>
<span class="label-tiny mb-2"># Unresolved Pool</span>
<div class="space-y-1 text-[10px]">
<p class="text-slate-500 leading-tight border-l-2 border-amber-200 pl-2">"Ubuntu 24.04 驱动掉线如何修复？"</p>
<p class="text-slate-500 leading-tight border-l-2 border-amber-200 pl-2">"Nasdaq 100 ETF 最优定投点？"</p>
</div>
</div>
</div>
<div class="px-5 pb-5">
<div class="card-inner bg-slate-900 text-white border-none p-3 shadow-inner">
<span class="label-tiny text-slate-500 mb-1"># Core Knowledge Points</span>
<p class="text-[10px] leading-relaxed text-slate-300">
<span class="text-blue-400 font-bold">FRP 配置项优化：</span> 针对内网穿透超时，需将 <code class="mono text-[9px] bg-slate-800 px-1">tcp_mux</code> 设置为 <code class="mono text-[9px] bg-slate-800 px-1">true</code>，并检查服务端防火墙 MTU 限制。
</p>
</div>
</div>
<footer class="p-5 bg-slate-50 border-t border-slate-100 flex justify-between items-center">
<span class="label-tiny">Top Contributors</span>
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-[9px] font-bold text-blue-600">L</div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-indigo-100 flex items-center justify-center text-[9px] font-bold text-indigo-600">G</div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-slate-200 flex items-center justify-center text-[9px] font-bold text-slate-500">T</div>
</div>
</footer>
</div>
<div class="text-center mt-4 text-[9px] text-slate-400">
Engine: Playwright 1.42 / Renderer: Webkit / User: Liuwei
</div>
</body>
</html>
plugins/message_summary/templates/gemini_summary_card.html
+298
View File
@@ -0,0 +1,298 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<style>
:root {
--bg: #f8fafc;
--surface: #ffffff;
--line: #eef2f7;
--text: #334155;
--text-soft: #64748b;
--text-faint: #94a3b8;
--title: #0f172a;
--brand: #2563eb;
--brand-soft: #dbeafe;
--ok-soft: #f0fdf4;
--ok-line: #22c55e;
--quote-bg: #f8fafc;
--quote-line: #cbd5e1;
--code-bg: #0f172a;
--code-text: #e2e8f0;
--shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 24px 0;
background: var(--bg);
color: var(--text);
font-family: "Inter", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
}
.report-container {
width: 440px;
margin: 0 auto;
background: var(--surface);
box-shadow: var(--shadow);
border: 1px solid #e2e8f0;
}
.label-tiny {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--text-faint);
margin-bottom: 2px;
display: block;
}
.header {
padding: 18px 18px 14px;
border-bottom: 1px solid var(--line);
}
.header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 10px;
}
.header-title {
font-size: 15px;
font-weight: 900;
color: var(--title);
letter-spacing: -.02em;
line-height: 1.35;
}
.header-title .accent {
color: var(--brand);
font-weight: 600;
}
.header-id {
margin-top: 4px;
font-size: 10px;
color: var(--text-faint);
font-weight: 600;
letter-spacing: .03em;
}
.header-tag {
padding: 4px 8px;
background: #f1f5f9;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
color: #64748b;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid #e2e8f0;
}
.meta-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
text-align: center;
}
.meta-item {
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 4px;
padding: 8px 4px 6px;
}
.meta-value {
font-size: 11px;
font-weight: 800;
color: #475569;
}
.meta-value.brand {
color: var(--brand);
}
.summary-body {
padding: 16px 18px 18px;
}
.markdown-body {
font-size: 12px;
line-height: 1.82;
color: var(--text);
word-wrap: break-word;
}
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child { margin-bottom: 0; }
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: var(--title);
margin: 16px 0 8px;
line-height: 1.42;
font-weight: 800;
letter-spacing: -.01em;
}
.markdown-body h1 { font-size: 18px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.markdown-body h2 { font-size: 16px; }
.markdown-body h3 { font-size: 14px; }
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 { font-size: 13px; }
.markdown-body p { margin: 8px 0; }
.markdown-body ul,
.markdown-body ol {
margin: 8px 0 12px;
padding-left: 18px;
}
.markdown-body li { margin: 4px 0; }
.markdown-body blockquote {
margin: 10px 0;
padding: 8px 10px;
border-left: 3px solid var(--quote-line);
background: var(--quote-bg);
color: #475569;
border-radius: 0 4px 4px 0;
}
.markdown-body hr {
border: none;
border-top: 1px dashed #dbe3ee;
margin: 14px 0;
}
.markdown-body a {
color: var(--brand);
text-decoration: none;
border-bottom: 1px dotted rgba(37, 99, 235, .5);
}
.markdown-body strong {
color: #1e293b;
font-weight: 800;
}
.markdown-body em {
color: #475569;
font-style: italic;
}
.markdown-body code {
font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 11px;
background: #eff6ff;
color: #1e40af;
padding: 1px 4px;
border-radius: 4px;
}
.markdown-body pre {
margin: 10px 0;
padding: 10px 11px;
border-radius: 6px;
background: var(--code-bg);
color: var(--code-text);
overflow-x: auto;
border: 1px solid #1e293b;
}
.markdown-body pre code {
background: transparent;
color: inherit;
padding: 0;
border-radius: 0;
font-size: 11px;
line-height: 1.7;
}
.markdown-body table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
font-size: 11px;
border: 1px solid #e2e8f0;
}
.markdown-body th,
.markdown-body td {
border: 1px solid #e2e8f0;
padding: 6px 7px;
text-align: left;
vertical-align: top;
}
.markdown-body th {
background: #f8fafc;
color: #334155;
font-weight: 700;
}
.markdown-body img {
max-width: 100%;
border-radius: 6px;
border: 1px solid #e2e8f0;
margin: 6px 0;
}
.summary-footer {
margin-top: 14px;
padding-top: 10px;
border-top: 1px dashed #e2e8f0;
font-size: 10px;
color: var(--text-faint);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.summary-footer .right {
font-size: 9px;
color: #94a3b8;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.safe-callout {
margin-top: 10px;
padding: 8px 10px;
background: var(--ok-soft);
border-left: 2px solid var(--ok-line);
border-radius: 0 4px 4px 0;
font-size: 11px;
color: #166534;
}
</style>
</head>
<body>
<div class="report-container">
<header class="header">
<div class="header-row">
<div>
<div class="header-title">CHAT INSIGHTS <span class="accent">SUMMARY</span></div>
<div class="header-id">{{ generated_at }}</div>
</div>
<div class="header-tag">Daily Archive</div>
</div>
<div class="meta-grid">
<div class="meta-item">
<span class="label-tiny">Type</span>
<div class="meta-value">群总结</div>
</div>
<div class="meta-item">
<span class="label-tiny">Mode</span>
<div class="meta-value brand">Template</div>
</div>
<div class="meta-item">
<span class="label-tiny">Render</span>
<div class="meta-value">HTML</div>
</div>
<div class="meta-item">
<span class="label-tiny">Engine</span>
<div class="meta-value">LLM</div>
</div>
</div>
</header>
<section class="summary-body">
<span class="label-tiny"># {{ title }}</span>
<div class="markdown-body">
{{ summary_html }}
</div>
<div class="safe-callout">
内容已按 Markdown 富标签样式渲染（标题、列表、表格、代码块、引用）。
</div>
<div class="summary-footer">
<span>ABOT · Message Summary Gemini Style</span>
<span class="right">Renderer: Playwright</span>
</div>
</section>
</div>
</body>
</html>