Skip to content

Commit 3b283c4

Browse files
mayinrainmayinrain
committed
Merge branch 'master' of github.com:WeBankFinTech/TractionWidget
2 parents c1722b5 + 1f6307c commit 3b283c4

File tree

16 files changed

+238
-27
lines changed

16 files changed

+238
-27
lines changed

‎.github/workflows/doc-deploy.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
name: TXDeploy
22
on:
3-
pull_request:
43
push:
54
branches:
6-
- docs
5+
- master
76
paths:
87
- 'packages/**/**'
98
- 'docs/**/**'

‎docs/.vitepress/components/BDashboard/index.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# BDashboard
2+
提供通用的数据概览布局
3+
4+
## 组件注册
5+
6+
```js
7+
import { BDashboard } from '@fesjs/traction-widget';
8+
app.use(BDashboard);
9+
```
10+
11+
## 代码演示
12+
### 基础用法
13+
数据看板布局，传入sections和slot，自动纵向单列排布。常搭配BCharts组件使用
14+
15+
--USE
16+
17+
--CODE
18+
19+
## 参数说明
20+
### BDashboard Props
21+
| 属性 | 说明 | 类型 | 默认值 | 是否必须 |
22+
| -------- | ---------------------- | --------------------------------- | ------ | -------- |
23+
| sections | 看板各区块的配置信息 | Array<{ title: string; name: string }> | [] | 是 |
24+
25+
### Sections 配置项说明
26+
| 属性 | 说明 | 类型 | 示例 |
27+
| ----- | ---------------------- | -------- | -------- |
28+
| title | 区块标题 | string | '销售统计' |
29+
| name | 对应插槽名称 | string | 'sales' |
30+
31+
### Slots
32+
| 插槽名 | 说明 |
33+
| -------- | ---------------------- |
34+
| [name] | 通过sections中的name字段动态匹配的具名插槽，用于放置对应区块的内容 |
35+
36+
## 使用建议
37+
1. **布局规范**
38+
- 建议每个区块内容保持合适的高度，避免过高或过低
39+
- 区块内容建议使用响应式组件，以适应不同宽度
40+
41+
2. **性能优化**
42+
- 当区块较多时，建议使用动态组件或懒加载
43+
- 可以根据视口判断是否渲染可视区域外的内容
44+
45+
## 注意事项
46+
1. sections 的 name 属性值必须唯一，且与插槽名称一一对应
47+
2. 每个区块都需要提供对应的具名插槽内容，否则该区块将为空
48+
3. 组件默认提供了基础样式，如需自定义样式，可通过 CSS 变量覆盖

‎docs/.vitepress/components/BDashboard/use.vue‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<template>
2+
<BDashboard :sections="dashboardSections">
3+
<template #diy>
4+
<div>数据模块</div>
5+
</template>
6+
<template #charts>
7+
<BCharts
8+
chart-id="demo-chart"
9+
:config="chartConfig"
10+
:initial-days="7"
11+
/>
12+
</template>
13+
<template #diy2>
14+
<div>数据模块2</div>
15+
</template>
16+
</BDashboard>
17+
</template>
18+
19+
<script setup lang="ts">
20+
import { BCharts,BDashboard } from '@fesjs/traction-widget';
21+
const dashboardSections = [
22+
{ title: '自定义', name: 'diy' },
23+
{ title: 'Chart组件', name: 'charts' },
24+
{ title: '自定义2', name: 'diy2' },
25+
];
26+
27+
// 下面是charts伪数据
28+
const chartConfig = {
29+
title: '告警统计分析',
30+
series: [
31+
{
32+
field: 'critical',
33+
name: '严重告警',
34+
itemStyle: {
35+
color: '#FEEEEE',
36+
borderColor: '#FF4D4F'
37+
}
38+
},
39+
{
40+
field: 'major',
41+
name: '主要告警',
42+
itemStyle: {
43+
color: '#EDF2FF',
44+
borderColor: '#5384FF'
45+
}
46+
},
47+
{
48+
field: 'minor',
49+
name: '次要告警',
50+
itemStyle: {
51+
color: '#FFF4EB',
52+
borderColor: '#FF9900'
53+
}
54+
},
55+
{
56+
field: 'warning',
57+
name: '警告',
58+
itemStyle: {
59+
color: '#FFF3DC',
60+
borderColor: '#FAC017'
61+
}
62+
},
63+
{
64+
field: 'info',
65+
name: '信息',
66+
itemStyle: {
67+
color: '#D1F4E9',
68+
borderColor: '#00CB91'
69+
}
70+
}
71+
],
72+
xAxisField: 'date',
73+
fetchData: async (startTime: number, endTime: number) => {
74+
// 模拟异步数据获取
75+
return new Promise((resolve) => {
76+
setTimeout(() => {
77+
// 生成模拟数据
78+
const days = Math.floor((endTime - startTime) / (24 * 60 * 60 * 1000));
79+
const data = [];
80+
81+
for (let i = 0; i <= days; i++) {
82+
const date = new Date(startTime + i * 24 * 60 * 60 * 1000);
83+
data.push({
84+
date: date.toISOString().split('T')[0],
85+
critical: Math.floor(Math.random() * 10),
86+
major: Math.floor(Math.random() * 15),
87+
minor: Math.floor(Math.random() * 20),
88+
warning: Math.floor(Math.random() * 25),
89+
info: Math.floor(Math.random() * 30)
90+
});
91+
}
92+
93+
resolve(data);
94+
}, 1000);
95+
});
96+
}
97+
};
98+
</script>

