@next-bricks/data-view 1.12.11 → 1.12.12

package/docs/particle-animation.react.md

@@ -0,0 +1,64 @@
+---
+tagName: data-view.particle-animation
+displayName: WrappedDataViewParticleAnimation
+description: 大屏粒子加载动效
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewParticleAnimation
+
+> 大屏粒子加载动效
+
+## 导入
+
+```tsx
+import { WrappedDataViewParticleAnimation } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性           | 类型                  | 必填 | 默认值 | 说明                                                     |
+| -------------- | --------------------- | ---- | ------ | -------------------------------------------------------- |
+| colors         | `ColorType`           | 是   | -      | 颜色配置，由于光标有三段颜色，中间色段为特效中光点的颜色 |
+| containerStyle | `React.CSSProperties` | 否   | -      | 容器样式                                                 |
+
+## Slots
+
+| 名称      | 说明                       |
+| --------- | -------------------------- |
+| (default) | 粒子动效容器内的自定义内容 |
+
+## Examples
+
+### Basic
+
+展示大屏粒子上升动效的基本用法，包含颜色和容器样式配置。
+
+```tsx
+<WrappedDataViewParticleAnimation
+  containerStyle={{ width: "150px", height: "150px" }}
+  colors={{
+    startColor: "#44E6F300",
+    middleColor: "#48D9EE",
+    endColor: "#E4FFFF",
+  }}
+  style={{ display: "block", backgroundColor: "#1c1e21" }}
+/>
+```
+
+### Custom Colors
+
+展示自定义不同颜色主题的粒子动效。
+
+```tsx
+<WrappedDataViewParticleAnimation
+  containerStyle={{ width: "200px", height: "200px" }}
+  colors={{
+    startColor: "#FF6B6B00",
+    middleColor: "#FF6B6B",
+    endColor: "#FFE0E0",
+  }}
+  style={{ display: "block", backgroundColor: "#1c1e21" }}
+/>
+```

package/docs/progress-bar-list.md

@@ -1,9 +1,27 @@
-构件 `data-view.progress-bar-list`
+---
+tagName: data-view.progress-bar-list
+displayName: WrappedDataViewProgressBarList
+description: 大屏进度条列表
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.progress-bar-list
+
+> 大屏进度条列表
+
+## Props
+
+| 属性       | 类型     | 必填 | 默认值 | 说明                                               |
+| ---------- | -------- | ---- | ------ | -------------------------------------------------- |
+| dataSource | `Data[]` | 否   | `[]`   | 数据列表，每项包含标题、数值及可选的进度条颜色配置 |
 
 ## Examples
 
 ### Basic
 
+展示大屏进度条列表的基本用法，数据项支持自定义颜色。
+
 ```yaml preview
 brick: data-view.progress-bar-list
 properties:

package/docs/progress-bar-list.react.md

