```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>素材注入 · 充盈工作报告</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
body {
background: linear-gradient(145deg, #f6f9fc 0%, #e9f0f5 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 1rem;
}
.card {
max-width: 1100px;
width: 100%;
background: rgba(255, 255, 255, 0.80);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 48px;
padding: 2.5rem 2.8rem;
box-shadow: 0 30px 60px -20px rgba(0, 20, 40, 0.25),
inset 0 1px 2px rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.5);
transition: all 0.2s ease;
}
h1 {
font-size: 2.2rem;
font-weight: 600;
letter-spacing: -0.02em;
color: #0b1e2e;
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.8rem;
border-bottom: 2px solid rgba(60, 130, 200, 0.15);
padding-bottom: 1.2rem;
}
h1 span {
background: #1a4b6d;
color: white;
font-size: 1rem;
font-weight: 500;
padding: 0.2rem 1rem;
border-radius: 40px;
letter-spacing: 0.3px;
background: linear-gradient(135deg, #1e5a7a, #13415a);
box-shadow: 0 4px 8px rgba(0,40,70,0.15);
}
.workspace {
display: flex;
flex-direction: column;
gap: 2.2rem;
}
/* 素材输入区 */
.input-area {
background: white;
border-radius: 32px;
padding: 1.8rem 2rem;
box-shadow: 0 8px 20px -10px rgba(0, 20, 40, 0.08);
border: 1px solid rgba(200, 215, 230, 0.4);
}
.input-area label {
font-weight: 600;
font-size: 1rem;
color: #1f405b;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.8rem;
}
.input-area label i {
font-size: 1.2rem;
}
.material-box {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem 1rem;
margin-top: 0.2rem;
}
#materialInput {
flex: 2 1 260px;
padding: 0.9rem 1.4rem;
border-radius: 60px;
border: 1px solid #d6e2ed;
background: #fafcff;
font-size: 0.95rem;
transition: all 0.2s;
outline: none;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
#materialInput:focus {
border-color: #2b7aa2;
box-shadow: 0 0 0 4px rgba(43, 122, 162, 0.12), inset 0 2px 4px rgba(0,0,0,0.02);
background: white;
}
#materialInput::placeholder {
color: #9eb3c7;
font-weight: 400;
}
.action-btn {
background: linear-gradient(135deg, #1f5f82, #164a66);
border: none;
padding: 0.9rem 2.2rem;
border-radius: 60px;
color: white;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.3px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 6px 14px rgba(25, 85, 120, 0.25);
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.action-btn:hover {
transform: scale(1.02);
background: linear-gradient(135deg, #236f97, #175473);
box-shadow: 0 10px 20px -6px rgba(20, 70, 110, 0.35);
}
.action-btn:active {
transform: scale(0.97);
}
.action-btn.secondary {
background: #eaf0f6;
color: #1f4b66;
box-shadow: none;
border: 1px solid #cbdae7;
}
.action-btn.secondary:hover {
background: #dce6f0;
box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.badge-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 0.8rem;
margin-top: 1rem;
padding-top: 0.8rem;
border-top: 1px dashed #d7e2ed;
}
.badge {
background: #e3eef9;
color: #14425e;
padding: 0.4rem 1rem;
border-radius: 40px;
font-size: 0.85rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.3rem;
border: 1px solid #c7d9e9;
}
.badge i {
font-size: 0.9rem;
}
.empty-badge {
color: #7b96ae;
font-weight: 400;
font-size: 0.9rem;
}
/* 报告输出区 ------------ 充盈！ */
.report-area {
background: white;
border-radius: 32px;
padding: 2rem 2.2rem;
box-shadow: 0 12px 30px -12px rgba(0, 30, 50, 0.12);
border: 1px solid rgba(200, 215, 230, 0.3);
transition: all 0.3s;
}
.report-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem 1rem;
margin-bottom: 1.8rem;
}
.report-header h2 {
font-weight: 600;
font-size: 1.5rem;
color: #0b2c40;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.report-header h2 i {
color: #1f7a9e;
}
.report-meta {
display: flex;
gap: 1rem;
align-items: center;
color: #4a6c84;
font-size: 0.9rem;
background: #edf4fa;
padding: 0.4rem 1.2rem;
border-radius: 60px;
}
.report-meta i {
margin-right: 0.2rem;
}
.report-content {
background: #f9fcff;
border-radius: 24px;
padding: 1.8rem 2rem;
border: 1px solid #eaf1f8;
min-height: 220px;
transition: all 0.3s;
line-height: 1.7;
color: #153042;
font-size: 0.98rem;
}
.report-content .placeholder-text {
color: #8ca5bb;
font-style: italic;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 160px;
text-align: center;
gap: 0.5rem;
}
.report-content .placeholder-text i {
font-size: 2.4rem;
opacity: 0.3;
margin-bottom: 0.2rem;
}
.report-content p {
margin-bottom: 0.9rem;
}
.report-content strong {
color: #00466b;
font-weight: 600;
}
.report-content .highlight {
background: linear-gradient(120deg, rgba(56, 148, 202, 0.12) 0%, rgba(56, 148, 202, 0.04) 80%);
padding: 0.1rem 0.3rem;
border-radius: 6px;
}
.stat-tag {
display: inline-block;
background: #d7e6f5;
padding: 0.1rem 0.7rem;
border-radius: 30px;
font-size: 0.8rem;
font-weight: 500;
color: #00466b;
}
.footer-actions {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
margin-top: 1.8rem;
}
.clear-btn {
background: transparent;
border: 1px solid #d0deec;
padding: 0.5rem 1.6rem;
border-radius: 60px;
color: #44647e;
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s;
}
.clear-btn:hover {
background: #eaf2fa;
border-color: #b6ccdf;
}
.count-badge {
background: #1f5f82;
color: white;
border-radius: 40px;
padding: 0.15rem 0.9rem;
font-size: 0.75rem;
font-weight: 500;
margin-left: 0.4rem;
}
@media (max-width: 640px) {
.card {
padding: 1.8rem 1.2rem;
}
.input-area, .report-area {
padding: 1.2rem;
}
.report-content {
padding: 1.2rem;
}
.material-box {
flex-direction: column;
align-items: stretch;
}
#materialInput {
flex: unset;
width: 100%;
}
.action-btn {
justify-content: center;
}
}
/* 模拟 icon 字体 (纯文本) */
.icon {
display: inline-block;
width: 1.4rem;
text-align: center;
}
</style>
</head>
<body>
<div class="card">
<h1>
<span>📋</span> 工作报告生成器
<span>充盈</span>
</h1>
<div class="workspace">
<!-- 素材输入 -->
<div class="input-area">
<label>
<span class="icon">🧩</span> 注入素材 · 即刻充盈
</label>
<div class="material-box">
<input type="text" id="materialInput" placeholder="例如：Q3营收+23%，用户留存提升，上线AI助手..." />
<button class="action-btn" id="generateBtn">✨ 生成报告</button>
<button class="action-btn secondary" id="suggestBtn">💡 示例素材</button>
</div>
<div class="badge-group" id="materialBadges">
<span class="empty-badge">📎 等待素材注入...</span>
</div>
</div>
<!-- 报告输出：充盈 -->
<div class="report-area">
<div class="report-header">
<h2><span class="icon">📄</span> 充盈报告</h2>
<div class="report-meta">
<span><span class="icon">📅</span> 生成于 <span id="dateDisplay">今日</span></span>
<span><span class="icon">📌</span> 素材 <span id="materialCount">0</span> 项</span>
</div>
</div>
<div class="report-content" id="reportContent">
<div class="placeholder-text">
<span>📎</span>
<span>注入素材，报告自动充盈</span>
<span style="font-size:0.85rem; opacity:0.6;">点击 "生成报告" 或 "示例素材"</span>
</div>
</div>
<div class="footer-actions">
<button class="clear-btn" id="clearBtn">清空报告</button>
</div>
</div>
</div>
</div>
<script>
(function() {
// DOM 元素
const materialInput = document.getElementById('materialInput');
const generateBtn = document.getElementById('generateBtn');
const suggestBtn = document.getElementById('suggestBtn');
const clearBtn = document.getElementById('clearBtn');
const reportContent = document.getElementById('reportContent');
const materialBadges = document.getElementById('materialBadges');
const materialCountSpan = document.getElementById('materialCount');
const dateDisplay = document.getElementById('dateDisplay');
// 当前素材列表 (存储所有注入的素材片段)
let materialItems = \[\];
// ----- 辅助函数 -----
function formatDate() {
const d = new Date();
return `{d.getFullYear()}.{String(d.getMonth()+1).padStart(2,'0')}.${String(d.getDate()).padStart(2,'0')}`;
}
dateDisplay.textContent = formatDate();
// 刷新素材标签显示
function refreshBadges() {
materialBadges.innerHTML = '';
if (materialItems.length === 0) {
materialBadges.innerHTML = `<span class="empty-badge">📎 等待素材注入...</span>`;
materialCountSpan.textContent = '0';
return;
}
materialCountSpan.textContent = materialItems.length;
// 显示最多6个标签，多余用 +N 表示
const showItems = materialItems.slice(0, 8);
showItems.forEach((item, idx) => {
const badge = document.createElement('span');
badge.className = 'badge';
// 截断显示
const displayText = item.length > 22 ? item.slice(0, 20) + '...' : item;
badge.innerHTML = `<span>#</span> ${displayText}`;
materialBadges.appendChild(badge);
});
if (materialItems.length > 8) {
const extra = document.createElement('span');
extra.className = 'badge';
extra.style.background = '#d0dceb';
extra.textContent = `+${materialItems.length - 8} 项`;
materialBadges.appendChild(extra);
}
}
// ----- 核心：根据素材生成"充盈"报告 -----
function generateReportFromMaterials(materials) {
if (!materials || materials.length === 0) {
return {
title: '📭 暂无素材',
body: `<div class="placeholder-text">
<span>📎</span>
<span>请先注入素材，报告将自动充盈</span>
<span style="font-size:0.85rem; opacity:0.6;">输入内容后点击 "生成报告"</span>
</div>`
};
}
// 将素材整合为一段富有逻辑的充盈报告 (模拟真实工作汇报)
const rawText = materials.join(' · ');
// 提取关键词 / 数字 (简单模拟)
const hasRevenue = /营收|收入|增长|利润|销售额|GMV|业绩/i.test(rawText);
const hasUser = /用户|留存|活跃|DAU|MAU|注册|新增/i.test(rawText);
const hasProduct = /产品|功能|迭代|上线|发布|AI|智能|算法/i.test(rawText);
const hasTeam = /团队|协作|效率|流程|优化|管理/i.test(rawText);
const hasMarket = /市场|竞争|份额|品牌|营销/i.test(rawText);
// 构建充盈报告 (多维度)
let reportParagraphs = \[\];
// 1. 概述
let overview = `基于 ${materials.length} 项核心素材，本期工作呈现 <strong>全方位充盈</strong> 态势。`;
if (hasRevenue) overview += ` 营收/业绩指标表现强劲，`;
if (hasUser) overview += ` 用户侧活跃度与留存持续向好，`;
if (hasProduct) overview += ` 产品迭代与创新加速落地，`;
if (hasTeam) overview += ` 团队协作效率显著提升，`;
if (hasMarket) overview += ` 市场占位与品牌声量同步增长。`;
overview += ` 整体业务韧性增强，发展动能充沛。`;
reportParagraphs.push(`📌 ${overview}`);
// 2. 详细展开 (依据素材生成不同侧重点)
let detail = '';
if (hasRevenue && hasUser) {
detail = `营收与用户双轮驱动，<span class="highlight">增长飞轮</span>效应显现。素材显示，商业化路径与用户规模形成良性循环，`;
if (/增长/i.test(rawText)) detail += `增长率超预期，`;
detail += `为下一阶段扩张奠定坚实基础。`;
} else if (hasProduct && hasUser) {
detail = `产品侧与用户侧协同发力，新功能/模块上线后用户粘性增强，<span class="highlight">体验升级</span>带动核心指标攀升。`;
} else if (hasTeam && hasProduct) {
detail = `团队与产品双线并进，研发效能提升，交付周期缩短，<span class="highlight">敏捷迭代</span>成为常态化能力。`;
} else {
detail = `多维度素材交织，形成 <span class="highlight">充盈的价值网络</span>。各模块相互赋能，整体运营效率与质量稳步爬升。`;
}
// 添加随机细节感
const extraDetail = [
` 其中，关键项目进度符合预期，风险可控。`,
` 核心指标周环比提升明显，中长期目标可期。`,
` 组织内部协同流程优化，决策链路缩短。`,
` 创新试点取得阶段性成果，具备复制条件。`,
];
const randomExtra = extraDetailMath.floor(Math.random() \* extraDetail.length);
detail += randomExtra;
reportParagraphs.push(`📊 ${detail}`);
// 3. 数据/成果亮点 (根据素材自动提取)
let highlight = `🔍 素材亮点：`;
const snippets = materials.map((m, idx) => {
let clean = m.length > 40 ? m.slice(0, 38) + '...' : m;
return `<span class="stat-tag">{idx+1}\ {clean}`;
}).join(' · ');
highlight += snippets;
reportParagraphs.push(highlight);
// 4. 总结与展望 (充盈感)
const conclusion = `🚀 综合来看，当前工作成果 <strong>充盈饱满</strong>，各项素材相互印证，展现出强劲的向上势头。后续将聚焦于价值转化与规模化，持续放大协同效应。`;
reportParagraphs.push(conclusion);
// 将段落拼接 (带p标签)
const bodyHtml = reportParagraphs.map(p => `<p>${p}</p>`).join('');
// 同时生成一个标题 (基于素材)
let title = '📈 阶段工作充盈报告';
if (hasRevenue && hasUser) title = '📈 营收·用户双增充盈报告';
else if (hasProduct) title = '🧩 产品创新充盈报告';
else if (hasTeam) title = '🤝 团队效能充盈报告';
else if (hasMarket) title = '🌐 市场拓展充盈报告';
else title = '📋 综合工作充盈报告';
return { title, body: bodyHtml };
}
// 渲染报告
function renderReport() {
const { title, body } = generateReportFromMaterials(materialItems);
// 更新标题 (header h2 里的内容)
const headerH2 = document.querySelector('.report-header h2');
if (headerH2) {
// 保留icon
const iconSpan = headerH2.querySelector('.icon');
if (iconSpan) {
headerH2.innerHTML = `{iconSpan.outerHTML} {title}`;
} else {
headerH2.innerHTML = `<span class="icon">📄</span> ${title}`;
}
}
// 更新body
reportContent.innerHTML = body;
// 更新素材计数 & 标签
materialCountSpan.textContent = materialItems.length;
refreshBadges();
}
// ----- 添加素材 (注入) -----
function addMaterial(text) {
const trimmed = text.trim();
if (!trimmed) return false;
// 可以分割多个素材 (按逗号/分号/换行)
const parts = trimmed.split(/,，;；\\n+/).map(s => s.trim()).filter(s => s.length > 0);
if (parts.length === 0) {
// 如果只有一个整体，直接加入
materialItems.push(trimmed);
} else {
parts.forEach(p => materialItems.push(p));
}
renderReport();
return true;
}
// 清空素材 & 报告
function clearAll() {
materialItems = \[\];
renderReport();
// 清空输入框
materialInput.value = '';
}
// 示例素材 (注入多个充盈素材)
function loadSuggestion() {
const suggestions = [
"Q3 营收同比增长 23%",
"用户留存率提升至 78%",
"AI 智能助手上线，日活突破 5w",
"团队协作效率提升 30%",
"新版 App 发布，NPS 升至 65",
"市场占有率环比增长 4.2%",
"内部流程优化，交付周期缩短 2.5天"
];
// 追加到现有素材 (不覆盖)
suggestions.forEach(s => materialItems.push(s));
renderReport();
materialInput.value = suggestions.join(' · ');
}
// ----- 事件绑定 -----
generateBtn.addEventListener('click', function() {
const raw = materialInput.value;
if (!raw.trim()) {
// 如果输入框为空，但已有素材，则重新渲染（刷新）
if (materialItems.length > 0) {
renderReport();
} else {
alert('请先输入素材，或点击 "示例素材" 注入内容。');
}
return;
}
addMaterial(raw);
});
suggestBtn.addEventListener('click', function() {
loadSuggestion();
});
clearBtn.addEventListener('click', function() {
clearAll();
});
// 按回车快速生成
materialInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
generateBtn.click();
}
});
// 初始化：显示空状态
renderReport();
})();
</script>
</body>
</html>
```
核心功能与操作流程
您可以通过"注入素材"和"生成报告"两步操作，快速获得一份结构清晰、内容充实的报告。
· 素材注入区：在输入框中添加工作相关的关键词或短句（如"Q3营收+23%"），点击"生成报告"或按回车键即可注入。您也可以点击"示例素材"快速体验。
· 报告生成逻辑：代码会分析您注入的素材，自动提取"营收"、"用户"、"产品"等关键维度，并组合成包含概述、详细分析、亮点总结和未来展望的完整报告段落。
· 交互反馈：注入的素材会以标签形式展示在输入区下方，报告区域会同步更新内容，并显示素材数量，让您对报告依据一目了然。