Merge pull request #55 from WeBankFinTech/branch_joy

feat: 更新dashboard

Author: mayinrain

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

@@ -0,0 +1,48 @@
+# BDashboard
+提供通用的数据概览布局
+
+## 组件注册
+
+```js
+import { BDashboard } from '@fesjs/traction-widget';
+app.use(BDashboard);
+```
+
+## 代码演示
+### 基础用法
+数据看板布局，传入sections和slot，自动纵向单列排布。常搭配BCharts组件使用
+
+--USE
+
+--CODE
+
+## 参数说明
+### BDashboard Props
+| 属性     | 说明                   | 类型                              | 默认值 | 是否必须 |
+| -------- | ---------------------- | --------------------------------- | ------ | -------- |
+| sections | 看板各区块的配置信息   | Array<{ title: string; name: string }> | []     | 是       |
+
+### Sections 配置项说明
+| 属性  | 说明                   | 类型     | 示例     |
+| ----- | ---------------------- | -------- | -------- |
+| title | 区块标题               | string   | '销售统计' |
+| name  | 对应插槽名称           | string   | 'sales'   |
+
+### Slots
+| 插槽名   | 说明                   |
+| -------- | ---------------------- |
+| [name]   | 通过sections中的name字段动态匹配的具名插槽，用于放置对应区块的内容 |
+
+## 使用建议
+1. **布局规范**
+   - 建议每个区块内容保持合适的高度，避免过高或过低
+   - 区块内容建议使用响应式组件，以适应不同宽度
+
+2. **性能优化**
+   - 当区块较多时，建议使用动态组件或懒加载
+   - 可以根据视口判断是否渲染可视区域外的内容
+
+## 注意事项
+1. sections 的 name 属性值必须唯一，且与插槽名称一一对应
+2. 每个区块都需要提供对应的具名插槽内容，否则该区块将为空
+3. 组件默认提供了基础样式，如需自定义样式，可通过 CSS 变量覆盖

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

@@ -0,0 +1,98 @@
+<template>
+    <BDashboard :sections="dashboardSections">
+      <template #diy>
+        <div>数据模块</div>
+      </template>
+      <template #charts>
+        <BCharts
+            chart-id="demo-chart"
+            :config="chartConfig"
+            :initial-days="7"
+        />
+      </template>
+      <template #diy2>
+        <div>数据模块2</div>
+      </template>
+    </BDashboard>
+  </template>
+  
+  <script setup lang="ts">
+import { BCharts,BDashboard } from '@fesjs/traction-widget';
+const dashboardSections = [
+    { title: '自定义', name: 'diy' },
+    { title: 'Chart组件', name: 'charts' },
+    { title: '自定义2', name: 'diy2' },
+];
+
+// 下面是charts伪数据
+const chartConfig = {
+    title: '告警统计分析',
+    series: [
+        {
+            field: 'critical',
+            name: '严重告警',
+            itemStyle: {
+                color: '#FEEEEE',
+                borderColor: '#FF4D4F'
+            }
+        },
+        {
+            field: 'major',
+            name: '主要告警',
+            itemStyle: {
+                color: '#EDF2FF', 
+                borderColor: '#5384FF'
+            }
+        },
+        {
+            field: 'minor',
+            name: '次要告警',
+            itemStyle: {
+                color: '#FFF4EB',
+                borderColor: '#FF9900'
+            }
+        },
+        {
+            field: 'warning',
+            name: '警告',
+            itemStyle: {
+                color: '#FFF3DC',
+                borderColor: '#FAC017'
+            }
+        },
+        {
+            field: 'info',
+            name: '信息',
+            itemStyle: {
+                color: '#D1F4E9',
+                borderColor: '#00CB91'
+            }
+        }
+    ],
+    xAxisField: 'date',
+    fetchData: async (startTime: number, endTime: number) => {
+        // 模拟异步数据获取
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                // 生成模拟数据
+                const days = Math.floor((endTime - startTime) / (24 * 60 * 60 * 1000));
+                const data = [];
+                
+                for (let i = 0; i <= days; i++) {
+                    const date = new Date(startTime + i * 24 * 60 * 60 * 1000);
+                    data.push({
+                        date: date.toISOString().split('T')[0],
+                        critical: Math.floor(Math.random() * 10),
+                        major: Math.floor(Math.random() * 15),
+                        minor: Math.floor(Math.random() * 20),
+                        warning: Math.floor(Math.random() * 25),
+                        info: Math.floor(Math.random() * 30)
+                    });
+                }
+                
+                resolve(data);
+            }, 1000);
+        });
+    }
+};
+  </script>

docs/.vitepress/config.js

@@ -107,6 +107,7 @@ export default defineConfig({
                         { text: 'BTablePage', link: '/components/BTablePage' },
                         { text: 'BNavBar', link: '/components/BNavBar'},
                         { text: 'BNavHeader', link: '/components/BNavHeader'},
+                        { text: 'BDashboard', link: '/components/BDashboard'},
                     ]
                 }
             ],

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

@@ -0,0 +1,25 @@
+<template>
+    <div class="wd-dashboard">
+      <div v-for="(item, index) in sections" :key="index" class="wd-dashboard-section">
+        <div class="wd-dashboard-section__header">
+          <h3 class="wd-dashboard-section__title" style="margin:0">{{ item.title }}</h3>
+        </div>
+        <div class="wd-dashboard-section__content">
+          <slot :name="item.name"></slot>
+        </div>
+      </div>
+    </div>
+  </template>
+
+<script lang="ts">
+export default {
+    name: 'BDashboard',
+    props: {
+        sections: {
+            type: Array<{ title: string; name: string }>,
+            required: true,
+            default: () => []
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,9 @@
+import { withInstall } from '../_util/withInstall';
+import Dashboard from './Dashboard.vue';
+
+import type { SFCWithInstall } from '../_util/interface';
+
+type DashboardType = SFCWithInstall<typeof Dashboard>;
+export const BDashboard = withInstall<DashboardType>(Dashboard as DashboardType);
+
+export default BDashboard;

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

@@ -0,0 +1,25 @@
+.wd-dashboard {
+  background: #f7f8fa;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 16px;
+
+  &-section {
+
+    &__header {
+      margin-bottom: 16px;
+    }
+
+    &__title {
+      //  会被文档样式影响到
+      // margin: 0;
+    }
+
+    &__content {
+      padding: 24px;
+      background: #fff;
+      border-radius: 4px;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+import './index.less';

packages/traction-widget/components/index.ts

@@ -11,6 +11,7 @@ import { BNavBar } from './NavBar';
 import { BNavHeader } from './NavHeader';
 import { BMetricTip } from './MetricTip';
 import { BCharts } from './Charts';
+import { BDashboard } from './Dashboard';
 
 const components = [
     BTagsPanel,
@@ -23,7 +24,8 @@ const components = [
     BNavBar,
     BNavHeader,
     BMetricTip,
-    BCharts
+    BCharts,
+    BDashboard
 ];
 
 const install = (app: any): any => {
@@ -52,7 +54,8 @@ export {
     BNavBar,
     BNavHeader,
     BMetricTip,
-    BCharts
+    BCharts,
+    BDashboard
 };
 
 export default {
@@ -74,5 +77,6 @@ export default {
     BNavBar,
     BNavHeader,
     BMetricTip,
-    BCharts
+    BCharts,
+    BDashboard
 };