@next-bricks/data-view 1.12.10 → 1.12.12

package/docs/complex-search.react.md

@@ -0,0 +1,101 @@
+---
+tagName: data-view.complex-search
+displayName: WrappedDataViewComplexSearch
+description: 大屏搜索构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewComplexSearch
+
+> 大屏搜索构件
+
+## 导入
+
+```tsx
+import { WrappedDataViewComplexSearch } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性            | 类型                          | 必填 | 默认值 | 说明             |
+| --------------- | ----------------------------- | ---- | ------ | ---------------- |
+| value           | `string \| undefined`         | 否   | -      | 初始值           |
+| placeholder     | `string \| undefined`         | 否   | -      | 占位符           |
+| options         | `OptionItem[]`                | 是   | -      | 下拉选项         |
+| tooltipUseBrick | `ReactUseMultipleBricksProps` | 是   | -      | tooltip useBrick |
+
+## Events
+
+| 事件     | detail                                            | 说明            |
+| -------- | ------------------------------------------------- | --------------- |
+| onChange | `string` — 当前输入框的文本值                     | input值改变事件 |
+| onSearch | `string` — 当前搜索的文本值                       | input值搜索事件 |
+| onSelect | `OptionItem` — { icon: 图标配置, name: 选项名称 } | 下拉选择事件    |
+| onFocus  | -                                                 | 聚焦事件        |
+| onBlur   | -                                                 | 失焦事件        |
+
+## Examples
+
+### Basic
+
+基本用法，展示带下拉选项的搜索框，支持搜索、选择和聚焦事件。
+
+```tsx
+<WrappedDataViewComplexSearch
+  placeholder="Search"
+  style={{ background: "#1c1e21", display: "block", height: "300px" }}
+  options={[
+    {
+      name: "主机1",
+      icon: { lib: "antd", icon: "account-book", theme: "outlined" },
+    },
+    {
+      name: "主机2",
+      icon: { lib: "antd", icon: "account-book", theme: "outlined" },
+    },
+  ]}
+  onChange={(e) => console.log(e.detail)}
+  onSelect={(e) => console.log(e.detail)}
+  onSearch={(e) => console.log(e.detail)}
+  onFocus={() => console.log("focus")}
+  onBlur={() => console.log("blur")}
+/>
+```
+
+### With Value and TooltipUseBrick
+
+设置初始值，并通过 tooltipUseBrick 自定义下拉项的 tooltip 内容。
+
+```tsx
+<WrappedDataViewComplexSearch
+  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" },
+        },
+      },
+    ],
+  }}
+  onSelect={(e) => console.log(e.detail)}
+  onSearch={(e) => console.log(e.detail)}
+/>
+```

package/docs/crystal-ball-indicator.md

@@ -1,9 +1,30 @@
-中间是水晶球动画的数据展示构件。
+---
+tagName: data-view.crystal-ball-indicator
+displayName: WrappedDataViewCrystalBallIndicator
+description: 有水晶球动画的数据展示构件。
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# data-view.crystal-ball-indicator
+
+> 有水晶球动画的数据展示构件。
+
+## Props
+
+| 属性             | 类型                            | 必填 | 默认值 | 说明                                         |
+| ---------------- | ------------------------------- | ---- | ------ | -------------------------------------------- |
+| dataSource       | `DataItem[] \| undefined`       | 否   | -      | 指标数据列表（显示在环上，最多显示12项数据） |
+| centerDataSource | `DataItem \| undefined`         | 否   | -      | 中心数据（显示在中心水晶球内）               |
+| cornerDataSource | `CornerDataItem[] \| undefined` | 否   | -      | 左上角指标数据列表                           |
+| maxScale         | `number \| undefined`           | 否   | `1`    | 最大缩放比例                                 |
 
 ## Examples
 
 ### Basic
 
+展示带水晶球动画的数据环形指标卡，包含环上标签、中心数值及左上角指标。
+
 ```yaml preview height="660px"
 brick: div
 properties:
