@next-bricks/data-view 1.12.11 → 1.12.13

package/docs/tabs-drawer.react.md

@@ -0,0 +1,117 @@
+---
+tagName: data-view.tabs-drawer
+displayName: WrappedDataViewTabsDrawer
+description: 大屏仪标签页抽屉
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewTabsDrawer
+
+> 大屏仪标签页抽屉
+
+## 导入
+
+```tsx
+import { WrappedDataViewTabsDrawer } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                  | 必填 | 默认值 | 说明                                               |
+| ----------- | --------------------- | ---- | ------ | -------------------------------------------------- |
+| tabList     | `TabItem[]`           | 是   | -      | 抽屉左侧菜单列表                                   |
+| activeKey   | `string`              | 是   | -      | 抽屉左侧菜单高亮显示                               |
+| width       | `number \| string`    | 是   | -      | 抽屉宽度内容区的宽度，优先级高于bodyStyle内的width |
+| drawerStyle | `React.CSSProperties` | 是   | -      | 设计 Drawer 容器样式                               |
+| bodyStyle   | `React.CSSProperties` | 是   | -      | 可用于设置 Drawer 内容部分的样式                   |
+| zIndex      | `number`              | 否   | -      | 抽屉层级                                           |
+| visible     | `boolean`             | 否   | -      | 遮罩层是否显示                                     |
+
+## Events
+
+| 事件        | detail                             | 说明                                                          |
+| ----------- | ---------------------------------- | ------------------------------------------------------------- |
+| onOpen      | `void`                             | 抽屉打开事件                                                  |
+| onClose     | `void`                             | 抽屉关闭事件                                                  |
+| onTabChange | `string` — 切换后激活的 tab 的 key | 切换 `tab` 栏会触发的事件，`detail` 为目标 `tab` 对应的 `key` |
+
+## Methods
+
+| 方法  | 参数         | 返回值 | 说明     |
+| ----- | ------------ | ------ | -------- |
+| open  | `() => void` | `void` | 打开抽屉 |
+| close | `() => void` | `void` | 关闭抽屉 |
+
+## Examples
+
+### Basic
+
+展示带有三个标签页的基础抽屉，默认展开并高亮第一个标签。
+
+```tsx
+<WrappedDataViewTabsDrawer
+  activeKey="search"
+  visible={true}
+  width={800}
+  style={{ height: "600px", display: "block" }}
+  tabList={[
+    {
+      tooltip: "搜索",
+      key: "search",
+      icon: { lib: "fa", icon: "search", prefix: "fas" },
+    },
+    {
+      tooltip: "内容",
+      key: "app",
+      icon: {
+        lib: "easyops",
+        category: "app",
+        icon: "micro-app-configuration",
+      },
+    },
+    {
+      tooltip: "图表",
+      key: "chart",
+      icon: { lib: "fa", icon: "ad", prefix: "fas" },
+    },
+  ]}
+  onClose={(e) => console.log(e)}
+  onTabChange={(e) => console.log(e.detail)}
+>
+  <div
+    slot="search"
+    style={{ padding: "0 16px", height: "100px", background: "red" }}
+  >
+    测试
+  </div>
+  <div slot="app" style={{ background: "yellow", height: "100px" }}>
+    内容区域
+  </div>
+  <div slot="chart" style={{ background: "green", height: "100px" }}>
+    图表区域
+  </div>
+</WrappedDataViewTabsDrawer>
+```
+
+### Method Control
+
+通过调用 open/close 方法程序化控制抽屉的展开与收起。
+
+```tsx
+const drawerRef = useRef<any>();
+
+<button onClick={() => drawerRef.current?.open()}>打开抽屉</button>
+<WrappedDataViewTabsDrawer
+  ref={drawerRef}
+  style={{ height: "500px", display: "block" }}
+  tabList={[
+    { tooltip: "信息", key: "info", icon: { lib: "antd", icon: "info-circle" } },
+  ]}
+  zIndex={100}
+  onOpen={(e) => console.log(e)}
+  onClose={(e) => console.log(e)}
+>
+  <div slot="info" style={{ padding: "16px" }}>抽屉内容区域</div>
+</WrappedDataViewTabsDrawer>
+```

package/docs/tabs-page-title.md

@@ -1,9 +1,43 @@
-构件 tabs-page-title
+---
+tagName: data-view.tabs-page-title
+displayName: WrappedDataViewTabsPageTitle
+description: 带有tabs的标题构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.tabs-page-title
+
+> 带有tabs的标题构件
+
+## Props
+
+| 属性      | 类型         | 必填 | 默认值 | 说明                       |
+| --------- | ------------ | ---- | ------ | -------------------------- |
+| tabList   | `TabsItem[]` | 是   | -      | 标签，如果没有就不展示标签 |
+| activeKey | `string`     | 是   | -      | 标签高亮显示，默认第一个   |
+
+## Events
+
+| 事件       | detail                             | 说明                                                          |
+| ---------- | ---------------------------------- | ------------------------------------------------------------- |
+| tab.change | `string` — 切换后激活的 tab 的 key | 切换 `tab` 栏会触发的事件，`detail` 为目标 `tab` 对应的 `key` |
+
+## Slots
+
+| 名称      | 说明                       |
+| --------- | -------------------------- |
+| (default) | 默认插槽，用于放置标题内容 |
+| start     | 顶部左边插槽               |
+| end       | 顶部右边插槽               |
+| [key]     | 标签对应的key的插槽        |
 
 ## Examples
 
 ### Basic
 
+展示带有标题和顶部工具栏的页面标题构件（无标签页）。
+
 ```yaml preview
 - brick: data-view.tabs-page-title
   properties:
@@ -34,6 +68,8 @@
 
 ### TabList
 
+展示带有多个标签页的页面标题构件，支持通过 activeKey 指定初始激活标签。
+
 ```yaml preview
 - brick: data-view.tabs-page-title
   properties:
@@ -95,4 +131,7 @@
         - brick: div
           properties:
             textContent: 标签六内容
+  events:
+    tab.change:
+      - action: console.log
 ```

package/docs/tabs-page-title.react.md

@@ -0,0 +1,87 @@
+---
+tagName: data-view.tabs-page-title
+displayName: WrappedDataViewTabsPageTitle
+description: 带有tabs的标题构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewTabsPageTitle
+
+> 带有tabs的标题构件
+
+## 导入
+
+```tsx
+import { WrappedDataViewTabsPageTitle } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性      | 类型         | 必填 | 默认值 | 说明                       |
+| --------- | ------------ | ---- | ------ | -------------------------- |
+| tabList   | `TabsItem[]` | 是   | -      | 标签，如果没有就不展示标签 |
+| activeKey | `string`     | 是   | -      | 标签高亮显示，默认第一个   |
+
+## Events
+
+| 事件        | detail                             | 说明                                                          |
+| ----------- | ---------------------------------- | ------------------------------------------------------------- |
+| onTabChange | `string` — 切换后激活的 tab 的 key | 切换 `tab` 栏会触发的事件，`detail` 为目标 `tab` 对应的 `key` |
+
+## Slots
+
+| 名称      | 说明                       |
+| --------- | -------------------------- |
+| (default) | 默认插槽，用于放置标题内容 |
+| start     | 顶部左边插槽               |
+| end       | 顶部右边插槽               |
+| [key]     | 标签对应的key的插槽        |
+
+## Examples
+
+### Basic
+
+展示带有标题和顶部工具栏的页面标题构件（无标签页）。
+
+```tsx
+<WrappedDataViewTabsPageTitle>
+  <WrappedDataViewTitleText slot="" text="大标题" type="gradient" />
+  <WrappedDataViewBrickNotification
+    slot="start"
+    message="This is the content of the notification."
+  />
+  <div slot="end" style={{ fontSize: "16px", color: "#fff" }}>
+    2022/11/30 17:25 星期四
+  </div>
+</WrappedDataViewTabsPageTitle>
+```
+
+### TabList
+
+展示带有多个标签页的页面标题构件，支持通过 activeKey 指定初始激活标签。
+
+```tsx
+const [activeKey, setActiveKey] = useState("key2");
+
+<WrappedDataViewTabsPageTitle
+  tabList={[
+    { text: "标签1", key: "key1" },
+    { text: "标签2", key: "key2" },
+    { text: "标签3", key: "key3" },
+    { text: "标签4", key: "key4" },
+    { text: "标签5", key: "key5" },
+    { text: "标签6", key: "key6" },
+  ]}
+  activeKey={activeKey}
+  onTabChange={(e) => setActiveKey(e.detail)}
+>
+  <WrappedDataViewTitleText slot="" text="大标题" type="gradient" />
+  <div slot="key1">标签一内容</div>
+  <div slot="key2">标签二内容</div>
+  <div slot="key3">标签三内容</div>
+  <div slot="key4">标签四内容</div>
+  <div slot="key5">标签五内容</div>
+  <div slot="key6">标签六内容</div>
+</WrappedDataViewTabsPageTitle>;
+```

package/docs/tech-mesh-base-view.md

@@ -1,9 +1,28 @@
-构件 `data-view.tech-mesh-base-view`
+---
+tagName: data-view.tech-mesh-base-view
+displayName: WrappedDataViewTechMeshBaseView
+description: 大屏框架构件-网格纹
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# data-view.tech-mesh-base-view
+
+> 大屏框架构件-网格纹
+
+## Slots
+
+| 名称     | 说明         |
+| -------- | ------------ |
+| titleBar | 标题栏插槽   |
+| content  | 页面内容插槽 |
 
 ## Examples
 
 ### Basic TabsTitleBar
 
+展示使用带标签页标题栏的大屏框架构件基础用法。
+
 ```yaml preview
 - brick: data-view.tech-mesh-base-view
   properties:
@@ -41,6 +60,8 @@
 
 ### Sample TitleBar
 
+展示使用顶部标题栏样式为 sample 的大屏框架构件。
+
 ```yaml preview
 - brick: data-view.tech-mesh-base-view
   properties:

package/docs/tech-mesh-base-view.react.md

@@ -0,0 +1,55 @@
+---
+tagName: data-view.tech-mesh-base-view
+displayName: WrappedDataViewTechMeshBaseView
+description: 大屏框架构件-网格纹
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewTechMeshBaseView
+
+> 大屏框架构件-网格纹
+
+## 导入
+
+```tsx
+import { WrappedDataViewTechMeshBaseView } from "@easyops/wrapped-components";
+```
+
+## Slots
+
+| 名称     | 说明         |
+| -------- | ------------ |
+| titleBar | 标题栏插槽   |
+| content  | 页面内容插槽 |
+
+## Examples
+
+### Basic TabsTitleBar
+
+展示使用带标签页标题栏的大屏框架构件基础用法。
+
+```tsx
+<WrappedDataViewTechMeshBaseView style={{ minHeight: "800px" }}>
+  <WrappedDataViewTabsPageTitle slot="titleBar">
+    <WrappedDataViewTitleText slot="" text="大标题" type="gradient" />
+    <WrappedDataViewBrickNotification
+      slot="start"
+      message="This is the content of the notification."
+    />
+    <div slot="end" style={{ fontSize: "16px", color: "#fff" }}>
+      2022/11/30 17:25 星期四
+    </div>
+  </WrappedDataViewTabsPageTitle>
+</WrappedDataViewTechMeshBaseView>
+```
+
+### Sample TitleBar
+
+展示使用顶部标题栏样式为 sample 的大屏框架构件。
+
+```tsx
+<WrappedDataViewTechMeshBaseView style={{ minHeight: "800px" }}>
+  <WrappedDataViewTopTitleBar slot="titleBar" text="可视化大屏" type="sample" />
+</WrappedDataViewTechMeshBaseView>
+```

package/docs/title-text.md

@@ -1,9 +1,31 @@
-构件 title-text
+---
+tagName: data-view.title-text
+displayName: WrappedDataViewTitleText
+description: 大屏标题文本构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.title-text
+
+> 大屏标题文本构件
+
+## Props
+
+| 属性          | 类型                             | 必填 | 默认值     | 说明                                                            |
+| ------------- | -------------------------------- | ---- | ---------- | --------------------------------------------------------------- |
+| text          | `string`                         | 是   | -          | 标题文本                                                        |
+| type          | `TitleType`                      | 是   | `"normal"` | 文本样式，`normal` 纯白， `stroke` 渐变加描边， `gradient` 渐变 |
+| fontSize      | `CSSProperties["fontSize"]`      | 是   | -          | 字体大小                                                        |
+| fontWeight    | `CSSProperties["fontWeight"]`    | 是   | -          | 字体粗细                                                        |
+| letterSpacing | `CSSProperties["letterSpacing"]` | 是   | -          | 字体间距                                                        |
 
 ## Examples
 
 ### Basic
 
+展示默认样式（纯白色）的标题文本。
+
 ```yaml preview
 - brick: data-view.title-text
   properties:
@@ -12,6 +34,8 @@
 
 ### Stroke
 