@@ -0,0 +1,47 @@
+---
+tagName: data-view.progress-bar-list
+displayName: WrappedDataViewProgressBarList
+description: 大屏进度条列表
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewProgressBarList
+
+> 大屏进度条列表
+
+## 导入
+
+```tsx
+import { WrappedDataViewProgressBarList } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型     | 必填 | 默认值 | 说明                                               |
+| ---------- | -------- | ---- | ------ | -------------------------------------------------- |
+| dataSource | `Data[]` | 否   | `[]`   | 数据列表，每项包含标题、数值及可选的进度条颜色配置 |
+
+## Examples
+
+### Basic
+
+展示大屏进度条列表的基本用法，数据项支持自定义颜色。
+
+```tsx
+<WrappedDataViewProgressBarList
+  dataSource={[
+    { title: "资源1", count: 123 },
+    { title: "资源2", count: 39 },
+    { title: "资源3", count: 23 },
+    { title: "资源4", count: 13 },
+    {
+      title: "资源5",
+      count: 49,
+      barBackground:
+        "linear-gradient(to right, rgba(255, 222, 104, 0.2), rgb(255, 222, 104))",
+      loopBackground: "rgb(255, 222, 104)",
+    },
+  ]}
+/>
+```

package/docs/radar-chart.md

@@ -1,38 +1,104 @@
-雷达图构件
+---
+tagName: data-view.radar-chart
+displayName: WrappedDataViewRadarChart
+description: 雷达图
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.radar-chart
+
+> 雷达图
+
+## Props
+
+| 属性       | 类型               | 必填 | 默认值 | 说明                                           |
+| ---------- | ------------------ | ---- | ------ | ---------------------------------------------- |
+| dataSource | `Data[]`           | 是   | -      | 数据                                           |
+| width      | `number`           | 是   | -      | 容器宽度                                       |
+| height     | `number`           | 是   | -      | 容器高度                                       |
+| radius     | `number`           | 是   | -      | 多边形半径                                     |
+| scale      | `number`           | 是   | `0.25` | 取值[0-1]，默认半径的缩放比例,radius不传时生效 |
+| value      | `number \| string` | 是   | -      | 中心评分                                       |
+| dataFill   | `DataFill`         | 是   | -      | 数据多边形填充样式                             |
+| dataCircle | `DataCircle`       | 是   | -      | 数据点圆圈的样式配置                           |
+| dataLine   | `DataLine`         | 是   | -      | 数据线条的样式配置                             |
 
 ## Examples
 
 ### Basic
 
+展示基础雷达图，配置数据源和中心评分。
+
+```yaml preview
+brick: data-view.radar-chart
+properties:
+  dataSource:
+    - name: JavaScript
+      maxValue: 100
+      value: 60
+      percentValue: 45.8%
+    - name: Java
+      maxValue: 100
+      value: 30
+      percentValue: 45.8%
+    - name: CSS
+      maxValue: 100
+      value: 70
+      percentValue: 45.8%
+    - name: Python
+      maxValue: 100
+      value: 30
+      percentValue: 45.8%
+    - name: Three.js
+      maxValue: 100
+      value: 50
+      percentValue: 45.8%
+  value: 85.9
+  dataCircle:
+    fillStyle: red
+    r: 3
+  style:
+    display: block
+    background-color: "#1c1e21"
+```
+
+### Custom Styles
+
+展示自定义数据多边形填充色、线条和圆圈样式的雷达图。
+
 ```yaml preview
