HTML 分析报告风格指南

适用场景

数据分析报告、数据看板、监控大屏的HTML展示。

也支持 PPT全屏翻页Deck（1920×1080固定画布+JS缩放适配+键盘翻页），详见下方「PPT全屏Deck规范」章节。

核心特征：上下/左右分栏、KPI卡片+图表+明细表、无翻页、单页滚动。

典型元素

KPI 区域：指标数量、金额、环比增长……红色数字突出重点
图表区：柱状图/折线图展示趋势，灰色系为主，红色强调拐点/异常
明细表格：数据明细行，红色标出异常/逾期行
装饰：左上角 Logo、右下角品牌位、三色短线装饰标题
布局：上下分栏（KPI → 图表 → 表格）或左右分栏（图表 ←→ 表格）

Design Philosophy（设计理念）

以简约的风格、统一的规范和秩序，促进"信息传递"，强化"视觉记忆"。

一切设计决策围绕这两个目标：

信息传递：层级清晰、重点突出、阅读路径明确
视觉记忆：统一配色、重复规范、关键点用红色强化

参考用友官方风格：白色背景 + 品牌三色 + 几何点缀 + 底部品牌位。

配色体系

--bg: #FFFFFF;
--bg-alt: #F5F5F7;      /* 极浅灰背景（卡片/分割） */
--bg-grid: #FAFAFA;     /* 网格纹理底色 */
--text: #4A4A4A;         /* 深灰（正文） */
--text-secondary: #6E6E73;
--text-sub: #86868B;
--red: #E60012;          /* 用友红（强调/重点） */
--orange: #FF6B00;        /* 活力橙 */
--blue: #0071E3;          /* 科技蓝 */
--yellow: #FF9500;        /* 橙黄 */
--border: rgba(0,0,0,0.08);

红色使用约束（重要）

红色用于强调重点
红色在页面中占比不超过 20%
仅在箭头上使用红白渐变色
灰色可以渐变

箭头渐变规范