‎docs/.vitepress/config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export default defineConfig({
107107
{ text: 'BTablePage', link: '/components/BTablePage' },
108108
{ text: 'BNavBar', link: '/components/BNavBar'},
109109
{ text: 'BNavHeader', link: '/components/BNavHeader'},
110+
{ text: 'BDashboard', link: '/components/BDashboard'},
110111
]
111112
}
112113
],

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@fesjs/traction-widget",
3-
"version": "1.11.2",
3+
"version": "1.12.3",
44
"description": "集合大型中台项目使用到的通用组件和工具函数",
55
"scripts": {
66
"docs:dev": "npm run build && node docs/.vitepress/scripts/generate-doc.js && vitepress dev docs",

‎packages/traction-widget/components/Dashboard/Dashboard.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div class="wd-dashboard">
3+
<div v-for="(item, index) in sections" :key="index" class="wd-dashboard-section">
4+
<div class="wd-dashboard-section__header">
5+
<h3 class="wd-dashboard-section__title" style="margin:0">{{ item.title }}</h3>
6+
</div>
7+
<div class="wd-dashboard-section__content">
8+
<slot :name="item.name"></slot>
9+
</div>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script lang="ts">
15+
export default {
16+
name: 'BDashboard',
17+
props: {
18+
sections: {
19+
type: Array<{ title: string; name: string }>,
20+
required: true,
21+
default: () => []
22+
}
23+
}
24+
};
25+
</script>

‎packages/traction-widget/components/Dashboard/index.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { withInstall } from '../_util/withInstall';
2+
import Dashboard from './Dashboard.vue';
3+
4+
import type { SFCWithInstall } from '../_util/interface';
5+
6+
type DashboardType = SFCWithInstall<typeof Dashboard>;
7+
export const BDashboard = withInstall<DashboardType>(Dashboard as DashboardType);
8+
9+
export default BDashboard;

‎packages/traction-widget/components/Dashboard/style/index.less‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.wd-dashboard {
2+
background: #f7f8fa;
3+
display: flex;
4+
flex-direction: column;
5+
gap: 24px;
6+
padding: 16px;
7+
8+
&-section {
9+
10+
&__header {
11+
margin-bottom: 16px;
12+
}
13+
14+
&__title {
15+
// 会被文档样式影响到
16+
// margin: 0;
17+
}
18+
19+
&__content {
20+
padding: 24px;
21+
background: #fff;
22+
border-radius: 4px;
23+
}
24+
}
25+
}

‎packages/traction-widget/components/Dashboard/style/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './index.less';

‎packages/traction-widget/components/Search/Search.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<template v-if="props.isAdvance">
2121
<FButton v-if="isAdvanceCount" @click="handleAdvance"
2222
:class="querySelectedCount > 0 ? 'selected-count' : ''">
23-
{{searchLocalObj?.advance}}{{querySelectedCount > 0 ? `(${searchLocalObj?.selected}${querySelectedCount}${searchLocalObj?.item})` : ''}}
23+
{{querySelectedCountText()}}
2424
</FButton>
2525
<FButton v-else @click="handleAdvance">
2626
{{searchLocalObj?.advance}}
@@ -34,7 +34,7 @@
3434
<template v-if="props.isAdvance">
3535
<FButton v-if="isAdvanceCount" @click="handleAdvance"
3636
:class="querySelectedCount > 0 ? 'selected-count' : ''">
37-
{{searchLocalObj?.advance}}{{querySelectedCount > 0 ? `(${searchLocalObj?.selected} ${querySelectedCount} ${searchLocalObj?.item})` : ''}}
37+
{{querySelectedCountText()}}
3838
</FButton>
3939
<FButton v-else @click="handleAdvance">
4040
{{searchLocalObj?.advance}}
@@ -116,7 +116,6 @@ const emit = defineEmits(['search', 'reset', 'advance', 'update:form', 'update:a
116116
const { datasource } = useFormModel(props, emit, ['form', 'advanceForm']);
117117
118118
const prefixCls = getPrefixCls('search');
119-
120119
// 筛选条件数量的watch
121120
const querySelectedCount = computed(() => {
122121
if (!props.isCustomAdvanceCount) {
@@ -130,7 +129,12 @@ const querySelectedCount = computed(() => {
130129
return props.advanceCountFunc(props.advanceForm);
131130
}
132131
});
133-
132+
const querySelectedCountText = () => {
133+
const str = searchLocalObj?.advance;
134+
if (querySelectedCount.value === 0) return str;
135+
if (querySelectedCount.value === 1) return `${str}(${searchLocalObj?.selected}${querySelectedCount.value}${searchLocalObj?.item})`;
136+
if (querySelectedCount.value > 1) return `${str}(${searchLocalObj?.selected}${querySelectedCount.value}${searchLocalObj?.items})`;
137+
};
134138
const handleSearch = () => {
135139
emit('search', datasource.form);
136140
};

0 commit comments

Comments
 (0)