@somecat/financial-report 0.1.7 → 0.1.9

package/README.md

@@ -12,21 +12,25 @@
 
 ```
 h5-app/
-├── public/assets/images/     # 切图资源
-│   ├── header-bg.png         # 头图背景
-│   ├── banner-1.png          # Banner 插图1
-│   ├── banner-2.png          # Banner 插图2
-│   ├── banner-3.png          # Banner 插图3
-│   └── title-icon.png        # 标题左侧 icon
 ├── src/
+│   ├── assets/                  # 切图与字体资源
 │   ├── components/
-│   │   ├── HeaderSection.vue    # 头部区域（背景图+标题+数据卡片+按钮）
-│   │   ├── SectionTitle.vue     # 区块标题（icon+文字）
-│   │   ├── ContentSection.vue   # 内容区块（标题+文本+标签+统计）
-│   │   ├── BarChart.vue         # 柱状图组件（21根递减红色柱）
-│   │   └── BottomChart.vue      # 底部对比图组件（3根对比柱）
-│   ├── App.vue                  # 主页面
-│   └── main.js
+│   │   ├── ReportHeader.vue       # 页面头部（周次、标题、日期）
+│   │   ├── SectionHeader.vue      # 区块标题（编号徽章 + 文字）
+│   │   ├── SectionDivider.vue     # 区块标题下分隔线
+│   │   ├── StatCard.vue           # 指标卡片容器（头部指标 + 子标题行 + 图表插槽）
+│   │   ├── SavingsSection.vue     # Section 1 存款情况（变宽环形图 + 币种分布）
+│   │   ├── SectionRepurchase.vue  # Section 2 回购情况（34 省市横向条形图）
+│   │   ├── SectionLiability.vue   # Section 3 带息负债（6 列柱状图）
+│   │   ├── SectionSupplyChain.vue # Section 4 供应链融资余额（分段柱状图）
+│   │   ├── SectionSurplus.vue     # Section 5 资金结余（5 项条形图 + 双指标头部）
+│   │   └── StackedColumnChart.vue # 分段（堆叠）柱状图，纯 SVG 自封装
+│   ├── styles/                  # 设计变量 / report 样式（样式隔离）
+│   ├── utils/                   # color.js（CSS 变量解析，保障截图颜色一致）
+│   ├── App.vue                  # 报告主页面（按区块组装，暴露 generateImage）
+│   ├── report-data.js           # 默认报告数据结构
+│   ├── report-image.js          # html-to-image PNG 导出
+│   └── index.js                 # 库入口（ReportApp / ReportPlugin）
 ├── index.html
 ├── vite.config.js
 └── package.json
@@ -34,21 +38,42 @@ h5-app/
 
 ## 组件说明
 
-### BarChart.vue
-柱状图组件，接收 `title` 和 `data` props：
-- `data` 为数组，每项含 `label`、`value`、`width`
-- 默认渲染 21 根递减红色柱状图
+### StatCard.vue
+指标卡片容器，接收 `stats`（头部指标数组，支持单/双指标）、`unit`、`subtitle`、
+`unitLabel` 等 props；默认插槽放置图表内容，`header-extra` 具名插槽放置头部右侧插图。
 
-### BottomChart.vue
-底部对比图组件，接收 `title`、`unit`、`data` props：
-- `data` 为数组，每项含 `label`、`value`、`color`
-- 默认渲染 3 根对比柱（本周/上周/月均）
+### StackedColumnChart.vue（分段柱状图，自封装）
+纯 SVG 实现的分段（堆叠）柱状图，无 echarts 依赖，适配 html-to-image PNG 导出：
 
-### ContentSection.vue
-通用内容区块，接收 `title`、`content`、`tags`、`stats` props：
-- `content` 支持字符串或数组（多行文本）
-- `tags` 为标签数组
-- `stats` 为统计数据数组
+- 每组渲染一根堆叠柱，所有柱共享比例尺（最高柱撑满绘图区），柱高与组内分段值之和成正比；
+- 组内分段默认按数值降序排列（大块在下、小块在上），避免小块贴近 x 轴导致标签拥挤；
+- 每个分段以"引导线 + 名称/数值标签"标注，替代图例；首柱标签在柱左侧、其余柱在右侧；
+- 不绘制 Y 轴刻度（数值已由标签标注），仅保留底部基线与组名。
+
+数据类型定义：
+
+```
+SegmentItem  { name: string, value: number, color?: string }   // 分段
+StackedGroup { name: string, segments: SegmentItem[] }         // 一根堆叠柱
+```
+
+Props：
+
+| Prop | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `groups` | `StackedGroup[]` | 必填 | 柱分组数据 |
+| `height` | `number` | `300` | SVG 高度，柱体最大高度 = height - 50 |
+| `sortSegments` | `boolean` | `true` | 组内按值降序（大块在下、小块在上） |
+| `formatValue` | `(value) => string` | 千分位 | 数值格式化 |
+
+分段颜色建议使用 CSS 变量（如 `var(--color-primary)`），内部会经
+`resolveCssColor` 解析为具体色值，保证页面显示与 PNG 截图一致。
+
+### SectionSupplyChain.vue
+Section 4 供应链融资余额：仅分段柱状图，不展示卡片头部指标区与子标题文案
+（子标题行仅保留右侧"单位：亿元"标注）
+（左柱"供应链融资"按融资品种构成，右柱"到期"按到期时间分布）。
+Props：`groups`（结构同 `StackedColumnChart` 的 `groups`）。
 
 ## 运行方式
 
@@ -108,12 +133,37 @@ const reportData = {
 	},
 	repurchase: { headerValue: '205.2', provinces: [] },
 	liability: { headerValue: '825.6', columns: [] },
+	supplyChain: {
+		groups: [
+			{
+				name: '供应链融资',
+				segments: [
+					{ name: '银行承兑汇票', value: 142.5, color: '#C13224' },
+					{ name: '商业承兑汇票', value: 96.2, color: '#FCC2BE' },
+					{ name: '应付账款保理', value: 58.7, color: '#F68F87' }
+				]
+			},
+			{
+				name: '到期',
+				segments: [
+					{ name: '年内到期', value: 45.2, color: '#53968E' },
+					{ name: '明年到期', value: 15.8, color: '#82CDC0' }
+				]
+			}
+		]
+	},
 	surplus: { bars: [], note: '备注：...' }
 }
 
 const exportPng = async () => {
-	const dataUrl = await reportRef.value.generateImage({ pixelRatio: 2 })
-	// 交给业务方上传，或自行转换成 Blob / 触发下载
+	// 默认返回两张图：{ header, body }，头部与正文各一张
+	const { header, body } = await reportRef.value.generateImage({ pixelRatio: 2 })
+	return { header, body }
+}
+
+const exportWholePng = async () => {
+	// split: false 时返回整个报告的一张图
+	const dataUrl = await reportRef.value.generateImage({ pixelRatio: 2, split: false })
 	return dataUrl
 }
 </script>
@@ -124,7 +174,7 @@ const exportPng = async () => {
 ```
 
 也可以注册为全局组件：`app.use(ReportPlugin, { name: 'FinancialReport' })`。
-`generateImage()` 会等待 Vue 更新、`document.fonts.ready` 和图片资源加载完成后返回 PNG data URL。
+`generateImage()` 默认返回 `{ header, body }` 两张 PNG data URL（ReportHeader 一张、header 以下正文一张）；传 `split: false` 时返回整个报告的一张 data URL。调用会等待 Vue 更新、`document.fonts.ready` 和图片资源加载完成。
 
 截图字体注意事项：DIN 数字字体随 CSS 内联、思源宋体标题字体以文件形式随包分发，生成器会等待 `document.fonts.ready` 后再截图。正文中文目前依赖系统字体；若要求 Windows、macOS 和 Linux 像素级一致，应把设计指定的中文字体文件放入 `public/assets/fonts/`，再通过 `@font-face` 注册并在 `$font-sans` 中优先使用，且确认字体授权和文件体积。