npm - yuanflow-cli - Versions diffs - 0.1.10 → 0.1.12 - Mend

yuanflow-cli 0.1.10 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/README.md CHANGED Viewed

@@ -125,6 +125,15 @@ yuanflow-cli oss copy --source-key temp/cover.png --target-key final/cover.png -
 - 生成图片必填参数：`prompt`。可选参数：`size`（默认 `1024x1024`）、`quality`（默认 `standard`）、`style`（默认 `vivid`）、`n`（默认 `1`，范围 `1~10`）、`response_format`（默认 `url`）。
 - 编辑图片除 `prompt` 外还必须上传本地图片文件，Skill 内使用 `image_path` 表示本地文件路径，实际请求以 `multipart/form-data` 的 `image` 字段上传。
+### HTML 报告生成
+`HTML报告生成` 随 npm 包安装到 Skill bundle，用于把自媒体分析、数据复盘、文案方案、账号监控、知识梳理和执行计划生成可直接打开的单页 HTML 报告。
+- 内置 9 种报告形态：洞察简报、数据仪表盘、深度报告、横向对比、卡片集合、流程步骤、时间线、行动看板、知识地图。
+- 正式模板默认使用米色留白风格，模板位于 `HTML报告生成/templates/warm-beige/`。
+- 蓝白、黑金、黑白红、柔和科技作为扩展主题逻辑保留在 `HTML报告生成/references/theme-system.md`。
+- 模板和引用文档跟随 Skill 目录一起安装，不需要用户单独复制资源文件。
 ## Skill 安装器
 ```bash

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "yuanflow-cli",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "YuanFlow API CLI and skill installer for supported AI coding agents.",
   "type": "module",
   "license": "MIT",

package/skills/yuanflow-skill/HTML/346/212/245/345/221/212/347/224/237/346/210/220/SKILL.md ADDED Viewed

@@ -0,0 +1,91 @@
+---
+name: HTML报告生成
+description: 当用户需要把自媒体分析、数据复盘、文案方案、账号监控、知识梳理、执行计划等内容生成可直接打开阅读的单页 HTML 报告时使用本技能。优先使用内置 9 种单页报告模板，并按内容选择报告形态、视觉主题和结构化字段。
+---
+# HTML 报告生成
+本 Skill 用于生成一个可直接打开阅读的单页 HTML 报告。它不是后台 Dashboard，也不是多页面站点，而是面向最终用户查阅的视觉化长文报告页。
+## 核心原则
+- 先判断内容适合哪一种 `report_shape`，再选择对应模板。
+- 初始 9 个模板都使用米色留白报告风格，排版按 `templates/warm-beige/` 内文件执行。
+- 默认输出完整 HTML 文件。模板文件可以作为母版复制后填充内容。
+- 不要把模板、脚本、图片资源散放到外部目录；本 Skill 的资源都跟随当前 Skill 目录安装。
+## 目录说明
+```text
+HTML报告生成/
+  SKILL.md
+  templates/
+    warm-beige/
+      01-insight-brief.html
+      02-data-dashboard.html
+      03-deep-report.html
+      04-comparison.html
+      05-card-collection.html
+      06-process-steps.html
+      07-timeline.html
+      08-action-board.html
+      09-knowledge-map.html
+  references/
+    report-shapes.md
+    theme-system.md
+  _preview-html-report-styles/
+    index.html
+```
+## 9 种报告形态
+| report_shape | 模板文件 | 适用场景 |
+| --- | --- | --- |
+| `insight_brief` | `templates/warm-beige/01-insight-brief.html` | 快速诊断、机会判断、简单策略建议 |
+| `data_dashboard` | `templates/warm-beige/02-data-dashboard.html` | 周期数据复盘、账号表现、增长分析 |
+| `deep_report` | `templates/warm-beige/03-deep-report.html` | 深度分析、策略报告、行业趋势 |
+| `comparison` | `templates/warm-beige/04-comparison.html` | 多账号、多平台、多方案横向对比 |
+| `card_collection` | `templates/warm-beige/05-card-collection.html` | 选题库、标题库、案例库、灵感库 |
+| `process_steps` | `templates/warm-beige/06-process-steps.html` | SOP、创作流程、发布流程 |
+| `timeline` | `templates/warm-beige/07-timeline.html` | 周期复盘、项目进展、热点演化 |
+| `action_board` | `templates/warm-beige/08-action-board.html` | 优化计划、任务拆解、执行清单 |
+| `knowledge_map` | `templates/warm-beige/09-knowledge-map.html` | 知识结构、概念关系、学习路径 |
+## 主题系统
+默认使用米色留白报告主题：
+- 背景：米色 / 纸感浅灰
+- 主色：暖黑
+- 正文：黑色主体文字
+- 强调：棕金结构线、浅米色信息块
+- 提醒：红色只用于风险、警告和强提醒
+可选主题逻辑参考 `references/theme-system.md`：
+- `warm_beige`：米色留白，默认主题，适合知识、方法论、说明型长文。
+- `blue_white`：蓝白专业报告，适合数据、复盘和专业分析。
+- `black_gold`：黑金高端叙事，适合品牌、战略、重点结论。
+- `black_red_alert`：黑白红提醒，适合风险提示、问题诊断、强观点报告。
+- `soft_tech`：柔和科技，适合 AI、工具、流程、产品能力说明。
+初始模板只内置米色留白版。其余四种主题只记录风格逻辑，后续正式扩展时不要改动报告形态结构，只替换 CSS 变量和少量强调组件。
+## 生成流程
+1. 识别用户内容类型和阅读目的。
+2. 选择 `report_shape`。
+3. 读取对应模板文件。
+4. 替换标题、摘要、字段、模块内容和生成时间。
+5. 保留模板的整体排版比例、纸感留白、暖黑标题和卡片结构。
+6. 输出一个可直接打开的 HTML 文件。
+## 字段规范
+详细字段见 `references/report-shapes.md`。如果用户没有提供完整字段，先用已有内容填充核心模块，不要编造数据；缺失数据可以写为“待补充”。
+## 输出要求
+- 输出 HTML 文件路径。
+- 简短说明使用了哪个 `report_shape` 和主题。
+- 如果内容包含敏感数据或数据来源不完整，在页脚保留“仅供参考”的说明。

package/skills/yuanflow-skill/HTML/346/212/245/345/221/212/347/224/237/346/210/220/_preview-html-report-styles/index.html ADDED Viewed

@@ -0,0 +1,214 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>HTML报告生成 · 主题风格临时预览</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      background: #eceff3;
+      color: #151515;
+      font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
+    }
+    .page {
+      width: min(1400px, calc(100% - 48px));
+      margin: 36px auto;
+    }
+    .intro {
+      display: flex;
+      justify-content: space-between;
+      align-items: end;
+      gap: 24px;
+      margin-bottom: 24px;
+      padding-bottom: 18px;
+      border-bottom: 1px solid rgba(15, 23, 42, 0.18);
+    }
+    h1 { margin: 0; font-size: 34px; letter-spacing: 0; color: #07346f; }
+    .intro p { margin: 8px 0 0; color: #667085; }
+    .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
+    .sample {
+      min-height: 430px;
+      padding: 34px;
+      border: 1px solid var(--line);
+      background: var(--page);
+      color: var(--ink);
+      overflow: hidden;
+      position: relative;
+    }
+    .sample::after {
+      content: "";
+      position: absolute;
+      right: 34px;
+      top: 34px;
+      width: 90px;
+      height: 2px;
+      background: var(--accent);
+    }
+    .label {
+      color: var(--muted);
+      font-size: 13px;
+      margin-bottom: 26px;
+    }
+    .sample h2 {
+      margin: 0;
+      font-size: 34px;
+      line-height: 1.22;
+      letter-spacing: 0;
+      color: var(--primary);
+    }
+    .sample p {
+      max-width: 520px;
+      color: var(--muted);
+      line-height: 1.8;
+      font-size: 15px;
+    }
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      margin-top: 24px;
+    }
+    .card {
+      min-height: 94px;
+      padding: 14px;
+      border: 1px solid var(--line);
+      background: var(--soft);
+    }
+    .card strong {
+      display: block;
+      color: var(--primary);
+      margin-bottom: 8px;
+    }
+    .metric {
+      font-size: 26px;
+      font-weight: 900;
+      color: var(--accent);
+      line-height: 1;
+    }
+    .blue-white {
+      --page: #ffffff;
+      --ink: #111827;
+      --muted: #667085;
+      --primary: #07346f;
+      --accent: #0b5bb5;
+      --line: #dbe5f2;
+      --soft: #f3f7ff;
+    }
+    .black-gold {
+      --page: #090806;
+      --ink: #f4efe6;
+      --muted: #b9ad99;
+      --primary: #f4efe6;
+      --accent: #c69a4b;
+      --line: rgba(198, 154, 75, 0.34);
+      --soft: rgba(255, 255, 255, 0.045);
+    }
+    .warm-beige {
+      --page: #f3efe6;
+      --ink: #171513;
+      --muted: #6f685f;
+      --primary: #1d1b18;
+      --accent: #b8894f;
+      --line: rgba(29, 27, 24, 0.16);
+      --soft: rgba(255, 255, 255, 0.48);
+    }
+    .black-red-alert {
+      --page: #f7f7f3;
+      --ink: #101010;
+      --muted: #3f3f3f;
+      --primary: #101010;
+      --accent: #d9352b;
+      --line: rgba(0, 0, 0, 0.22);
+      --soft: #ffffff;
+      background:
+        linear-gradient(90deg, rgba(0,0,0,0.055) 1px, transparent 1px),
+        linear-gradient(180deg, rgba(0,0,0,0.055) 1px, transparent 1px),
+        var(--page);
+      background-size: 58px 58px;
+    }
+    .soft-tech {
+      --page: #eef1ea;
+      --ink: #1f2e2b;
+      --muted: #63756f;
+      --primary: #223c37;
+      --accent: #407f73;
+      --line: rgba(64, 127, 115, 0.22);
+      --soft: rgba(255,255,255,0.52);
+    }
+    @media (max-width: 900px) {
+      .grid, .cards { grid-template-columns: 1fr; }
+      .intro { flex-direction: column; align-items: start; }
+    }
+  </style>
+</head>
+<body>
+  <main class="page">
+    <section class="intro">
+      <div>
+        <h1>HTML 报告主题风格临时预览</h1>
+        <p>排版仍沿用 9 种单页报告结构；这里仅展示主题变量、色调、边框、强调色和信息密度方向。</p>
+      </div>
+      <p>确认后可删除本临时目录</p>
+    </section>
+    <section class="grid">
+      <article class="sample blue-white">
+        <div class="label">blue_white · 蓝白专业报告</div>
+        <h2>适合自媒体分析、账号复盘、数据报告。</h2>
+        <p>白底、深蓝标题、浅蓝信息块，强调可信、清楚、专业。当前 9 个正式模板均采用此主题。</p>
+        <div class="cards">
+          <div class="card"><strong>曝光增长</strong><div class="metric">+38%</div></div>
+          <div class="card"><strong>内容机会</strong>选题集中在强需求场景</div>
+          <div class="card"><strong>下一步</strong>优化标题和封面表达</div>
+        </div>
+      </article>
+      <article class="sample black-gold">
+        <div class="label">black_gold · 黑金高端叙事</div>
+        <h2>适合战略建议、品牌定位、关键结论。</h2>
+        <p>暗场不靠光效堆叠，使用暖白正文、金色细线和低透明卡片，强调克制和高级感。</p>
+        <div class="cards">
+          <div class="card"><strong>核心判断</strong><div class="metric">A+</div></div>
+          <div class="card"><strong>战略重点</strong>集中资源做爆点</div>
+          <div class="card"><strong>风险</strong>避免多线分散</div>
+        </div>
+      </article>
+      <article class="sample warm-beige">
+        <div class="label">warm_beige · 米色留白</div>
+        <h2>适合方法论、知识说明、长文阅读。</h2>
+        <p>米色背景、暖黑文字、棕金强调线，减少阴影和硬边框，让页面更像纸面报告。</p>
+        <div class="cards">
+          <div class="card"><strong>核心概念</strong><div class="metric">01</div></div>
+          <div class="card"><strong>结构说明</strong>先理解，再套用</div>
+          <div class="card"><strong>应用建议</strong>保留阅读节奏</div>
+        </div>
+      </article>
+      <article class="sample black-red-alert">
+        <div class="label">black_red_alert · 黑白红提醒</div>
+        <h2>适合问题诊断、风险提示、整改报告。</h2>
+        <p>黑白为主体，红色只用于风险和强提醒。网格背景、硬朗边框和粗标题形成理性压迫感。</p>
+        <div class="cards">
+          <div class="card"><strong>风险等级</strong><div class="metric">高</div></div>
+          <div class="card"><strong>主要问题</strong>转化链路断点明显</div>
+          <div class="card"><strong>立即处理</strong>先改首屏信息</div>
+        </div>
+      </article>
+      <article class="sample soft-tech">
+        <div class="label">soft_tech · 柔和科技</div>
+        <h2>适合 AI 工具、流程说明、产品能力。</h2>
+        <p>灰绿底色、低饱和科技色和半透明卡片，适合把复杂系统讲得清楚但不冰冷。</p>
+        <div class="cards">
+          <div class="card"><strong>节点一</strong><div class="metric">API</div></div>
+          <div class="card"><strong>节点二</strong>结构化输入</div>
+          <div class="card"><strong>节点三</strong>生成报告文件</div>
+        </div>
+      </article>
+    </section>
+  </main>
+</body>
+</html>

package/skills/yuanflow-skill/HTML/346/212/245/345/221/212/347/224/237/346/210/220/references/report-shapes.md ADDED Viewed

@@ -0,0 +1,139 @@
+# 报告形态字段说明
+## insight_brief
+适合快速诊断和结论型报告。
+```json
+{
+  "headline": "一句话核心结论",
+  "key_findings": [],
+  "reasoning": [],
+  "recommendations": [],
+  "next_step": ""
+}
+```
+## data_dashboard
+适合指标、趋势和异常分析。
+```json
+{
+  "period": "",
+  "metrics": [],
+  "charts": [],
+  "abnormal_points": [],
+  "data_interpretation": [],
+  "optimization_suggestions": []
+}
+```
+## deep_report
+适合正式长文报告和复杂问题拆解。
+```json
+{
+  "abstract": "",
+  "toc": [],
+  "background": [],
+  "problems": [],
+  "analysis_sections": [],
+  "case_studies": [],
+  "strategy": [],
+  "conclusion": ""
+}
+```
+## comparison
+适合多个对象之间做维度比较。
+```json
+{
+  "compare_objects": [],
+  "compare_dimensions": [],
+  "matrix": [],
+  "pros_cons": [],
+  "best_choice": "",
+  "recommendation_reason": ""
+}
+```
+## card_collection
+适合选题库、标题库、案例库、素材库。
+```json
+{
+  "collection_summary": "",
+  "categories": [],
+  "cards": [],
+  "priority_explanation": "",
+  "usage_tips": []
+}
+```
+## process_steps
+适合 SOP 和流程说明。
+```json
+{
+  "goal": "",
+  "process_overview": [],
+  "steps": [],
+  "common_mistakes": [],
+  "execution_suggestions": []
+}
+```
+## timeline
+适合周期复盘、事件过程和阶段变化。
+```json
+{
+  "period": "",
+  "overview": "",
+  "events": [],
+  "stage_summary": [],
+  "turning_points": [],
+  "next_stage_suggestions": []
+}
+```
+## action_board
+适合任务拆解和执行计划。
+```json
+{
+  "goal": "",
+  "priority_tasks": {
+    "high": [],
+    "medium": [],
+    "low": []
+  },
+  "execution_order": [],
+  "timeline": [],
+  "resources_needed": [],
+  "completion_criteria": []
+}
+```
+## knowledge_map
+适合知识结构和概念关系。
+```json
+{
+  "core_topic": "",
+  "structure_tree": [],
+  "core_nodes": [],
+  "relationships": [],
+  "learning_path": [],
+  "application_suggestions": []
+}
+```

package/skills/yuanflow-skill/HTML/346/212/245/345/221/212/347/224/237/346/210/220/references/theme-system.md ADDED Viewed

@@ -0,0 +1,74 @@
+# 主题系统
+本 Skill 的排版结构来自 9 种单页报告形态，视觉主题来自可替换的 CSS 变量。后续扩展主题时，不要改变模板的信息结构，只替换变量、背景、边框、强调块和局部装饰。
+## warm_beige
+默认主题。对应当前 9 个模板。
+- `--bg`: `#e9e5dc`
+- `--page`: `#fbfaf6`
+- `--ink`: `#1b1814`
+- `--muted`: `#6b6459`
+- `--primary`: `#1d1b18`
+- `--primary-2`: `#9b6a3a`
+- `--line`: `#d8cfc1`
+- `--soft`: `#f3efe6`
+- 适合：知识说明、方法论、长文阅读、自媒体报告。
+- 设计逻辑：米色背景形成纸感，黑色主体文字保证阅读清晰，棕金线条负责结构，红色只用于提醒和风险。
+## blue_white
+蓝白专业报告。作为扩展主题逻辑保留，不作为当前 9 个模板的基础文件。
+- 背景使用白色或极浅灰。
+- 主标题和结构线使用深蓝。
+- 信息块使用浅蓝底。
+- 适合自媒体分析、账号复盘、数据报告、执行计划。
+## black_gold
+黑金高端叙事。来自暗场极简和品牌战略页逻辑。
+- 背景使用近黑色，不使用大面积渐变。
+- 主文字用暖白，强调线和编号用金色。
+- 卡片边框使用低透明金色或暖灰。
+- 适合战略建议、品牌定位、关键结论页。
+## black_red_alert
+黑白红提醒。来自理性网格极简逻辑。
+- 黑白作为主色，红色只用于风险、警告、关键否定。
+- 使用硬朗边框、编号和粗标题。
+- 不用圆润卡片，不用装饰光效。
+- 适合风险诊断、问题清单、整改报告。
+## soft_tech
+柔和科技。来自柔和科技极简逻辑。
+- 背景偏灰绿或浅米灰。
+- 线条和节点图使用低饱和绿色、蓝绿色。
+- 卡片使用半透明白底和细边框。
+- 适合 AI 工具、流程说明、产品能力、系统架构轻说明。
+## 实现建议
+每个主题只改 CSS 变量：
+```css
+:root {
+  --bg: #e9e5dc;
+  --page: #fbfaf6;
+  --ink: #1b1814;
+  --muted: #6b6459;
+  --primary: #1d1b18;
+  --primary-2: #9b6a3a;
+  --accent: #d9352b;
+  --line: #d8cfc1;
+  --soft: #f3efe6;
+}
+```
+报告形态不应该和主题绑定。同一个 `data_dashboard` 可以是蓝白，也可以是黑金；同一个 `deep_report` 可以是蓝白，也可以是米色。

