@next-bricks/data-view 1.12.10 → 1.12.12

package/docs/graph-text.md

@@ -1,13 +1,31 @@
-data-view.graph-text
+---
+tagName: data-view.graph-text
+displayName: WrappedDataViewGraphText
+description: Graph text
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.graph-text
+
+> Graph text
+
+## Props
+
+| 属性  | 类型               | 必填 | 默认值 | 说明     |
+| ----- | ------------------ | ---- | ------ | -------- |
+| text  | `string`           | 是   | -      | 文本标题 |
+| value | `string \| number` | 是   | -      | 文本值   |
 
 ## Examples
 
 ### Basic
 
+展示 graph 文本节点的基本用法，包含标题和数值。
+
 ```yaml preview
-- brick: data-view.graph-text
-  properties:
-    text: 负载均衡数
-    value: 234
-    style:
+brick: data-view.graph-text
+properties:
+  text: 负载均衡数
+  value: 234
 ```

package/docs/graph-text.react.md

@@ -0,0 +1,34 @@
+---
+tagName: data-view.graph-text
+displayName: WrappedDataViewGraphText
+description: Graph text
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewGraphText
+
+> Graph text
+
+## 导入
+
+```tsx
+import { WrappedDataViewGraphText } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性  | 类型               | 必填 | 默认值 | 说明     |
+| ----- | ------------------ | ---- | ------ | -------- |
+| text  | `string`           | 是   | -      | 文本标题 |
+| value | `string \| number` | 是   | -      | 文本值   |
+
+## Examples
+
+### Basic
+
+展示 graph 文本节点的基本用法，包含标题和数值。
+
+```tsx
+<WrappedDataViewGraphText text="负载均衡数" value={234} />
+```

package/docs/grid-background.md

@@ -1,9 +1,29 @@
-网格背景
+---
+tagName: data-view.grid-background
+displayName: WrappedDataViewGridBackground
+description: 大屏网格背景
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# data-view.grid-background
+
+> 大屏网格背景
+
+## Props
+
+| 属性          | 类型                           | 必填 | 默认值                                               | 说明                 |
+| ------------- | ------------------------------ | ---- | ---------------------------------------------------- | -------------------- |
+| color         | `React.CSSProperties["color"]` | 否   | `"#235F90"`                                          | 背景条纹颜色         |
+| maskStyle     | `React.CSSProperties`          | 否   | -                                                    | 背景蓝色遮罩区域样式 |
+| particleColor | `ParticleColor`                | 否   | `{ startColor: "#477AFFFF", endColor: "#5F83FF00" }` | 运动粒子的颜色       |
 
 ## Examples
 
 ### Basic
 
+展示大屏网格背景的基本用法，包含条纹颜色、粒子颜色和遮罩样式配置。
+
 ```yaml preview
 - brick: data-view.grid-background
   properties:

package/docs/grid-background.react.md

@@ -0,0 +1,45 @@
+---
+tagName: data-view.grid-background
+displayName: WrappedDataViewGridBackground
+description: 大屏网格背景
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewGridBackground
+
+> 大屏网格背景
+
+## 导入
+
+```tsx
+import { WrappedDataViewGridBackground } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型                           | 必填 | 默认值                                               | 说明                 |
+| ------------- | ------------------------------ | ---- | ---------------------------------------------------- | -------------------- |
+| color         | `React.CSSProperties["color"]` | 否   | `"#235F90"`                                          | 背景条纹颜色         |
+| maskStyle     | `React.CSSProperties`          | 否   | -                                                    | 背景蓝色遮罩区域样式 |
+| particleColor | `ParticleColor`                | 否   | `{ startColor: "#477AFFFF", endColor: "#5F83FF00" }` | 运动粒子的颜色       |
+
+## Examples
+
+### Basic
+
+展示大屏网格背景的基本用法，包含条纹颜色、粒子颜色和遮罩样式配置。
+
+```tsx
+<WrappedDataViewGridBackground
+  style={{
+    width: "920px",
+    height: "600px",
+    display: "block",
+    backgroundColor: "#1c1e21",
+  }}
+  color="#235F90"
+  particleColor={{ startColor: "#477AFFFF", endColor: "#5F83FF00" }}
+  maskStyle={{ background: "rgba(41, 109, 255, 0.8)" }}
+/>
+```

package/docs/hi-tech-button.md

@@ -1,9 +1,35 @@
-构件 `data-view.hi-tech-button`
+---
+tagName: data-view.hi-tech-button
+displayName: WrappedDataViewHiTechButton
+description: 大屏按钮
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.hi-tech-button
+
+> 大屏按钮
+
+## Props
+
+| 属性        | 类型                                                                     | 必填 | 默认值      | 说明     |
+| ----------- | ------------------------------------------------------------------------ | ---- | ----------- | -------- |
+| type        | `"default" \| "parallelogram" \| "stereoscopic" \| "shading" \| "round"` | 否   | `"default"` | 按钮类型 |
+| buttonStyle | `React.CSSProperties`                                                    | 否   | -           | 按钮样式 |
+| disabled    | `boolean`                                                                | 否   | `false`     | 是否禁用 |
+
+## Slots
+
+| 名称      | 说明     |
+| --------- | -------- |
+| (default) | 按钮内容 |
 
 ## Examples
 
 ### Basic
 
+展示默认样式的大屏按钮。
+
 ```yaml preview
 - brick: data-view.hi-tech-button
   slots:
@@ -17,6 +43,8 @@
 
 ### Parallelogram
 
+展示平行四边形样式的大屏按钮。
+
 ```yaml preview
 - brick: data-view.hi-tech-button
   properties:
@@ -32,6 +60,8 @@
 
 ### Stereoscopic
 
+展示立体样式的大屏按钮。
+
 ```yaml preview
 - brick: data-view.hi-tech-button
   properties:
@@ -47,6 +77,8 @@
 
 ### Shading
 
+展示阴影样式的大屏按钮。
+
 ```yaml preview
 - brick: data-view.hi-tech-button
   properties:
@@ -62,6 +94,8 @@
 
 ### Round
 
+展示圆形样式的大屏按钮。
+
 ```yaml preview
 - brick: data-view.hi-tech-button
   properties:
@@ -77,13 +111,40 @@
 
 ### Click
 
+展示点击事件绑定及按钮样式定制。
+
 ```yaml preview
 - brick: data-view.hi-tech-button
   properties:
-    textContent: BUTTON
+    buttonStyle:
+      fontSize: 16px
   events:
     click:
       action: message.success
       args:
         - Click!
+  slots:
+    "":
+      type: bricks
+      bricks:
+        - brick: span
+          properties:
+            textContent: BUTTON
+```
+
+### Disabled
+
+展示禁用状态的大屏按钮。
+
+```yaml preview
+- brick: data-view.hi-tech-button
+  properties:
+    disabled: true
+  slots:
+    "":
+      type: bricks
+      bricks:
+        - brick: span
+          properties:
+            textContent: BUTTON
 ```

package/docs/hi-tech-button.react.md

@@ -0,0 +1,106 @@
+---
+tagName: data-view.hi-tech-button
+displayName: WrappedDataViewHiTechButton
+description: 大屏按钮
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewHiTechButton
+
+> 大屏按钮
+
+## 导入
+
+```tsx
+import { WrappedDataViewHiTechButton } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                                                                     | 必填 | 默认值      | 说明     |
+| ----------- | ------------------------------------------------------------------------ | ---- | ----------- | -------- |
+| type        | `"default" \| "parallelogram" \| "stereoscopic" \| "shading" \| "round"` | 否   | `"default"` | 按钮类型 |
+| buttonStyle | `React.CSSProperties`                                                    | 否   | -           | 按钮样式 |
+| disabled    | `boolean`                                                                | 否   | `false`     | 是否禁用 |
+
+## Slots
+
+| 名称      | 说明     |
+| --------- | -------- |
+| (default) | 按钮内容 |
+
+## Examples
+
+### Basic
+
+展示默认样式的大屏按钮。
+
+```tsx
+<WrappedDataViewHiTechButton>
+  <span>BUTTON</span>
+</WrappedDataViewHiTechButton>
+```
+
+### Parallelogram
+
+展示平行四边形样式的大屏按钮。
+
+```tsx
+<WrappedDataViewHiTechButton type="parallelogram">
+  <span>BUTTON</span>
+</WrappedDataViewHiTechButton>
+```
+
+### Stereoscopic
+
+展示立体样式的大屏按钮。
+
+```tsx
+<WrappedDataViewHiTechButton type="stereoscopic">
+  <span>BUTTON</span>
+</WrappedDataViewHiTechButton>
+```
+
+### Shading
+
+展示阴影样式的大屏按钮。
+
+```tsx
+<WrappedDataViewHiTechButton type="shading">
+  <span>BUTTON</span>
+</WrappedDataViewHiTechButton>
+```
+
+### Round
+
+展示圆形样式的大屏按钮。
+
+```tsx
+<WrappedDataViewHiTechButton type="round">
+  <span>BUTTON</span>
+</WrappedDataViewHiTechButton>
+```
+
+### Click
+
+展示点击事件绑定及按钮样式定制。
+
+```tsx
+<WrappedDataViewHiTechButton
+  buttonStyle={{ fontSize: "16px" }}
+  onClick={() => console.log("Click!")}
+>
+  <span>BUTTON</span>
+</WrappedDataViewHiTechButton>
+```
+
+### Disabled
+
+展示禁用状态的大屏按钮。
+
+```tsx
+<WrappedDataViewHiTechButton disabled>
+  <span>BUTTON</span>
+</WrappedDataViewHiTechButton>
+```

package/docs/indicator-card.md

@@ -1,9 +1,28 @@
-构件 `data-view.indicator-card`
+---
+tagName: data-view.indicator-card
+displayName: WrappedDataViewIndicatorCard
+description: 指标卡片
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.indicator-card
+
+> 指标卡片
+
+## Props
+
+| 属性       | 类型                                                         | 必填 | 默认值     | 说明                                                        |
+| ---------- | ------------------------------------------------------------ | ---- | ---------- | ----------------------------------------------------------- |
+| layout     | `"column" \| "column-townhouse" \| "row" \| "row-townhouse"` | 否   | `"column"` | 展示类型，`column` 类型为上下三行、`row` 类型为左右两行模式 |
+| datasource | `Datasource[]`                                               | 否   | `[]`       | 数据源                                                      |
 
 ## Examples
 
 ### Column
 
+展示纵向排列（上下三行）的指标卡片。
+
 ```yaml preview
 - brick: data-view.indicator-card
   properties:
@@ -22,6 +41,8 @@
 
 ### Column Townhouse
 
+展示纵向联排（多列上下）的指标卡片。
+
 ```yaml preview
 - brick: data-view.indicator-card
   properties:
@@ -40,6 +61,8 @@
 
 ### Row
 
+展示横向排列（左右两行）的指标卡片。
+
 ```yaml preview
 - brick: data-view.indicator-card
   properties:
@@ -58,6 +81,8 @@
 
 ### Row Townhouse
 
+展示横向联排（多行左右）的指标卡片。
+
 ```yaml preview
 - brick: data-view.indicator-card
   properties:

package/docs/indicator-card.react.md

@@ -0,0 +1,86 @@
+---
+tagName: data-view.indicator-card
+displayName: WrappedDataViewIndicatorCard
+description: 指标卡片
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewIndicatorCard
+
+> 指标卡片
+
+## 导入
+
+```tsx
+import { WrappedDataViewIndicatorCard } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型                                                         | 必填 | 默认值     | 说明                                                        |
+| ---------- | ------------------------------------------------------------ | ---- | ---------- | ----------------------------------------------------------- |
+| layout     | `"column" \| "column-townhouse" \| "row" \| "row-townhouse"` | 否   | `"column"` | 展示类型，`column` 类型为上下三行、`row` 类型为左右两行模式 |
+| datasource | `Datasource[]`                                               | 否   | `[]`       | 数据源                                                      |
+
+## Examples
+
+### Column
+
+展示纵向排列（上下三行）的指标卡片。
+
+```tsx
+<WrappedDataViewIndicatorCard
+  layout="column"
+  datasource={[
+    { value: 300, desc: "月碳排放量", unit: "(吨)" },
+    { value: 1000.33, desc: "季度碳排放总量", unit: "(吨)" },
+    { value: 2507.55, desc: "年度碳排放总量", unit: "(吨)" },
+  ]}
+/>
+```
+
+### Column Townhouse
+
+展示纵向联排（多列上下）的指标卡片。
+
+```tsx
+<WrappedDataViewIndicatorCard
+  layout="column-townhouse"
+  datasource={[
+    { value: 300, desc: "月碳排放量", unit: "(吨)" },
+    { value: 1000.33, desc: "季度碳排放总量", unit: "(吨)" },
+    { value: 2507.55, desc: "年度碳排放总量", unit: "(吨)" },
+  ]}
+/>
+```
+
+### Row
+
+展示横向排列（左右两行）的指标卡片。
+
+```tsx
+<WrappedDataViewIndicatorCard
+  layout="row"
+  datasource={[
+    { value: 300, desc: "月碳排放量", unit: "(吨)" },
+    { value: 1000.33, desc: "季度碳排放总量", unit: "(吨)" },
+    { value: 2507.55, desc: "年度碳排放总量", unit: "(吨)" },
+  ]}
+/>
+```
+
+### Row Townhouse
+
+展示横向联排（多行左右）的指标卡片。
+
+```tsx
+<WrappedDataViewIndicatorCard
+  layout="row-townhouse"
+  datasource={[
+    { value: 300, desc: "月碳排放量", unit: "(吨)" },
+    { value: 1000.33, desc: "季度碳排放总量", unit: "(吨)" },
+    { value: 2507.55, desc: "年度碳排放总量", unit: "(吨)" },
+  ]}
+/>
+```