@@ -40,3 +61,38 @@ children:
         args:
           - dark-v2
 ```
+
+### Max scale
+
+通过 maxScale 限制构件的最大缩放比例。
+
+```yaml preview height="660px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 2em)
+children:
+  - brick: data-view.crystal-ball-indicator
+    properties:
+      maxScale: 0.8
+      centerDataSource:
+        label: 在线主机
+        value: 8899
+      dataSource:
+        - label: 物理机
+          value: 1200
+        - label: 虚拟机
+          value: 5678
+        - label: 容器
+          value: 2021
+      cornerDataSource:
+        - label: 新增
+          value: 15
+          color: "#00c8ff"
+    # Currently this brick only works within dark theme
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
+```

package/docs/crystal-ball-indicator.react.md

@@ -0,0 +1,70 @@
+---
+tagName: data-view.crystal-ball-indicator
+displayName: WrappedDataViewCrystalBallIndicator
+description: 有水晶球动画的数据展示构件。
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewCrystalBallIndicator
+
+> 有水晶球动画的数据展示构件。
+
+## 导入
+
+```tsx
+import { WrappedDataViewCrystalBallIndicator } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性             | 类型                            | 必填 | 默认值 | 说明                                         |
+| ---------------- | ------------------------------- | ---- | ------ | -------------------------------------------- |
+| dataSource       | `DataItem[] \| undefined`       | 否   | -      | 指标数据列表（显示在环上，最多显示12项数据） |
+| centerDataSource | `DataItem \| undefined`         | 否   | -      | 中心数据（显示在中心水晶球内）               |
+| cornerDataSource | `CornerDataItem[] \| undefined` | 否   | -      | 左上角指标数据列表                           |
+| maxScale         | `number \| undefined`           | 否   | `1`    | 最大缩放比例                                 |
+
+## Examples
+
+### Basic
+
+展示带水晶球动画的数据环形指标卡，包含环上标签、中心数值及左上角指标。
+
+```tsx
+<div style={{ height: "calc(100vh - 2em)" }}>
+  <WrappedDataViewCrystalBallIndicator
+    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)" }}>
+  <WrappedDataViewCrystalBallIndicator
+    maxScale={0.8}
+    centerDataSource={{ label: "在线主机", value: 8899 }}
+    dataSource={[
+      { label: "物理机", value: 1200 },
+      { label: "虚拟机", value: 5678 },
+      { label: "容器", value: 2021 },
+    ]}
+    cornerDataSource={[{ label: "新增", value: 15, color: "#00c8ff" }]}
+  />
+</div>
+```

package/docs/data-display-flipper-fifth.md

@@ -1,9 +1,38 @@
-构件 `data-view.data-display-flipper-fifth`
+---
+tagName: data-view.data-display-flipper-fifth
+displayName: WrappedDataViewDataDisplayFlipperFifth
+description: 翻牌器-type-5
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.data-display-flipper-fifth
+
+> 翻牌器-type-5
+
+## Props
+
+| 属性              | 类型                               | 必填 | 默认值  | 说明                     |
+| ----------------- | ---------------------------------- | ---- | ------- | ------------------------ |
+| flipperTitle      | `string`                           | 否   | -       | 翻牌器标题               |
+| data              | `number \| string`                 | 是   | -       | 翻牌器数值               |
+| unit              | `string`                           | 是   | -       | 翻牌器单位               |
+| flipperStyle      | `React.CSSProperties \| undefined` | 否   | -       | 翻牌器样式               |
+| enableTitlePrefix | `boolean \| undefined`             | 否   | `false` | 是否启用标题前缀插槽     |
+| showDefaultPrefix | `boolean \| undefined`             | 否   | `true`  | 标题是否展示默认前缀图片 |
+
+## Slots
+
+| 名称        | 说明                                                |
+| ----------- | --------------------------------------------------- |
+| titlePrefix | 标题前缀内容，仅在 enableTitlePrefix 为 true 时生效 |
 
 ## Examples
 
 ### Basic
 
+展示带标题、数值和单位的 type-5 翻牌器。
+
 ```yaml preview
 - brick: data-view.data-display-flipper-fifth
   properties:
@@ -11,3 +40,49 @@
     data: 195.15
     unit: 单位
 ```
