@somecat/financial-report 0.1.0 → 0.1.2
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.
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# H5 页面
|
|
2
2
|
|
|
3
3
|
基于设计图还原的 Vue3 H5 页面，固定 750px 宽度。
|
|
4
4
|
|
|
@@ -66,6 +66,23 @@ npm run build
|
|
|
66
66
|
npm run preview
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
+
## 样式隔离说明
|
|
70
|
+
|
|
71
|
+
库入口（`src/index.js`）只引入 `src/styles/report.scss`，其中所有规则均收敛在组件根类 `.financial-report` 子树内：
|
|
72
|
+
|
|
73
|
+
- 不包含 `*` / `html` / `body` / `#app` / `:root` 等全局选择器，不会覆盖宿主应用样式；
|
|
74
|
+
- CSS 设计变量（`--color-primary` 等）挂在组件根类上，仅对组件子树生效，同时对 `html-to-image` 截图更友好；
|
|
75
|
+
- 内置组件级 reset（`box-sizing`、`h1`/`p` 默认 margin 清零），宿主未做全局 reset 时组件布局也与设计稿一致；
|
|
76
|
+
- `src/styles/base.scss` 中的全局"页面壳"样式仅供本项目开发预览（`src/main.js`），不会进入构建产物；
|
|
77
|
+
- 字体分发策略：D-DIN 数字字体（23KB/38KB）随 CSS base64 内联，对 `html-to-image` 截图零网络依赖；思源宋体（11.77MB）体积过大，由构建插件以文件形式随包分发（`dist/assets/fonts/`），产物 CSS 以相对路径引用，消费方 bundler 会自动处理。
|
|
78
|
+
|
|
79
|
+
Vite lib 模式会将 CSS 抽离为独立文件，宿主项目使用 npm 包时需要显式引入：
|
|
80
|
+
|
|
81
|
+
```js
|
|
82
|
+
import { ReportApp } from '@somecat/financial-report'
|
|
83
|
+
import '@somecat/financial-report/dist/financial-report.css'
|
|
84
|
+
```
|
|
85
|
+
|
|
69
86
|
## 作为报告组件使用
|
|
70
87
|
|
|
71
88
|
父组件负责准备数据，数据按区块传入；未提供的字段会继续使用当前演示默认值：
|
|
@@ -78,7 +95,7 @@ import { ReportApp, ReportPlugin } from './src'
|
|
|
78
95
|
const reportRef = ref(null)
|
|
79
96
|
const reportData = {
|
|
80
97
|
header: {
|
|
81
|
-
week: '
|
|
98
|
+
week: '3',
|
|
82
99
|
date: '2026.08.24',
|
|
83
100
|
title: '资金周报',
|
|
84
101
|
subtitle: '稳资金．降成本．控风险',
|
|
@@ -109,7 +126,7 @@ const exportPng = async () => {
|
|
|
109
126
|
也可以注册为全局组件：`app.use(ReportPlugin, { name: 'FinancialReport' })`。
|
|
110
127
|
`generateImage()` 会等待 Vue 更新、`document.fonts.ready` 和图片资源加载完成后返回 PNG data URL。
|
|
111
128
|
|
|
112
|
-
|
|
129
|
+
截图字体注意事项：DIN 数字字体随 CSS 内联、思源宋体标题字体以文件形式随包分发，生成器会等待 `document.fonts.ready` 后再截图。正文中文目前依赖系统字体；若要求 Windows、macOS 和 Linux 像素级一致，应把设计指定的中文字体文件放入 `public/assets/fonts/`，再通过 `@font-face` 注册并在 `$font-sans` 中优先使用，且确认字体授权和文件体积。
|
|
113
130
|
|
|
114
131
|
## 设计还原说明
|
|
115
132
|
|
|
Binary file
|