-- brick: data-view.radar-chart
-  properties:
-    dataSource:
-      - name: JavaScript
-        maxValue: 100
-        value: 60
-        percentValue: 45.8%
-      - name: Java
-        maxValue: 100
-        value: 30
-        percentValue: 45.8%
-      - name: CSS
-        maxValue: 100
-        value: 70
-        percentValue: 45.8%
-      - name: Python
-        maxValue: 100
-        value: 30
-        percentValue: 45.8%
-      - name: Three.js
-        maxValue: 100
-        value: 50
-        percentValue: 45.8%
-    value: 85.9
-    dataCircle:
-      fillStyle: red
-      r: 3
-    style:
-      display: block
-      background-color: "#1c1e21"
+brick: data-view.radar-chart
+properties:
+  dataSource:
+    - name: 性能
+      maxValue: 100
+      value: 80
+    - name: 可用性
+      maxValue: 100
+      value: 65
+    - name: 安全性
+      maxValue: 100
+      value: 90
+    - name: 扩展性
+      maxValue: 100
+      value: 55
+    - name: 维护性
+      maxValue: 100
+      value: 70
+  value: 72
+  width: 400
+  height: 400
+  dataFill:
+    fillStyle: "rgba(0, 200, 255, 0.3)"
+  dataLine:
+    strokeStyle: "#00C8FF"
+    lineWidth: 2
+  dataCircle:
+    fillStyle: "#00C8FF"
+    strokeStyle: "#ffffff"
+    r: 4
+  style:
+    display: block
+    background-color: "#1c1e21"
 ```

package/docs/radar-chart.react.md

@@ -0,0 +1,75 @@
+---
+tagName: data-view.radar-chart
+displayName: WrappedDataViewRadarChart
+description: 雷达图
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewRadarChart
+
+> 雷达图
+
+## 导入
+
+```tsx
+import { WrappedDataViewRadarChart } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型               | 必填 | 默认值 | 说明                                           |
+| ---------- | ------------------ | ---- | ------ | ---------------------------------------------- |
+| dataSource | `Data[]`           | 是   | -      | 数据                                           |
+| width      | `number`           | 是   | -      | 容器宽度                                       |
+| height     | `number`           | 是   | -      | 容器高度                                       |
+| radius     | `number`           | 是   | -      | 多边形半径                                     |
+| scale      | `number`           | 是   | `0.25` | 取值[0-1]，默认半径的缩放比例,radius不传时生效 |
+| value      | `number \| string` | 是   | -      | 中心评分                                       |
+| dataFill   | `DataFill`         | 是   | -      | 数据多边形填充样式                             |
+| dataCircle | `DataCircle`       | 是   | -      | 数据点圆圈的样式配置                           |
+| dataLine   | `DataLine`         | 是   | -      | 数据线条的样式配置                             |
+
+## Examples
+
+### Basic
+
+展示基础雷达图，配置数据源和中心评分。
+
+```tsx
+<WrappedDataViewRadarChart
+  dataSource={[
+    { name: "JavaScript", maxValue: 100, value: 60, percentValue: "45.8%" },
+    { name: "Java", maxValue: 100, value: 30, percentValue: "45.8%" },
+    { name: "CSS", maxValue: 100, value: 70, percentValue: "45.8%" },
+    { name: "Python", maxValue: 100, value: 30, percentValue: "45.8%" },
+    { name: "Three.js", maxValue: 100, value: 50, percentValue: "45.8%" },
+  ]}
+  value={85.9}
+  dataCircle={{ fillStyle: "red", r: 3 }}
+  style={{ display: "block", backgroundColor: "#1c1e21" }}
+/>
+```
+
+### Custom Styles
+
+展示自定义数据多边形填充色、线条和圆圈样式的雷达图。
+
+```tsx
+<WrappedDataViewRadarChart
+  dataSource={[
+    { name: "性能", maxValue: 100, value: 80 },
+    { name: "可用性", maxValue: 100, value: 65 },
+    { name: "安全性", maxValue: 100, value: 90 },
+    { name: "扩展性", maxValue: 100, value: 55 },
+    { name: "维护性", maxValue: 100, value: 70 },
+  ]}
+  value={72}
+  width={400}
+  height={400}
+  dataFill={{ fillStyle: "rgba(0, 200, 255, 0.3)" }}
+  dataLine={{ strokeStyle: "#00C8FF", lineWidth: 2 }}
+  dataCircle={{ fillStyle: "#00C8FF", strokeStyle: "#ffffff", r: 4 }}
+  style={{ display: "block", backgroundColor: "#1c1e21" }}
+/>
+```

package/docs/simple-card-item.md

@@ -1,9 +1,85 @@
-构件 `data-view.simple-card-item`
+---
+tagName: data-view.simple-card-item
+displayName: WrappedDataViewSimpleCardItem
+description: 基础卡片项
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.simple-card-item
+
+> 基础卡片项
+
+## Props
+
+| 属性            | 类型                                | 必填 | 默认值     | 说明     |
+| --------------- | ----------------------------------- | ---- | ---------- | -------- |
+| cardTitle       | `string`                            | 是   | -          | 标题     |
+| description     | `string`                            | 是   | -          | 描述     |
+| status          | `"normal" \| "warning"`             | 是   | `"normal"` | 状态     |
+| titleStyle      | `CSSProperties`                     | 是   | -          | 标题样式 |
+| desStyle        | `CSSProperties`                     | 是   | -          | 描述样式 |
+| color           | `CSSProperties["color"]`            | 是   | -          | 字体颜色 |
+| background      | `React.CSSProperties["background"]` | 是   | -          | 背景颜色 |
+| descriptionList | `descriptionListItem[]`             | 是   | -          | 描述列表 |
 
 ## Examples
 
 ### Basic
 
