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（品牌右下角用）

已收录素材清单：

Logo CDN 引用规范

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

<!-- 左上角 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）

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

行间距

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

禁止使用

• 斜体、艺术字

配色规范（Color Rules）

品牌主色（红白灰）

色调占比

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

渐变规则

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

禁用规则

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

图表配色

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

布局规范（Layout Rules）

网格与页边距

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

对齐规则

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

留白原则

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

卡片/区块规范

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

内容规范（Content Rules）

一页一主题

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

内容层次

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

条目列举

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

重点突出

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

禁止事项

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

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

装饰元素

三色短线段（标题装饰）

.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)

常用图标与场景对应

图标名称兼容性

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

生成前验证： 所有用到的图标先用 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 色值

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; }

卡片组件

标签色值

封底

.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 引用