@next-bricks/data-view 1.12.11 → 1.12.12

package/docs/cabinet-node.md

@@ -1,9 +1,30 @@
-data-view.cabinet-node
+---
+tagName: data-view.cabinet-node
+displayName: WrappedDataViewCabinetNode
+description: cabinet子构件----节点
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# data-view.cabinet-node
+
+> cabinet子构件----节点
+
+## Props
+
+| 属性      | 类型                                                                    | 必填 | 默认值 | 说明         |
+| --------- | ----------------------------------------------------------------------- | ---- | ------ | ------------ |
+| type      | `"container-group" \| "physical-machine" \| "virtual-machine" \| "pod"` | 是   | -      | 类型         |
+| nodeTitle | `string`                                                                | 是   | -      | 标题         |
+| status    | `"active" \| "faded"`                                                   | 否   | -      | 当前状态     |
+| isAlert   | `boolean`                                                               | 否   | -      | 是否是告警态 |
 
 ## Examples
 
 ### Basic
 
+展示容器组类型的节点。
+
 ```yaml preview
 - brick: data-view.cabinet-node
   properties:
@@ -16,6 +37,8 @@ data-view.cabinet-node
 
 ### IsAlert
 
+展示处于告警态的节点（图标变为告警样式）。
+
 ```yaml preview
 - brick: data-view.cabinet-node
   properties:
@@ -26,3 +49,18 @@ data-view.cabinet-node
       width: 100px
       background: "#1c1e21"
 ```
+
+### Status
+
+展示不同状态（高亮或淡化）下的节点。
+
+```yaml preview
+- brick: data-view.cabinet-node
+  properties:
+    type: virtual-machine
+    nodeTitle: 虚拟机
+    status: faded
+    style:
+      width: 100px
+      background: "#1c1e21"
+```

package/docs/cabinet-node.react.md

@@ -0,0 +1,66 @@
+---
+tagName: data-view.cabinet-node
+displayName: WrappedDataViewCabinetNode
+description: cabinet子构件----节点
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewCabinetNode
+
+> cabinet子构件----节点
+
+## 导入
+
+```tsx
+import { WrappedDataViewCabinetNode } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性      | 类型                                                                    | 必填 | 默认值 | 说明         |
+| --------- | ----------------------------------------------------------------------- | ---- | ------ | ------------ |
+| type      | `"container-group" \| "physical-machine" \| "virtual-machine" \| "pod"` | 是   | -      | 类型         |
+| nodeTitle | `string`                                                                | 是   | -      | 标题         |
+| status    | `"active" \| "faded"`                                                   | 否   | -      | 当前状态     |
+| isAlert   | `boolean`                                                               | 否   | -      | 是否是告警态 |
+
+## Examples
+
+### Basic
+
+展示容器组类型的节点。
+
+```tsx
+<WrappedDataViewCabinetNode
+  type="container-group"
+  nodeTitle="容器组"
+  style={{ width: "100px", background: "#1c1e21" }}
+/>
+```
+
+### IsAlert
+
+展示处于告警态的节点（图标变为告警样式）。
+
+```tsx
+<WrappedDataViewCabinetNode
+  type="container-group"
+  nodeTitle="容器组"
+  isAlert={true}
+  style={{ width: "100px", background: "#1c1e21" }}
+/>
+```
+
+### Status
+
+展示不同状态（高亮或淡化）下的节点。
+
+```tsx
+<WrappedDataViewCabinetNode
+  type="virtual-machine"
+  nodeTitle="虚拟机"
+  status="faded"
+  style={{ width: "100px", background: "#1c1e21" }}
+/>
+```

package/docs/cabinet-thumbnail.md

@@ -1,9 +1,29 @@
-data-view.cabinet-thumbnail 部署架构拓扑缩略图
+---
+tagName: data-view.cabinet-thumbnail
+displayName: WrappedDataViewCabinetThumbnail
+description: 应用墙缩略图
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# data-view.cabinet-thumbnail
+
+> 应用墙缩略图
+
+## Props
+
+| 属性     | 类型         | 必填 | 默认值 | 说明         |
+| -------- | ------------ | ---- | ------ | ------------ |
+| clusters | `Clusters[]` | 是   | `[]`   | 集群数据     |
+| columns  | `number`     | 是   | `4`    | 单个容器列数 |
+| appName  | `string`     | 是   | -      | 应用名称     |
 
 ## Examples
 
 ### Basic
 