-```html preview
-<data-view.simple-card-item>Hello world</data-view.simple-card-item>
+展示基础卡片项，包含标题和描述文本。
+
+```yaml preview
+brick: data-view.simple-card-item
+properties:
+  cardTitle: 服务器状态
+  description: 运行正常
+```
+
+### Warning Status
+
+展示告警状态的卡片项，通过 status 属性切换样式。
+
+```yaml preview
+brick: data-view.simple-card-item
+properties:
+  cardTitle: 数据库连接
+  description: 连接异常
+  status: warning
+```
+
+### Custom Style
+
+展示自定义背景色和字体颜色的卡片项。
+
+```yaml preview
+brick: data-view.simple-card-item
+properties:
+  cardTitle: 自定义样式
+  description: 自定义描述文字
+  color: "#00e0db"
+  background: "rgba(0, 100, 200, 0.3)"
+  titleStyle:
+    fontSize: 18px
+    fontWeight: bold
+  desStyle:
+    fontSize: 14px
+```
+
+### Description List
+
+展示包含描述列表的卡片项，用于显示多组键值对信息。
+
+```yaml preview
+brick: data-view.simple-card-item
+properties:
+  cardTitle: 主机详情
+  description: 运行正常
+  descriptionList:
+    - key: IP地址
+      value: 192.168.1.100
+    - key: CPU
+      value: 45%
+    - key: 内存
+      value: 62%
 ```

package/docs/simple-card-item.react.md

@@ -0,0 +1,83 @@
+---
+tagName: data-view.simple-card-item
+displayName: WrappedDataViewSimpleCardItem
+description: 基础卡片项
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewSimpleCardItem
+
+> 基础卡片项
+
+## 导入
+
+```tsx
+import { WrappedDataViewSimpleCardItem } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性            | 类型                                | 必填 | 默认值     | 说明     |
+| --------------- | ----------------------------------- | ---- | ---------- | -------- |
+| cardTitle       | `string`                            | 是   | -          | 标题     |
+| description     | `string`                            | 是   | -          | 描述     |
+| status          | `"normal" \| "warning"`             | 是   | `"normal"` | 状态     |
+| titleStyle      | `CSSProperties`                     | 是   | -          | 标题样式 |
+| desStyle        | `CSSProperties`                     | 是   | -          | 描述样式 |
+| color           | `CSSProperties["color"]`            | 是   | -          | 字体颜色 |
+| background      | `React.CSSProperties["background"]` | 是   | -          | 背景颜色 |
+| descriptionList | `descriptionListItem[]`             | 是   | -          | 描述列表 |
+
+## Examples
+
+### Basic
+
+展示基础卡片项，包含标题和描述文本。
+
+```tsx
+<WrappedDataViewSimpleCardItem cardTitle="服务器状态" description="运行正常" />
+```
+
+### Warning Status
+
+展示告警状态的卡片项，通过 status 属性切换样式。
+
+```tsx
+<WrappedDataViewSimpleCardItem
+  cardTitle="数据库连接"
+  description="连接异常"
+  status="warning"
+/>
+```
+
+### Custom Style
+
+展示自定义背景色和字体颜色的卡片项。
+
+```tsx
+<WrappedDataViewSimpleCardItem
+  cardTitle="自定义样式"
+  description="自定义描述文字"
+  color="#00e0db"
+  background="rgba(0, 100, 200, 0.3)"
+  titleStyle={{ fontSize: "18px", fontWeight: "bold" }}
+  desStyle={{ fontSize: "14px" }}
+/>
+```
+
+### Description List
+
+展示包含描述列表的卡片项，用于显示多组键值对信息。
+
+```tsx
+<WrappedDataViewSimpleCardItem
+  cardTitle="主机详情"
+  description="运行正常"
+  descriptionList={[
+    { key: "IP地址", value: "192.168.1.100" },
+    { key: "CPU", value: "45%" },
+    { key: "内存", value: "62%" },
+  ]}
+/>
+```