+
+### Show default prefix
+
+隐藏默认前缀图片的翻牌器。
+
+```yaml preview
+- brick: data-view.data-display-flipper-fifth
+  properties:
+    flipperTitle: 资产数量
+    data: 10086
+    unit: 台
+    showDefaultPrefix: false
+```
+
+### Custom style
+
+通过 flipperStyle 自定义翻牌器容器样式。
+
+```yaml preview
+- brick: data-view.data-display-flipper-fifth
+  properties:
+    flipperTitle: 在线主机
+    data: 3456
+    unit: 台
+    flipperStyle:
+      color: "#00c8ff"
+```
+
+### Enable title prefix slot
+
+启用自定义标题前缀插槽，替代默认前缀图片。
+
+```yaml preview
+- brick: data-view.data-display-flipper-fifth
+  properties:
+    flipperTitle: 主机数量
+    data: 8888
+    unit: 台
+    enableTitlePrefix: true
+  slots:
+    titlePrefix:
+      bricks:
+        - brick: span
+          properties:
+            textContent: "◆"
+```

package/docs/data-display-flipper-fifth.react.md

@@ -0,0 +1,89 @@
+---
+tagName: data-view.data-display-flipper-fifth
+displayName: WrappedDataViewDataDisplayFlipperFifth
+description: 翻牌器-type-5
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewDataDisplayFlipperFifth
+
+> 翻牌器-type-5
+
+## 导入
+
+```tsx
+import { WrappedDataViewDataDisplayFlipperFifth } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性              | 类型                               | 必填 | 默认值  | 说明                     |
+| ----------------- | ---------------------------------- | ---- | ------- | ------------------------ |
+| flipperTitle      | `string`                           | 否   | -       | 翻牌器标题               |
+| data              | `number \| string`                 | 是   | -       | 翻牌器数值               |
+| unit              | `string`                           | 是   | -       | 翻牌器单位               |
+| flipperStyle      | `React.CSSProperties \| undefined` | 否   | -       | 翻牌器样式               |
+| enableTitlePrefix | `boolean \| undefined`             | 否   | `false` | 是否启用标题前缀插槽     |
+| showDefaultPrefix | `boolean \| undefined`             | 否   | `true`  | 标题是否展示默认前缀图片 |
+
+## Slots
+
+| 名称        | 说明                                                |
+| ----------- | --------------------------------------------------- |
+| titlePrefix | 标题前缀内容，仅在 enableTitlePrefix 为 true 时生效 |
+
+## Examples
+
+### Basic
+
+展示带标题、数值和单位的 type-5 翻牌器。
+
+```tsx
+<WrappedDataViewDataDisplayFlipperFifth
+  flipperTitle="翻牌器名称"
+  data={195.15}
+  unit="单位"
+/>
+```
+
+### Show default prefix
+
+隐藏默认前缀图片的翻牌器。
+
+```tsx
+<WrappedDataViewDataDisplayFlipperFifth
+  flipperTitle="资产数量"
+  data={10086}
+  unit="台"
+  showDefaultPrefix={false}
+/>
+```
+
+### Custom style
+
+通过 flipperStyle 自定义翻牌器容器样式。
+
+```tsx
+<WrappedDataViewDataDisplayFlipperFifth
+  flipperTitle="在线主机"
+  data={3456}
+  unit="台"
+  flipperStyle={{ color: "#00c8ff" }}
+/>
+```
+
+### Enable title prefix slot
+
+启用自定义标题前缀插槽，替代默认前缀图片。
+
+```tsx
+<WrappedDataViewDataDisplayFlipperFifth
+  flipperTitle="主机数量"
+  data={8888}
+  unit="台"
+  enableTitlePrefix={true}
+>
+  <span slot="titlePrefix">◆</span>
+</WrappedDataViewDataDisplayFlipperFifth>
+```

package/docs/data-display-flipper-sixth.md

@@ -1,12 +1,46 @@
-构件 `data-view.data-display-flipper-sixth`
+---
+tagName: data-view.data-display-flipper-sixth
+displayName: WrappedDataViewDataDisplayFlipperSixth
+description: 翻牌器-type-6
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.data-display-flipper-sixth
+
+> 翻牌器-type-6
+
+## Props
+
+| 属性         | 类型                  | 必填 | 默认值 | 说明       |
+| ------------ | --------------------- | ---- | ------ | ---------- |
+| flipperTitle | `string`              | -    | -      | 翻牌器标题 |
+| data         | `number \| string`    | -    | -      | 翻牌器数值 |
+| flipperStyle | `React.CSSProperties` | -    | -      | 翻牌器样式 |
 
 ## Examples
 
 ### Basic
 
+展示翻牌器基本用法，包含标题和数值。
+
+```yaml preview
+brick: data-view.data-display-flipper-sixth
+properties:
+  flipperTitle: 翻牌器名称
+  data: 699
+```
+
+### Custom Style
+
+使用 flipperStyle 自定义翻牌器容器样式。
+
 ```yaml preview
