@next-bricks/data-view 1.12.11 → 1.12.12

package/docs/dropdown-menu.md

@@ -1,20 +1,69 @@
-大屏基础下拉菜单
+---
+tagName: data-view.dropdown-menu
+displayName: WrappedDataViewDropdownMenu
+description: 基础下拉菜单
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.dropdown-menu
+
+> 基础下拉菜单
+
+## Props
+
+| 属性        | 类型                                 | 必填 | 默认值 | 说明         |
+| ----------- | ------------------------------------ | ---- | ------ | ------------ |
+| options     | `{ label: string; value: string }[]` | -    | -      | 候选项       |
+| value       | `string`                             | -    | -      | 当前选中值   |
+| placeholder | `string`                             | -    | -      | 占位符       |
+| allowClear  | `boolean`                            | -    | -      | 是否允许清除 |
+
+## Events
+
+| 事件         | detail                  | 说明         |
+| ------------ | ----------------------- | ------------ |
+| value.change | `string` — 当前选中的值 | 值改变时触发 |
 
 ## Examples
 
 ### Basic
 
+展示下拉菜单的基本用法，包含选项、占位符和清除按钮。
+
+```yaml preview
+brick: data-view.dropdown-menu
+properties:
+  options:
+    - label: 测试1
+      value: test1
+    - label: 测试2
+      value: test2
+  placeholder: 请选择
+  allowClear: true
+events:
+  value.change:
+    - action: console.log
+```
+
+### With Default Value
+
+展示带默认选中值的下拉菜单。
+
 ```yaml preview
-- brick: data-view.dropdown-menu
-  properties:
-    options:
-      - label: 测试1
-        value: test1
-      - label: 测试2
-        value: test2
-    placeholder: 请选择
-    allowClear: true
-  events:
-    value.change:
-      - action: console.log
+brick: data-view.dropdown-menu
+properties:
+  options:
+    - label: 选项A
+      value: a
+    - label: 选项B
+      value: b
+    - label: 选项C
+      value: c
+  value: b
+  placeholder: 请选择
+  allowClear: true
+events:
+  value.change:
+    - action: console.log
 ```

package/docs/dropdown-menu.react.md

@@ -0,0 +1,68 @@
+---
+tagName: data-view.dropdown-menu
+displayName: WrappedDataViewDropdownMenu
+description: 基础下拉菜单
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewDropdownMenu
+
+> 基础下拉菜单
+
+## 导入
+
+```tsx
+import { WrappedDataViewDropdownMenu } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                                 | 必填 | 默认值 | 说明         |
+| ----------- | ------------------------------------ | ---- | ------ | ------------ |
+| options     | `{ label: string; value: string }[]` | -    | -      | 候选项       |
+| value       | `string`                             | -    | -      | 当前选中值   |
+| placeholder | `string`                             | -    | -      | 占位符       |
+| allowClear  | `boolean`                            | -    | -      | 是否允许清除 |
+
+## Events
+
+| 事件          | detail                  | 说明         |
+| ------------- | ----------------------- | ------------ |
+| onValueChange | `string` — 当前选中的值 | 值改变时触发 |
+
+## Examples
+
+### Basic
+
+展示下拉菜单的基本用法，包含选项、占位符和清除按钮。
+
+```tsx
+<WrappedDataViewDropdownMenu
+  options={[
+    { label: "测试1", value: "test1" },
+    { label: "测试2", value: "test2" },
+  ]}
+  placeholder="请选择"
+  allowClear={true}
+  onValueChange={(e) => console.log(e.detail)}
+/>
+```
+
+### With Default Value
+
+展示带默认选中值的下拉菜单。
+
+```tsx
+<WrappedDataViewDropdownMenu
+  options={[
+    { label: "选项A", value: "a" },
+    { label: "选项B", value: "b" },
+    { label: "选项C", value: "c" },
+  ]}
+  value="b"
+  placeholder="请选择"
+  allowClear={true}
+  onValueChange={(e) => console.log(e.detail)}
+/>
+```

package/docs/gauge-chart.md

@@ -1,26 +1,75 @@
-大屏仪表盘构件
+---
+tagName: data-view.gauge-chart
+displayName: WrappedDataViewGaugeChart
+description: 大屏仪表盘
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.gauge-chart
+
+> 大屏仪表盘
+
+## Props
+
+| 属性        | 类型     | 必填 | 默认值 | 说明                                         |
+| ----------- | -------- | ---- | ------ | -------------------------------------------- |
+| value       | `number` | -    | -      | 值，范围在 [0-100]                           |
+| radius      | `number` | -    | -      | 仪表盘半径                                   |
+| strokeWidth | `number` | -    | `20`   | 仪表盘圆弧的宽度，也用于计算值终点圆点的大小 |
+| description | `string` | -    | -      | 描述文字，显示在数值下方                     |
+| fontSize    | `number` | -    | `35`   | 值的字体大小                                 |
 
 ## Examples
 
 ### Basic
 
+展示大屏仪表盘的基本用法，包含值、半径和圆弧宽度。
+
+```yaml preview
+brick: data-view.gauge-chart
+properties:
+  value: 75
+  radius: 150
+  strokeWidth: 20
+  description: 已部署 750 个 / 1000 个
+```
+
+### With Slot Content
+
+使用默认插槽在仪表盘下方插入自定义内容。
+
+```yaml preview
+brick: data-view.gauge-chart
+properties:
+  value: 100
+  radius: 180
+  strokeWidth: 20
+  description: 已部署 1490 个 / 3300个
+slots:
+  "":
+    type: bricks
+    bricks:
+      - brick: div
+        properties:
+          textContent: 已部署 1490 个 / 3300个
+          style:
+            font-size: 16px
+            font-weight: 500
+            color: "#fff"
+            margin: 0 0 300px 0
+```
+
+### Custom Font Size
+
+自定义值的字体大小。
+
 ```yaml preview
