
html!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title素材注入 · 充盈工作报告/titlestyle* {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/headbodydiv classcardh1span/span 工作报告生成器span充盈/span/h1div classworkspace!-- 素材输入 --div classinput-arealabelspan classicon/span 注入素材 · 即刻充盈/labeldiv classmaterial-boxinput typetext idmaterialInput placeholder例如Q3营收23%用户留存提升上线AI助手... /button classaction-btn idgenerateBtn✨ 生成报告/buttonbutton classaction-btn secondary idsuggestBtn 示例素材/button/divdiv classbadge-group idmaterialBadgesspan classempty-badge 等待素材注入…/span/div/div!-- 报告输出充盈 --div classreport-areadiv classreport-headerh2span classicon/span 充盈报告/h2div classreport-metaspanspan classicon/span 生成于 span iddateDisplay今日/span/spanspanspan classicon/span 素材 span idmaterialCount0/span 项/span/div/divdiv classreport-content idreportContentdiv classplaceholder-textspan/spanspan注入素材报告自动充盈/spanspan stylefont-size:0.85rem; opacity:0.6;点击 “生成报告” 或 “示例素材”/span/div/divdiv classfooter-actionsbutton classclear-btn idclearBtn清空报告/button/div/div/div/divscript(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 classempty-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 classplaceholder-textspan/spanspan请先注入素材报告将自动充盈/spanspan stylefont-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 classhighlight增长飞轮/span效应显现。素材显示商业化路径与用户规模形成良性循环;if (/增长/i.test(rawText)) detail 增长率超预期;detail 为下一阶段扩张奠定坚实基础。;} else if (hasProduct hasUser) {detail 产品侧与用户侧协同发力新功能/模块上线后用户粘性增强span classhighlight体验升级/span带动核心指标攀升。;} else if (hasTeam hasProduct) {detail 团队与产品双线并进研发效能提升交付周期缩短span classhighlight敏捷迭代/span成为常态化能力。;} else {detail 多维度素材交织形成 span classhighlight充盈的价值网络/span。各模块相互赋能整体运营效率与质量稳步爬升。;}// 添加随机细节感const extraDetail [ 其中关键项目进度符合预期风险可控。, 核心指标周环比提升明显中长期目标可期。, 组织内部协同流程优化决策链路缩短。, 创新试点取得阶段性成果具备复制条件。,];const randomExtra extraDetail[Math.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 classstat-tag${idx1}/span ${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) {// 保留iconconst iconSpan headerH2.querySelector(.icon);if (iconSpan) {headerH2.innerHTML ${iconSpan.outerHTML} ${title};} else {headerH2.innerHTML span classicon/span ${title};}}// 更新bodyreportContent.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%”点击“生成报告”或按回车键即可注入。您也可以点击“示例素材”快速体验。· 报告生成逻辑代码会分析您注入的素材自动提取“营收”、“用户”、“产品”等关键维度并组合成包含概述、详细分析、亮点总结和未来展望的完整报告段落。· 交互反馈注入的素材会以标签形式展示在输入区下方报告区域会同步更新内容并显示素材数量让您对报告依据一目了然。