+展示渐变加描边样式的标题文本。
+
 ```yaml preview
 - brick: data-view.title-text
   properties:
@@ -21,9 +45,25 @@
 
 ### Gradient
 
+展示渐变样式的标题文本。
+
 ```yaml preview
 - brick: data-view.title-text
   properties:
     text: 大标题
     type: gradient
 ```
+
+### Custom Font
+
+展示自定义字体大小、粗细和间距的标题文本。
+
+```yaml preview
+- brick: data-view.title-text
+  properties:
+    text: 自定义字体
+    type: gradient
+    fontSize: 60px
+    fontWeight: 700
+    letterSpacing: 20px
+```

package/docs/title-text.react.md

@@ -0,0 +1,67 @@
+---
+tagName: data-view.title-text
+displayName: WrappedDataViewTitleText
+description: 大屏标题文本构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewTitleText
+
+> 大屏标题文本构件
+
+## 导入
+
+```tsx
+import { WrappedDataViewTitleText } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性          | 类型                             | 必填 | 默认值     | 说明                                                            |
+| ------------- | -------------------------------- | ---- | ---------- | --------------------------------------------------------------- |
+| text          | `string`                         | 是   | -          | 标题文本                                                        |
+| type          | `TitleType`                      | 是   | `"normal"` | 文本样式，`normal` 纯白， `stroke` 渐变加描边， `gradient` 渐变 |
+| fontSize      | `CSSProperties["fontSize"]`      | 是   | -          | 字体大小                                                        |
+| fontWeight    | `CSSProperties["fontWeight"]`    | 是   | -          | 字体粗细                                                        |
+| letterSpacing | `CSSProperties["letterSpacing"]` | 是   | -          | 字体间距                                                        |
+
+## Examples
+
+### Basic
+
+展示默认样式（纯白色）的标题文本。
+
+```tsx
+<WrappedDataViewTitleText text="大标题" />
+```
+
+### Stroke
+
+展示渐变加描边样式的标题文本。
+
+```tsx
+<WrappedDataViewTitleText text="大标题" type="stroke" />
+```
+
+### Gradient
+
+展示渐变样式的标题文本。
+
+```tsx
+<WrappedDataViewTitleText text="大标题" type="gradient" />
+```
+
+### Custom Font
+
+展示自定义字体大小、粗细和间距的标题文本。
+
+```tsx
+<WrappedDataViewTitleText
+  text="自定义字体"
+  type="gradient"
+  fontSize="60px"
+  fontWeight={700}
+  letterSpacing="20px"
+/>
+```

package/docs/top-title-bar.md

@@ -1,16 +1,37 @@
-构件 `data-view.top-title-bar`
+---
+tagName: data-view.top-title-bar
+displayName: WrappedDataViewTopTitleBar
+description: 大屏标题栏三种样式构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.top-title-bar
+
+> 大屏标题栏三种样式构件
+
+## Props
+
+| 属性 | 类型           | 必填 | 默认值     | 说明     |
+| ---- | -------------- | ---- | ---------- | -------- |
+| text | `string`       | 是   | -          | 标题文本 |
+| type | `TitleBarType` | 是   | `"normal"` | 标题类型 |
 
 ## Examples
 
 ### Basic
 
+展示默认（normal）样式的顶部标题栏。
+
 ```yaml preview
 - brick: data-view.top-title-bar
   properties:
     text: 标题
 ```
 
-### Smaple
+### Sample
+
+展示 sample 样式的顶部标题栏。
 
 ```yaml preview
 - brick: data-view.top-title-bar
@@ -21,6 +42,8 @@
 
 ### Square
 
+展示 square 样式的顶部标题栏。
+
 ```yaml preview
 - brick: data-view.top-title-bar
   properties:

package/docs/top-title-bar.react.md

@@ -0,0 +1,50 @@
+---
+tagName: data-view.top-title-bar
+displayName: WrappedDataViewTopTitleBar
+description: 大屏标题栏三种样式构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewTopTitleBar
+
+> 大屏标题栏三种样式构件
+
+## 导入
+
+```tsx
+import { WrappedDataViewTopTitleBar } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性 | 类型           | 必填 | 默认值     | 说明     |
+| ---- | -------------- | ---- | ---------- | -------- |
+| text | `string`       | 是   | -          | 标题文本 |
+| type | `TitleBarType` | 是   | `"normal"` | 标题类型 |
+
+## Examples
+
+### Basic
+
+展示默认（normal）样式的顶部标题栏。
+
+```tsx
+<WrappedDataViewTopTitleBar text="标题" />
+```
+
+### Sample
+
+展示 sample 样式的顶部标题栏。
+
+```tsx
+<WrappedDataViewTopTitleBar text="标题" type="sample" />
+```
+
+### Square
+
+展示 square 样式的顶部标题栏。
+
+```tsx
+<WrappedDataViewTopTitleBar text="标题" type="square" />
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/data-view",
-  "version": "1.12.11",
+  "version": "1.12.13",
   "homepage": "https://github.com/easyops-cn/next-advanced-bricks/tree/master/bricks/data-view",
   "repository": {
     "type": "git",
@@ -44,5 +44,5 @@
     "@next-bricks/basic": "*",
     "@next-bricks/icons": "*"
   },
-  "gitHead": "d2bbede368a80375467072fff541dba9a064ea11"
+  "gitHead": "bfc02e6cd7028ac3f92808235d9f3fcc0dfde393"
 }