-- brick: data-view.gauge-chart
-  properties:
-    value: 100
-    radius: 180
-    strokeWidth: 20
-    description: 已部署 1490 个 / 3300个
-  slots:
-    "":
-      type: bricks
-      bricks:
-        - brick: div
-          properties:
-            textContent: 已部署 1490 个 / 3300个
-            style:
-              font-size: 16px
-              font-weight: 500
-              color: "#fff"
-              margin: 0 0 300px 0
+brick: data-view.gauge-chart
+properties:
+  value: 60
+  radius: 120
+  strokeWidth: 15
+  description: 系统负载
+  fontSize: 28
 ```

package/docs/gauge-chart.react.md

@@ -0,0 +1,80 @@
+---
+tagName: data-view.gauge-chart
+displayName: WrappedDataViewGaugeChart
+description: 大屏仪表盘
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewGaugeChart
+
+> 大屏仪表盘
+
+## 导入
+
+```tsx
+import { WrappedDataViewGaugeChart } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型     | 必填 | 默认值 | 说明                                         |
+| ----------- | -------- | ---- | ------ | -------------------------------------------- |
+| value       | `number` | -    | -      | 值，范围在 [0-100]                           |
+| radius      | `number` | -    | -      | 仪表盘半径                                   |
+| strokeWidth | `number` | -    | `20`   | 仪表盘圆弧的宽度，也用于计算值终点圆点的大小 |
+| description | `string` | -    | -      | 描述文字，显示在数值下方                     |
+| fontSize    | `number` | -    | `35`   | 值的字体大小                                 |
+
+## Examples
+
+### Basic
+
+展示大屏仪表盘的基本用法，包含值、半径和圆弧宽度。
+
+```tsx
+<WrappedDataViewGaugeChart
+  value={75}
+  radius={150}
+  strokeWidth={20}
+  description="已部署 750 个 / 1000 个"
+/>
+```
+
+### With Slot Content
+
+使用默认插槽在仪表盘下方插入自定义内容。
+
+```tsx
+<WrappedDataViewGaugeChart
+  value={100}
+  radius={180}
+  strokeWidth={20}
+  description="已部署 1490 个 / 3300个"
+>
+  <div
+    style={{
+      fontSize: "16px",
+      fontWeight: 500,
+      color: "#fff",
+      margin: "0 0 300px 0",
+    }}
+  >
+    已部署 1490 个 / 3300个
+  </div>
+</WrappedDataViewGaugeChart>
+```
+
+### Custom Font Size
+
+自定义值的字体大小。
+
+```tsx
+<WrappedDataViewGaugeChart
+  value={60}
+  radius={120}
+  strokeWidth={15}
+  description="系统负载"
+  fontSize={28}
+/>
+```

package/docs/gear-background.md

@@ -1,15 +1,48 @@
-齿轮背景
+---
+tagName: data-view.gear-background
+displayName: WrappedDataViewGearBackground
+description: 齿轮背景
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# data-view.gear-background
+
+> 齿轮背景
+
+## Props
+
+| 属性  | 类型                           | 必填 | 默认值      | 说明         |
+| ----- | ------------------------------ | ---- | ----------- | ------------ |
+| color | `React.CSSProperties["color"]` | -    | `"#3366FF"` | 背景条纹颜色 |
 
 ## Examples
 
 ### Basic
 