+展示应用墙缩略图，包含多个不同类型的集群容器。
+
 ```yaml preview
 - brick: data-view.cabinet-thumbnail
   properties:
@@ -45,3 +65,26 @@ data-view.cabinet-thumbnail 部署架构拓扑缩略图
             key: bbb
             type: pod
 ```
+
+### Custom columns
+
+通过 columns 属性控制单个容器的节点列数。
+
+```yaml preview
+- brick: data-view.cabinet-thumbnail
+  properties:
+    appName: my-app
+    columns: 2
+    clusters:
+      - title: 主机集群
+        type: host
+        data:
+          - nodeTitle: 10.0.0.1
+            type: physical-machine
+          - nodeTitle: 10.0.0.2
+            type: virtual-machine
+          - nodeTitle: 10.0.0.3
+            type: physical-machine
+          - nodeTitle: 10.0.0.4
+            type: virtual-machine
+```

package/docs/cabinet-thumbnail.react.md

@@ -0,0 +1,88 @@
+---
+tagName: data-view.cabinet-thumbnail
+displayName: WrappedDataViewCabinetThumbnail
+description: 应用墙缩略图
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewCabinetThumbnail
+
+> 应用墙缩略图
+
+## 导入
+
+```tsx
+import { WrappedDataViewCabinetThumbnail } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性     | 类型         | 必填 | 默认值 | 说明         |
+| -------- | ------------ | ---- | ------ | ------------ |
+| clusters | `Clusters[]` | 是   | `[]`   | 集群数据     |
+| columns  | `number`     | 是   | `4`    | 单个容器列数 |
+| appName  | `string`     | 是   | -      | 应用名称     |
+
+## Examples
+
+### Basic
+
+展示应用墙缩略图，包含多个不同类型的集群容器。
+
+```tsx
+<WrappedDataViewCabinetThumbnail
+  appName="inventory-api"
+  clusters={[
+    {
+      title: "inventory-api##aaaaa",
+      type: "host",
+      data: [
+        { nodeTitle: "244.244.244.244", type: "physical-machine" },
+        { nodeTitle: "244.244.244.245", type: "virtual-machine" },
+        { nodeTitle: "244.244.245.245", type: "physical-machine" },
+        { nodeTitle: "244.244.245.244", type: "virtual-machine" },
+      ],
+    },
+    {
+      title: "K8S集群xxx",
+      type: "k8s",
+      data: [
+        { nodeTitle: "a容器组", type: "container-group" },
+        { nodeTitle: "b容器组", type: "container-group" },
+      ],
+    },
+    {
+      title: "K8S集群xx",
+      type: "k8s-blue",
+      data: [
+        { nodeTitle: "a1容器组", type: "pod" },
+        { nodeTitle: "b1容器组", type: "pod" },
+      ],
+    },
+  ]}
+/>
+```
+
+### Custom columns
+
+通过 columns 属性控制单个容器的节点列数。
+
+```tsx
+<WrappedDataViewCabinetThumbnail
+  appName="my-app"
+  columns={2}
+  clusters={[
+    {
+      title: "主机集群",
+      type: "host",
+      data: [
+        { nodeTitle: "10.0.0.1", type: "physical-machine" },
+        { nodeTitle: "10.0.0.2", type: "virtual-machine" },
+        { nodeTitle: "10.0.0.3", type: "physical-machine" },
+        { nodeTitle: "10.0.0.4", type: "virtual-machine" },
+      ],
+    },
+  ]}
+/>
+```

package/docs/china-map-chart.md

@@ -1,11 +1,45 @@
-中国地图图表构件，可以显示省级指标数据
+---
+tagName: data-view.china-map-chart
+displayName: WrappedDataViewChinaMapChart
+description: 中国地图图表构件，可以显示省级指标数据
+category: ""
+source: "@next-bricks/data-view"
+deprecated: 已废弃，请使用 `data-view.china-map`
+---
 
-已废弃，请使用 [`data-view.china-map`](china-map.mdx)。
+# data-view.china-map-chart
+
+> 中国地图图表构件，可以显示省级指标数据
+
+**已废弃，请使用 [`data-view.china-map`](china-map.md)。**
+
+## Props
+
+| 属性               | 类型                         | 必填 | 默认值 | 说明                                                                   |
+| ------------------ | ---------------------------- | ---- | ------ | ---------------------------------------------------------------------- |
+| province           | `string \| undefined`        | 否   | -      | 省份名称，例如"广东"。如果设置，则只显示该省份的地图，否则显示全国地图 |
+| dataSource         | `DataSource[] \| undefined`  | 否   | -      | 数据源                                                                 |
+| detailContentStyle | `CSSProperties \| undefined` | 否   | -      | 描述内容样式                                                           |
+| fillContainer      | `boolean \| undefined`       | 否   | -      | 是否铺满容器（注意：该属性不同时兼容 detail 插槽）                     |
+
+## Events
+
+| 事件               | detail                                                                                           | 说明                       |
+| ------------------ | ------------------------------------------------------------------------------------------------ | -------------------------- |
+| detail.open.change | `{ open: boolean; data: Record<string, any>; }` — { open: 当前是否可见, data: 当前展示的数据项 } | 当提示可见性开始变化时触发 |
+
+## Slots
+
+| 名称   | 说明                       |
+| ------ | -------------------------- |
+| detail | 点击标签时弹出的详情内容区 |
 
 ## Examples
 
 ### Basic
 
+展示全国地图并在各省显示文字标签。
+
 ```yaml preview height="600px"
 brick: data-view.china-map-chart
 properties:
@@ -28,6 +62,8 @@ lifeCycle:
 
 ### Fill container
 
+铺满容器展示地图。
+
 ```yaml preview height="600px"
 brick: div
 properties:
@@ -57,6 +93,8 @@ children:
 
 ### Province map
 
+展示指定省份的地图。
+
 ```yaml preview height="600px"
 brick: div
 properties:
@@ -85,6 +123,8 @@ children:
 
 ### With detail
 
+点击标签时展示详情内容，并通过事件监听可见性变化。
+
 ```yaml preview height="600px"
 brick: data-view.china-map-chart
 properties:

package/docs/china-map-chart.react.md

@@ -0,0 +1,117 @@
+---
+tagName: data-view.china-map-chart
+displayName: WrappedDataViewChinaMapChart
+description: 中国地图图表构件，可以显示省级指标数据
+category: ""
+source: "@next-bricks/data-view"
+deprecated: 已废弃，请使用 `data-view.china-map`
+---
+
+# WrappedDataViewChinaMapChart
+
+> 中国地图图表构件，可以显示省级指标数据
+
+**已废弃，请使用 `WrappedDataViewChinaMap`。**
+
+## 导入
+
+```tsx
+import { WrappedDataViewChinaMapChart } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性               | 类型                         | 必填 | 默认值 | 说明                                                                   |
+| ------------------ | ---------------------------- | ---- | ------ | ---------------------------------------------------------------------- |
+| province           | `string \| undefined`        | 否   | -      | 省份名称，例如"广东"。如果设置，则只显示该省份的地图，否则显示全国地图 |
+| dataSource         | `DataSource[] \| undefined`  | 否   | -      | 数据源                                                                 |
+| detailContentStyle | `CSSProperties \| undefined` | 否   | -      | 描述内容样式                                                           |
+| fillContainer      | `boolean \| undefined`       | 否   | -      | 是否铺满容器（注意：该属性不同时兼容 detail 插槽）                     |
+
+## Events
+
+| 事件               | detail                                                                                           | 说明                       |
+| ------------------ | ------------------------------------------------------------------------------------------------ | -------------------------- |
+| onDetailOpenChange | `{ open: boolean; data: Record<string, any>; }` — { open: 当前是否可见, data: 当前展示的数据项 } | 当提示可见性开始变化时触发 |
+
+## Slots
+
+| 名称   | 说明                       |
+| ------ | -------------------------- |
+| detail | 点击标签时弹出的详情内容区 |
+
+## Examples
+
+### Basic
+
+展示全国地图并在各省显示文字标签。
+
+```tsx
+<WrappedDataViewChinaMapChart
+  dataSource={[
+    { text: "西藏 12311", city: "西藏" },
+    { text: "四川 89781169", city: "四川" },
+    { text: "台湾 234181", city: "台湾" },
+    { text: "江西 21348", city: "江西" },
+  ]}
+/>
+```
+
+### Fill container
+
+铺满容器展示地图。
+
+```tsx
+<div style={{ height: "calc(100vh - 4em)", position: "relative" }}>
+  <WrappedDataViewChinaMapChart
+    fillContainer={true}
+    dataSource={[
+      { text: "西藏 12311", city: "西藏" },
+      { text: "四川 89781169", city: "四川" },
+      { text: "台湾 234181", city: "台湾" },
+      { text: "江西 21348", city: "江西" },
+    ]}
+  />
+</div>
+```
+
+### Province map
+
+展示指定省份的地图。
+
+```tsx
+<div style={{ height: "calc(100vh - 4em)", position: "relative" }}>
+  <WrappedDataViewChinaMapChart
+    fillContainer={true}
+    province="广东"
+    dataSource={[
+      { text: "广州 12311", city: "广州" },
+      { text: "深圳 89781169", city: "深圳" },
+      { text: "湛江 234181", city: "湛江" },
+    ]}
+  />
+</div>
+```
+
+### With detail
+
+点击标签时展示详情内容，并通过事件监听可见性变化。
+
+```tsx
+<WrappedDataViewChinaMapChart
+  detailContentStyle={{ background: "yellow" }}
+  dataSource={[
+    { text: "西藏 12311", detailDisplayLocation: "textBottom", city: "西藏" },
+    {
+      text: "四川 89781169",
+      detailDisplayLocation: "textBottom",
+      city: "四川",
+    },
+    { text: "台湾 234181", detailDisplayLocation: "pageCenter", city: "台湾" },
+    { text: "江西 21348", detailDisplayLocation: "pageCenter", city: "江西" },
+  ]}
+  onDetailOpenChange={(e) => console.log(e.detail)}
+>
+  <div slot="detail">内容区</div>
+</WrappedDataViewChinaMapChart>
+```