-- brick: data-view.data-display-flipper-sixth
-  properties:
-    flipperTitle: 翻牌器名称
-    data: 699
+brick: data-view.data-display-flipper-sixth
+properties:
+  flipperTitle: 在线设备
+  data: 12345
+  flipperStyle:
+    width: 200px
+    color: "#00eaff"
 ```

package/docs/data-display-flipper-sixth.react.md

@@ -0,0 +1,47 @@
+---
+tagName: data-view.data-display-flipper-sixth
+displayName: WrappedDataViewDataDisplayFlipperSixth
+description: 翻牌器-type-6
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewDataDisplayFlipperSixth
+
+> 翻牌器-type-6
+
+## 导入
+
+```tsx
+import { WrappedDataViewDataDisplayFlipperSixth } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性         | 类型                  | 必填 | 默认值 | 说明       |
+| ------------ | --------------------- | ---- | ------ | ---------- |
+| flipperTitle | `string`              | -    | -      | 翻牌器标题 |
+| data         | `number \| string`    | -    | -      | 翻牌器数值 |
+| flipperStyle | `React.CSSProperties` | -    | -      | 翻牌器样式 |
+
+## Examples
+
+### Basic
+
+展示翻牌器基本用法，包含标题和数值。
+
+```tsx
+<WrappedDataViewDataDisplayFlipperSixth flipperTitle="翻牌器名称" data={699} />
+```
+
+### Custom Style
+
+使用 flipperStyle 自定义翻牌器容器样式。
+
+```tsx
+<WrappedDataViewDataDisplayFlipperSixth
+  flipperTitle="在线设备"
+  data={12345}
+  flipperStyle={{ width: "200px", color: "#00eaff" }}
+/>
+```

package/docs/data-display-flipper.md

@@ -1,9 +1,39 @@
-构件 `data-view.data-display-flipper`
+---
+tagName: data-view.data-display-flipper
+displayName: WrappedDataViewDataDisplayFlipper
+description: 翻牌器-type-3
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.data-display-flipper
+
+> 翻牌器-type-3
+
+## Props
+
+| 属性              | 类型                               | 必填 | 默认值  | 说明                         |
+| ----------------- | ---------------------------------- | ---- | ------- | ---------------------------- |
+| flipperTitle      | `string`                           | 否   | -       | 翻牌器标题                   |
+| data              | `number \| string`                 | 是   | -       | 翻牌器数值                   |
+| unit              | `string`                           | 是   | -       | 翻牌器单位                   |
+| flipperStyle      | `React.CSSProperties \| undefined` | 否   | -       | 翻牌器样式                   |
+| enableTitlePrefix | `boolean \| undefined`             | 否   | `false` | 是否启用标题前缀插槽         |
+| showDefaultPrefix | `boolean \| undefined`             | 否   | `true`  | 标题是否展示默认前缀图片     |
+| separator         | `string`                           | 否   | `"/"`   | 翻牌器数字和单位之间的分隔符 |
+
+## Slots
+
+| 名称        | 说明                                                |
+| ----------- | --------------------------------------------------- |
+| titlePrefix | 标题前缀内容，仅在 enableTitlePrefix 为 true 时生效 |
 
 ## Examples
 
 ### Basic
 