package/skills/yuanflow-skill/HTML/346/212/245/345/221/212/347/224/237/346/210/220/templates/warm-beige/01-insight-brief.html ADDED Viewed

@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>洞察简报型报告模板</title>
+  <link rel="stylesheet" href="./report-warm-beige.css">
+</head>
+<body>
+  <main class="report-page">
+    <div class="report-topline">
+      <span>HTML报告生成 · 洞察简报型</span>
+      <span>生成时间：{{generated_at}}</span>
+    </div>
+    <header class="report-header">
+      <p class="eyebrow">1. 洞察简报型</p>
+      <h1>{{title}}</h1>
+      <p class="subtitle">{{subtitle}}</p>
+      <div class="tags">
+        <span class="tag">快速诊断</span>
+        <span class="tag">结论优先</span>
+        <span class="tag">建议动作</span>
+      </div>
+    </header>
+    <section class="summary">
+      <p class="summary-strong">{{headline}}</p>
+      <p class="muted">本页用于快速查看结论、关键发现、原因解释与下一步建议。</p>
+    </section>
+    <section class="section">
+      <h2 class="section-title">关键指标</h2>
+      <div class="grid-3">
+        <article class="card">
+          <div class="metric-label">互动提升</div>
+          <div class="metric-value">+38.6%</div>
+          <p class="muted">较上期</p>
+        </article>
+        <article class="card">
+          <div class="metric-label">内容效率</div>
+          <div class="metric-value">+24.7%</div>
+          <p class="muted">较上期</p>
+        </article>
+        <article class="card">
+          <div class="metric-label">机会增长</div>
+          <div class="metric-value">+15.3%</div>
+          <p class="muted">较上期</p>
+        </article>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">关键发现</h2>
+      <div class="card soft">
+        <ol class="list">
+          <li><strong>视觉封面带来更高停留。</strong>{{finding_1}}</li>
+          <li><strong>标题明确性影响点击。</strong>{{finding_2}}</li>
+          <li><strong>评论区反馈集中在实操细节。</strong>{{finding_3}}</li>
+        </ol>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">原因分析</h2>
+      <div class="card">
+        <p>{{reasoning}}</p>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">建议动作</h2>
+      <div class="grid-2">
+        <article class="card">
+          <span class="number">1</span>
+          <h3>立即执行</h3>
+          <p>{{recommendation_1}}</p>
+        </article>
+        <article class="card">
+          <span class="number">2</span>
+          <h3>持续观察</h3>
+          <p>{{recommendation_2}}</p>
+        </article>
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">下一步建议</h2>
+      <div class="card soft">{{next_step}}</div>
+    </section>
+    <footer class="footer">
+      <span>数据来源：{{source}}</span>
+      <span>本报告由 AI 生成，仅供参考。</span>
+    </footer>
+  </main>
+</body>
+</html>