package/docs/china-map.md

@@ -1,9 +1,30 @@
-构件 `data-view.china-map`
+---
+tagName: data-view.china-map
+displayName: WrappedDataViewChinaMap
+description: 中国地图展示构件，支持全国地图和省级地图，可在地图上标注文字标签
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# data-view.china-map
+
+> 中国地图展示构件，支持全国地图和省级地图，可在地图上标注文字标签
+
+## Props
+
+| 属性       | 类型                      | 必填 | 默认值 | 说明                                                                   |
+| ---------- | ------------------------- | ---- | ------ | ---------------------------------------------------------------------- |
+| province   | `string \| undefined`     | 否   | -      | 省份名称，例如"广东"。如果设置，则只显示该省份的地图，否则显示全国地图 |
+| dataSource | `DataItem[] \| undefined` | 否   | -      | 数据源                                                                 |
+| maxScale   | `number \| undefined`     | 否   | `1`    | 最大缩放比例                                                           |
+| textScale  | `number \| undefined`     | 否   | `1`    | 标签文本缩放比例                                                       |
 
 ## Examples
 
 ### Basic
 
+展示带省份标签的全国地图。
+
 ```yaml preview height="600px"
 brick: div
 properties:
@@ -32,6 +53,8 @@ children:
 
 ### Province map
 
+展示指定省份的地图并标注城市标签。
+
 ```yaml preview height="600px"
 brick: div
 properties:
@@ -59,6 +82,8 @@ children:
 
 ### Specific coordinates
 
