@next-bricks/data-view 1.12.10 → 1.12.12

package/dist-types/battery-chart/index.d.ts

@@ -18,41 +18,28 @@ interface BatteryChartChartProps {
  * 大屏电池
  * @author astrid
  * @category big-screen-content
+ * @slot - 电池右侧内容插槽，可放置标题和数据信息
+ * @slot left - 电池左侧阈值线附近内容插槽
  */
 declare class BatteryChart extends ReactNextElement implements BatteryChartChartProps {
     /**
-     * @kind number
-     * @default -
-     * @required false
-     * @description 值, 默认范围在[0-100], 但是范围还可通过 thresholdColors 来改变，将取第一个和最后一个值作为范围
+     * 值，默认范围在 [0-100]，范围还可通过 thresholdColors 来改变，将取第一个和最后一个配置项的值作为区间
      */
     accessor value: number;
     /**
-     * @kind  number
-     * @default  38
-     * @required false
-     * @description 电池的宽度
+     * 电池的宽度
      */
     accessor batteryWidth: number;
     /**
-     * @kind  number
-     * @default  58
-     * @required false
-     * @description 电池的高度
+     * 电池的高度
      */
     accessor batteryHeight: number;
     /**
-     * @kind  ThresholdColor[]
-     * @default  -
-     * @required false
-     * @description 阈值范围以及颜色的配置；
+     * 阈值范围以及颜色的配置
      */
     accessor thresholdColors: ThresholdColor[];
     /**
-     * @kind  number
-     * @default  50
-     * @required false
-     * @description 阈值刻度线
+     * 阈值刻度线
      */
     accessor thresholdValue: number;
     render(): React.ReactNode;

package/dist-types/brick-notification/index.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
 import { ReactNextElement } from "@next-core/react-element";
 import type { GeneralIconProps } from "@next-bricks/icons/general-icon";
+interface BrickNotificationProps {
+    message: string;
+    icon?: GeneralIconProps | undefined;
+}
 /**
  * 大屏提示构件
  * @author astrid
  * @category big-screen-content
  */
-interface BrickNotificationProps {
-    message: string;
-    icon?: GeneralIconProps | undefined;
-}
 declare class BrickNotification extends ReactNextElement implements BrickNotificationProps {
     /**
      * 提示内容

package/dist-types/bubbles-indicator/index.d.ts

@@ -22,6 +22,7 @@ export interface CornerDataItem extends DataItem {
 }
 /**
  * 气泡样式的数据展示构件。
+ * @category big-screen-content
  */
 export declare class BubblesIndicator extends ReactNextElement implements BubblesIndicatorProps {
     /** 指标数据列表（显示在环上）

package/dist-types/cabinet/cabinet-app-layer/index.d.ts

@@ -7,20 +7,15 @@ export interface CabinetAppLayerProps {
 /**
  * cabinet子构件----应用层
  * @author nlicroshan
+ * @category big-screen-content
  */
 declare class CabinetAppLayer extends ReactNextElement implements CabinetAppLayerProps {
     /**
-     * @kind string
-     * @required true
-     * @default
-     * @description 标题
+     * 标题
      */
     accessor appTitle: string;
     /**
-     * @kind "active" | "faded"
-     * @required false
-     * @default
-     * @description 当前状态
+     * 当前状态
      */
     accessor status: "active" | "faded";
     render(): React.JSX.Element;

package/dist-types/cabinet/index.d.ts

@@ -34,24 +34,15 @@ export interface CabinetGraphProps {
 declare class CabinetGraph extends ReactNextElement implements CabinetGraphProps {
     #private;
     /**
-     * @kind AppData
-     * @required true
-     * @default
-     * @description 数据源
+     * 数据源
      */
     accessor dataSource: AppData;
     /**
-     * @kind string |string[]
-     * @required false
-     * @default
-     * @description 选中项， 支持数组
+     * 选中项，支持数组
      */
     accessor activeKey: string | string[];
     /**
-     * @kind boolean
-     * @required false
-     * @default true
-     * @description 取消按钮是否需要展示
+     * 取消按钮是否需要展示
      */
     accessor hiddenCloseBtn: boolean;
     render(): React.JSX.Element;

package/dist-types/china-map/index.d.ts

@@ -15,7 +15,7 @@ export interface DataItem {
     text: string;
 }
 /**
- * 构件 `data-view.china-map`
+ * 中国地图展示构件，支持全国地图和省级地图，可在地图上标注文字标签
  */
 export declare class ChinaMap extends ReactNextElement implements ChinaMapProps {
     /**

package/dist-types/globe-with-gear-indicator/index.d.ts

@@ -18,6 +18,8 @@ export interface CornerDataItem extends DataItem {
 }
 /**
  * 地球加轮盘的数据展示构件。
+ * @author astrid
+ * @category big-screen-content
  */
 export declare class GlobeWithGearIndicator extends ReactNextElement implements GlobeWithGearIndicatorProps {
     /** 指标数据列表（显示在环上）

package/dist-types/globe-with-halo-indicator/index.d.ts

@@ -17,6 +17,8 @@ export interface CornerDataItem extends DataItem {
 }
 /**
  * 地球加光环的数据展示构件。
+ * @author astrid
+ * @category big-screen-content
  */
 export declare class GlobeWithHaloIndicator extends ReactNextElement implements GlobeWithHaloIndicatorProps {
     /**

package/dist-types/globe-with-orbit-indicator/index.d.ts

@@ -18,6 +18,8 @@ export interface CornerDataItem extends DataItem {
 }
 /**
  * 地球加轨道的数据展示构件。
+ * @author astrid
+ * @category big-screen-content
  */
 export declare class GlobeWithOrbitIndicator extends ReactNextElement implements GlobeWithOrbitIndicatorProps {
     /**

package/dist-types/lights-component-title/index.d.ts

@@ -5,7 +5,7 @@ interface LightsComponentTitleProps {
     theme: "light" | "dark";
 }
 /**
- * 构件 `data-view.lights-component-title`
+ * 大屏灯光风格组件标题
  * @author astrid
  * @category big-screen-content
  */
@@ -16,9 +16,9 @@ export declare class LightsComponentTitle extends ReactNextElement implements Li
      */
     accessor componentTitle: string;
     /**
-     * @default
-     * @required
-     * @description
+     * 主题风格，`light` 为浅色光标图标，`dark` 为深色光标图标
+     * @default "light"
+     * @required false
      */
     accessor theme: "light" | "dark";
     render(): React.JSX.Element;

package/dist-types/progress-bar-list/index.d.ts

@@ -2,13 +2,15 @@ import React, { CSSProperties } from "react";
 import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
 /**
- * 构件 `data-view.progress-bar-list`
+ * 大屏进度条列表
+ * @author nlicroshan
+ * @category big-screen-content
  */
 export declare class ProgressBarList extends ReactNextElement {
     /**
-     * @default
-     * @required
-     * @description 数据
+     * @default []
+     * @required false
+     * @description 数据列表，每项包含标题、数值及可选的进度条颜色配置
      */
     accessor dataSource: Data[];
     render(): React.JSX.Element;

package/dist-types/tabs-page-title/index.d.ts

@@ -14,7 +14,7 @@ interface TabsPageTitleProps {
 /**
  * 带有tabs的标题构件
  * @author astrid
- * @slot - 标题
+ * @slot - 默认插槽，用于放置标题内容
  * @slot start - 顶部左边插槽
  * @slot end - 顶部右边插槽
  * @slot [key] - 标签对应的key的插槽

package/dist-types/tech-mesh-base-view/index.d.ts

@@ -4,7 +4,8 @@ import "@next-core/theme";
 /**
  * 大屏框架构件-网格纹
  * @author jiezhou
- * @slot - 页面内容
+ * @slot titleBar - 标题栏插槽
+ * @slot content - 页面内容插槽
  * @category big-screen-layout
  */
 export declare class TechMeshBaseView extends ReactNextElement {

package/docs/app-wall-card-item.md

@@ -1,9 +1,29 @@
-应用墙小卡片
+---
+tagName: data-view.app-wall-card-item
+displayName: WrappedDataViewAppWallCardItem
+description: 应用墙子构件----卡片项
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# data-view.app-wall-card-item
+
+> 应用墙子构件----卡片项
+
+## Props
+
+| 属性        | 类型                    | 必填 | 默认值     | 说明 |
+| ----------- | ----------------------- | ---- | ---------- | ---- |
+| status      | `"normal" \| "warning"` | 否   | `"normal"` | 状态 |
+| cardTitle   | `string`                | 是   | -          | 标题 |
+| description | `string`                | 是   | -          | 描述 |
 
 ## Examples
 
 ### Basic
 
+展示应用墙卡片项的基本用法。
+
 ```yaml preview
 - brick: data-view.app-wall-card-item
   properties:
@@ -16,6 +36,8 @@
 
 ### Status
 
+展示不同状态下的应用墙卡片项。
+
 ```yaml preview
 - brick: data-view.app-wall-card-item
   properties:

package/docs/app-wall-card-item.react.md

@@ -0,0 +1,52 @@
+---
+tagName: data-view.app-wall-card-item
+displayName: WrappedDataViewAppWallCardItem
+description: 应用墙子构件----卡片项
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewAppWallCardItem
+
+> 应用墙子构件----卡片项
+
+## 导入
+
+```tsx
+import { WrappedDataViewAppWallCardItem } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                    | 必填 | 默认值     | 说明 |
+| ----------- | ----------------------- | ---- | ---------- | ---- |
+| status      | `"normal" \| "warning"` | 否   | `"normal"` | 状态 |
+| cardTitle   | `string`                | 是   | -          | 标题 |
+| description | `string`                | 是   | -          | 描述 |
+
+## Examples
+
+### Basic
+
+展示应用墙卡片项的基本用法。
+
+```tsx
+<WrappedDataViewAppWallCardItem
+  style={{ width: "100px", height: "120px" }}
+  cardTitle="pos"
+  description="店铺货管通"
+/>
+```
+
+### Status
+
+展示不同状态下的应用墙卡片项。
+
+```tsx
+<WrappedDataViewAppWallCardItem
+  style={{ width: "100px", height: "120px" }}
+  status="warning"
+  cardTitle="pos"
+  description="店铺货管通"
+/>
+```

package/docs/app-wall-relation-line.md

@@ -1,9 +1,27 @@
-应用墙流光线条
+---
+tagName: data-view.app-wall-relation-line
+displayName: WrappedDataViewAppWallRelationLine
+description: 应用墙子构件----关联连线
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# data-view.app-wall-relation-line
+
+> 应用墙子构件----关联连线
+
+## Props
+
+| 属性       | 类型                 | 必填 | 默认值   | 说明     |
+| ---------- | -------------------- | ---- | -------- | -------- |
+| lightColor | `"blue" \| "purple"` | 否   | `"blue"` | 光线颜色 |
 
 ## Examples
 
 ### Basic
 
+展示应用墙关联连线的基本用法及颜色效果。
+
 ```yaml preview
 - brick: data-view.app-wall-relation-line
   properties:

package/docs/app-wall-relation-line.react.md

@@ -0,0 +1,36 @@
+---
+tagName: data-view.app-wall-relation-line
+displayName: WrappedDataViewAppWallRelationLine
+description: 应用墙子构件----关联连线
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewAppWallRelationLine
+
+> 应用墙子构件----关联连线
+
+## 导入
+
+```tsx
+import { WrappedDataViewAppWallRelationLine } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型                 | 必填 | 默认值   | 说明     |
+| ---------- | -------------------- | ---- | -------- | -------- |
+| lightColor | `"blue" \| "purple"` | 否   | `"blue"` | 光线颜色 |
+
+## Examples
+
+### Basic
+
+展示应用墙关联连线的基本用法及颜色效果。
+
+```tsx
+<WrappedDataViewAppWallRelationLine
+  style={{ height: "200px" }}
+  lightColor="purple"
+/>
+```

package/docs/app-wall-system-card.md

@@ -1,9 +1,37 @@
-系统卡片
+---
+tagName: data-view.app-wall-system-card
+displayName: WrappedDataViewAppWallSystemCard
+description: 应用墙系统卡片
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# data-view.app-wall-system-card
+
+> 应用墙系统卡片
+
+## Props
+
+| 属性           | 类型                  | 必填 | 默认值     | 说明         |
+| -------------- | --------------------- | ---- | ---------- | ------------ |
+| status         | `StatusType`          | 否   | `"normal"` | 卡片状态     |
+| cardTitle      | `string`              | 否   | -          | 卡片标题     |
+| itemList       | `DescriptionItem[]`   | 否   | -          | 卡片信息数据 |
+| buttonName     | `string`              | 否   | -          | 按钮名称     |
+| containerStyle | `React.CSSProperties` | 否   | -          | 外层容器样式 |
+
+## Events
+
+| 事件         | detail | 说明         |
+| ------------ | ------ | ------------ |
+| button-click | `void` | 按钮点击事件 |
 
 ## Examples
 
 ### Basic
 
+展示应用墙系统卡片的基本用法，包含标题、信息列表和按钮。
+
 ```yaml preview
 - brick: data-view.app-wall-system-card
   properties:
@@ -27,15 +55,20 @@
         value: 1、使用场景概述：财务应收和应付结算
     buttonName: 应用墙大屏
     style:
-      background: rgba(40, 46, 58, 100%)
+      background: "rgba(40, 46, 58, 100%)"
       box-shadow: "0 0 12px 2px rgba(80, 255, 255, 0.45), inset 0 0 22px 0 #20242A"
       border: "2px solid #50FFFF"
       overflow: hidden
       height: 400px
+  events:
+    button-click:
+      action: console.log
 ```
 
 ### Status
 
+展示 warning 状态下的系统卡片样式。
+
 ```yaml preview
 - brick: data-view.app-wall-system-card
   properties:

package/docs/app-wall-system-card.react.md

@@ -0,0 +1,89 @@
+---
+tagName: data-view.app-wall-system-card
+displayName: WrappedDataViewAppWallSystemCard
+description: 应用墙系统卡片
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewAppWallSystemCard
+
+> 应用墙系统卡片
+
+## 导入
+
+```tsx
+import { WrappedDataViewAppWallSystemCard } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性           | 类型                  | 必填 | 默认值     | 说明         |
+| -------------- | --------------------- | ---- | ---------- | ------------ |
+| status         | `StatusType`          | 否   | `"normal"` | 卡片状态     |
+| cardTitle      | `string`              | 否   | -          | 卡片标题     |
+| itemList       | `DescriptionItem[]`   | 否   | -          | 卡片信息数据 |
+| buttonName     | `string`              | 否   | -          | 按钮名称     |
+| containerStyle | `React.CSSProperties` | 否   | -          | 外层容器样式 |
+
+## Events
+
+| 事件          | detail | 说明         |
+| ------------- | ------ | ------------ |
+| onButtonClick | `void` | 按钮点击事件 |
+
+## Examples
+
+### Basic
+
+展示应用墙系统卡片的基本用法，包含标题、信息列表和按钮。
+
+```tsx
+<WrappedDataViewAppWallSystemCard
+  style={{
+    background: "rgba(40, 46, 58, 100%)",
+    boxShadow:
+      "0 0 12px 2px rgba(80, 255, 255, 0.45), inset 0 0 22px 0 #20242A",
+    border: "2px solid #50FFFF",
+    overflow: "hidden",
+    height: "400px",
+  }}
+  cardTitle="A系统"
+  itemList={[
+    { key: "实例ID", value: "xxxx" },
+    { key: "系统英文缩写", value: "system-fms" },
+    { key: "系统英文名称", value: "app-fms" },
+    { key: "系统中文名称", value: "A财务系统" },
+    { key: "归属部门", value: "财务系统部" },
+    { key: "系统类型", value: "应用系统" },
+    { key: "系统描述", value: "1、使用场景概述：财务应收和应付结算" },
+  ]}
+  buttonName="应用墙大屏"
+  onButtonClick={(e) => console.log(e.detail)}
+/>
+```
+
+### Status
+
+展示 warning 状态下的系统卡片样式。
+
+```tsx
+<WrappedDataViewAppWallSystemCard
+  style={{
+    background:
+      "linear-gradient(180deg, #CC0066 0%, rgba(204, 0, 102, 0.2) 100%),#0F1117FF",
+    boxShadow:
+      "0 0 12px 2px rgba(204, 0, 102, 0.4), inset 0 4px 10px 0 rgba(255, 255, 255, 0.65)",
+    overflow: "hidden",
+    height: "400px",
+  }}
+  cardTitle="B系统"
+  itemList={[
+    { key: "实例ID", value: "xxxx" },
+    { key: "系统英文缩写", value: "system-fms-B" },
+    { key: "系统描述", value: "1、使用场景概述：财务应收和应付结算" },
+  ]}
+  buttonName="应用墙大屏"
+  status="warning"
+/>
+```