/* 仅在箭头上使用红白渐变 */
.arrow-gradient {
  background: linear-gradient(90deg, #E60012, #FFFFFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 或渐变填充 */
.arrow-fill {
  fill: url(#redWhiteGradient);
}

Logo 资产规范

存储路径：skills/yonyou-html-presentation/assets/logo/

命名规范：

current-logo.png — 当前使用的 Logo
yonsuite-logo.png — YonSuite 官方标准 Logo（品牌右下角用）

已收录素材清单：

| 文件名 | 内容描述 | 用途 | |--------|---------|------| | current-logo.png | 用友红灰黑 Logo（红色中文+灰色yonyou） | 左上角默认 | | yonsuite-logo.png | YonSuite 标准 Logo | 右下角品牌 Footer |

Logo CDN 引用规范

CDN 优先，Logo 统一托管在 Gitee。

| 用途 | CDN URL | |------|---------| | 左上角 Logo | https://gitee.com/leftxiaojun/yonyou-html-presentation/raw/main/assets/logo/current-logo.png | | 右下角品牌位 | https://gitee.com/leftxiaojun/yonyou-html-presentation/raw/main/assets/yonsuite-logo.png |

<!-- 左上角 logo -->
<img src="https://gitee.com/leftxiaojun/yonyou-html-presentation/raw/main/assets/logo/current-logo.png" class="page-logo" alt="YonSuite">

<!-- 右下角品牌位 -->
<div class="brand-footer">
  <img src="https://gitee.com/leftxiaojun/yonyou-html-presentation/raw/main/assets/yonsuite-logo.png" class="brand-logo-img" alt="YonSuite">
  <span>成长型企业就用YonSuite</span>
</div>

使用规则：

页面左上角固定显示 Logo（position: fixed; top: 20px; left: 24px; z-index: 1000）
右下角固定品牌位

字体规范（Typography Rules）

统一字体：微软雅黑。禁止斜体、下划线、艺术体。

| 层级 | 字号 | 样式 | 颜色 | |------|------|------|------| | 大标题/报告标题 | 24-28px | 微软雅黑加粗 | 红色 #E60012 | | 副标题/KPI标题 | 18-22px | 微软雅黑加粗 | 深灰 #3B3838（重点词可标红） | | 正文/卡片描述 | ≤14px | 微软雅黑常规 | 深灰 #3B3838 | | 注释/来源/脚注 | 10-12px | 微软雅黑常规 | 浅灰 #717071 |

行间距

正文：1.2-1.5 倍
标题：1.0 倍
条目化内容：可调整为 2.0 倍
整体原则：避免文字拥挤或松散

禁止使用

斜体、艺术字

配色规范（Color Rules）

品牌主色（红白灰）

| 颜色 | 色值 | 用途 | |------|------|------| | 红色 | #E60012 | 标题、强调内容、KPI数值、按钮 | | 白色 | #FFFFFF | 背景、卡片、表格 | | 灰色 | #717071 | 正文、注释文字 |

色调占比

灰色：正文内容、图表等大部分元素用灰色表达
红色：强调重点，占比不超过 20%

渐变规则

仅在箭头上使用红白渐变
灰色可以渐变

禁用规则

大面积竞争对手品牌色（如金蝶蓝）
高饱和度撞色：红配绿、黄配紫等高冲突配色
低对比度组合：浅灰底配浅灰字

图表配色

同一类图表配色保持统一
色调不超过 3 个

布局规范（Layout Rules）

网格与页边距

标题区：页边距 13%
页脚区：页边距 6%
左右间距：4%
所有元素对齐网格

对齐规则

正文：统一左对齐
标题：统一左对齐或居中对齐
禁止：一页内混合多种对齐方式

留白原则

页面四周、内容布局之间、文字与边框之间留空隙
模块之间保持 16-40pt 间距

卡片/区块规范

卡片圆角 8-14px
模块之间 gap ≥ 18px
page-header padding ≥ 90px，左右 padding ≥ 80px（宁可多留白，不要挤）

内容规范（Content Rules）

一页一主题

每部分/每区块只讲一个核心观点

内容层次

遵循"标题 → 核心内容 → 辅助信息"的视觉流

条目列举

正文用"短句 + 要点"
避免大段文字信息堆砌

重点突出

重要内容用加粗、色块或图标突出

禁止事项

大段文字堆砌，无重点
信息过载
辅助信息占比过高干扰核心观点

通用布局规则（白底方案）

| 维度 | 规则 | |------|------| | 品牌位 | 右下角固定放品牌 Logo + Slogan「成长型企业就用YonSuite」 | | 三色点缀 | 标题下方或左上角用红/橙/蓝三色短线段或渐变色块 | | 几何装饰 | 抽象几何切片、圆点、箭头点缀 | | 圆角 | 所有元素用大圆角（border-radius: 12-20px） | | 图标 | 扁平线性风格，圆形底托 | | 背景纹理 | 淡灰网格/点阵/波浪纹理，增加细节不抢眼 | | 渐变 | 标题下划线、图标内部用蓝→紫或橙→红渐变 | | 字体 | 无衬线粗标题 + 细正文，层级清晰 | | 留白 | 大量留白，呼吸感强 |

装饰元素

三色短线段（标题装饰）

.title-bar { display: flex; gap: 6px; margin: 16px 0; }
.title-bar span { display: block; height: 4px; width: 32px; border-radius: 2px; }
.bar-red { background: #E60012; }
.bar-orange { background: #FF6B00; }
.bar-blue { background: #0071E3; }

几何装饰切片（左上角）

.slice-decor {
  position: absolute; top: 0; left: 0;
  width: 120px; height: 120px;
  background: linear-gradient(135deg, rgba(230,0,18,0.08), transparent);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

网格纹理背景

.grid-bg {
  background-image:
    radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

虚线边框卡片

.dashed-card {
  border: 1.5px dashed rgba(0,0,0,0.12);
  border-radius: 16px;
  background: rgba(245,245,247,0.6);
}

Brand Footer（品牌位）

右下角固定品牌区：

<div class="brand-footer">
  <img src="https://gitee.com/leftxiaojun/yonyou-html-presentation/raw/main/assets/yonsuite-logo.png" class="brand-logo-img" alt="YonSuite">
  <span>成长型企业就用YonSuite</span>
</div>

.brand-footer {
  position: fixed; bottom: 20px; right: 32px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: #86868B; z-index: 100;
}
.brand-logo-img { height: 20px; opacity: 0.7; }

Lucide Icons（图标系统）

图标来源

使用 Lucide 图标库。内置查询脚本：scripts/lucide_icon_lookup.py

# 搜索图标
python3 scripts/lucide_icon_lookup.py search 销售
# 获取 SVG 代码
python3 scripts/lucide_icon_lookup.py get trending-up

使用方式（inline SVG，推荐）

from scripts.lucide_icon_lookup import get_svg
svg_tag = get_svg("trending-up", size=20, stroke="#E60012")

⚠️ 参数名是 stroke，不是 color。函数签名：get_svg(name, size=24, stroke="currentColor", stroke_width=2)

常用图标与场景对应

| 场景 | 推荐图标 | |------|---------| | 金额/交易 | credit-card, shopping-cart | | 趋势/增长 | trending-up, bar-chart | | 数据/统计 | bar-chart, pie-chart | | 订单/单据 | file-text, shopping-cart | | 用户/客户 | user, users | | 仓库/库存 | package, archive | | 日历/时间 | calendar | | 搜索/筛选 | search, filter | | 成功/警告/错误 | check-circle, alert-triangle, x-circle | | AI/智能 | cpu, zap | | 供应链 | truck |

图标名称兼容性

⚠️ 内置图标池并非 Lucide 全量。以下常用名称会返回 HTML 注释占位符：

| 缺失名 | 替换为 | |--------|--------| | bar-chart-3 | bar-chart | | message-square | message-circle | | brain | cpu 或 lightbulb |

生成前验证： 所有用到的图标先用 get_svg(name) 测试，检查返回值是否包含 <svg 标签且长度 > 50 字符。

图标使用规范

统一 Lucide Outline 线性风格（stroke-width=2）
能力卡片用 20-24px，正文图标用 16-18px
品牌红 #E60012 用于强调，品牌灰 #717071 用于辅助
禁止填充型图标

分析报告完整页面结构

┌──────────────────────────────────────┐
│  Hero区（标题 + 统计总金额 + Logo右上角）│
├──────────────────────────────────────┤
│  KPI卡片行（状态分布/客户数/税额估算）  │
├──────────────────────────────────────┤
│  图表区（2×2网格，每图高260px）       │
├──────────────────────────────────────┤
│  决策简报（核心结论 + 证据 + 建议）    │
├──────────────────────────────────────┤
│  数据明细表格（全量数据，平铺无汇总）  │
├──────────────────────────────────────┤
│  品牌脚注（右下角）                   │
└──────────────────────────────────────┘

图表布局规范

每行放 2 个图表，display: flex; gap: 14px
每个图表宽度 calc(50% - 7px)，高度 260px，object-fit: contain

明细表格规范

列出全部数据，不截断，max-height: 420px; overflow-y: auto
表头 sticky 固定 + 内容区独立滚动
用 <colgroup> 指定列宽，table-layout: fixed
拖拽列宽功能（JS 监听 mousedown/mousemove/mouseup）
金额列右对齐加粗：color: #1a4db8; font-weight: 600

状态 Tag 色值

| 状态 | 背景色 | 文字色 | |------|--------|--------| | 待发货 | #FFF0E0 | #FF6A00 | | 待收货 | #E8F0FF | #0071E3 | | 已完成 | #E8F8EF | #2EBB59 | | 开立 | #F0F0FF | #6B5BFF |

HTML 品牌规范

白底用友品牌风
顶部三色装饰线：linear-gradient(90deg, #E60012, #FF6A00, #0071E3)
Logo URL：https://gitee.com/leftxiaojun/yonyou-html-presentation/raw/main/assets/logo/current-logo.png
Logo 位置：Hero 区右上角
右下角品牌位：品牌Logo + 成长型企业就用YonSuite
禁止手动录入数据 → 必须程序化从 JSON 生成

Design Checklist

发布前检查：

[ ] 字体大小适合阅读
[ ] 配色统一，不跳变
[ ] 图表渲染正常
[ ] 表格可滚动、表头固定
[ ] 全屏模式正常
[ ] 布局宽松，不拥挤
[ ] 无 emoji（用 SVG 图标替代）
[ ] 所有图标渲染正常

YonSuite 白底方案额外检查：

[ ] 右上角 Logo
[ ] 右下角品牌位（Logo + Slogan）
[ ] 标题下方三色短线段或渐变装饰
[ ] 卡片虚边框或淡背景
[ ] 圆角统一（border-radius: 12-20px）
[ ] 布局宽松（page-header padding ≥ 90px，左右 padding ≥ 80px，grid-gap ≥ 18px）

文件输出

输出文件保存到 ~/Documents/ 下
分析报表文件命名：YS_YYYY-MM-DD_类型.html
生成后自动打开浏览器展示

注意事项时的标准

✅ 给出具体可执行方案，说清具体怎么做
❌ 不能只认错、不改进
规矩：①开口前自检，没核实不猜 ②语气软 ③注意事项说清具体怎么做

产品介绍/技能介绍 PPT 规范（用友品牌风格 — 固化样式）

当用户要求「做成PPT」「做成翻页HTML」「产品介绍」「技能介绍」「参照这个样式」「做成那种横向滑动」时，必须使用本节规范。采用横向滑动切换（translateX） + 白底卡片风格 + 固定 UI 元素。完整 HTML 模板参考：references/yonsuite-intro-template.html

样式的核心（必须记死，不允许自己发挥）

这份样式是用户确认过的用友品牌 PPT 风格，以后所有产品介绍/技能说明类的 HTML 翻页 PPT 必须严格照搬，不得自己发明其他样式。 关键就是：左上 logo、右上进度圆点、左下全屏按钮、底部居中翻页指示器、右下品牌位——这五个固定 UI 元素的位置、大小、样式永远不变。

固定 UI 元素（位置锁定，不可更改）

.page-logo     → 左上角: top: 24px; left: 32px; height: 28px; z-index: 1000; pointer-events: none;
.step-dots     → 右上角: top: 28px; right: 36px; display: flex; gap: 6px; z-index: 1000;
.step-dot      → width: 8px; height: 8px; border-radius: 50%; background: #E60012;
.step-dot.active → width: 10px; height: 10px; box-shadow: 0 0 8px rgba(230,0,18,0.4);
.brand-footer  → 右下角: bottom: 24px; right: 36px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: #86868B; z-index: 1000;
.brand-footer img → height: 18px; opacity: 0.7;
.page-indicator → 底部居中: bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 1000;
.page-dot      → width: 8px; height: 8px; border-radius: 50%; background: #D2D2D7; cursor: pointer;
.page-dot.active → background: #E60012; width: 24px; border-radius: 4px;
.fs-btn        → 左下角: bottom: 24px; left: 36px; background: transparent; border: 1px solid rgba(0,0,0,.1); border-radius: 6px; padding: 4px 12px; font-size: 11px; color: #A0A0A0; cursor: pointer; z-index: 1000;

Logo CDN: https://gitee.com/leftxiaojun/yonyou-html-presentation/raw/main/assets/logo/current-logo.png 品牌位 CDN: https://gitee.com/leftxiaojun/yonyou-html-presentation/raw/main/assets/yonsuite-logo.png 品牌位 Slogan: 成长型企业就用YonSuite

翻页机制

<div class="slides-wrapper" id="slidesWrapper">
  <div class="slide slide-cover">...</div>  <!-- 封面 -->
  <div class="slide">...</div>              <!-- 内容页 -->
  <div class="slide slide-end">...</div>    <!-- 封底 -->
</div>

.slides-wrapper { display: flex; width: 100vw; height: 100vh; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.slide { min-width: 100vw; height: 100vh; overflow-y: auto; padding: 145px 8% 120px; }

翻页 JS：translateX 切换，键盘 ← → / 空格，触屏支持，底部圆点点击跳转。

封面布局

左对齐，max-width: 720px，padding-left: 8%
眉线：.cover-eyebrow — 15px 灰色，字母间距 0.12em，左侧红色短线 ::before
标题：.cover-title — 52px 粗体 #1D1D1F，关键部分 .red 标红 #E60012
三色条：.title-bar justifyContent flex-start
描述：.cover-desc — 19px 灰色，max-width: 560px
标签：.cover-tags 用 .cover-tag + 色值类

页面标题

.section-title { font-size: 34px; font-weight: 700; color: #3B3838; text-align: center; margin-bottom: 10px; }
.section-sub { font-size: 20px; color: #717071; text-align: center; margin-bottom: 60px; }
.three-color-bar { width: 64px; height: 3px; background: linear-gradient(90deg, #E60012, #FF6B00, #0071E3); border-radius: 2px; margin: 0 auto 24px; }

卡片组件

| 组件 | 网格 | 卡片样式 | |------|------|---------| | 概述卡片 | 3列 gap 28px | #FAFAFA 背景，14px 圆角，hover 上浮 | | 能力卡片 | 4列 gap 24px | 虚线边框 dashed，hover 红边 | | 场景卡片 | 2列 gap 20px | flex 图标50px左 + 内容右，border实体 | | 价值卡片 | 2列 gap 24px | flex 图标48px左 + 内容右，#FAFAFA | | 架构图 | 分层 | 标签右对齐140px + 色块组 | | 指标行 | flex居中 wrap | 白色背景，border，数字40px红色 |

标签色值

| 类 | 背景 | 文字 | 边框 | |----|------|------|------| | tag-red / hl-red | rgba(230,0,18,.08) | #E60012 | rgba(230,0,18,.15) | | tag-blue / hl-blue | rgba(0,113,227,.06) | #0071E3 | rgba(0,113,227,.12) | | tag-orange / hl-orange | rgba(255,107,0,.06) | #FF6B00 | rgba(255,107,0,.12) | | tag-green / hl-green | rgba(46,187,89,.06) | #2EBB59 | rgba(46,187,89,.12) |

封底

.slide-end { display: flex; align-items: center; justify-content: flex-start; padding-left: 8%; }
.end-content { max-width: 600px; }
.end-slogan { font-size: 15px; letter-spacing: .1em; color: #86868B; margin-bottom: 28px; }
.end-title { font-size: 64px; font-weight: 700; color: #1D1D1F; margin-bottom: 10px; }
.end-subtitle { font-size: 19px; letter-spacing: .3em; color: #86868B; margin-bottom: 40px; }

Design Checklist

[ ] 固定 UI 五元素位置正确（左上Logo / 右上进度圆点 / 左下全屏按钮 / 底部居中翻页指示器 / 右下品牌位）
[ ] 封面眉线 + 52px 标题 + 三色条 + 描述 + 标签
[ ] 内容页 34px 居中标题 + 三色渐变色条
[ ] 卡片圆角 14px / #FAFAFA 背景 / hover 上浮效果
[ ] 翻页键盘 ← → / 空格 / 触屏滑动
[ ] 封底 64px 标题 + 眉语 + 标签
[ ] 使用 CDN 引用 Logo
[ ] 右下品牌位使用 CDN 引用

用友YonSuite风格HTML报告生成

HTML 分析报告风格指南

适用场景

典型元素

Design Philosophy（设计理念）

配色体系

红色使用约束（重要）

箭头渐变规范

Logo 资产规范

Logo CDN 引用规范

字体规范（Typography Rules）

行间距

禁止使用

配色规范（Color Rules）

品牌主色（红白灰）

色调占比

渐变规则

禁用规则

图表配色

布局规范（Layout Rules）

网格与页边距

对齐规则

留白原则

卡片/区块规范

内容规范（Content Rules）

一页一主题

内容层次

条目列举

重点突出

禁止事项

通用布局规则（白底方案）

装饰元素

三色短线段（标题装饰）

几何装饰切片（左上角）

网格纹理背景

虚线边框卡片

Brand Footer（品牌位）

Lucide Icons（图标系统）

图标来源

使用方式（inline SVG，推荐）

常用图标与场景对应

图标名称兼容性

图标使用规范

分析报告完整页面结构

图表布局规范

明细表格规范

状态 Tag 色值

HTML 品牌规范

Design Checklist

文件输出

注意事项时的标准

产品介绍/技能介绍 PPT 规范（用友品牌风格 — 固化样式）

样式的核心（必须记死，不允许自己发挥）

固定 UI 元素（位置锁定，不可更改）

翻页机制

封面布局

页面标题

卡片组件

标签色值

封底

Design Checklist