+通过手动指定经纬度来精确定位标签位置。
+
 ```yaml preview height="600px"
 brick: div
 properties:

package/docs/china-map.react.md

@@ -0,0 +1,78 @@
+---
+tagName: data-view.china-map
+displayName: WrappedDataViewChinaMap
+description: 中国地图展示构件，支持全国地图和省级地图，可在地图上标注文字标签
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewChinaMap
+
+> 中国地图展示构件，支持全国地图和省级地图，可在地图上标注文字标签
+
+## 导入
+
+```tsx
+import { WrappedDataViewChinaMap } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型                      | 必填 | 默认值 | 说明                                                                   |
+| ---------- | ------------------------- | ---- | ------ | ---------------------------------------------------------------------- |
+| province   | `string \| undefined`     | 否   | -      | 省份名称，例如"广东"。如果设置，则只显示该省份的地图，否则显示全国地图 |
+| dataSource | `DataItem[] \| undefined` | 否   | -      | 数据源                                                                 |
+| maxScale   | `number \| undefined`     | 否   | `1`    | 最大缩放比例                                                           |
+| textScale  | `number \| undefined`     | 否   | `1`    | 标签文本缩放比例                                                       |
+
+## Examples
+
+### Basic
+
+展示带省份标签的全国地图。
+
+```tsx
+<div style={{ height: "calc(100vh - 4em)", position: "relative" }}>
+  <WrappedDataViewChinaMap
+    dataSource={[
+      { text: "西藏 12311", province: "西藏" },
+      { text: "四川 89781169", province: "四川" },
+      { text: "台湾 234181", province: "台湾" },
+      { text: "江西 21348", province: "江西" },
+    ]}
+  />
+</div>
+```
+
+### Province map
+
+展示指定省份的地图并标注城市标签。
+
+```tsx
+<div style={{ height: "calc(100vh - 4em)", position: "relative" }}>
+  <WrappedDataViewChinaMap
+    province="广东"
+    dataSource={[
+      { text: "广州 12311", city: "广州" },
+      { text: "深圳 89781169", city: "深圳" },
+      { text: "湛江 234181", city: "湛江" },
+    ]}
+  />
+</div>
+```
+
+### Specific coordinates
+
+通过手动指定经纬度来精确定位标签位置。
+
+```tsx
+<div style={{ height: "calc(100vh - 4em)", position: "relative" }}>
+  <WrappedDataViewChinaMap
+    textScale={2}
+    dataSource={[
+      { text: "北京昌平 21348", coordinate: [116, 40] },
+      { text: "山东青岛 4242", coordinate: [119, 35.5] },
+    ]}
+  />
+</div>
+```

package/docs/complex-search.md

@@ -1,9 +1,40 @@
-复杂的搜索框
+---
+tagName: data-view.complex-search
+displayName: WrappedDataViewComplexSearch
+description: 大屏搜索构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.complex-search
+
+> 大屏搜索构件
+
+## Props
+
+| 属性            | 类型                          | 必填 | 默认值 | 说明             |
+| --------------- | ----------------------------- | ---- | ------ | ---------------- |
+| value           | `string \| undefined`         | 否   | -      | 初始值           |
+| placeholder     | `string \| undefined`         | 否   | -      | 占位符           |
+| options         | `OptionItem[]`                | 是   | -      | 下拉选项         |
+| tooltipUseBrick | `ReactUseMultipleBricksProps` | 是   | -      | tooltip useBrick |
+
+## Events
+
+| 事件   | detail                                            | 说明            |
+| ------ | ------------------------------------------------- | --------------- |
+| change | `string` — 当前输入框的文本值                     | input值改变事件 |
+| search | `string` — 当前搜索的文本值                       | input值搜索事件 |
+| select | `OptionItem` — { icon: 图标配置, name: 选项名称 } | 下拉选择事件    |
+| focus  | -                                                 | 聚焦事件        |
+| blur   | -                                                 | 失焦事件        |
 
 ## Examples
 
 ### Basic
 
+基本用法，展示带下拉选项的搜索框，支持搜索、选择和聚焦事件。
+
 ```yaml preview
 - brick: data-view.complex-search
   properties:
@@ -24,10 +55,55 @@
           icon: "account-book"
           theme: "outlined"
   events:
+    change:
+      - action: console.log
     select:
       - action: console.log
     search:
       - action: console.log
     focus:
       - action: console.log
+    blur:
+      - action: console.log
+```
+
+### With Value and TooltipUseBrick
+
+设置初始值，并通过 tooltipUseBrick 自定义下拉项的 tooltip 内容。
+
+```yaml preview
+- brick: data-view.complex-search
+  properties:
+    value: 主机1
+    placeholder: 请输入搜索内容
+    style:
+      background: "#1c1e21"
+      display: block
+      height: 300px
+    options:
+      - name: 主机1
+        icon:
+          lib: "antd"
+          icon: "account-book"
+          theme: "outlined"
+        description: 这是主机1的描述
+      - name: 主机2
+        icon:
+          lib: "antd"
+          icon: "account-book"
+          theme: "outlined"
+        description: 这是主机2的描述
+    tooltipUseBrick:
+      useBrick:
+        - brick: div
+          properties:
+            textContent: <% DATA.description %>
+            style:
+              color: "#fff"
+              padding: 8px
+  events:
+    select:
+      - action: console.log
+    search:
+      - action: console.log
 ```