package/docs/tabs-drawer.md

@@ -1,9 +1,48 @@
-data-view.tabs-drawer
+---
+tagName: data-view.tabs-drawer
+displayName: WrappedDataViewTabsDrawer
+description: 大屏仪标签页抽屉
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# data-view.tabs-drawer
+
+> 大屏仪标签页抽屉
+
+## Props
+
+| 属性        | 类型                  | 必填 | 默认值 | 说明                                               |
+| ----------- | --------------------- | ---- | ------ | -------------------------------------------------- |
+| tabList     | `TabItem[]`           | 是   | -      | 抽屉左侧菜单列表                                   |
+| activeKey   | `string`              | 是   | -      | 抽屉左侧菜单高亮显示                               |
+| width       | `number \| string`    | 是   | -      | 抽屉宽度内容区的宽度，优先级高于bodyStyle内的width |
+| drawerStyle | `React.CSSProperties` | 是   | -      | 设计 Drawer 容器样式                               |
+| bodyStyle   | `React.CSSProperties` | 是   | -      | 可用于设置 Drawer 内容部分的样式                   |
+| zIndex      | `number`              | 否   | -      | 抽屉层级                                           |
+| visible     | `boolean`             | 否   | -      | 遮罩层是否显示                                     |
+
+## Events
+
+| 事件       | detail                             | 说明                                                          |
+| ---------- | ---------------------------------- | ------------------------------------------------------------- |
+| open       | `void`                             | 抽屉打开事件                                                  |
+| close      | `void`                             | 抽屉关闭事件                                                  |
+| tab.change | `string` — 切换后激活的 tab 的 key | 切换 `tab` 栏会触发的事件，`detail` 为目标 `tab` 对应的 `key` |
+
+## Methods
+
+| 方法  | 参数         | 返回值 | 说明     |
+| ----- | ------------ | ------ | -------- |
+| open  | `() => void` | `void` | 打开抽屉 |
+| close | `() => void` | `void` | 关闭抽屉 |
 
 ## Examples
 
 ### Basic
 
+展示带有三个标签页的基础抽屉，默认展开并高亮第一个标签。
+
 ```yaml preview
 - brick: data-view.tabs-drawer
   properties:
@@ -27,7 +66,6 @@ data-view.tabs-drawer
           lib: easyops
           category: app
           icon: micro-app-configuration
-
       - tooltip: 图表
         key: chart
         icon:
@@ -69,3 +107,44 @@ data-view.tabs-drawer
     tab.change:
       - action: console.log
 ```
+
+### Method Control
+
+通过调用 open/close 方法程序化控制抽屉的展开与收起。
+
+```yaml preview
+- brick: eo-button
+  properties:
+    textContent: 打开抽屉
+  events:
+    click:
+      - target: "#controlled-drawer"
+        method: open
+- brick: data-view.tabs-drawer
+  properties:
+    id: controlled-drawer
+    style:
+      height: 500px
+      display: block
+    tabList:
+      - tooltip: 信息
+        key: info
+        icon:
+          lib: antd
+          icon: info-circle
+    zIndex: 100
+  slots:
+    info:
+      type: bricks
+      bricks:
+        - brick: div
+          properties:
+            textContent: 抽屉内容区域
+            style:
+              padding: 16px
+  events:
+    open:
+      - action: console.log
+    close:
+      - action: console.log
+```