package/docs/lights-component-title.md

@@ -1,9 +1,28 @@
-构件 `data-view.lights-component-title`
+---
+tagName: data-view.lights-component-title
+displayName: WrappedDataViewLightsComponentTitle
+description: 大屏灯光风格组件标题
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.lights-component-title
+
+> 大屏灯光风格组件标题
+
+## Props
+
+| 属性           | 类型                | 必填 | 默认值    | 说明                                                    |
+| -------------- | ------------------- | ---- | --------- | ------------------------------------------------------- |
+| componentTitle | `string`            | 是   | -         | 组件标题                                                |
+| theme          | `"light" \| "dark"` | 否   | `"light"` | 主题风格，`light` 为浅色光标图标，`dark` 为深色光标图标 |
 
 ## Examples
 
 ### Light
 
+展示浅色主题的灯光风格组件标题。
+
 ```yaml preview
 - brick: div
   properties:
@@ -20,8 +39,11 @@
             componentTitle: 标题内容
             theme: "light"
 ```
+
 ### Dark
 
+展示深色主题的灯光风格组件标题。
+
 ```yaml preview
 - brick: div
   properties:

package/docs/lights-component-title.react.md

@@ -0,0 +1,49 @@
+---
+tagName: data-view.lights-component-title
+displayName: WrappedDataViewLightsComponentTitle
+description: 大屏灯光风格组件标题
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewLightsComponentTitle
+
+> 大屏灯光风格组件标题
+
+## 导入
+
+```tsx
+import { WrappedDataViewLightsComponentTitle } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性           | 类型                | 必填 | 默认值    | 说明                                                    |
+| -------------- | ------------------- | ---- | --------- | ------------------------------------------------------- |
+| componentTitle | `string`            | 是   | -         | 组件标题                                                |
+| theme          | `"light" \| "dark"` | 否   | `"light"` | 主题风格，`light` 为浅色光标图标，`dark` 为深色光标图标 |
+
+## Examples
+
+### Light
+
+展示浅色主题的灯光风格组件标题。
+
+```tsx
+<div style={{ width: "100%", height: "100%", background: "#000000FF" }}>
+  <WrappedDataViewLightsComponentTitle
+    componentTitle="标题内容"
+    theme="light"
+  />
+</div>
+```
+
+### Dark
+
+展示深色主题的灯光风格组件标题。
+
+```tsx
+<div style={{ width: "100%", height: "100%", background: "#000000FF" }}>
+  <WrappedDataViewLightsComponentTitle componentTitle="标题内容" theme="dark" />
+</div>
+```

package/docs/loading-panel.md

@@ -1,9 +1,37 @@
-data-view.loading-panel
+---
+tagName: data-view.loading-panel
+displayName: WrappedDataViewLoadingPanel
+description: 大屏加载模块展示
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.loading-panel
+
+> 大屏加载模块展示
+
+## Props
+
+| 属性                | 类型      | 必填 | 默认值  | 说明                                       |
+| ------------------- | --------- | ---- | ------- | ------------------------------------------ |
+| customTitle         | `string`  | 否   | -       | 标题                                       |
+| loading             | `boolean` | 否   | -       | 是否加载中，虚拟数据模拟加载过程           |
+| useRealTimeProgress | `boolean` | 否   | `false` | 加载过程是否使用真实数据                   |
+| progress            | `number`  | 否   | -       | 加载进度，区间 [0-100]，使用真实数据时生效 |
+| intervalTime        | `number`  | 否   | `100`   | 每次加载变化的时间间隔，单位 ms            |
+
+## Events
+
+| 事件 | detail | 说明             |
+| ---- | ------ | ---------------- |
+| end  | `void` | loading 结束事件 |
 
 ## Examples
 
 ### Basic
 
+展示虚拟数据模拟加载过程的基本用法。
+
 ```yaml preview
 - brick: data-view.loading-panel
   properties:
@@ -16,6 +44,8 @@ data-view.loading-panel
 
 ### Progress
 
+展示使用真实进度数据及加载结束事件监听的用法。
+
 ```yaml preview
 - brick: data-view.loading-panel
   properties: