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

按用户模板优先重建群总结卡片样式

Browse Source 
- gemini_summary_card 接入 Tailwind CDN 与 Font Awesome CDN，优先沿用用户原模板样式体系\n- 按 420px 高密度技术简报风格重排模块：KPI、雷达标签、三段论话题卡、资源库、双栏挂件、深色知识点、贡献者头像\n- 保持 main.py 与模板字段对齐：资源库结构化项、交易/待解/知识点/贡献者模块数据稳定输出\n- 降低自定义发散样式，尽可能贴合 gemini-code 视觉规范
This commit is contained in:
liuwei
2026-04-23 11:10:55 +08:00
parent a55121aa05
commit e87eeba256
1 changed files with 126 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

581
plugins/message_summary/templates/gemini_summary_card.html
View File

@@ -4,455 +4,119 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</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>
/* 说明：线上字体优先，用于还原 gemini-code 的字形与排版气质。 */
{{ local_font_css }}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
{{ local_font_css }}
:root {
--bg: #F8FAFC;
--surface: #FFFFFF;
--text: #334155;
--heading: #0F172A;
--line: #F1F5F9;
--blue: #2563EB;
--green: #22C55E;
--rose: #F43F5E;
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 10px 0;
background: var(--bg);
color: var(--text);
font-family: var(--abot-font-sans, 'Inter', 'PingFang SC', system-ui, sans-serif);
background-color: #f8fafc;
color: #334155;
font-family: 'Inter', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased;
}
.report-container {
width: 420px;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
background: #ffffff;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
border: 1px solid #f1f5f9;
}
.label-tiny {
display: block;
font-size: 9px;
line-height: 1.2;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #94a3b8;
margin-bottom: 3px;
margin-bottom: 2px;
display: block;
}
.mono { font-family: var(--abot-font-code, 'JetBrains Mono', 'SF Mono', monospace); }
.mono { font-family: 'JetBrains Mono', 'SF Mono', 'Cascadia Mono', monospace; }
.header {
padding: 12px;
border-bottom: 1px solid var(--line);
}
.header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
}
.header-title {
margin: 0;
font-size: 13px;
line-height: 1.25;
font-weight: 900;
color: var(--heading);
letter-spacing: -0.02em;
}
.header-title .accent { color: var(--blue); font-weight: 600; }
.header-id {
margin: 3px 0 0;
font-size: 9px;
color: #94a3b8;
letter-spacing: 0.03em;
}
.header-tag {
padding: 2px 6px;
.card-inner {
border: 1px solid #f1f5f9;
border-radius: 4px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
font-size: 9px;
color: #64748b;
font-weight: 700;
white-space: nowrap;
text-transform: uppercase;
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
.kpi {
background: #f8fafc;
border: 1px solid var(--line);
border-radius: 4px;
padding: 5px 4px;
text-align: center;
}
.kpi .value {
font-size: 11px;
font-weight: 800;
color: #475569;
}
.kpi .value.is-blue { color: var(--blue); }
.kpi .value.is-indigo { color: #4f46e5; }
.kpi .value.is-emerald { color: #059669; }
.radar {
padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
.radar-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 2px;
}
.radar-tag {
font-size: 9px;
line-height: 1.2;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid #e2e8f0;
background: #f1f5f9;
color: #64748b;
font-weight: 700;
}
.radar-tag.hit-blue { background: #eff6ff; border-color: #dbeafe; color: #2563eb; }
.radar-tag.hit-indigo { background: #eef2ff; border-color: #e0e7ff; color: #4f46e5; }
.radar-tag.hit-emerald { background: #ecfdf5; border-color: #d1fae5; color: #059669; }
.content {
padding: 12px;
}
.lead {
margin: 0 0 10px;
background: #f0fdf4;
border-left: 2px solid var(--green);
border-radius: 0 4px 4px 0;
padding: 7px 8px;
font-size: 11px;
line-height: 1.55;
color: #166534;
font-weight: 700;
}
.topic-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.topic-card {
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 8px;
background: #fff;
}
.topic-title-row {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 6px;
}
.topic-title {
margin: 0;
font-size: 13px;
font-weight: 800;
color: var(--heading);
line-height: 1.3;
}
.topic-divider {
flex: 1;
height: 1px;
background: var(--line);
}
.topic-meta {
margin: 0 0 6px;
font-size: 10px;
color: #64748b;
line-height: 1.45;
padding: 5px 6px;
border: 1px dashed #e2e8f0;
border-radius: 4px;
background: #f8fafc;
}
.topic-block { margin-bottom: 6px; }
.topic-block:last-child { margin-bottom: 0; }
.topic-text {
margin: 0;
font-size: 11px;
color: #475569;
line-height: 1.55;
}
.topic-bullets {
margin: 0;
padding-left: 10px;
font-size: 11px;
color: #475569;
line-height: 1.5;
}
.topic-bullets li { margin: 1px 0; }
.conclusion-area {
background: #f0fdf4;
border-left: 2px solid var(--green);
background-color: #f0fdf4;
border-left: 2px solid #22c55e;
padding: 8px;
border-radius: 0 4px 4px 0;
padding: 6px 7px;
}
.conclusion-text {
margin: 0;
font-size: 11px;
line-height: 1.5;
font-weight: 700;
color: #166534;
font-style: italic;
}
.resource-wrap {
margin-top: 10px;
padding: 10px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: rgba(248, 250, 252, 0.5);
}
.resource-list {
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 8px;
}
.resource-item {
border: 1px solid var(--line);
border-radius: 4px;
padding: 5px 6px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
min-height: 24px;
}
.resource-left {
display: flex;
align-items: center;
gap: 5px;
min-width: 0;
}
.resource-icon {
width: 14px;
text-align: center;
font-size: 10px;
color: #94a3b8;
flex-shrink: 0;
}
.resource-title {
font-size: 10px;
color: #475569;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.resource-arrow {
font-size: 9px;
color: #cbd5e1;
flex-shrink: 0;
}
.widget-grid {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.widget {
border: 1px solid var(--line);
border-radius: 4px;
padding: 6px;
background: #fff;
min-height: 62px;
}
.widget-item {
margin: 0 0 4px;
font-size: 10px;
line-height: 1.45;
color: #475569;
}
.widget-item:last-child { margin-bottom: 0; }
.widget-item.trade { color: var(--rose); font-weight: 700; }
.core-wrap { margin-top: 10px; }
.core-card {
border-radius: 4px;
background: #0F172A;
border: 1px solid #1e293b;
padding: 8px;
}
.core-item {
margin: 0 0 5px;
font-size: 10px;
line-height: 1.5;
color: #cbd5e1;
}
.core-item:last-child { margin-bottom: 0; }
.contributors {
margin-top: 10px;
padding: 8px;
background: #f8fafc;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.avatar-list {
display: flex;
margin-left: auto;
}
.avatar {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: -5px;
font-size: 9px;
font-weight: 800;
}
.avatar:nth-child(1) { background: #dbeafe; color: #2563eb; }
.avatar:nth-child(2) { background: #e0e7ff; color: #4f46e5; }
.avatar:nth-child(3) { background: #e2e8f0; color: #64748b; }
.footer-note {
padding: 8px 0 10px;
text-align: center;
font-size: 9px;
color: #94a3b8;
letter-spacing: 0.03em;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="report-container">
<header class="header">
<div class="header-top">
<div>
<h1 class="header-title">CHAT INSIGHTS <span class="accent">REPORT</span></h1>
<p class="header-id mono">ID: {{ generated_at }}</p>
<body class="py-4">
<div class="report-container">
<header class="p-4 border-b border-slate-100">
<div class="flex justify-between items-start mb-3 gap-2">
<div>
<h1 class="text-[15px] 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: {{ generated_at }}</p>
</div>
<div class="px-2 py-1 bg-slate-100 rounded text-[9px] font-bold text-slate-500 uppercase">{{ summary_metrics.activity_badge or "Daily Archive" }}</div>
</div>
<div class="header-tag">{{ summary_metrics.activity_badge or "Daily Archive" }}</div>
</div>
<div class="kpi-grid">
{% for card in summary_metrics.kpi_cards|default([]) %}
<div class="kpi">
<span class="label-tiny">{{ card.label }}</span>
<span class="value {% if card.tone == 'blue' %}is-blue{% elif card.tone == 'violet' %}is-indigo{% elif card.tone == 'emerald' %}is-emerald{% endif %}">{{ card.value }}</span>
<div class="grid grid-cols-4 gap-2 text-center">
{% for card in summary_metrics.kpi_cards|default([]) %}
<div class="bg-slate-50 py-2 rounded border border-slate-100">
<span class="label-tiny">{{ card.label }}</span>
<span class="text-xs font-bold {% if card.tone == 'blue' %}text-blue-600{% elif card.tone == 'violet' %}text-indigo-600{% elif card.tone == 'emerald' %}text-emerald-600{% else %}text-slate-700{% endif %}">{{ card.value }}</span>
</div>
{% endfor %}
</div>
</header>
<div class="p-4 border-b border-slate-100">
<span class="label-tiny mb-2"># Personal Interest Radar</span>
<div class="flex flex-wrap gap-2">
{% for tag in summary_metrics.topic_tags|default([]) %}
<span class="text-[10px] px-2 py-0.5 rounded font-bold {% if loop.index0 % 4 == 0 %}bg-blue-50 text-blue-600 border border-blue-100 italic{% elif loop.index0 % 4 == 1 %}bg-indigo-50 text-indigo-600 border border-indigo-100 italic{% elif loop.index0 % 4 == 2 %}bg-emerald-50 text-emerald-600 border border-emerald-100 italic{% else %}bg-slate-100 text-slate-500{% endif %}">{{ tag }}</span>
{% endfor %}
{% if not (summary_metrics.topic_tags|default([])) %}
<span class="text-[10px] px-2 py-0.5 bg-slate-100 text-slate-500 rounded">暂无热点标签</span>
{% endif %}
</div>
{% endfor %}
</div>
</header>
<section class="radar">
<span class="label-tiny"># Personal Interest Radar</span>
<div class="radar-tags">
{% for tag in summary_metrics.topic_tags|default([]) %}
<span class="radar-tag {% if loop.index0 % 4 == 0 %}hit-blue{% elif loop.index0 % 4 == 1 %}hit-indigo{% elif loop.index0 % 4 == 2 %}hit-emerald{% else %}{% endif %}">{{ tag }}</span>
{% endfor %}
{% if not (summary_metrics.topic_tags|default([])) %}
<span class="radar-tag">暂无热点标签</span>
{% endif %}
</div>
</section>
<div class="p-4 space-y-4">
<span class="label-tiny"># {{ summary_doc_title or title }}</span>
<div class="conclusion-area">
<p class="text-[11px] font-bold text-emerald-800 leading-relaxed">{{ summary_lead or "暂无总结内容。" }}</p>
</div>
<section class="content">
<span class="label-tiny"># {{ summary_doc_title or title }}</span>
<p class="lead">{{ summary_lead or "暂无总结内容。" }}</p>
<span class="label-tiny"># Key Discussions</span>
<div class="topic-list">
<span class="label-tiny"># Key Discussions</span>
{% for topic in summary_topics|default([]) %}
<article class="topic-card">
<div class="topic-title-row">
<h3 class="topic-title">{{ "%02d"|format(loop.index) }}. {{ topic["title"] }}</h3>
<div class="topic-divider"></div>
<div class="space-y-2 card-inner">
<div class="flex items-center gap-2">
<span class="text-[11px] font-bold text-slate-900">{{ "%02d"|format(loop.index) }}. {{ topic["title"] }}</span>
<div class="h-[1px] flex-grow bg-slate-100"></div>
</div>
{% if topic["time_range"] or topic["participants"] %}
<div class="topic-meta">
<div class="text-[10px] text-slate-500 bg-slate-50 border border-slate-100 rounded px-2 py-1 leading-relaxed">
{% if topic["time_range"] %}<div>时段：{{ topic["time_range"] }}</div>{% endif %}
{% if topic["participants"] %}<div>参与人数：{{ topic["participants"] }}</div>{% endif %}
</div>
{% endif %}
{% if topic["analysis_points"]|default([]) %}
<div class="topic-block">
<span class="label-tiny">Background</span>
<p class="topic-text">{{ topic["analysis_points"][0] }}</p>
<div>
<span class="label-tiny text-slate-400">Background</span>
<p class="text-[11px] text-slate-600 leading-relaxed">{{ topic["analysis_points"][0] }}</p>
</div>
{% endif %}
{% if topic["overview_points"]|default([]) %}
<div class="topic-block">
<span class="label-tiny">Key Points</span>
<ul class="topic-bullets">
<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">
{% for line in topic["overview_points"] %}
<li>{{ line }}</li>
{% endfor %}
@@ -462,82 +126,89 @@
{% if topic["quote_text"] %}
<div class="conclusion-area">
<span class="label-tiny" style="color:#16a34a;">Conclusion</span>
<p class="conclusion-text">{{ topic["quote_text"] }}</p>
<span class="label-tiny !text-emerald-600">Conclusion</span>
<p class="text-[11px] font-bold text-emerald-800 italic leading-relaxed">{{ topic["quote_text"] }}</p>
</div>
{% endif %}
</article>
</div>
{% endfor %}
</div>
{% if not (summary_topics|default([])) %}
<p class="widget-item">{{ summary_fallback_text }}</p>
{% endif %}
{% if not (summary_topics|default([])) %}
<p class="text-[11px] text-slate-500">{{ summary_fallback_text }}</p>
{% endif %}
</div>
{% if summary_resource_hub|default([]) %}
<section class="resource-wrap">
<span class="label-tiny" style="padding: 0 8px 4px;"># Shared Resources</span>
<div class="resource-list">
<div class="p-4 bg-slate-50/60 border-y border-slate-100">
<span class="label-tiny mb-2"># Shared Resources</span>
<div class="space-y-1">
{% for item in summary_resource_hub %}
<div class="resource-item">
<div class="resource-left">
<span class="resource-icon">{{ item.icon }}</span>
<span class="resource-title">{{ item.title }}</span>
<div class="card-inner flex justify-between items-center py-1.5">
<div class="flex items-center gap-2 overflow-hidden">
<i class="text-slate-300 text-[12px]">{{ item.icon }}</i>
<span class="text-[10px] font-medium text-slate-600 truncate">{{ item.title }}</span>
</div>
<span class="resource-arrow">›</span>
<i class="fas fa-chevron-right text-[8px] text-slate-300"></i>
</div>
{% endfor %}
</div>
</section>
</div>
{% endif %}
<section class="widget-grid">
<article class="widget">
<span class="label-tiny"># Marketplace</span>
{% for line in summary_marketplace|default([]) %}
<p class="widget-item trade">{{ line }}</p>
{% endfor %}
{% if not (summary_marketplace|default([])) %}
<p class="widget-item">暂无交易信息</p>
{% endif %}
</article>
<article class="widget">
<span class="label-tiny"># Unresolved Pool</span>
{% for line in summary_unresolved_pool|default([]) %}
<p class="widget-item">{{ line }}</p>
{% endfor %}
{% if not (summary_unresolved_pool|default([])) %}
<p class="widget-item">暂无待解问题</p>
{% endif %}
</article>
</section>
<div class="p-4 grid grid-cols-2 gap-3">
<div>
<span class="label-tiny mb-2"># Marketplace</span>
<div class="space-y-1 text-[10px]">
{% for line in summary_marketplace|default([]) %}
<p class="text-rose-500 font-bold leading-tight border-b border-slate-100 pb-1">{{ line }}</p>
{% endfor %}
{% if not (summary_marketplace|default([])) %}
<p class="text-slate-400">暂无交易信息</p>
{% endif %}
</div>
</div>
<div>
<span class="label-tiny mb-2"># Unresolved Pool</span>
<div class="space-y-1 text-[10px]">
{% for line in summary_unresolved_pool|default([]) %}
<p class="text-slate-500 leading-tight border-l-2 border-amber-200 pl-2">{{ line }}</p>
{% endfor %}
{% if not (summary_unresolved_pool|default([])) %}
<p class="text-slate-400">暂无待解问题</p>
{% endif %}
</div>
</div>
</div>
<section class="core-wrap">
<div class="core-card">
<span class="label-tiny" style="color:#64748b;"># Core Knowledge Points</span>
<div class="px-4 pb-4">
<div class="card-inner bg-slate-900 text-white border-none p-3">
<span class="label-tiny text-slate-500 mb-1"># Core Knowledge Points</span>
{% for line in summary_core_points|default([]) %}
<p class="core-item">{{ line }}</p>
<p class="text-[10px] leading-relaxed text-slate-300 mb-1 last:mb-0">{{ line }}</p>
{% endfor %}
{% if not (summary_core_points|default([])) %}
<p class="core-item">暂无核心知识点</p>
{% endif %}
</div>
</section>
<div class="contributors">
<span class="label-tiny" style="margin:0;">Top Contributors</span>
<div class="avatar-list">
{% for name in summary_top_contributors|default([]) %}
<span class="avatar">{{ name[:1] }}</span>
{% endfor %}
{% if not (summary_top_contributors|default([])) %}
<span class="avatar">A</span><span class="avatar">B</span><span class="avatar">C</span>
<p class="text-[10px] leading-relaxed text-slate-400">暂无核心知识点</p>
{% endif %}
</div>
</div>
<div class="footer-note">Engine: Playwright · Tokens: {{ summary_metrics.token_total }} · Latency: {{ summary_metrics.latency_text }}</div>
</section>
</div>
<footer class="p-4 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">
{% for name in summary_top_contributors|default([]) %}
<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">{{ name[:1] }}</div>
{% endfor %}
{% if not (summary_top_contributors|default([])) %}
<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">A</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">B</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">C</div>
{% endif %}
</div>
</footer>
</div>
<div class="text-center mt-3 text-[9px] text-slate-400 uppercase tracking-wide">
Engine: Playwright · Tokens: {{ summary_metrics.token_total }} · Latency: {{ summary_metrics.latency_text }}
</div>
</body>
</html>