+展示带标题、数值和单位的翻牌器。
+
 ```yaml preview
 - brick: data-view.data-display-flipper
   properties:
@@ -12,7 +42,9 @@
     unit: 万
 ```
 
-### showDefaultPrefix
+### Show default prefix
+
+隐藏默认前缀图片并自定义分隔符样式。
 
 ```yaml preview
 - brick: data-view.data-display-flipper
@@ -22,3 +54,37 @@
     separator: " "
     showDefaultPrefix: false
 ```
+
+### Custom style
+
+通过 flipperStyle 自定义翻牌器容器样式。
+
+```yaml preview
+- brick: data-view.data-display-flipper
+  properties:
+    flipperTitle: 资产总量
+    data: 99999
+    unit: 台
+    separator: "-"
+    flipperStyle:
+      color: "#00c8ff"
+```
+
+### Enable title prefix slot
+
+启用自定义标题前缀插槽，替代默认前缀图片。
+
+```yaml preview
+- brick: data-view.data-display-flipper
+  properties:
+    flipperTitle: 主机数量
+    data: 3456
+    unit: 台
+    enableTitlePrefix: true
+  slots:
+    titlePrefix:
+      bricks:
+        - brick: span
+          properties:
+            textContent: "★"
+```

package/docs/data-display-flipper.react.md

@@ -0,0 +1,91 @@
+---
+tagName: data-view.data-display-flipper
+displayName: WrappedDataViewDataDisplayFlipper
+description: 翻牌器-type-3
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewDataDisplayFlipper
+
+> 翻牌器-type-3
+
+## 导入
+
+```tsx
+import { WrappedDataViewDataDisplayFlipper } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性              | 类型                               | 必填 | 默认值  | 说明                         |
+| ----------------- | ---------------------------------- | ---- | ------- | ---------------------------- |
+| flipperTitle      | `string`                           | 否   | -       | 翻牌器标题                   |
+| data              | `number \| string`                 | 是   | -       | 翻牌器数值                   |
+| unit              | `string`                           | 是   | -       | 翻牌器单位                   |
+| flipperStyle      | `React.CSSProperties \| undefined` | 否   | -       | 翻牌器样式                   |
+| enableTitlePrefix | `boolean \| undefined`             | 否   | `false` | 是否启用标题前缀插槽         |
+| showDefaultPrefix | `boolean \| undefined`             | 否   | `true`  | 标题是否展示默认前缀图片     |
+| separator         | `string`                           | 否   | `"/"`   | 翻牌器数字和单位之间的分隔符 |
+
+## Slots
+
+| 名称        | 说明                                                |
+| ----------- | --------------------------------------------------- |
+| titlePrefix | 标题前缀内容，仅在 enableTitlePrefix 为 true 时生效 |
+
+## Examples
+
+### Basic
+
+展示带标题、数值和单位的翻牌器。
+
+```tsx
+<WrappedDataViewDataDisplayFlipper
+  flipperTitle="翻牌器标题"
+  data={1281925.15}
+  unit="万"
+/>
+```
+
+### Show default prefix
+
+隐藏默认前缀图片并自定义分隔符样式。
+
+```tsx
+<WrappedDataViewDataDisplayFlipper
+  data={1281925.15}
+  unit="万"
+  separator=" "
+  showDefaultPrefix={false}
+/>
+```
+
+### Custom style
+
+通过 flipperStyle 自定义翻牌器容器样式。
+
+```tsx
+<WrappedDataViewDataDisplayFlipper
+  flipperTitle="资产总量"
+  data={99999}
+  unit="台"
+  separator="-"
+  flipperStyle={{ color: "#00c8ff" }}
+/>
+```
+
+### Enable title prefix slot
+
+启用自定义标题前缀插槽，替代默认前缀图片。
+
+```tsx
+<WrappedDataViewDataDisplayFlipper
+  flipperTitle="主机数量"
+  data={3456}
+  unit="台"
+  enableTitlePrefix={true}
+>
+  <span slot="titlePrefix">★</span>
+</WrappedDataViewDataDisplayFlipper>
+```