@somecat/financial-report 0.1.0
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 +120 -0
- package/dist/assets/images/banner-1.png +0 -0
- package/dist/assets/images/banner-2.png +0 -0
- package/dist/assets/images/banner-3.png +0 -0
- package/dist/assets/images/header-bg.png +0 -0
- package/dist/assets/images/title-icon.png +0 -0
- package/dist/financial-report.es.js +1009 -0
- package/dist/financial-report.umd.js +2 -0
- package/dist/style.css +1 -0
- package/package.json +47 -0
package/README.md
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
# 3311 看板 H5 页面
|
|
2
|
+
|
|
3
|
+
基于设计图还原的 Vue3 H5 页面，固定 750px 宽度。
|
|
4
|
+
|
|
5
|
+
## 技术栈
|
|
6
|
+
|
|
7
|
+
- Vue 3 (Composition API)
|
|
8
|
+
- Vite 5
|
|
9
|
+
- 纯 CSS scoped 样式
|
|
10
|
+
|
|
11
|
+
## 项目结构
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
h5-app/
|
|
15
|
+
├── public/assets/images/ # 切图资源
|
|
16
|
+
│ ├── header-bg.png # 头图背景
|
|
17
|
+
│ ├── banner-1.png # Banner 插图1
|
|
18
|
+
│ ├── banner-2.png # Banner 插图2
|
|
19
|
+
│ ├── banner-3.png # Banner 插图3
|
|
20
|
+
│ └── title-icon.png # 标题左侧 icon
|
|
21
|
+
├── src/
|
|
22
|
+
│ ├── components/
|
|
23
|
+
│ │ ├── HeaderSection.vue # 头部区域（背景图+标题+数据卡片+按钮）
|
|
24
|
+
│ │ ├── SectionTitle.vue # 区块标题（icon+文字）
|
|
25
|
+
│ │ ├── ContentSection.vue # 内容区块（标题+文本+标签+统计）
|
|
26
|
+
│ │ ├── BarChart.vue # 柱状图组件（21根递减红色柱）
|
|
27
|
+
│ │ └── BottomChart.vue # 底部对比图组件（3根对比柱）
|
|
28
|
+
│ ├── App.vue # 主页面
|
|
29
|
+
│ └── main.js
|
|
30
|
+
├── index.html
|
|
31
|
+
├── vite.config.js
|
|
32
|
+
└── package.json
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## 组件说明
|
|
36
|
+
|
|
37
|
+
### BarChart.vue
|
|
38
|
+
柱状图组件，接收 `title` 和 `data` props：
|
|
39
|
+
- `data` 为数组，每项含 `label`、`value`、`width`
|
|
40
|
+
- 默认渲染 21 根递减红色柱状图
|
|
41
|
+
|
|
42
|
+
### BottomChart.vue
|
|
43
|
+
底部对比图组件，接收 `title`、`unit`、`data` props：
|
|
44
|
+
- `data` 为数组，每项含 `label`、`value`、`color`
|
|
45
|
+
- 默认渲染 3 根对比柱（本周/上周/月均）
|
|
46
|
+
|
|
47
|
+
### ContentSection.vue
|
|
48
|
+
通用内容区块，接收 `title`、`content`、`tags`、`stats` props：
|
|
49
|
+
- `content` 支持字符串或数组（多行文本）
|
|
50
|
+
- `tags` 为标签数组
|
|
51
|
+
- `stats` 为统计数据数组
|
|
52
|
+
|
|
53
|
+
## 运行方式
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
# 安装依赖
|
|
57
|
+
npm install
|
|
58
|
+
|
|
59
|
+
# 开发模式
|
|
60
|
+
npm run dev
|
|
61
|
+
|
|
62
|
+
# 构建生产包
|
|
63
|
+
npm run build
|
|
64
|
+
|
|
65
|
+
# 预览构建结果
|
|
66
|
+
npm run preview
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## 作为报告组件使用
|
|
70
|
+
|
|
71
|
+
父组件负责准备数据，数据按区块传入；未提供的字段会继续使用当前演示默认值：
|
|
72
|
+
|
|
73
|
+
```vue
|
|
74
|
+
<script setup>
|
|
75
|
+
import { ref } from 'vue'
|
|
76
|
+
import { ReportApp, ReportPlugin } from './src'
|
|
77
|
+
|
|
78
|
+
const reportRef = ref(null)
|
|
79
|
+
const reportData = {
|
|
80
|
+
header: {
|
|
81
|
+
week: '3312',
|
|
82
|
+
date: '2026.08.24',
|
|
83
|
+
title: '资金周报',
|
|
84
|
+
subtitle: '稳资金．降成本．控风险',
|
|
85
|
+
description: '本周资金运行整体平稳，结构持续优化'
|
|
86
|
+
},
|
|
87
|
+
savings: {
|
|
88
|
+
headerLabel: '存款余额',
|
|
89
|
+
headerValue: '186.4',
|
|
90
|
+
currencies: [{ name: '人民币', nameEn: 'CNY', pct: 70, amount: '132.2' }]
|
|
91
|
+
},
|
|
92
|
+
repurchase: { headerValue: '205.2', provinces: [] },
|
|
93
|
+
liability: { headerValue: '825.6', columns: [] },
|
|
94
|
+
surplus: { bars: [], note: '备注：...' }
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
const exportPng = async () => {
|
|
98
|
+
const dataUrl = await reportRef.value.generateImage({ pixelRatio: 2 })
|
|
99
|
+
// 交给业务方上传，或自行转换成 Blob / 触发下载
|
|
100
|
+
return dataUrl
|
|
101
|
+
}
|
|
102
|
+
</script>
|
|
103
|
+
|
|
104
|
+
<template>
|
|
105
|
+
<ReportApp ref="reportRef" :report-data="reportData" />
|
|
106
|
+
</template>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
也可以注册为全局组件：`app.use(ReportPlugin, { name: 'FinancialReport' })`。
|
|
110
|
+
`generateImage()` 会等待 Vue 更新、`document.fonts.ready` 和图片资源加载完成后返回 PNG data URL。
|
|
111
|
+
|
|
112
|
+
截图字体注意事项：当前项目随包提供 DIN 数字字体和思源宋体标题字体，生成器会等待它们加载完成。正文中文目前依赖系统字体；若要求 Windows、macOS 和 Linux 像素级一致，应把设计指定的中文字体文件放入 `public/assets/fonts/`，再通过 `@font-face` 注册并在 `$font-sans` 中优先使用，且确认字体授权和文件体积。
|
|
113
|
+
|
|
114
|
+
## 设计还原说明
|
|
115
|
+
|
|
116
|
+
- 固定宽度 750px（2x 设计稿宽度）
|
|
117
|
+
- 主色调：暖米色背景 #F6E9E7 + 深红色强调 #BD1B13
|
|
118
|
+
- 辅助色：橙色 #E48858、绿色 #659C90
|
|
119
|
+
- 图表均封装为独立组件，支持 props 自定义数据
|
|
120
|
+
- 切图资源均使用原始 @2x 图片
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|