+展示齿轮背景的基本用法，通过设置容器尺寸控制显示区域。
+
+```yaml preview
+brick: data-view.gear-background
+properties:
+  style:
+    width: 300px
+    height: 300px
+    display: block
+    background: "#1c1e21"
+```
+
+### Custom Color
+
+自定义齿轮背景的条纹颜色。
+
 ```yaml preview
-- brick: data-view.gear-background
-  properties:
-    style:
-      width: 300px
-      height: 300px
-      display: block
-      background: "#1c1e21"
+brick: data-view.gear-background
+properties:
+  color: "#00eaff"
+  style:
+    width: 400px
+    height: 400px
+    display: block
+    background: "#0a0e1a"
 ```

package/docs/gear-background.react.md

@@ -0,0 +1,56 @@
+---
+tagName: data-view.gear-background
+displayName: WrappedDataViewGearBackground
+description: 齿轮背景
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewGearBackground
+
+> 齿轮背景
+
+## 导入
+
+```tsx
+import { WrappedDataViewGearBackground } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性  | 类型                           | 必填 | 默认值      | 说明         |
+| ----- | ------------------------------ | ---- | ----------- | ------------ |
+| color | `React.CSSProperties["color"]` | -    | `"#3366FF"` | 背景条纹颜色 |
+
+## Examples
+
+### Basic
+
+展示齿轮背景的基本用法，通过设置容器尺寸控制显示区域。
+
+```tsx
+<WrappedDataViewGearBackground
+  style={{
+    width: "300px",
+    height: "300px",
+    display: "block",
+    background: "#1c1e21",
+  }}
+/>
+```
+
+### Custom Color
+
+自定义齿轮背景的条纹颜色。
+
+```tsx
+<WrappedDataViewGearBackground
+  color="#00eaff"
+  style={{
+    width: "400px",
+    height: "400px",
+    display: "block",
+    background: "#0a0e1a",
+  }}
+/>
+```

package/docs/globe-with-gear-indicator.md

@@ -1,9 +1,43 @@
-地球加轮盘的数据展示构件。
+---
+tagName: data-view.globe-with-gear-indicator
+displayName: WrappedDataViewGlobeWithGearIndicator
+description: 地球加轮盘的数据展示构件。
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.globe-with-gear-indicator
+
+> 地球加轮盘的数据展示构件。
+
+## Props
+
+| 属性             | 类型               | 必填 | 默认值 | 说明                                     |
+| ---------------- | ------------------ | ---- | ------ | ---------------------------------------- |
+| dataSource       | `DataItem[]`       | -    | -      | 指标数据列表（显示在环上），最多显示12项 |
+| centerDataSource | `DataItem`         | -    | -      | 中心数据（显示在中心水晶球内）           |
+| cornerDataSource | `CornerDataItem[]` | -    | -      | 左上角指标数据列表                       |
+| maxScale         | `number`           | -    | `1`    | 最大缩放比例                             |
+
+其中 `DataItem` 的类型为：
+
+| 字段  | 类型               | 说明     |
+| ----- | ------------------ | -------- |
+| label | `string`           | 标签文字 |
+| value | `string \| number` | 数值     |
+
+`CornerDataItem` 在 `DataItem` 基础上扩展：
+
+| 字段  | 类型     | 说明           |
+| ----- | -------- | -------------- |
+| color | `string` | 可选，标签颜色 |
 
 ## Examples
 
 ### Basic
 
+展示地球加轮盘的完整用法，包含中心数据、环上指标和角落指标。
+
 ```yaml preview height="660px"
 brick: div
 properties:
@@ -40,3 +74,35 @@ children:
         args:
           - dark-v2
 ```
+
+### Max Scale
+
+通过 maxScale 限制最大缩放比例，避免在大屏幕上过度放大。
+
+```yaml preview height="660px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 2em)
+children:
+  - brick: data-view.globe-with-gear-indicator
+    properties:
+      maxScale: 0.8
+      centerDataSource:
+        label: 设备总数
+        value: 5680
+      dataSource:
+        - label: 正常设备
+          value: 4200
+        - label: 异常设备
+          value: 1480
+      cornerDataSource:
+        - label: 新增
+          value: 120
+          color: "#83F5E1"
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
+```

package/docs/globe-with-gear-indicator.react.md

@@ -0,0 +1,69 @@
+---
+tagName: data-view.globe-with-gear-indicator
+displayName: WrappedDataViewGlobeWithGearIndicator
+description: 地球加轮盘的数据展示构件。
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewGlobeWithGearIndicator
+
+> 地球加轮盘的数据展示构件。
+
+## 导入
+
+```tsx
+import { WrappedDataViewGlobeWithGearIndicator } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性             | 类型               | 必填 | 默认值 | 说明                                     |
+| ---------------- | ------------------ | ---- | ------ | ---------------------------------------- |
+| dataSource       | `DataItem[]`       | -    | -      | 指标数据列表（显示在环上），最多显示12项 |
+| centerDataSource | `DataItem`         | -    | -      | 中心数据（显示在中心水晶球内）           |
+| cornerDataSource | `CornerDataItem[]` | -    | -      | 左上角指标数据列表                       |
+| maxScale         | `number`           | -    | `1`    | 最大缩放比例                             |
+
+## Examples
+
+### Basic
+
+展示地球加轮盘的完整用法，包含中心数据、环上指标和角落指标。
+
+```tsx
+<div style={{ height: "calc(100vh - 2em)" }}>
+  <WrappedDataViewGlobeWithGearIndicator
+    centerDataSource={{ label: "资产总数", value: 30123 }}
+    dataSource={[
+      { label: "低值易耗品", value: 3889 },
+      { label: "摊销资产", value: 2087 },
+      { label: "固定资产", value: 12088 },
+      { label: "无形资产", value: 1082 },
+      { label: "在建工程", value: 10997 },
+    ]}
+    cornerDataSource={[
+      { label: "资产增长", value: 43, color: "red" },
+      { label: "资产减少", value: 21, color: "green" },
+    ]}
+  />
+</div>
+```
+
+### Max Scale
+
+通过 maxScale 限制最大缩放比例，避免在大屏幕上过度放大。
+
+```tsx
+<div style={{ height: "calc(100vh - 2em)" }}>
+  <WrappedDataViewGlobeWithGearIndicator
+    maxScale={0.8}
+    centerDataSource={{ label: "设备总数", value: 5680 }}
+    dataSource={[
+      { label: "正常设备", value: 4200 },
+      { label: "异常设备", value: 1480 },
+    ]}
+    cornerDataSource={[{ label: "新增", value: 120, color: "#83F5E1" }]}
+  />
+</div>
+```

package/docs/globe-with-halo-indicator.md

@@ -1,9 +1,43 @@
-地球加光环的数据展示构件。
+---
+tagName: data-view.globe-with-halo-indicator
+displayName: WrappedDataViewGlobeWithHaloIndicator
+description: 地球加光环的数据展示构件。
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.globe-with-halo-indicator
+
+> 地球加光环的数据展示构件。
+
+## Props
+
+| 属性             | 类型               | 必填 | 默认值 | 说明                                    |
+| ---------------- | ------------------ | ---- | ------ | --------------------------------------- |
+| dataSource       | `DataItem[]`       | -    | -      | 指标数据列表（显示在环上），最多显示8项 |
+| centerDataSource | `DataItem`         | -    | -      | 中心数据（显示在中心地球内）            |
+| cornerDataSource | `CornerDataItem[]` | -    | -      | 左上角指标数据列表                      |
+| maxScale         | `number`           | -    | `1`    | 最大缩放比例                            |
+
+其中 `DataItem` 的类型为：
+
+| 字段  | 类型               | 说明     |
+| ----- | ------------------ | -------- |
+| label | `string`           | 标签文字 |
+| value | `string \| number` | 数值     |
+
+`CornerDataItem` 在 `DataItem` 基础上扩展：
+
+| 字段  | 类型     | 说明           |
+| ----- | -------- | -------------- |
+| color | `string` | 可选，标签颜色 |
 
 ## Examples
 
 ### Basic
 
+展示地球加光环的完整用法，包含中心数据、环上指标和角落指标。
+
 ```yaml preview height="660px"
 brick: div
 properties:
@@ -40,3 +74,35 @@ children:
         args:
           - dark-v2
 ```
+
+### Max Scale
+
+通过 maxScale 限制最大缩放比例。
+
+```yaml preview height="660px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 2em)
+children:
+  - brick: data-view.globe-with-halo-indicator
+    properties:
+      maxScale: 0.8
+      centerDataSource:
+        label: 服务总数
+        value: 8800
+      dataSource:
+        - label: 健康服务
+          value: 7200
+        - label: 异常服务
+          value: 1600
+      cornerDataSource:
+        - label: 新增
+          value: 55
+          color: "#83F5E1"
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
+```